/* =============================================================
   0. Variables, Reset & Base Typography
   ============================================================= */
@supports (--fake-var: 0) {
  :root {
    --gp-blue:      #1e8bff;
    --gp-secondary: #dfe3e9; /* light‑grey accent */
    --gp-grey:      #555;
    --gp-light:     #f5f7fa;
    --gp-dark:      #0b2435;
    --gp-radius:    6px;
  }
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font:400 1rem/1.6 'Open Sans',sans-serif;
  color:var(--gp-grey);background:#fff;
}
h1,h2,h3,nav a{font-family:'Poppins',sans-serif;color:var(--gp-dark);}

/* =============================================================
   1. Header
   ============================================================= */
.site-header{background:#fff;border-bottom:1px solid #e7e7e7;position:sticky;top:0;z-index:1000;}
.header-wrap{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:2rem;padding:.9rem 1.5rem;
}

.brand-logo{height:170px;width:auto;}                 /* adjust size */

.main-nav{margin-left:auto;}
.main-nav ul{list-style:none;display:flex;gap:2rem;}
.main-nav a{text-decoration:none;font-weight:700;transition:color .2s;}
.main-nav a:hover{color:var(--gp-blue);}

.nav-icons{display:flex;align-items:center;gap:1rem;}
.icon-link{color:var(--gp-dark);font-size:1.2rem;transition:color .2s;}
.icon-link:hover{color:var(--gp-blue);}

.hamburger{display:none;background:none;border:0;cursor:pointer;}
.hamburger span{
  display:block;width:22px;height:3px;background:var(--gp-dark);
  margin:4px 0;transition:transform .3s,opacity .3s;
}
/* burger → “X” */
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* mobile nav (max-height trick) */
@media(max-width:768px){
  .main-nav{position:absolute;top:64px;right:0;left:0;background:#fff;
            overflow:hidden;max-height:0;transition:max-height .35s;}
  .main-nav ul{flex-direction:column;align-items:center;padding:1rem 0;}
  .main-nav a{padding:.8rem 0;}
  .main-nav.open{max-height:320px;}
  .hamburger{display:block;}
}

/* =============================================================
   2. Hero Banner  (image tag + overlay)
   ============================================================= */
.hero{
  position:relative;
  display:flex;align-items:center;
  min-height:75vh;               /* adjust banner height here */
  color:#fff;overflow:hidden;
}

/* background image fills the section */
.hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:-2;                    /* sits below overlay + text */
}

/* dark overlay for readability */
.hero::before{
  content:"";position:absolute;inset:0;
  background:rgba(11,36,53,.15); /* gp-dark @ 45% */
  z-index:-1;
}

/* text block */
.hero-inner{position:relative;max-width:600px;z-index:1;text-align:right;}
.hero-left{margin-left:clamp(2rem,8vw,150px);} /* desktop offset */

.hero-heading{font-size:clamp(2rem,3vw+1rem,3.2rem);line-height:1.15;margin-bottom:1rem;}
.hero-tagline{font-size:1.05rem;font-style:italic;margin-bottom:2rem;opacity:.9;}

@media(max-width:768px){
  .hero{justify-content:center;text-align:center;padding:0 1.2rem;}
  .hero-left{margin:0;}
}

/* ---------- Hero headline colour & shadow -------------------- */
.hero-heading,
.hero-tagline{
  color:#fff;                               /* brighter text */
  text-shadow:0 2px 4px rgba(0,0,0,.35);    /* soft lift */
}


/* =============================================================
   3. Buttons
   ============================================================= */
