/* --- RESET --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #fff;
}

.container {
    width: 100%;
    /* Fluid on mobile */
    max-width: 1440px;
    /* Locked on desktop */
    margin: 0 auto;
    /* Centers the container */
}

/* --- HERO WRAPPER (White Padding surrounding the banner) --- */
.hero-wrapper {
    padding: 10px 20px;
}

/* ================= HERO BANNER ================= */

.hero-banner-inner {
    position: relative;
    height: 90vh;
    width: 100%;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
}

/* ================= VIDEO ================= */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, .6) 20%, transparent);
    z-index: -1;
}

/* ================= HEADER ================= */
.banner-header {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.header-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.logo {
    width: 102px;
    height: 55px;
}

/* DESKTOP NAV */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 30px;
    background: rgba(255, 255, 255, 0.10);
    padding: 8px 16px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
}

.main-nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

.main-nav ul li a:hover {
    color: #CF4E4E;
}

/* Contact button (desktop) */
.btn-contact {
    display: inline-flex;
    gap: 10px;
    background: #1E3A6A;
    color: #fff;
    padding: 8px 12px;
    border-radius: 50px;
    font-size: 16px;
    align-items: center;
    text-decoration: none;
}

.phone-icon {
    width: 30px;
    height: 30px;
}

/* ================= HERO CONTENT ================= */
.hero-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.hero-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 20px;
}

.hero-content-heading {
    width: 490px;
    margin-bottom: 0;
}

.hero-content-heading h1 {
    font-size: 54px;
    color: #fff;
    line-height: 62px;
    font-weight: 700;
    margin-bottom: 20px;
}

.hero-content-heading p {
    color: rgba(255, 255, 255, .8);
    font-size: 18px;
}

/* ================= DOWNLOAD BOX ================= */
.download-section {
    background: #fff;
    padding: 16px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .05);
    width: 304px;
}

.downloads {
    display: flex;
    align-items: center;
    gap: 15px;
}

.app-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-buttons img {
    width: 140px;
    display: block;
}

.ver-line {
    height: 90px;
    border-right: 1px solid #E0E0E0;
}

.qr-container img {
    width: 90px;
    height: 90px;
}

/* ================= DESKTOP DROPDOWN ================= */
.has-dropdown,
.menu-item-has-children {
    position: relative;
}

.dropdown-menu,
.sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 200px;
    background-color: #f5f5f5 !important;
    border-radius: 12px;
    padding: 10px 0;
    visibility: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    transition: .3s;
    z-index: 9999;
}

.has-dropdown:hover .dropdown-menu,
.menu-item-has-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li,
.sub-menu li {
    list-style: none;
}

.dropdown-menu li a,
.sub-menu li a {
    color: #111 !important;
    display: block;
    padding: 12px 20px;
    font-weight: 600;
}

.dropdown-menu li a:hover,
.sub-menu li a:hover {
    color: #CF4E4E !important;
}

.arrow {
    width: 8px;
    height: 4px;
    transition: .3s;
}

.menu-item-has-children>a::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 4px;
    background-image: url('../images/menu-arrow.png');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
    vertical-align: middle;
    transition: .3s;
}

.has-dropdown:hover .arrow,
.menu-item-has-children:hover>a::after {
    transform: rotate(180deg);
}

/* ================= MOBILE NAV TOGGLE ================= */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: rgba(255, 255, 255, .15);
    border-radius: 50%;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    cursor: pointer;
}

.nav-toggle span {
    width: 18px;
    height: 2px;
    background: #fff;
    transition: .3s;
}

/* Desktop contact vs mobile contact */
.mobile-contact {
    display: none;
}

.desktop-contact {
    display: inline-flex;
}

/* Close button (hidden on desktop) */
.close-nav {
    display: none;
}

