:root {



  --navy-950: #060e21;



  --navy-900: #0a1f44;



  --navy-800: #0f2a5c;



  --navy-700: #163b78;



  --slate-600: #1c3f6e;



  --slate-500: #234b82;



  --slate-400: #2f5c99;



  --gray-50:  #f7f9fc;



  --gray-100: #f4f6f9;



  --gray-200: #e8ecf3;



  --gray-300: #d6dceb;



  --gray-500: #7c8aa5;



  --gray-700: #4a5670;



  --ink: #10182b;



  --white: #ffffff;



  --blue-500: #5aa5ff;



  --blue-400: #8ac2ff;



  --blue-050: #eef5ff;



  --ver-purple: #4b02ca;







  --font-head: 'Poppins', sans-serif;



  --font-body: 'Inter', sans-serif;







  --radius-sm: 8px;



  --radius-md: 14px;



  --radius-lg: 22px;



  --radius-pill: 100px;







  --shadow-sm: 0 4px 16px rgba(10, 31, 68, 0.06);



  --shadow-md: 0 12px 32px rgba(10, 31, 68, 0.10);



  --shadow-lg: 0 24px 60px rgba(10, 31, 68, 0.16);







  --ease: cubic-bezier(0.22, 1, 0.36, 1);



}







/* ---------- Base ---------- */



html { scroll-behavior: smooth; overscroll-behavior-x: none; overflow-x: hidden; }







body {



  font-family: var(--font-body);



  color: var(--ink);



  background: var(--white);



  line-height: 1.7;



  -webkit-font-smoothing: antialiased;



  overflow-x: hidden;



  overscroll-behavior-x: none;



}









h1, h2, h3, h4, h5, h6 {



  font-family: var(--font-head);



  color: var(--navy-900);



  font-weight: 600;



  line-height: 1.25;



}







a { text-decoration: none; color: inherit; transition: color .25s var(--ease), background .25s var(--ease); }







.text-orange { color: var(--blue-500) !important; }



.bg-navy { background: var(--navy-900) !important; }



.bg-light-soft { background: var(--gray-100) !important; }



.services-section {



  overflow: hidden;



  background: #0b0e14;



}



/* Photo layer under a black overlay */


/* 
.services-section::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image:



    linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,.74)),



    url('../img/service-bg.jpg');



  background-size: cover, cover;



  background-position: center, center;



  background-repeat: no-repeat, no-repeat;



  filter: contrast(1.12) saturate(1.15);



  pointer-events: none;



  z-index: 0;



} */



/* Decorative colour blobs */



.services-section::after {



  content: "";



  position: absolute;



  inset: 0;



  background:



    radial-gradient(420px circle at calc(100% + 60px) -60px, rgba(90,165,255,.20), transparent 70%),



    radial-gradient(380px circle at -60px calc(100% + 60px), rgba(122,60,255,.20), transparent 70%);



  pointer-events: none;



  z-index: 0;



}



/* Legibility over the dark background */



.services-section > .container-xl { position: relative; z-index: 1; }



.services-section .kicker { color: var(--blue-500); }



.services-section .kicker::before { background: var(--blue-500); }



.services-section .section-title { color: #fff; }



.services-section .section-sub { color: rgba(255,255,255,.82); font-weight: 400; }



.services-section .btn-outline-navy {



  color: #fff;



  border-color: rgba(255,255,255,.55);



}



.services-section .btn-outline-navy:hover {



  background: var(--ver-purple);



  border-color: var(--ver-purple);



  color: #fff;



}



/* Glassmorphism service cards */



.services-section .service-card {



  background: rgba(255,255,255,.08);



  backdrop-filter: blur(18px) saturate(150%);



  -webkit-backdrop-filter: blur(18px) saturate(150%);



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



  box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);



}



.services-section .service-card:hover {



  background: rgba(255,255,255,.14);



  border-color: rgba(75,2,202,.75);



  box-shadow: 0 16px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.3);



}



.services-section .service-card .icon-box {



  background: rgba(90,165,255,.14);



  border: 1px solid rgba(90,165,255,.32);



  color: var(--blue-500);



}



.services-section .service-card:hover .icon-box {



  background: var(--ver-purple);



  border-color: var(--ver-purple);



  color: #fff;



}



.services-section .service-card h3 { color: #fff; font-weight: 700; }



.services-section .service-card p { color: rgba(255,255,255,.75); }



.services-section .service-card .num,



.services-section .service-card .link-arrow,



.services-section .service-card .link-arrow i {



  color: var(--blue-500);



  transition: color .3s var(--ease);



}



.services-section .service-card .num { font-weight: 700; }



.services-section .service-card .link-arrow { font-weight: 600; }



.services-section .service-card:hover .num {



  background: transparent;



  border-color: transparent;



  color: var(--blue-500);



}







section { position: relative; }



.section-pad { padding: 4rem 0; padding-bottom: 8rem; }



@media (max-width: 767px) { .section-pad { padding: 3.5rem 0; } }







.container-xl { max-width: 1280px; }







::selection { background: var(--blue-400); color: var(--white); }







/* ---------- Eyebrow / Kicker ---------- */



.kicker {



  display: inline-flex;



  align-items: center;



  gap: .5rem;



  font-family: var(--font-head);



  font-size: .78rem;



  font-weight: 600;



  letter-spacing: .14em;



  text-transform: uppercase;



  color: var(--ver-purple);



  margin-bottom: 1rem;



}



.kicker::before {



  content: "";



  width: 28px;



  height: 2px;



  background: var(--ver-purple);



  display: inline-block;



}







.section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: .75rem; }



.section-sub { color: var(--gray-700); max-width: 620px; }



.section-head { margin-bottom: 3rem; }







/* ---------- Buttons ---------- */



.btn { font-family: var(--font-head); font-weight: 500; border-radius: var(--radius-pill); padding: .75rem 1.75rem; letter-spacing: .01em; transition: all .3s var(--ease); }







.btn-orange {



  background: var(--blue-500);



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



  color: var(--white);



}



.btn-orange:hover { background: var(--blue-400); border-color: var(--blue-400); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }







.btn-navy {



  background: var(--navy-900);



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



  color: var(--white);



}



.btn-navy:hover { background: var(--slate-600); border-color: var(--slate-600); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }







.btn-outline-light-custom {



  background: transparent;



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



  color: var(--white);



}



.btn-outline-light-custom:hover { background: var(--white); color: var(--navy-900); transform: translateY(-2px); }







.btn-outline-navy {



  background: transparent;



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



  color: var(--navy-900);



}



.btn-outline-navy:hover { background: var(--navy-900); color: var(--white); }







.btn-sm-pill { padding: .5rem 1.25rem; font-size: .875rem; }







.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-head); font-weight: 600; color: var(--navy-900); }



.link-arrow i { transition: transform .3s var(--ease); }



.link-arrow:hover { color: var(--blue-500); }



.link-arrow:hover i { transform: translateX(5px); }







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



   HEADER



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



.topbar {



  background: #045788;



  color: var(--gray-300);



  font-size: .85rem;



  padding: .55rem 0;



}



.topbar a { color: var(--gray-300); }



.topbar a:hover { color: var(--blue-400); }



.topbar .divider { width: 1px; height: 14px; background: rgba(255,255,255,.2); display: inline-block; }







.site-header {



  position: sticky;



  top: 0;



  z-index: 1030;



  background: rgb(2 6 14);



  backdrop-filter: blur(10px);



  transition: all .35s var(--ease);



  padding: 0;



}



.site-header.scrolled {



  background: rgba(2, 6, 14, 0.98);



  box-shadow: var(--shadow-md);



}







.brand {



  display: flex;



  align-items: center;



  gap: .65rem;



  font-family: var(--font-head);



  font-weight: 700;



  font-size: 1.35rem;



  color: var(--white);



}



.brand-mark {



  width: 42px; height: 42px;



  border-radius: 10px;



  background: linear-gradient(135deg, var(--blue-500), var(--blue-400));



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



  color: var(--white); font-size: 1.2rem;



  flex-shrink: 0;



}



.brand-logo-img {



  height: 70px;



  width: auto;



  border-radius: 8px;



  flex-shrink: 0;



  object-fit: contain;



}



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







.navbar-nav .nav-link {



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



  font-family: var(--font-head);



  font-weight: 500;



  font-size: .95rem;



  padding: .5rem 1rem !important;



  position: relative;



}



.navbar-nav .nav-link.active,



.navbar-nav .nav-link:hover { color: var(--white); }



.navbar-nav .nav-link.active::before {



  content: "";



  position: absolute;



  left: 1rem; right: 1rem; bottom: .2rem;



  height: 2px;



  background: var(--blue-500);



  border-radius: 2px;



}



.page-home .navbar-nav .nav-link.active::before { background: var(--blue-500); }



.page-home .header-cta .btn-orange {



  background: var(--ver-purple);



  border-color: var(--ver-purple);



}

.page-wrap .header-cta .btn-orange {



  background: var(--ver-purple)!important;



  border-color: var(--ver-purple)!important;



}



.page-home .header-cta .btn-orange:hover {



  background: #3a01a3;



  border-color: #3a01a3;



}



.page-home .about-cta {



  background: var(--ver-purple);



  border-color: var(--ver-purple);



  color: var(--white);



}



.page-home .about-cta:hover {



  background: #3a01a3;



  border-color: #3a01a3;



  color: var(--white);



}



.dropdown-menu {



  border: none;



  border-radius: var(--radius-md);



  box-shadow: var(--shadow-lg);



  padding: .6rem;



  margin-top: .75rem !important;



  display: none;



  opacity: 0;



  visibility: hidden;



  transition: opacity .3s var(--ease), visibility .3s var(--ease);



}



.navbar-nav .dropdown {

  padding-bottom: .75rem;

  margin-bottom: -.75rem;

}



.dropdown-menu.show {



  display: block;



  opacity: 1;



  visibility: visible;



}



@media (hover: hover) and (pointer: fine) and (min-width: 992px) {

  .navbar-nav .dropdown:hover .dropdown-menu,

  .navbar-nav .dropdown .nav-link:hover ~ .dropdown-menu {

    display: block;

    opacity: 1;

    visibility: visible;

  }

}



.dropdown-item { border-radius: var(--radius-sm); padding: .6rem .9rem; font-size: .92rem; font-weight: 500; }



.dropdown-item:hover, .dropdown-item:focus { background: var(--blue-050); color: var(--blue-500); }



.navbar-nav .nav-link.active { color: var(--blue-500); }







.header-cta { display: flex; align-items: center; gap: 1rem; }







/* ---------- Mobile nav ---------- */



.navbar-toggler { border: none; padding: .3rem; color: var(--white); }



.navbar-toggler:focus { box-shadow: none; }







@media (max-width: 991px) {



  .navbar-collapse {



    background: var(--navy-900);



    margin-top: 1rem;



    padding: 1rem 1.25rem 1.5rem;



    border-radius: var(--radius-md);



  }



  .navbar-nav .nav-link.active::before { display: none; }



  .navbar-nav .nav-link.active { color: var(--blue-400); }



}







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



   HERO



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



.hero {



  position: relative;



  color: var(--white);



  overflow: hidden;



}



.hero-slide {



  background-size: cover;



  background-position: center;



  background-repeat: no-repeat;



  position: relative;



  /* height: calc(100vh - 160px); */

  height:550px;



  min-height: 420px;



  max-height: 760px;



}



.hero-slide .container-xl {



  position: absolute !important;



  top: 50%;



  left: 0;



  right: 0;



  transform: translateY(-50%);



}



@media (max-width: 767px) {



  .hero-slide {

    height: auto!important;

    min-height: 300px;

    padding: 2rem 0;

    position: relative;

  }



  .hero-slide::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(180deg, rgba(2,6,14,.3) 0%, rgba(0,0,0,.15) 100%);

    pointer-events: none;

  }



  .hero-slide .container-xl { position: static !important; transform: none; }



  .hero h1 {

    font-size: clamp(1.8rem, 5vw, 2.5rem);

    line-height: 1.2;

    margin-bottom: 1rem;

    word-wrap: break-word;

  }



  .hero-slide .row { flex-direction: column-reverse; }

  .hero-slide .col-lg-6 { margin-top: 0.5rem; margin-bottom: 0rem; }



  .hero-visual { height: 220px; }



  .hero-kicker {

    margin-bottom: 1.5rem!important;

    opacity: 1!important;

    font-size: 0.7rem;

    display: block!important;

  }



      .hero-visual .panel-card {

        width: 165px !important;

        padding: 1.1rem 1.25rem !important;

        bottom: 17% !important;

        left: 3px !important;

    }



         .hero-visual .panel-main {

        width: 50% !important;

        height: 33% !important;

        top: 3rem !important;

        right: 0;

        font-size: 3.5rem !important;

    }



  .hero-visual .panel-main {

        width: 41% !important;

        height: 23% !important;

        top: 3rem !important;

        right: 0;

        font-size: 2.5rem !important;

    }

  /* Mobile button improvements */

  .btn { min-height: 44px; padding: 0.75rem 1.25rem; }



  /* Mobile text improvements */

  body { font-size: 0.95rem; line-height: 1.6; }



  h1, h2, h3, h4, h5, h6 { margin-bottom: 0.75rem; }



  /* Mobile spacing */

  .container-xl, .container-lg { padding-left: 1rem; padding-right: 1rem; }

  .container-xl:not(.navbar) { overflow-x: hidden; }



  /* Mobile card improvements */

  .card, .panel { margin-bottom: 1rem; }



}



.hero::before {



  content: "";



  position: absolute; inset: 0;



  background-image:



    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),



    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);



  background-size: 46px 46px;



  mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 75%);



  pointer-events: none;



}



.hero .shape-blob {



  position: absolute;



  border-radius: 50%;



  filter: blur(10px);



  opacity: .5;



}



.hero-badge {



  display: inline-flex; align-items: center; gap: .5rem;



  background: rgba(6,14,33,.55);



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



  padding: .5rem 1rem;



  border-radius: var(--radius-pill);



  font-size: .82rem;



  font-weight: 500;



  margin-bottom: 1.5rem;



  backdrop-filter: blur(4px);



}



.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(90,165,255,.25); }







.hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.75rem); color: var(--white); margin-bottom: 1.25rem; text-shadow: 0 2px 18px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6); }



.hero p.lead { color: rgba(255,255,255,.92); font-size: 1.12rem; max-width: 540px; text-shadow: 0 1px 10px rgba(0,0,0,.6); }







.hero-kicker {



  display: inline-flex;



  align-items: center;



  gap: .6rem;



  font-family: var(--font-head);



  font-size: .8rem;



  font-weight: 600;



  letter-spacing: .16em;



  text-transform: uppercase;



  color: var(--blue-400);



  margin-bottom: 1rem;



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



}



.hero-kicker::before {



  content: "";



  width: 30px;



  height: 2px;



  background: var(--blue-400);



  display: inline-block;



}







/* Elegant entrance: replays each time Bootstrap toggles .active on the incoming slide */



.hero-slide .hero-kicker,



.hero-slide h1 { opacity: 0; }



.hero-slide.active .hero-kicker {



  animation: heroFadeUp .8s cubic-bezier(.22,1,.36,1) .15s forwards;



}



.hero-slide.active h1 {



  animation: heroFadeUp .9s cubic-bezier(.22,1,.36,1) .3s forwards;



}



@keyframes heroFadeUp {



  from { opacity: 0; transform: translateY(22px); }



  to { opacity: 1; transform: translateY(0); }



}



@media (prefers-reduced-motion: reduce) {



  .hero-slide .hero-kicker,



  .hero-slide h1 { opacity: 1; animation: none; transform: none; }



}







.hero-stats-row { display: flex; gap: 2.25rem; margin-top: 2.75rem; flex-wrap: wrap; }



.hero-stats-row .stat b { font-family: var(--font-head); font-size: 1.6rem; color: var(--white); display: block; text-shadow: 0 1px 10px rgba(0,0,0,.6); }



.hero-stats-row .stat span { color: rgba(255,255,255,.85); font-size: .85rem; text-shadow: 0 1px 8px rgba(0,0,0,.6); }







/* ---------- Hero visual (illustration instead of photography) ---------- */



.hero-visual {



  position: relative;



  height: 420px;



}



/* ---------- About visual (single photo + floating elements) ---------- */



.about-visual {



  position: relative;



}



.about-visual-photo {



  border-radius: var(--radius-lg);



  background-size: cover;



  background-position: center 30%;



  background-repeat: no-repeat;



  border: 8px solid var(--white);



  box-shadow: var(--shadow-lg), 0 0 0 1px var(--gray-200);



  display: flex;



  align-items: flex-end;



  justify-content: flex-start;



  padding: 1.5rem;



  overflow: hidden;



  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s cubic-bezier(.22,1,.36,1);



}



/* .about-visual-photo:hover {



  transform: scale(1.045) !important;



  box-shadow: var(--shadow-lg), 0 0 0 1px var(--gray-200), 0 20px 40px rgba(75,2,202,.18);



  z-index: 5;



} */







/* Overlapping photo collage */



.about-collage {



  padding: 0 3rem 5.5rem 0;



}



.about-collage::after {



  content: "";



  position: absolute;



  top: 23px;



  left: 23px;



  right: calc(3rem - 23px);



  bottom: calc(5.5rem - 23px);



  border: 2px dashed var(--ver-purple);



  opacity: .3;



  border-radius: var(--radius-lg);



  pointer-events: none;



  z-index: 0;



}



.about-collage-main {



  height: 400px;



  width: 85%;



  position: relative;



  z-index: 1;



}



.about-collage-1,



.about-collage-2 {



  position: absolute;



  width: 48%;



  height: 190px;



  border-width: 6px;



  padding: 1rem;



  z-index: 2;



}



.about-collage-1 {



  top: -1.75rem;



  right: 0.25rem;



}



.about-collage-2 {



  bottom: -3.75rem;



  left: -6.5rem;



  z-index: 3;



}



.about-collage-1 .badge-dept,



.about-collage-2 .badge-dept { font-size: .72rem; padding: .35rem .7rem; }



