@font-face {
    font-family: 'myFont';
    src: url('../fonts/abar.OTF') format('opentype');
    font-display: swap;
}




/* =========================================================
   GLOBAL RED THEME
   تم اصلی تمام صفحات
========================================================= */

:root {

    /* ================= BACKGROUND ================= */
    --bg: #080a0d;
    --bg-soft: #0d1014;
    --bg-card: #11151a;
    --bg-card-2: #15191f;

    /* ================= PRIMARY RED ================= */
    --primary: #d71920;
    --primary-light: #ef3340;
    --primary-bright: #ff4654;
    --primary-dark: #a90f15;

    /* ================= RED EFFECTS ================= */
    --primary-soft: rgba(215, 25, 32, .10);
    --primary-glow: rgba(215, 25, 32, .22);
    --primary-border: rgba(215, 25, 32, .25);
    --primary-hover: rgba(215, 25, 32, .14);

    /* ================= TEXT ================= */
    --text: #ffffff;
    --text-soft: #d4d6d9;
    --muted: #8b9199;
    --muted-dark: #777d85;

    /* ================= BORDER ================= */
    --border: rgba(255, 255, 255, .07);
    --border-light: rgba(255, 255, 255, .11);

    /* ================= RADIUS ================= */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 24px;

    /* ================= SHADOW ================= */
    --shadow-sm: 0 6px 20px rgba(0, 0, 0, .20);
    --shadow-md: 0 12px 35px rgba(0, 0, 0, .30);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .45);

    /* ================= TRANSITION ================= */
    --transition-fast: .2s ease;
    --transition: .3s ease;
}
/* =========================
   ROOT
========================= */

:root {
    --bg: #0d0d11;
    --bg-soft: #15151b;
    --card: rgba(255, 255, 255, 0.055);

    --red: #ef3340;
    --red-light: #ff5661;
    --red-dark: #b91f2b;

    --text: #ffffff;
    --text-soft: #a8abb3;

    --border: rgba(255,255,255,.09);

    --shadow:
        0 15px 45px rgba(0,0,0,.45);

    --glass:
        rgba(18,18,24,.82);
}


/* =========================
   RESET
========================= */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    min-height: 100%;
}

body {
    font-family: 'myFont', sans-serif;
    font-size: 14px;

    min-height: 100vh;

    display: flex;
    flex-direction: column;

    color: var(--text);

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(239,51,64,.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(239,51,64,.055),
            transparent 30%
        ),
        var(--bg);

    background-attachment: fixed;

    position: relative;
    z-index: 1;

    overflow-x: hidden;
}


/* نور بسیار ظریف پس‌زمینه */

body::before {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            rgba(255,255,255,.012) 50%,
            transparent 100%
        );

    z-index: -1;
}


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

.main-content {
    flex: 1;
}

main.container {
    flex: 1;
}


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

.navbar {
    padding: 10px 0;

    background:
        rgba(8,8,11,.88) !important;

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

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

    box-shadow:
        0 8px 30px rgba(0,0,0,.28);

    border-radius:
        0 0 22px 22px;

    transition: .3s ease;
}


/* لوگو */

.navbar > .container > a.mx-auto {
    position: relative;

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

    transition: .3s ease;
}

.navbar > .container > a.mx-auto img {
    width: 88px !important;
    height: auto;

    border-radius: 15px !important;



    transition: .35s ease;
}

.navbar > .container > a.mx-auto:hover img {
    transform: translateY(-2px) scale(1.04);

    box-shadow:
        0 10px 30px rgba(239,51,64,.18);
}


/* =========================
   NAV LINKS
========================= */

.navbar-nav {
    align-items: center;
}

.nav-link {
    color: #d8d8dd !important;

    position: relative;

    padding: 9px 15px !important;

    border-radius: 12px;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.nav-link::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 0;
    height: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--red),
            transparent
        );

    border-radius: 10px;

    transition: width .3s ease;
}

.nav-link:hover {
    color: #fff !important;

    background:
        rgba(239,51,64,.07);

    transform: translateY(-2px);
}

.nav-link:hover::before,
.nav-link.active::before {
    width: 65%;
}

.nav-link.active {
    color: var(--red-light) !important;

    background:
        rgba(239,51,64,.09);

    font-weight: 600;
}


