/* ==========================================================================
   Webel Support Multipurpose Service Co-operative Society Limited
   Custom stylesheet  —  Bootstrap 5 + jQuery + Slick
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  --brand:            #405EB8;   /* primary blue from the Figma file      */
  --brand-dark:       #344E9B;
  --brand-darker:     #2C4386;
  --footer-grad-end:  #222F5E;   /* bottom of the CTA/footer gradient     */
  --brand-tint:       #EEF2FE;   /* light section / alternating row tint  */
  --brand-tint-2:     #DDE4FB;

  --ink:              #17171B;   /* display headings                      */
  --body:             #4E5464;   /* body copy                             */
  --body-soft:        #6B7180;
  --line:             #E4E8F5;
  --white:            #FFFFFF;

  /* Typefaces from the Figma file */
  --font-sans:  'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: 'DM Serif Display', 'Times New Roman', Georgia, serif;

  --container:  1720px;
  --radius-lg:  20px;
  --radius-md:  14px;
  --radius-sm:  10px;

  --header-h:   96px;

  /* The Figma frame insets the announcement bar + header + hero as one rounded
     card: ~16px gutter and ~20px radius on a 1920px frame. Both scale with the
     viewport so the proportion holds at every width. */
  --hero-inset:  clamp(8px, 0.84vw, 16px);
  --hero-radius: clamp(12px, 1.05vw, 20px);

  /* ---- HERO SLIDER HEIGHT -------------------------------------------------
     This single value controls how tall every hero slide is. It is the height
     of the image area only — the announcement bar sits above it, so the whole
     hero card is roughly this plus ~44px.

       min 480px  never shorter than this (small phones)
       40.5vw     fluid middle: tracks the viewport, matching the Figma ratio
                  (778px tall on the 1920px frame)
       max 780px  never taller than this on very wide screens

     To change it, edit this one line, e.g.
       --hero-height: 640px;                        fixed height everywhere
       --hero-height: clamp(420px, 34vw, 660px);    shorter, still fluid
       --hero-height: calc(100vh - 140px);          near full-screen
     -------------------------------------------------------------------- */
  --hero-height: clamp(480px, 42.5vw, 780px);
  --shadow-card: 0 10px 30px rgba(30, 47, 105, .07);
  --shadow-pop:  0 18px 42px rgba(30, 47, 105, .22);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
  /* AOS reveals translate horizontally; clip stops that creating a scrollbar
     (clip rather than hidden so position:sticky / fixed keep working) */
  /* overflow-x: clip; */
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  /* clip (not hidden) so AOS's horizontal reveals never create a scrollbar
     while still leaving position:sticky / fixed untouched */
  /* overflow-x: clip; */
}

/* AOS safety net: never leave content invisible if motion is off or JS fails */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

img { max-width: 100%; height: auto; }

a { text-decoration: none; color: inherit; transition: color .2s ease, opacity .2s ease; }

h1, h2, h3, h4, h5 { color: var(--ink); }

/* container mirrors the 1720px content width of the 1920px Figma frame
   (1920 frame – 100px gutter each side) and scales the gutter below that */
.cust_container,
.container,
.container-xxl {
  max-width: calc(var(--container) + 200px);
  padding-inline: clamp(18px, 5.2vw, 100px);
  margin-inline: auto;
  width: 100%;
}

.bothSide_gap {
    width: 100%;
    height: auto;
    padding: 40px 0;
}

.topSide_gap {
    width: 100%;
    height: auto;
    padding: 40px 0 0;
}

.bottomSide_gap {
    padding: 0 0 40px;
}

@media (max-width: 1400px) {

    .bothSide_gap {
        padding: 35px 0;
    }

    .topSide_gap {
        padding: 35px 0 0;
    }

    .bottomSide_gap {
        padding: 0 0 35px;
    }
}

@media (max-width: 991px) {
  .bothSide_gap {
        padding: 30px 0;
  }

  .topSide_gap {
      padding: 30px 0 0;
  }

  .bottomSide_gap {
      padding: 0 0 30px;
  }
}
/* .cust_container,
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    width: 90%;
    margin: 0 auto;
    max-width: 1920px;
    padding-left: 0;
    padding-right: 0;
} */

