/* ==========================
   GREEN HOME PAGE
========================== */

.greenHomePage{
  background:#F8F5F0;
  color:#3D352B;
}

.greenHomePage .container{
  width:100%;
  max-width:1180px;
  margin:auto;
  padding:0 30px;
}

.greenHomePage .subTitle,
.greenHomePage .titleBox span,
.greenConcept span,
.greenCta span{
  display:block;
  margin-bottom:14px;
  color:#C5A36A;
  font-size:12px;
  letter-spacing:4px;
}

.greenHomePage h1,
.greenHomePage h2{
  color:#3D352B;
  font-weight:300;
  line-height:1.35;
}

.greenHomePage p{
  color:#666;
  font-size:16px;
  line-height:2;
}

/* intro */

.greenIntro{
  padding:95px 0 100px;
}

.greenIntro .container{
  display:grid;
  grid-template-columns:42% 1fr;
  gap:70px;
  align-items:center;
}

.greenIntro h1{
  margin:0 0 28px;
  font-size:52px;
}

.greenIntro p{
  margin:0;
}

.greenIntroImg img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

/* concept */

.greenConcept{
  padding:95px 0;
  background:#fff;
}

.greenConcept .container{
  display:grid;
  grid-template-columns:38% 1fr;
  gap:80px;
}

.greenConcept h2{
  margin:0;
  font-size:42px;
}

.conceptText{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
}

.conceptText p{
  margin:0;
}

/* points */

.greenPoint{
  padding:105px 0 60px;
}

.pointItem{
  position:relative;
  display:grid;
  grid-template-columns:52% 1fr;
  gap:70px;
  align-items:center;
  margin-bottom:110px;
}

.pointItem.reverse{
  grid-template-columns:1fr 52%;
}

.pointItem.reverse .pointImg{
  order:2;
}

.pointItem.reverse .pointTxt{
  order:1;
}

.pointNum{
  position:absolute;
  top:-38px;
  left:0;
  z-index:2;
  color:rgba(197,163,106,.28);
  font-size:110px;
  font-weight:300;
  line-height:1;
}

.pointItem.reverse .pointNum{
  left:auto;
  right:0;
}

.pointImg{
  overflow:hidden;
}

.pointImg img{
  width:100%;
  height:460px;
  object-fit:cover;
  display:block;
}

.pointTxt{
  position:relative;
  z-index:3;
}

.pointTxt h2{
  margin:0 0 24px;
  font-size:42px;
}

.pointTxt p{
  margin:0;
}

/* compare */

.greenCompare{
  padding:95px 0;
  background:#fff;
}

.titleBox.center{
  text-align:center;
  margin-bottom:55px;
}

.titleBox.center h2{
  margin:0;
  font-size:42px;
}

.compareGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.compareItem{
  padding:42px;
  background:#F8F5F0;
  border:1px solid rgba(197,163,106,.24);
}

.compareItem.highlight{
  background:#3D352B;
}

.compareItem h3{
  margin:0 0 28px;
  color:#3D352B;
  font-size:28px;
  font-weight:300;
}

.compareItem.highlight h3{
  color:#fff;
}

.compareItem ul{
  padding:0;
  margin:0;
  list-style:none;
}

.compareItem li{
  position:relative;
  padding-left:22px;
  margin-bottom:14px;
  color:#666;
  line-height:1.8;
}

.compareItem.highlight li{
  color:rgba(255,255,255,.78);
}

.compareItem li:before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:7px;
  height:7px;
  background:#C5A36A;
  border-radius:50%;
}

/* process */

.greenProcess{
  padding:95px 0;
}

.greenProcessGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

.greenProcessGrid div{
  padding:35px 26px;
  background:#fff;
  border-top:2px solid #C5A36A;
}

.greenProcessGrid span{
  display:block;
  margin-bottom:18px;
  color:#C5A36A;
  font-size:34px;
  font-weight:300;
}

.greenProcessGrid h3{
  margin:0 0 14px;
  color:#3D352B;
  font-size:22px;
  font-weight:400;
}

.greenProcessGrid p{
  margin:0;
  font-size:15px;
}

/* cta */

.greenCta{
  padding:95px 0;
  background:#3D352B;
  text-align:center;
}

.greenCta h2{
  margin:0 0 20px;
  color:#fff;
  font-size:42px;
}

.greenCta p{
  max-width:680px;
  margin:0 auto;
  color:rgba(255,255,255,.76);
}

.greenCta a{
  display:inline-block;
  margin-top:34px;
  padding:14px 42px;
  background:#C5A36A;
  color:#fff;
  letter-spacing:2px;
  transition:.3s;
}

.greenCta a:hover{
  background:#A88349;
}

/* ==========================
   TABLET
========================== */

@media(max-width:991px){

  .greenIntro .container,
  .greenConcept .container,
  .pointItem,
  .pointItem.reverse{
    grid-template-columns:1fr;
    gap:42px;
  }

  .pointItem.reverse .pointImg,
  .pointItem.reverse .pointTxt{
    order:unset;
  }

  .conceptText{
    grid-template-columns:1fr;
    gap:22px;
  }

  .pointImg img{
    height:390px;
  }

  .compareGrid{
    grid-template-columns:1fr;
  }

  .greenProcessGrid{
    grid-template-columns:repeat(2,1fr);
  }

  .greenIntro h1{
    font-size:40px;
  }

  .greenConcept h2,
  .pointTxt h2,
  .titleBox.center h2,
  .greenCta h2{
    font-size:34px;
  }
}

/* ==========================
   MOBILE
========================== */

@media(max-width:767px){

  .greenHomePage .container{
    padding:0 20px;
  }

  .greenIntro{
    padding:60px 0;
  }

  .greenConcept,
  .greenCompare,
  .greenProcess,
  .greenCta{
    padding:65px 0;
  }

  .greenPoint{
    padding:70px 0 20px;
  }

  .greenIntro h1{
    font-size:31px;
  }

  .greenConcept h2,
  .pointTxt h2,
  .titleBox.center h2,
  .greenCta h2{
    font-size:28px;
  }

  .pointItem{
    margin-bottom:65px;
  }

  .pointNum{
    top:-26px;
    font-size:76px;
  }

  .pointImg img{
    height:260px;
  }

  .compareItem{
    padding:28px 22px;
  }

  .greenProcessGrid{
    grid-template-columns:1fr;
  }

  .greenCta a{
    width:100%;
  }
}