/* ==========================================================
   RASISALAI UNITED
   MAIN THEME v2.0
   RED FORCE
   Author : RSLUTD
========================================================== */


/* ==========================================================
   01. ROOT / BRAND SYSTEM
========================================================== */

:root{

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

    --primary:#d91f26;
    --primary-light:#ef4444;
    --primary-dark:#a50f15;

    --secondary:#0b1f3a;
    --secondary-light:#163a63;
    --secondary-dark:#071528;

    --accent:#f4c542;
    --accent-light:#ffd86f;
    --accent-dark:#d4a81e;


    /* ==========================
       BACKGROUND
    ========================== */

    --body-bg:#f5f7fb;

    --surface:#ffffff;
    --surface-2:#f9fbfd;
    --surface-3:#eef3f8;


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

    --text:#122033;
    --text-light:#6b7280;
    --text-lighter:#94a3b8;

    --text-white:#ffffff;


    /* ==========================
       BORDER
    ========================== */

    --border:#e6edf5;
    --border-dark:#d4deea;


    /* ==========================
       STATUS
    ========================== */

    --success:#16a34a;
    --success-light:#dcfce7;

    --warning:#f59e0b;
    --warning-light:#fef3c7;

    --danger:#dc2626;
    --danger-light:#fee2e2;

    --info:#0ea5e9;
    --info-light:#e0f2fe;


    /* ==========================
       SHADOW
    ========================== */

    --shadow-xs:
        0 2px 6px rgba(0,0,0,.05);

    --shadow-sm:
        0 6px 18px rgba(0,0,0,.08);

    --shadow:
        0 12px 35px rgba(0,0,0,.10);

    --shadow-lg:
        0 20px 55px rgba(0,0,0,.15);

    --shadow-red:
        0 12px 30px rgba(217,31,38,.20);

    --shadow-navy:
        0 12px 30px rgba(11,31,58,.18);


    /* ==========================
       RADIUS
    ========================== */

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:22px;
    --radius-xl:30px;


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

    --transition:.25s ease;
    --transition-fast:.18s ease;
    --transition-slow:.4s ease;


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

    --container:1320px;


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

    --navbar-height:78px;

}


/* ==========================================================
   02. RESET
========================================================== */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}

body{

    font-family:'Maledpan',sans-serif;

    background:var(--body-bg);

    color:var(--text);

    line-height:1.6;

    overflow-x:hidden;

    min-height:100vh;

}

img{

    max-width:100%;

    height:auto;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:inherit;

}

ul,
ol{

    margin:0;

    padding:0;

}

ul{

    list-style:none;

}

button,
input,
textarea,
select{

    font-family:inherit;

}

button{

    cursor:pointer;

}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{

    outline:3px solid rgba(217,31,38,.25);

    outline-offset:2px;

}


/* ==========================================================
   03. CONTAINER
========================================================== */

.container-xl{

    width:100%;

    max-width:var(--container);

    margin-left:auto;
    margin-right:auto;

}


/* ==========================================================
   04. BACKGROUND
========================================================== */

.bg-primary{

    background:var(--primary)!important;

    color:#fff!important;

}

.bg-secondary{

    background:var(--secondary)!important;

    color:#fff!important;

}

.bg-light{

    background:var(--surface)!important;

}

.bg-dark{

    background:var(--secondary-dark)!important;

    color:#fff!important;

}


/* ----------------------------------------------------------
   PRIMARY GRADIENT
---------------------------------------------------------- */

.bg-gradient-primary{

    background:

        linear-gradient(
            135deg,
            var(--secondary-dark) 0%,
            var(--secondary) 42%,
            var(--primary) 100%
        );

    color:#fff;

}


/* ----------------------------------------------------------
   RED GRADIENT
---------------------------------------------------------- */

.bg-gradient-red{

    background:

        linear-gradient(
            135deg,
            var(--primary-dark),
            var(--primary),
            var(--primary-light)
        );

    color:#fff;

}


/* ----------------------------------------------------------
   GOLD GRADIENT
---------------------------------------------------------- */

.bg-gradient-gold{

    background:

        linear-gradient(
            135deg,
            var(--accent-dark),
            var(--accent),
            var(--accent-light)
        );

}


/* ----------------------------------------------------------
   NAVY GRADIENT
---------------------------------------------------------- */

