:root{
  --red: #e10600;
  --brand-primary: #1f3c88;   /* KAS Blue */
  --brand-dark: #0b1f44;      /* Navy */
  --brand-accent: #c4161c;    /* Optional red */

  --text:#111;
  --muted:#666;
  --bg:#fff;
  --shadow:0 12px 30px rgba(0,0,0,.12);
  --radius:16px;
  --container:1650px;
}


*{ box-sizing:border-box; }
body{
  padding-top: 120px;
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color:var(--text);
  background:var(--bg);
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.container{
  max-width: var(--container);
  width: 100%;
  margin: 0 auto;
  padding-left: clamp(20px, 4vw, 60px);
  padding-right: clamp(20px, 4vw, 60px);
}
/* SWIPER GLOBAL FIX */
.swiper{
  overflow: hidden;
}

/* TOPBAR */
/* =========================
   GLOBAL STICKY HEADER
========================= */
.siteHeader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  background: #fff;

  transition: box-shadow .35s ease, backdrop-filter .35s ease;
}
.siteHeader.is-scrolled{
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}

.topbar{
  background:#f6f6f6;
  font-size:13px;
}
.topbar__inner{
  display:flex;
  justify-content:flex-end;
  gap:18px;
  padding:10px 0;
}
.topbar__link{
  padding: 6px;
  border-radius: 6px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#333;
  font-weight:500;
  transition: all .2s ease;
}
.topbar__link i{
  font-size:14px;
  color: var(--brand-primary);
}
.topbar__link:hover{
  background: rgba(31,60,136,.1);
  color: var(--brand-primary);
}


.topbar__right > a:not(:last-child)::after{
  content:"";
  width:1px;
  height:14px;
  background:#ddd;
  margin-left:14px;
}


/* HEADER */
.header{
  background:#fff;
  top:0;
  z-index:50;
  border-bottom:1px solid #eee;
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:18px;
}

/* BRAND */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand__mark{
  width:34px;
  height:34px;
  background:var(--red);
  border-radius:6px;
}
.brand__text{
  font-size:44px;
  font-weight:700;
  letter-spacing:1px;
}

/* NAV */
.nav{
  display:flex;
  align-items:center;
  gap:22px;
  font-size:13px;
  letter-spacing:.6px;
}
.nav__link{
  color:#222;
  padding:10px 6px;
}



.nav__cta:hover{ filter:brightness(.95); }

.nav__mobileBtn{
  display:none;
  background:none;
  border:0;
  font-size:22px;
  cursor:pointer;
}

/* RESPONSIVE */
@media (max-width:1100px){
  .nav{ display:none; }
  .nav__mobileBtn{ display:block; }
}
/* =========================
   LOGO
========================= */

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand__logo {
  height: 64px;        /* adjust if needed */
  width: auto;
  display: block;
}
/* =========================
   HERO SLIDER
========================= */


/* =========================
   HERO SLIDER
========================= */

.heroSwiper{
  position: relative;
  width: 100%;

  margin: 0 auto;
  overflow: hidden;
}

.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide {
  height: 100%;

  max-width: 100%;
}
.swiper-wrapper {
  box-sizing: border-box;
}


/* Slide background */
.hero__slide {
  position: relative;
  background-size: cover;
  background-position: center;
}

/* =========================
   CINEMATIC HERO ANIMATION
========================= */

.hero__slide {
  transform: scale(1);
  transition: transform 6s ease;
}

/* Active slide zoom */
.swiper-slide-active.hero__slide {
  transform: scale(1.08);
}

/* Previous slide subtle zoom out */
.swiper-slide-prev.hero__slide {
  transform: scale(1.02);
}
.hero__content {
  transform: translateY(20px);
  opacity: 0;
  transition: all 1s ease;
}

.swiper-slide-active .hero__content {
  transform: translateY(0);
  opacity: 1;
}


/* Single professional overlay */
.hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(5,15,30,0.85) 0%,
    rgba(5,15,30,0.55) 45%,
    rgba(5,15,30,0.15) 100%
  );
  z-index: 1;
}
/* =========================
   MOSAIC TILE HERO
========================= */



/* Content layer */
.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.hero__left h1 {
  font-size: 26px;
  line-height: 1.2;
  max-width: 620px;
}

.hero__btn {
  margin-top: 24px;
  display: inline-block;
  background: #e10600;
  color: #fff;
  padding: 14px 28px;
  border-radius: 6px;
  font-weight: 600;
}

.hero__btn:hover {
  background: #c20510;
}

.hero__right img {
  max-width: 420px;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
}

/* Arrows */
.heroArrow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

.heroArrow::after {
  font-size: 22px;
  color: #fff;
}

.heroArrow:hover {
  background: rgba(225,6,0,0.9);
}

/* TOPBAR (CTR like) */
.topbar--ctr{
  background:#f6f6f6;
  border-bottom:1px solid #eee;
  font-size:13px;
}
.topbar__inner--ctr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}
.topbar__right{
  display:flex;
  align-items:center;
  gap:18px;
}
.topbar__link{
  display:flex;
  align-items:center;
  gap:8px;
  color:#333;
}
.topbar__text{ letter-spacing:.4px; }
.topbar__link:hover{ color:#000; }

/* MAIN HEADER */

.mainHeader__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:28px 0;
}

/* Logo sizing similar to CTR */
/*.brand--ctr .brand__logo{
  height:68px;
  width:auto;
  display:block;
}*/
.brand--ctr .brand__logo{
  height:82px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
/* NAV (CTR like) */
.nav--ctr{
  display:flex;
  align-items:center;
  gap:26px;
  font-size:14px;
  letter-spacing:.8px;
}
.nav--ctr > a,
.nav--ctr > .nav__dropdown {
  height: 48px;
  display:flex;
  align-items:center;
}
/* MAIN MENU LINKS */
.nav--ctr .nav__link{
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  transition: all .25s ease;
}

.nav--ctr .nav__link:hover{
  background: rgba(31,60,136,.15);
  color: var(--brand-primary);
}


/* CONTACT FORM (CTA) — FINAL */
.nav--ctr .nav__cta{
  background: var(--brand-primary);
  color: #fff;
  border: 2px solid var(--brand-primary);
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  transition: all .25s ease;
}

.nav--ctr .nav__cta:hover{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}


.nav--kas .nav__cta:hover{
  background: var(--brand-dark);
}
/*.nav--ctr .nav__cta:hover{ filter:brightness(.95); }*/

/* Mobile */
.nav__mobileBtn{
  display:none;
  background:none;
  border:0;
  font-size:26px;
  cursor:pointer;
}

/* Mobile menu panel */
.mobileMenu{
  display:none;
  border-top:1px solid #eee;
  background:#fff;
}
.mobileMenu__inner{
  padding:14px 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobileMenu__link{
  padding:12px 8px;
  border-radius:8px;
}
.mobileMenu__link:hover{ background:#f6f6f6; }

.mobileMenu__cta{
  margin-top:6px;
  background:var(--red);
  color:#fff;
  padding:12px 14px;
  border-radius:8px;
  font-weight:700;
  display:inline-block;
  width:fit-content;
}
.mobileMenu__lang{
  margin-top:8px;
  border-top:1px dashed #ddd;
  padding-top:10px;
}

/* Responsive behavior */
@media (max-width:1100px){
  .nav--ctr{ display:none; }
  .nav__mobileBtn{ display:block; }
  body.menu-open .mobileMenu{ display:block; }
}
/* Mobile submenu items (children) */
.mobileMenu__sub{
  display:block;
  padding: 10px 8px 10px 34px;  /* left indent */
  font-size: 14px;
  color:#444;
  border-radius: 8px;
  position: relative;
  margin-left: 6px;
}

/* small line indicator (instead of the ugly symbol) */
.mobileMenu__sub::before{
  content:"";
  position:absolute;
  left: 16px;
  top: 50%;
  width: 10px;
  height: 2px;
  background: #d7dce6;
  transform: translateY(-50%);
}

/* optional: vertical guide line */
.mobileMenu__sub{
  border-left: 2px solid #eef1f4;
}
.mobileMenu__sub:hover{
  background:#f6f6f6;
  color: var(--brand-primary);
}
/* =========================
   OUR UNITS
========================= */

.units {
  padding: 70px 0;
}

.units__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 40px;
}

.units__dot {
  width: 14px;
  height: 14px;
  background: #e10600;
  border-radius: 3px;
}

/* Grid */
.units__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

/* Card */
.unitCard {
  cursor: pointer;
  position: relative;
  height: 260px;
  border-radius: 18px;
  overflow: hidden;

  background-size: cover;
  background-position: center;

  color: #fff;

  display: flex;
  align-items: center;          /* ⭐ CENTER VERTICALLY */
  justify-content: center;      /* ⭐ CENTER HORIZONTALLY */

  padding: 0;                   /* remove top offset */

  transition: transform .3s ease, box-shadow .3s ease;
}



.unitCard__hover {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;     /* ⭐ move content to bottom */
  justify-content: center;

  padding-bottom: 24px;      /* spacing from bottom */

  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);

  opacity: 0;
  transition: .3s ease;

  z-index: 2;
}


.unitCard:hover .unitCard__hover {
  opacity: 1;
}
.unitCard:hover {
  transform: translateY(-6px) scale(1.02);
}

.unitCard__btn {
  background: #e10600;
  padding: 12px 24px;
  border-radius: 6px;
}
.unitCard__btn:hover {
  background: #c20510;
}
/* Dark overlay */
.unitCard__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.25)
  );
  z-index: 1;
}

/* Icon */
.unitCard__icon {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;

  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #e10600;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
}

.unitCard__icon i {
  font-size: 20px;
  color: #fff;
}

/* Title */
.unitCard__title {
  position: relative;
  z-index: 3;

  text-align: center;
  font-size: 18px;
  font-weight: 700;

  padding: 10px 20px;
  background: rgba(0,0,0,.55);
  border-radius: 10px;

  max-width: 85%;
  line-height: 1.3;
}

/* Hover glow effect */
.unitCard::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(255,255,255,.25),
    transparent 55%
  );
  opacity:0;
  transition: opacity .3s ease;
  z-index:1;
}

.unitCard:hover::after{
  opacity:1;
}
/* ACTIVE UNIT CARD */
.unitCard.is-active{
  outline: 3px solid var(--brand-primary);
  outline-offset: -3px;
}

.unitCard.is-active .unitCard__icon{
  background: var(--brand-primary);
}

/* ACTIVE NAV ITEM */
.nav--ctr .nav__link.is-active{
  background: rgba(31,60,136,.15);
  color: var(--brand-primary);
  font-weight: 700;
}


/* Responsive */
@media (max-width: 1100px) {
  .units__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .units__grid {
    grid-template-columns: 1fr;
  }
}
/* =========================
   ABOUT HOME
========================= */

.aboutHome{
  padding: 90px 0;
  background: #fff;
}

.aboutHome__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Make the left block look balanced (not too wide) */
.aboutHome__text{
  max-width: 580px;
  margin: 0 auto;
}

/* Safe typography inside About (prevents weird inherited styles) */
.aboutHome__body h1,
.aboutHome__body h2,
.aboutHome__body h3{
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 800;
}

.aboutHome__body p{
  margin: 0 0 14px;
  line-height: 1.75;
  color: var(--muted);
}

/* Image */
.aboutHome__image img{
  width:100%;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

/* Stats */
.aboutStats{
  display:flex;
  gap: 50px;
  margin-top: 26px;
}

.aboutStats__item strong{
  color:#e10600;
  font-size: 30px;
  display:block;
  line-height: 1;
}

.aboutStats__item span{
  display:block;
  margin-top: 6px;
  color: #222;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 900px){

  .aboutHome{
    padding: 60px 0;
  }

  .aboutHome__grid{
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .aboutHome__image{
    order:-1;
  }

  .aboutHome__text{
    max-width: 100%;
    text-align:center;
  }

  .aboutStats{
    justify-content:center;
  }

}
@media (max-width: 768px){

  .hero{
    height: 420px;
  }

  .hero__content{
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }

  .hero__right{
    display:none;
  }

  .hero__left h1{
    font-size: 24px;
  }

}

/* =========================
   REFERENCES
========================= */

.refs{
  padding: 90px 0;
  background: #fff;
  position: relative;
  overflow: hidden;
}

/* subtle pattern like screenshot */
.refs::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity:.35;
  pointer-events:none;
}

.refs__inner{
  position: relative;
  z-index: 2;
}

.refs__title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size: 44px;
  font-weight: 800;
  margin: 0 0 40px;
  color:#2a2f36;
}

.refs__dot{
  width:18px;
  height:18px;
  background:#e10600;
  border-radius:4px;
}

/* grid logos */
.refs__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 34px 40px;
  align-items:center;
  justify-items:center;
}

.refs__item{
  width: 100%;
  max-width: 240px;
  height: 90px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  transition: transform .2s ease;
}

.refs__item img{
  max-height: 110px;     /* ⭐ bigger height */
  max-width: 260px;      /* ⭐ bigger width */

  width: auto;
  height: auto;

  filter: grayscale(100%);
  opacity: .9;
  transition: all .25s ease;
}

