/* .row.justify-content-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.stat-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.product-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.product-row > div {
    float: none !important;   /* overrides Bootstrap 3 floats */
}
/* PRIMARY THEME COLORS */
.btn-primary,
.progress-bar,
.panel-primary > .panel-heading,
.navbar-default,
.dropdown-menu > .active > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .active > a {
   
    border-color: #45e2f3 !important;
    color: #ffffff !important;
}

/* Hover state — slightly deeper gradient */
.btn-primary:hover,
.navbar-default .navbar-nav > li > a:hover {
    background-image: linear-gradient(to bottom right, #1FB6FF, #1FB6FF) !important;
    background-color:#1FB6FF!important;
}

/* Remove old button shadows (gives a modern flat look) */
.btn-primary {
    box-shadow: none !important;
    text-shadow: none !important;
}
#home {
    background:
       
        url('../uploads/landingimage.png') center center/cover no-repeat;
    min-height: 800px;
    display: flex;
    align-items: center;
}


/* ===============================
   HOME BACKGROUND SLIDER (MANUAL)
   =============================== */

#home {
    min-height: 910px;
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: background-image 0.8s ease-in-out;
}


/* MOBILE */
@media (max-width: 768px) {
    .slider-arrow {
        font-size: 32px;
        padding: 0 px 12px;
    }
} */





.btn-primary {
  background: linear-gradient(135deg, #1FB6FF, #1FB6FF);
  border: none;
  color: white;
}

.navbar-nav > li > a.active,
.navbar-nav > li > a:hover {
    background-color:#1FB6FF!important;
    background-image: none !important;
    color: #fffefe !important;
    border-radius: 25px;
}

/* Keep navbar tabs black on hover/focus (override theme gradients) */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: #000000 !important;
    background-image: none !important;
    color: #070505 !important;
}

.contact{
    color: #083b44;
}
#home .big-tagline {
    background: rgba(255,255,255,0.9);
    padding: 12px 36px;          /* ⬇ less height, ⬅➡ more width */
    border-radius: 12px;
    margin-left: 0px;
    display:inline-block;
    max-width: 800px;            /* ⬅ wider box */
    width: auto;                 /* adapts to content */
}

/* Text styling */
#home .big-tagline h1
 {
    color: #000000;
   margin-top: 8px;
    font-size: 50px;    
    font-weight: 500p;
}
#home .big-tagline p{
    color: #000000;
   
}

/* Animation */
#home .big-tagline {
    animation: fadeInUp 0.8s ease forwards;
    opacity: 0;
}


/* ===============================
   PRODUCT CATEGORY GRID FIX
================================ */

/* Make all service cards same height */
#services .service-widget {
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Fix image container height */
#services .post-media {
    height: 300px;              /* SAME height for all images */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 15px;
}

/* Make images fit nicely */
#services .post-media img {
    max-height: 90%;
    max-width: 100%;
    object-fit: contain; 
    margin-left:  0px !important;       /* IMPORTANT */
}

/* Title alignment */
.section-title h3 {
    min-height: 48px;
    margin: 0;
    font-style: bold;
    background: #45e2f3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.seo-services .section-title h3{
     min-height: 48px;
    margin: 0;
    font-style: bold;
    background: #1FB6FF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
    



#preloader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display:flex;
    justify-content:center;
    align-items:center;

    background:#45e2f3;
}

#cupcake .letter{
    color: #ffffff !important;
}

#cupcake .cupcakeCore{
    background: #ffffff !important;
}
body.seo_version #preloader{
    background: #45e2f3;
}

.all-page-title {
    background-color:  #17a8ec; }

.message-box  {
        text-align: justify;
        letter-spacing: 0.3px;
}    




/* ============================
   CAPABILITIES CARD STYLING
   ============================ */

#capabilities {
    padding: 80px 0;
}

/* Card container */
.capability-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 25px;
    min-height: 260px;              /* SAME HEIGHT FOR ALL */
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transition: all 0.35s ease;
    position: relative;
    text-align: center;
}

/* Hover animation */
.capability-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* Card heading */
.capability-card h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #0b3c5d;
}

/* Card content */
.capability-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
}

/* Subtle top highlight bar */
.capability-card::before {
    content: "";
    width: 50px;
    height: 4px;
    background: #ff9800;
    display: block;
    margin: 0 auto 18px;
    border-radius: 2px;
}