/* Inline SVG icon helper */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -.15em; flex: none; }
.ico-14 { width: 14px; height: 14px; }
.ico-16 { width: 16px; height: 16px; }
.ico-18 { width: 18px; height: 18px; }
.ico-22 { width: 22px; height: 22px; }
.ico-44 { width: 44px; height: 44px; }
.ico-pdf { width: 30px; height: 36px; }

/* --------------------------------------------------------------------------
   3. Shared type & buttons
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand);
  letter-spacing: .01em;
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.eyebrow-light { color: rgba(255, 255, 255, .92); }

.section-title {
  font-family: var(--font-serif);
  font-weight: 400;              /* DM Serif Display ships a single weight */
  font-size: clamp(26px, 2.72vw, 52px);   /* ~52px on the 1920 frame */
  line-height: 1.16;
  letter-spacing: -.005em;
  color: var(--ink);
}

.section-sub {
  font-size: 16px;
  color: var(--body-soft);
  max-width: 900px;
}

.section { padding: clamp(30px, 6vw, 60px) 0; }
.sectiontop { padding-top: clamp(30px, 6vw, 60px); }

/* Pill buttons ------------------------------------------------------------ */
.btn-primary-pill,
.btn-ghost-pill,
.btn-outline-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.btn-primary-pill {
  background: var(--brand);
  color: var(--white);
  box-shadow: 0 10px 24px rgba(64, 94, 184, .28);
}
.btn-primary-pill:hover,
.btn-primary-pill:focus-visible {
  background: var(--brand-dark);
  color: var(--white);
  transform: translateY(-2px);
}
.btn-sm-pill { padding: 10px 22px; font-size: 15px; }

.btn-ghost-pill {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .8);
}
.btn-ghost-pill:hover,
.btn-ghost-pill:focus-visible {
  background: var(--white);
  color: var(--brand);
  transform: translateY(-2px);
}

/* Same ghost pill, but for LIGHT backgrounds — .btn-ghost-pill is white-on-transparent
   and disappears on white sections, so this one uses the brand color instead. */
.btn-outline-pill {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-outline-pill:hover,
.btn-outline-pill:focus-visible {
  background: var(--brand);
  color: var(--white);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   3b. Tender search bar (site-added — no reference equivalent)
   -------------------------------------------------------------------------- */
.tender-search-bar {
  background: var(--brand-tint);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 32px;
}
.tender-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.tender-search-input {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border-radius: 999px;
  padding: 12px 22px;
  box-shadow: var(--shadow-card);
  margin: 0;
}
.tender-search-input i { color: var(--brand); font-size: 16px; flex: none; }
.tender-search-input input {
  border: 0;
  outline: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  color: var(--body);
  background: transparent;
}
.tender-search-input input::placeholder { color: var(--body-soft); }

@media (max-width: 575.98px) {
  .tender-search-form { flex-direction: column; align-items: stretch; }
  .tender-search-form .btn-primary-pill,
  .tender-search-form .btn-outline-pill { justify-content: center; }
}

/* --------------------------------------------------------------------------
   4. Hero shell — inset rounded card holding announcement + header + hero
   -------------------------------------------------------------------------- */
/* No overflow:hidden here — the header's dropdown menus need to escape the
   shell. The rounding is applied to the two children that touch the edges.
   No isolation / z-index either: a stacking context here would trap the
   sticky header's z-index inside the shell and let later sections paint
   over it once you scroll down. */
.hero-shell {
  position: relative;
  margin: var(--hero-inset) var(--hero-inset) 0;
  border-radius: var(--hero-radius);
  background: #101a33;
}

/* --------------------------------------------------------------------------
   5. Announcement bar
   -------------------------------------------------------------------------- */
.announce-bar {
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  position: relative;
  z-index: 3;
  border-radius: var(--hero-radius) var(--hero-radius) 0 0;
}
/* Content inside the shell keeps the page's 100px-from-frame-edge alignment,
   minus the shell's own inset, so the header lines up with the sections below */
.hero-shell .container-xxl,
.announce-inner {
  padding-inline: max(12px, calc(clamp(18px, 5.2vw, 100px) - var(--hero-inset)));
}

.announce-inner {
  max-width: calc(var(--container) + 200px);
  margin-inline: auto;
  padding-block: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
}
.announce-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  white-space: nowrap;
  padding-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, .35);
  flex: none;
}
.announce-label svg { animation: pulseBell 1.5s infinite; }
@keyframes pulseBell {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.announce-track-wrap { overflow: hidden; flex: 1 1 auto; }
.announce-track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: announce-marquee 45s linear infinite;
}
.announce-inner:hover .announce-track { animation-play-state: paused; }
.announce-item {
  white-space: nowrap;
  color: rgba(255, 255, 255, .92);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.announce-item a { transition: color .2s ease; }
.announce-item a:hover,
.announce-item a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.announce-item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
@keyframes announce-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none; }
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: absolute;
  inset: auto 0 auto 0;
  z-index: 1030;
  padding: 18px 0;
  transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}
