/* ============================================================
   SECTION 1 — GLOBAL TYPOGRAPHY POLISH
   ============================================================ */



/* ============================================================
   HOME PAGE — TRANSPARENT NAVBAR OVERLAY ON BANNER
   ============================================================ */

/* Remove body padding so banner starts from top */
body.home-transparent-nav {
  padding-top: 0 !important;
}

/* Make header transparent and overlay on banner */
body.home-transparent-nav .header {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent !important;
  z-index: 9999;
  box-shadow: none !important;
  border-bottom: none !important;
}

/* Transparent navbar */
body.home-transparent-nav .header .navbar {
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none !important;
}

/* White nav links on transparent navbar */
body.home-transparent-nav .header .navbar .nav__item .nav__item-link {
  color: #ffffff !important;
  /* text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); */
}

/* Hover state stays white but with slight blue tint */
body.home-transparent-nav .header .navbar .nav__item .nav__item-link:hover {
  /* color: #1a56db !important; */
  /* color: #002161 !important; */
  color:#a8d0e6 !important;
}

/* Active link underline stays visible */
body.home-transparent-nav .header .navbar .nav__item .nav__item-link.active {
  color: #ffffff !important;
}

body.home-transparent-nav .header .navbar .nav__item .nav__item-link.active::before {
  background-color: #ffffff !important;
}

