/* Original site fonts (same font files used on qmsIndia.com) so the type
     treatment matches the live page exactly */
  @font-face{
    font-family:NEOrange;
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("../fonts/Neo-Orange/NEOrange-Reg.woff2") format("woff2");
  }
  @font-face{
    font-family:NEOrange;
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url("../fonts/Neo-Orange/NEOrange-Bold.woff2") format("woff2");
  }
  @font-face{
    font-family:NEOrange;
    font-style:normal;
    font-weight:900;
    font-display:swap;
    src:url("../fonts/Neo-Orange/NEOrange-ExBold.woff2") format("woff2");
  }
  @font-face{
    font-family:"Figtree";
    src:url("../fonts/Figtree/Figtree-VariableFont_wght.woff") format("woff2-variations");
    font-weight:100 900;
    font-style:normal;
    font-display:swap;
  }

  :root{
    --branding-black:#000;
    --branding-pink:#db0707;
    --branding-orange:#f39200;
    --brand-grey:#2b2a29;
    --brand-light-grey:#f2f2f2;
    --brand-dark-grey:#D5D4D4;
    --brand-cream: #fbf7f2;
  }
  .text-orange{
    color:var(--branding-orange) !important;
  }
  .bg-dark-grey{
    background-color:var(--brand-dark-grey) !important;
  }