/* ======================= MOBILE ======================= */
@media(max-width:768px) {
    .close-nav {
        background: rgba(255, 255, 255, .15);
        border-radius: 50%;
        display: block !important;
        position: absolute;
        top: 18px;
        right: 18px;
        font-size: 22px;
        line-height: 1;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }

    .nav-toggle {
        display: flex;
    }

    .desktop-contact {
        display: none;
    }

    .mobile-contact {
        display: block;
    }

    .hero-wrapper {
        padding: 0;
    }


    /* Side menu panel */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background: #000000e9;
        padding: 90px 28px 40px;
        border-radius: 0 0 0 30px;
        backdrop-filter: blur(8px);
        transition: .35s ease;
        z-index: 999;
    }

    .main-nav.open {
        right: 0;
    }

    .main-nav ul {
        flex-direction: column;
        gap: 20px;
        background: none;
        padding: 0;
    }


    /* ========== MOBILE SUBMENU FIX ========== */
    .has-dropdown,
    .menu-item-has-children {
        position: static !important;
    }

    .dropdown-menu,
    .sub-menu {
        position: static !important;
        display: block !important;
        max-height: 0;
        overflow: hidden;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: #fff;
        border-radius: 14px;
        padding: 0;
        margin-top: 0;
        box-shadow: none !important;
        transition: all 0.3s ease-in-out;
    }

    .has-dropdown.open .dropdown-menu,
    .menu-item-has-children.open .sub-menu {
        max-height: 1000px;
        padding: 10px 0;
        margin-top: 6px;
    }

    .has-dropdown.open .arrow,
    .menu-item-has-children.open>a::after {
        transform: rotate(180deg);
    }

    /* Hero mobile layout */
    .hero-banner-inner {
        height: 100vh;
        padding-bottom: 30px;
        align-items: flex-end;
        border-radius: 0;
    }

    .hero-container {
        padding: 0 20px;
    }

    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .hero-content-heading {
        max-width: 343px;
    }

    .hero-content-heading h1 {
        font-size: 30px;
        line-height: 130%;
    }

    .hero-content-heading p {
        font-size: 14px;
    }

    .download-section {
        width: 100%;
        max-width: 340px;
    }

    .app-buttons {
        display: flex;
        flex-direction: row;
        /* ensure same line */
        align-items: center;
        justify-content: space-between;
        /* spacing between buttons */
        width: 100%;
    }

    .app-buttons img {
        display: block;
        /* both buttons scale evenly */
    }

    .ver-line {
        display: none;
    }

    .qr-container {
        display: none;
    }
}

/* ========== MENU OVERLAY ========== */
.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
    z-index: 900;
}

.nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Disable page scroll when menu open */
body.menu-open {
    overflow: hidden;
}

/* ========== HAMBURGER TO X ANIMATION ========== */

.nav-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Animation block removed (merged into lines 371-398) */



/*----------------- About Section ---------------------*/
.about-section {
    padding: 100px 43px;
}

.about-flex-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
    gap: 40px;
}

.about-label p {
    font-weight: 700;
    font-size: 18px;
    color: #18181B;
}

.about-title-content h2 {
    font-size: 34px;
    font-weight: 700;
    color: #18181B;
    max-width: 749px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.feature-card {
    background: #fcfcfc;
    /* Very light grey/white */
    padding: 26px;
    border-radius: 8px;
    border: 1px solid #EEEEEE;
    gap: 24px;
}

.feature-number {
    display: block;
    color: #CF4E4E;
    /* Matching your red accent color */
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #18181B;
}

.feature-card p {
    font-size: 18px;
    font-weight: 400;
    color: #71717A;
    line-height: 1.6;
}

/* Responsive for Mobile */
@media (max-width: 992px) {
    .about-section {
        padding: 40px 16px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-flex-header {
        flex-direction: column;
    }

    .about-label p {
        font-size: 16px;
    }

    .about-title-content h2 {
        font-size: 20px;
    }
}

@media (max-width: 576px) {

    .features-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
    }

    .features-grid::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar for cleaner UI */
    }

    .feature-card {
        max-width: 250px;
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}




/* Our service section */

.services-section {
    background-color: #fff;
    padding: 100px 43px;
}

.services-intro {
    margin-bottom: 40px;
}

.services-intro h2 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #18181B;
}

