/* =========================================================
   GOOGLE FONTS
========================================================= */

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

/* =========================================================
   ROOT COLORS
========================================================= */

:root{
  --maroon:#ad1028;
  --maroon-dark:#87091c;

  --teal:#00534f;
  --teal-dark:#003e3c;

  --gold:#d2ad58;

  --cream:#faf7ef;
  --white:#ffffff;

  --text:#223f46;
}

/* =========================================================
   RESET
========================================================= */

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

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Inter",sans-serif;
  background:#ffffff;
  color:var(--text);
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  display:block;
  max-width:100%;
}

button{
  font-family:inherit;
}

/* =========================================================
   MAIN HERO SECTION
========================================================= */

.cect-hero{
  width:100%;
  position:relative;
  background:#ffffff;
  overflow:hidden;
}

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

   HEADER HEIGHT CHANGE:
   height: 90px;
========================================================= */

.cect-header{
  width:100%;

  /* HEADER HEIGHT CONTROL */
  height:90px;

  position:relative;
  z-index:100;

  background:rgba(255,255,255,.98);
}

.cect-header-inner{
  width:min(1320px,calc(100% - 60px));
  height:100%;

  margin:0 auto;

  display:flex;
  align-items:center;

  gap:34px;
}

/* =========================================================
   LOGO / BRAND
========================================================= */

.cect-brand{
  display:flex;
  align-items:center;

  gap:12px;

  flex-shrink:0;
}

/* LOGO SIZE CONTROL */

.cect-brand img{
  width:72px;
  height:72px;

  object-fit:contain;
}

.cect-brand-copy{
  line-height:1;
}

.cect-brand-copy strong{
  display:block;

  color:#a41025;

  /* COMPANY NAME SIZE */
  font-size:16px;

  line-height:1.2;

  font-weight:700;
}

.cect-brand-copy span{
  display:block;

  margin-top:6px;

  /* TAGLINE SIZE */
  font-size:9px;

  font-weight:700;

  letter-spacing:1px;

  color:#697477;
}

/* =========================================================
   NAVIGATION
========================================================= */

.cect-nav{
  margin-left:auto;

  display:flex;
  align-items:center;

  gap:30px;
}

.cect-nav a{
  position:relative;

  padding:10px 0;

  /* NAV TEXT SIZE CONTROL */
  font-size:17px;

  font-weight:600;

  color:#405256;

  transition:color .3s ease;
}

.cect-nav a::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  width:0;
  height:2px;

  background:var(--maroon);

  transform:translateX(-50%);

  transition:width .3s ease;
}

.cect-nav a:hover,
.cect-nav a.active{
  color:var(--maroon);
}

.cect-nav a:hover::after,
.cect-nav a.active::after{
  width:100%;
}

/* =========================================================
   HEADER DONATE BUTTON
========================================================= */

.cect-header-donate{
  height:48px;

  padding:0 25px;

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

  gap:22px;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #bd142c,
      #94091e
    );

  color:#ffffff;

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

  white-space:nowrap;

  box-shadow:
    0 13px 30px rgba(167,16,39,.17);

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

.cect-header-donate span{
  font-size:20px;

  transition:transform .3s ease;
}

.cect-header-donate:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 38px rgba(167,16,39,.25);
}

.cect-header-donate:hover span{
  transform:translateX(5px);
}

/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.cect-menu-toggle{
  display:none;

  width:45px;
  height:45px;

  padding:10px;

  border:0;

  border-radius:10px;

  background:var(--teal);

  cursor:pointer;
}

.cect-menu-toggle span{
  display:block;

  width:100%;
  height:2px;

  margin:5px 0;

  background:#ffffff;
}

/* =========================================================
   HERO IMAGE AREA

   HERO HEIGHT CHANGE:
   min-height: 720px;
========================================================= */

.cect-hero-main{
  width:100%;

  /* ================================
     HERO SECTION HEIGHT CONTROL
  ================================= */
  min-height:720px;

  position:relative;

  overflow:hidden;
}

/* =========================================================
   FULL WIDTH BACKGROUND IMAGE
========================================================= */

.cect-full-bg{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  z-index:0;

  overflow:hidden;
}

.cect-full-bg img{
  width:100%;
  height:100%;

  /*
     cover = full hero occupy ஆகும்.
     contain போட்டால் blank space வரும்.
  */
  object-fit:cover;

  /*
     IMAGE POSITION CONTROL

     center center
     50% 50%

     Image கீழே cut ஆனால்:
     center 60%

     Image மேலே move செய்ய:
     center 40%
  */
  object-position:center center;

  transform:scale(1.01);

  transition:transform .25s ease-out;
}

/* =========================================================
   CINEMATIC LIGHT
========================================================= */

.cect-hero-main::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 52% 62%,
      rgba(255,211,108,.08),
      transparent 30%
    );
}

/* =========================================================
   HERO CONTENT CONTAINER
========================================================= */

.cect-hero-container{
  width:min(1320px,calc(100% - 60px));

  /* CONTENT AREA HEIGHT */
  min-height:620px;

  margin:0 auto;

  position:relative;

  z-index:10;

  display:flex;
  align-items:center;
}

/* =========================================================
   HERO LEFT CONTENT
========================================================= */

.cect-hero-content{
  width:100%;

  /* TEXT AREA WIDTH */
  max-width:600px;

  /*
     CONTENT UP / DOWN CONTROL

     -40px = மேலே
      0px  = normal
      30px = கீழே
  */
  margin-top:-30px;
}

/* =========================================================
   SMALL TOP TEXT
========================================================= */

.cect-eyebrow{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  margin-bottom:25px;

  color:#254a50;

  /* FROM TRICHY TEXT SIZE */
  font-size:10px;

  line-height:1;

  font-weight:700;

  letter-spacing:2.7px;
}

.eyebrow-dot{
  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--maroon);
}

.eyebrow-line{
  width:45px;
  height:2px;

  margin-left:7px;

  background:#315e60;
}

/* =========================================================
   MAIN HERO HEADING

   ***** MAIN TEXT SIZE CONTROL *****

   இங்க தான் desktop text size change பண்ணணும்.
========================================================= */

.cect-hero-content h1{
  margin:0 0 27px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  /*
     இரண்டு line gap control
  */
  line-height:.78;

  /*
     LETTER SPACE
  */
  letter-spacing:-4px;
}

/* COMPASSION */

.cect-hero-content h1 span{
  display:block;

  color:#aa112b;

  /* ==================================
     COMPASSION SIZE
     இதை மட்டும் change பண்ணலாம்
  ================================== */
  font-size:90px;

  font-weight:700;
}

/* CREATES CHANGE */

.cect-hero-content h1 strong{
  display:block;

  color:#04524e;

  /* ==================================
     CREATES CHANGE SIZE
     இதை மட்டும் change பண்ணலாம்
  ================================== */
  font-size:95px;

  font-weight:700;
}

/* =========================================================
   HERO DESCRIPTION
========================================================= */

.cect-hero-description{
  max-width:520px;

  margin-bottom:28px;
  font-weight: bold;
  color:#40585d;

  /* DESCRIPTION TEXT SIZE */
  font-size:16px;

  line-height:1.7;
}

/* =========================================================
   BUTTON CONTAINER
========================================================= */

.cect-actions{
  display:flex;

  align-items:center;

  gap:17px;
}

.cect-btn{
  min-height:48px;

  padding:0 22px;

  display:inline-flex;

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

  border-radius:12px;

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

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

/* =========================================================
   DONATE BUTTON
========================================================= */

.cect-btn-primary{
  min-width:154px;

  gap:30px;

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #b7132b,
      #8d091c
    );

  box-shadow:
    0 12px 28px rgba(151,12,34,.19);
}

.cect-btn-primary:hover{
  transform:translateY(-4px);

  box-shadow:
    0 17px 37px rgba(151,12,34,.27);
}

/* =========================================================
   WATCH STORY BUTTON
========================================================= */

.cect-btn-story{
  min-width:173px;

  gap:10px;

  color:#344d52;

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

  border:
    1px solid rgba(42,75,78,.11);

  backdrop-filter:blur(12px);
}

.cect-btn-story:hover{
  transform:translateY(-4px);

  background:#ffffff;
}

.play-circle{
  width:33px;
  height:33px;

  flex-shrink:0;

  display:grid;

  place-items:center;

  padding-left:2px;

  border-radius:50%;

  color:#ffffff;

  background:var(--maroon);

  font-size:10px;
}

/* =========================================================
   STONE MESSAGE
========================================================= */

.cect-stone-message{
  position:absolute;

  left:24px;

  bottom:75px;

  z-index:8;

  width:150px;
  height:155px;

  padding:30px 21px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  color:#4a4b41;

  font-family:Georgia,serif;

  font-size:23px;

  font-weight:600;

  line-height:.88;

  background:
    linear-gradient(
      145deg,
      #d6bf91,
      #cdb482
    );

  clip-path:
    polygon(
      9% 3%,
      84% 0%,
      100% 17%,
      92% 100%,
      4% 95%,
      0% 16%
    );

  transform:rotate(-3deg);

  box-shadow:
    0 20px 35px rgba(46,39,27,.1);
}

/* =========================================================
   IMPACT WAVE
========================================================= */

.cect-impact-wave{
  position:absolute;

  z-index:20;

  left:-3%;

  bottom:-44px;

  width:106%;

  min-height:180px;

  padding:68px 5% 25px;

  background:rgba(255,253,248,.97);

  clip-path:
    ellipse(
      75% 66%
      at
      50% 79%
    );
}

.cect-impact-inner{
  width:min(850px,70%);

  margin-left:auto;
  margin-right:75px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr) .9fr;

  align-items:center;
}

.cect-impact-item{
  min-height:85px;

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;
}

.cect-impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;

  right:0;
  top:17px;

  width:1px;
  height:52px;

  background:#e5ded1;
}

.cect-impact-icon{
  margin-bottom:5px;

  font-size:28px;
}

.cect-impact-icon.heart{
  color:var(--maroon);
}

.cect-impact-item strong{
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:17px;

  color:#164c4f;
}

.cect-impact-item span{
  margin-top:2px;

  color:#6f797a;

  font-size:10px;
}

.cect-impact-message{
  padding-left:24px;

  display:flex;

  flex-direction:column;

  color:#586b6c;

  font-size:8px;

  line-height:1.5;

  letter-spacing:1.5px;

  font-weight:700;
}

.cect-impact-message i{
  width:30px;
  height:2px;

  margin-top:8px;

  background:var(--maroon);
}

/* =========================================================
   TABLET - 1150PX
========================================================= */

@media (max-width:1150px){

  .cect-header-inner{
    width:calc(100% - 40px);
    gap:20px;
  }

  .cect-nav{
    gap:17px;
  }

  .cect-nav a{
    font-size:10px;
  }

  .cect-brand-copy strong{
    font-size:12px;
  }

  .cect-header-donate{
    padding:0 17px;
  }

  .cect-hero-container{
    width:calc(100% - 55px);
  }

  .cect-hero-content{
    max-width:540px;
  }

  /* TABLET HEADING SIZE */

  .cect-hero-content h1 span{
    font-size:72px;
  }

  .cect-hero-content h1 strong{
    font-size:74px;
  }

}

/* =========================================================
   TABLET / MOBILE - 900PX
========================================================= */

@media (max-width:900px){

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

  .cect-header{
    height:auto;

    min-height:82px;
  }

  .cect-header-inner{
    width:calc(100% - 28px);

    min-height:82px;
  }

  .cect-brand img{
    width:50px;
    height:50px;
  }

  .cect-brand-copy strong{
    font-size:10px;
  }

  .cect-brand-copy span{
    font-size:5.5px;
  }

  .cect-header-donate{
    display:none;
  }

  .cect-menu-toggle{
    display:block;

    margin-left:auto;
  }

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

  .cect-nav{
    position:absolute;

    top:75px;

    left:14px;
    right:14px;

    z-index:200;

    margin:0;

    padding:14px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:0;

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

    border-radius:18px;

    box-shadow:
      0 18px 40px rgba(17,57,56,.14);

    opacity:0;

    visibility:hidden;

    transform:translateY(-15px);

    transition:
      opacity .3s ease,
      visibility .3s ease,
      transform .3s ease;
  }

  .cect-nav.open{
    opacity:1;

    visibility:visible;

    transform:translateY(0);
  }

  .cect-nav a{
    padding:14px 13px;

    font-size:13px;

    border-bottom:
      1px solid #eeeeee;
  }

  .cect-nav a:last-child{
    border-bottom:none;
  }

  .cect-nav a::after{
    display:none;
  }

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

  .cect-hero-main{
    min-height:760px;
  }

  .cect-full-bg img{
    /*
       MOBILE IMAGE POSITION
    */
    object-position:68% center;
  }

  /*
     MOBILE WHITE OVERLAY
  */

  .cect-full-bg::after{
    display:none;
}

  .cect-hero-container{
    width:calc(100% - 35px);

    min-height:650px;

    align-items:flex-start;

    padding-top:70px;
  }

  .cect-hero-content{
    max-width:550px;

    margin:0 auto;

    text-align:center;
  }

  .cect-eyebrow{
    justify-content:center;
  }

  /* ===============================
     TABLET HEADING SIZE
  =============================== */

  .cect-hero-content h1 span{
    font-size:62px;
  }

  .cect-hero-content h1 strong{
    font-size:64px;
  }

  .cect-hero-description{
    margin-left:auto;
    margin-right:auto;
  }

  .cect-actions{
    justify-content:center;
  }

  .cect-stone-message{
    display:none;
  }

  /* ================= IMPACT ================= */

  .cect-impact-wave{
    left:0;

    bottom:0;

    width:100%;

    min-height:auto;

    padding:25px 20px;

    clip-path:none;

    border-radius:
      35px 35px 0 0;
  }

  .cect-impact-inner{
    width:100%;

    margin:0;

    grid-template-columns:
      repeat(4,1fr);
  }

  .cect-impact-message{
    display:none;
  }

}

/* =========================================================
   MOBILE - 600PX
========================================================= */

@media (max-width:600px){

  .cect-brand-copy strong{
    font-size:9px;
  }

  .cect-hero-main{
    min-height:790px;
  }

  .cect-full-bg img{
    object-position:70% center;
  }

  .cect-hero-container{
    width:calc(100% - 28px);

    padding-top:50px;
  }

  .cect-eyebrow{
    gap:6px;

    font-size:7px;

    letter-spacing:1.6px;
  }

  .eyebrow-line{
    display:none;
  }

  .cect-hero-content h1{
    letter-spacing:-2px;

    line-height:.84;
  }

  /* ===============================
     MOBILE HEADING SIZE CONTROL
  =============================== */

  .cect-hero-content h1 span{
    font-size:48px;
  }

  .cect-hero-content h1 strong{
    font-size:50px;
  }

  .cect-hero-description{
    max-width:350px;

    font-size:12.5px;

    line-height:1.6;
  }

  .cect-actions{
    flex-direction:column;
  }

  .cect-btn{
    width:100%;

    max-width:310px;
  }

  .cect-impact-inner{
    grid-template-columns:
      repeat(2,1fr);

    gap:8px;
  }

  .cect-impact-item{
    min-height:90px;

    padding:8px;

    border-radius:15px;

    background:#ffffff;
  }

  .cect-impact-item::after{
    display:none !important;
  }

}

/* =========================================================
   VERY SMALL MOBILE - 390PX
========================================================= */

@media (max-width:390px){

  .cect-brand-copy{
    display:none;
  }

  /* SMALL MOBILE HEADING */

  .cect-hero-content h1 span{
    font-size:40px;
  }

  .cect-hero-content h1 strong{
    font-size:42px;
  }

}

/* =========================================================
   ACCESSIBILITY
========================================================= */

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

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

.about-impact-section{
  width:100%;
  position:relative;
  background:#f9f5ec;
  overflow:hidden;
}

/* =========================
   TOP CURVE
========================= */

.impact-curve{
  position:relative;
  width:104%;
  margin-left:-2%;
  margin-top:-55px;

  min-height:240px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(250,247,239,.98)
    );

  border-radius:50% 50% 0 0 / 32% 32% 0 0;

  box-shadow:
    0 -10px 30px rgba(65,50,30,.05);

  z-index:5;
}

.impact-curve::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.18;

  background:
    url("../images/pattern-line.png")
    center / 420px repeat;
}

.impact-items{
  width:min(1050px,calc(100% - 80px));
  margin:auto;

  min-height:220px;

  display:grid;
  grid-template-columns:
    repeat(4,1fr) .9fr;

  align-items:center;

  padding-top:55px;

  position:relative;
  z-index:2;
}

.impact-item{
  position:relative;
  text-align:center;
  padding:5px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;
  right:0;
  top:25px;

  width:1px;
  height:75px;

  background:#dfd7ca;
}

.impact-icon{
  font-size:34px;
  margin-bottom:8px;
  color:#064f4d;
}

.impact-icon.red{
  color:#b4112a;
}

.impact-item h3{
  margin:0;

  font-family:"Inter",sans-serif;
  font-size:20px;
  line-height:1.35;

  color:#ffffff;

  text-align:center;

  width:100%;
  max-width:260px;
  margin-left:auto;
  margin-right:auto;
}

.impact-item p{
  margin-top:2px;

  font-family:"Inter",sans-serif;

  font-size:12px;

  color:#607174;
}

.impact-tag{
  display:flex;
  flex-direction:column;

  padding-left:30px;

  font-size:9px;
  line-height:1.45;

  font-weight:700;

  letter-spacing:1.6px;

  color:#647275;
}

.impact-tag i{
  width:31px;
  height:2px;

  margin-top:8px;

  background:#ae1229;
}

/* =========================
   ABOUT AREA
========================= */

.about-main{
  width:min(1100px,calc(100% - 70px));
  margin:-20px auto 0;

  display:grid;

  grid-template-columns:
    40% 38% 22%;

  column-gap:28px;

  position:relative;

  padding:
    55px 0 45px;

  min-height:540px;
}

/* paper background */

.about-main::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.12;

  background:
    url("../images/pattern-line.png")
    center / 450px repeat;

  pointer-events:none;
}

.about-collage{
  position:relative;
  z-index:3;

  min-height:390px;

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

.about-collage-image{
  width:100%;
  max-width:700px;
  height:auto;

  display:block;
  object-fit:contain;

  /* LEFT MOVE */
  transform:translateX(-50px);

  filter:
    drop-shadow(0 18px 22px rgba(55,40,25,.12));

  transition:
    transform .45s ease,
    filter .45s ease;
}

.about-collage-image:hover{
  transform:
    translateX(-40px)
    translateY(-8px)
    scale(1.025);

  filter:
    drop-shadow(0 25px 30px rgba(55,40,25,.17));
}

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

.about-content{
  position:relative;
  z-index:4;

  padding-top:25px;
}

.section-eyebrow{
  display:flex;
  align-items:center;

  gap:12px;

  margin-bottom:20px;
}

.section-eyebrow span{
  font-size:10px;
  font-weight:700;

  letter-spacing:3px;

  color:#21545a;
}

.section-eyebrow i{
  width:45px;
  height:2px;

  background:#246064;
}

.about-content h2{
  margin:0 0 20px;

  font-family:"Cormorant Garamond",serif;

  font-size:49px;
  line-height:.92;

  letter-spacing:-1.4px;

  color:#144a50;
}

.about-content p{
  max-width:490px;

  font-size:16px;
  line-height:1.65;
  text-align: justify;
  color:#52686c;

  margin-bottom:24px;
}

.about-btn{
  min-width:190px;
  min-height:44px;

  padding:0 18px;

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

  gap:50px;

  border-radius:12px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #b6152d,
      #91091e
    );

  font-size:12px;
  font-weight:600;

  box-shadow:
    0 10px 25px rgba(152,10,30,.14);

  transition:.3s ease;
}

.about-btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 14px 30px rgba(152,10,30,.22);
}

/* =========================
   RIGHT DECOR
========================= */

.about-decor{
  position:relative;
  z-index:2;

  min-height:330px;
}

.temple-line-art{
  position:absolute;

  width:800px;

  right:-30px;
  top:50px;

  opacity:8.5;

  filter:
    sepia(1)
    saturate(.55);
}

.about-script{
  position:absolute;

  right:20px;
  top:195px;

  font-family:"Caveat",cursive;

  font-size:31px;
  line-height:.88;

  color:#34383b;

  transform:rotate(-8deg);
}

/* =========================
   STATS
========================= */

.about-stats{
  grid-column:2 / 4;

  margin-top:-35px;

  position:relative;
  z-index:10;

  min-height:95px;

  display:grid;

  grid-template-columns:
    1fr 1px 1fr 1px 1fr;

  align-items:center;

  padding:
    15px 28px;

  border-radius:18px;

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

  backdrop-filter:
    blur(10px);

  box-shadow:
    0 14px 35px rgba(65,50,34,.08);
}

.stat{
  padding:0 20px;
}

.stat strong{
  display:block;

  font-family:"Cormorant Garamond",serif;

  font-size:31px;

  color:#0d5757;
}

.stat strong.red{
  color:#ad1028;
}

.stat span{
  display:block;

  margin-top:-2px;

  color:#637274;

  font-size:10px;
}

.stat-divider{
  width:1px;
  height:50px;

  background:#ddd6ca;
}

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

@media(max-width:950px){

  .impact-items{
    width:calc(100% - 40px);

    grid-template-columns:
      repeat(4,1fr);

    padding-top:65px;
  }

  .impact-tag{
    display:none;
  }

  .about-main{
    width:calc(100% - 40px);

    grid-template-columns:
      45% 55%;

    column-gap:25px;
  }

  .about-decor{
    display:none;
  }

  .about-stats{
    grid-column:1 / -1;

    margin-top:20px;
  }

}

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

@media(max-width:700px){

  .impact-curve{
    margin-top:-30px;

    min-height:auto;

    border-radius:
      45% 45% 0 0 / 12% 12% 0 0;
  }

  .impact-items{
    grid-template-columns:
      repeat(2,1fr);

    gap:8px;

    padding:
      55px 10px 25px;
  }

  .impact-item{
    padding:12px 5px;

    border-radius:14px;

    background:rgba(255,255,255,.55);
  }

  .impact-item::after{
    display:none;
  }

  .impact-icon{
    font-size:28px;
  }

  .impact-item h3{
    font-size:17px;
  }

  .about-main{
    width:calc(100% - 30px);

    display:block;

    padding-top:35px;
  }

  .about-collage{
    width:100%;

    margin-bottom:30px;
  }

  .collage-paper{
    max-width:430px;

    margin:auto;
  }

  .about-content{
    text-align:center;

    padding-top:0;
  }

  .section-eyebrow{
    justify-content:center;
  }

  .about-content h2{
    font-size:36px;
  }

  .about-content p{
    margin-left:auto;
    margin-right:auto;
  }

  .about-stats{
    margin-top:35px;

    grid-template-columns:1fr;

    gap:18px;

    text-align:center;

    padding:25px;
  }

  .stat-divider{
    display:none;
  }

}

/* =========================================
   BOTTOM STATS CARD
========================================= */

.about-stats{
  background:#075b55;       /* CARD GREEN COLOR */
  border-radius:24px;
  padding:28px 45px;

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

/* 12+ / 10,000+ / Trichy */
.about-stats .stat strong{
  display:block;

  font-size:34px;           /* ← MAIN TEXT SIZE CONTROL */
  line-height:1;
  font-weight:700;

  color:#ffffff;            /* WHITE */
  margin-bottom:8px;
}

/* Social Programs / Lives Touched / etc */
.about-stats .stat span{
  display:block;

  font-size:15px;           /* ← SMALL TEXT SIZE CONTROL */
  line-height:1.4;

  color:rgba(255,255,255,.85);
}

/* Trichy old red color override */
.about-stats .stat strong.red{
  color:#ffffff;
}

/* DIVIDER LINES */
.about-stats .stat-divider{
  width:1px;
  height:62px;

  background:rgba(255,255,255,.28);
}

/* =========================================
   IMPACT SECTION
   CREATIVE TOP + BOTTOM CURVE
========================================= */

.impact-curve{
  position:relative;
  width:100%;

  /* section height */
  min-height:260px;

  /* space for top + bottom curves */
  padding:65px 0 70px;

  background:
    linear-gradient(
      110deg,
      #075653 0%,
      #08736c 50%,
      #075653 100%
    );

  overflow:hidden;
  z-index:5;

  /* IMPORTANT:
     top + bottom smooth organic curve
  */
  .impact-curve{
    clip-path: ellipse(90% 100% at 50% 0%);
}
}

/* =========================================
   VERY LIGHT TOP DECORATIVE WAVE
========================================= */

.impact-curve::before{
  content:"";

  position:absolute;
  top:7px;
  left:-5%;

  width:110%;
  height:45px;

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

  border-radius:
    0 0 50% 50% 
    0 0 100% 100%;

  transform:rotate(-1deg);

  pointer-events:none;
}

/* =========================================
   VERY LIGHT BOTTOM DECORATIVE WAVE
========================================= */

.impact-curve::after{
  content:"";

  position:absolute;

  bottom:5px;
  left:-5%;

  width:110%;
  height:40px;

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

  border-radius:
    50% 50% 0 0 /
    100% 100% 0 0;

  transform:rotate(1deg);

  pointer-events:none;
}

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

.impact-items{
  position:relative;
  z-index:10;

  width:min(1200px, calc(100% - 80px));
  margin:auto;

  display:grid;

  grid-template-columns:
    repeat(4, 1fr) 180px;

  align-items:center;
}

/* =========================================
   EACH ITEM
========================================= */

.impact-item{
  position:relative;
  text-align:center;

  padding:10px 30px;
}

/* DIVIDER */

.impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;

  right:0;
  top:15%;

  width:1px;
  height:70%;

  background:rgba(255,255,255,.22);
}

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

.impact-icon{
  font-size:36px;

  margin-bottom:10px;

  transition:
    transform .35s ease;
}

.impact-item:hover .impact-icon{
  transform:
    translateY(-7px)
    scale(1.1);
}

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

.impact-item h3{
  margin:0 0 4px;

  font-family:Georgia, serif;

  font-size:25px;
  font-weight:600;

  color:#ffffff;
}

/* =========================================
   SMALL TEXT
========================================= */

.impact-item p{
  margin:0;

  font-size:15px;
  line-height:1.5;

  color:rgba(255,255,255,.78);
}

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

.impact-tag{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  padding-left:35px;

  font-size:11px;
  line-height:1.45;

  letter-spacing:2px;

  font-weight:700;

  color:#ffffff;
}

.impact-tag i{
  display:block;

  width:40px;
  height:3px;

  margin-top:12px;

  background:#ffffff;

  border-radius:20px;
}

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

@media(max-width:1000px){

.footer-wrapper{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.footer-wrapper{

grid-template-columns:1fr;

}

.footer-credit-card{

width:90%;

}

}

@media(max-width:600px){

  .impact-curve{
    min-height:auto;

    padding:
      75px 20px
      80px;
  }

  .impact-items{
    grid-template-columns:1fr;

    width:100%;

    gap:30px;
  }

  .impact-tag{
    grid-column:auto;
  }

  .impact-item h3{
    font-size:23px;
  }

}

/* =========================================
   IMPACT SECTION - OCEAN WAVE BACKGROUND
========================================= */

.impact-curve{
  position:relative;
  width:104%;
  margin-left:-2%;
  margin-top:-55px;
  min-height:240px;

  background:
    linear-gradient(
      120deg,
      #003f3c 0%,
      #006b66 35%,
      #00877e 60%,
      #00534f 100%
    );

  border-radius:50% 50% 0 0 / 32% 32% 0 0;

  overflow:hidden;
  z-index:5;
}

/* =========================================
   FIRST OCEAN WAVE
========================================= */

.impact-curve::before{
  content:"";

  position:absolute;

  width:150%;
  height:220px;

  left:-25%;
  bottom:-145px;

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

  border-radius:45% 55% 48% 52% / 55% 48% 52% 45%;

  animation:oceanWaveOne 10s linear infinite;

  pointer-events:none;
}

/* =========================================
   SECOND OCEAN WAVE
========================================= */

.impact-curve::after{
  content:"";

  position:absolute;

  width:160%;
  height:210px;

  left:-30%;
  bottom:-160px;

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

  border-radius:52% 48% 55% 45% / 45% 55% 48% 52%;

  animation:oceanWaveTwo 14s linear infinite;

  pointer-events:none;
}

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

@keyframes oceanWaveOne{

  0%{
    transform:
      translateX(0)
      rotate(0deg);
  }

  50%{
    transform:
      translateX(5%)
      rotate(3deg);
  }

  100%{
    transform:
      translateX(0)
      rotate(0deg);
  }

}

@keyframes oceanWaveTwo{

  0%{
    transform:
      translateX(0)
      rotate(0deg);
  }

  50%{
    transform:
      translateX(-5%)
      rotate(-3deg);
  }

  100%{
    transform:
      translateX(0)
      rotate(0deg);
  }

}

/* =========================================
   CONTENT ABOVE WAVES
========================================= */

.impact-items{
  position:relative;
  z-index:5;
}

/* WHITE TEXT */

.impact-item h3,
.impact-tag{
  color:#005f5a;
}

.impact-item p{
  color:rgba(255,255,255,.82);
}

/* DIVIDER */

.impact-item:not(:nth-child(4))::after{
  background:rgba(255,255,255,.22);
}

/* RIGHT SMALL LINE */

.impact-tag i{
  background:#ffffff;
}

/* =========================================
   IMPACT SECTION - IRREGULAR TOP & BOTTOM WAVE
   Sketch shape style
========================================= */

.impact-curve{
  position:relative;

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

  margin:0;
  padding:70px 0 75px;

  background:
    linear-gradient(
      120deg,
      #04514e 0%,
      #08756e 52%,
      #055a55 100%
    );

  /*
    MAIN SHAPE:
    top + bottom irregular wave
  */
  clip-path:polygon(
    /* TOP WAVE */
    0% 11%,
    5% 6%,
    10% 8%,
    15% 4%,
    20% 7%,
    25% 3%,
    30% 6%,
    35% 4%,
    40% 8%,
    45% 5%,
    50% 7%,
    55% 3%,
    60% 6%,
    65% 4%,
    70% 7%,
    75% 5%,
    80% 8%,
    85% 4%,
    90% 7%,
    95% 5%,
    100% 10%,

    /* RIGHT SIDE */
    100% 90%,

    /* BOTTOM WAVE */
    95% 95%,
    90% 92%,
    85% 96%,
    80% 93%,
    75% 97%,
    70% 94%,
    65% 96%,
    60% 92%,
    55% 95%,
    50% 93%,
    45% 97%,
    40% 94%,
    35% 96%,
    30% 92%,
    25% 95%,
    20% 93%,
    15% 97%,
    10% 94%,
    5% 96%,
    0% 91%
  );

  overflow:hidden;
  z-index:5;
}

/* =========================================
   LIGHT TOP INNER WAVE
========================================= */

.impact-curve::before{
  content:"";

  position:absolute;

  top:15px;
  left:-5%;

  width:110%;
  height:75px;

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

  clip-path:polygon(
    0% 35%,
    8% 18%,
    16% 28%,
    24% 12%,
    32% 24%,
    40% 14%,
    48% 28%,
    56% 10%,
    64% 23%,
    72% 15%,
    80% 29%,
    88% 13%,
    100% 30%,
    100% 100%,
    0% 100%
  );

  pointer-events:none;
}

/* =========================================
   LIGHT BOTTOM INNER WAVE
========================================= */

.impact-curve::after{
  content:"";

  position:absolute;

  bottom:10px;
  left:-5%;

  width:110%;
  height:75px;

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

  clip-path:polygon(
    0% 55%,
    8% 70%,
    16% 58%,
    24% 76%,
    32% 62%,
    40% 72%,
    48% 57%,
    56% 75%,
    64% 60%,
    72% 73%,
    80% 58%,
    88% 76%,
    100% 60%,
    100% 100%,
    0% 100%
  );

  pointer-events:none;
}

/* =========================================
   CONTENT ABOVE SHAPE
========================================= */

.impact-items{
  position:relative;
  z-index:10;

  width:min(1200px, calc(100% - 80px));
  margin:auto;

  display:grid;
  grid-template-columns:repeat(4,1fr) 180px;

  align-items:center;
}

/* =========================================
   ITEM TEXT
========================================= */

.impact-item{
  position:relative;
  text-align:center;
  padding:10px 28px;
}

.impact-item h3{
  margin:0 0 4px;

  font-family:"Cormorant Garamond", serif;

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

  color:#005f5a;
}

.impact-item p{
  margin:0;

  font-size:15px;
  line-height:1.5;

  color:rgba(255,255,255,.82);
}

/* DIVIDER */

.impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;

  right:0;
  top:15%;

  width:1px;
  height:70%;

  background:rgba(255,255,255,.22);
}

/* ICON */

.impact-icon{
  font-size:36px;
  margin-bottom:10px;
}

/* RIGHT TAG */

.impact-tag{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  padding-left:35px;

  font-size:11px;
  line-height:1.45;

  letter-spacing:2px;
  font-weight:700;

  color:#fff;
}

.impact-tag i{
  display:block;

  width:40px;
  height:3px;

  margin-top:12px;

  background:#fff;

  border-radius:30px;
}


/* ==========================================
   PREMIUM IMPACT CARDS - 3D FLOAT STYLE
========================================== */

.impact-section{
    position:relative;
    padding:40px 0 70px;
    overflow:hidden;
}


/* cards wrapper */
.impact-wrapper{
    position:relative;
    z-index:5;
}


/* CARD */

.impact-card{

    position:relative;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.20),
        rgba(255,255,255,0.06)
    );

    border:1px solid rgba(255,255,255,.35);

    border-radius:24px;

    padding:30px 25px;

    backdrop-filter:blur(18px);

    box-shadow:

    0 20px 40px rgba(0,0,0,.20),
    inset 0 1px 20px rgba(255,255,255,.15);


    overflow:hidden;

    transform-style:preserve-3d;

    transition:
    transform .5s ease,
    box-shadow .5s ease;

}



/* top glow */

.impact-card::before{

    content:"";

    position:absolute;

    width:200px;
    height:200px;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.45),
    transparent 70%
    );


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

    opacity:.4;

    transition:.6s;

}



/* moving shine */

.impact-card::after{

    content:"";

    position:absolute;

    width:80px;
    height:150%;

    background:
    linear-gradient(
    transparent,
    rgba(255,255,255,.5),
    transparent
    );


    transform:
    rotate(35deg)
    translateY(-200%);


    left:40%;

    transition:.8s;

}



/* hover */

.impact-card:hover{


    transform:

    translateY(-18px)
    translateZ(40px);


    box-shadow:

    0 35px 70px rgba(0,0,0,.35),
    0 0 45px rgba(210,173,88,.45);


}



.impact-card:hover::before{

    transform:
    translate(150px,120px);

}



.impact-card:hover::after{

    transform:
    rotate(35deg)
    translateY(200%);

}



/* ICON */

.impact-card img,
.impact-card i{


    width:75px;
    height:75px;


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


    margin:0 auto 20px;


    border-radius:50%;


    background:

    linear-gradient(
    145deg,
    #ffffff,
    #d2ad58
    );


    box-shadow:

    0 15px 35px rgba(0,0,0,.25);


    transform:

    translateZ(50px);


    transition:.5s;

}



