/* ==========================================================================
   Aqua Paints — Modern Homepage Stylesheet (Mobile-First & Responsive)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --aq-primary: #008779;
    --aq-primary-dark: #005a51;
    --aq-primary-light: #e6f6f4;
    --aq-teal: #00b4d8;
    --aq-blue: #0077b6;
    --aq-navy: #03045e;
    --aq-orange: #ff6b35;
    --aq-yellow: #ffb703;
    --aq-accent-red: #e63946;
    --aq-green: #2a9d8f;
    --aq-purple: #7209b7;
    --aq-dark: #1a202c;
    --aq-gray-dark: #334155;
    --aq-gray: #64748b;
    --aq-gray-light: #f1f5f9;
    --aq-border: #e2e8f0;
    --aq-white: #ffffff;
    --aq-radius: 12px;
    --aq-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --aq-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --aq-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.12);
}

/* Navigation styles handled globally */

.homepage-wrapper {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--aq-dark);
    background-color: #fcfdfd;
    overflow-x: hidden;
    clear: both !important;
    display: block !important;
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
}

.font-bn {
    font-family: 'Hind Siliguri', 'Kalpurush', sans-serif !important;
}

.aq-flex-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .aq-flex-row {
        display: block;
    }
}

/* ==========================================================================
   Section Headers & Common Utilities
   ========================================================================== */
.aq-section {
    padding: 70px 0;
    position: relative;
    clear: both;
}

@media (max-width: 767px) {
    .aq-section {
        padding: 45px 0;
    }
}

.aq-section-header {
    text-align: center;
    margin-bottom: 45px;
    position: relative;
}

.aq-section-subtitle {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--aq-primary);
    background: var(--aq-primary-light);
    padding: 6px 16px;
    border-radius: 30px;
    margin-bottom: 12px;
}

.aq-section-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--aq-dark);
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.3;
}

.aq-section-desc {
    font-size: 15px;
    color: var(--aq-gray);
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .aq-section-title {
        font-size: 24px;
    }
    .aq-section-desc {
        font-size: 14px;
    }
    .aq-section-header {
        margin-bottom: 30px;
    }
}

/* Decorative Paint Wave Accents */
.paint-bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 15px;
}
.paint-bar span {
    display: inline-block;
    height: 4px;
    border-radius: 2px;
}
.paint-bar span:nth-child(1) { width: 30px; background: var(--aq-primary); }
.paint-bar span:nth-child(2) { width: 15px; background: var(--aq-orange); }
.paint-bar span:nth-child(3) { width: 25px; background: var(--aq-teal); }
.paint-bar span:nth-child(4) { width: 10px; background: var(--aq-yellow); }

/* ==========================================================================
   1. Hero Visual Section (Full Image Banner)
   ========================================================================== */
.aq-hero-section {
    position: relative;
    background: #ffffff;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    overflow: hidden;
    clear: both;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aq-hero-banner-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    margin: 0 auto;
}

.aq-hero-full-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
}

@media (min-width: 768px) {
    .aq-hero-section {
        background: #ffffff;
        min-height: 520px;
        padding: 0 !important;
    }
    .aq-hero-full-img {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (min-width: 1200px) {
    .aq-hero-section {
        min-height: 600px;
        padding: 0 !important;
    }
    .aq-hero-full-img {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 767px) {
    .aq-hero-section {
        background: #ffffff;
        padding: 0 !important;
    }
    .aq-hero-banner-container {
        padding: 0;
    }
    .aq-hero-full-img {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }
}

/* ==========================================================================
   2. Company Introduction Section
   ========================================================================== */
.aq-intro-section {
    background: #ffffff;
    padding: 110px 0;
}

.aq-intro-img-wrapper {
    position: relative;
    border-radius: var(--aq-radius);
    overflow: hidden;
    box-shadow: var(--aq-shadow-md);
}

.aq-intro-img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    display: block;
    border-radius: var(--aq-radius);
}

.aq-intro-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 58, 52, 0.9) 0%, transparent 100%);
    padding: 25px 20px 18px;
    color: #ffffff;
}

.aq-intro-img-overlay h4 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 700;
    color: #56e2d5;
}

.aq-intro-img-overlay p {
    margin: 0;
    font-size: 12px;
    color: #e2e8f0;
}

.aq-intro-text-box {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* Let the intro text spread across the full section width */
.aq-intro-section > .container {
    max-width: 100%;
    padding-left: 40px;
    padding-right: 40px;
}

.aq-intro-subtitle {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--aq-primary);
    margin-bottom: 8px;
    display: block;
}

.aq-intro-heading {
    font-size: clamp(40px, 5.5vw, 72px);
    font-weight: 700;
    color: var(--aq-dark);
    margin-top: 0;
    margin-bottom: 18px;
    line-height: 1.3;
}

.aq-intro-lead {
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 600;
    color: var(--aq-primary-dark);
    line-height: 1.65;
    margin-bottom: 20px;
    border-left: none;
    padding-left: 0;
}

.aq-intro-paragraph {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--aq-gray-dark);
    margin-bottom: 22px;
}

.aq-intro-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 22px;
}

.aq-intro-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--aq-gray-light);
    padding: 10px 14px;
    border-radius: 8px;
    border-left: 3px solid var(--aq-primary);
}

.aq-intro-feature-item i {
    font-size: 17px;
    color: var(--aq-primary);
    margin-top: 2px;
}

