/* =========================================================
   Sanober Consultancy – GLOBAL BASE + LAYOUT
   ========================================================= */

/* --- Reset ------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
@import url('https://fonts.googleapis.com/css2?family=Tinos:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');
body{
  font-family:Tinos,Inter,Poppins,Arial,sans-serif;
  background:#fff;
  color:#171C32;
  line-height:1.6;
}

/* --- Fluid container with wide gutters ------------------- */
.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 2.4rem;          /* desktop gutter */
}
@media(max-width:1200px){.container{padding:0 1.2rem}}
@media(max-width:700px){.container{padding:0 .6rem}}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
   W I D E   S E C T I O N S   ( new )
   -----------------------------------------------------------
   These two rules widen only the core-services section and
   the “Other Popular Services” section so their cards can
   sit on a single desktop row at full width.
   <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */
.services .container{max-width:1400px}
.other-services .container{max-width:1400px}

/* =========================================================
   NAVIGATION
   ========================================================= */
.topbar{
  background:#171C32;
  color:#fff;
  padding:.75rem 0;
  position:relative;
  z-index:100;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between}
.brand{margin-right:auto}
.brand img{height:62px}

/* ---- Desktop links ---- */
.nav-links{
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
  margin-left:auto;
}
.nav-links a{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:1.05rem;
  padding:.45em .9em;
  border-radius:6px;
  transition:.18s;
}
.nav-links a:hover,
.nav-links a.active{
  background:#F2F1E5;
  color:#171C32!important;
}

/* ---- Dropdown (desktop) ---- */
.dropdown-parent{position:relative}
.dropdown-toggle::after{content:" ▾";font-size:.8em}
.dropdown{
  display:none;
  position:absolute;
  top:100%;left:0;
  background:#171C32;
  color:#fff;
  min-width:240px;
  border-radius:0 0 12px 12px;
  padding:.8rem 0;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
  border:1px solid #232949;
  flex-direction:column;
  z-index:900;
  list-style:none;
}
.dropdown.open{display:flex}
.dropdown a{
  display:block;
  padding:.7rem 1.7rem;
  font-weight:500;
  color:#fff;
  transition:.15s;
  border-radius:0;
}
.dropdown a:hover{
  background:#F2F1E5;
  color:#171C32!important;
}

/* ---- Burger button ---- */
.burger{
  background:none;
  border:none;
  cursor:pointer;
  display:none;
  flex-direction:column;
  gap:6px;
}
.burger span{
  width:32px;height:3px;
  background:#F2F1E5;
  border-radius:2px;
}

/* ---- Slide-out mobile nav ---- */
.mobile-nav{
  display:none;
  position:fixed;
  top:0;right:0;
  width:74vw;max-width:330px;
  height:100vh;
  background:#171C32;
  box-shadow:-4px 0 14px rgba(0,0,0,.18);
  z-index:1200;
  flex-direction:column;
  padding:2rem 1.3rem;
  transform:translateX(100%);
  transition:transform .23s;
}
.mobile-nav.show{display:flex;transform:translateX(0)}
.mobile-nav ul{list-style:none}
.mobile-nav a,
.mobile-nav span.dropdown-mobile{
  color:#fff;
  font-size:1.17rem;
  font-weight:600;
  text-decoration:none;
  display:block;
  margin:1rem 0;
}
.dropdown-mobile-list{display:none;padding-left:1rem;list-style:none}
.dropdown-mobile-list.open{display:block}
.dropdown-mobile-list a{
  font-size:1rem;
  color:#F2F1E5;
  margin:.5rem 0;
}

@media(max-width:900px){
  .nav-links{display:none}
  .burger{display:flex}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:58vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:url('hero.png') center/cover no-repeat;
  filter:brightness(.7) grayscale(.1);
}
.hero-overlay{
  position:relative;
  z-index:2;
  width:100%;
  min-height:58vh;
  background:rgba(23,28,50,.84);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:2rem;
  color:#fff;
  padding:4rem 2rem;
}
.hero h1{
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:900;
  letter-spacing:.02em;
}
.hero-sub{
  color:#F2F1E5;
  font-size:1.18rem;
  max-width:740px;
}