.services-intro p {
    color: #71717A;
    font-size: 18px;
    font-weight: 400;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.service-card {
    height: 450px;
    /* Adjust based on your preference */
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
}

.service-card-content {
    padding: 30px;
    color: #fff;
}

.service-card-content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
}

.service-card-content p {
    font-size: 16px;
    font-weight: 400;
    color: #D3D3D3;
}

/* Responsive */
@media (max-width: 991px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .services-section {
        padding: 40px 16px;
    }

    .services-intro h2 {
        font-size: 26px;
    }

    .services-intro p {
        font-size: 16px;
    }

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

    .service-card-content h3 {
        font-size: 20px;
    }

    .service-card-content p {
        font-size: 14px;
    }
}




/* --- App CTA Section --- */

.app-cta-section {
    /* Extra top padding to accommodate the top overlap */
    padding: 100px 43px;
    overflow: visible;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.cta-banner {
    background: linear-gradient(to right, #1E3A6A, #3B72D0);
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 40px;
    position: relative;

    /* CRITICAL: Allows the image to bleed out of the top */
    overflow: visible !important;
}

.cta-content {
    flex: 1;
    color: #fff;
    max-width: 550px;
    z-index: 2;
}

.cta-content h2 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.cta-content p {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 35px;
    color: #DBDBDB;
}

.cta-buttons {
    display: flex;
    gap: 15px;
}

.cta-buttons img {
    height: 48px;
    width: auto;
}

.cta-image {
    /* Set position static so the child img can absolute-position 
       relative to the .cta-banner instead of this div */
    position: static;
}

.cta-image img {
    position: absolute;
    /* Anchors the mockup to the right edge */
    right: 40px;

    /* ANCHOR TO BOTTOM: This ensures the phone base 
       always sits on the bottom edge of the blue banner */
    bottom: 0;

    /* Set width high enough so the height naturally 
       overshoots the top of the banner */
    width: 480px;
    height: auto;

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

/* --- Responsive Adjustments --- */

@media (max-width: 1200px) {
    .cta-image img {
        width: 420px;
        right: 20px;
    }
}

@media (max-width: 991px) {
    .app-cta-section {
        padding: 80px 20px;
    }

    .cta-banner {
        flex-direction: column;
        padding: 120px 30px 320px;
        text-align: center;
        /* On mobile, we usually hide overflow to prevent horizontal scrolling */
        position: relative;
        overflow: hidden !important;
    }

    .cta-buttons {
        justify-content: center;
    }

    .cta-image img {
        position: absolute;
        bottom: 0;
        /* lock to bottom edge */
        left: 50%;
        /* center horizontally */
        transform: translateX(-50%);
        width: 320px;
        max-width: 90%;
        height: auto;
        margin: 0;
    }
}



/* ------ footer ----- */

.site-footer {
    background: #121212;
    /* Deep dark background */
    color: #ffffff;
    padding: 100px 43px;
    font-size: 15px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 60px;
}

/* Brand Section */
.footer-logo img {
    height: 55px;
    width: auto;
    display: block;
}

.footer-brand p {
    margin-top: 16px;
    color: #C5C5C5;
    max-width: 280px;
}

/* Titles and Links */
.footer-col h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #fff;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 15px;
}

.footer-col a {
    color: #C5C5C5;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: #fff;
}

/* Connect Section */
.footer-email {
    color: #BDBDBD;
    margin-bottom: 20px;
}

.footer-socials {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.footer-socials img {
    height: 20px;
    /* Size for the white icons in your design */
    width: auto;
    filter: brightness(0) invert(1);
    /* Ensures icons are white */
}

/* Bottom Bar */
.footer-bottom {
    border-top: 1px solid #333;
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    color: #999;
    font-size: 14px;
}

.footer-bottom strong {
    color: #fff;
}

/* Responsive */
@media (max-width: 991px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575px) {
    .site-footer {
        padding: 40px 16px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: left;
        /* 👈 Force left alignment */
    }

    .footer-socials {
        justify-content: flex-start;
        /* 👈 Icons stay left */
    }

    .footer-brand p {
        margin-left: 0;
        margin-right: 0;
    }

    .footer-col,
    .footer-brand {
        align-items: flex-start;
    }
}

/* ================= SERVICE PAGE TEMPLATE ================= */

/* --- Service Hero --- */
.service-hero-section {
    padding: 60px 0;
    background: #fff;
    overflow: hidden;
}

.service-hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 43px;
}

.service-hero-content {
    flex: 1;
    max-width: 600px;
}

.service-hero-content h1 {
    font-size: 50px;
    line-height: 1.2;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 24px;
}

.service-hero-content h1 span {
    color: #18181B;
    /* Or primary blue if needed, image shows black/dark grey */
}

/* If "Deliver" is blue in design */
.text-highlight {
    color: #1E3A6A;
}

.service-hero-content p {
    font-size: 18px;
    line-height: 1.6;
    color: #71717A;
    margin-bottom: 0;
}

.service-hero-image {
    flex: 1;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 400px;
    /* Adjust as needed */
}

.service-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991px) {
    .service-hero-container {
        flex-direction: column-reverse;
        padding: 40px 20px;
        gap: 30px;
    }

    .service-hero-content h1 {
        font-size: 36px;
        text-align: center;
    }

    .service-hero-content p {
        text-align: center;
    }

    .service-hero-image {
        width: 100%;
        height: 300px;
    }
}

/* --- How It Works --- */
.how-it-works-section {
    padding: 80px 0;
    background-color: #F8F8F8;
}

.how-it-works-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 43px;
    text-align: center;
}

