*,

*::before,

*::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



:root {

  --orange: #f94d00;

  --navy: #0b0d17;

  --text: #090628;

  --navy-bg: #061133;

  --black-brown: #160a05;

  --light-bg: #fdf9f5;

  --green: #148f08;

  --border: #ececec;

  --transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);

  --work-sans: "Work Sans", sans-serif;

  --roboto: "Roboto", sans-serif;

}



html {

  scroll-padding-top: 140px; /* match your navbar height */

}



body {

  font-family: "Roboto", sans-serif;

  /* background: var(--light-bg); */

}



.mr {

  margin-right: 60px;

}



.ml {

  margin-left: 60px;

}



@media (max-width: 1400px) {

  .mr {

    margin-right: 20px;

  }

}



@media (max-width: 992px) {

  .ml {

    margin-left: 30px;

  }

}



@media (max-width: 576px) {

  .ml {

    margin-left: 0px;

  }

}



h1,

h2,

h3,

h4 {

  font-family: var(--work-sans);

}



.default-section-md {

  padding: 80px 0;

}



.default-section {

  padding: 100px 0;

}



@media (max-width: 1400px) {

  .default-section {

    padding: 80px 0;

  }

}



@media (max-width: 991px) {

  .default-section {

    padding: 60px 0;

  }



  .default-section-md {

    padding: 60px 0;

  }

}



/* ─────────────────────────

   SLIDE ANIMATION

───────────────────────── */

@keyframes headerSlideDown {

  from {

    opacity: 0;

    transform: translateY(-80px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* ═══════════════════════════════════════════

   NAVBAR — full updated CSS

   Changes vs previous version:

   - Desktop: hover to open (not click)

   - Services: mega dropdown with L2 fly-out

   - Mobile: L2 nested submenu inside Services

═══════════════════════════════════════════ */



/* ───── NAVBAR ───── */

.sildia-nav {

  position: relative;

  width: 100%;

  padding: 10px 0;

  z-index: 1000;

  transition:

    transform 0.45s ease,

    background 0.3s ease,

    box-shadow 0.3s ease;

}



/* ─────────────────────────

   FIXED HEADER

───────────────────────── */

.sildia-nav.header-fixed {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  background: #fff;

  box-shadow: 0px 4px 4px 0px #00000040;



  animation: headerSlideDown 0.45s ease forwards;

}



.container-navbar {

  /* width: 1600px; */

  margin: 0 auto;

}



.sildia-nav .container-nav {

  display: flex;

  align-items: center;

  gap: 0;

  padding: 0 30px;

  max-width: 1600px;

  margin: 0 auto;

}



/* LOGO */

.nav-logo {

  display: flex;

  align-items: center;

  text-decoration: none;

  flex-shrink: 0;

}



/* ─────────────────────────

   DESKTOP MENU

───────────────────────── */

.desktop-menu {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  list-style: none;

  margin: 0;

  padding: 0;

  flex: 1;

}



.desktop-menu > li {

  position: relative;

}



.desktop-menu > li > a,

.desktop-menu > li > button {

  font-size: 18px;

  line-height: 24px;

  font-weight: 500;

  color: var(--black-brown);

  text-decoration: none;

  padding: 20px 14px;

  border: none;

  background: none;

  cursor: pointer;

  border-radius: 6px;

  display: flex;

  align-items: center;

  gap: 5px;

  transition:

    color var(--transition),

    background var(--transition);

  white-space: nowrap;

  font-family: var(--work-sans);

}



.desktop-menu > li > button > a {

  color: var(--black-brown);

  text-decoration: none;

}



.desktop-menu > li > a.active,

.desktop-menu > li > a:hover,

.desktop-menu > li > button:hover {

  color: var(--orange);

}

.desktop-menu > li > a.active {

  font-weight: 600;

}



.desktop-menu > li > button .chev {

  font-size: 11px;

  transition: transform var(--transition);

}



/* ── HOVER to open (desktop) ── */

.desktop-menu > li.has-dropdown:hover > button .chev {

  transform: rotate(180deg);

}

.desktop-menu > li.has-dropdown:hover > .dropdown-menu-custom {

  display: block;

  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;

}



/* ─────────────────────────

   DROPDOWN BASE

───────────────────────── */

.dropdown-menu-custom {

  display: none;

  position: absolute;

  top: calc(100% + -10px);

  left: 0;

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 10px;

  min-width: 220px;

  padding: 6px 0;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);

  opacity: 0;

  transform: translateY(-6px);

  transition:

    opacity var(--transition),

    transform var(--transition);

  z-index: 200;

  pointer-events: none;

}



.dropdown-menu-custom a {

  display: block;

  padding: 10px 18px;

  font-family: var(--work-sans);

  font-size: 15px;

  font-weight: 500;

  color: var(--black-brown);

  text-decoration: none;

  transition:

    background var(--transition),

    color var(--transition);

  white-space: nowrap;

}

.dropdown-menu-custom a:hover {

  background: #fff5ec;

  color: var(--orange);

}



/* ─────────────────────────

   MEGA DROPDOWN — Services

   Two-level: parent row → fly-out right

───────────────────────── */

.dropdown-mega {

  padding: 6px 0;

  min-width: 260px;

}



/* Each group row inside mega */

.mega-group {

  position: relative;

}



.mega-group .mega-parent {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 18px;

  font-family: var(--work-sans);

  font-size: 15px;

  font-weight: 500;

  color: var(--black-brown);

  text-decoration: none;

  cursor: pointer;

  transition:

    background var(--transition),

    color var(--transition);

  white-space: nowrap;

  gap: 10px;

}

.mega-group .mega-parent:hover {

  background: #fff5ec;

  color: var(--orange);

}



.mega-chev {

  font-size: 11px;

  color: #aaa;

  flex-shrink: 0;

  transition: color var(--transition);

}

.mega-group:hover .mega-chev {

  color: var(--orange);

}



/* L3 fly-out panel (appears on right) */

.mega-sub {

  display: none;

  position: absolute;

  top: 0;

  left: calc(100% + 2px);

  background: #fff;

  border: 1px solid var(--border);

  border-radius: 10px;

  min-width: 260px;

  padding: 6px 0;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);

  opacity: 0;

  transform: translateX(-6px);

  transition:

    opacity var(--transition),

    transform var(--transition);

  z-index: 300;

  pointer-events: none;

}



.mega-group:hover .mega-sub {

  display: block;

  opacity: 1;

  transform: translateX(0);

  pointer-events: auto;

}



.mega-sub a {

  display: block;

  padding: 10px 18px;

  font-family: var(--work-sans);

  font-size: 15px;

  font-weight: 500;

  color: var(--black-brown);

  text-decoration: none;

  white-space: nowrap;

  transition:

    background var(--transition),

    color var(--transition);

}

.mega-sub a:hover {

  background: #fff5ec;

  color: var(--orange);

}



/* ─────────────────────────

   RIGHT ACTIONS

───────────────────────── */

.nav-actions {

  display: flex;

  align-items: center;

  gap: 40px;

  margin-left: auto;

  flex-shrink: 0;

}



.btn-search {

  background: none;

  border: none;

  cursor: pointer;

  color: var(--text);

  font-size: 20px;

  padding: 6px;

  border-radius: 6px;

  transition: color var(--transition);

}

.btn-search:hover {

  color: var(--orange);

}



.btn-quote {

  background: var(--orange);

  color: #fff;

  border: none;

  border-radius: 50px;

  padding: 14px 26px;

  font-family: var(--work-sans);

  font-size: 16px;

  font-weight: 500;

  cursor: pointer;

  display: flex;

  align-items: center;

  gap: 8px;

  transition:

    background var(--transition),

    transform 0.15s;

  text-decoration: none;

  white-space: nowrap;

}

.btn-quote:hover {

  background: #d9670f;

  transform: scale(1.03);

  color: #fff;

}



.btn-hamburger {

  display: none;

  background: none;

  border: none;

  cursor: pointer;

  color: var(--navy);

  font-size: 24px;

  padding: 6px;

  margin-left: 8px;

}



/* ─────────────────────────

   MOBILE OVERLAY

───────────────────────── */

.mobile-overlay {

  display: none;

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.45);

  z-index: 1100;

  opacity: 0;

  transition: opacity var(--transition);

}

.mobile-overlay.visible {

  display: block;

}

.mobile-overlay.open {

  opacity: 1;

}



/* ─────────────────────────

   MOBILE SLIDE PANEL

───────────────────────── */

.mobile-panel {

  position: fixed;

  top: 0;

  right: 0;

  width: min(320px, 88vw);

  height: 100vh;

  background: #fff;

  z-index: 1200;

  transform: translateX(100%);

  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);

  display: flex;

  flex-direction: column;

  overflow: hidden;

}

.mobile-panel.open {

  transform: translateX(0);

}



.mobile-panel-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px 20px;

  border-bottom: 1px solid var(--border);

  flex-shrink: 0;

}



.btn-close-panel {

  background: none;

  border: none;

  font-size: 22px;

  cursor: pointer;

  color: var(--text);

  padding: 4px;

  border-radius: 6px;

  transition: color var(--transition);

}

.btn-close-panel:hover {

  color: var(--orange);

}



.mobile-panel-body {

  flex: 1;

  overflow-y: auto;

  overflow-x: hidden;

  padding: 12px 0 24px;

}

.mobile-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 88vw);
    height: 100dvh; /* Better than 100vh on mobile */
    background: #fff;
    z-index: 1200;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.mobile-panel.open {
    transform: translateX(0);
}

.mobile-panel-head {
    flex-shrink: 0;
}

.mobile-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-panel-footer {
    flex-shrink: 0;
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
}



/* ── Mobile L1 nav items ── */

.mobile-nav-item {

  border-bottom: 1px solid var(--border);

}

.mobile-nav-item:last-child {

  border-bottom: none;

}



.mobile-nav-link,

.mobile-nav-toggle {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 22px;

  font-size: 16px;

  font-weight: 600;

  font-family: var(--work-sans);

  color: var(--black-brown);

  text-decoration: none;

  background: none;

  border: none;

  width: 100%;

  cursor: pointer;

  transition:

    color var(--transition),

    background var(--transition);

}



.mobile-nav-link,

.mobile-nav-toggle a {

  color: var(--black-brown);

  text-decoration: none;

}



.mobile-nav-link:hover,

.mobile-nav-toggle:hover {

  color: var(--orange);

  background: #fff8f3;

}

.mobile-nav-link.active {

  color: var(--orange);

}



.mobile-chev {

  font-size: 13px;

  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);

  color: #999;

  flex-shrink: 0;

}

.mobile-nav-item.open .mobile-chev {

  transform: rotate(180deg);

  color: var(--orange);

}



/* ── Mobile L1 submenu ── */

.mobile-submenu {

  overflow: hidden;

  max-height: 0;

  transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);

  background: #fafafa;

}

.mobile-submenu.open {

  max-height: 800px;

} /* tall enough for nested */



/* Plain links inside L1 submenu */

.mobile-submenu > a {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 22px 11px 34px;

  font-size: 15px;

  font-weight: 500;

  font-family: var(--work-sans);

  color: #555;

  text-decoration: none;

  border-top: 1px solid var(--border);

  transition:

    color var(--transition),

    background var(--transition);

}

.mobile-submenu > a::before {

  content: "";

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--orange);

  flex-shrink: 0;

  opacity: 0.5;

}

.mobile-submenu > a:hover {

  color: var(--orange);

  background: #fff5ec;

}



/* ── Mobile L2 toggle group (inside L1 submenu) ── */

.mobile-submenu,

.mob-l2-sub {

  will-change: max-height;

}

.mob-l2-item {

  border-top: 1px solid var(--border);

}



.mob-l2-toggle {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  width: 100%;

  padding: 11px 22px 11px 34px;

  font-size: 15px;

  font-weight: 600;

  font-family: var(--work-sans);

  color: var(--black-brown);

  background: none;

  border: none;

  cursor: pointer;

  transition:

    color var(--transition),

    background var(--transition);

  text-align: left;

}

.mob-l2-toggle:hover {

  color: var(--orange);

  background: #fff5ec;

}



.mob-l2-chev {

  font-size: 11px;

  color: #aaa;

  flex-shrink: 0;

  transition:

    transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),

    color 0.24s;

}

.mob-l2-item.open .mob-l2-chev {

  transform: rotate(180deg);

  color: var(--orange);

}



/* ── Mobile L2 submenu ── */

.mob-l2-sub {

  overflow: hidden;

  max-height: 0;

  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  background: #f3f3f3;

}

.mob-l2-sub.open {

  max-height: 400px;

}



.mob-l2-sub a {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 22px 10px 50px;

  font-size: 14px;

  font-weight: 500;

  font-family: var(--work-sans);

  color: #666;

  text-decoration: none;

  border-top: 1px solid #e8e8e8;

  transition:

    color var(--transition),

    background var(--transition);

}

.mob-l2-sub a::before {

  content: "";

  width: 4px;

  height: 4px;

  border-radius: 50%;

  background: var(--orange);

  flex-shrink: 0;

  opacity: 0.4;

}

.mob-l2-sub a:hover {

  color: var(--orange);

  background: #fff5ec;

}



/* ── Mobile footer ── */

.mobile-panel-footer {

  padding: 16px 20px;

  border-top: 1px solid var(--border);

  flex-shrink: 0;

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.mobile-panel-footer .btn-quote {

  justify-content: center;

  padding: 13px;

  font-size: 16px;

}



/* ─────────────────────────

   RESPONSIVE BREAKPOINTS

───────────────────────── */

@media (max-width: 1240px) {

  .desktop-menu {

    display: none;

  }

  .btn-hamburger {

    display: flex;

  }

  .btn-quote.desktop-only {

    display: none;

  }

}

@media (min-width: 1241px) {

  .mobile-panel,

  .mobile-overlay {

    display: none !important;

  }

}



/* ══════════════════════════════════════

       HERO – VIDEO BACKGROUND

    ══════════════════════════════════════ */

.hero {

  position: relative;

  width: 100%;

  min-height: 92svh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background: var(--navy);

}

.hero-video {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  z-index: 0;

  pointer-events: none;

}

.hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    radial-gradient(

      ellipse 80% 70% at 50% 45%,

      transparent 20%,

      rgb(6 17 51 / 37%) 100%

    ),

    linear-gradient(180deg, rgba(6, 17, 51, 0.45) 0%, rgb(11 13 23 / 14%) 100%);

}