@media (max-width: 991px) {



  .about-collage { padding: 0 1.5rem 4.5rem 0; }



  .about-collage-main {   
      width: 53%;
      height:228px!important;
    position: relative;
    z-index: 1;
    left: 26%; }



  .about-collage-1, .about-collage-2 { width: 23%; height: 140px; }



     .about-collage-1 {
        top: -1.25rem;
        right: 0.75rem;
    }



      .about-collage-2 {
        bottom: -1.75rem;
        left: 3.25rem;
    }

.about-collage::after {
    content: "";
    position: absolute;
    top: 23px;
    left: 242px;
    right: 95px;
    bottom: 82px;
    border: 2px dashed var(--ver-purple);
    opacity: .3;
    border-radius: var(--radius-lg);
    pointer-events: none;
    z-index: 0;
}

}







.flying-plane {



  position: absolute;



  top: 0;



  left: 0;



  width: 46px;



  height: 46px;



  border-radius: 50%;



  background: var(--white);



  border: 2px solid var(--ver-purple);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.3rem;



  color: var(--ver-purple);



  z-index: 6;



  box-shadow: var(--shadow-md);



  animation: flyAroundCollage 14s linear infinite;



  pointer-events: none;



}



@keyframes flyAroundCollage {



  0%   { transform: translate(0, 0) rotate(35deg); }



  25%  { transform: translate(calc(100% - 46px), 8%) rotate(125deg); }



  50%  { transform: translate(calc(100% - 46px), calc(100% - 46px)) rotate(215deg); }



  75%  { transform: translate(0, calc(100% - 46px)) rotate(305deg); }



  100% { transform: translate(0, 0) rotate(395deg); }



}



@media (prefers-reduced-motion: reduce) {



  .flying-plane { animation: none; }



}



.about-visual-badge {



  position: absolute;



  top: -1.5rem;



  left: -1.5rem;



  width: 76px;



  height: 76px;



  border-radius: var(--radius-md);



  background: rgba(255,255,255,.85);



  backdrop-filter: blur(10px);



  color: var(--ver-purple);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.7rem;



  box-shadow: var(--shadow-lg);



  border: 2px solid var(--ver-purple);



  animation: float 5s ease-in-out infinite;



}



.about-visual-stat {



  position: absolute;



  bottom: -1.5rem;



  right: -1.75rem;



  background: var(--white);



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



  border-left: 4px solid var(--ver-purple);



  border-radius: var(--radius-md);



  padding: 1.25rem 1.85rem;



  box-shadow: var(--shadow-lg);



  text-align: left;



  animation: float 6s ease-in-out infinite 1s;



}



.about-visual-stat b { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--navy-900); display: block; line-height: 1.1; }



.about-visual-stat span { font-size: .8rem; color: var(--gray-700); letter-spacing: .02em; }



@media (max-width: 767px) {



  .about-visual { margin: 1.5rem 1rem 2.5rem .75rem; }



  .about-visual-badge { width: 60px; height: 60px; font-size: 1.3rem; top: -1.25rem; left: -.75rem; }



  .about-visual-stat { padding: 1rem 1.35rem; right: -.75rem; bottom: -1.25rem; }



  .about-visual-stat b { font-size: 1.5rem; }



}







/* ---------- Glass card (light-section counterpart to hero-visual panels) ---------- */



.glass-card {



  position: relative;



  background: linear-gradient(145deg, rgba(255,255,255,.75), rgba(255,255,255,.45));



  border: 1px solid rgba(10,31,68,.08);



  border-radius: var(--radius-lg);



  backdrop-filter: blur(10px);



  box-shadow: var(--shadow-lg);



  padding: 2.25rem;



}







.hero-visual .panel {



  position: absolute;



  border-radius: var(--radius-lg);



  background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.03));



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



  backdrop-filter: blur(6px);



  box-shadow: var(--shadow-lg);



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



  color: var(--white);



}



.hero-visual .panel-main { width: 78%; height: 78%; top: 0; right: 0; font-size: 6.5rem; color: rgba(255,255,255,.9); }



.hero-visual .panel-main i { background: linear-gradient(135deg, var(--blue-400), var(--blue-500)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(90,165,255,.35)); }



.hero-visual .panel-card {



  width: 190px; padding: 1.1rem 1.25rem;



  bottom: 6%; left: 0;



  flex-direction: column; align-items: flex-start;



  animation: float 5s ease-in-out infinite;



}



.hero-visual .panel-card i { color: var(--blue-400); font-size: 1.4rem; margin-bottom: .5rem; }



.hero-visual .panel-card b { font-family: var(--font-head); font-size: 1.3rem; display:block; }



.hero-visual .panel-card span { font-size: .8rem; color: rgba(255,255,255,.65); }



.hero-visual .panel-badge {



  width: 96px; height: 96px;



  top: 17%; left: 8%;



  font-size: 2.4rem;



  color: var(--blue-400);



  animation: float 6s ease-in-out infinite 1s;



}



@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-14px);} }







/* ---------- Hero carousel (sliding banner) ---------- */



.hero-carousel { padding-bottom: 0; }



.hero-carousel .carousel-indicators {



  position: absolute;



  bottom: -1rem;



  margin: 0;



  gap: .5rem;



}



.hero-carousel .carousel-indicators [data-bs-target] {



  width: 30px; height: 4px;



  border-radius: var(--radius-pill);



  background: rgba(255,255,255,.28);



  opacity: 1;



  border: none;



  transition: background .3s var(--ease), width .3s var(--ease);



}



.hero-carousel .carousel-indicators .active { background: var(--blue-500); width: 42px; }



.hero-carousel .carousel-control-prev,



.hero-carousel .carousel-control-next {



  width: 3rem;



  top: 42%;



  bottom: auto;



  transform: translateY(-50%);



  opacity: 1;



}



.hero-carousel .carousel-control-prev-icon,



.hero-carousel .carousel-control-next-icon {



  width: 2.75rem; height: 2.75rem;



  background-color: rgba(255,255,255,.08);



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



  border-radius: 50%;



  padding: 0;



  background-size: 45%;



  transition: background-color .3s var(--ease);



}



.hero-carousel .carousel-control-prev-icon:hover,



.hero-carousel .carousel-control-next-icon:hover { background-color: rgba(90,165,255,.85); }



@media (max-width: 991px) {



  .hero-carousel .carousel-control-prev,



  .hero-carousel .carousel-control-next { display: none; }



}







/* ---------- Page (inner) hero ---------- */



.page-hero {



  background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--slate-600) 140%);



  color: var(--white);



  padding: 5.5rem 0 4rem;



  position: relative;



  overflow: hidden;



}



.page-hero::before {



  content: "";



  position: absolute; inset: 0;



  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);



  background-size: 44px 44px;



  mask-image: radial-gradient(circle at 30% 20%, black, transparent 70%);



}



.page-hero h1 { color: var(--white); font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: .5rem;}



.page-hero-photo::before { display: none; }



.breadcrumb-custom { font-size: .9rem; color: rgba(255,255,255,.65); }



.breadcrumb-custom a:hover { color: var(--blue-400); }



.breadcrumb-custom .sep { margin: 0 .5rem; opacity: .5; }







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



   CARDS



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



.card-elevated {



  background: var(--white);



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



  border-radius: var(--radius-md);



  transition: all .35s var(--ease);



}



.card-elevated:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); border-color: transparent; }



/* ---------- About: Our Story visual ---------- */

.story-visual { display: flex; gap: 1.25rem; height: 100%; min-height: 320px; }



.story-visual-main {

  flex: 1.4;

  border-radius: var(--radius-lg);

  background: linear-gradient(150deg, var(--navy-900), var(--blue-600));

  box-shadow: var(--shadow-md);

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

  color: var(--white);

  font-size: 5rem;

}



.story-visual-stack { flex: 1; display: flex; flex-direction: column; gap: 1.25rem; }



.story-visual-tile {

  flex: 1;

  border-radius: var(--radius-lg);

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

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

  font-size: 2.75rem;

  box-shadow: var(--shadow-sm);

  transition: transform .35s var(--ease), box-shadow .35s var(--ease);

}



.story-visual-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }



.story-visual-tile-1 { background: var(--blue-50, #eaf3ff); color: var(--blue-500); }



.story-visual-tile-2 { background: var(--gray-100); color: var(--navy-900); }



.story-stats { border-top: 1px solid var(--gray-200); padding-top: 1.25rem; }



/* ---------- About: Mission, Vision & Values (glassmorphism) ---------- */

.mvv-section { position: relative; overflow: hidden; background: #9fc8f82e; }



.mvv-section::before,

.mvv-section::after {

  content: "";

  position: absolute;

  width: 440px;

  height: 440px;

  border-radius: 50%;

  filter: blur(90px);

  opacity: .28;

  pointer-events: none;

  z-index: 0;

}



.mvv-section::before { background: var(--blue-400); top: -140px; left: -120px; }



.mvv-section::after { background: var(--ver-purple); bottom: -160px; right: -120px; }



.mvv-row { position: relative; z-index: 1; }



.mvv-line {

  position: absolute;

  top: 90px;

  left: 12%;

  right: 12%;

  height: 2px;

  background: linear-gradient(90deg, var(--blue-500), var(--ver-purple), var(--blue-500));

  background-size: 200% 100%;

  opacity: .55;

  z-index: 0;

  display: none;

  animation: mvvLineFlow 5s linear infinite;

}



@media (min-width: 768px) { .mvv-line { display: block; } }



@keyframes mvvLineFlow {

  0% { background-position: 0% 0; }

  100% { background-position: 200% 0; }

}



.mvv-card {

  position: relative;

  z-index: 1;

  height: 100%;

  overflow: hidden;

  text-align: center;

  padding: 2.75rem 2.25rem 2.5rem;

  background: rgba(255,255,255,.62);

  backdrop-filter: blur(18px) saturate(160%);

  -webkit-backdrop-filter: blur(18px) saturate(160%);

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

  border-radius: var(--radius-lg);

  box-shadow: 0 8px 32px rgba(10,31,68,.08);

  transition: transform .45s var(--ease), box-shadow .45s var(--ease);

}



.mvv-card:hover { transform: translateY(-10px); box-shadow: 0 22px 50px rgba(10,31,68,.16); }



.mvv-icon {

  position: absolute;

  top: 50%;

  left: 50%;

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

  z-index: 0;

  width: auto;

  height: auto;

  font-size: 8rem;

  line-height: 1;

  opacity: .16;

  transition: transform .45s var(--ease), opacity .45s var(--ease);

}



.mvv-icon i {

  background: linear-gradient(135deg, var(--blue-500), var(--ver-purple));

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.mvv-card:hover .mvv-icon { transform: translate(-50%, -50%) scale(1.1) rotate(-4deg); opacity: .24; }



.mvv-card h3 { position: relative; z-index: 1; font-size: 1.25rem; margin-bottom: .75rem; color: var(--navy-900); }



.mvv-card p { position: relative; z-index: 1; font-size: .92rem; color: var(--gray-700); line-height: 1.75; margin: 0; }



@media (prefers-reduced-motion: reduce) { .mvv-line { animation: none; } }



/* ---------- About: The Difference We Deliver (winding route) ---------- */

.route-map { position: relative; max-width: 900px; margin: 0 auto; }



.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }



.route-path-bg { fill: none; stroke: var(--gray-200); stroke-width: 3; stroke-linecap: round; }



.route-path {

  fill: none;

  stroke: url(#routeGradient);

  stroke-width: 3;

  stroke-linecap: round;

  stroke-dasharray: 10 10;

  animation: routeFlow 22s linear infinite;

}



@keyframes routeFlow { to { stroke-dashoffset: -400; } }



.route-stop {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: 1fr auto 1fr;

  align-items: center;

  gap: 1.5rem;

  min-height: 220px;

}



.route-icon {

  width: 66px;

  height: 66px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--blue-500), var(--ver-purple));

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.55rem;

  box-shadow: 0 0 0 6px var(--white), 0 10px 24px rgba(75,2,202,.3);

  animation: routeFloat 5s ease-in-out infinite;

  flex-shrink: 0;

}



.route-stop:nth-of-type(2) .route-icon { animation-delay: .4s; }

.route-stop:nth-of-type(3) .route-icon { animation-delay: .8s; }

.route-stop:nth-of-type(4) .route-icon { animation-delay: 1.2s; }

.route-stop:nth-of-type(5) .route-icon { animation-delay: 1.6s; }

.route-stop:nth-of-type(6) .route-icon { animation-delay: 2s; }



@keyframes routeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }



.route-text h4 { font-size: 1.1rem; margin-bottom: .5rem; color: var(--navy-900); }



.route-text p { font-size: .9rem; color: var(--gray-700); line-height: 1.7; margin: 0; }



.route-stop-left .route-text { text-align: right; }



.route-stop-right .route-text { text-align: left; }



@media (max-width: 767px) {

  .route-svg { display: none; }



  .route-stop,

  .route-stop-left,

  .route-stop-right {

    grid-template-columns: 1fr;

    justify-items: center;

    text-align: center;

    gap: .75rem;

    min-height: 0;

    padding-bottom: 2.5rem;

  }



  .route-stop-left .route-text,

  .route-stop-right .route-text { text-align: center; order: 2; }



  .route-icon { order: 1; }



  .route-spacer { display: none; }

}



@media (prefers-reduced-motion: reduce) {

  .route-path { animation: none; }

  .route-icon { animation: none; }

}



/* ---------- About: The Difference We Deliver (hub & spoke) ---------- */

.hub-section {

  position: relative;

  overflow: hidden;

  background: radial-gradient(ellipse 90% 65% at 50% 38%, #123C8C 0%, #0B2A6B 48%, #081C45 100%);

}



.hub-section::before {

  content: "";

  position: absolute; inset: 0;

  background-image:

    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

  background-size: 46px 46px;

  mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 72%);

  -webkit-mask-image: radial-gradient(circle at 50% 42%, black 0%, transparent 72%);

  pointer-events: none;

  z-index: 0;

}



.hub-section .kicker { color: var(--blue-400); }



.hub-section .section-title { color: var(--white); }



.hub-section .section-sub { color: rgba(255,255,255,.68); }



.hub-section .container-xl,

.hub-section .hub { position: relative; z-index: 2; }



.hub-bg-decor { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }



.hub-bg-decor .yard-routes { opacity: .5; }



.hub-bg-hex {

  position: absolute;

  border: 1px solid rgba(90,165,255,.16);

  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);

}



.hub-bg-hex-1 { top: 8%; left: 5%; width: 190px; height: 190px; transform: rotate(12deg); }



.hub-bg-hex-2 { bottom: 6%; right: 6%; width: 230px; height: 230px; transform: rotate(-8deg); border-color: rgba(75,2,202,.22); }



.hub-bg-particle {

  position: absolute;

  width: 5px; height: 5px;

  border-radius: 50%;

  background: rgba(140,194,255,.6);

  box-shadow: 0 0 10px 2px rgba(90,165,255,.45);

  animation: hubParticleFloat 8s ease-in-out infinite;

}



.hub-bg-particle.p1 { top: 16%; left: 10%; animation-delay: 0s; }

.hub-bg-particle.p2 { top: 28%; right: 12%; animation-delay: 1.5s; }

.hub-bg-particle.p3 { bottom: 20%; left: 18%; animation-delay: 3s; }

.hub-bg-particle.p4 { bottom: 30%; right: 20%; animation-delay: 4.5s; }

.hub-bg-particle.p5 { top: 48%; left: 4%; animation-delay: 2.2s; }



@keyframes hubParticleFloat {

  0%, 100% { transform: translateY(0) scale(1); opacity: .5; }

  50% { transform: translateY(-18px) scale(1.3); opacity: 1; }

}



.hub-bg-icon { position: absolute; color: rgba(140,194,255,.07); line-height: 1; }



.hub-bg-icon-truck { bottom: -1.25rem; left: 1%; font-size: 8rem; }



.hub-bg-icon-plane { top: 5%; right: 5%; font-size: 6rem; transform: rotate(20deg); }



.hub-bg-icon-building { top: 8%; left: 2%; font-size: 7rem; }



.hub-bg-icon-boxes { bottom: 3%; right: 3%; font-size: 7.5rem; }



.hub {

  position: relative;

  width: 100%;

  max-width: 1100px;

  aspect-ratio: 1 / 1;

  margin: 2rem auto 0;

}



.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; filter: drop-shadow(0 0 4px rgba(90,165,255,.5)); }



.hub-lines line {

  stroke: var(--blue-400);

  stroke-width: .5;

  stroke-dasharray: 1.6 2.2;

  opacity: .65;

  animation: hubDash 3s linear infinite;

}



@keyframes hubDash { to { stroke-dashoffset: -38; } }



.about-hub-center {

  position: absolute;

  top: 50%;

  left: 50%;

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

  width: 34%;

  aspect-ratio: 1 / 1;

  border-radius: 50%;

  background-size: cover;

  background-position: center;

  border: 6px solid rgba(255,255,255,.92);

  box-shadow: 0 0 60px 14px rgba(90,165,255,.35), 0 16px 40px rgba(0,0,0,.4);

  z-index: 1;

}



.about-hub-node {

  position: absolute;

  z-index: 1;

  width: 195px;

  text-align: center;

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

}



.about-hub-node-1 { top: 8%; left: 50%; }

.about-hub-node-2 { top: 29%; left: 86%; }

.about-hub-node-3 { top: 71%; left: 86%; }

.about-hub-node-4 { top: 92%; left: 50%; }

.about-hub-node-5 { top: 71%; left: 14%; }

.about-hub-node-6 { top: 29%; left: 14%; }



.about-hub-node-icon {

  width: 68px;

  height: 68px;

  margin: 0 auto .75rem;

  border-radius: 50%;

  background: rgba(255,255,255,.1);

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

  color: var(--blue-400);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.75rem;

  box-shadow: 0 0 22px 2px rgba(90,165,255,.2);

  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);

}