/* Stuck state keeps the boxed look: same side inset, rounded bottom corners */
.site-header.is-stuck {
  position: fixed;
  top: 0;
  left: var(--hero-inset);
  right: var(--hero-inset);
  padding: 12px 0;
  backdrop-filter: blur(5px);
  /* background: var(--brand); */
  background-color: rgba(0,0,0, 0.6);
  border-radius: 0 0 var(--hero-radius) var(--hero-radius);
  box-shadow: 0 8px 26px rgba(20, 34, 80, .22);
  animation: slide-down .35s ease;
}
@keyframes slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.site-nav { gap: 20px; flex-wrap: nowrap; }

.brand { display: block; color: #fff; line-height: 1.25; }
.brand-top {
  display: block;
  font-size: 17px;
  font-weight: 500;
  color: rgba(255, 255, 255, .92);
}
.brand-bottom {
  display: block;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.005em;
}

.main-menu { gap: 4px; }
.main-menu .nav-link {
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 16px;
  position: relative;
}
.main-menu .nav-link::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 2px;
  height: 1.5px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.main-menu .nav-link:hover,
.main-menu .nav-link.active { color: #fff; }
.main-menu .nav-link:hover::after,
.main-menu .nav-link.active::after { transform: scaleX(1); }

/* ---- desktop dropdowns: two levels ------------------------------------- */
.main-menu .has-menu { position: relative; }
/* the submenu-toggle button is only needed for the mobile accordion (see .mobile-menu below) */
.main-menu .submenu-toggle { display: none; }
.main-menu .nav-link .caret { margin-left: 5px; transition: transform .25s ease; }
.main-menu .has-menu:hover > .nav-link .caret,
.main-menu .has-menu:focus-within > .nav-link .caret { transform: rotate(180deg); }

.main-menu .submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 262px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 22px 48px rgba(20, 34, 80, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
  z-index: 20;
}
/* hover bridge so the pointer can travel from the trigger to the panel */
.main-menu > .has-menu > .submenu::before {
  content: "";
  position: absolute;
  inset: -14px 0 auto 0;
  height: 14px;
}
.main-menu .submenu-end { left: auto; right: 0; }

.main-menu .submenu-2 {
  top: -10px;
  left: calc(100% + 8px);
  transform: translateX(10px);
}
.main-menu .submenu-end .submenu-2 {
  left: auto;
  right: calc(100% + 8px);
  transform: translateX(-10px);
}

.main-menu .has-menu:hover > .submenu,
.main-menu .has-menu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateX(0);
}

.main-menu .submenu li { position: relative; }
.main-menu .submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  line-height: 1.4;
  transition: background-color .2s ease, color .2s ease;
}
.main-menu .submenu a:hover,
.main-menu .submenu a:focus-visible {
  background: var(--brand-tint);
  color: var(--brand);
}
.main-menu .submenu .caret-side { flex: none; opacity: .55; }

.btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 11px 24px;
  white-space: nowrap;
  transition: background-color .25s ease, transform .25s ease;
}
.btn-phone:hover, .btn-phone:focus-visible {
  background: #fff;
  color: var(--brand);
  border-color: #fff;
  transform: translateY(-2px);
}

/* burger */
.burger { display: block; width: 26px; }
.burger span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  margin: 5px 0;
}

