/* ===== 991px - Tablet / Mobile Nav Breakpoint ===== */
@media screen and (max-width: 991px) {
    /* Force reveal images visible on mobile — GSAP ScrollTrigger animation
       doesn't fire reliably on mobile browsers, leaving images hidden */
    .reveal {
        visibility: visible !important;
    }

    /* Hide desktop nav, show mobile hamburger */
    .collapse.navbar-collapse.main-menu {
        display: none !important
    }

    /* SlickNav theming - dark navy bg with red accents */
    .slicknav_menu {
        background: #03171D !important;
        border-radius: 0 0 16px 16px
    }

    .slicknav_btn {
        background: #b10000 !important
    }

    .slicknav_nav {
        background: #03171D
    }

    .slicknav_nav a {
        color: #fff !important;
        font-size: 15px;
        padding: 10px 20px
    }

    .slicknav_nav a:hover,
    .slicknav_nav a:focus {
        background: rgba(177, 0, 0, 0.2) !important;
        color: #fff !important
    }

    .slicknav_nav ul {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        margin: 4px 10px
    }

    .slicknav_nav ul a {
        font-size: 14px;
        padding: 8px 20px 8px 30px
    }

    /* Mobile phone CTA in slicknav */
    .slicknav_nav .mobile-phone-cta {
        display: block;
        text-align: center;
        padding: 12px 20px;
        margin: 10px 15px;
        background: #b10000;
        color: #fff !important;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px
    }

    .slicknav_nav .mobile-phone-cta:hover {
        background: #8a0000 !important
    }

    /* Header adjustments */
    header.main-header {
        top: 0 !important
    }

    .header-sticky {
        border-radius: 0 !important;
        max-width: 100% !important
    }

    /* Section spacing */
    .page-header {
        padding: 160px 0 80px !important
    }

    .section-title h2 {
        font-size: 28px
    }

    .section-title p {
        font-size: 15px
    }

    /* Footer columns stack */
    .footer-prime .row > div {
        margin-bottom: 30px
    }
}

/* ===== 768px - Tablet Portrait ===== */
@media screen and (max-width: 768px) {
    .navbar-brand img {
        height: 40px
    }

    .navbar {
        padding: 15px 0px !important
    }

    /* Hero */
    .hero-feature-list {
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .hero-feature-item-content {
        width: auto
    }

    .hero-feature-item {
        width: 100%;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        display: flex
    }

    /* Page headers */
    .page-header {
        padding: 140px 0 60px !important
    }

    .page-header h1 {
        font-size: 28px
    }

    /* Cards and grids */
    .feature-item-prime,
    .how-work-item-prime,
    .about-us-item-prime {
        margin-bottom: 20px
    }

    /* Images in content */
    .about-image figure img,
    .content-image img {
        border-radius: 12px
    }

    /* Footer */
    .footer-logo-prime img {
        max-width: 100px
    }

    .footer-prime {
        padding: 40px 0 20px
    }
}

/* ===== 576px - Phone ===== */
@media screen and (max-width: 576px) {
    .navbar-brand img {
        height: 35px
    }

    /* Hero */
    .hero h1 {
        font-size: 26px
    }

    .hero p {
        font-size: 14px
    }

    .hero .btn-default {
        padding: 12px 24px;
        font-size: 14px
    }

    /* Page headers */
    .page-header {
        padding: 120px 0 50px !important
    }

    .page-header h1 {
        font-size: 24px
    }

    /* Section titles */
    .section-title h2 {
        font-size: 24px
    }

    /* Cards */
    .container {
        padding-left: 15px;
        padding-right: 15px
    }

    /* Pricing / feature items */
    .pricing-item-prime,
    .key-feature-item-prime {
        padding: 15px
    }

    /* Footer */
    .footer-prime .footer-links ul li {
        margin-bottom: 8px
    }

    .footer-copyright {
        font-size: 13px;
        text-align: center
    }
}

/* ===== 400px - Small Phone ===== */
@media screen and (max-width: 400px) {
    .navbar-brand img {
        height: 30px
    }

    .hero h1 {
        font-size: 22px
    }

    .section-title h2 {
        font-size: 22px
    }

    .page-header {
        padding: 110px 0 40px !important
    }

    .page-header h1 {
        font-size: 22px
    }

    .btn-default {
        padding: 10px 20px;
        font-size: 13px
    }
}