.about-hub-node:hover .about-hub-node-icon { background: var(--blue-400); color: #081C45; box-shadow: 0 0 32px 6px rgba(90,165,255,.55); transform: scale(1.1); }



.about-hub-node h4 { font-size: 1rem; margin-bottom: .35rem; color: var(--white); }



.about-hub-node p { font-size: .82rem; color: rgba(255,255,255,.65); line-height: 1.55; margin: 0; }



@media (max-width: 991px) {

  .hub { max-width: 420px; aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 2.25rem; padding: 0 1.25rem; }

  .hub-lines { display: none; }

  .about-hub-center { position: static; transform: none; width: 160px; margin-bottom: .5rem; }

  .about-hub-node { position: relative; top: auto; left: auto; transform: none; width: 100%; }



  .about-hub-node::before {

    content: "";

    position: absolute;

    top: -2.25rem;

    left: 50%;

    width: 3px;

    height: 2.25rem;

    transform: translateX(-50%);

    background-image: repeating-linear-gradient(to bottom, var(--blue-400) 0 8px, transparent 8px 18px);

    background-size: 100% 36px;

    opacity: .7;

    z-index: 0;

    animation: hubDashMobile 1.4s linear infinite;

  }



  .about-hub-node-icon,

  .about-hub-node h4,

  .about-hub-node p { position: relative; z-index: 1; }



  .hub-bg-icon-truck,

  .hub-bg-icon-plane,

  .hub-bg-icon-building,

  .hub-bg-icon-boxes { display: none; }



  .hub-bg-hex-1 { width: 110px; height: 110px; }

  .hub-bg-hex-2 { width: 130px; height: 130px; }

}



@keyframes hubDashMobile { to { background-position-y: 36px; } }



@media (max-width: 991px) and (prefers-reduced-motion: reduce) {

  .about-hub-node::before { animation: none; }

}



@media (prefers-reduced-motion: reduce) {

  .hub-bg-particle { animation: none; }

}



@media (max-width: 480px) {

  .hub { padding: 0 1rem; }

}



/* ---------- Services page: premium hero services section ---------- */

.services-hero-section {

  position: relative;

  overflow: hidden;

  background-image: linear-gradient(rgba(8,28,69,.72), rgba(8,28,69,.78)), url('../img/service-bg.jpg');

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

}



.services-hero-section .kicker { color: var(--blue-400); }



.services-hero-section .section-title { color: var(--white); }



.services-hero-section .section-sub { color: rgba(255,255,255,.72); }



.services-hero-section .container-xl { position: relative; z-index: 2; }



.services-hero-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }



.services-hero-decor .yard-routes { opacity: .5; }



.services-particle {

  position: absolute;

  width: 5px; height: 5px;

  border-radius: 50%;

  background: rgba(140,194,255,.6);

  box-shadow: 0 0 10px 2px rgba(90,165,255,.45);

  animation: hubParticleFloat 8s ease-in-out infinite;

}



.services-particle.sp1 { top: 12%; left: 8%; animation-delay: 0s; }

.services-particle.sp2 { top: 22%; right: 10%; animation-delay: 1.2s; }

.services-particle.sp3 { top: 55%; left: 5%; animation-delay: 2.4s; }

.services-particle.sp4 { top: 65%; right: 6%; animation-delay: 3.6s; }

.services-particle.sp5 { bottom: 15%; left: 20%; animation-delay: 4.8s; }

.services-particle.sp6 { bottom: 10%; right: 22%; animation-delay: 1.8s; }



.service-hotspot {

  position: relative;

  height: 100%;

  padding: 2.5rem 2rem;

  border-radius: var(--radius-lg);

  background: rgba(255,255,255,.06);

  backdrop-filter: blur(14px) saturate(150%);

  -webkit-backdrop-filter: blur(14px) saturate(150%);

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

  overflow: hidden;

  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);

}



.service-hotspot .num {

  position: absolute;

  top: 1.25rem;

  right: 1.5rem;

  font-family: var(--font-head);

  font-size: 1.6rem;

  font-weight: 700;

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

}



.service-hotspot .icon-box {

  width: 62px;

  height: 62px;

  border-radius: 50%;

  background: rgba(255,255,255,.1);

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

  color: var(--blue-400);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.6rem;

  margin-bottom: 1.5rem;

  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);

}



.service-hotspot h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 0; }



.service-hotspot-reveal {

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  transition: max-height .5s var(--ease), opacity .4s var(--ease);

}



.service-hotspot-reveal p { color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.7; margin: 1rem 0 .75rem; }



.service-hotspot-reveal .link-arrow { color: var(--blue-400); font-weight: 600; font-size: .9rem; }



.service-hotspot-reveal .link-arrow:hover { color: var(--white); }



.service-hotspot:hover,

.service-hotspot:focus-within {

  transform: translateY(-10px);

  background: rgba(255,255,255,.1);

  border-color: rgba(90,165,255,.55);

  box-shadow: 0 0 0 1px rgba(90,165,255,.3), 0 24px 50px rgba(0,0,0,.4), 0 0 40px rgba(90,165,255,.25);

}



.service-hotspot:hover .icon-box,

.service-hotspot:focus-within .icon-box {

  background: var(--blue-400);

  color: #081C45;

  transform: scale(1.08);

}



.service-hotspot:hover .service-hotspot-reveal,

.service-hotspot:focus-within .service-hotspot-reveal {

  max-height: 220px;

  opacity: 1;

}



@media (max-width: 767px) {

  .services-hero-section { background-attachment: scroll; }

  .service-hotspot-reveal { max-height: 220px; opacity: 1; }

}



@media (prefers-reduced-motion: reduce) {

  .services-particle { animation: none; }

}



@media (prefers-reduced-motion: reduce) { .hub-lines line { animation: none; } }



/* ---------- Services page: per-tile image cards ---------- */

.service-tile {

  position: relative;

  height: 100%;

  min-height: 360px;

  border-radius: 22px;

  overflow: hidden;

  box-shadow: 0 16px 40px rgba(0,0,0,.22);

  transition: box-shadow .45s var(--ease), transform .45s var(--ease);

}



.service-tile-bg {

  position: absolute;

  inset: -4%;

  background-image: linear-gradient(180deg, rgba(8,20,45,.5) 0%, rgba(8,20,45,.62) 55%, rgba(8,20,45,.88) 100%), var(--tile-img);

  background-size: cover;

  background-position: center;

  filter: brightness(.92);

  transition: transform 1s var(--ease), filter .6s var(--ease);

}



.service-tile:hover .service-tile-bg,

.service-tile:focus-within .service-tile-bg { transform: scale(1.12); filter: brightness(1.05); }



.service-tile:hover,

.service-tile:focus-within {

  transform: translateY(-8px);

  box-shadow: 0 0 0 1px rgba(90,165,255,.4), 0 26px 55px rgba(0,0,0,.35), 0 0 40px rgba(90,165,255,.3);

}



.service-tile-content {

  position: relative;

  z-index: 1;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 1.75rem;

}



.service-tile-top .icon-box {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: rgba(255,255,255,.14);

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

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  margin-bottom: 1rem;

  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);

}



.service-tile:hover .icon-box,

.service-tile:focus-within .icon-box { background: var(--blue-400); color: #081C45; transform: scale(1.08); }



.service-tile-top h3 { color: var(--white); font-size: 1.2rem; margin-bottom: 0; text-shadow: 0 2px 12px rgba(0,0,0,.45); }



.service-tile-reveal {

  max-height: 0;

  opacity: 0;

  transform: translateY(10px);

  overflow: hidden;

  transition: max-height .5s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);

}



.service-tile-reveal p { color: rgba(255,255,255,.85); font-size: .9rem; line-height: 1.65; margin: .9rem 0 .6rem; }



.service-tile-reveal .link-arrow { color: var(--blue-400); font-weight: 600; font-size: .88rem; }



.service-tile-reveal .link-arrow:hover { color: var(--white); }



.service-tile:hover .service-tile-reveal,

.service-tile:focus-within .service-tile-reveal {

  max-height: 200px;

  opacity: 1;

  transform: translateY(0);

}



@media (max-width: 767px) {

  .service-tile-reveal { max-height: 200px; opacity: 1; transform: none; }

  .service-tile-bg { filter: brightness(.85); }

  .service-tile { min-height: 300px; }

}



@media (prefers-reduced-motion: reduce) {

  .service-tile-bg { transition: filter .6s var(--ease); }

  .service-tile:hover .service-tile-bg,

  .service-tile:focus-within .service-tile-bg { transform: none; }

}



/* ---------- Services page: blueprint warehouse process section ---------- */

.blueprint-section {

  position: relative;

  overflow: hidden;

  background-color: #0b1f45;

  background-image:

    linear-gradient(rgba(140,194,255,.10) 1px, transparent 1px),

    linear-gradient(90deg, rgba(140,194,255,.10) 1px, transparent 1px),

    linear-gradient(rgba(140,194,255,.22) 1px, transparent 1px),

    linear-gradient(90deg, rgba(140,194,255,.22) 1px, transparent 1px);

  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px;

}



.blueprint-section .kicker { color: var(--blue-400); }



.blueprint-section .section-title { color: var(--white); }



.blueprint-section .section-sub { color: rgba(255,255,255,.68); }



.blueprint-section .container-xl { position: relative; z-index: 2; }



.blueprint-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }



.blueprint-icon { position: absolute; color: rgba(140,194,255,.09); }



.blueprint-icon-forklift { top: 8%; left: 3%; font-size: 6rem; transform: scaleX(-1); }



.blueprint-icon-pallets { bottom: 6%; right: 5%; font-size: 6.5rem; }



.blueprint-icon-dock { top: 10%; right: 7%; font-size: 5rem; }



.blueprint-aisle {

  position: absolute;

  left: 3%;

  right: 3%;

  height: 0;

  border-top: 1px dashed rgba(140,194,255,.18);

}



.blueprint-aisle-1 { top: 30%; }



.blueprint-aisle-2 { top: 72%; }



/* schematic step nodes */

.blueprint-section .process-step .step-num {

  background: rgba(255,255,255,.05);

  border: 1px dashed rgba(140,194,255,.55);

  color: var(--blue-400);

}



.blueprint-section .process-step .step-num i {

  background: var(--blue-400);

  color: #081C45;

}



.blueprint-section .process-step h4 { color: var(--white); }



.blueprint-section .process-step p { color: rgba(255,255,255,.62); }



.blueprint-section .process-line {

  border-top: none;

  height: 2px;

  background-image: repeating-linear-gradient(to right, var(--blue-400) 0 8px, transparent 8px 16px);

  background-size: 32px 100%;

  opacity: .8;

  animation: blueprintFlow 2.2s linear infinite;

}



@keyframes blueprintFlow { to { background-position-x: -32px; } }



.blueprint-section .process-line::after {

  content: "";

  top: -5px;

  right: -2px;

  width: 0;

  height: 0;

  border-top: 6px solid transparent;

  border-bottom: 6px solid transparent;

  border-left: 9px solid var(--blue-400);

  font-size: 0;

}



@media (prefers-reduced-motion: reduce) {

  .blueprint-section .process-line { animation: none; }

}



@media (max-width: 767px) {

  .blueprint-icon-forklift,

  .blueprint-icon-pallets,

  .blueprint-icon-dock { display: none; }

}



/* ---------- Services page: wave process path ---------- */

.wave-map { position: relative; height: 480px; margin-top: 1.5rem; }



.wave-svg { position: absolute; top: 50%; left: 0; width: 100%; height: 160px; transform: translateY(-50%); z-index: 0; }



.wave-path-bg { fill: none; stroke: var(--gray-200); stroke-width: 2; }



.wave-path {

  fill: none;

  stroke: var(--blue-500);

  stroke-width: 2.5;

  stroke-dasharray: 10 8;

  animation: waveFlow 5s linear infinite;

}



@keyframes waveFlow { to { stroke-dashoffset: -72; } }



.wave-node {

  position: absolute;

  z-index: 1;

  width: 220px;

  text-align: center;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

}



.wave-node-up { top: 0; flex-direction: column-reverse; }



.wave-node-down { bottom: 0; }



.wave-icon {

  position: relative;

  width: 60px;

  height: 60px;

  margin: 0 auto;

  border-radius: 50%;

  background: var(--blue-050);

  color: var(--blue-500);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  box-shadow: var(--shadow-sm);

  animation: waveBob 4s ease-in-out infinite;

}



.wave-node-down .wave-icon { animation-delay: 1s; }



@keyframes waveBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }



.wave-node-up .wave-icon::after,

.wave-node-down .wave-icon::after {

  content: "";

  position: absolute;

  left: 50%;

  width: 2px;

  height: 46px;

  background: rgba(90,165,255,.4);

  transform: translateX(-50%);

}



.wave-node-up .wave-icon::after { top: 100%; }



.wave-node-down .wave-icon::after { bottom: 100%; }



.wave-node-up h4 { margin: 1rem 0 .5rem; }



.wave-node-down h4 { margin: 1rem 0 .5rem; }



.wave-node h4 { font-size: 1.05rem; }



.wave-node p { color: var(--gray-700); font-size: .88rem; line-height: 1.6; margin: 0; }



@media (max-width: 1199px) {

  .wave-map { height: auto; display: flex; flex-direction: column; gap: 3rem; padding: 1rem 0; }

  .wave-svg { display: none; }

  .wave-node { position: static; width: 100%; transform: none; flex-direction: column; }

  .wave-node-up .wave-icon::after,

  .wave-node-down .wave-icon::after { display: none; }

}



@media (prefers-reduced-motion: reduce) {

  .wave-path { animation: none; }

  .wave-icon { animation: none; }

}



/* ---------- Services page: premium wave hero (7-step process) ---------- */

.wave-hero-section {

  position: relative;

  overflow: hidden;

  background-image: linear-gradient(180deg, rgba(8,28,69,.72) 0%, rgba(8,28,69,.7) 50%, rgba(8,28,69,.82) 100%);

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

}



.wave-hero-section .kicker { color: var(--blue-400); }



.wave-hero-section .section-title { color: var(--white); }



.wave-hero-section .section-sub { color: rgba(255,255,255,.72); }



.wave-hero-section .container-xl { position: relative; z-index: 2; }



.wave-hero-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }



.wave-hero-decor .yard-routes { opacity: .45; }



.wave-map-lg { position: relative; z-index: 1; }



@media (min-width: 1200px) {

  .wave-map-lg { height: 560px; }

  .wave-map-lg .wave-node { width: 142px; }

}



.wave-map-lg .wave-path-bg { stroke: rgba(255,255,255,.18); stroke-width: 3; }



.wave-map-lg .wave-path {

  stroke: var(--blue-400);

  stroke-width: 3;

  filter: drop-shadow(0 0 6px rgba(90,165,255,.6));

}



.wave-map-lg .wave-icon {

  background: rgba(255,255,255,.1);

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

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  color: var(--white);

  box-shadow: 0 0 22px 2px rgba(90,165,255,.25);

}



.wave-map-lg .wave-node:hover .wave-icon { background: var(--blue-400); color: #081C45; }



.wave-map-lg .wave-icon::after { background: rgba(140,194,255,.55); }



.wave-map-lg .wave-node h4 { color: var(--white); font-size: .98rem; text-shadow: 0 2px 10px rgba(0,0,0,.4); }



.wave-map-lg .wave-node p { color: rgba(255,255,255,.68); font-size: .82rem; }



.wave-num {

  display: block;

  font-family: var(--font-head);

  font-size: .75rem;

  font-weight: 700;

  letter-spacing: .08em;

  color: var(--blue-400);

  margin-top: .5rem;

}



@media (max-width: 991px) {

  .wave-hero-section { background-attachment: scroll; }

}



@media (prefers-reduced-motion: reduce) {

  .services-particle { animation: none; }

}



/* ---------- About: The Difference We Deliver (old card layout, unused) ---------- */

.diff-section { position: relative; }



.diff-card {

  height: 100%;

  padding: 2.25rem 2rem;

  border-radius: var(--radius-lg);

  background: var(--white);

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

  border-top: 4px solid var(--diff-accent, var(--blue-500));

  box-shadow: var(--shadow-sm);

  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);

}



.diff-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-lg, var(--shadow-md));

  border-color: var(--gray-200);

  border-top-color: var(--diff-accent, var(--blue-500));

}



.diff-card-icon {

  width: 60px;

  height: 60px;

  border-radius: var(--radius-md);

  background: var(--diff-accent-soft, #eaf3ff);

  color: var(--diff-accent, var(--blue-500));

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.6rem;

  margin-bottom: 1.5rem;

  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);

}



.diff-card:hover .diff-card-icon {

  background: var(--diff-accent, var(--blue-500));

  color: var(--white);

  transform: scale(1.08) rotate(-4deg);

}



.diff-card h4 { font-size: 1.15rem; margin-bottom: .65rem; color: var(--navy-900); }



.diff-card p { font-size: .92rem; line-height: 1.7; }