/* Push slider/banner section up to start from top */
body.home-transparent-nav .slider {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure slider has full height including navbar overlap */
body.home-transparent-nav .slider .slide-item {
  min-height: 700px !important;
  height: auto !important;
}

/* Mobile menu toggler — white lines */
body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines:before,
body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines:after,
body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines span {
  background-color: #ffffff !important;
}

/* When scrolled (sticky), restore white background */
/* body.home-transparent-nav .header.is-sticky,
body.home-transparent-nav .navbar.is-sticky {
  position: fixed !important;
  background-color: #ffffff !important;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.07) !important;
  border-bottom: 1px solid #ededed !important;
}

body.home-transparent-nav .is-sticky .nav__item .nav__item-link {
  color: #0e2b3d !important;
  text-shadow: none !important;
}

body.home-transparent-nav .is-sticky .nav__item .nav__item-link:hover {
  color: #1a56db !important;
}

body.home-transparent-nav .is-sticky .nav__item .nav__item-link.active {
  color: #1a56db !important;
}

body.home-transparent-nav .is-sticky .nav__item .nav__item-link.active::before {
  background-color: #1a56db !important;
}

body.home-transparent-nav .is-sticky .navbar-toggler .menu-lines:before,
body.home-transparent-nav .is-sticky .navbar-toggler .menu-lines:after,
body.home-transparent-nav .is-sticky .navbar-toggler .menu-lines span {
  background-color: #0e2b3d !important;
} */




/* When scrolled (sticky), restore white background with DARK text */
body.home-transparent-nav .header.is-sticky,
body.home-transparent-nav .navbar.is-sticky,
body.home-transparent-nav .header .navbar.is-sticky {
  position: fixed !important;
  background-color: #ffffff !important;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.07) !important;
  border-bottom: 1px solid #ededed !important;
}

/* HIGH SPECIFICITY — Force dark text on sticky navbar */
body.home-transparent-nav .header.is-sticky .navbar .nav__item .nav__item-link,
body.home-transparent-nav .navbar.is-sticky .nav__item .nav__item-link,
body.home-transparent-nav .header .navbar.is-sticky .nav__item .nav__item-link {
  color: #000000 !important;
  text-shadow: none !important;
}

/* Hover state on sticky — Blue */
body.home-transparent-nav .header.is-sticky .navbar .nav__item .nav__item-link:hover,
body.home-transparent-nav .navbar.is-sticky .nav__item .nav__item-link:hover,
body.home-transparent-nav .header .navbar.is-sticky .nav__item .nav__item-link:hover {
  color: #1a56db !important;
}

/* Active link on sticky — Blue */
body.home-transparent-nav .header.is-sticky .navbar .nav__item .nav__item-link.active,
body.home-transparent-nav .navbar.is-sticky .nav__item .nav__item-link.active,
body.home-transparent-nav .header .navbar.is-sticky .nav__item .nav__item-link.active {
  color: #1a56db !important;
}

/* Active underline */
body.home-transparent-nav .header.is-sticky .navbar .nav__item .nav__item-link.active::before,
body.home-transparent-nav .navbar.is-sticky .nav__item .nav__item-link.active::before {
  background-color: #1a56db !important;
}

/* Mobile toggler — dark lines on sticky */
body.home-transparent-nav .header.is-sticky .navbar-toggler .menu-lines:before,
body.home-transparent-nav .header.is-sticky .navbar-toggler .menu-lines:after,
body.home-transparent-nav .header.is-sticky .navbar-toggler .menu-lines span,
body.home-transparent-nav .navbar.is-sticky .navbar-toggler .menu-lines:before,
body.home-transparent-nav .navbar.is-sticky .navbar-toggler .menu-lines:after,
body.home-transparent-nav .navbar.is-sticky .navbar-toggler .menu-lines span {
  background-color: #000000 !important;
}



/* Mobile responsive — restore white navbar bg on small screens */
/* @media (max-width: 991px) {
  body.home-transparent-nav .header {
    position: fixed !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  }

  body.home-transparent-nav .header .navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #ededed !important;
  }

  body.home-transparent-nav .header .navbar .nav__item .nav__item-link {
    color: #0e2b3d !important;
    text-shadow: none !important;
  }

  body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines:before,
  body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines:after,
  body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines span {
    background-color: #0e2b3d !important;
  }

  body.home-transparent-nav {
    padding-top: 80px !important;
  }
} */



/* ============================================================
   MOBILE — TRANSPARENT NAVBAR (Bulletproof Version)
   ============================================================ */
@media (max-width: 991px) {

  /* Body no top padding */
  body.home-transparent-nav {
    padding-top: 0 !important;
  }

  /* ====== DEFAULT STATE (top of page) ====== */
  /* Header transparent */
  body.home-transparent-nav .header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    z-index: 9999 !important;
  }

  /* Navbar transparent (overrides style.css white) */
  body.home-transparent-nav .header .navbar,
  body.home-transparent-nav .header>.navbar,
  body.home-transparent-nav .header .navbar.navbar-expand-lg,
  body.home-transparent-nav .header .navbar.sticky-navbar {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
  }

  /* White hamburger lines */
  body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines:before,
  body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines:after,
  body.home-transparent-nav .header .navbar .navbar-toggler .menu-lines span {
    background-color: #ffffff !important;
  }

  /* Dropdown menu when opened — white bg */
  body.home-transparent-nav .header .navbar .navbar-collapse {
    background-color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
  }

  body.home-transparent-nav .header .navbar .navbar-collapse .nav__item .nav__item-link {
    color: #0e2b3d !important;
    text-shadow: none !important;
  }

  body.home-transparent-nav .header .navbar .navbar-collapse .nav__item .nav__item-link:hover,
  body.home-transparent-nav .header .navbar .navbar-collapse .nav__item .nav__item-link.active {
    color: #1a56db !important;
  }

  /* ====== SCROLLED STATE — when .is-sticky is added ====== */
  /* MAXIMUM specificity to beat everything */
  body.home-transparent-nav .header .navbar.is-sticky,
  body.home-transparent-nav .header>.navbar.is-sticky,
  body.home-transparent-nav .header .navbar.sticky-navbar.is-sticky,
  body.home-transparent-nav .header .navbar.navbar-expand-lg.is-sticky {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    border-bottom: 1px solid #ededed !important;
  }

  /* Sticky hamburger lines BLACK */
  body.home-transparent-nav .header .navbar.is-sticky .navbar-toggler .menu-lines:before,
  body.home-transparent-nav .header .navbar.is-sticky .navbar-toggler .menu-lines:after,
  body.home-transparent-nav .header .navbar.is-sticky .navbar-toggler .menu-lines span,
  body.home-transparent-nav .header .navbar.sticky-navbar.is-sticky .navbar-toggler .menu-lines:before,
  body.home-transparent-nav .header .navbar.sticky-navbar.is-sticky .navbar-toggler .menu-lines:after,
  body.home-transparent-nav .header .navbar.sticky-navbar.is-sticky .navbar-toggler .menu-lines span {
    background-color: #000000 !important;
  }
}









body {
  /* font-family: 'Barlow', 'Roboto', sans-serif; */
  color: #2c2c2c;
  -webkit-font-smoothing: antialiased;
  /* -moz-osx-font-smoothing: grayscale; */
}

p {
  letter-spacing: 0.1px;
}

strong {
  color: #1a1a2e;
}



/* ============================================================
   SECTION 2 — DIVIDER ACCENT LINE
   ============================================================ */