/* ===============================
   LEFT ALIGNED AWARDS TIMELINE
   =============================== */

.timeline {
  position: relative;
  list-style: none;
  padding: 60px 0 120px 90px; /* bottom padding FIXES footer overlap */
  margin-bottom: 50px;
}

/* Vertical line */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 40px;
  width: 3px;
  height: 100%;
  background: #45e2f3;
}
.timeline > li:last-child {
  margin-bottom: 0;
  padding-bottom: 50px;
}
.timeline {
  padding-bottom: 100px; 
}


/* Timeline item */

/* Year badge ON the line */
.timeline-badge {
  position: absolute;
  left: 20px; /* perfectly centered on line */
  top: 0;
  transform: translateX(-50%);
  background: #45e2f3;
  color: #fff;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* Award card */
.timeline-panel {
  margin-left: 80px;
  background: #fff;
  padding: 22px 26px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

/* Awards list */
.award-list {
  padding-left: 18px;
}

.award-list li {
  margin-bottom: 8px;
  font-size: 24px;
  color: #444;
  line-height: 1.6;
}



/* Animation */
.timeline > li {
    position: relative;
  margin-bottom: 80px; /* FIX spacing between cards */
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s ease;
}

.timeline > li.show {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px) {
  .timeline {
    padding-left: 70px;
  }

  .timeline-panel {
    margin-left: 60px;
  }
}
/* Bullet animation base */
.award-list li {
  opacity: 0;
  transform: translateY(12px);
  transition: all 0.5s ease;
}

/* Visible state */
.timeline > li.show .award-list li {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays */
.timeline > li.show .award-list li:nth-child(1) { transition-delay: 0.1s; }
.timeline > li.show .award-list li:nth-child(2) { transition-delay: 0.2s; }
.timeline > li.show .award-list li:nth-child(3) { transition-delay: 0.3s; }
.timeline > li.show .award-list li:nth-child(4) { transition-delay: 0.4s; }
.timeline > li.show .award-list li:nth-child(5) { transition-delay: 0.5s; }


/* ===============================
   CONTACT PAGE – THEME OVERRIDES
================================ */

/* Contact section background */
#support.section.wb {
    background: #f7fbfd;
}

/* Contact form card */
.contact_form {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(31,182,255,0.15);
    height: 650px;
}

/* Inputs */
.contact_form .form-control {
    border-radius: 10px;
    border: 1px solid #e2f2f6;
    color: #003b44;
}

.contact_form .form-control:focus {
    border-color: #1FB6FF;
    box-shadow: 0 0 0 2px rgba(31,182,255,0.15);
}

/* Dropdown */
.bootstrap-select > .btn {
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2f2f6;
}

/* Submit button */
#submit {
    background: #1FB6FF;
    border: none !important;
    color: #fff !important;
    border-radius: 30px;
    font-weight: 600;
    transition: .3s;
    font-size: 20px;
}

#submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(31,182,255,0.35);
}

/* Section headings */
.section-title h3 {
    background: #45b6f3;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Map container */
.map-box {
    border-radius: 16px;
    overflow: hidden;
    height: fit-content;
    padding-bottom: 100px;
    height: 800x;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

/* ===============================
   ALL PAGE TITLE ANIMATION
================================ */

.all-page-title {
    position: relative;
    overflow: hidden;
}

/* subtle background zoom */
.all-page-title::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    animation: bgZoom 1.5s ease forwards;
    z-index: 0;
}

/* keep content above overlay */
.all-page-title > * {
    position: relative;
    z-index: 1;
}

/* Title animation */
.all-page-title h1 {
    opacity: 0;
    transform: translateY(-30px);
    animation: titleFade 0.9s ease forwards;
    animation-delay: 0.3s;
}

/* Breadcrumb animation */
.page-info {
    opacity: 0;
    transform: translateY(25px);
    animation: crumbFade 0.9s ease forwards;
    animation-delay: 0.6s;
}




/* Keyframes */
@keyframes titleFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes bgZoom {
    to {
        transform: scale(1);
    }
}

/* reset old overlay behaviour */
.da-thumbs .pitem a div{
    top: 0;
    left: 0;
    height: 50%;                 /* only half image */
    transform: translateY(-100%);
    transition: all .35s ease;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.25),
        rgba(0,0,0,0.55)
    );
}