/* mobile offcanvas */
.mobile-nav { background: var(--brand); color: #fff; width: min(320px, 86vw); }
.mobile-nav .offcanvas-title { font-weight: 700; color: #fff; }
.mobile-nav .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.mobile-menu .nav-link {
  color: rgba(255, 255, 255, .9);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 15px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.mobile-menu .nav-link.active { color: #fff; }

/* ---- mobile accordion sub-menus (two levels) --------------------------- */
.mobile-menu .has-menu { position: relative; }

.mobile-menu .submenu-toggle {
  position: absolute;
  top: 4px;
  right: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, .12);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, background-color .2s ease;
}
.mobile-menu .submenu-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
  background: rgba(255, 255, 255, .26);
}

.mobile-menu .submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 6px 0 6px 16px;
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.mobile-menu .submenu a {
  display: block;
  padding: 9px 44px 9px 0;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
}
.mobile-menu .submenu a:hover { color: #fff; }
.mobile-menu .submenu .submenu-toggle {
  top: 0;
  width: 32px;
  height: 32px;
}
.mobile-menu .submenu-2 { padding-left: 14px; }

/* --------------------------------------------------------------------------
   6. Hero slider (Slick)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: #101a33;
  border-radius: 0 0 var(--hero-radius) var(--hero-radius);
  overflow: hidden;
}

.hero-slider { visibility: hidden; }
.hero-slider.slick-initialized { visibility: visible; }

.hero-slide { position: relative; }
.hero-slide,
.hero-slider .slick-slide > div { height: 100%; }

.hero-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  transform: scale(1.06);
  transition: transform 7s ease-out;
}
.slick-current .hero-bg { transform: scale(1); }

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(19, 30, 62, .86) 0%, rgba(19, 30, 62, .60) 40%, rgba(19, 30, 62, .18) 72%, rgba(19, 30, 62, .10) 100%),
    linear-gradient(180deg, rgba(16, 26, 51, .45) 0%, rgba(16, 26, 51, 0) 30%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  min-height: var(--hero-height);   /* <-- set in the token block at the top */
  display: flex;
  align-items: center;              /* default: middle */
  justify-content: flex-start;      /* default: left   */
  padding-top: var(--header-h);
  padding-bottom: 60px;
}
/* measured off the Figma frame: the H1 wraps inside ~750px of the 1920 frame */
.hero-copy { max-width: clamp(320px, 41vw, 790px); }

/* ==========================================================================
   HERO CONTENT POSITION
   Add ONE of these six classes to change where the hero copy sits:

     hero-pos-middle-left     hero-pos-middle-center     hero-pos-middle-right
     hero-pos-bottom-left     hero-pos-bottom-center     hero-pos-bottom-right

   Put it on .hero-slider to set every slide at once:
       <div class="hero-slider hero-pos-bottom-center">
   …or on a single .hero-slide to override just that one:
       <div class="hero-slide hero-pos-middle-right">

   A slide-level class always beats a slider-level one (the slide rules are
   defined second below, at equal specificity). Default with no class is
   middle-left, which is what the Figma design uses.
   ========================================================================== */

/* --- level 1: on .hero-slider (applies to every slide) ------------------- */
.hero-slider.hero-pos-middle-left   .hero-inner { align-items: center;    justify-content: flex-start; text-align: left; }
.hero-slider.hero-pos-middle-center .hero-inner { align-items: center;    justify-content: center;     text-align: center; }
.hero-slider.hero-pos-middle-right  .hero-inner { align-items: center;    justify-content: flex-end;   text-align: right; }
.hero-slider.hero-pos-bottom-left   .hero-inner { align-items: flex-end;  justify-content: flex-start; text-align: left; }
.hero-slider.hero-pos-bottom-center .hero-inner { align-items: flex-end;  justify-content: center;     text-align: center; }
.hero-slider.hero-pos-bottom-right  .hero-inner { align-items: flex-end;  justify-content: flex-end;   text-align: right; }

/* --- level 2: on a single .hero-slide (overrides the slider-level class) -- */
.hero-slide.hero-pos-middle-left    .hero-inner { align-items: center;    justify-content: flex-start; text-align: left; }
.hero-slide.hero-pos-middle-center  .hero-inner { align-items: center;    justify-content: center;     text-align: center; }
.hero-slide.hero-pos-middle-right   .hero-inner { align-items: center;    justify-content: flex-end;   text-align: right; }
.hero-slide.hero-pos-bottom-left    .hero-inner { align-items: flex-end;  justify-content: flex-start; text-align: left; }
.hero-slide.hero-pos-bottom-center  .hero-inner { align-items: flex-end;  justify-content: center;     text-align: center; }
.hero-slide.hero-pos-bottom-right   .hero-inner { align-items: flex-end;  justify-content: flex-end;   text-align: right; }

/* bottom placements need clearance so the copy never sits on the dot rail */
.hero-slider[class*="hero-pos-bottom-"] .hero-inner,
.hero-slide[class*="hero-pos-bottom-"]  .hero-inner { padding-bottom: 96px; }

/* centred copy gets a slightly wider, symmetric measure */
.hero-slider.hero-pos-middle-center .hero-copy,
.hero-slider.hero-pos-bottom-center .hero-copy,
.hero-slide.hero-pos-middle-center  .hero-copy,
.hero-slide.hero-pos-bottom-center  .hero-copy { max-width: clamp(320px, 56vw, 1000px); }

/* the scrim follows the copy, so the text stays legible wherever you put it */
.hero-slider[class*="hero-pos-"][class*="-center"] .hero-overlay,
.hero-slide[class*="hero-pos-"][class*="-center"]  .hero-overlay {
  background:
    linear-gradient(180deg, rgba(16, 26, 51, .58) 0%, rgba(19, 30, 62, .34) 42%, rgba(19, 30, 62, .74) 100%);
}
.hero-slider[class*="hero-pos-"][class*="-right"] .hero-overlay,
.hero-slide[class*="hero-pos-"][class*="-right"]  .hero-overlay {
  background:
    linear-gradient(270deg, rgba(19, 30, 62, .86) 0%, rgba(19, 30, 62, .60) 40%, rgba(19, 30, 62, .18) 72%, rgba(19, 30, 62, .10) 100%),
    linear-gradient(180deg, rgba(16, 26, 51, .45) 0%, rgba(16, 26, 51, 0) 30%);
}
/* right-aligned copy reads better with the photo framed to the left */
.hero-slider[class*="hero-pos-"][class*="-right"] .hero-bg,
.hero-slide[class*="hero-pos-"][class*="-right"]  .hero-bg { background-position: center left; }

.hero-title {
  font-family: var(--font-serif);
  color: #fff;
  font-weight: 400;              /* DM Serif Display ships a single weight */
  font-size: clamp(28px, 2.45vw, 47px);   /* ~47px on the 1920 frame */
  line-height: 1.18;
  letter-spacing: -.005em;
  margin: 0 0 34px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .28);
}

/* slick dots & arrows for the hero */
/* dots sit on the same left rail as the hero copy */
.hero-slider .slick-dots {
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: calc(var(--container) + 200px);
  text-align: left;
  padding-inline: max(12px, calc(clamp(18px, 5.2vw, 100px) - var(--hero-inset)));
}
.hero-slider .slick-dots li { width: auto; height: auto; margin: 0 8px 0 0; }
.hero-slider .slick-dots li button {
  width: 26px; height: 4px;
  padding: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .45);
  transition: background-color .3s ease, width .3s ease;
}
.hero-slider .slick-dots li button::before { display: none; }
.hero-slider .slick-dots li.slick-active button { background: #fff; width: 44px; }

/* The Figma hero has no side arrows — navigation is the dot rail above.
   Swipe / drag still works on touch devices. */

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */
.section-about { background: var(--white); }

.about-figure {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.about-figure img { width: 100%; display: block; }

.about-lead {
  font-size: 17px;
  line-height: 1.72;
  color: var(--body);
  margin-bottom: 28px;
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
/* Blue tick markers instead of bullets.
   ::before is the disc, ::after is the check — the check is a CSS mask, so its
   colour comes from background-color and follows the --brand token. */
.about-list li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 16px;
  font-weight: 600;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
.about-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(64, 94, 184, .13);
  transition: background-color .25s ease, transform .25s ease;
}
.about-list li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 12px;
  height: 12px;
  background: var(--brand);
  transition: background-color .25s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 6.9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 6.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.about-list li:hover::before { background: var(--brand); transform: scale(1.06); }
.about-list li:hover::after  { background: #fff; }

/* if mask isn't supported the check would be a solid square — fall back to a
   plain filled dot instead */
@supports not ((-webkit-mask: none) or (mask: none)) {
  .about-list li::after {
    left: 9px; top: 11px;
    width: 6px; height: 6px;
    border-radius: 50%;
  }
}

@media (min-width: 992px) {
  .section-about .row > .col-lg-6:last-child { padding-top: 4px; }
}

/* --------------------------------------------------------------------------
   8. Clients / Work list carousel
   -------------------------------------------------------------------------- */
/* .section-clients { background: var(--brand-tint); padding: 20px; } */

.slider-nav { display: flex; gap: 12px; justify-content: flex-start; }
@media (min-width: 992px) { .slider-nav { justify-content: flex-end; } }

.slider-btn {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(64, 94, 184, .45);
  background: transparent;
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.slider-btn:hover, .slider-btn:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: translateY(-2px);
}
.slider-btn.slick-disabled { opacity: .4; cursor: default; transform: none; }

.clients-shell { overflow: visible; }
.clients-slider { visibility: hidden; margin: 0 -12px; }
.clients-slider.slick-initialized { visibility: visible; }
/* horizontal clipping keeps the track inside the section; the vertical padding
   leaves room for the hover lift + drop shadow without clipping it */
.clients-slider .slick-list { overflow: hidden; padding-block: 34px; }
.clients-slider .slick-track { display: flex; align-items: stretch; }
.clients-slider .slick-slide { height: auto; }
.clients-slider .slick-slide > div { height: 100%; }

.slide-pad { padding: 0 12px; height: 100%; }

.client-card {
  border: 1px solid var(--brand-tint);
  border-radius: var(--radius-lg);
  padding: 40px 34px 34px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: background-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.client-icon { color: var(--brand); display: block; margin-bottom: 26px; line-height: 0; }

.client-title {
  font-family: var(--font-sans);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--brand);
  margin-bottom: 22px;
  transition: color .35s ease;
}

.client-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  flex: 1 1 auto;
}
.client-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
  transition: color .35s ease;
}
.client-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* "+N more" count shown on the all-services cards when the company list is truncated */
.client-more {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--body-soft);
  margin: -14px 0 20px;
  transition: color .35s ease;
}
.client-card:hover .client-more { color: rgba(255, 255, 255, .75); }