.hero-content {

  position: relative;

  z-index: 10;

  width: 100%;

  max-width: 1240px;

  margin: 0 auto;

  padding: clamp(90px, 14vw, 150px) clamp(20px, 6vw, 60px)

    clamp(70px, 10vw, 110px);

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: clamp(20px, 3vw, 28px);

}

.hero-title {

  font-family: var(--work-sans);

  font-weight: 600;

  font-size: clamp(26px, 5vw, 58px);

  line-height: 1.4;

  color: #fff;

  letter-spacing: -0.01em;

  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);

  animation: fadeUp 0.7s ease both;

}



.hero-title em {

  font-style: normal;

  background: linear-gradient(90deg, #ff560c 10%, #ff5f1a 90%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.hero-sub {

  font-family: var(--roboto);

  font-size: clamp(14px, 2vw, 17px);

  line-height: 1.78;

  color: #fff;

  max-width: 1040px;

  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);

  animation: fadeUp 0.75s 0.18s ease both;

}

.hero-cta-wrap {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  justify-content: center;

  animation: fadeUp 0.8s 0.35s ease both;

}

.btn-hero-primary {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #fff;

  color: #111;

  border: none;

  border-radius: 50px;

  padding: clamp(12px, 2.5vw, 15px) clamp(26px, 4vw, 40px);

  font-family: var(--work-sans);

  font-size: clamp(14px, 1.8vw, 18px);

  font-weight: 600;

  cursor: pointer;

  text-decoration: none;

  transition:

    background 0.2s,

    color 0.2s,

    transform 0.2s,

    box-shadow 0.2s;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);

  white-space: nowrap;

}

.btn-hero-primary:hover {

  background: var(--orange);

  color: #fff;

  transform: translateY(-2px);

  box-shadow: 0 8px 28px rgba(249, 77, 0, 0.42);

}



.btn-hero-primary svg {

  width: 18px;

}



@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(22px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* Scroll hint */

.scroll-hint {

  position: absolute;

  bottom: 26px;

  left: 50%;

  transform: translateX(-50%) !important;

  z-index: 10;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  animation: fadeUp 0.9s 0.6s ease both;

}

.scroll-mouse {

  width: 22px;

  height: 36px;

  border: 2px solid rgba(255, 255, 255, 0.3);

  border-radius: 11px;

  display: flex;

  justify-content: center;

  padding-top: 6px;

}

.scroll-dot {

  width: 4px;

  height: 8px;

  background: rgba(255, 255, 255, 0.55);

  border-radius: 2px;

  animation: sdot 1.6s ease-in-out infinite;

}

@keyframes sdot {

  0% {

    opacity: 1;

    transform: translateY(0);

  }

  80% {

    opacity: 0;

    transform: translateY(10px);

  }

  100% {

    opacity: 0;

    transform: translateY(0);

  }

}

.scroll-label {

  font-family: var(--roboto);

  font-size: 10px;

  color: rgba(255, 255, 255, 0.35);

  letter-spacing: 0.12em;

  text-transform: uppercase;

}



@media (max-width: 480px) {

  .btn-hero-primary {

    width: 100%;

    justify-content: center;

    max-width: 300px;

  }

}



/* Section */

.sil-strategic {

  background: #fff;

  padding: clamp(52px, 7vw, 96px) 0;

}



/* ── Heading ── */

.sil-main-heading {

  font-family: var(--work-sans);

  font-size: clamp(22px, 3vw, 42px);

  font-weight: 700;

  color: var(--text);

  line-height: 1.2;

  letter-spacing: 0.015em;

  text-transform: capitalize;

  /* max-width: 540px; */

}

.sil-orange {

  color: var(--orange);

}



/* ── B&W top-right image ── */

.sil-bw-img {

  width: 100%;

  max-width: 490px;

  height: clamp(120px, 12vw, 168px);

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.09);

}

.sil-bw-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center 25%;

  filter: grayscale(100%);

  display: block;

  transition: filter 0.4s;

}

.sil-bw-img:hover img {

  filter: grayscale(0%);

}



/* ── Image stack ── */

.sil-img-stack {

  position: relative;

  min-height: clamp(300px, 40vw, 500px);

}



/* Green border frame — behind, offset bottom-right */

.sil-frame-border {

  position: absolute;

  top: -36px;

  left: 128px;

  right: 0;

  bottom: 0;

  border: 3px solid #13870799;

  border-radius: 22px;

  z-index: 1;

}



/* Main image — front, offset top-left */

.sil-frame-main {

  position: absolute;

  top: 0;

  left: 0;

  width: calc(100% - 36px);

  bottom: 36px;

  border-radius: 22px;

  overflow: hidden;

  z-index: 2;

  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14);

}

.sil-frame-main img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center top;

  display: block;

}



/* ── Pill tabs ── */

.sil-pill-tabs {

  display: inline-flex;

  gap: 0;

  margin-bottom: 0;

  flex-wrap: wrap;

  gap: 2px;

  border: 1px solid #d8d8d8;

  border-radius: 50px;

  padding: 10px 36px;

}



.sil-pill {

  font-family: var(--work-sans);

  font-size: clamp(14px, 1.3vw, 18.5px);

  font-weight: 500;

  color: #555;

  background: transparent;

  border: none;

  border-right: 1px solid #dddddd;

  padding: 9px 22px;

  cursor: pointer;

  transition: all var(--transition);

  white-space: nowrap;

  line-height: 1;

  position: relative;

}



.sil-pill:last-child {

  border: none;

}



.sil-pill:hover:not(.active) {

  border-color: #bbb;

  color: var(--text);

}



.sil-pill.active {

  background: transparent;

  /* border-color: var(--orange); */

  color: var(--orange);

  font-weight: 600;

  position: relative;

}



.sil-pill.active::after {

  content: "";

  position: absolute;

  bottom: -11px;

  left: 50%;

  transform: translateX(-50%);

  height: 1px;

  width: 100px;

  background-color: #d93d00;

  z-index: 10;

}



/* Divider */

.sil-divider {

  border: none;

  border-top: 1.5px solid #e8c3b2;

  margin: 20px 0 24px;

  opacity: 1;

}



/* Tab panels */

.sil-panel {

  display: none;

}

.sil-panel.active {

  display: block;

  animation: silIn 0.3s ease both;

}

@keyframes silIn {

  from {

    opacity: 0;

    transform: translateY(6px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.sil-body-text {

  font-family: var(--roboto);

  font-size: clamp(15px, 1.4vw, 16px);

  font-weight: 400;

  color: var(--text);

  line-height: 1.7;

  margin-bottom: 32px;

}



/* Read More button */

.sil-read-btn {

  background-color: var(--orange);

  color: #ffff;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  border-radius: 50px;

  padding: 12px 28px;

  font-family: var(--work-sans);

  font-size: 15px;

  font-weight: 600;

  text-decoration: none;

  transition:

    background var(--transition),

    transform 0.18s,

    box-shadow 0.18s;

  white-space: nowrap;



  box-shadow: 0 4px 16px rgba(249, 77, 0, 0.28);

}

.sil-read-btn:hover {

  background: #d93d00;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(249, 77, 0, 0.38);

  color: #fff;

}



/* ── Responsive ── */

@media (max-width: 767px) {

  .sil-img-stack {

    min-height: 260px;

  }

  .sil-frame-border {

    top: 20px;

    left: 20px;

  }

  .sil-frame-main {

    width: calc(100% - 20px);

    bottom: 20px;

  }

  .sil-bw-img {

    max-width: 100%;

  }

}

@media (max-width: 480px) {

  .sil-pill {

    padding: 8px 14px;

    font-size: 13px;

  }

  .sil-img-stack {

    min-height: 220px;

  }

}



/* ── Section shell ── */

.cv-section {

  background: var(--navy-bg);

  padding-bottom: 60px;

}



/* ── TOP: dark navy ── */

.cv-top {

  /* background: var(--navy-bg); */

  padding: clamp(48px, 7vw, 88px) 0;

  position: relative;

  overflow: hidden;

}

.cv-top::before {

  content: "";

  position: absolute;

  top: -80px;

  left: -80px;

  width: 340px;

  height: 340px;

  background: radial-gradient(

    circle,

    rgba(249, 77, 0, 0.12) 0%,

    transparent 70%

  );

  pointer-events: none;

}



.cv-top-left {

  padding-right: clamp(16px, 4vw, 56px);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 20px;

}



.cv-heading {

  font-family: var(--work-sans);

  font-size: clamp(26px, 3vw, 46px);

  font-weight: 600;

  color: #fff;

  line-height: 1.4;

  /* letter-spacing: .016em; */

  margin: 0;

  text-transform: capitalize;

}



.cv-sub {

  font-family: var(--roboto);

  font-size: clamp(13px, 1.4vw, 15px);

  color: #fff;

  line-height: 1.75;

  max-width: 480px;

  margin: 0;

}



.cv-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--orange);

  color: #fff;

  border-radius: 50px;

  padding: 12px 28px;

  font-family: var(--work-sans);

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  transition:

    background var(--transition),

    transform 0.18s,

    box-shadow 0.18s;

  box-shadow: 0 4px 18px rgba(249, 77, 0, 0.3);

}

.cv-btn:hover {

  background: #d93d00;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(249, 77, 0, 0.42);

  color: #fff;

}



/* Right image */

.cv-top-right {

  display: flex;

  align-items: stretch;

}



.cv-top-right img{

  border-radius: 10px;

}



.cv-top-img {

  height: clamp(220px, 28vw, 320px);

  border-radius: 0;

  overflow: hidden;

  position: absolute;

  content: "";

  right: 10px;

  top: 0;

}

.cv-top-img img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: center;

  display: block;

}



/* ── BOTTOM: white + swiper ── */

.cv-bottom {

  /* background: #fff; */

  /* padding: clamp(36px, 5vw, 60px) 0 clamp(40px, 5vw, 64px); */

}



/* ── Swiper cards ── */

.cv-swiper {

  padding-bottom: 52px !important;

}



.svc-card {

  position: relative;

  overflow: hidden;

  min-height: 620px;

  height: 100%;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.8);

}



/* Background Image */

.svc-card-img {

  position: absolute;

  inset: 0;

  z-index: 1;

}



.svc-card-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* Overlay */

.svc-overlay {

  position: absolute;

  inset: 0;

  z-index: 2;



  background: linear-gradient(

    180deg,

    rgba(2, 4, 25, 0.15) 0%,

    rgba(2, 4, 25, 0.55) 45%,

    rgba(2, 4, 25, 0.96) 100%

  );

}



/* Content */

.svc-card-body {

      position: absolute;

    /* inset: 0; */

    z-index: 3;

    /* display: flex; */

    /* flex-direction: column; */

    /* justify-content: flex-end; */

    padding: 42px 28px 34px;

    /* bottom: 0px; */

    /* height: 469px; */

    top: 26%;

}



/* Icon */

.svc-icon {

  width: 56px;

  height: 56px;

  margin-bottom: 24px;

}



.svc-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



/* Title */

.svc-title {

             font-family: var(--work-sans);

    font-size: clamp(20px, 1.4vw, 22px);

    font-weight: 500;

    line-height: 1.42;

    color: #fff;

    margin-bottom: 12px;

    /* min-height: 150px; */

    display: flex;

    align-items: flex-end;

}



/* Description */

.svc-desc {

  font-family: var(--roboto);

  font-size: clamp(15px, 1vw, 18px);

  line-height: 1.95;

  font-weight: 300;

  color: rgba(255,255,255,.95);



  margin: 0;



  min-height: 320px;

}



/* Swiper Equal Height */

.cv-swiper .swiper-wrapper {

  align-items: stretch;

}



.swiper-slide {

  height: auto;

}



.swiper-slide .svc-card {

  height: 100%;

}



/* Responsive */





@media (max-width: 991px) {



  .svc-card {

    min-height: 520px;

  }



  .svc-card-body {

    padding: 28px 22px;

  }



}



/* Swiper pagination */

.cv-pagination {

  bottom: 12px !important;

}

.cv-pagination .swiper-pagination-bullet {

  width: 10px;

  height: 10px;

  background: #d9d9d98f;

  opacity: 1;

  transition:

    background var(--transition),

    transform var(--transition);

}

.cv-pagination .swiper-pagination-bullet-active {

  background: #fff;

  transform: scale(1.3);

}



/* ── Responsive ── */

@media (max-width: 767px) {

  .cv-top-right {

    margin-top: 28px;

  }

  .cv-top-img {

    height: 200px;

  }

  .svc-card {

    min-height: 470px !important;

  }

}



/* ── Section wrapper ── */

.alt-sections {

  background: #fff;

  padding: clamp(56px, 7vw, 96px) 0;

}



.alt-row {

  position: relative;

}



.alt-spacer {

  height: clamp(40px, 6vw, 80px);

}



/* ── Text block ── */



.alt-heading {

  font-family: var(--work-sans);

  font-size: clamp(24px, 2vw, 40px);

  font-weight: 600;

  color: var(--text);

  line-height: 1.6;

  letter-spacing: -0.015em;

  margin: 0;

  text-transform: capitalize;

}

.alt-orange {

  color: var(--orange);

}



.alt-body {

  font-family: var(--roboto);

  font-size: clamp(15.5px, 1.35vw, 16px);

  color: var(--text);

  line-height: 1.82;

  margin-bottom: 0;

}



/* ── Buttons ── */

.alt-btns {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  align-items: center;

}



.alt-btn-orange,

.alt-btn-navy {

  display: inline-flex;

  align-items: center !important;

  gap: 7px !important;

  border-radius: 50px !important;

  padding: 12px 28px !important;

  font-family: var(--work-sans) !important;

  font-size: 16px !important;

  font-weight: 500 !important;

  text-decoration: none !important;

  transition:

    background var(--transition),

    transform 0.18s,

    box-shadow 0.18s !important;

  white-space: nowrap !important;

  border: none !important;

}



.alt-btn-orange {

  background: var(--orange) !important;

  color: #fff !important;

  box-shadow: 0 4px 18px rgba(249, 77, 0, 0.28) !important;

  /* width: auto !important; */

}

.alt-btn-orange:hover {

  background: #d93d00 !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 8px 24px rgba(249, 77, 0, 0.38) !important;

  color: #fff !important;

}



.alt-btn-navy {

  background: var(--navy-bg);

  color: #fff;

  box-shadow: 0 4px 18px rgba(6, 17, 51, 0.18);

}

.alt-btn-navy:hover {

  background: #0a1a40;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(6, 17, 51, 0.28);

  color: #fff;

}