/* slide overlay down on hover */
.da-thumbs .pitem:hover a div{
    transform: translateY(0);
}

/* heading ALWAYS visible & sits at top */
.da-thumbs .pitem a div h3{
    margin: 0;
    padding: 10px 12px;
    background: rgba(0,0,0,.35);
    display: inline-block;
    font-size: 18px;
}

/* description starts hidden */
.da-thumbs .pitem a div p{
    opacity: 0;
    padding: 10px 12px;
    transition: opacity .3s ease;
}

/* fade description in only on hover */
.da-thumbs .pitem:hover a div p{
    opacity: 1;
}
/* ===============================
   ABOUT PAGE – HIGHLIGHT TEXT
================================ */

.about-highlight {
    font-size: 20px;
    line-height: 1.9;
    font-weight: 400;
    color: #083b44;
    max-width: 900px;
    margin: 30px auto 0;
    text-align: center;
    position: relative;
    padding: 20px 30px;
}

/* Gradient accent underline */
.about-highlight::after {
    content: "";
    width: 120px;
    height: 4px;
    background: #45e2f3;
    display: block;
    margin: 18px auto 0;
    border-radius: 3px;
}

/* Soft fade-in animation */
.about-highlight {
    opacity: 0;
    transform: translateY(20px);
    animation: aboutTextFade 0.9s ease forwards;
    animation-delay: 0.4s;
}

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

/* =====================================
   PUSH HERO IMAGE BELOW NAVBAR
   ===================================== */

/* --- 1. Base Banner Styling --- */
.all-page-title {
    width: 100%;
    /* Default height for normal laptops */
    min-height: 500px; 
    
    background-repeat: no-repeat;
    background-size: cover; 
    /* Centers the image vertically so heads aren't cut off */
    background-position: center top; 
    
    position: relative;
    overflow: hidden;
}

/* --- 2. The Pan Animation (Updated for Group Photos) --- */
.pan-animation {
    animation: panImage 30s linear infinite alternate; 
}

@keyframes panImage {
    0% {
        background-position: 0% 20%; /* Focus slightly on top-left */
    }
    100% {
        background-position: 100% 20%; /* Focus slightly on top-right */
    }
}

/* --- 3. WIDE SCREEN FIX (80% Zoom / Large Monitors) --- */
/* This is the part that fixes your specific problem */
@media (min-width: 1500px) {
    .all-page-title {
        /* We force the banner to be MUCH taller on wide screens.
           This restores the aspect ratio so the people aren't cropped. */
        min-height: 700px !important; 
    }
}

/* --- 4. Mobile Fix (Keep faces visible on phones) --- */
@media (max-width: 767px) {
    .all-page-title {
        min-height: 350px;
        background-position: center center;
    }
}

/* ===============================
   NAVBAR & LOGO FIXES (GLOBAL)
   =============================== */

/* Desktop Logo settings */
.navbar-brand {
    padding: 0;
    height: 100px; /* Keeps desktop height tall */
    display: flex;
    align-items: center;
}

.navbar-brand img {
    max-height: 98px; 
    width: 300px;
}

/* Desktop Menu Items */
.menu-top > li > a {
    font-size: 18px; 
    padding: 25px 15px; 
    font-weight: 600;
}

/* Prevent menu wrap at 110% browser zoom on 1332px width */
@media (max-width: 1332px) {
    .navbar-brand img {
        width: 260px;
        max-height: 90px;
    }

    .menu-top > li > a {
        font-size: 16px;
        padding: 20px 12px;
    }
}

/* ===============================
   MOBILE NAVBAR SPECIFIC FIX
   =============================== */

@media (max-width: 768px) {

    /* 1. Increase Mobile Logo Size */
    .navbar-brand img {
        max-height: 90px !important; /* Much bigger logo for mobile */
        width: 230px !important;
        margin-top: 0;
    }

    /* 2. Reduce Navbar Height / Remove Extra Space */
    .navbar-header {
        padding-top: 5px !important;   /* Reduce top gap */
        padding-bottom: 5px !important;/* Reduce bottom gap */
        height: auto !important;       /* Allow height to shrink to fit logo */
        min-height: 70px;              /* Minimum height to fit the logo */
    }

    /* 3. Adjust Logo Container */
    .navbar-brand {
        padding: 5px 15px !important;
        height: auto !important;
        line-height: normal;
    }

    /* 4. Center the Hamburger Button vertically */
    .navbar-toggle {
        margin-top: 18px !important; /* Push button down to center with big logo */
        margin-right: 15px;
        background: #111211;         /* Keep your green color */
        border-radius: 6px;
    }

    .navbar-toggle .icon-bar {
        background-color: #fff;
    }
}

