body {
    margin:0;
    padding:0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'ReclineRegular'; 
}
p,
a {
    font-family: 'DINNextArabicRegular';
}

/*--------------------------------------------------------------
# About Us - Banner Section
--------------------------------------------------------------*/
.abt-banner img {
    position:relative;
    height:100vh;
}
.abt-banner .abt-content {
    position:absolute;
    bottom:15%;
    color:#fff;
    width:100%;
    text-align:center;
}
.abt-banner h1, .abt-banner h2, .abt-banner h3, .abt-banner h4, .abt-banner h5, .abt-banner h6 {
    /* text-transform:uppercase; */
    font-size: 40px;
    margin: 0 auto;
    width: 80%;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.abt-banner p {
    text-transform:capitalize;
    font-size:24px;
}
@media (max-width:767px) {
    .abt-banner img {
    position: relative;
    height: 45vh;
    object-fit: cover;

    }
.abt-banner {
    height:45vh;
    position: relative;
}
.abt-banner .abt-content {
    bottom:8%;
    padding: 0 15px;
}
.abt-banner h1,
.abt-banner h2,
.abt-banner h3,
.abt-banner h4,
.abt-banner h5,
.abt-banner h6 {
    font-size:23px;
    margin-bottom:10px;
    width: auto;
}
.abt-banner p {
    font-size: 15px;
}
}
@media (min-width:768px) and (max-width:1024px) {
.abt-banner h1,
.abt-banner h2,
.abt-banner h3,
.abt-banner h4,
.abt-banner h5,
.abt-banner h6{
    font-size:36px;
}
.abt-banner  p {
    font-size:14px;
}
}
/*--------------------------------------------------------------
# About Us - Our Vision
--------------------------------------------------------------*/
.abt-vision {
    background-color: #333;
    color: #fff;
    margin: 50px 0 150px;
    height: 450px;
    align-items: center;
    display: flex;
}
.abt-vision h1, .abt-vision h2, .abt-vision h3, .abt-vision h4, .abt-vision h5, .abt-vision h6{
    font-size: 60px;
    max-width: 40%;
    line-height: 60px;
}
.abt-vision p {
    font-size: 20px;
    max-width: 90%;
}
.abt-mission {
    position: relative;
}
.abt-vision {
    position: relative;
   
}
.right-image {
    /* position: absolute;
    top:-90px;
    right: 0;
    bottom: 0; */
    transition: transform 5s; /* Standard syntax */
    -webkit-transition: -webkit-transform 6s; /* Safari and Chrome */
    -moz-transition: -moz-transform 6s; /* Firefox */
    -ms-transition: -ms-transform 6s; /* Internet Explorer */
    -o-transition: -o-transform 6s; /* Opera */
}
[dir="rtl"] .right-image {
    position: absolute;
    top:-90px;
    left: 0;
    bottom: 0;
    transition: transform 5s; /* Standard syntax */
    -webkit-transition: -webkit-transform 6s; /* Safari and Chrome */
    -moz-transition: -moz-transform 6s; /* Firefox */
    -ms-transition: -ms-transform 6s; /* Internet Explorer */
    -o-transition: -o-transform 6s; /* Opera */
}
.fixed-image {
    transition: transform 5s; /* Standard syntax */
    -webkit-transition: -webkit-transform 6s; /* Safari and Chrome */
    -moz-transition: -moz-transform 6s; /* Firefox */
    -ms-transition: -ms-transform 6s; /* Internet Explorer */
    -o-transition: -o-transform 6s; /* Opera */
}
[dir="rtl"] .fixed-image {
    transition: transform 5s; /* Standard syntax */
    -webkit-transition: -webkit-transform 6s; /* Safari and Chrome */
    -moz-transition: -moz-transform 6s; /* Firefox */
    -ms-transition: -ms-transform 6s; /* Internet Explorer */
    -o-transition: -o-transform 6s; /* Opera */
}
@media (max-width:767px) {
.abt-vision .container {
    display:flex;
}
.abt-vision img {
    /* margin-top: -130px; */
}
.abt-vision .div1 {
    
    position: absolute;
    bottom: 0;
}
.abt-vision .div2 {
    order:1;
}
.right-image {
    position:relative;
    transform: translateY(0%) !important;
    top:-70px;
}
.abt-vision {
    background-color: #333;
    color: #fff;
    margin: 100px 0 50px;
    padding: 25px 0 150px;
}
.abt-vision h1,
.abt-vision h2,
.abt-vision h3,
.abt-vision h4,
.abt-vision h5,
.abt-vision h6 {
    font-size: 32px;
    max-width: 40%;
    line-height: 32px;
    padding: 0 0 0 30px;
    margin-top: -40px;
}
.abt-vision p {
    padding: 0 0 20px 30px;
    font-size:15px;
}
}
@media (min-width:768px) and (max-width:1024px) {
.abt-vision h1,
.abt-vision h2,
.abt-vision h3,
.abt-vision h4,
.abt-vision h5,
.abt-vision h6  {
    font-size:40px;
    max-width:40%;
    line-height:40px;
}
.abt-vision p {
    font-size:15px;
    max-width:90%;
}
.abt-vision {
    background-color:#333;
    color: #fff;
    margin:50px 0 50px;
    height:330px;
    align-items:center;
    display:flex;
}
.abt-vision img {
    position:relative;
    top:-50px;
    max-width:90%;
}
}
/*--------------------------------------------------------------
# About Us - Our Mission
--------------------------------------------------------------*/
.abt-mission {
    margin:130px 0 100px;
}
.abt-mission h1, .abt-mission h2, .abt-mission h3, .abt-mission h4, .abt-mission h5, .abt-mission h6 {
    font-size:60px;
    max-width:40%;
    line-height:69px;
    margin-top:60px;
}
.abt-mission p {
    font-size:20px;
    max-width:90%;
    /* line-height:26px; */
}
.abt-mission .firstimage {
    position: relative;
}
.abt-mission .secondimage {
    position: absolute;
    left: 160px;
    top: 70px;
    z-index: 999;
}
@media (max-width:767px) {
.abt-mission h1,
    .abt-mission h2,
    .abt-mission h3,
    .abt-mission h4,
    .abt-mission h5,
    .abt-mission h6 {    
    font-size:32px;
    max-width:40%;
    line-height:36px;
    margin-top:25%;
}
.firstimage img , .secondimage img {
    /* width:170px; */
}
.abt-mission {
    margin:50px 15px 60px;
}
.abt-mission .secondimage {
    position: absolute;
    left:130px;
    top:70px;
    z-index: 999;
}
.abt-mission p {
    font-size: 15px;
    max-width: 100%;
    /* line-height: 20px; */
    color: #333;
}
}
@media (min-width:768px) and (max-width:1024px) { 
.firstimage img , .secondimage img {
     /* width:200px; */
}
.abt-mission .secondimage {
    position: absolute;
    left: 130px;
    top: 70px;
    z-index: 999;
}
.abt-mission h1,
.abt-mission h2,
.abt-mission h3,
.abt-mission h4,
.abt-mission h5,
.abt-mission h6 {
    font-size: 40px;
    max-width: 40%;
    line-height: 40px;
    }
.abt-mission p {
    font-size: 16px;
    max-width: 100%;
    /* line-height:20px; */
}
}
@media(min-width:992px) {
[dir="ltr"] .abt-mission .firstimage {
    position: relative;
    margin-left:20%;
}
[dir="rtl"] .firstimage {
    position: relative;
    margin-right:20% !important;
}
[dir="rtl"] .secondimage {
    position: absolute;
    left: 80px !important;
    top: 70px;
    z-index: 999;
}
}
/*--------------------------------------------------------------
# About Us - Our Team
--------------------------------------------------------------*/
.abt-team {
    margin-bottom:100px;
    text-align:center;
    padding-top: 50px;
}
.abt-team h1, .abt-team h2, .abt-team h3 {    
    color: #3c3c3c;
    font-size:60px;
    line-height:69px;
    margin-bottom:50px;
    text-align:center;
}
.abt-team img {
    width:100%;
    height: auto;
}
.abt-team h4, .abt-team h5, .abt-team h6 {
    color:#3c3c3c;
    font-size: 20px;
    margin:15px 0 0;
}
.abt-team p {
    color: #3c3c3c;
    font-size: 16px;
    margin-bottom:30px;
}
@media(max-width:767px) {
.abt-team .col-md-4 {
    width:50%;
}
.abt-team img {
    width:90%;
    height:auto;
}
.abt-team h3 {
    font-size:32px;
    line-height:36px;
    margin-bottom:40px;
    text-align: center;
}
.abt-team {
    margin: 60px 0 30px;
    text-align: center;
    padding-top: 0;
}
}
@media(min-width:768px) and (max-width:1024px) {
.abt-team h3 {
    font-size: 40px;
    line-height: 40px;
    margin-bottom: 50px;
    text-align: center;
}
}
/*--------------------------------------------------------------
# About Us - Sustain Section
--------------------------------------------------------------*/
.spira-sustain {
    background-image:url('../images/sustain-bg.svg');
    background-size:cover;
    background-repeat:no-repeat; 
    color:#fff;
    padding:40px;
}
/* .realize-spira {
    position: relative;
    z-index: 1;
  }
  .fixed-section {
    position: fixed;
    top: 0;
    width: 100%;
  } */
  .spira-sustain h4 {
    font-size:40px;
}
.spira-sustain p {
    opacity:0.6;;
}
.sustain-content {
    padding:40px;
}
@media(max-width:767px) {
.spira-sustain h4 {
    font-size: 26px;
}
.spira-sustain {
    padding: 25px 30px;
}
.sustain-content {
    padding:10px 30px 0px;
}
.spira-sustain img {
    max-width: 100%;
    object-fit: cover;
}
.spira-sustain p {
    opacity: 0.6;
    font-size: 15px;
    line-height: 20px;
}
}
@media(min-width:768px) and (max-width:1024px) {
.spira-sustain h4 {
    font-size: 30px;
}
.spira-sustain img {
    max-width:100%;
}
}
/*--------------------------------------------------------------
# About Us - Realize Spira Section Start
--------------------------------------------------------------*/
.realize-spira {
    background-image: url('../images/aboutus/realize-spira-bg.svg'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover;
    height:500px;
    position:relative;
}

.realize-spira h1, .realize-spira h2, .realize-spira h3, .realize-spira h4, .realize-spira h5, .realize-spira h6 {
    text-transform: uppercase;
    color: #fff;
    font-size: 60px;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 45%;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
@media(max-width:767px) {
.realize-spira img {
    max-width: 100%;
}
.realize-spira {
    background-position: center;
}
.realize-spira h1,
.realize-spira h2,
.realize-spira h3,
.realize-spira h4,
.realize-spira h5,
.realize-spira h6 {
    position: absolute;
    top: 45%;
    text-transform: uppercase;
    color: #fff;
    font-size: 24px;
    text-align: center;
    width: 100%;
    font-weight: 400;
    letter-spacing:2px;
}
}
@media (min-width:768px) and (max-width:1024px) {
.realize-spira h1,
.realize-spira h2,
.realize-spira h3,
.realize-spira h4,
.realize-spira h5,
.realize-spira h6 {
    top: 45%;
    font-size: 40px;
}
.realize-spira img {
    max-width: 100%;
}
}
@media only screen and (max-width: 468px) {
    .abt-mission .firstimage {
        /* text-align: center; */
    }
    .abt-mission .secondimage {
        /* left: 45px; */
        left: unset;
        right: 0;
    }
    .abt-mission h1,
    .abt-mission h2,
    .abt-mission h3,
    .abt-mission h4,
    .abt-mission h5,
    .abt-mission h6  {
        margin-top: 33%;
    }
}