/* ── Image stacks ── */

.alt-img-stack {

  position: relative;

  min-height: clamp(260px, 34vw, 510px);

}



/* Border frame — BEHIND image, offset */

.ais-border {

  position: absolute;

  z-index: 1;

  border-radius: 18px;

}



/* Main image — FRONT */

.ais-main {

  position: absolute;

  z-index: 2;

  border-radius: 18px;

  overflow: hidden;

  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);

}

.ais-main img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;

}

.alt-img-stack:hover .ais-main img {

  transform: scale(1.03);

}



/* BLUE border variant (row 1) —

     border behind, offset bottom-right */

.alt-img-stack--blue .ais-border {

  top: -36px;

  left: -36px;

  right: 128px;

  bottom: -10px;

  border: 3px solid #13870799;

}

.alt-img-stack--blue .ais-main {

  top: 0;

  left: 0;

  right: 24px;

  bottom: 24px;

}



/* GREEN border variant (row 2) —

     border behind, offset bottom-right */

.alt-img-stack--green .ais-border {

  position: absolute;

  top: -36px;

  left: 130px;

  right: -10px;

  bottom: -10px;

  border: 3px solid #13870799;

  border-radius: 22px;

  z-index: 1;

}

.alt-img-stack--green .ais-main {

  top: 0;

  left: 0;

  right: 24px;

  bottom: 24px;

}



/* ── Responsive ── */



@media (max-width: 767px) {

  .alt-img-stack {

    min-height: 240px;

  }

  .alt-img-stack--blue .ais-border,

  .alt-img-stack--green .ais-border {

    top: 14px;

    left: 14px;

    right: -2px;

    bottom: -2px;

  }

  .alt-img-stack--blue .ais-main,

  .alt-img-stack--green .ais-main {

    right: 18px;

    bottom: 18px;

  }

}

@media (max-width: 480px) {

  .alt-img-stack {

    min-height: 200px;

  }

  .alt-btns {

    flex-direction: column;

    align-items: flex-start;

  }

  .alt-btn-orange,

  .alt-btn-navy {

    width: 100%;

    justify-content: center;

  }

}



/* ── Section ── */

.join-section {

  background: #fff;

  overflow: hidden;

  position: relative;

}



.join-section::before {

  position: absolute;

  content: "";

  background: #ffebe2;

  width: 100%;

  min-height: 700px;

  top: 0;

  left: 0;

}



/* ── Top: peach/salmon background ── */

.join-top {

  padding: 60px 0;

  position: relative;

}



.join-top-inner {

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: clamp(16px, 2.5vw, 22px);

}



/* Badge pill */

.join-badge {

  display: inline-flex;

  align-items: center;

  background-color: #ffdfd0;

  border-radius: 50px;

  padding: 10px 30px;

  font-family: var(--roboto);

  font-size: clamp(13px, 1.3vw, 14.5px);

  font-weight: 500;

  color: var(--text);

  letter-spacing: 0.02em;

}



/* Heading */

.join-heading {

  font-family: var(--work-sans);

  font-size: clamp(28px, 4vw, 32px);



  font-weight: 600;

  color: var(--text);

  line-height: 1.42;

  letter-spacing: -0.02em;

  margin: 0;

  text-transform: capitalize;

  margin-bottom: 15px;

}

.join-orange {

  color: var(--orange);

}



/* Body */

.join-body {

  font-family: var(--roboto);

  font-size: clamp(15.5px, 1.35vw, 16px);

  color: var(--text);

  line-height: 1.82;

  margin: 0;

  /* max-width: 760px; */

  text-align: center;

}

.join-body strong {

  font-weight: 600;

  color: var(--text);

}



/* ── Bottom: white bg, image overlaps top ── */

.join-bottom {

  padding: 0 0 clamp(48px, 6vw, 80px);

  position: relative;

  z-index: 2;

}



.join-img-wrap {

  border-radius: 18px;

  overflow: hidden;

  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.13);

  margin-left: auto;

  margin-right: auto;

  position: relative;

  z-index: 3;

}

.join-img-wrap img {

  width: 100%;

  object-fit: cover;

  object-position: center 30%;

  display: block;

}



/* ── Responsive ── */

@media (max-width: 767px) {

  .join-top {

    padding-bottom: clamp(80px, 16vw, 120px);

  }

  .join-img-wrap {

    margin-top: clamp(-60px, -10vw, -80px);

    border-radius: 14px;

  }

  .join-body {

    text-align: center;

  }

}



@media (max-width: 480px) {

  .join-cta {

    width: 100%;

    justify-content: center;

  }

  .join-img-wrap {

    border-radius: 10px;

  }

}



/* ── Section ── */

.accord-sections {

  padding: 100px 0 60px 0;

}



.accord-block {

  margin-bottom: clamp(52px, 8vw, 100px);

}

.accord-block:last-child {

  margin-bottom: 0;

}



/* Remove default borders/shadows on the wrapper */

.sil-accordion {

  --bs-accordion-border-color: #e5e5e5;

  --bs-accordion-border-radius: 0;

  --bs-accordion-inner-border-radius: 0;

}



/* Each item */

.sil-accordion-item {

  border: 1px solid #0000001a;

  border-radius: 0 !important;

  background: #fff;

  margin-bottom: 10px;

  box-shadow: 0px 9px 4px -9px #00000021;

  border-radius: 16px !important;

}



/* Trigger button — collapsed (default) */

.sil-accordion-btn {

  font-family: var(--work-sans) !important;

  font-size: clamp(14px, 1.3vw, 16px) !important;

  font-weight: 500 !important;

  color: var(--text) !important;

  background: #fff !important;

  padding: 16px 18px !important;

  border-radius: 16px !important;

  box-shadow: none !important;

  border: 1px solid #cfcfcf;

  transition:

    background var(--transition),

    color var(--transition) !important;

    position: relative;

    /* display: inline; */

}



.sil-accordion-btn p{

  margin: 0;

}



/* .sil-accordion-btn.accordion-button::after {

  position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

} */



/* Remove Bootstrap's default blue focus ring */

.sil-accordion-btn:focus {

  box-shadow: none !important;

  outline: none !important;

}



/* Collapsed hover */

.sil-accordion-btn.collapsed:hover {

  background: #fafafa !important;

}



/* OPEN (not collapsed) — orange bg */

.sil-accordion-btn:not(.collapsed) {

  background: var(--orange) !important;

  color: #fff !important;

  border-radius: 16px !important;

}



/* Orange text inside button stays white when open */

.sil-accordion-btn:not(.collapsed) .alt-orange {

  color: #fff !important;

}



/* Bootstrap chevron arrow — override color */

.sil-accordion-btn::after {

  /* Replace Bootstrap's default SVG with a clean chevron in current color */

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;

  flex-shrink: 0;

  transition: transform var(--transition) !important;

}



/* White chevron when open */

.sil-accordion-btn:not(.collapsed)::after {

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;

}



/* Body */

.sil-accordion-body {

  font-family: var(--roboto);

  font-size: clamp(13px, 1.25vw, 15px);

  color: var(--text);

  line-height: 1.82;

  padding: 16px 18px 20px !important;

  background: #fff;

  border-radius: 0 0 16px 16px !important;

}

.sil-accordion-body p {

  margin-bottom: 10px;

}

.sil-accordion-body p:last-child {

  margin-bottom: 0;

}



/* Know More link */

.ac-link {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  font-family: var(--roboto);

  font-size: 16px;

  font-weight: 600;

  color: var(--orange);

  text-decoration: underline;

  transition: gap var(--transition);

  margin-top: 4px;

}

.ac-link:hover {

  gap: 8px;

  color: var(--orange);

}



/* ── Section wrapper ── */

.industries-section {

  position: relative;

  background-image: url("../images/bg-img.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  overflow: hidden;

  padding: 60px 0;

}



/* Circuit SVG background */

.ind-bg-pattern {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

}



.industries-section .container {

  position: relative;

  z-index: 1;

}



/* ── Heading ── */

.ind-head {

  margin-bottom: clamp(32px, 5vw, 56px);

}



.ind-title {

  font-family: var(--work-sans);

  font-size: clamp(22px, 3.2vw, 40px);

  font-weight: 800;

  color: var(--text);

  line-height: 1.22;

  letter-spacing: -0.015em;

  margin: 0;

}

.ind-orange {

  color: var(--orange);

}



/* ── Grid ── */

.ind-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;

  margin: 0 auto;

}



/* ── Card ── */

.ind-card {

  background-color: #fff;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  border: 1.5px solid #e0d8cf;

  border-radius: 14px;

  padding: 30px 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 14px;

  cursor: pointer;

  transition:

    transform 0.22s ease,

    box-shadow 0.22s ease,

    background 0.22s ease,

    border-color 0.22s ease;

  text-align: center;

}



.ind-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);

  border-color: var(--orange);

  background-image: url("../images/hover-bg.png");

  transition: 0.3s all ease;

}



/* Icon */

.ind-icon {

  width: 80px;

  height: 80px;

  color: var(--orange);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  margin-bottom: 15px;

}

.ind-icon img {

  width: 100%;

  height: 100%;

}



/* Label */

.ind-label {

  font-family: var(--work-sans);

  font-size: clamp(16px, 1.1vw, 18px);

  font-weight: 500;

  color: var(--text);

  line-height: 1.4;

}



.ind-card:hover .ind-label {

  color: #fff;

}



.ind-card:hover .ind-icon {

  filter: brightness(0) invert(1);

}



/* ── Responsive ── */

@media (max-width: 991px) {

  .ind-grid {

    grid-template-columns: repeat(3, 1fr);

  }

}

@media (max-width: 650px) {

  .ind-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 14px;

  }

}

@media (max-width: 380px) {

  .ind-grid {

    grid-template-columns: 1fr 1fr;

    gap: 10px;

  }

  .ind-card {

    padding: 18px 12px 16px;

  }

}



.contact-section {

  position: relative;

  min-height: 92svh;

  display: flex;

  align-items: center;



  /* Background image — replace URL with your actual image/video poster */

  background-image: url("../images/contact-bg.webp");

  background-size: cover;

  background-position: center;

  background-attachment: fixed; /* parallax feel */

  overflow: hidden;

  padding: clamp(48px, 7vw, 80px) 0;

}



/* Dark navy overlay */

.contact-overlay {

  position: absolute;

  inset: 0;

  background: #00083dd4;

  z-index: 0;

}



.contact-section .container {

  position: relative;

  z-index: 1;

}



/* ── Play button ── */

.contact-play-btn {

  width: clamp(64px, 8vw, 88px);

  height: clamp(64px, 8vw, 88px);

  border-radius: 50%;

  background: #fff;

  border: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--orange);

  box-shadow:

    0 0 0 12px rgba(255, 255, 255, 0.15),

    0 0 0 24px rgba(255, 255, 255, 0.07);

  transition:

    transform 0.22s ease,

    box-shadow 0.22s ease;

  flex-shrink: 0;

}

.contact-play-btn svg {

  width: clamp(45px, 3vw, 70px);

  height: clamp(45px, 3vw, 70px);

  margin-left: 4px;

}

.contact-play-btn:hover {

  transform: scale(1.08);

  box-shadow:

    0 0 0 14px rgba(255, 255, 255, 0.2),

    0 0 0 28px rgba(255, 255, 255, 0.08);

}



/* ── Contact form card ── */

.contact-card {

  background: #fff;

  border-radius: 20px;

  padding: clamp(28px, 4vw, 48px);

  width: 100%;

  max-width: 680px;

  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);

}



/* Heading */

.contact-heading {

     font-family: var(--work-sans);

    font-size: clamp(20px, 2vw, 24px);

    font-weight: 600;

    color: var(--text);

    line-height: 1.4;

    letter-spacing: -0.01em;

    margin: 0;

}

.contact-orange {

  color: var(--orange);

}



/* ── Form inputs ── */

.contact-form {

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.cf-group {

  width: 100%;

}



.cf-input {

  width: 100%;

  background: #fff;

  border: 1px solid #d8d8d8;

  border-radius: 10px;

  padding: 14px 18px;

  font-family: var(--roboto);

  font-size: 14px;

  color: var(--text);

  outline: none;

  transition:

    border-color var(--transition),

    box-shadow var(--transition);

  resize: none;

  display: block;

  box-shadow: 0px 9px 4px -7px #00000040;

}

.cf-input::placeholder {

  color: #aaa;

}

.cf-input:focus {

  border-color: var(--orange);

  box-shadow: 0 0 0 3px rgba(249, 77, 0, 0.1);

}



.cf-textarea {

  min-height: 130px;

}



/* Checkbox */

.cf-check-wrap {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  margin-top: 4px;

}

.cf-check {

  width: 16px;

  height: 16px;

  border: 1.5px solid #ccc;

  border-radius: 3px;

  cursor: pointer;

  accent-color: var(--orange);

  flex-shrink: 0;

  margin-top: 2px;

}

.cf-check-label {

  font-family: var(--work-sans);

  font-size: 15.5px;

  color: #555;

  line-height: 1.5;

  cursor: pointer;

}

.cf-terms {

  color: var(--text);

  font-weight: 700;

  text-decoration: none;

  transition: color var(--transition);

}

.cf-terms:hover {

  color: var(--orange);

}



/* Submit button */

.cf-submit {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: var(--orange);

  color: #fff;

  border: none;

  border-radius: 50px;

  padding: 13px 30px;

  font-family: var(--work-sans);

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  transition:

    background var(--transition),

    transform 0.18s,

    box-shadow 0.18s;

  box-shadow: 0 4px 18px rgba(249, 77, 0, 0.28);

  align-self: flex-start;

  margin-top: 4px;

}

.cf-submit:hover {

  background: #d93d00;

  transform: translateY(-2px);

  box-shadow: 0 8px 24px rgba(249, 77, 0, 0.38);

}



/* ── Video Modal ── */

.video-modal-content {

  background: #000;

  border: none;

  border-radius: 14px;

  overflow: hidden;

}

.video-modal-header {

  background: transparent;

  border: none;

  padding: 12px 16px 0;

  justify-content: flex-end;

}

.video-responsive {

  position: relative;

  padding-bottom: 56.25%; /* 16:9 */

  height: 0;

  overflow: hidden;

}

.video-responsive iframe {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border: none;

}



/* ── Responsive ── */

@media (max-width: 991px) {

  .contact-section {

    padding: clamp(40px, 6vw, 64px) 0;

  }

  .contact-play-btn {

    margin-bottom: 32px;

  }

  .contact-card {

    max-width: 100%;

  }

}

@media (max-width: 480px) {

  .cf-submit {

    width: 100%;

    justify-content: center;

  }

  .contact-card {

    padding: 24px 20px;

  }

}



.latest-news-sec {

  background: #f4f4f4;

  overflow: hidden;

  padding: 60px 0;

}



.news-top {

  margin-bottom: 60px;

}



.news-subtitle {

  max-width: 760px;

  margin: 18px auto 0;

  font-size: 18px;

  line-height: 1.7;

  color: #1d1d1d;

  font-weight: 400;

}



/* Slider */

.latest-news-slider-wrap {

  position: relative;

}



/* Card */

.news-card {

  position: relative;

  /* border-radius: 18px; */

  overflow: hidden;

  height: 440px;

}



.news-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s ease;

}



