/* ============================================================
   FENNEL — responsive.css
   Mobile-first breakpoints loaded after main.css
   ============================================================ */

/* ---------------------------------------------------------------
   TABLET: ≤ 1024px
--------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Header layout: logo left, hamburger right */
    .site-header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .hamburger-btn {
        display: flex;
    }

    /* Nav hidden by default */

    #site-nav {
        display: none;
        width: 100%;
        background: #fff;
        border-top: 1px solid #eee;
        padding: 12px 0 20px;
    }

    #site-nav.open {
        display: block;
        margin: 0 50px;
        background: #d0d0d0;
    }

    /* Stack nav links vertically */
    #site-nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    #site-nav ul li {
        width: 100%;
    }

    #site-nav ul li a {
        display: block;
        padding: 11px 20px;
        color: #222;
        font-size: 15px;
    }

    /* Submenu — always visible on mobile/tablet */
    .site-nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #f9f9f9;
        border-radius: 8px;
        margin: 0 12px 6px 12px;
        padding: 4px 0;
        display: flex !important;
        flex-direction: column;
    }

    .sub-menu li a {
        padding: 9px 16px;
        font-size: 14px;
        color: #444;
    }

    /* CTA button full width on mobile */
    #last-link-menu {
        margin: 8px 20px 0;
        text-align: center;
        border-radius: 8px;
    }

    .site-nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding-left: 15px;
        display: block;
    }

    .sub-menu li a {
        padding: 8px 0;
    }

}


/* ---------------------------------------------------------------
   MOBILE: ≤ 768px
--------------------------------------------------------------- */
@media (max-width: 768px) {
    h1 {
        font-size: 35px;
        line-height: 45px;
    }

    h2 {
        font-size: 25px;
        line-height: 30px;
    }


    #costingCustomers .costing-customers-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .section,
    #services {
        padding-block: 3rem;
        padding-left: 30px;
        padding-right: 30px;
    }

    .video-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .footer-last-part-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);

    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
    }

    .featured-on-list {
        display: flex;
        flex-direction: column;
    }

    #testimonials .testimonial-card {
        width: 100%;
    }

    #mannequinVideo .video-item-left iframe {
        border-radius: 17px !important;
        width: 100%;
        height: 100%;
    }

    .whyChoose-card-container {
        display: flex;
        margin-top: 40px;
        flex-direction: column;
    }

    .offer-section-container {
        display: grid;
        grid-template-columns: 100%;
        margin-top: 50px;
        padding-bottom: 51px;
    }
}


/* ---------------------------------------------------------------
   SMALL MOBILE: ≤ 480px
--------------------------------------------------------------- */
@media (max-width: 480px) {}


/* ---------------------------------------------------------------
   PRINT
--------------------------------------------------------------- */
@media print {

    .site-header,
    .back-to-top,
    .hero-actions,
    .contact-form-wrap,
    footer {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    a {
        text-decoration: underline;
        color: #000;
    }
}


/* ---------------------------------------------------------------
   REDUCED MOTION (accessibility)
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}





@media(max-width:991px) {}

@media(max-width:767px) {}