/*preloader page css starts here */
/* Montserrat is loaded via a <link> in header.php (front page only, where the preloader appears) instead of @import here */

#sts-premium-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #07162c 0%, #02070f 100%);
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    font-family: 'Montserrat', sans-serif;
}

.sts-main-loader-container {
    position: relative;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sts-glowing-circle {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    border: 2px solid rgba(160, 190, 220, 0.08);
    box-shadow: inset 0 0 20px rgba(10, 37, 64, 0.5);
}

.sts-glowing-circle::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(142, 198, 255, 0.4);
    border-left-color: rgba(142, 198, 255, 0.1);
    animation: spinRing 4s infinite linear;
}

.sts-inner-content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.sts-brand-block {
    margin-bottom: 25px;
    text-align: center;
}

.sts-main-title {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sts-main-title span {
    color: #26a9e0; /*#FBB034;*/
}

.sts-tagline {
    color: #a4b3c6;
    font-size: 11px;
    font-weight: 600;
    margin: 4px 0 0 0;
    letter-spacing: 1px;
}

.sts-bus-display-box {
    position: relative;
    width: 290px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sts-exact-replica-bus {
    width: 260px;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.6));
    animation: coachMicroVibe 1.2s infinite ease-in-out;
    z-index: 3;
}

.replica-wheel {
    animation: wheelRotate 0.4s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
}

.sts-wave-landscape {
    position: absolute;
    bottom: 12px;
    width: 320px;
    height: 10px;
    overflow: hidden;
}

.sts-wave-line {
    width: 200%;
    height: 100%;
    background: repeating-linear-gradient(90deg, transparent, transparent 20px, rgba(142, 198, 255, 0.2) 20px, rgba(142, 198, 255, 0.2) 40px);
    animation: roadFlowEffect 0.6s infinite linear;
    opacity: 0.7;
}

.sts-status-block {
    margin-top: 30px;
    text-align: center;
}

.sts-loading-label {
    color: #8fa0b5;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    animation: textPulse 1.5s infinite ease-in-out;
}

.sts-navigation-text {
    color: #556982;
    font-size: 11px;
    font-weight: 400;
    margin: 0;
}

@keyframes spinRing {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

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

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

@keyframes wheelRotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes roadFlowEffect {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-40px);
    }
}

@keyframes textPulse {
    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.fade-out-complete {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.sts-loading-lock {
    overflow: hidden !important;
}

/* preloader page css ends here */

@media (max-width: 1439px) {
    .container {
        max-width: 90% !important;
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {

    body {

        zoom: 0.8;
    }
}




.hero {
    position: relative;
    height: 500px;
}

.hero-image {
    position: absolute;
    inset: 0;

}

.sts-card-team-heading {
    font-size: var(--fs-h4) !important;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.34) 45%, rgba(0, 0, 0, 0.2) 100%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding-top: 88px;
    color: var(--white);
}

/* .hero h1 {
    font-size: 70px;
    line-height: 0.95;
    font-weight: 400;
    letter-spacing: 0.1em;
    font-family: var(--font-gamily);
}

.hero p {
    margin: 22px 0 0;
    max-width: 780px;
    font-size: 20px;
    line-height: 1.24;
    font-weight: 400;
} */

.search {
    position: absolute;
    left: 50%;
    bottom: -38px;
    transform: translateX(-50%);
    width: min(800px, calc(100% - 140px));
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 2px solid var(--cyan-500);
    border-radius: 999px;
    padding: 16px 24px;
    z-index: 3;
    box-shadow: 0 10px 26px rgba(4, 54, 115, 0.46);
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 260ms ease,
        border-color 260ms ease,
        background-color 260ms ease;
}

.search input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: 0;
    text-align: center;
    color: #A5A5A5;
    font-size: var(--fs-subheading);
    line-height: 1;
    font-weight: 400;
}

.search button {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search button img {
    width: 38px;
    height: 38px;
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
}

.search:hover,
.search:focus-within {
    transform: translateX(-50%) translateY(-2px);
    border-color: #60c2ec;
    background: #fbfcfd;
    box-shadow: 0 10px 26px rgba(4, 54, 115, 0.16);
}

.search:hover button img,
.search:focus-within button img {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 10px rgba(38, 169, 224, 0.35));
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}



.footer {
    position: relative;
    background: #305284;
    min-height: 534px;
    padding-bottom: 36px;
    overflow: hidden;
    isolation: isolate;
}

.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 78% 18%, rgba(65, 187, 239, 0.12) 0%, rgba(65, 187, 239, 0) 44%);
    pointer-events: none;
    z-index: 0;
}

.footer-top-line {
    margin-top: 20px;
    height: 20px;

    background: linear-gradient(90deg,
            #ACADB1 0%,
            #C4C4C6 5%,
            #D5D5D6 10%,
            #DFDEDF 15%,
            #E3E2E2 20%,
            #CBCBCC 30%,
            #D6D6D6 40%,
            #E3E2E2 50%,
            #DCDBDB 60%,
            #CBCBCC 70%,
            #CFCFD0 80%,
            #D3D3D4 87%,
            #B3B4B7 95%,
            #A7A9AD 100%);

    animation: footer-line-glow 5.5s ease-in-out infinite;
}

.footer-head {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 38px;
    /* animation: footer-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) both; */
}

@media (min-width: 992px) {
    .footer-head {

        padding-left: 20px;
        padding-right: 20px;
    }

}

.footer-logo {
    width: 246px;
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.2));
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
}

/* .footer-logo:hover {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28));
} */


.footer-head p {
    margin: 0;
    color: var(--white);
    font-size: var(--fs-h2);
    line-height: 1;
    font-weight: 400;
}

.footer-mid-line {
    position: relative;
    z-index: 1;
    height: 2px;
    background: var(--cyan-500);
    margin-top: 18px;
    overflow: hidden;
}

.footer-mid-line::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -24%;
    width: 20%;
    height: 10px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.46) 50%, rgba(255, 255, 255, 0) 100%);
    /* animation: footer-midline-sheen 4.6s ease-in-out infinite; */
}

.footer-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 46% 30% 22%;
    gap: 18px;
    padding-top: 24px;
}

/* .footer-grid section {
    transform: translateY(0);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
    animation: footer-reveal 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
} */



.footer-grid section:nth-child(1) {
    animation-delay: 80ms;
}

.footer-grid section:nth-child(2) {
    animation-delay: 150ms;
}

.footer-grid section:nth-child(3) {
    animation-delay: 220ms;
}

/* .footer-grid section:hover,
.footer-grid section:focus-within {
    transform: translateY(-4px);
} */

.footer h2 {
    margin: 0 0 20px;
    color: var(--white);
    font-size: var(--fs-h3);
    line-height: 1.12;
    font-weight: 200;
}

.subscribe-footer-heading {
    font-size: var(--fs-body) !important;
}

.footer p,
.footer li,
.footer a {
    margin: 0;
    color: var(--white);
    text-decoration: none;
    font-size: var(--fs-body);
    line-height: 1.28;
    font-weight: 200;
    max-width: 400px;
}

.main-top-heading-footer {
    font-size: var(--fs-h3) !important;
}

.footer a {
    transition: color 240ms ease, text-shadow 240ms ease;
}

.footer ul li {
    transition: transform 240ms ease;
}

.footer ul li img {
    transition: transform 240ms ease, filter 240ms ease;
}

.footer ul li.active-menu-item a {
    color: var(--cyan-500);
}

.footer ul li.active-menu-item img {
    filter: brightness(0) saturate(100%) invert(76%) sepia(64%) saturate(615%) hue-rotate(135deg);
}

/* .footer ul li:hover,
.footer ul li:focus-within {
    transform: translateX(5px);
}

.footer ul li:hover img,
.footer ul li:focus-within img {
    transform: translateX(2px);
    filter: drop-shadow(0 2px 8px rgba(65, 187, 239, 0.4));
}*/

.footer ul li:hover a,
.footer ul li:focus-within a {
    color: #73d5ff;
    text-shadow: 0 0 16px rgba(65, 187, 239, 0.22);
}

.footer p+p {
    margin-top: 20px;
}

.footer p img,
.footer li img {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    vertical-align: middle;
}

.footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.footer-subscribe input {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #1C3D6E;
    font-size: var(--fs-subheading);
    line-height: 1;
    font-weight: 300;
    padding: 15px 22px;
    outline: 0;
    transition: box-shadow 260ms ease, background-color 260ms ease, color 260ms ease;
}

.footer-subscribe input::placeholder {
    color: #1C3D6E;
    opacity: 1;
}

.footer-subscribe input:focus-visible {
    background: #f7faff;
    color: #1C3D6E;
    box-shadow: 0 0 0 2px rgba(54, 191, 243, 0.45), 0 10px 22px rgba(0, 0, 0, 0.14);
}

/* .footer-subscribe input[type="submit"] {
    position: relative;
    margin-top: 18px;
    width: 55%;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #34b6ea 0%, #288fd5 100%);
    color: var(--white);
    font-size: 21px;
    line-height: 1;
    font-weight: 400;
    padding: 12px 22px;
    cursor: pointer;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(10, 127, 186, 0.26);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, filter 280ms ease;
} */

.footer-subscribe button {
    position: relative;
    margin-top: 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #34b6ea 0%, #288fd5 100%);
    color: var(--white);
    font-size: var(--fs-subheading);
    line-height: 1;
    font-weight: 300;
    padding: 10px 20px;
    cursor: pointer;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(10, 127, 186, 0.26);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, filter 280ms ease;
}

.footer-subscribe button::before {
    content: '';
    position: absolute;
    top: -35%;
    left: -170%;
    width: 64%;
    height: 170%;
    transform: rotate(14deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.48) 50%, rgba(255, 255, 255, 0) 100%);
    transition: left 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-subscribe input[type="submit"]:hover,
