@media (max-width: 768px) {

    /* Base Layout Reset */
    .top-bar,
    .header.navbar {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Top info bar - Now following Desktop-style scroll behavior */
    .top-bar {
        position: absolute !important;
        /* Scrolls away like desktop */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1060 !important;
        background: #001f33 !important;
        height: 32px !important;
        /* Ultra compact height */
        display: flex !important;
        align-items: center !important;
    }

    .top-bar .container {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
    }

    .top-bar .info-row {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* Reset All Column/Container Defaults */
    .top-bar .phone,
    .top-bar .social-icons,
    .top-bar div[class*="col-"] {
        width: auto !important;
        flex: 0 0 auto !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Hide clock and non-essentials */
    .top-bar .col-lg-2,
    .top-bar .bi-clock,
    .top-bar .col-md-4:first-child:not(.phone) {
        display: none !important;
    }

    /* MATCH ICONS TO NUMBERS (Ultra-Slim) */
    .top-bar .phone i,
    .top-bar .social-icon-link {
        width: 20px !important;
        /* Matches line-height of numbers */
        height: 20px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 3px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 10px !important;
        /* Matches 11px text weight */
        color: #fff !important;
        line-height: normal !important;
        margin: 0 !important;
    }

    /* Force Icon Visibility - Restore Font Family */
    .top-bar i[class^="bi-"]::before,
    .top-bar a[class^="bi-"]::before,
    .top-bar .bi-telephone::before {
        font-family: "bootstrap-icons" !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* Uniform Text & Number Alignment */
    .top-bar p,
    .top-bar a {
        font-size: 11px !important;
        color: #fff !important;
        text-decoration: none !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        margin: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .top-bar .phone a {
        gap: 6px !important;
    }

    /* Force Social Icon UL into a horizontal row */
    .top-bar .social-icon {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 5px !important;
        height: 100% !important;
    }

    .top-bar .social-icon li {
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Navbar Alignment with Desktop Animation */
    .header.navbar {
        position: fixed !important;
        top: 0 !important;
        /* Starts at top but translated down */
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
        background: #ffffff !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid #f0f0f0 !important;
        transform: translateY(32px) !important;
        /* Matches Top Bar height */
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
        /* Desktop sync */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03) !important;
    }

    .header.navbar.scroll-down {
        transform: translateY(0) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    }

    .header .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 10px !important;
    }

    .header .navbar-brand {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .navbar-brand::before,
    .navbar-brand::after {
        display: none !important;
    }

    .header .navbar-brand img {
        height: 28px !important;
    }

    .header .company-name {
        font-size: 18px !important;
        color: #004d80 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.1px !important;
        line-height: 1 !important;
    }

    /* PREMIUM MOBILE MENU - Solid White Background */
    .header .navbar-collapse {
        position: fixed !important;
        top: 84px !important;
        /* Top (32) + Nav (52) */
        left: 0 !important;
        right: 0 !important;
        background: #ffffff;
        padding: 25px 20px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
        border-top: 1px solid #f0f0f0 !important;
        max-height: calc(100vh - 84px) !important;
        overflow-y: auto !important;
        z-index: 1045 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header .navbar-collapse.show {
        top: 52px !important;
        /* Adjust when scroll-down is active or if needed */
    }

    /* Ensure dropdown snaps correctly when scrolling */
    .header.navbar.scroll-down .navbar-collapse {
        top: 52px !important;
    }

    .header .navbar-nav {
        text-align: left !important;
    }

    .header .nav-item {
        margin-bottom: 2px !important;
    }

    .header .nav-link {
        color: #004d80 !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #f9f9f9 !important;
        display: block !important;
    }

    .header .nav-link.active {
        color: #3399ff !important;
        background: #f8fbff !important;
        border-radius: 6px !important;
    }

    /* BETTER HAMBURGER ICON */
    .header .navbar-toggler {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .header .navbar-toggler-icon {
        background-image: none !important;
        width: 24px !important;
        height: 3px !important;
        /* Thicker for better visibility */
        background-color: #004d80 !important;
        position: relative !important;
        display: block !important;
        border-radius: 3px !important;
        /* Rounded pill look */
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    }

    .header .navbar-toggler-icon::before,
    .header .navbar-toggler-icon::after {
        content: '' !important;
        position: absolute !important;
        left: 0 !important;
        width: 24px !important;
        height: 3px !important;
        background-color: #004d80 !important;
        border-radius: 3px !important;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    }

    .header .navbar-toggler-icon::before {
        top: -8px !important;
    }

    .header .navbar-toggler-icon::after {
        top: 8px !important;
    }

    /* X Transform when open */
    .header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-color: transparent !important;
    }

    .header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }

    .header .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
    }

    /* Main Content Clearance */
    main {
        padding-top: 84px !important;
        /* Top (32) + Nav (52) */
    }

    /* Hero Section Mobile Arrangement */
    .hero .carousel-caption {
        bottom: 22% !important;
        /* Moved higher from 12% */
        left: 5% !important;
        right: 5% !important;
        text-align: center !important;
        padding-bottom: 0 !important;
        width: 90% !important;
    }

    .hero h1 {
        font-size: 1.5rem !important;
        /* Scaled down from 1.7 */
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }

    .hero h1 span {
        white-space: normal !important;
        display: inline-block !important;
    }

    .hero h2 {
        font-size: 1.15rem !important;
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
    }

    .hero h5 {
        font-size: 0.95rem !important;
        white-space: normal !important;
        line-height: 1.6 !important;
        margin-bottom: 25px !important;
        padding: 0 10px !important;
    }

    .hero .mt-4 {
        margin-top: 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .hero .hero-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
        padding: 14px 10px !important;
        /* Adjusted padding */
        font-size: 14px !important;
        height: auto !important;
        white-space: nowrap !important;
        /* Force single line */
    }

    /* GLOBAL SECTION PADDING REDUCTION - Refined 20px */
    section,
    .section-padding {
        /* padding-top: 20px !important;
        padding-bottom: 20px !important; */
    }

    /* GLOBAL HEADING SCALING */
    h1 {
        font-size: 1.6rem !important;
    }

    h2 {
        font-size: 1.45rem !important;
    }

    h3 {
        font-size: 1.3rem !important;
    }

    h4 {
        font-size: 1.15rem !important;
    }

    h5 {
        font-size: 1.05rem !important;
    }

    h6 {
        font-size: 0.9rem !important;
    }

    p {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
    }

    /* About Section Mobile Adjustments */
    .about.section-padding {
        padding-top: 5px !important;
        padding-bottom: 0px !important;
    }

    .about .col-12.mb-5 {
        margin-bottom: 10px !important;
    }

    .about-image-wrap {
        margin-bottom: 0px !important;
    }

    .about-info {
        text-align: center !important;
        padding: 15px !important;
        /* Restored and kept for compactness */
    }

    .about-info h2 {
        font-size: 1.6rem !important;
    }

    .about-info h6 {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    .about-info p {
        font-size: 0.85rem !important;
        text-align: justify !important;
        margin-bottom: 10px !important;
    }

    .about-info .mt-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
        margin-top: 10px !important;
    }

    .about-info .custom-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
        text-align: center !important;
        padding: 10px 15px !important;
        /* Slightly reduced horizontal padding to fit text */
        white-space: nowrap !important;
        /* Force single line */
    }

    .about-thumb {
        margin-bottom: 12px !important;
        /* Reduced gap between cards to 12px */
    }

    /* Products & Brands Mobile */
    .projects.section-padding {
        padding-top: 25px !important;
    }

    .projects-thumb {
        margin-bottom: 25px !important;
    }

    .brand-card-v3 {
        height: 190px !important;
        /* Scaled down for tighter grid */
        margin-bottom: 10px !important;
        border-radius: 20px !important;
    }

    .brand-v3-title {
        font-size: 1.2rem !important;
        /* Scaled down */
    }

    .brand-v3-details {
        font-size: 0.8rem !important;
        padding: 0 15px !important;
    }

    /* Services & Content Mobile */
    .display-5 {
        font-size: 1.65rem !important;
        /* Scaled down from 1.85 */
        line-height: 1.25 !important;
    }

    .pe-lg-5 {
        padding-right: 0 !important;
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    /* Contact & Map Mobile */
    .contact-info-left {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .contact-info-left h2 {
        font-size: 1.85rem !important;
        margin-bottom: 5px !important;
    }

    .contact-info-left p.lead {
        font-size: 1.1rem !important;
        margin-bottom: 25px !important;
    }

    .contact-info-left ul {
        display: inline-block !important;
        text-align: left !important;
        max-width: 340px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .contact-info-left li {
        margin-bottom: 20px !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    .contact-icon-wrap {
        min-width: 45px !important;
        margin-right: 15px !important;
    }

    .contact-info-left h5 {
        font-size: 1.15rem !important;
        margin-bottom: 5px !important;
    }

    .contact-info-left p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
    }

    .contact-info-left .mt-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .contact-info-left hr {
        margin: 15px 0 !important;
        opacity: 0.15 !important;
    }

    .contact-info-left .custom-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
    }

    .map-container {
        height: 350px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        display: flex !important;
        /* Force children to stretch */
        overflow: hidden !important;
    }

    .google-map {
        height: 100% !important;
        width: 100% !important;
        flex: 1 !important;
        display: block !important;
        border: 0 !important;
    }

    /* Footer Uniformity Mobile */
    .site-footer {
        padding: 30px 0 15px !important;
        text-align: center !important;
    }

    .site-footer .footer-info-group {
        text-align: center !important;
        margin-bottom: 30px !important;
    }

    .site-footer .footer-logo {
        margin: 0 auto !important;
    }

    .site-footer h6 {
        font-size: 0.85rem !important;
        margin-bottom: 15px !important;
        color: #3399ff !important;
        /* Brighter blue for visibility */
    }

    .site-footer h5 {
        font-size: 1.2rem !important;
        margin-bottom: 10px !important;
    }

    .site-footer p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    .site-footer .d-flex.flex-column.gap-2 {
        align-items: center !important;
    }

    .site-footer a {
        justify-content: center !important;
        font-size: 0.95rem !important;
    }

    .site-footer .border-top.border-bottom {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    .site-footer .copyright-text {
        font-size: 0.85rem !important;
        margin-top: 15px !important;
        padding-top: 25px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: block !important;
    }

    /* Director Section Mobile Uniformity */
    .director-item {
        text-align: center !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .director-item h3 {
        font-size: 1.35rem !important;
        margin-bottom: 5px !important;
    }

    .director-item p.text-secondary {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
    }

    .director-item p.text-muted {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
        text-align: justify !important;
        /* Centered bio text for small screens */
        padding: 0 10px !important;
    }

    .director-item .p-4,
    .director-item .ps-lg-5,
    .director-item .pe-lg-5 {
        padding: 0 !important;
    }

    .director-image-wrapper {
        margin-bottom: 20px !important;
        max-width: 250px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Bootstrap Spacing Overrides for Compact View */
    .mt-5,
    .my-5,
    .pt-5,
    .py-5 {
        margin-top: 15px !important;
        padding-top: 15px !important;
    }

    .mb-5,
    .my-5,
    .pb-5,
    .py-5 {
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
    }
}