footer.footer .container {


/* ===============================
   FORCE FOOTER SPACE REMOVAL
   =============================== */

footer.footer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

    padding-bottom: 0 !important;
    
}    


footer.footer .row {
    margin-bottom: 0 !important;
}    

footer.footer .widget {
    margin-bottom: 0 !important;
}    

footer.footer p {
    margin-bottom: 8px !important;
}    

footer.footer ul {
    margin-bottom: 0 !important;
}    

/* COPYRIGHT FIX */
.copyrights {
    margin-top: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}    

.footer-company-name {
    margin: 0 !important;
}    



/* Key Numbers spacing control */
.key-row-top,
.key-row-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* Space between top and bottom rows */
.row-gap {
    height: 40px;
}

/* Equal vertical spacing inside each stat */
.stat-wrap > div {
    margin-bottom: 30px;
}

/* Tighter text spacing */
.stat-wrap h3 {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 10px;
}

.stat-wrap p {
    font-size: 36px;
    font-weight: 600;
    margin: 12px 0 0;
}
/* Bottom row spread properly */
.spread-row {
    display: flex;
    justify-content: space-between;
}

/* Prevent cards from sticking together */
.spread-row > div {
    padding-left: 20px;
    padding-right: 20px;
}

/* Keep equal visual balance */
.key-row-top {
    display: flex;
    justify-content: center;
}
@media (min-width: 992px) {
    .spread-row > div:nth-child(1) {
        margin-left: 0;
    }
    .spread-row > div:nth-child(3) {
        margin-right: 0;
    }
}
/* Make Key Numbers section wider */
.parallax.section.lb .container {
    max-width: 1550px;   /* default is ~1170px */
}

/* Add vertical spacing between rows */
.stat-wrap > div {
    margin-bottom: 40px;
}
/* ONLY move left & right cards visually */
.bottom-stats .col-md-4:first-child {
    transform: translateX(-100px);
}

.bottom-stats .col-md-4:last-child {
    transform: translateX(100px);
}

/* keep center card unchanged */
.bottom-stats .col-md-4:nth-child(2) {
    transform: none;
}

/* mobile safety */
@media (max-width: 991px) {
    .bottom-stats .col-md-4 {
        transform: none !important;
    }
}

.lead {
    text-align: justify;
    margin-left: 20px;
    
}
.lead1{
    text-align: center;
}


/* Center last single service card safely */
.last-service-row > div {
    float: none;
    margin-left: auto;
    margin-right: auto;
}
/* ===============================
   FOOTER TEXT VISIBILITY FIX
   =============================== */

/* Footer headings */
footer.footer h3 {
    font-size: 22px;
    font-weight: 700;
    color: #222;              /* dark heading */
    margin-bottom: 14px;
}

/* Footer paragraph */
footer.footer p {
    font-size: 16px;
    line-height: 1.7;
    color: #222;              /* darker readable text */
    margin-bottom: 0;
}

/* Footer list items */
footer.footer .footer-links li {
    font-size: 16px;
    color: #222;
    margin-bottom: 8px;
}

/* Footer links */
footer.footer .footer-links a {
    font-size: 16px;
    color: #222;
    font-weight: 500;
    transition: color 0.3s ease;
}

footer.footer .footer-links a:hover {
    color: #007c8a;           /* blue-green highlight */
    text-decoration: none;
}

/* Social icons */
footer.footer .social-md i {
    font-size: 16px;
    color: #007c8a;
}

/* Widget spacing */
footer.footer .widget {
    padding: 0 20px;
}

/* ===============================
   COPYRIGHT TEXT
   =============================== */

.footer-company-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin: 0;
    text-align: center;
}


.container-fuild {
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 0px;
}

.container-fuild1 {
    margin-left: 60px;
    margin-right: 60px;
    margin-top: -90px;
}

/* ===============================
   FOOTER TEXT VISIBILITY FIX
   =============================== */

/* Footer headings */
footer.footer h3 {
    font-size: 22px;
    font-weight: 700;
    color: #222;              /* dark heading */
    margin-bottom: 14px;
}