.footer-subscribe input[type="submit"]:focus-visible,
.footer-subscribe button:hover,
.footer-subscribe button:focus-visible {
    box-shadow: 0 14px 26px rgba(10, 127, 186, 0.34);
    filter: saturate(1.08);
}

.footer-subscribe button:hover::before,
.footer-subscribe button:focus-visible::before {
    left: 200%;
}

.footer-socials {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 25px;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    transform: translateY(0) scale(1);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), filter 260ms ease;
}

.footer-socials a:hover,
.footer-socials a:focus-visible {
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 8px 14px rgba(65, 187, 239, 0.4));
}

.footer-socials img {
    width: auto;
    height: 24px;
    transition: filter 260ms ease;
}

.footer-socials a:hover img,
.footer-socials a:focus-visible img {
    filter: brightness(1.12);
}


.footer-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.footer-item img {
    width: 20px;
    flex-shrink: 0;
    margin-top: 6px;
    /* optional for vertical alignment */
}

.footer-item span {
    display: block;
    line-height: 1.6;
}


/* responsive */

@media (min-width: 1028px) and (max-width: 1439px) {
    .nav-list {

        gap: 18px !important;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {

    .hero {
        position: relative;
        height: 420px;
    }

    .footer-logo {
        width: 185px;

    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;

    }

    .footer-grid> :nth-child(2) {
        justify-self: center;
        text-align: center;
    }

    .footer-grid> :nth-child(3) {
        padding-top: 20px;
        grid-column: span 2;
    }

    .footer-item {
        gap: 3px;
    }

    /* FIX HERE */
    .footer ul li {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* If parent column is centered */
    .footer-center ul li {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .header-inner {
        gap: 0px !important;
    }

    .header .content {

        padding-inline: 14px !important;
    }

    .brand img {
        width: 140px;
    }

    .hero {
        height: 360px;
    }

    .footer-logo {
        width: 120px;
    }

    .search {
        left: 0;
        transform: none;
        width: 95%;
        padding: 12px 16px;
        bottom: -30px;
        margin: auto 10px auto 10px;
        /* adjust if needed */
    }

    .search button img {
        width: 20px;
        height: 20px;

    }

    .search:hover, .search:focus-within {
        transform: translateX(0%) translateY(-2px);
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid> :nth-child(2) {
        justify-self: start;
        text-align: left;
    }

    .footer-grid> :nth-child(3) {
        padding-top: 20px;
    }

    .footer-item {
        gap: 3px;
    }

}


/* Services */

.services {
    background: #d2d3d5;
    padding: 90px 0 60px;
}

/* .services h2,
.why h2,
.about h2,
.milestones h2 {
    margin: 0;
    font-size: 37px;
    line-height: 1.1;
    font-weight: 400;
    text-align: center;
    color: #043673;
} */

#services-section .cards {
    display: grid;
    gap: 40px;
}

#services-section .services-cards {
    margin-top: 38px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#services-section .service-card {
    position: relative;
    background: #fff;
    border: 2px solid var(--cyan-500);
    border-radius: 35px;
    box-shadow: 0 10px 20px rgba(4, 54, 115, 0.15);
    /* min-height: 250px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* padding: 18px 14px; */
    overflow: hidden;
    isolation: isolate;
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
        opacity var(--reveal-duration) var(--reveal-easing),
        transform var(--hover-duration) var(--reveal-easing),
        box-shadow var(--hover-duration) var(--reveal-easing),
        border-color var(--hover-duration) ease;
}

/* #services-section .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 55%);
    opacity: 0;
    transition: opacity 300ms ease;
    z-index: -1;
} */
.sts-height {
    height: 60px;
    max-height: 60px;
}

#services-section .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2px;
    /* border thickness */

    /* background: linear-gradient(to right,
            #1C3D6E 0%,
            #1E5789 2%,
            #2174A8 4%,
            #238BC1 6%,
            #249CD2 8%,
            #25A5DC 11%,
            #26A9E0 14%,
            #3170B7 31%,
            #3789C7 37%,
            #40A9DC 45%,
            #44B6E5 49%,
            #42AFE0 54%,
            #3C9BD3 62%,
            #347CBF 71%,
            #3170B7 80%,
            #285C9A 91%,
            #1F457A 100%);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude; */

    pointer-events: none;
    z-index: 0;
}

/* #services-section .service-card::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -160%;
    width: 85%;
    height: 140%;
    transform: rotate(16deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    transition: left 600ms cubic-bezier(0.22, 1, 0.36, 1);
} */

/* #services-section .service-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background: radial-gradient(circle at 24% 18%,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(255, 255, 255, 0) 55%);

    opacity: 0;
    transition: opacity 300ms ease;
    z-index: -1;
} */

#services-section .card-img-wrap {
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-color: #f0f0f0;
}

#services-section .card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

#services-section .service-card h3 {
    /* margin: 25px 0 0; */
    padding: 18px 14px;
    color: var(--navy-900);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), text-shadow 320ms ease;
}

#services-section .service-card:nth-child(2) {
    animation-delay: 80ms;
}

#services-section .service-card:nth-child(3) {
    animation-delay: 160ms;
}

#services-section .service-card:nth-child(4) {
    animation-delay: 240ms;
}

#services-section .service-card:hover,
#services-section .service-card:focus-within {
    transform: translateY(-8px) scale(1.022);
    border-color: #6cc6ee;
    box-shadow: 0 20px 34px rgba(4, 54, 115, 0.24);
}

#services-section .service-card:hover::before,
#services-section .service-card:focus-within::before {
    opacity: 1;
}

#services-section .service-card:hover::after,
#services-section .service-card:focus-within::after {
    left: 130%;
}

#services-section .service-card:hover img,
#services-section .service-card:focus-within img {
    transform: translateY(-4px) scale(1.1);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.16));
}

#services-section .service-card:hover h3,
#services-section .service-card:focus-within h3 {
    transform: translateY(2px);
    text-shadow: 0 8px 18px rgba(4, 54, 115, 0.14);
}

#services-section .service-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) and (max-width: 1024.98px) {
    #services-section .services-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .services {
        padding: 55px 0 44px;
    }

    #services-section .services-cards {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Why Us */

.gold {
    color: var(--yellow);
}

.green {
    color: var(--green);
}

.cyan {
    color: var(--cyan-500);
}

.navy {
    color: var(--navy-900);
}

.why {
    background-color: #ffffff;
    color: var(--navy-900);
    padding: 67px 0 62px;
    overflow: visible;
}

.why h2 {
    color: var(--navy-900);
}

.why .content {
    overflow: visible;
}

#why-us-section .why-sub {
    margin: 20px auto 36px;
    max-width: 980px;
    text-align: center;
    font-size: var(--fs-subheading);
    line-height: 1.26;
    font-weight: 400;
}
.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 50px;
}

/* #why-us-section .why-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    margin-top: 12px;
    padding-top: 56px;
    overflow: visible;
    position: relative;
    z-index: 1;
    gap: 18px;
} */
.why-cards-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (3 * 22px)) / 4);
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 60px 10px 20px; /* Top padding allows badge overlap */
  scrollbar-width: none;
}

.why-cards-track::-webkit-scrollbar {
  display: none;
}

#why-us-section .why-card {
    position: relative;
    background: var(--white);
    border-radius: 24px;
    padding: 100px 5px 0px;
    text-align: center;
    overflow: visible !important;
    isolation: isolate;
    border: 2px solid rgba(3, 72, 109, 0.912);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
     scroll-snap-align: start;
    box-shadow:0 0px 0px rgb(0 0 0 / 0%), 0 8px 5px 0px rgb(0 0 0 / 16%);
   
}

#why-us-section .why-card .badge-icon {
     position: absolute;
  top: -55px;
  left: 50%;
  transform: translateX(-50%);
  /* Scales continuously with the viewport (like the fluid --fs-* type
     scale) instead of staying pinned at one fixed size on every screen
     down to mobile */
  width: clamp(6.25rem, 5.15rem + 4.7vw, 9.375rem);   /* ~100–150px */
  height: clamp(6.25rem, 5.15rem + 4.7vw, 9.375rem);
  background: var(--navy-900);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
    padding: 16px;
    box-shadow: 0 12px 24px rgba(2, 33, 82, 0.24);
    z-index: 2;
}

.why-card .badge-icon img {
  width: clamp(3.9375rem, 3.25rem + 3vw, 5.9375rem);   /* ~63–95px */
  height: clamp(3.9375rem, 3.25rem + 3vw, 5.9375rem);
  object-fit: contain;
  /* filter: brightness(0) invert(1); */
}

/* #why-us-section .why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 12%, rgba(126, 205, 245, 0.26) 0%, rgba(126, 205, 245, 0) 52%);
    opacity: 0.35;
    transition: opacity 320ms ease;
    pointer-events: none;
    z-index: 0;
}

#why-us-section .why-card::after {
    content: '';
    position: absolute;
    top: -28%;
    left: -165%;
    width: 0%;
    height: 176%;
    transform: rotate(15deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: left 760ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
    pointer-events: none;
    z-index: 1;
} */

/* #why-us-section .why-card:nth-child(1) {
    --why-delay: 60ms;
}

#why-us-section .why-card:nth-child(2) {
    --why-delay: 140ms;
}

#why-us-section .why-card:nth-child(3) {
    --why-delay: 220ms;
}

#why-us-section .why-card:nth-child(4) {
    --why-delay: 300ms;
} */


/* #why-us-section .why-card:hover,
#why-us-section .why-card:focus-within {
    transform: translateY(-12px) scale(1.024);
    border-color: rgba(190, 233, 255, 0.62);
    background: rgba(7, 65, 132, 0.95);
    box-shadow: 0 30px 42px rgba(3, 31, 77, 0.32);
}

#why-us-section .why-card:hover {
    transform: translateY(calc(var(--offset, 0px) - 12px)) scale(1.02);
}

#why-us-section .why-card:nth-child(1) {
    --offset: 0px;
} */

