/* =========================================================
   DIVORX TECH
   MODERN HEADER + FOOTER
   RTL / ARABIC / RESPONSIVE
   DARK / LIGHT THEME
   OPTIMIZED CSS
========================================================= */


/* =========================================================
   ROOT / GLOBAL VARIABLES
========================================================= */

:root {
    --primary: #10b981;
    --primary-dark: #059669;
    --accent: #a3e635;
    --accent-dark: #65a30d;

    --container: 1280px;

    /* Dark */
    --dark-bg: #021a10;
    --dark-bg-2: #052e1b;
    --dark-card: rgba(255, 255, 255, .035);
    --dark-border: rgba(255, 255, 255, .08);

    /* Light */
    --light-bg: #f5faf7;
    --light-bg-2: #ffffff;
    --light-card: rgba(255, 255, 255, .88);
    --light-border: rgba(2, 26, 16, .10);

    /* Shared */
    --white: #ffffff;
    --text: #c4d5ce;
    --muted: #8ba99d;

    --radius-sm: 9px;
    --radius-md: 11px;
    --radius-lg: 16px;
    --radius-xl: 22px;

    --transition-fast: .2s ease;
    --transition: .3s ease;
    --transition-slow: .4s ease;
}


/* =========================================================
   BASE
========================================================= */

html {
    direction: rtl;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font-family: inherit;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   HEADER
========================================================= */

.modern-header {
    position: fixed;
    inset: 0 0 auto;

    z-index: 1000;

    width: 100%;

    direction: rtl;

    background: rgba(2, 26, 16, .78);

    border-bottom: 1px solid rgba(255, 255, 255, .07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.modern-header.scrolled {
    background: rgba(2, 26, 16, .96);

    border-color: rgba(16, 185, 129, .15);

    box-shadow:
        0 15px 50px rgba(0, 0, 0, .30);
}


/* =========================================================
   HEADER CONTAINER
========================================================= */

.modern-header .header-container {
    width: min(calc(100% - 40px), var(--container));

    min-height: 78px;

    margin-inline: auto;

    display: flex;
    align-items: center;

    gap: 25px;
}


/* =========================================================
   BRAND
========================================================= */

.modern-header .brand {
    order: 1;

    display: inline-flex;
    align-items: center;

    flex-direction: row-reverse;

    gap: 11px;

    flex-shrink: 0;

    color: var(--white);

    text-decoration: none;

    transition: transform var(--transition);
}

.modern-header .brand:hover {
    transform: translateY(-2px);
}

.modern-header .brand-info {
    display: flex;
    flex-direction: column;

    text-align: right;

    line-height: 1.1;
}

.modern-header .brand-info strong {
    color: #fff;

    font-size: 21px;
    font-weight: 900;

    letter-spacing: -.5px;
}

.modern-header .brand-info small {
    margin-top: 4px;

    color: var(--accent);

    font-size: 9px;
    font-weight: 700;
}

.modern-header .brand-logo {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    overflow: hidden;

    flex-shrink: 0;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .17),
            rgba(163, 230, 53, .07)
        );

    border: 1px solid rgba(163, 230, 53, .18);

    box-shadow:
        0 8px 25px rgba(16, 185, 129, .12);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.modern-header .brand:hover .brand-logo {
    transform: rotate(-4deg) scale(1.05);

    box-shadow:
        0 12px 35px rgba(16, 185, 129, .22);
}

.modern-header .brand-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    padding: 5px;
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.modern-header .header-actions {
    order: 3;

    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.modern-header .login-btn {
    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding-inline: 15px;

    color: var(--muted);

    border-radius: 10px;

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}

.modern-header .login-btn i {
    color: var(--accent);

    font-size: 12px;

    transition: transform var(--transition);
}

.modern-header .login-btn:hover {
    color: #fff;

    background: rgba(255, 255, 255, .045);

    transform: translateY(-2px);
}

.modern-header .login-btn:hover i {
    transform: translateX(-3px);
}


/* =========================================================
   REGISTER BUTTON
========================================================= */

.modern-header .register-btn {
    min-height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    padding-inline: 17px;

    color: #fff;

    border-radius: 10px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );

    box-shadow:
        0 8px 25px rgba(16, 185, 129, .16);

    font-size: 11px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.modern-header .register-btn i {
    font-size: 10px;

    transition: transform var(--transition);
}

.modern-header .register-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 35px rgba(16, 185, 129, .25);
}

.modern-header .register-btn:hover i {
    transform: translateX(-3px);
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.modern-header .main-nav {
    order: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 3px;

    margin-inline: auto;
}

.modern-header .nav-item {
    position: relative;
}


/* =========================================================
   NAV LINK
========================================================= */

.modern-header .nav-link {
    position: relative;

    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding-inline: 13px;

    color: var(--muted);

    border: 0;
    outline: 0;
    border-radius: 11px;

    background: transparent;

    font-family: inherit;
    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition);
}

.modern-header .nav-link > i {
    color: #78968b;

    font-size: 8px;

    transition:
        color var(--transition),
        transform var(--transition);
}

.modern-header .nav-item:hover > .nav-link,
.modern-header .nav-item.open > .nav-link,
.modern-header .nav-item.active > .nav-link {
    color: #fff;

    background: rgba(16, 185, 129, .07);
}

.modern-header .nav-item:hover > .nav-link > i,
.modern-header .nav-item.open > .nav-link > i,
.modern-header .nav-item.active > .nav-link > i {
    color: var(--accent);
}

.modern-header .nav-item.open > .nav-link > i {
    transform: rotate(180deg);
}


/* =========================================================
   NAV ACTIVE LINE
========================================================= */

.modern-header .nav-link::after {
    content: "";

    position: absolute;

    right: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent)
        );

    transform: translateX(50%);

    transition: width var(--transition);
}