.know-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  margin-top: auto;
  align-self: flex-start;
  transition: color .35s ease, gap .25s ease;
}
.know-more:hover { gap: 16px; }

/* highlighted / featured card — mirrors the blue card in the Figma design */
.client-card:hover,
.slick-slide.is-active .client-card {
  background: var(--brand);
  transform: translateY(-14px);
  box-shadow: var(--shadow-pop);
}
.client-card:hover .client-title,
.slick-slide.is-active .client-card .client-title,
.client-card:hover .client-list li,
.slick-slide.is-active .client-card .client-list li,
.client-card:hover .know-more,
.slick-slide.is-active .client-card .know-more,
.client-card:hover .client-icon,
.slick-slide.is-active .client-card .client-icon { color: #fff; }

/* --------------------------------------------------------------------------
   9. Tender list
   -------------------------------------------------------------------------- */
.section-tender { background: var(--white); }

.tender-list { list-style: none; padding: 0; margin: 0; }

.tender-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 26px 16px 16px;
  border-radius: var(--radius-md);
  transition: background-color .25s ease, transform .25s ease;
}
.tender-row:nth-child(odd) { background: var(--brand-tint); }
.tender-row:hover { background: var(--brand-tint-2); transform: translateX(4px); }

.tender-date {
  flex: none;
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
}
.tender-date b { font-size: 20px; font-weight: 700; font-style: normal; }
.tender-date i { font-size: 15px; font-weight: 500; font-style: normal; }

