/* Banner */
.bannerWrp {background: url(../images/banner_texture.svg) no-repeat left bottom 10% var(--darkBlue); position: relative;} 
.bannerPic img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.bannerText_slider .swiper-slide {height: auto;}
.bannerText {height: 100%; opacity:0; padding: 100px 0; transition:all 1s  ease;z-index:2;-moz-filter: blur(30px);-webkit-filter: blur(30px);filter: blur(30px);transform:translateY(0)}
.swiper-slide-active .bannerText {opacity:1;-moz-filter: blur(0px);-webkit-filter: blur(0px);filter: blur(0px);transform:translateY(0)}
.bannerText h3 {font-size: 2.5rem; color: var(--golden); text-transform: capitalize; font-weight: 700; font-family: 'Cinzel', serif; }
.bannerText h3 span {color: var(--orange);text-transform: uppercase;}
.bannerText p {color: var(--white); font-weight: 300; line-height: 2; font-size:18px;}

.bannerWrp  .swiper-button-prev, .bannerWrp  .swiper-button-next {color: var(--golden); top: 50%; }

.bannerWrp .swiper-button-prev:after{transform: rotate(180deg);}
.bannerWrp .swiper-button-next:after, .bannerWrp .swiper-button-prev:after{background: url(../images/banner_arrow.svg) no-repeat;     color: transparent ; font-size: 4rem !important;}

