/* common css */
.envir-common-heading {font-family: "Playfair Display", serif; font-size: 40px; line-height: 1.3; font-weight: 500; color: #333;} 
.envir-common-sub-title{font-size: 20px; font-weight: 700; color: #333; line-height: 1; margin-top: 10px;}
.envir-common-data {font-size: 16px; line-height: 1.5; color: #333; text-align: left; margin-top: 15px;}
.envir-common-data a{display: inline-block; color: #333; text-decoration: underline;}
a.enviro-btn{display: block; position: relative; font-size: 14px; font-weight: 500; color: #333; line-height: 1; display: flex; align-items: center; width: max-content; transition: all 0.3s;}
a.enviro-btn::after{position: relative; content: ""; margin-left: 0.4em; bottom: unset; border-top: 2px solid #333; border-right: 2px solid #333; rotate: 45deg; width: 5px; height: 5px; display: block;}
a.enviro-btn:hover::before{content: ""; margin-left: 0.4em; bottom: unset; border-top: 2px solid #333; border-right: 2px solid #333; rotate: 45deg; width: 5px; height: 5px; display: block; position: absolute; right: -5px;  transition: all 0.5s; opacity: 0.5;}
.common-top-bar{width: 115px; height: 3px; background-color: #333; margin-bottom: 20px;}
.common-text-wrapper .common_btn{margin-top: 20px;}

@media (max-width: 1280px) {

  .envir-common-heading {font-size: 36px;}
  .envir-common-sub-title{font-size: 18px;}

}
@media (max-width: 1024px) {

  .envir-common-heading {font-size: 28px;}

}
@media (max-width: 767px) {

  .envir-common-heading {font-size: 24px;}
  .envir-common-data{font-size: 14px; margin-top: 10px;}
  .common-top-bar{margin-bottom: 15px;}
  .envir-common-sub-title{font-size: 16px;}


}

/* banner section css start */
.environment-banner{position: relative;}
.enviro-banner-text{width: 100%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background: linear-gradient(0deg, rgba(51, 51, 51, 0.6) 40%, rgba(51, 51, 51, 0) 95%); box-shadow: unset;}
.envir-banner-title{font-family: "Playfair Display", serif; text-transform: capitalize; font-size: 50px; font-weight: 400; color: #fff; line-height: 1.2; padding: 40px 0;}
.environment-banner picture img{width: 100%; height: auto; object-fit: cover; }

@media screen and (min-width:1024px) {

  .environment-banner picture img{aspect-ratio: 3.2;}
}

@media screen and (max-width:1400px) {

  .envir-banner-title{font-size: 40px;}
}

@media screen and (max-width:1199px) {

  .envir-banner-title{font-size: 36px; padding: 30px 0;}
}

@media screen and (max-width:767px) {

  .envir-banner-title{font-size: 24px; padding: 20px 0;}
}

/* banner section css end */


/* text section css start */
.text-section{background-color: #ece9e5; padding: 40px 0;}
.text-section .envir-common-data{max-width: 980px;}

@media screen and (max-width:767px) {

  .text-section{padding: 20px 0;}
}

/* text section css end */


/* sand texture css start */
.sand-texutre-wrapper{display: flex; gap: 30px;}
.sand-texture-left{width: 75%;}
.sand-texture-left img{width: 100%; height: 100%; object-fit: cover;}
.sand-texture-right{width: 25%;}
.sand-texutre-wrapper .enviro-btn{margin-top: 20px;}
.sand-texutre-wrapper .envir-common-heading{font-weight: 100;}
.sand-overlap-img{display: flex; justify-content: flex-end; width: 33%; height: auto; margin-left: auto; margin-top: -200px;}
.sand-overlap-img img{width: 100%; height: 100%; border: 5px solid #fff;}

@media screen and (max-width:1300px) {

  .sand-overlap-img{margin-top: -150px;}
}

@media screen and (max-width:1199px) {

  .sand-texture-left{width: 70%;}
  .sand-texture-right{width: 30%;}
  .sand-overlap-img{width: 37%;}
}

@media screen and (max-width:1099px) {

  .sand-overlap-img{margin-top: -100px; width: 43%;}
  .sand-texutre-wrapper{gap: 20px;}
  .sand-texture-left{width: 65%;}
  .sand-texture-right{width: 35%;}

}

@media screen and (max-width:991px) {

  .sand-overlap-img{margin-top: -50px;}
}

@media screen and (max-width:767px) {

  .sand-overlap-img{display: none;}
  .sand-texture-left{width: 100%;}
  .sand-texture-right{width: 100%;}
  .sand-texutre-wrapper{flex-direction: column;}
  .sand-texutre-wrapper .enviro-btn{margin-top: 15px;}
}
  
/* sand texture css end */


/* envir common card css start */
.envir-common-card-wrapper{display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px 20px;} 
.envir-common-card{background-color: #ece9e5; height: 100%;}
.envir-common-card-img img{width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 1.6/1.1;}
.envir-common-card-text{padding: 20px;}
.envir-card-title{font-family: "Playfair Display", serif; font-size: 30px; font-weight: 500; color: #333; margin-bottom: 10px;}

.envir-common-card-b-section .envir-common-card-wrapper{display: flex; justify-content: flex-end; gap: 30px 0; flex-wrap: wrap;}
.envir-common-card-b-section .envir-common-card-wrapper .envir-common-card{width: calc(25% - 20px); margin: 0 10px; height: auto;}
.envir-common-card-b-section .envir-common-card-img img{aspect-ratio: 2.3/1;}

.fine-frame-card-section .envir-common-card-img{overflow: hidden;}
.fine-frame-card-section .envir-common-card-img img{aspect-ratio: 14/9; transition: all 0.3s;}
.fine-frame-card-section .envir-common-card-img:hover img{scale: 1.1; transition: all 0.3s;}


@media screen and (max-width:1400px) {

  .envir-card-title{font-size: 24px;}
}

@media screen and (max-width:1150px) {

  .envir-common-card-b-section .envir-common-card-wrapper .envir-common-card{width: calc(33.33% - 20px);}
}

@media screen and (max-width:991px) {

  .envir-card-title{font-size: 22px;}
  .envir-common-card-text{padding: 15px;}
  .envir-common-card-wrapper{gap: 40px 20px; grid-template-columns: repeat(2, 1fr);}
  .envir-common-card-b-section .envir-common-card-wrapper .envir-common-card{width: calc(50% - 20px);}
}

@media screen and (max-width:700px) {

  .envir-card-title{font-size: 20px;}
  .envir-common-card-wrapper{gap: 20px; grid-template-columns: repeat(1, 1fr);}
  .envir-common-card-b-section .envir-common-card-wrapper .envir-common-card{width: 100%; margin: 0;}
}

/* envir common card css end */


/* amber css start */
.amber-section .sand-overlap-img{margin-top: -100px; margin-left: 0;}

@media screen and (max-width:1300px) {
  
  .amber-section .sand-overlap-img{margin-top: -60px;}
}

@media screen and (max-width:991px) {
  
  .amber-section .sand-overlap-img{margin-top: -30px;}
}

@media screen and (min-width:767px) {
  
  .amber-section{padding-bottom: 0;}
  
}

/* amber css end */


/* honey css start */
.honey-section .sand-overlap-img{margin-top: 0;}
.honey-section .sand-texture-left{margin-top: -15%; height: 100%;}
.honey-section .sand-texture-right{margin-top: 40px;}

@media screen and (max-width:767px) {
  
  .honey-section .sand-texutre-wrapper{flex-direction: column-reverse;}
  .honey-section .sand-texture-left{margin-top: 0;}
  .honey-section .sand-texture-right{margin-top: 0;}
  
}

/* honey css end */


/* common text section css start */
.common-text-wrapper{text-align: center; margin: auto; max-width: 800px;}
.common-text-wrapper .common-top-bar{margin: auto; margin-bottom: 20px;}
.common-text-wrapper .envir-common-data{text-align: center;}

/* common text section css end */


/* decor section css start */
.decore-section{padding-top: 0;}
.decore-wrapper{display: flex; gap: 80px;}
.decore-left{width: 33%; margin-top: -100px; height: 100%;}
.decore-left img{width: 100%; height: 100%; border: 5px solid #fff; min-height: 150px}
.decore-right{width: 33%; padding-top: 30px;}
.decore-right .envir-common-heading{font-weight: 100;}

@media screen and (max-width:1400px) {

  .decore-wrapper{gap: 40px;}
  .decore-left{margin-top: -50px;}
  .decore-right{padding-top: 20px;}
}

@media screen and (max-width:767px) {

  .decore-left{display: none;}
  .decore-right{width: 100%;}
}

/* decor section css end */


/* fine frame css start */
.fine-frame-section{margin-bottom: 30px;}
.fine-frame-wrapper{display: flex; gap: 20px;}
.fine-frame-left{width: 30%;}
.fine-frame-right{width: 70%; height: auto;}
.fine-frame-right img{width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 1/0.1;}
/* .fine-frame-title{font-size: 30px; font-weight: 500; color: #333; line-height: 1.4;} */
.fine-frame-wrapper .envir-common-data{padding-bottom: 20px;}
.fine-frmae-left-img img{width: 100%; height: 100%; object-fit: cover; display: block;}

/* .sliding-door-section .fine-frame-right img{aspect-ratio: inherit;} */
.sliding-door-section .fine-frame-right{display: flex; gap: 20px; flex-direction: column;}
.fine-frmae-top-img img{aspect-ratio: 1/0.5;}
.fine-frmae-bottom-img img{aspect-ratio: inherit; width: inherit; width: 70%;}

@media screen and (max-width:1400px) {

  /* .fine-frame-title{font-size: 24px;} */
}

@media screen and (max-width:991px) {

  /* .fine-frame-title{font-size: 22px;} */
  .fine-frmae-bottom-img img{width: 100%;}
}

@media screen and (max-width:767px) {

  .fine-frame-section{margin-bottom: 20px;}
  .fine-frame-wrapper{flex-direction: column;}
  .fine-frame-left{width: 100%;}
  .fine-frame-right{width: 100%;}
  .fine-frame-right img{aspect-ratio: inherit;}

}

/* fine frame css end */


/* handleless section css start */
.handleless-section .sand-texutre-wrapper{align-items: center;}
.handleless-section .sand-overlap-img{margin-top: -15%;}

@media screen and (max-width:991px) {

  .handleless-section .sand-texutre-wrapper{align-items: inherit;}
}

/* handleless section css end */


/* nbox section */
.nbox-section{padding-top: 0;}
.nbox-wrapper{display: flex; gap: 20px;}
.nbox-left{width: 66.66%;}
.nbox-right{width: 33.33%;}
.nbox-left img{width: 100%; height: 100%;}
.nbox-right img{width: 100%; height: 100%;}

.nbox-card-wrapper{display: flex; gap: 20px; flex-wrap: wrap;}
.nbox-card{width: 32%;}
.nbox-card img{width: 100%; height: 100%; object-fit: contain; aspect-ratio: 3.6/2.7;}
.nbox-card-text{padding: 20px;}
.nbox-card-text .envir-common-heading{font-weight: 100;}


@media screen and (max-width:991px) {

  .nbox-card{width: 50%;}
}

@media screen and (max-width:767px) {

  .nbox-wrapper{flex-direction: column;}
  .nbox-left{width: 100%;}
  .nbox-right{width: 100%;}
  .nbox-card{width: 100%;}
  .nbox-card-text{padding: 10px;}
}