/* Footer paragraph */
footer.footer p {
    font-size: 16px;
    line-height: 1.7;
    color: #222;              /* darker readable text */
    margin-bottom: 0;
}

/* Footer list items */
footer.footer .footer-links li {
    font-size: 16px;
    color: #222;
    margin-bottom: 8px;
}

/* Footer links */
footer.footer .footer-links a {
    font-size: 16px;
    color: #222;
    font-weight: 500;
    transition: color 0.3s ease;
}

footer.footer .footer-links a:hover {
    color: #007c8a;           /* blue-green highlight */
    text-decoration: none;
}

/* Social icons */
footer.footer .social-md i {
    font-size: 16px;
    color: #007c8a;
}

/* Widget spacing */
footer.footer .widget {
    padding: 0 20px;
}

/* ===============================
   COPYRIGHT TEXT
   =============================== */

.footer-company-name {
    font-size: 14px;
    color: #333;
    font-weight: 500;
    margin: 0;
    text-align: center;
}


.container-fuild {
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.container-fuild1 {
    margin-left: 60px;
    margin-right: 60px;
    margin-top: -90px;
}
/* LOADER FIX */
#preloader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
/* Force consistent lightbox size */
.mfp-img {
  max-height: 80vh !important;
  width: auto !important;
  object-fit: contain;
}

.mfp-content {
  max-width: 85vw;
}

/* Bigger title */
.mfp-title {
  font-size: 18px;
  line-height: 1.4;
  padding-top: 10px;
}

/* Always-visible arrows */
.mfp-arrow {
  opacity: 1 !important;
}

.mfp-arrow:before,
.mfp-arrow:after {
  opacity: 1 !important;
}
/* Remove dark overlay background */
.mfp-bg {
    background: #ffffff !important;   /* pure white */
    opacity: 1 !important;
}

/* Lightbox container background */


/* Optional: subtle shadow instead of dark bg */
.mfp-img {
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    background: #fff;
}
/* Semi-transparent dark background */
.mfp-bg {
    background: rgba(0, 0, 0, 0.65) !important;
    opacity: 1 !important;
}
/* Force consistent lightbox size */
.mfp-img {
  max-height: 80vh !important;
  width: auto !important;
  object-fit: contain;
}

.mfp-content {
  max-width: 85vw;
}

/* Bigger title */
.mfp-title {
  font-size: 18px;
  line-height: 1.4;
  padding-top: 10px;
}

/* Always-visible arrows */
.mfp-arrow {
  opacity: 1 !important;
}

.mfp-arrow:before,
.mfp-arrow:after {
  opacity: 1 !important;
}


/* ... existing styles ... */

    /* --- MOBILE MENU FIX --- */
    @media (max-width: 991px) {
        /* Add spacing between the list items in the mobile menu */
        .navbar-collapse .navbar-nav > li {
            margin-bottom: 10px !important; /* Forces gap between items */
        }
        
        /* Ensure the links (the colored pills) have room to breathe */
        .navbar-collapse .navbar-nav > li > a {
            margin-top: 5px !important;
            margin-bottom: 5px !important;
            display: block; /* Ensures they take up their own line */
        }
    }


    /* =========================================
       NAVBAR COLOR & SPACING UPDATE
       ========================================= */

    /* 1. Apply the new Blue Color (#45e2f3) to Hover and Active states */
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus,
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        background-color: #1FB6FF !important; /* Your requested Blue */
        background-image: none !important;    /* Removes old gradients */
        color: #ffffff !important;            /* Keeps text white */
        border-radius: 30px !important;       /* Keeps the pill shape */
    }

    /* 2. Fix Mobile Overlap (Ensures tabs don't touch each other) */
    @media (max-width: 991px) {
        .navbar-collapse .navbar-nav > li {
            margin-bottom: 8px !important; /* Adds gap between the buttons */
        }
        .navbar-collapse .navbar-nav > li > a {
            margin-top: 5px !important;
            margin-bottom: 5px !important;
        }
    }

    /* =========================================
       TABLET VIEW FIX: Make navbar like mobile
       ========================================= */

    /* For tablets (768px to 991px), hide menu items and show hamburger */
    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav {
            display: none !important;
        }
        .navbar-toggle {
            display: block !important;
        }
        .navbar-collapse {
            display: none !important;
        }
        .navbar-collapse.in {
            display: block !important;
        }
    }

    /* =========================================
       MOBILE LOGO FIX: Prevent logo from moving when scrolling
       ========================================= */

    @media (max-width: 767px) {
        /* Force navbar to be fixed on mobile */
        .navbar-default {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            z-index: 9999 !important;
            background: #ffffff !important;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        }

        .navbar-brand img {
            position: relative !important;
            top: 0 !important;
            left: 0 !important;
            transform: none !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }

        /* Ensure navbar header doesn't cause logo movement */
        .navbar-header {
            position: relative;
            overflow: hidden;
        }

        /* Fix logo container positioning */
        .navbar-brand {
            position: relative;
            display: block;
            float: left;
        }

        /* Add padding to body to account for fixed navbar */
        body {
            padding-top: 65px !important; /* Adjust based on navbar height */
        }
    }


/* ============================================================
   ALPHA AJAY - DROPDOWN POSITION FIX
   ============================================================ */

/* 1. Anchor the dropdown to the About Us tab */
.header_style_01 .navbar-nav > li.dropdown {
    position: relative !important; /* This is the key fix */
}

/* 2. Position the menu directly below the tab */
.header_style_01 .navbar-nav > li.dropdown > .dropdown-menu {
    top: 100% !important;   /* Starts exactly at the bottom of the header */
    left: 0 !important;      /* Aligns with the left edge of 'About Us' */
    right: auto !important;  /* Prevents it from snapping to the right side */
    display: none;           /* Hidden by default */
    position: absolute !important;
}

/* 3. Show it on hover */
.header_style_01 .navbar-nav > li.dropdown:hover > .dropdown-menu {
    display: block !important;
}

/* 4. Ensure there is no gap (Gap causes the menu to close when moving mouse) */
.header_style_01 .navbar-nav > li.dropdown > .dropdown-menu {
    margin-top: -2px !important; /* Moves it slightly up to 'touch' the navbar */
}

/* =========================================
   DROPDOWN MENU HOVER EFFECTS
   ========================================= */

/* Dropdown menu items: dark text by default */
.dropdown-menu li a {
    color: #000000 !important; /* Dark text */
    font-weight: 500;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

/* Hover effect: blue background and white text, like other navbar tabs */
.dropdown-menu li a:hover {
    background-color: #1FB6FF !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    text-decoration: none;
}

/* =========================================
   CORE EXPERTISE CARD HOVER EFFECTS
   ========================================= */

/* Hover effect: blue border around the icon square */
.seo-services .who img:hover {
    border: 3px solid #1FB6FF !important;
    border-radius: 10px;
}

/* =========================================
   ADD SPACE AND DIVIDER BETWEEN ABOUT US PAGE SECTIONS
   ========================================= */

#about.section.wb {
    margin-bottom: 80px !important;
    border-bottom: 1px solid #ddd !important;
    padding-bottom: 40px !important;
}

.section.wb.reveal-section {
    margin-top: -50px !important; /* Reduce space above Competitive Advantages */
    margin-bottom: 80px !important;
    border-bottom: 1px solid #ddd !important;
    padding-bottom: 40px !important;
}

#journey.section.wb {
    margin-top: -50px !important; /* Reduce space above Journey of Excellence */
    margin-bottom: 80px !important;
    border-bottom: 1px solid #ddd !important;
    padding-bottom: 40px !important;
}