.aq-intro-feature-item strong {
    display: block;
    font-size: 13px;
    color: var(--aq-dark);
}

.aq-intro-feature-item span {
    font-size: 11.5px;
    color: var(--aq-gray);
}

@media (max-width: 991px) {
    .aq-intro-text-box {
        padding-left: 0;
        margin-top: 25px;
    }
}

@media (max-width: 575px) {
    .aq-intro-features {
        grid-template-columns: 1fr;
    }
    .aq-intro-heading {
        font-size: 30px;
    }
    .aq-intro-lead {
        font-size: 18px;
    }
}

/* ==========================================================================
   3. Key Products Slider Section
   ========================================================================== */
.aq-products-section {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.aq-product-card {
    background: #ffffff;
    border-radius: var(--aq-radius);
    padding: 20px 16px;
    box-shadow: var(--aq-shadow-sm);
    border: 1px solid var(--aq-border);
    transition: all 0.3s ease;
    margin: 8px 4px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.aq-product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--aq-shadow-lg);
    border-color: var(--aq-primary);
}

.aq-product-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-interior { background: #e0f2fe; color: #0284c7; }
.badge-exterior { background: #dcfce7; color: #16a34a; }
.badge-enamel { background: #fef3c7; color: #d97706; }
.badge-industrial { background: #f3e8ff; color: #9333ea; }
.badge-primer { background: #fee2e2; color: #dc2626; }

.aq-product-img-box {
    height: 195px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
}

.aq-product-img {
    max-height: 175px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.aq-product-card:hover .aq-product-img {
    transform: scale(1.06);
}

.aq-product-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.aq-product-cat {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--aq-primary);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.aq-product-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--aq-dark);
    margin: 0 0 14px;
    line-height: 1.35;
    min-height: 42px;
}

.aq-product-desc {
    font-size: 12.5px;
    color: var(--aq-gray);
    line-height: 1.5;
    margin-bottom: 12px;
    flex-grow: 1;
}

.aq-product-feature-tag {
    display: inline-block;
    font-size: 11px;
    color: var(--aq-gray-dark);
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 4px;
    margin-bottom: 14px;
}

.aq-product-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    background: var(--aq-primary-light);
    color: var(--aq-primary-dark) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    margin-top: auto;
}

.aq-product-card:hover .aq-product-btn {
    background: var(--aq-primary);
    color: #ffffff !important;
}

/* ==========================================================================
   4. Major Clients Slider Section
   ========================================================================== */
.aq-clients-section {
    background: #ffffff;
    border-top: 1px solid var(--aq-border);
    border-bottom: 1px solid var(--aq-border);
}

/* Owl slider item wrapper (spacing handled by carousel margin) */
.aq-client-card-item {
    padding: 0;
}

.aq-client-card {
    background: #ffffff;
    border: 1px solid var(--aq-border);
    border-radius: 12px;
    padding: 16px 12px;
    margin: 8px 4px;
    text-align: center;
    box-shadow: var(--aq-shadow-sm);
    transition: all 0.3s ease;
    min-height: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

.aq-client-card:hover {
    border-color: var(--aq-primary);
    box-shadow: 0 8px 24px rgba(0, 184, 161, 0.16);
    transform: translateY(-5px);
}

.aq-client-logo-box {
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    padding: 2px 6px;
}

.aq-client-logo-img {
    max-height: 74px;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.aq-client-card:hover .aq-client-logo-img {
    transform: scale(1.06);
}

.aq-client-icon-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--aq-primary-light);
    color: var(--aq-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s ease;
}

.aq-client-card:hover .aq-client-icon-badge {
    background: var(--aq-primary);
    color: #ffffff;
    transform: scale(1.06);
}

.aq-client-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--aq-dark);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.aq-client-category {
    display: none !important;
}

/* ==========================================================================
   5. Government & Institutional Enlistments Slider
   ========================================================================== */
.aq-govt-section {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}

.aq-govt-card {
    background: #ffffff;
    border: 1px solid #c7f2d6;
    border-radius: 14px;
    padding: 14px 10px 12px;
    margin: 8px 4px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(20, 83, 45, 0.05);
    transition: all 0.3s ease;
    min-height: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aq-govt-card:hover {
    border-color: #16a34a;
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.15);
}

.aq-govt-logo-box {
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
    padding: 2px 4px;
}

.aq-govt-logo-img {
    max-height: 76px;
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.aq-govt-card:hover .aq-govt-logo-img {
    transform: scale(1.1);
}

.aq-govt-name {
    font-size: 14px;
    font-weight: 800;
    color: #14532d;
    margin: 0;
    line-height: 1.3;
}

.aq-govt-tag {
    display: none !important;
}

/* ==========================================================================
   6. Licenses & Certifications Slider
   ========================================================================== */
.aq-creds-section {
    background: #f8fafc;
}

.aq-cred-card {
    background: #ffffff;
    border: 1px solid var(--aq-border);
    border-radius: var(--aq-radius);
    padding: 16px 12px;
    margin: 8px 4px;
    text-align: center;
    box-shadow: var(--aq-shadow-sm);
    transition: all 0.3s ease;
    min-height: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aq-cred-card:hover {
    border-color: var(--aq-primary);
    transform: translateY(-5px);
    box-shadow: var(--aq-shadow-md);
}

.aq-cred-seal-box {
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    padding: 2px;
    overflow: hidden;
}

.aq-cred-seal-img {
    max-width: 90%;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.aq-cred-card:hover .aq-cred-seal-img {
    transform: scale(1.08);
}

.aq-cred-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #008779, #00b4d8);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(0, 135, 121, 0.25);
}

.aq-cred-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--aq-dark);
    margin: 0;
    line-height: 1.3;
}

.aq-cred-authority,
.aq-cred-detail {
    display: none !important;
}

@media (max-width: 575px) {
    .aq-cred-card {
        min-height: 142px;
        height: 142px;
        padding: 12px 8px;
        margin: 6px 2px;
    }
    .aq-cred-seal-box {
        height: 64px;
        margin-bottom: 6px;
    }
    .aq-cred-seal-img {
        max-height: 56px;
    }
    .aq-cred-icon {
        width: 44px;
        height: 44px;
        font-size: 19px;
        margin-bottom: 6px;
    }
    .aq-cred-title {
        font-size: 12px;
        line-height: 1.25;
        font-weight: 600;
    }
}

/* ==========================================================================
   7. Notable Landmark Projects Slider
   ========================================================================== */
.aq-projects-section {
    background: #ffffff;
    border-top: 1px solid var(--aq-border);
}

.aq-project-card {
    background: #ffffff;
    border: 1px solid var(--aq-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--aq-shadow-sm);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 8px 4px;
}

.aq-project-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--aq-shadow-lg);
    border-color: var(--aq-primary);
}

.aq-project-img-box {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: #0f172a;
}

.aq-project-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.aq-project-card:hover .aq-project-img {
    transform: scale(1.08);
}

.aq-project-info {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.aq-project-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--aq-dark);
    margin: 0 0 6px;
    line-height: 1.35;
    text-align: center;
}