.diff-section .row > div:nth-child(1) .diff-card { --diff-accent: #5aa5ff; --diff-accent-soft: #eaf3ff; }

.diff-section .row > div:nth-child(2) .diff-card { --diff-accent: #4b02ca; --diff-accent-soft: #f1eaff; }

.diff-section .row > div:nth-child(3) .diff-card { --diff-accent: #0fb894; --diff-accent-soft: #e6f9f5; }

.diff-section .row > div:nth-child(4) .diff-card { --diff-accent: #f5a623; --diff-accent-soft: #fff6e6; }

.diff-section .row > div:nth-child(5) .diff-card { --diff-accent: #f0506e; --diff-accent-soft: #feecf0; }







/* Service card */



.service-card {



  display: grid;



  grid-template-columns: 60px 1fr;



  column-gap: 1.25rem;



  align-items: start;



  height: 100%;



  padding: 1.5rem 1.25rem;



  border: 2px solid var(--ver-purple);



  border-radius: var(--radius-md);



  background: transparent;



  position: relative;



  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);



}



.service-card:hover {



  border-color: var(--ver-purple);



  box-shadow: var(--shadow-md);



  transform: translateY(-4px);



}



.service-card .icon-box {



  grid-column: 1;



  grid-row: 1 / span 4;



  width: 56px; height: 56px;



  border-radius: 50%;



  background: var(--blue-050);



  color: var(--ver-purple);



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



  font-size: 1.5rem;



  transition: all .4s var(--ease);



}



.service-card:hover .icon-box { background: var(--ver-purple); color: var(--white); }



.service-card .num {



  grid-column: 2; grid-row: 1;



  position: static;



  justify-self: start;



  font-family: var(--font-head); font-weight: 600; font-size: .78rem;



  letter-spacing: .06em;



  color: var(--ver-purple);



  margin-bottom: .3rem;



}



.service-card h3 { grid-column: 2; grid-row: 2; font-size: 1.15rem; margin-bottom: .5rem; }



.service-card p { grid-column: 2; grid-row: 3; color: var(--gray-700); font-size: .93rem; margin-bottom: .6rem; }



.service-card .link-arrow { grid-column: 2; grid-row: 4; }



@media (max-width: 575px) {



  .service-card { grid-template-columns: 48px 1fr; column-gap: 1rem; }



  .service-card .icon-box { width: 44px; height: 44px; font-size: 1.2rem; }



}



.service-card:hover .icon-box { background: var(--ver-purple); color: var(--white); }



.service-card:hover .num { color: var(--white); background: var(--ver-purple); border-color: var(--ver-purple); }







/* Feature / why-choose-us */



.feature-item {



  display: grid;



  grid-template-columns: auto 1fr;



  gap: 1.25rem;



  padding: 1.75rem;



  background: var(--white);



  border-radius: var(--radius-md);



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



  box-shadow: 0 4px 16px rgba(10,31,68,.06);



  transition: all .4s var(--ease);



  position: relative;



  overflow: hidden;



  min-height: 240px;



}



.feature-item::after {



  content: "";



  position: absolute;



  bottom: 0; right: 0;



  width: 120px; height: 120px;



  background: radial-gradient(circle, var(--blue-050), transparent 70%);



  border-radius: 50%;



  pointer-events: none;



}



.feature-item:hover {



  box-shadow: 0 12px 36px rgba(90,165,255,.18);



  transform: translateY(-8px);



  border-color: var(--blue-500);



  background: linear-gradient(135deg, rgba(90,165,255,.04), rgba(90,165,255,.01));



}



.feature-item .f-icon {



  width: 72px; height: 72px; flex-shrink: 0;



  border-radius: var(--radius-md);



  /* background: linear-gradient(135deg, var(--blue-500), var(--blue-400)); */



  /* color: var(--white); */



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



  font-size: 1.8rem;



  transition: all .4s var(--ease);



  position: relative;



  z-index: 2;



  /* box-shadow: 0 8px 24px rgba(90,165,255,.3); */



}



.feature-item:hover .f-icon {



  /* background: linear-gradient(135deg, var(--ver-purple), #5a02d8); */



  /* box-shadow: 0 12px 36px rgba(75,2,202,.4); */



  transform: scale(1.12);



}



.feature-item h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; color: var(--navy-900); position: relative; z-index: 2; }



.feature-item p { color: var(--gray-700); font-size: .92rem; margin: 0; line-height: 1.6; position: relative; z-index: 2; }







/* Stats */



.stats-section {



  width: 100%;



  margin: 0;



  padding: 0;



}



.stats-band {



  background: linear-gradient(135deg, #6b1fa8 0%, #4b02ca 50%, #3a01a3 100%);



  background-image:



    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.02) 35px, rgba(255,255,255,.02) 70px),



    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.02) 35px, rgba(255,255,255,.02) 70px),



    linear-gradient(135deg, #6b1fa8 0%, #4b02ca 50%, #3a01a3 100%);



  color: var(--white);



  border-radius: 0;



  padding: 3.5rem 0;



  position: relative;



  overflow: hidden;



  width: 100%;



}



.stats-band::before {



  content: "";



  position: absolute;



  top: 0; left: 0; right: 0; bottom: 0;



  background:



    radial-gradient(circle at 20% 50%, rgba(255,255,255,.08), transparent 50%),



    radial-gradient(circle at 80% 80%, rgba(255,255,255,.05), transparent 50%),



    radial-gradient(circle at 40% 20%, rgba(75,2,202,.3), transparent 60%);



  pointer-events: none;



}



@keyframes stat-fade-in {



  from {



    opacity: 0;



    transform: translateY(30px);



  }



  to {



    opacity: 1;



    transform: translateY(0);



  }



}







@keyframes icon-bounce {



  0%, 100% { transform: translateY(0); }



  50% { transform: translateY(-8px); }



}







@keyframes icon-rotate {



  from { transform: rotate(0deg); }



  to { transform: rotate(360deg); }



}







@keyframes counter-pop {



  0% { transform: scale(1); }



  50% { transform: scale(1.1); }



  100% { transform: scale(1); }



}







@keyframes number-slide-in {



  from {



    opacity: 0;



    transform: translateY(20px) scale(0.8);



  }



  to {



    opacity: 1;



    transform: translateY(0) scale(1);



  }



}







@keyframes text-fade-slide {



  from {



    opacity: 0;



    transform: translateX(-15px);



  }



  to {



    opacity: 1;



    transform: translateX(0);



  }



}







@keyframes pulse-text {



  0%, 100% { opacity: 1; }



  50% { opacity: 0.7; }



}







@keyframes hover-glow {



  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.1); }



  50% { box-shadow: 0 0 20px 5px rgba(255,255,255,.08); }



  100% { box-shadow: 0 0 0 0 rgba(255,255,255,.1); }



}







.stat-item {



  text-align: center;



  position: relative;



  z-index: 1;



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 1.5rem;



  padding: 2.5rem 1.5rem;



  border: none;



  border-radius: var(--radius-lg);



  background: rgba(255,255,255,.02);



  backdrop-filter: blur(5px);



  animation: stat-fade-in .8s var(--ease) forwards;



  opacity: 0;



  transition: transform 0.6s ease-out, background 0.6s ease-out, backdrop-filter 0.6s ease-out, box-shadow 0.6s ease-out;



}







.stat-item:hover {



  transform: translateY(-12px) scale(1.05);



  background: rgba(255,255,255,.08);



  backdrop-filter: blur(15px);



  box-shadow: 0 20px 50px rgba(75,2,202,.3);



}







.stat-item:nth-child(1) { animation-delay: 0.1s; }



.stat-item:nth-child(2) { animation-delay: 0.2s; }



.stat-item:nth-child(3) { animation-delay: 0.3s; }



.stat-item:nth-child(4) { animation-delay: 0.4s; }







.stat-item .f-icon {



  width: 70px; height: 70px;



  background: rgba(255,255,255,.08);



  border: 2px solid rgba(255,255,255,.25);



  border-radius: var(--radius-md);



  color: var(--white);



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



  font-size: 2rem;



  transition: transform 0.6s ease-out, background 0.6s ease-out, border-color 0.6s ease-out, box-shadow 0.6s ease-out;



  animation: icon-bounce 2s ease-in-out infinite;



}







.stat-item:nth-child(1) .f-icon { animation-delay: 0s; }



.stat-item:nth-child(2) .f-icon { animation-delay: 0.2s; }



.stat-item:nth-child(3) .f-icon { animation-delay: 0.4s; }



.stat-item:nth-child(4) .f-icon { animation-delay: 0.6s; }







.stat-item:hover .f-icon {



  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(107,140,255,.15));



  border-color: rgba(255,255,255,.5);



  transform: scale(1.2) rotate(15deg);



  box-shadow: 0 10px 30px rgba(255,255,255,.2);



  animation: none;



}







.stat-item .counter {



  font-family: var(--font-head);



  font-size: clamp(2.2rem, 4vw, 3.5rem);



  font-weight: 700;



  color: var(--white);



  display: flex; align-items: center; justify-content: center; gap: .15rem;



  animation: number-slide-in .7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards;



  opacity: 0;



}







.stat-item:nth-child(2) .counter { animation-delay: 0.8s; }



.stat-item:nth-child(3) .counter { animation-delay: 1s; }



.stat-item:nth-child(4) .counter { animation-delay: 1.2s; }







.stat-item .counter .num {



  display: inline-block;



}







.stat-item .counter .plus {



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



  font-size: 1.8rem;



}







.stat-item p {



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



  margin: 0;



  font-size: .95rem;



  letter-spacing: .02em;



  font-weight: 500;



  animation: text-fade-slide .6s ease-out forwards;



  opacity: 0;



}







.stat-item:nth-child(1) p { animation-delay: 1.4s; }



.stat-item:nth-child(2) p { animation-delay: 1.6s; }



.stat-item:nth-child(3) p { animation-delay: 1.8s; }



.stat-item:nth-child(4) p { animation-delay: 2s; }







/* ===== TIMELINE - REFINED & PIXEL-PERFECT ===== */



.timeline-container {



  position: relative;



  max-width: 1000px;



  margin: 0 auto;



  padding: 3rem 2rem;



}







/* Central Timeline Line */



.timeline-line {



  position: absolute;



  left: 50%;



  top: 0;



  bottom: 0;



  width: 2px;



  background: linear-gradient(to bottom, var(--blue-500), var(--blue-400), var(--blue-500));



  transform: translateX(-50%);



  z-index: 0;



}







/* Timeline Row - Base */



.timeline-row {



  display: grid;



  grid-template-columns: 1fr auto 1fr;



  align-items: center;



  gap: 3rem;



  margin-bottom: 6.5rem;



  animation: stat-fade-in .8s var(--ease) forwards;



  opacity: 0;



  position: relative;



}







.timeline-row:nth-child(1) { animation-delay: 0.1s; }



.timeline-row:nth-child(2) { animation-delay: 0.2s; }



.timeline-row:nth-child(3) { animation-delay: 0.3s; }



.timeline-row:nth-child(4) { animation-delay: 0.4s; }







/* Left Card Layout */



.timeline-left-card {



  grid-template-columns: 1fr auto 0;



  padding-right: 1.5rem;



}







.timeline-left-card .timeline-content {



  grid-column: 1;



  text-align: right;



}







.timeline-left-card .timeline-number {



  grid-column: 2;



}







/* Right Card Layout */



.timeline-right-card {



  grid-template-columns: 0 auto 1fr;



  padding-left: 1.5rem;



}







.timeline-right-card .timeline-dot {



  grid-column: 1;



}







.timeline-right-card .timeline-number {



  grid-column: 2;



}







.timeline-right-card .timeline-content {



  grid-column: 3;



  text-align: left;



}







/* Timeline Dot */



.timeline-dot {



  width: 16px;



  height: 16px;



  border-radius: 50%;



  background: var(--blue-500);



  box-shadow: 0 0 0 5px rgba(90,165,255,.15);



  position: relative;



  z-index: 3;



  flex-shrink: 0;



}







/* Timeline Number Circle */



.timeline-number {



  width: 60px;



  height: 60px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--blue-500), var(--blue-400));



  color: var(--white);



  display: flex;



  align-items: center;



  justify-content: center;



  font-family: var(--font-head);



  font-size: 1.35rem;



  font-weight: 700;



  box-shadow: 0 6px 24px rgba(90,165,255,.35);



  transition: all .5s ease-out;



  position: relative;



  z-index: 2;



  flex-shrink: 0;



}







.timeline-row:hover .timeline-number {



  background: linear-gradient(135deg, var(--ver-purple), #5a02d8);



  box-shadow: 0 10px 32px rgba(75,2,202,.45);



  transform: scale(1.12);



}







/* Timeline Content */



.timeline-content {



  position: relative;



  z-index: 1;



}







/* Timeline Card */



.timeline-card {



  background: var(--white);



  padding: 2.2rem;



  border-radius: var(--radius-lg);



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



  box-shadow: 0 4px 16px rgba(10,31,68,.06);



  transition: all .5s ease-out;



  position: relative;



  overflow: hidden;



  min-height: 180px;



  display: flex;



  flex-direction: column;



}







.timeline-card::before {



  content: "";



  position: absolute;



  top: -50%;



  right: -50%;



  width: 200px;



  height: 200px;



  background: radial-gradient(circle, var(--blue-050), transparent 70%);



  border-radius: 50%;



  pointer-events: none;



}







.timeline-row:hover .timeline-card {



  box-shadow: 0 16px 48px rgba(90,165,255,.18);



  transform: translateY(-8px);



  border-color: var(--blue-500);



}







/* Icon */



.timeline-icon {



  width: 50px;



  height: 50px;



  border-radius: var(--radius-md);



  background: linear-gradient(135deg, var(--blue-050), rgba(90,165,255,.06));



  color: var(--blue-500);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.6rem;



  margin-bottom: 1.2rem;



  position: relative;



  z-index: 1;



  transition: all .5s ease-out;



  flex-shrink: 0;



}







.timeline-row:hover .timeline-icon {



  background: linear-gradient(135deg, var(--ver-purple), rgba(75,2,202,.12));



  color: var(--ver-purple);



  transform: scale(1.15) rotate(5deg);



}







/* Body Text */



.timeline-body {



  position: relative;



  z-index: 1;



  flex: 1;



  display: flex;



  flex-direction: column;



}







.timeline-body h4 {



  font-size: 1.25rem;



  font-weight: 600;



  color: var(--navy-900);



  margin: 0 0 0.8rem 0;



  transition: color .5s ease-out;



  line-height: 1.3;



}







.timeline-row:hover .timeline-body h4 {



  color: var(--blue-500);



}







.timeline-body p {



  color: var(--gray-700);



  font-size: 0.94rem;



  line-height: 1.7;



  margin: 0;



  flex: 1;



}







/* Connecting Lines & Arrows */



.timeline-row::before {



  content: "↓";



  position: absolute;



  bottom: -3.2rem;



  left: 50%;



  transform: translateX(-50%);



  color: var(--blue-500);



  font-size: 1.2rem;



  font-weight: bold;



  z-index: 2;



  width: 24px;



  height: 24px;



  display: flex;



  align-items: center;



  justify-content: center;



  background: var(--white);



  border-radius: 50%;



}







.timeline-row::after {



  content: "";



  position: absolute;



  bottom: -2.8rem;



  left: 50%;



  transform: translateX(-50%);



  width: 70px;



  height: 50px;



  border: 2px dashed var(--blue-500);



  border-radius: 10px;



  pointer-events: none;



  z-index: 1;



}







.timeline-row:last-child::before,



.timeline-row:last-child::after {



  display: none;



}







/* ===== LAPTOP / LARGE DESKTOP ===== */



@media (max-width: 1200px) {



  .timeline-container {



    padding: 2.5rem 1.5rem;



  }







  .timeline-row {



    gap: 2.5rem;



    margin-bottom: 6rem;



  }







  .timeline-card {



    padding: 2rem;



    min-height: 170px;



  }



}







/* ===== TABLET & MEDIUM ===== */



@media (max-width: 991px) {



  .timeline-container {



    padding: 2rem 1rem;



  }







  .timeline-row {



    gap: 2rem;



    margin-bottom: 5.5rem;



  }







  .timeline-number {



    width: 56px;



    height: 56px;



    font-size: 1.2rem;



  }







  .timeline-card {



    padding: 2rem;



    min-height: 160px;



  }







  .timeline-icon {



    width: 48px;



    height: 48px;



    font-size: 1.5rem;



    margin-bottom: 1rem;



  }







  .timeline-body h4 {



    font-size: 1.15rem;



    margin-bottom: 0.6rem;



  }







  .timeline-body p {



    font-size: 0.9rem;



  }



}







/* ===== TABLET PORTRAIT ===== */



@media (max-width: 768px) {



  .timeline-line {



    left: 24px;



  }







  .timeline-row {



    grid-template-columns: auto 1fr !important;



    gap: 1.5rem;



    margin-bottom: 4rem;



    padding-left: 3rem;



    padding-right: 0;



    align-items: flex-start;



  }







  .timeline-left-card,



  .timeline-right-card {



    padding: 0 !important;



  }







  .timeline-left-card .timeline-content,



  .timeline-right-card .timeline-content {



    text-align: left !important;



  }







  .timeline-dot {



    position: absolute;



    left: -6px;



    top: 6px;



  }







  .timeline-number {



    display: none;



  }







  .timeline-card {



    padding: 1.8rem;



    min-height: auto;



  }







  .timeline-icon {



    width: 44px;



    height: 44px;



    font-size: 1.3rem;



    margin-bottom: 0.8rem;



  }







  .timeline-body h4 {



    font-size: 1.1rem;



    margin-bottom: 0.5rem;



  }







  .timeline-body p {



    font-size: 0.9rem;



  }







  .timeline-row::before,



  .timeline-row::after {



    display: none;



  }



}







/* ===== MOBILE ===== */



@media (max-width: 480px) {



  .timeline-container {



    padding: 1.5rem 0;



  }







  .timeline-line {



    left: 18px;



  }







  .timeline-row {



    grid-template-columns: auto 1fr;



    gap: 1rem;



    margin-bottom: 3rem;



    padding-left: 2.5rem;



  }







  .timeline-card {



    padding: 1.5rem;



  }







  .timeline-icon {



    width: 40px;



    height: 40px;



    font-size: 1.2rem;



    margin-bottom: 0.7rem;



  }







  .timeline-body h4 {



    font-size: 1rem;



    margin-bottom: 0.4rem;



  }







  .timeline-body p {



    font-size: 0.85rem;



    line-height: 1.6;



  }







  .timeline-dot {



    width: 14px;



    height: 14px;



    box-shadow: 0 0 0 4px rgba(90,165,255,.15);



  }



}







.process-card {



  background: var(--white);



  padding: 2.5rem 2rem;



  border-radius: var(--radius-lg);



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



  box-shadow: 0 4px 16px rgba(10,31,68,.06);



  position: relative;



  overflow: hidden;



  transition: all .5s ease-out;



  display: flex;



  flex-direction: column;



  align-items: center;



  text-align: center;



  gap: 1.25rem;



  height: 100%;



}







.process-card::before {



  content: "";



  position: absolute;



  top: -50%; right: -50%;



  width: 200px; height: 200px;



  background: radial-gradient(circle, var(--blue-050), transparent 70%);



  border-radius: 50%;



  pointer-events: none;



}







.process-card:hover {



  box-shadow: 0 12px 40px rgba(90,165,255,.2);



  transform: translateY(-10px);



  border-color: var(--blue-500);



  background: linear-gradient(135deg, rgba(90,165,255,.02), rgba(90,165,255,.01));



}







.process-num {



  font-family: var(--font-head);



  font-size: 3.5rem;



  font-weight: 700;



  background: linear-gradient(135deg, var(--blue-500), var(--blue-400));



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



  position: relative;



  z-index: 1;



  margin-bottom: 0.5rem;



  line-height: 1;



}







.process-card h4 {



  font-size: 1.2rem;



  font-weight: 600;



  color: var(--navy-900);



  position: relative;



  z-index: 1;



  margin-bottom: 0;



  letter-spacing: -0.5px;



}







.process-card p {



  color: var(--gray-700);



  font-size: 0.93rem;



  line-height: 1.7;



  position: relative;



  z-index: 1;



  margin: 0;



  letter-spacing: 0.3px;



}







.process-step { text-align: center; position: relative; padding: 0 1rem; }



.process-step .step-num {



  width: 74px; height: 74px; margin: 0 auto 1.5rem;



  border-radius: 50%;



  background: var(--gray-100);



  border: 1px dashed var(--gray-300);



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



  font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; color: var(--navy-900);



  position: relative;



}



.process-step .step-num i { position: absolute; bottom: -10px; right: -10px; width: 34px; height: 34px; background: var(--blue-500); color: var(--white); border-radius: 50%; display:flex; align-items:center; justify-content:center; font-size: .9rem; }



.process-step h4 { font-size: 1.05rem; margin-bottom: .5rem; }



.process-step p { color: var(--gray-700); font-size: .9rem; }



.process-line {



  position: absolute;



  top: 37px;



  left: 60%;



  width: 80%;



  border-top: 2px dashed var(--gray-300);



  z-index: 0;



}



@media (max-width: 991px) {



  .process-line {

    display: none !important;

    top: 74px;

    left: 50%;

    width: 2px;

    height: 60px;

    border-top: none;

    border-left: 2px dashed var(--gray-300);

  }



  .process-line::after { display: none; }



}







.process-line::after {



  content: ">";



  position: absolute;



  top: -16px;



  right: -18px;



  color: #E2231A;



  font-size: 2.2rem;



  font-weight: bold;



  line-height: 1;



}







.process-arrow {



  position: absolute;



  top: 50%;



  left: 0;



  right: 0;



  margin: 0 auto;



  width: 8%;



  height: 60px;



  align-items: center;



  justify-content: center;



  transform: translateY(-50%);



  z-index: 1;



}







.arrow-box {



  width: 60px;



  height: 60px;



  border: 2px solid #E2231A;



  border-radius: 8px;



  display: flex;



  align-items: center;



  justify-content: center;



  background: white;



  color: #E2231A;



  font-size: 1.8rem;



  transition: all 0.3s ease;



}







.process-arrow:hover .arrow-box {



  background: #E2231A;



  color: white;



  transform: scale(1.1);



}







/* Testimonials — cargo container yard with glassmorphism card */



.yard-section {



  position: relative;



  overflow: hidden;



 background: linear-gradient(180deg, #5aa5ff2b 0%, var(--gray-50) 100%);



}







/* Soft blue lighting */



.yard-glow {



  position: absolute;



  top: 6%;



  left: 4%;



  width: 480px;



  height: 480px;



  border-radius: 50%;



  background: radial-gradient(circle, rgba(90,165,255,.16), transparent 70%);



  filter: blur(10px);



  pointer-events: none;



  z-index: 0;



}







/* Animated shipping route lines */



.yard-routes {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  z-index: 0;



  pointer-events: none;



}



.yard-route-path {



  fill: none;



  stroke: rgba(90,165,255,.32);



  stroke-width: 2;



  stroke-dasharray: 10 14;



  animation: yardRouteFlow 26s linear infinite;



}



.yard-route-path-2 {



  stroke: rgba(75,2,202,.18);



  animation-duration: 32s;



  animation-direction: reverse;



}



@keyframes yardRouteFlow {



  to { stroke-dashoffset: -480; }



}



@media (prefers-reduced-motion: reduce) {



  .yard-route-path { animation: none; }



}







.yard-row { position: relative; z-index: 1; }







/* Left: container terminal photo */



.yard-photo {



  position: relative;



  min-height: 520px;



  border-radius: var(--radius-lg);



  background-size: cover;



  background-position: center;



  box-shadow: 0 26px 60px rgba(10,31,68,.20);



  overflow: hidden;



  transition: transform .6s var(--ease);



}



.yard-photo::after {



  content: "";



  position: absolute;



  inset: 0;



  background: linear-gradient(120deg, rgba(10,31,68,.5) 0%, rgba(10,31,68,.08) 55%, rgba(75,2,202,.28) 100%);



}



.yard-row:hover .yard-photo { transform: scale(1.015); }







/* Floating card, pulled over the photo */



.yard-carousel { position: relative; z-index: 2; margin-right: -4rem; }







.yard-card {



  position: relative;



  border-radius: var(--radius-lg);



  overflow: hidden;



  background: rgba(255,255,255,.74);



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



  backdrop-filter: blur(22px) saturate(160%);



  -webkit-backdrop-filter: blur(22px) saturate(160%);



  box-shadow: 0 24px 60px rgba(10,31,68,.18), inset 0 1px 0 rgba(255,255,255,.9);



  transition: transform .5s var(--ease), box-shadow .5s var(--ease);



}



.yard-card:hover {



  transform: translateY(-8px);



  box-shadow: 0 34px 76px rgba(10,31,68,.24), inset 0 1px 0 rgba(255,255,255,.9);



}







/* Corrugated container ID bar — the "premium shipping container" detail */



.yc-id-bar {



  position: relative;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: .75rem;



  padding: .7rem 1.5rem;



  background:



    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 4px, transparent 4px 11px),



    linear-gradient(135deg, var(--navy-900), var(--navy-800));



  border-bottom: 3px solid var(--blue-500);



}



.yc-id {



  font-family: var(--font-head);



  font-size: .7rem;



  font-weight: 600;



  letter-spacing: .1em;



  text-transform: uppercase;



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



}



.yc-badge {



  display: inline-flex;



  align-items: center;



  gap: .4rem;



  padding: .35rem .8rem;



  border-radius: var(--radius-pill);



  background: rgba(255,255,255,.12);



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



  color: var(--white);



  font-family: var(--font-head);



  font-size: .7rem;



  font-weight: 600;



  letter-spacing: .04em;



  white-space: nowrap;



}



.yc-badge i { color: var(--blue-400); }







/* Rivets along the id bar, container-fitting detail */



.yc-id-bar::before,



.yc-id-bar::after {



  content: "";



  position: absolute;



  top: 4px;



  width: 4px; height: 4px;



  border-radius: 50%;



  background: rgba(255,255,255,.3);



}



.yc-id-bar::before { left: 6px; }



.yc-id-bar::after { right: 6px; }







.yc-body { position: relative; padding: 2rem 2.1rem 2.1rem;background:#5aa5ff30;



 }







.yc-top {



  display: flex;



  align-items: flex-start;



  gap: .9rem;



  margin-bottom: 1.4rem;



}



.yc-avatar {



  width: 54px; height: 54px;



  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.yc-initials {



  background: linear-gradient(135deg, var(--blue-500), var(--blue-400));



  color: var(--white);



  font-weight: 600;



  font-size: 0.9rem;



  font-family: var(--font-head);



  box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 5px var(--blue-500);



  transition: transform .5s var(--ease);



}



.yard-card:hover .yc-avatar { transform: scale(1.06); }



.yc-meta { display: flex; flex-direction: column; line-height: 1.35; flex: 1; }



.yc-meta strong { font-family: var(--font-head); font-size: 1rem; color: var(--navy-900); }



.yc-role { font-size: .8rem; color: var(--gray-500); }



.yc-company { font-family: var(--font-head); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue-500); margin-top: .1rem; }



.yc-stars { flex-shrink: 0; color: var(--blue-500); font-size: .82rem; letter-spacing: .08em; margin-left: auto; }







.yc-text {



  font-family: var(--font-head);



  font-weight: 500;



  font-size: 1rem;



  line-height: 1.7;



  color: var(--navy-900);



  margin: 0;



  position: relative;



  z-index: 1;



  max-width: 94%;



}



.yc-mark {



  position: absolute;



  right: 1.5rem;



  bottom: 1.25rem;



  font-size: 3rem;



  line-height: 1;



  color: var(--blue-500);



  opacity: .14;



  z-index: 0;



  pointer-events: none;



}







/* Container door-strip edges — subtle, static */



.yard-card::before,



.yard-card::after {



  content: "";



  position: absolute;



  top: 0; bottom: 0;



  width: 8px;



  z-index: 3;



  background:



    repeating-linear-gradient(180deg, rgba(10,31,68,.10) 0 3px, transparent 3px 9px);



  pointer-events: none;



}



.yard-card::before { left: 0; }



.yard-card::after { right: 0; }







/* Nav */



.yc-nav {



  display: flex;



  align-items: center;



  gap: 1rem;



  margin-top: 1.75rem;



  padding-left: .25rem;



}



.yc-nav-btn {



  width: 44px; height: 44px;



  border-radius: 50%;



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



  background: rgba(255,255,255,.8);



  color: var(--navy-900);



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



  font-size: 1rem;



  flex-shrink: 0;



  transition: all .35s var(--ease);



  cursor: pointer;



}



.yc-nav-btn:hover { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); transform: translateY(-2px); }