.modern-header .nav-item:hover > .nav-link::after,
.modern-header .nav-item.open > .nav-link::after,
.modern-header .nav-item.active > .nav-link::after {
    width: 20px;
}


/* =========================================================
   DROPDOWN BASE
========================================================= */

.modern-header .mega-menu,
.modern-header .dropdown-menu {
    position: absolute;

    top: calc(100% + 12px);
    right: 50%;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(50%)
        translateY(-8px);

    background:
        linear-gradient(
            145deg,
            rgba(5, 46, 27, .99),
            rgba(2, 26, 16, .99)
        );

    border: 1px solid rgba(16, 185, 129, .16);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .45),
        0 0 40px rgba(16, 185, 129, .05);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast);
}

.modern-header .mega-menu {
    width: 390px;
    padding: 15px;
}

.modern-header .dropdown-menu {
    width: 285px;
    padding: 13px;
}

.modern-header .nav-item.open > .mega-menu,
.modern-header .nav-item.open > .dropdown-menu {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(50%)
        translateY(0);
}


/* =========================================================
   DROPDOWN HEADER
========================================================= */

.modern-header .mega-heading,
.modern-header .dropdown-title {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 8px 7px 14px;

    margin-bottom: 5px;

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

.modern-header .menu-icon {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--accent);

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .16),
            rgba(163, 230, 53, .05)
        );

    border: 1px solid rgba(16, 185, 129, .1);
}

.modern-header .mega-heading strong,
.modern-header .dropdown-title strong {
    display: block;

    color: #fff;

    font-size: 12px;
    font-weight: 900;
}

.modern-header .mega-heading small,
.modern-header .dropdown-title small {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 9px;
}


/* =========================================================
   MEGA MENU
========================================================= */

.modern-header .menu-list {
    display: grid;

    gap: 4px;

    margin-top: 8px;
}

.modern-header .menu-link {
    min-height: 57px;

    display: grid;

    grid-template-columns: 35px 1fr 20px;

    align-items: center;

    gap: 9px;

    padding: 7px 9px;

    color: #fff;

    border-radius: 11px;

    text-decoration: none;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

.modern-header .menu-link:hover {
    background: rgba(16, 185, 129, .08);

    transform: translateX(-3px);
}

.modern-header .menu-link.featured {
    margin-bottom: 4px;

    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .13),
            rgba(163, 230, 53, .035)
        );

    border: 1px solid rgba(16, 185, 129, .13);
}

.modern-header .menu-link-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: var(--accent);

    border-radius: 9px;

    background: rgba(16, 185, 129, .08);

    font-size: 11px;
}

.modern-header .menu-link > span:nth-child(2) {
    min-width: 0;
}

.modern-header .menu-link strong,
.modern-header .menu-link small {
    display: block;
}

.modern-header .menu-link strong {
    color: #e7f2ed;

    font-size: 11px;
}

.modern-header .menu-link small {
    margin-top: 2px;

    color: var(--muted);

    font-size: 8px;
}