#vision-forward .section.wb {
    margin-bottom: 80px !important;
    /* No border for the last section */
}

/* Reduce space below Competitive Advantages subtitle */
.lead1 {
    margin-bottom: 10px !important;
}


/*------------------------------------------------------------------
    FIX: FORCE MENU TO OPEN ON TABLETS (768px to 1300px)
-------------------------------------------------------------------*/
@media screen and (max-width: 1300px) {
    /* 1. Force the collapse behavior to remain in 'mobile' mode */
    .navbar-collapse.collapse {
        display: none !important; /* Keep it hidden until the hamburger is clicked */
    }

    /* 2. Show the menu when the button is clicked (Bootstrap adds the 'in' class) */
    .navbar-collapse.collapse.in {
        display: block !important;
        background-color: #ffffff !important;
        width: 100% !important;
        position: absolute !important;
        top: 100% !important;
        left: 20 !important;
        z-index: 1000 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        max-height: 500px !important; /* Allow scrolling if menu is long */
        overflow-y: auto !important;
    }

    /* 3. Stack the menu items vertically so they don't overlap the logo */
    .navbar-nav {
        margin: 0 !important;
        float: none !important;
        display: block !important;
    }

    .navbar-nav > li {
        float: none !important;
        display: block !important;
        border-bottom: 1px solid #f0f0f0; /* Adds a clean divider between links */
    }

    /* 4. Ensure the toggle button (hamburger) stays visible and functional */
    .navbar-header .navbar-toggle {
        display: block !important;
        float: right !important;
    }
}

