/* ======
============------> Responsive-Css
====== */


/* ======
============------> Extra-Large-Screens
============------> 1400px and below
====== */
@media only screen and (max-width: 1399.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(2.25rem, 4vw, var(--text-4xl)); /* 36px to 42px */
        --heading-h2: clamp(1.875rem, 3.5vw, var(--text-3xl)); /* 30px to 36px */
        --heading-h3: clamp(1.5rem, 3vw, var(--text-2xl)); /* 24px to 30px */
        --heading-h4: clamp(1.25rem, 2.5vw, var(--text-xl)); /* 20px to 24px */
        --heading-h5: clamp(1.125rem, 2vw, var(--text-lg)); /* 18px to 20px */
        --heading-h6: var(--text-base); /* 16px */
    }

}


/* ======
============------> Large-Screens
============------> 1200px and below
====== */
@media only screen and (max-width: 1199.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(2.125rem, 4vw, 2.5rem); /* 34px to 40px */
        --heading-h2: clamp(1.75rem, 3.5vw, 2.125rem); /* 28px to 34px */
        --heading-h3: clamp(1.5rem, 3vw, 1.75rem); /* 24px to 28px */
        --heading-h4: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px to 24px */
        --heading-h5: clamp(1.125rem, 2vw, 1.25rem); /* 18px to 20px */
        --heading-h6: var(--text-base); /* 16px */
    }

    svg {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
    }

}


/* ======
============------> Medium-Screens
============------> 992px and below
====== */
@media only screen and (max-width: 991.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.875rem, 4vw, 2.25rem); /* 30px to 36px */
        --heading-h2: clamp(1.625rem, 3.5vw, 2rem); /* 26px to 32px */
        --heading-h3: clamp(1.375rem, 3vw, 1.625rem); /* 22px to 26px */
        --heading-h4: clamp(1.25rem, 2.5vw, 1.375rem); /* 20px to 22px */
        --heading-h5: clamp(1.0625rem, 2vw, 1.1875rem); /* 17px to 19px */
        --heading-h6: var(--text-base); /* 16px */

        /* === Body Text Scale === */
        --body-text: 0.9375rem; /* 15px */
        --small-text: 0.875rem; /* 14px */
        --caption-text: 0.75rem; /* 12px */
        --overline-text: 0.625rem; /* 10px */
    }

    header {
        z-index: 9999;
    }

}


/* ======
============------> Tablet-Screens
============------> 768px and below
====== */
@media only screen and (max-width: 767.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.75rem, 6vw, 2rem); /* 28px to 32px */
        --heading-h2: clamp(1.5rem, 5vw, 1.75rem); /* 24px to 28px */
        --heading-h3: clamp(1.25rem, 4vw, 1.5rem); /* 20px to 24px */
        --heading-h4: clamp(1.125rem, 3vw, 1.25rem); /* 18px to 20px */
        --heading-h5: clamp(1rem, 2.5vw, 1.125rem); /* 16px to 18px */
        --heading-h6: 0.9375rem; /* 15px */

        /* === Body Text Scale === */
        --body-text: 0.9375rem; /* 15px */
        --small-text: 0.8125rem; /* 13px */
        --caption-text: 0.75rem; /* 12px */
        --overline-text: 0.625rem; /* 10px */
    }

    body :where(h1, h2, h3, h4, h5, h6, p) {
        line-height: var(--leading-normal) !important;
    }

    svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
    }

}


/* ======
============------> Mobile-Screens
============------> 576px and below
====== */
@media only screen and (max-width: 575.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.625rem, 7vw, 1.875rem); /* 26px to 30px */
        --heading-h2: clamp(1.375rem, 6vw, 1.625rem); /* 22px to 26px */
        --heading-h3: clamp(1.1875rem, 5vw, 1.375rem); /* 19px to 22px */
        --heading-h4: clamp(1.0625rem, 4vw, 1.1875rem); /* 17px to 19px */
        --heading-h5: 1rem; /* 16px */
        --heading-h6: 0.9375rem; /* 15px */

        /* === Body Text Scale === */
        --body-text: 0.875rem; /* 14px */
        --small-text: 0.8125rem; /* 13px */
        --caption-text: 0.6875rem; /* 11px */
        --overline-text: 0.625rem; /* 10px */
    }

    html,
    body {
        overflow-x: hidden;
    }

    body :where(a, button, input, textarea, select, option) {
        font-size: var(--small-text) !important;
    }

    .web_imagebox {
        min-height: 16px;
    }

}


/* ======
============------> Small-Mobile-Screens
============------> 480px and below
====== */
@media only screen and (max-width: 479.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.5rem, 7vw, 1.75rem); /* 24px to 28px */
        --heading-h2: clamp(1.25rem, 6vw, 1.5rem); /* 20px to 24px */
        --heading-h3: clamp(1.125rem, 5vw, 1.25rem); /* 18px to 20px */
        --heading-h4: 1.0625rem; /* 17px */
        --heading-h5: 1rem; /* 16px */
        --heading-h6: 0.875rem; /* 14px */

        /* === Body Text Scale === */
        --body-text: 0.875rem; /* 14px */
        --small-text: 0.8125rem; /* 13px */
        --caption-text: 0.6875rem; /* 11px */
        --overline-text: 0.625rem; /* 10px */
    }

    svg {
        width: 15px;
        height: 15px;
        flex: 0 0 15px;
    }

}


/* ======
============------> Extra-Small-Mobile-Screens
============------> 390px and below
====== */
@media only screen and (max-width: 389.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: clamp(1.375rem, 7vw, 1.625rem); /* 22px to 26px */
        --heading-h2: clamp(1.1875rem, 6vw, 1.375rem); /* 19px to 22px */
        --heading-h3: clamp(1.0625rem, 5vw, 1.1875rem); /* 17px to 19px */
        --heading-h4: 1rem; /* 16px */
        --heading-h5: 0.9375rem; /* 15px */
        --heading-h6: 0.875rem; /* 14px */

        /* === Body Text Scale === */
        --body-text: 0.8125rem; /* 13px */
        --small-text: 0.75rem; /* 12px */
        --caption-text: 0.6875rem; /* 11px */
        --overline-text: 0.625rem; /* 10px */
    }

}


/* ======
============------> Very-Small-Mobile-Screens
============------> 360px and below
====== */
@media only screen and (max-width: 359.98px) {

    :root {
        /* === Responsive Heading Scale === */
        --heading-h1: 1.375rem; /* 22px */
        --heading-h2: 1.1875rem; /* 19px */
        --heading-h3: 1.0625rem; /* 17px */
        --heading-h4: 1rem; /* 16px */
        --heading-h5: 0.9375rem; /* 15px */
        --heading-h6: 0.875rem; /* 14px */

        /* === Body Text Scale === */
        --body-text: 0.8125rem; /* 13px */
        --small-text: 0.75rem; /* 12px */
        --caption-text: 0.6875rem; /* 11px */
        --overline-text: 0.625rem; /* 10px */
    }

    svg {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
    }

}