.yc-dots { display: flex; align-items: center; gap: .45rem; }



.yc-dots button {



  width: 8px; height: 8px;



  border-radius: 50%;



  border: none;



  padding: 0;



  background: var(--gray-300);



  transition: all .35s var(--ease);



}



.yc-dots button.active { width: 26px; border-radius: 4px; background: linear-gradient(90deg, var(--blue-500), var(--ver-purple)); }







.carousel-fade .carousel-item { transition: opacity .7s var(--ease); }







/* ===== Responsive ===== */



@media (max-width: 1199px) {



  .yard-carousel { margin-right: -2.5rem; }



  .yard-photo { min-height: 480px; }



}







@media (max-width: 991px) {



  .yard-photo { min-height: 300px; }



  .yard-carousel { margin-right: 0; margin-bottom: 2rem; padding: 0 1.25rem; }



  .yc-body { padding: 1.75rem 1.5rem; }



  .yard-routes { display: none; }



}







@media (max-width: 575px) {



  .yard-photo { min-height: 240px; }



  .yard-carousel { padding: 0; margin-bottom: 1.5rem; }



  .yc-id-bar { padding: .6rem 1.1rem; flex-wrap: wrap; }



  .yc-body { padding: 1.5rem 1.35rem; }



  .yc-text { font-size: .95rem; max-width: 100%; }



  .yc-mark { font-size: 2.2rem; right: 1.1rem; bottom: 1rem; }



  .yc-avatar { width: 46px; height: 46px; font-size: .78rem; }



  .yc-top { flex-wrap: wrap; }



  .yc-stars { margin-left: 0; width: 100%; }



}







/* News */



.news-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--gray-200); transition: all .35s var(--ease); height: 100%; }



.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-6px); }



.news-thumb {



  height: 210px;



  background-size: cover;



  background-position: center;



  position: relative;



  transition: transform .5s var(--ease);



}



.news-card:hover .news-thumb { transform: scale(1.04); }



.news-thumb .cat-badge {



  position: absolute; top: 1rem; left: 1rem;



  background: var(--blue-500); color: var(--white);



  font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;



  padding: .35rem .8rem; border-radius: var(--radius-pill);



}



.news-body { padding: 1.5rem; }



.news-meta { font-size: .8rem; color: var(--gray-500); display: flex; gap: 1rem; margin-bottom: .75rem; }



.news-meta span { display: inline-flex; align-items: center; gap: .4rem; }



.news-meta span i { flex-shrink: 0; }



.news-body h3 { font-size: 1.1rem; margin-bottom: .6rem; }



.news-body h3 a:hover { color: var(--blue-500); }



.news-body p { font-size: .9rem; color: var(--gray-700); }







/* Fleet */



.fleet-card {



  display: flex;



  flex-direction: column;



  height: 100%;



  border-radius: var(--radius-lg);



  border: 0.5px solid var(--gray-200);



  background: var(--white);



  overflow: hidden;



  box-shadow: 0 4px 16px rgba(10,31,68,.06);



  transition: all .4s var(--ease);



}



.fleet-card:hover {



  box-shadow: 0 16px 44px rgba(10,31,68,.14);



  transform: translateY(-6px);



  border-color: var(--blue-400);



}



.fleet-card-img {



  height: 220px;



  background-size: cover;



  background-position: center;



  position: relative;



}



.fleet-card-img::after {



  content: "";



  position: absolute;



  inset: 0;



  background: linear-gradient(180deg, rgba(2,6,14,0) 40%, rgba(2,6,14,.55) 100%);



}



.fleet-card-badge {



  position: absolute;



  top: 1rem;



  left: 1rem;



  z-index: 1;



  width: 46px;



  height: 46px;



  border-radius: 50%;



  background: rgba(255,255,255,.16);



  backdrop-filter: blur(6px);



  -webkit-backdrop-filter: blur(6px);



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



  color: var(--white);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.3rem;



  transition: all .4s var(--ease);



}



.fleet-card:hover .fleet-card-badge {



  background: var(--blue-500);



  border-color: var(--blue-500);



  transform: scale(1.08);



}



.fleet-card-body { padding: 1.5rem 1.75rem 1.75rem; flex: 1; }



.fleet-card-body h4 { font-size: 1.2rem; margin-bottom: .6rem; color: var(--navy-900); }



.fleet-card-body p { font-size: .93rem; color: var(--gray-700); line-height: 1.7; margin: 0; }







/* Future fleet card — no photo yet, so it gets a distinct pattern treatment */



.fleet-card-img-future {



  background: linear-gradient(135deg, var(--navy-900), var(--ver-purple) 130%);



  overflow: hidden;



}



.fleet-card-img-future::after { display: none; }



.fleet-future-pattern {



  position: absolute;



  inset: 0;



  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 18px);



}



.fleet-card-future .fleet-card-badge {



  background: rgba(255,255,255,.14);



  border-color: rgba(255,255,255,.3);



}



.fleet-card-future:hover .fleet-card-badge {



  background: var(--blue-500);



  border-color: var(--blue-500);



}



@media (max-width: 767px) {



  .fleet-card-img { height: 180px; }



}







/* CTA band */



.cta-band {



  background: linear-gradient(120deg, var(--navy-950), var(--slate-600));



  border-radius: var(--radius-lg);



  padding: 3.5rem;



  color: var(--white);



  position: relative;



  overflow: hidden;



}



.cta-band h2 { color: var(--white); }



.cta-band::after {



  content: "";



  position: absolute; width: 320px; height: 320px; border-radius: 50%;



  background: radial-gradient(circle, rgba(90,165,255,.25), transparent 70%);



  top: -100px; right: -80px;



}







/* CTA — curved gradient card with glow accents and service tags */



.cta-curve {



  position: relative;



  overflow: hidden;



  border-radius: 0px;



  padding: 4rem 3.5rem;



  text-align: center;



  background: linear-gradient(135deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--blue-500) 140%);



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



  box-shadow: 0 30px 70px rgba(10,31,68,.28), inset 0 1px 0 rgba(255,255,255,.08);



}







.cc-glow {



  position: absolute;



  border-radius: 50%;



  pointer-events: none;



  filter: blur(10px);



}



.cc-glow-a {



  width: 420px; height: 420px;



  top: -180px; left: -120px;



  background: radial-gradient(circle, rgba(90,165,255,.35), transparent 70%);



}



.cc-glow-b {



  width: 380px; height: 380px;



  bottom: -200px; right: -100px;



  background: radial-gradient(circle, rgba(75,2,202,.3), transparent 70%);



}







.cc-content { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; }



.cc-title {



  font-size: clamp(1.9rem, 3.4vw, 2.6rem);



  color: var(--white);



  margin-bottom: .9rem;



}



.cc-sub {



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



  font-size: 1.05rem;



  margin-bottom: 2.1rem;



}







.cc-btn {



  display: inline-flex;



  align-items: center;



  padding: 1rem 2.4rem;



  border-radius: var(--radius-pill);



  background: var(--white);



  color: var(--navy-900);



  font-family: var(--font-head);



  font-weight: 600;



  font-size: 1.02rem;



  box-shadow: 0 14px 34px rgba(0,0,0,.22);



  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);



}



.cc-btn:hover {



  transform: translateY(-3px);



  background: var(--blue-500);



  color: var(--white);



  box-shadow: 0 20px 44px rgba(90,165,255,.35);



}







.cc-tags {



  position: relative;



  z-index: 1;



  display: flex;



  flex-wrap: wrap;



  justify-content: center;



  gap: .75rem;



  margin-top: 2.75rem;



  padding-top: 2.25rem;



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



}



.cc-tag {



  display: inline-flex;



  align-items: center;



  gap: .5rem;



  padding: .55rem 1.15rem;



  border-radius: var(--radius-pill);



  background: rgba(255,255,255,.08);



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



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



  font-family: var(--font-head);



  font-size: .82rem;



  font-weight: 500;



  transition: all .35s var(--ease);



}



.cc-tag i { color: var(--blue-400); transition: color .35s var(--ease); }



.cc-tag:hover {



  background: rgba(255,255,255,.16);



  border-color: rgba(255,255,255,.4);



  color: var(--white);



  transform: translateY(-3px);



}



.cc-tag:hover i { color: var(--white); }







@media (max-width: 767px) {



  .cta-curve { border-radius: 32px; padding: 2.75rem 1.75rem; }



  .cc-tags { gap: .5rem; margin-top: 2rem; padding-top: 1.75rem; }



  .cc-tag { font-size: .78rem; padding: .5rem 1rem; }



}







/* Newsletter */



.newsletter-section { background: var(--gray-100); border-top: 1px solid var(--gray-200); }



.newsletter-form .form-control { border-radius: var(--radius-pill) 0 0 var(--radius-pill); border: 1px solid var(--gray-300); padding: .85rem 1.5rem; }



.newsletter-form .btn { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }







/* ---------- Accordion (FAQ) ---------- */



.accordion-custom .accordion-item { border: 1px solid var(--gray-200); border-radius: var(--radius-md) !important; margin-bottom: 1rem; overflow: hidden; }



.accordion-custom .accordion-button {



  font-family: var(--font-head); font-weight: 600; color: var(--navy-900);



  padding: 1.25rem 1.5rem; background: var(--white);



}



.accordion-custom .accordion-button:not(.collapsed) { color: var(--white); background: var(--navy-900); box-shadow: none; }



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



.accordion-custom .accordion-button::after { filter: none; }



.accordion-custom .accordion-button:not(.collapsed)::after { filter: invert(1) brightness(2); }



.accordion-custom .accordion-body { padding: 1.5rem; color: var(--gray-700); font-size: .95rem; }







/* ---------- Forms ---------- */



.form-control, .form-select {



  border-radius: var(--radius-sm);



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



  padding: .8rem 1rem;



  font-size: .95rem;



}



.form-control:focus, .form-select:focus {



  border-color: var(--navy-700);



  box-shadow: 0 0 0 4px rgba(10,31,68,.12);



}



.form-label { font-weight: 500; font-size: .9rem; color: var(--navy-900); margin-bottom: .4rem; }



.form-floating > label { color: var(--gray-500); }







