:root{ --brand:#0b5ed7; --brand2:#5a8dee; --accent:#ff7a3d; --ink:#1d2733; --bg-soft:#f6f9fc; --radius:18px; --wave-h:120px; }
html{ scroll-behavior:smooth; } body{ color:var(--ink); }
.text-accent{ color:var(--accent); } .text-white-85{ color:rgba(255,255,255,.92)!important; }
.btn-accent{ background:var(--accent); color:#fff; border-color:transparent; } .btn-accent:hover{ background:#ff6a20; color:#fff; }

/* NAV */
/* Transparent Header */
.navbar-overlap{

position:absolute;
top:0;
left:0;
width:100%;
z-index:999;

background:transparent;
box-shadow:none;

transition:0.3s;

}

/* White Menu Text */
.navbar-overlap .nav-link{
color:#ffffff !important;
}

.navbar-overlap .nav-link:hover{
color:#ffffff;
}
.navbar-dark .nav-link{ color:#e6eefc; } .navbar-dark .nav-link:hover{ color:#fff; }

/* HERO (lock wave to avoid thin line) */
.hero{ position:relative; overflow:hidden; }
.hero-compact .carousel, .hero-compact .carousel-inner, .hero-compact .carousel-item{ height:74vh; min-height:520px; }
.hero-slide{ position:relative; }
.hero-slide::before{ content:""; position:absolute; inset:0; background:var(--img) var(--pos,center)/cover no-repeat; z-index:0; }
.dim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(180deg, rgba(7,11,26,0) 0%, rgba(7,11,26,.35) 45%, rgba(7,11,26,.7) 85%, rgba(7,11,26,.82) 100%),
  linear-gradient(90deg, rgba(7,11,26,.24) 0%, rgba(7,11,26,.08) 45%, rgba(7,11,26,0) 75%); }
.caption-wrap{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom: calc(var(--wave-h) + 28px); }
.wave-bottom{ position:absolute; left:0; right:0; bottom:0; color:#f6f9fc; z-index:2; height:var(--wave-h); }
.wave-bottom svg{ width:100%; height:100%; display:block; }
.cta-row .btn{ white-space:nowrap; }
@media (max-width:575.98px){ .cta-row{ display:grid !important; grid-auto-flow:row; justify-items:center; row-gap:10px; } }

.carousel-control-prev, .carousel-control-next{ z-index:4; }
.carousel-indicators{ z-index:5; bottom: calc(var(--wave-h)/3); margin-bottom:0; }
.carousel-indicators [data-bs-target]{ width:36px; height:4px; border-radius:999px; background:#000;border:0px; }
.carousel-indicators .active{ background:#183862; }
.fw-bolder{color:#183862;}
.carousel-control-prev-icon, .carousel-control-next-icon{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* ABOUT (reference-inspired) */
.about{ background:#fff; }
.about-media{ position:relative; padding:16px; }
.badge-exp{ position:absolute; left:-6px; top:-6px; background:#fff; border-radius:10px; box-shadow:0 10px 26px rgba(16,24,40,.10); padding:10px 12px; display:flex; flex-direction:column; align-items:center; z-index:2; }
.badge-exp strong{ font-size:24px; color:#121836; line-height:1; }
.badge-exp span{ font-size:12px; color:#4b5563; }
.a-img{ width:100%; border-radius:16px; object-fit:cover; box-shadow:0 16px 34px rgba(16,24,40,.16); }
.a1{ aspect-ratio: 4/3; }
.a2{ position:absolute; right:-10px; bottom:-16px; width:58%; aspect-ratio: 16/10; border:6px solid #fff; }
.red-accent{ position:absolute; left:8%; top:50%; width:44%; height:6px; background:#ef4444; border-radius:8px; box-shadow:0 2px 8px rgba(239,68,68,.4); }

/* INDUSTRIES */
.industries-split{ padding:3.5rem 0 4.5rem; background:linear-gradient(180deg,#f7f9fc 0%,#ffffff 100%); }
.icon-badge{ width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#eef4ff; color:var(--brand); font-size:24px; box-shadow:inset 0 0 0 6px #f7faff; }
.ind-card{ border:none; border-radius:var(--radius); box-shadow:0 10px 26px rgba(16,24,40,.10); transition:transform .35s ease, box-shadow .35s ease; min-height:150px; display:flex; flex-direction:column; justify-content:center; }
.ind-card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(16,24,40,.14); }
.center-hero{ position:relative; height:100%; min-height:560px; display:flex; align-items:center; justify-content:center; }
.center-hero img{ width:100%; height:100%; object-fit:cover; border-radius:22px; box-shadow:0 22px 40px rgba(16,24,40,.18); }
.float-shape{ position:absolute; width:28px; height:28px; border:3px solid #e0e7ff; transform:rotate(45deg); opacity:.8; animation:floater 6s ease-in-out infinite; }
.float-shape.s1{ top:14%; left:8%; } .float-shape.s2{ bottom:12%; right:10%; animation-delay:1.6s; }
@keyframes floater{ 0%,100%{ transform:translateY(0) rotate(45deg);} 50%{ transform:translateY(-10px) rotate(45deg);} }

/* SERVICES */
.section-pad{ padding:4.5rem 0; } .section-pad-compact{ padding:3.5rem 0; } .soft{ background:var(--bg-soft); }
.services-ref{ background:#fff; }
.card{ border:none; border-radius:var(--radius); box-shadow:0 10px 26px rgba(16,24,40,.10); }
.media-wrap{ overflow:hidden; border-top-left-radius:var(--radius); border-top-right-radius:var(--radius); }
.card-img-top{ height:170px; width:100%; object-fit:cover; display:block; transition: transform .6s ease; }
.service-card:hover .card-img-top{ transform:scale(1.05); }
.service-card .card-title{ font-weight:700; }

/* WHY US — ring badge percent */
.why-us .why-card{ border:none; border-radius:var(--radius); box-shadow:0 10px 26px rgba(16,24,40,.10); }
.why-icon{ width:54px; height:54px; border-radius:50%; background:#eef4ff; color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:26px; }
.ring-badge{ --deg:0deg; position:relative; width:64px; height:64px; border-radius:50%; display:grid; place-items:center; }
.ring-badge::before{ content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(#ef4444 var(--deg), #e5e7eb 0); -webkit-mask:radial-gradient(circle at center, transparent 58%, black 60%); mask:radial-gradient(circle at center, transparent 58%, black 60%); }
.ring-badge .num{ position:relative; font-weight:800; font-size:.85rem; color:#ef4444; }

/* CLIENTELE rail */
.clientele .client-rail-wrap{ position:relative; }
.client-rail{ display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; padding:10px 52px; scrollbar-width:none; -ms-overflow-style:none; }
.client-rail::-webkit-scrollbar{ display:none; }
.client-card{ flex:0 0 auto; width:220px; height:110px; background:#fff; border-radius:14px; box-shadow:0 6px 16px rgba(16,24,40,.08); display:flex; align-items:center; justify-content:center; transition: transform .35s ease; }
.client-card img{ max-width:86%; max-height:70%; object-fit:contain; filter:grayscale(100%); opacity:.85; transition:filter .35s ease, opacity .35s ease, transform .35s ease; }
.client-card:hover{ transform:translateY(-4px); }
.client-card:hover img{ filter:grayscale(0%); opacity:1; transform:scale(1.02); }
.rail-nav{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%; border:none; background:#fff; color:#1d2733; box-shadow:0 6px 16px rgba(16,24,40,.12); display:flex; align-items:center; justify-content:center; }
.rail-nav.prev{ left:6px; } .rail-nav.next{ right:6px; } .rail-nav:hover{ background:#f1f5ff; }

/* PROCESS — dotted line + progressive highlight */
.process{ background:#fff; }
.rail-wrap{ --m:28px; position:relative; max-width:1200px; margin-inline:auto; }
.rail-midline{ position:absolute; left:2%; right:2%; top:calc(var(--m)/2 + 2px); height:4px; background-image: radial-gradient(circle,#cfd7e6 1.25px, rgba(0,0,0,0) 1.25px); background-size:12px 4px; background-repeat:repeat-x; opacity:.9; }
.rail-progress{ position:absolute; left:2%; top:calc(var(--m)/2 + 2px); height:4px; width:0%; background-image: radial-gradient(circle,#1f4bb3 1.25px, rgba(0,0,0,0) 1.25px); background-size:12px 4px; background-repeat:repeat-x; transition: width .5s ease; }
.rail{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-start; gap:20px; overflow:visible; }
.step{ width:clamp(140px, 18vw, 200px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; opacity:0; transform:translateY(12px); }
.marker{ width:var(--m); height:var(--m); border-radius:50%; background:#fff; border:2.5px solid #dfe7fb; display:flex; align-items:center; justify-content:center; font-weight:800; color:#1f4bb3; box-shadow:0 4px 12px rgba(16,24,40,.10); font-size:.9rem; z-index:1; }
.icon{ width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#ffffff,#f3f6ff); border:1px solid #e6ecfb; box-shadow:0 10px 24px rgba(16,24,40,.10); color:#1f4bb3; font-size:24px; transition: transform .24s cubic-bezier(.2,.7,.2,1), box-shadow .24s ease; }
.step.in{ opacity:1; transform:none; transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1); }

/* FAQ & Footer */
.fancy-acc .accordion-item{ border:1px solid #e8eef7; border-radius:14px; box-shadow:0 8px 22px rgba(16,24,40,.08); overflow:hidden; }
.fancy-acc .accordion-button{ font-weight:700; }
.fancy-acc .accordion-button:not(.collapsed){ background:#f7faff; color:#0b2244; box-shadow:none; }
.fancy-acc .accordion-button:focus{ box-shadow:none; border-color:#cfe0ff; }
.site-footer{ background:#0b1020; color:#d7deea; }
.site-footer a{ color:#e6eefc; text-decoration:none; } .site-footer a:hover{ text-decoration:underline; }
.site-footer .ft-title{ font-weight:800; font-size:.92rem; color:#e6eefc; margin-bottom:.5rem; }
.site-footer .ft-list{ list-style:none; padding:0; margin:0; display:grid; gap:.45rem; }
.site-footer .soc{ width:36px; height:36px; border-radius:50%; background:#121836; display:flex; align-items:center; justify-content:center; color:#e6eefc; }
.site-footer .soc:hover{ background:#182045; }
.text-footer{ color:#cdd6ee !important; }

/* Back-to-top */
.to-top{ position:fixed; right:14px; bottom:14px; width:40px; height:40px; border-radius:50%; border:none; background:#121836; color:#fff; display:grid; place-items:center; box-shadow:0 10px 22px rgba(0,0,0,.25); opacity:0; visibility:hidden; transform:translateY(8px); transition: all .25s ease; z-index:1060; }
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:#1a2455; }
.to-top i{ font-size:22px; line-height:1; }


/* =========================
   CONTACT PAGE ONLY (scoped)
   Keeps curve visible; breadcrumb aligned & never clipped
   ========================= */
.contact-hero{
  /* top offset handled by your existing JS; add enough bottom to clear wave */
  padding: 88px 0 64px;
  position: relative;
  color: #fff;
  isolation: isolate;
}
@media (min-width: 992px){
  .contact-hero{ padding: 112px 0 76px; }
}

/* Background + overlay (separate class names so they don't collide with home hero) */
.contact-hero .ch-bg{
  position: absolute; inset: 0;
  background-size: cover; background-position: center 55%;
  filter: saturate(1.05);
  z-index: 0;
}
.contact-hero .ch-dim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,11,26,.60), rgba(7,11,26,.82));
  z-index: 1;
}

/* Solid breadcrumb panel: always readable & aligned to .container grid */
.contact-hero .crumb-panel{
  position: relative;
  z-index: 3;               /* above wave */
  margin-top: 18px;
  padding: 12px 0 14px;
}

/* Breadcrumb pills */
.contact-hero .crumb-solid .breadcrumb{
  --crumb-border:#e6eef5;
  margin: 0; padding: 0;
}
.contact-hero .crumb-solid .breadcrumb-item a{
  color: #0e2233; text-decoration: none;
  padding: .38rem .70rem;
  border: 1px solid var(--crumb-border);
  background: #f7f9fc;
  border-radius: 999px;
  transition: all .2s ease;
  display: inline-flex; align-items: center; gap: .4rem;
}
.contact-hero .crumb-solid .breadcrumb-item a:hover{
  background: #eef4fb; transform: translateY(-1px);
}
.contact-hero .crumb-solid .breadcrumb-item + .breadcrumb-item::before{
  color: #51677b;
}
.contact-hero .crumb-solid .breadcrumb-item.active{
  color: #51677b;
  padding: .38rem .70rem;
  border: 1px dashed var(--crumb-border);
  background: #f7f9fc;
  border-radius: 999px;
}

/* Quick actions row beneath breadcrumb (phone removed) */
.contact-hero .crumb-actions{
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem;
}
.contact-hero .crumb-chip{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .52rem .8rem; border-radius: 10px;
  background: #f7f9fc; color: #0e2233; border: 1px solid #e6eef5;
  font-size: .95rem; transition: all .2s ease; text-decoration: none;
}
.contact-hero .crumb-chip:hover{ background: #eef4fb; transform: translateY(-1px); }

/* Curve (wave): sits under panel; never clips the breadcrumbs */
.contact-hero .crumb-wave{
  position: absolute; left: 0; right: 0; bottom: -1px;
  color: var(--brand, #0b5ed7);
  z-index: 1;                         /* lower than .crumb-panel */
  height: var(--wave-h, 120px);       /* use your existing design token */
}
.contact-hero .crumb-wave svg{ display: block; width: 100%; height: 100%; }

/* Readability helper to complement your existing tokens */
.text-white-75{ color: rgba(255,255,255,.92) !important; }

/* Subtle ease so first content after header never collides with curve */
main .section-pad:first-of-type{ margin-top: 8px; }
/* Hover Dropdown for Desktop */
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  .navbar .dropdown-menu {
    display: none;
  }
}
#benefits-typography .benefits-list {
    list-style: none;
    padding-left: 0;
  }
  #benefits-typography .benefits-list li {
    position: relative;
    padding-left: 28px;                /* space for the check */
    font-size: 1rem;                   /* clean, readable */
    line-height: 1.55;
    color: #243648;                    /* deep slate text */
  }
  #benefits-typography .benefits-list li::before {
    content: "✓";                      /* typographic checkmark */
    position: absolute;
    left: 0;
    top: 0;
    color: #2f6bd8;                    /* brand-ish blue accent */
    font-weight: 700;
    line-height: 1.55;
  }

  /* Refined spacing on large screens */
  @media (min-width: 992px) {
    #benefits-typography .benefits-list li {
      margin-bottom: 6px;
    }
  }

  /* Compact, elegant layout on small screens */
  @media (max-width: 576px) {
    #benefits-typography .benefits-list li {
      padding-left: 24px;
      font-size: .98rem;
    }
  }
  
   .process-line-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    position: relative;
    padding-top: 30px;
  }

  /* Horizontal connecting line */
  .process-line-wrapper::before {
    content: "";
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    height: 4px;
    background: #d9e2ec;
    z-index: 0;
  }

  /* Circles */
  .process-circle {
    width: 58px;
    height: 58px;
    background: var(--brand, #0d6efd);
    border-radius: 50%;
    color: white;
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  /* Step container */
  .process-step {
    width: 20%;
    text-align: center;
  }

  @media (max-width: 768px) {
    .process-line-wrapper {
      flex-direction: column;
    }

    .process-line-wrapper::before {
      width: 4px;
      left: 28px;
      right: auto;
      height: 100%;
    }

    .process-step {
      width: 100%;
      text-align: left;
      padding-left: 65px;
      position: relative;
    }

    .process-circle {
      position: absolute;
      left: 0;
      top: 0;
    }
  }
  /* Outer frame */
  #industries-serve-4-3-fixed .industries-frame{
    border: 1px solid #e6edf7;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }

  /* Horizontal divider between the two rows (full width) */
  #industries-serve-4-3-fixed .row-divider{
    height: 1px;
    background: #eaeffe;
  }

  /* Each cell gets separators (we'll remove on edges below) */
  #industries-serve-4-3-fixed .industry-cell{
    border-right: 1px solid #eaeffe;
  }

  /* --- FIRST ROW (4 cols at md+) --- */
  @media (min-width: 768px){
    /* Remove right border on the 4th item of first row */
    #industries-serve-4-3-fixed .row:first-of-type .industry-cell:nth-child(4){
      border-right: none;
    }
  }

  /* --- SECOND ROW (3 centered cols at md+) --- */
  @media (min-width: 768px){
    /* Remove right border on the 3rd (last) item of second row */
    #industries-serve-4-3-fixed .row.justify-content-center .industry-cell.second-row:nth-last-child(1){
      border-right: none;
    }
  }

  /* Small/XS breakpoints: remove vertical separators since it's single column */
  @media (max-width: 767.98px){
    #industries-serve-4-3-fixed .industry-cell{
      border-right: none !important;
      border-bottom: 1px solid #eaeffe;
    }
    /* Remove last bottom border (last card) */
    #industries-serve-4-3-fixed .industry-cell:last-child{
      border-bottom: none;
    }
    /* Hide the row-divider on mobile to avoid double lines */
    #industries-serve-4-3-fixed .row-divider{ display:none; }
  }

  /* ---- 4:3 ratio ---- */
  #industries-serve-4-3-fixed .ratio-43{
    aspect-ratio: 4 / 3;
    position: relative;
    width: 100%;
  }
  @supports not (aspect-ratio: 4 / 3){
    #industries-serve-4-3-fixed .ratio-43{
      height: 0; padding-top: 75%;
    }
  }
  #industries-serve-4-3-fixed .ratio-43 > .industry-card{
    position: absolute; inset: 0;
  }

  /* Card content — center everything */
  #industries-serve-4-3-fixed .industry-card{
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 18px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  #industries-serve-4-3-fixed .industry-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(11, 94, 215, 0.08);
    background: #fbfdff;
  }

  /* Icon chip (centered) */
  #industries-serve-4-3-fixed .icn{
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: #eef4ff;
    border: 1px solid #dbe6fb;
    color: #2f6bd8;
    margin-bottom: 10px;
  }
  #industries-serve-4-3-fixed .icn i{ font-size: 26px; line-height: 1; }

  /* Text */
  #industries-serve-4-3-fixed .title{
    margin: 4px 0 4px;
    color: #142a3b;
    font-weight: 700;
    text-align: center;
    text-wrap: balance;
  }
  #industries-serve-4-3-fixed .desc{
    margin: 0;
    color: #5a6b7c;
    font-size: .92rem;
    max-width: 240px;
    text-align: center;
  }
  
  /* Sanjit Facilities dropdown fix */
nav ul li ul {
    left: auto !important;
    right: 0 !important;
}
/* Slide Up Popup */

.metal-popup{

position:fixed;
right:80px;
bottom:-60px;
background:#f58220;
padding:14px 28px;
z-index:9999;
border-radius:3px;
box-shadow:0px 6px 18px rgba(0,0,0,0.25);

animation:slideUp 1s forwards;
animation-delay:1s;

}

@keyframes slideUp{

from{
bottom:-60px;
}

to{
bottom:20px;
}

}

.metal-popup a{

color:white;
text-decoration:none;
font-size:16px;
font-weight:500;

}

.metal-popup:hover{

background:#d96c10;

}
.call-sticky {
    position: fixed;
    top: 55%;
    right: -145px;
    transform: translateY(-50%);
    transition: 0.4s;
    z-index: 9999;
}

.call-sticky:hover {
    right: 0;
}

.call-sticky a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* Blue Icon Box */
.phone-icon {
    background: #183862;
    color: #fff;
    padding: 15px;
    font-size: 22px;
    border-radius: 6px 0 0 6px;
    font-weight: bold;
}

/* White Text Box */
.phone-text {
    background: #ffffff;
    color: #1e40af;
    padding: 10px 15px;
    font-size: 14px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}