.modern-header .menu-link > i:last-child {
    color: #6d9184;

    font-size: 8px;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.modern-header .menu-link:hover > i:last-child {
    color: var(--accent);

    transform: translateX(-3px);
}


/* =========================================================
   NORMAL DROPDOWN
========================================================= */

.modern-header .dropdown-menu > a {
    min-height: 45px;

    display: grid;

    grid-template-columns: 25px 1fr 18px;

    align-items: center;

    gap: 8px;

    padding-inline: 10px;

    color: #c8d8d2;

    border-radius: 10px;

    font-size: 10px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.modern-header .dropdown-menu > a > i:first-child {
    color: var(--accent);

    font-size: 11px;
}

.modern-header .dropdown-menu > a > i:last-child {
    color: #628277;

    font-size: 8px;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.modern-header .dropdown-menu > a:hover {
    color: #fff;

    background: rgba(16, 185, 129, .08);

    transform: translateX(-3px);
}

.modern-header .dropdown-menu > a:hover > i:last-child {
    color: var(--accent);

    transform: translateX(-3px);
}


/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

    color: var(--accent);

    border: 1px solid rgba(255, 255, 255, .09);

    border-radius: 11px;

    background: rgba(255, 255, 255, .035);

    cursor: pointer;

    font-size: 14px;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

.theme-toggle:hover {
    color: #fff;

    background: rgba(16, 185, 129, .10);

    border-color: rgba(16, 185, 129, .30);

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(16, 185, 129, .12);
}

.theme-toggle i {
    transition:
        transform var(--transition-slow),
        color var(--transition);
}

.theme-toggle:hover i {
    transform: rotate(25deg);
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.modern-header .mobile-toggle {
    width: 42px;
    height: 42px;

    display: none;
    place-items: center;

    padding: 0;

    color: #fff;

    border: 1px solid rgba(255, 255, 255, .09);

    border-radius: 11px;

    background: rgba(255, 255, 255, .035);

    font-size: 15px;

    cursor: pointer;

    transition:
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}

.modern-header .mobile-toggle:hover {
    background: rgba(16, 185, 129, .1);

    border-color: rgba(16, 185, 129, .3);

    transform: translateY(-2px);
}


/* =========================================================
   MOBILE HEADER ACTIONS
========================================================= */

.mobile-header-actions {
    display: flex;
    align-items: center;

    gap: 7px;
}

.mobile-header-actions .theme-toggle {
    width: 38px;
    height: 38px;

    font-size: 13px;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {
    position: fixed;

    z-index: 1100;

    top: 0;
    right: 0;

    width: min(390px, 92vw);
    height: 100dvh;

    overflow-y: auto;
    overscroll-behavior: contain;

    direction: rtl;

    background:
        linear-gradient(
            145deg,
            #052e1b,
            #021a10
        );

    border-left: 1px solid rgba(16, 185, 129, .18);

    box-shadow:
        -25px 0 80px rgba(0, 0, 0, .5);

    transform: translateX(105%);

    visibility: hidden;

    transition:
        transform .35s ease,
        visibility .35s ease;
}

.mobile-menu.active {
    transform: translateX(0);

    visibility: visible;
}


/* =========================================================
   MOBILE MENU HEADER
========================================================= */

.mobile-menu-header {
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-inline: 18px;

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

.mobile-brand {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #fff;

    text-decoration: none;
}

.mobile-brand-logo {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 11px;

    background: rgba(16, 185, 129, .1);

    border: 1px solid rgba(16, 185, 129, .18);
}

.mobile-brand-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 4px;
}

.mobile-brand strong,
.mobile-brand small {
    display: block;
}

.mobile-brand strong {
    color: #fff;

    font-size: 14px;
    font-weight: 900;
}

.mobile-brand small {
    color: var(--accent);

    font-size: 8px;
}

.mobile-menu-header > button {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    color: var(--muted);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 10px;

    background: rgba(255, 255, 255, .04);

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition);
}

.mobile-menu-header > button:hover {
    color: #fff;

    background: rgba(239, 68, 68, .1);

    border-color: rgba(239, 68, 68, .25);
}


/* =========================================================
   MOBILE CONTENT
========================================================= */

.mobile-menu-content {
    padding: 20px 16px 35px;
}


/* =========================================================
   MOBILE ACCOUNT
========================================================= */

.mobile-account {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-bottom: 22px;
}

.mobile-login,
.mobile-register {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border-radius: 11px;

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;
}

.mobile-login {
    color: #fff;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);
}

.mobile-login i {
    color: var(--accent);
}

.mobile-register {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );
}


/* =========================================================
   MOBILE NAV
========================================================= */

.mobile-nav {
    display: grid;

    gap: 7px;
}

.mobile-nav-item {
    overflow: hidden;

    border-radius: 13px;

    background: rgba(255, 255, 255, .025);

    border: 1px solid rgba(255, 255, 255, .07);

    transition:
        border-color var(--transition),
        background var(--transition);
}

.mobile-nav-item.active {
    background: rgba(16, 185, 129, .045);

    border-color: rgba(16, 185, 129, .18);
}


/* =========================================================
   MOBILE NAV BUTTON
========================================================= */

.mobile-nav-button {
    width: 100%;
    min-height: 54px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-inline: 15px;

    color: #dbe8e2;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    text-align: right;

    cursor: pointer;
}

.mobile-nav-button > span {
    display: flex;
    align-items: center;

    gap: 10px;
}

.mobile-nav-button > span > i {
    width: 31px;
    height: 31px;

    display: grid;
    place-items: center;

    color: var(--accent);

    border-radius: 9px;

    background: rgba(16, 185, 129, .08);

    font-size: 11px;
}

.mobile-nav-button > i {
    color: #729287;

    font-size: 9px;

    transition:
        transform var(--transition),
        color var(--transition);
}

.mobile-nav-item.active .mobile-nav-button > i {
    color: var(--accent);

    transform: rotate(180deg);
}


/* =========================================================
   MOBILE SUBMENU
========================================================= */

.mobile-submenu {
    display: grid;

    grid-template-rows: 0fr;

    overflow: hidden;

    padding-inline: 10px;

    transition:
        grid-template-rows var(--transition),
        padding var(--transition);
}

.mobile-nav-item.active .mobile-submenu {
    grid-template-rows: 1fr;

    padding-bottom: 10px;
}

.mobile-submenu > * {
    min-height: 0;
}


/* =========================================================
   MOBILE SUB LINKS
========================================================= */

.mobile-submenu a {
    min-height: 43px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding-inline: 10px;

    color: var(--muted);

    border-radius: 9px;

    font-size: 10px;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.mobile-submenu a i {
    width: 22px;

    color: var(--accent);

    text-align: center;

    font-size: 10px;
}

.mobile-submenu a:hover {
    color: #fff;

    background: rgba(16, 185, 129, .08);

    transform: translateX(-3px);
}


/* =========================================================
   MOBILE OVERLAY
========================================================= */

#mobileOverlay {
    position: fixed;

    z-index: 1050;

    inset: 0;

    background: rgba(0, 0, 0, .62);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}

#mobileOverlay.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

body.menu-open {
    overflow: hidden;
}


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

#modernFooter {
    --footer-bg: #021a10;
    --footer-bg-2: #052e1b;
    --footer-primary: #10b981;
    --footer-accent: #a3e635;
    --footer-white: #f4faf7;
    --footer-text: #c4d5ce;
    --footer-muted: #78928a;

    position: relative;

    width: 100%;

    overflow: hidden;

    color: var(--footer-text);

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(16, 185, 129, .11),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 75%,
            rgba(163, 230, 53, .055),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            var(--footer-bg-2) 0%,
            var(--footer-bg) 55%,
            #01150c 100%
        );

    border-top: 1px solid rgba(255, 255, 255, .07);

    direction: rtl;

    isolation: isolate;
}


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

#modernFooter::before {
    content: "";

    position: absolute;

    top: 0;
    left: 5%;
    right: 5%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(16, 185, 129, .6),
            rgba(163, 230, 53, .45),
            rgba(16, 185, 129, .6),
            transparent
        );

    pointer-events: none;
}