.was-validated .form-control:invalid, .form-control.is-invalid { border-color: #e0453c; }



.was-validated .form-control:valid, .form-control.is-valid { border-color: #2ea56f; }



.invalid-feedback { font-size: .8rem; }







.form-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2.75rem; }







#formSuccessAlert, #newsletterSuccess, #careerFormSuccess { display: none; }







/* ---------- Contact page bits ---------- */



.contact-info-card {



  display: flex; gap: 1.1rem; align-items: flex-start;



  padding: 1.5rem; border-radius: var(--radius-md);



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



  transition: all .3s var(--ease);



}



.contact-info-card:hover { box-shadow: var(--shadow-sm); border-color: transparent; background: var(--gray-50); }



.contact-info-card .ic { width: 50px; height: 50px; border-radius: var(--radius-sm); background: var(--blue-050); color: var(--blue-500); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }



.contact-info-card h5 { font-size: 1rem; margin-bottom: .3rem; }



.contact-info-card p { font-size: .9rem; color: var(--gray-700); margin: 0; }



.contact-info-card p a { color: inherit; text-decoration: none; }



.contact-info-card p a:hover { color: var(--blue-500); }







.map-frame { border-radius: var(--radius-lg); overflow: hidden; height: 420px; border: 1px solid var(--gray-200); }



.map-placeholder {



  height: 100%;



  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));



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



  color: var(--gray-700); gap: .75rem;



}



.map-placeholder i { font-size: 2.5rem; color: var(--blue-500); }







/* ---------- Industries ---------- */



.industry-card {



  border-radius: var(--radius-md);



  overflow: hidden;



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



  height: 100%;



  transition: all .35s var(--ease);



}



.industry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }



.industry-thumb { height: 150px; background: linear-gradient(150deg, var(--navy-900), var(--slate-600)); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: rgba(255,255,255,.9); }



.industry-body { padding: 1.5rem; }



.industry-body h4 { font-size: 1.05rem; margin-bottom: .5rem; }



.industry-body p { font-size: .88rem; color: var(--gray-700); margin: 0; }



/* ---------- Industries: bento grid ---------- */

.industries-bento-section { position: relative; overflow: hidden; background: var(--white); }



.industries-bento-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.industries-bento-decor svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.industries-bento-decor path { fill: none; stroke: #1C3F6E; stroke-width: 2; stroke-dasharray: 8 10; opacity: .06; }



.industries-bento {

  position: relative;

  z-index: 1;

  display: grid;

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

  grid-auto-rows: 190px;

  grid-auto-flow: dense;

  gap: 1.5rem;

}



.bento-card {

  position: relative;

  grid-column: span 1;

  grid-row: span 1;

  border-radius: 22px;

  overflow: hidden;

  box-shadow: 0 12px 28px rgba(28,63,110,.12);

  transition: box-shadow .45s var(--ease), transform .45s var(--ease);

}



.bento-card-lg { grid-column: span 2; grid-row: span 2; }



.bento-card:hover {

  transform: translateY(-6px);

  box-shadow: 0 26px 50px rgba(28,63,110,.24), 0 0 0 2px rgba(28,63,110,.3);

}



.bento-bg {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transition: transform .6s var(--ease);

}



.bento-card:hover .bento-bg { transform: scale(1.08); }



.bento-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(0deg, rgba(10,20,40,.88) 0%, rgba(10,20,40,.4) 55%, rgba(10,20,40,.12) 100%);

}



.bento-icon {

  position: absolute;

  top: 1.1rem;

  left: 1.1rem;

  z-index: 2;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: rgba(255,255,255,.16);

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

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

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--white);

  font-size: 1.1rem;

}



.bento-card-lg .bento-icon { width: 56px; height: 56px; font-size: 1.5rem; top: 1.5rem; left: 1.5rem; }



.bento-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.2rem; }

.bento-card-lg .bento-content { padding: 1.75rem; }



.bento-content h3, .bento-content h4 { color: var(--white); margin-bottom: .35rem; }

.bento-content h3 { font-size: 1.35rem; }

.bento-content h4 { font-size: .98rem; }

.bento-content p { color: rgba(255,255,255,.82); font-size: .86rem; line-height: 1.55; margin-bottom: .6rem; max-width: 340px; }



.bento-link {

  color: var(--white);

  font-size: .8rem;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: .35rem;

  opacity: .82;

  transition: opacity .3s var(--ease), gap .3s var(--ease);

}



.bento-card:hover .bento-link { opacity: 1; gap: .55rem; }



@media (max-width: 991px) {

  .industries-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }

  .bento-card-lg { grid-column: span 2; grid-row: span 1; }

}



@media (max-width: 575px) {

  .industries-bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }

  .bento-card-lg { grid-column: span 1; grid-row: span 1; }

}



/* ---------- Industries: glassmorphism tabbed panel ---------- */