.impact-card:hover img,
.impact-card:hover i{

    transform:

    translateZ(80px)
    scale(1.12)
    rotateY(15deg);

}



/* TITLE */

.impact-card h3{


    font-family:
    "Cormorant Garamond",
    serif;


    font-size:34px;


    color:#ffffff;


    text-align:center;


    margin:10px 0;


    transform:
    translateZ(35px);

}



/* TEXT */


.impact-card p{


    text-align:center;


    color:#e7eeee;


    font-size:18px;


    transform:
    translateZ(25px);


}



/* RIGHT SIDE TEXT */

.impact-title{

    animation:
    floatText 4s ease-in-out infinite;

}



@keyframes floatText{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


}



/* MOBILE */


@media(max-width:768px){

.impact-card{

margin-bottom:25px;

}


.impact-card h3{

font-size:28px;

}

}


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

@media(max-width:1000px){

  .impact-curve{
    padding:75px 0 80px;
  }

  .impact-items{
    width:min(720px, calc(100% - 40px));

    grid-template-columns:repeat(2,1fr);

    gap:35px;
  }

  .impact-item::after{
    display:none;
  }

  .impact-tag{
    grid-column:1/-1;

    align-items:center;

    padding-left:0;

    text-align:center;
  }

}

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

@media(max-width:600px){

  .impact-curve{
    min-height:auto;

    padding:85px 18px 90px;

    clip-path:polygon(
      0% 5%,
      12% 2%,
      24% 6%,
      36% 3%,
      48% 7%,
      60% 3%,
      72% 6%,
      84% 2%,
      100% 5%,

      100% 95%,

      88% 98%,
      76% 94%,
      64% 97%,
      52% 93%,
      40% 97%,
      28% 94%,
      16% 98%,
      0% 95%
    );
  }

  .impact-items{
    width:100%;

    grid-template-columns:1fr;

    gap:30px;
  }

  .impact-tag{
    grid-column:auto;
  }

}

/* =========================================
   IMPACT SECTION - EXACT STRAIGHT GREEN STRIP
========================================= */

.impact-curve{
  width:100%;
  min-height:150px;

  margin:0;
  padding:35px 35px;

  position:relative;

  display:flex;
  align-items:center;

  background:
    linear-gradient(
      90deg,
      #005f59 0%,
      #00746d 50%,
      #005f59 100%
    );

  border-radius:0;
  clip-path:none;
  overflow:hidden;
}

/* REMOVE OLD CURVES */
.impact-curve::before,
.impact-curve::after{
  display:none;
  content:none;
}

/* =========================================
   INNER GRID
========================================= */

.impact-items{
  width:min(1500px, calc(100% - 40px));
  margin:0 auto;

  display:grid;

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

  align-items:center;

  position:relative;
  z-index:2;
}

/* =========================================
   EACH ITEM
========================================= */

.impact-item{
  position:relative;

  padding:10px 35px;

  text-align:center;
}

/* VERTICAL DIVIDER */

.impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;

  right:0;
  top:50%;

  width:1px;
  height:115px;

  transform:translateY(-50%);

  background:
    rgba(255,255,255,.28);
}

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

.impact-icon{
  margin-bottom:15px;

  font-size:40px;
  line-height:1;
}

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

.impact-item h3{
  margin:0 0 7px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:34px;
  line-height:1;

  font-weight:700;

  color:#005f5a;
}

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

.impact-item p{
  margin:0;

  font-family:"Inter",sans-serif;

  font-size:17px;
  line-height:1.4;

  color:rgba(255,255,255,.90);
}

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

.impact-tag{
  padding-left:45px;

  display:flex;
  flex-direction:column;

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

  color:#ffffff;

  font-size:13px;
  line-height:1.55;

  font-weight:700;

  letter-spacing:2.2px;
}

.impact-tag i{
  width:55px;
  height:4px;

  margin-top:16px;

  display:block;

  background:#ffffff;

  border-radius:10px;
}

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

@media(max-width:1000px){

  .impact-curve{
    padding:40px 30px;
  }

  .impact-items{
    grid-template-columns:repeat(2,1fr);
    gap:35px 0;
  }

  .impact-item::after{
    display:none;
  }

  .impact-tag{
    grid-column:1/-1;

    align-items:center;

    padding-left:0;

    text-align:center;
  }

}

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

@media(max-width:600px){

  .impact-curve{
    padding:40px 18px;
  }

  .impact-items{
    width:100%;

    grid-template-columns:1fr;

    gap:32px;
  }

  .impact-item{
    padding:8px;
  }

  .impact-item h3{
    font-size:29px;
  }

  .impact-item p{
    font-size:15px;
  }

  .impact-tag{
    grid-column:auto;
  }

}

/* =========================================
   FINAL IMPACT HEIGHT FIX
========================================= */

.impact-curve{
  width:100% !important;

  min-height:160px !important;
  height:auto !important;

  margin:0 !important;

  /* TOP/BOTTOM HEIGHT CONTROL */
  padding:25px 50px !important;

  background:
    linear-gradient(
      90deg,
      #005f59 0%,
      #00746d 50%,
      #005f59 100%
    ) !important;

  border-radius:0 !important;
  clip-path:none !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;
}

/* OLD WAVE EFFECT REMOVE */

.impact-curve::before,
.impact-curve::after{
  content:none !important;
  display:none !important;
}

/* VERY IMPORTANT:
   OLD 220px HEIGHT + 55px PADDING REMOVE
*/

.impact-items{
  width:min(1500px, calc(100% - 40px)) !important;

  min-height:0 !important;
  height:auto !important;

  padding:0 !important;

  margin:0 auto !important;

  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr))
    180px !important;

  align-items:center !important;
}

/* ITEM */

.impact-item{
  padding:8px 30px !important;
}

/* ICON */

.impact-icon{
  margin-bottom:8px !important;
  font-size:34px !important;
}

/* TITLE */

.impact-item h3{
  margin:0 0 4px !important;

  font-size:28px !important;

  color:#fff !important;
}

/* SUBTEXT */

.impact-item p{
  margin:0 !important;

  font-size:15px !important;

  color:rgba(255,255,255,.9) !important;
}

/* DIVIDER */

.impact-item:not(:nth-child(4))::after{
  height:85px !important;
}

/* RIGHT TEXT */

.impact-tag{
  color:#fff !important;
}

/* =========================================================
   OUR FOCUS AREAS
========================================================= */

.focus-section{
  position:relative;
  width:100%;

  padding:80px 0 85px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.95),
      rgba(250,247,239,.97) 45%,
      #f7f2e8 100%
    );

  overflow:hidden;
}

/* subtle botanical background */

.focus-section::before,
.focus-section::after{
  content:"";

  position:absolute;

  width:260px;
  height:420px;

  top:80px;

  opacity:.08;

  background:
    url("../images/leaf-pattern.png")
    center / contain no-repeat;

  pointer-events:none;
}

.focus-section::before{
  left:-80px;
}

.focus-section::after{
  right:-80px;
  transform:scaleX(-1);
}

.focus-container{
  width:min(1500px,calc(100% - 60px));
  margin:auto;

  position:relative;
  z-index:2;
}

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

.focus-heading{
  max-width:900px;
  margin:0 auto 48px;

  text-align:center;
}

.focus-eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:18px;

  margin-bottom:20px;
}

.focus-eyebrow span{
  width:46px;
  height:2px;

  background:#b5162e;
}

.focus-eyebrow strong{
  color:#b5162e;

  font-size:15px;

  font-weight:700;

  letter-spacing:5px;
}

.focus-heading h2{
  margin:0 0 15px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:54px;
  line-height:1;

  font-weight:700;

  color:#0a484a;

  letter-spacing:-1.4px;
}

.focus-heading p{
  max-width:720px;

  margin:auto;

  font-size:16px;
  line-height:1.7;

  color:#6b7372;
}

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

.focus-slider-wrap{
  position:relative;

  width:100%;

  display:flex;
  align-items:center;
}

.focus-slider{
  width:100%;

  overflow:hidden;

  padding:
    16px 8px
    30px;
}

.focus-track{
  display:flex;

  gap:22px;

  transition:
    transform .65s
    cubic-bezier(.22,.61,.36,1);

  will-change:transform;
}

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

.focus-card{
  flex:
    0 0
    calc((100% - 66px) / 4);

  min-width:0;

  position:relative;

  border-radius:20px;

  background:#fffdf9;

  box-shadow:
    0 18px 45px
    rgba(47,56,51,.12);

  overflow:hidden;

  transform-style:preserve-3d;

  transition:
    transform .35s ease,
    box-shadow .35s ease;

  cursor:pointer;
}

.focus-card:hover{
  transform:
    perspective(900px)
    rotateX(2deg)
    rotateY(-3deg)
    translateY(-10px);

  box-shadow:
    0 28px 60px
    rgba(47,56,51,.18);
}

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

.focus-image{
  position:relative;

  width:100%;
  height:220px;

  overflow:hidden;

  background:#eee;
}

.focus-image::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0,0,0,.10)
    );
}

.focus-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .65s
    cubic-bezier(.2,.7,.2,1);
}

.focus-card:hover .focus-image img{
  transform:scale(1.08);
}

/* =========================================================
   CARD BODY
========================================================= */

.focus-card-body{
  position:relative;

  min-height:140px;

  padding:20px 22px;

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

  text-align:center;
}

/* =========================================================
   ICON + NUMBER
========================================================= */

.focus-meta{
  position:absolute;

  top:-28px;
  left:22px;
  right:22px;

  display:flex;
  align-items:center;

  gap:15px;
}

.focus-icon{
  width:58px;
  height:58px;

  flex-shrink:0;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#fff;

  font-size:26px;

  box-shadow:
    0 8px 18px
    rgba(0,0,0,.15);

  transform:
    translateZ(20px);
}

.focus-red{
  background:
    linear-gradient(
      145deg,
      #d01a36,
      #a50d26
    );
}

.focus-green{
  background:
    linear-gradient(
      145deg,
      #0d7568,
      #075047
    );
}

.focus-gold{
  background:
    linear-gradient(
      145deg,
      #dfa746,
      #bd7e23
    );
}

.focus-number{
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:28px;

  font-weight:700;

  color:#c7c4bd;
}

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

.focus-card h3{
  margin:5px auto 0;
  max-width:245px;
  font-size:18px;
  line-height:1.35;
}

/* =========================================================
   SMALL BOTTOM LINE
========================================================= */

.focus-line{
  position:absolute;

  left:50%;
  bottom:17px;

  width:52px;
  height:4px;

  border-radius:50px;

  transform:
    translateX(-50%);
}

.focus-line-red{
  background:#c61631;
}

.focus-line-green{
  background:#08655d;
}

.focus-line-gold{
  background:#c89032;
}

/* =========================================================
   ARROWS
========================================================= */

.focus-arrow{
  position:absolute;

  top:50%;

  z-index:20;

  width:48px;
  height:48px;

  border:1px solid
    rgba(170,20,42,.15);

  border-radius:50%;

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

  color:#ad1028;

  font-size:33px;

  display:grid;
  place-items:center;

  cursor:pointer;

  box-shadow:
    0 10px 28px
    rgba(48,51,47,.14);

  transform:
    translateY(-50%);

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}

.focus-prev{
  left:-24px;
}

.focus-next{
  right:-24px;
}

.focus-arrow:hover{
  background:#ad1028;

  color:#fff;

  transform:
    translateY(-50%)
    scale(1.08);
}

/* =========================================================
   DOTS
========================================================= */

.focus-dots{
  display:flex;

  justify-content:center;

  gap:8px;

  margin-top:8px;
}

.focus-dot{
  width:8px;
  height:8px;

  padding:0;

  border:0;

  border-radius:50%;

  background:#d8d2c6;

  cursor:pointer;

  transition:
    width .3s ease,
    background .3s ease;
}

.focus-dot.active{
  width:27px;

  border-radius:20px;

  background:#ad1028;
}

/* =========================================================
   RESPONSIVE - 1100
========================================================= */

@media(max-width:1100px){

  .focus-card{
    flex:
      0 0
      calc((100% - 44px) / 3);
  }

}

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

@media(max-width:800px){

  .focus-section{
    padding:
      65px 0
      70px;
  }

  .focus-container{
    width:calc(100% - 35px);
  }

  .focus-heading h2{
    font-size:43px;
  }

  .focus-card{
    flex:
      0 0
      calc((100% - 22px) / 2);
  }

  .focus-prev{
    left:-10px;
  }

  .focus-next{
    right:-10px;
  }

}

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

@media(max-width:560px){

  .focus-heading{
    margin-bottom:32px;
  }

  .focus-eyebrow strong{
    font-size:11px;
    letter-spacing:3px;
  }

  .focus-eyebrow span{
    width:25px;
  }

  .focus-heading h2{
    font-size:36px;
  }

  .focus-heading p{
    font-size:14px;
  }

  .focus-card{
    flex:0 0 100%;
  }

  .focus-image{
    height:230px;
  }

  .focus-card-body{
    min-height:195px;
  }

  .focus-arrow{
    width:42px;
    height:42px;

    font-size:28px;
  }

}

/* ===============================
   IMPACT SECTION
================================ */

.impact-section{

    width:100%;
    height:620px;

    position:relative;

    overflow:hidden;

}

/* SINGLE BACKGROUND IMAGE */

.impact-bg{

    position:absolute;

    inset:0;

}

.impact-bg img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

}

/* CONTENT OVER IMAGE */

.impact-overlay{

    position:relative;

    z-index:2;

    width:min(1200px,90%);

    height:100%;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* LEFT CONTENT */

.impact-left{

    width:700px;

    position:absolute;

    top:80px;
    left:50%;

    transform:translateX(-50%);

    text-align:center;

}

.impact-left span{

    font-size:12px;

    letter-spacing:5px;

    font-weight:700;

}

.impact-left h2{

    margin:15px 0;

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:65px;

    line-height:1;

}

.impact-left p{

    font-size:20px;
    font-weight: bold;
    line-height:1.6;

    max-width:700px;

}

.impact-left a{

    display:inline-flex;

    margin-top:25px;

    padding:14px 35px;

    background:#b3122c;

    color:white;

    border-radius:30px;

    font-weight:600;

}

/* STATS */

.impact-stats{

    position:absolute;

    right:0;

    bottom:80px;

    width:650px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

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

    padding:30px;

    border-radius:15px;

    backdrop-filter:blur(10px);

}

.impact-stats div{

    text-align:center;

    border-right:1px solid #ddd;

}

.impact-stats div:last-child{

    border:none;

}

.impact-stats h3{

    color:#00534f;

    font-size:30px;

    margin:0;

}

.impact-stats p{

    margin-top:5px;

    color:#555;

    font-size:13px;

}

/* MOBILE */

@media(max-width:900px){

.impact-section{

    height:750px;

}

.impact-left{

    width:100%;

    text-align:center;

}

.impact-left h2{

    font-size:45px;

}

.impact-stats{

    position:relative;

    width:100%;

    right:auto;

    bottom:auto;

    margin-top:40px;

    grid-template-columns:repeat(2,1fr);

}

}

/* ================================
 LEADERSHIP SECTION
================================ */

.leadership-section{

    width:100%;

    padding:80px 60px;

    background:

    linear-gradient(
        rgba(255,250,240,.85),
        rgba(255,250,240,.85)
    ),
    url("../images/leadership-bg.jpg");

    background-size:cover;

    background-position:center;

}

.leadership-container{

    max-width:1500px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

/* LEFT */

.leadership-content{

    width:35%;

}

.lead-small{

    font-size:12px;

    letter-spacing:4px;

    color:#c01936;

    font-weight:700;

}

.leadership-content h2{

    margin:18px 0;

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:52px;

    line-height:1.05;

    color:#073b3b;

}

.leadership-content p{

    font-size:16px;

    line-height:1.6;

    color:#555;

    max-width:360px;

}

.lead-btn{

    display:inline-flex;

    align-items:center;

    gap:20px;

    margin-top:25px;

    padding:14px 30px;

    background:#b51235;

    color:white;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

}

/* CARDS */

.leader-cards{

    width:60%;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;

}

.leader-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

}

.leader-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.leader-info{

    padding:20px;

    text-align:center;

}

.leader-info h3{

    margin:0 0 5px;

    font-size:17px;

    color:#073b3b;

}

.leader-info span{

    font-size:13px;

    color:#777;

}

.leader-info p{

    margin-top:12px;

    font-size:13px;

    color:#555;

    line-height:1.5;

}

/* RESPONSIVE */

@media(max-width:1000px){

.leadership-container{

    flex-direction:column;

}

.leadership-content,
.leader-cards{

    width:100%;

}

}

@media(max-width:600px){

.leader-cards{

grid-template-columns:1fr;

}

.leadership-section{

padding:50px 20px;

}

.leadership-content h2{

font-size:38px;

}

}

/* ================================
   DONATE BANNER
================================ */

.donate-banner{

    width:100%;
    height:330px;

    position:relative;

    display:flex;
    align-items:center;

    overflow:hidden;

}

.donate-banner{
    position:relative;
    width:100%;
    min-height:420px;
    overflow:hidden;
}

/* BACKGROUND IMAGE */
.donate-background{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center center;

    z-index:0;

    opacity:1;

    filter:none;

    transform:scale(1);
}

/* LIGHT OVERLAY */

.donate-banner::after{

    content:"";

    position:absolute;

    inset:0;

   
    z-index:1;

}

/* LEFT CONTENT */

.donate-content{

    position:relative;

    z-index:2;

    margin-left:95px;

}

.donate-small{

    font-size:12px;
    letter-spacing:3px;

    font-weight:700;

    color:white;

}

.donate-content h2{

    margin:10px 0;

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:48px;

    line-height:.9;

    color:#9b1328;

}

.donate-content h2 span{

    color:#164d5c;

}

.donate-content p{

    font-size:15px;

    line-height:1.5;
    font-weight: bold;
    color:white;

    margin-bottom:18px;

}

/* BUTTON */

.donate-btn{

    display:inline-flex;

    align-items:center;

    gap:20px;

    padding:12px 28px;

    border-radius:10px;

    background:#ad1028;

    color:white;

    font-size:15px;

    font-weight:600;

}

.donate-btn span{

    font-size:18px;

}

/* RIGHT CARD */

.donate-card{

    position:absolute;

    right:90px;
    top:90px;

    width:330px;

    padding:32px 30px;

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

    border-radius:28px;

    border:1px solid rgba(210,173,88,.35);

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);

    backdrop-filter:blur(12px);

    z-index:5;

}

.donate-card::before{

    content:"80G CERTIFIED";

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:#f7ead0;

    color:#8b681f;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:20px;

}

.donate-icon{

    width:55px;
    height:55px;

    display:flex;

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

    border-radius:50%;

    background:#f8eee0;

    font-size:26px;

    margin-bottom:18px;

}

.donate-card p{

    margin:0;

    font-size:16px;

    line-height:1.7;

    color:#24454b;

    font-weight:600;

}

/* MOBILE */

@media(max-width:768px){

.donate-content{

    margin-left:25px;

}

.donate-content h2{

    font-size:35px;

}

.donate-card{

    display:none;

}

}

.cect-full-bg{
    filter:none !important;
}

.cect-full-bg img{
    opacity:1 !important;
    filter:none !important;
}


/* =========================================
   CECT PREMIUM FOOTER
========================================= */

.cect-footer{

    width:100%;
    background:
    linear-gradient(
        135deg,
        #003f3c,
        #00645f
    );

    padding:70px 0 25px;

    color:#ffffff;

    overflow:hidden;

}




.footer-wrapper{

    width:min(1350px,calc(100% - 70px));

    margin:auto;

    display:grid;

    grid-template-columns:
    1.15fr .75fr 1.5fr .9fr;

    gap:25px;

    align-items:start;

}





/* =========================================
   COMMON CARD
========================================= */


.footer-box,
.footer-contact-mini{

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

    border:

    1px solid rgba(255,255,255,.18);

    border-radius:24px;

    padding:32px;

    backdrop-filter:blur(15px);

}





/* =========================================
   BRAND
========================================= */


.footer-logo img{

    width:85px;

    height:85px;

    object-fit:contain;

    margin-bottom:22px;

}



.footer-brand h3{

    font-family:"Cormorant Garamond",serif;

    font-size:28px;

    line-height:1.2;

    margin-bottom:18px;

}



.footer-brand p{

    font-size:16px;

    line-height:1.7;

    color:rgba(255,255,255,.85);

}





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


.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}


.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#ffffff;

    color:#00534f;


    transition:.3s;

}



.footer-social a:hover{

    background:#d2ad58;

    color:#ffffff;

    transform:translateY(-5px);

}





/* =========================================
   FOOTER HEADINGS
========================================= */


.footer-box h2{

    font-size:22px;

    margin-bottom:25px;

    position:relative;

}



.footer-box h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:45px;

    height:3px;

    border-radius:20px;

    background:#d2ad58;

}





/* =========================================
   QUICK LINKS
========================================= */


.footer-links a{

    display:block;

    margin-bottom:16px;

    color:#e5eeee;

    font-size:16px;

    transition:.3s;

}


.footer-links a:hover{

    color:#d2ad58;

    padding-left:8px;

}





/* =========================================
   ADDRESS
========================================= */


.contact-item{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}



.contact-item i{

    width:45px;

    height:45px;

    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#d2ad58;

    color:#00534f;

}



.contact-item p{

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:#e6eeee;

}





/* =========================================
   MINI CONTACT CARD
========================================= */


.footer-contact-mini{

    display:flex;

    flex-direction:column;

    gap:25px;

}



.mini-contact-item{

    display:flex;

    align-items:center;

    gap:18px;

}



.mini-contact-item i{

    width:48px;

    height:48px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#d2ad58;

    color:#00534f;

}



.mini-contact-item strong{

    font-size:15px;

}



.mini-contact-item p{

    margin:6px 0 0;

    color:#e5eeee;

    line-height:1.6;

}













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


@media(max-width:1100px){


.footer-wrapper{

    grid-template-columns:1fr 1fr;

}


}





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


@media(max-width:650px){


.cect-footer{

    padding:45px 0 20px;

}



.footer-wrapper{

    width:calc(100% - 30px);

    grid-template-columns:1fr;

}



.footer-box,
.footer-contact-mini{

    padding:25px;

}



.footer-brand h3{

    font-size:24px;

}







}


.footer-credit-card{

    width:100%;

    margin-top:80px;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    position:relative;

    left:0;

}


.footer-credit-card p{

    margin:12px 0;

    width:100%;

    text-align:center;

    font-size:16px;

    line-height:1.7;

}


.footer-credit-card a{

    color:#e5a72f;

    font-weight:700;

    text-decoration:none;

}


/* ===== Bottom Credit Center Fix ===== */

.footer-credit-card{
    width:100% !important;

    grid-column:1 / -1 !important;

    display:flex !important;
    flex-direction:column;

    align-items:center !important;
    justify-content:center;

    text-align:center !important;

    margin-top:80px;
}


.footer-credit-card p{
    text-align:center !important;
    margin:10px 0;
}


.footer-credit-card a{
    text-align:center;
}




/* =====================================================
   FINAL MOBILE RESPONSIVE FIX
===================================================== */


/* TABLET */

@media(max-width:900px){


/* HERO */

.cect-hero-main{
    min-height:850px;
}


.cect-full-bg img{

    object-position:65% center;

}


.cect-hero-container{

    width:calc(100% - 30px);

}


.cect-hero-content h1 span{

    font-size:55px;

}


.cect-hero-content h1 strong{

    font-size:58px;

}




/* IMPACT SECTION */


.impact-items{

    width:100%;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;

    padding:50px 20px 30px;

}



.impact-item{

    background:#ffffff;

    border-radius:18px;

    min-height:120px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}



.impact-item:not(:nth-child(4))::after{

    display:none;

}



.impact-icon{

    font-size:35px;

}



.impact-item h3{

    font-size:18px;

}



.impact-item p{

    font-size:12px;

}



.impact-tag{

    display:none;

}




/* ABOUT SECTION */


.about-main{

    width:calc(100% - 30px);

    display:flex;

    flex-direction:column;

    padding:30px 0;

}



.about-collage{

    order:1;

}


.about-collage-image{

    transform:none;

    width:100%;

}



.about-content{

    order:2;

    text-align:center;

}



.about-content h2{

    font-size:38px;

}



.about-content p{

    text-align:center;

}



.about-decor{

    display:none;

}



.about-stats{

    order:3;

    grid-template-columns:1fr;

    gap:20px;

    margin-top:30px;

}



.stat-divider{

    display:none;

}




/* PROGRAM CARDS */


.focus-slider{

    overflow:hidden;

}



.focus-card{

    width:100% !important;

}



.focus-card h3{

    font-size:18px;

}





}






/* MOBILE */

@media(max-width:600px){



body{

    overflow-x:hidden;

}



/* HEADER */


.cect-header-inner{

    width:calc(100% - 20px);

}



.cect-brand img{

    width:45px;

    height:45px;

}



.cect-brand-copy strong{

    font-size:9px;

}




/* HERO */


.cect-hero-main{

    min-height:780px;

}



.cect-hero-container{

    padding-top:60px;

}



.cect-hero-content h1 span{

    font-size:42px;

}


.cect-hero-content h1 strong{

    font-size:44px;

}



.cect-hero-description{

    font-size:13px;

}



.cect-actions{

    flex-direction:column;

    width:100%;

}



.cect-btn{

    width:90%;

}





/* IMPACT CARDS */


.impact-items{

    grid-template-columns:1fr;

    padding:40px 20px;

}



.impact-item{

    min-height:100px;

}



.impact-icon{

    font-size:32px;

}




/* ABOUT */


.about-content h2{

    font-size:32px;

}



.about-content p{

    font-size:14px;

}



.about-btn{

    width:100%;

}




/* FOCUS */


.focus-container{

    width:calc(100% - 30px);

}



.focus-heading h2{

    font-size:32px;

}



.focus-heading p{

    font-size:14px;

}



.focus-card-body h3{

    font-size:16px;

}





/* LEADERSHIP */


.leadership-container{

    display:flex;

    flex-direction:column;

}



.leader-cards{

    grid-template-columns:1fr !important;

}



.leader-card{

    width:100%;

}




/* DONATE */


.donate-content h2{

    font-size:38px;

}



.donate-content p{

    font-size:14px;

}



.donate-card{

    width:90%;

}



}





/* SMALL PHONE */

@media(max-width:390px){


.cect-hero-content h1 span{

    font-size:36px;

}



.cect-hero-content h1 strong{

    font-size:38px;

}



.impact-item h3{

    font-size:16px;

}



.about-content h2{

    font-size:28px;

}



}


/* =====================================
   HERO MOBILE IMAGE RESPONSIVE FIX
===================================== */

@media (max-width:768px){

    .cect-hero,
    .hero,
    .hero-section{
        min-height:100vh;
        height:auto;
        overflow:hidden;
    }


    /* background image */

    .cect-hero::before,
    .hero::before,
    .hero-section::before{

        background-position:65% center !important;

        background-size:cover !important;

    }


    /* if image tag use panniruntha */

    .cect-hero img,
    .hero img,
    .hero-section img{

        width:100%;
        height:100%;

        object-fit:cover;

        object-position:65% center;

    }



    /* content spacing */

    .cect-hero-content,
    .hero-content{

        position:relative;

        z-index:2;

        padding:70px 20px 40px;

        text-align:center;

    }


    /* heading */

    .cect-hero-content h1,
    .hero-content h1{

        font-size:42px !important;

        line-height:0.95;

        margin-bottom:25px;

    }


    /* paragraph */

    .cect-hero-content p,
    .hero-content p{

        font-size:15px;

        line-height:1.6;

        max-width:340px;

        margin:0 auto 30px;

    }


    /* buttons */

    .cect-actions,
    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:15px;

        align-items:center;

    }


    .cect-actions a,
    .hero-buttons a{

        width:90%;

        max-width:330px;

        height:52px;

        justify-content:center;

    }


}


/* small mobile */

@media(max-width:390px){

    .cect-hero img,
    .hero img,
    .hero-section img{

        object-position:70% center;

    }


    .cect-hero-content h1,
    .hero-content h1{

        font-size:36px !important;

    }


}


/* =====================================
   IMPACT SECTION MOBILE FIX
===================================== */

@media(max-width:700px){


.about-impact-section{
    overflow:hidden;
}


/* curve remove desktop shape */

.impact-curve{

    margin-top:-20px;

    min-height:auto;

    border-radius:35px 35px 0 0;

    padding:40px 15px;

}



/* cards stack */

.impact-items{

    width:100%;

    display:grid;

    grid-template-columns:1fr !important;

    gap:18px;

    padding:20px 10px !important;

}



/* card style */

.impact-item{

    width:100%;

    min-height:130px;

    padding:25px 15px;

    border-radius:22px;


    background:

    linear-gradient(
       
        
        rgba(250,247,239,.8)
    );


    


    position:relative;

    overflow:hidden;


    animation:
    impactFloat 4s ease-in-out infinite;

}



/* remove lines */

.impact-item:not(:nth-child(4))::after{

    display:none;

}



/* icon */

.impact-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:12px;


    border-radius:50%;


    background:

    linear-gradient(
        145deg,
        #d2ad58,
        #fff
    );


    font-size:32px;


    box-shadow:

    0 10px 25px rgba(0,0,0,.15);

}



/* heading */

.impact-item h3{

    font-size:28px;

    color:#064f4d;

}



/* description */

.impact-item p{

    font-size:15px;

    color:#657577;

}



/* hide side text */

.impact-tag{

    display:none;

}



}



/* floating animation */

@keyframes impactFloat{


0%,100%{

    transform:translateY(0);

}


50%{

    transform:translateY(-10px);

}


}



/* very small mobile */

@media(max-width:390px){


.impact-item h3{

    font-size:24px;

}


.impact-icon{

    width:55px;

    height:55px;

    font-size:26px;

}


}


/* FINAL TEXT COLOR OVERRIDE */

.impact-item h3{
    color:#0b4f4a !important;
}

.impact-item p{
    color:#276b67 !important;
}

.impact-tag{
    color:#0b4f4a !important;
}


/* =====================================
   SUPPORT MISSION SECTION MOBILE FIX
===================================== */

@media(max-width:600px){

  .support-section,
  .mission-section{
      min-height:650px;
      overflow:hidden;
      position:relative;
  }


  .support-section img,
  .mission-section img,
  .support-bg img{

      width:100%;
      height:100%;

      object-fit:cover;

      /*
        Image position control
        face + hand visible
      */
      object-position:center center;

      transform:scale(1.08);
  }


  .support-content,
  .mission-content{

      position:relative;
      z-index:5;

      padding:70px 25px 40px;

      text-align:left;

  }


  .support-content h1,
  .mission-content h1{

      font-size:42px;
      line-height:.95;

  }


  .support-content p,
  .mission-content p{

      font-size:14px;
      line-height:1.6;

      max-width:330px;

  }


  .support-btn{

      width:190px;
      height:50px;

  }

}


/* =====================================
   FOOTER SOCIAL ICON BRAND COLORS
===================================== */

.footer-social a{
    width:52px;
    height:52px;

    border-radius:60%;

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

    background:#ffffff;

    color:#00534f; /* default icon color */

    transition:.3s ease;
}


/* Instagram Original Gradient Color */

.footer-social a:nth-child(2) i{
    color:#E4405F;
}


/* Hover */

.footer-social a:nth-child(2):hover i{

    background:
    linear-gradient(
        45deg,
        #feda75,
        #d62976,
        #962fbf,
        #4f5bd5
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}


/* Other icons hover */

.footer-social a:hover{

    transform:translateY(-5px);

}


.footer-social a:nth-child(1):hover i{
    color:#1877F2;
}


.footer-social a:nth-child(3):hover i{
    color:#FF0000;
}


.footer-social a:nth-child(4):hover i{
    color:#0A66C2;
}


/* ===============================
   FOOTER 3 CARD LAYOUT FIX
================================ */


.cect-footer{
    width:100%;
    background:#00534f;
    padding:70px 0 30px;
}


.footer-wrapper{

    width:min(1200px,90%);

    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 1.1fr 1fr;

    gap:30px;

    align-items:stretch;

}



/* ALL CARDS */

.footer-box,
.footer-contact-mini,
{

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

    border-radius:24px;

    padding:35px;

    height:100%;

    backdrop-filter:blur(10px);

}



/* =========================
   BRAND CARD
========================= */


.footer-brand{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}



.footer-logo img{

    width:90px;

    height:90px;

    object-fit:contain;

}



.footer-brand h3{

    margin-top:20px;

    color:white;

    font-size:22px;

    line-height:1.3;

}



.footer-brand p{

    color:#dcebea;

    margin-top:15px;

    line-height:1.7;

}




/* SOCIAL */

.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}


.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#00534f;

    transition:.3s;

}



.footer-social a:hover{

    background:#ad1028;

    color:white;

}




/* =========================
   CENTER COMMUNICATION CARD
========================= */


.footer-contact{

    height:auto;

}



.footer-contact h2{

    color:white;

    margin-bottom:25px;

    font-size:24px;

}



.contact-item{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}



.contact-item i{

    color:#d2ad58;

    font-size:20px;

}



.contact-item p{

    color:#e8f1ef;

    line-height:1.7;

    font-size:14px;

    margin:0;

}




/* =========================
 RIGHT CARD COMBINE
========================= */


.footer-contact-mini{

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.mini-contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:25px;

}



.mini-contact-item i{

    color:#d2ad58;

    font-size:22px;

}



.mini-contact-item strong{

    color:white;

}



.mini-contact-item p{

    color:#dcebea;

    margin-top:5px;

}




.footer-credit-card{

    grid-column:1 / -1;

    margin-top:10px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}



.footer-credit-card p{

    color:#e6eeee;

    font-size:13px;
    line-height:1.0;
    margin:0;

}



.footer-company-link{

    color:#d2ad58;

}






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


@media(max-width:900px){


.footer-wrapper{

    grid-template-columns:1fr;

}


.footer-credit-card{

    grid-column:auto;

    flex-direction:column;

    text-align:center;

}


}

.contact-item i,
.mini-contact-item i{

    width:55px;
    height:55px;

    border-radius:50%;

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

    background:#d2ad58;

    color:#00534f;

    font-size:20px;

}

/* ================================
   DESKTOP ONLY - IMPACT TEXT WHITE
================================ */

@media(min-width:701px){

    .impact-curve .impact-item h3{
        color:#ffffff !important;
    }

    .impact-curve .impact-item p{
        color:rgba(255,255,255,0.85) !important;
    }

    .impact-curve .impact-tag{
        color:#ffffff !important;
    }

}


/* ================================
   MOBILE KEEP ORIGINAL COLOR
================================ */

@media(max-width:700px){

    .impact-curve .impact-item h3{
        color:#005f5a !important;
    }

    .impact-curve .impact-item p{
        color:#607174 !important;
    }

    .impact-curve .impact-tag{
        color:#ffffff !important;
    }

}


/* Contact Details card alignment */

.footer-contact-mini{

    padding:40px 50px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    gap:45px;

}