.divider.divider-primary {
  width: 4px;
  height: 32px;
  border-radius: 4px;
  background: linear-gradient(180deg, #1a73e8, #a8d0e6);
  flex-shrink: 0;
}




/* ============================================================
   SECTION 3 — HEADING SUBTITLE
   ============================================================ */

.heading__subtitle {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #1a1a2e;
  position: relative;
}






/* ============================================================
   SECTION 4 — ABOUT US CARDS
   ============================================================ */

/* Section background */
#About-us {
  background: linear-gradient(160deg, #f0f6ff 0%, #ffffff 100%) !important;
}

/* Card wrapper */
#About-us .col-md-6>div {
  position: relative;
  border: none !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  padding: 36px 32px !important;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(26, 115, 232, 0.08) !important;
  transition: all 0.38s ease !important;
}

/* Top gradient bar */
#About-us .col-md-6>div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1a73e8, #a8d0e6);
  border-radius: 16px 16px 0 0;
}

/* Decorative background circle */
#About-us .col-md-6>div::after {
  content: '';
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26, 115, 232, 0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Hover state */
#About-us .col-md-6>div:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 18px 48px rgba(26, 115, 232, 0.15) !important;
  background: #f5f9ff !important;
}

/* Heading */
#About-us h3 {
  font-size: 20px;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.45;
  margin-bottom: 14px;
  position: relative;
}

/* Blue dot before heading */
/* #About-us h3::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a73e8;
  margin-right: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
} */

/* Paragraph */
#About-us p.text-muted {
  font-size: 15.2px !important;
  line-height: 1.9 !important;
  color: #5a5a72 !important;
  position: relative;
  z-index: 1;
}

/* Left card bottom accent */
#About-us .col-md-6:first-child>div {
  border-bottom: 3px solid #e8f1fd !important;
}

#About-us .col-md-6:first-child>div:hover {
  border-bottom-color: #1a73e8 !important;
}

/* Right card left stripe */
#About-us .col-md-6:last-child>div {
  border-left: 4px solid #a8d0e6 !important;
}

#About-us .col-md-6:last-child>div:hover {
  border-left-color: #1a73e8 !important;
}






/* ============================================================
   SECTION 5 — HISTORY & CULTURE
   ============================================================ */