/* .why-card:nth-child(2) {
    --offset: 30px;
}

.why-card:nth-child(3) {
    --offset: 60px;
}

.why-card:nth-child(4) {
    --offset: 90px;
} */

#why-us-section .why-card {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
        opacity var(--reveal-duration) var(--reveal-easing),
        transform var(--hover-duration) var(--reveal-easing);
}


#why-us-section .why-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}


#why-us-section .why-card:hover::before,
#why-us-section .why-card:focus-within::before {
    opacity: 0.72;
}

#why-us-section .why-card:hover::after,
#why-us-section .why-card:focus-within::after {
    left: 205%;
    opacity: 1;
} */

/* .why-card.tall {
  min-height: 454px;
}

.why-card.mid {
  min-height: 412px;
}

.why-card.low {
  min-height: 375px;
}

.why-card.short {
  min-height: 342px;
} */
/* #why-us-section .why-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    min-height: 360px;
    
} */

/* STEP EFFECT (like image) */
/* #why-us-section .why-card:nth-child(1) {
    transform: translateY(0);
}

#why-us-section .why-card:nth-child(2) {
    transform: translateY(30px);
}

#why-us-section .why-card:nth-child(3) {
    transform: translateY(60px);
}

#why-us-section .why-card:nth-child(4) {
    transform: translateY(90px);
} */

/* #why-us-section .badge:empty {
    display: block !important;
}

#why-us-section .why-card .badge {
    position: absolute;
    left: 50%;
    top: -56px;
    transform: translateX(-50%);
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: #fff;
    padding: 16px;
    box-shadow: 0 12px 24px rgba(2, 33, 82, 0.24);
     transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, background-color 280ms ease; 
    z-index: 2;
} */

/* #why-us-section .why-card .badge img {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
} */

/* #why-us-section .why-card:hover .badge,
#why-us-section .why-card:focus-within .badge {
    transform: translateX(-50%) translateY(-3px) scale(1.05);
    background: #fff;
    box-shadow: 0 18px 28px rgba(2, 33, 82, 0.32);
}

#why-us-section .why-card:hover .badge img,
#why-us-section .why-card:focus-within .badge img {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 10px rgba(38, 169, 224, 0.34));
} */

#why-us-section .why-card h3 {
    margin: 0;
    color: var(--navy-900);
    /* transition: transform 320ms ease, text-shadow 320ms ease; */
    position: relative;
    z-index: 2;
        display: flex;
    align-items: center;
}

#why-us-section .why-card .whydesc p {
    color: var(--navy-900);
    position: relative;
    z-index: 2;
    padding:  0px 20px;
}
/* Slider Controls */

.slider-btn {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--cyan-500);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.2s ease, color 0.2s ease;
}

.slider-btn svg {
    width: 28px;
    height: 64px;
}

.slider-btn:hover {
    color: var(--blue-600);
    transform: translateY(-50%) scale(1.08);
}

.prev-btn {
    left: -15px;
}

.next-btn {
    right: -2px;
}

@media (min-width: 1027px) {
    .prev-btn {
    left: -3px;
}

}

@media (max-width: 767px) {

    .prev-btn {
        left: -15px;
    }

    .next-btn {
        right: -3px;
    }

    .slider-btn svg {
        width: 22px;
        height: 52px;
    }
}

/* #why-us-section .why-card:hover h3,
#why-us-section .why-card:focus-within h3 {
    transform: translateY(2px);
    text-shadow: 0 10px 20px rgba(3, 31, 77, 0.24);
} */

/* #why-us-section .why-card:hover p,
#why-us-section .why-card:focus-within p {
    transform: translateY(1px);
    color: #f4fbff;
} */

/* @media (max-width: 991.98px) {

    #why-us-section .why-card .badge {

        width: 120px;
        height: 120px;

    }

    #why-us-section .why-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 2fr));

        gap: 65px;
    }

    #why-us-section .why-card {
        min-height: 100%;
        padding: 70px 16px 35px;
    }


} */

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
  .why-cards-track {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
}

@media (max-width: 640px) {
  .slider-wrapper {
    padding: 0 35px;
  }

  .why-cards-track {
    grid-auto-columns: 100%;
  }

}
@media (max-width: 767.98px) {

    .why {
        padding: 40px 0 40px;
    }

    #why-us-section .why-cards {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));

        gap: 65px;
    }

    #why-us-section .why-card {
        min-height: 100%;
        padding: 100px 10px 10px;
    }


 

}


/* @media (max-width: 767.98px) {

    .why {
        padding: 40px 0 40px;
    }

    #why-us-section .why-cards {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));

        gap: 65px;
    }

    #why-us-section .why-card {
        min-height: 100%;
        padding: 70px 16px 35px;
    }


    #why-us-section .why-card:nth-child(1) {
        --offset: 0px;
    }

    #why-us-section .why-card:nth-child(2) {
        --offset: 0px;
    }

    #why-us-section .why-card:nth-child(3) {
        --offset: 0px;
    }

    #why-us-section .why-card:nth-child(4) {
        --offset: 0px;
    }

} */


/* Slider */


.certs {
    background: linear-gradient(90deg, var(--gray-300) 0%, var(--gray-200) 50%, var(--gray-300) 100%);
    padding: 26px 0;
    position: relative;
    z-index: 1;
}

.cert-marquee {
    overflow: hidden;
    position: relative;
}

.cert-row {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 42px;
    animation: cert-marquee 28s linear infinite;
    will-change: transform;
}

.cert-row img {
    height: 139px;
    flex: 0 0 auto;
    width: auto;
}


@keyframes cert-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


@media (max-width: 767.98px) {
    .certs {
        padding: 17px 0;
    }

    .cert-row {
        gap: 14px;
        animation-duration: 22s;
    }

    .cert-row img {
        display: block;
        height: 99px;
    }

    .cert-row img:nth-child(n + 8) {
        display: block;
    }


}

/* About Us Section */

.about {
    padding: 60px 0;
    /* background: #fff; */
    background: linear-gradient(90deg,
            #ACADB1 0%,
            #C4C4C6 5%,
            #D5D5D6 10%,
            #DFDEDF 15%,
            #E3E2E2 20%,
            #CBCBCC 30%,
            #D6D6D6 40%,
            #E3E2E2 50%,
            #DCDBDB 60%,
            #CBCBCC 70%,
            #CFCFD0 80%,
            #D3D3D4 87%,
            #B3B4B7 95%,
            #A7A9AD 100%);
}


/* Main Card */
.about-card {
    position: relative;
    background: transparent;
    /* border-radius: 20px; */
    overflow: visible;
    /* border: 2px solid #26A9E0; */
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover main card */
/* .about-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px rgba(4, 54, 115, 0.25);
    border-color: #34b6ea;
} */

/* RIGHT BLUE SHAPE */
.about-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 48%;
    height: 100%;
    background: #0d3b75;
    border-radius: 0px 20px 20px 0px;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover animation */
/* .about-card:hover::after {
    width: 50%;
    background: #124a94;
} */

.about-index-contant {

    padding: 25px 0px 25px 20px;
}

/* IMAGE */
.bus-img {
    position: relative;
    z-index: 2;
    transform: translateX(10%);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover */
/* .about-card:hover .bus-img {
    transform: translateX(5%) scale(1.08);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.2));
} */

.about-card::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -240%;
    width: 60%;
    height: 100%;
    transform: rotate(15deg);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0) 100%);
    transition: left 0.7s ease;
    z-index: 3;
}

/* Hover sweep */
.about-card:hover::before {
    left: -100%;
}

/* TEXT */
.about-card h2 {
    text-align: left !important;
}

.about-card .About-des {
    margin: 20px auto 36px;
    font-size: var(--fs-subheading);
    line-height: 1.26;
}

.read-more {
    text-decoration: none;
    color: var(--cyan-500);
    font-size: var(--fs-button);
    /* adjust if needed */
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;

    transition: color 220ms ease, transform 220ms ease;
}

/* Hover */
.read-more:hover,
.read-more:focus-visible {
    transform: translateX(6px);
    color: #4bc2f3;
    border-bottom: 2px solid var(--cyan-500);
}

/* @keyframes busFloat {
    0% {
        transform: translateX(10%) translateY(0);
    }

    50% {
        transform: translateX(10%) translateY(-20px);
    }

    100% {
        transform: translateX(10%) translateY(0);
    }
} */

.bus-img {
    position: relative;
    z-index: 2;
    transform: translateX(10%);
    /* animation: busFloat 4s ease-in-out infinite; */
}

@media (max-width: 991px) {
    .cert-row img {
        height: 100px;
    }

    .about {
        padding: 10px 0 35px;

    }

    .about-card::before {
        clip-path: none;
        display: none;
    }

    .about-card::after {
        display: none;
    }

    .in-mobile-sectioncolor {
        background-color: #043673;
        border-radius: 20px;
    }

    .bus-img {
        max-width: 100%;
        margin-top: 10px;
    }

    .about-card:hover .bus-img {
        transform: translateY(5%) scale(1.08);
        filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.2));
    }
}

@media (max-width: 767.98px) {
    .about {
        padding: 8px 15px 30px;

    }


    .about-card {
        /* position: relative;
    background: transparent;
    border-radius: 0px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); */
    }

    .about-card .About-des {
        margin: 10px auto 16px;
        font-weight: 400;
    }

    .about-index-contant {
        padding: 10px 0px 10px 0px;
    }


}

.wpcf7-response-output {
    display: none;
}

/* SECTION */
.milestone-section {
    margin: 20px 0 -40px;
    background: url('../images/Map.svg') center;
    /* background-size: cover; */

}