.tender-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 102%;
  color: var(--body);
  font-weight: 500;
}

.tender-file {
  flex: none;
  display: inline-flex;
  transition: transform .25s ease;
}
.tender-file:hover { transform: scale(1.12); }

/* Body wrapper (site-added) — holds the title plus the small file-size line below it */
.tender-body { flex: 1 1 auto; min-width: 0; }
.tender-body .tender-text { margin: 0; }
.tender-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 6px;
}
.tender-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--body-soft);
}

/* Action icon pair (site-added) — "view more" + download, replaces the bare .tender-file icon */
.tender-actions { flex: none; display: flex; align-items: center; gap: 10px; }
.tender-action {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--brand);
  font-size: 15px;
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.tender-action:hover {
  background: var(--brand);
  color: var(--white);
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .tender-row { flex-wrap: wrap; gap: 14px; padding: 16px; }
  .tender-body { order: 3; flex-basis: 100%; }
  .tender-body .tender-text { font-size: 15px; }
}

/* Shared "view more" modal content (site-added) */
.site-modal { border-radius: var(--radius-lg); border: 0; box-shadow: var(--shadow-pop); overflow: hidden; }
.site-modal .modal-header {
    position: relative;
    padding: 18px 56px 16px 28px;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%);
    border-bottom: 0;
    overflow: hidden;
}
.site-modal .modal-header::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
}
.site-modal .modal-header::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -20px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
}
.site-modal .modal-header-inner { position: relative; z-index: 1; }
.site-modal .modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 4px;
}
.site-modal .modal-eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--white);
    flex-shrink: 0;
}
.site-modal .modal-title { font-family: var(--font-serif); font-weight: 400; font-size: 22px; color: var(--white); position: relative; z-index: 1; }
.site-modal .btn-close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 2;
    width: 34px;
    height: 34px;
    margin: 0;
    background: rgba(255, 255, 255, .16) url(data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M6%206L18%2018M18%206L6%2018'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'/%3e%3c/svg%3e) center/15px no-repeat;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    opacity: 1;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: none;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.site-modal .btn-close:hover {
    background-color: var(--white);
    background-image: url(data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3e%3cpath%20d='M6%206L18%2018M18%206L6%2018'%20stroke='%23405EB8'%20stroke-width='2'%20stroke-linecap='round'/%3e%3c/svg%3e);
    border-color: var(--white);
    transform: translateY(-50%) rotate(90deg) scale(1.06);
}
.modal-tender-title { font-family: var(--font-serif); font-weight: 400; color: var(--ink); margin-bottom: 12px; }
.modal-tender-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 14px;
  color: var(--body-soft);
  margin-bottom: 18px;
}
.modal-tender-meta b { color: var(--ink); font-weight: 600; }
.modal-tender-desc { font-size: 15.5px; line-height: 1.75; color: var(--body); }