#modernFooter::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    bottom: -230px;

    border-radius: 50%;

    background: rgba(16, 185, 129, .055);

    filter: blur(25px);

    pointer-events: none;

    z-index: -1;
}


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

#modernFooter .footer-cta {
    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    min-height: 155px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 28px 32px;

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .13),
            rgba(5, 46, 27, .65) 45%,
            rgba(163, 230, 53, .045)
        );

    border: 1px solid rgba(16, 185, 129, .18);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .035);

    transform: translateY(-35px);
}


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

#modernFooter .footer-cta-content {
    display: flex;
    align-items: center;

    gap: 18px;

    min-width: 0;
}

#modernFooter .cta-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--footer-accent);

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .18),
            rgba(163, 230, 53, .08)
        );

    border: 1px solid rgba(163, 230, 53, .18);

    box-shadow:
        0 12px 30px rgba(16, 185, 129, .1);

    font-size: 21px;
}

#modernFooter .cta-text > span {
    display: block;

    margin-bottom: 5px;

    color: var(--footer-accent);

    font-size: 10px;
    font-weight: 800;
}

#modernFooter .cta-text h2 {
    margin: 0;

    color: var(--footer-white);

    font-size: clamp(18px, 2vw, 25px);
    font-weight: 900;

    line-height: 1.5;
}

#modernFooter .cta-text h2 strong {
    color: var(--footer-accent);
}

#modernFooter .cta-text p {
    margin: 5px 0 0;

    color: var(--footer-muted);

    font-size: 10px;

    line-height: 1.8;
}


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

#modernFooter .cta-actions {
    display: flex;
    align-items: center;

    gap: 9px;

    flex-shrink: 0;
}

#modernFooter .cta-primary,
#modernFooter .cta-secondary {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    padding-inline: 17px;

    border-radius: 11px;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;

    text-decoration: none;

    transition:
        transform var(--transition),
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

#modernFooter .cta-primary {
    color: #021a10;

    background:
        linear-gradient(
            135deg,
            var(--footer-primary),
            var(--footer-accent)
        );

    box-shadow:
        0 8px 25px rgba(16, 185, 129, .18);
}

#modernFooter .cta-primary:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 35px rgba(16, 185, 129, .25);
}

#modernFooter .cta-primary i {
    font-size: 9px;

    transition: transform var(--transition);
}

#modernFooter .cta-primary:hover i {
    transform: translateX(-4px);
}

#modernFooter .cta-secondary {
    color: var(--footer-text);

    background: rgba(255, 255, 255, .035);

    border: 1px solid rgba(255, 255, 255, .09);
}

#modernFooter .cta-secondary:hover {
    color: var(--footer-white);

    background: rgba(255, 255, 255, .065);

    border-color: rgba(16, 185, 129, .3);

    transform: translateY(-3px);
}


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

#modernFooter .footer-main {
    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: -5px auto 0;

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr
        1.25fr;

    gap: 35px;

    padding-bottom: 50px;
}


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

#modernFooter .footer-brand {
    min-width: 0;
}

#modernFooter .footer-logo {
    display: inline-flex;
    align-items: center;

    margin-bottom: 17px;

    text-decoration: none;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

#modernFooter .footer-logo:hover {
    transform: translateY(-3px);
}

#modernFooter .footer-logo-image {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .16),
            rgba(163, 230, 53, .06)
        );

    border: 1px solid rgba(163, 230, 53, .18);

    box-shadow:
        0 10px 30px rgba(16, 185, 129, .1);
}

#modernFooter .footer-logo-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 6px;
}