.mile-card {
    position: relative;
    display: inline-block;
}

.mile-card::after {
    content: "";
    position: absolute;

    bottom: -30px;
    /* 👈 shadow ko neeche push kiya */
    left: 50%;
    transform: translateX(-50%);

    width: 65%;
    height: 25px;

    background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, transparent 80%);
    filter: blur(8px);
    border-radius: 50%;
    z-index: -1;
}

/* TEXT */
.title {
    font-size: var(--fs-h2);
    font-weight: 600;
    color: #1C3A8D;
}

.subtitle {
    margin: 20px auto 36px;
    text-align: center;
    font-size: var(--fs-subheading);
    line-height: 1.3;
    color: #1C3A8D;
}

/* WRAPPER */
.map-wrapper {
    position: relative;
    /* max-width: 1200px; */
    margin: 0 auto;
}

/* ROAD */
.road-img {
    width: 100%;
    height: auto;
    display: block;
}

/* CARD */
.mile-card {
    position: absolute;
    width: 180px;
    text-align: center;
    z-index: 2;

    opacity: 0;
    transform: translate(-50%, -40%) scale(0.9);
    transition: opacity var(--reveal-duration) var(--reveal-easing),
                transform var(--reveal-duration) var(--reveal-easing);
}

/* ACTIVE (scroll animation) */
.mile-card.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* PIN */
.mile-card .pin {
    width: 100%;
}

/* ICON */
.mile-card .icon {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    width: 120px;
    height: 120px;
}

/* NUMBER */
.mile-card .for-css {
    position: absolute;
    top: 70%;
    width: 100%;
    transform: translateY(-50%);
    color: #fff;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
}

.content-heading-milestone {
    margin-bottom: 300px;
}

/* POSITIONS (RESPONSIVE %) */
.c1 {
    left: 10%;
    top: -23%;
}

.c2 {
    left: 35%;
    top: 0%;
}

.c3 {
    left: 60%;
    top: 40%;
}

.c4 {
    left: 92%;
    top: 60%;
}


/* DEFAULT (smallest = card 1) */
.mile-card {
    width: 180px;
}

/* Increase progressively */
.c2 {
    width: 190px;
}


.c3 {
    width: 200px;
}

.c4 {
    width: 210px;
}

/* HOVER EFFECT */
.mile-card:hover {
    transform: translate(-50%, -55%) scale(1.08);
}


.milestone-card-sub-heading {}

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

@media (min-width: 1441px) {

    /* DEFAULT (smallest = card 1) */
    .mile-card {
        width: 10%;
    }

    /* Increase progressively */
    .c2 {
        width: 12%;
    }


    .c3 {
        width: 14.5%;
    }

    .c4 {
        width: 17%;
    }

    .c4 {
        left: 77%;
        top: 45%;
    }

    .c3 {
        left: 52%;
        top: 8%;
    }

    .c2 {
        left: 28%;
        top: -4%;
    }

    .c1 {
        left: 8.3%;
        top: -16%;
    }

    /* Progressive scaling */
    .c1 .icon {
        width: 100%;
        height: 50%;
    }

    .c2 .icon {
        width: 100%;
        height: 53%;
    }

    .c3 .icon {
        width: 100%;
        height: 54%;
    }

    .c4 .icon {
        width: 85%;
        height: 55%;
    }

    .c3 .for-css {
        top: 71%;
    }

    .c4 .for-css {
        top: 73%;
    }

    .c3 .milestone-card-sub-heading, .c3 .milestone-card-heading {
        font-size: 20px;
    }

    .c4 .milestone-card-sub-heading, .c4 .milestone-card-heading {
        font-size: 20px;
    }

    .c2 .milestone-card-heading {
        font-size: 16px;
        padding-top: 1px !important;

    }

    .c1 .milestone-card-heading {
        font-size: 16px;
        padding-top: 1px !important;

    }

}

@media (min-width: 1290px) and (max-width: 1440px) {

    /* DEFAULT (smallest = card 1) */
    .mile-card {
        width: 10%;
    }

    /* Increase progressively */
    .c2 {
        width: 12.5%;
    }


    .c3 {
        width: 14%;
    }

    .c4 {
        width: 16%;
    }

    .c4 {
        left: 76%;
        top: 46%;
    }

    .c3 {
        left: 52%;
        top: 9%;
    }

    .c2 {
        left: 28%;
        top: -5%;
    }

    .c1 {
        left: 8%;
        top: -16%;
    }

    /* Progressive scaling */
    .c1 .icon {
        width: 85%;
        height: 50%;
    }

    .c2 .icon {
        width: 100%;
        height: 55%;
    }

    .c3 .icon {
        width: 85%;
        height: 55%;
    }

    .c4 .icon {
        width: 80%;
        height: 55%;
    }

    .c4 .milestone-card-sub-heading {
        font-size: 20px;
        margin-top: 20px;
    }

    .c3 .milestone-card-sub-heading {
        font-size: 20px;
        margin-top: 12px;
    }

    .c2 .milestone-card-sub-heading {
        font-size: 14px;
    }

    .c2 .milestone-card-heading {
        font-size: 16px;
        margin-top: 7px
    }

    .c1 .milestone-card-heading {
        font-size: 16px;
        margin-top: 2px !important;
    }

    .c1 .milestone-card-sub-heading {
        padding-top: 2px !important;
    }

    .c1 .for-css {

        top: 69%;

    }
}




@media (min-width: 1028px) and (max-width: 1289px) {

    /* DEFAULT (smallest = card 1) */
    .mile-card {
        width: 11.5%;
    }

    /* Increase progressively */
    .c2 {
        width: 13%;
    }


    .c3 {
        width: 15%;
    }

    .c4 {
        width: 17%;
    }

    .c4 {
        left: 78%;
        top: 45%;
    }

    .c3 {
        left: 52%;
        top: 6%;
    }

    .c2 {
        left: 29%;
        top: -6%;
    }

    .c1 {
        left: 8%;
        top: -18%;
    }

    /* Progressive scaling */
    .c1 .icon {
        width: 100%;
        height: 50%;
    }

    .c2 .icon {
        width: 100%;
        height: 52%;
    }

    .c3 .icon {
        width: 100%;
        height: 52%;
    }

    .c4 .icon {
        width: 82%;
        height: 53%;
    }

    .c4 .milestone-card-sub-heading {
        font-size: 18px;
        margin-top: 20px;
    }

    .c3 .milestone-card-sub-heading {
        font-size: 18px;
        margin-top: 5px;
    }

    /*  .c2 .milestone-card-sub-heading {
        font-size: 17px;
    }*/
    .c2 .milestone-card-heading {
        font-size: 18px;
        margin-top: 0px
    }

    .c1 .milestone-card-heading {

        margin-top: 1px;
    }

}

@media (min-width: 992px) and (max-width: 1027px) {

    /* DEFAULT (smallest = card 1) */
    .mile-card {
        width: 11%;
    }

    /* Increase progressively */
    .c2 {
        width: 13%;
    }


    .c3 {
        width: 14%;
    }

    .c4 {
        width: 16%;
    }

    .c3 .for-css {

        top: 66%;

    }

    .c4 .for-css {

        top: 66%;

    }



    /* Progressive scaling */
    .c1 .icon {
        width: 100%;
        height: 46%;
    }

    .c2 .icon {
        width: 100%;
        height: 50%;
    }

    .c3 .icon {
        width: 100%;
        height: 52%;
    }

    .c4 .icon {
        width: 85%;
        height: 52%;
    }

    .c4 .milestone-card-sub-heading {
        font-size: 14px !important;
        margin-top: 23px;
    }

    .c3 .milestone-card-sub-heading {
        font-size: 14px !important;
        margin-top: 15px;
    }

    /*  .c2 .milestone-card-sub-heading {
        font-size: 17px;
    }*/
    .c2 .milestone-card-sub-heading {
        font-size: 12px !important;
        margin-top: 0px;
        padding-top: 0px;
    }

    .c1 .milestone-card-sub-heading {
        font-size: 12px !important;
        margin-top: 0px;
        padding-top: 0px;
    }


    .c2 .for-css {
        position: absolute;
        top: 70% !important;
        width: 100%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        padding: 0 10px;
    }

    .c1 .for-css {
        position: absolute;
        top: 68%;
        width: 100%;
        transform: translateY(-50%);
        color: #fff;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        font-size: 12px;
        font-weight: 400;
    }

    /* NUMBER */
    /* .c2 .for-css {
        position: absolute;
        top: 66%;
        width: 100%;
        transform: translateY(-50%);
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        padding: 0 10px;
    } */

    .content-heading-milestone {
        margin-bottom: 200px;
    }

    /* POSITIONS (RESPONSIVE %) */
    .c1 {
        left: 8%;
        top: -17%;
    }

    .c2 {
        left: 28%;
        top: -7%;
    }

    .c3 {
        left: 50%;
        top: 7%;
    }

    .c4 {
        left: 73%;
        top: 40%;
    }
}


