@media (min-width: 1650px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1290px !important;
    }
}
@media (min-width: 993px) {
    /* The desktop dropdown is hidden/shown via opacity + visibility +
       transform so it can animate. `display` toggling would snap to
       none instantly and kill the fade transition, so we leave display
       alone here. Bootstrap's default .dropdown-menu { display: none }
       is overridden by the rule in style.css (display: block) so the
       opacity-based animation gets to play. */
}
@media (max-width: 1650px) {
    .why-choose-img2 {
        position: absolute;
        right: -140px;
        bottom: 0;
    }
}
@media (max-width: 1499px) {
    .NextArrow {
        position: absolute;
        bottom: 0;
        right: 100px;
    }
    .PrevArrow {
        position: absolute;
        bottom: 0;
        right: 185px;
    }
}
@media (max-width: 1399px) {
    .why-choose-img2 {
        position: absolute;
        right: -180px;
        bottom: 0;
    }
    .satistication-container {
        display: flex;
        align-items: center;
        gap: 0;
    }
}
@media (max-width: 1299px) {
    .small-header-sub-main,
    .small-header-sub {
        gap: 20px;
    }
    .quality {
        font-size: 65px;
        line-height: 80px;
    }
    .timate-box-main h2 {
        font-size: 65px;
        line-height: 80px;
    }
    .hero-slider-section {
        height: 850px;
    }
    .about-row {
        padding-top: 180px;
        padding-bottom: 70px;
    }
    .section-five,
    .ads-section,
    .section-six,
    .section-seven,
    .section-eight,
    .blog-section,
    .section-team-two,
    .team-details-section {
        padding: 70px 0;
    }
    footer,
    .section-about-two {
        padding-top: 70px;
    }
}
@media (max-width: 1199px) {
    .desktop-contact-header {
        display: none;
    }
    .nav-links {
        gap: 25px;
    }
    .qution-text {
        display: inline-flex;
        align-items: flex-start;
    }
    .section-three {
        height: 570px;
        padding: 70px 0;
    }
    .why-choose-img2 {
        display: none;
    }
    .satistication {
        max-width: 580px;
    }
    .img-group-project {
        gap: 30px;
        margin-top: 30px;
        justify-content: center;
    }
    .trust-conter-main {
        padding-top: 30px;
    }
    .blog-content-hed {
        margin: 20px 0 20px 50px;
    }
    .media-logo-call-footer {
        gap: 20px;
        padding: 20px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .media-logo-call-footer .call-detl {
        padding: 10px 40px 10px 10px;
    }
    .footer-med-icons-main {
        gap: 12px;
    }
    .img-header-text {
        font-size: 50px;
        line-height: 60px;
    }
    .team-contact {
        padding: 20px;
    }
    .team-card-hover {
        bottom: 27px;
        right: 20px;
    }
    .team-details-col2 {
        padding: 30px;
    }
    .contact-team-person {
        margin-bottom: 15px;
    }
    .clients-main {
        gap: 25px;
    }
    .future-slider {
        margin-top: 30px;
    }
    .cutomer-img-main-text {
        margin-top: 40px;
    }
    .roofing-services-list-main,
    .all-service-text {
        padding: 25px;
    }
    .all-blog-col {
        justify-content: center;
        gap: 30px;
    }
    .contact-box-row {
        margin-bottom: 70px;
    }
    .heroSection {
        padding: 180px 0 80px;
    }
    .imgs-group-services-main {
        margin: 30px 0;
    }
    .service-video {
        margin: 30px 0;
    }
    .process-box {
        flex-direction: column;
        text-align: center;
    }
}
@media (max-width: 991px) {
    header.main-header {
        top: 0 !important;
    }
    .small-header {
        display: none;
    }

    /* ── Hamburger (Standard-theme style) ──
       Three 22×2 spans stacked. The top + bottom rotate ±45° while the
       middle fades out, so the icon animates from ≡ to ✕ on tap. */
    .menu-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: 0;
        cursor: pointer;
        position: relative;
        z-index: 1102;
        -webkit-tap-highlight-color: transparent;
    }
    .menu-toggle span {
        display: block;
        height: 2px;
        width: 22px;
        margin: 0 auto;
        background: #fff;
        border-radius: 2px;
        transform-origin: center;
        transition: transform .25s ease, opacity .2s ease;
    }
    .menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .menu-logo { display: block; padding-bottom: 20px; }
    .menu-logo img { height: 36px; width: auto; }
    .mobile-contact-header { display: flex; }

    /* ── Slide-down panel ──
       The nav drops DOWN from the bottom of the header band (not sliding
       in from the left). Brand stays on the left, hamburger flips to X
       on the right, the panel hangs below. */
    nav {
        position: fixed;
        top: 84px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        min-height: auto;
        height: auto;
        max-height: calc(100vh - 84px);
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 18px 22px 26px;
        gap: 6px;
        background: rgba(9, 18, 23, 0.92);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
        z-index: 1001;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
    }
    nav.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
    }

    /* Per-link cascade — each link fades in just after the panel itself
       so the menu reveal feels deliberate rather than a blunt drop. */
    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        margin: 0 0 14px;
        padding: 0;
        list-style: none;
    }
    .nav-links li {
        width: 100%; margin: 0;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .25s ease, transform .25s ease;
    }
    nav.active .nav-links li { opacity: 1; transform: translateY(0); }
    nav.active .nav-links li:nth-child(1) { transition-delay: .05s; }
    nav.active .nav-links li:nth-child(2) { transition-delay: .09s; }
    nav.active .nav-links li:nth-child(3) { transition-delay: .13s; }
    nav.active .nav-links li:nth-child(4) { transition-delay: .17s; }
    nav.active .nav-links li:nth-child(5) { transition-delay: .21s; }
    nav.active .nav-links li:nth-child(6) { transition-delay: .25s; }
    nav.active .nav-links li:nth-child(n+7) { transition-delay: .28s; }
    /* Parent <li>s with a dropdown lay out as a flex row so the link
       label sits on the left and the +/- toggle button sits on the
       right, with the .dropdown-menu wrapping underneath on its own
       line (flex-basis: 100% on the dropdown). */
    .nav-links li.nav-has-dropdown {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .nav-links li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 4px;
        color: #fff;
        font-weight: 500;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    .nav-links li.nav-has-dropdown > a {
        flex: 1 1 auto; min-width: 0;
        /* Border lives on the row instead so the toggle button's tap
           target visually shares the same separator as the link. */
        border-bottom: 0;
    }
    .nav-links li > a:hover { color: #FE8500; }
    /* Drop the chevron SVG on mobile - the +/- toggle button replaces it. */
    .nav-links li.nav-has-dropdown > a img { display: none; }
    /* Non-dropdown items (no toggle button) still want a chevron-free row. */
    .nav-links li > a img { width: 14px; transition: transform .25s ease; opacity: .65; }
    .nav-links li.active > a img { transform: rotate(180deg); opacity: 1; }

    /* +/- toggle button — pinned to the right of the parent label. The
       icon is two 12px bars: one horizontal, one vertical via ::before.
       When .active flips on the parent <li>, the vertical bar rotates +
       fades, leaving just the horizontal bar (reads as a minus). Same
       animated pattern the TwinsHair / Standard theme uses. 44px tap
       target so it sits on the recommended minimum for touch. */
    .nav-mob-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 0;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        -webkit-tap-highlight-color: transparent;
    }
    .nav-mob-toggle:hover { color: #FE8500; }
    .nav-mob-toggle-icon,
    .nav-mob-toggle-icon::before {
        content: "";
        display: block;
        width: 12px;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        transition: transform .25s ease, opacity .25s ease;
    }
    .nav-mob-toggle-icon { position: relative; }
    .nav-mob-toggle-icon::before {
        position: absolute;
        inset: 0;
        transform: rotate(90deg);
    }
    /* When a <li> is .active (open), fade out + un-rotate ITS OWN toggle's
       vertical bar so that toggle reads as "-". Uses `> .nav-mob-toggle` (direct
       child) so an open PARENT doesn't also flip a collapsed SUB-parent's toggle
       to "-": a sub-parent keeps its "+" until you expand it in its own right. */
    .nav-links li.active > .nav-mob-toggle .nav-mob-toggle-icon::before {
        transform: rotate(0deg);
        opacity: 0;
    }
    /* Submenu subheaders ("By Type" under Floor Fitting) stand out in orange in
       the hamburger menu once their sub-parent is expanded. */
    .dropdown-menu li.nav-header span { color: #FE8500; }

    /* Dropdowns on mobile: tap the +/- toggle to expand. We animate the
       REAL pixel height (via JS setting style.height to the dropdown's
       scrollHeight, then releasing to auto) instead of max-height, so
       the ease applies across the actual content height. Duration is
       deliberately .4s so the open/close motion is obviously visible,
       not a perceived snap. !important on transition keeps the rule
       from being stripped by any other .dropdown-menu rule that doesn't
       declare height (e.g. style.css's desktop dropdown transition,
       which only animates opacity + transform). */
    .dropdown-menu {
        display: block !important;
        position: static !important;
        width: 100%;
        flex-basis: 100%;
        visibility: visible;
        box-shadow: none;
        border-radius: 0;
        background: rgba(255, 255, 255, .03);
        margin: 0;
        padding: 0 0 0 18px;
        min-width: 0;
        height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: height .4s ease, opacity .4s ease, transform .4s ease !important;
    }
    .nav-links li.active > .dropdown-menu {
        /* height is set in pixels by script.js to scrollHeight, then
           released to auto after the open transition completes. */
        opacity: 1;
        transform: translateY(0);
    }
    .dropdown-menu::before { display: none; }
    .dropdown-menu li,
    nav.active .dropdown-menu li {
        opacity: 1;
        transform: none;
        transition: none;
        padding: 0;
    }
    .dropdown-menu li a {
        padding: 10px 0 10px 6px;
        color: rgba(255, 255, 255, .82);
        font-size: 14px;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
    }
    .dropdown-menu li:last-child a { border-bottom: 0; }
    .dropdown-menu li a:hover { color: #FE8500; }

    /* ── Level-3 flyout → nested accordion on mobile ──
       The side-flyout makes no sense on a narrow drawer, so a sub-link
       with its own children behaves like the top-level dropdowns: a row
       with a +/- toggle that expands an inline, indented sub-list. */
    .dropdown-menu li.has-children {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 0;
    }
    .dropdown-menu li.has-children > a {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start;   /* cancel desktop space-between */
    }
    /* The +/- toggle replaces the "+" glyph on mobile. */
    .dropdown-menu li.has-children > a .nav-plus { display: none; }
    .dropdown-menu li.has-children > .nav-mob-toggle { display: inline-flex; }
    /* Cancel the desktop side-flyout positioning — it's an inline list now. */
    .dropdown-submenu {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        width: 100%;
        flex-basis: 100%;
        padding-left: 14px;            /* indent grandchildren */
        background: rgba(0, 0, 0, .25) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
    .dropdown-submenu::before { display: none; }

    /* Call-Us pill pinned at the bottom of the panel. */
    .mobile-contact-header { margin-top: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }

    /* ── Overlay (tap to close) ── */
    .overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        z-index: 200;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
    }
    .overlay.active {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s linear 0s;
    }
    .mobile-quote-btn {
        width: 100%;
        text-align: center;
    }
    .aboutText,
    .business,
    .hardest {
        text-align: center;
    }
    .quick-text-main {
        display: none;
    }
    .small-header {
        padding: 10px 12px;
    }
    .small-header-sub-main {
        width: 100%;
    }
    .small-header-sub {
        justify-content: space-between;
        width: 100%;
    }
    .header-container {
        padding: 10px 12px;
    }
    .slide-content {
        padding: 60px 0;
        max-width: 100%;
    }
    .quality {
        font-size: 50px;
        line-height: 65px;
    }
    .residents {
        font-size: 20px;
        line-height: 36px;
        margin-top: 20px;
    }
    .hero-slider-section {
        height: 700px;
    }
    .btn-cutomer-main {
        display: flex;
        align-items: flex-start;
        margin-top: 50px;
        gap: 40px;
        flex-direction: column;
    }
    .cutomers-text-main h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .cutomers-text-main p {
        font-size: 16px;
    }
    .image-Photo {
        display: none;
    }
    .timate-box-main-head {
        padding: 30px;
        max-width: 100%;
        justify-content: space-between;
    }
    .bluer-roofing,
    .secTwo-img-main .secTwo-img,
    .card-call-now-main {
        display: none;
    }
    .about-row {
        padding-top: 130px;
        padding-bottom: 50px;
    }
    .section-three {
        height: 500px;
        padding: 50px 0;
    }
    .circle-box-main {
        padding: 0 20px 20px 20px;
    }
    .circle-box-main h2 {
        padding-top: 20px;
    }
    .services-slider.slick-initialized.slick-slider {
        margin-top: -220px;
    }
    .benefits-slider .slick-arrow {
        display: none;
    }
    .services-slider-box.slick-slide {
        margin: 0 12px;
    }
    .why-choose-img1-main {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
    }
    .hardest-space {
        padding-top: 20px;
    }
    .section-five,
    .ads-section,
    .section-six,
    .section-seven,
    .section-eight,
    .blog-section,
    .section-team-two,
    .team-details-section {
        padding: 50px 0;
    }
    footer,
    .section-about-two {
        padding-top: 50px;
    }
    .heroSection {
        padding: 180px 0 80px;
    }
    .satistication-container {
        gap: 50px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .arrrowVector {
        display: none;
    }
    .satistication {
        max-width: 100%;
        text-align: center;
    }
    .tbas-btn-heading-main {
        gap: 30px;
        margin-bottom: 40px;
        flex-direction: column;
    }
    .tbas-btn-heading-main div {
        max-width: 100%;
    }
    .img-group-project {
        gap: 20px;
        margin-top: 20px;
        justify-content: center;
    }
    .form-box-col {
        margin: 0 auto;
    }
    .couter-form-row {
        gap: 50px;
    }
    .haiRated {
        font-size: 21px;
        line-height: 30px;
    }
    .blog-home-row {
        padding-top: 30px;
        gap: 30px 0;
    }
    .footer-row-quick {
        gap: 30px 0;
    }
    .media-logo-call-footer {
        gap: 30px 80px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .copyrights-main {
        padding-bottom: 20px;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .img-header-text {
        font-size: 45px;
        line-height: 50px;
    }
    .breadcrumb-group {
        margin-top: 16px;
    }
    .team-row {
        gap: 30px 0;
    }
    .single-team-row1 {
        flex-direction: column-reverse;
        gap: 30px;
    }
    .team-details-col1 {
        padding-right: 12px;
    }
    .team-details-main-col2 {
        padding-left: 12px;
    }
    .single-team-page-row2 {
        padding-top: 50px;
    }
    .featured {
        transform: none;
    }
    .pricing-plans-row {
        gap: 30px 0;
        margin-top: 30px;
    }
    .clients-main {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 30px;
    }
    .layers-img1 {
        margin: 20px 0;
    }
    .ourServicesPrcoes {
        font-size: 30px;
        margin: 15px 0;
        text-align: center;
    }
    .process-box h3 {
        font-size: 22px;
        line-height: 30px;
    }
    .all-services-row {
        justify-content: center;
        gap: 30px;
    }
    .serice-process-main {
        margin-bottom: 30px;
    }
    .card-adds-main,
    .documents-box,
    #accordionExample {
        margin-top: 30px;
    }
    .diamond-nextbtn-head {
        margin-top: 30px;
    }
    .left-side-bar-row-project,
    .singl-blog2-col {
        flex-direction: column-reverse;
    }
    .singl-blog1-col {
        gap: 30px;
    }
    .contact-box-row {
        margin-bottom: 50px;
        gap: 30px 0;
    }
    .contact-sec-row {
        gap: 30px;
    }
    .map-iframe {
        width: 100%;
        height: 300px;
    }
}
@media (max-width: 767px) {
    .provide,
    .quality {
        text-align: center;
    }
    .residents {
        text-align: center;
        border: none;
    }
    .btn-cutomer-main {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 30px;
    }
    .quality {
        font-size: 40px;
        line-height: 55px;
    }
    .residents {
        font-size: 18px;
        line-height: 28px;
        margin-top: 15px;
    }
    .cutomer-img-main {
        position: relative;
        left: -50px;
    }
    .slide-content {
        padding: 38px 0;
    }
    .timate-box-main-head {
        margin-top: -70px;
        gap: 15px;
    }
    .multi-qustions-main {
        flex-direction: column;
        gap: 25px;
        margin-bottom: 35px;
    }
    .hardest-space {
        padding-top: 12px;
    }
    .qution-text {
        font-size: 18px;
    }
    .hardest {
        font-size: 18px;
        line-height: 28px;
    }
    .business {
        font-size: 40px;
        line-height: 50px;
    }
    .about-row {
        padding-top: 140px;
        padding-bottom: 30px;
    }
    .section-three {
        height: 440px;
    }
    .services-slider.slick-initialized.slick-slider {
        margin-top: -200px;
    }
    .why-choose-img1-main {
        margin-top: 30px;
    }
    .haassle-box {
        gap: 20px;
    }
    .haassle-box-sub h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .section-five,
    .ads-section,
    .section-six,
    .section-seven,
    .section-eight,
    .blog-section,
    .section-team-two,
    .team-details-section {
        padding: 30px 0;
    }
    footer,
    .section-about-two {
        padding-top: 30px;
    }
    .call-detl a {
        font-size: 22px;
    }
    .call-detl .img-main-call {
        width: 70px;
        height: 70px;
    }
    .call-detl .img-main-call img {
        width: 40px;
    }
    .satistication-container {
        gap: 40px;
    }
    .tbas-btn-heading-main {
        gap: 20px;
        margin-bottom: 20px;
        flex-direction: column;
    }
    .project-overlay {
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        padding: 15px;
    }
    .icon-box {
        align-self: flex-end;
        width: 100%;
        max-width: 50px;
        height: 50px;
    }
    .logos {
        margin-top: 40px;
    }
    .text-content h3 {
        font-size: 17px;
        line-height: 26px;
    }
    .text-content p {
        font-size: 16px;
        line-height: 22px;
        padding-top: 4px;
    }
    .emper-main,
    .slider-qut-per-main {
        padding: 20px;
    }
    .contact-us-future-btn {
        margin-top: 20px;
    }
    .FuturePrevArrow {
        right: 70px;
    }
    .qotestion {
        width: 50px;
    }
    .slider-person img {
        width: 80px;
        height: 80px;
    }
    .blog-home-row {
        gap: 20px 0;
    }
    .quicklinks-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }
    .media-logo-call-footer {
        gap: 30px 30px;
    }
    /* On phones, force the social-icons row to center regardless of how
       many icons are configured. Desktop default is flex-end which leaves
       a few icons hugging the right edge of a centred column — awkward
       on a 320-600px viewport. Width: 100% + margin: 0 auto lets the
       row centre itself within whatever space the wrapped footer cell
       gives it. */
    .media-logo-call-footer .footer-med-icons-main,
    .footer-med-icons-main {
        justify-content: center !important;
        width: 100%;
        margin: 0 auto;
        min-width: 0;
        flex-wrap: wrap;
    }
    .team-card-title a {
        font-size: 22px;
        line-height: 30px;
    }
    .team-images-main {
        border-radius: 20px 20px 120px 0;
    }
    .feugiat {
        padding-top: 10px;
        text-align: center;
    }
    .single-team-page-row2 {
        padding-top: 30px;
        gap: 30px;
    }
    .clients-main {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        margin-top: 20px;
    }
    #accordionExample {
        margin-top: 30px;
    }
    .serice-process-main {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }
    .layers-img2 {
        width: 100%;
    }
    .overlay-content h3 {
        font-size: 24px;
        line-height: 30px;
    }
    .blog-standard-main {
        flex-direction: column;
    }
    .blog-standard-main .blog-content-hed {
        margin: 20px 20px 20px 30px;
    }
    #recent-post-box {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .contact-box-row {
        margin-bottom: 30px;
        gap: 30px 0;
    }
    #contact-page-form {
        padding: 30px;
    }
    .cutomer-img-main-text {
        margin-top: 30px;
        gap: 60px;
    }
    .imgs-group-services-main {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}
@media (max-width: 575px) {
    .small-header {
        display: none;
    }
    .hero-slider-section {
        height: 630px;
    }
    .residents {
        margin-top: 10px;
    }
    .timate-box-main h2 {
        font-size: 40px;
        line-height: 50px;
    }
    .timate-box-main-head {
        padding: 30px 12px;
        margin-top: -50px;
    }
    .multi-qustions-main {
        padding-top: 15px;
    }
    .business {
        font-size: 34px;
        line-height: 44px;
    }
    .card-call-now-main div {
        font-size: 17px;
    }
    .card-call-now-main a {
        font-size: 22px;
    }
    .section-three {
        padding: 30px 0;
    }
    .services-slider.slick-initialized.slick-slider {
        margin-top: -120px;
    }
    .section-three {
        height: 380px;
    }
    .latest-hardest {
        padding-top: 13px;
    }
    .haassle-box-sub h2,
    .haassle-box-sub p {
        text-align: center;
    }
    .haassle-box {
        gap: 12px;
        flex-direction: column;
    }
    .circle-svg {
        width: 80px;
        height: 80px;
    }
    .circle-svg img {
        width: 50px;
    }
    .tab-btn {
        padding: 5px 15px;
    }
    .tab-btn-main {
        gap: 15px;
    }
    .dsa {
        width: 100%;
        overflow: auto;
    }
    .img-group-project {
        flex-direction: column;
    }
    .couter-form-row {
        gap: 30px;
    }
    .trust-conter-main {
        padding-top: 20px;
    }
    .marquee-img-main {
        margin: 0;
    }
    .logos {
        margin-top: 40px;
    }
    .form-box {
        padding: 20px;
    }
    .nedd-help-form {
        margin-top: 20px;
    }
    .nedd-help-form input {
        margin-bottom: 15px;
    }
    .page-loader p {
        font-size: 25px;
        letter-spacing: 1px;
        padding-top: 20px;
        padding-left: 1px;  /* match the 1px letter-spacing (see style.css) */
    }
    .heroSection {
        padding: 150px 0 60px;
    }
    .breadcrumb-group {
        margin-top: 10px;
    }
    .img-header-text {
        font-size: 40px;
        line-height: 46px;
        font-weight: 600;
    }
    .breadcrumb-group a {
        font-size: 16px;
    }
    button.bottom-top-button {
        right: 18px;
        bottom: 14px;
        width: 40px;
        height: 40px;
        font-size: 25px;
    }
    .team-row {
        gap: 20px 0;
    }
    .team-person-media-main a {
        width: 40px;
        height: 40px;
    }
    .team-person-media-main {
        position: absolute;
        bottom: 15px;
        left: 25px;
    }
    .single-team-row1 {
        flex-direction: column-reverse;
        gap: 20px;
    }
    .clients-main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        justify-items: center;
    }
    .process-box {
        gap: 10px;
    }
    .all-service-text {
        font-size: 30px;
        line-height: 40px;
    }
    .adds-details-main h3 {
        font-size: 30px;
        line-height: 40px;
    }
    .roofing-services-list-main,
    .all-service-text {
        padding: 20px;
    }
    .overlay-content .arrow-box {
        width: 45px;
        height: 45px;
        top: 12px;
        right: 12px;
    }
    .hover-overlay {
        padding: 12px;
    }
    .tag-date-sub p {
        font-size: 15px;
        line-height: 24px;
    }
    .tag-date {
        gap: 12px;
        padding: 20px 0 20px;
    }
    .qoute-box {
        padding: 30px;
        margin: 20px 0;
    }
    .qoute-box h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .psum {
        margin-top: 12px;
    }
    .input-main {
        gap: 20px;
        margin-bottom: 20px;
        flex-direction: column;
    }
    .interdum {
        font-size: 30px;
        line-height: 40px;
    }
    .single-services-list-fetur {
        padding: 30px;
    }
    /* Narrow phones: collapse the 2-col tick grid to a single stacked column
       (first half then second half, in source order). */
    .single-services-list-fetur ul {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        grid-template-rows: none;
    }
    .ldwagv {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}
/* ── Small-mobile typography + spacing tweaks ─────────────────────────
   Below 500px the existing 575px rules leave a few elements (footer
   columns, brand wordmark, mobile nav-link padding) feeling slightly
   too large for narrow phones. These overrides come straight from the
   user's spec — exact values, scoped under <500px so they don't leak
   onto tablets in portrait. */
@media (max-width: 500px) {
    .logo.logo-with-text .logo-text { font-size: 14px; }
    .working-hours                  { font-size: 17px; }
    .timing-hrw p                   { font-size: 14px; }
    .quicklinks-main ul li a        { font-size: 13px; }
    .copyrights-main p,
    .copyrights-main a              { font-size: 13px; }
    .call-detl p                    { font-size: 15px; }
    .footer-med-icons               { width: 40px; height: 40px; }
    .footer-med-icons img           { width: 20px; }
    .media-logo-call-footer .footer-med-icons-main { min-width: 270px; }
    .nav-links li > a               { padding: 4px; }
}
@media (max-width: 400px) {
    .cutomer-img-main-text {
        gap: 10px;
        flex-direction: column;
    }
}
@media (max-width: 375px) {
    .business {
        font-size: 31px;
        line-height: 40px;
    }
    .services-slider.slick-initialized.slick-slider {
        margin-top: -100px;
    }
    .media-logo-call-footer .call-detl .img-main-call {
        background: var(--13, #091217);
        display: none;
    }
    .media-logo-call-footer .call-detl {
        padding: 10px 10px 10px 10px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .contact-team-person {
        gap: 10px;
        margin-bottom: 10px;
    }
}
@media (max-width: 350px) {
    .quality {
        font-size: 27px;
        line-height: 40px;
    }
}

/* ── Service / floor-fitting pages: mobile polish ──────────────────────
   Appended last so these win over the same-specificity rules above. */
@media (max-width: 767px) {
    /* Section H3s were 30px/700 - too heavy and shouty on a phone. Smaller,
       lighter and tighter so they read as calm sub-headings. */
    .ourServicesPrcoes { font-size: 25px; line-height: 33px; font-weight: 600; margin: 22px 0 14px; }
}
@media (max-width: 575px) {
    .ourServicesPrcoes { font-size: 22px; line-height: 30px; }
    /* Sidebar contact address - nudge down so it doesn't dominate on mobile. */
    .serv-map-consad { font-size: 15px; line-height: 23px; }
}
@media (max-width: 400px) {
    /* "Book My Free Consultation" is long + white-space:nowrap, so it ran off
       the screen. Shrink the label (and trim padding) so it fits narrow phones. */
    .contact-form .quote-btn { font-size: 13px; padding: 14px 16px; letter-spacing: 0; }
}
@media (max-width: 340px) {
    .contact-form .quote-btn { font-size: 12px; padding: 13px 12px; }
}
@media (max-width: 991px) {
    /* Consult band is JS-lifted into the content row (above the sidebar) on
       mobile - it has no Bootstrap col class of its own, so force it full-width
       and give it clear breathing room from the content above/below. */
    .all-services-row > .consult-section-eight {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-top: 10px;
    }
    /* Homepage stats: show the "1600 Floors Installed" overlay graphic BELOW the
       warranty / rating boxes on mobile (it was display:none). Stack the row into
       a column so the image (order:10, first in the DOM) lands on its own line
       under the boxes. The extra-specific image selector (3 classes) beats the
       publisher's site-custom rule `.home .image-Photo{max-width:44%}` which would
       otherwise shrink it enough to tuck beside the last box. Scoped to
       .section-stats so other stats layouts (e.g. stats-about) stay unaffected. */
    .section-stats .timate-box-main-head {
        flex-direction: column;
        align-items: center;
        /* Release the publisher's fixed `height:217px` (a desktop-bar height set
           in site-custom.css) so the column GROWS to fit the boxes + image;
           otherwise the content overflows the section and "Why Choose Us"
           collides with it. */
        height: auto;
        padding: 26px 12px 30px;
    }
    .section-stats .timate-box-main-head .image-Photo {
        display: block;
        order: 10;
        width: 90%;
        max-width: 300px;
        height: auto;
        /* Also override the publisher's `.home .image-Photo{margin-top:-150px}`
           (a desktop overlap trick) so the image sits BELOW the boxes on mobile. */
        margin: 22px auto 0 !important;
    }
}