.aq-project-location {
    font-size: 12px;
    font-weight: 600;
    color: var(--aq-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
}

.aq-media-logo-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--aq-white);
    background: var(--aq-navy);
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

.aq-media-logo-tag.tag-prothom { background: #e11d48; }
.aq-media-logo-tag.tag-star { background: #0f172a; }
.aq-media-logo-tag.tag-nirman { background: #0284c7; }

.aq-media-text h5 {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--aq-dark);
}

.aq-media-text span {
    font-size: 10.5px;
    color: var(--aq-gray);
}

.aq-csr-badge-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.aq-csr-pill {
    background: #ffffff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    padding: 9px;
    font-size: 11.5px;
    font-weight: 600;
    color: #3730a3;
    display: flex;
    align-items: center;
    gap: 7px;
}

.aq-csr-pill i {
    color: #6366f1;
}

@media (max-width: 575px) {
    .aq-csr-badge-wrap {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   8. Contact & Quick Action Section
   ========================================================================== */
.aq-contact-section {
    background: linear-gradient(135deg, #013a34 0%, #005f55 100%);
    color: #ffffff;
}

.aq-contact-section .aq-section-title {
    color: #ffffff;
}

.aq-contact-section .aq-section-desc {
    color: #e2e8f0;
}

.aq-contact-section .aq-section-subtitle {
    background: rgba(255, 255, 255, 0.15);
    color: #56e2d5;
}

/* Dedicated locations + footer snap section (Corporate offices, factory) */
.aq-locations-section {
    background: linear-gradient(135deg, #013a34 0%, #005f55 100%);
    color: #ffffff;
}

.aq-action-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 35px;
}

.aq-action-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
    /* No backdrop-filter here on purpose: re-blurring the backdrop of every
       card while the section scrolls is a known source of shimmer/flicker. */
    display: block;
}

.aq-action-card:hover {
    background: #ffffff;
    color: var(--aq-primary-dark) !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

.aq-action-card:hover .aq-action-icon {
    background: var(--aq-primary);
    color: #ffffff;
}

.aq-action-card:hover .aq-action-btn {
    background: var(--aq-primary);
    color: #ffffff;
}

.aq-action-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 12px;
    transition: all 0.3s ease;
}

.icon-whatsapp { background: #25d366; color: #ffffff; }
.icon-phone { background: #ff6b35; color: #ffffff; }
.icon-email { background: #00b4d8; color: #ffffff; }

.aq-action-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 5px;
}

.aq-action-value {
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 12px;
    opacity: 0.9;
}

.aq-action-btn {
    display: inline-block;
    padding: 5px 16px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
    transition: all 0.2s ease;
}

.aq-locations-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 22px;
}

.aq-location-item h4 {
    color: #56e2d5;
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.aq-location-item p {
    font-size: 12.5px;
    line-height: 1.7;
    color: #e2e8f0;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .aq-action-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ==========================================================================
   Mobile-only fixes for the two closing snap sections:
   #contact-section   = "Connect With Aqua Paints" quick action cards
   #locations-section = Corporate offices + manufacturing + footer
   Root cause guarded against: Bootstrap .row has margin-left/right -15px
   and the columns keep side padding, so inside the 100vw snap container
   the content got wider than the phone screen -> right side was cut off.
   ========================================================================== */
@media (max-width: 767px) {
    /* Keep both snap sections inside the phone screen */
    body.is-homepage #contact-section,
    body.is-homepage #locations-section {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Neutralize Bootstrap negative margins that push content off-screen */
    body.is-homepage #locations-section .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.is-homepage #contact-section [class*="col-"],
    body.is-homepage #locations-section [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        float: none !important;
        width: 100% !important;
    }

    /* ---- Connect With Aqua Paints: title + 3 roomy tap cards ---- */
    #contact-section .aq-section-header {
        margin-bottom: 16px !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        text-align: center !important;
    }

    #contact-section .paint-bar {
        margin-top: 5px !important;
        transform: scale(0.85);
    }

    #contact-section .aq-section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 4px !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* Long values (phone/email/locations) must wrap inside their boxes */
    body.is-homepage #contact-section .aq-action-value,
    body.is-homepage #locations-section .aq-location-item p {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }

    /* The 3 action cards: stacked and spread top-to-bottom so the section
       is filled edge to edge (icon left, text center, pill right) */
    #contact-section .aq-action-cards {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-evenly !important;
        gap: 14px !important;
        margin-bottom: 0 !important;
    }

    #contact-section .aq-action-card {
        flex: 1 1 0 !important;
        min-height: 84px !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        text-align: center !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }

    /* Hover / tap feedback: the card turns WHITE (must beat the resting
       background override above, which uses ID specificity + !important) */
    #contact-section .aq-action-card:hover,
    #contact-section .aq-action-card:active,
    #contact-section .aq-action-card:focus {
        background: #ffffff !important;
        color: var(--aq-primary-dark) !important;
    }

    #contact-section .aq-action-card:hover .aq-action-title,
    #contact-section .aq-action-card:hover .aq-action-value,
    #contact-section .aq-action-card:active .aq-action-title,
    #contact-section .aq-action-card:active .aq-action-value {
        color: var(--aq-primary-dark) !important;
    }

    #contact-section .aq-action-card:hover .aq-action-btn,
    #contact-section .aq-action-card:active .aq-action-btn {
        background: var(--aq-primary) !important;
        color: #ffffff !important;
    }

    #contact-section .aq-action-icon {
        margin: 0 !important;
        width: 48px !important;
        height: 48px !important;
        font-size: 19px !important;
        flex: 0 0 48px !important;
    }

    #contact-section .aq-action-text {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    #contact-section .aq-action-title {
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    #contact-section .aq-action-value {
        margin: 0 !important;
        font-size: 13.5px !important;
        line-height: 1.35 !important;
        opacity: 1 !important;
    }

    /* Compact action pill under the number (whole card stays tappable) */
    #contact-section .aq-action-btn {
        display: inline-block !important;
        flex: 0 0 auto !important;
        margin: 6px 0 0 !important;
        padding: 6px 14px !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.22) !important;
        color: inherit !important;
    }

    #contact-section .aq-action-btn i {
        display: none !important;
    }

    /* ---- Offices + Footer: the box fills the whole step ---- */
    /* Its two items split the height evenly, separated by a divider line */
    #locations-section .aq-locations-box {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 14px 16px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        margin-bottom: 0 !important;
    }

    #locations-section .aq-locations-box > .row {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    #locations-section .aq-location-item {
        flex: 1 1 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin-bottom: 0 !important;
        padding: 12px 0 !important;
    }

    #locations-section .aq-location-item + .aq-location-item {
        border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
    }

    #locations-section .aq-location-item h4 {
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-top: 0 !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #56e2d5 !important;
    }

    #locations-section .aq-location-item p {
        font-size: 13px !important;
        line-height: 1.65 !important;
        margin-bottom: 0 !important;
        color: #e2e8f0 !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}