/* .news-card:hover img {

  transform: scale(1.06);

} */



.news-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(

    to top,

    rgba(11, 0, 77, 0.95),

    rgba(11, 0, 77, 0.25),

    transparent

  );

}



.news-content {

  position: absolute;

  left: 0;

  bottom: 0;

  z-index: 2;

  padding: 30px;

  width: 100%;

}



.news-content h3 {

  font-size: 18px;

  line-height: 1.45;

  color: #fff;

  font-weight: 600;

  margin-bottom: 15px;

  font-family: var(--work-sans);

}



.news-content p {

  font-size: 15px;

  line-height: 1.7;

  color: #fff;

  margin-bottom: 10px;

  font-weight: 300;

  font-family: var(--roboto);

}



.news-content a {

  color: #fff;

  font-size: 18px;

  font-weight: 500;

  text-decoration: underline;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-family: var(--work-sans);

}



/* Navigation */

.news-nav {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  border: none;

  background: #ff5a0f;

  color: #fff;

  font-size: 24px;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  transition: 0.3s ease;

  display: flex;

  align-items: center;

  justify-content: center;

}



.news-nav:hover {

  background: #121212;

}



.news-prev {

  left: -35px;

}



.news-next {

  right: -35px;

}



/* Responsive */

@media (max-width: 1399px) {

  

}



@media (max-width: 1199px) {

  .news-card {

    height: 380px;

  }



  .news-content {

    padding: 24px;

  }



  .news-content h3 {

    font-size: 18px;

  }



  .news-content p {

    font-size: 15px;

  }

}



@media (max-width: 991px) {

  .news-nav {

    display: none;

  }



  .news-top {

    margin-bottom: 40px;

  }

}



@media (max-width: 767px) {

  .news-card {

    height: 340px;

  }



  .news-content {

    padding: 20px;

  }



  .news-content h3 {

    font-size: 18px;

    margin-bottom: 10px;

  }



  .news-content p {

    font-size: 14px;

    line-height: 1.5;

  }



  .news-content a {

    font-size: 15px;

  }



  .news-subtitle {

    font-size: 15px;

    line-height: 1.6;

  }

}



.main-footer {

  background: #080021;

  padding-top: 90px;

  overflow: hidden;

}



/* Logo */

.footer-logo {

  display: inline-block;

  margin-bottom: 28px;

}



.footer-logo img {

  max-width: 130px;

}



/* About */

.footer-about p {

  color: rgba(255, 255, 255, 0.88);

  font-size: 16px;

  line-height: 1.9;

  font-family: var(--roboto);

  margin: 0;

}



/* Widget */

.footer-widget h3 {

  position: relative;

  color: #fff;

  font-size: 24px;

  font-weight: 500;

  margin-bottom: 48px;

  font-family: var(--work-sans);

}



.footer-widget h3::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -14px;

  width: 48px;

  height: 4px;

  background: var(--orange);

}



.footer-widget h3::before {

  content: "";

  position: absolute;

  left: 0;

  bottom: -13px;

  width: 118px;

  border: 1.2px dashed #fafafa5e;

}



/* Links */

.footer-widget ul {

  padding: 0;

  margin: 0;

  list-style: none;

}



.footer-widget ul li {

  margin-bottom: 14px;

}



.footer-widget ul li:last-child {

  margin-bottom: 0;

}



.footer-widget ul li a {

  color: rgba(255, 255, 255, 0.9);

  text-decoration: none;

  font-size: 16px;

  font-family: var(--work-sans);

  transition: var(--transition);

}



.footer-widget ul li a:hover {

  color: var(--orange);

  padding-left: 5px;

}



/* Contact */

.footer-contact-item {

  display: flex;

  gap: 10px;

  margin-bottom: 34px;

}



.footer-contact-item:last-child {

  margin-bottom: 0;

}



.footer-contact-item .icon {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  /* background: rgba(249, 77, 0, 0.12); */

  color: var(--orange);

  display: flex;

  align-items: start;

  justify-content: center;

  font-size: 20px;

  flex-shrink: 0;

}



.footer-contact-item h4 {

  color: #fff;

  font-size: 18px;

  margin-bottom: 8px;

  font-weight: 600;

}



.footer-contact-item p,

.footer-contact-item a {

  color: rgba(255, 255, 255, 0.88);

  font-size: 16px;

  line-height: 1.7;

  text-decoration: none;

  margin: 0;

  transition: var(--transition);

}



.footer-contact-item a:hover {

  color: var(--orange);

}



/* Newsletter */

.newsletter-text {

  color: rgba(255, 255, 255, 0.88);

  font-size: 18px;

  line-height: 1.8;

  margin-bottom: 28px;

}



.newsletter-form {

  position: relative;

  margin-bottom: 34px;

}



.newsletter-form input {

  width: 100%;

  height: 55px;

  border: none;

  outline: none;

  background: #fff;

  border-radius: 14px;

  padding: 0 90px 0 24px;

  font-size: 15px;

  color: var(--text);

  font-family: var(--work-sans);

}



.newsletter-form button {

  position: absolute;

  top: 2px;

  right: -17px;

  width: 50px;

  height: 50px;

  border: none;

  border-radius: 12px;

  background: var(--orange);

  color: #fff;

  font-size: 22px;

  transition: var(--transition);

}



.newsletter-form button:hover {

  background: #d74300;

}



/* Social */

.footer-social {

  display: flex;

  align-items: center;

  gap: 16px;

}



.footer-social a {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #fff;

  color: var(--orange);

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  font-size: 25px;

  transition: var(--transition);

}



.footer-social a:hover {

  background: var(--orange);

  color: #fff;

  transform: translateY(-4px);

}



.footer-social img {

  width: 20px;

}



/* Bottom */

.footer-bottom {

  margin-top: 70px;

  border-top: 1px solid rgba(255, 255, 255, 0.15);

  padding: 28px 0;

}



.footer-bottom-wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}



.footer-bottom-wrap p {

  color: rgba(255, 255, 255, 0.9);

  margin: 0;

  font-size: 16px;

}



.footer-bottom-wrap strong {

  color: #fff;

}



.footer-bottom-wrap a {

  color: rgba(255, 255, 255, 0.9);

  text-decoration: none;

  font-size: px;

  transition: var(--transition);

}



.footer-bottom-wrap a:hover {

  color: var(--orange);

}



/* Responsive */

@media (max-width: 1399px) {

  .footer-widget h3 {

    font-size: 20px;

    margin-bottom: 40px;



  }



  

  .footer-widget ul li a,

  .footer-contact-item p,

  .footer-contact-item a,

  .newsletter-text,

  .footer-bottom-wrap p {

    font-size: 16px;

  }



  .footer-about p{

    font-size: 14px;

  }



 

}



@media (max-width: 991px) {

  .main-footer {

    padding-top: 70px;

  }



  .footer-widget h3 {

    margin-bottom: 34px;

  }



  .footer-about p{

    font-size: 16px;

  }

}



@media (max-width: 767px) {

  .main-footer {

    padding-top: 60px;

  }



  .footer-widget h3 {

    font-size: 26px;

  }



  .footer-about p,

  .footer-widget ul li a,

  .footer-contact-item p,

  .footer-contact-item a,

  .newsletter-text,

  .footer-bottom-wrap p,

  .footer-bottom-wrap a {

    font-size: 15px;

  }



  .newsletter-form input {

    height: 62px;

    font-size: 15px;

  }



  .newsletter-form button {

    width: 48px;

    height: 48px;

    top: 7px;

    right: 7px;

    font-size: 18px;

  }



  .footer-social a {

    width: 46px;

    height: 46px;

    font-size: 18px;

  }



  .footer-bottom-wrap {

    flex-direction: column;

    text-align: center;

  }

}



/* about us  */

.inner-banner {

  position: relative;

  overflow: hidden;

  min-height: 300px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

}



/* Background */

.inner-banner-bg {

  position: absolute;

  inset: 0;

  z-index: 1;

}



.inner-banner-bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Overlay */

.inner-banner-overlay {

  position: absolute;

  inset: 0;

  background: #06023399;

  z-index: 2;

}



/* Content */

.inner-banner-content {

  position: relative;

  z-index: 3;

}



.inner-banner-content h1 {

  color: #fff;

  font-size: 52px;

  font-weight: 600;

  line-height: 1.1;

  margin-bottom: 22px;

  font-family: var(--work-sans);

}



/* Breadcrumb */

.inner-banner-content ul {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding: 0;

  margin: 0;

  list-style: none;

}



.inner-banner-content ul li {

  color: #fff;

  font-size: 18px;

  font-weight: 400;

  font-family: var(--roboto);

  letter-spacing: 0.08rem;

}



.inner-banner-content ul li a {

  color: #fff;

  text-decoration: none;

  transition: var(--transition);

}



.inner-banner-content ul li a:hover {

  color: var(--orange);

}



/* Responsive */

@media (max-width: 1399px) {

  .inner-banner {

    min-height: 360px;

  }



  .inner-banner-content h1 {

    font-size: 46px;

  }



  .inner-banner-content ul li {

    font-size: 20px;

  }

}



@media (max-width: 991px) {

  .inner-banner {

    min-height: 300px;

  }



  .inner-banner-content h1 {

    font-size: 40px;

    margin-bottom: 16px;

  }



  .inner-banner-content ul li {

    font-size: 18px;

  }

}



@media (max-width: 767px) {

  .inner-banner {

    min-height: 240px;

    padding: 70px 0;

  }



  .inner-banner-content h1 {

    font-size: 38px;

    margin-bottom: 10px;

  }



  .inner-banner-content ul {

    gap: 8px;

  }



  .inner-banner-content ul li {

    font-size: 15px;

  }

}



.about-intro {

  background: #fff;

  padding: clamp(56px, 7vw, 96px) 0;

}

.about-intro-img {

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

  position: relative;

}

.about-intro-img img {

  width: 100%;

  height: auto;

  display: block;

}

.quote-chip {

  position: absolute;

  bottom: 16px;

  left: 16px;

  right: 16px;

  border-radius: 10px;

  padding: 14px 16px;

  font-family: var(--roboto);

  font-size: 18.5px;

  color: #fff;

  line-height: 1.55;

  z-index: 99;

}



/* ════════════════════════════════════

       3. VISION — full-width dark band

    ════════════════════════════════════ */

.vision-band {

  padding: clamp(48px, 6vw, 80px) 0;

  position: relative;

  overflow: hidden;

  background-image: url("../images/vision-bg.png");

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

.vision-band::after {

  content: "";

  position: absolute;

  left: 0px;

  top: 0px;

  width: 1200px;

  height: 380px;

  background: linear-gradient(

    270deg,

    rgba(255, 254, 251, 0) -1.13%,

    rgba(9, 6, 40, 0.2) 8.55%,

    rgba(9, 6, 40, 0.8) 29.84%,

    #090628 67.58%,

    #090628 117.26%

  );

  pointer-events: none;

}

.vision-band-inner {

  position: relative;

  z-index: 10;

}



.vision-body {

  font-family: var(--roboto);

  font-size: clamp(15.5px, 1.35vw, 18px);

  color: #fff;

  line-height: 1.82;

  font-weight: 300;

}



.about-img-02 {

  position: absolute;

  bottom: 50px;

  right: -32px;

  z-index: 10;

}



.core-section {

  background-color: #f5f5f5;

  padding: 60px 0;

}



/* ════════════════════════════════════

       7. VIDEO BAND — AI banner

    ════════════════════════════════════ */

/* ════════════════════════════════════

   VIDEO BAND

════════════════════════════════════ */

.video-band {

  position: relative;

  min-height: 420px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



/* Background Video */

.video-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Overlay */

.video-band-overlay {

  position: absolute;

  inset: 0;

  background: rgba(6, 10, 40, 0.65);

  z-index: 1;

}



/* Play Button */

.video-play-btn {

  position: relative;

  z-index: 2;

  width: 80px;

  height: 80px;

  border-radius: 50%;

  background: #fff;

  border: none;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--orange);

  box-shadow:

    0 0 0 16px rgba(255, 255, 255, 0.12),

    0 0 0 32px rgba(255, 255, 255, 0.06);

  transition: 0.3s;

}



.video-play-btn:hover {

  transform: scale(1.1);

}



.video-play-btn svg {

  width: clamp(45px, 3vw, 70px);

  height: clamp(45px, 3vw, 70px);

  margin-left: 4px;

}



.governance-sec {

  background: #f7f7f7;

  overflow: hidden;

}



/* Card */

.governance-card {

  position: relative;

  overflow: hidden;

  border-radius: 18px;

  min-height: 496px;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);

  display: flex;

  justify-content: flex-end;

  align-items: flex-end;

}



.governance-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s ease;

}



.governance-card:hover .governance-bg {

  transform: scale(1.08);

}



/* Overlay */

/* .governance-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(

        to top,

        rgba(5, 1, 42, 0.95),

        rgba(5, 1, 42, 0.55),

        rgba(5, 1, 42, 0.2)

    );

} */



/* Content */

.governance-content {

      /* position: relative; */

    z-index: 2;

    height: 100%;

    /* display: flex; */

    /* flex-direction: column; */

    /* justify-content: flex-end; */

    padding: 20px;

    position: absolute;

    top: 30%;

}



.governance-icon {

  margin-bottom: 24px;

}



.governance-icon img {

  width: 52px;

}



.governance-content h3 {

  color: #fff;

  font-size: 22px;

  line-height: 1.4;

  font-weight: 500;

  margin-bottom: 22px;

  font-family: var(--work-sans);

}



.governance-content p {

  color: rgba(255, 255, 255, 0.92);

  font-size: 16px;

  line-height: 1.4;

  margin: 0;

  font-family: var(--roboto);

  font-weight: 300;

}