/* hover effect */
.refs__item:hover{
  transform: translateY(-3px);
}
.refs__item:hover img{
  filter: grayscale(0%);
  opacity: 1;
}

/* MORE button */
.refs__moreWrap{
  margin-top: 44px;
  display:flex;
  justify-content:center;
}

.refs__moreBtn{
  background:#e10600;
  color:#fff;
  padding: 16px 34px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: .5px;
  display:inline-flex;
  align-items:center;
  gap: 14px;
}

.refs__moreBtn:hover{
  background:#c20510;
}

.refs__arrow{
  font-size: 22px;
  line-height: 1;
}

/* =========================
   CTA CONTACT SECTION
========================= */

.ctaContact{
  position:relative;
  padding:120px 0;
  background:url('/assets/images/cta-bg.jpg') center/cover no-repeat;
  text-align:center;
  color:#fff;
}

.ctaContact__overlay{
  position:absolute;
  inset:0;
  background:rgba(10,20,40,.65);
}

.ctaContact__content{
  position:relative;
  z-index:2;
  max-width:900px;
}

.ctaContact h2{
  font-size:38px;
  margin-bottom:25px;
  font-weight:700;
}

.ctaContact p{
  font-size:20px;
  line-height:1.6;
  margin-bottom:35px;
  color:#eee;
}

.ctaContact__btn{
  display:inline-block;
  background:#e10600;
  color:#fff;
  padding:16px 32px;
  border-radius:8px;
  font-weight:700;
  letter-spacing:.5px;
  transition:.3s;
}

.ctaContact__btn:hover{
  background:#b8040b;
}
.contactHero{
  height:460px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

.contactHero__bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}
.contactSection{
  padding:70px 0;
  background:#f6f7fb;
}

.contactSection__title{
  font-size:28px;
  font-weight:700;
  margin-bottom:10px;
}

.contactSection__desc{
  color:#666;
  margin-bottom:40px;
}
.contactForm__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.contactForm label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
}

.contactForm input,
.contactForm textarea{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:6px;
  margin-bottom:20px;
}

.contactForm textarea{
  height:160px;
}

.contactForm__btn{
  background:#e10600;
  color:#fff;
  border:none;
  padding:12px 28px;
  border-radius:6px;
  font-weight:700;
  cursor:pointer;
}
@media(max-width:900px){
  .contactForm__grid{
    grid-template-columns:1fr;
  }
}

/* =========================
   FOOTER
========================= */

.siteFooter{
  background:#f3f3f3;
  padding:70px 0 20px;
  margin-top:80px;
}

.footerGrid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 2fr 1fr;
  gap: 60px;
  align-items: start;
}

.footerCol h4{
  margin-bottom:18px;
  font-size:18px;
  font-weight:700;
}

.footerMenu{
  list-style:none;
  padding:0;
}

.footerMenu li{
  margin-bottom:10px;
}

.footerMenu a{
  color:#333;
  transition:.2s;
}

.footerMenu a:hover{
  color:#e10600;
}

/* Logo */
.footerBrand img{
  width:160px;
  margin-bottom:10px;
}

.footerSlogan{
  font-size:20px;
  font-weight:600;
  color:#444;
}

/* Social */
.footerSocial{
  margin-top:15px;
}

.footerSocial a{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  background:#fff;
  border-radius:8px;
  margin-right:10px;
  color:#e10600;
  font-size:18px;
  transition:.25s;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.footerSocial a:hover{
  background:#e10600;
  color:#fff;
}

/* Bottom */
.footerBottom{
  border-top:1px solid #ddd;
  margin-top:50px;
  padding-top:20px;
  text-align:center;
  color:#666;
  font-size:14px;
}


/* Responsive */
@media(max-width:1000px){
  .footerGrid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){
  .footerGrid{
    grid-template-columns:1fr;
  }

  .footerBrand{
    text-align:center;
  }
}

.nav__dropdownMenu a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: #333;
}




/* =========================
   NAV DROPDOWN — FINAL FIX
========================= */

.nav__dropdown {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

/* clickable hover area */
.nav__dropdown > .nav__link {
  height: 48px;
  display:flex;
  align-items:center;
}

/* dropdown panel */
.nav__dropdownMenu {
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 240px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  border-radius: 10px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  transition: opacity .25s ease, transform .25s ease;

  z-index: 10001;
}

/* KEEP OPEN when hovering parent OR menu */
.nav__dropdown:hover .nav__dropdownMenu,
.nav__dropdownMenu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* dropdown links */
.nav__dropdownMenu a {
  display: block;
  padding: 12px 18px;
  font-weight: 500;
  color: #222;
  white-space: nowrap;
}

.nav__dropdownMenu a:hover {
  background: rgba(31,60,136,.08);
  color: var(--brand-primary);
}

.nav__dropdownItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: #222;
  font-weight: 500;
}

.nav__dropdownItem i {
  color: var(--brand-primary);
  font-size: 14px;
  width: 18px;
  text-align: center;
}

.nav__dropdownItem:hover {
  background: rgba(31,60,136,.08);
  color: var(--brand-primary);
}
/* ======================================
   NAV UX PROFESSIONAL UPGRADE
====================================== */

/* Larger hover zone */
.nav__dropdown{
  padding: 6px 0;
}

/* Arrow styling */
.nav__arrow{
  margin-left: 6px;
  font-size: 11px;
  transition: transform .25s ease;
}

/* Rotate arrow on hover */
.nav__dropdown:hover .nav__arrow{
  transform: rotate(180deg);
}

/* Smooth dropdown animation */
.nav__dropdownMenu{
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease;
}

/* Hover delay feel */
.nav__dropdown:hover .nav__dropdownMenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Improve dropdown spacing */
.nav__dropdownMenu{
  padding: 8px 0;
  margin-top: 6px;
}

/* Dropdown item improvements */
.nav__dropdownItem{
  padding: 14px 20px;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: all .2s ease;
}

/* Hover style */
.nav__dropdownItem:hover{
  background: rgba(31,60,136,.08);
  border-left: 3px solid var(--brand-primary);
}

/* Active child highlight */
.nav__dropdownItem.is-active{
  background: rgba(31,60,136,.12);
  border-left: 3px solid var(--brand-primary);
  font-weight: 600;
}

/* Smooth hover safe zone */
.nav__dropdown::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:10px;
}
.nav__dropdown.is-open .nav__dropdownMenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobileMenu__group{
  border-bottom: 1px solid #eee;
}

.mobileMenu__parent{
  width: 100%;
  background: none;
  border: none;
  padding: 14px 8px;

  display:flex;
  justify-content: space-between;
  align-items:center;

  font-size: 15px;
  font-weight: 600;
  cursor:pointer;
}

.mobileMenu__parent i{
  transition: transform .3s ease;
}

.mobileMenu__group.is-open .mobileMenu__parent i{
  transform: rotate(180deg);
}
.nav__dropdown.is-open .nav__megaMenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width:1100px){
  .nav__dropdown:hover .nav__megaMenu{
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
}
/* children container */
.mobileMenu__children{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding-left: 14px;
}
.mobileMenu__group.is-open .mobileMenu__children{

}

/* open */
.mobileMenu__group.is-open .mobileMenu__children{
  max-height: 300px;
}

.mobileMenu__children a{
  display:block;
  padding: 10px 0;
  font-size: 14px;
  color:#444;
}

.mobileMenu__children a:hover{
  color: var(--brand-primary);
}

/* ===============================
   ADMIN PANEL — PREMIUM UPGRADE
================================ */

.admin-body{
  background: #f4f7fb;
  color: #0f172a;
}

/* topbar */
.admin-topbar{
  position: sticky;
  top: 0;
  z-index: 2000;
  height: 78px;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 24px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.18);
}

.admin-topbar-left,
.admin-topbar-right{
  display:flex;
  align-items:center;
  gap:16px;
}

.admin-brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:#fff;
}

.admin-brand-logo{
  width:42px;
  height:42px;
  border-radius:12px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  font-size:14px;
  letter-spacing:.8px;
  box-shadow: 0 10px 20px rgba(59,130,246,.25);
}

.admin-brand strong{
  display:block;
  font-size:16px;
  line-height:1.2;
}

.admin-brand small{
  display:block;
  font-size:12px;
  opacity:.75;
  margin-top:2px;
}

.sidebar-toggle{
  width:42px;
  height:42px;
  border:none;
  border-radius:12px;
  background: rgba(255,255,255,0.08);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  display:none;
}

.sidebar-toggle:hover{
  background: rgba(255,255,255,0.14);
}

.admin-userbox{
  display:flex;
  align-items:center;
  gap:12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding:8px 12px;
  border-radius:14px;
  color:#fff;
}

.admin-user-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background: linear-gradient(135deg,#60a5fa,#2563eb);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#fff;
}

.admin-user-meta strong{
  display:block;
  font-size:14px;
  line-height:1.2;
}

.admin-user-meta small{
  display:block;
  font-size:12px;
  opacity:.72;
  margin-top:3px;
}

.admin-logout-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:12px;
  background: #ef4444;
  color:#fff;
  font-weight:700;
  transition: .25s ease;
}

.admin-logout-btn:hover{
  background:#dc2626;
  transform: translateY(-1px);
}

/* layout */
.admin-layout{
  display:flex;
  min-height: calc(100vh - 78px);
  background: #f4f7fb;
}

/* sidebar */
.admin-sidebar{
  width: 280px;
  background: linear-gradient(180deg, #172033 0%, #111827 100%);
  color:#e5e7eb;
  padding: 24px 18px;
  border-right: 1px solid rgba(255,255,255,0.05);
  position: sticky;
  top: 78px;
  height: calc(100vh - 78px);
  overflow-y: auto;
}

.admin-sidebar-head{
  padding: 8px 12px 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-sidebar-head h3{
  margin:0 0 6px;
  color:#fff;
  font-size:15px;
  font-weight:700;
}

.admin-sidebar-head p{
  margin:0;
  font-size:12px;
  color:rgba(255,255,255,.65);
  line-height:1.5;
}

.admin-menu{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.admin-menu a,
.admin-sidebar a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding: 12px 14px;
  border-radius: 12px;
  color:#cbd5e1;
  font-weight:500;
  transition: .25s ease;
}

.admin-menu a:hover,
.admin-sidebar a:hover{
  background: rgba(59,130,246,.16);
  color:#fff;
  transform: translateX(2px);
}

.admin-menu a.active,
.admin-sidebar a.active{
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-weight:700;
  box-shadow: 0 10px 20px rgba(37,99,235,.25);
}

/* content */
.admin-content{
  flex:1;
  padding: 28px;
  overflow-x:auto;
}

.admin-content h2{
  margin: 0 0 22px;
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -.02em;
}

.admin-title{
  font-size: 22px;
  font-weight: 700;
  color:#0f172a;
  margin-bottom: 16px;
}

/* footer */
.admin-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding: 18px 28px;
  border-top:1px solid #e5e7eb;
  background:#fff;
  color:#64748b;
  font-size:14px;
}

/* cards */
.admin-card{
  background: #fff;
  padding: 24px;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(15,23,42,0.07);
  border: 1px solid #e9eef5;
  margin-bottom: 24px;
}

.admin-card h3{
  margin: 0 0 18px;
  font-size: 20px;
  font-weight: 800;
  color:#0f172a;
}

.admin-card hr{
  border:none;
  border-top:1px solid #e8edf4;
  margin:18px 0;
}

/* forms */
.admin-form label{
  display:block;
  margin-bottom:7px;
  font-weight:700;
  font-size:14px;
  color:#334155;
}

.admin-form input,
.admin-form textarea,
.admin-form select{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #d7dee8;
  background:#fff;
  margin-bottom:16px;
  font-size:14px;
  color:#0f172a;
  transition: .22s ease;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

.admin-form textarea{
  min-height:120px;
  resize:vertical;
}

/* buttons */
.btn-admin,
button.btn-admin,
a.btn-admin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  border:none;
  padding: 11px 18px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
  font-size:14px;
  transition:.25s ease;
  text-decoration:none;
}

.btn-admin:hover,
button.btn-admin:hover,
a.btn-admin:hover{
  background: linear-gradient(135deg,#1d4ed8,#1e40af);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(37,99,235,.20);
}

.btn-admin-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top: 6px;
  padding: 12px 18px;
  border:none;
  border-radius: 12px;
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  cursor:pointer;
  font-weight:700;
  transition:.25s ease;
}

.btn-admin-primary:hover{
  background: linear-gradient(135deg,#1d4ed8,#1e40af);
  transform: translateY(-1px);
}

.btn-danger,
a.btn-danger{
  background: linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff;
}

.btn-danger:hover,
a.btn-danger:hover{
  background: linear-gradient(135deg,#dc2626,#b91c1c);
}
/* ===============================
   SIDEBAR DROPDOWN GROUPS
================================ */

.menu-group{
  margin-bottom: 8px;
}

.menu-group-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #cbd5e1;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: .25s ease;
  text-align: left;
}

.menu-group-toggle:hover{
  background: rgba(59,130,246,.16);
  color: #fff;
}

.menu-arrow{
  transition: transform .25s ease;
  font-size: 14px;
}

.menu-group.open .menu-arrow{
  transform: rotate(180deg);
}

.menu-submenu{
  display: none;
  padding: 8px 0 6px 14px;
  margin-top: 4px;
  border-left: 1px solid rgba(255,255,255,.08);
}

.menu-group.open .menu-submenu{
  display: block;
}

.menu-submenu a{
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  margin-bottom: 4px;
  border-radius: 10px;
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: .25s ease;
}

.menu-submenu a:hover{
  background: rgba(59,130,246,.14);
  color: #fff;
}

.menu-submenu a.active{
  background: linear-gradient(135deg,#2563eb,#1d4ed8);
  color: #fff;
  font-weight: 700;
}
/* checkbox */
.checkbox-row,
.form-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 18px;
}

.checkbox-row input,
.form-check input[type="checkbox"]{
  width:auto !important;
  margin:0;
  transform: scale(1.15);
}

/* tables / lists */
.table-responsive{
  width:100%;
  overflow-x:auto;
}

.admin-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow:hidden;
  background:#fff;
  border-radius:16px;
}

.admin-table th{
  background:#f8fafc;
  color:#334155;
  font-size:13px;
  font-weight:800;
  padding:14px 16px;
  border-bottom:1px solid #e5e7eb;
}

.admin-table td{
  padding:16px;
  border-bottom:1px solid #edf2f7;
  vertical-align:middle;
}

.admin-table tr:hover td{
  background:#f8fbff;
}

/* quick actions */
.quick-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* dashboard helpers */
.dashboard-page{
  display:flex;
  flex-direction:column;
  gap:24px;
}

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

.dashboard-two-col{
  display:grid;
  grid-template-columns:2fr 1.1fr;
  gap:20px;
}

.system-info-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.system-info-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border:1px solid #e9edf5;
  border-radius:12px;
  background:#f8fafc;
}