/* =========================
   MEDIA BUTTON
========================= */

#btn-links {
    order: 3;

    color: #fff;

    border:
        1px solid rgba(239,51,64,.45);

    background:
        rgba(239,51,64,.07);

    border-radius: 13px;

    padding: 8px 14px;

    transition: .3s ease;

    box-shadow:
        0 5px 20px rgba(0,0,0,.2);
}

#btn-links i {
    color: var(--red);
}

#btn-links:hover {
    color: #fff;

    background:
        var(--red);

    border-color:
        var(--red);

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px rgba(239,51,64,.25);
}

#btn-links:hover i {
    color: #fff;
}


/* =========================
   HAMBURGER
========================= */

.navbar-toggler {
    border:
        1px solid rgba(255,255,255,.1);

    border-radius: 12px;

    padding: 7px 9px;

    box-shadow: none !important;
}

.navbar-toggler:focus {
    box-shadow:
        0 0 0 3px rgba(239,51,64,.12) !important;
}


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

footer {
    color: #fff;

    margin-top: auto;

    animation:
        fadeIn 1s ease-out;
}


.footer-custom {
    position: relative;

    margin-top: 70px;

    padding:
        38px 0 18px;

    border-radius:
        40px 40px 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(30,30,37,.88),
            rgba(15,15,19,.96)
        );

    backdrop-filter:
        blur(18px);

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

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

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


/* خط قرمز بالای فوتر */

.footer-custom::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 90px;
    height: 3px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--red),
            transparent
        );

    border-radius: 50%;
}


/* عنوان */

.footer-title {
    color: var(--red);

    font-weight: 700;

    margin-bottom: 12px;
}

.footer-title i {
    margin-left: 8px;
}


.footer-text {
    color: #fff !important;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.8;
}


/* توضیحات */

.footer-custom p {
    color:
        rgba(255,255,255,.45) !important;

    line-height: 2;
}


/* heading */

.footer-heading {
    color: #fff;

    margin-bottom: 18px;

    font-weight: 600;
}


/* لینک‌ها */

.footer-links {
    gap: 30px;
}

.footer-links a {
    display: inline-block;

    color:
        #aaaeb6;

    text-decoration: none;

    padding: 4px 8px;

    border-radius: 8px;

    transition: .25s ease;
}

.footer-links a:hover {
    color: #fff;

    background:
        rgba(239,51,64,.08);

    transform:
        translateX(-4px);
}


/* divider */

.footer-divider {
    border-color:
        rgba(255,255,255,.08);

    margin:
        25px 0 18px;
}


/* copyright */

.copyright {
    color:
        rgba(255,255,255,.5);

    font-size: 13px;
}

.designer-link {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    text-decoration: none;

    color:
        var(--red);

    padding:
        4px 9px;

    border-radius: 8px;

    transition: .3s ease;
}

.designer-link:hover {
    color: #fff;

    background:
        rgba(239,51,64,.1);

    transform:
        translateY(-2px);
}


/* =========================
   BOTTOM NAV
========================= */

.bottom-nav {
    position: fixed;

    left: 12px;
    right: 12px;
    bottom: 12px;

    height: 68px;

    display: flex;

    align-items: center;

    justify-content: space-around;

    padding:
        5px;

    border-radius: 23px;

    background:
        rgba(15,16,21,.88);

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

    backdrop-filter:
        blur(25px);

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

    box-shadow:
        0 18px 50px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.04);

    z-index: 9998;
}


/* لینک */

.bottom-nav a {
    position: relative;

    flex: 1;

    height: 58px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    text-decoration: none;

    color:
        #777b84;

    font-size: 10px;

    border-radius: 17px;

    transition:
        color .25s ease,
        transform .25s ease,
        background .25s ease;
}


/* آیکون */

.bottom-nav a i {
    font-size: 19px;

    transition:
        transform .25s ease,
        filter .25s ease;
}


/* hover */

.bottom-nav a:hover {
    color: #ddd;

    transform:
        translateY(-2px);
}


/* active */

.bottom-nav a.active {
    color: #fff;
}

.bottom-nav a.active::before {
    content: "";

    position: absolute;

    inset: 5px 8px;

    border-radius: 15px;

    background:
        rgba(239,51,64,.12);

    border:
        1px solid rgba(239,51,64,.12);

    z-index: -1;
}