/* Bottom */

.governance-bottom {

  margin-top: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  flex-wrap: wrap;

}



.governance-user img {

  width: 62px;

  height: 62px;

  object-fit: contain;

}



.governance-bottom p {

  margin: 0;

  font-size: 22px;

  font-weight: 500;

  color: var(--text);

  font-family: var(--work-sans);

}



.governance-bottom a {

  color: var(--orange);

  font-weight: 700;

  transition: var(--transition);

}



.governance-bottom a:hover {

  opacity: 0.7;

}



/* Responsive */

@media (max-width: 1399px) {

  .governance-card {

    min-height: 460px;

  }



  .governance-content {

    padding: 32px;

  }



  .governance-content p,

  .governance-subtitle {

    font-size: 18px;

  }



  .governance-bottom p,

  .governance-bottom a {

    font-size: 28px;

  }



  .governance-content h3 {

    font-size: 20px;

  }



    

}



@media (max-width: 991px) {

  .governance-top {

    margin-bottom: 50px;

  }



  .governance-card {

    min-height: 480px;

  }

}



@media (max-width: 767px) {

  .governance-card {

    min-height: 420px;

  }



  .governance-content {

    padding: 24px;

  }



  .governance-content p,

  .governance-subtitle {

    font-size: 15px;

    line-height: 1.7;

  }



  .governance-icon img {

    width: 54px;

  }



  .governance-bottom {

    gap: 12px;

    text-align: center;

  }



  .governance-bottom p,

  .governance-bottom a {

    font-size: 20px;

  }



  .governance-user img {

    width: 48px;

    height: 48px;

  }

}



/* teams */

.leadership-sec {

  position: relative;

  background: #f5f5f5;

  overflow: hidden;

  z-index: 1;

}



/* Top Background */

.leadership-top-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 420px;

  background: var(--text);

  z-index: -1;

}



/* Heading */

.leadership-top {

  max-width: 1050px;

  margin: 0 auto 70px;

}



.leadership-subtitle {

  margin-top: 22px;

  color: rgba(255, 255, 255, 0.9);

  font-size: 22px;

  line-height: 1.8;

  font-family: var(--roboto);

}



/* Card */

.leader-card {

  background: #fff;

  border-radius: 36px;

  padding: 34px 26px 30px;

  text-align: center;

  box-shadow: 0px 6px 17px 0px #00000017;



  border: 1px solid #09062880;

  transition: var(--transition);

  height: 100%;

}



.leader-card:hover {

  transform: translateY(-10px);

}



/* Image */

.leader-img {

  overflow: hidden;

  border-radius: 28px;

  margin-bottom: 28px;

}



.leader-img img {

  width: 100%;

  height: auto;

  object-fit: cover;

  transition: 0.5s ease;

}



.leader-card:hover .leader-img img {

  transform: scale(1.08);

}



/* Content */

.leader-content h3 {

  color: var(--orange);

  font-size: 22px;

  font-weight: 600;

  margin-bottom: 8px;

  font-family: var(--work-sans);

  text-transform: uppercase;

}



.leader-content span {

  display: block;

  color: #1a1a1a;

  font-size: 18px;

  margin-bottom: 20px;

  font-family: var(--roboto);

  text-transform: capitalize;

}



/* Social */

.leader-social {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #111;

  color: #fff;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  text-decoration: none;

  transition: var(--transition);

}



.leader-social img {

  width: 22px;

}



.leader-social:hover {

  background: var(--orange);

  color: #fff;

  transform: translateY(-4px);

}



/* Responsive */

@media (max-width: 1399px) {

  .leadership-top-bg {

    height: 360px;

  }



  .leader-content h3 {

    font-size: 24px;

  }



  .leader-content span,

  .leadership-subtitle {

    font-size: 18px;

  }

}



@media (max-width: 991px) {

  .leadership-top {

    margin-bottom: 50px;

  }



  .leadership-top-bg {

    height: 300px;

  }



  .leader-card {

    border-radius: 26px;

  }



  .leader-img {

    border-radius: 20px;

  }

}



@media (max-width: 767px) {

  .leadership-sec {

    padding-top: 60px;

    padding-bottom: 60px;

  }



  .leadership-top-bg {

    height: 260px;

  }



  .leadership-subtitle {

    font-size: 15px;

    line-height: 1.7;

  }



  .leader-card {

    padding: 20px;

    border-radius: 20px;

  }



  .leader-img {

    border-radius: 16px;

    margin-bottom: 20px;

  }



  .leader-content h3 {

    font-size: 20px;

  }



  .leader-content span {

    font-size: 15px;

    margin-bottom: 20px;

  }



  .leader-social {

    width: 44px;

    height: 44px;

    font-size: 18px;

  }

}



.director-sec {

  background-color: #d9d9d936;

  padding: 0 0 60px 0;

}



/* =========================================

   GOVERNANCE EXECUTION

========================================= */



.governance-execution-sec {

  background: #1387070a;

  padding: 90px 0;

  overflow: hidden;

}



/* Left */

.governance-left {

  padding-right: 50px;

}



/* Right */

.governance-right {

  /* border-left: 4px solid #1fa12e; */

  padding-left: 48px;

}



.governance-right p {

  margin: 0;

  color: var(--text);

  font-size: 18px;

  line-height: 1.6;

  font-family: var(--roboto);

}



/* =========================================

   STRENGTHS

========================================= */



.our-strength-sec {

  background: #fff;

  overflow: hidden;

  padding: 60px 0;

}



.strength-top {

  margin-bottom: 60px;

}



/* Item */

.strength-item {

  display: flex;

  align-items: center;

  gap: 22px;

  border: 2px solid var(--orange);

  border-radius: 100px;

  padding: 16px 28px;

  height: 100%;

  background: #fff;

  transition: var(--transition);

}



.strength-item:hover {

  transform: translateY(-5px);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);

}



/* Icon */

.strength-icon {

  width: 54px;

  height: 54px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Text */

.strength-item p {

  margin: 0;

  color: var(--text);

  font-size: 18px;

  line-height: 1.6;

  font-weight: 600;

  font-family: var(--roboto);

}



/* =========================================

   RESPONSIVE

========================================= */



@media (max-width: 991px) {

  .governance-execution-sec {

    padding: 70px 0;

  }



  .governance-left {

    padding-right: 0;

  }



  .governance-right {

    padding-left: 0px;

  }



  .strength-item {

    border-radius: 24px;

  }

}



@media (max-width: 767px) {

  .governance-execution-sec {

    padding: 60px 0;

  }



  .governance-right {

    border-left-width: 3px;

    padding-left: 0px;

  }



  .strength-top {

    margin-bottom: 40px;

  }



  .strength-item {

    gap: 16px;

    padding: 18px;

    border-radius: 18px;

  }



  .strength-icon {

    width: 42px;

    height: 42px;

    font-size: 24px;

  }



  .strength-item p {

    font-size: 14px;

    line-height: 1.6;

  }

}



.divider {

  position: absolute;

  top: 50%;

  right: 0;

  width: 3px;

  height: 122px;

  background: #148f08;

  content: "";

  transform: translate(-50%, -50%);

}



.competitive-sec {

  background: #f5f5f5;

  overflow: hidden;

}



/* Image */

.competitive-img {

  position: relative;

  height: 100%;

}



.competitive-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



/* Content */

.competitive-content {

  padding: 80px 90px;

}



/* Responsive */

@media (max-width: 1399px) {

  .competitive-content {

    padding: 70px 60px;

  }

}



@media (max-width: 1199px) {

  .competitive-content {

    padding: 60px 40px;

  }

}



@media (max-width: 991px) {

  .competitive-img {

    height: 420px;

  }



  .competitive-content {

    max-width: 100%;

    padding: 60px 30px;

  }

}



@media (max-width: 767px) {

  .competitive-img {

    height: 280px;

  }



  .competitive-content {

    padding: 40px 20px;

  }

}



.sil-africa-sec {

  position: relative;

  overflow: hidden;

  padding: 110px 0 60px;

  z-index: 1;

}



/* Background */

.sil-africa-bg {

  position: absolute;

  inset: 0;

  z-index: -2;

  max-height: 580px;

}



.sil-africa-bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Overlay */

/* .sil-africa-overlay {

    position: absolute;

    inset: 0;

    background: rgba(6, 10, 40, 0.72);

    z-index: -1;

} */



/* Wrapper */

.sil-africa-wrap {

  position: relative;

  min-height: 720px;

}



/* Left Image */

.sil-africa-img {

  width: 58%;

  border-radius: 28px;

  overflow: hidden;

  position: relative;

  z-index: 1;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);

}



.sil-africa-img img {

  width: 100%;

  max-height: 610px;

  object-fit: cover;

  display: block;

}



/* Content Box */

.sil-africa-content {

  position: absolute;

  right: 0;

  bottom: 40px;

  width: 52%;

  background: #fff;

  border: 2px solid #148f08;

  border-radius: 24px;

  padding: 55px;

  z-index: 2;

  box-shadow: 0px 37px 15.8px -29px #00000040;

}



.client-centric-sec {

  position: relative;

  background: linear-gradient(

    to bottom,

    #ffffff 0%,

    #ffffff 18%,

    #f5f6ef 18%,

    #f5f6ef 82%,

    #ffffff 82%,

    #ffffff 100%

  );

  overflow: hidden;

}



/* Left */

.client-centric-content {

  max-width: 760px;

}



.client-centric-content .join-heading {

  margin-bottom: 30px;

}



/* Button */

.client-btn-wrap {

  margin-top: 25px;

}



/* Right Image */

.client-centric-img {

  text-align: center;

}



.client-centric-img img {

  max-width: 100%;

  height: auto;

  display: inline-block;

}



.digital-capability-sec {

  overflow: hidden;

  padding: 60px 0;

}



/* Slider */



/* Card */

.dc-card {

  position: relative;

  overflow: hidden;

  border-radius: 18px;

  height: 620px;

  cursor: pointer;

}



/* Background */

.dc-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.6s ease;

}



.dc-card:hover .dc-bg {

  transform: scale(1.08);

}



/* Overlay */

/* .dc-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0, 8, 61, 0.39) 55.68%, #090628 100%);



} */



/* Default Content */

.dc-default {

  position: absolute;

  left: 35px;

  right: 35px;

  bottom: 35px;

  z-index: 2;

  transition: 0.4s ease;

}



.dc-default h3 {

  color: #fff;

  font-size: 22px;

  line-height: 1.45;

  margin-bottom: 20px;

  font-weight: 400;

  font-family: var(--work-sans);

}



/* Hover Content */

.dc-hover {

  position: absolute;

  left: 35px;

  right: 35px;

  bottom: 35px;

  z-index: 3;



  opacity: 0;

  visibility: hidden;

  transform: translateY(30px);



  transition: 0.45s ease;

}



.dc-hover h3 {

  color: #fff;

  font-size: 22px;

  line-height: 1.45;

  margin-bottom: 20px;

  font-weight: 400;

  font-family: var(--work-sans);

}



.dc-hover p {

  color: #fff;



  font-size: 16px;

  line-height: 1.6;

  margin: 0;

  font-family: var(--roboto);

  font-weight: 300;

}



/* Hover Effect */

.dc-card:hover .dc-default {

  opacity: 0;

  visibility: hidden;

  transform: translateY(20px);

}



.dc-card:hover .dc-hover {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



/* Navigation */

.dc-nav {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 10;

  width: 60px;

  height: 60px;

  border-radius: 50%;

  border: none;

  background: #fff;

  color: var(--orange);

  border: 1px solid var(--orange);

  font-size: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);

  transition: var(--transition);

}



.dc-nav:hover {

  background: var(--orange);

  color: #fff;

}



.dc-prev {

  left: 0px;

}



.dc-next {

  right: 0px;

}



/* Pagination */

.dc-pagination {

  position: relative;

  margin-top: 40px;

}



.dc-pagination .swiper-pagination-bullet {

  width: 12px;

  height: 12px;

  background: #f94d007d;

  opacity: 1;

}



.dc-pagination .swiper-pagination-bullet-active {

  background: var(--text);

}



.cybersecurity-sec {

  background: #fff;

  overflow: hidden;

}



/* Heading */

.cybersecurity-top {

  margin-bottom: 70px;

}



/* Column */

.cybersecurity-column {

  display: flex;

  flex-direction: column;

  gap: 42px;

  height: 100%;

  position: relative;

}



/* Center Divider */

.cyber-right-border {

  padding-left: 60px;

}



/* Item */

.cyber-item {

  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 22px;

}



/* Individual Divider */

.cyber-right-border .cyber-item::before {

  content: "";

  position: absolute;

  left: -50px;

  top: 50%;

  transform: translateY(-50%);

  width: 3px;

  height: 88%;

  background: #17a329;

  border-radius: 30px;

}



/* Item */

.cyber-item {

  display: flex;

  align-items: flex-start;

  gap: 22px;

}



/* Icon */

.cyber-icon {

  width: 50px;

  height: 50px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.cyber-icon img {

  width: 100%;

}



/* Content */

.cyber-content h3 {

  color: #111;

  font-size: 22px;

  line-height: 1.5;

  font-weight: 600;

  margin-bottom: 8px;

  font-family: var(--work-sans);

}



.cyber-content h3 span {

  color: var(--orange);

}



.cyber-content p {

  margin: 0;

  color: var(--text);

  font-size: 16px;

  line-height: 1.9;

  font-family: var(--roboto);

}



.cyber-solution-sec {

  background: #d9d9d933;

  overflow: hidden;

}



/* Card */

.cyber-solution-card {

  border: 1.5px solid var(--orange);

  border-radius: 18px;

  padding: 38px 34px;

  height: 100%;

  background: #fff;

  transition: var(--transition);

}



.cyber-solution-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);

}



/* Heading */

.cyber-solution-card h3 {

  color: var(--text);

  font-size: 24px;

  line-height: 1.5;

  font-weight: 600;

  margin-bottom: 24px;

  font-family: var(--work-sans);

}



.cyber-solution-card h3 span {

  color: var(--orange);

}



/* Paragraph */

.cyber-solution-card p {

  margin: 0;

  color: #17132f;

  font-size: 18px;

  line-height: 1.8;

  font-family: var(--roboto);

}



.cyber-small-text {

  margin-bottom: 26px !important;

}



/* List */

.cyber-list {

  padding: 0;

  margin: 0;

  list-style: none;

}