@media (min-width: 768px) and (max-width: 991px) {

    /* CARD */
    /* .mile-card {
        position: absolute;
        width: 140px;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;

        opacity: 0;
        transform: translate(-50%, -40%) scale(0.9);
        transition: all 0.6s ease;
    } */

    /* DEFAULT (smallest = card 1) */
    .mile-card {
        width: 11%;
    }

    /* Increase progressively */
    .c2 {
        width: 14%;
    }


    .c3 {
        width: 16%;
    }

    .c4 {
        width: 18%;
    }

    /* Progressive scaling */
    .c1 .icon {
        width: 100%;
        height: 44%;
    }

    .c2 .icon {
        width: 100%;
        height: 49%;
    }

    .c3 .icon {
        width: 100%;
        height: 50%;
    }

    .c4 .icon {
        width: 85%;
        height: 49%;
    }



    .content-heading-milestone {
        margin-bottom: 155px;
    }

    /* POSITIONS (RESPONSIVE %) */
    .c1 {
        left: 8%;
        top: -18%;
    }

    .c2 {
        left: 28%;
        top: -8%;
    }

    .c3 {
        left: 55%;
        top: 5%;
    }

    .c4 {
        left: 77%;
        top: 42%;
    }

    .c4 .milestone-card-sub-heading {
        font-size: 12px !important;
        margin-top: 0px;
    }

    .c3 .milestone-card-sub-heading {
        font-size: 12px !important;
        margin-top: 0px;
    }

    .c2 .milestone-card-sub-heading {
        font-size: 9px !important;
        margin-top: 0px;
        padding-top: 0px;
    }

    .c1 .milestone-card-sub-heading {
        font-size: 9px !important;
        margin-top: 0px;
        padding-top: 0px;
    }

    .c1 .milestone-card-heading {
        font-size: 10px;
        font-weight: 400;
    }

    .c2 .milestone-card-heading {
        font-size: 12px;
        font-weight: 400;
        margin-top: 0px
    }

    /* NUMBER */
    .c1 .for-css {
        position: absolute;
        top: 64%;
        width: 100%;
        transform: translateY(-50%);
        color: #fff;
        padding: 0 10px;
    }

    .c1 .for-css {
        position: absolute;
        top: 64%;
        width: 100%;
        transform: translateY(-50%);
        color: #fff;
        padding: 0 10px;
    }


}

@media (max-width: 767px) {
    .milestone-section {
        margin: 0px 0 30px;
    }

    .subtitle {
        margin: 10px auto 36px;

    }

    /* Keep the road graphic + pins on mobile (not a stacked grid) — just
       shrink the card/icon/white-circle footprint so the 4 pins clear each
       other and the heading text at phone widths. */

    /* CARD — same "near = big, far = small" perspective the road graphic
       itself already draws (thin at c1's end, widening toward c4's end),
       and that desktop already uses (180/190/200/210px). The card width,
       icon/white-circle size, and text size all scale together off the
       same 4 steps so the ratio stays consistent card-to-card. */
    .mile-card {
        position: absolute;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;

        opacity: 0;
        transform: translate(-50%, -40%) scale(0.9);
        transition: all 0.6s ease;
    }

    .c1 {
        width: 54px;
    }

    .c2 {
        width: 62px;
    }

    .c3 {
        width: 70px;
    }

    .c4 {
        width: 80px;
    }

    .c1 .icon {
        width: 24px;
        height: 24px;
    }

    .c2 .icon {
        width: 28px;
        height: 28px;
    }

    .c3 .icon {
        width: 32px;
        height: 32px;
    }

    .c4 .icon {
        width: 36px;
        height: 36px;
    }

    /* NUMBER + LABEL */
    .mile-card .for-css {
        position: absolute;
        top: 67%;
        width: 100%;
        transform: translateY(-50%);
        color: #fff;
        font-weight: 400;
        padding: 0 2px;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* c1/c2 are the smallest two cards — at the blanket 67% the text sits
       low enough to touch the pin's bottom point, with a visible gap
       between it and the icon above. Shift it up on just these two. */
    .c1 .for-css {
        top: 56%;
    }

    .c2 .for-css {
        top: 55%;
    }

    .content-heading-milestone {
        margin-bottom: 110px;
    }

    /* POSITIONS (RESPONSIVE %) */
    .c1 {
        left: 10%;
        top: -35%;
    }

    .c2 {
        left: 31%;
        top: -8%;
    }

    .c3 {
        /* c4 already sits flush against the map's right edge (can't move
           right without overflowing), and c3 grew wider once it became
           the 3rd-largest card in the near/far scale — so on real phone
           widths (iPhone Pro and smaller) c3's right edge was overlapping
           c4's top-left. Shifted c3 left to clear it. */
        left: 54%;
        top: 4%;
    }

    .c4 {
        left: 79%;
        top: 43%;
    }

    .c1 .milestone-card-sub-heading {
        font-size: 7px !important;
        margin-top: 0px;
        padding-top: 0px;
    }

    .c2 .milestone-card-sub-heading {
        font-size: 8px !important;
        margin-top: 0px;
        padding-top: 0px;
    }

    .c3 .milestone-card-sub-heading {
        font-size: 9px !important;
        margin-top: 0px;
        padding-top: 0px;
    }

    .c4 .milestone-card-sub-heading {
        font-size: 10px !important;
        margin-top: 0px;
        padding-top: 0px;
    }

    .c1 .milestone-card-heading {
        font-size: 8px;
        font-weight: 400;
        margin-top: 0px;
    }

    .c2 .milestone-card-heading {
        font-size: 9px;
        font-weight: 400;
        margin-top: 0px;
    }

    .c3 .milestone-card-heading {
        font-size: 10px;
        font-weight: 400;
        margin-top: 0px;
    }

    .c4 .milestone-card-heading {
        font-size: 11px;
        font-weight: 400;
        margin-top: 0px;
    }

}

/* About Us */

#sts-group-section {

    background: var(--white);
}

.sts-grop-img-wrapper {
    position: relative;
    height: 460px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    /* move perspective to parent */
}

.sts-grop-img-wrapper .card {
    height: 420px;
    width: 100%;
    max-width: 500px;
    border-radius: 25px;
    transform-origin: center;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 12px 20px rgba(0, 0, 0, 0.4);
}

.sts-grop-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 25px;
    /* border: 8px solid var(--white); */
    /* Directional effect */
    box-shadow: -7px -6px 0px rgba(255, 255, 255, 1),
        6px -5px 0px rgba(193, 194, 195, 1);
    /* bottom-right shadow */
}

/* INITIAL STATE (hidden) */
.sts-grop-img-wrapper .card {
    opacity: 0;
    transform: rotateY(-10deg) rotateX(3deg) translateX(60px);
    transition: opacity var(--reveal-duration) var(--reveal-easing),
                transform var(--reveal-duration) var(--reveal-easing);
}

/* SHOW STATE */
.sts-grop-img-wrapper .card.is-visible {
    opacity: 1;
    /* original tilted resting position */
    transform: rotateY(-10deg) rotateX(3deg) translateX(-40px);
}

@media screen and (max-width: 1027px) {
    .sts-grop-img-wrapper {
        position: relative;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        perspective: 1000px;
        /* move perspective to parent */
    }

    .sts-grop-img-wrapper .card {
        height: 100%;
        width: 100%;
        max-width: 100%;
        border-radius: 25px;

        /* FIX: compensate shift */
        transform: none;
        transform-origin: center;
        transition: all 0.4s ease;
    }

}

@media screen and (max-width: 991px) {
    .sts-grop-img-wrapper .card {
        height: 100%;
        width: 100%;
        max-width: 100%;
        border-radius: 25px;

        /* FIX: compensate shift */
        transform: none !important;
    }

}

.our-scale-class {

    background: linear-gradient(90deg,
            #ACADB1 0%,
            #C4C4C6 5%,
            #D5D5D6 10%,
            #DFDEDF 15%,
            #E3E2E2 20%,
            #CBCBCC 30%,
            #D6D6D6 40%,
            #E3E2E2 50%,
            #DCDBDB 60%,
            #CBCBCC 70%,
            #CFCFD0 80%,
            #D3D3D4 87%,
            #B3B4B7 95%,
            #A7A9AD 100%);
    color: var(--navy-900);
    padding: 50px 0 50px;
    overflow: visible;
}





#our-scale-section .cards {
    display: grid;
    gap: 32px;
}

#our-scale-section .services-cards {
    margin-top: 38px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#our-scale-section .service-card {
    position: relative;
    background: var(--white);
    /* border: 2px solid var(--navy-900); */
    border-radius: 35px;
    box-shadow: 0 10px 20px rgba(4, 54, 115, 0.15);
    min-height: 228px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 18px 14px;
    overflow: hidden;
    isolation: isolate;
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
        opacity var(--reveal-duration) var(--reveal-easing),
        transform var(--hover-duration) var(--reveal-easing),
        box-shadow var(--hover-duration) var(--reveal-easing),
        border-color var(--hover-duration) ease;
}

#our-scale-section .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 55%);
    opacity: 0;
    transition: opacity 300ms ease;
    z-index: -1;
}

#our-scale-section .service-card::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -160%;
    width: 85%;
    height: 140%;
    transform: rotate(16deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    transition: left 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

#our-scale-section .service-card img {
    width: 76px;
    height: 76px;
    transform: translateY(0) scale(1);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), filter 360ms ease;
}

#our-scale-section .service-card h3 {
    margin: 16px 0 0;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), text-shadow 320ms ease;
}

#our-scale-section .service-card:nth-child(2) {
    animation-delay: 80ms;
}

#our-scale-section .service-card:nth-child(3) {
    animation-delay: 160ms;
}

#our-scale-section .service-card:nth-child(4) {
    animation-delay: 240ms;
}

#our-scale-section .service-card:hover,
#our-scale-section .service-card:focus-within {
    transform: translateY(-8px) scale(1.022);
    border-color: #6cc6ee;
    box-shadow: 0 20px 34px rgba(4, 54, 115, 0.24);
}

#our-scale-section .service-card:hover::before,
#our-scale-section .service-card:focus-within::before {
    opacity: 1;
}

#our-scale-section .service-card:hover::after,
#our-scale-section .service-card:focus-within::after {
    left: 130%;
}

#our-scale-section .service-card:hover img,
#our-scale-section .service-card:focus-within img {
    transform: translateY(-4px) scale(1.1);
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.16));
}