/* Each contact row */

.mini-contact-item{

    display:flex;

    align-items:flex-start;

    gap:25px;

}


.mini-contact-item i{

    width:50px;
    height:50px;

    min-width:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#d8ad52;

    color:#005b57;

    font-size:28px;

}


/* Text same size as communication */

.mini-contact-item strong{

    display:block;

    font-size:15px;

    color:#fff;

    margin-bottom:10px;

}


.mini-contact-item p{

    margin:0;

    font-size:15px;

    line-height:1.8;

    color:#e8eeee;

}

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



.about-hero{

    width:100%;
    height:520px;

    background-image:url("../images/about-banner.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    position:relative;

    overflow:hidden;

}




.about-content{

    position:absolute;

    left:7%;

    top:65px;

    width:420px;

}



.about-tag{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:12px;

    letter-spacing:5px;

    font-weight:700;

    color:#005b57;

}



.about-tag::after{

    content:"";

    width:35px;

    height:2px;

    background:#005b57;

}




.about-content h1{


    margin-top:25px;

    font-family:"Cormorant Garamond",serif;

    font-size:58px;

    line-height:0.95;

    font-weight:700;

    color:#111;

}



.about-content h1 span{

    color:#b20d32;

}




.about-content p{

    margin-top:22px;

    width:390px;

    font-size:14px;

    line-height:1.6;

    color:#333;

}




.about-btn{


    margin-top:25px;

    display:inline-flex;

    align-items:center;

    gap:20px;

    padding:12px 35px;

    background:#b20d32;

    color:#fff;

    text-decoration:none;

    border-radius:8px;

    font-size:14px;

    font-weight:600;

}



.about-btn span{

    font-size:20px;

}



.about-bottom{


    margin-top:30px;

    font-family:"Caveat",cursive;

    font-size:28px;

    color:#777;

}




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


@media(max-width:768px){


.about-hero{


    height:720px;

    background-position:center;

}



.about-content{


    left:25px;

    top:45px;

    width:calc(100% - 50px);

}



.about-content h1{

    font-size:42px;

}



.about-content p{

    width:100%;

    font-size:13px;

}



.about-bottom{

    font-size:22px;

}



}/* =========================================================
   GOOGLE FONTS
========================================================= */

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

/* =========================================================
   ROOT COLORS
========================================================= */

:root{
  --maroon:#ad1028;
  --maroon-dark:#87091c;

  --teal:#00534f;
  --teal-dark:#003e3c;

  --gold:#d2ad58;

  --cream:#faf7ef;
  --white:#ffffff;

  --text:#223f46;
}

/* =========================================================
   RESET
========================================================= */

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

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Inter",sans-serif;
  background:#ffffff;
  color:var(--text);
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  display:block;
  max-width:100%;
}

button{
  font-family:inherit;
}

/* =========================================================
   MAIN HERO SECTION
========================================================= */

.cect-hero{
  width:100%;
  position:relative;
  background:#ffffff;
  overflow:hidden;
}

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

   HEADER HEIGHT CHANGE:
   height: 90px;
========================================================= */

.cect-header{
  width:100%;

  /* HEADER HEIGHT CONTROL */
  height:90px;

  position:relative;
  z-index:100;

  background:rgba(255,255,255,.98);
}

.cect-header-inner{
  width:min(1320px,calc(100% - 60px));
  height:100%;

  margin:0 auto;

  display:flex;
  align-items:center;

  gap:34px;
}

/* =========================================================
   LOGO / BRAND
========================================================= */

.cect-brand{
  display:flex;
  align-items:center;

  gap:12px;

  flex-shrink:0;
}

/* LOGO SIZE CONTROL */

.cect-brand img{
  width:72px;
  height:72px;

  object-fit:contain;
}

.cect-brand-copy{
  line-height:1;
}

.cect-brand-copy strong{
  display:block;

  color:#a41025;

  /* COMPANY NAME SIZE */
  font-size:16px;

  line-height:1.2;

  font-weight:700;
}

.cect-brand-copy span{
  display:block;

  margin-top:6px;

  /* TAGLINE SIZE */
  font-size:9px;

  font-weight:700;

  letter-spacing:1px;

  color:#697477;
}

/* =========================================================
   NAVIGATION
========================================================= */

.cect-nav{
  margin-left:auto;

  display:flex;
  align-items:center;

  gap:30px;
}

.cect-nav a{
  position:relative;

  padding:10px 0;

  /* NAV TEXT SIZE CONTROL */
  font-size:17px;

  font-weight:600;

  color:#405256;

  transition:color .3s ease;
}

.cect-nav a::after{
  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  width:0;
  height:2px;

  background:var(--maroon);

  transform:translateX(-50%);

  transition:width .3s ease;
}

.cect-nav a:hover,
.cect-nav a.active{
  color:var(--maroon);
}

.cect-nav a:hover::after,
.cect-nav a.active::after{
  width:100%;
}

/* =========================================================
   HEADER DONATE BUTTON
========================================================= */

.cect-header-donate{
  height:48px;

  padding:0 25px;

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

  gap:22px;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #bd142c,
      #94091e
    );

  color:#ffffff;

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

  white-space:nowrap;

  box-shadow:
    0 13px 30px rgba(167,16,39,.17);

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

.cect-header-donate span{
  font-size:20px;

  transition:transform .3s ease;
}

.cect-header-donate:hover{
  transform:translateY(-3px);

  box-shadow:
    0 18px 38px rgba(167,16,39,.25);
}

.cect-header-donate:hover span{
  transform:translateX(5px);
}

/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.cect-menu-toggle{
  display:none;

  width:45px;
  height:45px;

  padding:10px;

  border:0;

  border-radius:10px;

  background:var(--teal);

  cursor:pointer;
}

.cect-menu-toggle span{
  display:block;

  width:100%;
  height:2px;

  margin:5px 0;

  background:#ffffff;
}

/* =========================================================
   HERO IMAGE AREA

   HERO HEIGHT CHANGE:
   min-height: 720px;
========================================================= */

.cect-hero-main{
  width:100%;

  /* ================================
     HERO SECTION HEIGHT CONTROL
  ================================= */
  min-height:720px;

  position:relative;

  overflow:hidden;
}

/* =========================================================
   FULL WIDTH BACKGROUND IMAGE
========================================================= */

.cect-full-bg{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  z-index:0;

  overflow:hidden;
}

.cect-full-bg img{
  width:100%;
  height:100%;

  /*
     cover = full hero occupy ஆகும்.
     contain போட்டால் blank space வரும்.
  */
  object-fit:cover;

  /*
     IMAGE POSITION CONTROL

     center center
     50% 50%

     Image கீழே cut ஆனால்:
     center 60%

     Image மேலே move செய்ய:
     center 40%
  */
  object-position:center center;

  transform:scale(1.01);

  transition:transform .25s ease-out;
}

/* =========================================================
   CINEMATIC LIGHT
========================================================= */

.cect-hero-main::before{
  content:"";

  position:absolute;

  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 52% 62%,
      rgba(255,211,108,.08),
      transparent 30%
    );
}

/* =========================================================
   HERO CONTENT CONTAINER
========================================================= */

.cect-hero-container{
  width:min(1320px,calc(100% - 60px));

  /* CONTENT AREA HEIGHT */
  min-height:620px;

  margin:0 auto;

  position:relative;

  z-index:10;

  display:flex;
  align-items:center;
}

/* =========================================================
   HERO LEFT CONTENT
========================================================= */

.cect-hero-content{
  width:100%;

  /* TEXT AREA WIDTH */
  max-width:600px;

  /*
     CONTENT UP / DOWN CONTROL

     -40px = மேலே
      0px  = normal
      30px = கீழே
  */
  margin-top:-30px;
}

/* =========================================================
   SMALL TOP TEXT
========================================================= */

.cect-eyebrow{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px;

  margin-bottom:25px;

  color:#254a50;

  /* FROM TRICHY TEXT SIZE */
  font-size:10px;

  line-height:1;

  font-weight:700;

  letter-spacing:2.7px;
}

.eyebrow-dot{
  width:5px;
  height:5px;

  border-radius:50%;

  background:var(--maroon);
}

.eyebrow-line{
  width:45px;
  height:2px;

  margin-left:7px;

  background:#315e60;
}

/* =========================================================
   MAIN HERO HEADING

   ***** MAIN TEXT SIZE CONTROL *****

   இங்க தான் desktop text size change பண்ணணும்.
========================================================= */

.cect-hero-content h1{
  margin:0 0 27px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  /*
     இரண்டு line gap control
  */
  line-height:.78;

  /*
     LETTER SPACE
  */
  letter-spacing:-4px;
}

/* COMPASSION */

.cect-hero-content h1 span{
  display:block;

  color:#aa112b;

  /* ==================================
     COMPASSION SIZE
     இதை மட்டும் change பண்ணலாம்
  ================================== */
  font-size:90px;

  font-weight:700;
}

/* CREATES CHANGE */

.cect-hero-content h1 strong{
  display:block;

  color:#04524e;

  /* ==================================
     CREATES CHANGE SIZE
     இதை மட்டும் change பண்ணலாம்
  ================================== */
  font-size:95px;

  font-weight:700;
}

/* =========================================================
   HERO DESCRIPTION
========================================================= */

.cect-hero-description{
  max-width:520px;

  margin-bottom:28px;
  font-weight: bold;
  color:#40585d;

  /* DESCRIPTION TEXT SIZE */
  font-size:16px;

  line-height:1.7;
}

/* =========================================================
   BUTTON CONTAINER
========================================================= */

.cect-actions{
  display:flex;

  align-items:center;

  gap:17px;
}

.cect-btn{
  min-height:48px;

  padding:0 22px;

  display:inline-flex;

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

  border-radius:12px;

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

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

/* =========================================================
   DONATE BUTTON
========================================================= */

.cect-btn-primary{
  min-width:154px;

  gap:30px;

  color:#ffffff;

  background:
    linear-gradient(
      135deg,
      #b7132b,
      #8d091c
    );

  box-shadow:
    0 12px 28px rgba(151,12,34,.19);
}

.cect-btn-primary:hover{
  transform:translateY(-4px);

  box-shadow:
    0 17px 37px rgba(151,12,34,.27);
}

/* =========================================================
   WATCH STORY BUTTON
========================================================= */

.cect-btn-story{
  min-width:173px;

  gap:10px;

  color:#344d52;

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

  border:
    1px solid rgba(42,75,78,.11);

  backdrop-filter:blur(12px);
}

.cect-btn-story:hover{
  transform:translateY(-4px);

  background:#ffffff;
}

.play-circle{
  width:33px;
  height:33px;

  flex-shrink:0;

  display:grid;

  place-items:center;

  padding-left:2px;

  border-radius:50%;

  color:#ffffff;

  background:var(--maroon);

  font-size:10px;
}

/* =========================================================
   STONE MESSAGE
========================================================= */

.cect-stone-message{
  position:absolute;

  left:24px;

  bottom:75px;

  z-index:8;

  width:150px;
  height:155px;

  padding:30px 21px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  color:#4a4b41;

  font-family:Georgia,serif;

  font-size:23px;

  font-weight:600;

  line-height:.88;

  background:
    linear-gradient(
      145deg,
      #d6bf91,
      #cdb482
    );

  clip-path:
    polygon(
      9% 3%,
      84% 0%,
      100% 17%,
      92% 100%,
      4% 95%,
      0% 16%
    );

  transform:rotate(-3deg);

  box-shadow:
    0 20px 35px rgba(46,39,27,.1);
}

/* =========================================================
   IMPACT WAVE
========================================================= */

.cect-impact-wave{
  position:absolute;

  z-index:20;

  left:-3%;

  bottom:-44px;

  width:106%;

  min-height:180px;

  padding:68px 5% 25px;

  background:rgba(255,253,248,.97);

  clip-path:
    ellipse(
      75% 66%
      at
      50% 79%
    );
}

.cect-impact-inner{
  width:min(850px,70%);

  margin-left:auto;
  margin-right:75px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr) .9fr;

  align-items:center;
}

.cect-impact-item{
  min-height:85px;

  position:relative;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;
}

.cect-impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;

  right:0;
  top:17px;

  width:1px;
  height:52px;

  background:#e5ded1;
}

.cect-impact-icon{
  margin-bottom:5px;

  font-size:28px;
}

.cect-impact-icon.heart{
  color:var(--maroon);
}

.cect-impact-item strong{
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:17px;

  color:#164c4f;
}

.cect-impact-item span{
  margin-top:2px;

  color:#6f797a;

  font-size:10px;
}

.cect-impact-message{
  padding-left:24px;

  display:flex;

  flex-direction:column;

  color:#586b6c;

  font-size:8px;

  line-height:1.5;

  letter-spacing:1.5px;

  font-weight:700;
}

.cect-impact-message i{
  width:30px;
  height:2px;

  margin-top:8px;

  background:var(--maroon);
}

/* =========================================================
   TABLET - 1150PX
========================================================= */

@media (max-width:1150px){

  .cect-header-inner{
    width:calc(100% - 40px);
    gap:20px;
  }

  .cect-nav{
    gap:17px;
  }

  .cect-nav a{
    font-size:10px;
  }

  .cect-brand-copy strong{
    font-size:12px;
  }

  .cect-header-donate{
    padding:0 17px;
  }

  .cect-hero-container{
    width:calc(100% - 55px);
  }

  .cect-hero-content{
    max-width:540px;
  }

  /* TABLET HEADING SIZE */

  .cect-hero-content h1 span{
    font-size:72px;
  }

  .cect-hero-content h1 strong{
    font-size:74px;
  }

}

/* =========================================================
   TABLET / MOBILE - 900PX
========================================================= */

@media (max-width:900px){

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

  .cect-header{
    height:auto;

    min-height:82px;
  }

  .cect-header-inner{
    width:calc(100% - 28px);

    min-height:82px;
  }

  .cect-brand img{
    width:50px;
    height:50px;
  }

  .cect-brand-copy strong{
    font-size:10px;
  }

  .cect-brand-copy span{
    font-size:5.5px;
  }

  .cect-header-donate{
    display:none;
  }

  .cect-menu-toggle{
    display:block;

    margin-left:auto;
  }

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

  .cect-nav{
    position:absolute;

    top:75px;

    left:14px;
    right:14px;

    z-index:200;

    margin:0;

    padding:14px;

    display:flex;

    flex-direction:column;

    align-items:stretch;

    gap:0;

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

    border-radius:18px;

    box-shadow:
      0 18px 40px rgba(17,57,56,.14);

    opacity:0;

    visibility:hidden;

    transform:translateY(-15px);

    transition:
      opacity .3s ease,
      visibility .3s ease,
      transform .3s ease;
  }

  .cect-nav.open{
    opacity:1;

    visibility:visible;

    transform:translateY(0);
  }

  .cect-nav a{
    padding:14px 13px;

    font-size:13px;

    border-bottom:
      1px solid #eeeeee;
  }

  .cect-nav a:last-child{
    border-bottom:none;
  }

  .cect-nav a::after{
    display:none;
  }

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

  .cect-hero-main{
    min-height:760px;
  }

  .cect-full-bg img{
    /*
       MOBILE IMAGE POSITION
    */
    object-position:68% center;
  }

  /*
     MOBILE WHITE OVERLAY
  */

  .cect-full-bg::after{
    display:none;
}

  .cect-hero-container{
    width:calc(100% - 35px);

    min-height:650px;

    align-items:flex-start;

    padding-top:70px;
  }

  .cect-hero-content{
    max-width:550px;

    margin:0 auto;

    text-align:center;
  }

  .cect-eyebrow{
    justify-content:center;
  }

  /* ===============================
     TABLET HEADING SIZE
  =============================== */

  .cect-hero-content h1 span{
    font-size:62px;
  }

  .cect-hero-content h1 strong{
    font-size:64px;
  }

  .cect-hero-description{
    margin-left:auto;
    margin-right:auto;
  }

  .cect-actions{
    justify-content:center;
  }

  .cect-stone-message{
    display:none;
  }

  /* ================= IMPACT ================= */

  .cect-impact-wave{
    left:0;

    bottom:0;

    width:100%;

    min-height:auto;

    padding:25px 20px;

    clip-path:none;

    border-radius:
      35px 35px 0 0;
  }

  .cect-impact-inner{
    width:100%;

    margin:0;

    grid-template-columns:
      repeat(4,1fr);
  }

  .cect-impact-message{
    display:none;
  }

}

/* =========================================================
   MOBILE - 600PX
========================================================= */

@media (max-width:600px){

  .cect-brand-copy strong{
    font-size:9px;
  }

  .cect-hero-main{
    min-height:790px;
  }

  .cect-full-bg img{
    object-position:70% center;
  }

  .cect-hero-container{
    width:calc(100% - 28px);

    padding-top:50px;
  }

  .cect-eyebrow{
    gap:6px;

    font-size:7px;

    letter-spacing:1.6px;
  }

  .eyebrow-line{
    display:none;
  }

  .cect-hero-content h1{
    letter-spacing:-2px;

    line-height:.84;
  }

  /* ===============================
     MOBILE HEADING SIZE CONTROL
  =============================== */

  .cect-hero-content h1 span{
    font-size:48px;
  }

  .cect-hero-content h1 strong{
    font-size:50px;
  }

  .cect-hero-description{
    max-width:350px;

    font-size:12.5px;

    line-height:1.6;
  }

  .cect-actions{
    flex-direction:column;
  }

  .cect-btn{
    width:100%;

    max-width:310px;
  }

  .cect-impact-inner{
    grid-template-columns:
      repeat(2,1fr);

    gap:8px;
  }

  .cect-impact-item{
    min-height:90px;

    padding:8px;

    border-radius:15px;

    background:#ffffff;
  }

  .cect-impact-item::after{
    display:none !important;
  }

}

/* =========================================================
   VERY SMALL MOBILE - 390PX
========================================================= */

@media (max-width:390px){

  .cect-brand-copy{
    display:none;
  }

  /* SMALL MOBILE HEADING */

  .cect-hero-content h1 span{
    font-size:40px;
  }

  .cect-hero-content h1 strong{
    font-size:42px;
  }

}

/* =========================================================
   ACCESSIBILITY
========================================================= */

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

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }

}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600&family=Caveat:wght@500;600&display=swap');

.about-impact-section{
  width:100%;
  position:relative;
  background:#f9f5ec;
  overflow:hidden;
}

/* =========================
   TOP CURVE
========================= */

.impact-curve{
  position:relative;
  width:104%;
  margin-left:-2%;
  margin-top:-55px;

  min-height:240px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(250,247,239,.98)
    );

  border-radius:50% 50% 0 0 / 32% 32% 0 0;

  box-shadow:
    0 -10px 30px rgba(65,50,30,.05);

  z-index:5;
}

.impact-curve::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.18;

  background:
    url("../images/pattern-line.png")
    center / 420px repeat;
}

.impact-items{
  width:min(1050px,calc(100% - 80px));
  margin:auto;

  min-height:220px;

  display:grid;
  grid-template-columns:
    repeat(4,1fr) .9fr;

  align-items:center;

  padding-top:55px;

  position:relative;
  z-index:2;
}

.impact-item{
  position:relative;
  text-align:center;
  padding:5px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;
  right:0;
  top:25px;

  width:1px;
  height:75px;

  background:#dfd7ca;
}

.impact-icon{
  font-size:34px;
  margin-bottom:8px;
  color:#064f4d;
}

.impact-icon.red{
  color:#b4112a;
}

.impact-item h3{
  margin:0;

  font-family:"Inter",sans-serif;
  font-size:20px;
  line-height:1.35;

  color:#ffffff;

  text-align:center;

  width:100%;
  max-width:260px;
  margin-left:auto;
  margin-right:auto;
}

.impact-item p{
  margin-top:2px;

  font-family:"Inter",sans-serif;

  font-size:12px;

  color:#607174;
}

.impact-tag{
  display:flex;
  flex-direction:column;

  padding-left:30px;

  font-size:9px;
  line-height:1.45;

  font-weight:700;

  letter-spacing:1.6px;

  color:#647275;
}

.impact-tag i{
  width:31px;
  height:2px;

  margin-top:8px;

  background:#ae1229;
}

/* =========================
   ABOUT AREA
========================= */

.about-main{
  width:min(1100px,calc(100% - 70px));
  margin:-20px auto 0;

  display:grid;

  grid-template-columns:
    40% 38% 22%;

  column-gap:28px;

  position:relative;

  padding:
    55px 0 45px;

  min-height:540px;
}

/* paper background */

.about-main::before{
  content:"";

  position:absolute;
  inset:0;

  opacity:.12;

  background:
    url("../images/pattern-line.png")
    center / 450px repeat;

  pointer-events:none;
}

.about-collage{
  position:relative;
  z-index:3;

  min-height:390px;

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

.about-collage-image{
  width:100%;
  max-width:700px;
  height:auto;

  display:block;
  object-fit:contain;

  /* LEFT MOVE */
  transform:translateX(-50px);

  filter:
    drop-shadow(0 18px 22px rgba(55,40,25,.12));

  transition:
    transform .45s ease,
    filter .45s ease;
}

.about-collage-image:hover{
  transform:
    translateX(-40px)
    translateY(-8px)
    scale(1.025);

  filter:
    drop-shadow(0 25px 30px rgba(55,40,25,.17));
}

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

.about-content{
  position:relative;
  z-index:4;

  padding-top:25px;
}

.section-eyebrow{
  display:flex;
  align-items:center;

  gap:12px;

  margin-bottom:20px;
}

.section-eyebrow span{
  font-size:10px;
  font-weight:700;

  letter-spacing:3px;

  color:#21545a;
}

.section-eyebrow i{
  width:45px;
  height:2px;

  background:#246064;
}

.about-content h2{
  margin:0 0 20px;

  font-family:"Cormorant Garamond",serif;

  font-size:49px;
  line-height:.92;

  letter-spacing:-1.4px;

  color:#144a50;
}

.about-content p{
  max-width:490px;

  font-size:16px;
  line-height:1.65;
  text-align: justify;
  color:#52686c;

  margin-bottom:24px;
}

.about-btn{
  min-width:190px;
  min-height:44px;

  padding:0 18px;

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

  gap:50px;

  border-radius:12px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #b6152d,
      #91091e
    );

  font-size:12px;
  font-weight:600;

  box-shadow:
    0 10px 25px rgba(152,10,30,.14);

  transition:.3s ease;
}

.about-btn:hover{
  transform:translateY(-3px);

  box-shadow:
    0 14px 30px rgba(152,10,30,.22);
}

/* =========================
   RIGHT DECOR
========================= */

.about-decor{
  position:relative;
  z-index:2;

  min-height:330px;
}

.temple-line-art{
  position:absolute;

  width:800px;

  right:-30px;
  top:50px;

  opacity:8.5;

  filter:
    sepia(1)
    saturate(.55);
}

.about-script{
  position:absolute;

  right:20px;
  top:195px;

  font-family:"Caveat",cursive;

  font-size:31px;
  line-height:.88;

  color:#34383b;

  transform:rotate(-8deg);
}

/* =========================
   STATS
========================= */

.about-stats{
  grid-column:2 / 4;

  margin-top:100px;

  position:relative;
  z-index:10;

  min-height:95px;

  display:grid;

  grid-template-columns:
    1fr 1px 1fr 1px 1fr;

  align-items:center;

  padding:
    15px 28px;

  border-radius:18px;

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

  backdrop-filter:
    blur(10px);

  box-shadow:
    0 14px 35px rgba(65,50,34,.08);
}

.stat{
  padding:0 20px;
}

.stat strong{
  display:block;

  font-family:"Cormorant Garamond",serif;

  font-size:31px;

  color:#0d5757;
}

.stat strong.red{
  color:#ad1028;
}

.stat span{
  display:block;

  margin-top:-2px;

  color:#637274;

  font-size:10px;
}

.stat-divider{
  width:1px;
  height:50px;

  background:#ddd6ca;
}

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

@media(max-width:950px){

  .impact-items{
    width:calc(100% - 40px);

    grid-template-columns:
      repeat(4,1fr);

    padding-top:65px;
  }

  .impact-tag{
    display:none;
  }

  .about-main{
    width:calc(100% - 40px);

    grid-template-columns:
      45% 55%;

    column-gap:25px;
  }

  .about-decor{
    display:none;
  }

  .about-stats{
    grid-column:1 / -1;

    margin-top:20px;
  }

}

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

@media(max-width:700px){

  .impact-curve{
    margin-top:-30px;

    min-height:auto;

    border-radius:
      45% 45% 0 0 / 12% 12% 0 0;
  }

  .impact-items{
    grid-template-columns:
      repeat(2,1fr);

    gap:8px;

    padding:
      55px 10px 25px;
  }

  .impact-item{
    padding:12px 5px;

    border-radius:14px;

    background:rgba(255,255,255,.55);
  }

  .impact-item::after{
    display:none;
  }

  .impact-icon{
    font-size:28px;
  }

  .impact-item h3{
    font-size:17px;
  }

  .about-main{
    width:calc(100% - 30px);

    display:block;

    padding-top:35px;
  }

  .about-collage{
    width:100%;

    margin-bottom:30px;
  }

  .collage-paper{
    max-width:430px;

    margin:auto;
  }

  .about-content{
    text-align:center;

    padding-top:0;
  }

  .section-eyebrow{
    justify-content:center;
  }

  .about-content h2{
    font-size:36px;
  }

  .about-content p{
    margin-left:auto;
    margin-right:auto;
  }

  .about-stats{
    margin-top:35px;

    grid-template-columns:1fr;

    gap:18px;

    text-align:center;

    padding:25px;
  }

  .stat-divider{
    display:none;
  }

}

/* =========================================
   BOTTOM STATS CARD
========================================= */

.about-stats{
  background:#075b55;       /* CARD GREEN COLOR */
  border-radius:24px;
  padding:28px 45px;

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

/* 12+ / 10,000+ / Trichy */
.about-stats .stat strong{
  display:block;

  font-size:34px;           /* ← MAIN TEXT SIZE CONTROL */
  line-height:1;
  font-weight:700;

  color:#ffffff;            /* WHITE */
  margin-bottom:8px;
}

/* Social Programs / Lives Touched / etc */
.about-stats .stat span{
  display:block;

  font-size:15px;           /* ← SMALL TEXT SIZE CONTROL */
  line-height:1.4;

  color:rgba(255,255,255,.85);
}

/* Trichy old red color override */
.about-stats .stat strong.red{
  color:#ffffff;
}

/* DIVIDER LINES */
.about-stats .stat-divider{
  width:1px;
  height:62px;

  background:rgba(255,255,255,.28);
}

/* =========================================
   IMPACT SECTION
   CREATIVE TOP + BOTTOM CURVE
========================================= */

.impact-curve{
  position:relative;
  width:100%;

  /* section height */
  min-height:260px;

  /* space for top + bottom curves */
  padding:65px 0 70px;

  background:
    linear-gradient(
      110deg,
      #075653 0%,
      #08736c 50%,
      #075653 100%
    );

  overflow:hidden;
  z-index:5;

  /* IMPORTANT:
     top + bottom smooth organic curve
  */
  .impact-curve{
    clip-path: ellipse(90% 100% at 50% 0%);
}
}

/* =========================================
   VERY LIGHT TOP DECORATIVE WAVE
========================================= */

.impact-curve::before{
  content:"";

  position:absolute;
  top:7px;
  left:-5%;

  width:110%;
  height:45px;

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

  border-radius:
    0 0 50% 50% 
    0 0 100% 100%;

  transform:rotate(-1deg);

  pointer-events:none;
}

/* =========================================
   VERY LIGHT BOTTOM DECORATIVE WAVE
========================================= */

.impact-curve::after{
  content:"";

  position:absolute;

  bottom:5px;
  left:-5%;

  width:110%;
  height:40px;

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

  border-radius:
    50% 50% 0 0 /
    100% 100% 0 0;

  transform:rotate(1deg);

  pointer-events:none;
}

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

.impact-items{
  position:relative;
  z-index:10;

  width:min(1200px, calc(100% - 80px));
  margin:auto;

  display:grid;

  grid-template-columns:
    repeat(4, 1fr) 180px;

  align-items:center;
}

/* =========================================
   EACH ITEM
========================================= */

.impact-item{
  position:relative;
  text-align:center;

  padding:10px 30px;
}

/* DIVIDER */

.impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;

  right:0;
  top:15%;

  width:1px;
  height:70%;

  background:rgba(255,255,255,.22);
}

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

.impact-icon{
  font-size:36px;

  margin-bottom:10px;

  transition:
    transform .35s ease;
}

.impact-item:hover .impact-icon{
  transform:
    translateY(-7px)
    scale(1.1);
}

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

.impact-item h3{
  margin:0 0 4px;

  font-family:Georgia, serif;

  font-size:25px;
  font-weight:600;

  color:#ffffff;
}

/* =========================================
   SMALL TEXT
========================================= */

.impact-item p{
  margin:0;

  font-size:15px;
  line-height:1.5;

  color:rgba(255,255,255,.78);
}

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

.impact-tag{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  padding-left:35px;

  font-size:11px;
  line-height:1.45;

  letter-spacing:2px;

  font-weight:700;

  color:#ffffff;
}

.impact-tag i{
  display:block;

  width:40px;
  height:3px;

  margin-top:12px;

  background:#ffffff;

  border-radius:20px;
}

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

@media(max-width:1000px){

.footer-wrapper{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:600px){

.footer-wrapper{

grid-template-columns:1fr;

}

.footer-credit-card{

width:90%;

}

}

@media(max-width:600px){

  .impact-curve{
    min-height:auto;

    padding:
      75px 20px
      80px;
  }

  .impact-items{
    grid-template-columns:1fr;

    width:100%;

    gap:30px;
  }

  .impact-tag{
    grid-column:auto;
  }

  .impact-item h3{
    font-size:23px;
  }

}

/* =========================================
   IMPACT SECTION - OCEAN WAVE BACKGROUND
========================================= */

.impact-curve{
  position:relative;
  width:104%;
  margin-left:-2%;
  margin-top:-55px;
  min-height:240px;

  background:
    linear-gradient(
      120deg,
      #003f3c 0%,
      #006b66 35%,
      #00877e 60%,
      #00534f 100%
    );

  border-radius:50% 50% 0 0 / 32% 32% 0 0;

  overflow:hidden;
  z-index:5;
}

/* =========================================
   FIRST OCEAN WAVE
========================================= */

.impact-curve::before{
  content:"";

  position:absolute;

  width:150%;
  height:220px;

  left:-25%;
  bottom:-145px;

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

  border-radius:45% 55% 48% 52% / 55% 48% 52% 45%;

  animation:oceanWaveOne 10s linear infinite;

  pointer-events:none;
}

/* =========================================
   SECOND OCEAN WAVE
========================================= */

.impact-curve::after{
  content:"";

  position:absolute;

  width:160%;
  height:210px;

  left:-30%;
  bottom:-160px;

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

  border-radius:52% 48% 55% 45% / 45% 55% 48% 52%;

  animation:oceanWaveTwo 14s linear infinite;

  pointer-events:none;
}

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

@keyframes oceanWaveOne{

  0%{
    transform:
      translateX(0)
      rotate(0deg);
  }

  50%{
    transform:
      translateX(5%)
      rotate(3deg);
  }

  100%{
    transform:
      translateX(0)
      rotate(0deg);
  }

}

@keyframes oceanWaveTwo{

  0%{
    transform:
      translateX(0)
      rotate(0deg);
  }

  50%{
    transform:
      translateX(-5%)
      rotate(-3deg);
  }

  100%{
    transform:
      translateX(0)
      rotate(0deg);
  }

}

/* =========================================
   CONTENT ABOVE WAVES
========================================= */

.impact-items{
  position:relative;
  z-index:5;
}

/* WHITE TEXT */

.impact-item h3,
.impact-tag{
  color:#005f5a;
}

.impact-item p{
  color:rgba(255,255,255,.82);
}

/* DIVIDER */

.impact-item:not(:nth-child(4))::after{
  background:rgba(255,255,255,.22);
}

/* RIGHT SMALL LINE */

.impact-tag i{
  background:#ffffff;
}

/* =========================================
   IMPACT SECTION - IRREGULAR TOP & BOTTOM WAVE
   Sketch shape style
========================================= */

.impact-curve{
  position:relative;

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

  margin:0;
  padding:70px 0 75px;

  background:
    linear-gradient(
      120deg,
      #04514e 0%,
      #08756e 52%,
      #055a55 100%
    );

  /*
    MAIN SHAPE:
    top + bottom irregular wave
  */
  clip-path:polygon(
    /* TOP WAVE */
    0% 11%,
    5% 6%,
    10% 8%,
    15% 4%,
    20% 7%,
    25% 3%,
    30% 6%,
    35% 4%,
    40% 8%,
    45% 5%,
    50% 7%,
    55% 3%,
    60% 6%,
    65% 4%,
    70% 7%,
    75% 5%,
    80% 8%,
    85% 4%,
    90% 7%,
    95% 5%,
    100% 10%,

    /* RIGHT SIDE */
    100% 90%,

    /* BOTTOM WAVE */
    95% 95%,
    90% 92%,
    85% 96%,
    80% 93%,
    75% 97%,
    70% 94%,
    65% 96%,
    60% 92%,
    55% 95%,
    50% 93%,
    45% 97%,
    40% 94%,
    35% 96%,
    30% 92%,
    25% 95%,
    20% 93%,
    15% 97%,
    10% 94%,
    5% 96%,
    0% 91%
  );

  overflow:hidden;
  z-index:5;
}

/* =========================================
   LIGHT TOP INNER WAVE
========================================= */

.impact-curve::before{
  content:"";

  position:absolute;

  top:15px;
  left:-5%;

  width:110%;
  height:75px;

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

  clip-path:polygon(
    0% 35%,
    8% 18%,
    16% 28%,
    24% 12%,
    32% 24%,
    40% 14%,
    48% 28%,
    56% 10%,
    64% 23%,
    72% 15%,
    80% 29%,
    88% 13%,
    100% 30%,
    100% 100%,
    0% 100%
  );

  pointer-events:none;
}

/* =========================================
   LIGHT BOTTOM INNER WAVE
========================================= */

.impact-curve::after{
  content:"";

  position:absolute;

  bottom:10px;
  left:-5%;

  width:110%;
  height:75px;

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

  clip-path:polygon(
    0% 55%,
    8% 70%,
    16% 58%,
    24% 76%,
    32% 62%,
    40% 72%,
    48% 57%,
    56% 75%,
    64% 60%,
    72% 73%,
    80% 58%,
    88% 76%,
    100% 60%,
    100% 100%,
    0% 100%
  );

  pointer-events:none;
}

/* =========================================
   CONTENT ABOVE SHAPE
========================================= */

.impact-items{
  position:relative;
  z-index:10;

  width:min(1200px, calc(100% - 80px));
  margin:auto;

  display:grid;
  grid-template-columns:repeat(4,1fr) 180px;

  align-items:center;
}

/* =========================================
   ITEM TEXT
========================================= */

.impact-item{
  position:relative;
  text-align:center;
  padding:10px 28px;
}

.impact-item h3{
  margin:0 0 4px;

  font-family:"Cormorant Garamond", serif;

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

  color:#005f5a;
}

.impact-item p{
  margin:0;

  font-size:15px;
  line-height:1.5;

  color:rgba(255,255,255,.82);
}

/* DIVIDER */

.impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;

  right:0;
  top:15%;

  width:1px;
  height:70%;

  background:rgba(255,255,255,.22);
}