.cyber-list li {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 8px 0;

  border-top: 1px solid rgba(0, 0, 0, 0.08);

}



.cyber-list li:first-child {

  border-top: 0;

  padding-top: 0;

}



/* Icon */

.cyber-list li i {

  color: #19a52f;

  font-size: 24px;

  flex-shrink: 0;

  margin-top: 2px;

}



/* Text */

.cyber-list li span {

  color: var(--text);

  font-size: 15px;

  line-height: 1.6;

  font-family: var(--roboto);

}



.cyber-list.data-list span {

  font-weight: 600;

}



.cyber-solution .ind-grid {

  grid-template-columns: repeat(5, 1fr);

}



.cyber-solution .ind-grid .ind-card {

  border: 1px solid #090628;

}



/* Feature Box */

.operation-feature-box {

  background: var(--text);

  border-radius: 10px;

  padding: 34px 40px;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);

}



/* Heading */

.operation-feature-box h3 {

  color: #fff;

  font-size: 30px;

  margin-bottom: 18px;

  font-weight: 500;

  font-family: var(--work-sans);

}



/* List */

.operation-feature-box ul {

  padding: 0;

  margin: 0;

  list-style: none;

}



.operation-feature-box ul li {

  position: relative;

  padding-left: 28px;

  margin-bottom: 10px;



  color: #fff;

  font-size: 17px;

  line-height: 1.7;

  font-weight: 500;

  font-family: var(--roboto);

}



.operation-feature-box ul li:last-child {

  margin-bottom: 0;

}



/* Arrow */

.operation-feature-box ul li::before {

  content: "➜";

  position: absolute;

  left: 0;

  top: 0;

  color: #fff;

  font-size: 15px;

}



.cybersecurity-cta-sec {

  position: relative;

  overflow: hidden;

  padding: 60px 0;

  z-index: 1;

}



/* Background */

.cybersecurity-cta-bg {

  position: absolute;

  inset: 0;

  z-index: -2;

}



.cybersecurity-cta-bg img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Overlay */

.cybersecurity-cta-overlay {

  position: absolute;

  inset: 0;

  background: rgba(7, 0, 45, 0.82);

  z-index: -1;

}



/* Content */

.cybersecurity-cta-content {

  max-width: 1400px;

  margin: 0 auto;

}



.cybersecurity-cta-content h2 {

  color: #fff;

  font-size: 46px;

  line-height: 1.25;

  font-weight: 600;

  margin-bottom: 30px;

  font-family: var(--work-sans);

}



.cybersecurity-cta-content p {

  color: rgba(255, 255, 255, 0.92);

  font-size: 18px;

  line-height: 1.7;

  margin-bottom: 10px;

  font-family: var(--roboto);

  font-weight: 400;

}



.cybersecurity-cta-content p:last-of-type {

  margin-bottom: 0;

}



/* Button */

.cybersecurity-cta-btn {

  margin-top: 30px;

}



.contact-consultation-sec {

  background: #fff;

  overflow: hidden;

}



/* ===================================

   LEFT INFO BOX

=================================== */



.contact-info-box {

  background: #090021;

  border-radius: 10px;

  padding: 50px 36px;

  height: 100%;

}



.contact-info-box h2 {

  font-family: var(--work-sans);

  font-size: clamp(30px, 3vw, 44px);

  font-weight: 600;

  color: #fff;

  line-height: 1.42;

  letter-spacing: -0.02em;

  margin: 0;

  text-transform: capitalize;

  margin-bottom: 15px;

}



.contact-info-text {

  color: rgba(255, 255, 255, 0.82);

  font-size: 16px;

  line-height: 1.9;

  margin-bottom: 40px;

  font-family: var(--roboto);

}



/* Item */

.contact-info-item {

  display: flex;

  align-items: flex-start;

  gap: 18px;

  margin-bottom: 28px;

}



/* Icon */

.contact-info-item .icon {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background: #fff;

  color: var(--orange);



  display: flex;

  align-items: center;

  justify-content: center;



  font-size: 18px;

  flex-shrink: 0;

}



/* Content */

.contact-info-item .content span {

  display: block;

  color: #fff;

  font-size: 18px;

  margin-bottom: 6px;

  font-weight: 600;

  font-family: var(--work-sans);

}



.contact-info-item .content a,

.contact-info-item .content p {

  margin: 0;

  color: rgba(255, 255, 255, 0.85);

  font-size: 15px;

  line-height: 1.8;

  text-decoration: none;

  font-family: var(--roboto);

}



/* Divider */

.contact-divider {

  width: 100%;

  height: 1px;

  background: rgba(255, 255, 255, 0.1);

  margin: 34px 0;

}



/* Social */

.contact-social-wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;

}



.contact-social-wrap h4 {

  color: #fff;

  font-size: 20px;

  margin: 0;

  font-family: var(--work-sans);

}



.contact-social {

  display: flex;

  align-items: center;

  gap: 12px;

}



.contact-social a {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #fff;

  color: var(--orange);



  display: flex;

  align-items: center;

  justify-content: center;



  text-decoration: none;

  transition: var(--transition);

}



.contact-social a:hover {

  background: var(--orange);

  color: #fff;

}



/* ===================================

   FORM BOX

=================================== */



.consultation-form-box {

  border: 2px solid #1fa12e;

  border-radius: 16px;

  padding: 42px;

  background: #fdf7f2;

}



/* Input */

.consultation-form-box input,

.consultation-form-box textarea {

  width: 100%;

  border: 1px solid #d8d8d800;

  outline: none;

  background: #fff;

  border-radius: 10px;

  padding: 0 20px;

  color: #17132f;

  font-size: 16px;

  font-family: var(--roboto);

}



.consultation-form-box input {

  height: 62px;

}



.consultation-form-box textarea {

  height: 140px;

  resize: none;

  padding-top: 18px;

}



/* Checkbox */

.consultation-check {

  display: flex;

  align-items: center;

  gap: 10px;

}



.consultation-check input {

  width: 18px;

  height: 18px;

  margin: 0;

  border: 1px solid #d8d8d8;

}



.consultation-check label {

  font-family: var(--work-sans);

  font-size: 15.5px;

  color: #555;

  line-height: 1.5;

  cursor: pointer;

}



.consultation-check label strong {

  color: var(--text);

}



.consultation-form-box input:focus,

.consultation-form-box textarea:focus {

  border-color: var(--orange) !important;

  box-shadow: 0 0 0 3px rgba(249, 77, 0, 0.1);

}



.location-map-sec {

  background: #fdf7f2;

  overflow: hidden;

  padding: 80px 0 0 0;

}



/* Map */

.location-map-wrap {

  width: 100%;

  line-height: 0;

}



.location-map-wrap iframe {

  width: 100%;

  height: 650px;

  border: 0;

  display: block;

  filter: grayscale(0%);

}



.evp-sec {

  background: #f6f6f6;

  overflow: hidden;

}



/* Card */

.evp-card {

  background: #fff;

  border-radius: 12px;

  padding: 26px 24px;

  height: 100%;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);

  transition: var(--transition);

}



.evp-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);

}



/* Tall Card */

.tall-card {

  min-height: 100%;

}



/* Icon */

.evp-icon {

  width: 50px;

  min-width: 50px;

}



.evp-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



/* Heading */

.evp-card h3 {

  color: #17132f;

  font-size: 24px;

  line-height: 1.5;

  margin-bottom: 14px;

  font-weight: 700;

  font-family: var(--work-sans);

}



/* Text */

.evp-card p {

  margin: 0;

  color: #17132f;

  font-size: 16px;

  line-height: 1.6;

  font-family: var(--roboto);

}



/* Image */

.evp-sec .row.align-items-stretch > div {

  display: flex;

}



.evp-image {

  width: 100%;

  height: 100%;

  min-height: 100%;

  border-radius: 14px;

  overflow: hidden;

  position: relative;

}



.evp-image img {

  width: 100%;

  height: 100%;

  min-height: 100%;

  object-fit: cover;

  transition: 0.5s ease;

  box-shadow: 0px 4px 31.5px -14px #4125198f;

}



/* Optional overlay */

.evp-image::before {

  content: "";

  position: absolute;

  inset: 0;

  background: #090628;

  opacity: 0.7;

  z-index: 1;

}



.evp-image:hover img {

  transform: scale(1.06);

}



.career-opening-sec {

  background: #f7f7f7;

  overflow: hidden;

}



/* ===================================

   JOB CARD

=================================== */



.career-job-wrap {

  display: flex;

  flex-direction: column;

  gap: 18px;

}



.career-job-card {

  background: #fff;

  border: 1px solid #138707;

  border-radius: 10px;

  padding: 26px 24px;

  transition: var(--transition);

}



.career-job-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);

}



.career-job-card h3 {

  font-size: clamp(18px, 1.5vw, 24px);

  line-height: 1.4;

  margin-bottom: 18px;

  color: var(--text);

  font-weight: 600;

  font-family: var(--work-sans);

}



/* Meta */

.career-job-meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 22px;

  padding: 0;

  margin: 0 0 18px;

  list-style: none;

}



.career-job-meta li {

  display: flex;

  align-items: center;

  gap: 7px;



  color: #17132f;

  font-size: 15px;

  font-weight: 500;

  font-family: var(--roboto);

}



.career-job-meta li i {

  color: var(--orange);

  font-size: 15px;

}



.career-job-desc {

  overflow: hidden;

  transition: max-height 0.4s ease;

}



.career-job-card p {

  margin: 0;



  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;



  overflow: hidden;



  color: var(--text);

  font-size: clamp(15px, 1vw, 16px);

  line-height: 1.6;

  font-family: var(--roboto);

}



/* Expanded */

.career-job-card.active .career-job-desc p {

  -webkit-line-clamp: unset;

  overflow: visible;

}



/* Bottom */

.career-job-bottom {

  margin-top: 22px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 18px;

  flex-wrap: wrap;

}



.career-view-btn {

  color: var(--text);

  font-size: 16px;

  font-weight: 500;

  text-decoration: none;

  font-family: var(--work-sans);

  border: none;

  outline: none;

  background-color: transparent;

}



.career-view-btn:hover {

  color: var(--orange);

}



/* ===================================

   FORM

=================================== */



.career-form-box {

  background: #fff;

  border: 1px solid #138707;

  border-radius: 12px;

  padding: 34px 32px;

  /* height: 100%; */

}



.career-form-box h2 {

  color: var(--text);

  font-size: clamp(24px, 2vw, 30px);

  margin-bottom: 30px;

  padding-bottom: 14px;

  border-bottom: 1px solid #138707;

  font-weight: 600;

  font-family: var(--work-sans);

  line-height: 1.4;

}



/* Group */

.career-form-group {

  margin-bottom: 26px;

}



.career-form-group input, .career-form-group select,

.career-form-group textarea {

  width: 100%;

  border: none;

  border-bottom: 1px solid #d9d9d9;

  outline: none;

  background: transparent;



  color: #17132f;

  font-size: 15px;



  padding: 0 0 12px;

  font-family: var(--roboto);

}



.career-form-group textarea {

  height: 90px;

  resize: none;

}



/* Upload */

.upload-group {

  display: flex;

  align-items: center;

  justify-content: space-between;
  flex-wrap: wrap;

  gap: 20px;

}



.upload-group label {

  color: #555;

  font-size: 15px;

}



.upload-group label span {

  color: var(--orange);

}



.upload-field {

  position: relative;

}



/* .upload-field input {

  display: none;

} */



.upload-btn {

  height: 42px;

  padding: 0 20px;

  background: #222;

  color: #fff !important;

  border-radius: 4px;

  cursor: pointer;



  display: inline-flex;

  align-items: center;

  justify-content: center;



  font-size: 14px;

}



/* Submit */

.career-submit-btn {

  width: 100%;

  padding: 15px 0;

  border: none;

  border-radius: 50px;



  background: var(--orange);

  color: #fff;



  font-size: 16px;

  font-weight: 600;



  transition: var(--transition);

}



.career-submit-btn:hover {

  background: var(--orange);

}



.career-testimonial-sec {

  background: var(--text);

  overflow: hidden;

}



/* Left */

.career-testimonial-content .join-heading {

  margin-bottom: 22px;

}



.career-testimonial-content .alt-body {

  max-width: 360px;

}



/* Slider */

.career-testimonial-slider-wrap {

  position: relative;

}



.careerTestimonialSwiper .swiper-wrapper {

  align-items: stretch;

}



.careerTestimonialSwiper .swiper-slide {

  height: auto;

  display: flex;

}



/* Card Full Height */

.career-testimonial-card {

  height: 100%;

  width: 100%;

}



/* Card */

.career-testimonial-card {

  background: #f8f5f2;

  border-radius: 16px;

  padding: 34px 28px;

  height: 100%;

  /* min-height: 320px; */



  display: flex;

  flex-direction: column;

}



/* User */

.career-user {

  width: 58px;

  height: 58px;

  border-radius: 50%;

  overflow: hidden;

  margin-bottom: 22px;

  background: #ddd;

}



.career-user img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* Text */

.career-testimonial-card p {

  color: #17132f;

  font-size: clamp(16px, 1vw, 18px);

  line-height: 1.6;

  margin-bottom: 18px;

  flex-grow: 1;

  font-family: var(--work-sans);

  font-style: italic;

}



/* Name */

.career-testimonial-card h4 {

  margin: 0;

  color: var(--text);

  font-size: clamp(20px, 1.2vw, 24px);

  font-weight: 600;

  font-family: var(--work-sans);

}



/* Bottom */

.career-testimonial-bottom {

  margin-top: 34px;



  display: flex;

  align-items: center;

  justify-content: space-between;

}



/* Pagination */

.career-testimonial-pagination {

  display: flex;

  align-items: center;

  gap: 8px;

}



.career-testimonial-pagination .swiper-pagination-bullet {

  width: 24px;

  height: 4px;

  border-radius: 30px;

  background: #fff;

  opacity: 0.3;

  margin: 0 !important;

  transition: var(--transition);

}



.career-testimonial-pagination .swiper-pagination-bullet-active {

  background: #19b42b;

  opacity: 1;

}



/* Nav */

.career-testimonial-nav {

  display: flex;

  align-items: center;

  gap: 12px;

}



.career-testimonial-prev,

.career-testimonial-next {

  width: 52px;

  height: 52px;

  border-radius: 50%;



  display: flex;

  align-items: center;

  justify-content: center;



  cursor: pointer;

  transition: var(--transition);



  font-size: 18px;

}