.bottom-nav a.active i {
    color: var(--red);

    transform:
        translateY(-2px);

    filter:
        drop-shadow(
            0 0 9px rgba(239,51,64,.55)
        );
}

.bottom-nav a.active span {
    color: #fff;

    font-weight: 600;
}


/* =========================
   ANIMATION
========================= */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

@media (min-width: 992px) {

    #btn-links {
        order: 3;
    }

    .navbar-collapse {
        order: 2;
    }

    .navbar > .container > a.mx-auto {
        order: 1;

        margin-left: auto !important;
    }

    
}


/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .navbar {
        padding:
            8px 0;
    }

    .navbar-collapse {
        margin-top: 10px;

        padding:
            10px;

        border-radius: 16px;

        background:
            rgba(20,20,26,.96);

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

    .navbar-nav {
        align-items: stretch;
    }

    .nav-link {
        text-align: center;

        padding:
            10px !important;
    }

    #btn-links {
        font-size: 12px;
    }
}


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

@media (max-width: 768px) {

    body {
        font-size: 12px;

        padding-bottom:
            88px;
    }

    .navbar > .container {
        padding:
            0 12px;
    }

    .navbar > .container > a.mx-auto img {
        width: 100px !important;

        border-radius: 13px !important;
    }

    #btn-links {
        padding:
            7px 10px;

        font-size: 11px;
    }
 

    #btn-links i {
        font-size: 16px;
    }


    /* footer */

    .footer-custom {
        margin-top: 45px;

        padding:
            32px 15px 18px;

        border-radius:
            30px 30px 0 0;
    }

    .footer-title {
        font-size: 14px;
    }

    .footer-text {
        font-size: 15px;
    }

    .footer-heading {
        margin-top: 10px;
    }

    .footer-links {
        gap: 5px;
    }

    .footer-links a {
        font-size: 12px;
    }


    /* bottom nav */

    .bottom-nav {
        left: 8px;
        right: 8px;
        bottom: 8px;

        height: 64px;

        border-radius: 21px;
    }

    .bottom-nav a {
        height: 54px;

        font-size: 9px;
    }

    .bottom-nav a i {
        font-size: 18px;
    }
}


/* =========================
   SMALL PHONES
========================= */

@media (max-width: 400px) {

    .bottom-nav {
        left: 6px;
        right: 6px;
        bottom: 6px;
    }

    .bottom-nav a i {
        font-size: 17px;
    }

    .bottom-nav a {
        font-size: 8px;
    }
}



 /* =========================================
   PREMIUM MOBILE BOTTOM NAV
========================================= */

.bottom-nav {
    position: fixed;

    left: 12px;
    right: 12px;
    bottom: 12px;

    height: 72px;

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

    padding: 6px;

    border-radius: 24px;

    /* شیشه‌ای */
    background:
        linear-gradient(
            135deg,
            rgba(35,35,43,.94),
            rgba(13,13,18,.94)
        );

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

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.06);

    z-index: 99999;
}


/* خط نور بالای نوار */

.bottom-nav::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 80px;
    height: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ef3340,
            transparent
        );

    border-radius: 50%;
}


/* =========================================
   ITEMS
========================================= */

.bottom-nav a {
    position: relative;

    flex: 1;

    height: 60px;

    display: flex;
    flex-direction: column;

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

    gap: 4px;

    color: #777b84;

    text-decoration: none;

    border-radius: 18px;

    transition:
        .3s ease;

    -webkit-tap-highlight-color: transparent;
}


/* =========================================
   ICON BOX
========================================= */

.nav-icon {
    width: 38px;
    height: 32px;

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

    border-radius: 12px;

    transition:
        .3s ease;
}


.nav-icon i {
    font-size: 18px;

    transition:
        .3s ease;
}


/* =========================================
   TEXT
========================================= */

.nav-text {
    font-size: 9px;

    white-space: nowrap;

    transition:
        .3s ease;
}


/* =========================================
   HOVER
========================================= */

.bottom-nav a:hover {
    color: #ddd;

    transform:
        translateY(-2px);
}