/* ICON */

.impact-icon{
  font-size:36px;
  margin-bottom:10px;
}

/* RIGHT TAG */

.impact-tag{
  display:flex;
  flex-direction:column;

  align-items:flex-start;

  padding-left:35px;

  font-size:11px;
  line-height:1.45;

  letter-spacing:2px;
  font-weight:700;

  color:#fff;
}

.impact-tag i{
  display:block;

  width:40px;
  height:3px;

  margin-top:12px;

  background:#fff;

  border-radius:30px;
}


/* ==========================================
   PREMIUM IMPACT CARDS - 3D FLOAT STYLE
========================================== */

.impact-section{
    position:relative;
    padding:40px 0 70px;
    overflow:hidden;
}


/* cards wrapper */
.impact-wrapper{
    position:relative;
    z-index:5;
}


/* CARD */

.impact-card{

    position:relative;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,0.20),
        rgba(255,255,255,0.06)
    );

    border:1px solid rgba(255,255,255,.35);

    border-radius:24px;

    padding:30px 25px;

    backdrop-filter:blur(18px);

    box-shadow:

    0 20px 40px rgba(0,0,0,.20),
    inset 0 1px 20px rgba(255,255,255,.15);


    overflow:hidden;

    transform-style:preserve-3d;

    transition:
    transform .5s ease,
    box-shadow .5s ease;

}



/* top glow */

.impact-card::before{

    content:"";

    position:absolute;

    width:200px;
    height:200px;

    background:
    radial-gradient(
    circle,
    rgba(255,255,255,.45),
    transparent 70%
    );


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

    opacity:.4;

    transition:.6s;

}



/* moving shine */

.impact-card::after{

    content:"";

    position:absolute;

    width:80px;
    height:150%;

    background:
    linear-gradient(
    transparent,
    rgba(255,255,255,.5),
    transparent
    );


    transform:
    rotate(35deg)
    translateY(-200%);


    left:40%;

    transition:.8s;

}



/* hover */

.impact-card:hover{


    transform:

    translateY(-18px)
    translateZ(40px);


    box-shadow:

    0 35px 70px rgba(0,0,0,.35),
    0 0 45px rgba(210,173,88,.45);


}



.impact-card:hover::before{

    transform:
    translate(150px,120px);

}



.impact-card:hover::after{

    transform:
    rotate(35deg)
    translateY(200%);

}



/* ICON */

.impact-card img,
.impact-card i{


    width:75px;
    height:75px;


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


    margin:0 auto 20px;


    border-radius:50%;


    background:

    linear-gradient(
    145deg,
    #ffffff,
    #d2ad58
    );


    box-shadow:

    0 15px 35px rgba(0,0,0,.25);


    transform:

    translateZ(50px);


    transition:.5s;

}



.impact-card:hover img,
.impact-card:hover i{

    transform:

    translateZ(80px)
    scale(1.12)
    rotateY(15deg);

}



/* TITLE */

.impact-card h3{


    font-family:
    "Cormorant Garamond",
    serif;


    font-size:34px;


    color:#ffffff;


    text-align:center;


    margin:10px 0;


    transform:
    translateZ(35px);

}



/* TEXT */


.impact-card p{


    text-align:center;


    color:#e7eeee;


    font-size:18px;


    transform:
    translateZ(25px);


}



/* RIGHT SIDE TEXT */

.impact-title{

    animation:
    floatText 4s ease-in-out infinite;

}



@keyframes floatText{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


}



/* MOBILE */


@media(max-width:768px){

.impact-card{

margin-bottom:25px;

}


.impact-card h3{

font-size:28px;

}

}


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

@media(max-width:1000px){

  .impact-curve{
    padding:75px 0 80px;
  }

  .impact-items{
    width:min(720px, calc(100% - 40px));

    grid-template-columns:repeat(2,1fr);

    gap:35px;
  }

  .impact-item::after{
    display:none;
  }

  .impact-tag{
    grid-column:1/-1;

    align-items:center;

    padding-left:0;

    text-align:center;
  }

}

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

@media(max-width:600px){

  .impact-curve{
    min-height:auto;

    padding:85px 18px 90px;

    clip-path:polygon(
      0% 5%,
      12% 2%,
      24% 6%,
      36% 3%,
      48% 7%,
      60% 3%,
      72% 6%,
      84% 2%,
      100% 5%,

      100% 95%,

      88% 98%,
      76% 94%,
      64% 97%,
      52% 93%,
      40% 97%,
      28% 94%,
      16% 98%,
      0% 95%
    );
  }

  .impact-items{
    width:100%;

    grid-template-columns:1fr;

    gap:30px;
  }

  .impact-tag{
    grid-column:auto;
  }

}

/* =========================================
   IMPACT SECTION - EXACT STRAIGHT GREEN STRIP
========================================= */

.impact-curve{
  width:100%;
  min-height:150px;

  margin:0;
  padding:35px 35px;

  position:relative;

  display:flex;
  align-items:center;

  background:
    linear-gradient(
      90deg,
      #005f59 0%,
      #00746d 50%,
      #005f59 100%
    );

  border-radius:0;
  clip-path:none;
  overflow:hidden;
}

/* REMOVE OLD CURVES */
.impact-curve::before,
.impact-curve::after{
  display:none;
  content:none;
}

/* =========================================
   INNER GRID
========================================= */

.impact-items{
  width:min(1500px, calc(100% - 40px));
  margin:0 auto;

  display:grid;

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

  align-items:center;

  position:relative;
  z-index:2;
}

/* =========================================
   EACH ITEM
========================================= */

.impact-item{
  position:relative;

  padding:10px 35px;

  text-align:center;
}

/* VERTICAL DIVIDER */

.impact-item:not(:nth-child(4))::after{
  content:"";

  position:absolute;

  right:0;
  top:50%;

  width:1px;
  height:115px;

  transform:translateY(-50%);

  background:
    rgba(255,255,255,.28);
}

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

.impact-icon{
  margin-bottom:15px;

  font-size:40px;
  line-height:1;
}

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

.impact-item h3{
  margin:0 0 7px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:34px;
  line-height:1;

  font-weight:700;

  color:#005f5a;
}

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

.impact-item p{
  margin:0;

  font-family:"Inter",sans-serif;

  font-size:17px;
  line-height:1.4;

  color:rgba(255,255,255,.90);
}

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

.impact-tag{
  padding-left:45px;

  display:flex;
  flex-direction:column;

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

  color:#ffffff;

  font-size:13px;
  line-height:1.55;

  font-weight:700;

  letter-spacing:2.2px;
}

.impact-tag i{
  width:55px;
  height:4px;

  margin-top:16px;

  display:block;

  background:#ffffff;

  border-radius:10px;
}

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

@media(max-width:1000px){

  .impact-curve{
    padding:40px 30px;
  }

  .impact-items{
    grid-template-columns:repeat(2,1fr);
    gap:35px 0;
  }

  .impact-item::after{
    display:none;
  }

  .impact-tag{
    grid-column:1/-1;

    align-items:center;

    padding-left:0;

    text-align:center;
  }

}

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

@media(max-width:600px){

  .impact-curve{
    padding:40px 18px;
  }

  .impact-items{
    width:100%;

    grid-template-columns:1fr;

    gap:32px;
  }

  .impact-item{
    padding:8px;
  }

  .impact-item h3{
    font-size:29px;
  }

  .impact-item p{
    font-size:15px;
  }

  .impact-tag{
    grid-column:auto;
  }

}

/* =========================================
   FINAL IMPACT HEIGHT FIX
========================================= */

.impact-curve{
  width:100% !important;

  min-height:160px !important;
  height:auto !important;

  margin:0 !important;

  /* TOP/BOTTOM HEIGHT CONTROL */
  padding:25px 50px !important;

  background:
    linear-gradient(
      90deg,
      #005f59 0%,
      #00746d 50%,
      #005f59 100%
    ) !important;

  border-radius:0 !important;
  clip-path:none !important;

  display:flex !important;
  align-items:center !important;

  overflow:hidden !important;
}

/* OLD WAVE EFFECT REMOVE */

.impact-curve::before,
.impact-curve::after{
  content:none !important;
  display:none !important;
}

/* VERY IMPORTANT:
   OLD 220px HEIGHT + 55px PADDING REMOVE
*/

.impact-items{
  width:min(1500px, calc(100% - 40px)) !important;

  min-height:0 !important;
  height:auto !important;

  padding:0 !important;

  margin:0 auto !important;

  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr))
    180px !important;

  align-items:center !important;
}

/* ITEM */

.impact-item{
  padding:8px 30px !important;
}

/* ICON */

.impact-icon{
  margin-bottom:8px !important;
  font-size:34px !important;
}

/* TITLE */

.impact-item h3{
  margin:0 0 4px !important;

  font-size:28px !important;

  color:#fff !important;
}

/* SUBTEXT */

.impact-item p{
  margin:0 !important;

  font-size:15px !important;

  color:rgba(255,255,255,.9) !important;
}

/* DIVIDER */

.impact-item:not(:nth-child(4))::after{
  height:85px !important;
}

/* RIGHT TEXT */

.impact-tag{
  color:#fff !important;
}

/* =========================================================
   OUR FOCUS AREAS
========================================================= */

.focus-section{
  position:relative;
  width:100%;

  padding:80px 0 85px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.95),
      rgba(250,247,239,.97) 45%,
      #f7f2e8 100%
    );

  overflow:hidden;
}

/* subtle botanical background */

.focus-section::before,
.focus-section::after{
  content:"";

  position:absolute;

  width:260px;
  height:420px;

  top:80px;

  opacity:.08;

  background:
    url("../images/leaf-pattern.png")
    center / contain no-repeat;

  pointer-events:none;
}

.focus-section::before{
  left:-80px;
}

.focus-section::after{
  right:-80px;
  transform:scaleX(-1);
}

.focus-container{
  width:min(1500px,calc(100% - 60px));
  margin:auto;

  position:relative;
  z-index:2;
}

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

.focus-heading{
  max-width:900px;
  margin:0 auto 48px;

  text-align:center;
}

.focus-eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:18px;

  margin-bottom:20px;
}

.focus-eyebrow span{
  width:46px;
  height:2px;

  background:#b5162e;
}

.focus-eyebrow strong{
  color:#b5162e;

  font-size:15px;

  font-weight:700;

  letter-spacing:5px;
}

.focus-heading h2{
  margin:0 0 15px;

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:54px;
  line-height:1;

  font-weight:700;

  color:#0a484a;

  letter-spacing:-1.4px;
}

.focus-heading p{
  max-width:720px;

  margin:auto;

  font-size:16px;
  line-height:1.7;

  color:#6b7372;
}

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

.focus-slider-wrap{
  position:relative;

  width:100%;

  display:flex;
  align-items:center;
}

.focus-slider{
  width:100%;

  overflow:hidden;

  padding:
    16px 8px
    30px;
}

.focus-track{
  display:flex;

  gap:22px;

  transition:
    transform .65s
    cubic-bezier(.22,.61,.36,1);

  will-change:transform;
}

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

.focus-card{
  flex:
    0 0
    calc((100% - 66px) / 4);

  min-width:0;

  position:relative;

  border-radius:20px;

  background:#fffdf9;

  box-shadow:
    0 18px 45px
    rgba(47,56,51,.12);

  overflow:hidden;

  transform-style:preserve-3d;

  transition:
    transform .35s ease,
    box-shadow .35s ease;

  cursor:pointer;
}

.focus-card:hover{
  transform:
    perspective(900px)
    rotateX(2deg)
    rotateY(-3deg)
    translateY(-10px);

  box-shadow:
    0 28px 60px
    rgba(47,56,51,.18);
}

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

.focus-image{
  position:relative;

  width:100%;
  height:220px;

  overflow:hidden;

  background:#eee;
}

.focus-image::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 55%,
      rgba(0,0,0,.10)
    );
}

.focus-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .65s
    cubic-bezier(.2,.7,.2,1);
}

.focus-card:hover .focus-image img{
  transform:scale(1.08);
}

/* =========================================================
   CARD BODY
========================================================= */

.focus-card-body{
  position:relative;

  min-height:140px;

  padding:20px 22px;

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

  text-align:center;
}

/* =========================================================
   ICON + NUMBER
========================================================= */

.focus-meta{
  position:absolute;

  top:-28px;
  left:22px;
  right:22px;

  display:flex;
  align-items:center;

  gap:15px;
}

.focus-icon{
  width:58px;
  height:58px;

  flex-shrink:0;

  display:grid;
  place-items:center;

  border-radius:50%;

  color:#fff;

  font-size:26px;

  box-shadow:
    0 8px 18px
    rgba(0,0,0,.15);

  transform:
    translateZ(20px);
}

.focus-red{
  background:
    linear-gradient(
      145deg,
      #d01a36,
      #a50d26
    );
}

.focus-green{
  background:
    linear-gradient(
      145deg,
      #0d7568,
      #075047
    );
}

.focus-gold{
  background:
    linear-gradient(
      145deg,
      #dfa746,
      #bd7e23
    );
}

.focus-number{
  font-family:
    "Cormorant Garamond",
    serif;

  font-size:28px;

  font-weight:700;

  color:#c7c4bd;
}

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

.focus-card h3{
  margin:5px auto 0;
  max-width:245px;
  font-size:18px;
  line-height:1.35;
}

/* =========================================================
   SMALL BOTTOM LINE
========================================================= */

.focus-line{
  position:absolute;

  left:50%;
  bottom:17px;

  width:52px;
  height:4px;

  border-radius:50px;

  transform:
    translateX(-50%);
}

.focus-line-red{
  background:#c61631;
}

.focus-line-green{
  background:#08655d;
}

.focus-line-gold{
  background:#c89032;
}

/* =========================================================
   ARROWS
========================================================= */

.focus-arrow{
  position:absolute;

  top:50%;

  z-index:20;

  width:48px;
  height:48px;

  border:1px solid
    rgba(170,20,42,.15);

  border-radius:50%;

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

  color:#ad1028;

  font-size:33px;

  display:grid;
  place-items:center;

  cursor:pointer;

  box-shadow:
    0 10px 28px
    rgba(48,51,47,.14);

  transform:
    translateY(-50%);

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}

.focus-prev{
  left:-24px;
}

.focus-next{
  right:-24px;
}

.focus-arrow:hover{
  background:#ad1028;

  color:#fff;

  transform:
    translateY(-50%)
    scale(1.08);
}

/* =========================================================
   DOTS
========================================================= */

.focus-dots{
  display:flex;

  justify-content:center;

  gap:8px;

  margin-top:8px;
}

.focus-dot{
  width:8px;
  height:8px;

  padding:0;

  border:0;

  border-radius:50%;

  background:#d8d2c6;

  cursor:pointer;

  transition:
    width .3s ease,
    background .3s ease;
}

.focus-dot.active{
  width:27px;

  border-radius:20px;

  background:#ad1028;
}

/* =========================================================
   RESPONSIVE - 1100
========================================================= */

@media(max-width:1100px){

  .focus-card{
    flex:
      0 0
      calc((100% - 44px) / 3);
  }

}

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

@media(max-width:800px){

  .focus-section{
    padding:
      65px 0
      70px;
  }

  .focus-container{
    width:calc(100% - 35px);
  }

  .focus-heading h2{
    font-size:43px;
  }

  .focus-card{
    flex:
      0 0
      calc((100% - 22px) / 2);
  }

  .focus-prev{
    left:-10px;
  }

  .focus-next{
    right:-10px;
  }

}

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

@media(max-width:560px){

  .focus-heading{
    margin-bottom:32px;
  }

  .focus-eyebrow strong{
    font-size:11px;
    letter-spacing:3px;
  }

  .focus-eyebrow span{
    width:25px;
  }

  .focus-heading h2{
    font-size:36px;
  }

  .focus-heading p{
    font-size:14px;
  }

  .focus-card{
    flex:0 0 100%;
  }

  .focus-image{
    height:230px;
  }

  .focus-card-body{
    min-height:195px;
  }

  .focus-arrow{
    width:42px;
    height:42px;

    font-size:28px;
  }

}

/* ===============================
   IMPACT SECTION
================================ */

.impact-section{

    width:100%;
    height:620px;

    position:relative;

    overflow:hidden;

}

/* SINGLE BACKGROUND IMAGE */

.impact-bg{

    position:absolute;

    inset:0;

}

.impact-bg img{

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

}

/* CONTENT OVER IMAGE */

.impact-overlay{

    position:relative;

    z-index:2;

    width:min(1200px,90%);

    height:100%;

    margin:auto;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/* LEFT CONTENT */

.impact-left{

    width:700px;

    position:absolute;

    top:80px;
    left:50%;

    transform:translateX(-50%);

    text-align:center;

}

.impact-left span{

    font-size:12px;

    letter-spacing:5px;

    font-weight:700;

}

.impact-left h2{

    margin:15px 0;

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:65px;

    line-height:1;

}

.impact-left p{

    font-size:20px;
    font-weight: bold;
    line-height:1.6;

    max-width:700px;

}

.impact-left a{

    display:inline-flex;

    margin-top:25px;

    padding:14px 35px;

    background:#b3122c;

    color:white;

    border-radius:30px;

    font-weight:600;

}

/* STATS */

.impact-stats{

    position:absolute;

    right:0;

    bottom:80px;

    width:650px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

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

    padding:30px;

    border-radius:15px;

    backdrop-filter:blur(10px);

}

.impact-stats div{

    text-align:center;

    border-right:1px solid #ddd;

}

.impact-stats div:last-child{

    border:none;

}

.impact-stats h3{

    color:#00534f;

    font-size:30px;

    margin:0;

}

.impact-stats p{

    margin-top:5px;

    color:#555;

    font-size:13px;

}

/* MOBILE */

@media(max-width:900px){

.impact-section{

    height:750px;

}

.impact-left{

    width:100%;

    text-align:center;

}

.impact-left h2{

    font-size:45px;

}

.impact-stats{

    position:relative;

    width:100%;

    right:auto;

    bottom:auto;

    margin-top:40px;

    grid-template-columns:repeat(2,1fr);

}

}

/* ================================
 LEADERSHIP SECTION
================================ */

.leadership-section{

    width:100%;

    padding:80px 60px;

    background:

    linear-gradient(
        rgba(255,250,240,.85),
        rgba(255,250,240,.85)
    ),
    url("../images/leadership-bg.jpg");

    background-size:cover;

    background-position:center;

}

.leadership-container{

    max-width:1500px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

/* LEFT */

.leadership-content{

    width:35%;

}

.lead-small{

    font-size:12px;

    letter-spacing:4px;

    color:#c01936;

    font-weight:700;

}

.leadership-content h2{

    margin:18px 0;

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:52px;

    line-height:1.05;

    color:#073b3b;

}

.leadership-content p{

    font-size:16px;

    line-height:1.6;

    color:#555;

    max-width:360px;

}

.lead-btn{

    display:inline-flex;

    align-items:center;

    gap:20px;

    margin-top:25px;

    padding:14px 30px;

    background:#b51235;

    color:white;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

}

/* CARDS */

.leader-cards{

    width:60%;

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;

}

.leader-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
    0 15px 40px rgba(0,0,0,.08);

}

.leader-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    object-position:center 18%;

}

.leader-info{

    padding:20px;

    text-align:center;

}

.leader-info h3{

    margin:0 0 5px;

    font-size:17px;

    color:#073b3b;

}

.leader-info span{

    font-size:13px;

    color:#777;

}

.leader-info p{

    margin-top:12px;

    font-size:13px;

    color:#555;

    line-height:1.5;

}

/* RESPONSIVE */

@media(max-width:1000px){

.leadership-container{

    flex-direction:column;

}

.leadership-content,
.leader-cards{

    width:100%;

}

}

@media(max-width:600px){

.leader-cards{

grid-template-columns:1fr;

}

.leadership-section{

padding:50px 20px;

}

.leadership-content h2{

font-size:38px;

}

}

/* ================================
   DONATE BANNER
================================ */

.donate-banner{

    width:100%;
    height:330px;

    position:relative;

    display:flex;
    align-items:center;

    overflow:hidden;

}

.donate-banner{
    position:relative;
    width:100%;
    min-height:420px;
    overflow:hidden;
}

/* BACKGROUND IMAGE */
.donate-background{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center center;

    z-index:0;

    opacity:1;

    filter:none;

    transform:scale(1);
}

/* LIGHT OVERLAY */

.donate-banner::after{

    content:"";

    position:absolute;

    inset:0;

   
    z-index:1;

}

/* LEFT CONTENT */

.donate-content{

    position:relative;

    z-index:2;

    margin-left:95px;

}

.donate-small{

    font-size:12px;
    letter-spacing:3px;

    font-weight:700;

    color:white;

}

.donate-content h2{

    margin:10px 0;

    font-family:
    "Cormorant Garamond",
    serif;

    font-size:48px;

    line-height:.9;

    color:#9b1328;

}

.donate-content h2 span{

    color:#164d5c;

}

.donate-content p{

    font-size:15px;

    line-height:1.5;
    font-weight: bold;
    color:white;

    margin-bottom:18px;

}

/* BUTTON */

.donate-btn{

    display:inline-flex;

    align-items:center;

    gap:20px;

    padding:12px 28px;

    border-radius:10px;

    background:#ad1028;

    color:white;

    font-size:15px;

    font-weight:600;

}

.donate-btn span{

    font-size:18px;

}

/* RIGHT CARD */

.donate-card{

    position:absolute;

    right:90px;
    top:90px;

    width:330px;

    padding:32px 30px;

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

    border-radius:28px;

    border:1px solid rgba(210,173,88,.35);

    box-shadow:
    0 25px 60px rgba(0,0,0,.12);

    backdrop-filter:blur(12px);

    z-index:5;

}

.donate-card::before{

    content:"80G CERTIFIED";

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:#f7ead0;

    color:#8b681f;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:20px;

}

.donate-icon{

    width:55px;
    height:55px;

    display:flex;

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

    border-radius:50%;

    background:#f8eee0;

    font-size:26px;

    margin-bottom:18px;

}

.donate-card p{

    margin:0;

    font-size:16px;

    line-height:1.7;

    color:#24454b;

    font-weight:600;

}

/* MOBILE */

@media(max-width:768px){

.donate-content{

    margin-left:25px;

}

.donate-content h2{

    font-size:35px;

}

.donate-card{

    display:none;

}

}

.cect-full-bg{
    filter:none !important;
}

.cect-full-bg img{
    opacity:1 !important;
    filter:none !important;
}


/* =========================================
   CECT PREMIUM FOOTER
========================================= */

.cect-footer{

    width:100%;
    background:
    linear-gradient(
        135deg,
        #003f3c,
        #00645f
    );

    padding:70px 0 25px;

    color:#ffffff;

    overflow:hidden;

}




.footer-wrapper{

    width:min(1350px,calc(100% - 70px));

    margin:auto;

    display:grid;

    grid-template-columns:
    1.15fr .75fr 1.5fr .9fr;

    gap:25px;

    align-items:start;

}





/* =========================================
   COMMON CARD
========================================= */


.footer-box,
.footer-contact-mini{

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

    border:

    1px solid rgba(255,255,255,.18);

    border-radius:24px;

    padding:32px;

    backdrop-filter:blur(15px);

}





/* =========================================
   BRAND
========================================= */


.footer-logo img{

    width:85px;

    height:85px;

    object-fit:contain;

    margin-bottom:22px;

}



.footer-brand h3{

    font-family:"Cormorant Garamond",serif;

    font-size:28px;

    line-height:1.2;

    margin-bottom:18px;

}



.footer-brand p{

    font-size:16px;

    line-height:1.7;

    color:rgba(255,255,255,.85);

}





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


.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}


.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#ffffff;

    color:#00534f;


    transition:.3s;

}



.footer-social a:hover{

    background:#d2ad58;

    color:#ffffff;

    transform:translateY(-5px);

}





/* =========================================
   FOOTER HEADINGS
========================================= */


.footer-box h2{

    font-size:22px;

    margin-bottom:25px;

    position:relative;

}



.footer-box h2::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:45px;

    height:3px;

    border-radius:20px;

    background:#d2ad58;

}





/* =========================================
   QUICK LINKS
========================================= */


.footer-links a{

    display:block;

    margin-bottom:16px;

    color:#e5eeee;

    font-size:16px;

    transition:.3s;

}


.footer-links a:hover{

    color:#d2ad58;

    padding-left:8px;

}





/* =========================================
   ADDRESS
========================================= */


.contact-item{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}



.contact-item i{

    width:45px;

    height:45px;

    flex-shrink:0;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#d2ad58;

    color:#00534f;

}



.contact-item p{

    margin:0;

    font-size:15px;

    line-height:1.7;

    color:#e6eeee;

}





/* =========================================
   MINI CONTACT CARD
========================================= */


.footer-contact-mini{

    display:flex;

    flex-direction:column;

    gap:25px;

}



.mini-contact-item{

    display:flex;

    align-items:center;

    gap:18px;

}



.mini-contact-item i{

    width:48px;

    height:48px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#d2ad58;

    color:#00534f;

}



.mini-contact-item strong{

    font-size:15px;

}



.mini-contact-item p{

    margin:6px 0 0;

    color:#e5eeee;

    line-height:1.6;

}













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


@media(max-width:1100px){


.footer-wrapper{

    grid-template-columns:1fr 1fr;

}


}





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


@media(max-width:650px){


.cect-footer{

    padding:45px 0 20px;

}



.footer-wrapper{

    width:calc(100% - 30px);

    grid-template-columns:1fr;

}



.footer-box,
.footer-contact-mini{

    padding:25px;

}



.footer-brand h3{

    font-size:24px;

}







}


.footer-credit-card{

    width:100%;

    margin-top:80px;

    display:flex;
    flex-direction:column;

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

    text-align:center;

    position:relative;

    left:0;

}


.footer-credit-card p{

    margin:12px 0;

    width:100%;

    text-align:center;

    font-size:16px;

    line-height:1.7;

}


.footer-credit-card a{

    color:#e5a72f;

    font-weight:700;

    text-decoration:none;

}


/* ===== Bottom Credit Center Fix ===== */

.footer-credit-card{
    width:100% !important;

    grid-column:1 / -1 !important;

    display:flex !important;
    flex-direction:column;

    align-items:center !important;
    justify-content:center;

    text-align:center !important;

    margin-top:80px;
}


.footer-credit-card p{
    text-align:center !important;
    margin:10px 0;
}


.footer-credit-card a{
    text-align:center;
}




/* =====================================================
   FINAL MOBILE RESPONSIVE FIX
===================================================== */


/* TABLET */

@media(max-width:900px){


/* HERO */

.cect-hero-main{
    min-height:850px;
}


.cect-full-bg img{

    object-position:65% center;

}


.cect-hero-container{

    width:calc(100% - 30px);

}


.cect-hero-content h1 span{

    font-size:55px;

}


.cect-hero-content h1 strong{

    font-size:58px;

}




/* IMPACT SECTION */


.impact-items{

    width:100%;

    grid-template-columns:
    repeat(2,1fr);

    gap:20px;

    padding:50px 20px 30px;

}



.impact-item{

    background:#ffffff;

    border-radius:18px;

    min-height:120px;

    box-shadow:
    0 15px 35px rgba(0,0,0,.08);

}



.impact-item:not(:nth-child(4))::after{

    display:none;

}



.impact-icon{

    font-size:35px;

}



.impact-item h3{

    font-size:18px;

}



.impact-item p{

    font-size:12px;

}



.impact-tag{

    display:none;

}




/* ABOUT SECTION */


.about-main{

    width:calc(100% - 30px);

    display:flex;

    flex-direction:column;

    padding:30px 0;

}



.about-collage{

    order:1;

}


.about-collage-image{

    transform:none;

    width:100%;

}



.about-content{

    order:2;

    text-align:center;

}



.about-content h2{

    font-size:38px;

}



.about-content p{

    text-align:center;

}



.about-decor{

    display:none;

}



.about-stats{

    order:3;

    grid-template-columns:1fr;

    gap:20px;

    margin-top:30px;

}



.stat-divider{

    display:none;

}




/* PROGRAM CARDS */


.focus-slider{

    overflow:hidden;

}



.focus-card{

    width:100% !important;

}



.focus-card h3{

    font-size:18px;

}





}






/* MOBILE */

@media(max-width:600px){



body{

    overflow-x:hidden;

}



/* HEADER */


.cect-header-inner{

    width:calc(100% - 20px);

}



.cect-brand img{

    width:45px;

    height:45px;

}



.cect-brand-copy strong{

    font-size:9px;

}




/* HERO */


.cect-hero-main{

    min-height:780px;

}



.cect-hero-container{

    padding-top:60px;

}



.cect-hero-content h1 span{

    font-size:42px;

}


.cect-hero-content h1 strong{

    font-size:44px;

}



.cect-hero-description{

    font-size:13px;

}



.cect-actions{

    flex-direction:column;

    width:100%;

}



.cect-btn{

    width:90%;

}





/* IMPACT CARDS */


.impact-items{

    grid-template-columns:1fr;

    padding:40px 20px;

}



.impact-item{

    min-height:100px;

}



.impact-icon{

    font-size:32px;

}




/* ABOUT */


.about-content h2{

    font-size:32px;

}



.about-content p{

    font-size:14px;

}



.about-btn{

    width:100%;

}




/* FOCUS */


.focus-container{

    width:calc(100% - 30px);

}



.focus-heading h2{

    font-size:32px;

}



.focus-heading p{

    font-size:14px;

}



.focus-card-body h3{

    font-size:16px;

}





/* LEADERSHIP */


.leadership-container{

    display:flex;

    flex-direction:column;

}



.leader-cards{

    grid-template-columns:1fr !important;

}



.leader-card{

    width:100%;

}




/* DONATE */


.donate-content h2{

    font-size:38px;

}



.donate-content p{

    font-size:14px;

}



.donate-card{

    width:90%;

}



}





/* SMALL PHONE */

@media(max-width:390px){


.cect-hero-content h1 span{

    font-size:36px;

}



.cect-hero-content h1 strong{

    font-size:38px;

}



.impact-item h3{

    font-size:16px;

}



.about-content h2{

    font-size:28px;

}



}


/* =====================================
   HERO MOBILE IMAGE RESPONSIVE FIX
===================================== */

@media (max-width:768px){

    .cect-hero,
    .hero,
    .hero-section{
        min-height:100vh;
        height:auto;
        overflow:hidden;
    }


    /* background image */

    .cect-hero::before,
    .hero::before,
    .hero-section::before{

        background-position:65% center !important;

        background-size:cover !important;

    }


    /* if image tag use panniruntha */

    .cect-hero img,
    .hero img,
    .hero-section img{

        width:100%;
        height:100%;

        object-fit:cover;

        object-position:65% center;

    }



    /* content spacing */

    .cect-hero-content,
    .hero-content{

        position:relative;

        z-index:2;

        padding:70px 20px 40px;

        text-align:center;

    }


    /* heading */

    .cect-hero-content h1,
    .hero-content h1{

        font-size:42px !important;

        line-height:0.95;

        margin-bottom:25px;

    }


    /* paragraph */

    .cect-hero-content p,
    .hero-content p{

        font-size:15px;

        line-height:1.6;

        max-width:340px;

        margin:0 auto 30px;

    }


    /* buttons */

    .cect-actions,
    .hero-buttons{

        display:flex;

        flex-direction:column;

        gap:15px;

        align-items:center;

    }


    .cect-actions a,
    .hero-buttons a{

        width:90%;

        max-width:330px;

        height:52px;

        justify-content:center;

    }


}


/* small mobile */

@media(max-width:390px){

    .cect-hero img,
    .hero img,
    .hero-section img{

        object-position:70% center;

    }


    .cect-hero-content h1,
    .hero-content h1{

        font-size:36px !important;

    }


}


/* =====================================
   IMPACT SECTION MOBILE FIX
===================================== */

@media(max-width:700px){


.about-impact-section{
    overflow:hidden;
}


/* curve remove desktop shape */

.impact-curve{

    margin-top:-20px;

    min-height:auto;

    border-radius:35px 35px 0 0;

    padding:40px 15px;

}



/* cards stack */

.impact-items{

    width:100%;

    display:grid;

    grid-template-columns:1fr !important;

    gap:18px;

    padding:20px 10px !important;

}



/* card style */

.impact-item{

    width:100%;

    min-height:130px;

    padding:25px 15px;

    border-radius:22px;


    background:

    linear-gradient(
       
        
        rgba(250,247,239,.8)
    );


    


    position:relative;

    overflow:hidden;


    animation:
    impactFloat 4s ease-in-out infinite;

}



/* remove lines */

.impact-item:not(:nth-child(4))::after{

    display:none;

}



/* icon */

.impact-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:12px;


    border-radius:50%;


    background:

    linear-gradient(
        145deg,
        #d2ad58,
        #fff
    );


    font-size:32px;


    box-shadow:

    0 10px 25px rgba(0,0,0,.15);

}



/* heading */

.impact-item h3{

    font-size:28px;

    color:#064f4d;

}



/* description */

.impact-item p{

    font-size:15px;

    color:#657577;

}



/* hide side text */

.impact-tag{

    display:none;

}



}



/* floating animation */

@keyframes impactFloat{


0%,100%{

    transform:translateY(0);

}


50%{

    transform:translateY(-10px);

}


}



/* very small mobile */

@media(max-width:390px){


.impact-item h3{

    font-size:24px;

}


.impact-icon{

    width:55px;

    height:55px;

    font-size:26px;

}


}


/* FINAL TEXT COLOR OVERRIDE */

.impact-item h3{
    color:#0b4f4a !important;
}

.impact-item p{
    color:#276b67 !important;
}

.impact-tag{
    color:#0b4f4a !important;
}


/* =====================================
   SUPPORT MISSION SECTION MOBILE FIX
===================================== */

@media(max-width:600px){

  .support-section,
  .mission-section{
      min-height:650px;
      overflow:hidden;
      position:relative;
  }


  .support-section img,
  .mission-section img,
  .support-bg img{

      width:100%;
      height:100%;

      object-fit:cover;

      /*
        Image position control
        face + hand visible
      */
      object-position:center center;

      transform:scale(1.08);
  }


  .support-content,
  .mission-content{

      position:relative;
      z-index:5;

      padding:70px 25px 40px;

      text-align:left;

  }


  .support-content h1,
  .mission-content h1{

      font-size:42px;
      line-height:.95;

  }


  .support-content p,
  .mission-content p{

      font-size:14px;
      line-height:1.6;

      max-width:330px;

  }


  .support-btn{

      width:190px;
      height:50px;

  }

}


/* =====================================
   FOOTER SOCIAL ICON BRAND COLORS
===================================== */

.footer-social a{
    width:52px;
    height:52px;

    border-radius:60%;

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

    background:#ffffff;

    color:#00534f; /* default icon color */

    transition:.3s ease;
}


/* Instagram Original Gradient Color */

