@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Manrope',sans-serif;
}

/* =========================
   SECTION
========================= */
.benefits-section{
  width:100%;
  padding:110px 20px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7faf7 45%,
      #edf7ed 100%
    );

  position:relative;
  overflow:hidden;
}

/* =========================
   BUBBLES
========================= */
.benefit-bubble{
  position:absolute;
  border-radius:50%;
  z-index:1;

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Bubble 1 */
.bubble-1{
  width:320px;
  height:320px;

  background:rgba(253,182,6,0.16);

  top:-100px;
  left:-100px;

  filter:blur(10px);
}

/* Bubble 2 */
.bubble-2{
  width:220px;
  height:220px;

  background:rgba(157,186,67,0.16);

  right:-80px;
  top:180px;

  filter:blur(10px);
}

/* Bubble 3 */
.bubble-3{
  width:280px;
  height:280px;

  background:rgba(255,255,255,0.9);

  bottom:-120px;
  left:10%;
}

/* Bubble 4 */
.bubble-4{
  width:180px;
  height:180px;

  background:rgba(247,137,43,0.12);

  right:18%;
  bottom:60px;
}

/* =========================
   CONTAINER
========================= */
.benefits-container{
  max-width:1250px;
  margin:auto;

  position:relative;
  z-index:2;
}

/* =========================
   HEADER
========================= */
.benefits-header{
  text-align:center;

  max-width:850px;
  margin:auto;

  margin-bottom:80px;
}

/* BADGE */
.benefit-badge{
  display:inline-block;

  padding:12px 24px;

  background:#fff;

  border-radius:50px;

  font-size:13px;
  font-weight:800;

  letter-spacing:2px;

  color:#1C472C;

  border:1px solid #edf1ed;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

/* TITLE */
.benefits-header h2{
  font-size:58px;
  line-height:1.1;

  color:#1C472C;

  margin-top:26px;
  margin-bottom:22px;

  font-weight:800;
}

/* TEXT */
.benefits-header p{
  font-size:18px;
  line-height:1.9;

  color:#5f6b66;
}

/* =========================
   GRID
========================= */
.benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* =========================
   CARD
========================= */
.benefit-card{
  background:rgba(255,255,255,0.72);

  backdrop-filter:blur(16px);

  padding:36px;

  border-radius:32px;

  border:1px solid rgba(255,255,255,0.7);

  transition:0.45s ease;

  position:relative;
  overflow:hidden;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.04);
}

/* HOVER BG */
.benefit-card::before{
  content:"";
  position:absolute;

  width:100%;
  height:0%;

  left:0;
  bottom:0;

  background:
    linear-gradient(
      135deg,
      #1C472C,
      #2A6227
    );

  transition:0.45s ease;

  z-index:0;
}

.benefit-card:hover::before{
  height:100%;
}

/* HOVER */
.benefit-card:hover{
  transform:translateY(-14px);

  box-shadow:
    0 25px 60px rgba(28,71,44,0.15);
}

.benefit-card *{
  position:relative;
  z-index:2;
}

/* =========================
   ICON
========================= */
.benefit-icon{
  width:78px;
  height:78px;

  border-radius:24px;

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

  font-size:34px;

  margin-bottom:24px;

  background:
    linear-gradient(
      135deg,
      #FDB606,
      #F7892B
    );

  transition:0.4s ease;
}

.orange{
  background:
    linear-gradient(
      135deg,
      #F7892B,
      #FDB606
    );
}

.green{
  background:
    linear-gradient(
      135deg,
      #9DBA43,
      #2A6227
    );
}

.dark{
  background:
    linear-gradient(
      135deg,
      #1C472C,
      #2A6227
    );
}

.heart{
  background:
    linear-gradient(
      135deg,
      #ff6b6b,
      #ff8787
    );
}

.family{
  background:
    linear-gradient(
      135deg,
      #9DBA43,
      #FDB606
    );
}

.benefit-card:hover .benefit-icon{
  transform:scale(1.08) rotate(-4deg);
}

/* =========================
   TEXT
========================= */
.benefit-card h3{
  font-size:28px;
  line-height:1.3;

  color:#1C472C;

  margin-bottom:16px;

  font-weight:800;

  transition:0.4s ease;
}

.benefit-card p{
  font-size:15px;
  line-height:1.8;

  color:#666;

  margin-bottom:20px;

  transition:0.4s ease;
}

/* LIST */
.benefit-card ul{
  list-style:none;
}

.benefit-card ul li{
  margin-bottom:12px;

  font-size:15px;
  color:#2A6227;

  transition:0.4s ease;
}

/* HOVER TEXT */
.benefit-card:hover h3,
.benefit-card:hover p,
.benefit-card:hover ul li{
  color:#fff;
}

/* =========================
   STATS
========================= */
.benefits-stats{
  margin-top:80px;

  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

/* STAT BOX */
.stat-box{
  background:#fff;

  padding:34px 20px;

  border-radius:28px;

  text-align:center;

  border:1px solid #edf1ed;

  transition:0.4s ease;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.stat-box:hover{
  transform:translateY(-10px);

  background:
    linear-gradient(
      135deg,
      #1C472C,
      #2A6227
    );
}

.stat-box h4{
  font-size:34px;

  color:#1C472C;

  margin-bottom:10px;

  transition:0.4s ease;
}

.stat-box p{
  color:#666;

  transition:0.4s ease;
}

.stat-box:hover h4,
.stat-box:hover p{
  color:#fff;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:991px){

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

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

  .benefits-header h2{
    font-size:42px;
  }

}

@media(max-width:768px){

  .benefits-section{
    padding:80px 16px;
  }

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

  .benefits-stats{
    grid-template-columns:1fr;
  }

  .benefits-header h2{
    font-size:30px;
  }

  .benefits-header p{
    font-size:15px;
  }

  .benefit-card{
    padding:28px;
  }

  .benefit-card h3{
    font-size:24px;
  }

}















@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Manrope',sans-serif;
}

/* =========================
   SECTION
========================= */
.heritage-section{
  width:100%;
  padding:110px 20px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbf8 45%,
      #eef7ee 100%
    );

  position:relative;
  overflow:hidden;
}

/* =========================
   BUBBLES
========================= */
.heritage-bubble{
  position:absolute;
  border-radius:50%;
  z-index:1;

  filter:blur(8px);
}

/* bubble 1 */
.hb-1{
  width:320px;
  height:320px;

  background:rgba(253,182,6,0.14);

  top:-120px;
  left:-120px;
}

/* bubble 2 */
.hb-2{
  width:240px;
  height:240px;

  background:rgba(157,186,67,0.14);

  right:-80px;
  top:120px;
}

/* bubble 3 */
.hb-3{
  width:280px;
  height:280px;

  background:rgba(255,255,255,0.9);

  bottom:-120px;
  left:8%;
}

/* =========================
   CONTAINER
========================= */
.heritage-container{
  max-width:1250px;
  margin:auto;

  position:relative;
  z-index:2;
}

/* =========================
   GRID
========================= */
.heritage-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  align-items:center;
}