#modernFooter .footer-brand > p {
    max-width: 310px;

    margin: 0 0 20px;

    color: var(--footer-muted);

    font-size: 11px;

    line-height: 2;
}


/* =========================================================
   SOCIAL
========================================================= */

#modernFooter .footer-social {
    display: flex;
    align-items: center;

    gap: 7px;

    direction: ltr;
}

#modernFooter .footer-social a {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    color: var(--footer-muted);

    border-radius: 10px;

    background: rgba(255, 255, 255, .035);

    border: 1px solid rgba(255, 255, 255, .08);

    text-decoration: none;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}

#modernFooter .footer-social a:hover {
    color: var(--footer-white);

    background: rgba(16, 185, 129, .11);

    border-color: rgba(16, 185, 129, .32);

    transform: translateY(-4px);

    box-shadow:
        0 10px 25px rgba(16, 185, 129, .1);
}


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

#modernFooter .footer-column {
    min-width: 0;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
}

#modernFooter .footer-column h3 {
    position: relative;

    display: flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin: 0 0 19px;

    padding-bottom: 9px;

    color: var(--footer-white);

    font-size: 12px;
    font-weight: 900;
}

#modernFooter .footer-column h3::after {
    content: "";

    position: absolute;

    right: 0;
    bottom: 0;

    width: 25px;
    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--footer-primary),
            var(--footer-accent)
        );
}

#modernFooter .footer-column h3 i {
    color: var(--footer-accent);

    font-size: 11px;
}


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

#modernFooter .footer-column > a:not(.contact-item) {
    position: relative;

    display: inline-flex;
    align-items: center;

    width: fit-content;

    min-height: 31px;

    color: var(--footer-muted);

    font-size: 10px;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

#modernFooter .footer-column > a:not(.contact-item)::before {
    content: "";

    width: 0;
    height: 1px;

    margin-left: 0;

    background: var(--footer-accent);

    transition:
        width var(--transition-fast),
        margin var(--transition-fast);
}

#modernFooter .footer-column > a:not(.contact-item):hover {
    color: var(--footer-white);

    transform: translateX(-4px);
}

#modernFooter .footer-column > a:not(.contact-item):hover::before {
    width: 12px;

    margin-left: 7px;
}


/* =========================================================
   CONTACT
========================================================= */

#modernFooter .contact-column {
    align-items: stretch;
}

#modernFooter .contact-item {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: var(--footer-text);

    font-size: 10px;

    line-height: 1.6;

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

#modernFooter .contact-item:hover {
    color: var(--footer-white);

    transform: translateX(-3px);
}

#modernFooter .contact-icon {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    color: var(--footer-accent);

    border-radius: 9px;

    background: rgba(16, 185, 129, .08);

    border: 1px solid rgba(16, 185, 129, .09);

    font-size: 10px;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}

#modernFooter .contact-item:hover .contact-icon {
    background: rgba(16, 185, 129, .15);

    transform: scale(1.05);
}

#modernFooter .contact-item > span:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    color: #cbdad5;
}

#modernFooter .contact-item small {
    display: block;

    margin-bottom: 1px;

    color: var(--footer-muted);

    font-size: 8px;
}


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

#modernFooter .footer-bottom {
    position: relative;

    z-index: 2;

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 0 auto;

    padding: 20px 0 22px;

    border-top: 1px solid rgba(255, 255, 255, .07);
}

#modernFooter .footer-bottom-inner {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

#modernFooter .footer-bottom p {
    margin: 0;

    color: var(--footer-muted);

    font-size: 9px;

    line-height: 1.8;
}

#modernFooter .footer-bottom-links {
    display: flex;
    align-items: center;

    gap: 18px;
}

#modernFooter .footer-bottom-links a {
    color: var(--footer-muted);

    font-size: 9px;

    text-decoration: none;

    transition: color var(--transition-fast);
}

#modernFooter .footer-bottom-links a:hover {
    color: var(--footer-white);
}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"] {
    color-scheme: light;
}


/* =========================================================
   LIGHT HEADER
========================================================= */

html[data-theme="light"] .modern-header {
    background: rgba(255, 255, 255, .82);

    border-bottom-color: rgba(2, 26, 16, .09);

    box-shadow:
        0 10px 40px rgba(2, 26, 16, .06);
}

html[data-theme="light"] .modern-header.scrolled {
    background: rgba(255, 255, 255, .96);

    border-color: rgba(16, 185, 129, .18);

    box-shadow:
        0 15px 50px rgba(2, 26, 16, .10);
}


/* =========================================================
   LIGHT BRAND
========================================================= */

html[data-theme="light"] .modern-header .brand-info strong {
    color: #062719;
}

html[data-theme="light"] .modern-header .brand-info small {
    color: #059669;
}

html[data-theme="light"] .modern-header .brand-logo {
    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .12),
            rgba(163, 230, 53, .10)
        );

    border-color: rgba(16, 185, 129, .18);

    box-shadow:
        0 8px 25px rgba(16, 185, 129, .10);
}


/* =========================================================
   LIGHT NAV
========================================================= */

html[data-theme="light"] .modern-header .nav-link {
    color: #557067;
}