/* mobile */
@media(max-width: 1100px){
  .sidebar-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .admin-sidebar{
    position: fixed;
    top: 78px;
    left: -100%;
    width: 280px;
    height: calc(100vh - 78px);
    z-index: 2100;
    transition: left .28s ease;
  }

  .admin-sidebar.open{
    left: 0;
  }

  .admin-content{
    padding: 22px;
  }
}

@media(max-width: 992px){
  .dashboard-two-col{
    grid-template-columns:1fr;
  }
}

@media(max-width: 768px){
  .admin-topbar{
    padding: 0 16px;
  }

  .admin-brand small,
  .admin-user-meta{
    display:none;
  }

  .admin-content{
    padding: 18px;
  }

  .admin-content h2{
    font-size:24px;
  }

  .admin-card{
    padding:18px;
    border-radius:16px;
  }

  .admin-footer{
    flex-direction:column;
    text-align:center;
  }
}
.checkbox-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:10px;
}

.checkbox-row input{
    width:auto;
}
.refsPage{
  padding: 80px 0;
}

.refsPage__title{
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 40px;
  text-align:center;
}

.refsPage__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:40px;
  align-items:center;
}

.refsPage__card{
  background:#fff;
  padding:40px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  text-align:center;
  transition:.3s ease;
}

.refsPage__card:hover{
  transform: translateY(-5px);
}

.refsPage__card img{
  max-height: 90px;
  margin:auto;
  transition:.3s ease;
}

.refsPage__card:hover img{
  transform: scale(1.08);
}
.pageHero{
  padding: 70px 0 30px;
  text-align:center;
}

.pageHero__title{
  font-size: 38px;
  font-weight: 800;
}

.refsPage{
  padding: 40px 0 90px;
}

.refsPage__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap: 40px;
  align-items:center;
}

.refsPage__card{
  background:#fff;
  padding: 40px;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  text-align:center;
  transition:.3s ease;
}

.refsPage__card:hover{
  transform: translateY(-5px);
}

.refsPage__card img{
  max-height: 90px;
  margin:auto;
  transition:.3s ease;
}

.refsPage__card:hover img{
  transform: scale(1.08);
}
/* ===============================
   FLOATING QUICK PANEL PRO
================================ */

.quickPanel {
  position: fixed;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ================= Button Base ================= */

.quickPanel__item {
  position: relative;

  width: 60px;
  height: 60px;

  background: var(--brand-primary);
  color: white;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;
  border-radius: 12px;

  cursor: pointer;

  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: all .3s ease;
}

/* Hover lift */
.quickPanel__item:hover {
  transform: translateX(-8px);
  background: var(--brand-dark);
}

/* ================= Slide Label ================= */

.quickPanel__item::after {

  content: attr(data-label);

  position: absolute;
  right: 75px;
  white-space: nowrap;

  background: var(--brand-dark);
  color: white;

  padding: 8px 14px;
  border-radius: 8px;

  font-size: 13px;
  font-weight: 500;

  opacity: 0;
  transform: translateX(10px);
  transition: .3s ease;

  pointer-events: none;
}

.quickPanel__item:hover::after {
  opacity: 1;
  transform: translateX(0);
}

/* ================= WhatsApp Pulse ================= */

.quickPanel__whatsapp {
  background: #25D366;
  animation: whatsappPulse 2s infinite;
}

.quickPanel__whatsapp:hover {
  background: #1ebe5d;
}

@keyframes whatsappPulse {

  0% {
    box-shadow: 0 0 0 0 rgba(37,211,102, .6);
  }

  70% {
    box-shadow: 0 0 0 12px rgba(37,211,102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37,211,102, 0);
  }
}

/* ================= Mobile Layout ================= */

@media(max-width:768px){

  .quickPanel {
    bottom: 80px;
    right: 10px;
    top: auto;
    transform: none;
    flex-direction: row;
  }

  .quickPanel__item::after {
    display: none;
  }

}

/* =========================
   CMS PAGE DESIGN UPGRADE
========================= */

.pageHero {
  padding: 110px 0 60px;
  background: linear-gradient(
      rgba(10,20,40,.65),
      rgba(10,20,40,.65)
    ),
    url('/assets/images/contact-header.jpg') center/cover no-repeat;
  text-align: center;
  color: #fff;
}

.pageHero__title {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .5px;
}

/* Main Section */
.pageSection {
  padding: 80px 0 120px;
  background: #f8f9fb;
}

/* Content Box */
.pageContent {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  padding: 60px 70px;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  font-size: 17px;
  line-height: 1.9;
  color: var(--muted);
}

/* Headings inside content */
.pageContent h2,
.pageContent h3 {
  margin-top: 40px;
  color: var(--brand-primary);
  font-weight: 700;
}

/* Paragraph spacing */
.pageContent p {
  margin-bottom: 20px;
}

/* Lists */
.pageContent ul {
  margin: 20px 0;
  padding-left: 20px;
}

.pageContent li {
  margin-bottom: 10px;
}

/* Responsive */
@media(max-width: 900px){
  .pageContent {
    padding: 40px 30px;
  }
}

/* =========================
   SIMPLE CMS PAGE DESIGN
========================= */

.cmsHero {
  padding: 120px 0 40px;
  text-align: center;
  background: #f8fafc;
}
.cmsHero__wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
}

.cmsHero__image {
  width: 100%;
  max-width: 700px;   /* control max size here */
  height: auto;

  margin: 0 auto 40px;
  border-radius: 18px;

  box-shadow: 0 25px 60px rgba(0,0,0,.15);
}


.cmsHero__title {
  font-size: 42px;
  font-weight: 800;
  color: var(--brand-primary);
}

.cmsContentSection {
  padding: 60px 0 120px;
  background: #f5f7fb;
}

.cmsContent {
  max-width: 850px;
  margin: 0 auto;
  background: #fff;
  padding: 60px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.08);
  font-size: 17px;
  line-height: 1.9;
  color: var(--muted);
  text-align: left;
}

.cmsContent p {
  margin-bottom: 20px;
}


/* =========================
   UNIT ACCORDION
========================= */

.unitAcc {
  padding: 100px 0;
  background: #f5f7fa;
}

.unitAcc__wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.unitAcc__item {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  transition: all .3s ease;
  border: 1px solid #eef1f4;
}

.unitAcc__btn {
  width: 100%;
  border: none;
  background: transparent;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: left;
}

.unitAcc__btnLeft {
  display: flex;
  align-items: center;
  gap: 14px;
}

.unitAcc__icon {
  font-size: 18px;
  color: var(--brand-primary);
}

.unitAcc__chev {
  font-size: 16px;
  transition: transform .3s ease;
  margin-left: 15px;
}

/* ROTATE ARROW */
.unitAcc__btn[aria-expanded="true"] .unitAcc__chev {
  transform: rotate(180deg);
}

/* PANEL */
.unitAcc__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.22,.61,.36,1);
}
.unitAcc__panelInner {
  padding: 30px;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* TEXT */
.unitAcc__text {
  flex: 1;
  font-size: 15px;
  line-height: 1.8;
  color: #444;
}

/* IMAGE RIGHT SIDE SMALL */
.unitAcc__img {
  width: 260px;
  flex-shrink: 0;
}

.unitAcc__img img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

/* MOBILE */
@media (max-width: 900px) {
  .unitAcc__panelInner {
    flex-direction: column;
  }

  .unitAcc__img {
    width: 100%;
  }
}
/* =========================
   MEGA MENU
========================= */

.nav__dropdown {
  position: relative;
}

.nav__megaMenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 520px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  display: flex;
  padding: 22px;
  gap: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.3s ease;
  z-index: 999;
}
/* Flip mega menu to left side if needed */
.nav__megaMenu--left {
  left: auto;
  right: 0;
}

.nav__dropdown:hover .nav__megaMenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__megaLeft {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.nav__megaItem {
  display: flex;
  gap: 15px;
  text-decoration: none;
  padding: 12px;
  border-radius: 8px;
  transition: 0.2s;
}

.nav__megaItem:hover {
  background: #f4f7fc;
}

.nav__megaIcon {
  width: 40px;
  height: 40px;
  background: #e8f0ff;
  color: #1f3c88;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
}

.nav__megaContent h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f3c88;
  letter-spacing: 0.3px;
}

.nav__megaContent p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #6c757d;
  max-width: 320px;
}

.nav__megaRight {
  width: 220px;
}


.nav__megaRight img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  transition: opacity 0.3s ease;
}
.nav__megaLeft {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-right: 30px;
  border-right: 1px solid #e6eaf0;
}

.nav__megaRight {
  width: 180px;
  padding-left: 20px;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 20px 0;
}

.form-check input[type="checkbox"] {
    width: auto;
    margin: 0;
}
.form-check input[type="checkbox"] {
    transform: scale(1.2);
    cursor: pointer;
}

.footerMapCol { min-width: 260px; }

.footerMapBox{
  height: 180px;            /* footer-friendly height */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* optional: make leaflet inside footer clean */
.footerMapBox .leaflet-control-attribution{
  font-size: 10px;
}

/* ===========================
   FOOTER OFFICES + MAP GRID
=========================== */


.footerOffices {
  padding-right: 30px;
  border-right: 1px solid #e5e9f2;
}
.siteFooter {
  background: #f8f9fa;
  padding: 70px 0 40px;
}

.officeItem h4 {
  font-size: 16px;
  margin-bottom: 6px;
  color: #111;
}

.officeItem p {
  font-size: 14px;
  color: #555;
  margin: 0 0 6px;
}

#footerMap {
  width: 100%;
  height: 300px;
}

@media (max-width: 1200px) {
  .footerGrid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .footerGrid {
    grid-template-columns: 1fr;
  }

    .footerOfficesMap {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .footerOffices {
    border-right: none;
    padding-right: 0;
  }
    #footerMap {
    height: 240px;
  }
}
.kasMarkerDot {
  width: 16px;
  height: 16px;
  background: var(--brand-primary);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(31,60,136,.25);
}
.mapDirectionBtn {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--brand-primary);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: .25s ease;
}

.mapDirectionBtn:hover {
  background: var(--brand-dark);
}
.leaflet-control-zoom a {
  background: #fff !important;
  color: var(--brand-primary) !important;
  border-radius: 6px !important;
}
.directionBtn {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  background: #1f3c88;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s ease;
}

.directionBtn:hover {
  background: #0b1f44;
}