/* =========================
   IMAGE SIDE
========================= */
.heritage-image-side{
  position:relative;
}

/* IMAGE BOX */
.heritage-image-box{
  overflow:hidden;
  border-radius:40px;

  transform:rotate(2deg);

  transition:0.5s ease;

  box-shadow:
    0 30px 70px rgba(0,0,0,0.08);
}

.heritage-image-box:hover{
  transform:rotate(0deg);
}

.heritage-image-box img{
  width:100%;
  height:700px;

  object-fit:cover;
  display:block;

  transition:0.6s ease;
}

.heritage-image-box:hover img{
  transform:scale(1.08);
}

/* =========================
   FLOATING CARD
========================= */
.heritage-floating-card{
  position:absolute;

  bottom:-30px;
  right:20px;

  background:rgba(255,255,255,0.75);

  backdrop-filter:blur(18px);

  padding:22px 24px;

  border-radius:24px;

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

  box-shadow:
    0 20px 50px rgba(0,0,0,0.08);

  border:1px solid rgba(255,255,255,0.8);

  animation:floaty 3s ease-in-out infinite;
}

@keyframes floaty{
  0%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-10px);
  }
  100%{
    transform:translateY(0);
  }
}

/* USERS */
.floating-users{
  display:flex;
}

.floating-users span{
  width:44px;
  height:44px;

  border-radius:50%;

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

  color:#fff;
  font-weight:700;

  border:2px solid #fff;

  margin-left:-10px;
}