/* ============================================================
   TABLET/LAPTOP NAVBAR ALIGNMENT FIX (990px - 1300px)
   Keep logo at left corner and menu icon at right corner
   ============================================================ */
@media (min-width: 990px) and (max-width: 1300px) {
    body.seo_version .header_style_01 {
        padding: 12px 16px !important;
    }

    body.seo_version .header_style_01 .container-fluid.navbar-flex {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-header {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        float: none !important;
        margin: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-brand {
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    body.seo_version .header_style_01 .navbar-brand img {
        width: 210px !important;
        max-height: 72px !important;
        object-fit: contain;
    }

    body.seo_version .header_style_01 .navbar-toggle {
        float: right !important;
        margin: 0 !important;
        margin-left: auto !important;
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
    }
}

/* ============================================================
   FORCE MOBILE NAVBAR LOOK UP TO 1300px
   Logo left + hamburger right + collapsed menu behavior
   ============================================================ */
@media (min-width: 768px) and (max-width: 1300px) {
    .header_style_01 {
        padding: 12px 16px !important;
    }

    .header_style_01 .container-fluid.navbar-flex {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .header_style_01 .navbar-header {
        float: none !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    .header_style_01 .navbar-brand {
        order: 1;
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    .header_style_01 .navbar-brand img {
        width: 210px !important;
        max-height: 72px !important;
        object-fit: contain;
    }

    .header_style_01 .navbar-toggle {
        order: 2;
        display: block !important;
        float: right !important;
        margin: 0 !important;
        margin-left: auto !important;
    }

    .header_style_01 .navbar-collapse.collapse {
        display: none !important;
    }

    .header_style_01 .navbar-collapse.collapse.in {
        display: block !important;
    }

    .header_style_01 .navbar-nav,
    .header_style_01 .navbar-right {
        float: none !important;
        margin: 0 !important;
    }

    .header_style_01 .navbar-nav > li {
        float: none !important;
        display: block !important;
    }
}





/* =========================================
   AWARDS PAGE MOBILE SPACING FIX
   ========================================= */
@media (max-width: 768px) {
    /* 1. Move the entire header block up closer to the navbar */
    .pro-page-header {
        padding-top: 15px !important;  
        padding-bottom: 10px !important;
    }

    /* 2. Remove the 100px gap caused by the global H1 margin */
    .pro-page-header h1 {
        margin-top: 0 !important;      
        padding-top: 0 !important;
        font-size: 28px !important;
        margin-bottom: 10px !important;
    }

    /* 3. Adjust the description text spacing */
    .pro-page-header .lead1 {
        margin-top: 0 !important;
        font-size: 16px !important;
        padding: 0 15px !important; /* Prevents text from touching screen edges */
    }

    /* Reduce top space below navbar for capability pages */
    #capability.section.wb {
        padding-top: 0 !important;
    }
}

/* ============================================================
   NAVBAR STABILITY FIX (Desktop/Laptop zoom 100%-110%)
   Keeps logo left + menu right on one line on most laptops
   ============================================================ */
@media (min-width: 992px) {
    body.seo_version .header_style_01 {
        padding: 16px 12px !important;
    }

    body.seo_version .header_style_01 .container-fluid.navbar-flex {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    body.seo_version .header_style_01 .navbar-header {
        float: none !important;
        display: flex;
        align-items: center;
        min-width: 0;
    }

    body.seo_version .header_style_01 .navbar-brand {
        padding: 0 8px 0 0 !important;
        height: auto !important;
        margin-right: 8px;
    }

    body.seo_version .header_style_01 .navbar-brand img {
        width: clamp(180px, 15vw, 250px);
        max-height: 76px;
        object-fit: contain;
    }

    body.seo_version .header_style_01 #navbar.navbar-collapse {
        padding-left: 0;
        padding-right: 0;
    }

    body.seo_version .header_style_01 .navbar-right {
        float: right !important;
        margin-right: 0 !important;
    }

    body.seo_version .header_style_01 .menu-top {
        margin-top: 0 !important;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    body.seo_version .header_style_01 .menu-top > li {
        margin-left: 0 !important;
        flex: 0 0 auto;
    }

    body.seo_version .header_style_01 .navbar-default .navbar-nav > li > a {
        font-size: 14px !important;
        padding: 8px 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1280px) {
    body.seo_version .header_style_01 .navbar-brand img {
        width: 175px;
        max-height: 70px;
    }

    body.seo_version .header_style_01 .navbar-default .navbar-nav > li > a {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }
}

/* ============================================================
   FINAL OVERRIDE: 990px-1300px navbar layout
   Force logo left + hamburger right
   ============================================================ */
@media (min-width: 990px) and (max-width: 1300px) {
    body.seo_version .header_style_01 {
        padding: 12px 16px !important;
    }

    body.seo_version .header_style_01 .container-fluid.navbar-flex {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-header {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        float: none !important;
        margin: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-brand {
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

    body.seo_version .header_style_01 .navbar-brand img {
        width: 210px !important;
        max-height: 72px !important;
        object-fit: contain;
    }

    body.seo_version .header_style_01 .navbar-toggle {
        display: block !important;
        float: right !important;
        margin: 0 !important;
        margin-left: auto !important;
        position: relative !important;
        right: 0 !important;
        top: 0 !important;
    }

    body.seo_version .header_style_01 #navbar.navbar-collapse.collapse {
        display: none !important;
    }

    body.seo_version .header_style_01 #navbar.navbar-collapse.collapse.in {
        display: block !important;
    }

    body.seo_version .header_style_01 .menu-top {
        display: block !important;
    }
}

/* ============================================================
   GLOBAL TABLET LANDSCAPE NAVBAR: force full desktop menu
   ============================================================ */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    body.seo_version .header_style_01 {
        padding: 14px 20px !important;
    }

    body.seo_version .header_style_01 .container-fluid.navbar-flex {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    body.seo_version .header_style_01 .navbar-toggle {
        display: none !important;
    }

    body.seo_version .header_style_01 .navbar-header {
        width: auto !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-brand {
        padding: 0 !important;
        margin-right: 8px !important;
        margin-top: 4px !important;
    }

    body.seo_version .header_style_01 .navbar-brand img {
        width: 200px !important;
        max-height: 76px !important;
        object-fit: contain;
    }

    body.seo_version .header_style_01 #navbar.navbar-collapse.collapse,
    body.seo_version .header_style_01 #navbar.navbar-collapse.collapse.in {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
        float: none !important;
        clear: none !important;
        width: auto !important;
        border-top: 0 !important;
        box-shadow: none !important;
        flex: 1 1 auto !important;
        margin-left: auto !important;
        margin-top: -4px !important;
    }

    body.seo_version .header_style_01 .navbar-right {
        display: flex !important;
        flex-wrap: nowrap !important;
        margin-right: 0 !important;
        justify-content: flex-end !important;
        align-items: center !important;
    }

    body.seo_version .header_style_01 .menu-top {
        display: flex !important;
        align-items: center;
        flex-wrap: nowrap !important;
        gap: 2px;
        margin-top: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-right > li {
        margin-left: 2px !important;
        border-bottom: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-nav > li {
        border-bottom: 0 !important;
    }

    body.seo_version .header_style_01 .navbar-nav > li::before,
    body.seo_version .header_style_01 .navbar-nav > li::after,
    body.seo_version .header_style_01 .navbar-nav > li > a::before,
    body.seo_version .header_style_01 .navbar-nav > li > a::after {
        content: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.seo_version .header_style_01 .navbar-default .navbar-nav > li > a,
    body.seo_version .header_style_01 .navbar-default .navbar-nav > li a {
        font-size: 12px !important;
        padding: 9px 8px !important;
        line-height: 1.2 !important;
        white-space: nowrap;
        text-decoration: none !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    body.seo_version .header_style_01 .navbar-default .navbar-nav > li > a:hover,
    body.seo_version .header_style_01 .navbar-default .navbar-nav > li > a:focus,
    body.seo_version .header_style_01 .navbar-default .navbar-nav > li > a.active {
        text-decoration: none !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }
}