.careerList {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.careerCard {
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
}

.careerCard h3 {
  margin-bottom: 10px;
  font-size: 22px;
  color: #1f3c88;
}

.careerMeta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.careerDescription {
  margin-bottom: 20px;
  line-height: 1.6;
}

.careerBtn {
  display: inline-block;
  padding: 10px 18px;
  background: #1f3c88;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
}

.careerBtn:hover {
  background: #142b63;
}

.careerList {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 40px;
}

.careerCard {
  background: #fff;
  padding: 30px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: 0.3s ease;
}

.careerCard:hover {
  transform: translateY(-5px);
}

.careerCard h3 {
  color: var(--brand-primary);
  margin-bottom: 10px;
}

.careerMeta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.careerMeta span {
  background: #f3f6fb;
  padding: 5px 12px;
  border-radius: 20px;
}

.careerDescription {
  margin-top: 10px;
  line-height: 1.6;
}
.careerBtn {
  display: inline-block;
  margin-top: 20px;
  background: var(--brand-primary);
  color: #fff;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.careerBtn:hover {
  background: var(--brand-dark);
}
/* Mobile menu must NEVER show unless menu-open */
.mobileMenu { display: none; }
body.menu-open .mobileMenu { display: block; }

/* Make mobile menu look clean */
.mobileMenu__inner { padding: 14px 0; }
.mobileMenu__link { display:block; padding:12px 8px; border-radius:8px; }
.mobileMenu__link:hover { background:#f6f6f6; }

/* Prevent mega menu / dropdown rules from affecting mobile */
@media (max-width:1100px){
  .nav__megaMenu{ display:none !important; }
}

/* IMPORTANT: remove this if you still have it somewhere:
.hero, .heroSwiper, .swiper { overflow: visible !important; }
It can create nasty overlaps with fixed header */

/* =========================
   MEGA MENU — FINAL FIX PACK
   (center image + safe layout)
========================= */

/* Make sure dropdown is the positioning parent */
.nav__dropdown{
  position: relative;
}

/* Mega Menu base */
.nav__megaMenu{
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;

  /* keep your size but allow safe shrink on smaller screens */
  width: 520px;
  max-width: calc(100vw - 40px);

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);

  display: flex;
  gap: 22px;
  padding: 22px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.25s ease;

  z-index: 10050;
}

/* show on hover */
.nav__dropdown:hover .nav__megaMenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* left side */
.nav__megaLeft{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 22px;
  border-right: 1px solid #e6eaf0;
}

/* right side — CENTER IMAGE vertically + horizontally */
.nav__megaRight{
  width: 180px;
  padding-left: 18px;

  display: flex;
  align-items: center;     /* ✅ vertical center */
  justify-content: center; /* ✅ horizontal center */
}

.nav__megaRight img.megaImage{
  width: 100%;
  max-width: 180px;
  height: 140px;           /* ✅ gives consistent nice box */
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Flip to left when needed */
.nav__megaMenu.nav__megaMenu--left{
  left: auto;
  right: 0;
}

/* ===============================
   POPUP (PRO) — SLIDE FROM TOP
================================ */

.sitePopup{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;        /* ✅ start from top */
  justify-content: center;
  padding-top: 140px;             /* ✅ position under header */
  pointer-events: none;
}

.sitePopup__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .35s ease;
}

.sitePopup__box{
  position: relative;
  width: 520px;
  max-width: 92%;
  background: #fff;
  border-radius: 18px;
  padding: 26px 26px 22px;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,.25);

  transform: translateX(-60px);   /* ✅ slide from left */
  opacity: 0;
  transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}

/* ACTIVE */
.sitePopup.active{ pointer-events:auto; }
.sitePopup.active .sitePopup__overlay{ opacity: 1; }
.sitePopup.active .sitePopup__box{
  transform: translateX(0);
  opacity: 1;
}

/* Close button */
.sitePopup__close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid #eee;
  background: #fff;
  cursor:pointer;
  font-size: 20px;
  line-height: 1;
  color: #666;
  transition: .2s ease;
}
.sitePopup__close:hover{
  color:#111;
  transform: scale(1.05);
}

/* Image */
.sitePopup__image{
  width:100%;
  border-radius: 14px;
  margin: 6px 0 16px;
}

/* Content */
.sitePopup__content{
  font-size: 16px;
  color:#222;
  margin-bottom: 16px;
}

/* Button */
.sitePopup__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--brand-primary);
  color:#fff;
  font-weight: 700;
  text-decoration:none;
  transition: .25s ease;
}
.sitePopup__btn:hover{
  transform: translateY(-2px);
  background: var(--brand-dark);
}

/* ✅ Mobile: make it start closer to top */
@media(max-width:768px){
  .sitePopup{ padding-top: 95px; }
  .sitePopup__box{ padding: 18px; }
}

/* ===== Gallery Admin Table ===== */

.gallery-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.gallery-table thead {
    background: #f4f6fa;
}

.gallery-table th {
    text-align: left;
    padding: 14px 18px;
    font-weight: 600;
    font-size: 14px;
    color: #555;
}

.gallery-table td {
    padding: 20px 20px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

.gallery-table tbody tr:hover {
    background: #fafbfd;
}

.gallery-preview {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e3e7ee;
}

.gallery-type {
    font-weight: 500;
    color: #555;
}

.gallery-delete {
    background: #ffe6e6;
    color: #c40000;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s ease;
}

.gallery-delete:hover {
    background: #ffcccc;
}

.gallery-actions {
    text-align: right;
}
/* ===== Gallery Admin Grid ===== */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.gallery-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transition: 0.2s ease;
    display: flex;
    flex-direction: column;
}

.gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.gallery-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.gallery-card-body {
    padding: 14px;
}

.gallery-card-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.gallery-card-type {
    font-size: 13px;
    color: #777;
    margin-bottom: 10px;
}

.gallery-card-actions {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}

.btn-edit {
    background: #eef2ff;
    color: #3f51b5;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
}

.btn-delete {
    background: #ffe6e6;
    color: #c40000;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
}

.btn-delete:hover {
    background: #ffcccc;
}
.galleryGroupsGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:18px;
}
@media (max-width:1100px){ .galleryGroupsGrid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:650px){ .galleryGroupsGrid{grid-template-columns: 1fr;} }

.galleryGroupCard{
  display:block;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.galleryGroupCard:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(0,0,0,.12);
}
.galleryGroupCover{
  height:170px;
  background-size:cover;
  background-position:center;
}
.galleryGroupBody{ padding:14px 14px 16px; }
.galleryGroupTitle{ font-weight:700; font-size:16px; margin-bottom:6px; }
.galleryGroupMeta{ color:#666; font-size:13px; margin-bottom:8px; }
.galleryGroupDesc{ color:#444; font-size:13px; line-height:1.4; }

.galleryItemsGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
}
@media (max-width:1100px){ .galleryItemsGrid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:650px){ .galleryItemsGrid{grid-template-columns: 1fr;} }

.galleryItem{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  display:block;
}
.galleryItem img{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}
.galleryVideoBox{
  height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3f5f8;
  font-weight:700;
}
.galleryCaption{
  padding:10px 12px;
  font-size:13px;
  color:#333;
}
.galleryGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}

.galleryGrid img{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:14px;
  transition:.3s;
}

.galleryGrid img:hover{
  transform:scale(1.04);
}

.galleryCaption{
  margin-top:6px;
  font-size:14px;
  color:#555;
  text-align:center;
}
/* =========================
   GALLERY GROUPS LIST (/galleries)
   ========================= */

.galleryGroupsGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}

