/* =========================================
   ABOUT PAGE ONLY
   Header/footer styles remain in style.css
========================================= */

.about-page{
  width:100%;
  padding:18px 22px 26px;
}

/* =========================================
   ABOUT HERO
========================================= */

.about-hero{
  position:relative;
  width:min(1420px,100%);
  min-height:625px;
  margin:0 auto;
  padding:132px 24px 24px;
  overflow:hidden;
  border-radius:28px;

  background:
    radial-gradient(circle at 12% 32%,rgba(151,235,133,.30),transparent 34%),
    radial-gradient(circle at 78% 24%,rgba(177,239,163,.26),transparent 36%),
    radial-gradient(circle at 50% 95%,rgba(193,242,181,.28),transparent 42%),
    linear-gradient(180deg,#ebf8e6 0%,#e2f3dc 100%);
}

.about-hero::before,
.about-hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(95px);
  pointer-events:none;
}

.about-hero::before{
  width:440px;
  height:440px;
  left:-130px;
  top:90px;
  background:rgba(135,226,118,.24);
}

.about-hero::after{
  width:470px;
  height:470px;
  right:-120px;
  bottom:10px;
  background:rgba(147,225,126,.24);
}

.about-hero__content{
  position:relative;
  z-index:2;
  width:min(650px,100%);
  margin:0 auto;
  text-align:center;
}

.about-hero__content h1{
  margin:0;
  font-family: "DM Sans", sans-serif;
  font-size:72px;
  font-weight:400;
  line-height:1;
  letter-spacing:-1.8px;
  color:#252525;
}

.about-hero__content p{
  max-width:640px;
  margin:24px auto 0;
  color:#596b72;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
}

/* =========================================
   INFINITE GALLERY
========================================= */

.about-gallery{
  position:relative;
  z-index:2;
  width:calc(100% + 48px);
  margin:50px -24px 0;
  overflow:hidden;
}

/* soft fade on both edges */
.about-gallery::before,
.about-gallery::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:80px;
  z-index:3;
  pointer-events:none;
}

.about-gallery::before{
  left:0;
  background:linear-gradient(90deg,rgba(231,246,226,1),rgba(231,246,226,0));
}

.about-gallery::after{
  right:0;
  background:linear-gradient(270deg,rgba(231,246,226,1),rgba(231,246,226,0));
}

.about-gallery__track{
  display:flex;
  align-items:stretch;
  gap:20px;
  width:max-content;
  padding:0 24px;
  will-change:transform;
  animation:aboutGalleryMarquee 34s linear infinite;
}

.about-gallery:hover .about-gallery__track{
  animation-play-state:paused;
}

.about-gallery__item{
  flex:0 0 260px;
  height:260px;
  margin:0;
  overflow:hidden;
  border-radius:10px;
  background:#dfe8df;
}

.about-gallery__item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .55s ease;
}

.about-gallery__item:hover img{
  transform:scale(1.045);
}

@keyframes aboutGalleryMarquee{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(calc(-50% - 10px));
  }
}

/* =========================================
   STORY
========================================= */

.about-story{
  width:min(1220px,100%);
  margin:110px auto 0;
}

.about-story__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(420px,.86fr);
  gap:70px;
  align-items:center;
}

.about-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:5px 13px;
  border-radius:999px;
  background:#edf7ee;
  color:#596c73;
  font-size:14px;
  font-weight:500;
}

.about-story__copy h2,
.about-values__head h2,
.about-cta__inner h2{
  margin:28px 0 0;
  font-family: "DM Sans", sans-serif;
  font-weight:400;
  letter-spacing:-1.1px;
  color:#252525;
}

.about-story__copy h2{
  max-width:700px;
  font-size:54px;
  line-height:1.02;
}

.about-story__copy p{
  max-width:680px;
  margin:24px 0 0;
  color:#586a71;
  font-size:16px;
  line-height:1.65;
}

.about-story__image{
  height:560px;
  margin:0;
  overflow:hidden;
  border-radius:18px;
  background:#e7ece7;
}

.about-story__image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================================
   VALUES
========================================= */

.about-values{
  width:min(1220px,100%);
  margin:110px auto 0;
}

.about-values__head{
  max-width:720px;
  margin:0 auto 46px;
  text-align:center;
}

.about-values__head h2{
  font-size:52px;
  line-height:1.03;
}

.about-values__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.about-value-card{
  min-height:250px;
  padding:28px;
  border-radius:18px;
  background:#f1f8f2;
}

.about-value-card > span{
  color:#68bcca;
  font-size:14px;
  font-weight:600;
}

.about-value-card h3{
  margin:45px 0 0;
  font-family: "DM Sans", sans-serif;
  font-size:34px;
  font-weight:400;
  color:#262626;
}

.about-value-card p{
  margin:16px 0 0;
  color:#596b72;
  font-size:15px;
  line-height:1.55;
}

/* =========================================
   CTA
========================================= */

.about-cta{
  width:min(1420px,100%);
  margin:110px auto 0;
  padding:22px;
}

.about-cta__inner{
  min-height:480px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 24px;
  border-radius:28px;
  text-align:center;

  background:
    radial-gradient(80% 120% at 50% 50%,rgba(186,234,171,.56) 0%,rgba(228,247,222,.86) 60%,rgba(255,255,255,.96) 100%),
    #edf8e9;
}

.about-cta__inner h2{
  max-width:760px;
  font-size:62px;
  line-height:.98;
}

.about-cta__inner p{
  max-width:620px;
  margin:24px auto 0;
  color:#596a71;
  font-size:16px;
}

.about-cta__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:34px;
}

.about-cta__primary,
.about-cta__secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 28px;
  border-radius:999px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
}

.about-cta__primary{
  border:0;
  background:#242424;
  color:#fff;
}

.about-cta__secondary{
  border:1px solid #c7d8cb;
  background:#fff;
  color:#252525;
}

/* =========================================
   ANIMATION
========================================= */

.about-hero__content,
.about-gallery,
.about-story,
.about-values,
.about-cta{
  opacity:0;
  transform:translateY(30px);
}