/* Section background */
section.k-cn[style*="background:#f4f4f4"] {
  background: linear-gradient(160deg, #f0f4f8 0%, #fafafa 100%) !important;
}

/* 65 Years strong text */
section.k-cn[style*="background:#f4f4f4"] strong {
  font-size: 16px;
  color: #1a73e8;
  letter-spacing: 0.3px;
}

/* History image wrapper */
section.k-cn[style*="background:#f4f4f4"] .col-md-6.d-flex>div {
  box-shadow: 0 8px 32px rgba(26, 115, 232, 0.10);
  border: 1px solid #dce8f5;
}






/* ============================================================
   SECTION 5a — VISION / MISSION / PRINCIPLES CARD SHELL
   UL / LI inside cards — NOT touched, uses default styling
   ============================================================ */

/* Card shell */
.col-md-4>div.p-4.border.rounded {
  border: none !important;
  border-top: 4px solid #a8d0e6 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07) !important;
  transition: all 0.35s ease !important;
  background: #ffffff !important;
}

/* Card hover */
.col-md-4>div.p-4.border.rounded:hover {
  border-top-color: #1a73e8 !important;
  box-shadow: 0 12px 36px rgba(26, 115, 232, 0.13) !important;
  transform: translateY(-6px) !important;
}

/* Icon normal */
.col-md-4>div.p-4.border.rounded img {
  filter: drop-shadow(0 2px 6px rgba(26, 115, 232, 0.18));
  transition: transform 0.3s ease;
}

/* Icon hover scale */
.col-md-4>div.p-4.border.rounded:hover img {
  transform: scale(1.08);
}

/* Card heading */
.col-md-4>div.p-4.border.rounded h5 {
  font-size: 15px;
  letter-spacing: 1.2px;
  color: #1a1a2e;
  margin-top: 4px;
}







/* ============================================================
   SECTION 6 — NUMBER PANELS 01 / 02 / 03 / 04
   ============================================================ */

/* Large number gradient text */
section.k-cn p[style*="font-size: 90px"] {
  background: linear-gradient(135deg, #a8d0e6 0%, #1a73e8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 100px !important;
  letter-spacing: -4px !important;
  line-height: 1 !important;
  display: inline-block;
}

/* Panel headings */
section.k-cn h2[style*="font-size: 30px"] {
  color: #1a1a2e;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  position: relative;
  padding-bottom: 12px;
}

/* Underline accent after heading */
section.k-cn h2[style*="font-size: 30px"]::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, #1a73e8, #a8d0e6);
  border-radius: 3px;
  margin-top: 10px;
}

/* Body paragraphs */
section.k-cn p.text-muted[style*="font-size: 15.5px"] {
  font-size: 15.2px !important;
  line-height: 1.95 !important;
  color: #5a5a72 !important;
}

/* Sub-headings highlight box */
section.k-cn p[style*="font-weight: 700"][style*="color: #333"] {
  color: #1a1a2e !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 10px 14px;
  background: #eef4fd;
  border-left: 3px solid #1a73e8;
  border-radius: 0 6px 6px 0;
  margin-bottom: 14px !important;
}

/* UL wrapper */
section.k-cn[style*="padding-top: 50px"] ul {
  padding-left: 0 !important;
  margin-bottom: 0 !important;
}

/* List items */
section.k-cn[style*="padding-top: 50px"] ul li {
  position: relative;
  padding: 8px 12px 8px 36px;
  margin-bottom: 7px !important;
  background: #f8fbff;
  border-radius: 7px;
  border-left: 3px solid #a8d0e6;
  font-size: 14.8px !important;
  color: #4a4a6a !important;
  line-height: 1.7 !important;
  list-style: none !important;
  transition: all 0.25s ease;
}

/* List item hover */
section.k-cn[style*="padding-top: 50px"] ul li:hover {
  background: #e8f1fc;
  border-left-color: #1a73e8;
  color: #1a1a2e !important;
  transform: translateX(4px);
}

/* Custom arrow bullet */
section.k-cn[style*="padding-top: 50px"] ul li::before {
  content: '▸';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #1a73e8;
  font-size: 13px;
  line-height: 1;
}

/* Image wrappers */
section.k-cn .col-md-6.d-flex.justify-content-center.align-items-stretch>div {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
  border: 1px solid #e0eaf5;
  transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

/* Image wrapper hover */
section.k-cn .col-md-6.d-flex.justify-content-center.align-items-stretch>div:hover {
  box-shadow: 0 16px 56px rgba(26, 115, 232, 0.14) !important;
}

/* Panels 02 & 04 alternating background */
section.k-cn[style*="background: #f9f9f9"] {
  background: linear-gradient(160deg, #f4f8fe 0%, #fafcff 100%) !important;
}






/* ============================================================
   SECTION 8 — SLIDER DOTS & ARROWS
   ============================================================ */

.slider .slick-dots li button::before {
  font-size: 10px;
  color: #ffffff;
  opacity: 0.6;
}

.slider .slick-dots li.slick-active button::before {
  color: #1a73e8;
  opacity: 1;
}

.slider .slick-prev,
.slider .slick-next {
  z-index: 10;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 50%;
  backdrop-filter: blur(4px);
  transition: background 0.3s ease;
}

.slider .slick-prev:hover,
.slider .slick-next:hover {
  background: rgba(26, 115, 232, 0.55) !important;
}






/* ============================================================
   SECTION 9 — SECTION SPACING
   ============================================================ */

section.k-cn {
  position: relative;
}

section.k-cn+section.k-cn {
  border-top: 1px solid #edf1f6;
}






/* ============================================================
   SECTION 10 — RESPONSIVE / MOBILE
   ============================================================ */

@media (max-width: 768px) {

  section.k-cn p[style*="font-size: 90px"] {
    font-size: 70px !important;
  }

  section.k-cn h2[style*="font-size: 30px"] {
    font-size: 22px !important;
  }

  section.k-cn[style*="background:#f4f4f4"] img[style*="height: 420px"] {
    height: 260px !important;
  }

  #About-us .col-md-6>div {
    border-left: none !important;
    border-top: 4px solid #a8d0e6 !important;
    padding: 24px 20px !important;
  }

  #About-us .col-md-6>div::before {
    display: none;
  }

  .col-md-4 {
    margin-bottom: 16px;
  }

  section.k-cn[style*="padding-top: 50px"] ul li:hover {
    transform: none;
  }
}

@media (max-width: 480px) {

  .heading__subtitle {
    font-size: 22px;
  }

  section.k-cn p[style*="font-size: 90px"] {
    font-size: 58px !important;
  }

  section.k-cn h2[style*="font-size: 30px"] {
    font-size: 20px !important;
  }

  #About-us h3 {
    font-size: 17px;
  }

  .certification-section .client img {
    max-height: 52px;
  }
}