.hiw-header {
    margin-bottom: 60px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hiw-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 16px;
}

.hiw-header p {
    font-size: 16px;
    color: #71717A;
    line-height: 1.5;
}

.hiw-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
}

.step-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
}

.step-number {
    width: 60px;
    height: 60px;
    background: #CF4E4E;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    box-shadow: 0 4px 10px rgba(207, 78, 78, 0.3);
}

.step-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 12px;
}

.step-card p {
    font-size: 14px;
    color: #71717A;
    line-height: 1.5;
    max-width: 220px;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .hiw-steps {
        grid-template-columns: 1fr 1fr;
        gap: 40px 20px;
    }
}

@media (max-width: 575px) {
    .hiw-steps {
        grid-template-columns: 1fr;
    }
}

/* --- Safety & Reliability --- */
.safety-section {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.safety-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 43px;
    display: flex;
    align-items: center;
    gap: 60px;
    justify-content: space-between;
}

.safety-content {
    flex: 1;
    max-width: 550px;
}

.safety-content h2 {
    font-size: 36px;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 24px;
}

.safety-content p.description {
    font-size: 16px;
    color: #71717A;
    line-height: 1.6;
    margin-bottom: 30px;
}

.safety-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.safety-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #52525B;
    line-height: 1.5;
}

.safety-list li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: #CF4E4E;
    border-radius: 50%;
    margin-top: 8px;
    /* align with text */
    flex-shrink: 0;
}

.safety-image {
    flex: 1;
    height: 500px;
    border-radius: 24px;
    overflow: hidden;
}

.safety-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991px) {
    .safety-container {
        flex-direction: column;
        padding: 60px 20px;
    }

    .safety-image {
        width: 100%;
        height: 350px;
        order: -1;
        /* Image first on mobile? or keep text first. Design usually keeps flow. */
    }
}

/* ================= SERVICE HEADER OVERRIDES ================= */