body.is-loaded .about-hero__content{
  animation:aboutFadeUp .8s ease .08s forwards;
}

body.is-loaded .about-gallery{
  animation:aboutFadeUp .85s ease .22s forwards;
}

.about-section-visible{
  animation:aboutFadeUp .8s ease forwards;
}

@keyframes aboutFadeUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

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

@media (max-width:1100px){
  .about-story__grid{
    grid-template-columns:1fr 400px;
    gap:42px;
  }

  .about-story__copy h2{
    font-size:46px;
  }

  .about-gallery__item{
    flex-basis:230px;
    height:230px;
  }

  .about-gallery__track{
    animation-duration:30s;
  }
}

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

@media (max-width:820px){
  .about-page{
    padding:12px;
  }

  .about-hero{
    min-height:auto;
    padding:112px 14px 18px;
  }

  .about-hero__content h1{
    font-size:58px;
  }

  .about-gallery{
    width:calc(100% + 28px);
    margin:42px -14px 0;
  }

  .about-gallery::before,
  .about-gallery::after{
    width:45px;
  }

  .about-gallery__track{
    gap:12px;
    padding:0 14px;
    animation-duration:24s;
  }

  .about-gallery__item{
    flex-basis:190px;
    height:220px;
  }

  .about-story,
  .about-values,
  .about-cta{
    margin-top:78px;
  }

  .about-story__grid{
    grid-template-columns:1fr;
  }

  .about-story__image{
    height:470px;
  }

  .about-values__grid{
    grid-template-columns:1fr;
  }
}

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

@media (max-width:560px){
  .about-page{
    padding:8px;
  }

  .about-hero{
    padding-top:96px;
    border-radius:20px;
  }

  .about-hero__content h1{
    font-size:48px;
  }

  .about-hero__content p{
    font-size:14px;
  }

  .about-gallery{
    width:calc(100% + 16px);
    margin:34px -8px 0;
  }

  .about-gallery__track{
    gap:10px;
    padding:0 8px;
    animation-duration:20s;
  }

  .about-gallery__item{
    flex-basis:165px;
    height:190px;
    border-radius:9px;
  }

  .about-story__copy h2,
  .about-values__head h2{
    font-size:38px;
  }

  .about-story__image{
    height:390px;
  }

  .about-cta{
    padding:0;
  }

  .about-cta__inner{
    min-height:420px;
    padding:48px 16px;
    border-radius:20px;
  }

  .about-cta__inner h2{
    font-size:43px;
  }

  .about-cta__actions{
    flex-direction:column;
    width:100%;
  }

  .about-cta__primary,
  .about-cta__secondary{
    width:100%;
    max-width:270px;
  }
}

@media (prefers-reduced-motion:reduce){
  .about-gallery__track{
    animation-play-state:paused;
  }
}
/* =========================================
   WHY CHOOSE US SECTION
========================================= */

.wc-section{
  width:100%;
  padding:84px 22px 34px;
  overflow:hidden;

  background:
   radial-gradient(78% 54% at 50% 42%, rgba(205, 241, 197, .55) 0%, rgba(232, 248, 228, .46) 48%, rgba(255, 255, 255, 0) 100%), #ffffff12
}

.wc-section__inner{
  position:relative;

  width:min(1420px,100%);
  min-height:660px;

  margin:0 auto;
  padding:62px 250px 70px;

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

  overflow:hidden;
}


/* =========================================
   CENTER CONTENT
========================================= */

.wc-section__content{
  position:relative;
  z-index:5;

  width:min(700px,100%);
  margin:0 auto;

  text-align:center;
}

.wc-section__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:28px;
  padding:5px 13px;

  border-radius:999px;

  background:rgba(255,255,255,.94);

  color:#586b72;
  font-size:14px;
  font-weight:500;
  line-height:1;
}

.wc-section__heading{
  max-width:690px;
  margin:31px auto 0;

  font-family: "DM Sans", sans-serif;
  font-size:53px;
  font-weight:400;
  line-height:1.01;
  letter-spacing:-1.25px;

  color:#252525;
}

.wc-section__inline-image{
  display:inline-block;

  width:96px;
  height:43px;

  margin:0 6px;

  overflow:hidden;
  border-radius:999px;

  vertical-align:middle;

  transform:translateY(-3px);
}

.wc-section__inline-image img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
}

.wc-section__description{
  max-width:610px;
  margin:28px auto 0;

  color:#596a71;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
}

.wc-section__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:52px;

  margin-top:42px;
  padding:0 31px;

  border-radius:999px;

  background:#242424;
  color:#ffffff;

  font-size:15px;
  font-weight:600;
  text-decoration:none;

  box-shadow:0 12px 27px rgba(0,0,0,.13);

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.wc-section__button:hover{
  color:#ffffff;
  background:#111111;

  transform:translateY(-3px);

  box-shadow:0 17px 34px rgba(0,0,0,.18);
}


/* =========================================
   FLOATING IMAGES
========================================= */

.wc-image-card{
  position:absolute;
  z-index:3;

  margin:0;
  overflow:hidden;

  border:3px solid rgba(255,255,255,.96);
  border-radius:20px;

  background:#ffffff;

  box-shadow:0 22px 42px rgba(44,78,48,.18);
}

.wc-image-card img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;

  transition:transform .55s ease;
}

.wc-image-card:hover img{
  transform:scale(1.055);
}

.wc-image-card--left-large{
  left:60px;
  top:268px;

  width:220px;
  height:220px;
}

.wc-image-card--left-small{
  left:228px;
  top:435px;

  width:165px;
  height:165px;
}

.wc-image-card--right-large{
  right:58px;
  top:268px;

  width:220px;
  height:220px;
}

.wc-image-card--right-small{
  right:225px;
  top:435px;

  width:165px;
  height:165px;
}


/* =========================================
   ENTRANCE ANIMATION
========================================= */

.wc-section__label,
.wc-section__heading,
.wc-section__description,
.wc-section__button,
.wc-image-card{
  opacity:0;
  will-change:transform,opacity;
}

