/* Variables - Responsive Overrides */

/* Tablet Large (1200px and below) */
@media (max-width: 1200px) {
    :root {
        --container-xl-width: 1140px;
        --header-gap: 18px;
        --hero-padding: 70px;
    }

    * {
        box-sizing: border-box;
    }

    .flex-row {
        flex-direction: column;
    }

    .about-us__content{
        max-width:100%;
    }

    .section-width {
        padding: 0;
        margin: 50px auto;
    }

    h3.title {
        font-size: 32px;
        line-height: 60px;
        text-align: center;
    }

    h3.title img {
        height: 32px;
    }
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    :root {
        --container-xl-width: 960px;
        --header-padding: 12px 18px;
        --header-gap: 16px;
        --hero-padding: 60px;
    }

    .section-width {
        padding: 0 60px;
        margin: 45px auto;
    }

    h3.title {
        font-size: 20px;
        line-height: 55px;
        letter-spacing: -0.2px;
    }

    h3.title img {
        height: 20px;
        margin-right: 8px;
    }

    input, textarea, select {
        padding: 11px 14px;
        font-size: 15px;
    }

    .row {
        gap: 18px;
    }
    .mobile-hide {
        display: none !important;
    }
}

/* Tablet Small (768px and below) */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}
@media (max-width: 768px) {
    :root {
        --container-xl-width: 720px;
        --header-padding: 10px 15px;
        --header-gap: 12px;
        --header-mobile-padding: 8px 12px;
        --header-mobile-gap: 12px;
        --hero-padding: 50px;
        --hero-mobile-padding: 35px 18px;
    }

    .mobile-only {
        display: block !important;
    }

    .hide-mobile {
        display: none !important;
    }

    .section-width {
        padding: 0 40px;
        margin: 40px auto;
    }

    .is-layout-flex {
        gap: 16px;
        flex-wrap: wrap;
    }

    h3.title {
        font-size: 18px;
        line-height: 50px;
        letter-spacing: -0.18px;
    }

    h3.title img {
        height: 18px;
        margin-right: 7px;
    }

    input, textarea, select {
        padding: 10px 12px;
        font-size: 15px;
        border-radius: 6px;
    }

    .row {
        flex-direction: column;
        gap: 15px;
    }

    .row .col-xl-6 {
        width: 100%;
    }
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
    :root {
        --container-xl-width: 100%;
        --header-padding: 8px 12px;
        --header-gap: 10px;
        --header-mobile-padding: 6px 10px;
        --header-mobile-gap: 10px;
        --hero-padding: 40px;
        --hero-mobile-padding: 30px 15px;
    }

    .section-width {
        padding: 0 20px;
        margin: 35px auto;
    }

    .is-layout-flex {
        gap: 14px;
    }

    h3.title {
        font-size: 16px;
        line-height: 45px;
        letter-spacing: -0.16px;
    }

    h3.title img {
        height: 16px;
        margin-right: 6px;
    }

    input, textarea, select {
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 6px;
    }

    .row {
        gap: 12px;
    }
}

/* Mobile Small (480px and below) */
@media (max-width: 480px) {
    :root {
        --header-padding: 6px 10px;
        --header-gap: 8px;
        --header-mobile-padding: 5px 8px;
        --header-mobile-gap: 8px;
        --hero-padding: 30px;
        --hero-mobile-padding: 25px 12px;
    }

    .section-width {
        padding: 0 15px;
        margin: 30px auto;
    }

    .is-layout-flex {
        gap: 12px;
    }

    h3.title {
        font-size: 15px;
        line-height: 40px;
    }

    h3.title img {
        height: 15px;
        margin-right: 5px;
    }

    input, textarea, select {
        padding: 9px 11px;
        font-size: 14px;
    }
}