.bg-gradient-navy{

    background:

        linear-gradient(
            135deg,
            var(--secondary-dark),
            var(--secondary),
            var(--secondary-light)
        );

    color:#fff;

}


/* ==========================================================
   05. TEXT
========================================================== */

.text-primary{

    color:var(--primary)!important;

}

.text-secondary{

    color:var(--secondary)!important;

}

.text-accent{

    color:var(--accent)!important;

}

.text-muted{

    color:var(--text-light)!important;

}

.text-white{

    color:#fff!important;

}


/* ==========================================================
   06. BUTTON
========================================================== */

.btn{

    display:inline-flex;

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

    gap:.35rem;

    border-radius:50px;

    padding:.8rem 1.8rem;

    font-weight:600;

    line-height:1.2;

    transition:var(--transition);

}


/* ----------------------------------------------------------
   PRIMARY
---------------------------------------------------------- */

.btn-primary{

    background:var(--primary)!important;

    border-color:var(--primary)!important;

    color:#fff!important;

}

.btn-primary:hover{

    background:var(--primary-dark)!important;

    border-color:var(--primary-dark)!important;

    color:#fff!important;

    transform:translateY(-2px);

    box-shadow:var(--shadow-red);

}


/* ----------------------------------------------------------
   SECONDARY
---------------------------------------------------------- */

.btn-secondary{

    background:var(--secondary)!important;

    border-color:var(--secondary)!important;

    color:#fff!important;

}

.btn-secondary:hover{

    background:var(--secondary-dark)!important;

    border-color:var(--secondary-dark)!important;

    color:#fff!important;

    transform:translateY(-2px);

}


/* ----------------------------------------------------------
   OUTLINE PRIMARY
---------------------------------------------------------- */

.btn-outline-primary{

    border:2px solid var(--primary)!important;

    color:var(--primary)!important;

    background:transparent!important;

}

.btn-outline-primary:hover{

    background:var(--primary)!important;

    color:#fff!important;

    transform:translateY(-2px);

}


/* ----------------------------------------------------------
   OUTLINE SECONDARY
---------------------------------------------------------- */

.btn-outline-secondary{

    border:2px solid var(--secondary)!important;

    color:var(--secondary)!important;

    background:transparent!important;

}

.btn-outline-secondary:hover{

    background:var(--secondary)!important;

    color:#fff!important;

}


/* ----------------------------------------------------------
   DANGER
---------------------------------------------------------- */

.btn-danger{

    background:var(--primary)!important;

    border-color:var(--primary)!important;

    color:#fff!important;

}

.btn-danger:hover{

    background:var(--primary-dark)!important;

    border-color:var(--primary-dark)!important;

}


/* ==========================================================
   07. CARD
========================================================== */

.card{

    border:none;

    border-radius:var(--radius);

    background:var(--surface);

    box-shadow:var(--shadow-sm);

    overflow:hidden;

}


/* ----------------------------------------------------------
   CARD HOVER
---------------------------------------------------------- */

.card-hover{

    transition:

        transform var(--transition),

        box-shadow var(--transition);

}

.card-hover:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


/* ==========================================================
   08. NAVBAR
   RED FORCE
========================================================== */

.navbar{

    position:relative;

    min-height:var(--navbar-height);

    background:

        linear-gradient(
            180deg,
            rgba(7,21,40,.98) 0%,
            rgba(11,31,58,.96) 100%
        )!important;

    border-bottom:

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

    backdrop-filter:blur(14px);

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

    box-shadow:

        0 8px 30px rgba(0,0,0,.22);

    z-index:1030;

}


/* ----------------------------------------------------------
   NAVBAR TOP LINE
---------------------------------------------------------- */

.navbar::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:

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

}


/* ----------------------------------------------------------
   BRAND
---------------------------------------------------------- */

.navbar-brand{

    display:flex;

    align-items:center;

    min-height:var(--navbar-height);

    color:#fff!important;

    font-weight:700;

}

.navbar-brand img{

    width:54px;
    height:54px;

    object-fit:contain;

    filter:

        drop-shadow(
            0 4px 10px rgba(0,0,0,.35)
        );

    transition:var(--transition);

}

.navbar-brand:hover img{

    transform:scale(1.06);

    filter:

        drop-shadow(
            0 5px 14px rgba(217,31,38,.40)
        );

}


/* ----------------------------------------------------------
   BRAND NAME
---------------------------------------------------------- */