/* ================= SERVICE HEADER (LIGHT THEME) ================= */
.service-nav-wrapper {
    background-color: #fff;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

.service-nav-wrapper .banner-header {
    position: relative;
    /* Reset from absolute on homepage */
    top: 0;
}

.service-nav-wrapper .main-nav ul {
    background: #F4F4F5;
    /* Light grey pill background */
    padding: 8px 24px;
    border-radius: 30px;
}

.service-nav-wrapper .main-nav ul li a {
    color: #18181B !important;
    /* Force dark text */
    font-weight: 500;
}

.service-nav-wrapper .btn-contact {
    background: #1E3A6A;
}

/* ================= CENTERED HERO SECTION ================= */
.service-hero-section {
    padding: 60px 0;
    background: #fff;
}

.service-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    /* Stacked layout */
    align-items: center;
    text-align: center;
}

.service-hero-content {
    max-width: 800px;
}

.service-hero-content h1 {
    font-size: 44px;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 20px;
}

.text-highlight {
    color: #1E3A6A;
    /* Specific blue for 'Deliver' */
}

.service-hero-content p {
    font-size: 18px;
    font-weight: 400;
    color: #71717A;
}

.service-hero-image {
    width: 100%;
    max-width: 1194px !important;
    border-radius: 10px;
    overflow: hidden;
}

.service-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================= MOBILE RESPONSIVENESS ================= */
@media (max-width: 768px) {
    .service-hero-content h1 {
        font-size: 32px;
    }

    .service-hero-content p {
        font-size: 16px;
    }

    .service-hero-image {
        border-radius: 12px;
    }

    .service-nav-wrapper .nav-toggle span {
        background: #18181B;
        /* Ensure hamburger is visible on white */
    }
}

/* ================= ABOUT PAGE ================= */

/* --- About Hero --- */
.about-hero-section {
    padding: 80px 0;
    /* Removed horizontal padding to allow full-width */
    background: #fff;
    overflow-x: hidden;
}

