.about{
   padding:140px 0;
   background:#f8f6f2;
   overflow:hidden;
}

.about__container{
   max-width:1300px;
   margin:auto;

   display:grid;
   grid-template-columns:1fr 1fr;
   gap:80px;
   align-items:center;
}

/* LEFT SIDE */

.about__gallery{
   position:relative;
   min-height:700px;
}

.about__image{
   overflow:hidden;
   border-radius:35px;
   background:#fff;

   box-shadow:
   0 20px 50px rgba(0,0,0,.08);
}

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

.about__image--large{
   width:520px;
   height:600px;
}

.about__image--small{
   position:absolute;

   width:380px;
   height:430px;

   bottom:0;
   right:0;

   border:10px solid #f8f6f2;
}

/* BADGE */

.about__badge{
   position:absolute;

   left:40px;
   bottom:60px;

   background:#63b26d;
   color:#fff;

   padding:18px 28px;

   border-radius:60px;

   display:flex;
   align-items:center;
   gap:15px;

   box-shadow:
   0 20px 40px rgba(99,178,109,.3);
}

.about__badge i{
   font-size:2rem;
}

.about__badge span{
   font-weight:600;
   line-height:1.3;
}

/* RIGHT */

.about__tag{
   display:inline-flex;
   align-items:center;
   gap:10px;

   color:#63b26d;
   font-weight:700;
   margin-bottom:10px;
}

.about__title{
   font-size:4rem;
   line-height:1.1;
   color:#111827;
   margin-bottom:10px;
   font-weight: 700;
}

.about__title span{
   display:block;
   color:#63b26d;
}

.about__line{
   width:90px;
   height:5px;

   background:#63b26d;
   border-radius:50px;

   margin-bottom:10px;
}

.about__description{
   font-size:1.1rem;
   line-height:1.9;
   color:#6b7280;
   text-align: justify;

   margin-bottom:20px;
}

/* FEATURES */

.about__features{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:30px;

   margin-bottom:15px;
}

.about__feature{
   text-align:center;
}

.about__feature i{
   width:75px;
   height:75px;

   display:flex;
   align-items:center;
   justify-content:center;

   margin:auto auto 15px;

   border-radius:50%;

   background:#edf7ee;

   color:#63b26d;
   font-size:2rem;
}

.about__feature h4{
   margin-bottom:10px;
   color:#111827;
}

.about__feature p{
   color:#6b7280;
   line-height:1.6;
}

.about__stats{
  width: 100%;
  display:flex;
  gap:30px;
  margin-bottom:25px;
    flex-wrap:wrap;
}

.stat h3{
  color:#4ea56b;
  font-size:32px;
}

.stat span{
  color:#666;
  font-size:14px;
}

/* BUTTON */

.about__button{
   display:inline-flex;
   align-items:center;
   gap:10px;

   padding:18px 34px;

   background:#63b26d;
   color:#fff;

   border-radius:14px;
   text-decoration:none;

   font-weight:600;

   transition:.4s;
}

.about__button:hover{
   transform:translateY(-3px);
}


/* ===================================== */
/* ABOUT RESPONSIVE */
/* ===================================== */

/* =========================
   MACBOOK / LAPTOP
========================= */
@media screen and (max-width:1200px){

   .about{
      padding:100px 40px;
   }

   .about__container{
      gap:50px;
   }

   .about__title{
      font-size:3.2rem;
   }

   .about__image--large{
      width:450px;
      height:550px;
   }

   .about__image--small{
      width:300px;
      height:360px;
   }

   .about__stats{
      width:100%;
      flex-wrap:wrap;
   }

}

/* =========================
   TABLET
========================= */
@media screen and (max-width:992px){

   .about{
      padding:90px 30px;
   }

   .about__container{
      grid-template-columns:1fr;
      gap:60px;
   }

   .about__content{
      text-align:center;
   }

   .about__line{
      margin:0 auto 15px;
   }

   .about__description{
      text-align:center;
   }

   .about__gallery{
      margin:auto;
   }

   .about__stats{
      width:100%;
      justify-content:center;
   }

   .about__features{
      gap:20px;
   }

}

/* =========================
   MOBILE
========================= */
@media screen and (max-width:576px){

   .about{
      padding:70px 20px;
   }

   .about__title{
      font-size:2.3rem;
      line-height:1.2;
   }

   .about__description{
      font-size:15px;
      line-height:1.8;
      text-align:left;
   }

   .about__gallery{
      min-height:auto;
   }

   .about__image--large{
      width:100%;
      height:380px;
   }

   .about__image--small{
      width:170px;
      height:210px;

      right:0;
      bottom:-20px;

      border-width:6px;
   }

   .about__badge{
      left:10px;
      bottom:20px;

      padding:12px 18px;
      gap:10px;
   }

   .about__badge i{
      font-size:1.4rem;
   }

   .about__badge span{
      font-size:12px;
   }

   .about__features{
      grid-template-columns:1fr;
      gap:25px;
   }

   .about__feature i{
      width:60px;
      height:60px;
      font-size:1.5rem;
   }

   .about__stats{
      flex-direction:column;
      gap:15px;
      width:100%;
   }

   .stat h3{
      font-size:28px;
   }

   .about__button{
      width:100%;
      justify-content:center;
   }

}