.career-testimonial-prev {

  border: 1px solid rgba(255, 255, 255, 0.4);

  color: #fff;

}



.career-testimonial-next {

  background: var(--orange);

  color: #fff;

}



.career-testimonial-prev:hover,

.career-testimonial-next:hover {

  transform: translateY(-3px);

}



.culture-gallery-sec {

  background: #f7f7f7;

  overflow: hidden;

  position: relative;

}



/* Slider Wrap */

.culture-gallery-slider-wrap {

  position: relative;

  padding: 0 42px;

}



/* Swiper */



/* Equal Height */

.cultureGallerySwiper .swiper-wrapper {

  align-items: stretch;

  padding-bottom: 20px;

}



.cultureGallerySwiper .swiper-slide {

  height: auto;

  display: flex;

}



/* Item */

.culture-gallery-item {

  width: 100%;

  height: 100%;

  min-height: 300px;



  border-radius: 14px;

  overflow: hidden;

  position: relative;

  box-shadow: 0px 4px 14.9px 0px #00000040;

}



.culture-gallery-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;



  transition: 0.5s ease;

  max-width: 400px;

}



.culture-gallery-item:hover img {

  transform: scale(1.06);

}



/* Navigation */

.culture-gallery-prev,

.culture-gallery-next {

  position: absolute;

  top: 45%;

  transform: translateY(-50%);

  z-index: 3;



  width: 54px;

  height: 54px;

  border-radius: 50%;



  display: flex;

  align-items: center;

  justify-content: center;



  cursor: pointer;

  transition: var(--transition);



  font-size: 18px;

}



.culture-gallery-prev {

  left: -28px;

  border: 1px solid var(--text);

  background: #fff;

  color: var(--text);

}



.culture-gallery-next {

  right: -28px;

  background: var(--orange);

  color: #fff;

}



.culture-gallery-prev:hover,

.culture-gallery-next:hover {

  transform: translateY(-50%) scale(1.06);

}



/* Pagination */

.culture-gallery-pagination {

  margin-top: 34px;



  display: flex;

  justify-content: center;

  align-items: center;

  gap: 8px;

}



.culture-gallery-pagination .swiper-pagination-bullet {

  width: 18px;

  height: 4px;

  border-radius: 30px;



  background: #17132f;

  opacity: 0.3;

  margin: 0 !important;



  transition: var(--transition);

}



.culture-gallery-pagination .swiper-pagination-bullet-active {

  background: var(--orange);

  opacity: 1;

}



.platform-capability-sec {

  overflow: hidden;

}



/* =========================

   LEFT

========================= */



.platform-left {

  background: #090028;

  height: 100%;

  padding: 90px 7%;

}



.platform-left-inner {

  max-width: 680px;

  margin-left: auto;

}



.platform-left .join-heading {

  margin-bottom: 40px;

}



/* Image */

.platform-main-img {

  border-radius: 18px;

  overflow: hidden;

  margin-bottom: 34px;

  border: 2px solid rgba(255, 255, 255, 0.18);

}



.platform-main-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;



  transition: 0.6s ease;

}



.platform-main-img:hover img {

  transform: scale(1.06);

}



/* Content */

.platform-left-content {

  margin-bottom: 36px;

}



.platform-left-content .alt-body {

  margin-bottom: 18px;

}



/* Bottom */

.platform-bottom {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

}



.platform-user {

  width: 60px;

  height: 60px;

  overflow: hidden;

}



.platform-user img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.platform-bottom p {

  margin: 0;

  font-size: 18px;

  font-weight: 500;

  color: #fff;

  font-family: var(--work-sans);

}



.platform-bottom a {

  color: var(--orange);

  font-weight: 700;

  text-decoration: underline;

}



/* =========================

   RIGHT

========================= */



.platform-right {

  background: #f8f2ec;

  height: 100%;

  padding: 90px 7%;

  position: relative;

}



.platform-right::before {

  content: "";

  position: absolute;

  inset: 0;



  background:

    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),

    url("./assets/images/platform-bg.png");



  background-size: cover;

  background-position: center;

  opacity: 0.35;

}



.platform-right-inner {

  position: relative;

  z-index: 2;

  max-width: 680px;

}



.platform-right .join-heading {

  margin-bottom: 42px;

}



/* Feature */

.platform-feature-wrap {

  display: flex;

  flex-direction: column;

  gap: 26px;

}



.platform-feature-item {

  display: flex;

  align-items: center;

  gap: 18px;

  padding-bottom: 26px;

  border-bottom: 1px solid rgba(50, 180, 60, 0.45);

}



.platform-feature-item:last-child {

  border-bottom: none;

  padding-bottom: 0;

}



/* Icon */

.platform-feature-icon {

  width: 72px;

  min-width: 72px;

  height: 72px;



  border-radius: 14px;

  background: #fff;



  display: flex;

  align-items: center;

  justify-content: center;



  box-shadow: 0px 4px 4px 0px #00000040;

}



.platform-feature-icon img {

  width: 42px;

  height: 42px;

  object-fit: contain;

}



/* Content */

.platform-feature-content h3 {

  font-size: clamp(18px, 1.4vw, 24px);

  line-height: 1.4;

  margin-bottom: 5px;

  color: #17132f;

  font-weight: 600;

  font-family: var(--work-sans);

}



.platform-feature-content p {

  margin: 0;

  color: var(--text);

  font-size: clamp(14px, 1vw, 16px);

  line-height: 1.46;

  font-family: var(--roboto);

}



.integration-solution-sec {

  background: #f7faf5;

  overflow: hidden;

  position: relative;

}



/* =========================

   TOP

========================= */



.integration-top-row {

  margin-bottom: 70px;

}



.integration-top-left {

  padding-right: 40px;

}



/* .integration-top-left .join-heading {

  font-size: clamp(30px, 3vw, 38px);

} */



.integration-top-right {

  border-left: 2px solid #5ec66d;

  padding-left: 28px;

}



.integration-top-right .alt-body {

  margin-bottom: 18px;

}



.integration-top-right .alt-body:last-child {

  margin-bottom: 0;

}



/* =========================

   SLIDER

========================= */



.integration-slider-wrap {

  position: relative;

}



/* Equal Height */

.integrationSolutionSwiper .swiper-wrapper {

  align-items: stretch;

  padding: 30px 0;

}



.integrationSolutionSwiper .swiper-slide {

  height: auto;

  display: flex;

}



/* Card */

.integration-card {

  background: #090028;

  border-radius: 10px;

  padding: 34px 26px;

  width: 100%;

  min-height: 100%;



  display: flex;

  flex-direction: column;



  transition: var(--transition);

}



.integration-card:hover {

  transform: translateY(-6px);

}



/* Icon */

.integration-icon {

  width: 58px;

  height: 58px;

  margin-bottom: 26px;

}



.integration-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



/* Title */

.integration-card h3 {

  color: #fff;

  font-size: clamp(18px, 1.2vw, 20px);

  line-height: 1.4;

  margin-bottom: 18px;

  font-weight: 600;

  font-family: var(--work-sans);

}



/* Content */

.integration-card p {

      margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: clamp(15px, 1vw, 16px);

    line-height: 1.6;

    font-family: var(--roboto);

    flex-grow: 1;

}



/* =========================

   NAVIGATION

========================= */



.integration-prev,

.integration-next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  z-index: 5;



  width: 54px;

  height: 54px;

  border-radius: 50%;



  display: flex;

  align-items: center;

  justify-content: center;



  cursor: pointer;

  transition: var(--transition);



  font-size: 18px;

}



.integration-prev {

  left: -32px;

  background: #fff;

  color: var(--orange);

  border: 1px solid var(--orange);

}



.integration-next {

  right: -32px;

  background: var(--orange);

  color: #fff;

}



.integration-prev:hover,

.integration-next:hover {

  transform: translateY(-50%) scale(1.08);

}



.integration-pagination {

  display: none;

  justify-content: center;

  align-items: center;

  gap: 8px;



  margin-top: 28px;

}



.integration-pagination .swiper-pagination-bullet {

  width: 18px;

  height: 4px;

  border-radius: 30px;



  background: #17132f;

  opacity: 0.25;

  margin: 0 !important;



  transition: var(--transition);

}



.integration-pagination .swiper-pagination-bullet-active {

  background: var(--orange);

  opacity: 1;

}



.analytics-capabilities-sec {

  background: #f7f7f7;

  overflow: hidden;

}



/* Wrap */

.analytics-wrap {

  display: flex;

  flex-direction: column;

}



/* Item */

.analytics-item {

  width: 100%;

  /* border: 1.5px solid #44b95b;



    border-radius: 0 120px 120px 0; */



  padding: 34px 44px;

  background: transparent;



  position: relative;

}



.analytics-item-right {

  border-right: 3px solid var(--orange);

  border-bottom: 0;

  border-left: 0;

  border-radius: 0 120px 120px 0;

}



.analytics-item-right:first-child {

  border-top: 1px solid var(--orange);

}



.analytics-item-right:last-child {

  border-bottom: 1px solid var(--orange);

}



.analytics-item-right::before {

  content: "";

  position: absolute;

  right: 116px;

  top: -1px;

  width: 84%;

  height: 2px;

  background: var(--orange);

}



.analytics-item-right:first-child::before {

  display: none;

}



.analytics-item-left {

  /* border-top: 1px solid var(--orange); */

  border-right: 0;

  border-bottom: 0;

  border-left: 3px solid var(--orange);

  position: relative;

}



.analytics-item-left::before {

  content: "";

  position: absolute;

  left: 116px;

  top: -1px;

  width: 84%;

  height: 2px;

  background: var(--orange);

}



/* Alternate */

.analytics-item-left {

  border-radius: 120px 0 0 120px;

}



/* Content */

.analytics-content {

  margin-left: 60px;

}



.analytics-content h3 {

  color: var(--text);

  font-size: clamp(24px, 2vw, 40px);

  line-height: 1.4;

  margin-bottom: 10px;

  font-weight: 700;

  font-family: var(--work-sans);

}



.analytics-content h3 span {

  color: var(--orange);

}



.analytics-content p {

  margin-bottom: 20px;



  color: #17132f;

  font-size: clamp(14px, 1vw, 15px);

  line-height: 1.9;



  font-family: var(--roboto);

}



.analytics-content .cyber-list li span {

  font-size: 16px;

}



.gcc-model-sec {

  background: #f7f7f7;

  overflow: hidden;

  padding-top: 0;

}



/* =========================

   GRID

========================= */



.gcc-model-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  column-gap: 20px;

  row-gap: 30px;

  position: relative;

}



/* =========================

   ITEM

========================= */



.gcc-model-item {

  display: flex;

  align-items: flex-start;

  gap: 22px;

  position: relative;

}



.gcc-model-item:nth-child(odd) {

  border-right: 2px solid var(--green);

}



/* Icon */

.gcc-check-icon {

  width: 48px;

  min-width: 48px;

}



.gcc-check-icon img {

  width: 100%;

  display: block;

}



/* Content */

.gcc-model-content h3 {

  color: var(--text);

  font-size: clamp(20px, 1.7vw, 28px);

  line-height: 1.4;

  margin-bottom: 10px;

  font-weight: 600;

  font-family: var(--work-sans);

}



.gcc-model-content h3 span {

  color: var(--orange);

}



.gcc-model-content p {

  margin: 0;



  color: #17132f;



  font-size: clamp(14px, 1vw, 15px);

  line-height: 1.8;



  font-family: var(--roboto);

}



.enterprise-cap-sec {

  background: #F6F6F6;

  overflow: hidden;

}



/* =========================

   CARD

========================= */



.enterprise-cap-card {

  background: #fff;



  border-radius: 10px;



  padding: 28px 24px;



  display: flex;

  align-items: flex-start;

  gap: 18px;



  height: 100%;



  box-shadow: 0px 4px 31.5px -14px #4125198f;

  border: 1px solid #f4f3f8;



  transition: var(--transition);

}



.enterprise-cap-card:hover {

  transform: translateY(-5px);

}



/* Icon */

.enterprise-cap-icon {

  width: 52px;

  min-width: 52px;

}



.enterprise-cap-icon img {

  width: 100%;

  display: block;

}



/* Content */

.enterprise-cap-content h3 {

  color: var(--text);



  font-size: clamp(22px, 1.5vw, 32px);

  line-height: 1.4;



  margin-bottom: 10px;



  font-weight: 700;

  font-family: var(--work-sans);

}



.enterprise-cap-content p {

  margin: 0;



  color: var(--text);



  font-size: clamp(14px, 1vw, 15px);

  line-height: 1.6;



  font-family: var(--roboto);

}





.customer-first-sec {

    overflow: hidden;

}



/* =========================

   CARD

========================= */



.customer-first-card {

    

    overflow: hidden;

    height: 100%;

    transition: var(--transition);

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.customer-first-card:hover {

    transform: translateY(-6px);

}



/* Image */

.customer-first-img {

       overflow: hidden;

    position: relative;

    z-index: 10;

    width: 90%;

}



.customer-first-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;



    transition: var(--transition);

}







/* Content */

.customer-first-content {

           padding: 60px 20px 22px;

    text-align: center;

    background: #090028;

    box-shadow: 0 6px 18px rgba(0,0,0,0.08);

    border-radius: 8px;

    z-index: 0;

    position: relative;

    margin-top: -45px;

    min-height: 250px;





}



.customer-first-content h3 {

            color: #fff;

    font-size: clamp(20px, 1.2vw, 28px);

    line-height: 1.4;

    margin-bottom: 14px;

    font-weight: 500;

    font-family: var(--work-sans);

}



.customer-first-content p {

           margin: 0;

    color: rgba(255,255,255,0.86);

    font-size: clamp(15px, 1vw, 16px);

    line-height: 1.8;

    font-family: var(--roboto);

}



/* =========================

   SIDE IMAGE

========================= */



.customer-first-side-img {

    height: 100%;

    min-height: 100%;



    border-radius: 10px;

    overflow: hidden;

}



.customer-first-side-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}







/* new css */

.infrastructure-sec {

    position: relative;

    overflow: hidden;

    padding: 60px 0;

    z-index: 1;

}



.infrastructure-sec-bg {

    position: absolute;

    inset: 0;

    z-index: -2;

}



.infrastructure-sec-bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}





/* Heading */

.infrastructure-top {

    margin-bottom: 70px;

}



/* infrastructure  features  box*/



.feature-section {

    position: relative;

}



