/* ==================== [ 1200px ] ==================== */
@media (min-width: 1200px) {

    /* ==================== [ Header Start ] ==================== */
    .header .mega-menu {
        width: 100%;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 0 !important;
        padding: 40px 0;
        border-radius: 0;

        display: block;
        pointer-events: none;
        opacity: 0;
        transform: translateY(20px);
        visibility: hidden;
        animation: megaMenuOut 0.25s ease forwards;
    }

    .header .mega-dropdown.show .mega-menu,
    .header .mega-dropdown .dropdown-menu.show {
        pointer-events: auto;
        animation: megaMenuIn 0.25s ease forwards;
    }

    /* ==================== [ Header End ] ==================== */
}

/* ==================== [ 1500px ] ==================== */
@media (min-width: 1500px) {

    /* ==================== [ Common Start ] ==================== */
    .container-fluid,
    .container {
        max-width: calc(var(--container) + (var(--container-padding) * 2));
    }

    /* ==================== [ Common End ] ==================== */
}

/* ==================== [ 1399px ] ==================== */
@media (max-width: 1399px) {

    /* ==================== [ Headings Start ] ==================== */
    :root {
        --h1-fs: 58px;
        --h2-fs: 46px;
        --h3-fs: 38px;
        --h4-fs: 30px;
        --h5-fs: 22px;
        --h6-fs: 18px;
    }

    /* ==================== [ Headings End ] ==================== */
}

/* ==================== [ 1199px ] ==================== */
@media (max-width: 1199px) {

    /* ==================== [ Headings Start ] ==================== */
    :root {
        --h1-fs: 52px;
        --h1-lh: 118%;
        --h1-ls: -1px;

        --h2-fs: 42px;
        --h2-lh: 118%;
        --h2-ls: -0.8px;

        --h3-fs: 34px;
        --h3-lh: 122%;
        --h3-ls: -0.6px;

        --h4-fs: 28px;
        --h4-lh: 128%;
        --h4-ls: -0.4px;
    }

    /* ==================== [ Headings End ] ==================== */

    /* ==================== [ Header Start ] ==================== */
    .header .navbar .navbar-nav {
        align-items: flex-start;
        width: 100%;
        gap: 0;
    }

    .header .navbar .navbar-nav .nav-item {
        width: 100%;
    }

    .header .navbar .navbar-nav .nav-item .nav-link {
        padding: 16px 0;
        border-bottom: 1px solid var(--border);
        width: 100%;
        justify-content: space-between;
    }

    .header .navbar .navbar-nav .nav-item .nav-link [class*="arrow"] {
        transform: rotate(-90deg);
    }

    .header .mega-menu {
        width: 100%;
        padding: 0;
        border: none;
        box-shadow: none !important;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        animation: none;
        pointer-events: auto;
    }

    .header .mega-dropdown.show .mega-menu,
    .header .mega-dropdown .dropdown-menu.show {
        display: block;
    }

    /* ==================== [ Header End ] ==================== */
}

/* ==================== [ 991px ] ==================== */
@media (max-width: 991px) {

    /* ==================== [ Headings Start ] ==================== */
    :root {
        --h1-fs: 44px;
        --h1-lh: 120%;
        --h1-ls: -0.8px;

        --h2-fs: 36px;
        --h2-lh: 120%;
        --h2-ls: -0.6px;

        --h3-fs: 30px;
        --h3-lh: 125%;
        --h3-ls: -0.4px;

        --h4-fs: 26px;
        --h4-lh: 130%;
        --h4-ls: -0.3px;

        --h5-fs: 20px;
        --h5-lh: 135%;
        --h5-ls: -0.2px;
    }

    /* ==================== [ Headings End ] ==================== */
}

/* ==================== [ 767px ] ==================== */
@media (max-width: 767px) {

    /* ==================== [ Headings Start ] ==================== */
    :root {
        --h1-fs: 36px;
        --h1-lh: 125%;
        --h1-ls: -0.6px;

        --h2-fs: 30px;
        --h2-lh: 125%;
        --h2-ls: -0.4px;

        --h3-fs: 26px;
        --h3-lh: 130%;
        --h3-ls: -0.3px;

        --h4-fs: 22px;
        --h4-lh: 135%;
        --h4-ls: -0.2px;

        --h5-fs: 20px;
        --h5-lh: 140%;
        --h5-ls: -0.1px;

        --h6-fs: 18px;
        --h6-lh: 145%;
        --h6-ls: 0;
    }

    /* ==================== [ Headings End ] ==================== */
}

/* ==================== [ 575px ] ==================== */
@media (max-width: 575px) {}