/* pill buttons */
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.cta-pill{
  border-radius:999px;
  font-weight:700;
  padding:.9rem 1.9rem;
  text-decoration:none;
  transition:.18s;
  display:inline-block;
}/* === Make BOTH hero pills identical ===================== */
.dark-pill,
.outline-pill{
  background:#F2F1E5;
  color:#171C32;
  border:0;
}
.dark-pill:hover,
.outline-pill:hover{
  background:#ffffff;
  color:#171C32;
  transform:translateY(-2px) scale(1.04);
}

/* generic CTA used outside hero */
.cta-btn{
  background:#171C32;
  color:#fff;
  font-weight:700;
  padding:1rem 2.4rem;
  border-radius:9px;
  font-size:1.14rem;
  text-decoration:none;
  transition:.18s;
  display:inline-block;
}
.cta-btn:hover{
  background:#232949;
  transform:translateY(-2px) scale(1.04);
}
.cta-btn.dark{background:#232949}
.cta-btn.dark:hover{background:#F2F1E5;color:#171C32}

/* =========================================================
   SECTION SPACING
   ========================================================= */
.section,.section-lg{padding:4rem 0}
.section-lg{padding:5rem 0}
.section-title{
  text-align:center;
  font-size:2.1rem;
  font-weight:800;
  margin-bottom:3rem;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about h2{
  font-size:2rem;
  font-weight:700;
  margin-bottom:1.2rem;
  text-align:center;
}
.about p{
  font-size:1.05rem;
  text-align:center;
  max-width:860px;
  margin:0 auto;
}

/* =========================================================
   SERVICE / INDUSTRY CARDS
   ========================================================= */
.service-card{
  background:#f4f4ee;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(23,28,50,.08);
  text-align:center;
  padding:2.4rem 1.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
  transition:.18s;
  border:1.4px solid #ececec;
  text-decoration:none;
  color:#232949;
}
.service-card:hover{
  box-shadow:0 8px 24px rgba(23,28,50,.14);
  transform:translateY(-4px) scale(1.03);
  border-color:#dcdce3;
}
.service-card img{
  width:80px;
  height:80px;
  object-fit:contain;
}
.service-card h3{
  font-size:1.16rem;
  font-weight:800;
  color:#232949;
}

/* ========= Core services (3-col)  — wider cards ========= */
.core-3col{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
}

/* ========= Popular services (1 × 4 on large) ============ */
.popular-1x4{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
}
@media(min-width:1050px){
  .popular-1x4{grid-template-columns:repeat(4,1fr)}
}

/* =========================================================
   INDUSTRIES GRID (4 × 2)
   ========================================================= */
.industry-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2rem;
}
@media(min-width:950px){
  .industry-grid{grid-template-columns:repeat(4,1fr)}
}
.industry-grid .service-card{
  height:120px;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1.05rem;
}

/* =========================================================
   CTA STRIPE
   ========================================================= */
.cta-wide{
  background:#232949;
  color:#fff;
  text-align:center;
  padding:5rem 1rem;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.cta-wide h2{font-size:2.05rem;font-weight:800}
.cta-wide p{font-size:1.07rem;color:#F2F1E5}
.cta-wide .outline-pill{
  background:#fff;
  color:#171C32;
  border:2px solid #171C32;
}
.cta-wide .outline-pill:hover{
  background:#171C32;
  color:#fff;
  border-color:#171C32;
  transform:translateY(-2px) scale(1.04);
}

/* =========================================================
   FOOTER
   ========================================================= */
footer{
  background:#171C32;
  color:#F2F1E5;
  text-align:center;
  padding:4rem 0;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2rem;
}
.footer-logo{height:68px}
.footer-nav{
  display:flex;
  gap:1.7rem;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-nav a{
  color:#F2F1E5;
  text-decoration:none;
  font-weight:700;
  padding:.4em .7em;
  border-radius:7px;
  transition:.18s;
}
.footer-nav a:hover{background:#232949}
.contact{font-size:.97rem}
copyright{font-size:.9rem}

/* ---------------------------------------------------------
   mobile close “✕” button
   --------------------------------------------------------- */
.mobile-close{
  background:none;
  border:none;
  color:#F2F1E5;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
  align-self:flex-end;
  margin:-.2rem -.2rem 1rem 0;
  transition:.25s;
}
.mobile-close:hover{transform:rotate(90deg);color:#ffffff}

/* ---------------------------------------------------------
   reveal animation keyframes  (already referenced in JS)
   --------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(60px);transition:.8s ease}
.reveal.active{opacity:1;transform:none}
.reveal.slide-up{transition-delay:.15s}
/* -------------------------------
   1)  Dark-blue section tweaks
   ------------------------------- */
section[style*="#232949"]{           /* whole section text colour   */
  color:#F2F1E5;
}

/* make each item sit on the blue, not a beige card  */
section[style*="#232949"] .values-flex article{
  background:transparent;
  border:none;
  padding-left:0;
}

/* -------------------------------
   2)  Testimonial carousel fix
   ------------------------------- */
.testimonial-carousel{
  max-width:900px;
  flex:1;
  overflow:hidden;
}
.testimonial-track{
  display:flex;
  transition:transform .6s ease;
}
.testimonial-card{
  min-width:100%;
  background:#F2F1E5;
  color:#171C32;
  padding:2rem 1.6rem;
  font-size:1.05rem;
  border-left:4px solid #232949;
}
.testimonial-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4rem;                 /* keeps arrows outside the card  */
}
/* === SIDE-BY-SIDE SERVICE ROWS  ========================= */
.service-row{
  display:flex;
  align-items:center;
  gap:3rem;
  margin-bottom:4.5rem;
}
.service-row:nth-child(even){flex-direction:row-reverse;}   /* alternate */

.service-row img{
  flex:0 0 45%;
  max-width:45%;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

.service-text{flex:1}
.service-text h3{font-size:1.55rem;font-weight:800;margin-bottom:1.1rem}
.service-text p{font-size:1.05rem;margin-bottom:1.8rem}

/* keep Learn-More button readable on hover */
.service-text .cta-btn:hover{color:#fff}
@media(max-width:840px){
  .service-row,
  .service-row:nth-child(even){flex-direction:column}
  .service-row img,
  .service-text{max-width:100%}
}
/* === Small “Learn More” pill  =================================== */
.cta-btn.small{
  font-size:.92rem;
  padding:.55rem 1.35rem;
  border-radius:999px;
}
.cta-btn.small:hover{color:#fff}      /* keep text white on hover */

/* === Icon on the 4 small cards  ================================= */
.service-card .icon{
  width:60px;
  height:60px;
  margin-bottom:1.1rem;
  object-fit:contain;
}

/* bump Other-Popular-Services icons up a notch */
.popular-1x4 .service-card .icon{
    width:120px;          /* was 60px */
    height:120px;         /* was 60px */
}
/* visually remove the section heading */
#core-services .section-title{display:none}

/* ======= OTHER-POPULAR-SERVICES: “flat” style – no beige boxes ============= */

/* 1️⃣ give the row a little more breathing-room */
.popular-1x4{
  gap:3rem;                 /* wider space between columns           */
  padding-top:3.5rem;       /* push group away from heading          */
  padding-bottom:2.5rem;
}

/* 2️⃣ kill the card look and centre everything */
.popular-1x4 .service-card{
  background:transparent;   /* no box */
  border:none;              /* no border line                        */
  box-shadow:none;          /* no shadow                             */
  padding:0 1.3rem 3rem;    /* top-&-side breathing-room; bottom gap */
  text-align:center;        /* match reference screenshot            */
}

/* 3️⃣ tidy up internal spacing */
.popular-1x4 .service-card .icon{margin-bottom:1.4rem}
.popular-1x4 .service-card h3   {margin-bottom:1.1rem}

/* 4️⃣ make the small CTA button truly “small” */
.cta-btn.small{
  font-size:.88rem;
  padding:.5rem 1.1rem;
  letter-spacing:.3px;
}
/* =========================================================
   A)  Beige backdrop for the 1st & 3rd side-by-side rows
   ========================================================= */
.service-row:nth-of-type(1),
.service-row:nth-of-type(3){
  background:#F2F1E5;
  padding:3rem 2rem;
  border-radius:12px;
}

/* ensure text + small CTA stay on a single vertical axis */
.service-text{
  display:flex;
  flex-direction:column;
  height:100%;
}
.service-text p{flex:1}                     /* fills the gap   */
.service-text .cta-btn.small{align-self:flex-start}

/* =========================================================
   B)  Industries section – single full-width background
   ========================================================= */
.industries{
  position:relative;
  background:url('background.png') center/cover no-repeat;
  padding:5rem 0;
}
/* ---- Industries section veil: hero-style navy tint ---- */
.industries::before{
  content:"";
  position:absolute;inset:0;
  background:rgba(23,28,50,.78);   /* same colour & opacity as hero */
}

.industries > .container{position:relative;z-index:1}

/* =========================================================
   C)  “Other Popular Services” – flat cards + aligned buttons
   ========================================================= */
.popular-1x4 .service-card{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.popular-1x4 .service-card p{flex:1}        /* pushes button down */
.popular-1x4 .service-card .cta-btn.small{margin-top:1.4rem}
/*───────────────────────────────────────────────────────────
  Industries heading + intro paragraph → beige/white text
  (so they pop against the dark-tinted background image)
  ───────────────────────────────────────────────────────────*/
.industries .section-title{
  color: white;
}
.industries .container > p{
    color:#F2F1E5;          /* same light-beige you use elsewhere   */
}
/* extra gap below the See-All-Services CTA */
.see-all-wrap{          /* wrap = the div around the button */
    margin-bottom:3.5rem;   /* add whatever space you like */
}
/* === Industries: subtle lift + glow on hover ================= */
.industry-grid .service-card:hover{
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  border-color:#d0d0d5;          /* ever-so-slightly darker edge */
  background:#ffffff;            /* a touch brighter */
}
/* ======================================================================
   1)  CORE “SIDE-BY-SIDE” SERVICE ROWS  (Financial Accounting, Tax, Audit)
       ─ lift & zoom the photo, tint the heading
   ====================================================================== */
.service-row img{transition:transform .35s ease, box-shadow .35s ease}
.service-row h3{transition:color .25s ease}

.service-row:hover img{
  transform:scale(1.06);
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.service-row:hover h3{color:#0C1B39;}          /* slightly brighter navy */

/* ======================================================================
   2)  “OTHER POPULAR SERVICES” 4-UP CARDS
       ─ bounce the icon & brighten the heading on hover
   ====================================================================== */
.popular-1x4 .service-card .icon{transition:transform .3s ease}
.popular-1x4 .service-card h3   {transition:color .25s ease}

.popular-1x4 .service-card:hover .icon{transform:translateY(-8px) scale(1.18)}
.popular-1x4 .service-card:hover h3  {color:#0C1B39}

/* ======================================================================
   3)  INDUSTRY GRID  (already has lift / glow – add subtle scale too)
   ====================================================================== */
.industry-grid .service-card{
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.industry-grid .service-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  border-color:#d0d0d5;
  background:#ffffff;
}
/* =========================================================
   MOBILE NAV  – allow full-panel scrolling
   ========================================================= */
.mobile-nav{
  overflow-y: auto;          /* <— NEW  */
  overscroll-behavior: contain;   /* keeps the page behind from moving */
}
/* ——— DESKTOP: limit very-tall “Services” dropdown ——— */
.nav-links .dropdown{
  max-height: 380px;       /* fits ±10 items before scrolling          */
  overflow-y: auto;        /* show native scrollbar for the rest       */
  overscroll-behavior: contain;   /* stops the page behind from bouncing */
}
/* ——— prettier dropdown scrollbar ——— */
.nav-links .dropdown::-webkit-scrollbar{
  width: 6px;                        /* thin rail */
}
.nav-links .dropdown::-webkit-scrollbar-track{
  background: transparent;           /* keep track invisible */
}
.nav-links .dropdown::-webkit-scrollbar-thumb{
  background: #F2F1E5;               /* light-beige thumb */
  border-radius: 3px;
}
.nav-links .dropdown::-webkit-scrollbar-thumb:hover{
  background: #dcdce3;               /* subtle contrast on hover */
}

/* Firefox */
.nav-links .dropdown{
  scrollbar-width: thin;             /* thin rail */
  scrollbar-color: #F2F1E5 transparent;
}
/* >>>>>> improved carousel arrows – place at END of index.css <<<<<< */
.testimonial-wrap .nav-arrow{                    /* stronger selector  */
  background:#171C32 !important;                /* navy pill          */
  color:#fff !important;
  width:46px;
  height:46px;
  border:none !important;
  border-radius:50%;
  font-size:1.35rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
  cursor:pointer;
  transition:.18s ease;
}

.testimonial-wrap .nav-arrow:hover,
.testimonial-wrap .nav-arrow:focus{
  background:#F2F1E5 !important;               /* beige invert       */
  color:#171C32 !important;
  transform:scale(1.08);
  outline:none;
}

.testimonial-wrap .nav-arrow:active{
  transform:scale(.96);
}
html, body {
  overflow-x: hidden;
}