/* ========================================
   RESPONSIVE CSS FOR IMMORTAL AYURVEDA
   Comprehensive Mobile-First Responsive Design
   ======================================== */

/* ========================================
   GLOBAL RESPONSIVE FOUNDATIONS
   ======================================== */

/* Prevent horizontal scroll on all devices */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    position: relative;
}

* {
    box-sizing: border-box !important;
}

/* Make all images responsive by default */
img {
    /* max-width: 100%; */
    height: auto;
    object-fit: cover;
}

video {
    max-width: 100%;
}

/* Helper Class for Mobile Stacking */
@media (max-width: 768px) {
    .nx-mobile-stack {
        flex-direction: column !important;
    }
}

/* ========================================
   TABLET OPTIMIZATION (769px-1024px)
   ======================================== */
@media (max-width: 1024px) {
    /* Chakra points for 1024px moved to the TUNING SECTION at the end of this file */
}

@media (max-width: 768px) {

    /* === ACCESSIBILITY & TOUCH TARGETS === */
    button,
    a.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn,
    [role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Prevent auto-zoom on input focus */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* === SPACING OPTIMIZATION === */
    .px-5 {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .px-4 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* === TEXT OPTIMIZATION === */
    body {
        font-size: 14px !important;
    }

    /* Prevent long words from breaking layout */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    li {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .navbar-brand-text.d-lg-none {
        font-weight: 600;
        white-space: nowrap;
        color: white;
        font-size: 29px !important;
    }

    /* Better text readability */
    p {
        line-height: 1.6 !important;
    }

    /* === MODAL IMPROVEMENTS === */
    .modal-dialog {
        margin: 0.5rem !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    /* === DROPDOWN IMPROVEMENTS === */
    .dropdown-menu {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* === VIDEO RESPONSIVE === */
    video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* === IMAGE RESPONSIVE === */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* === SPACING BETWEEN SECTIONS === */
    section {
        margin-bottom: 1rem !important;
    }

    /* === FOOTER LINK SPACING === */
    .footer .btn-link {
        display: block !important;
        text-align: left !important;
        padding: 8px 0 !important;
    }

    /* === PREVENT OVERFLOW === */
    .container,
    .container-fluid {
        overflow-x: hidden !important;
    }
}

/* ========================================
   SMALL MOBILE (320px - 374px)
   ======================================== */

@media (max-width: 374px) {

    /* === GLOBAL TYPOGRAPHY === */
    h1 {
        font-size: 1.4rem !important;
    }

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

    .display-1 {
        font-size: 2.5rem !important;
        line-height: 1 !important;
    }

    .display-1 small {
        font-size: 1.8rem !important;
        vertical-align: middle !important;
    }

    .display-2 {
        font-size: 1.6rem !important;
    }

    .display-4 {
        font-size: 1.4rem !important;
    }

    .display-6 {
        font-size: 1.3rem !important;
    }

    /* === GLOBAL SPACING === */
    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* === NAVBAR === */
    .navbar-brand-text.d-lg-none {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   MEDIUM MOBILE (375px - 480px)
   ======================================== */

@media (min-width: 375px) and (max-width: 480px) {

    /* === GLOBAL TYPOGRAPHY === */
    h1 {
        font-size: 1.6rem !important;
    }

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

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

    .display-1 {
        font-size: 3rem !important;
        line-height: 1 !important;
    }

    .display-1 small {
        font-size: 2.2rem !important;
        vertical-align: middle !important;
    }

    .display-2 {
        font-size: 1.8rem !important;
    }

    .display-4 {
        font-size: 1.6rem !important;
    }

    .display-5 {
        font-size: 1.6rem !important;
    }

    .display-6 {
        font-size: 1.4rem !important;
    }

    /* === GLOBAL SPACING === */
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .mb-5 {
        margin-bottom: 2rem !important;
    }

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ========================================
   ALL MOBILE DEVICES (up to 480px)
   ======================================== */

@media (max-width: 480px) {

    /* Chakra points for 480px (Block 1) moved to the TUNING SECTION at the end of this file */

    /* === NAVBAR === */
    .navbar {
        padding: 8px 12px !important;
    }

    .navbar-brand.d-lg-none .nx-logo-image {
        max-width: 35px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .navbar-brand-text.d-lg-none {
        font-weight: 600;
        white-space: nowrap;
        color: white;
        font-size: 15px !important;
    }

    .navbar-toggler {
        padding: 5px 8px !important;
        font-size: 1.1rem !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }

    .navbar-nav {
        padding: 10px 0 !important;
    }

    .navbar-nav .nav-link {
        padding: 10px 12px !important;
        margin: 0 !important;
        font-size: 13px !important;
    }

    /* === HERO VIDEO SECTION === */
    .nx-hero-carousel {
        margin-top: 0 !important;
    }

    .nx-hero-carousel video,
    .nx-hero-carousel .position-relative video {
        height: 50vh !important;
        min-height: 300px !important;
        object-fit: cover !important;
    }

    /* Override inline hero text styles */
    .nx-hero-carousel h1,
    .nx-hero-carousel .position-absolute h1 {
        font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
        letter-spacing: 1px !important;
        line-height: 1.2 !important;
    }

    .nx-hero-carousel p,
    .nx-hero-carousel .position-absolute p {
        font-size: 0.85rem !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 1.5rem !important;
    }

    .nx-hero-carousel .btn,
    .nx-hero-discover-btn {
        padding: 10px 20px !important;
        font-size: 0.8rem !important;
    }

    #hero-title {
        font-size: clamp(1.8rem, 10vw, 2.5rem) !important;
        letter-spacing: 2px !important;
        margin-bottom: 0.5rem !important;
    }

    #hero-subtitle {
        font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
        letter-spacing: 1px !important;
        margin-bottom: 1rem !important;
    }

    /* === PAGE BANNER === */
    .nx-page-banner {
        padding: 60px 0 40px !important;
    }

    #shop-header {
        min-height: auto !important;
    }

    #shop-header h1 {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }

    #portfolio-flters {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 5px !important;
    }

    #portfolio-flters li {
        font-size: 11px !important;
        padding: 6px 12px !important;
        margin: 2px !important;
    }

    /* === ABOUT SECTION === */
    .nx-about-stat {
        width: 120px !important;
        height: 120px !important;
        margin: 8px auto !important;
    }

    .nx-about-stat h1 {
        font-size: 1.4rem !important;
        margin-top: 5px !important;
    }

    .nx-about-stat p,
    .nx-about-stat small {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
    }

    .mt-n130 {
        margin-top: 0 !important;
    }

    /* === ABOUT GALLERY === */
    .nx-about-gallery {
        min-height: 280px !important;
        margin: 15px !important;
    }

    .nx-about-gallery img {
        width: 70% !important;
    }

    /* === FEATURE BOXES === */
    .nx-feature-box {
        padding: 15px 12px !important;
        margin-bottom: 15px !important;
    }

    .nx-icon-primary i,
    .nx-icon-light i {
        font-size: 45px !important;
    }

    .nx-feature-box h5 {
        font-size: 0.9rem !important;
        margin-top: 8px !important;
    }

    .nx-feature-box p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    /* Feature section white box */
    .feature .bg-white.p-5 {
        padding: 15px 12px !important;
        margin: 0 5px !important;
    }

    /* === PRODUCT CARDS === */
    .nx-product-box {
        margin-bottom: 12px !important;
    }

    .nx-product-image {
        height: 160px !important;
    }

    .nx-product-image img {
        height: 160px !important;
    }

    .nx-product-box .text-center {
        padding: 10px 8px !important;
    }

    .nx-product-box h5 {
        font-size: 0.85rem !important;
        margin-bottom: 4px !important;
    }

    .nx-product-box p.small {
        font-size: 0.7rem !important;
        margin-bottom: 8px !important;
    }

    .nx-product-box .fs-5 {
        font-size: 0.95rem !important;
    }

    .nx-product-box .btn-sm {
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }

    /* === SERVICE CARDS === */
    .nx-service-card {
        padding: 30px 20px !important;
    }

    /* === TEAM CARDS === */
    .nx-team-card .text-center {
        padding: 15px !important;
    }

    /* === APPOINTMENT FORM === */
    .form-floating {
        margin-bottom: 12px !important;
    }

    .form-floating input,
    .form-floating select,
    .form-floating textarea {
        font-size: 16px !important;
        min-height: 44px !important;
        padding: 12px 8px !important;
    }

    .form-floating label {
        padding: 8px !important;
        font-size: 13px !important;
    }

    /* === TESTIMONIAL SECTION === */
    .testimonial {
        padding: 35px 0 !important;
    }

    .nx-testimonial-box {
        padding: 20px 15px !important;
    }

    .nx-testimonial-box .fs-5 {
        font-size: 0.9rem !important;
    }

    .nx-testimonial-slider .owl-nav {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        justify-content: center !important;
        margin-top: 15px !important;
    }

    /* === BENEFITS SECTION === */
    .nx-benefit-box {
        height: 280px !important;
        margin-bottom: 20px !important;
    }

    .nx-benefit-box h5 {
        font-size: 1.3rem !important;
    }

    .nx-benefit-box p {
        font-size: 0.85rem !important;
        padding: 0 15px 20px 15px !important;
    }

    /* === CERTIFICATION CARDS === */
    .certification-card {
        padding: 25px 15px !important;
    }

    .certification-card img {
        max-width: 70px !important;
    }

    .certification-card h5 {
        font-size: 0.95rem !important;
    }

    /* === FOUNDER SECTION === */
    .founder-img-minimal img {
        height: 280px !important;
    }

    .founder-name-minimal {
        font-size: 1.6rem !important;
    }

    .founder-quote-minimal {
        font-size: 0.9rem !important;
        padding-left: 15px !important;
    }

    .founder-info-minimal {
        padding-left: 0 !important;
        margin-top: 20px !important;
    }

    .founder-stats-minimal {
        gap: 15px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .stat-number {
        font-size: 1.6rem !important;
    }

    .stat-label {
        font-size: 0.65rem !important;
    }

    .stat-divider {
        height: 30px !important;
    }

    /* === JOURNEY SECTION === */
    .journey-steps-minimal {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .journey-step {
        padding: 20px 15px !important;
    }

    .step-number {
        font-size: 2rem !important;
    }

    .section-header-minimal h2 {
        font-size: 1.8rem !important;
    }

    /* === VISION / MISSION === */
    .vm-card-minimal {
        padding: 25px 20px !important;
    }

    .value-tag {
        padding: 8px 16px !important;
        font-size: 0.75rem !important;
    }

    /* === GLOBAL MAP === */
    #nx-world-map {
        min-height: 250px !important;
    }

    .pin-tooltip {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }

    .pin-dot {
        width: 10px !important;
        height: 10px !important;
    }

    /* === CONTACT INFO BAR === */
    .contact-info .d-flex {
        flex-direction: column !important;
        text-align: center !important;
    }

    .contact-info .ms-3 {
        margin-left: 0 !important;
        margin-top: 8px !important;
    }

    .contact-info a.p-4 {
        padding: 15px !important;
    }

    .contact-info h4 {
        font-size: 0.9rem !important;
        word-break: break-all !important;
    }

    /* === CONTACT MAP === */
    .col-lg-6 iframe {
        min-height: 250px !important;
    }

    /* === CHAKRA PAGE === */
    .chakra-container {
        min-height: 500px !important;
    }

    /* Info panel overrides removed for right-side layout */

    .chakra-point {
        width: 18px !important;
        height: 18px !important;
    }

    /* Chakra points for 480px (Block 2) moved to the TUNING SECTION at the end of this file */

    /* Chakra title font size handled in chakra.html for better scaling */

    /* === FOOTER === */
    .footer {
        padding: 30px 0 !important;
    }

    .footer .nx-logo-image {
        max-height: 55px !important;
    }

    .footer .fs-5 {
        font-size: 0.95rem !important;
    }

    .footer h4 {
        font-size: 1.1rem !important;
        margin-top: 20px !important;
    }

    .footer .row.g-5 {
        --bs-gutter-y: 1.5rem !important;
    }

    /* Newsletter input */
    .footer .input-group {
        flex-direction: column !important;
    }

    .footer .input-group .form-control {
        border-radius: 6px !important;
        margin-bottom: 8px !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    .footer .input-group .btn {
        border-radius: 6px !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 12px !important;
    }

    /* === FLOATING ACTION BUTTONS === */
    .nx-float-actions {
        bottom: 15px !important;
        left: 15px !important;
    }

    .nx-float-button {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.2rem !important;
    }

    /* === SCROLL TO TOP === */
    .nx-scroll-top {
        width: 40px !important;
        height: 40px !important;
        bottom: 70px !important;
        right: 12px !important;
    }

    /* === VIDEO SPLASH === */
    .nx-skip-btn {
        bottom: 15px !important;
        right: 15px !important;
        padding: 8px 16px !important;
        font-size: 11px !important;
    }

    /* === MODAL === */
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100% - 16px) !important;
    }

    .modal-content {
        border-radius: 8px !important;
    }

    .modal-header {
        padding: 12px 15px !important;
    }

    .modal-header h5 {
        font-size: 1rem !important;
    }

    .modal-body {
        padding: 12px 12px !important;
    }

    .modal-body .form-floating input,
    .modal-body .form-floating select,
    .modal-body .form-floating textarea {
        min-height: 40px !important;
    }

    /* === AUDIO PLAYER === */
    .nx-audio-player {
        bottom: 70px !important;
        right: 15px !important;
    }

    /* === PLAY BUTTON === */
    .nx-play-button {
        width: 50px !important;
        height: 38px !important;
        padding: 14px 16px 16px 22px !important;
    }

    .nx-play-button:before,
    .nx-play-button:after {
        width: 70px !important;
        height: 70px !important;
    }

    .nx-play-button span {
        border-left-width: 22px !important;
        border-top-width: 14px !important;
        border-bottom-width: 14px !important;
    }

    /* === GRID ADJUSTMENTS === */
    .row.g-5 {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 1.5rem !important;
    }

    .row.g-4 {
        --bs-gutter-x: 0.5rem !important;
        --bs-gutter-y: 1rem !important;
    }

    /* === TERMS PAGE === */
    .terms-content {
        padding: 20px 15px !important;
    }

    /* === SERVICE ZIG-ZAG === */
    .service-feature .rounded {
        border-radius: 12px !important;
    }

    .service-feature h2 {
        font-size: 1.3rem !important;
    }

    /* === 404 PAGE === */
    .error-page h1 {
        font-size: 4rem !important;
    }
}


/* ========================================
   UNIVERSAL MOBILE IMPROVEMENTS
   Touch-Friendly Sizing & Accessibility
   ======================================== */

@media (max-width: 768px) {

    /* Ensure all interactive elements are touch-friendly */
    button,
    a.btn,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: 44px !important;
    }

    /* Prevent zoom on input focus (improves mobile experience) */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Better link tap targets */
    a {
        padding: 6px 2px !important;
    }

    /* Fix brand section visibility on mobile */
    .d-none.d-lg-flex {
        padding: 8px 0 !important;
    }

    /* Reduce unnecessary spacing on mobile */
    .py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Better spacing for sections */
    .container-fluid {
        padding-left: max(10px, env(safe-area-inset-left)) !important;
        padding-right: max(10px, env(safe-area-inset-right)) !important;
    }

    /* Improve modal accessibility */
    .modal-backdrop {
        opacity: 0.5 !important;
    }

    /* Better footer link spacing */
    .footer .btn-link {
        padding: 8px 0 !important;
        display: block !important;
    }

    /* Responsive gutter adjustments */
    .g-4 {
        --bs-gutter-x: 0.75rem !important;
        --bs-gutter-y: 0.75rem !important;
    }

    /* Prevent text cutoff */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        word-break: break-word !important;
    }

    p {
        word-break: break-word !important;
    }
}



@media (min-width: 481px) and (max-width: 767px) {

    /* === TYPOGRAPHY === */
    h1 {
        font-size: 1.8rem !important;
    }

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

    .display-2 {
        font-size: 2rem !important;
    }

    .display-5 {
        font-size: 1.8rem !important;
    }

    .display-6 {
        font-size: 1.6rem !important;
    }

    /* === SPACING === */
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* === NAVBAR === */
    .navbar {
        padding: 10px 15px !important;
    }

    .navbar-brand.d-lg-none .nx-logo-image {
        max-width: 45px !important;
        height: auto !important;
    }

    .navbar-toggler {
        padding: 6px 10px !important;
        font-size: 1.2rem !important;
    }

    .navbar-nav .nav-link {
        padding: 10px 12px !important;
        margin: 0 !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }

    /* White hamburger icon for mobile */
    .navbar-light .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* === HERO === */
    .nx-hero-carousel {
        margin-top: 0 !important;
    }

    .nx-hero-carousel video,
    .nx-hero-carousel .position-relative video {
        height: 60vh !important;
        min-height: 400px !important;
    }

    .nx-hero-carousel h1,
    .nx-hero-carousel .position-absolute h1 {
        font-size: 2.2rem !important;
        letter-spacing: 2px !important;
    }

    .nx-hero-carousel p,
    .nx-hero-carousel .position-absolute p {
        font-size: 0.95rem !important;
    }

    .nx-hero-carousel .btn,
    .nx-hero-discover-btn {
        padding: 12px 24px !important;
        font-size: 0.85rem !important;
    }

    /* === PAGE BANNER === */
    .nx-page-banner {
        padding: 90px 0 60px !important;
    }

    .nx-page-banner h1,
    .nx-page-banner .display-2 {
        font-size: 1.8rem !important;
    }

    /* === ABOUT STAT === */
    .nx-about-stat {
        width: 150px !important;
        height: 150px !important;
    }

    .nx-about-stat h1 {
        font-size: 2rem !important;
    }

    .mt-n130 {
        margin-top: 0 !important;
    }

    /* === PRODUCTS === */
    .nx-product-image img {
        height: 220px !important;
    }

    .nx-product-box .text-center {
        padding: 12px 10px !important;
    }

    .nx-product-box h5 {
        font-size: 0.95rem !important;
    }

    .nx-product-box p.small {
        font-size: 0.75rem !important;
    }

    /* === BENEFIT BOXES === */
    .nx-benefit-box {
        height: 320px !important;
    }

    /* === FOUNDER === */
    .founder-img-minimal img {
        height: 350px !important;
    }

    .founder-name-minimal {
        font-size: 2rem !important;
    }

    /* === TOUCH-FRIENDLY BUTTONS === */
    .btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
    }

    .btn-primary,
    .btn-secondary,
    .btn-outline-primary,
    .btn-outline-secondary {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .btn-sm {
        min-height: 36px !important;
        padding: 6px 12px !important;
    }
}

.founder-info-minimal {
    padding-left: 0 !important;
    margin-top: 25px !important;
}

/* === JOURNEY === */
.journey-steps-minimal {
    grid-template-columns: 1fr !important;
}

/* === CHAKRA === */
.chakra-container {
    min-height: 550px !important;
}

/* Info panel override removed for right-side layout */

/* === FOOTER === */
.footer {
    padding: 35px 0 !important;
}

.footer .nx-logo-image {
    max-height: 60px !important;
}

.footer h4 {
    font-size: 1.2rem !important;
    margin-top: 22px !important;
}

/* === FLOATING BUTTONS === */
.nx-float-actions {
    bottom: 18px !important;
    left: 15px !important;
}

.nx-float-button {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.3rem !important;
}

/* === SCROLL TOP === */
.nx-scroll-top {
    width: 49px !important;
    height: 49px !important;
    bottom: 24px !important;
    right: 16px !important;
}

/* === SKIP INTRO === */
.nx-skip-btn {
    bottom: 20px !important;
    right: 20px !important;
    padding: 10px 20px !important;
    font-size: 12px !important;
}

/* === AUDIO PLAYER === */
.nx-audio-player {
    bottom: 80px !important;
    right: 18px !important;
}

/* === GRID === */
.row.g-5 {
    --bs-gutter-y: 2rem !important;
}

/* === PLAY BUTTON === */
.nx-play-button {
    width: 55px !important;
    height: 42px !important;
}

.nx-play-button:before,
.nx-play-button:after {
    width: 75px !important;
    height: 75px !important;
}



/* ========================================
   SHARED MOBILE RULES (max-width: 767px)
   ======================================== */

@media (max-width: 767px) {

    /* Responsive images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Word break for overflow */
    * {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* Video overflow */
    video {
        max-width: 100% !important;
    }

    /* Increase touch targets - scoped properly */
    .btn,
    .nav-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* IMPORTANT: Do NOT apply min-height/inline-flex to footer links */
    .footer .btn.btn-link {
        min-height: auto !important;
        display: block !important;
    }

    /* Prevent iOS form zoom */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Reduce animations for performance */
    .wow {
        animation-duration: 0.5s !important;
    }

    /* Simplify shadows */
    .shadow-sm,
    .shadow,
    .shadow-lg {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Brand bar hidden on mobile */
    .container-fluid.bg-white.text-dark.pt-2.pb-3.d-none.d-lg-flex {
        display: none !important;
    }

    /* Social buttons in collapsed menu */
    .navbar .ms-auto.d-none.d-lg-flex {
        display: flex !important;
        justify-content: center !important;
        margin-top: 15px !important;
        gap: 10px !important;
    }

    /* Hero carousel item */
    #nx-hero-carousel .carousel-item {
        position: relative;
        min-height: 400px;
    }

    #nx-hero-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Carousel caption */
    .carousel-caption h1 {
        font-size: 1.8rem !important;
    }

    .carousel-caption p {
        font-size: 0.9rem !important;
    }

    /* Feature section video bg */
    .feature {
        min-height: auto !important;
    }

    .feature video {
        min-height: 100% !important;
    }

    /* Video hero */
    .nx-video-hero {
        height: auto !important;
        min-height: 300px !important;
    }

    .nx-video-wrap {
        max-height: 300px !important;
    }

    /* Contact info bar */
    .contact-info .nx-icon-light i {
        font-size: 30px !important;
    }

    /* Map section adjustments */
    #nx-world-map {
        min-height: 280px !important;
    }

    .route-line {
        stroke-width: 0.15 !important;
    }

    /* Global Presence header */
    .container-fluid.bg-dark .display-4 {
        font-size: 1.5rem !important;
    }

    .container-fluid.bg-dark .display-4 .bi {
        font-size: 1.2rem !important;
        margin-right: 8px !important;
    }

    /* Modal video */
    .modal-video .modal-dialog {
        margin: 20px auto !important;
    }
}


/* ========================================
   SMALL MOBILE (max-width: 374px)
   ======================================== */

@media (max-width: 374px) {

    .navbar-brand::after {
        font-size: 11px !important;
    }

    .nx-hero-carousel h1,
    .nx-hero-carousel .position-absolute h1 {
        font-size: 1.4rem !important;
    }

    .nx-hero-carousel p,
    .nx-hero-carousel .position-absolute p {
        font-size: 0.8rem !important;
    }

    .btn {
        padding: 8px 16px !important;
        font-size: 0.8rem !important;
    }

    .nx-product-image img {
        height: 170px !important;
    }

    .nx-about-stat {
        width: 110px !important;
        height: 110px !important;
    }

    .nx-about-stat h1 {
        font-size: 1.5rem !important;
    }

    .nx-about-stat p {
        font-size: 0.6rem !important;
    }

    .founder-stats-minimal {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .stat-divider {
        width: 40px !important;
        height: 1px !important;
    }
}


/* ========================================
   TABLET DEVICES (768px - 1024px)
   ======================================== */

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

    /* === NAVBAR === */
    .navbar-brand .nx-logo-image {
        max-height: 100px !important;
    }

    .navbar-nav .nav-link {
        margin-right: 15px !important;
        font-size: 13px !important;
        padding: 20px 0 !important;
    }

    /* === HERO SECTION === */
    .nx-hero-carousel video,
    .nx-hero-carousel .position-relative video {
        height: 70vh !important;
    }

    .nx-hero-carousel h1,
    .nx-hero-carousel .position-absolute h1 {
        font-size: 2.8rem !important;
        letter-spacing: 3px !important;
    }

    .nx-hero-carousel p,
    .nx-hero-carousel .position-absolute p {
        font-size: 1.05rem !important;
    }

    /* === PAGE BANNER === */
    .nx-page-banner .display-2 {
        font-size: 2.5rem !important;
    }

    /* === ABOUT SECTION === */
    .nx-about-stat {
        width: 180px !important;
        height: 180px !important;
    }

    /* === PRODUCT CARDS === */
    .nx-product-image img {
        height: 240px !important;
    }

    /* === FEATURE SECTION === */
    .feature .bg-white.p-5 {
        padding: 30px !important;
    }

    /* === TYPOGRAPHY === */
    .display-6 {
        font-size: 2rem !important;
    }

    .display-1 {
        font-size: 3.5rem !important;
        line-height: 1 !important;
    }

    .display-1 small {
        font-size: 2.5rem !important;
        vertical-align: middle !important;
    }

    .nx-icon-light i {
        font-size: 50px !important;
    }

    .display-5 {
        font-size: 2.2rem !important;
    }

    /* === SPACING === */
    .py-5 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    /* === FOUNDER === */
    .founder-img-minimal img {
        height: 400px !important;
    }

    .founder-name-minimal {
        font-size: 2.5rem !important;
    }

    .founder-info-minimal {
        padding-left: 0 !important;
        margin-top: 30px !important;
    }

    /* === JOURNEY === */
    .journey-steps-minimal {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* === BENEFIT BOXES === */
    .nx-benefit-box {
        height: 350px !important;
    }

    /* === CERTIFICATION === */
    .certification-card {
        padding: 30px 20px !important;
    }

    /* === CHAKRA === */
    /* Info panel width/padding removed for right-side layout */

    /* === TESTIMONIAL === */
    .testimonial {
        padding: 60px 0 !important;
    }

    /* === GLOBAL MAP === */
    #nx-world-map {
        min-height: 350px !important;
    }

    /* === CONTACT === */
    .contact-info h4 {
        font-size: 1rem !important;
    }

    /* === SERVICE ZIG-ZAG === */
    .service-feature h2 {
        font-size: 1.5rem !important;
    }

    /* === VIDEO HERO === */
    .nx-video-hero {
        min-height: 350px !important;
        height: 350px !important;
    }
}


/* ========================================
   LAPTOP (1025px - 1440px)
   ======================================== */

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

    /* Desktop stays mostly unchanged */
    .container {
        max-width: 1200px !important;
    }

    .navbar-brand .nx-logo-image {
        max-height: 120px !important;
    }

    .nx-hero-carousel video,
    .nx-hero-carousel .position-relative video {
        height: 100vh !important;
    }
}


/* ========================================
   LARGE SCREENS (1441px+)
   ======================================== */

@media (min-width: 1441px) {

    .container {
        max-width: 1320px !important;
    }

    .navbar-brand .nx-logo-image {
        max-height: 120px !important;
    }

    /* Prevent excessive stretching */
    .nx-hero-carousel video,
    .nx-hero-carousel .position-relative video {
        height: 100vh !important;
        max-height: 900px !important;
    }

    .nx-benefit-box {
        height: 450px !important;
    }

    #nx-world-map {
        min-height: 550px !important;
    }
}