html[data-theme="light"] .modern-header .nav-link > i {
    color: #78958b;
}

html[data-theme="light"] .modern-header .nav-item:hover > .nav-link,
html[data-theme="light"] .modern-header .nav-item.open > .nav-link,
html[data-theme="light"] .modern-header .nav-item.active > .nav-link {
    color: #063522;

    background: rgba(16, 185, 129, .08);
}


/* =========================================================
   LIGHT LOGIN
========================================================= */

html[data-theme="light"] .modern-header .login-btn {
    color: #557067;
}

html[data-theme="light"] .modern-header .login-btn:hover {
    color: #063522;

    background: rgba(16, 185, 129, .06);
}


/* =========================================================
   LIGHT THEME TOGGLE
========================================================= */

html[data-theme="light"] .theme-toggle {
    color: #059669;

    background: rgba(16, 185, 129, .07);

    border-color: rgba(16, 185, 129, .16);
}

html[data-theme="light"] .theme-toggle:hover {
    color: #047857;

    background: rgba(16, 185, 129, .13);
}


/* =========================================================
   LIGHT DROPDOWNS
========================================================= */

html[data-theme="light"] .modern-header .mega-menu,
html[data-theme="light"] .modern-header .dropdown-menu {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .99),
            rgba(245, 250, 247, .99)
        );

    border-color: rgba(16, 185, 129, .16);

    box-shadow:
        0 25px 70px rgba(2, 26, 16, .14),
        0 0 40px rgba(16, 185, 129, .05);
}

html[data-theme="light"] .modern-header .mega-heading,
html[data-theme="light"] .modern-header .dropdown-title {
    border-bottom-color: rgba(2, 26, 16, .08);
}

html[data-theme="light"] .modern-header .mega-heading strong,
html[data-theme="light"] .modern-header .dropdown-title strong {
    color: #063522;
}

html[data-theme="light"] .modern-header .mega-heading small,
html[data-theme="light"] .modern-header .dropdown-title small {
    color: #6b857b;
}

html[data-theme="light"] .modern-header .menu-link {
    color: #063522;
}

html[data-theme="light"] .modern-header .menu-link:hover {
    background: rgba(16, 185, 129, .07);
}

html[data-theme="light"] .modern-header .menu-link.featured {
    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .10),
            rgba(163, 230, 53, .05)
        );

    border-color: rgba(16, 185, 129, .13);
}

html[data-theme="light"] .modern-header .menu-link strong {
    color: #123d2d;
}

html[data-theme="light"] .modern-header .menu-link small {
    color: #718a80;
}

html[data-theme="light"] .modern-header .menu-link > i:last-child {
    color: #7a958c;
}

html[data-theme="light"] .modern-header .dropdown-menu > a {
    color: #45675a;
}

html[data-theme="light"] .modern-header .dropdown-menu > a > i:last-child {
    color: #79938a;
}

html[data-theme="light"] .modern-header .dropdown-menu > a:hover {
    color: #063522;

    background: rgba(16, 185, 129, .07);
}


/* =========================================================
   LIGHT MOBILE MENU
========================================================= */

html[data-theme="light"] .mobile-menu {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3faf6
        );

    border-left-color: rgba(16, 185, 129, .18);

    box-shadow:
        -25px 0 80px rgba(2, 26, 16, .18);
}

html[data-theme="light"] .mobile-menu-header {
    border-bottom-color: rgba(2, 26, 16, .08);
}

html[data-theme="light"] .mobile-brand strong {
    color: #063522;
}

html[data-theme="light"] .mobile-brand small {
    color: #059669;
}

html[data-theme="light"] .mobile-menu-header > button {
    color: #607d72;

    background: rgba(2, 26, 16, .035);

    border-color: rgba(2, 26, 16, .08);
}

html[data-theme="light"] .mobile-nav-item {
    background: rgba(2, 26, 16, .025);

    border-color: rgba(2, 26, 16, .08);
}

html[data-theme="light"] .mobile-nav-item.active {
    background: rgba(16, 185, 129, .055);

    border-color: rgba(16, 185, 129, .18);
}

html[data-theme="light"] .mobile-nav-button {
    color: #244b3b;
}

html[data-theme="light"] .mobile-nav-button > i {
    color: #718b81;
}

html[data-theme="light"] .mobile-submenu a {
    color: #658077;
}

html[data-theme="light"] .mobile-submenu a:hover {
    color: #063522;

    background: rgba(16, 185, 129, .07);
}

html[data-theme="light"] .mobile-login {
    color: #244b3b;

    background: rgba(2, 26, 16, .035);

    border-color: rgba(2, 26, 16, .08);
}


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

html[data-theme="light"] #modernFooter {
    --footer-bg: #eef8f3;
    --footer-bg-2: #ffffff;

    --footer-primary: #059669;
    --footer-accent: #65a30d;

    --footer-white: #063522;

    --footer-text: #45675a;
    --footer-muted: #708980;

    color: var(--footer-text);

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(16, 185, 129, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 75%,
            rgba(163, 230, 53, .07),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            var(--footer-bg-2) 0%,
            var(--footer-bg) 55%,
            #e6f3ed 100%
        );

    border-top-color: rgba(2, 26, 16, .08);
}


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