.infrastructure-feature-block .inner-box {

    position: relative;

    display: block;

    z-index: 1;

    padding: 0px 40px;

    min-height: 471px;

}



.infrastructure-feature-block .inner-box:before {

    position: absolute;

    content: '';

    background: var(--text);

    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.05);

    border-radius: 10px;

    width: 100%;

    height: calc(100% - 98px);

    left: 0px;

    bottom: 0px;

    z-index: -1;

    transition: all 500ms ease;

}



.infrastructure-feature-block .inner-box .image-box {

    position: relative;

    display: block;

    overflow: hidden;

    border-radius: 10px;

    background: #090628;

}



.infrastructure-feature-block .inner-box .image-box img {

    width: 100%;

    border-radius: 10px;

    transition: all 500ms ease;

}



.infrastructure-feature-block .inner-box:hover .image-box img {

    opacity: 0.8;

    transform: scale(1.05);

}



.infrastructure-feature-block .inner-box .lower-content {

    position: relative;

    display: block;

    padding: 0px 20px 20px 20px;

    text-align: center;

    color: #fff;

}



.infrastructure-feature-block .inner-box .lower-content h3 {

    position: relative;

    display: block;

    font-size: 20px;

    line-height: 27px;

    font-weight: 600;

    margin-bottom: 11px;

    color: #fff;

}







.feature-block-one .inner-box .lower-content h3 a:hover {}



.feature-section .pattern-layer .pattern-1 {

    position: absolute;

    left: 0px;

    top: 0px;

    width: 669px;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

}



.feature-section .pattern-layer .pattern-2 {

    position: absolute;

    right: 0px;

    top: 0px;

    width: 669px;

    height: 100%;

    background-size: cover;

    background-repeat: no-repeat;

}



/* slider */

.business-outcomes-section {

    padding: 80px 0;

    background: #e8ede8;

    overflow: hidden;

}



.feature-slider {

    position: relative;

}



.feature-card {

       background: #090628;

    /* border-radius: 6px; */

    padding: 22px 18px;

    /* min-height: 300px; */

    transition: 0.3s;

    border-radius: 10px;

    display: flex;

    flex-direction: column;

    height: 100%;

}



.feature-card:hover {

    transform: translateY(-5px);

}



.feature-icon {

    margin-bottom: 18px;

}



.feature-icon img {

    width: 70px;

    height: 70px;

    object-fit: contain;

    filter: brightness(0) invert(1);

}



.feature-card h4 {

    color: #fff;

    font-size: 20px;

    font-weight: 500;

    margin-bottom: 14px;

    line-height: 1.3;

}



.feature-card p {

    color: #d5d5d5;

    font-size: 16px;

    line-height: 1.7;

}



/* Arrows */

.swiper-button-next,

.swiper-button-prev {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #fff;

    border: 1px solid #ff8f66;

    color: #ff8f66;

    position: absolute;

    top: 50%;

}



.swiper-button-next:after,

.swiper-button-prev:after {

    font-size: 16px;

    font-weight: 700;

}



.swiper-button-next {

    right: 0;

}



.swiper-button-prev {

    left: 0;

}







@media(max-width:767px) {



    .business-outcomes-section {

        padding: 60px 0;

    }



    



    .feature-card {

        min-height: auto;

    }



    .feature-card h4 {

        font-size: 16px;

    }



    .feature-card p {

        font-size: 13px;

    }



    .swiper-button-next,

    .swiper-button-prev {

        display: none;

    }

}





/* case studies */



.service-block-one  {

  display: flex;

  height: 100%;

}



.service-block-one .inner-box {

    position: relative;

    display: block;

    padding: 40px 55px 34px 55px;

    /* margin-bottom: 30px; */

    background: var(--text);

    box-shadow: 0px 20px 80px rgba(0, 0, 0, 0.05);

    border-radius: 10px;

    border-radius: 10px;

    text-align: center;

}



.service-block-one a {

    text-align: center;

    text-decoration: none;

    color: #fff;



}



.service-block-one .inner-box .icon-box {

    position: relative;

    display: inline-block;

    width: 80px;

    height: 80px;

    text-align: center;

    background: #fff;

    border-radius: 50%;

    margin-bottom: 26px;

}



.service-block-one .inner-box .icon-box img {

    width: 55px;

    height: auto;

    margin-top: 13px;

}



.service-block-one .inner-box h3 {

    font-size: 20px;

}



.service-block-one .sil-read-btn {}



/* news & updates */



/* Equal Height Columns */

.news-updates-row.row > div {

  display: flex;

}



/* Equal Height Box */

.news-updates-section .news-box {

  height: 100%;

  width: 100%;



  display: flex;

  flex-direction: column;

}



/* Content Stretch */

.news-updates-section .news-box .heading5 {

      flex: 1;

    display: flex;

    flex-direction: column;

    align-items: anchor-center;

    justify-content: space-between;

}



.news-updates-section .news-box {

       background-color: #fff;

    transition: all 0.4s;

    border-radius: 4px;

    border: none;

    /* margin-bottom: 30px; */

    /* height: 100%; */

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.news-updates-section .news-box .alt-btn-orange {
  text-align: center;
  justify-content: center;
}



.news-updates-section .news-box .image {

    overflow: hidden;

    border-radius: 4px 4px 0px 0px;

    height: 286px;

}



.news-updates-section .news-box .image img {

    transition: all 0.4s;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.news-updates-section .news-box:hover .image img {

    transition: all 0.4s;

    transform: scale(1.1) rotate(4deg);

}



.news-updates-section .news-box .heading5 {

    padding: 24px;

    box-shadow: rgba(0, 0, 0, 0.068) 0px 20px 30px;

    transition: all 0.3s ease-in-out;

    text-align: center;

}



.news-updates-section .news-box .heading5 .tags {

    display: inline-block;

    color: #081120;

    margin-bottom: 20px;

    text-decoration: none;

}



.news-updates-section .news-box .heading5 h4 {

    color: #081120;

    font-size: 20px;

    line-height: 27px;

    font-weight: 600;

    margin-bottom: 11px;

}



.news-updates-section .news-box .heading5 .tags img {

    width: 26px;

    height: auto;

}



.news-updates-section .news-box .heading5 p {

    margin-bottom: 30px;

}



.news-updates-section .news-box .learn {

    color: #fff;

    transition: all 0.4s;

    text-decoration: none;

    background: var(--orange);

    border-radius: 50px;

    padding: 6px 28px;

}



.news-updates-section .news-box:hover .learn {

    transition: all 0.4s;

    background: var(--orange);

    color: #fff;

    border: none;

    padding: 6px 50px;

}



.news-updates-section .theme-pagination ul {

    margin: 0;

    padding: 0;

    list-style: none;

}



.news-updates-section .theme-pagination li {

    display: inline-block;

}



.news-updates-section .theme-pagination li a {

    width: 55px;

    height: 55px;

    text-align: center;

    line-height: 55px;

    background: #F5F3F4;

    border-radius: 4px;

    margin: 0 4px;

    transition: all 0.3s;

    display: block;

    color: #000;

    font-weight: var(--f-fw-bold);

    text-decoration: none;

}



.news-updates-section .theme-pagination li a:hover,

.news-updates-section .theme-pagination li a.active {

    background: var(--orange);

    box-shadow: 0px 4px 10px rgba(122, 120, 198, 0.2);

    transition: all 0.3s;

    color: #ffffff;

}



.news-updates-section .theme-pagination li a svg {

    width: 35px;

}



.news-updates-section .theme-pagination li a svg:hover path,

.news-updates-section .theme-pagination li a svg.active path {

    background: var(--orange);

    box-shadow: 0px 4px 10px rgba(122, 120, 198, 0.2);

    transition: all 0.3s;

    fill: #ffffff;

    width: 20px;

}



.blog-detail-banner h1{

    font-size: 35px;

    font-weight: 500;

    line-height: 1.4;

    

}





.blog-details-sec {

    background: #f7f7f7;

    overflow: hidden;

}



.blog-details-sec {

    background: #f7f7f7;

    overflow: hidden;

}



/* =========================

   BANNER

========================= */



.blog-details-banner {

    border-radius: 16px;

    overflow: hidden;

    margin-bottom: 50px;

}



.blog-details-banner img {

    width: 100%;

    height: 620px;

    object-fit: cover;

    display: block;

}



/* =========================

   CONTENT

========================= */



.blog-details-content {

    background: #fff;

    border-radius: 14px;

    padding: 50px;



    box-shadow: 0 8px 24px rgba(0,0,0,0.05);

}



/* Meta */

.blog-details-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 24px;



    margin-bottom: 22px;

}



.blog-details-meta span {

    display: flex;

    align-items: center;

    gap: 8px;



    color: var(--orange);



    font-size: clamp(14px, 1vw, 15px);

    font-weight: 600;



    font-family: var(--roboto);

}



.blog-details-meta span i {

    font-size: 16px;

}



/* Title */

.blog-details-content h1 {

        color: var(--text);

    font-size: clamp(30px, 3vw, 36px);

    line-height: 1.3;

    margin-bottom: 16px;

    font-weight: 600;

    font-family: var(--work-sans);

}



/* Sub Heading */

.blog-details-content h2 {

            color: var(--text);

    font-size: clamp(24px, 2vw, 32px);

    line-height: 1.4;

    margin-top: 16px;

    margin-bottom: 10px;

    font-weight: 600;

    font-family: var(--work-sans);

}



/* Paragraph */

.blog-details-content p {

        color: var(--text);

    font-size: clamp(15px, 1vw, 17px);

    line-height: 2;

    margin-bottom: 5px;

    font-family: var(--roboto);

}



/* Highlight Box */

.blog-highlight-box {

    background: #090028;



    border-left: 5px solid var(--orange);

    border-radius: 12px;



    padding: 34px;



    margin: 40px 0;

}



.blog-highlight-box h4 {

        color: #fff;

    font-size: clamp(22px, 1.4vw, 30px);

    line-height: 1.4;

    margin-bottom: 14px;

    font-weight: 700;

    font-family: var(--work-sans);

}



.blog-highlight-box p {

    color: rgba(255,255,255,0.9);

    margin: 0;

}



/* Inner Image */

.blog-inner-img {

    border-radius: 14px;

    overflow: hidden;



    margin: 42px 0;

}



.blog-inner-img img {

    width: 100%;

    height: 500px;

    object-fit: cover;

    display: block;

}



/* Tags */

.blog-tags-wrap {

    margin-top: 50px;



    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

}



.blog-tags-wrap a {

    height: 42px;

    padding: 0 22px;



    border-radius: 50px;



    background: #f1f1f1;

    color: var(--text);

    font-family: var(--work-sans);



    text-decoration: none;



    display: inline-flex;

    align-items: center;

    justify-content: center;



    font-size: 14px;

    font-weight: 500;



    transition: var(--transition);

}



.blog-tags-wrap a:hover {

    background: var(--orange);

    color: #fff;

}



/* =========================

   RESPONSIVE

========================= */



@media (max-width: 1199px) {



    .blog-details-banner img {

        height: 520px;

    }



    .blog-inner-img img {

        height: 420px;

    }

}



@media (max-width: 991px) {



    .blog-details-content {

        padding: 36px 28px;

    }



    .blog-details-banner {

        margin-bottom: 34px;

    }



    .blog-details-banner img {

        height: 420px;

    }



    .blog-inner-img img {

        height: 340px;

    }

}



@media (max-width: 767px) {



    .blog-details-content {

        padding: 28px 20px;

    }



    .blog-details-banner img {

        height: 280px;

    }



    .blog-inner-img {

        margin: 30px 0;

    }



    .blog-inner-img img {

        height: 240px;

    }



    .blog-highlight-box {

        padding: 24px 20px;

    }



    .blog-tags-wrap {

        margin-top: 34px;

        gap: 10px;

    }

}



.cv-link {

  color: var(--orange);

}



.blog-detail-banner ul{

  display: none;

}



span#cfAgree {

    border: 0;

    margin-right: 10px;

}

.contact-card p{

  margin-bottom: 0rem;

}



.contact-card .cf-check-wrap {

    position: relative;

}

.contact-card .cf-check-wrap label.conatct-conditions{

  position: absolute;

    top: 0;

    left: 20px;

}

.contact-card .cf-check-wrap .wpcf7-list-item {

    margin: 0 0 0 0em;

}

.common-contact-form .wpcf7-response-output {

    color: #fff;

}





 /* Hide default file text */

.custom-file {

    /* color: transparent; */

    /* width: 100%; */

}



.upload-field {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    /* border-top: 1px solid #ddd; */

    padding-top: 25px;

}



.upload-field label {

    font-size: 18px;

    color: #555;

}



.upload-field label span {

    color: red;

}



/* Hide original text */

.custom-file {

    /* color: transparent; */

    /* max-width: 140px; */

}



.custom-file::-webkit-file-upload-button {

    visibility: hidden;

}



.custom-file::before {

    content: 'Choose File';

    display: inline-block;

    background: #222;

    color: #fff;

    padding: 12px 12px;

    border-radius: 4px;

    cursor: pointer;

    font-size: 16px;

    font-weight: 500;

    white-space: nowrap;

}



.custom-file:hover::before {

    background: #000;

}

.career-form-group .upload-field input {

border-bottom: 0px;

}
.sticky-content {
 position: sticky;
    top: 100px;
}


.content-body h4{
  color: var(--text);
  font-weight: 500;
  font-size: 28px;
}

.content-body h4 span{
  color: var(--orange);
}

.content-body ul {
  font-weight: 400;
}

.content-body ul li{
  font-size: 18px;


}

.timeline{
    position:relative;
    max-width:900px;
    margin:auto;
}
 
.timeline::before{
    content:"";
    position:absolute;
    left:14px;
    top:0;
    width:3px;
    height:100%;
    background:#ddd;
}
 
.timeline-progress{
    position:absolute;
    left:14px;
    top:0;
    width:3px;
    height:0;
    background:var(--orange);
    transition:height .15s linear;
}
 
.timeline-item{
    position:relative;
    padding-left:60px;
        margin-bottom: 35px;
}
 
.timeline-dot{
    position:absolute;
    left:6px;
    top:12px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#ddd;
    transition:.3s;
}
 
.timeline-item.active .timeline-dot{
    background:var(--orange);
    transform:scale(1.2);
}
 
.content-body{
    background:#fff;
}
 
.content-body h4{
    margin-bottom:15px;
}
 
.content-body span{
    color:#f58220;
}
 
@media (max-width:576px){
  .content-body h4 {
    font-size: 22px;
  }
}