#our-scale-section .service-card:hover h3,
#our-scale-section .service-card:focus-within h3 {
    transform: translateY(2px);
    text-shadow: 0 8px 18px rgba(4, 54, 115, 0.14);
}

#our-scale-section .service-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 768px) and (max-width: 991.98px) {

    .our-scale-class {
        padding: 30px 0 30px;

    }

    #our-scale-section .services-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .our-scale-class {
        padding: 30px 0 30px;

    }

    #our-scale-section .services-cards {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}


/* Our Scale Section 2 */

.our-scale-class-2 {

    background: var(--white);
    padding: 50px 0 50px;
    overflow: visible;
}




#our-scale-section-2 .why-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    padding-top: 50px;
    overflow: visible;
    position: relative;
    z-index: 1;
    gap: 25px;
}

#our-scale-section-2 .why-card {
    position: relative;
    background: linear-gradient(180deg, #31abe0 0%, #3474bb 100%);
    border-radius: 20px;
    padding: 70px 13px 28px;
    text-align: center;
    overflow: visible !important;
    isolation: isolate;
    border: 1px solid rgba(174, 223, 250, 0.24);
    box-shadow: 0 6px 14px rgba(3, 31, 77, 0.9);
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 380ms ease, border-color 320ms ease, background-color 320ms ease;
}

#our-scale-section-2 .why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 12%, rgba(126, 205, 245, 0.26) 0%, rgba(126, 205, 245, 0) 52%);
    opacity: 0.35;
    transition: opacity 320ms ease;
    pointer-events: none;
    z-index: 0;
}

#our-scale-section-2 .why-card::after {
    content: '';
    position: absolute;
    top: -28%;
    left: -165%;
    width: 0%;
    height: 176%;
    transform: rotate(15deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: left 760ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
    pointer-events: none;
    z-index: 1;
}

#our-scale-section-2 .why-card:nth-child(1) {
    --why-delay: 60ms;
}

#our-scale-section-2 .why-card:nth-child(2) {
    --why-delay: 140ms;
}

#our-scale-section-2 .why-card:nth-child(3) {
    --why-delay: 220ms;
}





#our-scale-section-2 .why-card:hover,
#our-scale-section-2 .why-card:focus-within {
    transform: translateY(-12px) scale(1.024);
    border-color: rgba(190, 233, 255, 0.62);
    background: linear-gradient(180deg, rgba(49, 171, 224, 1) 100%, rgba(52, 116, 187, 1) 0%);
    box-shadow: 0 30px 42px rgba(3, 31, 77, 0.32);
}

#our-scale-section-2 .why-card:hover {
    transform: translateY(calc(var(--offset, 0px) - 12px)) scale(1.02);
}

#our-scale-section-2 .why-card:nth-child(1) {
    --offset: 0px;
}

/* #our-scale-section-2    .why-card:nth-child(2) {
    --offset: 30px;
}

#our-scale-section-2    .why-card:nth-child(3) {
    --offset: 60px;
}

#our-scale-section-2    .why-card:nth-child(4) {
    --offset: 90px;
} */

#our-scale-section-2 .why-card {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
        opacity var(--reveal-duration) var(--reveal-easing),
        transform var(--hover-duration) var(--reveal-easing);
}

/* visible state */
#our-scale-section-2 .why-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}


#our-scale-section-2 .why-card:hover::before,
#our-scale-section-2 .why-card:focus-within::before {
    opacity: 0.72;
}

#our-scale-section-2 .why-card:hover::after,
#our-scale-section-2 .why-card:focus-within::after {
    left: 205%;
    opacity: 1;
}

/* .why-card.tall {
  min-height: 454px;
}

.why-card.mid {
  min-height: 412px;
}

.why-card.low {
  min-height: 375px;
}

.why-card.short {
  min-height: 342px;
} */
#our-scale-section-2 .why-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    min-height: 300px;
    /* same for all */
}


#our-scale-section-2 .badge:empty {
    display: block !important;
}

#our-scale-section-2 .why-card .badge {
    position: absolute;
    left: 50%;
    top: -56px;
    transform: translateX(-50%);
    /* Scales continuously with the viewport instead of two fixed
       breakpoint steps */
    width: clamp(5.3125rem, 4.3125rem + 4.2vw, 8.125rem);   /* ~85–130px */
    height: clamp(5.3125rem, 4.3125rem + 4.2vw, 8.125rem);
    border-radius: 50%;
    /*    
background: linear-gradient(90deg, #ACADB1 0%, #C4C4C6 5%, #D5D5D6 10%, #DFDEDF 15%, #E3E2E2 20%, #CBCBCC 30%, #D6D6D6 40%, #E3E2E2 50%, #DCDBDB 60%, #CBCBCC 70%, #CFCFD0 80%, #D3D3D4 87%, #B3B4B7 95%, #A7A9AD 100%);
    border: 3px solid #f4d21d;
    padding: 16px;
    box-shadow: 0 0 0 6px #fff, 0 12px 24px rgba(2, 33, 82, 0.24);
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease, background-color 280ms ease;
    z-index: 2; */
}

#our-scale-section-2 .why-card .badge img {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), filter 320ms ease;
}

#our-scale-section-2 .why-card:hover .badge,
#our-scale-section-2 .why-card:focus-within .badge {
    transform: translateX(-50%) translateY(-3px) scale(1.05);
}

#our-scale-section-2 .why-card:hover .badge img,
#our-scale-section-2 .why-card:focus-within .badge img {
    /*    
transform: scale(1.08);
    filter: drop-shadow(0 4px 10px rgba(38, 169, 224, 0.34));
*/
}

#our-scale-section-2 .why-card h3 {
    margin: 0;
    color: #fff;
    transition: transform 320ms ease, text-shadow 320ms ease;
    position: relative;
    z-index: 2;
    min-height: 0 !important;
}

#our-scale-section-2 .why-card p {
    transition: transform 320ms ease, color 320ms ease;
    position: relative;
    z-index: 2;
}

#our-scale-section-2 .why-card:hover h3,
#our-scale-section-2 .why-card:focus-within h3 {
    transform: translateY(2px);
    text-shadow: 0 10px 20px rgba(3, 31, 77, 0.24);
}

#our-scale-section-2 .why-card:hover p,
#our-scale-section-2 .why-card:focus-within p {
    transform: translateY(1px);
    color: #f4fbff;
}

@media (min-width: 992px) and (max-width: 1027px) {

    #our-scale-section-2 .why-card {
        height: 100%;
        min-height: 265px;
    }

    #our-scale-section-2 .why-card {
        padding: 38px 12px 10px;


    }

}

@media (max-width: 991.98px) {

    #our-scale-section-2 .why-card {
        padding: 39px 13px 28px;
        min-height: 100%;

    }


    #our-scale-section-2 .why-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 2fr));
        gap: 65px;
    }

    /* Center the 3rd card */
    #our-scale-section-2 .why-cards>*:nth-child(3) {
        grid-column: 1 / -1;
        /* span full width */
        justify-self: center;
        /* center horizontally */
        max-width: 50%;
        /* optional: control width */
    }


}


@media (max-width: 767.98px) {
    .our-scale-class-2 {
       /* background: #a7a9ad;*/
        padding: 30px 0 30px;
        overflow: visible;
    }


    #our-scale-section-2 .why-cards {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 80px;
    }

    #our-scale-section-2 .why-card {
        min-height: 100%;
        padding: 35px 12px 15px;
    }


    #our-scale-section-2 .why-card:nth-child(1) {
        --offset: 0px;
    }

    #our-scale-section-2 .why-card:nth-child(2) {
        --offset: 0px;
    }

    #our-scale-section-2 .why-card:nth-child(3) {
        --offset: 0px;
    }

    /* #our-scale-section-2    .why-card:nth-child(4) {
        --offset: 0px;
    } */
    /* Center the 3rd card */
    #our-scale-section-2 .why-cards>*:nth-child(3) {
        max-width: 100%;

    }


}




.safet-and-technology-class {

    background: var(--navy-900);
    padding: 50px 0 50px;
    overflow: visible;
}

/* Safety & Technology bus diagram - ONE inline SVG (see
   template-parts/safety-tech-diagram.php) combining the bus artwork and
   all 8 feature callouts in a single coordinate space, so every leader
   line is drawn from an exact label position to an exact point on the
   bus and the whole thing scales as one unit at any width. */
.safety-tech-graphic {
    display: flex;
    justify-content: center;
    width: 100%;
}

.stg-svg {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
    overflow: visible;
}

/* Each callout (label + leader line) pops in one at a time, in sequence,
   while the section is in view - see the IntersectionObserver-driven
   cycle in main.js. Label SVGs use fill/stroke="currentColor" so this
   CSS `color` drives them: white at rest, and the source artwork's own
   green (#5cc45c, colour-picked directly off the client's Electric
   Vehicles icon in Services_18082026.ai) both for that label at rest
   and as the flash on whichever callout is currently being revealed. */
.stg-label {
    opacity: 0;
    color: #fff;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.85);
    transition: opacity 0.45s var(--reveal-easing, ease), transform 0.45s var(--reveal-easing, ease), color 0.4s ease;
}

.stg-label--accent {
    color: #5cc45c;
}

.stg-callout.is-active .stg-label {
    opacity: 1;
    transform: scale(1);
}

.stg-callout.is-current .stg-label {
    color: #5cc45c;
}

/* The leader line is a real SVG line from the label to its point on the
   bus - pathLength="1" lets stroke-dasharray/offset "draw" it toward
   that point regardless of the line's actual on-screen length. */
.stg-line {
    fill: none;
    stroke: #fff;
    stroke-width: 0.6;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.85;
    transition: stroke-dashoffset 0.5s var(--reveal-easing, ease) 0.15s;
}