html[data-theme="light"] #modernFooter .footer-cta {
    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .10),
            rgba(255, 255, 255, .90) 45%,
            rgba(163, 230, 53, .07)
        );

    border-color: rgba(16, 185, 129, .18);

    box-shadow:
        0 25px 70px rgba(2, 26, 16, .10),
        inset 0 1px 0 rgba(255, 255, 255, .8);
}

html[data-theme="light"] #modernFooter .cta-text h2 {
    color: #063522;
}

html[data-theme="light"] #modernFooter .cta-text p {
    color: #718980;
}

html[data-theme="light"] #modernFooter .cta-secondary {
    color: #45675a;

    background: rgba(2, 26, 16, .035);

    border-color: rgba(2, 26, 16, .10);
}

html[data-theme="light"] #modernFooter .cta-secondary:hover {
    color: #063522;

    background: rgba(16, 185, 129, .07);

    border-color: rgba(16, 185, 129, .25);
}


/* =========================================================
   LIGHT FOOTER BRAND
========================================================= */

html[data-theme="light"] #modernFooter .footer-logo-image {
    background:
        linear-gradient(
            135deg,
            rgba(16, 185, 129, .10),
            rgba(163, 230, 53, .07)
        );

    border-color: rgba(16, 185, 129, .18);
}

html[data-theme="light"] #modernFooter .footer-brand > p {
    color: #718980;
}


/* =========================================================
   LIGHT SOCIAL
========================================================= */

html[data-theme="light"] #modernFooter .footer-social a {
    color: #708980;

    background: rgba(2, 26, 16, .035);

    border-color: rgba(2, 26, 16, .09);
}

html[data-theme="light"] #modernFooter .footer-social a:hover {
    color: #063522;

    background: rgba(16, 185, 129, .10);

    border-color: rgba(16, 185, 129, .28);
}


/* =========================================================
   LIGHT FOOTER COLUMNS
========================================================= */

html[data-theme="light"] #modernFooter .footer-column h3 {
    color: #063522;
}

html[data-theme="light"] #modernFooter .footer-column > a:not(.contact-item) {
    color: #708980;
}

html[data-theme="light"] #modernFooter .footer-column > a:not(.contact-item):hover {
    color: #063522;
}

html[data-theme="light"] #modernFooter .contact-item {
    color: #45675a;
}

html[data-theme="light"] #modernFooter .contact-item:hover {
    color: #063522;
}

html[data-theme="light"] #modernFooter .contact-icon {
    background: rgba(16, 185, 129, .08);

    border-color: rgba(16, 185, 129, .12);
}

html[data-theme="light"] #modernFooter .contact-item small {
    color: #7b9189;
}

html[data-theme="light"] #modernFooter .contact-item > span:last-child {
    color: #45675a;
}


/* =========================================================
   LIGHT FOOTER BOTTOM
========================================================= */

html[data-theme="light"] #modernFooter .footer-bottom {
    border-top-color: rgba(2, 26, 16, .08);
}

html[data-theme="light"] #modernFooter .footer-bottom p,
html[data-theme="light"] #modernFooter .footer-bottom-links a {
    color: #789089;
}

html[data-theme="light"] #modernFooter .footer-bottom-links a:hover {
    color: #063522;
}


/* =========================================================
   THEME TRANSITION
========================================================= */

html.theme-changing *,
html.theme-changing *::before,
html.theme-changing *::after {
    transition:
        background-color .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease !important;
}


/* =========================================================
   RESPONSIVE - 1100px
========================================================= */

@media (max-width: 1100px) {

    .modern-header .header-container {
        gap: 15px;
    }

    .modern-header .main-nav {
        gap: 0;
    }

    .modern-header .nav-link {
        padding-inline: 9px;

        font-size: 11px;
    }

    .modern-header .login-btn {
        padding-inline: 9px;
    }

    .modern-header .register-btn {
        padding-inline: 13px;
    }

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

        gap: 30px;
    }

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

    #modernFooter .footer-brand > p {
        max-width: 520px;
    }
}


/* =========================================================
   RESPONSIVE - 900px
========================================================= */

@media (max-width: 900px) {

    .modern-header .header-container {
        min-height: 70px;
    }

    .modern-header .main-nav {
        display: none;
    }

    .modern-header .mobile-toggle {
        display: grid;
    }

    .modern-header .brand {
        order: 2;
    }

    .modern-header .header-actions {
        order: 1;

        margin-inline-start: auto;
    }

    .modern-header .login-btn {
        display: none;
    }

    .modern-header .register-btn {
        min-height: 40px;

        padding-inline: 14px;
    }

    .modern-header .theme-toggle {
        width: 40px;
        height: 40px;
    }

    #modernFooter .footer-cta {
        flex-direction: column;

        align-items: stretch;

        text-align: center;

        padding: 25px 22px;

        gap: 20px;
    }

    #modernFooter .footer-cta-content {
        justify-content: center;
    }

    #modernFooter .cta-text {
        text-align: right;
    }

    #modernFooter .cta-actions {
        justify-content: center;
    }

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

        gap: 35px 25px;
    }

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


