/* ================= Global Theme ================= */
:root{
  --green-1:#E9F5E9;   /* light */
  --green-2:#B5D6B5;   /* mid */
  --green-3:#3A663A;   /* deep */
  --ink:#0D2610;       /* dark text */
  --muted:#4c5f4c;
  --card:#ffffff;
  --ring:#dce8dc;
  --gold:#ebe695;
  --heroheading: #053c05;
}

/* ================= Base ================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--ink);
  background: linear-gradient(180deg, var(--green-1), var(--green-2));
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1200px, 92%); margin-inline:auto}


@media (max-width: 768px) {   /* adjust breakpoint as needed */
  html, body {
    overflow-x: hidden;  /* stop left-right scroll */
    width: 100%;
  }

  * {
    max-width: 100%;   /* keep elements from overflowing */
    box-sizing: border-box;
  }
}
/* ================= Hero ================= */



.hero{ position:relative; overflow:hidden; padding: clamp(48px,8vw,80px) 0 84px;

  background: url("../assets/hero/hero_home.png") center/cover no-repeat; }
.hero-grid{ display:grid; align-items:center; gap:28px; grid-template-columns: 1.1fr 1fr; }
@media (max-width:960px){ .hero-grid{grid-template-columns:1fr} }

.title{ font-size: clamp(28px, 5vw, 44px); line-height:1.1; margin:0 0 10px; font-weight:900; color : var(--heroheading); }
.lead{ color:var(--muted); font-size:clamp(15px,2.1vw,18px); line-height:1.8; margin:0 0 22px; color : var(--heroheading); }
/* ---- Concentric art (matches attachment) ---- */
  .art{
    position:relative; aspect-ratio: 5 / 4; width: min(560px, 92%); margin-left:auto;
    background: radial-gradient(closest-side, #fff 12%, transparent 13%) center/100% 100% no-repeat;
    filter: drop-shadow(0 30px 60px rgba(15,36,52,.18));
  }
  .art::before,
  .art::after{
    content:""; position:absolute; inset:0; border-radius:24px;
    background:
      radial-gradient(closest-side, #fff 0 32%, rgba(255,255,255,0) 33% 34%, rgba(255,255,255,.8) 35% 35%,
                      rgba(255,255,255,0) 36%) no-repeat,
      radial-gradient(circle at 40% 65%, rgba(255,255,255,.85), rgba(255,255,255,0) 58%);
    box-shadow:
      inset 0 12px 40px rgba(255,255,255,.7),
      inset 0 -18px 40px rgba(236, 234, 233, 0.25);
    border-radius: 50%;
    mask:
      radial-gradient(circle at 50% 50%, transparent 0 18%, #000 19%),
      radial-gradient(circle at 50% 50%, transparent 0 38%, #000 39%),
      radial-gradient(circle at 50% 50%, transparent 0 62%, #000 63%);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
  }
  .halo{
    position:absolute; inset:-10%; border-radius:50%;
    box-shadow: 0 0 0 28px rgba(255,255,255,.35), 0 0 0 64px rgba(255,255,255,.25);
    pointer-events:none;
  }

/* ================= Mission / Vision / Strategy (mvs) ================= */
.mvs{
    --brand: var(--brand, #1B3431);
    --muted: var(--muted, #5E6F6C);
    --tint-1: var(--tint-1, #F3F7F6);
    --tint-2: var(--tint-2, #E6ECEA);
    --gold: var(--gold, #CAAC5D);
    padding: clamp(36px, 6vw, 64px) 0;
    background:#fff;
  }

.mvs-grid {
  display: grid;
  /* width: 760px;  <-- REMOVE this line */
  max-width: 1100px;         /* keeps readable line-length on desktop */
  margin-inline: auto;       /* centers the grid in the container */
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: start;
}

/* Right column spacing: lighter on desktop, none on mobile */
/* right column */
.mvs-body { 
  display: grid; 
  gap: 80px; 
  align-content: start; 
  padding-left: 24px;        /* was 50px; smaller so it looks centered */
}


@media (max-width: 960px){
  .mvs-grid{ 
    grid-template-columns: 1fr; 
    max-width: none;         /* let it be fully fluid on mobile */
  }
  .mvs-body{ padding-left: 0; gap: 20px; }
}

/* --- keep desktop behavior --- */
.mvs-visual {
  margin: 0;
  width: clamp(220px, 24vw, 340px);
  overflow: hidden;
  min-height: 420px;      /* ok for desktop */
  flex-shrink: 0;
  box-shadow: 10px 38px 60px rgba(11,154,23,.14);
  display: block;
}

/* --- mobile overrides --- */
@media (max-width: 960px){
  .mvs-visual{
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 3 / 4;  /* container controls height on mobile */
    min-height: 0;        /* ← remove the forced tall box */
  }
}

/* --- image: fill container, no aspect-ratio on the IMG --- */
.mvs-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* remove: aspect-ratio */
}
  /* right column */


  .mvs-kicker{
    display:inline-block; margin-bottom:10px; font-size:.58rem; letter-spacing:.5em;
    text-transform:uppercase; color:var(--brand); position:relative; padding-left:26px;
  }
  .mvs-kicker::before{ content:"#"; position:absolute; left:0; top:-1px; color:var(--gold); font-weight:500; }

  .mvs-copy p{ margin:0; color:var(--muted); line-height:1.4; font-weight:200; }





/* ================= Partner Section ================= */


#partner-with-us.partner-section{
  --text: var(--ink);
  --muted: var(--muted);
  --hash: var(--green-3);
  --overline: var(--ink);
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --font-head: var(--font-body);
  --h5-size: 1.18rem;
  --p-size: 1.01rem;
  --p-line: 1.5;
  --col-gap: 148px;
  --col-height: 960px;
  --col-pad-x: 10px;
  --col-pad-y: 50px;
  --stack-pad-y: 50px;
  --item-gap: 80px;
  --left-speed: 30s;
  --right-speed: 30s;
  --mask-top: 20%;
  --mask-bottom: 12%;
  --badge-w: 128px;
  --badge-h: 118px;
  --badge-border-color: var(--gold);
  --badge-border-w: 2px;
  --badge-shadow: 0 1px 2px rgba(0,0,0,.06);
    background: #E9F5E9;   /* pick a single light shade */
}

.partner__heading{
  display:inline-block;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
  position: relative;
  padding-bottom: 8px;
}



.partner{
  display: grid;
  gap: var(--col-gap);
  grid-template-columns: 1fr 1fr;
  align-items: start;
  padding: 0 0 clamp(28px, 4vw, 48px);
  color: var(--text);
}

/* Optional: make inner columns/cards slightly lighter for contrast */
.partner__col {
  background: var(--green-1);   /* or #F9FDF9 for very subtle */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  min-width: 0;
  padding-inline: var(--col-pad-x);
  padding-block: var(--col-pad-y);
}


.kv-text{
  margin: 0;
  color: var(--muted);
  font-size: var(--p-size);
  line-height: var(--p-line);
}

/* Ensure both columns scroll */
.partner .col-track { animation: scrollCol var(--speed, 30s) linear infinite; }



/* Also support explicit .left/.right classes if you use them */
.partner__col.left  .col-track { --speed: var(--left-speed); }
.partner__col.right .col-track { --speed: var(--right-speed); }

/* Keep the viewport & keyframes */
.col-viewport{
  height: var(--col-height);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--mask-top), #000 calc(100% - var(--mask-bottom)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 var(--mask-top), #000 calc(100% - var(--mask-bottom)), transparent 100%);
}

@keyframes scrollCol { to { transform: translateY(-50%); } }

.kv-overline{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 .55rem;
  line-height: 1;
  white-space: nowrap;
  min-height: var(--badge-h);
  font-family: var(--font-head);
  font-size: var(--h5-size);
  letter-spacing: .18em;
  color: var(--overline);
}

.kv-overline::before{
  content: "#";
  color: var(--hash);
  font-weight: 400;
  line-height: 1;
}

.kv-label{
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}


.kv-badge{
  flex: 0 0 auto;
  width: var(--badge-w);
  height: var(--badge-h);
  border-radius: var(--badge-radius);
  object-fit: cover;
  display: block;
  border: var(--badge-border-w) solid var(--badge-border-color);
  box-shadow: var(--badge-shadow);
  background: #fff;
}

/* paragraph */
.kv-text{
  margin: 0;
  color: var(--muted);
  font-size: var(--p-size);
  line-height: var(--p-line);
}
/* ----- Mobile fixes: Partner / "Why us.." ----- */
@media (max-width: 768px){

  /* 1) Stack columns; shrink spacing */
  .partner{
    grid-template-columns: 1fr;   /* was 1fr 1fr */
    gap: 16px;                    /* was var(--col-gap) 148px */
    padding-bottom: 24px;
  }

  /* 2) Softer cards on mobile */
  .partner__col{
    background: transparent;      /* remove green box so text isn’t in thin stripes */
    box-shadow: none;
    padding: 16px;
  }

  /* 3) Let content define height; remove mask & auto-scroll */
  .col-viewport{
    height: auto;                 /* was var(--col-height) 960px */
    -webkit-mask-image: none;
            mask-image: none;
    overflow: visible;
  }
  .partner .col-track{ animation: none; }   /* stop the marquee on small screens */

  /* 4) Friendlier type scale on phones */
  .kv-overline{
    min-height: auto;
    letter-spacing: .08em;
  }
  .kv-text{
    font-size: 0.98rem;
    line-height: 1.55;
  }

  /* 5) Tighten vertical rhythm */
  .kv-item{ margin-bottom: 14px; }
}
/* -- footer_v1.html ------------------------------------------------------------------------*/

/* ===== Site Footer ===== */

.footer-map {
  margin-top: 20px;
}

.footer-map h4 {
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: var(--brand); /* your gold color */
}
.footer-map iframe {
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}

.site-footer {
  background: var(--green-1);   /* same shade as site */
  padding: 40px 0 20px;
  font-size: 0.95rem;
  color: var(--ink);
}

.footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 20px;
}

.footer-heading {
  font-weight: 700;
  margin-bottom: 12px;
  font-size: 1rem;
  color: var(--ink);
}

.footer__products,
.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__products li,
.footer__links li {
  margin: 4px 0;
  color: var(--muted);
}

.footer__links a {
  text-decoration: none;
  color: var(--ink);
}
.footer__links a:hover {
  text-decoration: underline;
}

.footer__contact p {
  margin: 6px 0;
  line-height: 1.4;
}

.footer-social {
  margin-top: 12px;
}
.footer-social span {
  font-weight: 600;
  margin-right: 8px;
}
.footer-social a img {
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

.footer__bar {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-size: 0.85rem;
  color: var(--muted);
}

/* =========================
   WHATSAPP FLOATING BUTTON
   ========================= */
.wa-float{
  position:fixed; bottom:20px; right:20px;
  display:flex; align-items:center; gap:8px;
  text-decoration:none; z-index:1000;
}
.wa-float .on-hover-text{
  display:none; background:#ffffff; color:#110202;
  padding:6px 10px; border-radius:6px; font-size:.85rem; white-space:nowrap;
}
.wa-float:hover .on-hover-text{ display:inline-block; }



.footer-social {
margin-top: 15px;
}


.footer-social span {
color: #cbd5e1;
margin-right: 10px;
font-weight: bold;
}


.footer-social a img {
width: 28px;
height: 28px;
margin-right: 8px;
vertical-align: middle;
}