/* =========================================================
   EL-HAMD TEX
   RESPONSIVE STYLESHEET
========================================================= */


/* =========================================================
   01. LARGE LAPTOP / SMALL DESKTOP
   <= 1399px
========================================================= */

@media (max-width: 1399px) {

    :root {
        --container-padding: 55px;
    }


    /* ---------------------------------------------
       NAVIGATION
    --------------------------------------------- */

    .main-navigation {
        gap: 22px;
    }

    .nav-link {
        font-size: 10px;
    }


    .brand-logo img {
        width: 150px;
    }


    .btn-primary-custom {
        min-width: 135px;

        padding-left: 18px;
        padding-right: 18px;
    }


    /* ---------------------------------------------
       HERO
    --------------------------------------------- */

    .hero-section {
        height: min(680px, calc(100vh - 101px));
    }


    .hero-title {
        font-size: clamp(55px, 6vw, 82px);
    }


    .hero-content {
        width: min(650px, 68vw);
    }


    .hero-trust-points {
        margin-top: 42px;

        gap: 25px;
    }


    /* ---------------------------------------------
       PRODUCT
    --------------------------------------------- */

    .product-card-image {
        height: 225px;
    }


    /* ---------------------------------------------
       ABOUT
    --------------------------------------------- */

    .about-content {
        padding-right: 50px;
    }


    .about-stats {
        padding-left: 30px;
        padding-right: 30px;
    }


    /* ---------------------------------------------
       PROCESS
    --------------------------------------------- */

    .process-grid {
        gap: 10px;
    }


    .process-arrow {
        font-size: 14px;
    }


    /* ---------------------------------------------
       FEATURED
    --------------------------------------------- */

    .featured-wrapper {
        gap: 45px;
    }


    .fabric-image {
        height: 180px;
    }


    /* ---------------------------------------------
       FOOTER
    --------------------------------------------- */

    .footer-main {
        gap: 30px;
    }

}


/* =========================================================
   02. TABLET LANDSCAPE
   <= 1199px
========================================================= */