.bottom-nav a:hover .nav-icon {
    background:
        rgba(255,255,255,.05);
}


/* =========================================
   ACTIVE
========================================= */

.bottom-nav a.active {
    color: #fff;
}


/* بک‌گراند آیتم فعال */

.bottom-nav a.active::before {
    content: "";

    position: absolute;

    inset: 2px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(239,51,64,.17),
            rgba(239,51,64,.045)
        );

    border:
        1px solid rgba(239,51,64,.13);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04);

    z-index: -1;
}


/* آیکون فعال */

.bottom-nav a.active .nav-icon {
    background:
        rgba(239,51,64,.13);

    color: #ef3340;

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 18px rgba(239,51,64,.15);
}


.bottom-nav a.active .nav-icon i {
    color: #ef3340;

    filter:
        drop-shadow(
            0 0 7px rgba(239,51,64,.65)
        );

    transform:
        scale(1.08);
}


/* متن فعال */

.bottom-nav a.active .nav-text {
    color: #fff;

    font-weight: 600;
}


/* =========================================
   CLICK EFFECT
========================================= */

.bottom-nav a:active {
    transform:
        scale(.92);
}


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

@media (max-width: 768px) {

    .bottom-nav {
        left: 9px;
        right: 9px;
        bottom: 9px;

        height: 68px;

        border-radius: 22px;
    }

    .bottom-nav a {
        height: 56px;

        border-radius: 16px;
    }

    .nav-icon {
        width: 36px;
        height: 30px;
    }

    .nav-icon i {
        font-size: 17px;
    }

    .nav-text {
        font-size: 8px;
    }
}


/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 360px) {

    .bottom-nav {
        left: 6px;
        right: 6px;
        bottom: 6px;

        height: 64px;
    }

    .nav-icon {
        width: 32px;
        height: 27px;
    }

    .nav-icon i {
        font-size: 16px;
    }

    .nav-text {
        font-size: 7px;
    }
}


/* =========================================
   DESKTOP = HIDDEN
========================================= */
 



/* =========================================================
   RAX MODERN FOOTER
========================================================= */

.rax-footer {
    position: relative;
    margin-top: 70px;
    padding: 55px 0 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(215, 25, 32, .10),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #111111 0%,
            #0b0b0b 100%
        );
    color: #fff;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.06);
}


/* Red glow */
.rax-footer-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    left: -140px;
    bottom: -170px;
    background: #d71920;
    opacity: .08;
    filter: blur(90px);
    border-radius: 50%;
    pointer-events: none;
}


/* Main */
.rax-footer-main {
    display: grid;
    grid-template-columns: minmax(280px, 1.25fr) minmax(420px, 1fr);
    gap: 70px;
    padding-bottom: 45px;
}


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

.rax-footer-brand {
    max-width: 500px;
}

.rax-footer-logo {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 17px;

    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #d71920,
        #a90f15
    );

    box-shadow:
        0 12px 35px rgba(215,25,32,.25);

    font-size: 21px;
}