.stg-callout.is-active .stg-line {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .stg-label {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .stg-line {
        stroke-dashoffset: 0 !important;
        transition: none;
    }
}

@media (max-width: 575.98px) {
    /* Leader lines read as clutter on narrow screens - the labels
       above/below the bus are enough. */
    .stg-line {
        display: none;
    }
}

.safety-and-technology-img {
    height: 400px;
    width: 100%;
}


@media (min-width: 992px) and (max-width: 1027px) {

    .safety-and-technology-img {
        height: 330px;
        width: 100%;
    }


}

@media (max-width: 991.98px) {

    .safety-and-technology-img {
        height: 100%;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .safet-and-technology-class {

        padding: 30px 0 30px;

    }

}

/*   */


#executive-team {
    background: linear-gradient(90deg,
            #ACADB1 0%,
            #C4C4C6 5%,
            #D5D5D6 10%,
            #DFDEDF 15%,
            #E3E2E2 20%,
            #CBCBCC 30%,
            #D6D6D6 40%,
            #E3E2E2 50%,
            #DCDBDB 60%,
            #CBCBCC 70%,
            #CFCFD0 80%,
            #D3D3D4 87%,
            #B3B4B7 95%,
            #A7A9AD 100%);
    padding: 50px 0 50px;
}

#executive-team .executive-team-row-forspace {
    padding-top: 110px;
}

#executive-team .col-lg-3,
#executive-team .col-md-4,
#executive-team .col-sm-6 {
    display: flex;
}

#executive-team .team-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* pushes button to bottom */
}

#executive-team .team-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

#executive-team .view-btn {
    margin-top: auto;
    /* keeps button aligned at bottom */
}

/* CARD */
#executive-team .team-card {
    background: var(--white);
    border-radius: 20px;
    padding: 125px 20px 25px;
    position: relative;
    transition: all 0.3s ease;
}

#executive-team .team-card {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition: opacity var(--reveal-duration) var(--reveal-easing),
                transform var(--reveal-duration) var(--reveal-easing);
}

#executive-team .team-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#executive-team .col-lg-3:nth-child(1) .team-card {
    animation-delay: 0.1s;
}

#executive-team .col-lg-3:nth-child(2) .team-card {
    animation-delay: 0.2s;
}

#executive-team .col-lg-3:nth-child(3) .team-card {
    animation-delay: 0.3s;
}

#executive-team .col-lg-3:nth-child(4) .team-card {
    animation-delay: 0.4s;
}

/* HOVER */
#executive-team .team-card:hover {
    /* transform: translateY(-8px); */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* IMAGE WRAP */
#executive-team .team-img {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    /* Scales continuously with the viewport instead of freezing at a
       fixed size below the 1027px breakpoint */
    width: clamp(8.125rem, 6.35rem + 7.5vw, 13.125rem);   /* ~130–210px */
    height: clamp(8.125rem, 6.35rem + 7.5vw, 13.125rem);
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgb(4, 54, 115, 0.24);
    background: #fff;
}

/* IMAGE */
#executive-team .team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}



/* BUTTON */
.view-btn {
    background: linear-gradient(90deg, var(--blue-600) 0%, var(--cyan-500) 50%, var(--blue-600) 100%);
    color: #fff;
    border-radius: 50px;
    padding: 10px 18px;
    font-size: var(--fs-button);
    transition: transform var(--hover-duration) var(--reveal-easing),
                box-shadow var(--hover-duration) var(--reveal-easing),
                filter var(--hover-duration) ease;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

/* BUTTON HOVER */
.view-btn:hover {
    background: linear-gradient(90deg, #26a9e0, #1c3a8d);
}

@media (max-width: 1027px) {
    #executive-team .team-card {
        padding: 90px 20px 25px;
    }
}

@media (max-width: 991.98px) {
    #executive-team .row {
        row-gap: 130px;
        /* space between cards */
    }
}

@media (max-width: 767.98px) {
    #executive-team {
        padding: 30px 0 30px;
    }

    #executive-team .executive-team-row-forspace {
        padding-top: 120px;
    }
}


.glow-your-network-class {

    background: var(--navy-900);
    padding: 70px 0 60px;
    overflow: visible;
}

@media (max-width: 767.98px) {
    .glow-your-network-class {

        padding: 60px 0 20px;
        overflow: visible;
    }

}

/***************************** Event Page ************************************/


#event-tabs {
    background: linear-gradient(90deg,
            #ACADB1 0%,
            #C4C4C6 5%,
            #D5D5D6 10%,
            #DFDEDF 15%,
            #E3E2E2 20%,
            #CBCBCC 30%,
            #D6D6D6 40%,
            #E3E2E2 50%,
            #DCDBDB 60%,
            #CBCBCC 70%,
            #CFCFD0 80%,
            #D3D3D4 87%,
            #B3B4B7 95%,
            #A7A9AD 100%);
    ;
    padding: 50px 0 50px;
}



#event-tabs .nav-tabs-custom .nav-link {
    font-weight: 600;
    color: var(--navy-900);
    border: none;
    transition: all 0.2s;
    font-size: var(--fs-h3);
    background: transparent;
}


#event-tabs .nav-tabs-custom .nav-link:hover {

    color: var(--color-primary);

}

#event-tabs .nav-tabs-custom .nav-link.active {
    background: transparent;
    color: var(--color-primary);

}

/* -------------------- ROAD SAFETY SECTION STYLES (from second code) -------------------- */
#event-tabs .event-card {
    background: rgba(255, 255, 255, 0.98);
    border: none;
    border-radius: 28px;
    box-shadow: 14px 16px 12px rgba(0, 0, 0, 0.2), 5px -4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#event-tabs .tab-pane.active .event-card {
    animation: fadeSlideUp 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.1) backwards;
}

@keyframes fadeSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#event-tabs .event-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 40px -16px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(239, 68, 68, 0.08);
}

#event-tabs .card-img-top-custom {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

#event-tabs .event-card:hover .card-img-top-custom {
    transform: scale(1.02);
}

#event-tabs .card-body-custom {
    padding: 1.5rem 1rem 1.6rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}



#event-tabs .event-meta {
    margin-bottom: 1rem;
    font-size: var(--fs-small);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #26A9E0;
}

#event-tabs .btn-custom {
    border-radius: 60px;
    padding: 0.5rem 0.8rem;
    font-weight: 400;
    font-size: var(--fs-button);

}

#event-tabs .btn-custom-outline {
    border: 1.5px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--white);

}

#event-tabs .btn-custom-outline:hover {
    background: var(--navy-800);
    color: var(--white);
}

#event-tabs .btn-primary-custom {
    background: var(--navy-800);
    border: none;
    color: var(--white);

}

#event-tabs .btn-primary-custom:hover {
    background: var(--color-primary);
    color: var(--white);

}


@media (max-width: 767.98px) {

    #event-tabs {
        padding: 20px 0 30px;
    }

}


/* Event Request Section Styles */

.event-request-class {

    background: linear-gradient(90deg, var(--blue-600) 0%, var(--cyan-500) 50%, var(--blue-600) 100%);
    padding: 50px 0 50px;
}



#event-request .form-control-custom {
    width: 100%;
    padding: 1rem 1.2rem;
    font-size: var(--fs-body);
    font-weight: 500;
    border: 2px solid #dee2e6;
    border-radius: 3rem;
    background: white;
    color: var(--navy-900);
    transition: all 0.2s ease;
    outline: none;
}

#event-request textarea.form-control-custom {
    border-radius: 1.5rem;
    resize: vertical;
}

#event-request .form-control-custom:focus,
#event-request textarea.form-control-custom:focus {
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

#event-request .date-input-wrapper {
    position: relative;
    width: 100%;
}

#event-request .date-input-wrapper .form-control-custom {
    padding-right: 3.2rem;
}

.event-btn-form {
    padding: 20px 38px !important;
}

.btn-half {

    flex: 0 0 50%;

    max-width: 50%;

}

#event-request .calendar-icon {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.7rem;
    color: var(--color-primary);
    cursor: pointer;
    background: transparent;
    transition: all 0.2s;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

#event-request .calendar-icon:hover {
    color: var(--color-primary);
    background: #e9f0f5;
    transform: translateY(-50%) scale(1.05);
}

/* Blue placeholder for ALL inputs/textarea in form */
#event-request .form-control-custom::placeholder,
#event-request textarea.form-control-custom::placeholder {
    color: var(--color-primary) !important;
    opacity: 1 !important;
    font-weight: 500;
    letter-spacing: 0.2px;
}

#event-request .form-control-custom::-webkit-input-placeholder,
#event-request textarea.form-control-custom::-webkit-input-placeholder {
    color: var(--color-primary) !important;
    opacity: 1 !important;
}

#event-request .field-spacing {
    margin-bottom: 1.25rem;
}


@media (max-width: 767.98px) {

    .event-request-class {
        padding: 30px 0 30px;
    }

}

/*  */

.incontactatag a {
    text-decoration: none;
    color: white !important;
}





/* Home Ceo */

.ceo-section-home {
    background: #fff;
    overflow: hidden;
    position: relative;
}

.ceo-section-home .ceo-image-wrapper {
    position: relative;
    max-width: 600px;
    margin: auto;
}

.ceo-section-home .ceo-bg-circle {
    position: absolute;
    width: 700px;
    height: 700px;
    background: linear-gradient(90deg, var(--blue-600) 0%, var(--cyan-500) 50%, var(--blue-600) 100%);
    border-radius: 50%;
    left: 0px;
    bottom: -170px;
    z-index: 1;
}

.ceo-section-home .ceo-image {
    position: relative;
    z-index: 2;
    max-height: 650px;
    object-fit: contain;
}

.ceo-section-home .ceo-content {
    padding-left: 30px;
}

/* Responsive */