/* --------------------------------------------------------------------------
   10. CTA + Footer
   -------------------------------------------------------------------------- */
.cta-footer { color: rgba(255, 255, 255, .86); }

/* The CTA block and the footer share ONE continuous vertical gradient,
   sampled from the Figma frame: #405EB8 at the top → #222F5E at the bottom. */
.footer-gradient {
  background: linear-gradient(180deg, var(--brand) 0%, var(--footer-grad-end) 100%);
}

.cta-block { padding: clamp(56px, 6vw, 96px) 0 clamp(44px, 4.5vw, 70px); }
.cta-title {
  font-family: var(--font-serif);
  color: #fff;
  font-weight: 400;              /* DM Serif Display ships a single weight */
  font-size: clamp(30px, 3.4vw, 65px);    /* ~65px on the 1920 frame */
  line-height: 1.14;
  margin-bottom: 18px;
}
.cta-sub {
  max-width: 760px;
  margin: 0 auto 30px;
  font-size: 16px;
  color: rgba(255, 255, 255, .8);
}

/*
Inner Page Header
*/

.innerbanner_sec {
    width: 100%;
    height: 45vh;
    max-height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 0 0 var(--hero-radius) var(--hero-radius);
}

.innerbanner_sec::before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #00000096;
    z-index: 1;
    border-radius: 0 0 var(--hero-radius) var(--hero-radius);
}

.innerbanner_sec .cust_container {
    position: relative;
    height: 100%;
    z-index: 2;
}

.innerbanner_sec .content {
    position: relative;
    top: 65%;
    left: 0%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-block;
}

.innerbanner_head {
    font-size: 300%;
    font-weight: 500;
    text-align: left;
    line-height: 1.5;
    color: var(--white);
    padding: 0;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.innerbanner_head span {
    color: var(--brand);
}

/*
Footer
*/

.footer-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  opacity: 1;
  margin: 0;
}

.footer-main { padding: clamp(44px, 4.5vw, 76px) 0; }

.brand-footer { margin-bottom: 22px; }
.brand-footer .brand-top { font-size: 16px; }
.brand-footer .brand-bottom { font-size: 20px; }