/* ==========================================================================
   Very short phones (<=660px tall, incl. landscape): tighten the offices
   box just enough that it and the footer always fit inside one snap step.
   ========================================================================== */
@media (max-width: 767px) and (max-height: 660px) {
    body.is-homepage #locations-section .aq-locations-box {
        padding: 10px 12px !important;
    }

    body.is-homepage #locations-section .aq-location-item {
        margin-bottom: 0 !important;
        padding: 8px 0 !important;
    }

    /* Let the connect cards compress on short screens so the section
       still fits in one snap step (landscape phones included) */
    body.is-homepage #contact-section .aq-action-card {
        min-height: 64px !important;
        max-height: none !important;
        gap: 3px !important;
        padding: 10px 14px !important;
    }

    body.is-homepage #contact-section .aq-action-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 15px !important;
        flex: 0 0 38px !important;
    }

    body.is-homepage #contact-section .aq-action-title {
        font-size: 13.5px !important;
    }

    body.is-homepage #contact-section .aq-action-value {
        font-size: 12px !important;
    }

    body.is-homepage #contact-section .aq-action-btn {
        margin-top: 3px !important;
        padding: 5px 10px !important;
        font-size: 9.5px !important;
    }

    #contact-section .aq-action-cards {
        gap: 10px !important;
    }

    body.is-homepage #contact-section .aq-section-header {
        margin-bottom: 12px !important;
    }

    body.is-homepage #locations-section .aq-location-item h4 {
        font-size: 12.5px !important;
        margin-bottom: 2px !important;
    }

    body.is-homepage #locations-section .aq-location-item p {
        font-size: 10.5px !important;
        line-height: 1.35 !important;
    }
}

/* Ultra-short screens (<=600px tall, e.g. 320x568): one more notch tighter */
@media (max-width: 767px) and (max-height: 600px) {
    body.is-homepage #locations-section .aq-locations-box {
        padding: 8px 10px !important;
    }

    body.is-homepage #locations-section .aq-location-item p {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    /* One more notch for the stacked connect cards on tiny screens */
    body.is-homepage #contact-section .aq-action-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        flex: 0 0 32px !important;
    }

    body.is-homepage #contact-section .aq-action-title {
        font-size: 13px !important;
    }

    body.is-homepage #contact-section .aq-action-value {
        font-size: 11.5px !important;
    }

    body.is-homepage #contact-section .aq-action-btn {
        margin-top: 2px !important;
        padding: 4px 9px !important;
        font-size: 9px !important;
    }
}