.navbar-brand .fw-bold{

    font-size:18px;

    line-height:1.05;

    letter-spacing:.4px;

}

.navbar-brand small{

    display:block;

    margin-top:3px;

    color:var(--accent)!important;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.7px;

    line-height:1;

}


/* ----------------------------------------------------------
   NAV MENU
---------------------------------------------------------- */

.navbar-nav{

    gap:4px;

}

.navbar .nav-link{

    position:relative;

    display:flex;

    align-items:center;

    min-height:var(--navbar-height);

    padding:

        0 13px!important;

    color:

        rgba(255,255,255,.78)!important;

    font-size:14px;

    font-weight:500;

    white-space:nowrap;

    transition:

        color var(--transition),

        background var(--transition);

}


/* ----------------------------------------------------------
   NAV HOVER
---------------------------------------------------------- */

.navbar .nav-link:hover{

    color:#fff!important;

    background:

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

}


/* ----------------------------------------------------------
   NAV ACTIVE
---------------------------------------------------------- */

.navbar .nav-link.active{

    color:#fff!important;

    font-weight:700;

}


/* ----------------------------------------------------------
   ACTIVE RED LINE
---------------------------------------------------------- */

.navbar .nav-link::after{

    content:"";

    position:absolute;

    left:13px;
    right:13px;

    bottom:0;

    height:3px;

    border-radius:
        3px 3px 0 0;

    background:

        var(--primary);

    transform:
        scaleX(0);

    transform-origin:center;

    transition:
        transform var(--transition);

}

.navbar .nav-link.active::after{

    transform:
        scaleX(1);

}


/* ----------------------------------------------------------
   OFFICIAL SHOP
---------------------------------------------------------- */

.navbar .btn-danger{

    display:inline-flex;

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

    min-height:42px;

    padding:
        0 20px!important;

    border:
        1px solid transparent!important;

    border-radius:
        var(--radius-sm)!important;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        )!important;

    color:#fff!important;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

    box-shadow:

        0 7px 18px rgba(217,31,38,.22);

    transition:var(--transition);

}

.navbar .btn-danger:hover{

    background:

        linear-gradient(
            135deg,
            var(--primary-light),
            var(--primary)
        )!important;

    color:#fff!important;

    transform:
        translateY(-2px);

    box-shadow:

        0 10px 24px rgba(217,31,38,.35);

}


/* ----------------------------------------------------------
   MOBILE TOGGLER
---------------------------------------------------------- */

.navbar-toggler{

    width:44px;
    height:44px;

    padding:0;

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

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

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

    color:#fff;

    display:flex;

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

}

.navbar-toggler:hover{

    background:
        rgba(217,31,38,.12);

}

.navbar-toggler:focus{

    box-shadow:
        0 0 0 3px rgba(217,31,38,.18)!important;

}


/* ==========================================================
   09. HERO
========================================================== */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.hero-overlay{

    position:absolute;

    inset:0;

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

}

.hero-content{

    position:relative;

    z-index:2;

}


/* ==========================================================
   10. SECTION
========================================================== */

.section{

    padding:90px 0;

}

.section-title{

    font-size:2.2rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:15px;

}

.section-subtitle{

    color:var(--text-light);

    margin-bottom:50px;

}


/* ==========================================================
   11. SECTION HEADER
========================================================== */

.section-header{

    margin-bottom:40px;

}