@media (min-width: 1850px) {
    .ceo-section-home .ceo-bg-circle {
        width: 830px !important;
        height: 770px !important;
        border-radius: 50%;
        left: 0px !important;
        bottom: -162px !important;
    }

    .ceo-section-home .ceo-image {
        max-height: 720px;
        height: 710px;

    }

}

@media (min-width: 1441px) {
    .ceo-section-home .ceo-bg-circle {
        width: 700px;
        height: 700px;
        border-radius: 50%;
        left: -110px;
        bottom: -145px;
    }
}

@media (min-width: 1028px) and (max-width: 1199.99px) {
    .ceo-section-home .ceo-bg-circle {
        position: absolute;
        width: 570px;
        height: 570px;
        left: 0px;
        bottom: -170px;
        z-index: 1;
    }

    .ceo-section-home .ceo-image {
        max-height: 500px;
        height: 500px;
        object-fit: contain;
    }


}

@media (min-width: 1440px) {

   #why-us-section .sts-card-heading {
        min-height: 73px;
    }

}

@media (min-width: 1027px) and (max-width: 1439px) {

    .sts-card-heading {
        min-height: 73px;
    }

}

@media (min-width: 992px) and (max-width: 1027px) {

    .ceo-section-home .ceo-bg-circle {
        width: 500px;
        height: 500px;
        left: -100px;
        bottom: -100px;
    }

    .ceo-section-home .ceo-image {
        max-height: 480px;

    }

    .sts-card-heading {
        min-height: 50px;
    }

}

@media (max-width: 991px) {

    .ceo-section-home .ceo-content {
        padding-left: 0;
        text-align: center;
    }

    .ceo-section-home .for-overflow {
        overflow: hidden;
    }

    .ceo-section-home .ceo-image-wrapper {
        position: relative;
        max-width: 100%;
        justify-content: center;
        /* margin: auto; */
        display: flex;
    }

    .ceo-section-home .ceo-image {
        position: relative;
        z-index: 2;
        max-height: 400px;
        object-fit: contain;
    }
}

.screen-reader-response ul {

    display: none !important;
}

.screen-reader-response p {
    color: red !important;
}



#about-us-index .about-fade-slider {
    position: relative;
    height: 500px;
}

#about-us-index .bus-img {
    position: absolute;
    top: 50%;
    left: 50%;

    max-height: 500px;
    width: 100%;
    max-width: 100%;

    transform: translate(-50%, -50%) translateX(10%);
    z-index: 2;
}

#about-us-index .fade-slide {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

#about-us-index .fade-slide.active {
    opacity: 1;
}


/* No 991px-specific override for #about-us-index .bus-img here: the base
   rule above (top:50%/left:50%/translate(-50%,-50%)) already centers the
   image correctly for any uploaded aspect ratio. A previous override here
   changed the anchor to top:0/left:0 without updating the transform to
   match, which pushed the image up out of its box by half its own size —
   only not visible because an unrelated !important rule happened to zero
   the transform out. Removed both so there's one correct, unambiguous
   rule instead of two rules accidentally cancelling each other out. */

@media (max-width: 767.98px) {

    #about-us-index .about-fade-slider {
        position: relative;
        height: 260px;
    }

}

.header-inner .header-search {
    position: relative;
    margin-left: 15px;
}

.header-inner .search-toggle {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.header-inner .search-toggle img {
    width: 24px;
    height: 24px;
}

.header-inner .search-form {
    display: none;
    position: absolute;
    top: 110px;
    right: 0;
    z-index: 999;
    width: min(400px, calc(100% - 140px));
    gap: 12px;
    background: #fff;
    border: 2px solid var(--cyan-500);
    border-radius: 999px;
    padding: 10px 24px;
    z-index: 3;
    box-shadow: 0 10px 26px rgba(4, 54, 115, 0.46);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, border-color 260ms ease, background-color 260ms ease;
}

.header-inner .search-form.active {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-inner .search-form input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: 0;
    text-align: center;
    color: #A5A5A5;
    font-size: var(--fs-subheading);
    line-height: 1;
    font-weight: 400;
}

.header-inner .search-form button {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-inner .search-form button img {
    width: 24px !important;
    height: 24px !important;
    display: block;
}


@media (min-width: 1028px) and (max-width: 1439px) {
    .footer-grid {
        grid-template-columns: 46% 28% 23%;
    }



}

@media (min-width: 992px) and (max-width: 1027px) {

    .footer-grid {

        grid-template-columns: 48% 25% 24%;
    }

}


@media (max-width: 1027px) {
    .portalbtnhide {
        display: none;
    }
}

@media (min-width: 1027px) and (max-width: 1199.99px) {
    .brand img {
        width: 125px !important;
    }
}

@media (min-width: 1027px) and (max-width: 1199.99px) {
    .c3 .milestone-card-sub-heading {
        font-size: 16px;
        margin-top: 1px;
    }

    .c4 .milestone-card-sub-heading {
        font-size: 16px;
        margin-top: 14px;
    }

    .footer-logo {
        width: 190px;
    }
}


.footer-header-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr; /* Strict geometric mirroring of the layout tracks */
    gap: 40px;
    align-items: center;
    padding-bottom: 5px;
        padding-top: 38px;
}
 
.header-col-1 {
    display: flex;
    justify-content: flex-start;
}
 
 
/* ✅ Forces left-aligned behavior right within the starting coordinate of Column 3 */
.header-col-3 {
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    width: 100%;
}
 
/* ROW 2: Bottom Content Framework */
.footer-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr; /* Linked geometric mapping proportions */
    gap: 40px;
    align-items: start;
        padding-top: 24px;
}
 
.footer-column {
    display: flex;
    flex-direction: column;
}
 
 
/* Responsive Structural Overrides */
@media (max-width: 991px) {
    .footer-header-row {
        grid-template-columns: 1fr 1fr;
    }
    .header-col-2 {
        display: none; /* Collapses dead layout space on tablet */
    }
    .footer-content-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .col-subscribe {
        grid-column: span 2;
    }
}
 
@media (max-width: 767px) {
    .footer-header-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .footer-content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .col-subscribe {
        grid-column: span 1;
    }
}

/* Container */
.leadership-cards {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    font-family: var(--font-gamily);
}

/* Main Card Wrapper */
#leadership-cards-aboutus .leader-card {
    display: flex;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

/* Profile Sidebar (Left/Right) */
#leadership-cards-aboutus .leader-profile {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

/* #leadership-cards-aboutus .leader-card-reverse .leader-profile {
    border-right: none;
    border-left: 1px solid var(--gray-200);
} */

/* Leader Photo Container - Auto-fits dynamically */
#leadership-cards-aboutus .leader-photo-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    min-height: 240px;
}

/* Image Scaling - Stretches and crops properly */
#leadership-cards-aboutus .leader-img {
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Navy Info Box Below Photo */
#leadership-cards-aboutus .leader-info {
    background-color: var(--navy-900);
    color: var(--color-white);
    padding: 35px 25px;
    text-align: left;
}

#leadership-cards-aboutus .leader-name {
    font-size: var(--fs-h4);
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--color-white);
    font-family: var(--font-gamily);
}

#leadership-cards-aboutus .leader-role {
    font-size: var(--fs-small);
    color: var(--color-white);
    line-height: 1.3;
    display: block;
    font-family: var(--font-gamily);
    padding-top: 6px;
}

/* Bio Content Side */
#leadership-cards-aboutus .leader-bio {
    flex: 1;
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#leadership-cards-aboutus .leader-bio p {
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--navy-900);
    margin: 0 0 16px;
    font-family: var(--font-gamily);
}

#leadership-cards-aboutus .leader-bio p:last-child {
    margin-bottom: 0;
}

/* =======================================
   RESPONSIVE DESIGN (Tablets & Mobiles)
======================================= */
@media (max-width: 991.98px) {
    #leadership-cards-aboutus .leader-card {
        border-radius: 28px;
    }
    
    #leadership-cards-aboutus .leader-profile {
        flex: 0 0 240px;
    }

    #leadership-cards-aboutus .leader-bio {
        padding: 25px;
    }
    #leadership-cards-aboutus .leader-img {
    max-height: 100%; 
}
}

@media (max-width: 767.98px) {
    #leadership-cards-aboutus .leader-card,
    #leadership-cards-aboutus .leader-card-reverse {
        flex-direction: column;
    }

    #leadership-cards-aboutus .leader-card-reverse .leader-profile {
        order: 1;
        border-left: none;
    }

    #leadership-cards-aboutus .leader-card-reverse .leader-bio {
        order: 2;
    }

    #leadership-cards-aboutus .leader-profile {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }

    /* A fixed px height here (was 240px) doesn't scale with the card's
       width on narrow screens - the photo box ends up far wider than it
       is tall, so object-fit: cover has to crop most of the body away
       to fill it, leaving just the face. aspect-ratio ties the height
       to the actual rendered width instead, so the crop stays
       consistent (and the body stays visible) at any screen size. */
    #leadership-cards-aboutus .leader-photo-wrap {
        height: auto;
        aspect-ratio: 3 / 4;
        min-height: 0;
    }

    #leadership-cards-aboutus .leader-img {
        height: 100%;
        max-height: none;
    }

    #leadership-cards-aboutus .leader-info {
        text-align: center;
        padding: 18px 15px;
    }

    #leadership-cards-aboutus .leader-bio {
        padding: 20px;
    }
}

@media (min-width: 992.98px) {

.about {
    padding: 0px 0 0px;
    /* background: #fff; */
    background: linear-gradient(90deg, #ACADB1 0%, #C4C4C6 5%, #D5D5D6 10%, #DFDEDF 15%, #E3E2E2 20%, #CBCBCC 30%, #D6D6D6 40%, #E3E2E2 50%, #DCDBDB 60%, #CBCBCC 70%, #CFCFD0 80%, #D3D3D4 74%, #0d3b75 60%, #0d3b75 93%);
}

}