.about-hero-container {
    max-width: 100%;
    /* Override standard container */
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.about-hero-content {
    flex: 1;
    max-width: 800px;
    /* Increased max-width */
    /* 
       Calculate left padding to simulate the standard container alignment:
       Formula: max(StandardPadding, (ViewportWidth - ContainerMax) / 2 + StandardPadding)
       Standard Padding = 43px (from original design)
       Container Max = 1440px
    */
    padding-left: max(43px, calc((100% - 1440px) / 2 + 43px));
    padding-right: 60px;
    /* Gap between text and image */
}

.about-hero-content h1 {
    font-size: 56px;
    line-height: 1.15;
    font-weight: 800;
    color: #18181B;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

.about-hero-content h1 .text-highlight {
    color: #1E3A6A;
}

.about-hero-desc {
    font-size: 20px;
    line-height: 1.6;
    color: #52525B;
    margin-bottom: 40px;
    max-width: 550px;
}

.about-hero-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    /* Pushes image to the right edge */
    position: relative;
    max-width: 50%;
    /* Ensure it takes up half layout */
}

.about-hero-image img {
    max-width: none;
    /* Allow image to exceed normal bounds if needed */
    height: auto;
    max-height: 700px;
    /* Prevent it from getting too huge */
    width: 100%;
    /* Or auto? Let's stick to auto/width logic */
    display: block;
    object-fit: cover;
    object-position: right center;
    /* Anchor right */
}

/* Stats */
.about-stats {
    display: flex;
    gap: 60px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #F4F4F5;
    max-width: 550px;
    /* Align max-width with desc */
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-num {
    font-size: 32px;
    font-weight: 700;
    color: #1E3A6A;
}

.stat-label {
    font-size: 12px;
    color: #A1A1AA;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

/* --- Mission & Vision --- */
.mission-vision-section {
    background-color: #1E3A6A;
    /* Match brand deep blue */
    padding: 120px 43px;
    color: #fff;
    overflow: hidden;
}

.mv-row {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 120px;
    /* More spacing between Mission and Vision */
}

.mv-row:last-child {
    margin-bottom: 0;
}

.mv-content {
    flex: 1;
}

.mv-content h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #fff;
}

.mv-text {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

.mv-image {
    flex: 1;
}

.mv-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    display: block;
}

/* --- Features Section --- */
.about-features-section {
    padding: 120px 43px;
    background: #fff;
}

.about-features-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.about-features-header h2 {
    font-size: 44px;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 16px;
}

.about-features-header p {
    font-size: 18px;
    color: #71717A;
    line-height: 1.6;
}

.about-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.af-card {
    background: #fff;
    border: 1px solid #E4E4E7;
    padding: 50px;
    border-radius: 24px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.af-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

.af-num {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #CF4E4E;
    /* Brand Red */
    margin-bottom: 20px;
}

.af-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 16px;
}

.af-card p {
    font-size: 16px;
    line-height: 1.6;
    color: #71717A;
}

/* --- Responsive Formatting --- */
@media (max-width: 991px) {

    .about-hero-section,
    .mission-vision-section,
    .about-features-section {
        padding: 60px 20px;
    }

    /* Hero */
    .about-hero-container {
        flex-direction: column-reverse;
        /* Text atop image on mobile? Usually Image top or Text top. Let's stick to text top or image top? 
        Design "explore app" usually comes first. Image often secondary or between. 
        Let's try Column: Text First, then Image, or Image First? 
        Usually Text First is better for SEO/UX, but visually Image might be desired. 
        Current code keeps HTML order: Text, then Image. 
        So column-reverse would make Image TOP. 
        Let's standard column (Text, then Image). */
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .about-hero-content {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .about-hero-content h1 {
        font-size: 36px;
    }

    .about-stats {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
        margin-top: 30px;
    }

    .about-hero-image {
        justify-content: center;
        width: 100%;
        max-width: 500px;
        /* constrain on mobile */
    }

    /* Mission/Vision */
    .mv-row {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 80px;
    }

    .mv-row.vision-row {
        flex-direction: column-reverse;
        /* Keep logic: Image acts as visual break? Or stacked? 
        If Vision Row HTML is Image, Text:
        Col-Reverse -> Text, Image. 
        Col -> Image, Text. 
        Let's keep generic column for consistent Text-Image-Text-Image flow? 
        Or Text-Image, Text-Image? 
        Let's set ALL to simple column: Image, then Text? Or Text then Image?
        Let's stick to HTML order but center text. */
        text-align: center;
    }

    .mv-row.mission-row {
        text-align: center;
    }

    .mv-row.vision-row .mv-content {
        order: 2;
        /* Ensure content is below image or above? */
    }

    .mv-row.vision-row .mv-image {
        order: 1;
    }

    /* Actually let's just make them vertical stack. */
}

@media (max-width: 767px) {
    .about-features-grid {
        grid-template-columns: 1fr;
    }

    .af-card {
        padding: 30px;
    }

    .about-hero-content h1 {
        font-size: 32px;
    }

    .mv-content h2 {
        font-size: 32px;
    }
}

/* ================= CONTACT PAGE ================= */
.contact-hero-section {
    padding: 80px 43px;
    background: #fff;
}

.contact-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    align-items: center;
}

.contact-image-col {
    flex: 1;
}

.contact-image-col img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    display: block;
    object-fit: cover;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.contact-form-col {
    flex: 1;
    max-width: 500px;
    /* Prevent form from stretching too wide */
}

.contact-form-col h1 {
    font-size: 48px;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 16px;
}

.contact-desc {
    font-size: 16px;
    color: #71717A;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 450px;
}

/* --- WPForms Customizing --- */
/* --- WPForms Customizing --- */
.contact-form-wrapper .wpforms-container {
    margin: 0;
}

/* Hide labels */
.contact-form-wrapper .wpforms-field-label {
    display: none !important;
}

.contact-form-wrapper input,
.contact-form-wrapper textarea,
.contact-form-wrapper .wpforms-field-large {
    width: 100%;
    max-width: 100% !important;
    border: 3px solid #000000 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
    color: #111827 !important;
    outline: none;
    background-color: #F9FAFB !important;
    background-image: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    display: block !important;
    transition: all 0.2s ease;
    font-family: inherit !important;
}

.contact-form-wrapper textarea {
    min-height: 150px !important;
    resize: vertical;
}

/* Placeholder Styling */
.contact-form-wrapper ::placeholder {
    color: #9CA3AF !important;
    opacity: 1;
    font-weight: 400;
}

/* Focus State */
.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    border-color: #3B82F6 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Spacing between fields */
.contact-form-wrapper .wpforms-field {
    margin-bottom: 20px !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* Submit Button */
.contact-form-wrapper .wpforms-submit-container {
    margin-top: 8px !important;
}

.contact-form-wrapper .wpforms-submit-container button,
.contact-form-wrapper .wpforms-submit-container input[type="submit"] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    font-size: 0 !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    padding: 14px 40px !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    line-height: 1 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
}

/* Insert "Send Message" text */
.contact-form-wrapper .wpforms-submit-container button::before,
.contact-form-wrapper .wpforms-submit-container input[type="submit"]::before {
    content: "Send Message";
    font-size: 16px !important;
    visibility: visible;
    font-weight: 600;
}

.contact-form-wrapper .wpforms-submit-container button:hover,
.contact-form-wrapper .wpforms-submit-container input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

/* ================= CONTACT INFO SECTION ================= */
.contact-info-section {
    background-color: #F8F8F8;
    padding: 80px 43px;
}

.contact-info-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    justify-content: space-between;
}

.ci-left {
    flex: 1;
    max-width: 400px;
}

.ci-label {
    display: block;
    font-size: 14px;
    color: #A1A1AA;
    /* Light grey label */
    margin-bottom: 12px;
    font-weight: 500;
}

.ci-left h2 {
    font-size: 40px;
    font-weight: 700;
    color: #18181B;
    line-height: 1.2;
}

.ci-right {
    flex: 1.5;
    display: flex;
    gap: 60px;
}

.ci-details,
.ci-address {
    flex: 1;
}

.ci-right h4 {
    font-size: 16px;
    font-weight: 700;
    color: #52525B;
    margin-bottom: 10px;
}

.ci-sep {
    height: 4px;
    width: 24px;
    background: #9faec5;
    /* Muted blue-grey */
    margin-bottom: 24px;
    border-radius: 2px;
}

.ci-item {
    font-size: 16px;
    color: #18181B;
    margin-bottom: 12px;
}

.ci-item strong {
    font-weight: 700;
    color: #18181B;
}

.ci-meta {
    margin-top: 20px;
    font-size: 14px;
    color: #71717A;
    line-height: 1.5;
}

.ci-address h5 {
    font-size: 16px;
    font-weight: 700;
    color: #18181B;
    margin-bottom: 8px;
}

.ci-address p {
    font-size: 14px;
    font-weight: 400;
    color: #71717A;
    line-height: 1.6;
}


/* ================= RESPONSIVE CONTACT ================= */
@media (max-width: 991px) {

    .contact-hero-section,
    .contact-info-section {
        padding: 60px 20px;
    }

    .contact-hero-container {
        flex-direction: column;
        gap: 40px;
    }

    .contact-image-col {
        order: -1;
        max-width: 500px;
        margin: 0 auto;
    }

    .contact-form-col {
        max-width: 100%;
        text-align: center;
    }

    .contact-form-col h1 {
        font-size: 32px;
    }

    .contact-desc {
        margin: 0 auto 30px;
    }

    .contact-form-wrapper {
        text-align: left;
        /* Keep form inputs aligned nicely */
    }

    .contact-info-grid {
        flex-direction: column;
        gap: 40px;
    }

    .ci-right {
        flex-direction: column;
        gap: 40px;
    }

    .ci-left h2 {
        font-size: 28px;
    }
}