.section-kicker{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-kicker::before{

    content:"";

    width:30px;
    height:3px;

    border-radius:10px;

    background:var(--primary);

}

.section-heading{

    margin-top:7px;

    margin-bottom:8px;

    color:var(--secondary);

    font-size:clamp(28px,4vw,48px);

    font-weight:900;

    line-height:1.05;

}


/* ==========================================================
   12. TABLE
========================================================== */

.table{

    border-radius:var(--radius);

    overflow:hidden;

    background:var(--surface);

}

.table thead{

    background:var(--secondary);

    color:#fff;

}

.table th{

    font-weight:700;

}

.table td,
.table th{

    vertical-align:middle;

}


/* ==========================================================
   13. BADGE
========================================================== */

.badge-primary{

    background:var(--primary)!important;

    color:#fff!important;

}

.badge-success{

    background:var(--success)!important;

    color:#fff!important;

}

.badge-warning{

    background:var(--warning)!important;

    color:#000!important;

}

.badge-danger{

    background:var(--danger)!important;

    color:#fff!important;

}


/* ==========================================================
   14. FOOTER
========================================================== */

.footer{

    position:relative;

    background:

        linear-gradient(
            180deg,
            var(--secondary-dark),
            #030b16
        );

    color:#fff;

    padding:70px 0 20px;

    overflow:hidden;

}

.footer::before{

    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:

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

}

.footer a{

    color:#d7dbe3;

}

.footer a:hover{

    color:var(--accent);

}


/* ==========================================================
   15. UTILITIES
========================================================== */

.shadow-xs{

    box-shadow:var(--shadow-xs)!important;

}

.shadow-sm{

    box-shadow:var(--shadow-sm)!important;

}

.shadow{

    box-shadow:var(--shadow)!important;

}

.shadow-lg{

    box-shadow:var(--shadow-lg)!important;

}

.shadow-red{

    box-shadow:var(--shadow-red)!important;

}

.shadow-navy{

    box-shadow:var(--shadow-navy)!important;

}

.rounded{

    border-radius:var(--radius)!important;

}

.rounded-lg{

    border-radius:var(--radius-lg)!important;

}

.rounded-xl{

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

}


/* ==========================================================
   16. BORDER UTILITIES
========================================================== */

.border-theme{

    border:
        1px solid var(--border)!important;

}

.border-primary{

    border-color:
        var(--primary)!important;

}

.border-secondary{

    border-color:
        var(--secondary)!important;

}

.border-accent{

    border-color:
        var(--accent)!important;

}


/* ==========================================================
   17. FORM
========================================================== */

.form-control,
.form-select{

    border:
        1px solid var(--border);

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

    min-height:44px;

    color:var(--text);

    background:var(--surface);

    transition:var(--transition);

}

.form-control:focus,
.form-select:focus{

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px rgba(217,31,38,.10);

}

.form-label{

    color:var(--text);

    font-weight:600;

}


/* ==========================================================
   18. LINK
========================================================== */

.link-primary{

    color:var(--primary)!important;

}

.link-primary:hover{

    color:var(--primary-dark)!important;

}

.link-secondary{

    color:var(--secondary)!important;

}

.link-secondary:hover{

    color:var(--primary)!important;

}


/* ==========================================================
   19. DIVIDER
========================================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--border);

}

.divider-red{

    width:100%;

    height:3px;

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

}


/* ==========================================================
   20. SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;
    height:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/* ==========================================================
   21. SELECTION
========================================================== */

::selection{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   22. DARK MODE
========================================================== */

[data-theme="dark"]{

    --body-bg:#061321;

    --surface:#10233f;
    --surface-2:#162d4b;
    --surface-3:#1b3555;

    --text:#ffffff;
    --text-light:#b7c3d4;
    --text-lighter:#8fa3ba;

    --border:#274260;
    --border-dark:#35526f;

}


/* ==========================================================
   23. RESPONSIVE — TABLET
========================================================== */

@media (max-width:1199.98px){

    .navbar-brand{

        min-height:70px;

    }

    .navbar-brand img{

        width:48px;
        height:48px;

    }

    .navbar-nav{

        gap:0;

        padding:12px 0;

    }

    .navbar .nav-link{

        min-height:46px;

        padding:
            0 14px!important;

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

        font-size:14px;

    }

    /* Mobile active */

    .navbar .nav-link::after{

        left:0;
        right:auto;

        top:8px;
        bottom:8px;

        width:3px;
        height:auto;

        border-radius:
            0 3px 3px 0;

        transform:
            scaleY(0);

    }

    .navbar .nav-link.active::after{

        transform:
            scaleY(1);

    }

    .navbar .nav-link.active{

        background:
            rgba(217,31,38,.10);

    }

    .navbar-collapse{

        padding-bottom:15px;

    }

    .navbar .btn-danger{

        width:100%;

        margin-top:5px;

    }

    .section{

        padding:70px 0;

    }

}


/* ==========================================================
   24. RESPONSIVE — MOBILE
========================================================== */

@media (max-width:767.98px){

    .section{

        padding:55px 0;

    }

    .section-title{

        font-size:1.9rem;

    }

    .section-subtitle{

        margin-bottom:35px;

    }

    .section-heading{

        font-size:34px;

    }

}


/* ==========================================================
   25. RESPONSIVE — SMALL MOBILE
========================================================== */

@media (max-width:575.98px){

    .navbar .container{

        padding-left:14px;
        padding-right:14px;

    }

    .navbar-brand{

        min-height:66px;

    }

    .navbar-brand img{

        width:44px;
        height:44px;

    }

    .navbar-brand .fw-bold{

        font-size:15px;

    }

    .navbar-brand small{

        font-size:7px;

        letter-spacing:1.3px;

    }

    .navbar-toggler{

        width:40px;
        height:40px;

    }

    .section{

        padding:45px 0;

    }

    .section-heading{

        font-size:30px;

    }

    .btn{

        padding:.72rem 1.35rem;

    }

}


/* ==========================================================
   26. REDUCED MOTION
========================================================== */

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

    html{

        scroll-behavior:auto;

    }

    *,
    *::before,
    *::after{

        animation-duration:.01ms!important;

        animation-iteration-count:1!important;

        transition-duration:.01ms!important;

        scroll-behavior:auto!important;

    }

}
/* ==========================================================
   NAVBAR SPACER
========================================================== */

.navbar-spacer{
    height:78px;
}

@media (max-width:1199.98px){

    .navbar-spacer{
        height:70px;
    }

}

@media (max-width:575.98px){

    .navbar-spacer{
        height:66px;
    }

}
/* =========================================================
   08. RASISALAI UNITED NAVBAR
   RED FORCE V3
   THAI EDITION
========================================================= */

.ru-navbar{
    position:fixed;
    top:0;
    left:0;
    right:0;

    height:78px;

    z-index:1100;

    background:
        linear-gradient(
            105deg,
            #040912 0%,
            #071221 45%,
            #0b192d 100%
        );

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

    box-shadow:
        0 12px 35px rgba(0,0,0,.40);

    isolation:isolate;
}


/* =========================================================
   TOP RED / GOLD LINE
========================================================= */

.ru-nav-topline{
    position:absolute;

    top:0;
    left:0;
    right:0;

    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--primary-dark) 10%,
            var(--primary) 30%,
            var(--accent) 50%,
            var(--primary) 70%,
            var(--primary-dark) 90%,
            transparent
        );

    box-shadow:
        0 0 15px rgba(217,31,38,.65);
}