.footer-social a:nth-child(2) i{
    color:#E4405F;
}


/* Hover */

.footer-social a:nth-child(2):hover i{

    background:
    linear-gradient(
        45deg,
        #feda75,
        #d62976,
        #962fbf,
        #4f5bd5
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}


/* Other icons hover */

.footer-social a:hover{

    transform:translateY(-5px);

}


.footer-social a:nth-child(1):hover i{
    color:#1877F2;
}


.footer-social a:nth-child(3):hover i{
    color:#FF0000;
}


.footer-social a:nth-child(4):hover i{
    color:#0A66C2;
}


/* ===============================
   FOOTER 3 CARD LAYOUT FIX
================================ */


.cect-footer{
    width:100%;
    background:#00534f;
    padding:70px 0 30px;
}


.footer-wrapper{

    width:min(1200px,90%);

    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 1.1fr 1fr;

    gap:30px;

    align-items:stretch;

}



/* ALL CARDS */

.footer-box,
.footer-contact-mini,
{

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

    border-radius:24px;

    padding:35px;

    height:100%;

    backdrop-filter:blur(10px);

}



/* =========================
   BRAND CARD
========================= */


.footer-brand{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}



.footer-logo img{

    width:90px;

    height:90px;

    object-fit:contain;

}



.footer-brand h3{

    margin-top:20px;

    color:white;

    font-size:22px;

    line-height:1.3;

}



.footer-brand p{

    color:#dcebea;

    margin-top:15px;

    line-height:1.7;

}




/* SOCIAL */

.footer-social{

    display:flex;

    gap:12px;

    margin-top:25px;

}


.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#00534f;

    transition:.3s;

}



.footer-social a:hover{

    background:#ad1028;

    color:white;

}




/* =========================
   CENTER COMMUNICATION CARD
========================= */


.footer-contact{

    height:auto;

}



.footer-contact h2{

    color:white;

    margin-bottom:25px;

    font-size:24px;

}



.contact-item{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}



.contact-item i{

    color:#d2ad58;

    font-size:20px;

}



.contact-item p{

    color:#e8f1ef;

    line-height:1.7;

    font-size:14px;

    margin:0;

}




/* =========================
 RIGHT CARD COMBINE
========================= */


.footer-contact-mini{

    display:flex;

    flex-direction:column;

    justify-content:center;

}



.mini-contact-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

    margin-bottom:25px;

}



.mini-contact-item i{

    color:#d2ad58;

    font-size:22px;

}



.mini-contact-item strong{

    color:white;

}



.mini-contact-item p{

    color:#dcebea;

    margin-top:5px;

}




.footer-credit-card{

    grid-column:1 / -1;

    margin-top:10px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}



.footer-credit-card p{

    color:#e6eeee;

    font-size:13px;
    line-height:1.0;
    margin:0;

}



.footer-company-link{

    color:#d2ad58;

}






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


@media(max-width:900px){


.footer-wrapper{

    grid-template-columns:1fr;

}


.footer-credit-card{

    grid-column:auto;

    flex-direction:column;

    text-align:center;

}


}

.contact-item i,
.mini-contact-item i{

    width:55px;
    height:55px;

    border-radius:50%;

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

    background:#d2ad58;

    color:#00534f;

    font-size:20px;

}

/* ================================
   DESKTOP ONLY - IMPACT TEXT WHITE
================================ */

@media(min-width:701px){

    .impact-curve .impact-item h3{
        color:#ffffff !important;
    }

    .impact-curve .impact-item p{
        color:rgba(255,255,255,0.85) !important;
    }

    .impact-curve .impact-tag{
        color:#ffffff !important;
    }

}


/* ================================
   MOBILE KEEP ORIGINAL COLOR
================================ */

@media(max-width:700px){

    .impact-curve .impact-item h3{
        color:#005f5a !important;
    }

    .impact-curve .impact-item p{
        color:#607174 !important;
    }

    .impact-curve .impact-tag{
        color:#ffffff !important;
    }

}


/* Contact Details card alignment */

.footer-contact-mini{

    padding:40px 50px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    gap:45px;

}


/* Each contact row */

.mini-contact-item{

    display:flex;

    align-items:flex-start;

    gap:25px;

}


.mini-contact-item i{

    width:50px;
    height:50px;

    min-width:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#d8ad52;

    color:#005b57;

    font-size:28px;

}


/* Text same size as communication */

.mini-contact-item strong{

    display:block;

    font-size:15px;

    color:#fff;

    margin-bottom:10px;

}


.mini-contact-item p{

    margin:0;

    font-size:15px;

    line-height:1.8;

    color:#e8eeee;

}



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


.cect-about-hero{

    width:100vw;

    height:520px;

    position:relative;

    overflow:hidden;

    background-image:url("../images/about-banner.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}



.cect-about-content{

    position:absolute;

    left:7%;

    top:70px;

    width:420px;

}



.cect-about-tag{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:12px;

    letter-spacing:5px;

    font-weight:700;

    color:#005b57;

}



.cect-about-tag::after{

    content:"";

    width:35px;

    height:2px;

    background:#005b57;

}



.cect-about-content h1{

    margin-top:25px;

    font-family:"Cormorant Garamond",serif;

    font-size:58px;

    line-height:.95;

    font-weight:700;

    color:#111;

}



.cect-about-content h1 span{

    color:#b20d32;

}




.cect-about-content p{

    margin-top:20px;

    width:390px;

    font-size:14px;

    line-height:1.6;

    color:#333;

}



.cect-about-btn{


    margin-top:25px;


    display:inline-flex;

    align-items:center;

    gap:20px;


    padding:12px 35px;


    background:#b20d32;


    color:white;


    border-radius:8px;


    text-decoration:none;


    font-weight:600;


}



.cect-about-btn span{

    font-size:20px;

}



.cect-about-bottom{


    margin-top:30px;


    font-family:"Caveat",cursive;


    font-size:28px;


    color:#777;


}




@media(max-width:768px){


.cect-about-hero{

    height:700px;

}


.cect-about-content{

    left:25px;

    top:50px;

    width:calc(100% - 50px);

}



.cect-about-content h1{

    font-size:42px;

}



.cect-about-content p{

    width:100%;

}


}

.cect-about-hero{
    position:relative;
    width:100%;
    min-height:650px;
    overflow:hidden;
}


.cect-about-bg{

    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    top:0;
    left:0;

    z-index:0;

}



.cect-about-content{

    position:relative;

    z-index:2;

}

.cect-story-section{

    width:100%;

    min-height:350px;

    display:grid;

    grid-template-columns:42% 40% 18%;

    align-items:center;

    background:#faf7ef;

    overflow:hidden;

}



/* LEFT IMAGE */


.cect-story-image{

    height:340px;

    position:relative;

}


.cect-story-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



/* IMAGE WHITE FADE */

.cect-story-image::after{

    content:"";

    position:absolute;

    top:0;

    right:-2px;

    width:35%;

    height:100%;


    background:
    linear-gradient(
        90deg,
        transparent,
        #faf7ef
    );

}




/* HAND TEXT */


.cect-story-text{


    position:absolute;

    top:70px;

    right:20px;


    font-family:"Caveat",cursive;

    font-size:32px;

    line-height:.9;

    color:#31383b;

    transform:rotate(-8deg);

}





/* CENTER CONTENT */


.cect-story-content{


    padding:0 40px;

}



.cect-story-tag{


    display:flex;

    align-items:center;

    gap:12px;


    font-size:12px;

    font-weight:700;

    letter-spacing:4px;

    color:#00534f;

    margin-bottom:15px;

}



.cect-story-tag span{


    width:35px;

    height:2px;

    background:#00534f;

}




.cect-story-content h2{


    margin:0 0 15px;


    font-family:"Cormorant Garamond",serif;


    font-size:48px;

    line-height:.9;


    color:#07534f;


}



.cect-story-content p{


    max-width:470px;


    font-size:15px;

    line-height:1.6;

    text-align: justify;
    color:#53666a;


    margin-bottom:20px;

}




/* BUTTON */


.cect-story-btn{


    width:180px;

    height:45px;


    display:flex;

    align-items:center;

    justify-content:center;


    gap:30px;


    border-radius:10px;


    background:#b3112c;

    color:#fff;


    font-size:15px;

    font-weight:600;

}





/* QUOTE */


.cect-story-quote{


    height:230px;


    border-left:1px solid #ddd5c8;


    padding-left:35px;


    display:flex;

    flex-direction:column;

    justify-content:center;

}



.quote-icon{


    font-family:Georgia,serif;


    font-size:90px;

    line-height:.5;


    color:#c8bea9;

}



.cect-story-quote h3{


    font-family:Georgia,serif;


    font-size:22px;

    line-height:1.35;


    font-weight:500;


    color:#333;


}



.cect-story-quote span{


    margin-top:20px;


    width:25px;

    height:2px;


    background:#b3112c;


}


.cect-core-section{


width:100%;

padding:80px 0;


background:

linear-gradient(
135deg,
#003f3c,
#00635d
);


position:relative;

overflow:hidden;


perspective:1200px;


}




/* floating background */


.cect-core-section::before{


content:"";

position:absolute;

width:100px;

height:100px;

background:#0ab5a6;

filter:blur(160px);

opacity:.25;

top:-200px;

left:-100px;


animation:glowMove 8s infinite alternate;


}



@keyframes glowMove{

from{
transform:translate(0);
}

to{
transform:translate(300px,100px);
}

}





.cect-core-container{


width:min(1200px,90%);

margin:auto;

position:relative;

z-index:2;


}




.cect-core-title{


text-align:center;

margin-bottom:55px;


}



.cect-core-title span{


font-size:12px;

letter-spacing:7px;

color:white;

font-weight:700;


}




.cect-core-grid{


display:grid;

grid-template-columns:repeat(4,1fr);


}




.cect-core-card{


text-align:center;

padding:35px;


position:relative;


transition:.6s;


transform-style:preserve-3d;


}




/* divider */


.cect-core-card:not(:last-child)::after{


content:"";


position:absolute;

right:0;

top:40px;


height:150px;


width:1px;


background:
linear-gradient(
transparent,
rgba(255,255,255,.5),
transparent
);


}




/* 3D hover */


.cect-core-card:hover{


transform:

translateY(-18px)

rotateX(8deg)

rotateY(-5deg);


}





.cect-core-icon{


width:75px;

height:75px;


margin:auto;

margin-bottom:25px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;



background:

rgba(255,255,255,.18);


backdrop-filter:blur(15px);



box-shadow:

0 20px 40px rgba(0,0,0,.25),

inset 0 0 20px rgba(255,255,255,.25);



transition:.5s;


}





.cect-core-icon i{


font-size:30px;

color:white;


}




.cect-core-card:hover 
.cect-core-icon{


transform:

translateZ(40px)

scale(1.15);


box-shadow:

0 0 40px rgba(255,255,255,.4);


}





.cect-core-card h3{


font-family:
"Cormorant Garamond",
serif;


font-size:28px;


color:white;


margin-bottom:15px;


}




.cect-core-card p{


color:#e8eeee;


font-size:14px;


line-height:1.7;


}





/* MOBILE */


@media(max-width:768px){



.cect-core-grid{


grid-template-columns:1fr;


gap:30px;


}




.cect-core-card:not(:last-child)::after{


display:none;


}



.cect-core-card{


padding:25px;

}



.cect-core-card h3{


font-size:26px;


}



}


.cect-difference-section{

padding:80px 0;

background:#f8f5ed;

}



.cect-diff-container{

width:min(1250px,90%);

margin:auto;

display:grid;

grid-template-columns:350px 1fr;

gap:60px;

align-items:center;

}





.cect-small-title{

font-size:11px;

letter-spacing:6px;

font-weight:700;

color:#005d59;

}



.cect-diff-content h2,
.cect-milestone-left h2{


font-family:
"Cormorant Garamond",
serif;


font-size:48px;

line-height:1;

color:#004d4b;

margin:20px 0;


}



.cect-diff-content p{

font-size:15px;

line-height:1.7;

color:#555;

}



.cect-diff-btn{


display:inline-flex;

gap:20px;

margin-top:25px;

padding:14px 30px;

background:#b50932;

color:white;

border-radius:10px;

text-decoration:none;

}





/* ==========================================
 PREMIUM 3D STORY CARDS
========================================== */


.cect-diff-cards{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:30px;

perspective:1500px;

}



.cect-diff-card{


height:340px;

position:relative;

overflow:hidden;

border-radius:32px;


background:#fff;


transform-style:preserve-3d;


box-shadow:

0 20px 40px rgba(0,0,0,.12);


opacity:0;

animation:

cardReveal 1s ease forwards;



transition:

transform .7s cubic-bezier(.2,.8,.2,1),

box-shadow .7s;



}





/* stagger animation */


.cect-diff-card:nth-child(1){

animation-delay:.1s;

}


.cect-diff-card:nth-child(2){

animation-delay:.25s;

}


.cect-diff-card:nth-child(3){

animation-delay:.4s;

}


.cect-diff-card:nth-child(4){

animation-delay:.55s;

}




@keyframes cardReveal{


from{

opacity:0;

transform:

translateY(80px)

rotateX(35deg);

}


to{

opacity:1;

transform:

translateY(0)

rotateX(0);

}

}





/* IMAGE */


.cect-diff-card img{


width:100%;

height:210px;


object-fit:cover;


transition:

transform 1s cubic-bezier(.2,.8,.2,1);


transform:

translateZ(40px);


}






/* glass layer */


.cect-diff-card::after{


content:"";


position:absolute;


left:0;

bottom:0;


height:150px;

width:100%;


background:

linear-gradient(

180deg,

transparent,

rgba(255,255,255,.96) 45%

);



z-index:2;


}






/* 3D hover */


.cect-diff-card:hover{


transform:


rotateY(-12deg)

rotateX(8deg)

translateY(-20px);


box-shadow:


25px 45px 80px rgba(0,70,70,.28);



}





.cect-diff-card:hover img{


transform:

scale(1.15)

translateZ(80px);


}





/* ICON */


.cect-card-icon{


position:absolute;


top:175px;


left:50%;


transform:

translateX(-50%)

translateZ(90px);



width:75px;

height:75px;


border-radius:50%;


background:

linear-gradient(

145deg,

#ffffff,

#dcefed

);



display:flex;

align-items:center;

justify-content:center;


font-size:28px;


color:#00645d;



z-index:5;



box-shadow:


0 20px 40px rgba(0,0,0,.2);



transition:.6s;


}




.cect-diff-card:hover 
.cect-card-icon{


transform:

translateX(-50%)

translateY(-15px)

translateZ(120px)

rotateY(360deg);


background:#00645d;


color:#fff;


}







/* TEXT */


.cect-diff-card h3{


position:absolute;


bottom:38px;


left:0;

right:0;


z-index:5;


text-align:center;


font-size:23px;


line-height:1.15;


color:#12484b;


font-weight:700;



transform:

translateZ(70px);



}




/* Floating idle movement */


.cect-diff-card{


animation-name:

cardReveal,

floatingCard;


animation-duration:

1s,

5s;


animation-fill-mode:

forwards;


animation-iteration-count:

1,

infinite;



}



@keyframes floatingCard{


0%,100%{

margin-top:0;

}


50%{

margin-top:-12px;

}


}






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


@media(max-width:1000px){


.cect-diff-cards{

grid-template-columns:

repeat(2,1fr);


}



}





@media(max-width:600px){


.cect-diff-cards{


grid-template-columns:

1fr;


padding:0 20px;


}




.cect-diff-card{


height:330px;


}



/* remove heavy tilt mobile */


.cect-diff-card:hover{


transform:

translateY(-10px);


}



}





/* TIMELINE */


.cect-milestone-section{


padding:70px 8%;


background:#faf7ef;


display:flex;

gap:70px;


}




.cect-timeline{


flex:1;

display:flex;

justify-content:space-between;

position:relative;


}



.cect-line{


position:absolute;

height:2px;

background:#aaa;

top:70px;

left:0;

right:0;


}




.cect-time-item{


text-align:center;

z-index:2;


}



.cect-dot{


width:55px;

height:55px;

background:#00635d;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:auto;


}



.cect-time-item h3{


font-size:25px;

color:#004d4b;


}



.cect-time-item p{

font-size:13px;

color:#777;

}



/* MOBILE */


@media(max-width:900px){


.cect-diff-container{

grid-template-columns:1fr;

}



.cect-diff-cards{

grid-template-columns:repeat(2,1fr);

}



.cect-milestone-section{

display:block;

}



.cect-timeline{

margin-top:50px;

display:grid;

gap:40px;

}


.cect-line{

display:none;

}



}



@media(max-width:500px){


.cect-diff-cards{

grid-template-columns:1fr;

}



.cect-diff-content h2,
.cect-milestone-left h2{

font-size:38px;

}


}


.cect-journey{


padding:100px 7%;

background:#faf7ef;

overflow:hidden;

perspective:1200px;

}





.cect-journey-wrapper{


display:flex;

gap:80px;

align-items:center;


}




.cect-journey-title{

width:330px;

}


.cect-journey-title span{


font-size:12px;

letter-spacing:7px;

font-weight:700;

color:#00645d;


}



.cect-journey-title h2{


font-family:
"Cormorant Garamond",
serif;


font-size:60px;

line-height:.95;

color:#005451;


margin:25px 0;


}



.cect-journey-title p{


font-size:17px;

color:#444;


}






/* TIMELINE */


.cect-journey-timeline{


flex:1;

display:flex;

justify-content:space-between;

position:relative;


}





.cect-journey-line{


position:absolute;

height:4px;

background:

linear-gradient(
90deg,
#00645d,
#b4b4b4,
#00645d
);


top:35px;

left:0;

right:0;

border-radius:20px;


}




.cect-journey-item{


text-align:center;

position:relative;

z-index:2;

width:150px;


transition:.5s;


}





.cect-journey-item:hover{


transform:
translateY(-18px)
rotateX(8deg)
scale(1.05);


}





.cect-journey-icon{


width:70px;

height:70px;


margin:auto;


border-radius:50%;


background:

linear-gradient(
145deg,
#007b72,
#004540
);


display:flex;

justify-content:center;

align-items:center;


color:white;


font-size:25px;



box-shadow:

0 20px 35px rgba(0,0,0,.25),
inset 0 5px 10px rgba(255,255,255,.3);



transition:.5s;


}




.cect-journey-item:hover
.cect-journey-icon{


transform:

rotateY(360deg);


box-shadow:

0 25px 50px rgba(0,100,90,.45);


}





.cect-journey-item h3{


font-size:32px;

margin:12px 0 5px;


color:#005451;


}



.cect-journey-item strong{


display:block;

font-size:17px;

color:#202020;


}




.cect-journey-item p{


font-size:14px;

color:#777;

line-height:1.5;


}






/* scroll animation */


.cect-journey-item{


animation:

journeyFloat 4s ease-in-out infinite;


}



.cect-journey-item:nth-child(3){

animation-delay:.5s;

}


.cect-journey-item:nth-child(4){

animation-delay:1s;

}



.cect-journey-item:nth-child(5){

animation-delay:1.5s;

}





@keyframes journeyFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-8px);

}


}






/* MOBILE */


@media(max-width:900px){


.cect-journey-wrapper{

display:block;

}


.cect-journey-title{

width:auto;

margin-bottom:50px;

}


.cect-journey-title h2{

font-size:45px;

}




.cect-journey-timeline{


display:block;

padding-left:40px;


}



.cect-journey-line{


width:4px;

height:100%;

left:30px;

top:0;

}



.cect-journey-item{


width:auto;

display:flex;

flex-direction:column;

align-items:flex-start;

margin-bottom:60px;

padding-left:70px;


}



.cect-journey-icon{


position:absolute;

left:0;


}


.cect-journey-item h3{


margin-top:0;


}



}


/* ===================================
 PROGRAM HERO
=================================== */


.cect-program-hero{

    width:100%;

    height:650px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

}



/* Background */

.cect-program-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-1;

}



/* CONTENT */

.cect-program-content{

    width:520px;

    margin-left:70px;

    position:relative;

    z-index:2;

}




.cect-program-tag{

    font-size:12px;

    letter-spacing:6px;

    color:#005c5b;

    font-weight:700;

    display:block;

    margin-bottom:18px;

}




.cect-program-content h1{


    font-family:
    "Cormorant Garamond",
    serif;


    font-size:62px;

    line-height:.95;

    color:#063f43;

    margin:0 0 20px;


    font-weight:700;


}



.cect-program-content h1 span{

    color:#b40d32;

}




.cect-program-content p{


    width:420px;
    font-weight: bold;

    font-size:18px;

    line-height:1.7;

    color:#34454a;


}




/* BUTTONS */

.cect-program-buttons{

    display:flex;

    gap:18px;

    margin-top:30px;

}



.program-primary-btn{


    background:#b40d32;

    color:white;

    padding:14px 32px;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

    display:flex;

    gap:20px;

    align-items:center;


}



.program-video-btn{


    border:2px solid #d69a9e;

    color:#243d40;

    padding:12px 28px;

    border-radius:30px;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:12px;

    background:white;


}



.program-video-btn i{

    color:#b40d32;

}



/* Bottom Text */


.cect-program-bottom{


    margin-top:55px;


    font-family:
    "Caveat",
    cursive;


    font-size:32px;

    color:#27585b;


    transform:rotate(-5deg);

}



.cect-program-bottom span{

    color:#b40d32;

}




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


@media(max-width:768px){


.cect-program-hero{

    height:750px;

    align-items:flex-start;

}



.cect-program-bg{

    object-position:center;

}



.cect-program-content{


    width:auto;

    margin:80px 25px;

}



.cect-program-content h1{


    font-size:42px;


}



.cect-program-content p{


    width:100%;

    font-size:14px;

}



.cect-program-buttons{

    flex-direction:column;

    width:max-content;

}



.cect-program-bottom{

    font-size:26px;

}



}


.cect-program-list{

padding:80px 5%;
background:#faf7ef;

}



.program-list-head{

display:flex;
justify-content:space-between;
align-items:end;

margin-bottom:45px;

}



.program-label{

font-size:12px;
letter-spacing:5px;
font-weight:700;
color:#00645f;

}



.program-list-head h2{

font-family:Georgia,serif;

font-size:52px;

margin:10px 0;

color:#163b3d;

}


.program-list-head h2 strong{

color:#b31535;

}



.program-list-head p{

font-size:15px;
color:#333;

}





.program-explore{

padding:12px 28px;

border:1px solid #d15b70;

border-radius:30px;

color:#a51b36;

text-decoration:none;

}




.program-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

}





.program-box{

background:white;

border-radius:18px;

overflow:hidden;

box-shadow:
0 15px 35px rgba(0,0,0,.08);

transition:.5s;

}


.program-box:hover{

transform:
translateY(-12px)
rotateX(5deg);

}




.program-image{

height:150px;

position:relative;

}



.program-image img{

height:100%;

width:100%;

object-fit:cover;

}



.program-number{

position:absolute;

top:8px;
left:8px;

height:35px;
width:35px;

border-radius:50%;

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

color:white;

font-weight:bold;

}



.green{
background:#008b7c;
}


.orange{
background:#f39b18;
}


.blue{
background:#4aa5e8;
}


.pink{
background:#e85b86;
}


.red{
background:#ed4b4b;
}



.program-details{

padding:25px;

position:relative;

}



.program-icon{

position:absolute;

top:-28px;

left:18px;

height:48px;

width:48px;

background:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#00756e;

box-shadow:0 8px 20px #ddd;

}



.program-details h3{

margin-top:25px;

font-size:16px;

color:#063b3c;

}


.program-details p{

font-size:13px;

line-height:1.5;

color:#666;

}



.program-details a{

font-size:13px;

font-weight:700;

color:#c51d3c;

text-decoration:none;

}




@media(max-width:1100px){

.program-grid{

grid-template-columns:repeat(2,1fr);

}

}




@media(max-width:600px){


.program-grid{

grid-template-columns:1fr;

}


.program-list-head{

display:block;

}


.program-list-head h2{

font-size:36px;

}


.program-explore{

display:inline-block;

margin-top:20px;

}

}


/* ==========================================
   PROGRAM NUMBER BADGE FIX
========================================== */

.cect-program-card .program-number,
.cect-diff-card .program-number,
.program-number{

    width:42px;
    height:42px;

    border-radius:50%;

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

    position:absolute;

    top:15px;
    left:15px;

    background:#007d78 !important;

    color:#ffffff !important;

    font-size:15px;

    font-weight:700;

    z-index:10;

}


/* Individual number colors */

.program-card:nth-child(1) .program-number{
    background:#007d78 !important;
}


.program-card:nth-child(2) .program-number{
    background:#f5a623 !important;
}


.program-card:nth-child(3) .program-number{
    background:#4fa3ff !important;
}


.program-card:nth-child(4) .program-number{
    background:#e85d75 !important;
}


.program-card:nth-child(5) .program-number{
    background:#ff6b35 !important;
}


.program-card:nth-child(6) .program-number{
    background:#ff5364 !important;
}


.program-card:nth-child(7) .program-number{
    background:#007d78 !important;
}


.program-card:nth-child(8) .program-number{
    background:#ff5364 !important;
}


.program-card:nth-child(9) .program-number{
    background:#009688 !important;
}


.program-card:nth-child(10) .program-number{
    background:#009688 !important;
}


.program-card:nth-child(11) .program-number{
    background:#8b5e3c !important;
}


.program-card:nth-child(12) .program-number{
    background:#e85d75 !important;
}

.program-details{

    padding:25px;

    min-height:120px;

}


@import url(
'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;600;700&family=Caveat:wght@500;600&display=swap'
);



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



body{

    font-family:"Inter",sans-serif;
    background:#faf7ef;

}





.cect-certificate-hero{


    width:100%;

    min-height:720px;

    position:relative;

    overflow:hidden;

}





/* BACKGROUND */


.certificate-bg{


    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;


}






/* MAIN CONTAINER */


.certificate-container{


    width:min(1350px,calc(100% - 100px));

    margin:auto;

    min-height:720px;


    position:relative;

    z-index:2;


    display:flex;

    align-items:center;


}





/* LEFT */


.certificate-content{


    width:45%;

    padding-top:20px;


}





.certificate-tag{


    font-size:11px;

    letter-spacing:4px;

    font-weight:700;

    color:#155057;


}





.certificate-content h1{


    margin-top:25px;


    font-family:"Cormorant Garamond",serif;


    font-size:78px;

    line-height:.85;

    letter-spacing:-2px;


    color:#123f47;


}



.certificate-content h1 span{


    display:block;

    color:#a5122b;


}






.certificate-content h3{


    margin-top:25px;

    font-size:23px;

    color:#183f45;


}







.certificate-content p{


    width:430px;

    margin-top:20px;


    font-size:17px;

    line-height:1.6;


    color:#40565b;


}








.certificate-script{


    margin-top:45px;


    font-family:"Caveat",cursive;


    font-size:34px;


    line-height:1;


    color:#34575c;


    transform:rotate(-5deg);


}









/* RIGHT OBJECT AREA */


.certificate-object{


    width:55%;


    height:520px;


    position:relative;


}






/* BOOK STACK */


.certificate-books{


    position:absolute;


    left:80px;

    bottom:80px;


    width:220px;


}



.certificate-books div{


    height:42px;


    margin-bottom:3px;


    display:flex;

    align-items:center;


    padding-left:20px;


    color:#d5a94e;


    font-size:14px;

    font-weight:700;



    background:#18272b;


    box-shadow:
    0 8px 15px rgba(0,0,0,.25);


}









/* FRAME */


.certificate-frame{


    position:absolute;


    right:90px;

    top:20px;


    width:330px;


}





.certificate-frame img{


    width:100%;


    filter:

    drop-shadow(
    0 25px 30px rgba(0,0,0,.25)
    );


}








/* BASE BOARD */


.certificate-base{


    position:absolute;


    right:70px;


    bottom:50px;


    width:380px;


    padding:18px;


    text-align:center;


    font-size:16px;


    font-weight:700;


    letter-spacing:2px;


    color:#493b22;



    background:#d7b56d;



    box-shadow:
    0 15px 25px rgba(0,0,0,.25);



}









/* TABLET */


@media(max-width:1100px){


.certificate-container{


    flex-direction:column;


}


.certificate-content{


    width:100%;

    text-align:center;

}



.certificate-content p{

    margin:auto;

}



.certificate-object{


    width:100%;

}




}







/* MOBILE */


@media(max-width:600px){



.cect-certificate-hero{

    min-height:950px;

}




.certificate-container{


width:calc(100% - 30px);


}





.certificate-content h1{


font-size:52px;


}



.certificate-content p{


width:100%;


font-size:14px;


}




.certificate-object{


height:420px;


}




.certificate-frame{


width:220px;

right:20px;


}



.certificate-books{


left:0;

width:150px;

bottom:70px;


}



.certificate-base{


right:0;

width:250px;

font-size:12px;


}



}



/* ==========================================
   CERTIFICATE SECTION - EXACT REFERENCE STYLE
========================================== */

.cect-certificates-section{

    width:100%;
    padding:70px 0;
    background:#fbfaf5;
    overflow:hidden;

}


.cect-cert-container{

    width:min(1120px, calc(100% - 80px));
    margin:auto;

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

}




/* CARD */

.cect-cert-card{

    position:relative;

    padding:18px 18px 22px;

    border-radius:18px;

    text-align:center;

    min-height:390px;

    box-shadow:
    0 18px 35px rgba(0,0,0,.08);

    transition:.4s ease;

    overflow:hidden;

}



.cect-cert-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 45px rgba(0,0,0,.14);

}




/* INDIVIDUAL CARD COLORS */


.cect-cert-card:nth-child(1){

    background:#fff5e7;

}


.cect-cert-card:nth-child(2){

    background:#edf8fc;

}


.cect-cert-card:nth-child(3){

    background:#eff8e8;

}


.cect-cert-card:nth-child(4){

    background:#fff6e5;

}







/* CERTIFICATE IMAGE */


.cert-image{


    width:100%;

    height:145px;

    border-radius:12px;

    overflow:hidden;

    background:white;

}



.cert-image img{


    width:100%;
    height:100%;

    object-fit:cover;

}





/* ICON CIRCLE */


.cert-icon{


    width:55px;
    height:55px;


    border-radius:50%;


    background:#ffffff;


    display:flex;

    align-items:center;

    justify-content:center;


    margin:-28px auto 18px;


    position:relative;


    z-index:5;


    font-size:22px;


    color:#00605b;


    box-shadow:

    0 8px 20px rgba(0,0,0,.12);

}



.cert-icon.red{

    color:#b31135;

}




/* TITLE */


.cect-cert-card h3{


    margin:0 0 14px;


    font-size:22px;

    line-height:1.3;

    font-weight:700;


    color:#123f46;


}






/* DESCRIPTION */


.cect-cert-card p{


    margin:0 auto;


    max-width:230px;


    font-size:14px;


    line-height:1.55;


    color:#46575c;


    min-height:85px;


}







/* BUTTON */


.cect-cert-card button{


    margin-top:20px;


    height:42px;


    padding:0 25px;


    border-radius:30px;


    background:#fff;


    border:2px solid #c51c39;


    color:#ad1028;


    font-size:14px;


    font-weight:700;


    cursor:pointer;


    transition:.3s;


}



.cect-cert-card button span{


    margin-left:10px;

}




.cect-cert-card button:hover{


    background:#ad1028;

    color:#fff;


}







/* POPUP */


.certificate-modal{


    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);


    display:none;

    align-items:center;

    justify-content:center;


    z-index:99999;


}



.certificate-modal img{


    max-width:80%;

    max-height:85%;

    border-radius:15px;


}



.certificate-modal span{


    position:absolute;

    top:25px;

    right:40px;


    font-size:45px;

    color:#fff;

    cursor:pointer;


}





/* RESPONSIVE */


@media(max-width:1000px){

.cect-cert-container{

grid-template-columns:repeat(2,1fr);

}

}



@media(max-width:600px){


.cect-cert-container{

width:calc(100% - 35px);

grid-template-columns:1fr;

}


}


/* =====================================
   DONATE HERO SECTION
===================================== */


.cect-donate-hero{

position:relative;

width:100%;

height:700px;

overflow:hidden;

display:flex;

align-items:center;


}




.cect-donate-bg{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

inset:0;

z-index:1;


}





.cect-donate-overlay{


position:absolute;

inset:0;

background:




z-index:2;


}






.cect-donate-content{


position:relative;

z-index:3;


width:45%;


margin-left:8%;


}



.cect-donate-tag{


font-size:12px;

letter-spacing:5px;

font-weight:700;

color:#b51c35;


}



.cect-donate-content h1{


font-family:Georgia,serif;

font-size:70px;

line-height:.95;

margin:25px 0;


color:#073c45;


}


.cect-donate-content h1 span{


color:#a4142c;


}




.cect-donate-content p{


font-size:18px;

line-height:1.7;
font-weight: bold;
max-width:430px;

color:#a4142c;


}




.cect-donate-script{


margin-top:35px;


font-family:cursive;

font-size:30px;


color:#ffffff;


line-height:1.1;


}


.cect-donate-script span{

color:#c51636;

font-size:45px;

}





/* RIGHT SIDE */


.cect-donate-points{


position:absolute;

right:8%;

bottom:120px;


z-index:5;


}



.donate-point{


display:flex;

align-items:center;

gap:20px;

margin-bottom:30px;


}




.donate-point i{


font-size:25px;

color:#a4142c;


width:35px;


}




.donate-point h4{


margin:0;

font-size:18px;

color:#ffffff;


}




.donate-point span{


font-size:14px;
font-weight: bold;
color:#a4142c;


}






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


@media(max-width:768px){


.cect-donate-hero{

height:750px;

align-items:flex-start;

}



.cect-donate-bg{

object-position:center;

}



.cect-donate-overlay{


background:

linear-gradient(
180deg,
rgba(255,250,240,.95),
rgba(255,250,240,.45)
);


}




.cect-donate-content{


width:90%;

margin:80px auto 0;


}



.cect-donate-content h1{


font-size:45px;


}




.cect-donate-content p{


font-size:16px;


}



.cect-donate-points{


left:30px;

right:auto;

bottom:40px;


}




.donate-point{


margin-bottom:15px;


}


}


/* =========================================
   TRICHY - REMOVE RED BACKGROUND
========================================= */

.about-stats .stat strong.red{
    color:#ffffff !important;
    background:transparent !important;
    background-color:transparent !important;
    box-shadow:none !important;
    text-decoration:none !important;
}


/* =========================================
   CHOOSE YOUR CONTRIBUTION
========================================= */

.contribution-section {
    position: relative;
    width: 100%;
    min-height: 430px;

    padding: 35px 30px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #faf9f5 0%,
            #f7f6f1 100%
        );

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   MAIN WRAPPER
========================================= */

.contribution-wrapper {
    position: relative;
    z-index: 5;

    width: min(1450px, 100%);
    min-height: 450px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr)
        150px;

    gap: 22px;

    align-items: stretch;

    padding: 20px;

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

    border: 1px solid rgba(30,70,65,.08);

    border-radius: 20px;

    box-shadow:
        0 12px 35px rgba(31,67,60,.08);

    backdrop-filter: blur(5px);
}