.floating-users span:nth-child(1){
  background:#1C472C;
}

.floating-users span:nth-child(2){
  background:#FDB606;
}

.floating-users span:nth-child(3){
  background:#9DBA43;
}

/* FLOATING TEXT */
.floating-text h4{
  font-size:28px;
  color:#1C472C;

  margin-bottom:4px;
}

.floating-text p{
  font-size:13px;
  color:#666;

  text-transform:uppercase;
  letter-spacing:1px;
}

/* =========================
   CONTENT
========================= */
.heritage-content{
  position:relative;
}

/* BADGE */
.heritage-badge{
  display:inline-block;

  padding:12px 22px;

  border-radius:50px;

  background:#fff;

  border:1px solid #edf1ed;

  color:#1C472C;

  font-size:13px;
  font-weight:800;

  letter-spacing:2px;

  margin-bottom:24px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

/* TITLE */
.heritage-content h2{
  font-size:56px;
  line-height:1.1;

  color:#1C472C;

  margin-bottom:24px;

  font-weight:800;
}

/* DESC */
.heritage-desc{
  font-size:17px;
  line-height:1.9;

  color:#5f6b66;

  margin-bottom:40px;
}

/* FEATURES */
.heritage-features{
  display:flex;
  flex-direction:column;
  gap:26px;
}

/* FEATURE CARD */
.heritage-feature{
  display:flex;
  gap:18px;
  align-items:flex-start;

  background:rgba(255,255,255,0.7);

  backdrop-filter:blur(14px);

  padding:26px;

  border-radius:26px;

  border:1px solid rgba(255,255,255,0.8);

  transition:0.45s ease;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.heritage-feature:hover{
  transform:translateY(-10px);

  background:
    linear-gradient(
      135deg,
      #1C472C,
      #2A6227
    );
}

/* ICON */
.feature-icon{
  min-width:58px;
  height:58px;

  border-radius:18px;

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

  background:
    linear-gradient(
      135deg,
      #FDB606,
      #F7892B
    );

  color:#fff;

  font-size:24px;
  font-weight:700;
}

.feature-icon.green{
  background:
    linear-gradient(
      135deg,
      #9DBA43,
      #2A6227
    );
}

/* TEXT */
.heritage-feature h4{
  font-size:24px;
  color:#1C472C;

  margin-bottom:8px;

  transition:0.4s ease;
}

.heritage-feature p{
  font-size:15px;
  line-height:1.8;

  color:#666;

  transition:0.4s ease;
}

.heritage-feature:hover h4,
.heritage-feature:hover p{
  color:#fff;
}

/* BUTTON */
.heritage-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:40px;

  padding:18px 34px;

  border-radius:60px;

  background:
    linear-gradient(
      135deg,
      #1C472C,
      #2A6227
    );

  color:#fff;

  text-decoration:none;

  font-size:14px;
  font-weight:700;

  letter-spacing:1px;

  transition:0.4s ease;

  box-shadow:
    0 15px 35px rgba(28,71,44,0.18);
}

.heritage-btn:hover{
  transform:translateY(-6px) scale(1.03);

  background:
    linear-gradient(
      135deg,
      #FDB606,
      #F7892B
    );
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:991px){

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

  .heritage-content h2{
    font-size:42px;
  }

}

@media(max-width:768px){

  .heritage-section{
    padding:80px 16px;
  }

  .heritage-content h2{
    font-size:30px;
  }

  .heritage-desc{
    font-size:15px;
  }

  .heritage-image-box img{
    height:500px;
  }

  .heritage-floating-card{
    right:10px;
    bottom:-20px;

    padding:18px;
  }

  .heritage-feature{
    padding:22px;
  }

}

@media(max-width:480px){

  .heritage-content h2{
    font-size:26px;
  }

  .heritage-image-box img{
    height:380px;
  }

  .heritage-floating-card{
    position:relative;

    right:0;
    bottom:0;

    margin-top:20px;
  }

  .heritage-feature{
    flex-direction:column;
  }

}









@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Manrope',sans-serif;
}