/* =========================================================
   DIAGONAL DESIGN
========================================================= */

.ru-navbar::before{

    content:"";

    position:absolute;

    top:0;
    left:25%;

    width:320px;
    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent 40%,
            rgba(217,31,38,.08) 50%,
            transparent 60%
        );

    transform:skewX(-18deg);

    pointer-events:none;

    z-index:-1;
}


.ru-navbar::after{

    content:"";

    position:absolute;

    right:-100px;
    top:-130px;

    width:330px;
    height:300px;

    background:
        radial-gradient(
            circle,
            rgba(217,31,38,.16),
            transparent 68%
        );

    pointer-events:none;

    z-index:-1;
}


/* =========================================================
   INNER
========================================================= */

.ru-navbar > .container{
    height:100%;
}


.ru-nav-inner{

    height:78px;

    display:flex;
    align-items:center;

    position:relative;
}


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

.ru-brand{

    height:100%;

    display:flex;
    align-items:center;

    flex-shrink:0;

    position:relative;

    padding-right:24px;
    margin-right:14px;

    color:#fff!important;

    text-decoration:none!important;
}


.ru-brand::after{

    content:"";

    position:absolute;

    right:0;

    top:18px;
    bottom:18px;

    width:1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );
}


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

.ru-brand-logo{

    width:54px;
    height:54px;

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

    position:relative;

    margin-right:12px;
}


.ru-brand-logo::before{

    content:"";

    position:absolute;

    inset:-4px;

    border:1px solid rgba(217,31,38,.40);

    transform:rotate(45deg);

    transition:
        transform .3s ease,
        border-color .3s ease;
}


.ru-brand-logo::after{

    content:"";

    position:absolute;

    right:-5px;
    bottom:4px;

    width:7px;
    height:7px;

    background:var(--primary);

    box-shadow:
        0 0 12px rgba(217,31,38,.8);
}


.ru-brand-logo img{

    width:54px;
    height:54px;

    object-fit:contain;

    position:relative;

    z-index:2;

    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.55));

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


.ru-brand:hover .ru-brand-logo::before{

    transform:rotate(135deg);

    border-color:
        rgba(217,31,38,.75);
}