/* =========================================
   LEFT SIDEBAR
========================================= */

.donation-sidebar {

    display: flex;

    flex-direction: column;

    gap: 3px;

    padding: 8px;

    background: #ffffff;

    border-radius: 13px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.045);

}


/* CATEGORY BUTTON */

.donation-category {

    position: relative;

    width: 100%;

    min-height: 48px;

    padding: 7px 8px;

    display: flex;

    align-items: center;

    gap: 9px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    cursor: pointer;

    text-align: left;

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


.donation-category:hover {

    background: #f6f7f4;

}


.donation-category.active {

    background: #b70d2a;

    color: #ffffff;

    box-shadow:
        0 5px 13px rgba(183,13,42,.15);

}


/* ICON */

.category-icon {

    width: 28px;

    min-width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 40px;

    color: #164f4b;
}


.donation-category.active
.category-icon {

    color: #ffffff;

}


/* TEXT */

.category-text {

    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width: 0;

}


.category-text strong {

    font-size: 15px;

    line-height: 1.15;

    font-weight: 700;

}


.category-text small {

    font-size: 13px;

    line-height: 1.2;

    opacity: .72;

}


.donation-category.active
.category-text small {

    opacity: .86;

}


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

.contribution-main {

    min-width: 0;

    padding: 5px 5px 5px 0;

}


/* HEADING */

.contribution-heading {

    margin-bottom: 18px;

}


.contribution-heading h2 {

    margin: 0 0 3px;

    color: #173f3b;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 35px;

    line-height: 1.05;

    font-weight: 700;

}


.contribution-heading p {

    margin: 0;

    color: #536b6b;

    font-size: 15px;

    font-weight: 500;

}


/* =========================================
   AMOUNT CARDS
========================================= */

.amount-options {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;

}


/* CARD */

.amount-card {

    position: relative;

    min-height: 82px;

    padding: 13px 8px 9px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    background: #ffffff;

    border: 1px solid #eeeeeb;

    border-radius: 10px;

    box-shadow:
        0 4px 12px rgba(0,0,0,.055);

    cursor: pointer;

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

    color: #183e3d;

}


.amount-card:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0,0,0,.08);

}


.amount-card.active {

    border: 1.5px solid #dc6b87;

    background: #fff9fa;

    box-shadow:
        0 5px 16px rgba(183,13,42,.09);

}


/* AMOUNT */

.amount-card strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    line-height: 1;

    color: #244b4d;

}


.amount-card.active strong {

    color: #b20e2c;

}


/* DESCRIPTION */

.amount-card > span:not(.popular-label) {

    font-size: 12px;

    line-height: 1.25;

    text-align: center;

    color: #53676a;

}


/* POPULAR */

.popular-label {

    position: absolute;

    top: -7px;

    left: 50%;

    transform: translateX(-50%);

    white-space: nowrap;

    padding: 4px 9px;

    border-radius: 5px 5px 0 0;

    background: #b70d2a;

    color: #ffffff;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

}


/* =========================================
   CUSTOM AMOUNT
========================================= */

.custom-amount {

    width: min(270px, 100%);

    height: 37px;

    margin-top: 13px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 0 13px;

    background: #ffffff;

    border: 1px solid #e4e4e0;

    border-radius: 22px;

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

}


.custom-amount span {

    color: #31585a;

    font-size: 25px;

    font-weight: 700;

}


.custom-amount input {

    width: 100%;

    height: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: #274b4d;

    font-size: 12px;

}


.custom-amount input::placeholder {

    color: #8b9797;

}


/* Remove number arrows */

.custom-amount input::-webkit-outer-spin-button,
.custom-amount input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}


/* =========================================
   DONATE ACTION
========================================= */

.donation-action {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 15px;

}


/* BUTTON */

.contribution-donate-btn {

    width: 205px;

    height: 39px;

    padding: 0 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 28px;

    border: 0;

    border-radius: 22px;

    background:
        linear-gradient(
            90deg,
            #b40d2c,
            #c40f30
        );

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 15px rgba(183,13,42,.18);

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


.contribution-donate-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 20px rgba(183,13,42,.25);

}


.contribution-donate-btn .arrow {

    font-size: 20px;

    line-height: 1;

}


/* =========================================
   SECURE PAYMENT
========================================= */

.secure-payment {

    display: flex;

    align-items: center;

    gap: 6px;

    color: #243f40;

    white-space: nowrap;

}


.lock-icon {

    font-size: 18px;

}


.secure-payment strong {

    font-size: 15px;

    font-weight: 700;

}


/* NOTE */

.donation-note {

    margin: 7px 0 0;

    color: #5f7273;

    font-size: 12px;

}


/* =========================================
   RIGHT SIDE ART
========================================= */

.contribution-side-art {

    position: relative;

    min-height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* PAPER */

.paper-note {

    position: relative;

    width: 150px;

    min-height: 145px;

    padding: 24px 13px 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform:
        rotate(5deg);

    background:
        linear-gradient(
            135deg,
            #f8e4bd,
            #f1d5a4
        );

    color: #364a43;

    box-shadow:
        0 8px 18px rgba(75,57,30,.13);

}


/* PAPER TOP TAPE */

.paper-note::before {

    content: "";

    position: absolute;

    top: -8px;

    left: 50%;

    transform: translateX(-50%)
               rotate(-4deg);

    width: 37px;

    height: 25px;

    background: rgba(225,201,155,.7);

}


.paper-note span {

    font-family:
        "Brush Script MT",
        "Segoe Print",
        cursive;

    font-size: 25px;

    line-height: 1.05;

}


.paper-note b {

    margin-top: 9px;

    color: #b20d2d;

    font-family: cursive;

    font-size: 26px;

    font-weight: 400;

}


/* =========================================
   DECORATIVE LEAVES
========================================= */

.contribution-leaf {

    position: absolute;

    z-index: 1;

    width: 80px;

    height: 125px;

    opacity: .75;

    pointer-events: none;

}


.contribution-leaf::before,
.contribution-leaf::after {

    content: "";

    position: absolute;

    width: 34px;

    height: 70px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #87b83f,
            #3c7f37
        );

    transform-origin: bottom center;

}


.contribution-leaf::before {

    transform:
        rotate(-35deg);

    left: 20px;

    top: 30px;

}


.contribution-leaf::after {

    transform:
        rotate(35deg);

    left: 42px;

    top: 20px;

}


.contribution-leaf-left {

    left: -35px;

    bottom: -20px;

    transform: rotate(-20deg);

}


.contribution-leaf-right {

    right: -30px;

    top: -35px;

    transform: rotate(25deg);

}


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

@media (max-width: 1000px) {

    .contribution-wrapper {

        grid-template-columns:
            200px
            minmax(0, 1fr);

    }

    .contribution-side-art {

        display: none;

    }

}


@media (max-width: 760px) {

    .contribution-section {

        padding: 20px 14px;

    }

    .contribution-wrapper {

        grid-template-columns: 1fr;

        gap: 16px;

        padding: 13px;

    }

    .donation-sidebar {

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

    }

    .amount-options {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .donation-action {

        align-items: stretch;

        flex-direction: column;

        gap: 12px;

    }

    .contribution-donate-btn {

        width: 100%;

    }

    .secure-payment {

        justify-content: center;

    }

}


@media (max-width: 480px) {

    .contribution-section {

        padding: 10px;

    }

    .contribution-wrapper {

        border-radius: 14px;

    }

    .donation-sidebar {

        grid-template-columns: 1fr;

    }

    .contribution-heading h2 {

        font-size: 22px;

    }

    .amount-card {

        min-height: 78px;

    }

    .custom-amount {

        width: 100%;

    }

}


/* =========================================================
   PREMIUM 3D DONATION SECTION
========================================================= */

.contribution-3d{
    position:relative;
    width:100%;
    min-height:620px;

    padding:45px 0;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(7,91,85,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 70%,
            rgba(194,13,45,.045),
            transparent 28%
        ),
        #fbfaf6;

    perspective:1800px;
}


/* =========================================================
   WRAPPER
========================================================= */

.contribution-3d .contribution-wrapper{

    position:relative;

    width:min(
        1810px,
        calc(100% - 90px)
    );

    min-height:520px;

    margin:auto;

    padding:26px;

    display:grid;

    grid-template-columns:
        280px
        minmax(0,1fr)
        180px;

    gap:28px;

    align-items:center;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(250,249,244,.94)
        );

    border:1px solid rgba(30,70,67,.08);

    box-shadow:
        0 35px 80px rgba(28,54,52,.10),
        inset 0 1px 0 rgba(255,255,255,.9);

    transform-style:preserve-3d;
}


/* =========================================================
   BACKGROUND ORBS
========================================================= */

.donate-orb{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(1px);

    opacity:.45;

    animation:
        donateOrbFloat 8s ease-in-out infinite;
}

.orb-one{

    width:180px;
    height:180px;

    left:-70px;
    top:120px;

    background:
        radial-gradient(
            circle,
            rgba(7,91,85,.10),
            transparent 70%
        );
}

.orb-two{

    width:220px;
    height:220px;

    right:-80px;
    bottom:30px;

    background:
        radial-gradient(
            circle,
            rgba(194,13,45,.08),
            transparent 70%
        );

    animation-delay:-4s;
}


@keyframes donateOrbFloat{

    0%,100%{
        transform:translate3d(0,0,0);
    }

    50%{
        transform:translate3d(20px,-18px,0);
    }

}


/* =========================================================
   LEAVES
========================================================= */

.donate-leaf{

    position:absolute;

    width:25px;
    height:60px;

    background:#76a85f;

    border-radius:
        100% 0 100% 0;

    opacity:.75;

    pointer-events:none;

    animation:
        leafFloat 6s ease-in-out infinite;
}

.leaf-one{
    top:20px;
    right:35px;
    transform:rotate(28deg);
}

.leaf-two{
    bottom:20px;
    left:18px;
    transform:rotate(-38deg);
    animation-delay:-2s;
}

.leaf-three{
    top:90px;
    right:5px;
    width:18px;
    height:45px;
    animation-delay:-4s;
}

@keyframes leafFloat{

    0%,100%{
        transform:translateY(0) rotate(28deg);
    }

    50%{
        transform:translateY(-14px) rotate(38deg);
    }

}


/* =========================================================
   SIDEBAR 3D
========================================================= */

.donation-sidebar-3d{

    position:relative;

    z-index:5;

    padding:10px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8f8f4
        );

    box-shadow:
        0 20px 45px rgba(20,57,54,.10),
        inset 0 1px 0 #ffffff;

    transform:
        translateZ(30px);

    transform-style:preserve-3d;
}


/* =========================================================
   CATEGORY BUTTON
========================================================= */

.donation-category{

    position:relative;

    width:100%;

    min-height:76px;

    padding:10px 12px;

    display:flex;

    align-items:center;

    gap:12px;

    border:0;

    border-radius:15px;

    background:transparent;

    color:#173f3d;

    text-align:left;

    cursor:pointer;

    overflow:hidden;

    transform:
        translateZ(0);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        background .3s ease,
        box-shadow .3s ease;
}


.donation-category:hover{

    transform:
        translate3d(7px,-2px,12px);

    background:#fff;

    box-shadow:
        0 12px 25px rgba(25,60,57,.09);
}


.donation-category.active{

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #c80f31,
            #a90827
        );

    box-shadow:
        0 15px 30px rgba(169,8,39,.24);

    transform:
        translate3d(5px,-2px,18px);
}


.category-icon{

    width:40px;
    height:40px;

    flex-shrink:0;

    display:grid;
    place-items:center;

    font-size:24px;

    color:#075b55;

    transition:
        transform .35s ease;
}


.donation-category:hover .category-icon{

    transform:
        rotate(-8deg)
        scale(1.12);
}


.donation-category.active .category-icon{
    color:#fff;
}


.category-text{
    min-width:0;
}


.category-text strong{

    display:block;

    font-size:15px;

    line-height:1.1;

    font-weight:800;
}


.category-text small{

    display:block;

    margin-top:5px;

    color:#5d6868;

    font-size:11px;

    line-height:1.25;
}


.donation-category.active
.category-text small{
    color:rgba(255,255,255,.82);
}


.category-arrow{

    margin-left:auto;

    opacity:0;

    transform:translateX(-8px);

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


.donation-category:hover
.category-arrow,
.donation-category.active
.category-arrow{

    opacity:1;

    transform:translateX(0);
}


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

.contribution-main-3d{

    position:relative;

    z-index:4;

    transform:
        translateZ(45px);

    transform-style:preserve-3d;
}


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

.contribution-heading{

    margin-bottom:24px;
}


.heading-kicker{

    display:inline-block;

    margin-bottom:5px;

    font-size:9px;

    font-weight:800;

    letter-spacing:3px;

    color:#a90c28;
}


.contribution-heading h2{

    margin:0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:48px;

    line-height:.95;

    letter-spacing:-1.5px;

    color:#164c4a;
}


.contribution-heading p{

    margin-top:8px;

    color:#657476;

    font-size:14px;
}


/* =========================================================
   AMOUNT GRID
========================================================= */

.amount-options-3d{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:14px;

    perspective:1200px;
}


/* =========================================================
   AMOUNT CARD
========================================================= */

.amount-card-3d{

    position:relative;

    min-height:112px;

    padding:22px 12px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(32,70,67,.10);

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7f8f5
        );

    box-shadow:
        0 10px 20px rgba(24,61,57,.07);

    cursor:pointer;

    overflow:hidden;

    transform-style:preserve-3d;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .3s ease;
}


.amount-card-3d:hover{

    transform:
        translateY(-9px)
        rotateX(4deg)
        rotateY(-4deg)
        translateZ(18px);

    box-shadow:
        0 24px 40px rgba(22,64,60,.14);
}


.amount-card-3d.active{

    border-color:#d41b3c;

    background:
        linear-gradient(
            145deg,
            #fffafb,
            #fff5f7
        );

    box-shadow:
        0 20px 38px rgba(181,13,42,.13);

    transform:
        translateY(-4px)
        translateZ(22px);
}


.amount-card-3d strong{

    position:relative;

    z-index:3;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size:38px;

    line-height:1;

    color:#205856;

    transform:translateZ(20px);

    transition:
        transform .35s ease,
        color .3s ease;
}


.amount-card-3d.active strong{

    color:#c20d2d;

    transform:
        translateZ(30px)
        scale(1.05);
}


.amount-card-3d > span:not(.popular-label):not(.amount-light):not(.card-shine){

    position:relative;

    z-index:3;

    margin-top:8px;

    color:#667678;

    font-size:11px;

    line-height:1.35;

    text-align:center;

    transform:translateZ(14px);
}


/* =========================================================
   CARD LIGHT
========================================================= */

.amount-light{

    position:absolute;

    width:100px;
    height:100px;

    top:-45px;
    right:-40px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.9),
            transparent 68%
        );

    pointer-events:none;
}


/* =========================================================
   POPULAR BADGE
========================================================= */

.popular-label{

    position:absolute;

    z-index:10;

    top:-1px;

    left:50%;

    padding:6px 14px;

    border-radius:
        0 0 8px 8px;

    transform:
        translateX(-50%)
        translateZ(40px);

    background:
        linear-gradient(
            135deg,
            #c80d2f,
            #a50724
        );

    color:#fff;

    font-size:10px;

    font-weight:800;

    box-shadow:
        0 8px 18px rgba(166,8,36,.22);
}


/* =========================================================
   CARD SHINE
========================================================= */

.card-shine{

    position:absolute;

    top:-100%;

    left:-50%;

    width:40%;

    height:300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform:rotate(25deg);

    opacity:0;

    pointer-events:none;
}


.amount-card-3d:hover .card-shine{

    opacity:1;

    animation:
        cardShine 1s ease;
}


@keyframes cardShine{

    from{
        left:-60%;
    }

    to{
        left:140%;
    }

}


/* =========================================================
   CUSTOM AMOUNT
========================================================= */

.custom-amount-3d{

    position:relative;

    width:340px;

    height:48px;

    margin-top:16px;

    display:flex;

    align-items:center;

    padding:0 15px;

    border-radius:25px;

    background:#fff;

    border:1px solid rgba(25,65,61,.10);

    box-shadow:
        0 10px 25px rgba(25,61,58,.07);

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


.custom-amount-3d:focus-within{

    transform:
        translateY(-3px);

    border-color:#c20d2d;

    box-shadow:
        0 15px 30px rgba(194,13,45,.12);
}


.custom-amount-3d > span:first-child{

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:25px;

    font-weight:700;

    color:#27615e;
}


.custom-amount-3d input{

    flex:1;

    height:100%;

    border:0;

    outline:0;

    padding:0 10px;

    background:transparent;

    font-family:inherit;

    font-size:13px;

    color:#234d4b;
}


.custom-amount-3d input::placeholder{
    color:#9aa4a4;
}


.input-arrow{

    color:#b40e2b;

    font-size:20px;

    transform:
        rotate(45deg);
}


/* =========================================================
   DONATION ACTION
========================================================= */

.donation-action-3d{

    margin-top:18px;

    display:flex;

    align-items:center;

    gap:28px;
}


/* =========================================================
   DONATE BUTTON
========================================================= */

.contribution-donate-btn{

    position:relative;

    width:255px;

    height:50px;

    border:0;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px 0 26px;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #ca0f31,
            #a20725
        );

    font-size:15px;

    font-weight:800;

    cursor:pointer;

    overflow:hidden;

    box-shadow:
        0 15px 30px rgba(174,10,40,.23);

    transform-style:preserve-3d;

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


.contribution-donate-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 25%,
            rgba(255,255,255,.25),
            transparent 65%
        );

    transform:
        translateX(-120%);

    transition:
        transform .6s ease;
}


.contribution-donate-btn:hover::before{
    transform:translateX(120%);
}


.contribution-donate-btn:hover{

    transform:
        translateY(-5px)
        translateZ(15px);

    box-shadow:
        0 22px 42px rgba(174,10,40,.30);
}


.contribution-donate-btn:active{

    transform:
        translateY(1px)
        scale(.98);
}


.contribution-donate-btn .arrow{

    font-size:24px;

    transition:
        transform .3s ease;
}


.contribution-donate-btn:hover .arrow{

    transform:
        translateX(8px);
}


/* =========================================================
   SECURE PAYMENT
========================================================= */

.secure-payment{

    display:flex;

    align-items:center;

    gap:9px;

    color:#294d4d;

    font-size:14px;
}


.lock-icon{

    width:32px;
    height:32px;

    display:grid;
    place-items:center;

    border-radius:9px;

    background:#fff4ce;

    box-shadow:
        0 7px 15px rgba(100,80,20,.10);
}


/* =========================================================
   NOTE
========================================================= */

.donation-note{

    margin-top:10px;

    color:#728080;

    font-size:11px;
}


/* =========================================================
   RIGHT PAPER
========================================================= */

.contribution-side-art-3d{

    position:relative;

    min-height:250px;

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:800px;
}


.paper-note-3d{

    position:relative;

    width:145px;

    min-height:210px;

    padding:42px 20px 25px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#234d4c;

    font-family:
        "Caveat",
        cursive;

    font-size:27px;

    line-height:.92;

    background:
        linear-gradient(
            145deg,
            #ffe5ad,
            #f8d99d
        );

    clip-path:
        polygon(
            5% 2%,
            96% 8%,
            92% 97%,
            4% 93%,
            0 15%
        );

    box-shadow:
        20px 30px 45px rgba(45,40,27,.15);

    transform:
        rotate(4deg)
        translateZ(35px);

    transform-style:preserve-3d;

    animation:
        paperFloat 5s ease-in-out infinite;

    transition:
        transform .5s ease;
}


.paper-note-3d::before{

    content:"";

    position:absolute;

    top:-10px;

    width:45px;
    height:25px;

    background:rgba(205,180,130,.4);

    transform:rotate(-2deg);
}


.paper-note-3d:hover{

    transform:
        rotate(-2deg)
        translateY(-10px)
        rotateX(5deg)
        rotateY(-8deg)
        translateZ(70px);
}


.paper-note-3d b{

    margin-top:25px;

    font-family:Arial,sans-serif;

    font-size:27px;

    color:#c20d2d;

    font-weight:400;

    animation:
        heartBeat 2s ease-in-out infinite;
}


@keyframes paperFloat{

    0%,100%{
        transform:
            rotate(4deg)
            translateY(0)
            translateZ(35px);
    }

    50%{
        transform:
            rotate(1deg)
            translateY(-12px)
            translateZ(55px);
    }

}


@keyframes heartBeat{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.18);
    }

}


/* =========================================================
   PAPER SHADOW
========================================================= */

.paper-shadow{

    position:absolute;

    width:110px;
    height:30px;

    bottom:35px;

    border-radius:50%;

    background:
        rgba(30,50,45,.13);

    filter:blur(12px);

    animation:
        paperShadow 5s ease-in-out infinite;
}


@keyframes paperShadow{

    0%,100%{
        transform:scale(1);
        opacity:.35;
    }

    50%{
        transform:scale(.78);
        opacity:.18;
    }

}


/* =========================================================
   MOUSE TILT SUPPORT
========================================================= */

.amount-card-3d{
    will-change:transform;
}


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

@media(max-width:1200px){

    .contribution-3d
    .contribution-wrapper{

        grid-template-columns:
            240px
            minmax(0,1fr);

    }

    .contribution-side-art-3d{
        display:none;
    }

}


@media(max-width:850px){

    .contribution-3d{
        padding:30px 0;
    }

    .contribution-3d
    .contribution-wrapper{

        width:calc(100% - 30px);

        grid-template-columns:1fr;

        gap:22px;

        padding:20px;

    }

    .donation-sidebar-3d{

        display:grid;

        grid-template-columns:
            repeat(2,1fr);

        gap:8px;

    }

    .donation-category{

        min-height:70px;
    }

    .amount-options-3d{

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

}


@media(max-width:600px){

    .contribution-3d
    .contribution-wrapper{

        width:calc(100% - 18px);

        padding:14px;

        border-radius:20px;
    }

    .donation-sidebar-3d{

        grid-template-columns:1fr;
    }

    .contribution-heading h2{

        font-size:38px;
    }

    .amount-options-3d{

        grid-template-columns:1fr 1fr;

        gap:9px;
    }

    .amount-card-3d{

        min-height:105px;
    }

    .amount-card-3d strong{

        font-size:30px;
    }

    .custom-amount-3d{

        width:100%;
    }

    .donation-action-3d{

        flex-direction:column;

        align-items:flex-start;

        gap:14px;
    }

    .contribution-donate-btn{

        width:100%;
    }

}


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

    .contribution-3d *,
    .contribution-3d *::before,
    .contribution-3d *::after{

        animation:none !important;

        transition:none !important;
    }

}


/* =========================================================
   STORIES OF HOPE
   3D COVERFLOW / DEPTH CAROUSEL
========================================================= */

.hope-section{
    position:relative;
    width:100%;
    padding:60px 0 65px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,.95),
            rgba(248,246,238,.96) 65%,
            #f3f1e8 100%
        );

    perspective:1800px;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.hope-container{
    width:min(1780px, calc(100% - 100px));
    margin:auto;
    position:relative;
    z-index:5;
}


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

.hope-header{
    position:relative;
    margin-bottom:28px;
}


.hope-eyebrow{
    display:block;

    color:#667572;

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

    letter-spacing:2px;

    margin-bottom:5px;
}


.hope-header h2{
    margin:0;

    color:#164743;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(38px,4vw,58px);

    line-height:.95;

    letter-spacing:-2px;
}


.hope-header p{
    margin:8px 0 0;

    color:#344f50;

    font-size:14px;
}


/* =========================================================
   3D STAGE
========================================================= */

.hope-slider-wrap{

    position:relative;

    width:100%;

    height:375px;

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:1800px;

    transform-style:preserve-3d;
}


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

.hope-slider{

    position:relative;

    width:100%;

    height:100%;

    overflow:visible;

    perspective:1800px;

    transform-style:preserve-3d;
}


/* =========================================================
   TRACK
========================================================= */

.hope-track{

    position:relative;

    width:100%;

    height:100%;

    display:block;

    transform-style:preserve-3d;

    transition:
        transform .9s
        cubic-bezier(.16,1,.3,1);
}


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

.hope-card{

    position:absolute;

    top:18px;

    left:50%;

    width:365px;

    height:315px;

    transform-style:preserve-3d;

    transform:
        translateX(-50%)
        translateZ(-350px)
        rotateY(0deg)
        scale(.72);

    opacity:0;

    pointer-events:none;

    transition:
        transform .85s
        cubic-bezier(.16,1,.3,1),
        opacity .65s ease,
        filter .65s ease;

    filter:
        blur(1px)
        saturate(.72);

    will-change:
        transform,
        opacity;
}


/* =========================================================
   CENTER CARD
========================================================= */

.hope-card.is-center{

    transform:
        translateX(-50%)
        translateZ(100px)
        rotateY(0deg)
        scale(1);

    opacity:1;

    z-index:20;

    pointer-events:auto;

    filter:
        blur(0)
        saturate(1);

}


/* =========================================================
   LEFT 1
========================================================= */

.hope-card.is-left{

    transform:
        translateX(
            calc(-50% - 330px)
        )
        translateZ(-180px)
        rotateY(30deg)
        scale(.82);

    opacity:.88;

    z-index:12;

    pointer-events:auto;

    filter:
        blur(.3px)
        saturate(.82);
}


/* =========================================================
   RIGHT 1
========================================================= */

.hope-card.is-right{

    transform:
        translateX(
            calc(-50% + 330px)
        )
        translateZ(-180px)
        rotateY(-30deg)
        scale(.82);

    opacity:.88;

    z-index:12;

    pointer-events:auto;

    filter:
        blur(.3px)
        saturate(.82);
}


/* =========================================================
   FAR LEFT
========================================================= */

.hope-card.is-far-left{

    transform:
        translateX(
            calc(-50% - 590px)
        )
        translateZ(-400px)
        rotateY(48deg)
        scale(.65);

    opacity:.38;

    z-index:5;

    pointer-events:none;

    filter:
        blur(1px)
        saturate(.55);
}


/* =========================================================
   FAR RIGHT
========================================================= */

.hope-card.is-far-right{

    transform:
        translateX(
            calc(-50% + 590px)
        )
        translateZ(-400px)
        rotateY(-48deg)
        scale(.65);

    opacity:.38;

    z-index:5;

    pointer-events:none;

    filter:
        blur(1px)
        saturate(.55);
}


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

.hope-card-image{

    position:absolute;

    left:0;
    top:0;

    width:100%;

    height:255px;

    overflow:hidden;

    border-radius:20px;

    background:#dce2dd;

    box-shadow:
        0 25px 50px
        rgba(26,56,52,.20);

    transform:
        translateZ(20px);

    transform-style:preserve-3d;
}


.hope-card-image img{

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform 1s
        cubic-bezier(.16,1,.3,1),
        filter .8s ease;
}


/* CENTER IMAGE ZOOM */

.hope-card.is-center
.hope-card-image img{

    transform:
        scale(1.04);
}


/* HOVER */

.hope-card.is-center:hover
.hope-card-image img{

    transform:
        scale(1.09);
}


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

.hope-image-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(0,30,28,.12)
        );

    pointer-events:none;
}


/* =========================================================
   FLOATING QUOTE
========================================================= */

.hope-quote{

    position:absolute;

    left:12%;

    right:5%;

    bottom:0;

    min-height:105px;

    padding:
        25px
        20px
        14px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(248,248,244,.98)
        );

    border:
        1px solid
        rgba(23,71,67,.09);

    border-radius:
        8px
        8px
        18px
        18px;

    box-shadow:
        0 20px 38px
        rgba(26,57,53,.18);

    transform:
        translateZ(55px);

    transform-style:preserve-3d;

    transition:
        transform .7s
        cubic-bezier(.16,1,.3,1),
        box-shadow .5s ease;
}


/* CENTER QUOTE */

.hope-card.is-center
.hope-quote{

    transform:
        translateZ(80px)
        translateY(0);

    box-shadow:
        0 25px 45px
        rgba(24,55,51,.20);
}


/* SIDE QUOTE */

.hope-card.is-left
.hope-quote,
.hope-card.is-right
.hope-quote{

    transform:
        translateZ(35px)
        translateY(3px);

}


/* =========================================================
   QUOTE MARK
========================================================= */

.quote-mark{

    position:absolute;

    top:5px;

    right:15px;

    font-family:Georgia,serif;

    font-size:32px;

    line-height:1;

    color:#c20d2d;
}


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

.hope-quote p{

    margin:0;

    color:#304b4a;

    font-size:13px;

    line-height:1.4;

    font-weight:600;
}


.hope-quote small{

    margin-top:7px;

    color:#697977;

    font-size:9px;

    font-weight:600;
}


/* =========================================================
   ARROWS
========================================================= */

.hope-arrow{

    position:absolute;

    top:50%;

    z-index:50;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    display:grid;

    place-items:center;

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

    color:#c20d2d;

    font-size:24px;

    cursor:pointer;

    box-shadow:
        0 12px 30px
        rgba(25,55,52,.15);

    transform:
        translateY(-50%)
        translateZ(100px);

    transition:
        .3s ease;
}


.hope-arrow:hover{

    background:#c20d2d;

    color:white;

    transform:
        translateY(-50%)
        scale(1.12)
        translateZ(130px);

    box-shadow:
        0 18px 35px
        rgba(194,13,45,.28);
}


.hope-prev{

    left:-5px;
}


.hope-next{

    right:-5px;
}


/* =========================================================
   DOTS
========================================================= */

.hope-dots{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:4px;
}


.hope-dot{

    width:7px;

    height:7px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#c7d2cf;

    cursor:pointer;

    transition:
        .35s ease;
}


.hope-dot.active{

    width:27px;

    border-radius:20px;

    background:#c20d2d;

    box-shadow:
        0 4px 10px
        rgba(194,13,45,.22);
}


/* =========================================================
   DECORATIVE LEAVES
========================================================= */

.hope-leaf{

    position:absolute;

    width:48px;

    height:105px;

    z-index:1;

    opacity:.45;

    pointer-events:none;

    border-radius:
        100%
        0
        100%
        0;

    background:
        linear-gradient(
            145deg,
            #8db96c,
            #5d945d
        );

    animation:
        hopeLeafMove
        7s
        ease-in-out
        infinite;
}


.hope-leaf-left{

    left:-18px;

    bottom:25px;

    transform:rotate(-32deg);
}


.hope-leaf-right{

    right:-12px;

    top:20px;

    transform:rotate(38deg);

    animation-delay:-3s;
}


@keyframes hopeLeafMove{

    0%,
    100%{
        transform:
            rotate(-32deg)
            translateY(0);
    }

    50%{
        transform:
            rotate(-25deg)
            translateY(-12px);
    }
}


/* =========================================================
   CENTER CARD SHINE
========================================================= */

.hope-card.is-center::after{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:60%;
    height:255px;

    background:
        linear-gradient(
            100deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform:
        skewX(-18deg)
        translateZ(100px);

    pointer-events:none;

    animation:
        hopeShine
        5s
        ease-in-out
        infinite;
}


@keyframes hopeShine{

    0%{
        left:-100%;
    }

    35%,
    100%{
        left:140%;
    }
}


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

@media(max-width:1200px){

    .hope-container{

        width:
            calc(100% - 70px);
    }


    .hope-card{

        width:320px;
    }


    .hope-card.is-left{

        transform:
            translateX(
                calc(-50% - 270px)
            )
            translateZ(-180px)
            rotateY(28deg)
            scale(.78);
    }


    .hope-card.is-right{

        transform:
            translateX(
                calc(-50% + 270px)
            )
            translateZ(-180px)
            rotateY(-28deg)
            scale(.78);
    }


    .hope-card.is-far-left,
    .hope-card.is-far-right{

        opacity:.12;
    }

}


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

@media(max-width:700px){

    .hope-section{

        padding:
            42px
            0
            50px;
    }


    .hope-container{

        width:
            calc(100% - 30px);
    }


    .hope-header{

        margin-bottom:15px;
    }


    .hope-header h2{

        font-size:38px;

        letter-spacing:-1.2px;
    }


    .hope-header p{

        font-size:12px;

        max-width:330px;
    }


    .hope-slider-wrap{

        height:355px;
    }


    .hope-card{

        width:
            min(
                340px,
                calc(100vw - 60px)
            );

        height:300px;
    }


    .hope-card.is-center{

        transform:
            translateX(-50%)
            translateZ(80px)
            scale(1);
    }


    .hope-card.is-left{

        transform:
            translateX(
                calc(-50% - 150px)
            )
            translateZ(-160px)
            rotateY(35deg)
            scale(.65);

        opacity:.35;
    }


    .hope-card.is-right{

        transform:
            translateX(
                calc(-50% + 150px)
            )
            translateZ(-160px)
            rotateY(-35deg)
            scale(.65);

        opacity:.35;
    }


    .hope-card.is-far-left,
    .hope-card.is-far-right{

        opacity:0;
    }


    .hope-card-image{

        height:245px;
    }


    .hope-quote{

        left:10%;

        min-height:105px;

        padding:
            23px
            16px
            13px;
    }


    .hope-quote p{

        font-size:12px;
    }


    .hope-arrow{

        width:38px;

        height:38px;

        font-size:19px;
    }


    .hope-prev{

        left:-5px;
    }


    .hope-next{

        right:-5px;
    }

}


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

@media(max-width:390px){

    .hope-header h2{

        font-size:34px;
    }


    .hope-slider-wrap{

        height:335px;
    }


    .hope-card{

        width:
            calc(100vw - 55px);
    }

}


/* =========================================================
   CECT CONTACT HERO
========================================================= */

.cect-contact-hero {

    position: relative;

    width: 100%;

    min-height: 650px;

    height: min(760px, 46vw);

    overflow: hidden;

    background: #f8f4e9;

    isolation: isolate;

    perspective: 1400px;

}


/* =========================================================
   MAIN 3D SCENE
========================================================= */

.contact-3d-scene {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    transform-style: preserve-3d;

    pointer-events: none;

}


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

.contact-main-art {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    display: block;

    transform:

        translate3d(
            var(--mouse-x, 0px),
            var(--mouse-y, 0px),
            0
        )

        scale(1.025);

    transition:
        transform 0.25s cubic-bezier(.2,.8,.2,1);

    will-change: transform;

}


/* =========================================================
   SOFT OVERLAY
========================================================= */

.cect-contact-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(255,255,255,.04) 0%,
            rgba(255,255,255,0) 45%,
            rgba(255,255,255,.03) 100%
        );

}


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

.cect-contact-content {

    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;

    transform-style: preserve-3d;

}


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

.contact-left-content {

    position: absolute;

    left: 5.3%;

    top: 9%;

    width: 35%;

    max-width: 450px;

    pointer-events: auto;

    transform:
        translate3d(
            calc(var(--content-x, 0px)),
            calc(var(--content-y, 0px)),
            30px
        );

    transition:
        transform .3s ease;

}


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

.contact-mini-title {

    display: inline-block;

    margin-bottom: 14px;

    font-family: Arial, sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #174f50;

}


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

