.innerBanner{position: relative; height: 0; padding-bottom: 30%; overflow: hidden; }
.innerBanner img{width: 100%; height: 100%; position: absolute; object-fit: cover; display: block;}
.innerBanner:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #00000080; content: "";}
.innerBannerText{position: absolute; left: 0; right: 0; top: 0; bottom: 0;  z-index: 1; justify-content: center; align-items: center; display: flex; text-align: center;}

h1.pageTitle{font-size: 2.5rem; font-weight: 700; color: var(--golden); text-transform: uppercase;font-family: 'Cinzel', serif;}
.breadCrumb{color: var(--white); display: block;}
.breadCrumb li{display: inline-block; padding: 0 15px; position: relative; font-size: 1.2rem; letter-spacing: 2px;}
.breadCrumb li:not(:last-child):after{position: absolute; right: -5px; content: "/"}
.breadCrumb li a:hover{color: var(--golden);}

.sustainBoxWrap{width: 100%; height: 100vh;} 
.sectionSwiper {width: 100%;height: 100vh;  }

.sustainPic{height:0; padding-bottom:100vh; position: relative; overflow: hidden; transition: all .3s ease-in-out; }
.sustainPic:after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #00000040; content: "";}
.sustainPic img{width: 100%; height: 100%; position: absolute; object-fit: cover; display: block;}


.sustainDetails{position: absolute; left: 0; right: 0; top: 20%; bottom: 20%;  z-index: 9;}
.sustainBox{height: 100%; background: #00000070; border: 1px solid var(--golden); color: var(--white);}
.sustainBox h4{color: var(--white); position: relative; padding-bottom: 25px; margin-bottom: 25px; font-size: 1.4rem; font-weight: 600; letter-spacing: 2px;}
.sustainBox h4:after{width: 80%; height: 1px; background: var(--golden); position: absolute; left: 0; bottom: 0; content: "";}
.sectionSwiper .swiper-pagination-bullet{background: transparent; opacity: 1; width: 20px; height: 20px; margin-bottom: 10px !important;position: relative; border: 2px solid transparent; }
.sectionSwiper .swiper-pagination-bullet:before{width: 8px; height: 8px; background:var(--white); border-radius: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; content: "";} 
.sectionSwiper .swiper-pagination-bullet-active{border: 2px solid var(--golden); }
.sectionSwiper .swiper-pagination-bullet-active:before{background:var(--golden); }
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets{right: 20px;}
.sectionSwiper .swiper-pagination-bullet:last-child{display: none;}

.contactIcon{width: 40px; height: 40px; border-radius: 50%; background:var(--golden); display: block; transition: all .3s ease; display: flex; justify-content: center; align-items: center;}
.contactIcon img{place-self: center;}
.contactBox span{font-weight: 600; font-size: 1.2rem; margin-bottom: 10px;}

.golodenBorder{background:var(--golden); height: 1px !important; opacity: 1; margin: 60px  0;} 

.contactForm h5{font-weight: 400;}
.contactForm h5 span{display: block; font-weight: 600; line-height: 2.5;}

.contactForm .form-control, .contactForm .form-select{padding: 20px 25px; border:1px solid #d9d9d9; border-radius: 0; letter-spacing: 2px; color: #878787;}
.contactForm .form-control:hover, .contactForm .form-select:hover, .contactForm .form-control:focus, .contactForm .form-select:focus{border: 1px solid var(--golden); box-shadow: none;}

.locationMap iframe{width: 100%; height: 600px;}

.aboutBrief{overflow: auto; direction: rtl; text-align: left;}

.pioneerWrap{position: relative;}
.pioneerWrap:before{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--black); opacity: .5; z-index: 1; content: "";}
.pioneerPic{height:0; padding-bottom:35%; position: relative; overflow: hidden; transition: all .3s ease-in-out; }
.pioneerPic img{width: 100%; height: 100%; position: absolute; object-fit: cover; display: block;}
.pioneerBrief{position: absolute; top:0; bottom: 0; left: 0; right: 0; z-index: 1;}

.pioneerDetail{display: flex; justify-content: center; align-items: center;}
.pioneerDetail > div{place-self:center;}

.poineerLogo{height: 100%; background: var(--white); text-align: center; padding: 15px; display: flex; justify-content: center; align-items: center;}
.poineerLogo img{place-self: center; max-width: 100px;}

.rfBox{padding: 15px; border: 1px solid  var(--golden); text-align: center; background: var(--white);  height: 100%;}
.rfBox img{margin-bottom: 15px; height: 80px; width: auto;}
.cityName{font-size: 1.2rem; text-transform: uppercase;}



.hometabSlider {border-right: 1px solid #ededed;}
.hometabSlider .slick-track {display: flex;}
.hometabSlider .slick-track .slick-slide {height: inherit;}
/* .hometabSlider  div{margin: 0 30px;} */
.hometabSlider  div:not(:first-child){margin-right:0;}
.hometabSlider  div:not(:last-child){margin-left:0;}

.hometabSlider button {font-size: 1.5rem; font-weight: 600; text-transform: capitalize; background: none; display: table; margin: 0 auto; color: var(--black); width: 100%; height: 100%; display: block; border: 0; position: relative; padding: 0 10px 0 40px; transition: all 0.3s ease-in-out;}
.hometabSlider button:before{width: 2px;; height: 0; background: var(--golden); position: absolute; left: 0; top: 0; content: "";  transition: all 0.3s ease-in-out; }

.hometabSlider button a{color: var(--orange); border-bottom: 1px solid var(--orange); padding-right:25px; position: relative; padding-bottom: 4px;}
.hometabSlider button a:after{width: 16px; height: 16px; background:url(../images/right_arrow.svg) no-repeat ; position: absolute; right: 0; top: 0; content: ""; }

.psn{display: none;}
.psn P, .psn a{font-size: 1rem;  margin-bottom: 0;}

.hometabSlider button.active .psn{display: block; font-weight: 300;}


.hometabSlider button.active .planPoint{display: block;}


.hometabSlider button:hover:before, .hometabSlider button.active:before{height: 100%;}

.hometabSlider button.active{ font-size: 2.2rem;}

@media (max-width:1200px){
  .rfBox img{height: 60px;}
}

@media (max-width:991px){
  .golodenBorder {margin: 30px 0;}
  .pioneerPic{padding-bottom: 60%;}
  
}


@media (max-width:768px){
  .innerBanner{padding-bottom: 100%;}
  h1.pageTitle{font-size: 2rem;}
  .breadCrumb li{font-size: 1.1rem;}

  .contactForm .form-control, .contactForm .form-select{padding: 10px 15px;}
  .pioneerPic{padding-bottom: 80%;}
  .poineerLogo img{max-width: 60px;}
  .rfBox img{height: 50px;}
  .cityName{font-size: 1rem;}
}

.overview-section{
    padding:80px 0;
}