.ru-brand:hover .ru-brand-logo img{

    transform:scale(1.07);

    filter:
        drop-shadow(
            0 6px 16px rgba(217,31,38,.50)
        );
}


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

.ru-brand-text{

    display:flex;

    flex-direction:column;

    justify-content:center;
}


.ru-brand-text strong{

    color:#fff;

    font-size:17px;

    line-height:1;

    font-weight:900;

    letter-spacing:1px;

    white-space:nowrap;
}


.ru-brand-text small{

    margin-top:6px;

    color:var(--accent);

    font-size:8px;

    line-height:1;

    font-weight:700;

    letter-spacing:1.3px;

    white-space:nowrap;
}


/* =========================================================
   MENU AREA
========================================================= */

.ru-nav-collapse{

    height:100%;

    display:flex;

    align-items:center;
}


.ru-main-menu{

    height:100%;

    display:flex;

    align-items:stretch;

    gap:2px;

    margin-left:auto;
}


/* =========================================================
   MENU ITEM
========================================================= */

.ru-main-menu .nav-item{

    height:100%;

    position:relative;
}


/* =========================================================
   MENU LINK
========================================================= */

.ru-main-menu .nav-link{

    height:100%;

    min-width:76px;

    padding:0 12px!important;

    display:flex!important;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    position:relative;

    color:rgba(255,255,255,.66)!important;

    text-decoration:none!important;

    overflow:hidden;

    transition:
        color .22s ease,
        background .22s ease;
}


/* NUMBER */

.ru-nav-no{

    position:absolute;

    top:10px;

    font-family:Arial,sans-serif;

    font-size:7px;

    font-weight:800;

    letter-spacing:1px;

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

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


/* THAI LABEL */

.ru-nav-label{

    position:relative;

    margin-top:8px;

    color:inherit;

    font-size:14px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

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


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

.ru-main-menu .nav-link::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            125deg,
            transparent 25%,
            rgba(217,31,38,.08) 55%,
            rgba(217,31,38,.22) 100%
        );

    clip-path:
        polygon(
            35% 0,
            100% 0,
            65% 100%,
            0 100%
        );

    opacity:0;

    transform:translateX(-10px);

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


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

.ru-main-menu .nav-link::after{

    content:"";

    position:absolute;

    left:12px;
    right:12px;

    bottom:0;

    height:3px;

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

    box-shadow:
        0 0 13px rgba(217,31,38,.70);

    transform:scaleX(0);

    transform-origin:center;

    transition:
        transform .25s ease;
}


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

.ru-main-menu .nav-link:hover{

    color:#fff!important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            rgba(217,31,38,.12)
        );
}


.ru-main-menu .nav-link:hover::before{

    opacity:1;

    transform:translateX(0);
}


.ru-main-menu .nav-link:hover::after{

    transform:scaleX(.72);
}


.ru-main-menu .nav-link:hover .ru-nav-no{

    color:rgba(244,197,66,.75);

    transform:translateY(-1px);
}


.ru-main-menu .nav-link:hover .ru-nav-label{

    color:#fff;

    transform:translateY(1px);
}


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

.ru-main-menu .nav-link.active{

    color:#fff!important;

    background:
        linear-gradient(
            180deg,
            rgba(217,31,38,.04),
            rgba(217,31,38,.17)
        );
}


.ru-main-menu .nav-link.active::before{

    opacity:1;
}


.ru-main-menu .nav-link.active::after{

    transform:scaleX(1);
}


.ru-main-menu .nav-link.active .ru-nav-no{

    color:var(--accent);
}


.ru-main-menu .nav-link.active .ru-nav-label{

    font-weight:900;
}


/* =========================================================
   OFFICIAL SHOP
========================================================= */

.ru-nav-shop{

    margin-left:12px;

    padding-left:12px;

    height:42px;

    display:flex;

    align-items:center;

    position:relative;
}


.ru-nav-shop::before{

    content:"";

    position:absolute;

    left:0;

    top:4px;
    bottom:4px;

    width:1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );
}


.ru-shop-btn{

    min-width:138px;

    height:42px;

    padding:0 12px;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

    color:#fff!important;

    text-decoration:none!important;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            #b9131a 55%,
            var(--primary-dark)
        );

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

    clip-path:
        polygon(
            8px 0,
            100% 0,
            calc(100% - 8px) 100%,
            0 100%
        );

    box-shadow:
        0 8px 22px rgba(217,31,38,.28);

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