/* ========================================
   LANDSCAPE ORIENTATION (Mobile/Tablet)
   ======================================== */

@media (max-width: 1024px) and (orientation: landscape) {

    .nx-hero-carousel video,
    .nx-hero-carousel .position-relative video {
        height: 70vh !important;
        min-height: 300px !important;
    }

    .nx-hero-carousel h1,
    .nx-hero-carousel .position-absolute h1 {
        font-size: 1.8rem !important;
    }

    .nx-hero-carousel p,
    .nx-hero-carousel .position-absolute p {
        font-size: 0.9rem !important;
    }

    .navbar {
        padding: 6px 15px !important;
    }

    .nx-page-banner {
        padding: 70px 0 40px !important;
    }
}


/* ========================================
   FOOTER FULL WIDTH FIX - ALL PAGES
   ======================================== */

/* Force footer to span full viewport width on ALL devices */
footer,
.footer,
div.footer,
.container-fluid.footer,
.bg-dark.footer {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

.nx-copyright,
.container-fluid.nx-copyright {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Maintain inner container padding */
.footer .container,
.nx-copyright .container {
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* ========================================
   PORTFOLIO FILTERS RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
    #portfolio-flters {
        padding: 10px !important;
        border-radius: 20px !important;
    }

    #portfolio-flters li,
    #portfolio-flters .btn-outline-primary,
    #portfolio-flters .btn-outline-secondary {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
        margin: 2px !important;
    }
}