.btn{
  display:inline-block;font-weight:600;padding:.9rem 2.3rem;border-radius:var(--gp-radius);
  text-decoration:none;transition:.2s cubic-bezier(.4,0,.2,1);
}
.btn-primary{background:var(--gp-blue);color:#fff;border:2px solid var(--gp-blue);}
.btn-secondary{background:var(--gp-secondary);color:var(--gp-dark);border:2px solid var(--gp-secondary);}

.btn-primary:hover{
  background:#fff;color:var(--gp-blue);transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(30,139,255,.35);}
.btn-secondary:hover{
  background:var(--gp-blue);color:#fff;border-color:var(--gp-blue);
  transform:translateY(-3px);box-shadow:0 10px 25px rgba(30,139,255,.35);}

/* =============================================================
   4. Footer
   ============================================================= */
.site-footer{
  background:var(--gp-dark);color:#fff;margin-top:4rem;
  padding:3rem 1.5rem 2rem;font-size:.95rem;
}
.footer-grid{
  max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem 3rem;
}
.footer-heading{font-size:1.1rem;margin-bottom:.8rem;font-family:'Poppins',sans-serif;}
.footer-links{list-style:none;}
.footer-links li{margin:.35rem 0;}
.footer-links a{color:#f5f7fa;text-decoration:none;}
.footer-links a:hover{text-decoration:underline;}
.footer-contact{line-height:1.4;}
.social-links a{color:#fff;font-size:1.25rem;margin-right:1rem;}
.social-links a:hover{color:var(--gp-blue);}
.copy{
  margin-top:2rem;font-size:.8rem;text-align:center;
  border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;
}
.hero{
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  /* other properties stay */
}
.hero::before{
  content:"";
  position:absolute;inset:0;
  background:rgba(11,36,53,.45);   /* 45 % opacity */
}

/* brand colours for inline-SVG icons */
.icon-link.whatsapp  {color:#25D366;}  /* WhatsApp green  */
.icon-link.facebook  {color:#1877F2;}  /* Facebook blue   }

/* optional hover tint */
.icon-link.whatsapp:hover{color:#1DA851;}
.icon-link.facebook:hover{color:#0e62cc;}

/* ---------- helper backgrounds ---------- */
.bg-light  {background:var(--gp-light);}
.bg-accent {background:#eaf3ff;}

/* ---------- section padding & grids ------ */
.section-pad{padding:4rem 1.5rem;}
.section-heading{text-align:center;font-size:2rem;margin-bottom:2.5rem;}
.container{max-width:1200px;margin:0 auto;}
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2.5rem;}
.grid-4 {display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.grid-3 {display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

/* ---------- cards ------------------------ */
.card,.help-card,.svc-card{background:#fff;border-radius:var(--gp-radius);
  padding:2rem;box-shadow:0 2px 12px rgba(0,0,0,.05);}
.card.urgent{background:var(--gp-dark);color:#fff;text-align:center;}
.card.urgent .btn{margin-top:1rem;}

.help-card img{width:100%;height:140px;object-fit:cover;border-radius:var(--gp-radius);}
.help-card h3{margin:.8rem 0;}
.svc-card{min-height:170px;text-align:center;}

/* ---------- buttons ---------------------- */
.big{font-size:1.1rem;padding:1rem 2.8rem;}
.centre{text-align:center;display:inline-block;margin-top:2rem;}

/* ---------- diagnostic styles ----------- */
.diag{margin-top:3rem;border-top:1px solid #ddd;padding-top:2rem;}
#symFilter{width:100%;padding:.6rem 1rem;margin-bottom:1rem;
  border:1px solid #ccc;border-radius:var(--gp-radius);}
.sym-wrap{max-height:340px;overflow:auto;padding:1rem;border:1px solid #ddd;
  border-radius:var(--gp-radius);
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.sym-wrap fieldset{border:1px solid #e6e6e6;border-radius:var(--gp-radius);padding:.8rem 1rem;}
.sym-wrap legend{font-weight:600;font-size:.9rem;padding:0 .4rem;}
.sym-wrap label{display:block;font-size:.9rem;line-height:1.5;}
.sym-wrap input{margin-right:.4rem;}

.video-wrap {
  position: relative;
  width: 100%;
  /* 16:9 aspect ratio container */
  padding-top: 56.25%;
  background: #000;
  /* ensure no overflow hiding needed */
  overflow: visible;
}

.video-wrap video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  /* show the whole image, letterbox if necessary */
  object-fit: contain !important;
  object-position: center center;
}





.tiny{font-size:.75rem;opacity:.7;margin-top:.5rem;}

/* ---------- coloured SVG icons ---------- */
.icon-link.whatsapp{color:#25D366;}
.icon-link.facebook{color:#1877F2;}
.icon-link.whatsapp:hover{color:#1DA851;}
.icon-link.facebook:hover{color:#0e62cc;}

/* ---------- floating WhatsApp button ----- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:999;
  background:var(--gp-blue);padding:14px;border-radius:50%;
  box-shadow:0 4px 15px rgba(0,0,0,.25);transition:transform .2s;}
.wa-float:hover{transform:scale(1.1);}
.wa-float svg{display:block;}

@media(max-width:768px){
  .help-card img{height:120px;}
}
.booking-form{display:grid;gap:1rem;}
.booking-form .flex{display:flex;gap:1rem;}
.field{display:flex;flex-direction:column;flex:1;}
.field label{font-size:.8rem;font-weight:600;margin-bottom:.25rem;color:var(--gp-dark);}
.field input,.field select{
  padding:.65rem 1rem;border:1px solid #ccc;border-radius:var(--gp-radius);
  font:inherit;transition:border-color .2s;
}
.field input:focus,.field select:focus{border-color:var(--gp-blue);outline:none;}
@media(max-width:600px){.booking-form .flex{flex-direction:column;}}

.chatbox{max-width:600px;margin:2rem auto;border:1px solid #ddd;border-radius:var(--gp-radius);display:flex;flex-direction:column;height:420px;}
.chatlog{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:1rem;}
.msg{max-width:78%;padding:.7rem 1rem;border-radius:var(--gp-radius);font-size:.9rem;line-height:1.4;}
.user   {align-self:flex-end;background:var(--gp-blue);color:#fff;}
.bot    {align-self:flex-start;background:var(--gp-light);}
.chat-input{display:flex;border-top:1px solid #ddd;}
#chatTxt{flex:1;border:0;padding:.8rem 1rem;font:inherit;}
#chatSend{border:0;padding:.8rem 1.5rem;background:var(--gp-blue);color:#fff;}

.svc-card{
  transition:transform .3s,box-shadow .3s;
  cursor:pointer;
}
.svc-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.1);
}
/* ==== Animated blue-yellow border ================================== */
.svc-card{
  position:relative;cursor:pointer;
  padding:2rem;border-radius:var(--gp-radius);
  background:#fff;min-height:170px;text-align:center;
  transition:transform .35s;
}
.svc-card::before{               /* gradient frame */
  content:"";position:absolute;inset:-2px;
  border-radius:calc(var(--gp-radius) + 2px);
  background:linear-gradient(135deg,#1e8bff,#ffd34d,#1e8bff);
  background-size:300% 300%;animation:borderFlow 6s linear infinite;
  z-index:-1;
}
@keyframes borderFlow{
  0%{background-position:0% 50%;}
  100%{background-position:100% 50%;}
}
.svc-card:hover{transform:translateY(-6px);}
.see-all-wrap{text-align:center;margin-top:2.5rem;}
.btn-full{
  display:inline-block;padding:1rem 2.8rem;border-radius:999px;
  font-weight:600;text-decoration:none;
  background:#fff;border:2px solid var(--gp-blue);color:var(--gp-blue);
  transition:.25s;
}
.btn-full:hover{
  background:var(--gp-blue);color:#fff;
}
.chatbox{position:relative;}
.chat-avatar{
  width:44px;position:absolute;left:-22px;bottom:78px; /* overlaps log slightly */
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.msg.user{background:var(--gp-blue);color:#fff;border-bottom-right-radius:0;}
.msg.bot {
  background:#f0f5ff;border-bottom-left-radius:0;color:var(--gp-dark);
}


.wa-icon{
  width:100%;           /* fill the 50-px circle */
  height:100%;
  object-fit:cover;     /* keep aspect ratio */
}
.wa-float{
  width:50px;           /* circle diameter */
  height:50px;
  padding:0;            /* remove the old 14-px padding */
  background:none;      /* green is now in the SVG */
}

.miniCal{
  position:absolute;background:#fff;border:1px solid #ccc;border-radius:6px;
  box-shadow:0 4px 20px rgba(0,0,0,.1);padding:.5rem;font-size:.9rem;
  z-index:2000;
}
.mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3rem;}
.mc-head button{background:none;border:0;font-size:1.2rem;cursor:pointer;color:var(--gp-blue);}
.mc-grid{display:grid;grid-template-columns:repeat(7,2rem);gap:.25rem;}
.mc-grid button{width:2rem;height:2rem;border:0;background:var(--gp-light);border-radius:4px;cursor:pointer;}
.mc-grid button:hover:not(:disabled){background:var(--gp-blue);color:#fff;}
.mc-grid button:disabled{opacity:.35;cursor:not-allowed;}
.mc-dow{font-size:.7rem;text-align:center;color:#888;}


.payment{margin-top:1.2rem;}
.payment img{width:34px;margin-right:.6rem;vertical-align:middle;}


/* --- Payment block ---------------------------------------- */
.payment-wrap{text-align:center;margin-top:1.5rem;}
.payment-wrap h4{
  margin:.2rem 0 .6rem;
  font-size:1rem;font-weight:600;letter-spacing:.02em;color:#fff;
}
.payment{
  display:flex;justify-content:center;gap:1rem;margin-bottom:.6rem;
}
.payment img{width:36px;height:36px;}
.payment-note{
  font-size:.7rem;line-height:1.3;opacity:.8;color:#f5f7fa;
}


/* Highlighted fee banner  ----------------------------------- */
.price-badge{
  display:inline-block;
  margin-top:.6rem;
  padding:.45rem 1.2rem;
  background:var(--gp-blue);
  color:#fff;
  font-weight:600;
  border-radius:999px;
  font-size:1rem;
  opacity:0;transform:translateY(-6px);
  transition:opacity .35s ease, transform .35s ease;
}
.price-badge.show{opacity:1;transform:translateY(0);}


/* grey-out disabled <select> */
.booking-form select:disabled{
  background:#f1f1f1;color:#999;cursor:not-allowed;
}
.booking-form select.bad{border:2px solid #e53e3e;}

.video-wrap video{width:100%;height:100%;object-fit:cover;}


/* animated rate starts hidden */
.rate{position:relative;opacity:0;transform:translateY(6px);transition:.45s ease;}
.rate.show{opacity:1;transform:translateY(0);}

/* ============================================================
   SERVICES PAGE POLISH
   ============================================================ */

/* ---------- Generic section helpers ------------------------ */
.section-pad      {padding:4.5rem 1.5rem;}
.section-heading  {text-align:center;font-size:2.1rem;margin-bottom:3rem;}

/* subtle blue band for “Why Grounded Peace” */
.bg-accent        {background:#eef6ff;}         /* soft tint */

/* ---------- Grid utilities --------------------------------- */
.grid-3, .grid-4{
  display:grid;gap:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* ---------- ALT CARDS (info blocks) ------------------------ */
.alt-card article{
  background:#fff;
  border:1px solid #e6ecf5;
  border-radius:var(--gp-radius);
  padding:2rem 1.8rem;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.alt-card article:hover{transform:translateY(-6px);}
.alt-card h3{font-size:1.2rem;margin-bottom:.6rem;color:var(--gp-dark);}

/* ---------- SERVICE TILES (big cards) ---------------------- */
.svc-card.big{
  min-height:220px;
  padding:2.5rem 1.8rem;
  display:flex;flex-direction:column;justify-content:center;
  text-align:center;font-weight:500;
}
.svc-card.big h3{font-size:1.35rem;margin-bottom:.4rem;}
.svc-card.big p {opacity:.8;font-size:.95rem;}

/* ---------- ACCORDION ------------------------------------- */
.accordion{max-width:1000px;margin:0 auto;}

.acc-item{position:relative;}
.acc-btn{
  width:100%;text-align:left;
  background:#1e8bff;color:#fff;font-weight:600;
  padding:1rem 1.4rem;border:0;border-radius:6px;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  transition:background .25s;
}
.acc-btn:hover{background:#1268d4;}
.acc-btn::after{content:'+';font-size:1.4rem;line-height:1;}
.acc-panel.open+ .acc-btn,
.acc-btn.open{border-bottom-left-radius:0;border-bottom-right-radius:0;}

.acc-panel{
  max-height:0;overflow:hidden;
  background:#fff;border:1px solid #dfe7f5;border-top:0;
  padding:0 1.4rem;border-bottom-left-radius:6px;border-bottom-right-radius:6px;
  transition:max-height .35s ease,padding .35s ease;
}
.acc-panel.open{padding:1.4rem;max-height:1200px;} /* big number */

/* remove '+' & rotate to '–' when open */
.acc-btn.open::after{content:'–';transform:rotate(180deg);}

/* coloured accent strip */
.acc-item::before{
  content:'';position:absolute;left:-6px;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,#ffd34d,#1e8bff);
  border-radius:4px;
}

/* ---------- Price table ------------------------------------ */
.price-table{
  width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.92rem;
}
.price-table th,.price-table td{padding:.5rem .6rem;}
.price-table th{
  background:#f7f9ff;border-bottom:2px solid #e4e4e4;text-align:left;
}
.price-table td{border-bottom:1px solid #f0f0f0;}
.price-table td:last-child{text-align:right;font-weight:600;}

/* Animated fee already gets .rate.show. Give it colour */
.rate.show{color:#1e8bff;}

/* ---------- Bullet list inside panels ---------------------- */
.bullet-2{padding-left:1.1rem;list-style:disc;margin:.8rem 0 1.2rem;}
.bullet-2 li{margin:.25rem 0;}

/* ---------- Steps grid ------------------------------------- */
.steps article{text-align:center;padding:1.6rem 1rem;border-radius:6px;}
.steps h3   {font-size:1.15rem;margin-bottom:.5rem;color:#1e8bff;}

/* ---------- PAYMENT BANNER --------------------------------- */
.payment-wrap{max-width:280px;margin:2.5rem auto 0;text-align:center;}
.payment-wrap h4{margin-bottom:.8rem;font-size:1rem;font-weight:600;}
.payment img{filter:drop-shadow(0 1px 2px rgba(0,0,0,.1));}

/* ---------- Responsive tweaks ------------------------------ */
@media(max-width:600px){
  .section-heading{font-size:1.8rem;margin-bottom:2.2rem;}
  .page-hero h1   {font-size:2rem;}
  .svc-card.big   {min-height:180px;padding:2rem 1rem;}
}


/* make tile buttons look like cards, not native buttons */
.svc-card.big{border:0;background:none;text-align:center;cursor:pointer;}
.svc-card.big:focus-visible{outline:3px solid #1e8bff;outline-offset:4px;}

/* accordion header reset for <button> default padding */
.acc-btn{appearance:none;-webkit-appearance:none;}


/* ---------- STAT CARDS ------------------------------------- */
.stat-cards{gap:2rem;}
.stat-card{
  background:#fff;border:1px solid #e6ecf5;border-radius:var(--gp-radius);
  padding:2rem 1.6rem;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.stat-card:hover{transform:translateY(-6px);}
.stat{display:block;font-size:2.8rem;font-weight:700;color:#1e8bff;margin-bottom:.3rem;}
.stats h3{font-size:1.15rem;margin-bottom:.4rem;}


/* ---------- Icon cards ------------------------------------- */
.icon-cards img{width:46px;margin-bottom:.8rem}
.icon-cards article{text-align:center;padding:2rem}

/* ---------- Founder counters ------------------------------- */
.counter-wrap{display:flex;gap:2.5rem;margin-top:1.2rem;font-size:1.3rem}
.counter-wrap div{text-align:center}
.counter{color:#1e8bff;font-weight:700;display:block}
.counter-wrap em{display:block;font-size:.8rem;font-style:normal;color:#666}

/* ---------- Carousel --------------------------------------- */
.carousel{position:relative;overflow:hidden;border-radius:var(--gp-radius);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.carousel .slides{display:flex;transition:transform .6s ease}
.carousel img{width:100%;flex-shrink:0;height:330px;object-fit:cover}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border:0;color:#fff;font-size:1.8rem;padding:.2rem .8rem;cursor:pointer;border-radius:4px}
.prev{left:10px}.next{right:10px}

/* ---------- Accreditation strip ----------------------------- */
.accredit{display:flex;justify-content:center;gap:2rem;padding:2rem 1rem;background:#f7f9ff}
.accredit img{width:80px;opacity:.7;transition:opacity .3s}
.accredit img:hover{opacity:1}

/* ---------- Testimonial slider ----------------------------- */
.test-slider{position:relative;max-width:780px;margin:0 auto;text-align:center;font-size:1.1rem;font-style:italic}
.test-slider blockquote{margin:0;padding:0;opacity:0;transition:opacity .6s}
.test-slider blockquote.show{opacity:1}
.test-slider cite{display:block;margin-top:.6rem;font-style:normal;font-size:.9rem;color:#1e8bff}

/* ---------- CTA -------------------------------------------- */
.cta{text-align:center}
.cta h2{margin-bottom:1.2rem;font-size:1.9rem}

/* ---------- Small breakpoints ------------------------------ */
@media(max-width:640px){
  .counter-wrap{flex-direction:column;gap:.8rem;font-size:1.15rem}
  .carousel img{height:220px}
}


/* ---------- Icon cards ------------------------------------- */
.icon-cards img{width:46px;margin-bottom:.8rem}
.icon-cards article{text-align:center;padding:2rem}

/* ---------- Founder counters ------------------------------- */
.counter-wrap{display:flex;gap:2.5rem;margin-top:1.2rem;font-size:1.3rem}
.counter-wrap div{text-align:center}
.counter{color:#1e8bff;font-weight:700;display:block}
.counter-wrap em{display:block;font-size:.8rem;font-style:normal;color:#666}

/* ---------- Carousel --------------------------------------- */
.carousel{position:relative;overflow:hidden;border-radius:var(--gp-radius);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.carousel .slides{display:flex;transition:transform .6s ease}
.carousel img{width:100%;flex-shrink:0;height:330px;object-fit:cover}
.car-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);border:0;color:#fff;font-size:1.8rem;padding:.2rem .8rem;cursor:pointer;border-radius:4px}
.prev{left:10px}.next{right:10px}

/* ---------- Accreditation strip ----------------------------- */
.accredit{display:flex;justify-content:center;gap:2rem;padding:2rem 1rem;background:#f7f9ff}
.accredit img{width:80px;opacity:.7;transition:opacity .3s}
.accredit img:hover{opacity:1}

/* ---------- Testimonial slider ----------------------------- */
.test-slider{position:relative;max-width:780px;margin:0 auto;text-align:center;font-size:1.1rem;font-style:italic}
.test-slider blockquote{margin:0;padding:0;opacity:0;transition:opacity .6s}
.test-slider blockquote.show{opacity:1}
.test-slider cite{display:block;margin-top:.6rem;font-style:normal;font-size:.9rem;color:#1e8bff}

/* ---------- CTA -------------------------------------------- */
.cta{text-align:center}
.cta h2{margin-bottom:1.2rem;font-size:1.9rem}

/* ---------- Small breakpoints ------------------------------ */
@media(max-width:640px){
  .counter-wrap{flex-direction:column;gap:.8rem;font-size:1.15rem}
  .carousel img{height:220px}
}

/* ---------- light grey band behind founder block --------- */
.grey-band{background:#f5f7fa;padding:4rem 1.5rem;}

/* ---------- founder card --------------------------------- */
.founder-card{
  display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;
  background:#fff;border-radius:10px;padding:2.5rem;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
  max-width:1000px;margin:0 auto;transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.founder-card:hover{transform:translateY(-6px);}

/* photo */
.founder-img img{
  width:240px;height:240px;object-fit:cover;border-radius:50%;
  border:6px solid #fff;box-shadow:0 2px 14px rgba(0,0,0,.08);
}

/* text block */
.founder-bio{flex:1 1 300px;max-width:580px}
.founder-bio h3{font-size:1.55rem;margin:0 0 .3rem}
.founder-bio small{display:block;font-size:.9rem;font-weight:600;color:#1e8bff}
.qual{list-style:none;margin:.6rem 0 1.1rem;padding:0;font-size:.95rem}
.qual li::before{content:"✔";color:#1e8bff;margin-right:.45rem}

/* counters */
.counter-wrap{display:flex;gap:2rem;margin-top:1.4rem;font-size:1.25rem;flex-wrap:wrap}
.counter-wrap div{text-align:center;flex:1}
.counter{color:#1e8bff;font-weight:700;display:block;opacity:0;transform:translateY(6px);}
.counter.show{opacity:1;transform:none;transition:opacity .6s, transform .6s}

/* small screens */
@media(max-width:640px){
  .founder-img img{width:180px;height:180px}
  .counter-wrap{font-size:1.1rem;gap:1.2rem}
}
/* ---------- Roadmap --------------------------------------- */
.roadmap{padding:4rem 1.5rem;}
.rm-track{
  position:relative;max-width:900px;margin:0 auto;
  display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.rm-track::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;
  background:linear-gradient(#1e8bff,#ffd34d);transform:translateX(-50%);
}
.rm-step{
  position:relative;background:#fff;border-radius:10px;padding:1.8rem 1.4rem;
  box-shadow:0 2px 14px rgba(0,0,0,.05);transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.rm-step:hover{transform:translateY(-4px);}
.rm-step::before{
  content:'';position:absolute;top:1.2rem;left:50%;width:14px;height:14px;
  background:#1e8bff;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 3px rgba(0,0,0,.06);
  transform:translateX(-50%);
}
.rm-step h3{margin:0 0 .5rem;font-size:1.1rem;color:#1e8bff;text-align:center;}
.rm-step p {margin:0;font-size:.95rem;text-align:center;line-height:1.5;}
@media(max-width:640px){
  .rm-track::before{display:none;}          /* vertical line off on mobile */
  .rm-step::before{left:1.2rem;transform:none;}
  .rm-step{text-align:left;padding-left:3.2rem;}
}
/* ---------- Hours list ------------------------------------ */
.hour-list{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;font-size:1.05rem}
.hour-list li{list-style:none}

/* ---------- Calendar shell -------------------------------- */
#calWrap{max-width:420px;margin:0 auto;background:#fff;border-radius:10px;
         box-shadow:0 2px 16px rgba(0,0,0,.05);padding:1.2rem}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal-head h3{margin:0;font-size:1.1rem}
.cal-head button{background:#1e8bff;border:0;color:#fff;font-size:1rem;padding:.3rem .6rem;border-radius:6px;cursor:pointer}
.cal-head button:hover{background:#0b2435}

#calTable{width:100%;border-collapse:collapse;font-size:.9rem;text-align:center}
#calTable th{padding:.3rem 0;color:#666;font-weight:600}
#calTable td{padding:.55rem 0;cursor:default}

.unavail     {color:#bbb;background:#f0f0f0}
.avail       {background:#fafafa;position:relative}
.avail::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffd34d}
.avail:hover {background:#e9f3ff}
.today       {outline:2px solid #1e8bff}

/* ---------- Slot text ------------------------------------- */
.slots{margin-top:1.2rem;text-align:center;font-size:.9rem;color:#0b2435}

/* ---------- Contact grid ---------------------------------- */
.contact-box .contact-grid{
  max-width:950px;margin:0 auto;display:grid;gap:2.2rem;align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.contact-box img{width:100%;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05)}

/* responsive map */
.map-wrap{margin-top:1.5rem;text-align:center}
.map-frame{
  width:100%;max-width:650px;height:350px;border:0;border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.1);
}
.map-wrap small{display:block;margin-top:.4rem;font-size:.8rem}

/* ================================
   Quick Help & Quick Booking Tiles
   ================================ */

/* Wrap the two panels in #quick-section (or #quick-help) */
#quick-section .two-col {
  /* already defined in main.css as:
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
     gap:2.5rem;
  */
}

/* Common tile styling */
.tile {
  background: var(--gp-light);
  border-radius: var(--gp-radius);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

/* Animated pulsing border */
.animate-border {
  border: 2px solid var(--gp-blue);
  animation: borderPulse 4s ease-in-out infinite;
}

@keyframes borderPulse {
  0%, 100% { border-color: var(--gp-blue); }
  50%      { border-color: var(--gp-secondary); }
}

/* Hide dependent fields by default */
#qb-subservice-field,
#mode-field,
#price-field {
  display: none;
}

/* Reuse your .flex and .field rules from main.css */
/* .flex { display:flex; gap:1rem; } */
/* .field { display:flex; flex-direction:column; flex:1; } */
/* ─── Tiles ─── */
#quick-section .two-col { /* already set in your main.css */ }
.tile { background: var(--gp-light); border-radius: var(--gp-radius); padding:2rem; position:relative; }
.animate-border { border:2px solid var(--gp-blue); animation:borderPulse 4s ease-in-out infinite; }
@keyframes borderPulse { 0%,100%{border-color:var(--gp-blue);}50%{border-color:var(--gp-secondary);}}

/* ─── WhatsApp “Now” button ─── */
.btn-whatsapp { background: var(--gp-dark) !important; color: #fff !important; }
.btn-whatsapp:hover { background: #0b2435 !important; }

/* ─── Description textarea ─── */
#qb-description-field { margin:1rem 0; }
#qb-description {
  width:100%; min-height:80px; padding:.65rem 1rem;
  border:1px solid #ccc; border-radius:var(--gp-radius);
  font:inherit; resize:vertical;
}

/* ─── Inline calendar ─── */
#qb-calendar {
  margin:1rem 0; background:#fff; border:1px solid #ccc;
  border-radius:var(--gp-radius); padding:.5rem; font-size:.9rem;
}
#qb-calendar .cal-nav {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem;
}
#qb-calendar .cal-nav button {
  background:none; border:none; font-size:1.2rem; color:var(--gp-blue);
  cursor:pointer;
}
#qb-calendar table { width:100%; border-collapse:collapse; text-align:center; }
#qb-calendar th { padding:.3rem; color:var(--gp-dark); }
#qb-calendar td {
  width:2.2rem; height:2.2rem; cursor:pointer; border-radius:4px;
}
#qb-calendar td.disabled { opacity:.3; pointer-events:none; }
#qb-calendar td.selected {
  background:var(--gp-blue); color:#fff;
}

/* ─── Animated price button ─── */
.price-button {
  display:inline-block; margin-top:1rem;
  padding:.75rem 1.5rem; background:var(--gp-blue);
  color:#fff; border:none; border-radius:var(--gp-radius);
  font-size:1rem; cursor:pointer;
  opacity:0; transform:translateY(-10px);
  transition:opacity .35s ease, transform .35s ease;
}
.price-button.show { opacity:1; transform:translateY(0); }
/* =============================================================
   Quick Help & Quick Booking Tiles Overrides
   ============================================================= */

/* Dark‑fill only the Quick‑Booking tile */
#quick-section .booking-tile {
  background: var(--gp-dark);
  color: #fff;
}

/* Labels and form controls inside the dark tile */
#quick-section .booking-tile .field label {
  color: #fff;
}
#quick-section .booking-tile input,
#quick-section .booking-tile select,
#quick-section .booking-tile textarea {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
}
#quick-section .booking-tile input::placeholder,
#quick-section .booking-tile textarea::placeholder {
  color: rgba(255,255,255,0.7);
}

/* Primary buttons invert for contrast */
#quick-section .booking-tile .btn-primary {
  background: #fff;
  color: var(--gp-dark);
  border-color: #fff;
}
#quick-section .booking-tile .btn-primary:hover {
  background: var(--gp-blue);
  color: #fff;
}

/* “WhatsApp Now” tile button */
#quick-section .booking-tile .btn-whatsapp {
  background: var(--gp-dark);
  color: #fff;
}
#quick-section .booking-tile .btn-whatsapp:hover {
  background: #0b2435;
}

/* Description textarea */
#qb-description {
  width: 100%;
  min-height: 80px;
  padding: .65rem 1rem;
  border: 1px solid #ccc;
  border-radius: var(--gp-radius);
  font: inherit;
  resize: vertical;
}

/* Inline calendar shell */
#qb-calendar {
  margin: 1rem 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: var(--gp-radius);
  padding: .5rem;
  font-size: .9rem;
}
#qb-calendar .cal-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}
#qb-calendar .cal-nav button {
  background: none;
  border: none;
  font-size: 1.2rem;
  color: var(--gp-blue);
  cursor: pointer;
}
#qb-calendar table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
#qb-calendar th {
  padding: .3rem;
  color: var(--gp-dark);
}
#qb-calendar td {
  width: 2.2rem;
  height: 2.2rem;
  cursor: pointer;
  border-radius: 4px;
}
#qb-calendar td.disabled {
  opacity: .3;
  pointer-events: none;
}
#qb-calendar td.selected {
  background: var(--gp-blue);
  color: #fff;
}

/* Animated “price” button */
.price-button {
  display: inline-block;
  margin-top: 1rem;
  padding: .75rem 1.5rem;
  background: var(--gp-blue);
  color: #fff;
  border: none;
  border-radius: var(--gp-radius);
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .35s ease, transform .35s ease;
}
.price-button.show {
  opacity: 1;
  transform: translateY(0);
}
/* 1) Restore header icon colours (already in your main.css) */
/* .icon-link.whatsapp  { color: #25D366; }
   .icon-link.facebook  { color: #1877F2; } */

/* 2) Target **only** the Quick‑Help tile’s WhatsApp button */
.quick-help-tile .btn-whatsapp-tile {
  background: var(--gp-dark);
  color: #fff;
}
.quick-help-tile .btn-whatsapp-tile:hover {
  background: #0b2435;
}

/* 3) Ensure the general .icon-link.whatsapp / .icon-link.facebook remain intact */
.icon-link.whatsapp:hover { color: #1DA851; }
.icon-link.facebook:hover { color: #0e62cc; }

/* add to assets/css/main.css */
.tile--dark {
  background: var(--gp-dark);
  color: #fff;
}
.tile--dark .accent {
  color: var(--gp-blue);
}
.tile--dark .btn-primary {
  background: #fff;
  color: var(--gp-dark);
  border-color: #fff;
}
.tile--dark .btn-primary:hover {
  background: var(--gp-light);
  color: var(--gp-dark);
}
.tile--dark p.tiny {
  color: #ddd;
}
/* ensure ample padding for text legibility */
.tile {
  padding: 2.5rem;
}

/* yellow ↔ grey animated border */
.animate-border-yg {
  border: 3px solid #ffd34d; /* start yellow */
  animation: borderPulseYG 4s ease-in-out infinite;
}

@keyframes borderPulseYG {
  0%, 100% { border-color: #ffd34d; }  /* yellow */
  50%      { border-color: #dfe3e9; }  /* light-grey */
}

/* quick‑help dark background already in place via .tile--dark */
.tile--dark {
  background: var(--gp-dark);
  color: #fff;
}

.tile--dark .accent {
  color: var(--gp-blue);
}

.tile--dark .btn-primary {
  background: #fff;
  color: var(--gp-dark);
  border-color: #fff;
}

.tile--dark .btn-primary:hover {
  background: var(--gp-light);
  color: var(--gp-dark);
}

.tile--dark p.tiny {
  color: #ddd;
}


/* ─── Style only the Quick‑Help tile ─── */
#quick-section .tile:first-of-type {
  background: var(--gp-dark);
  color: #fff;
  text-align: center;
  border: 3px solid var(--gp-blue);
  border-radius: var(--gp-radius);
  animation: pulseBorder 3s ease-in-out infinite;
}

/* pulsing border animation */
@keyframes pulseBorder {
  0%, 100%   { border-color: var(--gp-blue); }
  50%        { border-color: var(--gp-secondary); }
}

/* ensure the “Now?” accent stays blue */
#quick-section .tile:first-of-type .accent {
  color: var(--gp-blue);
}

/* style the big WhatsApp button */
#quick-section .tile:first-of-type .btn-primary {
  background: var(--gp-blue);
  color: #fff;
  border-color: var(--gp-blue);
}
#quick-section .tile:first-of-type .btn-primary:hover {
  background: #fff;
  color: var(--gp-blue);
}

/* de‑emphasize the tiny schedule text */
#quick-section .tile:first-of-type .tiny {
  color: #ccc;
}
/* Gradient text for “Need Help Now?” */
#quick-section .tile:first-of-type h2 {
  /* gradient from your blue to yellow */
  background: linear-gradient(135deg, var(--gp-blue), #ffd34d);
  /* clip the background into the text */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ───── QUICK‑HELP TILE OVERRIDES ───── */
#quick-section .tile:first-of-type {
  background: var(--gp-dark);
  color: #fff;
  text-align: center;
  border: 3px solid var(--gp-blue);
  border-radius: var(--gp-radius);
  padding: 2.5rem;
  animation: pulseBorder 3s ease-in-out infinite;
}

@keyframes pulseBorder {
  0%, 100% { border-color: var(--gp-blue); }
  50%      { border-color: var(--gp-secondary); }
}

/* gradient text for the “Need Help Now?” */
#quick-section .tile:first-of-type h2 {
  background: linear-gradient(135deg, var(--gp-blue), #ffd34d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* restyle the big WhatsApp button inside it */
#quick-section .tile:first-of-type .btn-primary {
  background: var(--gp-blue);
  color: #fff;
  border-color: var(--gp-blue);
}
#quick-section .tile:first-of-type .btn-primary:hover {
  background: #fff;
  color: var(--gp-blue);
}

/* de‑emphasize the tiny hours text */
#quick-section .tile:first-of-type .tiny {
  color: #ccc;
}

.acc-panel {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe7f5;
  border-top: 0;
  padding: 0 1.4rem;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  transition: max-height .35s ease, padding .35s ease;
}
.acc-panel.open {
  padding: 1.4rem;
  /* allow it to expand fully (or pick a large enough value) */
  max-height: 2000px;
  overflow: visible;
}
/* ----------------------------------------------------------------------
   Override for accordion panels so they never clip their content
---------------------------------------------------------------------- */
.acc-panel.open {
  max-height: none !important;
  overflow: visible !important;
}
/* ─── Animated Gradient Divider ───────────────────────────────── */
.animated-divider {
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--gp-blue),
    #ffd34d,
    var(--gp-blue)
  );
  background-size: 200% 100%;
  animation: slideGradient 3s linear infinite;
  margin: 1.5rem 0;
}

@keyframes slideGradient {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 0%; }
}

/* ─── Card Borders ──────────────────────────────────────────── */
.alt-card article {
  border: 2px solid var(--gp-light);
  padding: 1.5rem;
  border-radius: var(--gp-radius);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.alt-card article:hover {
  border-color: var(--gp-blue);
  box-shadow: 0 4px 20px rgba(30, 139, 255, 0.2);
}
.bg-light { background: var(--gp-light); }
/* new dark‑blue background utility */
.bg-dark {
  background: var(--gp-dark);
}
/* light text on dark background */
.text-light {
  color: #fff;
}
/* override section heading color */
.bg-dark .section-heading {
  color: #fff;
}
/* keep each alt‑card on its own light card with subtle border */
.bg-dark .alt-card article {
  background: var(--gp-light);
  border: 1px solid rgba(255,255,255,0.1);
}
/* ensure the card text reads well */
.bg-dark .alt-card h3,
.bg-dark .alt-card p {
  color: var(--gp-dark);
}
/* space things nicely in dark band */
.bg-dark .alt-card {
  gap: 1.5rem;
}
/* ─── Wrapper with animated gradient border ─── */
.founder-wrapper {
  position: relative;
  padding: 3rem;
  border-radius: var(--gp-radius);
  background-origin: border-box;
  background-clip: content-box, border-box;
  /* inner fill, then outer animated border */
  background-image:
    linear-gradient(var(--gp-light), var(--gp-light)),
    linear-gradient(135deg, var(--gp-blue), #ffd34d, var(--gp-blue));
  background-size: 100% 100%, 200% 200%;
  animation: borderShift 6s linear infinite;
}
@keyframes borderShift {
  0%   { background-position: 0%   0%, 0%   0%; }
  50%  { background-position: 0%   0%, 100% 100%; }
  100% { background-position: 0%   0%, 0%   0%; }
}

/* ─── “Get to Know The Founder” ribbon ─── */
.founder-ribbon {
  position: absolute;
  top: -0.8rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #fff;
  background: linear-gradient(90deg, var(--gp-blue) 20%, #ffd34d 50%, var(--gp-blue) 80%);
  background-size: 200% 200%;
  animation: ribbonWave 3s ease-in-out infinite alternate;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  z-index: 2;
}
@keyframes ribbonWave {
  0%   { background-position: 0%   50%; transform: translateX(-50%) rotate(-2deg)   scale(1); }
  100% { background-position: 100% 50%; transform: translateX(-50%) rotate(2deg)   scale(1.05); }
}

/* ─── Tweak the card Fade‑In ─── */
.founder-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: center;
  animation: fadeInUp 1s ease both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);      }
}

/* ─── Squircle image pop ─── */
.founder-img img {
  width: 100%;
  border-radius: 1.2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}
.founder-img img:hover {
  transform: scale(1.07);
}
.founder-img img {
  width: 100%;
  height: auto;             /* let it scale its height */
  object-fit: contain;      /* show the whole image */
  border-radius: 1.2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}


/* ─── Responsive stack ─── */
@media (max-width: 768px) {
  .founder-card { grid-template-columns: 1fr; text-align: center; }
  .founder-img { margin: 0 auto 1.5rem; }
}

#reviews .container { max-width: 720px; text-align: center; }
.cta-review {
  display: inline-block; padding: 1rem 2.4rem; margin: 0 auto 2.2rem;
  background: #1e8bff; color: #fff; font-weight: 600; font-size: 1.15rem;
  border: 0; border-radius: 60px; cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  animation: pulse 3s infinite;
}
.cta-review:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(30,139,255,.35);}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(30,139,255,.4);}70%{box-shadow:0 0 0 15px rgba(30,139,255,0);}100%{box-shadow:0 0 0 0 rgba(30,139,255,0);} }
.review-drawer {
  background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.07);
  padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  max-height: 0; overflow: hidden; opacity: 0; margin: 0 auto;
  transition: max-height .45s ease, opacity .45s;
}
.review-drawer.show { max-height: 1600px; opacity: 1; }
.review-drawer h3,
.review-drawer .actions { grid-column: 1/3; }
.lbl { font-weight: 600; text-align: left; margin: .4rem 0 -.2rem; }
.review-drawer select,
.review-drawer input,
.review-drawer textarea {
  width: 100%; font: inherit; border: 1px solid #cbd3dc; border-radius: 6px;
  padding: .7rem .8rem; background: #f9fbfd;
}
.review-drawer textarea { min-height: 120px; resize: vertical; }
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; font-size: 2rem; cursor: pointer; }
.stars input { display: none; }
.stars label { color: #ccd2da; padding: 0 .04em; transition: .2s; }
.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label { color: #ffc107; }
.actions { display: flex; gap: 1rem; justify-content: flex-start; margin-top: .4rem; }
.btn-outline { background: #fff; color: #1e8bff; border: 2px solid #1e8bff; }
.rev-feed { list-style: none; margin: 2.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.rev-feed li { background: #fff; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.07); padding: 1.2rem; text-align: left; }
.rev-feed .meta { font-size: .85rem; color: #666; margin-bottom: .4rem; }
.rev-feed .stars-sm { color: #ffc107; font-size: 1.1rem; margin-right: .3rem; }
@media (max-width: 800px) {
  .review-drawer { grid-template-columns: 1fr; }
  .review-drawer h3, .review-drawer .actions { grid-column: 1/2; }
}
/* =============================================================
   FAQ Page Styles
   ============================================================= */
.faq-section {
  max-width: 800px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--gp-secondary);
}
.faq-question {
  padding: 1rem;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .3s;
}
.faq-question:hover {
  background: rgba(30,139,255,.05);
}
.faq-question::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  transition: transform .3s;
}
.faq-item.open .faq-question::after {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1rem;
  transition: max-height .5s ease, padding .3s ease;
}
.faq-item.open .faq-answer {
  max-height: 200vh;
  padding: 1rem;
}
.faq-book-btn {
  display: inline-block;
  margin-top: .75rem;
  padding: .5rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  border-radius: var(--gp-radius);
  background: var(--gp-blue);
  color: #fff;
  text-decoration: none;
  animation: pulseBG 2s infinite;
}
.faq-book-btn:hover {
  background: #fff;
  color: var(--gp-blue);
  box-shadow: 0 0 0 0 rgba(30,139,255,0.5);
}
@keyframes pulseBG {
  0%,100%  { box-shadow: 0 0 0   0 rgba(30,139,255,0.5); }
  50%      { box-shadow: 0 0 8px 4px rgba(30,139,255,0.2); }
}
/* =============================================================
   FAQ — Modern Card Layout & Animations
   ============================================================= */
.faq-section {
  max-width: 800px;
  margin: 0 auto;
  background: var(--gp-light);
  border-radius: var(--gp-radius);
}

.section-heading {
  text-align: center;
  position: relative;
}
.section-heading::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 0.5rem auto 2rem;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--gp-blue), #ffd34d);
  background-size: 200% 200%;
  animation: slideGrad 3s ease-in-out infinite;
}
@keyframes slideGrad {
  0%,100%   { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

.faq-item {
  background: #fff;
  border-radius: var(--gp-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
}
.faq-question:hover {
  background: var(--gp-blue);
  color: #fff;
}
.faq-question i {
  font-size: 1.1rem;
  transition: transform 0.3s, color 0.3s;
}
.faq-item.open .faq-question i {
  transform: rotate(180deg);
  color: #fff;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  transition: max-height 0.5s ease, padding 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 400px; /* plenty for your content */
  padding: 1rem 1.5rem 1.5rem;
}

.faq-book-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--gp-radius);
  background: var(--gp-blue);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  animation: pulseBtn 2s infinite;
}
@keyframes pulseBtn {
  0%,100%  { box-shadow: 0 0 0   0 rgba(30,139,255,0.5); }
  50%      { box-shadow: 0 0 8px 4px rgba(30,139,255,0.2); }
}
.faq-book-btn:hover {
  background: #fff;
  color: var(--gp-blue);
  box-shadow: none;
}
/* ---------------- FAQ accordion ---------------- */
.faq-section .faq-item {
  border-radius: var(--gp-radius);
  background: #fff;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.faq-question {
  width: 100%;
  text-align: left;
  background: var(--gp-blue);
  color: #fff;
  padding: 1rem 1.25rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  cursor: pointer;
  transition: background .25s;
}
.faq-question:hover {
  background: #1268d4;
}

.faq-question i {
  font-size: 1.25rem;
  transition: transform .3s ease;
}

/* hidden by default */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  padding: 0 1.25rem;
  background: #fafafa;
}

/* when open */
.faq-item.open .faq-answer {
  padding: 1rem 1.25rem 1.5rem;
  max-height: 500px; /* large enough to show content */
}

.faq-item.open .faq-question i {
  transform: rotate(180deg);
}

/* “Book Now” button inside answer */
.faq-book-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: .65rem 1.4rem;
  background: var(--gp-blue);
  color: #fff;
  border-radius: var(--gp-radius);
  text-decoration: none;
  transition: background .25s;
}
.faq-book-btn:hover {
  background: #1268d4;
}
/* ─── FAQ Accordion ─── */
.faq-item {
  margin-bottom: 1rem;
  border-radius: var(--gp-radius);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gp-blue);
  color: #fff;
  padding: 1rem 1.5rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.faq-question:hover {
  background: #1268d4;
}
.faq-question .fas {
  transition: transform .3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height .4s ease, padding .3s ease;
  padding: 0 1.5rem;
}
.faq-item.open .faq-answer {
  max-height: 500px;        /* big enough to show your content */
  padding: 1rem 1.5rem;
}

.faq-item.open .faq-question .fas {
  transform: rotate(180deg);
}

/* ─── “Book Now” button pulse ─── */
.faq-book-btn {
  display: inline-block;
  margin-top: .75rem;
  padding: .75rem 1.5rem;
  background: var(--gp-blue);
  color: #fff;
  border-radius: var(--gp-radius);
  font-weight: 600;
  text-decoration: none;
  animation: pulseBtn 2s ease-in-out infinite;
}

@keyframes pulseBtn {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.05); }
}
/* ─── FAQ Accordion Fallback Icons ─── */
.faq-question {
  position: relative;
  padding-right: 2rem;    /* make room for the icon */
}

/* hide any missing <i> */
.faq-question .fas {
  visibility: hidden;
}

/* fallback “+” */
.faq-question::after {
  content: "+";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  font-weight: bold;
  transition: transform .3s ease;
}

/* when open, switch to “–” and rotate a bit */
.faq-item.open .faq-question::after {
  content: "–";
  transform: translateY(-50%) rotate(180deg);
}
/* ─── Icon styling & bounce ─── */
.contact-link {
  display: inline-flex;
  align-items: center;
  margin: 0 .25rem;
  text-decoration: none;
  color: var(--gp-dark);
  font-weight: 600;
}
.contact-link i {
  margin-right: .4rem;
  font-size: 1.1rem;
  color: var(--gp-blue);
  animation: iconBounce 2s ease-in-out infinite;
}

/* keyframes for bounce */
@keyframes iconBounce {
  0%, 100%   { transform: translateY(0); }
  50%        { transform: translateY(-4px); }
}

/* on hover, icons—and link text—brighten */
.contact-link:hover i,
.contact-link:hover {
  color: #1268d4;
}