/* =========================
   CHOOSE SECTION
========================= */

.choose{
   padding:140px 0;
   overflow:hidden;

   background:
   linear-gradient(
      to bottom,
      #f8f6f2 100%,
      #edf5ee 0%
   );
}

.choose__container{
   max-width:1300px;
   margin:auto;
   margin-bottom: 0px;

   display:grid;
   grid-template-columns:.95fr 1.05fr;
   align-items:center;

   gap:80px;
}

/* =========================
   TAG
========================= */

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

   color:#61b368;

   font-size:.95rem;
   font-weight:700;

   letter-spacing:.5px;

   margin-bottom:20px;
}

.choose__tag i{
   font-size:16px;
}

/* =========================
   TITLE
========================= */

.choose__title{
   font-size:64px;
   line-height:1.05;
   font-weight:800;

   color:#111827;

   margin-bottom:15px;
}

.choose__title span{
   color:#63b26d;
}

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

   background:#63b26d;

   border-radius:50px;

   margin-bottom:20px;
}

.choose__description{
   color:#6b7280;
   line-height:1.9;
   font-size:1.08rem;

   margin-bottom:30px;
}

/* =========================
   FEATURE LIST
========================= */

.choose__features{
   display:flex;
   flex-direction:column;
   gap:18px;
}

/* =========================
   FEATURE CARD
========================= */

.feature-card{
   background:#fff;

   border-radius:24px;

   padding:20px 24px;

   border:1px solid rgba(0,0,0,.04);

   box-shadow:
   0 10px 30px rgba(0,0,0,.04);

      transition:
      transform 0.5s ease,
      box-shadow 0.5s ease,
      border-color 0.5s ease;

}

.feature-card:hover{
   transform:translateY(-6px);


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

/* =========================
   HEADER
========================= */

.feature-header{
   display:flex;
   justify-content:space-between;
   align-items:center;

   cursor:pointer;
}

.feature-left{
   display:flex;
   align-items:center;
   gap:20px;

   flex:1;
}

/* =========================
   ICON
========================= */

.feature-icon{
   width:60px;
   height:60px;

   background:#edf7ee;

   border-radius:50%;

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

   flex-shrink:0;
}

.feature-icon i{
   font-size:1.4rem;
   color:#63b26d;
}

/* =========================
   INFO
========================= */

.feature-info{
   flex:1;
}

.feature-info h3{
   font-size:1.35rem;
   margin-bottom:6px;

   color:#111827;
}


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

/* =========================
   ARROW
========================= */

.feature-arrow{
   color:#63b26d;

   font-size:1.1rem;

   transition:.35s;
}

/* =========================
   DROPDOWN
========================= */
.feature-dropdown{

   max-height:0;
   opacity:0;

   overflow:hidden;

   transform:translateY(-10px);

   transition:
      max-height 5s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 1s ease,
      transform 1s ease;

   margin-top:0;
}  

.feature-card:hover .feature-dropdown{
   max-height:300px;
   opacity:1;
   transform:translateY(0);
   margin-top:10px;
}


.dropdown-line{
   width:calc(100% - 80px);
   height:3px;

   background:#d8d8d8;

   border-radius:20px;

   margin-left:80px;
   margin-bottom:15px;
}

.feature-dropdown p{
   overflow:hidden;

   padding-left:80px;
   padding-right:20px;

   color:#6b7280;
   line-height:1.8;
}


.feature-card.active .feature-arrow{
   transform:rotate(90deg);
}

/* =========================
   IMAGE
========================= */

.choose__image{
   position:relative;
   z-index:2;

   padding:10px;

   background:#fff;

   border-radius:40px;

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

.choose__image img{
   width:100%;
   display:block;

   border-radius:30px;
}

.choose__glow{
   position:absolute;

   width:400px;
   height:400px;

   background:#8ed08e;

   filter:blur(120px);

   opacity:.25;

   top:-60px;
   right:-60px;

   z-index:-1;
}


/* ===================================== */
/* CHOOSE RESPONSIVE */
/* ===================================== */

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

   .choose{
      padding:110px 40px;
   }

   .choose__container{
      gap:50px;
   }

   .choose__title{
      font-size:54px;
   }

   .feature-card{
      padding:18px 20px;
   }

   .feature-info h3{
      font-size:1.2rem;
   }

}

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

   .choose{
      padding:90px 30px;
   }

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

      margin-bottom:0;
   }

   .choose__content{
      text-align:center;
   }

   .choose__line{
      margin:0 auto 20px;
   }

   .choose__description{
      text-align:center;
      margin-bottom:35px;
   }

   .choose__image{
      max-width:700px;
      margin:auto;
      order:-1;
   }

}

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

   .choose{
      padding:70px 20px;
   }

   .choose__container{
      gap:40px;
   }

   .choose__title{
      font-size:34px;
      line-height:1.15;
   }

   .choose__tag{
      font-size:12px;
   }

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

   .feature-card{
      padding:16px;
      border-radius:20px;
   }

   .feature-left{
      gap:12px;
   }

   .feature-icon{
      width:45px;
      height:45px;
   }

   .feature-icon i{
      font-size:1.1rem;
   }

   .feature-info h3{
      font-size:1rem;
   }

   .feature-info p{
      font-size:13px;
      line-height:1.5;
   }

   .feature-arrow{
      font-size:1rem;
   }

   .dropdown-line{
      margin-left:58px;
      width:calc(100% - 58px);
   }

   .feature-dropdown p{
      padding-left:58px;
      padding-right:0;
      font-size:14px;
   }

   .choose__image{
      padding:8px;
      border-radius:24px;
   }

   .choose__image img{
      border-radius:18px;
   }

   .choose__glow{
      width:220px;
      height:220px;
      filter:blur(80px);
   }

}