.rax-footer-label {
    display: block;
    margin-bottom: 5px;

    color: #d71920;

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


.rax-footer-brand h2 {
    margin: 0;

    color: #fff;

    font-size: 22px;
    font-weight: 800;
    line-height: 1.6;
}


.rax-footer-brand p {
    max-width: 440px;

    margin: 15px 0 0;

    color: rgba(255,255,255,.48);

    font-size: 12px;
    line-height: 2.1;
}


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

.rax-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


.rax-footer-column h4 {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 3px 0 20px;

    color: #fff;

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


.rax-footer-column h4 i {
    color: #d71920;
    font-size: 12px;
}


.rax-footer-column a {
    display: flex;
    align-items: center;
    gap: 7px;

    width: fit-content;

    margin-bottom: 13px;

    color: rgba(255,255,255,.52);

    font-size: 12px;
    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.rax-footer-column a i {
    color: #d71920;
    font-size: 9px;

    opacity: .7;

    transition: transform .25s ease;
}


.rax-footer-column a:hover {
    color: #fff;
    transform: translateX(-4px);
}


.rax-footer-column a:hover i {
    transform: translateX(-3px);
    opacity: 1;
}


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

.rax-footer-bottom {
    min-height: 65px;

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

    gap: 20px;

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


.rax-footer-copy {
    color: rgba(255,255,255,.32);
    font-size: 10px;
}


.rax-footer-designer {
    display: flex;
    align-items: center;
    gap: 9px;

    color: rgba(255,255,255,.32);

    font-size: 10px;
}


.rax-footer-designer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    color: #d71920;

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

    text-decoration: none;

    transition: .25s ease;
}


.rax-footer-designer a i {
    font-size: 10px;
}


.rax-footer-designer a:hover {
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .rax-footer-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .rax-footer-brand {
        max-width: 100%;
    }

    .rax-footer-links {
        max-width: 700px;
    }

}


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

@media (max-width: 575px) {

    .rax-footer {
        margin-top: 45px;
        padding-top: 40px;
    }

    .rax-footer-main {
        gap: 35px;
        padding-bottom: 30px;
    }

    .rax-footer-brand h2 {
        font-size: 18px;
    }

    .rax-footer-brand p {
        font-size: 11px;
        line-height: 2;
    }

    .rax-footer-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 15px;
    }

    .rax-footer-column:last-child {
        grid-column: span 2;
    }

    .rax-footer-column h4 {
        margin-bottom: 15px;
    }

    .rax-footer-bottom {
        min-height: auto;
        padding: 18px 0;

        flex-direction: column;
        align-items: flex-start;

        gap: 10px;
    }

    .rax-footer-copy {
        line-height: 1.8;
    }

}





@media (max-width: 991px) {

    .navbar > .container {
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* همبرگر سمت راست */
    .navbar-toggler {
        order: 1 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* لوگو وسط */
    .navbar > .container > a.mx-auto {
        order: 2 !important;
        margin: 0 auto !important;
    }

    /* رسانه‌ها سمت چپ */
    #btn-links {
        order: 3 !important;

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

        width: auto !important;
        height: 38px !important;

        padding: 7px 11px !important;
        margin: 0 !important;

        flex-shrink: 0 !important;

        white-space: nowrap !important;
    }

    /* متن رسانه‌ها حذف نشود */
    #btn-links span {
        display: inline !important;
    }

    #btn-links i {
        display: inline-block !important;
        font-size: 14px !important;
    }
}
/* ================================
   MOBILE NAVBAR - FIXED TOP ROW
================================ */
@media (max-width: 991px) {

    .navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999 !important;
    }

    .navbar > .container {
        position: relative !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* همبرگر */
    .navbar-toggler {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10002 !important;
        margin: 0 !important;
    }

    /* لوگو */
    .navbar > .container > a.mx-auto {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10001 !important;
    }

    /* دکمه رسانه‌ها */
    #btn-links {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10002 !important;

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

        width: auto !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 7px 11px !important;

        white-space: nowrap !important;
    }

    #btn-links span {
        display: inline !important;
    }

    #btn-links i {
        display: inline-block !important;
        margin-right: 5px !important;
    }

    /* ================================
       خود منوی بازشونده
    ================================ */
    .navbar-collapse {
        position: absolute !important;

        top: calc(100% + 8px) !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        margin: 0 !important;

        padding: 12px !important;

        background: rgba(15, 15, 20, 0.98) !important;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        border: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 18px !important;

        box-shadow: 0 15px 40px rgba(0,0,0,.55) !important;

        z-index: 10000 !important;
    }

    .navbar-collapse .navbar-nav {
        width: 100% !important;
        margin: 0 !important;
        gap: 4px !important;
    }

    .navbar-collapse .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 11px 14px !important;
        text-align: right !important;
        border-radius: 12px !important;
    }

    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link.active {
        background: rgba(215,25,32,.12) !important;
        color: #ef3340 !important;
    }
}






 /* =================================
   MOBILE SIDE MENU
================================= */
@media (max-width: 991px) {

    .navbar {
        position: fixed !important;
        z-index: 9999 !important;
    }

    /* ردیف بالای Navbar ثابت */
    .navbar > .container {
        position: relative !important;
        min-height: 56px !important;
    }

    /* همبرگر */
    .navbar-toggler {
        position: absolute !important;
        right: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10003 !important;
    }

    /* لوگو */
    .navbar > .container > a.mx-auto {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 10001 !important;
    }

    /* دکمه رسانه‌ها */
    #btn-links {
        position: absolute !important;
        left: 12px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10003 !important;

        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;

        width: auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    #btn-links span {
        display: inline !important;
    }


    /* =================================
       منوی کشویی از سمت راست
    ================================= */

    .navbar-collapse {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        width: 280px !important;
        height: 100vh !important;

        margin: 0 !important;
        padding: 90px 18px 30px !important;

        background: #111116 !important;

        border-left: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 0 !important;

        box-shadow: -15px 0 45px rgba(0,0,0,.55) !important;

        z-index: 10000 !important;

        overflow-y: auto !important;

        /* حالت بسته */
        transform: translateX(100%) !important;
        transition: transform .35s ease !important;
    }

    /* حالت باز */
    .navbar-collapse.show {
        transform: translateX(0) !important;
    }

    /* لینک‌ها */
    .navbar-collapse .navbar-nav {
        width: 100% !important;
        margin: 0 !important;
        gap: 7px !important;
    }

    .navbar-collapse .nav-link {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        padding: 14px 16px !important;

        text-align: right !important;

        border-radius: 12px !important;

        background: rgba(255,255,255,.03) !important;
        border: 1px solid rgba(255,255,255,.05) !important;

        transition: .25s ease !important;
    }

    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link.active {
        background: rgba(215,25,32,.12) !important;
        color: #ef3340 !important;
        border-color: rgba(215,25,32,.25) !important;
    }
}
 