/* ==========================================================================
   Owl Carousel Custom Styling & Smooth Navigation
   ========================================================================== */
.aq-slider-wrap {
    position: relative;
    padding: 0 5px;
}

.owl-theme .owl-nav {
    display: none !important;
    margin-top: 20px;
    text-align: center;
}

.owl-theme .owl-nav [class*=owl-] {
    color: var(--aq-primary-dark) !important;
    font-size: 16px !important;
    padding: 8px 18px !important;
    background: #ffffff !important;
    border: 1px solid var(--aq-border) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 30px !important;
    margin: 0 6px !important;
    box-shadow: var(--aq-shadow-sm);
    transition: all 0.2s ease;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: var(--aq-primary) !important;
    color: #ffffff !important;
    border-color: var(--aq-primary) !important;
}

.owl-theme .owl-dots {
    text-align: center;
    margin-top: 15px;
}

.owl-theme .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    margin: 5px 4px;
    background: #cbd5e1;
    display: block;
    border-radius: 30px;
    transition: all 0.2s ease;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--aq-primary);
    width: 24px;
}

/* ==========================================================================
   Fullpage Section Scroll Snap (Homepage Only)
   ========================================================================== */

/* The body must have class "is-homepage" to activate this */
body.is-homepage {
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent native scroll, force use of homepage-wrapper */
}



body.is-homepage .homepage-wrapper {
    height: 100vh;
    height: 100svh; /* stable mobile height: the URL bar hiding can not resize it mid-scroll */
    width: 100vw;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-snap-type: none !important;

    /* NOTE: `scroll-behavior: smooth` is deliberately NOT set here. It made
       every programmatic scrollTop write animate on its own and fought the
       mandatory snap points, which is what flickered while scrolling.
       Section jumps ask for smooth scrolling explicitly instead. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain; /* no rubber-band / chaining flicker at the ends */
    
    /* Hide scrollbar for a seamless look */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
body.is-homepage .homepage-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Make every section exactly 100vh tall and snap into place */
body.is-homepage .snap-sec {
    height: 100vh !important;
    height: 100svh !important; /* stable mobile height: no resize jitter while scrolling */
    min-height: 100vh !important;
    min-height: 100svh !important;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    padding-top: 80px !important; /* Offset for fixed navbar */
    padding-bottom: 20px !important;
    box-sizing: border-box;
    overflow: hidden; /* prevent content spilling over section bounds */
}

/* Adjust the hero section specifically */
body.is-homepage .aq-hero-section.snap-sec {
    padding-top: 80px !important;
    padding-bottom: 0 !important;
    background: #ffffff !important;
}

/* Intro ("A Pioneer...") section: extra breathing room top & bottom.
   Must beat the generic .snap-sec !important padding above. */
body.is-homepage #about-section.snap-sec {
    padding-top: 130px !important;
    padding-bottom: 90px !important;
}

@media (max-width: 767px) {
    body.is-homepage #about-section.snap-sec {
        padding-top: 110px !important;
        padding-bottom: 90px !important;
    }
}

/* Short phones (e.g. 360x640): shrink text + padding so nothing is clipped
   by the section's overflow:hidden */
@media (max-width: 767px) and (max-height: 700px) {
    body.is-homepage #about-section.snap-sec {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }
    .aq-intro-heading {
        font-size: 26px;
    }
    .aq-intro-lead {
        font-size: 17px;
    }
}

body.is-homepage .aq-hero-banner-container {
    height: calc(100vh - 80px) !important;
    height: calc(100svh - 80px) !important;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff !important;
}

body.is-homepage .aq-hero-full-img {
    height: auto;
    max-height: 100%;
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
}

/* --- Mobile & Tablet (<=991px): the hero image sits in the full-height hero
   section below the fixed header. Use `contain` so the whole artwork (with its
   text) stays visible; the container/section background is white, so the
   letterboxed bands are invisible and there are no visible slivers. --- */