.ru-shop-btn:hover{

    color:#fff!important;

    transform:translateY(-2px);

    filter:brightness(1.08);

    box-shadow:
        0 13px 30px rgba(217,31,38,.45);
}


.ru-shop-icon{

    width:29px;
    height:29px;

    display:flex;

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

    margin-right:8px;

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

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

    font-size:12px;
}


.ru-shop-text{

    display:flex;

    flex-direction:column;

    line-height:1;
}


.ru-shop-text small{

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

    font-size:7px;

    font-weight:700;

    letter-spacing:.5px;
}


.ru-shop-text strong{

    margin-top:4px;

    color:#fff;

    font-family:Arial,sans-serif;

    font-size:11px;

    font-weight:900;

    letter-spacing:1px;
}


.ru-shop-arrow{

    margin-left:auto;

    font-size:12px;

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

}


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

.ru-nav-toggle{

    width:43px;
    height:43px;

    margin-left:auto;

    padding:0;

    display:none;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:5px;

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

    border-radius:7px;

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

    color:#fff;
}


.ru-nav-toggle span{

    width:19px;
    height:2px;

    display:block;

    background:#fff;

    border-radius:2px;
}


/* =========================================================
   SPACER
========================================================= */

.ru-navbar-spacer{

    height:78px;
}


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

@media (max-width:1199.98px){

    .ru-navbar{

        height:70px;
    }

    .ru-nav-inner{

        height:70px;
    }

    .ru-nav-toggle{

        display:flex;
    }

    .ru-nav-collapse{

        position:absolute;

        top:70px;
        left:0;
        right:0;

        height:auto;

        display:none;

        padding:8px;

        background:
            linear-gradient(
                180deg,
                #07111f,
                #0a1728
            );

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

        border-top:0;

        box-shadow:
            0 18px 35px rgba(0,0,0,.40);
    }

    .ru-nav-collapse.show{

        display:block!important;
    }

    .ru-main-menu{

        height:auto;

        margin:0;

        display:grid;

        grid-template-columns:
            repeat(4,1fr);

        gap:2px;
    }

    .ru-main-menu .nav-item{

        height:54px;
    }

    .ru-main-menu .nav-link{

        height:54px;

        min-width:0;

        flex-direction:row;

        justify-content:flex-start;

        padding:0 15px!important;

        gap:10px;
    }

    .ru-nav-no{

        position:static;

        width:18px;

        font-size:8px;
    }

    .ru-nav-label{

        margin-top:0;

        font-size:13px;
    }

    .ru-main-menu .nav-link::after{

        left:0;
        right:auto;

        top:8px;
        bottom:8px;

        width:3px;
        height:auto;

        transform:scaleY(0);
    }

    .ru-main-menu .nav-link.active::after{

        transform:scaleY(1);
    }

    .ru-nav-shop{

        margin:8px 0 0;

        padding:8px 0 0;

        height:auto;

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

    .ru-nav-shop::before{

        display:none;
    }

    .ru-shop-btn{

        width:100%;

        justify-content:center;
    }

    .ru-navbar-spacer{

        height:70px;
    }

}


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

@media (max-width:767.98px){

    .ru-brand{

        padding-right:0;

        margin-right:0;
    }

    .ru-brand::after{

        display:none;
    }

    .ru-brand-logo,
    .ru-brand-logo img{

        width:43px;
        height:43px;
    }

    .ru-brand-logo{

        margin-right:9px;
    }

    .ru-brand-text strong{

        font-size:14px;
    }

    .ru-brand-text small{

        font-size:6px;

        letter-spacing:.8px;
    }

    .ru-main-menu{

        grid-template-columns:
            repeat(2,1fr);
    }

}


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

@media (max-width:575.98px){

    .ru-navbar{

        height:66px;
    }

    .ru-nav-inner{

        height:66px;
    }

    .ru-brand-logo,
    .ru-brand-logo img{

        width:40px;
        height:40px;
    }

    .ru-brand-text strong{

        font-size:13px;
    }

    .ru-brand-text small{

        font-size:5px;

        letter-spacing:.6px;
    }

    .ru-nav-toggle{

        width:40px;
        height:40px;
    }

    .ru-nav-collapse{

        top:66px;
    }

    .ru-navbar-spacer{

        height:66px;
    }

}