/* ===== QUICK SIDE MENU OVERRIDE ===== */
@media (max-width: 991px) {

    .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        width: 280px !important;
        height: 100vh !important;

        margin: 0 !important;
        padding: 85px 15px 25px !important;

        background: #111116 !important;
        border-radius: 0 !important;

        transform: translate3d(100%, 0, 0) !important;
        transition: transform .12s ease-out !important;

        will-change: transform !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
    }

    .navbar-collapse.show {
        transform: translate3d(0, 0, 0) !important;
    }

    .navbar-collapse.collapsing {
        height: 100vh !important;
        transition: transform .12s ease-out !important;
    }

    .navbar-collapse .navbar-nav {
        width: 100% !important;
        margin: 0 !important;
        gap: 5px !important;
    }

    .navbar-collapse .nav-link {
        padding: 13px 15px !important;
        width: 100% !important;
        text-align: right !important;
        border-radius: 10px !important;
    }
}



 /* =========================================================
   MOBILE NAVBAR — CLEAN SIDE DRAWER
========================================================= */

@media (max-width: 991px) {

    /* خود Navbar */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        min-height: 56px !important;

        z-index: 9999 !important;
    }


    /* ردیف بالایی */
    .navbar > .container {
        position: relative !important;

        width: 100% !important;
        min-height: 56px !important;

        display: flex !important;
        align-items: center !important;

        padding: 0 12px !important;
    }


    /* =====================================================
       HAMBURGER
    ===================================================== */

    .navbar-toggler {
        position: absolute !important;

        right: 12px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        margin: 0 !important;

        z-index: 10002 !important;

        flex: none !important;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .navbar > .container > a.mx-auto {
        position: absolute !important;

        left:52% !important;
        top: 50% !important;

        transform: translate(-50%, -50%) !important;

        margin: 0 !important;

        z-index: 10001 !important;
    }


    /* =====================================================
       MEDIA BUTTON
    ===================================================== */

    #btn-links {
        position: absolute !important;

        left: 12px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

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

        width: auto !important;
        height: 38px !important;

        margin: 0 !important;
        padding: 7px 11px !important;

        white-space: nowrap !important;

        z-index: 10002 !important;
    }

    #btn-links span {
        display: inline !important;
    }

    #btn-links i {
        display: inline-block !important;
    }


    /* =====================================================
       SIDE DRAWER
    ===================================================== */

    .navbar-collapse {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        width: 280px !important;
        max-width: 82vw !important;
        height: 100vh !important;

        margin: 0 !important;

        padding: 85px 16px 30px !important;

        background: rgba(14, 14, 19, .98) !important;

        border: 0 !important;
        border-left: 1px solid rgba(255,255,255,.08) !important;
        border-radius: 0 !important;

        box-shadow: -15px 0 45px rgba(0,0,0,.55) !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        z-index: 10000 !important;

        /* بسته */
        display: block !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translate3d(100%, 0, 0) !important;

        transition:
            transform .16s cubic-bezier(.4,0,.2,1),
            visibility 0s linear .16s !important;

        will-change: transform;
    }


    /* =====================================================
       OPEN
    ===================================================== */

    .navbar-collapse.show {
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translate3d(0, 0, 0) !important;

        transition:
            transform .16s cubic-bezier(.4,0,.2,1),
            visibility 0s linear 0s !important;
    }


    /* هنگام باز و بسته شدن Bootstrap */
    .navbar-collapse.collapsing {
        display: block !important;

        width: 280px !important;
        max-width: 82vw !important;
        height: 100vh !important;

        overflow-y: auto !important;

        transform: translate3d(100%, 0, 0) !important;

        transition:
            transform .16s cubic-bezier(.4,0,.2,1) !important;
    }


    /* =====================================================
       MENU LINKS
    ===================================================== */

    .navbar-collapse .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 6px !important;
    }


    .navbar-collapse .nav-item {
        width: 100% !important;
    }


    .navbar-collapse .nav-link {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;

        padding: 13px 15px !important;

        text-align: right !important;

        border-radius: 12px !important;

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

        border: 1px solid rgba(255,255,255,.05) !important;

        transform: none !important;

        transition:
            background .15s ease,
            color .15s ease !important;
    }


    .navbar-collapse .nav-link::before {
        display: none !important;
    }


    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link.active {
        background: rgba(239,51,64,.12) !important;

        border-color: rgba(239,51,64,.2) !important;

        color: #ef3340 !important;
    }
}

 /* ===== SMOOTH BUT FAST SIDE MENU ===== */