/* =========================================================
   RESPONSIVE - 600px
========================================================= */

@media (max-width: 600px) {

    .modern-header .header-container {
        width: calc(100% - 28px);

        min-height: 65px;

        gap: 8px;
    }

    .modern-header .brand {
        gap: 8px;
    }

    .modern-header .brand-info strong {
        font-size: 17px;
    }

    .modern-header .brand-info small {
        font-size: 8px;
    }

    .modern-header .brand-logo {
        width: 39px;
        height: 39px;

        border-radius: 10px;
    }

    .modern-header .register-btn {
        min-height: 38px;

        padding-inline: 11px;

        font-size: 10px;
    }

    .modern-header .register-btn i {
        display: none;
    }

    .modern-header .mobile-toggle {
        width: 38px;
        height: 38px;
    }

    .modern-header .theme-toggle {
        width: 38px;
        height: 38px;

        font-size: 13px;
    }

    .mobile-menu {
        width: min(370px, 94vw);
    }

    #modernFooter .footer-cta {
        width: calc(100% - 28px);

        transform: translateY(-25px);

        border-radius: 18px;
    }

    #modernFooter .footer-cta-content {
        align-items: flex-start;
    }

    #modernFooter .cta-icon {
        width: 48px;
        height: 48px;

        border-radius: 13px;

        font-size: 17px;
    }

    #modernFooter .cta-text h2 {
        font-size: 17px;
    }

    #modernFooter .cta-text p {
        font-size: 9px;
    }

    #modernFooter .cta-actions {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    #modernFooter .cta-primary,
    #modernFooter .cta-secondary {
        width: 100%;
    }

    #modernFooter .footer-main {
        width: calc(100% - 28px);

        grid-template-columns: 1fr 1fr;

        gap: 30px 20px;

        margin-top: 0;

        padding-bottom: 35px;
    }

    #modernFooter .footer-brand {
        grid-column: 1 / -1;

        text-align: center;
    }

    #modernFooter .footer-brand > p {
        margin-inline: auto;
    }

    #modernFooter .footer-social {
        justify-content: center;
    }

    #modernFooter .footer-column {
        align-items: flex-start;
    }

    #modernFooter .footer-bottom {
        width: calc(100% - 28px);
    }

    #modernFooter .footer-bottom-inner {
        flex-direction: column;

        text-align: center;

        gap: 12px;
    }

    #modernFooter .footer-bottom-links {
        justify-content: center;

        flex-wrap: wrap;

        gap: 8px 16px;
    }
}


/* =========================================================
   RESPONSIVE - 480px
========================================================= */

@media (max-width: 480px) {

    #modernFooter .footer-cta-content {
        flex-direction: column;

        align-items: center;

        gap: 12px;
    }

    #modernFooter .cta-text {
        text-align: center;
    }

    #modernFooter .cta-text p {
        max-width: 290px;

        margin-inline: auto;
    }

    #modernFooter .cta-actions {
        grid-template-columns: 1fr;
    }

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

        gap: 28px;
    }

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

    #modernFooter .footer-column {
        width: 100%;
    }

    #modernFooter .footer-column h3 {
        margin-bottom: 14px;
    }

    #modernFooter .footer-column > a:not(.contact-item) {
        min-height: 29px;
    }

    #modernFooter .contact-column {
        width: 100%;
    }

    #modernFooter .contact-item {
        min-height: 46px;
    }
}


/* =========================================================
   VERY SMALL - 420px
========================================================= */

@media (max-width: 420px) {

    .modern-header .brand-info {
        display: none;
    }

    .modern-header .brand-logo {
        width: 40px;
        height: 40px;
    }

    .mobile-account {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   VERY SMALL - 360px
========================================================= */

@media (max-width: 360px) {

    .modern-header .header-container {
        width: calc(100% - 20px);
    }

    .modern-header .register-btn {
        padding-inline: 9px;
    }

    #modernFooter .footer-cta {
        width: calc(100% - 20px);

        padding-inline: 16px;
    }

    #modernFooter .footer-main,
    #modernFooter .footer-bottom {
        width: calc(100% - 20px);
    }

    #modernFooter .footer-social a {
        width: 34px;
        height: 34px;
    }

    #modernFooter .footer-logo-image {
        width: 52px;
        height: 52px;
    }
}


/* =========================================================
   ACCESSIBILITY / FOCUS
========================================================= */

.modern-header a:focus-visible,
.modern-header button:focus-visible,
.mobile-menu a:focus-visible,
.mobile-menu button:focus-visible,
#modernFooter a:focus-visible,
#modernFooter button:focus-visible {
    outline: 2px solid var(--accent);

    outline-offset: 3px;

    border-radius: 8px;
}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    .modern-header *,
    .modern-header *::before,
    .modern-header *::after,
    .mobile-menu *,
    .mobile-menu *::before,
    .mobile-menu *::after,
    #mobileOverlay,
    #modernFooter *,
    #modernFooter *::before,
    #modernFooter *::after {
        transition: none !important;

        animation: none !important;
    }
}