/* =========================
   SECTION
========================= */
.wellness-strip{
  width:100%;
  padding:55px 20px;

  background:
    linear-gradient(
      135deg,
      #1C472C 0%,
      #24552a 50%,
      #2A6227 100%
    );

  position:relative;
  overflow:hidden;
}

/* =========================
   BUBBLES
========================= */
.strip-bubble{
  position:absolute;
  border-radius:50%;

  filter:blur(10px);
}

/* bubble 1 */
.sb-1{
  width:260px;
  height:260px;

  background:rgba(253,182,6,0.12);

  top:-120px;
  left:-100px;
}

/* bubble 2 */
.sb-2{
  width:220px;
  height:220px;

  background:rgba(255,255,255,0.06);

  bottom:-120px;
  right:-80px;
}

/* =========================
   CONTAINER
========================= */
.wellness-container{
  max-width:1250px;
  margin:auto;

  position:relative;
  z-index:2;
}

/* =========================
   GRID
========================= */
.wellness-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}

/* =========================
   ITEM
========================= */
.wellness-item{
  background:rgba(255,255,255,0.08);

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);

  border:1px solid rgba(255,255,255,0.08);

  border-radius:28px;

  padding:30px 20px;

  text-align:center;

  transition:0.45s ease;

  box-shadow:
    0 15px 35px rgba(0,0,0,0.12);
}

/* HOVER */
.wellness-item:hover{
  transform:translateY(-10px);

  background:rgba(255,255,255,0.14);

  box-shadow:
    0 25px 50px rgba(0,0,0,0.18);
}

/* =========================
   ICON
========================= */
.wellness-icon{
  width:74px;
  height:74px;

  margin:auto;
  margin-bottom:18px;

  border-radius:24px;

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

  font-size:34px;

  background:
    linear-gradient(
      135deg,
      #FDB606,
      #F7892B
    );

  transition:0.4s ease;
}

/* variants */
.orange{
  background:
    linear-gradient(
      135deg,
      #F7892B,
      #FDB606
    );
}

.green{
  background:
    linear-gradient(
      135deg,
      #9DBA43,
      #2A6227
    );
}

.gold{
  background:
    linear-gradient(
      135deg,
      #FDB606,
      #9DBA43
    );
}

/* icon hover */
.wellness-item:hover .wellness-icon{
  transform:rotate(-6deg) scale(1.08);
}

/* =========================
   TEXT
========================= */
.wellness-item h4{
  font-size:14px;

  color:#ffffff;

  font-weight:800;

  text-transform:uppercase;

  letter-spacing:2px;

  line-height:1.7;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:991px){

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

}

@media(max-width:768px){

  .wellness-strip{
    padding:40px 16px;
  }

  .wellness-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .wellness-item{
    padding:26px 18px;
  }

  .wellness-icon{
    width:66px;
    height:66px;

    font-size:30px;
  }

  .wellness-item h4{
    font-size:13px;
  }

}