@media (max-width: 991px) {

    .navbar-collapse {
        transition:
            transform .20s cubic-bezier(.22, .61, .36, 1),
            visibility 0s linear .20s !important;
    }

    .navbar-collapse.show {
        transition:
            transform .20s cubic-bezier(.22, .61, .36, 1),
            visibility 0s linear 0s !important;
    }

    .navbar-collapse.collapsing {
        transition:
            transform .20s cubic-bezier(.22, .61, .36, 1) !important;
    }
}
 


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

.navbar {
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;

    width: auto !important;

    padding: 8px 0 !important;

    border-radius: 20px !important;

    background:
        linear-gradient(
            135deg,
            rgba(28,28,35,.94),
            rgba(10,10,14,.91)
        ) !important;

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

    box-shadow:
        0 10px 35px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.05) !important;

    backdrop-filter: blur(22px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%) !important;

    transition:
        background .25s ease,
        box-shadow .25s ease !important;
}


/* نور خیلی ظریف بالای هدر */
.navbar::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    width: 100px;
    height: 2px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            #ef3340,
            transparent
        );

    border-radius: 50%;

    opacity: .8;

    pointer-events: none;
}


/* =========================================================
   LOGO
========================================================= */

.navbar > .container > a.mx-auto img {
    width: 82px !important;

    border-radius: 18px !important;

    border: 1px solid rgba(255,255,255,.13) !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.45),
        0 0 0 4px rgba(255,255,255,.025) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.navbar > .container > a.mx-auto:hover img {
    transform: scale(1.04) !important;

    box-shadow:
        0 10px 30px rgba(239,51,64,.22),
        0 0 0 4px rgba(239,51,64,.05) !important;
}


/* =========================================================
   HAMBURGER
========================================================= */

.navbar-toggler {
    width: 42px !important;
    height: 40px !important;

    padding: 7px !important;

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

    border-radius: 14px !important;

    border: 1px solid rgba(255,255,255,.10) !important;

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

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease !important;
}

.navbar-toggler:hover {
    background:
        rgba(239,51,64,.10) !important;

    border-color:
        rgba(239,51,64,.35) !important;
}


/* =========================================================
   MEDIA BUTTON
========================================================= */

#btn-links {
    min-height: 38px !important;

    border-radius: 14px !important;

    border:
        1px solid rgba(239,51,64,.35) !important;

    background:
        linear-gradient(
            135deg,
            rgba(239,51,64,.13),
            rgba(239,51,64,.045)
        ) !important;

    box-shadow:
        0 6px 20px rgba(0,0,0,.22) !important;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease !important;
}