.contact-left-content h1 {

    margin: 0;

    padding: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(55px, 5vw, 82px);

    line-height: .88;

    letter-spacing: -3px;

    font-weight: 700;

    color: #064c4e;

    text-shadow:
        0 5px 15px rgba(0,0,0,.05);

}


.contact-left-content h1 span {

    color: #bd0f2e;

}


.contact-left-content h1 strong {

    color: #bd0f2e;

    font-weight: 700;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.contact-left-content p {

    width: 90%;

    margin:

        22px 0 0;

    font-family:
        Arial,
        sans-serif;

    font-size: 16px;

    line-height: 1.38;

    color: #294e52;

}


/* =========================================================
   ACTION ROW
========================================================= */

.contact-action-row {

    display: flex;

    align-items: stretch;

    margin-top: 25px;

    width: 100%;

}


/* =========================================================
   ACTION CARD
========================================================= */

.contact-action-card {

    position: relative;

    width: 33.333%;

    min-height: 78px;

    padding: 8px 10px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-decoration: none;

    border-right: 1px solid rgba(26,74,76,.12);

    transition:

        transform .35s cubic-bezier(.2,.8,.2,1),

        filter .35s ease;

}


.contact-action-card:last-child {

    border-right: 0;

}


/* 3D hover */

.contact-action-card:hover {

    transform:

        translateY(-8px)
        rotateX(7deg)
        rotateY(-3deg);

    filter:

        drop-shadow(
            0 12px 15px rgba(0,0,0,.12)
        );

}


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

.action-icon {

    width: 43px;

    height: 43px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 7px;

    font-size: 17px;

    box-shadow:

        0 8px 18px rgba(0,0,0,.08);

}


.talk-icon {

    color: #b5102c;

    background: #fff0f1;

}


.partner-icon {

    color: #075d5b;

    background: #e8f4f0;

}


.support-icon {

    color: #e94d2f;

    background: #fff1df;

}


/* =========================================================
   ACTION TEXT
========================================================= */

.action-text {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    font-family: Arial, sans-serif;

    color: #164c4d;

}


.action-text strong {

    font-size: 13px;

    font-weight: 700;

}


.action-text span {

    font-size: 13px;

    font-weight: 600;

    margin-top: 1px;

}


/* =========================================================
   HANDWRITTEN TEXT
========================================================= */

.contact-handwriting {

    position: absolute;

    left: 32.5%;

    bottom: 9%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    font-family:

        "Comic Sans MS",
        cursive;

    font-size: 24px;

    line-height: 1.05;

    color: #24545a;

    transform:

        rotate(-5deg)
        translateZ(60px);

    pointer-events: none;

}


.contact-handwriting span:nth-child(2) {

    margin-left: 10px;

}


.contact-handwriting span:nth-child(3) {

    margin-left: 16px;

}


.contact-handwriting b {

    margin-left: 55px;

    margin-top: 2px;

    font-size: 38px;

    line-height: .8;

    color: #c71936;

    font-weight: 400;

}


/* =========================================================
   RIGHT HOTSPOTS
========================================================= */

.contact-hotspots {

    position: absolute;

    right: 7%;

    bottom: 9%;

    width: 22%;

    display: flex;

    flex-direction: column;

    gap: 12px;

    pointer-events: auto;

    transform:

        translate3d(
            var(--hotspot-x, 0px),
            var(--hotspot-y, 0px),
            80px
        );

    transition:

        transform .3s ease;

}


/* =========================================================
   HOTSPOT
========================================================= */

.hotspot {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 4px 10px;

    border-radius: 12px;

    transition:

        transform .3s ease,

        background .3s ease;

}


.hotspot:hover {

    transform:

        translateX(-8px)
        translateZ(30px);

    background:

        rgba(255,255,255,.35);

    backdrop-filter: blur(5px);

}


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

.hotspot-icon {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #075b5b;

    font-size: 18px;

}


.hotspot strong {

    display: block;

    font-family: Arial, sans-serif;

    font-size: 14px;

    font-weight: 800;

    color: #164d4f;

}


/* =========================================================
   3D LIGHT
========================================================= */

.contact-light {

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    left: 47%;

    top: 25%;

    z-index: 3;

    pointer-events: none;

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.20) 0%,
            rgba(255,255,255,0) 70%
        );

    transform:

        translate3d(
            var(--light-x, 0px),
            var(--light-y, 0px),
            100px
        );

    filter: blur(5px);

    transition:

        transform .5s ease;

}


/* =========================================================
   FLOATING LEAVES
========================================================= */

.floating-leaf {

    position: absolute;

    z-index: 6;

    width: 28px;

    height: 52px;

    border-radius:

        100% 0 100% 0;

    background:

        linear-gradient(
            135deg,
            #8dbf34,
            #3c8d3d
        );

    opacity: .7;

    filter:

        drop-shadow(
            0 7px 8px rgba(0,0,0,.08)
        );

    animation:

        floatingLeaf 5s ease-in-out infinite;

}


.leaf-one {

    left: 25%;

    top: 13%;

    transform: rotate(35deg);

}


.leaf-two {

    left: 42%;

    top: 4%;

    transform: rotate(-25deg);

    animation-delay: -1s;

}


.leaf-three {

    right: 8%;

    top: 8%;

    transform: rotate(45deg);

    animation-delay: -2s;

}


.leaf-four {

    left: 38%;

    bottom: 4%;

    transform: rotate(-35deg);

    animation-delay: -3s;

}


@keyframes floatingLeaf {

    0%,
    100% {

        margin-top: 0;

    }

    50% {

        margin-top: -12px;

    }

}


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

@media (max-width: 900px) {

    .cect-contact-hero {

        height: auto;

        min-height: 760px;

    }


    .contact-main-art {

        object-position: 60% center;

        opacity: .65;

    }


    .contact-left-content {

        left: 7%;

        top: 8%;

        width: 55%;

    }


    .contact-left-content h1 {

        font-size: clamp(
            46px,
            8vw,
            68px
        );

    }


    .contact-left-content p {

        font-size: 14px;

    }


    .contact-hotspots {

        right: 5%;

        bottom: 10%;

        width: 25%;

    }


    .contact-handwriting {

        left: 43%;

        bottom: 5%;

    }

}


@media (max-width: 650px) {

    .cect-contact-hero {

        min-height: 850px;

        height: auto;

    }


    .contact-main-art {

        width: 150%;

        max-width: none;

        left: -28%;

        object-fit: cover;

        object-position: center;

        opacity: .35;

    }


    .contact-left-content {

        position: relative;

        left: auto;

        top: auto;

        width: 88%;

        max-width: none;

        padding-top: 55px;

        margin-left: 7%;

    }


    .contact-mini-title {

        font-size: 10px;

        letter-spacing: 4px;

    }


    .contact-left-content h1 {

        font-size: 55px;

        line-height: .9;

    }


    .contact-left-content p {

        width: 100%;

        font-size: 14px;

        line-height: 1.5;

    }


    .contact-action-row {

        margin-top: 22px;

    }


    .contact-action-card {

        min-height: 70px;

        padding: 5px;

    }


    .action-icon {

        width: 38px;

        height: 38px;

        font-size: 14px;

    }


    .action-text strong,
    .action-text span {

        font-size: 11px;

    }


    .contact-hotspots {

        right: 7%;

        bottom: 8%;

        width: 82%;

        gap: 5px;

    }


    .hotspot {

        width: max-content;

        padding: 3px 8px;

        background:

            rgba(255,255,255,.55);

        backdrop-filter: blur(7px);

    }


    .hotspot strong {

        font-size: 11px;

    }


    .contact-handwriting {

        display: none;

    }


    .floating-leaf {

        display: none;

    }

}


/* =========================================================
   CONTACT SECTION
========================================================= */

.cect-contact-section {

    width: 100%;

    min-height: 680px;

    padding: 18px 3.2% 24px;

    background:
        linear-gradient(
            135deg,
            #fbfaf5 0%,
            #f4f1e8 100%
        );

    position: relative;

    overflow: hidden;

}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.cect-contact-section::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    left: -170px;

    bottom: -130px;

    border-radius: 50%;

    background: rgba(126, 177, 91, .16);

    filter: blur(3px);

}


.cect-contact-section::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    right: -150px;

    top: -120px;

    border-radius: 50%;

    background: rgba(126, 177, 91, .12);

}


/* =========================================================
   MAIN GRID
========================================================= */

.cect-contact-wrapper {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1500px;

    margin: auto;

    display: grid;

    grid-template-columns:
        0.88fr
        1.32fr
        0.95fr;

    gap: 18px;

    align-items: stretch;

}


/* =========================================================
   COMMON PANEL
========================================================= */

.contact-info-panel,
.contact-form-panel,
.contact-location-panel {

    border-radius: 18px;

    overflow: hidden;

    min-height: 630px;

}


/* =========================================================
   LEFT PANEL
========================================================= */

.contact-info-panel {

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.82),
            rgba(246,243,235,.92)
        );

    border: 1px solid rgba(30,75,75,.08);

    box-shadow:

        0 15px 40px rgba(31,66,63,.08);

    padding: 24px 20px 17px;

    display: flex;

    flex-direction: column;

}


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

.contact-info-header h2 {

    margin: 0;

    color: #164e4e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    line-height: 1;

}


.contact-info-header p {

    margin: 6px 0 18px;

    font-family: Arial, sans-serif;

    font-size: 14px;

    color: #4d6869;

}


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

.contact-info-item {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 0;

    text-decoration: none;

    border-bottom:
        1px solid rgba(30,75,75,.10);

    transition:
        transform .3s ease;

}


.contact-info-item:hover {

    transform: translateX(5px);

}


.address-item {

    align-items: flex-start;

}


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

.contact-round-icon {

    flex: 0 0 55px;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

    border: 5px solid #fff;

    box-shadow:

        0 7px 18px rgba(0,0,0,.10);

}


.contact-round-icon.phone {

    color: white;

    background: #b70e2d;

}


.contact-round-icon.email {

    color: white;

    background: #075d58;

}


.contact-round-icon.location {

    color: white;

    background: #ed850d;

}


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

.contact-info-text {

    display: flex;

    flex-direction: column;

}


.contact-info-text h3 {

    margin: 0 0 4px;

    font-family: Arial, sans-serif;

    font-size: 16px;

    color: #164c4e;

}


.contact-info-text strong {

    display: block;

    font-family: Arial, sans-serif;

    font-size: 15px;

    color: #1d4850;

    line-height: 1.45;

}


.contact-info-text span {

    margin-top: 3px;

    font-family: Arial, sans-serif;

    font-size: 15px;

    line-height: 1.4;

    color: #607374;

}


.address-text {

    font-size: 15px !important;

    line-height: 1.55 !important;

}


/* =========================================================
   SOCIAL
========================================================= */

.contact-social {

    margin-top: auto;

    padding-top: 13px;

    display: flex;

    align-items: center;

    gap: 11px;

}


.contact-social > span {

    font-family: Arial, sans-serif;

    font-weight: 700;

    font-size: 15px;

    color: #214f53;

    margin-right: 3px;

}


.contact-social a {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: white;

    background: #164e4e;

    font-size: 15px;

    transition:

        transform .3s ease,

        background .3s ease;

}


.contact-social a:hover {

    transform:
        translateY(-4px)
        scale(1.1);

    background: #b70e2d;

}


/* =========================================================
   CENTER FORM
========================================================= */

.contact-form-panel {

    padding: 27px 24px 20px;

    background:

        radial-gradient(
            circle at 80% 10%,
            rgba(40,120,111,.55),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            #075d58,
            #034846
        );

    box-shadow:

        0 18px 45px rgba(0,60,57,.20);

    color: white;

}


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

.contact-form-heading > span {

    font-family: Arial, sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 4px;

    color: #dcebe6;

}


.contact-form-heading h2 {

    margin: 5px 0 5px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;

    line-height: 1.05;

    color: #fff;

}


.contact-form-heading p {

    margin: 0 0 17px;

    max-width: 440px;

    font-family: Arial, sans-serif;

    font-size: 14px;

    line-height: 1.45;

    color: rgba(255,255,255,.76);

}


/* =========================================================
   FORM ROW
========================================================= */

.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}


/* =========================================================
   INPUT
========================================================= */

.input-box,
.message-box {

    position: relative;

    width: 100%;

    margin-bottom: 9px;

}


.input-box i,
.message-box > i {

    position: absolute;

    left: 13px;

    top: 50%;

    transform: translateY(-50%);

    color: #174d53;

    font-size: 14px;

    z-index: 2;

}


.input-box input,
.input-box select,
.message-box textarea {

    width: 100%;

    border: none;

    outline: none;

    background: #fff;

    color: #29484d;

    font-family: Arial, sans-serif;

    border-radius: 8px;

    box-sizing: border-box;

    transition:

        box-shadow .25s ease,

        transform .25s ease;

}


.input-box input,
.input-box select {

    height: 35px;

    padding:
        0 12px 0 36px;

    font-size: 13px;

}


.input-box input:focus,
.input-box select:focus,
.message-box textarea:focus {

    box-shadow:
        0 0 0 3px rgba(255,255,255,.20);

    transform: translateY(-1px);

}


.input-box.full {

    width: 100%;

}


/* =========================================================
   SELECT
========================================================= */

.select-box select {

    appearance: none;

    cursor: pointer;

}


.select-box .select-arrow {

    left: auto;

    right: 13px;

    color: #174d53;

    pointer-events: none;

}


/* =========================================================
   MESSAGE
========================================================= */

.message-box {

    height: 85px;

}


.message-box > i {

    top: 16px;

    transform: none;

}


.message-box textarea {

    height: 85px;

    resize: none;

    padding:
        11px 12px 10px 36px;

    font-size: 15px;

    line-height: 1.5;

}


/* =========================================================
   SEND BUTTON
========================================================= */

.send-message-btn {

    width: 60%;

    min-width: 240px;

    height: 40px;

    margin: 7px auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    border: 1px solid rgba(255,255,255,.45);

    border-radius: 25px;

    cursor: pointer;

    color: white;

    background:

        linear-gradient(
            90deg,
            #c30c2f,
            #a60728
        );

    box-shadow:

        0 8px 20px rgba(180,0,35,.28);

    transition:

        transform .3s ease,

        box-shadow .3s ease;

}


.send-message-btn:hover {

    transform:
        translateY(-4px)
        scale(1.02);

    box-shadow:

        0 14px 27px rgba(180,0,35,.36);

}


.send-message-btn strong {

    font-family: Arial, sans-serif;

    font-size: 14px;

}


.send-message-btn i {

    font-size: 14px;

}


.send-arrow {

    font-size: 17px;

}


/* =========================================================
   PRIVACY
========================================================= */

.privacy-note {

    margin-top: 12px;

    text-align: center;

    font-family: Arial, sans-serif;

    font-size: 12px;

    color: rgba(255,255,255,.75);

}


.privacy-note i {

    margin-right: 5px;

}


/* =========================================================
   RIGHT LOCATION
========================================================= */

.contact-location-panel {

    background:

        linear-gradient(
            145deg,
            #fffdf8,
            #f2efe5
        );

    padding: 21px 13px 13px;

    border: 1px solid rgba(30,75,75,.07);

    box-shadow:

        0 15px 40px rgba(31,66,63,.08);

    display: flex;

    flex-direction: column;

}


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

.location-heading {

    padding:
        0 7px 11px;

}


.location-heading h2 {

    margin: 0 0 5px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 24px;

    color: #164e4e;

}


.location-heading p {

    margin: 0;

    font-family: Arial, sans-serif;

    font-size: 12px;

    line-height: 1.4;

    color: #536c6d;

    max-width: 270px;

}


/* =========================================================
   GOOGLE MAP
========================================================= */

.google-map-wrapper {

    position: relative;

    width: 100%;

    flex: 1;

    min-height: 440px;

    overflow: hidden;

    border-radius: 12px;

    background: #dfe7df;

    box-shadow:

        0 10px 24px rgba(0,0,0,.10);

}


/* MAP */

.google-map-wrapper iframe {

    width: 100%;

    height: 100%;

    min-height: 440px;

    border: 0;

    display: block;

    filter: saturate(.92);

}


/* =========================================================
   MAP LABEL
========================================================= */

.map-location-label {

    position: absolute;

    top: 14px;

    left: 14px;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 8px 11px;

    border-radius: 8px;

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

    box-shadow:

        0 7px 18px rgba(0,0,0,.14);

    font-family: Arial, sans-serif;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.25;

    color: #174d50;

}


.map-pin {

    width: 25px;

    height: 25px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    background: #bd0d2e;

    font-size: 12px;

}


/* =========================================================
   DIRECTIONS
========================================================= */

.direction-btn {

    height: 34px;

    margin-top: 10px;

    padding: 0 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 1px solid #c81735;

    border-radius: 18px;

    color: #c81735;

    background: white;

    text-decoration: none;

    font-family: Arial, sans-serif;

    font-size: 12px;

    transition:

        background .3s ease,

        color .3s ease,

        transform .3s ease;

}


.direction-btn:hover {

    background: #c81735;

    color: white;

    transform: translateY(-2px);

}


.direction-btn span:last-child {

    font-size: 15px;

}


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

@media (max-width: 1100px) {

    .cect-contact-section {

        padding: 20px;

    }


    .cect-contact-wrapper {

        grid-template-columns:
            0.85fr
            1.2fr
            0.9fr;

        gap: 12px;

    }


    .contact-info-panel {

        padding-left: 15px;

        padding-right: 15px;

    }


    .contact-form-panel {

        padding-left: 17px;

        padding-right: 17px;

    }


    .contact-info-text strong {

        font-size: 11px;

    }


    .contact-round-icon {

        flex-basis: 48px;

        width: 48px;

        height: 48px;

    }

}


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