.industries-glass-section {

  position: relative;

  overflow: hidden;

  background: linear-gradient(180deg, #F7FAFD 0%, #EDF2F8 100%);

}



.industries-glass-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.industries-glass-decor svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.industries-glass-decor path { fill: none; stroke: #1C3F6E; stroke-width: 2; stroke-dasharray: 8 10; opacity: .08; }



.ig-glow { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .35; animation: igFloat 10s ease-in-out infinite; }

.ig-glow-1 { width: 320px; height: 320px; background: #1C3F6E; top: -6%; right: 4%; }

.ig-glow-2 { width: 220px; height: 220px; background: #4a90e2; bottom: 6%; left: 2%; animation-delay: 2s; }

.ig-glow-3 { width: 160px; height: 160px; background: #8cc2ff; top: 40%; right: 20%; opacity: .25; animation-delay: 4s; }



@keyframes igFloat {

  0%, 100% { transform: translateY(0) translateX(0); }

  50% { transform: translateY(-18px) translateX(10px); }

}



.industry-tabs {

  position: relative;

  z-index: 1;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: .6rem;

  margin: 2rem 0 2.5rem;

}



.industry-tab {

  border: 1px solid rgba(28,63,110,.16);

  background: rgba(255,255,255,.55);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  color: #1C3F6E;

  font-family: var(--font-head);

  font-size: .82rem;

  font-weight: 600;

  padding: .6rem 1.3rem;

  border-radius: 999px;

  cursor: pointer;

  transition: all .35s var(--ease);

}



.industry-tab:hover { border-color: rgba(28,63,110,.35); background: rgba(255,255,255,.8); }



.industry-tab.active {

  background: linear-gradient(135deg, #1C3F6E, #2f5f9e);

  color: var(--white);

  border-color: transparent;

  box-shadow: 0 8px 24px rgba(28,63,110,.4), 0 0 0 4px rgba(28,63,110,.1);

}



.industry-glass-panel {

  position: relative;

  z-index: 1;

  display: flex;

  min-height: 460px;

  border-radius: 32px;

  overflow: hidden;

  background: rgba(255,255,255,.5);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

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

  box-shadow: 0 30px 70px rgba(28,63,110,.16);

}



.ig-panel-images { position: relative; flex: 0 0 42%; overflow: hidden; }



.ig-panel-image {

  display: none;

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transition: transform .6s var(--ease);

}



.ig-panel-image.active { display: block; animation: igFadeIn .6s var(--ease); }

.industry-glass-panel:hover .ig-panel-image.active { transform: scale(1.06); }



@keyframes igFadeIn { from { opacity: 0; } to { opacity: 1; } }



.ig-panel-content { position: relative; flex: 1; padding: 3rem; display: flex; align-items: center; }



.ig-content-inner { display: none; }

.ig-content-inner.active { display: block; animation: igFadeInUp .55s var(--ease); }



@keyframes igFadeInUp {

  from { opacity: 0; transform: translateY(16px); }

  to { opacity: 1; transform: none; }

}



.ig-icon {

  width: 54px;

  height: 54px;

  border-radius: 50%;

  background: linear-gradient(135deg, #1C3F6E, #4a90e2);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  margin-bottom: 1.1rem;

  box-shadow: 0 10px 24px rgba(28,63,110,.35);

}



.ig-content-inner h3 { font-size: 1.6rem; color: var(--navy-900); margin-bottom: .75rem; }

.ig-content-inner p { color: var(--gray-700); font-size: .95rem; line-height: 1.7; margin-bottom: 1.25rem; max-width: 480px; }



.ig-services { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .6rem; }

.ig-services li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--navy-900); font-weight: 500; }

.ig-services li i { color: #4a90e2; font-size: 1rem; }



.ig-cta {

  background: linear-gradient(135deg, #1C3F6E, #2f5f9e);

  color: var(--white);

  border: none;

  padding: .8rem 1.75rem;

  border-radius: 999px;

  font-weight: 600;

  font-size: .88rem;

  transition: all .35s var(--ease);

}



.ig-cta:hover { box-shadow: 0 12px 28px rgba(28,63,110,.4); transform: translateY(-2px); color: var(--white); }



@media (max-width: 991px) {

  .industry-glass-panel { flex-direction: column; min-height: 0; }

  .ig-panel-images { flex: none; height: 260px; }

  .ig-panel-content { padding: 2rem; }

}



@media (max-width: 575px) {

  .industry-tabs { gap: .4rem; }

  .industry-tab { padding: .5rem 1rem; font-size: .78rem; }

  .ig-content-inner h3 { font-size: 1.35rem; }

}



/* ---------- Industries: why industry focus matters ---------- */

.industry-focus-section { position: relative; overflow: hidden; background: var(--white); }



.if-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }



.if-routes { position: absolute; inset: 0; width: 100%; height: 100%; }

.if-routes path { fill: none; stroke: #4a90e2; stroke-width: 2; stroke-dasharray: 8 10; opacity: .1; }



.if-shape { position: absolute; opacity: .1; }

.if-shape-1 { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(135deg, #4a90e2, #1c3f6e); top: 4%; right: 6%; }

.if-shape-2 { width: 130px; height: 130px; border-radius: 28px; background: linear-gradient(135deg, #4a90e2, #1c3f6e); bottom: 10%; right: 20%; transform: rotate(18deg); }

.if-shape-3 { width: 90px; height: 90px; border-radius: 50%; border: 2px solid rgba(74,144,226,.4); opacity: .3; top: 46%; right: 2%; }



.if-benefit-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }



.if-benefit-card {

  position: relative;

  padding: 2rem 1.5rem;

  border-radius: 22px;

  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(238,246,255,.65));

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 14px 34px rgba(28,63,110,.1);

  transition: transform .4s var(--ease), box-shadow .4s var(--ease);

}



.if-benefit-card::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: 22px;

  padding: 1px;

  background: linear-gradient(160deg, rgba(74,144,226,.55), rgba(28,63,110,.06));

  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  pointer-events: none;

}



.if-benefit-card-offset { margin-top: 0; }



.if-benefit-card:hover { transform: translateY(-10px); box-shadow: 0 26px 50px rgba(28,63,110,.2); }



.if-icon {

  width: 60px;

  height: 60px;

  border-radius: 50%;

  background: linear-gradient(135deg, #4a90e2, #1c3f6e);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.4rem;

  margin-bottom: 1.1rem;

  box-shadow: 0 10px 24px rgba(74,144,226,.35);

  transition: transform .4s var(--ease);

}



.if-benefit-card:hover .if-icon { transform: scale(1.12) rotate(-4deg); }



.if-benefit-card h4 { font-size: 1.02rem; margin-bottom: .5rem; color: var(--navy-900); }

.if-benefit-card p { font-size: .86rem; color: var(--gray-700); line-height: 1.6; margin: 0; }



@media (max-width: 767px) {

  .if-benefit-grid { grid-template-columns: 1fr; }

  .if-benefit-card-offset { margin-top: 0; }

  .if-shape { display: none; }

}





/* ---------- Careers ---------- */



.job-card {



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



  border-radius: var(--radius-md);



  padding: 1.75rem 2rem;



  transition: all .3s var(--ease);



}



.job-card:hover { box-shadow: var(--shadow-sm); border-color: var(--slate-400); }



.job-card .badge-dept { background: var(--blue-050); color: var(--blue-500); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; padding: .4rem .8rem; border-radius: var(--radius-pill); }



.job-meta { font-size: .85rem; color: var(--gray-500); display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: .5rem; }







.value-card {

  text-align: center;

  padding: 2.25rem 1.5rem;

  height: 100%;

  background: var(--white);

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

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-sm);

  transition: transform .4s var(--ease), box-shadow .4s var(--ease);

}



.value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg, var(--shadow-md)); }



.value-card .v-icon {

  position: relative;

  width: 70px; height: 70px;

  margin: 0 auto 1.25rem;

  border-radius: 50%;

  overflow: hidden;

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

  transition: transform .4s var(--ease);

}



.value-card .v-icon i {

  font-size: 2.75rem;

  color: var(--v-accent, var(--blue-500));

  opacity: .32;

  transition: opacity .4s var(--ease), transform .4s var(--ease);

}



.value-card .v-icon img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.value-card:hover .v-icon { transform: scale(1.06); }

.value-card:hover .v-icon i { opacity: .6; transform: scale(1.12); }



.values-row > div:nth-child(1) .v-icon { --v-accent: #5aa5ff; --v-accent-soft: #eaf3ff; }

.values-row > div:nth-child(2) .v-icon { --v-accent: #f5a623; --v-accent-soft: #fff6e6; }

.values-row > div:nth-child(3) .v-icon { --v-accent: #0fb894; --v-accent-soft: #e6f9f5; }

.values-row > div:nth-child(4) .v-icon { --v-accent: #4b02ca; --v-accent-soft: #f1eaff; }



/* ---------- About: Mission / Vision ---------- */

.mv-row .card-elevated {

  border-top: 4px solid var(--mv-accent, var(--blue-500));

  transition: transform .4s var(--ease), box-shadow .4s var(--ease);

}



.mv-row .card-elevated:hover { transform: translateY(-8px); border-top-color: var(--mv-accent, var(--blue-500)); }



.mv-row .rounded-icon-lg {

  background: var(--mv-accent-soft, #eaf3ff);

  color: var(--mv-accent, var(--blue-500));

  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);

}



.mv-row .card-elevated:hover .rounded-icon-lg { background: var(--mv-accent, var(--blue-500)); color: var(--white); transform: scale(1.08); }



.mv-row > div:nth-child(1) .card-elevated { --mv-accent: #5aa5ff; --mv-accent-soft: #eaf3ff; }

.mv-row > div:nth-child(2) .card-elevated { --mv-accent: #4b02ca; --mv-accent-soft: #f1eaff; }







/* ---------- Timeline (About) ---------- */



.timeline { position: relative; padding-left: 2.5rem; }



.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--gray-300); }



.timeline-item { position: relative; padding-bottom: 2.5rem; }



.timeline-item:last-child { padding-bottom: 0; }



.timeline-item::before { content: ""; position: absolute; left: -2.5rem; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-500); border: 4px solid var(--blue-050); }



.timeline-item h4 { font-size: 1.05rem; margin-bottom: .35rem; }



.timeline-item .yr { font-family: var(--font-head); font-weight: 700; color: var(--slate-500); font-size: .95rem; }







/* Team */



.team-card { text-align: center; }



.team-photo { width: 100%; aspect-ratio: 1/1; border-radius: var(--radius-md); background: linear-gradient(150deg, var(--navy-900), var(--slate-600)); display: flex; align-items: center; justify-content: center; font-size: 3rem; color: rgba(255,255,255,.85); margin-bottom: 1.1rem; }



.team-card h4 { font-size: 1rem; margin-bottom: .2rem; }



.team-card span { font-size: .85rem; color: var(--blue-500); font-weight: 500; }



.team-social { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; }



.team-social a { width: 34px; height: 34px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--navy-900); font-size: .85rem; }



.team-social a:hover { background: var(--blue-500); color: var(--white); }







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



   FOOTER



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



.site-footer { background: var(--navy-950); color: rgba(255,255,255,.65); }



.site-footer .footer-top { padding-top: 4.5rem; padding-bottom: 3rem; }



.site-footer h5 { color: var(--white); font-size: 1.05rem; margin-bottom: 1.35rem; }



.site-footer .brand { margin-bottom: 1.25rem; }



.site-footer p { font-size: .9rem; }



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



.footer-links li { margin-bottom: .75rem; }



.footer-links a { font-size: .9rem; color: rgba(255,255,255,.65); }



.footer-links a:hover { color: var(--blue-400); padding-left: 4px; }



.footer-contact li { display: flex; gap: .75rem; font-size: .9rem; margin-bottom: 1rem; align-items: flex-start; }



.footer-contact i { color: var(--blue-400); margin-top: .2rem; }



.social-row { display: flex; gap: .6rem; margin-top: 1.5rem; }



.social-row a {



  width: 38px; height: 38px; border-radius: 50%;



  background: rgba(255,255,255,.06);



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



  color: var(--white); font-size: .9rem;



  transition: all .3s var(--ease);



}



.social-row a:hover { background: var(--blue-500); transform: translateY(-3px); }



.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 1.5rem 0; font-size: .85rem; }



.footer-bottom a { color: rgba(255,255,255,.65); }



.footer-bottom a:hover { color: var(--blue-400); }



.site-footer .footer-top .row { align-items: flex-start; }



@media (min-width: 768px) and (max-width: 991px) {

  .site-footer .footer-top { padding-left: 1.5rem; padding-right: 1.5rem; }

}



@media (max-width: 767px) {

  .site-footer .row > [class*="col-"] { margin-bottom: 2rem; }

  .site-footer .row > [class*="col-"]:last-child { margin-bottom: 0; }

  .site-footer p { line-height: 1.85; margin-bottom: 1.5rem; }

  .site-footer h5 { margin-bottom: 1.5rem; }

  .footer-links li { margin-bottom: 1.35rem; }

  .footer-contact li { margin-bottom: 1.4rem; }

}







/* ---------- Back to top ---------- */



#backToTop {



  position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 1040;



  width: 48px; height: 48px; border-radius: 50%;



  background: var(--blue-500); color: var(--white);



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



  border: none; font-size: 1.1rem;



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



  transition: all .35s var(--ease);



  box-shadow: var(--shadow-md);



}



#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }



#backToTop:hover { background: var(--navy-900); }







/* ---------- WhatsApp floating button ---------- */



.whatsapp-float {



  position: fixed;



  left: 1.75rem;



  bottom: 1.75rem;



  z-index: 1040;



  width: 56px; height: 56px;



  border-radius: 50%;



  background: #25D366;



  color: var(--white);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.6rem;



  box-shadow: 0 8px 24px rgba(37,211,102,.45);



  transition: all .35s var(--ease);



}



.whatsapp-float::before {



  content: "";



  position: absolute;



  inset: 0;



  border-radius: 50%;



  background: #25D366;



  z-index: -1;



  animation: whatsappPulse 2.4s ease-out infinite;



}



.whatsapp-float:hover {



  background: #1ebe57;



  color: var(--white);



  transform: translateY(-4px) scale(1.06);



  box-shadow: 0 14px 32px rgba(37,211,102,.55);



}



@keyframes whatsappPulse {



  0% { transform: scale(1); opacity: .55; }



  100% { transform: scale(1.7); opacity: 0; }



}



@media (prefers-reduced-motion: reduce) {



  .whatsapp-float::before { animation: none; }



}



@media (max-width: 575px) {



      .whatsapp-float {
        left: 1.1rem;
        bottom: 7.1rem;
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    } 



}







/* ---------- Scroll reveal ---------- */



.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }



.reveal.in-view { opacity: 1; transform: translateY(0); }



.reveal-delay-1.in-view { transition-delay: .1s; }



.reveal-delay-2.in-view { transition-delay: .2s; }



.reveal-delay-3.in-view { transition-delay: .3s; }



.reveal-delay-4.in-view { transition-delay: .4s; }



.reveal-delay-5.in-view { transition-delay: .5s; }



.reveal-delay-6.in-view { transition-delay: .6s; }







/* ---------- Preloader ---------- */



#preloader {



  position: fixed; inset: 0; background: var(--navy-950); z-index: 9999;



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



  transition: opacity .5s var(--ease), visibility .5s var(--ease);



}



#preloader.hidden { opacity: 0; visibility: hidden; }



.preloader-inner { position: relative; display: flex; align-items: center; justify-content: center; }



.preloader-logo {



  width: 140px;



  height: auto;



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



}



.loader-ring {



  position: absolute;



  width: 200px; height: 200px;



  border: 3px solid rgba(255,255,255,.15);



  border-top-color: var(--blue-500);



  border-radius: 50%;



  animation: spin 0.9s linear infinite;



}



@keyframes spin { to { transform: rotate(360deg); } }



@keyframes logoPulse {



  0%, 100% { opacity: 1; transform: scale(1); }



  50% { opacity: .7; transform: scale(.92); }



}



@media (prefers-reduced-motion: reduce) {



  .preloader-logo { animation: none; }



}







/* ---------- Sidebar (Service details / News) ---------- */



.side-widget { border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.75rem; margin-bottom: 1.75rem; }



.side-widget h5 { font-size: 1.05rem; margin-bottom: 1.25rem; }



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



.side-list li { border-bottom: 1px solid var(--gray-200); }



.side-list li:last-child { border-bottom: none; }



.side-list a { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; font-size: .92rem; font-weight: 500; color: var(--navy-900); }



.side-list a:hover { color: var(--blue-500); padding-left: 4px; }



.side-list a.active { color: var(--blue-500); }



.side-cta { background: linear-gradient(150deg, var(--navy-900), var(--slate-600)); color: var(--white); border-radius: var(--radius-md); padding: 2rem; text-align: center; }



.side-cta i { font-size: 2rem; color: var(--blue-400); margin-bottom: 1rem; }







.tag-pill { display: inline-block; background: var(--gray-100); color: var(--gray-700); font-size: .8rem; padding: .4rem .9rem; border-radius: var(--radius-pill); margin: 0 .4rem .4rem 0; }



.tag-pill:hover { background: var(--blue-500); color: var(--white); }







/* ---------- Logo marquee (Trusted by) ---------- */



.logo-marquee {



  overflow: hidden;



  width: 100%;



  background: linear-gradient(90deg, var(--blue-500), #7c3aed, var(--ver-purple));



  padding: 0.75rem 0;



}



.logo-marquee-track {



  display: flex;



  align-items: center;



  gap: 4rem;



  width: max-content;



  animation: marquee-scroll 26s linear infinite;



}



.logo-marquee-item {



  font-family: var(--font-head);



  font-weight: 600;



  font-size: 1.15rem;



  letter-spacing: .05em;



  text-transform: uppercase;



  color: var(--white);



  opacity: .95;



  white-space: nowrap;



}



.logo-marquee-icon {



  width: 40px;



  height: 40px;



  border-radius: 50%;



  background: rgba(255,255,255,.14);



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



  display: inline-flex;



  align-items: center;



  justify-content: center;



  font-size: 1rem;



  opacity: 1;



}



@keyframes marquee-scroll {



  from { transform: translateX(0); }



  to { transform: translateX(-50%); }



}



@media (prefers-reduced-motion: reduce) {



  .logo-marquee-track { animation: none; }



}



@media (max-width: 767px) {



  .logo-marquee { padding: 0.75rem 0; }



  .logo-marquee-track { gap: 2rem; }



  .logo-marquee-item { font-size: 0.85rem; }



  .logo-marquee-icon { width: 28px; height: 28px; }



}







/* Utility */



.divider-orange { width: 60px; height: 3px; background: var(--blue-500); border-radius: 3px; margin-bottom: 1.5rem; }



.rounded-icon-lg { width: 90px; height: 90px; border-radius: var(--radius-md); background: var(--navy-900); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }







/* Feature check list */



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



.check-list li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; font-size: .95rem; color: var(--gray-700); }



.check-list i {



  margin-top: .25rem;



  background: linear-gradient(135deg, #2f7bff, #6a35d9);



  -webkit-background-clip: text;



  background-clip: text;



  color: transparent;



}



.page-home .check-list li {



  align-items: center;



  gap: 1rem;



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



  border-radius: var(--radius-md);



  padding: .9rem 1.15rem;



  margin-bottom: .75rem;



  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);



}



.page-home .check-list li:hover {



  border-color: var(--ver-purple);



  box-shadow: var(--shadow-sm);



  transform: translateX(3px);



}



.page-home .check-list i {



  width: 32px;



  height: 32px;



  flex-shrink: 0;



  margin-top: 0;



  border-radius: 50%;



  background: var(--ver-purple);



  -webkit-background-clip: initial;



  background-clip: initial;



  color: var(--white);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: .95rem;



}



/* ---------- Careers: hiring process (watermark numbers, brand purple) ---------- */

.hiring-process-section {

  position: relative;

  overflow: hidden;

  background: linear-gradient(180deg, #FCFAFF 0%, #F3EEFF 100%);

}



.hiring-process-section .section-sub { color: #5B6475; }



.hiring-steps-row {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: stretch;

  margin-top: 2rem;

  height: 420px;

}



.hiring-divider-line {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(74,1,202,.15) 8%, rgba(74,1,202,.15) 92%, transparent);

}



.hiring-step {

  position: relative;

  flex: 1;

  min-width: 0;

  height: 100%;

  padding: 0 .75rem;

}



.hs-dot {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 9px;

  height: 9px;

  background: #4A01CA;

  border-radius: 50%;

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

  box-shadow: 0 0 0 5px rgba(74,1,202,.14), 0 0 10px rgba(139,92,246,.6);

  z-index: 2;

}



.hs-connector {

  position: absolute;

  left: 50%;

  width: 1px;

  background: rgba(74,1,202,.22);

  z-index: 1;

}



.hiring-step-top .hs-connector { bottom: 50%; height: 2.5rem; }

.hiring-step-bottom .hs-connector { top: 50%; height: 2.5rem; }



.hs-content {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: 100%;

  max-width: 210px;

  text-align: center;

  z-index: 1;

}



.hiring-step-top .hs-content { bottom: calc(50% + 2.5rem); }

.hiring-step-bottom .hs-content { top: calc(50% + 2.5rem); }



.hs-num {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  font-family: var(--font-head);

  font-weight: 800;

  font-size: 6.5rem;

  line-height: 1;

  background: linear-gradient(180deg, rgba(74,1,202,.16), rgba(139,92,246,.04));

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  z-index: 0;

  pointer-events: none;

  user-select: none;

  transition: opacity .4s var(--ease);

}



.hiring-step-top .hs-num { bottom: -.25rem; }

.hiring-step-bottom .hs-num { top: -.25rem; }



.hiring-step:hover .hs-num { opacity: .7; }



.hs-icon {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: rgba(255,255,255,.6);

  border: 1.5px solid rgba(74,1,202,.35);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.2rem;

  color: #4A01CA;

  margin: 0 auto .7rem;

  transition: transform .4s var(--ease), box-shadow .4s var(--ease);

}



.hiring-step:hover .hs-icon { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(139,92,246,.12); }



.hiring-step h4 { color: #1F1F3D; font-size: .98rem; margin-bottom: .35rem; }

.hiring-step p { color: #5B6475; font-size: .82rem; line-height: 1.55; margin: 0 auto; }



@media (max-width: 991px) {

  .hiring-steps-row { flex-direction: column; height: auto; gap: 3rem; }

  .hiring-divider-line, .hs-dot, .hs-connector { display: none; }

  .hiring-step { height: auto; }

  .hs-content { position: static; transform: none; max-width: none; padding-top: 2.5rem; }

  .hs-num { font-size: 4rem; top: -.5rem; bottom: auto; }

}



/* ---------- Industries: split-screen scroll list ---------- */

.industries-split-section { position: relative; background: var(--white); }



.industries-split {

  display: flex;

  align-items: flex-start;

  gap: 3.5rem;

  margin-top: 2.5rem;

}



.isplit-media {

  position: sticky;

  top: 110px;

  flex: 0 0 42%;

  height: 65vh;

  max-height: 540px;

  min-height: 360px;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 30px 60px rgba(10,20,40,.2);

}



.isplit-image {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  opacity: 0;

  transform: scale(1.06);

  transition: opacity .9s var(--ease), transform 1.3s var(--ease);

}



.isplit-image.active { opacity: 1; transform: scale(1); }



.isplit-list { flex: 1; min-width: 0; }



.isplit-item {

  position: relative;

  padding: 2.75rem 0;

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

  cursor: pointer;

}



.isplit-item:first-child { border-top: none; }



.isplit-num {

  display: block;

  font-family: var(--font-head);

  font-weight: 800;

  font-size: 2.25rem;

  line-height: 1;

  color: var(--gray-300);

  margin-bottom: .6rem;

  transition: color .45s var(--ease);

}



.isplit-text h3 {

  font-size: 1.3rem;

  color: var(--navy-900);

  opacity: .45;

  margin-bottom: 0;

  transition: opacity .45s var(--ease), color .45s var(--ease), transform .45s var(--ease), font-size .45s var(--ease);

}



.isplit-text p {

  color: var(--gray-700);

  font-size: .92rem;

  line-height: 1.7;

  max-width: 520px;

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  margin: 0;

  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .5s var(--ease);

}



.isplit-line {

  position: absolute;

  left: 0;

  bottom: 0;

  height: 2px;

  width: 0;

  background: var(--blue-500);

  transition: width .5s var(--ease);

}



.isplit-item:hover .isplit-num { color: var(--blue-400); }



.isplit-item.active .isplit-num { color: var(--blue-500); }

.isplit-item.active .isplit-text h3 { opacity: 1; color: var(--blue-600); font-size: 1.55rem; transform: translateX(8px); }

.isplit-item.active .isplit-text p { max-height: 120px; opacity: 1; margin-top: .6rem; }

.isplit-item.active .isplit-line { width: 70px; }



@media (max-width: 991px) {

  .industries-split { flex-direction: column; gap: 0; }

  .isplit-media { position: relative; top: auto; flex: none; width: 100%; height: 280px; margin-bottom: 1rem; }

  .isplit-text h3 { font-size: 1.15rem; }

  .isplit-item.active .isplit-text h3 { font-size: 1.3rem; transform: none; }

}



/* ---------- Industries: image hotspot experience ---------- */

.industries-hotspot-section { position: relative; background: var(--white); }



.hotspot-frame {

  position: relative;

  margin-top: 2.5rem;

  border-radius: 28px;

  overflow: hidden;

  aspect-ratio: 16 / 7;

  box-shadow: 0 30px 70px rgba(10,20,40,.2);

}



.hotspot-image {

  position: absolute;

  inset: 0;

  background-size: cover;

  background-position: center;

  transition: transform 6s linear;

}



.hotspot-frame:hover .hotspot-image { transform: scale(1.06); }



.hotspot-overlay {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(10,20,40,.1), rgba(10,20,40,.3));

  pointer-events: none;

}



.hotspot-marker { position: absolute; z-index: 2; transform: translate(-50%, -50%); background: none; border: none; padding: 0; cursor: pointer; }



.hotspot-pulse {

  position: absolute;

  inset: -14px;

  border-radius: 50%;

  background: rgba(74,144,226,.45);

  animation: hsPulse 2.2s ease-out infinite;

}



@keyframes hsPulse {

  0% { transform: scale(.6); opacity: .8; }

  100% { transform: scale(1.7); opacity: 0; }

}



.hotspot-dot {

  position: relative;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: linear-gradient(135deg, #1C3F6E, #4a90e2);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1rem;

  border: 2px solid rgba(255,255,255,.85);

  box-shadow: 0 6px 18px rgba(10,20,40,.4);

  transition: transform .3s var(--ease);

}



.hotspot-marker:hover .hotspot-dot, .hotspot-marker.active .hotspot-dot { transform: scale(1.15); }



.hotspot-tooltip {

  position: absolute;

  z-index: 3;

  width: 270px;

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

  background: rgba(255,255,255,.78);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

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

  border-radius: 20px;

  padding: 1.25rem 1.4rem;

  box-shadow: 0 20px 50px rgba(10,20,40,.28);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;

}



.hotspot-tooltip.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(28px, -50%); }

.hotspot-tooltip.flip { transform: translate(calc(-100% - 20px), -50%); }

.hotspot-tooltip.flip.active { transform: translate(calc(-100% - 28px), -50%); }



.hotspot-tooltip::after {

  content: "";

  position: absolute;

  top: 50%;

  left: -8px;

  transform: translateY(-50%);

  border: 8px solid transparent;

  border-right-color: rgba(255,255,255,.78);

}



.hotspot-tooltip.flip::after { left: auto; right: -8px; border-right-color: transparent; border-left-color: rgba(255,255,255,.78); }



.hotspot-close {

  position: absolute;

  top: .6rem;

  right: .6rem;

  width: 24px;

  height: 24px;

  border-radius: 50%;

  border: none;

  background: rgba(28,63,110,.08);

  color: #1C3F6E;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: .9rem;

}



.ht-icon {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: linear-gradient(135deg, #1C3F6E, #4a90e2);

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.1rem;

  margin-bottom: .7rem;

}



.hotspot-tooltip h4 { font-size: 1.05rem; color: var(--navy-900); margin-bottom: .4rem; }

.hotspot-tooltip p { font-size: .82rem; color: var(--gray-700); line-height: 1.55; margin-bottom: .7rem; }



.ht-services { list-style: none; padding: 0; margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .35rem; }

.ht-services li { font-size: .78rem; color: var(--navy-900); font-weight: 500; display: flex; align-items: center; gap: .4rem; }

.ht-services li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #4a90e2; flex-shrink: 0; }



.ht-cta { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: #1C3F6E; }

.ht-cta:hover { color: #4a90e2; }



@media (max-width: 767px) {

  .hotspot-frame { aspect-ratio: 4 / 5; }

  .hotspot-dot { width: 32px; height: 32px; font-size: .85rem; }

}



@media (max-width: 575px) {

  .hotspot-tooltip {

    position: fixed;

    left: 50% !important;

    top: auto !important;

    bottom: 1.5rem;

    transform: translateX(-50%) !important;

    width: calc(100% - 2.5rem);

    max-width: 320px;

  }

  .hotspot-tooltip::after { display: none; }

}



/* ---------- Industries: vertical accordion ---------- */

.industries-accordion-section { position: relative; background: var(--white); }



.industries-accordion { margin-top: 2.5rem; border-top: 1px solid var(--gray-200); }



.ia-item { border-bottom: 1px solid var(--gray-200); }



.ia-header {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 1.5rem;

  background: none;

  border: none;

  padding: 1.75rem 0;

  cursor: pointer;

  text-align: left;

}



.ia-num {

  font-family: var(--font-head);

  font-weight: 800;

  font-size: 1.05rem;

  color: var(--gray-300);

  flex-shrink: 0;

  transition: color .4s var(--ease);

}



.ia-title {

  flex: 1;

  font-family: var(--font-head);

  font-size: 1.6rem;

  font-weight: 700;

  color: var(--navy-900);

  opacity: .5;

  transition: opacity .4s var(--ease), color .4s var(--ease), font-size .4s var(--ease), transform .4s var(--ease);

}



.ia-toggle {

  width: 38px;

  height: 38px;

  border-radius: 50%;

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

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--navy-900);

  flex-shrink: 0;

  transition: all .4s var(--ease);

}



.ia-toggle i { transition: transform .4s var(--ease); }



.ia-header:hover .ia-title { opacity: .8; }



.ia-item.active .ia-num { color: var(--blue-500); }

.ia-item.active .ia-title { opacity: 1; font-size: 2rem; color: var(--blue-600); transform: translateX(6px); }

.ia-item.active .ia-toggle { background: var(--blue-500); border-color: var(--blue-500); color: var(--white); }

.ia-item.active .ia-toggle i { transform: rotate(135deg); }



.ia-body-wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .55s var(--ease);

}



.ia-item.active .ia-body-wrap { grid-template-rows: 1fr; }



.ia-body { overflow: hidden; min-height: 0; display: flex; gap: 2.5rem; align-items: stretch; }

.ia-item .ia-body { padding-bottom: 0; }

.ia-item.active .ia-body { padding-bottom: 2.75rem; }



.ia-media {

  position: relative;

  flex: 0 0 42%;

  border-radius: 22px;

  background-size: cover;

  background-position: center;

  overflow: hidden;

  min-height: 320px;

  transition: transform .6s var(--ease);

}



.ia-item.active .ia-media { animation: iaZoom 9s ease-in-out infinite alternate; }



@keyframes iaZoom {

  from { transform: scale(1); }

  to { transform: scale(1.08); }

}



.ia-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

.ia-content p { color: var(--gray-700); font-size: 1rem; line-height: 1.75; margin-bottom: 1.25rem; max-width: 480px; }



.ia-services { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .6rem; }

.ia-services li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--navy-900); font-weight: 500; list-style-type: none; }

.ia-services li::marker { content: none; }

.ia-services li i { color: var(--blue-500); font-size: 1rem; }



.ia-cta {

  background: var(--ver-purple);

  color: var(--white);

  border: none;

  border-radius: 999px;

  padding: .8rem 1.75rem;

  font-weight: 600;

  font-size: .9rem;

  display: inline-flex;

  align-items: center;

  align-self: flex-start;

  transition: all .35s var(--ease);

}



.ia-cta:hover { background: var(--blue-500); color: var(--white); transform: translateY(-2px); }



@media (max-width: 767px) {

  .ia-header { gap: 1rem; padding: 1.4rem 0; }

  .ia-title { font-size: 1.05rem; }

  .ia-item.active .ia-title { font-size: 1.25rem; transform: none; }

  .ia-item .ia-body { flex-direction: column; gap: 1.5rem; }

  .ia-media { flex: none; width: 100%; min-height: 220px; }

}



/* ---------- News Pagination ---------- */

.news-item { display: none; }

.news-item[data-page="1"] { display: block; }

#newsContainer.page-2 .news-item[data-page="1"] { display: none; }

#newsContainer.page-2 .news-item[data-page="2"] { display: block; }



/* ---------- Article detail hero ---------- */

.article-hero { position: relative; padding: 7rem 0 3rem; color: var(--white); background-size: cover; background-position: center; }

.article-hero .cat-badge { position: static; display: inline-block; margin-bottom: 1rem; }

.article-hero h1 { color: var(--white); font-size: clamp(1.9rem, 3.4vw, 2.75rem); max-width: 780px; margin-bottom: 1rem; }

.article-hero-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; color: rgba(255,255,255,.75); font-size: .92rem; }

.article-hero-meta span { display: inline-flex; align-items: center; gap: .45rem; }



/* ---------- Service detail: benefit cards ---------- */

.benefit-card { height: 100%; padding: 1.9rem 1.6rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); transition: all .35s var(--ease); }

.benefit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }

.benefit-icon { width: 54px; height: 54px; border-radius: var(--radius-sm); background: var(--blue-050); color: var(--blue-500); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.2rem; transition: all .35s var(--ease); }

.benefit-card:hover .benefit-icon { background: var(--navy-900); color: var(--white); }

.benefit-card h4 { font-size: 1.05rem; margin-bottom: .5rem; }

.benefit-card p { font-size: .9rem; color: var(--gray-700); margin: 0; }



/* ---------- Service detail: gallery ---------- */

.gallery-item { border-radius: var(--radius-md); overflow: hidden; height: 220px; background-size: cover; background-position: center; transition: transform .5s var(--ease); }

.gallery-item:hover { transform: scale(1.03); box-shadow: var(--shadow-md); }



/* ---------- Service detail: testimonial mini cards ---------- */

.testi-mini { height: 100%; padding: 1.75rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); }

.testi-mini .yc-stars { color: var(--blue-500); font-size: .8rem; margin-bottom: .9rem; }

.testi-mini p { font-size: .92rem; color: var(--gray-700); margin-bottom: 1.25rem; }

.testi-mini .yc-top { display: flex; align-items: center; gap: .75rem; }

.testi-mini .yc-avatar { width: 42px; height: 42px; font-size: .75rem; }

.testi-mini strong { display: block; font-size: .9rem; color: var(--navy-900); }

.testi-mini span { font-size: .78rem; color: var(--gray-500); }



/* ---------- Service detail: CTA two-button ---------- */

.cta-band .btn-outline-light-custom { border: 1px solid rgba(255,255,255,.5); color: var(--white); }

.cta-band .btn-outline-light-custom:hover { background: var(--white); color: var(--navy-900); }



/* ---------- Service detail: sidebar extras ---------- */

.brochure-box { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px dashed var(--gray-300); border-radius: var(--radius-md); }

.brochure-box i { font-size: 1.6rem; color: var(--blue-500); flex-shrink: 0; }

.brochure-box .brochure-title { font-size: .9rem; font-weight: 600; color: var(--navy-900); display: block; }

.brochure-box .brochure-sub { font-size: .78rem; color: var(--gray-500); }

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

.sidebar-contact-list li { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--gray-200); font-size: .9rem; color: var(--gray-700); }