.scrollBtn{position: absolute; bottom: 50px; left: 50%;  transform: translateX(-40%); display: inline-block; background: #00000080; color: var(--golden); padding: 5px 30px 5px 15px; border-radius: 15px; z-index: 9;  }
.scrollBtn:hover{background: var(--golden); color: var(--black);}
.scrollBtn:before{ width:12px; height:12px;  position: absolute; top:12px; right:5px; color:var(--golden); z-index: 1; content:"\276F"; transform: rotate(90deg); }
.scrollBtn:hover:before{color: #000;}

@media (min-width:991.98px){
    .bannerPic {height: 100%;}
    .bannerPic_wrp {position: absolute; top: 0; right: -15px; height: 100%;}
}
@media (min-width:1200px){
    .bannerWrp { height: 700px;}
}
@media (min-width:1600px){
    .bannerWrp { height: 100vh;}
}

@media (min-width:1800px){
    .bannerWrp { height: 800px;}
}
@media (max-width:1200px){
    .bannerWrp { height: 500px;}
    .scrollBtn{display: none;}
}
@media (max-width:991px){
    .bannerWrp {background: url(../images/banner_texture.svg) no-repeat left bottom 0 var(--darkBlue); position: relative;} 
    .bannerWrp > .container {padding: 0;}
    .bannerText_slider .swiper-slide {height: inherit;}
    .bannerWrp { height: auto;}
    .bannerText {padding: 30px 20px;transform:translateY(30px)}
}
@media (max-width:768px){
    .bannerText h3 {font-size: 2.2rem;}
    .bannerWrp  .swiper-button-prev, .bannerWrp  .swiper-button-next {top: 30%; }
}
@media (max-width:575px){
    .bannerText h3 {font-size: 1.5rem;}
    .bannerText p{line-height: 1.5;}
    .bannerText {padding: 30px 20px 100px 20px;transform:translateY(30px)}
}


/* .overviewPic{position: relative; height: 0; padding-bottom: 60%; overflow: hidden; display: block;}
.overviewPic img{width: 100%; height: 100%; position: absolute; top: 0; left: 0;  object-fit: cover;} */

.overviewPic{position: relative;}
.overviewPic img{width: 100%;}
.overviewPic:before, .overviewPic:after{width: 30%; height: 15%;  position: absolute; content: ""; z-index: -1; }
.overviewPic:before{top: -5px; right: -5px; border-top: 5px solid var(--golden); border-right: 5px solid var(--golden);}  
.overviewPic:after{bottom: -5px; left: -5px;  border-bottom: 5px solid var(--golden); border-left: 5px solid var(--golden);}


.overviewPic_1{position: relative;}
.overviewPic_1 img{width: 100%;}
.overviewPic_1:before{width: 30%; height: 15%;  position: absolute; content: ""; z-index: -1;top: -5px; right: -5px; border-top: 5px solid var(--golden); border-right: 5px solid var(--golden); }

.overviewPic_2{position: relative;}
.overviewPic_2 img{width: 100%;}
.overviewPic_2:before{width: 30%; height: 15%;  position: absolute; content: ""; z-index: -1;top: -5px; left: -5px; border-top: 5px solid var(--golden); border-left: 5px solid var(--golden); }



.projectWrap{background: #f5f5f5;}

.projectPicBox{position: absolute; top: 0; right:0; bottom: 0; overflow: hidden;}
.projectPicBox2{position: absolute; top: 0; left:0; bottom: 0; overflow: hidden;}
.projectPic{height:0; padding-bottom: 120%; position: relative; overflow: hidden; transition: all .3s ease-in-out; }
.projectPic img{width: 100%; height: 70%; position: absolute; object-fit: cover; display: block;}

.featureBox{text-align: center;}
.featureBox .icon{margin-bottom: 20px; position: relative; z-index: 1;}
.featureBox h5{font-weight: 400; font-size: 1rem; line-height: 2;}

.stepsWrap{background: var(--darkBlue); min-height: 400px; position: relative;}
.stepsWrap .pattern_1{ width: 30%;  height: 100%; position: absolute; left: 0; top: 0;background: url(../images/step_pattern.jpg) no-repeat ; background-size: cover;   }
.stepsWrap .pattern_2{ width: 30%;  height: 100%; position: absolute; right: 0; top: 0;background: url(../images/step_pattern.jpg) no-repeat ; background-size: cover; transform:rotateY(180deg); }
.stepContent{z-index: 1;}
.stepContent p{color: var(--white);}

.sustainBrief{color: var(--white);}
.sustainPicHome img {width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.sustainBrief{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: transparent; background: linear-gradient(0deg, #151835 10%, rgb(0 0 0 / 0%) 70%);}

.sustainBrief h4{font-weight: 400; line-height: 1.5; font-size: 1.1rem;  position: relative;}
.sustainBrief h4:before{width: 3px; background: var(--golden); position: absolute; left: 0; top: 5px; bottom: 6px; content: "";}

.sustainerSlider .swiper-pagination{bottom: 20%;  color: var(--golden); text-align: right; padding-right: 50px; font-size: 1.2rem;}

.sustainArwPrev, .sustainArwNext{bottom: 10% !important; top: auto !important; width: 34px !important; height: 26px !important; transition: all .3s ease-in-out;}
.sustainArwNext{right:50px!important; background: none !important; }
.sustainArwNext:hover{right: 45px !important;}
.sustainArwPrev{left:auto !important; right:100px !important;}
.sustainArwPrev:hover{right:105px !important;}
.sustainArwPrev:after, .sustainArwNext:after{background: url(../images/slide_arrow.svg) no-repeat; width: 34px; height: 26px; }
.sustainArwPrev:after{transform: rotate(180deg);}

.galleryBox{height:0; padding-bottom:70%; position: relative; overflow: hidden; transition: all .3s ease-in-out; }
.galleryBox img{width: 100%; height: 100%; position: absolute; object-fit: cover; display: block;}

.relatedLinks{color: var(--white);}
.relatedLinks h3{border-right: 1px solid #ffffff50;}
.relatedLinks ul li a{font-weight: 700; font-size: 1.2rem; text-transform: uppercase; transition: all .3s ease;}
.relatedLinks ul li a:hover{color: var(--darkBlue);}

.aboutWrap{position: relative; min-height: 500px; background: url(../images/about_bg.png) no-repeat left bottom;}
.aboutPic1 img{margin: auto;}

.contactWrap{position: relative;}
.contactPic{height:0; padding-bottom:40%; position: relative; overflow: hidden; transition: all .3s ease-in-out; }
.contactPic img{width: 100%; height: 100%; position: absolute; object-fit: cover; display: block;}
.contactBrief{position: absolute; top: 50px; left: 0; right: 0;}

@media (max-width:991px){
    .projectPicBox, .projectPicBox2{position: static;}
    .projectPic img, .projectPic2 img{height: 100%;}    
    .relatedLinks h3{border-right: 0;}
    .relatedLinks ul li a{padding: 8px 15px; font-size: 1rem; font-weight:400; display: inline-block; background: #af8c4b; margin-bottom: 10px; border-radius: 5px;}
}

@media (max-width:768px){
    .sustainBrief{background: linear-gradient(0deg, #151835 10%, rgb(0 0 0 / 50%) 70%);}
    .sustainBrief h4{font-size: .9rem;}
    .sustainerSlider .swiper-pagination{padding-right: 20px; font-size: .8rem;}
    .sustainArwPrev, .sustainArwNext{bottom: 5% !important; top: auto !important; width: 25px !important; height: 20px !important; background-size: contain;}
    .sustainArwPrev:after, .sustainArwNext:after{width: 25px; height: 20px; background-size: contain;}    
    .sustainArwNext{right:25px!important; background: none !important; }
    .sustainArwNext:hover{right: 20px !important;}
    .sustainArwPrev{left:auto !important; right:60px !important;}
    .sustainArwPrev:hover{right:55px !important;}
    .relatedLinks ul li a{padding: 8px 15px; font-size: .8rem;}
    .aboutPic1 img{width: 100%;}
    .contactPic{padding-bottom:140%;}
}   

.swiper-button-next:after, .swiper-button-prev:after{font-size: 0 !important;}