@media (max-width: 800px) {

    .cect-contact-section {

        padding: 25px 15px 35px;

    }


    .cect-contact-wrapper {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .contact-info-panel,
    .contact-form-panel,
    .contact-location-panel {

        min-height: auto;

    }


    /* LEFT */

    .contact-info-panel {

        padding: 25px 20px 18px;

    }


    .contact-info-header h2 {

        font-size: 31px;

    }


    /* FORM */

    .contact-form-panel {

        padding: 26px 20px 22px;

    }


    .contact-form-heading h2 {

        font-size: 29px;

    }


    .form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .send-message-btn {

        width: 100%;

        min-width: 0;

    }


    /* LOCATION */

    .contact-location-panel {

        padding: 23px 12px 12px;

    }


    .location-heading {

        padding-left: 7px;

    }


    .location-heading h2 {

        font-size: 29px;

    }


    .location-heading p {

        font-size: 12px;

        max-width: 100%;

    }


    .google-map-wrapper {

        min-height: 420px;

    }


    .google-map-wrapper iframe {

        min-height: 420px;

    }

}


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

@media (max-width: 480px) {

    .cect-contact-section {

        padding:
            18px 10px 25px;

    }


    .contact-info-panel,
    .contact-form-panel,
    .contact-location-panel {

        border-radius: 15px;

    }


    .contact-info-panel {

        padding: 22px 16px;

    }


    .contact-round-icon {

        flex-basis: 50px;

        width: 50px;

        height: 50px;

        font-size: 18px;

    }


    .contact-info-text h3 {

        font-size: 14px;

    }


    .contact-info-text strong {

        font-size: 12px;

    }


    .contact-form-panel {

        padding: 24px 15px;

    }


    .contact-form-heading h2 {

        font-size: 26px;

    }


    .google-map-wrapper {

        min-height: 380px;

    }


    .google-map-wrapper iframe {

        min-height: 380px;

    }


    .map-location-label {

        left: 8px;

        top: 8px;

        font-size: 7px;

    }


    .direction-btn {

        height: 40px;

        font-size: 11px;

    }

}


/* =========================================================
   CONTACT - SHARP TEXT / NO BLUR FIX
========================================================= */

/* Prevent panel transform rendering blur */
.contact-info-panel,
.contact-form-panel,
.contact-location-panel {
    transform: none !important;
    filter: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

/* Keep all contact text sharp */
.contact-info-panel *,
.contact-form-panel *,
.contact-location-panel * {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* Do NOT transform form fields */
.contact-form-panel .input-box,
.contact-form-panel .message-box {
    transform: none !important;
}

.contact-form-panel .input-box input,
.contact-form-panel .input-box select,
.contact-form-panel .message-box textarea {
    transform: none !important;
}

/* Focus should only highlight the field */
.contact-form-panel .input-box input:focus,
.contact-form-panel .input-box select:focus,
.contact-form-panel .message-box textarea:focus {
    transform: none !important;

    box-shadow:
        0 0 0 2px rgba(255,255,255,.22) !important;
}

/* Keep icons sharp */
.contact-form-panel .input-box i,
.contact-form-panel .message-box > i {
    transform: translateY(-50%) !important;
    filter: none !important;
}

/* Message icon position */
.contact-form-panel .message-box > i {
    transform: none !important;
}


/* =========================================================
   ENQUIRY FORM - FULL PANEL HEIGHT FIX
========================================================= */

/* Make the green enquiry panel use its full height */
.contact-form-panel {
    display: flex;
    flex-direction: column;
}

/* Form itself takes all remaining space */
.contact-form-panel .contact-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Keep name + phone row normal */
.contact-form-panel .form-row {
    flex-shrink: 0;
}

/* Keep email and purpose normal */
.contact-form-panel .input-box.full {
    flex-shrink: 0;
}

/* Message area expands and fills the empty space */
.contact-form-panel .message-box {
    flex: 1;
    min-height: 180px;
    height: auto;
    margin-bottom: 9px;
}

/* Textarea fills the complete message area */
.contact-form-panel .message-box textarea {
    width: 100%;
    height: 100%;
    min-height: 180px;
    resize: none;
}

/* Button stays at the bottom after message area */
.contact-form-panel .send-message-btn {
    flex-shrink: 0;
    margin-top: 7px;
}

/* Privacy text stays below button */
.contact-form-panel .privacy-note {
    flex-shrink: 0;
    margin-top: 12px;
}


/* =========================================================
   MOBILE - KEEP ORIGINAL COMPACT FORM
========================================================= */

@media (max-width: 800px) {

    .contact-form-panel {
        display: block;
    }

    .contact-form-panel .contact-form {
        display: block;
    }

    .contact-form-panel .message-box {
        display: block;
        flex: none;
        height: 85px;
        min-height: 85px;
    }

    .contact-form-panel .message-box textarea {
        height: 85px;
        min-height: 85px;
    }

}


/* =========================================================
   IMPACT / VALUES SECTION
   DESKTOP + MOBILE RESPONSIVE
========================================================= */

.impact-items {
    width: min(1100px, calc(100% - 60px));
    margin: auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr) 0.75fr;

    align-items: center;
    gap: 0;
}


/* ---------------------------------------------------------
   ICON - REMOVE BACKGROUND
--------------------------------------------------------- */

.impact-item i,
.impact-item .icon,
.impact-item .impact-icon,
.impact-item .value-icon {
    background: transparent !important;
    background-color: transparent !important;

    box-shadow: none !important;
    border: none !important;

    width: auto;
    height: auto;

    padding: 0 !important;
}


/* If heart is using a span */
.impact-item span i,
.impact-item span {
    background: transparent !important;
}


/* ---------------------------------------------------------
   ITEM
--------------------------------------------------------- */

.impact-item {
    min-width: 0;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    padding: 10px 18px;
}


/* ---------------------------------------------------------
   ICON SIZE
--------------------------------------------------------- */

.impact-item i,
.impact-item .impact-icon,
.impact-item .value-icon {
    font-size: 38px;
    line-height: 1;
    margin-bottom: 10px;
}


/* ---------------------------------------------------------
   MAIN TITLE
--------------------------------------------------------- */

.impact-item h3 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;
    line-height: 1.05;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   SUB TITLE
--------------------------------------------------------- */

.impact-item p {
    margin: 5px 0 0;

    font-family: Arial, sans-serif;

    font-size: 16px;
    line-height: 1.3;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   RIGHT MESSAGE
--------------------------------------------------------- */

.impact-items > :last-child {
    min-width: 0;
}

.impact-items > :last-child strong {
    display: block;

    font-family: Arial, sans-serif;

    font-size: 16px;
    line-height: 1.55;

    letter-spacing: 3px;

    text-transform: uppercase;
}


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

@media (max-width: 1100px) {

    .impact-items {
        width: calc(100% - 35px);

        grid-template-columns:
            repeat(4, 1fr);

        gap: 10px;

        padding: 35px 0;
    }

    .impact-items > :last-child {
        grid-column: 1 / -1;

        margin-top: 15px;
    }

    .impact-item {
        padding: 8px 10px;
    }

    .impact-item h3 {
        font-size: 24px;
    }

    .impact-item p {
        font-size: 14px;
    }
}


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

@media (max-width: 700px) {

    .impact-items {
        width: calc(100% - 30px);

        grid-template-columns: repeat(2, 1fr);

        gap: 0;

        padding: 25px 0 30px;
    }


    .impact-item {
        min-height: 115px;

        padding: 18px 8px;

        border-bottom: 1px solid rgba(255,255,255,.18);
    }


    /* remove unnecessary separators */
    .impact-item:nth-child(2n)::after {
        display: none !important;
    }


    .impact-item i,
    .impact-item .impact-icon,
    .impact-item .value-icon {
        font-size: 32px;

        margin-bottom: 8px;

        background: transparent !important;
        box-shadow: none !important;
    }


    .impact-item h3 {
        font-size: 22px;

        white-space: normal;

        line-height: 1.1;
    }


    .impact-item p {
        font-size: 13px;

        white-space: normal;

        line-height: 1.35;
    }


    /* Right-side message becomes full width */
    .impact-items > :last-child {
        grid-column: 1 / -1;

        margin-top: 20px;

        padding: 15px 10px;

        text-align: center;
    }


    .impact-items > :last-child strong {
        font-size: 14px;

        line-height: 1.5;

        letter-spacing: 2.5px;
    }
}


/* =========================================================
   SMALL MOBILE - 390px
========================================================= */

@media (max-width: 390px) {

    .impact-items {
        width: calc(100% - 20px);

        grid-template-columns: repeat(2, 1fr);

        padding-top: 20px;
    }

    .impact-item {
        min-height: 105px;

        padding: 14px 5px;
    }

    .impact-item i,
    .impact-item .impact-icon,
    .impact-item .value-icon {
        font-size: 28px;
    }

    .impact-item h3 {
        font-size: 19px;
    }

    .impact-item p {
        font-size: 12px;
    }

    .impact-items > :last-child strong {
        font-size: 12px;
        letter-spacing: 2px;
    }
}

/* =========================================
   HERO PARAGRAPH - COMPASSION RED
========================================= */

.cect-hero-description {
    color: #B20F2D !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}


/* =========================================================
   IMPACT SECTION - MOBILE ONLY
   ONLY .about-impact-section
========================================================= */

@media (max-width: 700px) {

  /* SECTION ONLY */
  .about-impact-section {
    width: 100% !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  /* IMPACT GREEN AREA */
  .about-impact-section .impact-curve {
    width: 100% !important;
    min-height: auto !important;

    margin: 0 !important;

    padding: 40px 0 50px !important;

    background: #005f5a !important;

    border-radius: 0 !important;

    clip-path: none !important;

    box-shadow: none !important;

    overflow: hidden !important;
  }

  /* REMOVE EXTRA WAVES / DECORATION */
  .about-impact-section .impact-curve::before,
  .about-impact-section .impact-curve::after {
    display: none !important;
  }

  /* CARDS WRAPPER */
  .about-impact-section .impact-items {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 0 !important;

    position: relative !important;
    z-index: 10 !important;
  }

  /* EACH CARD */
  .about-impact-section .impact-item {
    width: 205px !important;
    min-width: 205px !important;
    max-width: 205px !important;

    height: 114px !important;
    min-height: 114px !important;

    margin: 0 !important;
    padding: 8px 6px !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    background: #dce8e5 !important;

    border-radius: 22px !important;

    overflow: hidden !important;

    box-shadow: none !important;
  }

  /* REMOVE DESKTOP DIVIDERS */
  .about-impact-section .impact-item::after {
    display: none !important;
  }

  /* ICON */
  .about-impact-section .impact-icon {
    width: 100% !important;
    height: 32px !important;

    margin: 0 0 4px !important;

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

    font-size: 28px !important;
    line-height: 1 !important;
  }

  /* HEART */
  .about-impact-section .impact-icon.red {
    color: #c41235 !important;
  }

  /* TITLE */
  .about-impact-section .impact-item h3 {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Cormorant Garamond", Georgia, serif !important;

    font-size: 27px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    color: #005f5a !important;

    text-align: center !important;

    /* IMPORTANT */
    white-space: nowrap !important;
    overflow: visible !important;
  }

  /* SUBTITLE */
  .about-impact-section .impact-item p {
    width: 100% !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;

    font-family: "Inter", sans-serif !important;

    font-size: 13px !important;
    line-height: 1.2 !important;

    color: #647576 !important;

    text-align: center !important;
  }

  /* RIGHT SIDE MESSAGE - HIDE MOBILE */
  .about-impact-section .impact-tag {
    display: none !important;
  }

}


/* =========================================================
   SMALL MOBILE - 390PX
========================================================= */

@media (max-width: 390px) {

  .about-impact-section .impact-curve {
    padding-top: 35px !important;
    padding-bottom: 45px !important;
  }

  .about-impact-section .impact-item {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;

    height: 112px !important;
    min-height: 112px !important;

    border-radius: 21px !important;
  }

  .about-impact-section .impact-icon {
    font-size: 27px !important;
  }

  .about-impact-section .impact-item h3 {
    font-size: 26px !important;
  }

  .about-impact-section .impact-item p {
    font-size: 12.5px !important;
  }

}


/* =========================================
   ABOUT STATS - MOBILE GAP FIX
========================================= */

@media (max-width: 700px) {

    .about-content .about-btn {
        position: relative !important;
        display: flex !important;
        margin-bottom: 60px !important;
        z-index: 5 !important;
    }

    .about-stats {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        margin-top: 0 !important;

        width: 100% !important;
        max-width: 330px !important;

        min-height: 295px !important;

        z-index: 2 !important;
    }

}


/* =========================================================
   FOCUS AREAS — MOBILE RESPONSIVE ONLY
   Existing HTML / Desktop CSS untouched
========================================================= */

@media (max-width: 700px) {

  /* SECTION */
  .focus-section {
    width: 100%;
    overflow: hidden;
    padding: 55px 0 45px !important;
  }

  .focus-container {
    width: 100%;
    max-width: 100%;
    padding: 0 12px;
    margin: 0 auto;
  }


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

  .focus-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 25px !important;
    padding: 0 8px;
  }

  .focus-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 13px;
  }

  .focus-eyebrow span {
    width: 22px;
    height: 2px;
    flex: 0 0 22px;
  }

  .focus-eyebrow strong {
    font-size: 10px;
    letter-spacing: 3px;
    white-space: nowrap;
  }

  .focus-heading h2 {
    font-size: 34px !important;
    line-height: 1.02 !important;

    margin: 0 auto 15px !important;

    max-width: 340px;
  }

  .focus-heading p {
    font-size: 14px !important;
    line-height: 1.6 !important;

    max-width: 340px;
    margin: 0 auto !important;
  }


  /* =========================
     SLIDER WRAPPER
  ========================= */

  .focus-slider-wrap {
    position: relative;
    width: 100%;
    display: block !important;
  }


  /* =========================
     VIEWPORT
  ========================= */

  .focus-slider {
    width: 100%;
    overflow: hidden !important;

    padding: 15px 8px 35px !important;
  }


  /* =========================
     TRACK
  ========================= */

  .focus-track {
    display: flex !important;

    gap: 0 !important;

    width: 100%;

    transition:
      transform 0.7s cubic-bezier(.22,.61,.36,1) !important;

    will-change: transform;
  }


  /* =========================
     CARD
     ONE CARD AT A TIME
  ========================= */

  .focus-card {
    flex: 0 0 100% !important;

    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    border-radius: 24px !important;

    overflow: visible !important;

    box-shadow:
      0 15px 35px rgba(20, 65, 62, 0.12);

    transform: none !important;
  }


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

  .focus-image {
    width: 100% !important;

    height: 230px !important;

    border-radius: 24px 24px 0 0 !important;

    overflow: hidden !important;
  }

  .focus-image img {
    width: 100% !important;
    height: 100% !important;

    display: block;

    object-fit: cover;

    transform: none !important;
  }


  /* =========================
     CARD BODY
  ========================= */

  .focus-card-body {
    position: relative;

    width: 100% !important;

    min-height: 185px !important;

    padding: 48px 20px 25px !important;

    border-radius:
      0 0 24px 24px !important;

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

    text-align: center;
  }


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

  .focus-meta {
    position: absolute;

    left: 20px;
    top: -30px;

    z-index: 5;
  }

  .focus-icon {
    width: 58px !important;
    height: 58px !important;

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

    border-radius: 50%;

    font-size: 29px !important;

    box-shadow:
      0 10px 25px rgba(0,0,0,.12);
  }


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

  .focus-card-body h3 {
    width: 100% !important;

    max-width: 300px;

    margin: 0 auto !important;

    font-size: 18px !important;
    line-height: 1.4 !important;

    text-align: center;

    white-space: normal !important;
  }


  /* =========================
     BOTTOM LINE
  ========================= */

  .focus-line {
    display: block;

    width: 52px !important;
    height: 4px !important;

    margin-top: 25px !important;

    border-radius: 10px;
  }


  /* =========================
     LEFT / RIGHT BUTTON
  ========================= */

  .focus-arrow {
    position: absolute !important;

    top: 48% !important;

    z-index: 20;

    width: 44px !important;
    height: 44px !important;

    padding: 0 !important;

    border: none;

    border-radius: 50%;

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

    background: #fff;

    color: #c8102e;

    box-shadow:
      0 8px 22px rgba(0,0,0,.15);

    cursor: pointer;

    transform: translateY(-50%) !important;
  }

  .focus-arrow:hover {
    transform:
      translateY(-50%) !important;
  }

  .focus-arrow:active {
    transform:
      translateY(-50%) scale(.92) !important;
  }

  .focus-arrow.focus-prev {
    left: -3px !important;
  }

  .focus-arrow.focus-next {
    right: -3px !important;
  }

  .focus-arrow {
    font-size: 32px !important;
    line-height: 1 !important;
  }


  /* =========================
     DOTS
  ========================= */

  .focus-dots {
    width: 100%;

    display: flex !important;

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

    gap: 7px;

    margin-top: 0 !important;
  }

  .focus-dot {
    width: 8px;
    height: 8px;

    padding: 0;
    border: 0;

    border-radius: 50%;

    background: #c8d4d1;

    transition:
      width .3s ease,
      background .3s ease;
  }

  .focus-dot.active {
    width: 28px;

    border-radius: 10px;

    background: #c8102e;
  }

}


/* =========================================================
   SMALL MOBILE — 390px
========================================================= */

@media (max-width: 390px) {

  .focus-section {
    padding-top: 45px !important;
  }

  .focus-container {
    padding: 0 8px;
  }

  .focus-heading h2 {
    font-size: 31px !important;
  }

  .focus-heading p {
    font-size: 13.5px !important;
  }

  .focus-image {
    height: 215px !important;
  }

  .focus-card-body {
    min-height: 175px !important;

    padding:
      45px 15px 22px !important;
  }

  .focus-card-body h3 {
    font-size: 17px !important;
  }

  .focus-arrow {
    width: 40px !important;
    height: 40px !important;
  }

}


/* =========================================================
   MOBILE FOCUS SLIDER - FINAL
========================================================= */

@media (max-width: 700px){

  .focus-slider-wrap{
    position:relative;
    width:100%;
    display:block;
  }

  .focus-slider{
    width:100%;
    overflow:hidden;
    padding:15px 8px 35px;
  }

  .focus-track{
    display:flex !important;
    gap:0 !important;
    width:100%;
    transition:transform .65s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }

  .focus-card{
    flex:0 0 100% !important;
    width:100% !important;
    min-width:100% !important;
    max-width:100% !important;

    margin:0 !important;

    transform:none !important;
    border-radius:24px !important;
    overflow:visible !important;
  }

  /* IMAGE */

  .focus-image{
    width:100% !important;
    height:215px !important;
    border-radius:24px 24px 0 0 !important;
    overflow:hidden !important;
  }

  .focus-image img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* CARD CONTENT */

  .focus-card-body{
    min-height:175px !important;
    padding:45px 15px 22px !important;

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

    text-align:center;

    border-radius:0 0 24px 24px !important;
  }

  .focus-card-body h3{
    width:100%;
    max-width:300px;

    margin:0 auto !important;

    font-size:17px !important;
    line-height:1.4 !important;

    text-align:center;
  }

  /* FLOATING ICON */

  .focus-meta{
    position:absolute;
    left:20px;
    top:-30px;
    z-index:10;
  }

  .focus-icon{
    width:58px !important;
    height:58px !important;

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

    border-radius:50%;
    font-size:28px !important;

    box-shadow:0 10px 25px rgba(0,0,0,.12);
  }

  /* BOTTOM LINE */

  .focus-line{
    position:static !important;

    width:52px !important;
    height:4px !important;

    margin:25px auto 0 !important;

    display:block;
    border-radius:20px;
  }

  /* LEFT + RIGHT BUTTON */

  .focus-arrow{
    position:absolute !important;

    top:48% !important;

    width:44px !important;
    height:44px !important;

    padding:0 !important;

    z-index:30;

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

    border:0 !important;
    border-radius:50%;

    background:#fff;
    color:#c8102e;

    font-size:32px !important;
    line-height:1 !important;

    box-shadow:0 8px 22px rgba(0,0,0,.15);

    cursor:pointer;

    transform:translateY(-50%) !important;
  }

  .focus-arrow.focus-prev{
    left:-3px !important;
  }

  .focus-arrow.focus-next{
    right:-3px !important;
  }

  .focus-arrow:active{
    transform:
      translateY(-50%)
      scale(.90) !important;
  }

  /* DOTS */

  .focus-dots{
    display:flex !important;

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

    gap:7px;

    width:100%;
    margin-top:0 !important;
  }

  .focus-dot{
    width:8px;
    height:8px;

    padding:0;
    border:0;

    border-radius:50%;

    background:#c8d4d1;

    transition:
      width .3s ease,
      background .3s ease;
  }

  .focus-dot.active{
    width:28px;

    border-radius:10px;

    background:#c8102e;
  }

}


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

@media (max-width:390px){

  .focus-slider{
    padding-left:8px;
    padding-right:8px;
  }

  .focus-image{
    height:215px !important;
  }

  .focus-card-body{
    min-height:175px !important;
  }

  .focus-card-body h3{
    font-size:17px !important;
  }

  .focus-arrow{
    width:40px !important;
    height:40px !important;
    font-size:29px !important;
  }

}

/* =========================================================
   IMPACT SECTION - MOBILE RESPONSIVE
   Reference mobile layout
========================================================= */

@media (max-width: 600px){

    .impact-section{
        width:100%;
        height:735px;
        min-height:735px;
        position:relative;
        overflow:hidden;
    }


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

    .impact-bg{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
    }

    .impact-bg img{
        width:100%;
        height:100%;
        object-fit:cover;

        /* image crop position */
        object-position:center center;

        display:block;
    }


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

    .impact-overlay{
        width:100%;
        height:100%;

        margin:0;
        padding:0 20px;

        position:relative;

        display:block;

        z-index:2;
    }


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

    .impact-left{
        position:relative;

        top:auto;
        left:auto;

        transform:none;

        width:100%;
        max-width:100%;

        padding-top:105px;

        margin:0 auto;

        text-align:center;
    }


    /* OUR IMPACT */

    .impact-left > span{
        display:block;

        margin-bottom:16px;

        font-size:12px;
        line-height:1;

        font-weight:700;

        letter-spacing:5px;

        color:#173f46;
    }


    /* REAL PEOPLE REAL CHANGE */

    .impact-left h2{
        max-width:330px;

        margin:0 auto 18px;

        font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

        font-size:43px;

        line-height:0.98;

        letter-spacing:-1.3px;

        font-weight:700;

        color:#173f46;
    }


    /* DESCRIPTION */

    .impact-left p{
        max-width:330px;

        margin:0 auto;

        font-size:19px;

        line-height:1.68;

        font-weight:700;

        color:#073d4a;
    }


    /* ===============================
       BUTTON
    ================================ */

    .impact-left a{
        width:220px;
        height:47px;

        margin:26px auto 0;

        padding:0 20px;

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

        background:#be0c34;

        border-radius:999px;

        color:#ffffff;

        font-size:16px;
        line-height:1;

        font-weight:700;

        box-shadow:
        0 8px 20px rgba(150,0,35,.15);

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

    .impact-left a:active{
        transform:scale(.97);
    }


    /* stats irundha mobile screenshot-la hide */
    .impact-stats{
        display:none;
    }
}


/* =========================================================
   SMALL MOBILE - 375px / 360px
========================================================= */

@media (max-width: 390px){

    .impact-section{
        height:735px;
        min-height:735px;
    }

    .impact-overlay{
        padding:0 17px;
    }

    .impact-left{
        padding-top:106px;
    }

    .impact-left > span{
        font-size:11px;
        letter-spacing:4.5px;
        margin-bottom:17px;
    }

    .impact-left h2{
        max-width:325px;

        font-size:42px;
        line-height:1;

        margin-bottom:17px;
    }

    .impact-left p{
        max-width:325px;

        font-size:18px;
        line-height:1.7;
    }

    .impact-left a{
        width:220px;
        height:47px;

        margin-top:25px;

        font-size:16px;
    }
}


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

@media (max-width: 350px){

    .impact-overlay{
        padding:0 14px;
    }

    .impact-left{
        padding-top:90px;
    }

    .impact-left h2{
        font-size:38px;
    }

    .impact-left p{
        font-size:16px;
        line-height:1.65;
    }

    .impact-left a{
        width:205px;
        height:45px;

        font-size:15px;
    }
}


/* =========================================================
   DONATE / SUPPORT MISSION
   MOBILE RESPONSIVE - FINAL
========================================================= */

@media (max-width:600px){

    /* SECTION */
    .donate-banner{
        width:100%;
        height:450px;
        min-height:450px;

        position:relative;
        display:block;

        overflow:hidden;
    }


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

    .donate-background{
        position:absolute;
        inset:0;

        width:100%;
        height:100%;

        object-fit:cover;

        /* hand + leaf correct-ah visible ஆக */
        object-position:54% center;

        transform:none;

        z-index:0;
    }


    /* optional soft overlay */
    .donate-banner::after{
        content:"";

        position:absolute;
        inset:0;

        z-index:1;

        background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,0) 65%
        );

        pointer-events:none;
    }


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

    .donate-content{
        position:relative;

        z-index:3;

        width:100%;
        max-width:100%;

        margin-left:0;

        padding:
        98px
        26px
        30px;

        text-align:left;
    }


    /* SUPPORT OUR MISSION */

    .donate-small{
        display:block;

        margin-bottom:10px;

        color:#ffffff;

        font-size:12px;
        line-height:1.55;

        font-weight:700;

        letter-spacing:3px;
    }


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

    .donate-content h2{
        margin:
        6px
        0
        12px;

        font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

        font-size:38px;

        line-height:.92;

        font-weight:700;

        letter-spacing:-.7px;

        color:#a60e2a;
    }


    .donate-content h2 span{
        color:#064e5d;
    }


    /* =====================================
       DESCRIPTION
    ===================================== */

    .donate-content p{
        width:100%;
        max-width:335px;

        margin:
        0
        0
        18px;

        color:#ffffff;

        font-size:14px;

        line-height:1.55;

        font-weight:700;
    }


    /* HTMLல உள்ள <br> mobileல line break force ஆகாம */
    .donate-content p br{
        display:none;
    }


    /* =====================================
       DONATE BUTTON
    ===================================== */

    .donate-btn{
        width:183px;
        height:48px;

        padding:0 20px;

        margin:0;

        display:inline-flex;

        align-items:center;
        justify-content:space-between;

        gap:12px;

        border-radius:10px;

        background:#b70d2b;

        color:#ffffff;

        font-size:15px;
        line-height:1;

        font-weight:700;

        box-shadow:
        0 8px 20px rgba(150,10,35,.15);
    }


    .donate-btn span{
        font-size:18px;
        line-height:1;
    }


    /* Desktop 80G card mobile screenshot-la வேண்டாம் */
    .donate-card{
        display:none !important;
    }

}

/* =========================================================
   FOCUS SLIDER - FINAL FIX
   Desktop + Tablet + Mobile
========================================================= */

.focus-slider-wrap{
    position:relative;
}

.focus-slider{
    width:100%;
    overflow:hidden;
}

.focus-track{
    display:flex;
    gap:22px;

    width:100%;

    transform:translate3d(0,0,0);

    will-change:transform;
}


/* =========================================================
   DESKTOP - 4 CARDS
========================================================= */

.focus-card{
    flex:
    0 0
    calc((100% - 66px) / 4);

    min-width:0;

    flex-shrink:0;
}


/* =========================================================
   LAPTOP / SMALL DESKTOP - 3 CARDS
========================================================= */

@media(max-width:1100px){

    .focus-card{
        flex:
        0 0
        calc((100% - 44px) / 3);
    }

}


/* =========================================================
   TABLET - 2 CARDS
========================================================= */

@media(max-width:800px) and (min-width:701px){

    .focus-card{
        flex:
        0 0
        calc((100% - 22px) / 2);
    }

}


/* =========================================================
   MOBILE - EXACTLY 1 CARD
========================================================= */

@media(max-width:700px){

    .focus-slider-wrap{
        width:100%;
        position:relative;
    }


    .focus-slider{
        width:100%;

        overflow:hidden !important;

        padding:
        15px
        8px
        35px;
    }


    .focus-track{
        width:100%;

        display:flex !important;

        /*
         IMPORTANT:
         Mobile JS move distance exact ஆக gap 0
        */
        gap:0 !important;

        transform:translate3d(0,0,0);

        will-change:transform;
    }


    .focus-card{
        flex:
        0 0
        100% !important;

        width:100% !important;

        min-width:100% !important;
        max-width:100% !important;
    }


    /* ==========================
       ARROWS
    ========================== */

    .focus-arrow{
        position:absolute !important;

        top:48% !important;

        width:42px !important;
        height:42px !important;

        display:grid !important;
        place-items:center;

        z-index:50;

        padding:0;

        border-radius:50%;

        background:#ffffff;

        color:#c10f30;

        border:
        1px solid
        rgba(193,15,48,.12);

        font-size:28px;

        cursor:pointer;

        box-shadow:
        0 7px 20px
        rgba(0,0,0,.12);

        transform:
        translateY(-50%) !important;
    }


    .focus-prev{
        left:-2px !important;
    }


    .focus-next{
        right:-2px !important;
    }


    .focus-arrow:hover{
        color:#c10f30;

        background:#ffffff;

        transform:
        translateY(-50%) !important;
    }


    .focus-arrow:active{
        transform:
        translateY(-50%)
        scale(.92) !important;
    }

}


/* =========================================================
   FOCUS SLIDER - MOBILE SLIDE CLEAN FIX
========================================================= */

@media (max-width:700px){

    .focus-slider-wrap{
        width:100% !important;
        position:relative !important;
        overflow:hidden !important;
    }

    .focus-slider{
        width:100% !important;

        /* IMPORTANT */
        padding:15px 0 35px !important;

        overflow:hidden !important;

        position:relative !important;
    }

    .focus-track{
        display:flex !important;

        width:100% !important;

        gap:0 !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch;

        will-change:transform;
    }

    .focus-card{
        flex:0 0 100% !important;

        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        transform:none !important;

        /*
           card itself visible இருக்கலாம்,
           outer slider தான் neighbouring cards hide பண்ணும்
        */
        overflow:visible !important;
    }

}


@media (max-width: 600px) {

    .donate-small {
        color: #c8103a !important;
    }

}


@media (max-width: 600px) {
    .donate-content p {
        color: #c8103a !important;
    }
}

/* =========================================
   ABOUT HERO - MOBILE PARAGRAPH COLOR
========================================= */

@media (max-width: 768px) {

    .cect-about-hero .cect-about-content p {
        color: #c8103a !important;
    }

}


/* =========================================================
   OUR STORY SECTION - MOBILE RESPONSIVE FINAL
========================================================= */

@media (max-width: 768px){

    .cect-story-section{
        width:100% !important;

        min-height:auto !important;

        display:flex !important;
        flex-direction:column !important;

        grid-template-columns:none !important;

        align-items:stretch !important;

        background:#faf7ef;

        overflow:hidden !important;

        padding:0 !important;
    }


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

    .cect-story-image{
        width:100% !important;
        height:260px !important;

        position:relative;

        order:1;

        overflow:hidden;
    }

    .cect-story-image img{
        width:100% !important;
        height:100% !important;

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

        display:block;
    }

    /* Desktop white fade remove */
    .cect-story-image::after{
        display:none !important;
    }


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

    .cect-story-content{
        width:100% !important;

        order:2;

        padding:
        42px
        24px
        35px !important;

        text-align:left;
    }


    /* OUR STORY */
    .cect-story-tag{
        display:flex;
        align-items:center;

        gap:10px;

        margin:0 0 15px !important;

        font-size:11px !important;

        line-height:1;

        letter-spacing:3px;

        font-weight:700;

        color:#00534f;
    }

    .cect-story-tag span{
        width:32px;
        height:2px;

        flex-shrink:0;

        background:#00534f;
    }


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

    .cect-story-content h2{
        width:100% !important;
        max-width:330px !important;

        margin:
        0
        0
        20px !important;

        font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

        font-size:42px !important;

        line-height:.95 !important;

        letter-spacing:-1px;

        color:#07534f;

        word-break:normal !important;
        overflow-wrap:normal !important;
        white-space:normal !important;
    }


    /* ================================
       PARAGRAPH
    ================================= */

    .cect-story-content p{
        width:100% !important;
        max-width:100% !important;

        margin:
        0
        0
        25px !important;

        padding:0 !important;

        font-size:14px !important;

        line-height:1.7 !important;

        color:#53666a;

        /* IMPORTANT */
        text-align:left !important;

        word-break:normal !important;
        overflow-wrap:normal !important;
        white-space:normal !important;
    }


    /* ================================
       BUTTON
    ================================= */

    .cect-story-btn{
        width:180px !important;
        height:48px;

        margin:0 !important;

        display:inline-flex !important;

        align-items:center;
        justify-content:space-between;

        padding:0 20px !important;

        background:#c8103a;

        color:#ffffff;

        border-radius:8px;

        font-size:14px;

        font-weight:700;

        text-decoration:none;
    }

    .cect-story-btn span{
        font-size:18px;
    }


    /* ================================
       QUOTE
    ================================= */

    .cect-story-quote{
        width:calc(100% - 48px) !important;

        order:3;

        margin:
        0
        24px
        45px !important;

        padding:
        28px
        24px !important;

        position:relative !important;

        border-left:
        2px solid
        rgba(200,16,58,.18);

        text-align:left;

        overflow:visible !important;
    }

    .cect-story-quote .quote-icon{
        font-size:48px !important;

        line-height:.7;

        color:#c8bfa9;
    }

    .cect-story-quote h3{
        margin-top:12px;

        font-size:27px !important;

        line-height:1.15 !important;

        white-space:normal !important;
    }

}


@media (max-width: 900px) {

    .cect-header{
        position:relative !important;
        z-index:9999 !important;
        overflow:visible !important;
    }

    .cect-header-inner{
        position:relative !important;
        overflow:visible !important;
    }

    .cect-menu-toggle{
        display:block !important;
        position:relative;
        z-index:10002;
        cursor:pointer;
    }

    .cect-nav{
        position:absolute !important;

        top:75px !important;
        left:14px !important;
        right:14px !important;

        z-index:10001 !important;

        display:flex !important;
        flex-direction:column !important;

        padding:14px !important;

        background:#ffffff !important;

        border-radius:16px;

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

        opacity:0;
        visibility:hidden;

        pointer-events:none;

        transform:translateY(-10px);

        transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s ease;
    }

    .cect-nav.open{
        opacity:1 !important;
        visibility:visible !important;

        pointer-events:auto !important;

        transform:translateY(0) !important;
    }

    .cect-nav a{
        display:block;
        width:100%;

        padding:14px 12px !important;

        font-size:14px !important;

        color:#24484a;
    }
}


/* =========================================================
   PROGRAM HERO - MOBILE RESPONSIVE FINAL
========================================================= */

@media (max-width: 768px){

    .cect-program-hero{
        width:100% !important;
        height:700px !important;
        min-height:700px !important;

        position:relative !important;

        display:block !important;

        overflow:hidden !important;
    }


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

    .cect-program-bg{
        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;

        /* mobile crop control */
        object-position:58% center !important;

        z-index:0 !important;

        display:block;
    }


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

    .cect-program-content{
        position:relative !important;
        z-index:2 !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        padding:
        65px
        28px
        35px !important;

        text-align:left !important;
    }


    /* OUR PROGRAMS */

    .cect-program-tag{
        display:block;

        margin:
        0
        0
        18px !important;

        font-size:11px !important;

        line-height:1;

        letter-spacing:5px !important;

        font-weight:700;

        color:#005c5b;
    }


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

    .cect-program-content h1{
        width:100% !important;
        max-width:330px !important;

        margin:
        0
        0
        24px !important;

        font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

        font-size:43px !important;

        line-height:.98 !important;

        letter-spacing:-1px;

        font-weight:700;

        color:#063f43;

        word-break:normal !important;
        overflow-wrap:normal !important;
    }


    .cect-program-content h1 span{
        color:#b40d32 !important;
    }


    /* =====================================
       PARAGRAPH
       button red color
    ===================================== */

    .cect-program-content p{
        width:100% !important;
        max-width:325px !important;

        margin:0 !important;

        font-size:14px !important;

        line-height:1.65 !important;

        font-weight:700 !important;

        /* BUTTON SAME COLOR */
        color:#b40d32 !important;

        text-align:left !important;

        word-break:normal !important;
        overflow-wrap:normal !important;
    }


    /* =====================================
       BUTTON AREA
    ===================================== */

    .cect-program-buttons{
        width:auto !important;

        margin-top:28px !important;

        display:flex !important;

        flex-direction:row !important;

        align-items:center !important;

        gap:0 !important;
    }


    .program-primary-btn{
        width:220px !important;
        height:50px !important;

        padding:
        0
        24px !important;

        display:inline-flex !important;

        align-items:center !important;
        justify-content:space-between !important;

        gap:20px;

        border-radius:999px !important;

        background:#b40d32 !important;

        color:#ffffff !important;

        font-size:15px !important;

        font-weight:700 !important;

        box-shadow:
        0 10px 25px rgba(180,13,50,.20);
    }


    .program-primary-btn span{
        font-size:18px;
        line-height:1;
    }

}


.cect-program-content p{
    color:#b40d32 !important;
}


@media (max-width: 768px){

    .cect-program-hero{
        height:700px !important;
        min-height:700px !important;
        overflow:hidden !important;
    }

    .cect-program-bg{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;

        /* main fix */
        object-position:68% center !important;

        transform:scale(1.02);

        z-index:0 !important;
    }

    .cect-program-content{
        position:relative !important;
        z-index:2 !important;
    }

}


/* =========================================================
   CERTIFICATE HERO - MOBILE RESPONSIVE FINAL
========================================================= */

@media (max-width: 600px){

    .cect-certificate-hero{
        width:100% !important;

        min-height:700px !important;
        height:700px !important;

        position:relative !important;

        overflow:hidden !important;
    }


    /* =====================================
       BACKGROUND IMAGE MOBILE FIX
    ===================================== */

    .certificate-bg{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;

        /* image crop control */
        object-position:58% center !important;

        transform:scale(1.02);

        z-index:0 !important;
    }


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

    .certificate-container{
        width:100% !important;
        min-height:700px !important;

        margin:0 !important;

        padding:
        38px
        24px
        30px !important;

        position:relative !important;

        z-index:2 !important;

        display:block !important;
    }


    .certificate-content{
        width:100% !important;

        padding:0 !important;

        text-align:center !important;
    }


    /* TRUST • TRANSPARENCY */

    .certificate-tag{
        display:block;

        max-width:300px;

        margin:
        0
        auto
        25px !important;

        font-size:10px !important;

        line-height:1.7;

        letter-spacing:4px !important;

        color:#155057;
    }


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

    .certificate-content h1{
        width:100% !important;

        max-width:340px;

        margin:
        0
        auto
        25px !important;

        font-size:48px !important;

        line-height:.92 !important;

        letter-spacing:-1px !important;

        text-align:center !important;
    }


    .certificate-content h1 span{
        display:block;

        color:#b40d32 !important;
    }


    /* Recognized Compliant Committed */

    .certificate-content h3{
        max-width:330px;

        margin:
        0
        auto
        14px !important;

        font-size:20px !important;

        line-height:1.2 !important;

        text-align:center !important;
    }


    /* =====================================
       PARAGRAPH - BUTTON SAME RED
    ===================================== */

    .certificate-content p{
        width:100% !important;

        max-width:330px !important;

        margin:
        0
        auto !important;

        font-size:14px !important;

        line-height:1.65 !important;

        font-weight:600;

        color:#b40d32 !important;

        text-align:center !important;
    }


    /* =====================================
       SERVING WITH TRUST TEXT
    ===================================== */

    .certificate-script{
        width:100%;

        max-width:330px;

        margin:
        38px
        auto
        0 !important;

        font-size:32px !important;

        line-height:.95 !important;

        /* same red */
        color:#b40d32 !important;

        text-align:center !important;

        transform:rotate(-4deg) !important;
    }

}


/* =========================================================
   DONATION SECTION - MOBILE BLUR REMOVE / SHARP FIX
========================================================= */

@media (max-width: 600px){

    /* Main section */
    .contribution-section,
    .contribution-3d{
        perspective:none !important;
        transform:none !important;
        filter:none !important;
    }


    /* Main white wrapper */
    .contribution-wrapper,
    .contribution-3d .contribution-wrapper{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

        filter:none !important;

        transform:none !important;
        transform-style:flat !important;

        background:#ffffff !important;

        box-shadow:
        0 8px 24px rgba(31,67,60,.08) !important;
    }


    /* LEFT CATEGORY PANEL */
    .donation-sidebar,
    .donation-sidebar-3d{
        transform:none !important;
        transform-style:flat !important;

        filter:none !important;
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }


    /* Every category button */
    .donation-category{
        transform:none !important;
        transform-style:flat !important;

        filter:none !important;

        backface-visibility:visible !important;
        -webkit-font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
    }


    /* MAIN DONATION CONTENT */
    .contribution-main,
    .contribution-main-3d{
        transform:none !important;
        transform-style:flat !important;

        perspective:none !important;

        filter:none !important;
    }


    /* Heading */
    .contribution-heading,
    .contribution-heading h2,
    .contribution-heading p,
    .heading-kicker{
        transform:none !important;
        filter:none !important;

        -webkit-font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
    }


    /* AMOUNT GRID */
    .amount-options,
    .amount-options-3d{
        perspective:none !important;

        transform:none !important;
        transform-style:flat !important;
    }


    /* AMOUNT CARDS */
    .amount-card,
    .amount-card-3d,
    .amount-card-3d.active,
    .amount-card-3d:hover{
        transform:none !important;
        transform-style:flat !important;

        perspective:none !important;

        filter:none !important;

        backface-visibility:visible !important;

        box-shadow:
        0 6px 18px rgba(24,61,57,.08) !important;
    }


    /* ₹500 / ₹1000 / etc */
    .amount-card strong,
    .amount-card-3d strong,
    .amount-card-3d.active strong{
        transform:none !important;
        filter:none !important;

        -webkit-font-smoothing:antialiased;
        text-rendering:optimizeLegibility;
    }


    /* Card description */
    .amount-card span,
    .amount-card-3d span{
        transform:none !important;
        filter:none !important;

        -webkit-font-smoothing:antialiased;
    }


    /* custom amount */
    .custom-amount,
    .custom-amount-3d{
        transform:none !important;
        filter:none !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;

        background:#ffffff !important;
    }


    .custom-amount input,
    .custom-amount-3d input{
        transform:none !important;
        filter:none !important;

        -webkit-font-smoothing:antialiased;
    }


    /* Donate button */
    .donation-action,
    .donation-action-3d,
    .contribution-donate-btn{
        transform:none !important;
        filter:none !important;
        transform-style:flat !important;
    }


    /* secure payment */
    .secure-payment,
    .donation-note{
        transform:none !important;
        filter:none !important;

        -webkit-font-smoothing:antialiased;
    }


    /* Decorative blur/glow remove mobile */
    .sidebar-glow,
    .donate-orb,
    .amount-light,
    .card-shine{
        filter:none !important;
    }

}


/* =========================================================
   DONATE HERO - MOBILE RESPONSIVE FINAL FIX
========================================================= */

@media (max-width: 768px){

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

    .cect-donate-hero{
        width:100% !important;

        height:700px !important;
        min-height:700px !important;

        position:relative !important;

        display:block !important;

        overflow:hidden !important;
    }


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

    .cect-donate-bg{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        object-fit:cover !important;

        /* IMPORTANT:
           girl face konjam right side move ஆகும்
           background space left side contentக்கு கிடைக்கும்
        */
        object-position:62% center !important;

        transform:none !important;

        z-index:1 !important;
    }


    /* =========================
       SOFT OVERLAY
    ========================== */

    .cect-donate-overlay{
        position:absolute !important;

        inset:0 !important;

        z-index:2 !important;

        background:
        linear-gradient(
            180deg,
            rgba(255,248,235,.58) 0%,
            rgba(255,248,235,.25) 40%,
            rgba(255,248,235,.05) 100%
        ) !important;
    }


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

    .cect-donate-content{
        position:relative !important;

        z-index:4 !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        padding:
        55px
        24px
        0 !important;

        text-align:left !important;
    }


    /* TOP TAG */

    .cect-donate-tag{
        display:block;

        max-width:320px;

        margin-bottom:25px !important;

        font-size:11px !important;

        line-height:1.7 !important;

        letter-spacing:4px !important;

        font-weight:700;

        color:#b51c35 !important;
    }


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

    .cect-donate-content h1{
        width:100% !important;

        max-width:340px !important;

        margin:
        0
        0
        26px !important;

        font-size:47px !important;

        line-height:.93 !important;

        letter-spacing:-1.5px !important;

        color:#073c45 !important;

        word-break:normal !important;
        overflow-wrap:normal !important;
    }


    .cect-donate-content h1 span{
        color:#a4142c !important;
    }


    /* =========================
       PARAGRAPH
    ========================== */

    .cect-donate-content p{
        width:100% !important;

        max-width:335px !important;

        margin:0 !important;

        font-size:14px !important;

        line-height:1.65 !important;

        font-weight:700 !important;

        color:#a4142c !important;

        text-align:left !important;
    }


    /* =========================
       KINDNESS CREATES CHANGE
    ========================== */

    .cect-donate-script{
        width:150px !important;

        margin:
        30px
        0
        0 !important;

        font-size:26px !important;

        line-height:1.05 !important;

        color:#ffffff !important;

        position:relative !important;

        z-index:5 !important;

        transform:none !important;
    }


    .cect-donate-script span{
        font-size:34px !important;

        color:#c51636 !important;
    }


    /* =========================
       EDUCATE / EMPOWER / BUILD
    ========================== */

    .cect-donate-points{
        position:absolute !important;

        left:95px !important;
        right:auto !important;

        bottom:22px !important;

        z-index:6 !important;

        width:240px !important;
    }


    .donate-point{
        display:flex !important;

        align-items:center !important;

        gap:10px !important;

        margin-bottom:12px !important;
    }


    .donate-point i{
        width:28px !important;

        font-size:21px !important;

        color:#c51636 !important;
    }


    .donate-point h4{
        margin:0 !important;

        font-size:15px !important;

        line-height:1.1 !important;

        color:#ffffff !important;
    }


    .donate-point span{
        display:block;

        margin-top:2px;

        font-size:12px !important;

        color:#c51636 !important;

        font-weight:700;
    }

}

@media (max-width: 390px){

    .cect-donate-hero{
        height:700px !important;
        min-height:700px !important;
    }

    .cect-donate-bg{
        object-position:64% center !important;
    }

    .cect-donate-content{
        padding:
        48px
        22px
        0 !important;
    }

    .cect-donate-tag{
        font-size:10px !important;
        letter-spacing:3.5px !important;
    }

    .cect-donate-content h1{
        max-width:325px !important;

        font-size:44px !important;

        line-height:.94 !important;
    }

    .cect-donate-content p{
        max-width:320px !important;

        font-size:13.5px !important;
    }

    .cect-donate-script{
        width:140px !important;

        font-size:24px !important;
    }

    .cect-donate-points{
        left:90px !important;

        width:220px !important;
    }

}


/* =========================================================
   CONTACT HERO - MOBILE FINAL FIX
   Bright Image + Proper Crop + Responsive Layout
========================================================= */

@media (max-width: 650px){

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

    .cect-contact-hero{
        width:100% !important;

        height:700px !important;
        min-height:700px !important;

        position:relative !important;

        overflow:hidden !important;

        perspective:none !important;

        background:#f8f4e9;
    }


    /* =========================
       BACKGROUND SCENE
    ========================== */

    .contact-3d-scene{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        transform:none !important;
        transform-style:flat !important;
    }


    /* =========================
       MAIN IMAGE - IMPORTANT
    ========================== */

    .contact-main-art{
        position:absolute !important;

        inset:0 !important;

        left:0 !important;
        top:0 !important;

        width:100% !important;
        height:100% !important;

        max-width:none !important;

        object-fit:cover !important;

        /* Girl right side + background left side */
        object-position:64% center !important;

        /* OLD .35 opacity REMOVE */
        opacity:1 !important;

        transform:none !important;

        filter:
            brightness(1.08)
            contrast(1.03)
            saturate(1.05) !important;

        will-change:auto !important;
    }


    /* =========================
       REMOVE WHITE / DULL OVERLAY
    ========================== */

    .cect-contact-hero::after{
        content:"";

        position:absolute;
        inset:0;

        z-index:2;

        pointer-events:none;

        background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 0%,
            rgba(255,255,255,.02) 45%,
            rgba(255,255,255,0) 100%
        ) !important;
    }


    /* =========================
       REMOVE EXTRA 3D LIGHT
    ========================== */

    .contact-light{
        display:none !important;
    }


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

    .cect-contact-content{
        position:absolute !important;

        inset:0 !important;

        z-index:5 !important;

        transform:none !important;
        transform-style:flat !important;
    }


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

    .contact-left-content{
        position:relative !important;

        left:auto !important;
        top:auto !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        padding:
            55px
            22px
            30px !important;

        transform:none !important;

        text-align:left !important;
    }


    /* LET'S CONNECT */

    .contact-mini-title{
        margin-bottom:16px !important;

        font-size:10px !important;

        line-height:1;

        letter-spacing:4px !important;

        font-weight:700;

        color:#174f50 !important;
    }


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

    .contact-left-content h1{
        width:100% !important;

        max-width:320px !important;

        margin:0 !important;

        font-size:48px !important;

        line-height:.92 !important;

        letter-spacing:-2px !important;

        color:#064c4e !important;

        text-shadow:none !important;
    }


    .contact-left-content h1 span,
    .contact-left-content h1 strong{
        color:#bd0f2e !important;
    }


    /* =========================
       PARAGRAPH
    ========================== */

    .contact-left-content p{
        width:100% !important;

        max-width:330px !important;

        margin:
            25px
            0
            0 !important;

        font-size:14px !important;

        line-height:1.55 !important;

        font-weight:600;

        color:#294e52 !important;
    }


    /* =========================
       ACTION BUTTON ROW
    ========================== */

    .contact-action-row{
        width:100% !important;

        max-width:330px;

        margin-top:28px !important;

        display:grid !important;

        grid-template-columns:
            repeat(3,1fr) !important;

        gap:8px !important;
    }


    .contact-action-card{
        width:100% !important;

        min-height:85px !important;

        padding:5px !important;

        border-right:none !important;

        transform:none !important;

        filter:none !important;
    }


    .action-icon{
        width:42px !important;
        height:42px !important;

        margin:0 auto 7px !important;

        font-size:15px !important;

        box-shadow:
            0 5px 15px rgba(0,0,0,.08) !important;
    }


    .action-text strong,
    .action-text span{
        font-size:11px !important;

        line-height:1.15;
    }


    /* =========================
       MOBILE DECORATIONS REMOVE
    ========================== */

    .contact-handwriting,
    .floating-leaf,
    .contact-hotspots{
        display:none !important;
    }

}


@media (max-width:390px){

    .cect-contact-hero{
        height:700px !important;
        min-height:700px !important;
    }

    .contact-main-art{
        object-position:66% center !important;

        filter:
            brightness(1.10)
            contrast(1.04)
            saturate(1.06) !important;
    }

    .contact-left-content{
        padding:
            48px
            20px
            25px !important;
    }

    .contact-left-content h1{
        max-width:300px !important;

        font-size:45px !important;
    }

    .contact-left-content p{
        max-width:315px !important;

        font-size:13.5px !important;
    }

    .contact-action-row{
        max-width:315px;
    }
}


/* =========================================
   CONTACT HERO - MOBILE TEXT COLOR
========================================= */

@media (max-width: 650px){

    /* Paragraph */
    .contact-left-content p{
        color:#c8103a !important;
    }

    /* Icon கீழே text */
    .action-text{
        color:#c8103a !important;
    }

    .action-text strong,
    .action-text span{
        color:#c8103a !important;
    }

}


/* CONTACT HERO - DESKTOP TEXT COLOR ONLY */
@media (min-width: 901px) {

    /* Paragraph */
    .cect-contact-hero .contact-left-content p {
        color: #c8103a !important;
        font-weight: bold;
    }

    /* Icon கீழே உள்ள text */
    .cect-contact-hero .action-text,
    .cect-contact-hero .action-text strong,
    .cect-contact-hero .action-text span {
      font-weight: bold;
        color: #c8103a !important;
        font-size: 17px;
    }

}

@media (min-width: 901px) {

    .contact-handwriting{
        color: #c8103a !important;
        font-weight: bold;
    }

    .contact-handwriting span{
        color: #c8103a !important;
    }

}