.footer-text {
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .78);
  max-width: 460px;
  margin: 0;
}
.inline-arrow { color: #fff; margin-left: 4px; }

.footer-heading {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 24px;
}

.footer-links { list-style: none; padding: 0; margin: 0; columns: 2; }
.footer-links li { margin-bottom: 14px; }
.footer-links a { font-size: 15px; color: rgba(255, 255, 255, .8); }
.footer-links a:hover { color: #fff; padding-left: 4px; }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list > li { margin-bottom: 18px; }
.contact-pair { display: flex; flex-wrap: wrap; gap: 12px 34px; }

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, .84);
  line-height: 1.6;
}
.contact-item a:hover { color: #fff; }
.contact-ico {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* the strip below the gradient returns to the solid brand blue */
.copyright {
  background: var(--brand);
  padding: 14px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, .88);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10b. Contact Us page (site-added — no reference equivalent)
   -------------------------------------------------------------------------- */
.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3vw, 40px);
  box-shadow: var(--shadow-card);
  height: 100%;
}
/* Shared by every "floating label" form (Contact, Career Apply Now, ...) */
.floating-form .form-control {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 15px;
  color: var(--body);
}
.floating-form .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(64, 94, 184, .12);
}
.floating-form textarea.form-control { min-height: 150px; resize: vertical; }

/* Floating label — pure CSS, no JS. The label sits inside the field at rest,
   then floats up onto the border with a background cutout once the field is
   focused or has a value. Detecting "has a value" needs no JS: every field
   below carries placeholder=" " (a single space) purely so :placeholder-shown
   has something to toggle off once real content is typed — the label itself
   is what the user actually sees at rest, not that placeholder.
   Needs input/textarea BEFORE label in the markup (~ only selects forward).
   Doesn't apply to <input type="file"> — file inputs don't support
   placeholder at all, so that field keeps a plain static label instead. */
.floating-form .form-group { position: relative; }
.floating-form .form-group label {
  position: absolute;
  top: 12px;
  left: 16px;
  padding: 2px 4px;
  margin: 0;
  line-height: normal;
  pointer-events: none;
  transition: all .2s ease;
  font-size: 15px;
  opacity: .7;
  z-index: 1;
  color: var(--body-soft);
}
.floating-form .form-group .form-control:focus ~ label,
.floating-form .form-group .form-control:not(:placeholder-shown) ~ label {
  top: -10px;
  left: 12px;
  font-size: 12.5px;
  opacity: 1;
  background: var(--white);
  border-radius: 3px;
  color: var(--brand);
}
.commonError { display: block; margin-top: 6px; font-size: 13px; color: #dc3545; }

/* Contact info tiles (address / phone / fax / email) — a scannable row of
   small cards instead of one long list, matching the reference's separate
   info blocks. */
.info-tile {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  height: 100%;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
}
.info-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.info-tile-icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.info-tile-label { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.info-tile-value { font-size: 14px; color: var(--body-soft); line-height: 1.6; margin: 0; }
.info-tile-value a { color: var(--body-soft); }
.info-tile-value a:hover { color: var(--brand); }

.contact-map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  line-height: 0;
  height: 100%;
  min-height: 300px;
}

/* --------------------------------------------------------------------------
   10c. Career / job list (site-added — no reference equivalent)
   -------------------------------------------------------------------------- */
/* .section-jobs { background: var(--brand-tint); } */

.job-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform .35s ease, box-shadow .35s ease;
}
.job-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-pop); }

.job-type-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 16px;
}

.job-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.job-desc { font-size: 15px; color: var(--body-soft); flex: 1 1 auto; margin-bottom: 18px; }

.job-meta-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; }
.job-meta-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--body); }
.job-meta-list i { color: var(--brand); width: 16px; }

.job-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   11. Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  .main-menu .nav-link { padding: 8px 11px; font-size: 14px; }
  .brand-top { font-size: 15px; }
  .brand-bottom { font-size: 19px; }
}

@media (max-width: 1199.98px) {
  :root { --header-h: 84px; }
  .site-header { padding: 14px 0; }
}

@media (max-width: 767.98px) {
  body { font-size: 16px; }
  .announce-label { font-size: 13px; padding-right: 12px; }
  .announce-item { font-size: 13px; }
  .brand-top { font-size: 13px; }
  .brand-bottom { font-size: 16px; }
  .hero-inner { padding-bottom: 76px; }   /* height comes from --hero-height */
  .hero-slider .slick-dots { padding-left: 24px; bottom: 24px; }
  .client-card { padding: 30px 24px 26px; }
  .client-title { font-size: 19px; }
  .cta-block { text-align: center; }
}

@media (max-width: 575.98px) {
  .container-xxl { padding-left: 18px; padding-right: 18px; }
  .btn-primary-pill, .btn-ghost-pill { padding: 12px 24px; font-size: 15px; }
  .contact-pair { flex-direction: column; gap: 14px; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
.hero a:focus-visible, .cta-footer a:focus-visible { outline-color: #fff; }