@media (max-width: 991px) {
    body.is-homepage .aq-hero-section.snap-sec {
        padding-top: 64px !important; /* exactly the fixed mobile header height */
        padding-bottom: 0 !important;
    }

    body.is-homepage .aq-hero-banner-container {
        height: calc(100vh - 64px) !important;
        height: calc(100svh - 64px) !important;
    }

    body.is-homepage .aq-hero-full-img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center center !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* If any section's content is too tall, let it scroll internally (though we hope it fits) */
body.is-homepage .snap-sec > .container {
    max-height: calc(100vh - 100px);
    max-height: calc(100svh - 100px);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
body.is-homepage .snap-sec > .container::-webkit-scrollbar {
    display: none;
}

/* ==========================================================================
   The final two snap sections are dedicated full-page sections:
   #contact-section   -> ONLY "Connect With Aqua Paints" (3 action cards)
   #locations-section -> Corporate Head Office + Manufacturing Facility,
                         closed by the black site footer bar.
   Each fills exactly one 100vh snap step.
   ========================================================================== */

/* --- Mobile (<768px) --- */
@media (max-width: 767px) {
    /* Connect With Aqua Paints: title + 3 tap-friendly cards, centered */
    body.is-homepage #contact-section.snap-sec {
        justify-content: center !important;
        padding-top: 62px !important; /* clearance for fixed navbar */
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Container fills the step: title at the top, cards spread over the rest */
    body.is-homepage #contact-section.snap-sec > .container {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100svh - 62px) !important;
        padding: 10px 16px 18px !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    body.is-homepage #contact-section.snap-sec > .container::-webkit-scrollbar {
        display: none !important;
    }

    /* Offices + Footer: locations centered, footer pinned to the bottom */
    body.is-homepage #locations-section.snap-sec {
        justify-content: space-between !important;
        padding-top: 62px !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.is-homepage #locations-section.snap-sec > .container {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        padding: 4px 14px 10px !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    body.is-homepage #locations-section.snap-sec > .container::-webkit-scrollbar {
        display: none !important;
    }

    /* The offices box fills the space between the top and the footer.
       Top margin + container padding (4px) = 26px, matching the 26px below
       (margin-bottom 16px + container padding-bottom 10px), so the box is
       not glued to the navbar and its top/bottom gaps look the same. */
    body.is-homepage #locations-section.snap-sec > .container > .aq-locations-box {
        flex: 1 1 auto !important;
        margin-top: 22px !important;
        margin-bottom: 16px !important;
    }

    /* Footer bar closing the locations section */
    body.is-homepage #locations-section .footer-area {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        background: #000000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 14px 8px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.is-homepage #locations-section .footer-area > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.is-homepage #locations-section .footer-area .row {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        text-align: center !important;
        margin: 0 !important;
    }

    body.is-homepage #locations-section .footer-area [class*="col-"] {
        padding: 0 !important;
        width: 100% !important;
        text-align: center !important;
    }

    body.is-homepage #locations-section .footer-area .logo-footer {
        margin: 0 !important;
        line-height: 1 !important;
    }

    body.is-homepage #locations-section .footer-area .logo-footer img {
        height: 22px !important;
        width: auto !important;
        max-width: 105px !important;
        object-fit: contain !important;
    }

    body.is-homepage #locations-section .footer-area .last-foot {
        font-size: 10px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        color: #94a3b8 !important;
    }

    body.is-homepage #locations-section .footer-area .last-foot a {
        color: #008779 !important;
        font-weight: 600 !important;
    }

    body.is-homepage #locations-section .footer-area .right-footer {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    body.is-homepage #locations-section .footer-area .right-footer li {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.is-homepage #locations-section .footer-area .right-footer li a {
        width: 26px !important;
        height: 26px !important;
        line-height: 26px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.12) !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 11px !important;
        transition: all 0.2s ease !important;
        text-decoration: none !important;
    }
}

/* --- Desktop / tablet (>=768px) --- */
@media (min-width: 768px) {
    /* Desktop: ONE closing snap section -> Connect cards + Offices + Footer.
       (#locations-section stays in the DOM but is emptied, de-snap-ified and
       hidden on desktop by the responsive layout script in main.js.) */
    body.is-homepage #contact-section.snap-sec {
        justify-content: space-between !important;
        padding-top: 80px !important;
        padding-bottom: 0 !important;
    }

    body.is-homepage #contact-section.snap-sec > .container {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        max-height: none !important;
        padding-bottom: 12px !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }

    body.is-homepage #contact-section.snap-sec > .container::-webkit-scrollbar {
        display: none !important;
    }

    /* Auto margins center the group (title -> cards -> offices); any
       overflow on very short screens grows downward and stays scrollable. */
    body.is-homepage #contact-section.snap-sec > .container > .aq-section-header {
        margin-top: auto !important;
    }

    /* Clear breathing gap between the action cards and the offices box
       (base .aq-action-cards uses 35px; keep them visually separated). */
    body.is-homepage #contact-section .aq-action-cards {
        margin-bottom: 35px !important;
    }

    body.is-homepage #contact-section.snap-sec > .container > .aq-locations-box {
        margin-bottom: auto !important;
    }

    /* Balance the two columns inside the offices box: "Corporate Head Office"
       has one text line less than "Manufacturing Facility". With float
       columns each column keeps its natural height, so the left one ends
       21px higher and shows 23px above vs 44px below. Making the row a flex
       row stretches both columns to equal height; then centering each
       column's content makes its top and bottom gaps equal. */
    body.is-homepage #contact-section .aq-locations-box > .row {
        display: flex !important;
        align-items: stretch !important;
    }

    body.is-homepage #contact-section .aq-location-item {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        margin-bottom: 0 !important;
    }

    /* Black footer bar closing the merged section */
    body.is-homepage #contact-section .footer-area {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        background: #000000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 18px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.is-homepage #contact-section .footer-area > .container {
        width: 100% !important;
        max-width: 1200px !important;
    }

    /* Offices + Footer: locations centered, footer bar at the bottom */
    body.is-homepage #locations-section.snap-sec {
        justify-content: space-between !important;
        padding-top: 80px !important;
        padding-bottom: 0 !important;
    }

    body.is-homepage #locations-section.snap-sec > .container {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        padding-bottom: 10px !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        box-sizing: border-box !important;
    }

    body.is-homepage #locations-section.snap-sec > .container::-webkit-scrollbar {
        display: none !important;
    }

    body.is-homepage #locations-section.snap-sec > .container > .aq-locations-box {
        width: 100% !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
    }

    /* Black footer bar closing the section */
    body.is-homepage #locations-section .footer-area {
        flex: 0 0 auto !important;
        height: auto !important;
        max-height: none !important;
        background: #000000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 18px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.is-homepage #locations-section .footer-area > .container {
        width: 100% !important;
        max-width: 1200px !important;
    }
}