/* ========================================
   ENHANCED MOBILE RESPONSIVENESS FIXES
   Comprehensive fixes for 320px–768px
   ======================================== */

/* ----------------------------------------
   1. BODY WATERMARK — Reduce on mobile
   ---------------------------------------- */
@media (max-width: 480px) {
    body::before {
        width: 200px !important;
        height: 200px !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    body::before {
        width: 280px !important;
        height: 280px !important;
    }
}


/* ----------------------------------------
   2. HERO SECTION — Override inline styles
   ---------------------------------------- */
@media (max-width: 480px) {

    /* Override the massive inline font-size: 4.5rem on hero h1 */
    .nx-hero-carousel .position-absolute h1[style],
    .nx-hero-carousel h1[style] {
        font-size: 1.5rem !important;
        letter-spacing: 2px !important;
        line-height: 1.3 !important;
    }

    .nx-hero-carousel .position-absolute p[style],
    .nx-hero-carousel p[style] {
        font-size: 0.8rem !important;
        letter-spacing: 1px !important;
    }

    /* Override inline height: 100vh on hero video */
    .nx-hero-carousel .position-relative video[style] {
        height: 55vh !important;
        min-height: 300px !important;
    }

    /* Hero discover button */
    .nx-hero-discover-btn {
        padding: 10px 22px !important;
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }

    /* Override padding-top: 80px on hero text overlay */
    .nx-hero-carousel .position-absolute[style*="padding-top"] {
        padding-top: 40px !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {

    .nx-hero-carousel .position-absolute h1[style],
    .nx-hero-carousel h1[style] {
        font-size: 2rem !important;
        letter-spacing: 3px !important;
    }

    .nx-hero-carousel .position-absolute p[style],
    .nx-hero-carousel p[style] {
        font-size: 0.9rem !important;
    }

    .nx-hero-carousel .position-relative video[style] {
        height: 60vh !important;
        min-height: 350px !important;
    }
}


/* ----------------------------------------
   3. PRODUCT CARDS — Image height caps
   ---------------------------------------- */
@media (max-width: 480px) {

    /* Override inline height: 260px on product images */
    .nx-product-box .nx-product-image img[style],
    .nx-product-image img[style*="height: 260px"],
    .nx-product-image img[style*="height:260px"] {
        height: 180px !important;
    }

    .nx-product-image {
        height: 180px !important;
        min-height: 180px !important;
        max-height: 180px !important;
    }

    /* Product card text area */
    .nx-product-box .text-center.p-4 {
        padding: 10px !important;
    }

    .nx-product-box .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .nx-product-box .btn-sm {
        width: 100% !important;
        text-align: center !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {

    .nx-product-box .nx-product-image img[style],
    .nx-product-image img[style*="height: 260px"] {
        height: 200px !important;
    }

    .nx-product-image {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }
}


/* ----------------------------------------
   4. PRODUCTS PAGE — Touch-friendly overlays
   ---------------------------------------- */
@media (max-width: 767px) {

    /* Make B2B/B2C badges more compact on mobile */
    .product-badge .badge-b2b,
    .product-badge .badge-b2c {
        padding: 5px 10px !important;
        font-size: 9px !important;
        letter-spacing: 0.5px !important;
    }

    /* Product hover overlay — improved for touch */
    .product-hover-overlay.show {
        max-height: 100% !important;
    }

    .product-hover-overlay .hover-content {
        padding: 10px !important;
    }

    .pricing-details p {
        font-size: 12px !important;
        padding: 7px 10px !important;
        margin: 4px 0 !important;
    }

    .pricing-details strong,
    .pricing-details span {
        font-size: 12px !important;
    }

    /* Info button - larger touch target */
    .info-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 18px !important;
    }

    /* Product details row */
    .product-details {
        gap: 5px !important;
    }

    .product-detail-item {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    /* Product modal - ensure it fits mobile */
    .product-modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px !important;
    }

    .modal-header-custom {
        padding: 18px 20px !important;
    }

    .modal-header-custom h4 {
        font-size: 18px !important;
    }

    .modal-body-custom {
        padding: 18px 15px !important;
    }

    .info-grid {
        grid-template-columns: 1fr !important;
    }

    /* Portfolio filter — wrap properly */
    #portfolio-flters {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding: 10px !important;
    }

    #portfolio-flters li,
    #portfolio-flters .btn {
        flex: 0 0 auto !important;
    }

    /* Products page video in product cards */
    .product-img video[style] {
        height: 100% !important;
    }
}


/* ----------------------------------------
   5. ABOUT PAGE — Fixed overlay box
   ---------------------------------------- */
@media (max-width: 480px) {

    /* Override inline 200x200 overlay box */
    .position-absolute.top-0.start-0.bg-white[style*="200px"] {
        width: 130px !important;
        height: 130px !important;
    }

    .position-absolute.top-0.start-0.bg-white[style*="200px"] h1 {
        font-size: 1.5rem !important;
    }

    .position-absolute.top-0.start-0.bg-white[style*="200px"] h2 {
        font-size: 1rem !important;
    }

    .position-absolute.top-0.start-0.bg-white[style*="200px"] h5 {
        font-size: 0.7rem !important;
    }

    /* History section image min-height */
    .position-relative.overflow-hidden.rounded[style*="min-height: 400px"] {
        min-height: 280px !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .position-absolute.top-0.start-0.bg-white[style*="200px"] {
        width: 160px !important;
        height: 160px !important;
    }

    .position-absolute.top-0.start-0.bg-white[style*="200px"] h1 {
        font-size: 1.8rem !important;
    }

    .position-relative.overflow-hidden.rounded[style*="min-height: 400px"] {
        min-height: 320px !important;
    }
}


/* ----------------------------------------
   6. GLOBAL MAP — Height reduction
   ---------------------------------------- */
@media (max-width: 480px) {

    /* Override inline min-height: 700px */
    .container-fluid.bg-dark[style*="min-height: 700px"] {
        min-height: auto !important;
        padding-bottom: 30px !important;
    }

    /* Override inline min-height: 500px on map */
    #nx-world-map[style*="min-height: 500px"] {
        min-height: 200px !important;
    }

    /* Map stats row */
    .container-fluid.bg-dark .p-4.rounded-3 {
        padding: 15px !important;
    }

    .container-fluid.bg-dark .p-4.rounded-3 h2 {
        font-size: 1.3rem !important;
    }

    .container-fluid.bg-dark .p-4.rounded-3 p {
        font-size: 0.75rem !important;
    }

    /* Active route indicator */
    .d-inline-flex.align-items-center.p-3[style*="backdrop-filter"] {
        padding: 8px 12px !important;
    }

    .d-inline-flex.align-items-center.p-3[style*="backdrop-filter"] h3 {
        font-size: 1rem !important;
    }

    /* Globe icon + heading */
    .container-fluid.bg-dark .display-4 {
        font-size: 1.3rem !important;
    }

    .container-fluid.bg-dark .display-4 .bi {
        font-size: 1rem !important;
        margin-right: 5px !important;
    }

    .container-fluid.bg-dark .lead {
        font-size: 0.85rem !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .container-fluid.bg-dark[style*="min-height: 700px"] {
        min-height: auto !important;
    }

    #nx-world-map[style*="min-height: 500px"] {
        min-height: 250px !important;
    }

    .container-fluid.bg-dark .display-4 {
        font-size: 1.6rem !important;
    }

    .container-fluid.bg-dark .lead {
        font-size: 0.9rem !important;
    }
}


/* ----------------------------------------
   7. FOUNDER SECTION — Text sizing
   ---------------------------------------- */
@media (max-width: 480px) {
    .founder-story-minimal p {
        font-size: 0.85rem !important;
        line-height: 1.7 !important;
    }

    .founder-quote-minimal {
        font-size: 0.85rem !important;
        padding-left: 12px !important;
        margin-bottom: 20px !important;
    }

    .founder-label {
        font-size: 0.65rem !important;
        letter-spacing: 1.5px !important;
    }

    .founder-tag span {
        font-size: 0.7rem !important;
        padding: 5px 12px !important;
    }
}


/* ----------------------------------------
   8. CONTACT PAGE — Email overflow & map
   ---------------------------------------- */
@media (max-width: 480px) {

    /* Contact bar email overflow fix */
    .contact-info h4 {
        font-size: 0.8rem !important;
        word-break: break-all !important;
    }

    .contact-info h5 {
        font-size: 0.85rem !important;
    }

    /* Contact map iframe height */
    .col-lg-6 iframe[style*="min-height: 300px"] {
        min-height: 220px !important;
    }

    /* Contact form button */
    .btn.btn-primary.py-3.px-5 {
        padding: 12px 20px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
    }
}

@media (max-width: 374px) {
    .contact-info h4 {
        font-size: 0.7rem !important;
    }
}


/* ----------------------------------------
   9. SERVICE PAGE — Zig-zag layout
   ---------------------------------------- */
@media (max-width: 767px) {
    .service-feature .row {
        flex-direction: column !important;
    }

    .service-feature .col-lg-6 {
        width: 100% !important;
    }

    .service-feature .rounded {
        border-radius: 10px !important;
        margin-bottom: 15px !important;
    }

    .service-feature img {
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
    }

    .service-feature h2 {
        font-size: 1.2rem !important;
    }

    .service-feature p {
        font-size: 0.85rem !important;
    }

    /* Service cards */
    .nx-service-card {
        padding: 25px 18px !important;
    }
}


/* ----------------------------------------
   10. TESTIMONIAL — Long text fix
   ---------------------------------------- */
@media (max-width: 374px) {
    .nx-testimonial-box .fs-5 {
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
    }

    .nx-testimonial-box {
        padding: 15px 10px !important;
    }

    .testimonial .display-6 {
        font-size: 1.3rem !important;
    }

    .testimonial .btn {
        padding: 10px 18px !important;
        font-size: 0.8rem !important;
    }
}


/* ----------------------------------------
   11. FOOTER — Newsletter stacking for
       all mobile & form improvements
   ---------------------------------------- */
@media (max-width: 767px) {
    .footer .input-group {
        flex-direction: column !important;
    }

    .footer .input-group .form-control {
        border-radius: 6px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .footer .input-group .btn {
        border-radius: 6px !important;
        width: 100% !important;
    }

    /* Footer social buttons */
    .footer .d-flex.mt-4 {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Footer description text */
    .footer .fs-5 {
        font-size: 0.9rem !important;
    }

    .footer .col-sm-6 {
        text-align: center !important;
    }

    /* .footer .btn.btn-link {
        text-align: center !important;
    } */

    /* Copyright section */
    .nx-copyright .col-md-6 {
        text-align: center !important;
    }
}


/* ----------------------------------------
   12. CERTIFICATION CARDS — Mobile scaling
   ---------------------------------------- */
@media (max-width: 480px) {
    .certification-card {
        padding: 20px 12px !important;
    }

    .certification-card img {
        max-width: 60px !important;
        margin-bottom: 12px !important;
    }

    .certification-card h5 {
        font-size: 0.85rem !important;
    }

    .certification-card span {
        font-size: 12px !important;
    }

    .cert-view-badge {
        font-size: 12px !important;
        padding: 8px !important;
    }

    /* Certificate modal on mobile */
    #certificateModal .modal-dialog {
        margin: 10px !important;
    }

    #certificateModal #certificateImage {
        max-height: 50vh !important;
    }
}


/* ----------------------------------------
   13. CHAKRA PAGE — Extra small fixes
   ---------------------------------------- */
@media (max-width: 374px) {
    .chakra-container {
        min-height: 400px !important;
    }

    .chakra-point {
        width: 12px !important;
        height: 12px !important;
        font-size: 10px !important;
    }



    /* Chakra title font size handled in chakra.html for better scaling */

    /* Info panel padding/font removed for right-side layout */


    /* icons */
    /* Chakra points for 374px moved to the TUNING SECTION at the end of this file */
}


/* ----------------------------------------
   14. TERMS PAGE — Extra small fixes
   ---------------------------------------- */
@media (max-width: 374px) {
    .terms-content {
        padding: 15px 10px !important;
    }

    .terms-content h2 {
        font-size: 1.2rem !important;
    }

    .terms-content h3 {
        font-size: 1rem !important;
    }

    .terms-content p,
    .terms-content li {
        font-size: 0.8rem !important;
    }
}


/* ----------------------------------------
   15. FEATURE SECTION — Inline style fix
   ---------------------------------------- */
@media (max-width: 480px) {

    /* Override inline min-height: 600px on feature section */
    .container-fluid.feature[style*="min-height: 600px"],
    .container-fluid.feature[style*="min-height:600px"] {
        min-height: auto !important;
    }

    /* Feature white content box - override p-5 */
    .feature .bg-white.p-5 {
        padding: 18px !important;
    }

    .feature .bg-white.p-5 h1.display-6 {
        font-size: 1.2rem !important;
    }

    .feature .bg-white.p-5 p {
        font-size: 0.85rem !important;
    }

    /* About gallery on mobile */
    .nx-about-gallery {
        min-height: 200px !important;
        margin: 10px !important;
    }

    .nx-about-gallery img {
        width: 80% !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .container-fluid.feature[style*="min-height: 600px"] {
        min-height: 400px !important;
    }

    .feature .bg-white.p-5 {
        padding: 22px !important;
    }
}


/* ----------------------------------------
   16. PAGE BANNER — Video background fixes
   ---------------------------------------- */
@media (max-width: 480px) {

    /* Products page banner with inline min-height: 400px */
    .container-fluid.nx-page-banner[style*="min-height: 400px"] {
        min-height: 250px !important;
    }

    .nx-page-banner .container[style*="padding-top:100px"],
    .nx-page-banner .container[style*="padding-top: 100px"] {
        padding-top: 40px !important;
    }

    /* Products page banner video */
    .nx-page-banner video[style] {
        min-height: 250px !important;
    }

    /* About page video hero */
    .nx-video-hero[style*="background: transparent"] {
        min-height: 200px !important;
    }

    .nx-video-wrap[style*="max-height: 350px"] {
        max-height: 200px !important;
    }

    .nx-video-hero .container.text-center.py-5.mt-4 {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        margin-top: 0 !important;
    }

    .nx-video-hero .display-2 {
        font-size: 1.4rem !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .container-fluid.nx-page-banner[style*="min-height: 400px"] {
        min-height: 300px !important;
    }

    .nx-video-hero .display-2 {
        font-size: 1.8rem !important;
    }
}


/* ----------------------------------------
   17. VISION/MISSION & VALUES — Mobile
   ---------------------------------------- */
@media (max-width: 480px) {
    .vm-card-minimal {
        padding: 20px 15px !important;
    }

    .vm-card-minimal p {
        font-size: 0.9rem !important;
    }

    .value-tag {
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
        margin: 3px !important;
    }

    .core-values-minimal {
        margin-top: 20px !important;
    }
}


/* ----------------------------------------
   18. GENERAL — 320px ultra-small devices
   ---------------------------------------- */
@media (max-width: 320px) {

    /* Extra compact spacing */
    .container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

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

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

    .display-6 {
        font-size: 1.2rem !important;
    }

    .display-5 {
        font-size: 1.3rem !important;
    }

    /* Navbar tighter fit */
    .navbar {
        padding: 5px 8px !important;
    }

    .navbar-brand.d-lg-none .nx-logo-image {
        max-width: 38px !important;
    }

    .navbar-nav .nav-link {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    /* Video splash skip button */
    .nx-skip-btn {
        bottom: 10px !important;
        right: 10px !important;
        padding: 6px 12px !important;
        font-size: 10px !important;
    }

    /* Floating action buttons */
    .nx-float-actions {
        bottom: 10px !important;
        left: 10px !important;
        gap: 10px !important;
    }

    .nx-float-button {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    /* Scroll to top */
    .nx-scroll-top {
        width: 35px !important;
        height: 35px !important;
        bottom: 10px !important;
        right: 8px !important;
        font-size: 0.8rem !important;
    }

    /* Audio player */
    .nx-audio-player {
        bottom: 60px !important;
        right: 10px !important;
        width: 50px !important;
    }
}


/* ----------------------------------------
   19. 425px BREAKPOINT — Mid-range mobiles
   ---------------------------------------- */
@media (min-width: 375px) and (max-width: 425px) {

    .nx-hero-carousel .position-absolute h1[style],
    .nx-hero-carousel h1[style] {
        font-size: 1.7rem !important;
    }

    .nx-product-image {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
    }

    .nx-product-image img[style*="height: 260px"] {
        height: 200px !important;
    }

    .founder-name-minimal {
        font-size: 1.7rem !important;
    }

    .nx-benefit-box {
        height: 260px !important;
    }

    .nx-benefit-box h5 {
        font-size: 1.1rem !important;
    }

    .nx-about-stat {
        width: 120px !important;
        height: 120px !important;
    }

    .nx-about-stat h1 {
        font-size: 1.6rem !important;
    }

    .nx-about-stat p {
        font-size: 0.65rem !important;
    }
}


/* ----------------------------------------
   20. PRINT OVERRIDE — Ensure no overflow
   ---------------------------------------- */
@media print {
    body {
        overflow: visible !important;
    }

    .nx-float-actions,
    .nx-scroll-top,
    .nx-audio-player,
    .nx-skip-btn {
        display: none !important;
    }
}


/* ========================================
   ENHANCED MOBILE FIXES — ROUND 2
   Addresses remaining 15 responsiveness gaps
   ======================================== */

/* ----------------------------------------
   FIX 1: Testimonial inner box padding
   The .bg-white.p-5 wrapper inside
   testimonial section has too much padding
   ---------------------------------------- */
@media (max-width: 480px) {
    .testimonial .bg-white.p-5 {
        padding: 15px !important;
    }

    .testimonial .col-lg-6.pe-lg-5 {
        padding-right: 0 !important;
    }

    .testimonial .col-lg-6.mb-n5 {
        margin-bottom: 0 !important;
    }

    .testimonial .display-6 {
        font-size: 1.3rem !important;
    }

    .testimonial .btn.btn-primary.py-3.px-5 {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        width: 100% !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .testimonial .bg-white.p-5 {
        padding: 20px !important;
    }

    .testimonial .col-lg-6.mb-n5 {
        margin-bottom: 0 !important;
    }
}


/* ----------------------------------------
   FIX 2: About stats circle overlap at
   very small screens
   ---------------------------------------- */
@media (max-width: 480px) {
    .row.g-4.g-sm-5.justify-content-center {
        --bs-gutter-y: 1rem !important;
        --bs-gutter-x: 0 !important;
    }

    .row.g-4.g-sm-5.justify-content-center .col-sm-6 {
        display: flex !important;
        justify-content: center !important;
    }

    .nx-about-stat.ms-sm-auto,
    .nx-about-stat.me-sm-auto,
    .nx-about-stat.mx-sm-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* ----------------------------------------
   FIX 3: Navbar dropdown — better touch UX
   ---------------------------------------- */
@media (max-width: 991px) {
    .navbar .dropdown-menu {
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 0 15px !important;
        margin-top: 0 !important;
        background: rgba(10, 22, 40, 0.8) !important;
    }

    .navbar .dropdown-menu .dropdown-item {
        padding: 12px 15px !important;
        font-size: 13px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar .dropdown-menu .dropdown-item:last-child {
        border-bottom: none !important;
    }

    /* Dropdown toggle arrow */
    .navbar .nav-item.dropdown .nav-link.dropdown-toggle::after {
        margin-left: 8px !important;
    }

    /* Prevent dropdown from covering other nav items */
    .navbar .nav-item.dropdown {
        position: relative !important;
    }
}


/* ----------------------------------------
   FIX 4: Quote gallery — stack on mobile
   ---------------------------------------- */
@media (max-width: 767px) {
    .nx-about-gallery {
        position: relative !important;
        min-height: auto !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .nx-about-gallery img {
        position: relative !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        border: none !important;
        filter: none !important;
        border-radius: 10px !important;
    }

    .nx-about-gallery img:last-child {
        border: none !important;
    }

    /* Disable the translate animations on hover for stacked layout */
    .nx-about-gallery:hover img:first-child,
    .nx-about-gallery:hover img:last-child {
        transform: none !important;
    }
}


/* ----------------------------------------
   FIX 5: Product card price/button at 320px
   — refine flex wrapping
   ---------------------------------------- */
@media (max-width: 374px) {
    .nx-product-box .d-flex.justify-content-between {
        flex-direction: column !important;
        gap: 6px !important;
        align-items: center !important;
    }

    .nx-product-box .btn-sm,
    .nx-product-box .btn-outline-primary {
        width: 100% !important;
        text-align: center !important;
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }

    .nx-product-box .text-center.p-4 {
        padding: 8px !important;
    }

    .nx-product-box .text-center.p-4 a.h5 {
        font-size: 0.85rem !important;
    }

    .nx-product-box .fs-5 {
        font-size: 1rem !important;
    }
}


/* ----------------------------------------
   FIX 6: Footer newsletter at ≤374px
   ---------------------------------------- */
@media (max-width: 374px) {
    .footer .input-group {
        flex-direction: column !important;
    }

    .footer .input-group .form-control {
        border-radius: 6px !important;
        margin-bottom: 8px !important;
        width: 100% !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    .footer .input-group .btn {
        border-radius: 6px !important;
        width: 100% !important;
        padding: 10px 12px !important;
    }

    .footer h4 {
        font-size: 1rem !important;
    }

    .footer .fs-5 {
        font-size: 0.85rem !important;
    }

    .footer .row.g-5 {
        --bs-gutter-y: 1rem !important;
    }
}


/* ----------------------------------------
   FIX 7: Certification cards mobile scaling
   ---------------------------------------- */
@media (max-width: 480px) {
    .certification-card {
        padding: 15px 10px !important;
        text-align: center !important;
    }

    .certification-card img {
        max-width: 100% !important;
        max-height: 150px !important;
        object-fit: contain !important;
        margin-bottom: 10px !important;
    }

    .certification-card h5 {
        font-size: 0.8rem !important;
        word-break: break-word !important;
    }

    .certification-card span {
        font-size: 11px !important;
    }

    .certification-card .cert-view-badge {
        font-size: 11px !important;
        padding: 6px !important;
    }
}


/* ----------------------------------------
   FIX 8: Contact form button mobile
   ---------------------------------------- */
@media (max-width: 374px) {
    .btn.btn-primary.py-3.px-5 {
        padding: 10px 16px !important;
        font-size: 0.8rem !important;
        width: 100% !important;
    }

    /* Contact info email - prevent overflow */
    .contact-info h4 {
        font-size: 0.65rem !important;
        word-break: break-all !important;
    }
}


/* ----------------------------------------
   FIX 9: Map stats boxes at very small
   ---------------------------------------- */
@media (max-width: 374px) {
    .container-fluid.bg-dark .p-4.rounded-3 {
        padding: 10px !important;
    }

    .container-fluid.bg-dark .p-4.rounded-3 h2 {
        font-size: 1.1rem !important;
    }

    .container-fluid.bg-dark .p-4.rounded-3 p {
        font-size: 0.65rem !important;
    }

    /* Active route indicator */
    .d-inline-flex.align-items-center.p-3[style*="backdrop-filter"] {
        padding: 6px 10px !important;
    }

    .d-inline-flex.align-items-center.p-3[style*="backdrop-filter"] h3 {
        font-size: 0.85rem !important;
    }

    .d-inline-flex.align-items-center.p-3[style*="backdrop-filter"] small {
        font-size: 0.6rem !important;
    }
}


/* ----------------------------------------
   FIX 10: Team social overlay — touch
   Always show social links on mobile
   ---------------------------------------- */
@media (max-width: 767px) {
    .nx-team-card .nx-social-links {
        opacity: 1 !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        background: var(--bs-primary, #0A1628) !important;
        padding: 12px !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    .nx-team-card .nx-social-links .btn {
        opacity: 1 !important;
        transform: none !important;
        width: 36px !important;
        height: 36px !important;
    }

    .nx-team-card:hover {
        transform: none !important;
    }
}


/* ----------------------------------------
   FIX 11: Benefit boxes — touch reveal
   Show description by default on mobile
   ---------------------------------------- */
@media (max-width: 767px) {
    .nx-benefit-box {
        height: auto !important;
        min-height: 250px !important;
    }

    .nx-benefit-box h5 {
        transform: translateY(0) !important;
        font-size: 1.2rem !important;
    }

    .nx-benefit-box p {
        opacity: 1 !important;
        transform: translateY(0) !important;
        font-size: 0.85rem !important;
        padding: 0 15px 15px 15px !important;
    }

    .nx-benefit-pic {
        filter: brightness(0.5) !important;
    }

    /* No hover effects needed on touch */
    .nx-benefit-box:hover .nx-benefit-pic {
        filter: brightness(0.5) !important;
        transform: none !important;
    }

    .nx-benefit-box::after {
        transform: scaleX(1) !important;
    }
}

@media (max-width: 374px) {
    .nx-benefit-box {
        min-height: 220px !important;
    }

    .nx-benefit-box h5 {
        font-size: 1rem !important;
    }

    .nx-benefit-box p {
        font-size: 0.78rem !important;
    }
}


/* ----------------------------------------
   FIX 12: Service zig-zag layout — image
   order on mobile for visual consistency
   ---------------------------------------- */
@media (max-width: 767px) {
    .service-feature .row {
        flex-direction: column !important;
    }

    /* Ensure image always comes first */
    .service-feature .row .col-lg-6:has(img),
    .service-feature .row .col-lg-6:has(.rounded) {
        order: -1 !important;
    }

    .service-feature .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Service feature content padding */
    .service-feature .col-lg-6 .p-5 {
        padding: 20px 15px !important;
    }

    .service-feature h2 {
        font-size: 1.15rem !important;
    }

    .service-feature p {
        font-size: 0.82rem !important;
    }
}


/* ----------------------------------------
   FIX 13: Feature section — video bg
   container on very small screens
   ---------------------------------------- */
@media (max-width: 374px) {

    .container-fluid.feature[style*="min-height: 600px"],
    .container-fluid.feature[style*="min-height:600px"] {
        min-height: auto !important;
    }

    .feature .bg-white.p-5 {
        padding: 15px !important;
    }

    .feature .bg-white.p-5 h1.display-6 {
        font-size: 1.1rem !important;
    }

    .feature .bg-white.p-5 p {
        font-size: 0.8rem !important;
    }

    .feature .row.g-5 {
        --bs-gutter-y: 1rem !important;
        --bs-gutter-x: 0 !important;
    }
}


/* ----------------------------------------
   FIX 14: Hero overlay text positioning
   Fix padding-top: 80px inline on overlay
   ---------------------------------------- */
@media (max-width: 374px) {
    .nx-hero-carousel .position-absolute[style*="padding-top"] {
        padding-top: 30px !important;
    }

    .nx-hero-carousel .position-absolute h1[style],
    .nx-hero-carousel h1[style] {
        font-size: 1.2rem !important;
        letter-spacing: 1px !important;
    }

    .nx-hero-carousel .position-absolute p[style],
    .nx-hero-carousel p[style] {
        font-size: 0.72rem !important;
    }

    .nx-hero-discover-btn {
        padding: 8px 16px !important;
        font-size: 0.7rem !important;
    }
}


/* ----------------------------------------
   FIX 15: General — prevent horizontal
   overflow from any remaining elements
   ---------------------------------------- */
@media (max-width: 767px) {

    /* Ensure all rows don't cause overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Contain any overflowing inline styles */
    [style*="min-height: 700px"],
    [style*="min-height: 600px"],
    [style*="min-height: 500px"] {
        min-height: auto !important;
    }

    /* Tables if any */
    table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }

    /* Iframes */
    iframe {
        max-width: 100% !important;
    }
}

/* Force 2-column product grid on larger mobile */
@media (min-width: 481px) and (max-width: 767px) {
    .nx-product-box .d-flex.justify-content-between {
        flex-direction: row !important;
        gap: 8px !important;
    }

    /* Products page — ensure 2-col grid */
    #portfolio-flters+.row .col-lg-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ----------------------------------------
   ADDITIONAL: Appointment section cleanup
   ---------------------------------------- */
@media (max-width: 480px) {
    #appointment .display-6 {
        font-size: 1.3rem !important;
    }

    #appointment p {
        font-size: 0.85rem !important;
    }

    #appointment .col-lg-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ----------------------------------------
   ADDITIONAL: Modal improvements for mobile
   ---------------------------------------- */
@media (max-width: 480px) {
    .modal-dialog-centered {
        margin: 10px !important;
        max-width: calc(100% - 20px) !important;
    }

    .modal-body {
        padding: 12px !important;
    }

    .modal-body .row.g-3 .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Quote modal form spacing */
    #nx-quoteForm .form-floating {
        margin-bottom: 8px !important;
    }

    #nx-quoteForm .form-control,
    #nx-quoteForm .form-select {
        font-size: 14px !important;
    }
}

@media (max-width: 374px) {
    .modal-dialog {
        margin: 5px !important;
    }

    .modal-header h5 {
        font-size: 1rem !important;
    }
}

/* === CHAKRA POSITION MAPPING === */
/* Positions are in percentage from top and centered horizontally */
/*.crown {
    top: 10%;
    color: #E8B4F6;
    background: linear-gradient(135deg, #E8B4F6, #9D4EDD);
}

.third-eye {
    top: 18%;
    color: #D896FF;
    background: linear-gradient(135deg, #D896FF, #7209B7);
}

.throat {
    top: 27%;
    color: #7AB8FF;
    background: linear-gradient(135deg, #7AB8FF, #3A86FF);
}

.heart {
    top: 39%;
    color: #66FF99;
    background: linear-gradient(135deg, #66FF99, #29BE6D);
}

.solar {
    top: 50%;
    color: #FFFF79;
    background: linear-gradient(135deg, #FFFF79, #FFB800);
}

.sacral {
    top: 62%;
    color: #FFB84D;
    background: linear-gradient(135deg, #FFB84D, #FF8C00);
}

.root {
    top: 74%;
    color: #FF6B6B;
    background: linear-gradient(135deg, #FF6B6B, #C1121F);
}

/* ========================================
   CHAKRA POINT POSITIONING STATION
   ========================================
   Change the 'top' percentage values below to align 
   chakra points for each device size.
*/
/* === CHAKRA POSITION MAPPING === */
/* Positions are in percentage from top and centered horizontally */
.crown {
    top: 19%;
    color: #E8B4F6;
    background: linear-gradient(135deg, #E8B4F6, #9D4EDD);
}

.third-eye {
    top: 26%;
    color: #D896FF;
    background: linear-gradient(135deg, #D896FF, #7209B7);
}

.throat {
    top: 36%;
    color: #7AB8FF;
    background: linear-gradient(135deg, #7AB8FF, #3A86FF);
}

.heart {
    top: 45%;
    color: #66FF99;
    background: linear-gradient(135deg, #66FF99, #29BE6D);
}

.solar {
    top: 56%;
    color: #FFFF79;
    background: linear-gradient(135deg, #FFFF79, #FFB800);
}

.sacral {
    top: 69%;
    color: #FFB84D;
    background: linear-gradient(135deg, #FFB84D, #FF8C00);
}

.root {
    top: 77%;
    color: #FF6B6B;
    background: linear-gradient(135deg, #FF6B6B, #C1121F);
}

/* 1. LAPTOP & TABLET (Large) - max 1024px */
@media (max-width: 1024px) {
    .crown {
        top: 19%;
    }

    .third-eye {
        top: 26%;
    }

    .throat {
        top: 35%;
    }

    .heart {
        top: 46%;
    }

    .solar {
        top: 55%;
    }

    .sacral {
        top: 69%;
    }

    .root {
        top: 78%;
    }
}

/* 2. TABLET (Small) - max 768px */
@media (max-width: 768px) {
    .crown {
        top: 32%;
    }

    .third-eye {
        top: 37%;
    }

    .throat {
        top: 42%;
    }

    .heart {
        top: 48%;
    }

    .solar {
        top: 53%;
    }

    .sacral {
        top: 60%;
    }

    .root {
        top: 66%;
    }
}

/* 3. MOBILE (Large Phones) - max 480px */
@media (max-width: 480px) {
    .crown {
        top: 33% !important;
    }

    .third-eye {
        top: 37%;
    }

    .throat {
        top: 42%;
    }

    .heart {
        top: 48%;
    }

    .solar {
        top: 54%;
    }

    .sacral {
        top: 61%;
    }

    .root {
        top: 66%;
    }
}

/* 4. MOBILE (Small Phones) - max 374px */
@media (max-width: 374px) {
    .crown {
        top: 32% !important;
    }

    .third-eye {
        top: 37%;
    }

    .throat {
        top: 42%;
    }

    .heart {
        top: 47%;
    }

    .solar {
        top: 54%;
    }

    .sacral {
        top: 61%;
    }

    .root {
        top: 66%;
    }
}