/* Mobile/tablet corrections. Loaded after the original theme to preserve desktop styling. */
iframe { max-width: 100%; }
.contact-map { display: block; width: 100%; }

@media (max-width: 991px) {
    .header-layout1 .sticky-wrapper,
    .header-layout1 .sticky-wrapper.sticky {
        width: 100% !important;
        max-width: 100% !important;
    }
    .header-layout1 .header-logo {
        left: auto !important;
        transform: none !important;
        padding: 10px 0;
        margin: 0;
    }
    .header-layout1 .sticky-wrapper .header-logo img {
        max-height: 64px;
        max-width: 150px;
    }
    .header-layout1 .as-menu-toggle { width: 44px; height: 44px; }
    .as-menu-wrapper .as-menu-area {
        max-width: min(360px, 92vw);
        height: 100%;
        height: 100dvh;
        overflow-y: auto;
    }
    .as-menu-wrapper .mobile-logo img { max-height: 80px; width: auto; }
    .as-mobile-menu { max-height: none; overflow: visible; padding-bottom: 24px; }
    .as-mobile-menu ul li a { min-height: 44px; overflow-wrap: anywhere; }
    .as-mobile-menu ul .sub-menu li a { padding-right: 12px; }
    body.mobile-menu-open { overflow: hidden; }

    /* Show the complete wide artwork, then readable copy on a solid background. */
    #heroSlide1 .hero-banner-one,
    #heroSlide1 .hero-banner-two {
        height: auto;
        min-height: 0;
        max-height: none;
        background: #102639;
        padding: 0 0 52px;
    }
    #heroSlide1 .hero-banner-one .as-hero-bg,
    #heroSlide1 .hero-banner-two .as-hero-bg {
        top: 0;
        bottom: auto;
        height: auto;
        aspect-ratio: 19 / 8;
        background-size: cover !important;
        background-position: center !important;
    }
    #heroSlide1 .hero-banner-one > .container,
    #heroSlide1 .hero-banner-two > .container {
        height: auto;
        padding-top: calc(100vw * 8 / 19 + 24px);
    }
    #heroSlide1 .hero-banner-one > .container > .row,
    #heroSlide1 .hero-banner-two > .container > .row { height: auto; }
    #heroSlide1 .as-hero-slide .row > div {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }
    #heroSlide1 .hero-banner-one .hero-style1,
    #heroSlide1 .hero-banner-two .hero-style1 {
        left: auto;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }
    #heroSlide1 .as-hero-slide .hero-subtitle {
        color: #fff;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 12px;
    }
    #heroSlide1 .hero-banner-one .hero-title,
    #heroSlide1 .hero-banner-two .hero-title {
        font-size: clamp(28px, 5vw, 42px);
        line-height: 1.15;
        margin: 0;
        max-width: 100%;
    }
    #heroSlide1 .hero-banner-one .hero-text,
    #heroSlide1 .hero-banner-two .hero-text {
        font-size: 16px;
        line-height: 1.6;
        margin: 16px 0 0;
        max-width: 100%;
        color: #fff;
    }
    #heroSlide1 .as-hero-slide .btn-group {
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 22px;
    }
    #heroSlide1 .as-hero-slide .as-btn {
        min-height: 44px;
        padding: 15px 18px;
        font-size: 12px;
        margin: 0;
    }
    .hero-1::before, .hero-1::after { display: none !important; }
    .hero-slider-1 .slick-dots { bottom: 16px; }

    /* Keep the introduction photo in document flow; reserve room for the badge. */
    .about-thumb-wrap3 { padding: 0 0 24px; margin: 0 auto 24px !important; max-width: 540px; }
    .about-thumb-wrap3 .thumb-2 {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    .about-thumb-wrap3 .thumb-2 img { display: block; width: 100%; height: auto; }
    .about-thumb-wrap3 .shape-mockup { display: none; }
    .about-thumb-wrap3 .about-counter2 {
        right: 12px;
        bottom: 0;
        max-width: 135px;
        padding: 14px 18px !important;
    }
    .about-thumb-wrap3 .about-counter2 .counter-title { font-size: 36px; line-height: 1.1; }
    .about-thumb-wrap3 .about-counter2 .counter-text { font-size: 13px; line-height: 1.4; }
    .title-area.about-wrap-3 { margin: 0 !important; }
    .about-area2 .about-thumb-wrap2 { height: auto !important; padding: 0; }
    .about-area2 .about-thumb-wrap2 img { max-width: 100%; height: auto; }
    .wcu-area .wcu-box { padding: 36px 24px !important; }
    .contact-map { height: 360px; }
    input, select, textarea, .form-control { font-size: 16px; }
    .footer-info a, .footer-text { overflow-wrap: anywhere; }
}

@media (max-width: 575px) {
    .header-layout1 .sticky-wrapper .header-logo img { max-height: 56px; }
    .breadcumb-wrapper { padding: 48px 0; }
    .breadcumb-title { font-size: 32px; line-height: 1.2; }
    .sec-title, .title-area.about-wrap-3 .sec-title { font-size: 26px; line-height: 1.25; }
    .title-area.about-wrap-3 p { font-size: 15px; line-height: 1.7; }
    #blog-sec .blog-slider .blog-img { height: 240px; }
    .service-card.style2 { padding-left: 22px; padding-right: 22px; }
    .contact-map { height: 300px; }
    #pdfModal .modal-dialog { margin: 12px; }
    #pdfModal #pdfViewer { height: 65vh !important; height: 65dvh !important; }
}

@media (prefers-reduced-motion: reduce) {
    .as-menu-wrapper, .as-menu-wrapper .as-menu-area { transition: none; }
    #heroSlide1 [data-ani] { animation: none !important; opacity: 1; }
}
@media (max-width: 991px) {
    #heroSlide1 .hero-subtitle::before,
    #heroSlide1 .hero-subtitle::after { display: none; }
    #heroSlide1 .as-hero-bg::after { background: transparent; }
}
@media (max-width: 991px) {
    .title-area .sub-title::before,
    .title-area .sub-title::after,
    .title-area .sub-title .double-line::before,
    .title-area .sub-title .double-line::after { display: none; }
    .as-menu-wrapper .as-menu-toggle {
        right: 12px;
        top: 12px;
        width: 40px;
        height: 40px;
    }
    .whatsapp_float {
        left: 16px !important;
        right: auto !important;
        bottom: 16px !important;
        width: 52px !important;
        height: 52px !important;
    }
    .whatsapp_float .whatsapp_icon { padding: 6px; }
    .scroll-top { right: 16px; bottom: 16px; }
    .service-slider2 .slick-dots,
    #blog-sec .blog-slider .slick-dots {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin: 24px auto 0;
        max-width: 280px;
    }
    .service-slider2 .slick-dots li,
    #blog-sec .blog-slider .slick-dots li { margin: 0; }
}
@media (max-width: 991px) {
    #heroSlide1 { background: #102639; }
    #heroSlide1 .slick-dots { right: 24px; bottom: 4px; }
    #heroSlide1 .slick-dots li button {
        height: 44px;
        width: 28px;
        background: linear-gradient(#fff, #fff) center / 100% 4px no-repeat;
    }
    #heroSlide1 .slick-dots li.slick-active button {
        width: 48px;
        background: linear-gradient(#ed0000, #ed0000) center / 100% 4px no-repeat;
    }
}