/* --- Desktop (>=768px) rules for these two sections live above. --- */

/* ==========================================================================
   Short desktop / laptop note (<=850px tall, e.g. 1280x720 & 1366x768):
   both closing sections are standalone now and comfortably fit; no special
   compaction is required, so nothing extra is defined here.
   ========================================================================== */

/* Ensure dots always have space at the bottom */
body.is-homepage .owl-carousel {
    padding-bottom: 25px !important;
}


/* Reset button/div styling for custom dots */
.owl-theme .owl-dots .owl-dot {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-block;
}

/* ==========================================================================
   Mobile Header: Logo Far Left, Hamburger Far Right, Menu Full Width
   ========================================================================== */
@media (max-width: 991px) {
    html body.is-homepage .navigation,
    html body.is-homepage .navigation.sticky-nav,
    html body.is-homepage .navigation.is-scrolled {
        width: 100% !important;
        max-width: 100% !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        min-height: 64px !important;
        height: 64px !important; /* exact header height: no dead white space below the bar */
        background-color: #ffffff !important;
        border-bottom: none !important; /* keep the bar at exactly 64px (shadow draws the divider) */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
        z-index: 99999 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body.is-homepage .navigation .navbar-default {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 64px !important; /* was inheriting the desktop 92px bar (29px white gap) */
        height: 64px !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        position: relative !important;
    }

    html body.is-homepage .navigation .navbar-default > .container,
    html body.is-homepage .navigation .container {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    html body.is-homepage .navigation .navbar-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 64px !important;
        height: 64px !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-sizing: border-box !important;
    }

    /* ELIMINATE pseudo-elements that act as flex items and push logo/hamburger inward */
    html body.is-homepage .navigation .navbar-header::before,
    html body.is-homepage .navigation .navbar-header::after,
    html body.is-homepage .navigation .navbar-header:before,
    html body.is-homepage .navigation .navbar-header:after {
        display: none !important;
        content: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Logo at Far Left */
    html body.is-homepage .navigation .navbar-header .logo-area {
        display: flex !important;
        align-items: center !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }

    html body.is-homepage .navigation .navbar-header .logo-area a {
        display: flex !important;
        align-items: center !important;
    }

    html body.is-homepage .navigation .navbar-header .logo-area a img,
    html body.is-homepage .navigation .navbar-header img {
        height: 38px !important;
        max-height: 38px !important;
        width: auto !important;
        max-width: 160px !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
    }

    html body.is-homepage .navigation .logo-area.aff,
    html body.is-homepage .navigation .navbar-collapse .logo-area.aff {
        display: none !important;
    }

    /* Hamburger at Far Right */
    html body.is-homepage .navigation .navbar-toggle,
    html body.is-homepage .navigation .navbar-header .navbar-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
        float: none !important;
        background-color: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 8px 10px !important;
        cursor: pointer !important;
        width: auto !important;
        height: auto !important;
        flex: 0 0 auto !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    }

    html body.is-homepage .navigation .navbar-toggle .icon-bar,
    html body.is-homepage .navigation .navbar-header .navbar-toggle .icon-bar {
        background-color: #008779 !important;
        width: 22px !important;
        height: 2px !important;
        border-radius: 2px !important;
        margin-top: 4px !important;
        display: block !important;
    }

    html body.is-homepage .navigation .navbar-toggle .icon-bar:first-child,
    html body.is-homepage .navigation .navbar-header .navbar-toggle .icon-bar:first-child {
        margin-top: 0 !important;
    }

    /* Mobile Menu Dropdown - 100% FULL WIDTH */
    html body.is-homepage .navigation .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background-color: #ffffff !important;
        margin: 0 !important;
        border: none !important;
        border-top: 1px solid #f1f5f9 !important;
        border-radius: 0 !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
        padding: 8px 0 16px 0 !important;
        max-height: calc(100vh - 64px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    html body.is-homepage .navigation .navbar-collapse.collapsing {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background-color: #ffffff !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
        overflow: hidden !important;
        transition: height 0.35s ease !important;
    }

    html body.is-homepage .navigation .navbar-collapse.show,
    html body.is-homepage .navigation .navbar-collapse.in {
        display: block !important;
    }

    /* Closed menu must stay hidden at tablet widths too (768-991px): the
       Bootstrap 3 compat stylesheet forces .navbar-collapse.collapse to
       display:block from 768px up, which left the menu permanently expanded
       and covering the top of every section. */
    html body.is-homepage .navigation .navbar-collapse.collapse:not(.show):not(.in):not(.collapsing) {
        display: none !important;
    }

    html body.is-homepage .navigation .navbar-nav,
    html body.is-homepage .navigation .navbar-default .navbar-nav {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        float: none !important;
        border: none !important;
        display: block !important;
        height: auto !important;
        background: transparent !important;
        list-style: none !important;
    }

    html body.is-homepage .navigation .navbar-default .navbar-nav > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        float: none !important;
    }

    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 13px 20px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid #f8fafc !important;
        color: #1e293b !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-transform: capitalize !important;
        height: auto !important;
        line-height: normal !important;
        background: transparent !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a:hover,
    html body.is-homepage .navigation .navbar-default .navbar-nav > li.open > a,
    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a:focus {
        background-color: #f0fdfa !important;
        color: #008779 !important;
    }

    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a i {
        color: #008779 !important;
        font-size: 17px !important;
        width: 24px !important;
        text-align: left !important;
        margin: 0 14px 0 0 !important;
        flex-shrink: 0 !important;
    }

    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a span {
        display: inline-block !important;
        flex: 1 !important;
        margin-left: 0 !important;
    }

    /* AQUA COLOUR VISUALIZER button in mobile menu */
    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a[href*="colors.aquapaints.com"] {
        background-color: #008779 !important;
        color: #ffffff !important;
        border-radius: 30px !important;
        margin: 12px 20px 8px 20px !important;
        padding: 12px 20px !important;
        justify-content: center !important;
        width: calc(100% - 40px) !important;
        box-shadow: 0 4px 14px rgba(0, 135, 121, 0.25) !important;
        border-bottom: none !important;
        text-align: center !important;
    }

    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a[href*="colors.aquapaints.com"]:hover {
        background-color: #005a51 !important;
        color: #ffffff !important;
    }

    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a[href*="colors.aquapaints.com"] i {
        color: #ffffff !important;
        width: auto !important;
        margin-right: 10px !important;
    }

    html body.is-homepage .navigation .navbar-default .navbar-nav > li > a[href*="colors.aquapaints.com"] span {
        flex: 0 1 auto !important;
    }

    /* Submenus (Products, About Us, Our Family) */
    html body.is-homepage .navigation .dropdown-menu {
        position: static !important;
        float: none !important;
        box-shadow: none !important;
        border: none !important;
        background: #f8fafc !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    html body.is-homepage .navigation .dropdown:hover > .dropdown-menu,
    html body.is-homepage .navigation .dropdown.open > .dropdown-menu,
    html body.is-homepage .navigation .dropdown-menu.show {
        display: block !important;
    }

    html body.is-homepage .navigation .dropdown-menu li {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
    }

    html body.is-homepage .navigation .dropdown-menu li a {
        display: block !important;
        padding: 11px 20px 11px 58px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #475569 !important;
        border-bottom: 1px solid #f1f5f9 !important;
        background: transparent !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: all 0.15s ease !important;
    }

    html body.is-homepage .navigation .dropdown-menu li a:hover {
        background-color: #f0fdfa !important;
        color: #008779 !important;
        padding-left: 62px !important;
    }
}

/* ==========================================================================
   Notable Projects — "View Details" button + Project Details page
   ========================================================================== */
.aq-project-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: center;
    margin-top: auto;
    padding: 9px 24px;
    background: var(--aq-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 135, 121, 0.25);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.aq-project-details-btn:hover,
.aq-project-details-btn:focus {
    background: var(--aq-primary-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 135, 121, 0.32);
}

.aq-project-details-btn i {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.aq-project-details-btn:hover i {
    transform: translateX(3px);
}

/* ---- Details page ---- */
.aq-detail-section {
    background: #ffffff;
    padding: 60px 0 70px;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.aq-detail-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--aq-primary-light);
    color: var(--aq-primary-dark);
    font-size: 13px;
    font-weight: 600;
    border-radius: 30px;
    text-decoration: none;
    margin-bottom: 26px;
    transition: all 0.25s ease;
}

.aq-detail-back:hover,
.aq-detail-back:focus {
    background: var(--aq-primary);
    color: #ffffff;
}

.aq-detail-location {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    padding: 7px 18px;
    background: var(--aq-primary-light);
    color: var(--aq-primary-dark);
    font-size: 14px;
    font-weight: 600;
    border-radius: 30px;
}

.aq-detail-slider-wrap {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 34px;
    border-radius: var(--aq-radius);
    overflow: hidden;
    border: 1px solid var(--aq-border);
    box-shadow: var(--aq-shadow-lg);
    background: #0f172a;
}

.aq-detail-slide img {
    display: block;
    width: 100%;
    height: clamp(260px, 44vw, 520px);
    object-fit: cover;
    object-position: 50% 100%;
}

.aq-detail-slider .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    margin: 0;
    pointer-events: none;
}

.aq-detail-slider .owl-nav button {
    pointer-events: auto;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: var(--aq-primary-dark) !important;
    font-size: 18px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.aq-detail-slider .owl-nav button:hover {
    background: var(--aq-primary) !important;
    color: #ffffff !important;
}

.aq-detail-slider .owl-nav button span {
    display: block;
}

.aq-detail-slider .owl-dots {
    margin-top: 14px !important;
    text-align: center;
}

.aq-detail-slider .owl-dots .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: var(--aq-border);
    transition: all 0.25s ease;
}

.aq-detail-slider .owl-dots .owl-dot.active span,
.aq-detail-slider .owl-dots .owl-dot:hover span {
    background: var(--aq-primary);
    transform: scale(1.2);
}

.aq-detail-body {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.aq-detail-desc {
    font-size: 17px;
    line-height: 1.85;
    color: var(--aq-gray-dark);
    margin: 0;
}

.aq-detail-divider {
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--aq-primary), var(--aq-teal));
    margin: 26px auto 0;
}

@media (max-width: 991px) {
    /* Fixed mobile navbar clearance */
    .aq-detail-section {
        padding-top: 88px;
    }
}

@media (max-width: 575px) {
    .aq-detail-section {
        padding: 84px 0 50px;
    }
    .aq-detail-slide img {
        height: 240px;
    }
    .aq-detail-desc {
        font-size: 15.5px;
    }
    .aq-project-details-btn {
        padding: 8px 20px;
        font-size: 12.5px;
    }
}