.sidebar-contact-list li:last-child { border-bottom: none; padding-bottom: 0; }

.sidebar-contact-list i { color: var(--blue-500); margin-top: .15rem; }



/* ---------- Commitments band ---------- */

.commitments-band { background: var(--gray-50); border-radius: var(--radius-lg); padding: 3rem 2.5rem; }

.commitment-item { text-align: center; }

.commitment-icon { width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); color: var(--navy-900); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }

.commitment-item h4 { font-size: 1rem; margin-bottom: .4rem; }

.commitment-item p { font-size: .85rem; color: var(--gray-700); margin: 0; }

@media (max-width: 767px) { .commitments-band { padding: 2rem 1.25rem; } }



/* ---------- Asymmetric intro ---------- */

.intro-photo { border-radius: var(--radius-lg); overflow: hidden; height: 460px; background-size: cover; background-position: center; box-shadow: var(--shadow-md); }

@media (max-width: 991px) { .intro-photo { height: 320px; } }



/* ---------- Diagonal feature ribbon ---------- */

.diagonal-ribbon { position: relative; display: flex; padding: 0 24px; }

.diagonal-panel {

  position: relative;

  flex: 1 1 0%;

  min-height: 560px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 2.75rem 2.25rem 3rem;

  color: var(--white);

  background-size: cover;

  background-position: center;

  transition: flex-grow .5s var(--ease), filter .4s var(--ease);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

}

.diagonal-panel + .diagonal-panel { margin-left: -48px; }

.diagonal-panel:nth-child(odd) { clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%); }

.diagonal-panel:nth-child(even) { clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); }

.diagonal-panel:hover { flex-grow: 1.25; filter: brightness(1.1); z-index: 3; }

.diagonal-panel-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(190deg, rgba(6,14,33,.25) 0%, rgba(6,14,33,.88) 100%); z-index: 0; }

.diagonal-panel-navy { background-image: linear-gradient(160deg, var(--navy-950), var(--slate-600)) !important; }

.diagonal-body { position: relative; z-index: 2; }

.diagonal-body h4 { color: var(--white); font-size: 1.1rem; margin-bottom: .5rem; }

.diagonal-body p { color: rgba(255,255,255,.75); font-size: .85rem; margin-bottom: 1rem; }

.diagonal-accent { display: block; width: 36px; height: 3px; background: var(--blue-400); border-radius: 2px; }

.diagonal-num { position: absolute; bottom: .25rem; right: 1.5rem; font-family: var(--font-head); font-weight: 700; font-size: 4.5rem; color: rgba(255,255,255,.14); z-index: 1; line-height: 1; pointer-events: none; }

.diagonal-icon-wrap { position: absolute; top: 2.25rem; left: 50%; transform: translateX(-50%); z-index: 4; width: 64px; height: 64px; border-radius: 50%; background: var(--white); color: var(--navy-900); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: var(--shadow-md); }

@media (max-width: 991px) {

  .diagonal-ribbon { flex-direction: column; padding: 0; gap: 1.5rem; }

  .diagonal-panel { clip-path: none !important; margin-left: 0 !important; min-height: 320px; border-radius: var(--radius-md); }

  .diagonal-icon-wrap { position: static; transform: none; margin: 0 auto 1.1rem; }

  .diagonal-num { font-size: 3.5rem; }

}



/* ---------- Feature highlights: large staggered cards ---------- */

.feature-card-lg { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all .4s var(--ease); height: 100%; }

.feature-card-lg:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }

.feature-card-lg-img { height: 220px; background-size: cover; background-position: center; position: relative; }

.feature-card-lg-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,33,0) 60%, rgba(6,14,33,.25) 100%); }

.feature-card-lg-body { padding: 0 1.85rem 2rem; position: relative; }

.feature-card-lg-icon {

  width: 58px; height: 58px; margin-top: -29px; margin-bottom: 1.1rem;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--blue-500), var(--navy-900));

  color: var(--white);

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

  font-size: 1.4rem;

  border: 4px solid var(--white);

  box-shadow: var(--shadow-sm);

  position: relative; z-index: 2;

}

.feature-card-lg-num { display: block; font-family: var(--font-head); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-500); margin-bottom: .5rem; }

.feature-card-lg h4 { font-size: 1.15rem; margin-bottom: .55rem; }

.feature-card-lg p { color: var(--gray-700); font-size: .9rem; margin: 0; }



/* ---------- Feature highlights: connected network (desktop) ---------- */

.connected-network { position: relative; min-height: 900px; }

.connected-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.connected-svg path { fill: none; stroke: var(--blue-500); stroke-width: 2; stroke-dasharray: 7 7; opacity: .45; vector-effect: non-scaling-stroke; }

.connected-node { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 5px rgba(90,165,255,.18); z-index: 1; transform: translate(-50%, -50%); }

.connected-block {

  position: absolute;

  background: var(--white);

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

  border-radius: 20px;

  padding: 1.85rem 1.75rem;

  box-shadow: var(--shadow-sm);

  z-index: 2;

  transition: transform .4s var(--ease), box-shadow .4s var(--ease);

}

.connected-block:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.connected-block:hover .connected-block-icon { transform: scale(1.12); }

.connected-block:hover ~ .connected-svg path { opacity: .8; }

.connected-block-icon {

  width: 56px; height: 56px; border-radius: 50%;

  background: linear-gradient(135deg, var(--blue-500), var(--navy-900));

  color: var(--white);

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

  font-size: 1.3rem;

  margin-bottom: 1rem;

  box-shadow: var(--shadow-sm);

  transition: transform .4s var(--ease);

}

.connected-block-num { position: absolute; top: 1.5rem; right: 1.65rem; font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--gray-300); }

.connected-block h4 { font-size: 1.05rem; margin-bottom: .5rem; }

.connected-block p { font-size: .85rem; color: var(--gray-700); margin: 0; }

.connected-network-mobile { display: none; }

@media (max-width: 991px) {

  .connected-network { display: none; }

  .connected-network-mobile { display: block; }

}



/* ---------- Feature highlights: hub network (desktop) ---------- */

.hub-network { position: relative; min-height: 820px; }

.hub-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px dashed rgba(90,165,255,.35); pointer-events: none; z-index: 1; }

.hub-ring-1 { width: 340px; height: 340px; }

.hub-ring-2 { width: 440px; height: 440px; border-style: dotted; }

.hub-center {

  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

  width: 260px; height: 260px; border-radius: 50%; overflow: hidden;

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

  box-shadow: var(--shadow-lg);

  border: 6px solid var(--white);

  z-index: 3;

}

.hub-center::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(6,14,33,.15), rgba(6,14,33,.55)); }

.hub-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.hub-svg path { fill: none; stroke: var(--blue-500); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .55; vector-effect: non-scaling-stroke; }

.hub-node { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--blue-500); box-shadow: 0 0 0 4px rgba(90,165,255,.2); z-index: 1; transform: translate(-50%, -50%); }

.hub-panel { position: absolute; border-radius: 20px; padding: 1.75rem; z-index: 2; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }

.hub-panel:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.hub-panel-light { background: var(--white); border: 1px solid var(--gray-100); }

.hub-panel-dark { background: linear-gradient(150deg, var(--navy-900), var(--slate-600)); }

.hub-panel-icon { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .9rem; }

.hub-panel-light .hub-panel-icon { background: var(--blue-050); color: var(--navy-900); }

.hub-panel-dark .hub-panel-icon { background: rgba(255,255,255,.15); color: var(--white); }

.hub-panel-num { position: absolute; top: 1.4rem; right: 1.5rem; font-family: var(--font-head); font-weight: 700; font-size: .8rem; }

.hub-panel-light .hub-panel-num { color: var(--gray-300); }

.hub-panel-dark .hub-panel-num { color: rgba(255,255,255,.4); }

.hub-panel h4 { font-size: 1rem; margin-bottom: .4rem; }

.hub-panel-light h4 { color: var(--navy-900); }

.hub-panel-dark h4 { color: var(--white); }

.hub-panel p { font-size: .82rem; margin: 0; }

.hub-panel-light p { color: var(--gray-700); }

.hub-panel-dark p { color: rgba(255,255,255,.72); }

.hub-network-mobile { display: none; }

@media (max-width: 991px) {

  .hub-network { display: none; }

  .hub-network-mobile { display: block; }

}



/* ---------- KPI strip ---------- */

.kpi-strip { border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); padding: 2.25rem 0; }

.kpi-item { display: flex; align-items: center; gap: .9rem; justify-content: center; }

.kpi-item i { font-size: 1.5rem; color: var(--blue-500); flex-shrink: 0; }

.kpi-item span { font-weight: 600; font-size: .92rem; color: var(--navy-900); }

@media (max-width: 767px) { .kpi-item { justify-content: flex-start; } }



/* ---------- Floating layered gallery ---------- */

.floating-gallery { position: relative; min-height: 620px; margin: 2rem 0 1rem; }

.gallery-frame {

  position: absolute;

  border-radius: 18px;

  overflow: hidden;

  background-size: cover;

  background-position: center;

  box-shadow: var(--shadow-md);

  transform: rotate(var(--r, 0deg));

  transition: transform .45s var(--ease), opacity .4s var(--ease), box-shadow .4s var(--ease);

}

.gallery-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,33,0) 55%, rgba(6,14,33,.6) 100%); z-index: 1; }

.floating-gallery:hover .gallery-frame { opacity: .5; }

.floating-gallery .gallery-frame:hover { opacity: 1 !important; transform: translateY(-12px) rotate(0deg) scale(1.04); box-shadow: var(--shadow-lg); z-index: 20 !important; }

.gallery-frame-label { position: absolute; left: 1.15rem; bottom: 1rem; z-index: 2; color: var(--white); }

.gallery-frame-label i { display: block; width: 26px; height: 2px; background: var(--blue-400); margin-bottom: .5rem; }

.gallery-frame-label span { font-size: .84rem; font-weight: 600; letter-spacing: .02em; }

.floating-gallery-mobile { display: none; }

@media (max-width: 991px) {

  .floating-gallery { display: none; }

  .floating-gallery-mobile { display: block; }

}



/* ---------- Freeform hero-anchored collage ---------- */

.collage-gallery { position: relative; min-height: 920px; margin: 2rem 0 1rem; }

.collage-frame {

  position: absolute;

  border-radius: 24px;

  overflow: hidden;

  background-size: cover;

  background-position: center;

  box-shadow: var(--shadow-sm);

  border: 1px solid rgba(6,14,33,.04);

  transform: rotate(var(--r, 0deg));

  transition: transform .45s var(--ease), box-shadow .45s var(--ease);

}

.collage-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,14,33,0) 45%, rgba(6,14,33,.72) 100%); opacity: .75; transition: opacity .4s var(--ease); z-index: 1; }

.collage-frame:hover { transform: translateY(-10px) scale(1.035) rotate(0deg); box-shadow: var(--shadow-lg); z-index: 30 !important; }

.collage-frame:hover::after { opacity: .92; }

.collage-frame-label { position: absolute; left: 1.2rem; bottom: 1.1rem; right: 1.2rem; z-index: 2; color: var(--white); }

.collage-frame-label i { display: block; width: 28px; height: 2px; background: var(--blue-400); margin-bottom: .55rem; transition: width .35s var(--ease); }

.collage-frame:hover .collage-frame-label i { width: 44px; }

.collage-frame-label span { font-size: .88rem; font-weight: 600; letter-spacing: .01em; }

.collage-frame-hero .collage-frame-label span { font-size: 1.05rem; }

.collage-gallery-mobile { display: none; }

@media (max-width: 991px) {

  .collage-gallery { display: none; }

  .collage-gallery-mobile { display: block; }

}



/* ---------- Article body typography ---------- */

.article-body { font-size: 1.05rem; line-height: 1.85; color: var(--gray-700); }

.article-body p { margin-bottom: 1.4rem; }

.article-body h2 { font-size: 1.6rem; color: var(--navy-900); margin: 2.4rem 0 1.1rem; }

.article-body h3 { font-size: 1.25rem; color: var(--navy-900); margin: 2rem 0 1rem; }

.article-body img { width: 100%; border-radius: var(--radius-md); margin: 1.75rem 0; box-shadow: var(--shadow-sm); }

.article-body ul { padding-left: 0; list-style: none; margin: 0 0 1.5rem; }

.article-body ul li { position: relative; padding-left: 1.85rem; margin-bottom: .8rem; }

.article-body ul li::before { content: "\f26b"; font-family: "bootstrap-icons"; position: absolute; left: 0; top: .05rem; color: var(--blue-500); }

.article-body blockquote { border-left: 4px solid var(--slate-600); background: var(--gray-50); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.5rem 1.75rem; margin: 2rem 0; font-size: 1.15rem; font-style: italic; color: var(--navy-900); }

.article-body blockquote cite { display: block; margin-top: .6rem; font-size: .85rem; font-style: normal; font-weight: 600; color: var(--gray-500); }



/* ---------- Sticky sidebar ---------- */

.article-sidebar-sticky { position: sticky; top: 110px; }



/* ---------- Recent post widget ---------- */

.recent-post { display: flex; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--gray-200); }

.recent-post:last-child { border-bottom: none; padding-bottom: 0; }

.recent-post:first-child { padding-top: 0; }

.recent-post-thumb { flex-shrink: 0; width: 68px; height: 68px; border-radius: var(--radius-sm); background-size: cover; background-position: center; }

.recent-post-body h6 { font-size: .88rem; line-height: 1.4; margin-bottom: .35rem; }

.recent-post-body h6 a { color: var(--navy-900); }

.recent-post-body h6 a:hover { color: var(--blue-500); }

.recent-post-body span { font-size: .78rem; color: var(--gray-500); }



/* ---------- Share buttons (light) ---------- */

.share-row { display: flex; gap: .6rem; flex-wrap: wrap; }

.share-row a { width: 40px; height: 40px; border-radius: 50%; background: var(--gray-100); color: var(--navy-900); display: flex; align-items: center; justify-content: center; font-size: .95rem; transition: all .3s var(--ease); }

.share-row a:hover { background: var(--blue-500); color: var(--white); transform: translateY(-3px); }



/* ---------- Prev/Next article nav ---------- */

.article-nav-link { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; height: 100%; transition: all .3s var(--ease); }

.article-nav-link:hover { border-color: var(--blue-500); box-shadow: var(--shadow-sm); transform: translateY(-3px); }

.article-nav-link .nav-arrow { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--navy-900); font-size: 1.1rem; }

.article-nav-link:hover .nav-arrow { background: var(--blue-500); color: var(--white); }

.article-nav-link .nav-label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin-bottom: .2rem; }

.article-nav-link .nav-title { display: block; font-weight: 600; color: var(--navy-900); font-size: .95rem; }

.article-nav-link.text-lg-end { flex-direction: row-reverse; text-align: right; }



@media (max-width: 991px) {

  .article-sidebar-sticky { position: static; }

}