@media (max-width: 1199px) {

    :root {
        --container-padding: 40px;

        --section-padding: 100px;
    }


    /* =====================================================
       TOP BAR
    ====================================================== */

    .top-message {
        display: none;
    }


    .top-right {
        margin-left: auto;
    }


    /* =====================================================
       NAVBAR
    ====================================================== */

    .main-navigation {
        gap: 18px;

        margin-right: 0;
    }


    .nav-link {
        font-size: 9px;
    }


    .navbar-actions {
        gap: 8px;
    }


    .search-button {
        width: 34px;
    }


    .btn-primary-custom {
        min-width: 125px;

        padding-left: 15px;
        padding-right: 15px;

        gap: 10px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero-section {
        min-height: 600px;

        height: 650px;
    }


    .hero-content {
        width: 67vw;
    }


    .hero-title {
        font-size: clamp(52px, 6.2vw, 76px);
    }


    .hero-description {
        font-size: 12px;
    }


    .hero-side-message {
        display: none;
    }


    /* =====================================================
       PRODUCTS
    ====================================================== */

    .section-heading-row {
        gap: 35px;
    }


    .section-heading-description {
        width: 42%;
    }


    .product-card-image {
        height: 210px;
    }


    .product-card-content {
        min-height: 110px;

        padding: 17px;
    }


    .product-card-content h3 {
        font-size: 21px;
    }


    /* =====================================================
       ABOUT
    ====================================================== */

    .about-wrapper {
        grid-template-columns:
            1fr
            1fr;
    }


    .about-content {
        min-height: 430px;

        padding:
            65px
            45px
            65px
            0;
    }


    .about-stats {
        min-height: 430px;

        padding:
            60px 40px;
    }


    .about-image {
        grid-column: 1 / -1;

        min-height: 420px;
    }


    /* =====================================================
       PROCESS
    ====================================================== */

    .process-grid {
        grid-template-columns:
            repeat(5, 1fr);

        gap: 15px;
    }


    .process-arrow {
        display: none;
    }


    .process-icon {
        width: 58px;

        height: 58px;
    }


    .process-step h3 {
        font-size: 19px;
    }


    /* =====================================================
       FEATURED
    ====================================================== */

    .featured-wrapper {
        grid-template-columns:
            0.75fr
            2fr;

        gap: 35px;
    }


    .featured-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 14px;
    }


    .fabric-image {
        height: 200px;
    }


    /* =====================================================
       CTA
    ====================================================== */

    .cta-wrapper {
        grid-template-columns:
            1fr
            auto;

        gap: 35px;
    }


    .cta-side-message {
        display: none;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer-main {
        grid-template-columns:
            1.4fr
            0.8fr
            1.2fr
            0.7fr;
    }


    .footer-arabic {
        display: none;
    }

}


/* =========================================================
   03. TABLET / LARGE MOBILE
   <= 991px
========================================================= */

@media (max-width: 991px) {

    :root {
        --container-padding: 30px;

        --section-padding: 85px;
    }


    /* =====================================================
       TOP BAR
    ====================================================== */

    .top-contact {
        gap: 15px;
    }


    .top-contact a,
    .top-location {
        font-size: 9px;
    }


    .top-location {
        display: none;
    }


    /* =====================================================
       NAVBAR
    ====================================================== */

    .navbar-inner {
        min-height: 70px;
    }


    .main-navigation {
        display: none;
    }


    .navbar-actions {
        margin-left: auto;
    }


    .mobile-menu-toggle {
        display: flex;
    }


    .brand-logo img {
        width: 145px;
    }


    .search-button {
        display: none;
    }


    .btn-primary-custom {
        min-width: 130px;

        min-height: 42px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero-section {
        height: 700px;

        min-height: 600px;
    }


    .hero-image img {
        object-position: 60% center;
    }


    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(4, 13, 23, 0.9) 0%,
                rgba(4, 13, 23, 0.72) 55%,
                rgba(4, 13, 23, 0.25) 100%
            );
    }


    .hero-content {
        width: 80vw;

        padding-top: 0;
    }


    .hero-title {
        font-size: clamp(52px, 8vw, 75px);
    }


    .hero-description {
        margin-top: 24px;
    }


    .hero-trust-points {
        margin-top: 42px;
    }


    .hero-slide-number {
        display: none;
    }


    .hero-pagination {
        bottom: 28px !important;
    }


    .hero-navigation {
        bottom: 18px;
    }


    /* =====================================================
       PRODUCTS
    ====================================================== */

    .section-heading-row {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }


    .section-heading-description {
        width: 100%;

        max-width: 550px;
    }


    .product-card-image {
        height: 245px;
    }


    /* =====================================================
       ABOUT
    ====================================================== */

    .about-wrapper {
        grid-template-columns:
            1fr;
    }


    .about-content {
        min-height: auto;

        padding:
            0 0 55px;
    }


    .about-stats {
        min-height: auto;

        padding:
            45px 0;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 30px;

        border-left: 0;

        border-right: 0;

        border-top:
            1px solid var(--color-border-light);

        border-bottom:
            1px solid var(--color-border-light);
    }


    .about-image {
        min-height: 480px;

        margin-top: 55px;
    }


    /* =====================================================
       PROCESS
    ====================================================== */

    .process-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 25px;
    }


    .process-intro {
        width: 100%;

        max-width: 550px;
    }


    .process-grid {
        grid-template-columns:
            repeat(3, 1fr);

        row-gap: 55px;
    }


    /* =====================================================
       FEATURED
    ====================================================== */

    .featured-wrapper {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .featured-intro p {
        max-width: 550px;
    }


    .fabric-image {
        height: 250px;
    }


    /* =====================================================
       CTA
    ====================================================== */

    .cta-wrapper {
        grid-template-columns:
            1fr
            auto;

        min-height: 320px;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer-main {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 45px;
    }


    .footer-brand {
        grid-column: 1 / -1;
    }


    .footer-bottom {
        padding: 15px 0;

        min-height: auto;
    }

}


/* =========================================================
   04. TABLET PORTRAIT
   <= 767px
========================================================= */

@media (max-width: 767px) {

    :root {
        --container-padding: 22px;

        --section-padding: 75px;
    }


    /* =====================================================
       TOP BAR
    ====================================================== */

    .top-bar {
        display: none;
    }


    /* The top bar is hidden here, so the mobile contact strip takes
       over the phone / WhatsApp / language controls.

       Both the strip and the navbar are absolutely positioned on top of
       the hero, so the strip height is published as a variable and the
       navbar offsets itself by exactly that much. 45px leaves room for the
       44px tap-target floor applied to the strip's anchors on touch. */
    :root {
        --mobile-strip-h: 45px;
    }

    .mobile-contact-bar {
        display: block;

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        z-index: 21;

        min-height: var(--mobile-strip-h);

        background: var(--color-navy);

        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }


    /* =====================================================
       NAVBAR
    ====================================================== */

    .main-navbar {
        position: absolute;

        top: var(--mobile-strip-h);

        left: 0;

        width: 100%;

        background: rgba(255, 255, 255, 0.97);
    }


    .navbar-inner {
        min-height: 68px;
    }


    .brand-logo img {
        width: 135px;
    }


    .btn-primary-custom {
        display: none;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero-section {
        height: 760px;

        min-height: 680px;
    }


    .hero-image img {
        object-position: 62% center;
    }


    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 13, 23, 0.5) 0%,
                rgba(4, 13, 23, 0.72) 45%,
                rgba(4, 13, 23, 0.94) 100%
            );
    }


    .hero-container {
        align-items: flex-end;

        padding-bottom: 105px;
    }


    .hero-content {
        width: 100%;
    }


    .hero-eyebrow {
        font-size: 8px;

        letter-spacing: 0.15em;

        margin-bottom: 16px;
    }


    .hero-title {
        max-width: 100%;

        font-size: clamp(47px, 13vw, 68px);

        line-height: 0.91;
    }


    .hero-description {
        max-width: 100%;

        margin:
            22px 0
            25px;

        font-size: 11px;

        line-height: 1.65;
    }


    .desktop-only {
        display: none;
    }


    .hero-buttons {
        gap: 8px;
    }


    .hero-buttons .btn {
        min-height: 43px;

        padding:
            0 17px;

        gap: 10px;

        font-size: 9px;
    }


    .hero-trust-points {
        margin-top: 34px;

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 10px;
    }


    .hero-trust-item {
        gap: 7px;
    }


    .trust-icon {
        width: 28px;

        height: 28px;

        flex: 0 0 28px;

        font-size: 11px;
    }


    .hero-trust-item strong,
    .hero-trust-item span {
        font-size: 7px;
    }


    .hero-pagination {
        left: var(--container-padding) !important;

        bottom: 28px !important;
    }


    .hero-navigation {
        right: var(--container-padding);

        bottom: 17px;

        transform: none;
    }


    .hero-navigation button {
        width: 34px;

        height: 34px;
    }


    .hero-slide-number {
        display: none;
    }


    /* =====================================================
       SECTION HEADINGS
    ====================================================== */

    .section-title {
        font-size: clamp(43px, 12vw, 58px);

        line-height: 0.93;
    }


    .section-eyebrow {
        font-size: 8px;
    }


    /* =====================================================
       PRODUCTS
    ====================================================== */

    .products-grid {
        --bs-gutter-y: 18px !important;
    }


    .product-card-image {
        height: 240px;
    }


    .product-card-content {
        min-height: 105px;
    }


    /* =====================================================
       ABOUT
    ====================================================== */

    .about-stats {
        grid-template-columns:
            1fr;

        gap: 22px;

        padding:
            38px 0;
    }


    .about-image {
        min-height: 360px;

        margin-top: 45px;
    }


    .about-image-overlay {
        top: 25px;

        right: 22px;
    }


    /* =====================================================
       PROCESS
    ====================================================== */

    .process-grid {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 45px;

        column-gap: 25px;
    }


    .process-step h3 {
        font-size: 20px;
    }


    .process-step p {
        font-size: 8px;
    }


    /* =====================================================
       FEATURED
    ====================================================== */

    .featured-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }


    .fabric-image {
        height: 190px;
    }


    .fabric-info {
        min-height: 58px;

        padding: 9px 11px;
    }


    .fabric-info strong {
        font-size: 16px;
    }


    /* =====================================================
       CTA
    ====================================================== */

    .cta-wrapper {
        grid-template-columns:
            1fr;

        gap: 30px;

        min-height: 360px;

        padding:
            55px 0;
    }


    .cta-content h2 {
        font-size: clamp(43px, 11vw, 58px);
    }


    .cta-content p {
        max-width: 420px;
    }


    .cta-action {
        justify-content: flex-start;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer-main {
        grid-template-columns:
            1fr;

        gap: 35px;

        padding:
            50px 0
            35px;
    }


    .footer-brand {
        grid-column: auto;
    }


    .footer-brand img {
        width: 160px;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 4px;

        padding:
            17px 0;
    }


    /* =====================================================
       SEARCH
    ====================================================== */

    .search-close {
        top: 20px;

        right: 20px;
    }


    .search-overlay-inner {
        width: calc(100% - 44px);
    }


    .search-form input {
        height: 60px;

        font-size: 35px;
    }


    .search-form button {
        width: 45px;

        flex: 0 0 45px;
    }


    /* =====================================================
       BACK TO TOP
    ====================================================== */

    .back-to-top {
        right: 15px;

        bottom: 15px;

        width: 38px;

        height: 38px;
    }


    /* =====================================================
       FLOATING WHATSAPP
    ====================================================== */

    /* Sits above the back-to-top button so the two never overlap. */
    .floating-whatsapp {
        right: 15px;

        bottom: 63px;

        width: 46px;

        height: 46px;

        font-size: 23px;
    }

    html[dir='rtl'] .floating-whatsapp {
        right: auto;

        left: 15px;
    }

    html[dir='rtl'] .back-to-top {
        right: auto;

        left: 15px;
    }

}