.wc-section.wc-section--visible .wc-section__label{
  animation:wcFadeUp .7s ease .04s forwards;
}

.wc-section.wc-section--visible .wc-section__heading{
  animation:wcFadeUp .8s ease .15s forwards;
}

.wc-section.wc-section--visible .wc-section__description{
  animation:wcFadeUp .8s ease .27s forwards;
}

.wc-section.wc-section--visible .wc-section__button{
  animation:wcFadeUp .8s ease .39s forwards;
}

.wc-section.wc-section--visible .wc-image-card--left-large{
  animation:wcFromLeft .9s ease .28s forwards,
            wcFloatOne 6s ease-in-out 1.2s infinite;
}

.wc-section.wc-section--visible .wc-image-card--left-small{
  animation:wcFromBottom .9s ease .38s forwards,
            wcFloatTwo 6.5s ease-in-out 1.3s infinite;
}

.wc-section.wc-section--visible .wc-image-card--right-large{
  animation:wcFromRight .9s ease .32s forwards,
            wcFloatTwo 6.2s ease-in-out 1.25s infinite;
}

.wc-section.wc-section--visible .wc-image-card--right-small{
  animation:wcFromBottom .9s ease .44s forwards,
            wcFloatOne 6.8s ease-in-out 1.35s infinite;
}