.bg-cream{
  background-color: var(--brand-cream);
}
  body{
    font-family:"Figtree",Arial,sans-serif;
    color:#000;
  }

  h1,h2,h3,h4{
    font-family:"NEOrange",Arial,sans-serif;
    font-weight:700;
    color:var(--branding-black);
  }

  a{ color:var(--branding-pink); text-decoration:none; }

  .gradient-text{
    background:linear-gradient(45deg,var(--branding-pink) 30%,var(--branding-orange) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-weight:700;
  }

  .gradient-bg{
    background:linear-gradient(45deg,var(--branding-pink) 30%,var(--branding-orange) 100%) !important;
  }

  /* Buttons matching original pink/orange filled + bordered style,
     including the small arrow glyph on the right that the live site uses */
  .btn-pink-filled,.btn-pink-border,.btn-orange-border{
    font-weight:700;
    font-family:"Figtree",Arial,sans-serif;
    font-size:15px;
    position:relative;
    display:inline-block;
    padding:14px 50px 14px 30px;
    border-radius:40px;
    text-align:center;
  }
  .btn-pink-filled::after,.btn-pink-border::after,.btn-orange-border::after{
    content:"\f061";
    font-family:"Font Awesome 5 Free";
    font-weight:900;
    position:absolute;
    top:50%;
    right:22px;
    transform:translateY(-50%);
    font-size:14px;
  }

  .btn-pink-filled{
    color:#fff !important;
    background-color:var(--branding-pink);
    border:2px solid var(--branding-pink);
  }
  .btn-pink-filled:hover{ filter:brightness(1.08); color:#fff; }

  .btn-pink-border{
    color:var(--branding-pink);
    background-color:rgba(230,0,126,.12);
    border:2px solid var(--branding-pink);
  }

  .btn-orange-border{
    color:var(--branding-orange);
    background-color:rgba(243,146,0,.12);
    border:2px solid var(--branding-orange);
  }

  /* HEADER */
  header.site-header{
    background-color:var(--brand-grey);
    position:sticky;
    top:0;
    z-index:1030;
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    max-width:1500px;
    margin:0 auto;
    padding:18px 20px;
    gap:16px;
  }
  .site-logo{ display:inline-flex; flex-shrink:0; }
  .site-logo img{ display:block; }

  .header-right{
    flex-direction:column;
    align-items:flex-end;
    gap:14px;
    flex:1;
  }
  .header-btns-row{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .header-nav-row{
    gap:70px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .header-nav-row a{
    color:#fff;
    font-weight:600;
    font-size:1.2rem;
    text-decoration:none;
  }
  .header-nav-row a:hover{ color:var(--branding-pink); }

  .phone-link{ color:#fff; font-weight:700; font-size:1.25rem; text-decoration:none; white-space:nowrap; }
  .search-field{
    background:#545454;
    color:#fff;
    border:none;
    border-radius:20px;
    max-width:190px;
  }
  .search-field::placeholder{ color:#ccc; }
  .search-submit-btn{ color:#ccc; }

  /* mobile top bar */
  .mobile-topbar{ font-size:1.2rem; }
  .mobile-nav-panel{ background:var(--brand-grey); }
  .mobile-nav-panel ul li{ border-bottom:1px solid rgba(255,255,255,.15); }
  .mobile-nav-panel ul li a{ display:block; padding:12px 0; color:#fff; font-weight:600; text-decoration:none; }
  #mobileSearchBox{ background:var(--brand-grey); }

  .btn-quote-pill{
    font-family:"Figtree",Arial,sans-serif;
    font-weight:700;
    font-size:.85rem;
    text-transform:uppercase;
    color:#fff !important;
    border-radius:30px;
    padding:10px 22px;
    white-space:nowrap;
    display:inline-block;
  }

  .btn-login-pill{
    font-family:"Figtree",Arial,sans-serif;
    font-weight:700;
    font-size:.85rem;
    text-transform:uppercase;
    background:#000;
    color:#fff;
    border:1px solid #fff;
    border-radius:30px;
    padding:8px 20px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
  }
  .btn-login-pill:hover{ color:#fff; background:#1a1a1a; }
  .btn-login-pill img{ width:16px; height:16px; }

  /* Sub menu (ISO Standards mega menu) */
  .submenu-bar{ background-color:#d5d4d4; }
  .submenu-bar .topmenu{ color:#000; font-weight:800; }
  .submenu-bar .topmenu span{ display:block; font-size:.8rem; font-weight:400; color:#2c4676; }
  .submenu-bar .dropdown-menu{ min-width:320px; }

  /* ===== ISO Standards Mega Dropdown — Hover + Pink Style (matches screenshot) ===== */

.submenu-bar .nav-item.dropdown{
  position: relative;
}

/* Highlight the active tab (pink bg) while its dropdown is open */
.submenu-bar .nav-item.dropdown:hover > .topmenu,
.submenu-bar .nav-item.dropdown > .topmenu.show{
  background-color: var(--branding-pink);
  color:#fff;
}
.submenu-bar .nav-item.dropdown:hover > .topmenu span,
.submenu-bar .nav-item.dropdown > .topmenu.show span{
  color:#fff;
}
.submenu-bar .topmenu{
  display:block;
  padding:14px 18px;
  border-radius:2px;
  transition: background-color .15s ease, color .15s ease;
}

/* The pink mega panel itself */
.submenu-bar .dropdown-menu{
  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap:40px;
  row-gap:4px;
  position:absolute;
  top:100%;
  left:0;
  margin:0;
  border:none;
  border-radius:0;
  background-color: var(--branding-pink);
  min-width: 460px;
  max-width: 90vw;
  padding:18px 24px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events:none;
  z-index:1040;
}
.submenu-bar .nav-item.dropdown:hover .dropdown-menu,
.submenu-bar .dropdown-menu.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.submenu-bar .dropdown-item{
  color:#fff;
  font-weight:600;
  font-size:.95rem;
  padding:10px 0;
  background:transparent !important;
  white-space:nowrap;
}
.submenu-bar .dropdown-item:hover,
.submenu-bar .dropdown-item:focus{
  background:transparent !important;
  color:#000;
}

/* Small bridge so the hover gap between tab and panel doesn't close the menu */
.submenu-bar .nav-item.dropdown::after{
  content:"";
  position:absolute;
  left:0; right:0; top:100%;
  height:8px;
}

/* Responsive: shrink panel width on smaller desktop breakpoints */
@media (max-width: 1200px){
  .submenu-bar .dropdown-menu{
    min-width: 380px;
    grid-template-columns: 1fr;
  }
}

.submenu-bar .dropdown-toggle::after{
  display:none !important;
  content:none !important;
}

  /* HERO */
  .hero-section{
    position:relative;
    background-size:cover;
    background-position:center right;
    padding:60px 0;
  }
  .hero-section .hero-bg{
    position:absolute; inset:0; z-index:0;
  }
  .hero-section .hero-bg img{ width:100%; height:100%; object-fit:cover; }
  .hero-section .hero-card{
    position:relative;
    z-index:1;
    background:#fff;
    border-radius:40px;
    padding:40px;
  }
  .hero-section h1{ font-size:45px; }
  .hero-section h4{ font-weight:700; font-size:17px; margin-bottom:30px; }

  /* Company attributes */
  .attributes-section h3{ font-size:32px; font-weight:700; }

  /* Standards cards */
  .standard-card{
    border:1px solid #eee;
    background:#fff;
    border-radius:10px;
    padding:20px;
    height:100%;
  }
  .standard-card img{ width:90px; display:block; margin:0 auto 15px; }

  /* Steps */
  .step-card h4{ font-weight:700; }



/* ------------------------------------FAQ ---------------------------*/
.faq-section{ background-color:var(--brand-cream); padding:70px 0; }

.faq-accordion .accordion-item{
  border:none;
  background:transparent;
  margin-bottom:16px;
}

.faq-accordion .accordion-button{
  background:linear-gradient(90deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
  color:#000;
  font-weight:700;
  font-size:16px;
  border-radius:30px !important;
  padding:18px 55px 18px 28px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  position:relative;
}

/* kill Bootstrap's default caret background-image */
.faq-accordion .accordion-button::after{
  background-image:none !important;
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  content:"\f107";           /* down chevron */
  color:#000;
  font-size:18px;
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%) rotate(0deg);
}

.faq-accordion .accordion-button:not(.collapsed){
  background:linear-gradient(90deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
  color:#000;
  border-radius:30px 30px 0 0 !important;
  box-shadow:none;
}

.faq-accordion .accordion-button:not(.collapsed)::after{
  content:"\f106";           /* up chevron when open */
  transform:translateY(-50%) rotate(0deg);
}

.faq-accordion .accordion-button:focus{
  box-shadow:none;
  outline:none;
}

.faq-accordion .accordion-collapse{
  background:#fff;
  border-radius:0 0 20px 20px;
  margin-top:-8px;           /* tucks body snugly under the pill */
  padding-top:8px;
}

.faq-accordion .accordion-body{
  padding:20px 28px 24px;
  font-size:15px;
  color:#333;
}

  /* Footer */
  footer.mega-footer{ background-color:var(--brand-grey); color:#fff; }
  footer.mega-footer a{ color:#fff; }
  footer.mega-footer a:hover{ color:#fff; text-decoration:underline; }
  footer.mega-footer h6{ color:#fff; font-weight:700; }
  footer.mega-footer li{ padding: 3px 0 }

  .footer-signup .form-control{ border-radius:10px 0 0 10px; }
  .footer-signup .btn{ border-radius:0 10px 10px 0; }

  .social-icon-circle{
    width:40px;height:40px;border-radius:50%;
    background:#4c4c4c;display:flex;align-items:center;justify-content:center;color:#fff;
  }

  .testimonial-card{
    border:1px solid #eee;
    border-radius:10px;
    padding:20px;
    margin:0 10px;
    height:100%;
  }
  .testimonial-card img{ max-width:150px; margin-bottom:10px; }
  .rate .fa-star{ color:#fecf00; }

  section{ padding:60px 0; }
  @media (max-width:767px){
    section{ padding:30px 0; }
    .hero-section h1{ font-size:30px; }
  }

  

/* =========================================================
   SERVICES PAGE — scoped styles only.
   Reuses existing root vars (--branding-pink, --branding-orange,
   --brand-grey, --brand-light-grey, .gradient-text, .gradient-bg,
   .btn-pink-filled etc.) already defined in the site's global CSS.
   Nothing global is redeclared here.
   ========================================================= */

/* ---------- Hero (image bg + floating white card) ---------- */
.services-hero{
  position:relative;
  min-height:380px;
  background-image:url("../img/service.png");
  background-size:cover;
  background-position:center right;
  display:flex;
  align-items:center;
}
.services-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 55%);
}
.services-hero .hero-card{
  position:relative;
  z-index:1;
  background:#fff;
  border-radius:28px;
  padding:44px 60px;
  max-width:600px;
  box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.services-hero h1{ font-size:44px; margin-bottom:6px; }
.services-hero h2{ font-size:20px; font-weight:400; color:#1a1a1a; margin:0; }

@media (max-width:767px){
  .services-hero{ min-height:320px; }
  .services-hero .hero-card{ padding:28px 30px; max-width:92%; }
  .services-hero h1{ font-size:30px; }
  .services-hero h2{ font-size:16px; }
}

/* ---------- Intro ---------- */
.services-intro{ background:#fff; }
.services-intro h2{ font-size:30px; margin-bottom:20px; }
.services-intro p{ font-size:16px; line-height:1.7; color:#333; }
.services-intro a{ font-weight:700; }

/* ---------- Services grid (gradient bg + icon-badge cards) ---------- */
.services-grid-section{
  background:linear-gradient(135deg,var(--branding-pink) 0%,var(--branding-orange) 100%);

}

.service-box{
  display:flex;
  flex-direction:column;
  background:var(--brand-light-grey);
  border-radius:24px;
  padding:34px 34px 30px;
  height:100%;
  text-decoration:none !important;
  color:#000;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.service-box:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  color:#000;
}
.service-box .service-box-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.service-box h3{ font-size:24px; margin-bottom:0; }
.service-box .service-icon{
  flex:0 0 auto;
  width:50px; height:50px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--brand-grey);
  color:#fff;
  font-size:20px;
}
.service-box hr{
  width:70px; border:none; border-top:3px solid var(--brand-grey);
  margin:10px 0 18px;
}
.service-box p{ font-size:14.5px; color:#333; flex-grow:1; line-height:1.6; }
.service-box .service-box-link{
  margin-top:16px;
  align-self:flex-start;
  border:2px solid var(--branding-pink);
  color:var(--branding-pink);
  background:#fff;
  border-radius:30px;
  padding:10px 26px;
  font-weight:700;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.service-box:hover .service-box-link{
  background:var(--branding-pink);
  color:#fff;
}

/* ---------- Fee calculator section ---------- */
.fee-calc-section{
  background:radial-gradient(ellipse at top right,rgba(230,0,126,.08),transparent 55%),
             radial-gradient(ellipse at bottom left,rgba(243,146,0,.08),transparent 55%),
             #fff;
  padding-bottom:100px;
}
.fee-calc-intro h2{ font-size:30px; }
.fee-calc-callout{
  border:2px solid var(--branding-pink);
  border-radius:20px;
  padding:24px;
  background:rgba(230,0,126,.05);
}
.fee-calc-callout a{ font-weight:700; }

/* Card */
.calc-card{
  position:relative;
  background:#fff;
  border-radius:32px;
  padding:60px 50px 40px;
  max-width:900px;
  margin:60px auto 0;
  border:3px solid transparent;
  background-clip:padding-box;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}
.calc-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:32px;
  padding:3px;
  background:linear-gradient(135deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.calc-badge{
  position:absolute;
  top:-38px; left:50%;
  transform:translateX(-50%);
  width:76px; height:76px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
  box-shadow:0 10px 25px rgba(230,0,126,.35);
}
.calc-card h3{ text-align:center; font-size:28px; margin-bottom:34px; }

/* progress steps + connecting line */
.calc-progress{
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:36px;
}
.calc-progress .step-line{
  flex:1;
  max-width:160px;
  height:2px;
  background:#e2e2e2;
}
.calc-progress .step-dot{
  width:38px; height:38px; border-radius:50%;
  background:#fff;
  border:2px solid #e2e2e2;
  color:#999;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px;
  flex:0 0 auto;
}
.calc-progress .step-dot.active{
  background:linear-gradient(135deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
  border-color:transparent;
  color:#fff;
}
.calc-progress .step-dot.complete{
  background:var(--branding-pink);
  border-color:var(--branding-pink);
  color:#fff;
}

.calc-step-title{ text-align:center; margin-bottom:26px; }
.calc-step-title h4{ font-size:20px; margin-bottom:6px; }
.calc-step-title p{ font-size:14px; color:#777; max-width:480px; margin:0 auto; }

.calc-tab{ display:none; }
.calc-tab.active-tab{ display:block; }

/* product / sector / office pick cards */
.pick-option{ margin-bottom:16px; }
.pick-option input[type="radio"]{ display:none; }
.pick-option .pick-label{
  display:flex; align-items:center; gap:14px;
  background:#fff;
  border:2px solid #e6e6e6;
  border-radius:14px;
  padding:16px 18px;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.pick-option .pick-icon{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  color:#fff;
  background:linear-gradient(135deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
}
.pick-option .pick-text b{ display:block; font-size:16px; }
.pick-option .pick-text small{ display:block; color:#888; font-size:12.5px; }
.pick-option input[type="radio"]:checked + .pick-label{
  border-color:var(--branding-pink);
  background:rgba(230,0,126,.06);
}

.calc-more-select{
  border:2px solid #e6e6e6;
  border-radius:12px;
  padding:12px 16px;
  font-size:14px;
  color:#333;
  cursor:pointer;
  background:#fff;
}
.calc-more-select option{ color:#333; }
.calc-ims-link{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  color:var(--branding-pink);
  text-decoration:underline;
}

/* form fields */
.calc-field{ margin-bottom:18px; }
.calc-field label{ font-weight:700; display:block; margin-bottom:6px; }
.calc-field .form-control{
  border:2px solid #e6e6e6;
  border-radius:10px;
  padding:12px 14px;
}
.calc-field .form-control:focus{
  border-color:var(--branding-pink);
  box-shadow:none;
}

.calc-range-value{
  text-align:center;
  font-weight:700;
  color:var(--branding-pink);
  margin-top:8px;
}

.calc-btns{
  display:flex;
  justify-content:center;
  margin-top:30px;
  gap:16px;
}
.calc-btns .btn-calc-back{
  background:transparent;
  border:2px solid #999;
  color:#555;
  border-radius:30px;
  padding:14px 30px;
  font-weight:700;
}
.calc-btns .btn-calc-next{
  border:none;
  color:#fff;
  border-radius:30px;
  padding:14px 40px;
  font-weight:700;
  background:#d9d9d9;
  transition:background .2s ease;
}
.calc-btns .btn-calc-next:not(:disabled){
  background:linear-gradient(135deg,var(--branding-pink) 0%,var(--branding-orange) 100%);
}
.calc-btns .btn-calc-next:disabled{ cursor:not-allowed; }

.calc-status-msg{ text-align:center; font-size:14px; color:#999; margin-top:18px; }
.calc-status-msg.ok{ color:#2e8b2e; font-weight:700; }

#calc-thankyou{ display:none; text-align:center; padding:20px 0; }
#calc-thankyou h3{ margin-bottom:10px; }

@media (max-width:767px){
  .calc-card{ padding:50px 24px 34px; }
  .calc-progress .step-line{ max-width:60px; }
}




/* =========================================================
   About Us page — page-specific styles only.

   THEME: <?php echo $brandName; ?> brand system
     - Primary brand colours : var(--branding-pink) #db0707 /
       var(--branding-orange) #f39200, used together as the
       45deg gradient in .gradient-text / .gradient-bg
     - Neutral surfaces      : #fff (default) alternating with
       var(--brand-dark-grey) #D5D4D4 (.bg-dark-grey) for section
       banding, on var(--brand-grey) #2b2a29 header/footer
     - Headings              : "NEOrange" (bold, rounded display font)
     - Body copy             : "Figtree" (variable weight sans-serif)
   All of the above already live in the global stylesheet's :root —
   this file only adds the handful of components this page needs
   (hero re-uses the existing global .hero-section/.hero-card/
   .gradient-text classes directly, so no new hero CSS here).
   ========================================================= */

/* ---- "In numbers" stats band ---- */
.numbers-section{
  background-color:var(--branding-pink);
  padding:60px 0;
}
.numbers-section h2{
  color:#fff;
}
.number-item{
  text-align:center;
  color:#fff;
}
.number-value{
  font-family:"NEOrange",Arial,sans-serif;
  font-weight:700;
  font-size:2.25rem;
  padding-bottom:12px;
  margin-bottom:18px;
  border-bottom:1px solid var(--branding-orange);
}
.number-icon-circle{
  width:56px;
  height:56px;
  border-radius:50%;
  background-color:var(--branding-orange);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
}
.number-icon-circle img{
  width:26px;
  height:26px;
  filter:brightness(0) invert(1);
}
.number-desc{
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.03em;
}

/* ---- Side image + text rows (mission / accreditation / join team) ---- */
.side-info-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:30px;
}
.side-info-text{
  flex:1 1 60%;
}
.side-info-image{
  flex:1 1 30%;
  text-align:center;
}
.side-info-image img{
  max-width:100%;
  border-radius:10px;
}
@media (max-width:767px){
  .side-info-text,.side-info-image{ flex:1 1 100%; }
}

/* ---- Management team carousel ---- */
.team-carousel .carousel-item{
  padding:10px;
}
.team-slide{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:30px;
  background:#fff;
  border:1px solid #eee;
  border-radius:10px;
  padding:30px;
}
.team-slide .team-photo{
  flex:0 0 220px;
}
.team-slide .team-photo img{
  width:220px;
  height:220px;
  object-fit:cover;
  border-radius:50%;
  display:block;
  margin:0 auto;
}
.team-slide .team-bio{
  flex:1 1 auto;
}
.team-slide .team-bio h4{
  margin-bottom:10px;
}
.team-slide .team-bio p{
  font-size:.9rem;
  color:#333;
}
.team-carousel .carousel-control-prev,
.team-carousel .carousel-control-next{
  width:40px;
  height:40px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  background-color:var(--branding-pink);
  opacity:1;
}




/* =========================================================
   Contact Us page — page-specific styles only.

   THEME: <?php echo $brandName; ?> brand system (same as about-us.css)
     - Primary brand colours : var(--branding-pink) / var(--branding-orange)
       gradient in .gradient-text / .gradient-bg / .btn-pink-filled
     - Neutral surfaces      : #fff default, var(--brand-dark-grey) #D5D4D4
       (.bg-dark-grey) for banding where needed
     - Icon accent           : var(--branding-black) solid circles (matches
       the original site's .module.-getintouch icon treatment)
     - Headings              : "NEOrange" | Body copy: "Figtree"
   Everything else (hero, buttons, gradient text, section spacing)
   comes straight from the global stylesheet — nothing duplicated here.
   ========================================================= */

/* ---- Contact form card ---- */
.contact-form-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:20px;
  padding:35px;
}
.contact-form-card label{
  font-weight:700;
  display:block;
  margin-bottom:6px;
}
.contact-form-card .form-control{
  border-radius:8px;
  border:1px solid #dfdede;
  padding:12px 14px;
}
.contact-form-card .form-control:focus{
  border-color:var(--branding-pink);
  box-shadow:0 0 0 .15rem rgba(230,0,126,.15);
}
.contact-form-card .form-text-note{
  font-size:.85rem;
  color:#666;
}
.contact-form-card .form-text-note a{
  color:var(--branding-pink);
}

/* ---- Sidebar: quick contact icon rows ---- */
.contact-icon-item{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.contact-icon-circle{
  flex:0 0 45px;
  width:45px;
  height:45px;
  border-radius:50%;
  background-color:var(--branding-black);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}
.contact-icon-item .contact-icon-text{
  flex:1 1 auto;
}
.contact-icon-item .contact-icon-text a.phone-link{
  font-weight:700;
  font-size:1.3rem;
  color:var(--branding-black);
  text-decoration:none;
}
.contact-icon-item .contact-icon-text p{
  margin:0;
  font-size:.85rem;
  color:#666;
}

/* ---- Feefo rating badge ---- */
.feefo-badge img{
  max-width:200px;
}

/* ---- Speak with our team / head office lists ---- */
.contact-detail-block{
  margin-bottom:28px;
}
.contact-detail-block h3{
  margin-bottom:10px;
}
.contact-detail-block p{
  margin-bottom:12px;
  font-size:.95rem;
}
.contact-detail-block p strong{
  display:block;
}

/* ---- Key people list ---- */
.key-people-list p{
  margin-bottom:10px;
  font-size:.95rem;
}
.key-people-list p strong{
  display:block;
}


/* ==========================================================================
   3 Steps to ISO Certification Section (.cert-cta)
   ========================================================================== */

.cert-cta {
  padding: 80px 0;
}

.cert-cta .cert-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--branding-black);
  margin-bottom: 8px;
}

.cert-cta .cert-subtitle {
  font-size: 16px;
  color: var(--brand-grey);
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: 1.5;
}

/* Step Cards */
.cert-cta .step-card {
  background: var(--brand-cream);
  border-radius: 16px;
  border: 1px solid var(--brand-dark-grey);
  padding: 28px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cert-cta .step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--branding-pink) 0%, var(--branding-orange) 100%);
}

.cert-cta .step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
}

.cert-cta .step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.cert-cta .step-badge {
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: linear-gradient(135deg, var(--branding-pink) 0%, var(--branding-orange) 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(219, 7, 7, 0.2);
}

.cert-cta .step-head h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--branding-black);
  margin: 0;
  line-height: 1.3;
}

.cert-cta .step-card p {
  font-size: 14px;
  color: var(--brand-grey);
  line-height: 1.6;
  margin: 0;
}

/* Section Footer Notes */
.cert-cta .cert-note-strong {
  max-width: 860px;
  margin: 40px auto 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--branding-black);
  line-height: 1.6;
}

.cert-cta .cert-note-italic {
  max-width: 860px;
  margin: 0 auto;
  font-size: 13px;
  font-style: italic;
  color: var(--brand-grey);
  line-height: 1.6;
}

/* Responsive Padding */
@media (max-width: 768px) {
  .cert-cta .cert-card {
    padding: 30px 20px;
  }
}