@media(max-width: 900px){
  .galleryGroupsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(max-width: 600px){
  .galleryGroupsGrid{ grid-template-columns: 1fr; }
}

.galleryGroupCard{
  display:block;
  border:1px solid #e9edf3;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  text-decoration:none;
  color:inherit;
}

.galleryGroupCover{
  height:190px;                 /* THIS is why cover was disappearing */
  background-size: cover;
  background-position: center;
  background-color:#f3f5f9;
}

.galleryGroupBody{ padding:14px 14px 16px; }
.galleryGroupTitle{ font-weight:800; font-size:18px; margin-bottom:6px; }
.galleryGroupMeta{ color:#6b7280; font-size:13px; margin-bottom:10px; }
.galleryGroupDesc{ color:#111; font-size:14px; line-height:1.5; }

/* leave space so floating buttons don't cover content on mobile */
@media(max-width:768px){
  main{
    padding-bottom: 160px;
  }
}
/* =========================
   GALLERY SINGLE (/galleries/{slug})
   ========================= */

.galleryGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}

@media(max-width: 900px){
  .galleryGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media(max-width: 600px){
  .galleryGrid{ grid-template-columns: 1fr; }
}

.gallery-item, .galleryItem{
  display:block;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  text-decoration:none;
  color:inherit;
}

.gallery-item img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

@media(max-width:600px){
  .gallery-item img{ height:200px; }
}

.galleryCaption{
  padding:10px 12px;
  font-size:14px;
  color:#444;
}
.galleryVideoBox{
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}
@media(max-width:600px){
  .galleryVideoBox{ height:200px; }
}
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.search-form {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-input {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    min-width: 220px;
}

.btn {
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary {
    background: #1f3c88;
    color: #fff;
}

.btn-success {
    background: #28a745;
    color: #fff;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* IMPORTANT */
}

.admin-table th {
    background: #f5f7fa;
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

.admin-table td {
    padding: 14px;
    border-bottom: 1px solid #eee;
}


.admin-table tr:hover {
    background: #f9fbff;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}
.details-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.detail-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: start;
    padding: 14px 18px;
    background: #f9fafc;
    border-radius: 10px;
    border: 1px solid #eef1f6;
}

.detail-row.full-width {
    grid-template-columns: 180px 1fr;
}

.detail-label {
    font-weight: 600;
    color: #4a5568;
}

.detail-value {
    color: #1a202c;
    word-break: break-word;
}

.detail-value.highlight {
    font-weight: 600;
    color: #1f3c88;
}

.message-box {
    background: #ffffff;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.code-box {
    font-family: monospace;
    background: #f4f6f9;
    padding: 12px;
    border-radius: 8px;
    white-space: pre-wrap;
    font-size: 13px;
}

.details-actions {
    margin-top: 25px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #1f3c88;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: 0.25s ease;
}

.btn-back:hover {
    background: #142a63;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31,60,136,.3);
}
.pagination {
    margin-top: 25px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.page-btn {
    padding: 8px 14px;
    border-radius: 6px;
    background: #f1f3f7;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s ease;
}

.page-btn:hover {
    background: #1f3c88;
    color: #fff;
}

.page-btn.active {
    background: #1f3c88;
    color: #fff;
    font-weight: 600;
}
.pagination-modern {
    margin-top: 30px;
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.page-btn {
    padding: 8px 14px;
    border-radius: 8px;
    background: #f1f3f7;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    min-width: 36px;
    text-align: center;
    transition: 0.25s ease;
    border: 1px solid transparent;
}

.page-btn:hover {
    background: #1f3c88;
    color: #fff;
}

.page-btn.active {
    background: #1f3c88;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(31,60,136,.3);
}

.page-dots {
    padding: 0 6px;
    color: #888;
}
/* =========================
   APPLICATIONS TABLE WIDTH FIX
========================= */

.admin-table th:nth-child(3),
.admin-table td:nth-child(3) {
    width: 220px; /* Email column */
}

.admin-table th:nth-child(4),
.admin-table td:nth-child(4) {
    width: 130px; /* Phone column */
}

/* Slightly reduce padding for tighter layout */
.admin-table th,
.admin-table td {
    padding: 10px 12px;
}
.banner-card {
    display: flex;
    gap: 30px;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    align-items: flex-start;
}

.banner-image img {
    width: 220px;
    border-radius: 10px;
    object-fit: cover;
}

.banner-content {
    flex: 1;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-grid input {
    width: 100%;
    padding: 8px 10px;
}

.full-width {
    grid-column: 1 / -1;
}

.banner-actions {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.btn-primary {
    background: #1f3c88;
    color: #fff;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
}

.btn-primary:hover {
    background: #162e66;
}

.btn-danger {
    background: #e10600;
    color: #fff;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
}

.btn-danger:hover {
    background: #b30000;
}
.admin-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.news-form {
    margin-top: 10px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #555;
}

.form-group input,
.form-group textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #1f3c88;
    outline: none;
}

.btn-admin-primary {
    margin-top: 20px;
    padding: 10px 18px;
    background: #1f3c88;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s ease;
}

.btn-admin-primary:hover {
    background: #142c66;
}
.newsList {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.newsCard {
    display: flex;
    gap: 25px;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.newsImage {
    width: 220px;
    height: 150px;
    object-fit: cover;
    border-radius: 10px;
}

.newsContent h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: #1f3c88;
}

.newsDate {
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}
/* =============================
   ANNOUNCEMENTS 
============================= */

.announcements-section {
  padding: 100px 0;
  background: #f8f9fb;
}

/* Centered wrapper */
.announcements-wrapper {
  max-width: 1100px;   /* 👈 THIS FIXES WIDTH */
  margin: 0 auto;
}

/* Header */
.announcements-header h1 {
  font-size: 38px;
  font-weight: 700;
  margin-bottom: 12px;
}

.section-line {
  width: 70px;
  height: 4px;
  background: var(--brand-primary);
  margin-bottom: 60px;
  border-radius: 4px;
}

/* Card row */
.announcement-row {
  display: flex;
  align-items: center;
  gap: 60px;

  padding: 40px;
  margin-bottom: 50px;

  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,.06);
  transition: .3s ease;
}

.announcement-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0,0,0,.08);
}

/* Image side */
.announcement-left {
  flex: 0 0 420px;
}

.announcement-left img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 18px;
}

/* Content side */
.announcement-right {
  flex: 1;
}

.announcement-date {
  font-size: 13px;
  color: #999;
  margin-bottom: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.announcement-title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 18px;
  color: #111;
}

.announcement-body {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
}

/* Empty state */
.announcement-empty {
  padding: 60px;
  text-align: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.05);
}

/* Responsive */
@media (max-width: 992px) {
  .announcement-row {
    flex-direction: column;
    padding: 30px;
    gap: 30px;
  }

  .announcement-left {
    width: 100%;
  }

  .announcement-left img {
    height: 240px;
  }
}
/* 🔔 News Notification Badge */

.nav__link {
    position: relative;
}

.navBadge {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 10px;
    height: 10px;
    background: #e10600;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}
/* 🔔 NEW Announcement Label */

.nav__link {
    position: relative;
}

.navNewBadge {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #e10600;
    background: rgba(225, 6, 0, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.navNewBadge {
    animation: pulseNew 1.5s infinite;
}

@keyframes pulseNew {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}
/* 🔔 NEW Announcement Label */

.nav__link {
    position: relative;
}

.navNewBadge {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #e10600;
    background: rgba(225, 6, 0, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* FORM GRID */

.careerApplyForm{
max-width:800px;
margin-top:30px;
}

.formGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.formGroup{
display:flex;
flex-direction:column;
}

.formGroup label{
font-weight:600;
margin-bottom:6px;
}

.formGroup input,
.formGroup textarea{
padding:10px 12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
}

.formGroup input:focus,
.formGroup textarea:focus{
border-color:#2f4fa4;
outline:none;
}

.fullWidth{
grid-column:1/3;
}

.careerSubmitBtn{
margin-top:20px;
background:#2f4fa4;
color:#fff;
border:none;
padding:12px 26px;
border-radius:8px;
font-size:15px;
cursor:pointer;
transition:0.2s;
}

.careerSubmitBtn:hover{
background:#1e3682;
}

/* MOBILE */

@media (max-width:700px){

.formGrid{
grid-template-columns:1fr;
}

.fullWidth{
grid-column:1;
}

}
/* APPLY PAGE */

.careerApplySection{
padding:70px 0;
background:#f5f7fb;
}

.applyCard{
max-width:800px;
margin:auto;
background:#fff;
padding:40px;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.applyHeader{
margin-bottom:25px;
}

.applyHeader h1{
font-size:28px;
margin-bottom:5px;
}

.applyPosition{
font-size:18px;
color:#2f4fa4;
font-weight:600;
}

.applyGrid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.formField{
display:flex;
flex-direction:column;
}

.formField label{
font-size:14px;
font-weight:600;
margin-bottom:6px;
}

.formField input,
.formField textarea{
padding:10px 12px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
transition:0.2s;
}

.formField input:focus,
.formField textarea:focus{
border-color:#2f4fa4;
outline:none;
}

.formField.full{
grid-column:1/3;
}

.applyBtn{
margin-top:25px;
background:#2f4fa4;
color:#fff;
border:none;
padding:12px 28px;
font-size:15px;
border-radius:8px;
cursor:pointer;
transition:0.2s;
}

.applyBtn:hover{
background:#1f3b8a;
}

/* MOBILE */

@media (max-width:768px){

.applyGrid{
grid-template-columns:1fr;
}

.formField.full{
grid-column:1;
}

}
.noticeSuccess{
background:#e9f9ee;
border:1px solid #9edbb3;
color:#0a6b32;
padding:14px;
border-radius:10px;
margin-bottom:20px;
font-weight:600;
}
/* ===============================
CERTIFICATION DOCUMENT CENTER
=============================== */

.catalogSection{
margin-top:40px;
}

.catalogCategory{
margin-bottom:40px;
}

.catalogTitle{
font-size:26px;
font-weight:600;
margin-bottom:20px;
color:#1f3c88;
border-bottom:2px solid #eee;
padding-bottom:10px;
}

.catalogGrid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
gap:20px;
}

.catalogCard{
display:flex;
align-items:center;
background:#fff;
border:1px solid #e5e5e5;
border-radius:10px;
padding:18px;
transition:all .2s ease;
}

.catalogCard:hover{
box-shadow:0 6px 20px rgba(0,0,0,0.08);
transform:translateY(-2px);
}

.catalogIcon{
font-size:28px;
color:#e10600;
margin-right:15px;
}

.catalogInfo{
flex:1;
display:flex;
justify-content:space-between;
align-items:center;
}

.catalogName{
font-size:16px;
font-weight:500;
color:#333;
}

.catalogDownload{
background:#1f3c88;
color:#fff;
padding:8px 14px;
border-radius:6px;
font-size:14px;
text-decoration:none;
}

.catalogDownload:hover{
background:#16306d;
}
.catalogSearch{
margin-bottom:30px;
text-align:center;
}

.catalogSearch input{
width:400px;
max-width:90%;
padding:10px 14px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
}
.catalogStats{
font-size:13px;
color:#777;
margin-top:6px;
}
.catalogSection{
margin-top:40px;
}

.catalogGrid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
gap:20px;
}

.catalogCard{
display:flex;
align-items:center;
background:#fff;
border-radius:10px;
padding:18px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
transition:all .2s ease;
border:1px solid #eee;
}

.catalogCard:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.catalogLeft{
margin-right:15px;
}

.catalogIcon{
font-size:28px;
color:#e63946;
}

.catalogCenter{
flex:1;
}

.catalogName{
font-weight:600;
font-size:16px;
color:#222;
margin-bottom:6px;
}

.catalogMeta{
font-size:13px;
color:#777;
display:flex;
gap:15px;
}

.catalogRight{
display:flex;
gap:10px;
}

.catalogPreview{
background:#f1f5f9;
padding:8px 12px;
border-radius:6px;
text-decoration:none;
font-size:13px;
}

.catalogDownload{
background:#1f3c88;
color:#fff;
padding:8px 14px;
border-radius:6px;
text-decoration:none;
font-size:13px;
}

.catalogDownload:hover{
background:#16306e;
}
/* =========================
   SITE SEARCH PAGE
========================= */

.searchPage{
  padding: 140px 0 100px;
  background: #f5f7fb;
  min-height: 70vh;
}

.searchHeroBox{
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
}

.searchPage__title{
  font-size: 42px;
  font-weight: 800;
  color: var(--brand-primary);
  margin-bottom: 22px;
}

.searchFormMain{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.searchFormMain input{
  width: min(680px, 100%);
  padding: 16px 18px;
  border: 1px solid #d8deea;
  border-radius: 12px;
  font-size: 16px;
  background: #fff;
  outline: none;
}

.searchFormMain input:focus{
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(31,60,136,.10);
}

.searchFormMain button{
  border: none;
  background: var(--brand-primary);
  color: #fff;
  border-radius: 12px;
  padding: 16px 22px;
  font-weight: 700;
  cursor: pointer;
}

.searchFormMain button:hover{
  background: var(--brand-dark);
}

.searchResultsWrap{
  max-width: 1000px;
  margin: 0 auto;
}

.searchResultsTitle{
  font-size: 28px;
  color: var(--brand-primary);
  margin-bottom: 20px;
}

.searchResultsList{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.searchResultCard{
  display: block;
  background: #fff;
  padding: 22px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid #e9edf5;
  transition: .25s ease;
}

.searchResultCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
}

.searchResultCard__top{
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 10px;
}

.searchResultCard h3{
  margin: 0 0 8px;
  font-size: 22px;
  color: var(--brand-primary);
}

.searchResultCard p{
  margin: 0;
  color: #555;
  line-height: 1.7;
}

.searchEmpty{
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  color: #666;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

@media (max-width: 768px){
  .searchPage{
    padding: 120px 0 80px;
  }

  .searchPage__title{
    font-size: 32px;
  }

  .searchFormMain{
    flex-direction: column;
  }

  .searchFormMain button,
  .searchFormMain input{
    width: 100%;
  }
}
.topbarSearch{
display:flex;
align-items:center;
gap:6px;
margin-left:10px;
}

.topbarSearch input{
height:32px;
padding:0 10px;
border-radius:20px;
border:1px solid #ddd;
font-size:13px;
width:160px;
}

.topbarSearch button{
background:none;
border:none;
cursor:pointer;
font-size:14px;
color:#333;
}
/* =========================
   NAV HOVER — PROFESSIONAL BLUE
========================= */

/* MAIN MENU TABS (HOME, CORPORATE, etc.) */
.nav--ctr .nav__link:hover,
.nav--ctr .nav__dropdown:hover > .nav__link {
  background: var(--brand-primary);
  color: #fff;
}

/* ACTIVE TAB WHILE DROPDOWN OPEN */
.nav__dropdown:hover > .nav__link {
  background: var(--brand-primary);
  color: #fff;
}

/* DROPDOWN ITEMS */
.nav__dropdownMenu a:hover,
.nav__dropdownItem:hover,
.nav__megaItem:hover {
  background: var(--brand-primary);
  color: #fff;
}

/* Make icons inside dropdown white on hover */
.nav__dropdownItem:hover i,
.nav__megaItem:hover i {
  color: #fff;
}
background: linear-gradient(
  to bottom,
  #2a4fa3,
  #1f3c88
);
/* =========================
   DROPDOWN — WHITE TEXT ON HOVER
========================= */

/* ALL dropdown / mega menu items */
.nav__dropdownMenu a:hover,
.nav__dropdownItem:hover,
.nav__megaItem:hover,
.nav__megaItem:hover span,
.nav__megaItem:hover small,
.nav__megaItem:hover p {
  background: var(--brand-primary);
  color: #ffffff !important;
}

/* Make icons white too */
.nav__megaItem:hover i,
.nav__dropdownItem:hover i {
  color: #ffffff !important;
}
.nav__megaItem,
.nav__dropdownItem {
  transition: all 0.25s ease;
}
/* =========================
   MEGA MENU HOVER TEXT FIX
========================= */

.nav__megaItem:hover {
  background: var(--brand-primary);
}

.nav__megaItem:hover .nav__megaContent h4,
.nav__megaItem:hover .nav__megaContent p,
.nav__megaItem:hover .nav__megaIcon,
.nav__megaItem:hover .nav__megaIcon i,
.nav__megaItem:hover span,
.nav__megaItem:hover small {
  color: #fff !important;
}

.nav__megaItem:hover .nav__megaIcon {
  background: rgba(255,255,255,0.18);
}
.nav__dropdownMenu a:hover,
.nav__dropdownItem:hover {
  background: var(--brand-primary);
  color: #fff !important;
}

.nav__dropdownItem:hover i {
  color: #fff !important;
}
/* =========================
   FOOTER LINKS — HOVER EFFECT
========================= */

.footer a,
.footer-links a,
footer a {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.25s ease;
}

/* Hover effect */
.footer a:hover,
.footer-links a:hover,
footer a:hover {
  background: var(--brand-primary);
  color: #fff !important;
  text-decoration: none;
}
footer a:hover {
  background: linear-gradient(
    to bottom,
    #2a4fa3,
    #1f3c88
  );
  color: #fff !important;
}
/*================Here is the last update of the css ==========================*/
/* ======================================================
   PREMIUM HEADER UPGRADE — KAS CERTIFICATION
====================================================== */

/* ---------- GLOBAL HEADER SHELL ---------- */
.siteHeader{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10000;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
  transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}

.siteHeader.is-scrolled{
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 34px rgba(15,23,42,.10);
  border-bottom-color: rgba(15,23,42,.08);
}

/* body top spacing */
body{
  padding-top: 155px;
}
/* ---------- TOPBAR ---------- */
.topbar--ctr{
  background: #f8fafc;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.topbar__inner--ctr{
  min-height: 50px;
  padding: 0;
}

.topbar__right{
  gap: 14px;
}

.topbar__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  transition: all .25s ease;
}

.topbar__link i{
  color: var(--brand-primary);
}

.topbar__link:hover{
  background: rgba(31,60,136,.08);
  color: var(--brand-primary);
}

/* search */
.topbarSearch{
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: 4px 6px 4px 14px;
  min-width: 240px;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.topbarSearch:focus-within{
  border-color: rgba(31,60,136,.35);
  box-shadow: 0 0 0 4px rgba(31,60,136,.10);
}

.topbarSearch input{
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: #0f172a;
}

.topbarSearch input::placeholder{
  color: #94a3b8;
}

.topbarSearch button{
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand-primary);
  cursor: pointer;
  transition: all .25s ease;
}

.topbarSearch button:hover{
  background: rgba(31,60,136,.08);
}

/* ---------- MAIN HEADER ---------- */
.mainHeader{
  background: #fff;
}

.mainHeader__inner{
  min-height: 82px;
  padding-top: 0;
  padding-bottom: 0;
  gap: 30px;
}

/* ---------- LOGO ---------- */
.brand--ctr{
  flex-shrink: 0;
}

.brand--ctr .brand__logo{
  height: 70px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.06));
  transition: transform .25s ease;
}

.brand--ctr:hover .brand__logo{
  transform: translateY(-1px);
}

/* ---------- DESKTOP NAV ---------- */
.nav--ctr{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.nav--ctr > a,
.nav--ctr > .nav__dropdown{
  display: flex;
  align-items: center;
  height: 82px;
}

/* main nav links */
.nav--ctr .nav__link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #0f172a;
  transition: all .25s ease;
}

.nav--ctr .nav__link:hover,
.nav--ctr .nav__dropdown:hover > .nav__link{
  background: rgba(31,60,136,.08);
  color: var(--brand-primary);
}

/* active */
.nav--ctr .nav__link.is-active{
  background: rgba(31,60,136,.10);
  color: var(--brand-primary);
}

/* arrow */
.nav__arrow{
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  transition: transform .25s ease;
}

.nav__dropdown:hover .nav__arrow{
  transform: rotate(180deg);
}

/* announcement badge */
.navNewBadge{
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff1f2;
  color: #ef4444;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}

/* CTA */
.nav--ctr .nav__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 22px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a4fa3 0%, #1f3c88 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  box-shadow: 0 10px 22px rgba(31,60,136,.18);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.nav--ctr .nav__cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(31,60,136,.24);
  filter: brightness(1.02);
  color: #fff;
}

/* ---------- MEGA MENU ---------- */
.nav__dropdown{
  position: relative;
}

.nav__megaMenu{
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  width: 620px;
  max-width: calc(100vw - 40px);
  padding: 20px;
  display: flex;
  gap: 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(15,23,42,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 10050;
}

.nav__dropdown:hover .nav__megaMenu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__megaMenu--left{
  left: auto;
  right: 0;
}

.nav__megaLeft{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 18px;
  border-right: 1px solid rgba(15,23,42,.08);
}

.nav__megaItem{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  transition: all .25s ease;
}

.nav__megaItem:hover{
  background: linear-gradient(180deg, #2a4fa3 0%, #1f3c88 100%);
  transform: translateX(2px);
}

.nav__megaIcon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  flex-shrink: 0;
  background: #edf2ff;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all .25s ease;
}

.nav__megaContent{
  min-width: 0;
}

.nav__megaContent h4{
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  color: #1e3a8a;
  transition: color .25s ease;
}

.nav__megaContent p{
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #64748b;
  transition: color .25s ease;
}

.nav__megaItem:hover .nav__megaContent h4,
.nav__megaItem:hover .nav__megaContent p,
.nav__megaItem:hover .nav__megaIcon,
.nav__megaItem:hover .nav__megaIcon i{
  color: #fff !important;
}

.nav__megaItem:hover .nav__megaIcon{
  background: rgba(255,255,255,.16);
}

.nav__megaRight{
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
}

.nav__megaRight img.megaImage{
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

/* ---------- MOBILE BUTTON ---------- */
.nav__mobileBtn{
  display: none;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 12px;
  background: #fff;
  color: var(--brand-primary);
  font-size: 22px;
  cursor: pointer;
  transition: all .25s ease;
}

.nav__mobileBtn:hover{
  background: rgba(31,60,136,.06);
  border-color: rgba(31,60,136,.16);
}

/* ---------- MOBILE MENU ---------- */
.mobileMenu{
  display: none;
  border-top: 1px solid rgba(15,23,42,.06);
  background: #fff;
}

body.menu-open .mobileMenu{
  display: block;
}

.mobileMenu__inner{
  padding: 14px 0 18px;
}

.mobileMenu__group{
  border-bottom: 1px solid #eef2f7;
}

.mobileMenu__parent,
.mobileMenu__link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 12px 6px;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
}

.mobileMenu__link:hover,
.mobileMenu__parent:hover,
.mobileMenu__sub:hover{
  color: var(--brand-primary);
  background: rgba(31,60,136,.06);
}

.mobileMenu__children{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding-left: 12px;
}

.mobileMenu__sub{
  display: block;
  padding: 10px 12px 10px 30px;
  margin: 4px 0;
  border-radius: 10px;
  color: #475569;
  font-size: 14px;
  transition: all .25s ease;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px){
  .nav--ctr{
    display: none;
  }

  .nav__mobileBtn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
}

@media (max-width: 768px){
  .hero,
  .heroSwiper,
  .heroSwiper .swiper-wrapper,
  .heroSwiper .swiper-slide,
  .hero__slide,
  .hero__content {
    height: 560px !important;
    min-height: 560px !important;
  }
}

  .topbar__right{
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .topbarSearch{
    min-width: 180px;
  }

  .brand--ctr .brand__logo{
    height: 58px;
  }

  .mainHeader__inner{
    min-height: 72px;
  }
}
/* =========================
   HEADER NAV — SIZE + SPACING TUNING
========================= */

.nav--ctr{
  gap: 8px; /* was larger */
}

.nav--ctr .nav__link{
  font-size: 16px;
  font-weight: 700;
  padding: 0 12px;
}

.nav--ctr > a,
.nav--ctr > .nav__dropdown{
  height: 76px;
}

.nav--ctr .nav__cta{
  font-size: 16px;
  padding: 0 18px;
  height: 48px;
}
/* ===============================
   PREMIUM COMPACT NAVIGATION
================================ */

/* Reduce container gap */
.nav--ctr {
  gap: 4px !important;     /* was probably 16–24px */
}

/* Remove extra margin from dropdown wrappers */
.nav__dropdown {
  margin: 0 !important;
}

/* Make menu text slightly bigger */
.nav__link,
.nav__link--dropdown {
  font-size: 16px !important;   /* adjust 15–17px */
  font-weight: 600;
}

/* Reduce horizontal padding (BIGGEST SPACE SOURCE) */
.nav__link,
.nav__link--dropdown,
.nav__cta {
  padding: 8px 10px !important;   /* was probably 14–24px */
}

/* Reduce space around arrow */
.nav__arrow {
  margin-left: 4px !important;
}

/* Compact NEW badge */
.navNewBadge {
  margin-left: 6px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
}

/* Make CTA (Contact button) tighter */
.nav__cta {
  padding: 9px 14px !important;
  border-radius: 10px;
}

/* Optional: tighter container alignment */
.mainHeader__inner {
  gap: 6px !important;
}
/* ================================
   COMPACT MEGA MENU (PREMIUM)
================================ */

/* Reduce outer panel padding */
.nav__megaMenu{
  padding: 20px 22px !important;
  border-radius: 22px;
}

/* Left column container */
.nav__megaLeft{
  padding: 0 !important;
}

/* Each menu item */
.nav__megaItem{
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  border-radius: 14px;
}

/* Remove large gaps between items */
.nav__megaItem:last-child{
  margin-bottom: 0 !important;
}

/* Icon box — smaller */
.nav__megaIcon{
  width: 42px !important;
  height: 42px !important;
  font-size: 18px !important;
}

/* Title spacing */
.nav__megaContent h4{
  margin: 0 0 2px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

/* Description spacing */
.nav__megaContent p{
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

/* Right image panel spacing */
.nav__megaRight{
  padding-left: 20px !important;
}

/* Divider line spacing */
.nav__megaMenu::before{
  margin: 0 18px !important;
}
.nav__megaItem{
  padding: 8px 12px !important;
}

.nav__megaIcon{
  width: 38px !important;
  height: 38px !important;
}

.nav__megaContent h4{
  font-size: 15px !important;
}

.nav__megaContent p{
  font-size: 12.5px !important;
}
/* =====================================================
   WORLD-CLASS PUBLIC SITE UPGRADE
   Style direction: TÜV / SGS + modern tech trust
===================================================== */

/* ---------- ROOT / GLOBAL TOKENS ---------- */
:root{
  --brand-primary: #1f3c88;
  --brand-dark: #0b1f44;
  --brand-red: #e10600;

  --text-main: #0f172a;
  --text-soft: #475569;
  --text-muted: #64748b;

  --bg-page: #ffffff;
  --bg-soft: #f8fafc;
  --bg-section: #f4f7fb;
  --line-soft: #e7edf5;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 16px 40px rgba(15, 23, 42, 0.08);
  --shadow-hover: 0 20px 48px rgba(15, 23, 42, 0.12);

  --container: 1380px;
}

/* ---------- BASE ---------- */
body{
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text-main);
  background: var(--bg-page);
}

.container{
  max-width: var(--container);
  padding-left: clamp(18px, 3vw, 34px);
  padding-right: clamp(18px, 3vw, 34px);
}

p{
  color: var(--text-soft);
}

section{
  position: relative;
}

/* ---------- BUTTON SYSTEM ---------- */
.hero__btn,
.ctaContact__btn,
.careerBtn,
.refs__moreBtn{
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(225, 6, 0, 0.18);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.hero__btn:hover,
.ctaContact__btn:hover,
.careerBtn:hover,
.refs__moreBtn:hover{
  transform: translateY(-2px);
}

/* ---------- HERO ---------- */
.hero{
  height: min(82vh, 720px);
}

.hero__left h1{
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.02em;
  max-width: 760px;
}

.hero__content{
  padding-top: 30px;
  padding-bottom: 30px;
}

.hero__slide::before{
  background: linear-gradient(
    90deg,
    rgba(7,16,34,0.86) 0%,
    rgba(7,16,34,0.56) 42%,
    rgba(7,16,34,0.14) 100%
  );
}

/* ---------- SECTION RHYTHM ---------- */
.aboutHome,
.refs,
.unitAcc,
.pageSection,
.cmsContentSection{
  padding-top: 110px !important;
  padding-bottom: 110px !important;
}

.units{
  padding-top: 95px !important;
  padding-bottom: 95px !important;
}

/* ---------- SECTION TITLES ---------- */
.units__title,
.refs__title,
.pageHero__title,
.cmsHero__title{
  color: var(--text-main);
  letter-spacing: -.02em;
}

.units__title{
  font-size: clamp(28px, 3vw, 42px);
  margin-bottom: 34px;
}

.refs__title{
  font-size: clamp(30px, 3.2vw, 44px);
}

.cmsHero{
  padding-top: 110px;
  padding-bottom: 28px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.cmsHero__title{
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
}

/* ---------- ABOUT SECTION ---------- */
.aboutHome{
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.aboutHome__text{
  max-width: 640px;
}

.aboutHome__body p{
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--text-soft);
}

.aboutHome__image img{
  border-radius: 22px;
  box-shadow: var(--shadow-card);
}

.aboutStats{
  gap: 42px;
  margin-top: 34px;
}

.aboutStats__item strong{
  color: var(--brand-primary);
  font-size: 34px;
  font-weight: 800;
}

.aboutStats__item span{
  color: var(--text-soft);
  font-size: 14px;
}

/* ---------- UNITS / SERVICES CARDS ---------- */
.units{
  background: var(--bg-soft);
}

.units__grid{
  gap: 24px;
}

.unitCard{
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform .28s ease, box-shadow .28s ease;
}

.unitCard:hover{
  transform: translateY(-7px);
  box-shadow: var(--shadow-hover);
}

.unitCard__overlay{
  background: linear-gradient(
    to top,
    rgba(6,16,34,.78),
    rgba(6,16,34,.26)
  );
}

.unitCard__icon{
  background: linear-gradient(180deg, #294c9f 0%, #1f3c88 100%);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(31,60,136,.22);
}

.unitCard__title{
  background: rgba(7, 16, 34, 0.58);
  backdrop-filter: blur(4px);
  border-radius: 14px;
  padding: 12px 22px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

/* ---------- REFERENCES ---------- */
.refs{
  background: #fff;
}

.refs::before{
  opacity: .18;
}

.refs__grid{
  gap: 28px 30px;
}

.refs__item{
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  min-height: 112px;
  box-shadow: var(--shadow-soft);
  padding: 14px;
}

.refs__item:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* ---------- CTA SECTION ---------- */
.ctaContact{
  padding-top: 120px;
  padding-bottom: 120px;
}

.ctaContact__overlay{
  background: linear-gradient(
    90deg,
    rgba(8,18,38,.82) 0%,
    rgba(8,18,38,.68) 100%
  );
}

.ctaContact h2{
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ctaContact p{
  font-size: 18px;
  line-height: 1.85;
  color: rgba(255,255,255,.88);
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- CMS CONTENT ---------- */
.cmsContentSection{
  background: linear-gradient(180deg, #f7f9fc 0%, #eef3f9 100%);
}

.cmsContent{
  max-width: 920px;
  border-radius: 24px;
  padding: 64px;
  background: #fff;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(15,23,42,.04);
  font-size: 17px;
  line-height: 1.95;
  color: var(--text-soft);
}

.cmsContent h1,
.cmsContent h2,
.cmsContent h3{
  color: var(--text-main);
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* ---------- CAREER CARDS ---------- */
.careerList{
  gap: 22px;
}

.careerCard{
  border-radius: 20px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}

.careerCard:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.careerCard h3{
  font-size: 24px;
  color: var(--brand-primary);
  letter-spacing: -.01em;
}

.careerMeta span{
  background: #eef4ff;
  color: var(--brand-primary);
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- FOOTER ---------- */
.siteFooter{
  background: linear-gradient(180deg, #f8fafc 0%, #eef3f8 100%);
  border-top: 1px solid var(--line-soft);
  padding-top: 80px;
  padding-bottom: 34px;
}

.footerGrid{
  gap: 42px;
}

.footerCol h4{
  color: var(--text-main);
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 18px;
}

.footerMenu a{
  color: var(--text-soft);
  border-radius: 8px;
  padding: 4px 0;
  display: inline-flex;
  transition: color .2s ease, transform .2s ease;
}

.footerMenu a:hover{
  color: var(--brand-primary);
  transform: translateX(3px);
}

.footerSlogan{
  font-size: 22px;
  line-height: 1.35;
  color: var(--text-main);
  font-weight: 700;
}

.officeItem h4{
  color: var(--text-main);
  font-weight: 700;
}

.officeItem p{
  color: var(--text-soft);
  line-height: 1.7;
}

.footerSocial a{
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
}

.footerBottom{
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-muted);
}

/* ---------- QUICK PANEL ---------- */
.quickPanel__item{
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(15,23,42,.16);
}

.quickPanel__item:hover{
  transform: translateX(-6px);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .cmsContent{
    padding: 38px 26px;
    border-radius: 18px;
  }

  .aboutHome,
  .refs,
  .units,
  .unitAcc,
  .pageSection,
  .cmsContentSection{
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .hero__left h1{
    font-size: 30px;
  }
}
/* =====================================================
   WORLD-CLASS PUBLIC SITE UPGRADE
   KEEP EXISTING CSS + APPEND THIS BLOCK
===================================================== */

:root{
  --brand-primary: #1f3c88;
  --brand-dark: #0b1f44;
  --brand-red: #e10600;
  --text-main: #0f172a;
  --text-soft: #475569;
  --text-muted: #64748b;
  --bg-page: #ffffff;
  --bg-soft: #f8fafc;
  --bg-section: #f4f7fb;
  --line-soft: #e7edf5;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow-soft: 0 10px 30px rgba(15,23,42,.06);
  --shadow-card: 0 16px 40px rgba(15,23,42,.08);
  --shadow-hover: 0 20px 48px rgba(15,23,42,.12);
  --container: 1380px;
}

body{
  color: var(--text-main);
  background: var(--bg-page);
}

.container{
  max-width: var(--container);
  padding-left: clamp(18px, 3vw, 34px);
  padding-right: clamp(18px, 3vw, 34px);
}

p{ color: var(--text-soft); }

.sectionHeader{ margin-bottom: 22px; }

.sectionEyebrow{
  display:inline-block;
  margin-bottom:10px;
  color:var(--brand-primary);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:12px;
}

.sectionTitle{
  font-size:clamp(30px,3vw,46px);
  line-height:1.1;
  font-weight:800;
  margin:0 0 14px;
  color:#0f172a;
  letter-spacing:-.02em;
}

.sectionLead{
  font-size:17px;
  line-height:1.85;
  color:#475569;
  max-width:720px;
}

/* HERO */
.hero{
  height:min(82vh, 720px);
}

.hero__content{
  padding-top:30px;
  padding-bottom:30px;
}

.hero__slide::before{
  background: linear-gradient(
    90deg,
    rgba(7,16,34,0.86) 0%,
    rgba(7,16,34,0.56) 42%,
    rgba(7,16,34,0.14) 100%
  );
}

.hero__eyebrow{
  display:inline-block;
  margin-bottom:14px;
  color:#dbe7ff;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}

.hero__left h1{
  font-size:clamp(34px,4vw,58px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.02em;
  max-width:760px;
}

.hero__lead{
  max-width:720px;
  margin-top:18px;
  font-size:18px;
  line-height:1.8;
  color:rgba(255,255,255,.88);
}

.hero__actions{
  display:flex;
  gap:14px;
  margin-top:28px;
  flex-wrap:wrap;
}

.hero__btn{
  border-radius:12px !important;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 10px 24px rgba(225,6,0,.18);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.hero__btn:hover{
  transform:translateY(-2px);
}

.hero__btn--secondary{
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:none;
}

.hero__miniStats{
  display:flex;
  gap:26px;
  margin-top:28px;
  flex-wrap:wrap;
}

.hero__miniStats strong{
  display:block;
  color:#fff;
  font-size:24px;
  font-weight:800;
}

.hero__miniStats span{
  color:rgba(255,255,255,.82);
  font-size:13px;
}

/* TRUST STRIP */
.trustStrip{
  background:#0f1f45;
  color:#fff;
  padding:18px 0;
}

.trustStrip__inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.trustStrip__item{
  text-align:center;
  font-weight:700;
  font-size:14px;
  color:rgba(255,255,255,.92);
}

/* ABOUT */
.aboutHome{
  padding:110px 0 !important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

.aboutHome__grid{
  align-items:center;
}

.aboutHome__text{
  max-width:640px;
}

.aboutHome__body p{
  font-size:16.5px;
  line-height:1.9;
  color:var(--text-soft);
}

.aboutHome__image img{
  border-radius:22px;
  box-shadow:var(--shadow-card);
}

.aboutHighlights{
  display:grid;
  gap:12px;
  margin-top:22px;
}

.aboutHighlight{
  padding:14px 16px;
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(15,23,42,.04);
  font-weight:600;
  color:#1e293b;
}

.aboutHome__btn{
  margin-top:24px;
}

.aboutStats{
  gap:42px;
  margin-top:34px;
}

.aboutStats__item strong{
  color:var(--brand-primary);
  font-size:34px;
  font-weight:800;
}

.aboutStats__item span{
  color:var(--text-soft);
  font-size:14px;
}

/* UNITS */
.units{
  padding:95px 0 !important;
  background:var(--bg-soft);
}

.units__header{
  margin-bottom:28px;
}

.units__grid{
  gap:24px;
}

.unitCard{
  min-height:280px;
  border-radius:22px;
  box-shadow:var(--shadow-soft);
  transition:transform .28s ease, box-shadow .28s ease;
}

.unitCard:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow-hover);
}

.unitCard__overlay{
  background:linear-gradient(
    to top,
    rgba(6,16,34,.78),
    rgba(6,16,34,.26)
  );
}

.unitCard__icon{
  background:linear-gradient(180deg, #294c9f 0%, #1f3c88 100%);
  border-radius:12px;
  box-shadow:0 10px 22px rgba(31,60,136,.22);
}

.unitCard__title{
  background:rgba(7,16,34,.58);
  backdrop-filter:blur(4px);
  border-radius:14px;
  padding:12px 22px;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  max-width:88%;
}

.unitCard__btn{
  border-radius:10px;
}

/* INDUSTRIES */
.industries{
  padding:100px 0;
  background:#fff;
}

.industryGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.industryCard{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:120px;
  background:linear-gradient(180deg,#f8fafc 0%,#eef3f9 100%);
  border:1px solid #e7edf5;
  border-radius:18px;
  font-size:20px;
  font-weight:700;
  color:#0f172a;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  transition:transform .25s ease, box-shadow .25s ease, color .25s ease;
  text-align:center;
  padding:20px;
}

.industryCard:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px rgba(15,23,42,.08);
  color:var(--brand-primary);
}

/* WHY KAS */
.whyKas{
  padding:100px 0;
  background:#f8fafc;
}

.featureGrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.featureCard{
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:20px;
  padding:28px 24px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.featureCard h3{
  margin:0 0 10px;
  font-size:20px;
  font-weight:800;
  color:#0f172a;
}

.featureCard p{
  margin:0;
  line-height:1.75;
  color:#475569;
}

/* REFERENCES */
.refs{
  padding:110px 0 !important;
  background:#fff;
}

.refs::before{
  opacity:.18;
}

.refs__headerCenter{
  text-align:center;
  max-width:860px;
  margin:0 auto 34px;
}

.refs__headerCenter .sectionLead{
  margin-left:auto;
  margin-right:auto;
}

.refs__grid{
  gap:28px 30px;
}

.refs__item{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:16px;
  min-height:112px;
  box-shadow:var(--shadow-soft);
  padding:14px;
}

.refs__item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
}

/* NEWS */
.latestNews{
  padding:100px 0;
  background:#fff;
}

.newsGrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.newsCard{
  display:block;
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}

.newsCard:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px rgba(15,23,42,.08);
}

.newsCard__image{
  height:220px;
  background-size:cover;
  background-position:center;
}

.newsCard__body{
  padding:22px;
}

.newsCard__body h3{
  margin:0 0 10px;
  font-size:22px;
  color:#0f172a;
  line-height:1.3;
}

.newsCard__date{
  font-size:13px;
  color:#64748b;
  margin-bottom:10px;
  font-weight:600;
}

.newsCard__body p{
  margin:0;
  color:#475569;
  line-height:1.75;
}

/* CTA */
.ctaContact{
  padding-top:120px;
  padding-bottom:120px;
}

.ctaContact__overlay{
  background:linear-gradient(
    90deg,
    rgba(8,18,38,.82) 0%,
    rgba(8,18,38,.68) 100%
  );
}

.ctaContact h2{
  font-size:clamp(30px,4vw,48px);
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.02em;
}

.ctaContact p{
  font-size:18px;
  line-height:1.85;
  color:rgba(255,255,255,.88);
  max-width:760px;
  margin-left:auto;
  margin-right:auto;
}

.ctaContact__btn{
  border-radius:12px !important;
  box-shadow:0 10px 24px rgba(225,6,0,.18);
}

/* CMS PAGE */
.cmsHero{
  padding:110px 0 28px;
  text-align:center;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
}

.cmsHero__image{
  width:100%;
  max-width:820px;
  max-height:420px;
  object-fit:cover;
  margin:0 auto 30px;
  border-radius:22px;
  box-shadow:var(--shadow-card);
}

.cmsHero__title{
  font-size:clamp(32px,4vw,48px);
  font-weight:800;
  color:#0f172a;
  letter-spacing:-.02em;
}

.cmsContentSection{
  padding:70px 0 120px;
  background:linear-gradient(180deg,#f7f9fc 0%,#eef3f9 100%);
}

.cmsSectionIntro{
  max-width:920px;
  margin:0 auto 28px;
}

.cmsContent{
  max-width:980px;
  margin:0 auto;
  background:#fff;
  padding:64px;
  border-radius:24px;
  box-shadow:var(--shadow-card);
  border:1px solid rgba(15,23,42,.04);
  font-size:17px;
  line-height:1.95;
  color:var(--text-soft);
  text-align:left;
}

.cmsContent--rich img{
  max-width:100%;
  height:auto;
  border-radius:18px;
}

.cmsContent--rich table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
}

.cmsContent--rich table td,
.cmsContent--rich table th{
  border:1px solid #e7edf5;
  padding:12px 14px;
}

.noticeSuccess{
  max-width:980px;
  margin:0 auto 24px;
  background:#ecfdf5;
  color:#166534;
  border:1px solid #bbf7d0;
  padding:14px 18px;
  border-radius:14px;
  font-weight:600;
}

.emptyState{
  max-width:980px;
  margin:0 auto;
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:20px;
  padding:28px;
  text-align:center;
  box-shadow:var(--shadow-soft);
  color:#475569;
  font-size:17px;
}

/* CAREER */
.careerList{
  gap:22px;
}

.careerCard{
  border-radius:20px;
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
}

.careerCard:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-card);
}

.careerCard h3{
  font-size:24px;
  color:var(--brand-primary);
  letter-spacing:-.01em;
}

.careerMeta span{
  background:#eef4ff;
  color:var(--brand-primary);
  border-radius:999px;
  font-weight:600;
}

/* NEWS LIST PAGE */
.newsList{
  display:grid;
  gap:24px;
}

.newsCard--full{
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

.newsImage{
  width:100%;
  max-height:380px;
  object-fit:cover;
  display:block;
}

.newsContent{
  padding:28px;
}

.newsContent h3{
  margin:0 0 10px;
  font-size:28px;
  color:#0f172a;
}

.newsDate{
  font-size:14px;
  color:#64748b;
  margin-bottom:16px;
  font-weight:600;
}

.newsText{
  color:#475569;
  line-height:1.9;
}

/* CATALOG */
.catalogSearch{
  max-width:980px;
  margin:0 auto 24px;
}

.catalogSearch input{
  width:100%;
  height:58px;
  border-radius:14px;
  border:1px solid #d9e2ee;
  padding:0 18px;
  font-size:16px;
  outline:none;
  background:#fff;
  box-shadow:var(--shadow-soft);
}

.catalogSection{
  display:grid;
  gap:28px;
}

.catalogCategory{
  max-width:1100px;
  margin:0 auto;
}

.catalogTitle{
  margin:0 0 16px;
  font-size:28px;
  color:#0f172a;
}

.catalogGrid{
  display:grid;
  gap:16px;
}

.catalogCard{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:18px;
  padding:18px;
  box-shadow:var(--shadow-soft);
}

.catalogIcon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:#eef4ff;
  color:var(--brand-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.catalogName{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
}

.catalogMeta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:6px;
  color:#64748b;
  font-size:14px;
}

.catalogRight{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.catalogPreview,
.catalogDownload{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  font-size:14px;
}

.catalogPreview{
  background:#f8fafc;
  color:#0f172a;
}

.catalogDownload{
  background:var(--brand-primary);
  color:#fff;
}

/* FOOTER */
.siteFooter{
  background:linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%);
  border-top:1px solid var(--line-soft);
  padding-top:80px;
  padding-bottom:34px;
}

.footerGrid{
  gap:42px;
}

.footerCol h4{
  color:var(--text-main);
  font-size:18px;
  font-weight:800;
  margin-bottom:18px;
}

.footerMenu a{
  color:var(--text-soft);
  border-radius:8px;
  padding:4px 0;
  display:inline-flex;
  transition:color .2s ease, transform .2s ease;
}

.footerMenu a:hover{
  color:var(--brand-primary);
  transform:translateX(3px);
}

.footerSlogan{
  font-size:22px;
  line-height:1.35;
  color:var(--text-main);
  font-weight:700;
}

.officeItem h4{
  color:var(--text-main);
  font-weight:700;
}

.officeItem p{
  color:var(--text-soft);
  line-height:1.7;
}

.footerSocial a{
  border-radius:10px;
  box-shadow:var(--shadow-soft);
}

.footerBottom{
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid var(--line-soft);
  color:var(--text-muted);
}

/* QUICK PANEL */
.quickPanel__item{
  border-radius:16px;
  box-shadow:0 12px 30px rgba(15,23,42,.16);
}

.quickPanel__item:hover{
  transform:translateX(-6px);
}

/* RESPONSIVE */
@media (max-width:1000px){
  .featureGrid{ grid-template-columns:1fr 1fr; }
  .industryGrid{ grid-template-columns:1fr 1fr; }
  .newsGrid{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .cmsContent{
    padding:38px 26px;
    border-radius:18px;
  }

  .aboutHome,
  .refs,
  .units,
  .industries,
  .whyKas,
  .latestNews,
  .cmsContentSection{
    padding-top:72px !important;
    padding-bottom:72px !important;
  }

  .trustStrip__inner{
    grid-template-columns:1fr 1fr;
  }

  .hero__left h1{
    font-size:30px;
  }
}

@media (max-width:560px){
  .industryGrid,
  .featureGrid,
  .trustStrip__inner{
    grid-template-columns:1fr;
  }

  .catalogCard{
    grid-template-columns:1fr;
    text-align:left;
  }

  .catalogRight{
    justify-content:flex-start;
  }
}
/* =====================================================
   WORLD-CLASS PATCH — FINAL POLISH
===================================================== */

/* ---------- Tighter homepage rhythm ---------- */
.aboutHome{
  padding-top: 88px !important;
  padding-bottom: 72px !important;
}

.units{
  padding-top: 72px !important;
  padding-bottom: 84px !important;
}

.industries,
.whyKas,
.refs,
.latestNews{
  padding-top: 84px !important;
  padding-bottom: 84px !important;
}

.ctaContact{
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

/* tighter space after stats */
.aboutStats{
  margin-bottom: 0 !important;
}

/* ---------- Services section refinement ---------- */
.units__moreWrap{
  margin-top: 34px;
  display: flex;
  justify-content: center;
}

.units .sectionLead{
  max-width: 820px;
}

/* make homepage cards feel more premium */
.unitCard{
  min-height: 250px !important;
}

.unitCard__title{
  font-size: 16px !important;
  line-height: 1.3 !important;
}

.unitCard__icon{
  width: 52px !important;
  height: 52px !important;
}

/* ---------- Industries section: less button-like ---------- */
.industryCard{
  min-height: 108px !important;
  border-radius: 20px !important;
  font-size: 18px !important;
  letter-spacing: -.01em;
}

.industryCard:hover{
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
}

/* ---------- Why KAS cards ---------- */
.featureCard{
  min-height: 220px;
}

.featureCard h3{
  line-height: 1.2;
}

/* ---------- References: more premium and less washed out ---------- */
.refs__grid{
  gap: 22px 22px !important;
}

.refs__item{
  min-height: 102px !important;
  padding: 12px !important;
}

.refs__item img{
  filter: grayscale(100%);
  opacity: 0.82;
  transition: all .25s ease;
}

.refs__item:hover img{
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.02);
}

/* ---------- Adaptive news layouts ---------- */
.newsGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.newsGrid--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
}

.newsGrid--single{
  grid-template-columns: minmax(320px, 680px);
  justify-content: start;
}

.newsGrid--single .newsCard{
  max-width: 680px;
}

.newsCard__image{
  height: 260px !important;
}

.newsCard__body h3{
  font-size: 20px !important;
}

.newsCard__body p{
  font-size: 15px;
}

/* ---------- CTA stronger look ---------- */
.ctaContact h2{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.ctaContact p{
  max-width: 760px;
}

.ctaContact__btn{
  min-width: 220px;
}

/* ---------- Footer refinement ---------- */
.siteFooter{
  padding-top: 72px !important;
}

.footerGrid{
  grid-template-columns: 1.15fr 1fr 1.45fr 0.95fr !important;
  gap: 34px !important;
}

.footerSlogan{
  max-width: 260px;
}

.footerMenu li{
  margin-bottom: 12px !important;
}

.officeItem{
  margin-bottom: 20px;
}

.footerSocial a{
  width: 46px !important;
  height: 46px !important;
}

/* ---------- Quick panel: quieter on desktop ---------- */
.quickPanel{
  right: 18px !important;
  gap: 12px !important;
}

.quickPanel__item{
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.12) !important;
}

.quickPanel__item:hover{
  transform: translateX(-4px) !important;
}

.quickPanel__item::after{
  font-size: 12px !important;
  padding: 7px 12px !important;
}

/* ---------- Better section heading width ---------- */
.sectionHeader{
  max-width: 980px;
}

.refs__headerCenter{
  max-width: 980px !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .footerGrid{
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 900px){
  .newsGrid,
  .newsGrid--two,
  .newsGrid--single{
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .featureCard{
    min-height: auto;
  }
}

@media (max-width: 768px){
  .aboutHome,
  .units,
  .industries,
  .whyKas,
  .refs,
  .latestNews,
  .ctaContact{
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .quickPanel{
    right: 10px !important;
  }
}
/* =========================
   SERVICES PAGE GRID
========================= */

.servicesPageGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.servicePageCard{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}

.servicePageCard:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 38px rgba(15,23,42,.10);
}

.servicePageCard__image{
  height:220px;
  background-size:cover;
  background-position:center;
}

.servicePageCard__body{
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
}

.servicePageCard__icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:#eef4ff;
  color:var(--brand-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}

.servicePageCard__title{
  margin:0;
  font-size:22px;
  line-height:1.25;
  color:#0f172a;
  font-weight:800;
}

.servicePageCard__desc{
  margin:0;
  color:#475569;
  line-height:1.75;
  font-size:15px;
}

.servicePageCard__btn{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:12px;
  background:var(--brand-primary);
  color:#fff;
  font-weight:700;
  font-size:14px;
}

@media (max-width: 1000px){
  .servicesPageGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .servicesPageGrid{
    grid-template-columns: 1fr;
  }

  .servicePageCard__image{
    height:200px;
  }
}
/* =========================
   CMS PAGE TEXT — JUSTIFIED
========================= */

.cmsContent{
  text-align: justify;      /* align left + right */
  text-justify: inter-word; /* better spacing */
  line-height: 1.85;        /* more readable */
  font-size: 16px;
  color: #334155;
}

/* Nice paragraph spacing */
.cmsContent p{
  margin-bottom: 18px;
}

/* Optional: better heading spacing */
.cmsContent h2,
.cmsContent h3,
.cmsContent h4{
  margin-top: 28px;
}
.cmsContent{
  text-align: justify;
  hyphens: auto;      /* allows word breaking */
  word-spacing: 0.02em;
}
/* =========================
   HOMEPAGE ABOUT TEXT — JUSTIFY
========================= */

.aboutHome__body,
.aboutHome__body p,
.aboutHome__body div,
.aboutHome__body span {
  text-align: justify !important;
  text-justify: inter-word;
  line-height: 1.9;
}

/* Better paragraph spacing */
.aboutHome__body p {
  margin-bottom: 16px;
}
/* =========================
   ABOUT SECTION — ALIGN IMAGE TOP
========================= */

.aboutHome__grid {
  align-items: flex-start !important;
}
.card:hover {
  box-shadow:
    0 25px 50px rgba(31,60,136,0.12),
    0 8px 20px rgba(0,0,0,0.06);
}

/* ===================================
   INDUSTRY CARDS — PREMIUM EFFECT
=================================== */

.industries__card,
.industryCard,
.serviceCard,
.serviceBox,
.card {
  background: #f5f7fb;
  border-radius: 18px;
  padding: 28px;
  text-align: center;

  transition: all 0.35s ease;
  border: 1px solid rgba(0,0,0,0.05);

  cursor: pointer;
  position: relative;
}

/* HOVER — MAIN EFFECT */
.industries__card:hover,
.industryCard:hover,
.serviceCard:hover,
.serviceBox:hover,
.card:hover {

  transform: translateY(-8px) scale(1.01);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.08),
    0 6px 16px rgba(0,0,0,0.06);

  background: white;
  border-color: rgba(0,0,0,0.08);
}

/* SUBTLE TOP HIGHLIGHT LINE */
.industries__card::before,
.industryCard::before,
.serviceCard::before,
.serviceBox::before,
.card::before {

  content: "";
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 4px;

  background: linear-gradient(90deg,#1f3c88,#2d5cff);
  opacity: 0;

  transition: opacity 0.3s ease;

  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

.industries__card:hover::before,
.industryCard:hover::before,
.serviceCard:hover::before,
.serviceBox:hover::before,
.card:hover::before {

  opacity: 1;
}
.news-badge {
  position: absolute;
  top: 12px;
  left: 12px;

  background: #1f3c88;
  color: white;

  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}
/* =========================
   WORLD-CLASS NEWS SECTION
========================= */

.latestNews{
  padding: 90px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.latestNews__header{
  max-width: 860px;
  margin-bottom: 30px;
}

.newsGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.newsGrid--two{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 980px;
}

.newsGrid--single{
  grid-template-columns: minmax(320px, 760px);
  max-width: 760px;
}

.newsCard{
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e7edf5;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(15,23,42,.06);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.newsCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(15,23,42,.10);
  border-color: rgba(31,60,136,.18);
}

.newsCard__imageLink{
  display: block;
}

.newsCard__image{
  position: relative;
  height: 240px;
  background-size: cover;
  background-position: center;
}

.newsCard__image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.18), rgba(15,23,42,.02));
}

.newsCard__badge{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(31,60,136,.92);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.newsCard__body{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  flex: 1;
}

.newsCard__date{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}

.newsCard__title{
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
}

.newsCard__title a{
  color: inherit;
  text-decoration: none;
}

.newsCard__title a:hover{
  color: var(--brand-primary);
}

.newsCard__text{
  margin: 0;
  color: #475569;
  line-height: 1.75;
  font-size: 15px;
}

.newsCard__more{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--brand-primary);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.newsCard__more:hover{
  gap: 14px;
}

.latestNews__moreWrap{
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

@media (max-width: 1000px){
  .newsGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .newsGrid,
  .newsGrid--two,
  .newsGrid--single{
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .newsCard__image{
    height: 220px;
  }

  .newsCard__title{
    font-size: 22px;
  }
}
/* =========================
   NEWS DETAIL PAGE
========================= */

.newsGrid--listing{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:26px;
}

.newsDetailCard{
  max-width:1100px;
  margin:0 auto;
  background:#fff;
  border:1px solid #e7edf5;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}

.newsDetailImage{
  width:100%;
  max-height:520px;
  object-fit:cover;
  display:block;
}

.newsDetailBody{
  padding:34px;
}

.newsDetailText{
  color:#334155;
  line-height:1.9;
  font-size:17px;
}

.newsDetailText img{
  max-width:100%;
  height:auto;
  border-radius:16px;
}

.newsDetailText h2,
.newsDetailText h3,
.newsDetailText h4{
  color:#0f172a;
  margin-top:28px;
  margin-bottom:14px;
}

.newsDate--single{
  margin-top:8px;
  color:#64748b;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.newsBackWrap{
  margin-top:28px;
  display:flex;
  justify-content:center;
}

@media (max-width: 1000px){
  .newsGrid--listing{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .newsGrid--listing{
    grid-template-columns:1fr;
  }

  .newsDetailBody{
    padding:22px;
  }

  .newsDetailText{
    font-size:16px;
  }
}
.newsDetail__image{
  width:100%;
  max-width:900px;
  height:auto;
  display:block;
  margin:20px 0 25px;
  border-radius:14px;
  object-fit:contain;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
/* =========================
   NEWS DETAIL PAGE IMAGE
========================= */
.newsDetailImage{
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
  margin: 20px 0 28px;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 12px 30px rgba(15,23,42,.10);
}

/* =========================
   NEWS DETAIL BACK BUTTONS
========================= */
.newsBackActions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.backBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--brand-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: all .25s ease;
}

.backBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

.backBtn--secondary{
  background: #eef4ff;
  color: var(--brand-primary);
}

.backBtn--secondary:hover{
  background: #dfeaff;
}
.table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 10px; /* space between rows */
}

.table thead th {
    padding: 12px 15px;
    font-weight: 600;
    text-align: left;
}

.table tbody tr {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
}
/* =========================
   FORCE BIG HERO BANNER
========================= */

.hero {
  height: 85vh !important;        /* bigger on large screens */
  min-height: 720px !important;   /* always big */
  max-height: 900px !important;
}

/* Make sure slider follows */
.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide,
.hero__slide {
  height: 100% !important;
}
/* =========================
   FINAL HERO HEIGHT FIX
========================= */
.hero {
  position: relative;
  height: 760px !important;
  min-height: 760px !important;
  max-height: none !important;
  overflow: hidden;
}

.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide,
.hero__slide {
  height: 100% !important;
  min-height: 760px !important;
}

.hero__slide {
  background-size: cover;
  background-position: center center;
}

.hero__content {
  height: 80% !important;
  min-height: 760px !important;
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 70px;
}
/* FORCE HEADER HEIGHT (FINAL FIX) */
header.mainHeader .mainHeader__inner {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
header.mainHeader .brand--ctr .brand__logo {
  height: 80px !important;
}