@keyframes wcFadeUp{
  from{
    opacity:0;
    transform:translateY(30px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes wcFromLeft{
  from{
    opacity:0;
    transform:translateX(-50px) scale(.9);
  }

  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}

@keyframes wcFromRight{
  from{
    opacity:0;
    transform:translateX(50px) scale(.9);
  }

  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}

@keyframes wcFromBottom{
  from{
    opacity:0;
    transform:translateY(45px) scale(.9);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes wcFloatOne{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-8px);
  }
}

@keyframes wcFloatTwo{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(8px);
  }
}


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

@media (max-width:1100px){

  .wc-section__inner{
    min-height:610px;
    padding:55px 190px 65px;
  }

  .wc-section__heading{
    font-size:46px;
  }

  .wc-image-card--left-large,
  .wc-image-card--right-large{
    width:185px;
    height:185px;
  }

  .wc-image-card--left-small,
  .wc-image-card--right-small{
    width:140px;
    height:140px;
  }

  .wc-image-card--left-large{
    left:28px;
  }

  .wc-image-card--left-small{
    left:150px;
    top:420px;
  }

  .wc-image-card--right-large{
    right:28px;
  }

  .wc-image-card--right-small{
    right:150px;
    top:420px;
  }

}


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

@media (max-width:820px){

  .wc-section{
    padding:64px 12px 28px;
  }

  .wc-section__inner{
    min-height:auto;
    padding:45px 18px 25px;

    display:block;
  }

  .wc-section__content{
    width:100%;
  }

  .wc-section__heading{
    max-width:650px;
    font-size:41px;
  }

  .wc-section__description{
    font-size:15px;
  }

  .wc-image-card{
    position:relative;
    inset:auto !important;

    animation:none !important;
  }

  .wc-section.wc-section--visible .wc-image-card{
    opacity:1;
  }

  .wc-section__inner{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .wc-section__content{
    grid-column:1 / -1;
    margin-bottom:30px;
  }

  .wc-image-card--left-large,
  .wc-image-card--right-large{
    width:100%;
    height:230px;
  }

  .wc-image-card--left-small,
  .wc-image-card--right-small{
    width:75%;
    height:180px;
    justify-self:center;
  }

}


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

@media (max-width:560px){

  .wc-section{
    padding:52px 8px 20px;
  }

  .wc-section__inner{
    padding:35px 8px 15px;
    gap:9px;
  }

  .wc-section__heading{
    margin-top:25px;

    font-size:35px;
    line-height:1.03;
  }

  .wc-section__inline-image{
    width:73px;
    height:34px;
  }

  .wc-section__description{
    margin-top:21px;

    font-size:14px;
  }

  .wc-section__button{
    min-height:48px;
    margin-top:31px;
  }

  .wc-image-card--left-large,
  .wc-image-card--right-large{
    height:190px;
  }

  .wc-image-card--left-small,
  .wc-image-card--right-small{
    width:82%;
    height:155px;
  }

  .wc-image-card{
    border-radius:16px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

  .wc-section__label,
  .wc-section__heading,
  .wc-section__description,
  .wc-section__button,
  .wc-image-card{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

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

  .wc-image-card{
    display:none !important;
  }

  .wc-section__inner{
    display:block;
    min-height:auto;
    padding:55px 20px 65px;
  }

  .wc-section__content{
    width:min(700px,100%);
    margin:0 auto;
  }

}
/* =========================================
   WHAT WE DO SECTION
========================================= */

.wwd-section{
  width:100%;
  padding:95px 22px 82px;
  overflow:hidden;
  background:#ffffff;
}

.wwd-section__inner{
  width:min(1120px,100%);
  margin:0 auto;
}


/* =========================================
   TOP CONTENT
========================================= */

.wwd-section__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(380px,.9fr);
  align-items:end;
  gap:90px;
}

.wwd-section__heading-wrap{
  min-width:0;
}

.wwd-section__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:27px;
  padding:5px 12px;

  border-radius:999px;

  background:#eef7ef;
  color:#5a6c72;

  font-size:13px;
  font-weight:500;
  line-height:1;
}

.wwd-section__heading{
  max-width:610px;
  margin:27px 0 0;

  font-family: "DM Sans", sans-serif;
  font-size:48px;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-1.1px;

  color:#252525;
}

.wwd-section__intro{
  max-width:580px;
  margin:0 0 8px;

  color:#596b72;
  font-size:14px;
  font-weight:500;
  line-height:1.55;
}


/* =========================================
   MAIN CONTENT
========================================= */

.wwd-section__content{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(500px,1.18fr);
  align-items:stretch;
  gap:70px;

  margin-top:48px;
}


/* =========================================
   LEFT FEATURES
========================================= */

.wwd-section__list{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:space-between;

  min-height:505px;
  padding:20px 0 10px 32px;
}

.wwd-section__list::before{
  content:"";

  position:absolute;
  left:0;
  top:0;
  bottom:0;

  width:1px;

  background:#e2e8e4;
}

.wwd-feature{
  position:relative;
}

.wwd-feature h3{
  margin:0;

  font-family: "DM Sans", sans-serif;
  font-size:27px;
  font-weight:400;
  line-height:1.1;

  color:#292929;
}

.wwd-feature p{
  max-width:430px;
  margin:15px 0 0;

  color:#596b72;
  font-size:14px;
  font-weight:500;
  line-height:1.55;
}


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

.wwd-section__image{
  min-width:0;
  /* min-height:505px; */

  margin:0;

  overflow:hidden;
  border-radius:18px;

  background:#e7ece8;
}

.wwd-section__image img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center;

  transition:transform .7s ease;
}

.wwd-section__image:hover img{
  transform:scale(1.04);
}


/* =========================================
   ENTRANCE ANIMATION
========================================= */

.wwd-section__label,
.wwd-section__heading,
.wwd-section__intro,
.wwd-feature,
.wwd-section__image{
  opacity:0;
  will-change:transform,opacity;
}

.wwd-section.wwd-section--visible .wwd-section__label{
  animation:wwdFadeUp .65s ease .04s forwards;
}

.wwd-section.wwd-section--visible .wwd-section__heading{
  animation:wwdFadeUp .75s ease .15s forwards;
}

.wwd-section.wwd-section--visible .wwd-section__intro{
  animation:wwdFadeUp .75s ease .24s forwards;
}

.wwd-section.wwd-section--visible .wwd-feature:nth-child(1){
  animation:wwdFromLeft .7s ease .30s forwards;
}

.wwd-section.wwd-section--visible .wwd-feature:nth-child(2){
  animation:wwdFromLeft .7s ease .40s forwards;
}

.wwd-section.wwd-section--visible .wwd-feature:nth-child(3){
  animation:wwdFromLeft .7s ease .50s forwards;
}

.wwd-section.wwd-section--visible .wwd-feature:nth-child(4){
  animation:wwdFromLeft .7s ease .60s forwards;
}

.wwd-section.wwd-section--visible .wwd-section__image{
  animation:wwdFromRight .85s ease .34s forwards;
}

@keyframes wwdFadeUp{
  from{
    opacity:0;
    transform:translateY(28px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes wwdFromLeft{
  from{
    opacity:0;
    transform:translateX(-35px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes wwdFromRight{
  from{
    opacity:0;
    transform:translateX(45px) scale(.97);
  }

  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}


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

@media (max-width:1050px){

  .wwd-section__top{
    grid-template-columns:1fr 1fr;
    gap:50px;
  }

  .wwd-section__heading{
    font-size:43px;
  }

  .wwd-section__content{
    grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
    gap:45px;
  }

}


/* =========================================
   MOBILE / TABLET STACK
========================================= */

@media (max-width:820px){

  .wwd-section{
    padding:72px 14px 55px;
  }

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

  .wwd-section__intro{
    margin:0;
  }

  .wwd-section__content{
    grid-template-columns:1fr;
    gap:36px;
    margin-top:40px;
  }

  .wwd-section__list{
    min-height:auto;
    gap:35px;
    padding-left:25px;
  }

  .wwd-section__image{
    /* min-height:460px; */
  }
.wwd-section__content {
    display: flex;
    flex-direction: column-reverse;
}
}


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

@media (max-width:560px){

  .wwd-section{
    padding:58px 10px 42px;
  }

  .wwd-section__heading{
    margin-top:23px;

    font-size:37px;
    line-height:1.03;
  }

  .wwd-section__intro{
    font-size:13px;
  }

  .wwd-section__list{
    gap:30px;
    padding-left:20px;
  }

  .wwd-feature h3{
    font-size:25px;
  }

  .wwd-feature p{
    margin-top:12px;
    font-size:13px;
  }

  .wwd-section__image{
    /* min-height:360px; */
    border-radius:14px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

  .wwd-section__label,
  .wwd-section__heading,
  .wwd-section__intro,
  .wwd-feature,
  .wwd-section__image{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

}
/* =========================================
   OUR BENEFITS SECTION
========================================= */

.ob-section{
  width:100%;
  padding:82px 22px 46px;
  overflow:hidden;
  background:#ffffff;
}

.ob-section__inner{
  position:relative;

  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(430px,.95fr);
  align-items:stretch;
  gap:45px;

  width:min(1420px,100%);
  min-height:415px;

  margin:0 auto;
  padding:20px 24px 20px 36px;

  overflow:hidden;
  border-radius:24px;

  background:
    radial-gradient(
      76% 135% at 20% 50%,
      rgba(191,238,179,.62) 0%,
      rgba(222,246,215,.66) 50%,
      rgba(243,251,241,.84) 78%,
      rgba(255,255,255,.94) 100%
    ),
    #edf8e9;

  box-shadow:0 18px 50px rgba(40,75,43,.05);
}


/* =========================================
   CONTENT
========================================= */

.ob-section__content{
  display:flex;
  flex-direction:column;
  justify-content:center;

  min-width:0;
  padding:18px 0;
}

.ob-section__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:max-content;
  min-height:28px;

  padding:5px 13px;

  border-radius:999px;

  background:rgba(255,255,255,.95);

  color:#586b72;
  font-size:14px;
  font-weight:500;
  line-height:1;
}

.ob-section__heading{
  margin:31px 0 0;

  font-family: "DM Sans", sans-serif;
  font-size:51px;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-1.2px;

  color:#252525;
}

.ob-section__description{
  max-width:820px;
  margin:24px 0 0;

  color:#596a71;
  font-size:16px;
  font-weight:500;
  line-height:1.55;
}


/* =========================================
   TAGS
========================================= */

.ob-section__tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;

  margin-top:24px;
}

.ob-section__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:52px;

  padding:0 22px;

  border:1px solid #2d3b35;
  border-radius:999px;

  background:rgba(255,255,255,.08);

  color:#2d2d2d;

  font-family: "DM Sans", sans-serif;
  font-size:29px;
  font-weight:400;
  line-height:1;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    border-color .25s ease;
}

.ob-section__tag:hover{
  background:#242424;
  border-color:#242424;
  color:#ffffff;
  transform:translateY(-2px);
}


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

.ob-section__media{
  min-width:0;
  height:375px;

  margin:0;

  overflow:hidden;
  border-radius:11px;

  background:#e4ebe4;
}

.ob-section__media img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center;

  transition:transform .7s ease;
}

.ob-section__media:hover img{
  transform:scale(1.04);
}


/* =========================================
   ENTRANCE ANIMATION
========================================= */

.ob-section__label,
.ob-section__heading,
.ob-section__description,
.ob-section__tag,
.ob-section__media{
  opacity:0;
  will-change:transform,opacity;
}

.ob-section.ob-section--visible .ob-section__label{
  animation:obFadeUp .65s ease .04s forwards;
}

.ob-section.ob-section--visible .ob-section__heading{
  animation:obFadeUp .75s ease .14s forwards;
}

.ob-section.ob-section--visible .ob-section__description{
  animation:obFadeUp .75s ease .24s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(1){
  animation:obTagIn .55s ease .30s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(2){
  animation:obTagIn .55s ease .36s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(3){
  animation:obTagIn .55s ease .42s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(4){
  animation:obTagIn .55s ease .48s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(5){
  animation:obTagIn .55s ease .54s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(6){
  animation:obTagIn .55s ease .60s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(7){
  animation:obTagIn .55s ease .66s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(8){
  animation:obTagIn .55s ease .72s forwards;
}

.ob-section.ob-section--visible .ob-section__tag:nth-child(9){
  animation:obTagIn .55s ease .78s forwards;
}

.ob-section.ob-section--visible .ob-section__media{
  animation:obFromRight .85s ease .25s forwards;
}

@keyframes obFadeUp{
  from{
    opacity:0;
    transform:translateY(28px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes obTagIn{
  from{
    opacity:0;
    transform:translateY(18px) scale(.94);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes obFromRight{
  from{
    opacity:0;
    transform:translateX(45px) scale(.97);
  }

  to{
    opacity:1;
    transform:translateX(0) scale(1);
  }
}


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

@media (max-width:1100px){

  .ob-section__inner{
    grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);
    gap:28px;

    padding-left:28px;
  }

  .ob-section__heading{
    font-size:44px;
  }

  .ob-section__tag{
    min-height:47px;
    padding:0 18px;
    font-size:25px;
  }

  .ob-section__media{
    height:360px;
  }

}


/* =========================================
   MOBILE / TABLET STACK
========================================= */

@media (max-width:820px){

  .ob-section{
    padding:66px 12px 38px;
  }

  .ob-section__inner{
    grid-template-columns:1fr;
    gap:28px;

    min-height:auto;

    padding:30px 22px 22px;
  }

  .ob-section__content{
    padding:0;
  }

  .ob-section__heading{
    font-size:41px;
  }

  .ob-section__description{
    font-size:15px;
  }

  .ob-section__media{
    height:430px;
  }

}


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

@media (max-width:560px){

  .ob-section{
    padding:54px 8px 28px;
  }

  .ob-section__inner{
    padding:25px 14px 14px;
    border-radius:20px;
  }

  .ob-section__heading{
    margin-top:25px;

    font-size:36px;
    line-height:1.03;
  }

  .ob-section__description{
    margin-top:19px;

    font-size:14px;
  }

  .ob-section__tags{
    gap:8px;
    margin-top:21px;
  }

  .ob-section__tag{
    min-height:42px;

    padding:0 15px;

    font-size:22px;
  }

  .ob-section__media{
    height:330px;
    border-radius:14px;
  }

}


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

@media (max-width:390px){

  .ob-section__tag{
    padding:0 13px;
    font-size:20px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce){

  .ob-section__label,
  .ob-section__heading,
  .ob-section__description,
  .ob-section__tag,
  .ob-section__media{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

}
/* =========================================
   FAQ SECTION
========================================= */

.faq-section{
  position:relative;
  width:100%;
  padding:84px 22px 76px;
  overflow:hidden;

  background:
   radial-gradient(72% 82% at 50% 50%, rgb(201 239 191 / 53%) 0%, rgb(231 248 226 / 54%) 52%, rgb(255 255 255 / 0%) 100%), #ffffff00
}

.faq-section__inner{
  width:min(1160px,100%);
  margin:0 auto;
}

.faq-section__head{
  text-align:center;
}

.faq-section__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:25px;
  padding:4px 11px;

  border-radius:999px;
  background:rgba(255,255,255,.94);

  color:#596b72;
  font-size:13px;
  font-weight:500;
  line-height:1;
}

.faq-section__title{
  margin:26px 0 0;

  font-family: "DM Sans", sans-serif;
  font-size:49px;
  font-weight:400;
  line-height:1;
  letter-spacing:-1.05px;

  color:#252525;
}


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

.faq-section__media{
  width:min(900px,100%);
  height:350px;

  margin:42px auto 0;

  overflow:hidden;
  border-radius:16px;

  background:#e5ebe5;
}

.faq-section__media img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center;

  transition:transform .7s ease;
}

.faq-section__media:hover img{
  transform:scale(1.035);
}


/* =========================================
   TWO INDEPENDENT COLUMNS
========================================= */

.faq-accordion{
  position:relative;
  z-index:3;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:14px;

  width:min(790px,calc(100% - 44px));
  margin:-24px auto 0;
}

.faq-accordion__column{
  display:flex;
  flex-direction:column;
  gap:11px;
  min-width:0;
}


/* =========================================
   FAQ ITEM
========================================= */

.faq-item{
  width:100%;
  height:auto;
  overflow:hidden;

  border-radius:14px;
  background:rgba(255,255,255,.96);

  box-shadow:0 9px 24px rgba(43,77,48,.045);
}

.faq-item__button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  width:100%;
  min-height:50px;

  padding:0 15px;

  border:0;
  background:transparent;
  color:#303436;

  font-family: "DM Sans", sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.2;
  text-align:left;

  cursor:pointer;
}

.faq-item__button span{
  min-width:0;
}

.faq-item__button svg{
  width:17px;
  height:17px;
  flex:0 0 auto;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;

  transition:transform .28s ease;
}

.faq-item.is-open .faq-item__button svg{
  transform:rotate(180deg);
}


/* =========================================
   ANSWER ANIMATION
========================================= */

.faq-item__answer{
  display:grid;
  grid-template-rows:0fr;

  visibility:hidden;

  transition:
    grid-template-rows .32s ease,
    visibility .32s ease;
}

.faq-item.is-open .faq-item__answer{
  grid-template-rows:1fr;
  visibility:visible;
}

.faq-item__answer-inner{
  min-height:0;
  overflow:hidden;

  padding:0 15px;

  color:#607076;
  font-family: "DM Sans", sans-serif;
  font-size:13px;
  line-height:1.55;

  opacity:0;

  transition:
    padding .32s ease,
    opacity .25s ease;
}

.faq-item.is-open .faq-item__answer-inner{
  padding:2px 15px 17px;
  opacity:1;
}


/* =========================================
   HOVER
========================================= */

.faq-item{
  transition:
    box-shadow .25s ease,
    transform .25s ease;
}

.faq-item:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(43,77,48,.075);
}


/* =========================================
   ENTRANCE ANIMATION
========================================= */

.faq-section__label,
.faq-section__title,
.faq-section__media,
.faq-item{
  opacity:0;
  will-change:transform,opacity;
}

.faq-section.faq-section--visible .faq-section__label{
  animation:faqFadeUp .65s ease .04s forwards;
}

.faq-section.faq-section--visible .faq-section__title{
  animation:faqFadeUp .75s ease .14s forwards;
}

.faq-section.faq-section--visible .faq-section__media{
  animation:faqScaleIn .85s ease .24s forwards;
}

.faq-section.faq-section--visible
.faq-accordion__column:first-child
.faq-item:nth-child(1){
  animation:faqFadeUp .6s ease .34s forwards;
}

.faq-section.faq-section--visible
.faq-accordion__column:last-child
.faq-item:nth-child(1){
  animation:faqFadeUp .6s ease .39s forwards;
}

.faq-section.faq-section--visible
.faq-accordion__column:first-child
.faq-item:nth-child(2){
  animation:faqFadeUp .6s ease .44s forwards;
}

.faq-section.faq-section--visible
.faq-accordion__column:last-child
.faq-item:nth-child(2){
  animation:faqFadeUp .6s ease .49s forwards;
}

.faq-section.faq-section--visible
.faq-accordion__column:first-child
.faq-item:nth-child(3){
  animation:faqFadeUp .6s ease .54s forwards;
}

.faq-section.faq-section--visible
.faq-accordion__column:last-child
.faq-item:nth-child(3){
  animation:faqFadeUp .6s ease .59s forwards;
}

.faq-section.faq-section--visible
.faq-accordion__column:first-child
.faq-item:nth-child(4){
  animation:faqFadeUp .6s ease .64s forwards;
}

.faq-section.faq-section--visible
.faq-accordion__column:last-child
.faq-item:nth-child(4){
  animation:faqFadeUp .6s ease .69s forwards;
}

@keyframes faqFadeUp{
  from{
    opacity:0;
    transform:translateY(26px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes faqScaleIn{
  from{
    opacity:0;
    transform:translateY(25px) scale(.975);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}


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

@media(max-width:900px){

  .faq-section{
    padding:70px 14px 58px;
  }

  .faq-section__title{
    font-size:43px;
  }

  .faq-section__media{
    height:330px;
  }

  .faq-accordion{
    width:min(760px,calc(100% - 28px));
  }

}


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

@media(max-width:620px){

  .faq-section{
    padding:56px 8px 42px;
  }

  .faq-section__title{
    margin-top:22px;

    font-size:37px;
    line-height:1.03;
  }

  .faq-section__media{
    height:270px;
    margin-top:34px;

    border-radius:13px;
  }

  .faq-accordion{
    grid-template-columns:1fr;

    width:calc(100% - 18px);
    margin:-18px auto 0;

    gap:9px;
  }

  .faq-accordion__column{
    gap:9px;
  }

  .faq-item__button{
    min-height:49px;
    padding:0 14px;
    font-size:15px;
  }

}


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

@media(max-width:420px){

  .faq-section__title{
    font-size:34px;
  }

  .faq-section__media{
    height:235px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media(prefers-reduced-motion:reduce){

  .faq-section__label,
  .faq-section__title,
  .faq-section__media,
  .faq-item{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

  .faq-item,
  .faq-item__answer,
  .faq-item__answer-inner{
    transition:none !important;
  }

}
/* =========================================
   TESTIMONIALS SECTION
========================================= */

.ts-section{
  width:100%;
  padding:90px 22px 76px;
  overflow:hidden;

  background:
   radial-gradient(72% 82% at 50% 50%, rgb(201 239 191 / 53%) 0%, rgb(231 248 226 / 54%) 52%, rgb(255 255 255 / 0%) 100%), #ffffff00;

}

.ts-section__inner{
  width:min(950px,100%);
  margin:0 auto;
  padding:14px 16px 24px;

  overflow:hidden;
  border-radius:15px;

  background:#ffffff;

  box-shadow:
    0 18px 55px rgba(39,74,43,.06);
}


/* =========================================
   STATIC IMAGE ROW
========================================= */

.ts-section__images{
  position:relative;

  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;

  width:100%;
}

.ts-section__image{
  min-width:0;
  height:328px;
  margin:0;

  overflow:hidden;
  border-radius:8px;

  background:#e8ece8;
}

.ts-section__image img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center;

  transition:transform .6s ease;
}

.ts-section__image:hover img{
  transform:scale(1.04);
}


/* =========================================
   STATIC CENTER TITLE CARD
========================================= */

.ts-section__title-card{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;

  width:275px;
  min-height:150px;

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

  padding:24px;

  border-radius:8px;

  background:#ffffff;

  text-align:center;

  transform:translate(-50%,-50%);

  box-shadow:
    0 16px 34px rgba(0,0,0,.08);
}

.ts-section__title-card span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:5px 11px;

  border-radius:999px;

  background:#eff7f0;
  color:#66776f;

  font-size:12px;
  font-weight:500;
  line-height:1;
}

.ts-section__title-card h2{
  margin:20px 0 0;

  font-family: "DM Sans", sans-serif;
  font-size:32px;
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.6px;

  color:#2a2a2a;
}


/* =========================================
   TEXT SLIDER
========================================= */

.ts-slider{
  width:100%;
  margin-top:30px;
}

.ts-slider__viewport{
  width:100%;
  overflow:hidden;
}

.ts-slider__track{
  display:flex;
  align-items:flex-start;

  width:100%;

  transition:
    transform .55s cubic-bezier(.22,.8,.25,1);

  will-change:transform;
}

.ts-testimonial{
  flex:0 0 calc(100% / 3);

  min-width:0;
  padding:0 22px;
}

.ts-testimonial blockquote{
  margin:0;

  font-family: "DM Sans", sans-serif;
  font-size:19px;
  font-weight:400;
  line-height:1.18;

  color:#333333;
}

.ts-testimonial p{
  margin:16px 0 0;

  color:#5c696e;

  font-family: "DM Sans", sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1.45;
}


/* =========================================
   SLIDER CONTROLS
========================================= */

.ts-slider__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  margin-top:30px;
}

.ts-slider__arrow{
  display:grid;
  place-items:center;

  width:40px;
  height:40px;

  padding:0;

  border:0;
  border-radius:50%;

  background:#f3f8f3;
  color:#2e3935;

  cursor:pointer;

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

.ts-slider__arrow:hover{
  background:#e5f2e6;
  transform:translateY(-2px);
}

.ts-slider__arrow:disabled{
  opacity:.4;
  cursor:not-allowed;
  transform:none;
}

.ts-slider__arrow svg{
  width:18px;
  height:18px;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}


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

@media(max-width:900px){

  .ts-section{
    padding:72px 14px 58px;
  }

  .ts-section__inner{
    width:min(760px,100%);
  }

  .ts-section__image{
    height:280px;
  }

  .ts-section__title-card{
    width:245px;
    min-height:140px;
  }

  .ts-section__title-card h2{
    font-size:29px;
  }

  .ts-testimonial{
    flex-basis:50%;
  }

}


/* =========================================
   MOBILE
   Two images with overlapping title card
========================================= */

@media(max-width:620px){

  .ts-section{
    padding:54px 8px 40px;
  }

  .ts-section__inner{
    padding:10px 10px 20px;
    border-radius:16px;
  }

  .ts-section__images{
    position:relative;

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;

    min-height:280px;
  }

  /* Hide image 1 and 2 only on mobile */
  .ts-section__image:nth-child(1),
  .ts-section__image:nth-child(2){
    display:none;
  }

  /* Image 3 and 4 remain visible */
  .ts-section__image:nth-child(3),
  .ts-section__image:nth-child(4){
    display:block;

    width:100%;
    height:280px;

    border-radius:10px;
  }

  .ts-section__image:nth-child(3) img,
  .ts-section__image:nth-child(4) img{
    object-position:center;
  }

  .ts-section__title-card{
    left:50%;
    top:50%;

    width:calc(100% - 36px);
    max-width:345px;
    min-height:205px;

    padding:28px 22px;

    border-radius:10px;

    transform:translate(-50%,-50%);

    box-shadow:
      0 18px 42px rgba(36,63,40,.10);
  }

  .ts-section__title-card span{
    padding:6px 13px;
    font-size:14px;
  }

  .ts-section__title-card h2{
    margin-top:25px;

    font-size:35px;
    line-height:1.08;
  }

  .ts-slider{
    margin-top:28px;
  }

  .ts-testimonial{
    flex-basis:100%;
    padding:0 12px;
  }

  .ts-testimonial blockquote{
    font-size:20px;
    line-height:1.2;
  }

  .ts-testimonial p{
    font-size:12px;
  }

  .ts-slider__controls{
    margin-top:25px;
  }

}


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

@media(max-width:420px){

  .ts-section{
    padding-left:5px;
    padding-right:5px;
  }

  .ts-section__inner{
    padding-left:8px;
    padding-right:8px;
  }

  .ts-section__images{
    gap:18px;
    min-height:280px;
  }

  .ts-section__image:nth-child(3),
  .ts-section__image:nth-child(4){
    height:280px;
  }

  .ts-section__title-card{
    width:calc(100% - 34px);
    max-width:342px;
    min-height:205px;

    padding:25px 18px;
  }

  .ts-section__title-card h2{
    font-size:34px;
  }

  .ts-testimonial blockquote{
    font-size:19px;
  }

}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media(max-width:360px){

  .ts-section__images{
    gap:14px;
    min-height:255px;
  }

  .ts-section__image:nth-child(3),
  .ts-section__image:nth-child(4){
    height:255px;
  }

  .ts-section__title-card{
    width:calc(100% - 28px);
    min-height:185px;
  }

  .ts-section__title-card h2{
    font-size:30px;
  }

}


/* =========================================
   IMPORTANT VISIBILITY FIX
========================================= */

.ts-section__image,
.ts-section__title-card,
.ts-testimonial,
.ts-slider__controls{
  opacity:1 !important;
  visibility:visible !important;
}

.ts-section__image,
.ts-testimonial,
.ts-slider__controls{
  transform:none;
}

.ts-section__title-card{
  transform:translate(-50%,-50%);
}


/* =========================================
   REDUCED MOTION
========================================= */

@media(prefers-reduced-motion:reduce){

  .ts-slider__track,
  .ts-section__image img,
  .ts-slider__arrow{
    transition:none !important;
  }

}
/* =========================================
   BLOG SECTION
========================================= */

.vb-blog{
  width:100%;
  padding:86px 22px 82px;
  overflow:hidden;

  background:
    radial-gradient(
      70% 75% at 50% 18%,
      rgba(215,241,207,.48) 0%,
      rgba(241,249,238,.56) 48%,
      rgba(255,255,255,.98) 100%
    ),
    #ffffff;
}

.vb-blog__inner{
  width:min(950px,100%);
  margin:0 auto;
}


/* =========================================
   HEADING
========================================= */

.vb-blog__head{
  text-align:center;
}

.vb-blog__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:25px;
  padding:4px 11px;

  border-radius:999px;

  background:#eff7f0;
  color:#63736f;

  font-size:12px;
  font-weight:500;
  line-height:1;
}

.vb-blog__title{
  margin:25px 0 0;

  font-family: "DM Sans", sans-serif;
  font-size:45px;
  font-weight:400;
  line-height:.98;
  letter-spacing:-1px;

  color:#282828;
}


/* =========================================
   BLOG GRID
========================================= */

.vb-blog__grid{
  display:grid;
  grid-template-columns:
    minmax(0,.85fr)
    minmax(230px,1fr)
    minmax(0,.85fr)
    minmax(230px,1fr);

  align-items:center;
  gap:32px;

  margin-top:48px;
}


/* =========================================
   CONTENT
========================================= */

.vb-blog__content{
  min-width:0;
}

.vb-blog__content h3{
  margin:0;

  font-family: "DM Sans", sans-serif;
  font-size:25px;
  font-weight:400;
  line-height:1.02;

  color:#2b2b2b;
}

.vb-blog__content p{
  margin:18px 0 0;

  color:#5d6d73;
  font-size:13px;
  font-weight:500;
  line-height:1.55;
}

.vb-blog__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:40px;

  margin-top:25px;
  padding:0 22px;

  border:1px solid #b9ccdf;
  border-radius:999px;

  background:#ffffff;
  color:#30383b;

  font-size:12px;
  font-weight:500;
  text-decoration:none;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease;
}

.vb-blog__button:hover{
  background:#0e5ca8;
  border-color:#0e5ca8;
  color:#ffffff;

  transform:translateY(-2px);

  box-shadow:0 10px 22px rgba(14,92,168,.16);
}


/* =========================================
   IMAGES
========================================= */

.vb-blog__image{
  height:175px;
  margin:0;

  overflow:hidden;
  border-radius:8px;

  background:#e6ebe6;
}

.vb-blog__image img{
  width:100%;
  height:100%;
  display:block;

  object-fit:cover;
  object-position:center;

  transition:transform .6s ease;
}

.vb-blog__image:hover img{
  transform:scale(1.045);
}


/* =========================================
   ENTRANCE ANIMATION
========================================= */

.vb-blog__label,
.vb-blog__title,
.vb-blog__content,
.vb-blog__image{
  opacity:0;
  will-change:transform,opacity;
}

.vb-blog.vb-blog--visible .vb-blog__label{
  animation:vbBlogFadeUp .65s ease .04s forwards;
}

.vb-blog.vb-blog--visible .vb-blog__title{
  animation:vbBlogFadeUp .75s ease .14s forwards;
}

.vb-blog.vb-blog--visible .vb-blog__content:nth-child(1){
  animation:vbBlogFromLeft .75s ease .24s forwards;
}

.vb-blog.vb-blog--visible .vb-blog__image:nth-child(2){
  animation:vbBlogFadeUp .75s ease .30s forwards;
}

.vb-blog.vb-blog--visible .vb-blog__content:nth-child(3){
  animation:vbBlogFromRight .75s ease .36s forwards;
}

.vb-blog.vb-blog--visible .vb-blog__image:nth-child(4){
  animation:vbBlogFadeUp .75s ease .42s forwards;
}

@keyframes vbBlogFadeUp{
  from{
    opacity:0;
    transform:translateY(25px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes vbBlogFromLeft{
  from{
    opacity:0;
    transform:translateX(-35px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes vbBlogFromRight{
  from{
    opacity:0;
    transform:translateX(35px);
  }

  to{
    opacity:1;
    transform:translateX(0);
  }
}


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

@media(max-width:980px){

  .vb-blog__inner{
    width:min(780px,100%);
  }

  .vb-blog__grid{
    grid-template-columns:1fr 1fr;
    gap:26px 20px;
  }

  .vb-blog__content{
    min-height:190px;
  }

  .vb-blog__image{
    height:220px;
  }

}


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

@media(max-width:620px){

  .vb-blog{
    padding:58px 10px 44px;
  }

  .vb-blog__title{
    font-size:37px;
  }

  .vb-blog__grid{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:38px;
  }

  .vb-blog__content{
    min-height:auto;
    padding:0 6px;
  }

  .vb-blog__content h3{
    font-size:27px;
  }

  .vb-blog__content p{
    font-size:13px;
  }

  .vb-blog__image{
    height:245px;
  }

  /* Mobile order:
     first text
     first image
     second text
     second image
  */

  .vb-blog__content:nth-child(1){
    order:1;
  }

  .vb-blog__image:nth-child(2){
    order:2;
  }

  .vb-blog__content:nth-child(3){
    order:3;
    margin-top:20px;
  }

  .vb-blog__image:nth-child(4){
    order:4;
  }

}


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

@media(max-width:420px){

  .vb-blog__title{
    font-size:34px;
  }

  .vb-blog__image{
    height:220px;
  }

}


/* =========================================
   VISIBILITY FALLBACK
========================================= */

@media(prefers-reduced-motion:reduce){

  .vb-blog__label,
  .vb-blog__title,
  .vb-blog__content,
  .vb-blog__image{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }

}

/* =========================================================
   GLOBAL FONT CONSISTENCY - ICON SAFE
   Do not override ::before / ::after because icon libraries
   use their own font-family on pseudo-elements.
========================================================= */
html,
body,
button,
input,
select,
textarea {
  font-family: "DM Sans", sans-serif;
}