#btn-links:hover {
    transform: translateY(-2px) !important;

    background:
        rgba(239,51,64,.18) !important;

    border-color:
        rgba(239,51,64,.6) !important;
}


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

@media (max-width: 991px) {

    .navbar {
        top: 7px !important;
        left: 8px !important;
        right: 8px !important;

        border-radius: 19px !important;

        min-height: 58px !important;
    }

    .navbar > .container {
        min-height: 56px !important;

        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .navbar > .container > a.mx-auto img {
        width: 68px !important;
        border-radius: 16px !important;
    }

    #btn-links {
        left: 10px !important;

        min-height: 37px !important;

        padding: 7px 10px !important;

        border-radius: 13px !important;

        font-size: 11px !important;
    }

    #btn-links i {
        font-size: 14px !important;
    }

    .navbar-toggler {
        right: 10px !important;

        width: 40px !important;
        height: 38px !important;

        border-radius: 13px !important;
    }
}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 400px) {

    .navbar {
        top: 5px !important;
        left: 6px !important;
        right: 6px !important;

        border-radius: 17px !important;
    }

    .navbar > .container > a.mx-auto img {
        width: 63px !important;
        border-radius: 15px !important;
    }

    #btn-links {
        font-size: 10px !important;
        padding: 6px 8px !important;
    }

    .navbar-toggler {
        width: 38px !important;
        height: 36px !important;
    }
}


/* =========================================================
   SIDE MENU — هماهنگ با هدر
========================================================= */

@media (max-width: 991px) {

    .navbar-collapse {
        position: fixed !important;

        top: 0 !important;
        right: 0 !important;
        left: auto !important;

        width: 280px !important;
        max-width: 82vw !important;
        height: 100vh !important;

        padding: 85px 16px 25px !important;

        margin: 0 !important;

        background:
            linear-gradient(
                160deg,
                rgba(25,25,32,.98),
                rgba(10,10,14,.99)
            ) !important;

        border: 0 !important;
        border-left: 1px solid rgba(255,255,255,.08) !important;

        border-radius: 22px 0 0 22px !important;

        box-shadow:
            -15px 0 45px rgba(0,0,0,.55) !important;

        transform:
            translate3d(100%,0,0) !important;

        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            transform .20s cubic-bezier(.22,.61,.36,1),
            visibility 0s linear .20s !important;

        z-index: 10000 !important;
    }

    .navbar-collapse.show {
        transform:
            translate3d(0,0,0) !important;

        visibility: visible !important;
        pointer-events: auto !important;

        transition:
            transform .20s cubic-bezier(.22,.61,.36,1),
            visibility 0s linear 0s !important;
    }

    .navbar-collapse .nav-link {
        border-radius: 13px !important;

        padding: 13px 15px !important;

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

        border:
            1px solid rgba(255,255,255,.045) !important;
    }
}




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

/* دسکتاپ: همبرگر کاملاً مخفی */
.navbar-toggler {
    display: none !important;
}

/* موبایل */
@media (max-width: 991px) {

    .navbar-toggler {
        width: 40px !important;
        height: 38px !important;
        padding: 7px !important;

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

        border: 1px solid rgba(255,255,255,.10) !important;
        border-radius: 13px !important;

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

        box-shadow: none !important;
        flex-shrink: 0 !important;
    }

    .navbar-toggler:hover {
        background: rgba(239,51,64,.10) !important;
        border-color: rgba(239,51,64,.35) !important;
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(239,51,64,.12) !important;
    }
}


/* =========================================================
   LOGO - CLEAN & BIG
========================================================= */

.navbar > .container > a.mx-auto {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.navbar > .container > a.mx-auto img {
    width: 120px !important;
    height: auto !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    object-fit: contain;
    transition: transform .25s ease;
}

.navbar > .container > a.mx-auto:hover img {
    transform: scale(1.04) !important;
    box-shadow: none !important;
}


/* موبایل */
@media (max-width: 991px) {
    .navbar > .container > a.mx-auto img {
        width: 90px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* گوشی‌های کوچک */
@media (max-width: 400px) {
    .navbar > .container > a.mx-auto img {
        width: 82px !important;
    }
}