/* =========================================================
   05. MOBILE
   <= 575px
========================================================= */

@media (max-width: 575px) {

    :root {
        --container-padding: 18px;

        --section-padding: 65px;
    }


    /* =====================================================
       NAVBAR
    ====================================================== */

    .navbar-inner {
        min-height: 64px;
    }


    .brand-logo img {
        width: 125px;
    }


    .mobile-menu-inner {
        padding:
            22px
            var(--container-padding);
    }


    .mobile-navigation {
        margin-top: 25px;
    }


    .mobile-navigation a {
        font-size: 39px;

        padding: 14px 0;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero-section {
        height: 730px;

        min-height: 650px;
    }


    .hero-container {
        padding-bottom: 100px;
    }


    .hero-eyebrow {
        flex-wrap: wrap;

        row-gap: 4px;
    }


    .hero-title {
        font-size: clamp(43px, 12.8vw, 61px);
    }


    .hero-description {
        font-size: 10px;
    }


    .hero-buttons {
        width: 100%;

        flex-direction: column;

        align-items: stretch;
    }


    .hero-buttons .btn {
        width: 100%;
    }


    .hero-trust-points {
        margin-top: 28px;

        gap: 5px;
    }


    .hero-trust-item {
        gap: 5px;
    }


    .hero-trust-item strong,
    .hero-trust-item span {
        font-size: 6.5px;
    }


    .trust-icon {
        width: 25px;

        height: 25px;

        flex-basis: 25px;

        font-size: 10px;
    }


    .hero-pagination {
        bottom: 22px !important;
    }


    .hero-pagination .swiper-pagination-bullet {
        width: 20px;
    }


    .hero-pagination .swiper-pagination-bullet-active {
        width: 38px;
    }


    .hero-navigation {
        bottom: 12px;
    }


    /* =====================================================
       PRODUCTS
    ====================================================== */

    .product-card-image {
        height: 220px;
    }


    .product-card-content {
        padding:
            16px 15px;
    }


    .product-card-content h3 {
        font-size: 20px;
    }


    .product-card-content p {
        font-size: 9px;
    }


    /* =====================================================
       ABOUT
    ====================================================== */

    .about-description {
        font-size: 10px;

        line-height: 1.75;
    }


    .about-image {
        min-height: 300px;
    }


    /* =====================================================
       PROCESS
    ====================================================== */

    .process-grid {
        grid-template-columns:
            1fr 1fr;

        row-gap: 40px;
    }


    .process-icon {
        width: 52px;

        height: 52px;

        font-size: 18px;
    }


    .process-step h3 {
        font-size: 18px;
    }


    .process-step p {
        max-width: 125px;

        font-size: 7px;
    }


    /* =====================================================
       FEATURED
    ====================================================== */

    .featured-grid {
        grid-template-columns:
            1fr;
    }


    .fabric-image {
        height: 220px;
    }


    /* =====================================================
       CTA
    ====================================================== */

    .cta-wrapper {
        min-height: 390px;
    }


    .cta-content p {
        font-size: 10px;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer-main {
        padding-top: 45px;
    }


    .footer-column ul li,
    .footer-column ul li a {
        font-size: 9px;
    }

}


/* =========================================================
   06. SMALL MOBILE
   <= 390px
========================================================= */

@media (max-width: 390px) {

    :root {
        --container-padding: 16px;
    }


    /* =====================================================
       HERO
    ====================================================== */

    .hero-section {
        height: 700px;

        min-height: 630px;
    }


    .hero-container {
        padding-bottom: 92px;
    }


    .hero-title {
        font-size: 43px;
    }


    .hero-description {
        margin-top: 18px;

        margin-bottom: 20px;
    }


    .hero-trust-points {
        grid-template-columns:
            1fr 1fr;

        row-gap: 13px;
    }


    .hero-trust-item:last-child {
        grid-column: 1 / -1;
    }


    /* =====================================================
       SECTION
    ====================================================== */

    .section-title {
        font-size: 43px;
    }


    /* =====================================================
       PRODUCT
    ====================================================== */

    .product-card-image {
        height: 205px;
    }


    /* =====================================================
       PROCESS
    ====================================================== */

    .process-grid {
        grid-template-columns:
            1fr;
    }


    .process-step {
        display: grid;

        grid-template-columns:
            58px 1fr;

        column-gap: 15px;

        text-align: left;

        align-items: center;
    }


    .process-icon {
        grid-row: 1 / 4;

        margin: 0;

        width: 55px;

        height: 55px;
    }


    .process-number {
        margin: 0;
    }


    .process-step h3 {
        margin-top: 2px;
    }


    .process-step p {
        margin: 2px 0 0;

        max-width: none;
    }


    /* =====================================================
       CTA
    ====================================================== */

    .cta-wrapper {
        min-height: 370px;
    }


    .cta-content h2 {
        font-size: 43px;
    }

}


/* =========================================================
   07. LANDSCAPE MOBILE
========================================================= */

@media (max-height: 600px) and (orientation: landscape) {

    .hero-section {
        height: 620px;

        min-height: 560px;
    }


    .hero-container {
        align-items: center;

        padding-top: 50px;

        padding-bottom: 40px;
    }


    .hero-title {
        font-size: 48px;
    }


    .hero-description {
        margin-top: 15px;

        margin-bottom: 18px;
    }


    .hero-trust-points {
        margin-top: 22px;
    }


    .hero-pagination {
        bottom: 15px !important;
    }


    .hero-navigation {
        bottom: 5px;
    }

}


/* =========================================================
   08. TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .product-card:hover,
    .fabric-card:hover {
        transform: none;
    }


    .product-card:hover .product-card-image img,
    .fabric-card:hover .fabric-image img,
    .about-image:hover img {
        transform: none;
    }


    .btn:hover {
        transform: none;
    }


    .nav-link::after {
        display: none;
    }

}


/* =========================================================
   09. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-image img,
    .product-card-image img,
    .fabric-image img,
    .about-image img {
        transition: none;
    }

}


/* =========================================================
   10. INTERIOR PAGES
========================================================== */

/* --- Tablet & smaller laptops --- */

@media (max-width: 991px) {

    .page-hero {
        min-height: 330px;

        padding-bottom: 58px;
    }


    .feature-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 14px;
    }


    .split-grid {
        grid-template-columns:
            1fr;

        gap: 36px;
    }


    .split-grid.reverse .split-media {
        order: 0;
    }


    .media-frame {
        min-height: 340px;
    }


    .promise-grid {
        grid-template-columns:
            1fr;
    }


    .stat-strip {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 16px;
    }


    .product-detail-grid {
        grid-template-columns:
            1fr;

        gap: 36px;
    }


    .product-detail-media img {
        min-height: 360px;
    }


    .branch-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .news-featured-card {
        grid-template-columns:
            1fr;
    }


    .news-featured-body {
        padding: 36px 32px;
    }


    .news-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .gallery-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .contact-grid {
        grid-template-columns:
            1fr;

        gap: 36px;
    }


    .cta-band-inner {
        flex-direction: column;

        align-items: flex-start;
    }


    .cta-band {
        padding: 56px 0;
    }

}


/* --- Mobile --- */

@media (max-width: 767px) {

    .page-hero h1 {
        font-size: 52px;
    }


    .page-hero-eyebrow {
        font-size: 8px;
    }


    .feature-grid {
        grid-template-columns:
            1fr;
    }


    .feature-card {
        padding: 28px 22px;
    }


    .promise-card {
        padding: 32px 26px;
    }


    .promise-card h3 {
        font-size: 28px;
    }


    .branch-grid {
        grid-template-columns:
            1fr;
    }


    .branch-card {
        padding: 30px 26px;
    }


    .news-grid {
        grid-template-columns:
            1fr;
    }


    .news-featured-image {
        min-height: 280px;
    }


    .news-card-image {
        height: 240px;
    }


    .article-image {
        height: 300px;
    }


    .product-key-facts {
        grid-template-columns:
            1fr;
    }


    .product-tabs .nav-tabs .nav-link {
        padding: 13px 13px 11px;

        font-size: 9px;
    }


    .contact-form-panel {
        padding: 30px 22px;
    }


    .media-frame {
        min-height: 300px;
    }

}


/* --- Small phones --- */

@media (max-width: 575px) {

    .page-hero {
        min-height: 300px;

        padding-bottom: 46px;
    }


    .page-hero h1 {
        font-size: 44px;
    }


    .page-breadcrumb {
        font-size: 9px;

        gap: 8px;
    }


    .stat-strip {
        grid-template-columns:
            1fr 1fr;

        gap: 12px;
    }


    .stat-strip .stat-box {
        padding: 26px 8px;
    }


    .stat-strip .stat-box strong {
        font-size: 42px;
    }


    .branch-foot {
        flex-direction: column;

        align-items: flex-start;
    }


    .news-featured-body {
        padding: 30px 24px;
    }


    .gallery-item--wide {
        min-height: 240px;
    }


    .product-detail-media img {
        min-height: 300px;
    }


    .article-meta {
        gap: 8px;

        font-size: 8px;
    }


    .article-body blockquote {
        padding: 18px 20px;

        font-size: 17px;
    }


    .spec-table th,
    .spec-table td {
        padding: 12px;

        font-size: 10px;
    }

}


/* --- Very small phones --- */

@media (max-width: 390px) {

    .feature-card {
        padding: 24px 20px;
    }

}


/* --- Touch devices: kill hover lifts on new cards --- */

@media (hover: none) and (pointer: coarse) {

    .feature-card:hover,
    .promise-card:hover,
    .branch-card:hover,
    .news-card:hover,
    .news-featured-card:hover,
    .contact-info-item:hover {
        transform: none;
    }


    .feature-card:hover .feature-icon,
    .branch-card:hover .branch-icon {
        background: transparent;

        color: var(--color-navy);
    }


    .media-frame:hover img,
    .gallery-item:hover img,
    .news-card:hover .news-card-image img,
    .news-featured-card:hover .news-featured-image img {
        transform: none;
    }

}


/* --- Reduced motion for interior animations --- */

@media (prefers-reduced-motion: reduce) {

    .media-frame img,
    .news-card-image img,
    .news-featured-image img,
    .gallery-item img,
    .cta-band::before,
    .promise-card::before,
    .floating-whatsapp::after {
        transition: none;

        animation: none;
    }

    /* the pulse ring is decorative, so drop it entirely */
    .floating-whatsapp::after {
        display: none;
    }

}


/* =========================================================
   FORM FEEDBACK
   Honeypot, inline field errors and the ajax alert box.
   ========================================================= */

/* The honeypot must stay in the DOM but out of sight. Using a small
   off-screen box rather than display:none, because some bots skip
   hidden inputs entirely. */

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.field-error,
.invalid-feedback.d-block {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--color-accent, #c0392b);
}

.form-alert {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 2px;
    font-size: 13px;
    line-height: 1.7;
    border: 1px solid transparent;
}

.form-alert--success {
    background: rgba(39, 174, 96, 0.08);
    border-color: rgba(39, 174, 96, 0.35);
    color: #1e8449;
}

.form-alert--error {
    background: rgba(192, 57, 43, 0.08);
    border-color: rgba(192, 57, 43, 0.35);
    color: #a93226;
}

/* RTL: match the reading direction */

html[dir='rtl'] .form-alert {
    text-align: right;
}


/* =========================================================
   MOBILE USABILITY PASS
   Legibility, tap targets, safe areas and horizontal overflow.
   Appended last so these rules win over the breakpoint blocks above.
   ========================================================= */

/* ---------- Tap targets: 44px minimum ---------- */

@media (hover: none) and (pointer: coarse) {

    .top-contact a,
    .top-right a,
    .language-switcher a,
    .mobile-contact-bar a,
    .search-button,
    .mobile-menu-toggle,
    .mobile-menu-close,
    .search-close,
    .back-to-top,
    .footer-column ul li a,
    .social-links a,
    .mobile-navigation a,
    .mobile-menu-footer a,
    .page-breadcrumb a,
    .top-location {

        min-height: 44px;

        display: inline-flex;

        align-items: center;
    }

    .social-links a,
    .search-button,
    .mobile-menu-toggle,
    .mobile-menu-close,
    .search-close,
    .back-to-top {

        min-width: 44px;

        justify-content: center;
    }

    .footer-column ul li a,
    .page-breadcrumb a,
    .mobile-navigation a,
    .mobile-menu-footer a {

        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* avoid duplicated tap area where the anchor is already a flex row */
    .top-contact a,
    .top-right a,
    .language-switcher a,
    .top-location {

        padding-top: 10px;
        padding-bottom: 10px;
    }

}


/* ---------- Legibility floor on small screens ---------- */

@media (max-width: 767px) {

    /* the original breakpoints drop several labels to 7–9px, which is
       below any readable size */
    .top-bar,
    .hero-eyebrow,
    .section-eyebrow,
    .page-hero-eyebrow,
    .page-breadcrumb,
    .product-card-content p,
    .news-card-body .news-meta,
    .news-meta,
    .gallery-item__label,
    .footer-contact li,
    .footer-bottom,
    .mobile-contact-bar,
    .language-switcher {

        font-size: 11px;
    }

    .product-card-content h3,
    .news-card-body h3,
    .branch-card h3,
    .gallery-item__title {

        font-size: 15px;
    }

    .stat-number,
    .hero-title,
    .section-title,

    .page-hero-title {

        line-height: 1.25;
    }

    .form-control,
    .form-select {

        font-size: 16px;

        /* prevents iOS Safari from zooming on focus */
        min-height: 48px;
    }

    input::placeholder,
    textarea::placeholder {

        font-size: 16px;
    }

}


/* ---------- Safe areas for notched devices ---------- */

@supports (padding: max(0px)) {

    /* the strip grows by the notch inset, so the navbar offset has to
       grow with it or the two would overlap; touch targets stay ≥44px */
    :root {
        --mobile-strip-h: calc(45px + env(safe-area-inset-top));
    }

    .mobile-contact-bar {
        padding-top: env(safe-area-inset-top);
    }

    .mobile-menu-inner {
        padding-top: calc(30px + env(safe-area-inset-top));
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }

    .back-to-top {
        bottom: calc(25px + env(safe-area-inset-bottom));
    }

    .floating-whatsapp {
        bottom: calc(25px + env(safe-area-inset-bottom));
    }

    .lightbox-close {
        top: calc(24px + env(safe-area-inset-top));
    }

}


/* ---------- Dynamic viewport height ---------- */

/* Desktop only: the 101px offset is the top bar + navbar. On small
   screens the navbar is absolutely positioned and the hero keeps its
   fixed mobile height, so this must not leak into that breakpoint. */

@supports (height: 100dvh) {

    @media (min-width: 768px) {

        .hero-section {
            height: calc(100dvh - 101px);
        }

    }

    .mobile-menu-inner {
        min-height: 100dvh;
    }

    .mobile-menu {
        max-height: 100dvh;
    }

}


/* ---------- Horizontal overflow guard ---------- */

@media (max-width: 991px) {

    html,
    body {

        max-width: 100%;

        overflow-x: hidden;
    }

    /* the marquee must be allowed to scroll sideways */
    .marquee {
        overflow-x: hidden;
    }

    /* spec tables and tab strips scroll horizontally instead of
       squashing their cells */
    .product-tabs .nav-tabs,
    .table-responsive,
    .specs-table-wrapper {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;
    }

    .product-tabs .nav-tabs {

        flex-wrap: nowrap;

        min-width: max-content;
    }

    .product-tabs .nav-tabs .nav-link {

        white-space: nowrap;
    }

    /* gallery never exceeds the viewport */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 575px) {

    .gallery-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    /* keep the hero readable on short phones */
    .hero-description {
        font-size: 13px;
        line-height: 1.8;
    }

    .desktop-only {
        display: none;
    }

}


/* ---------- Landscape phones: the hero must not eat the viewport ---------- */

@media (max-height: 600px) and (orientation: landscape) {

    .hero-section {

        min-height: 520px;
    }

}


/* =========================================================
   END RESPONSIVE.CSS
   ========================================================= */