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

.glass-box {
    background: rgba(2, 9, 112, 0.289);

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

    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.356),
        inset 0 1px 0 rgba(255, 255, 255, 0.421);

    padding: 30px;
    color: white;
}


/* =========================================================
   NAVBAR POSITION
   IMPORTANT: DO NOT CHANGE
========================================================= */

.mynavbarr {
    position: fixed;

    top: 80px;
    left: 0;

    width: 100%;
    height: auto;

    z-index: 99999;

    transition: top 0.4s ease;

    pointer-events: none;
}

.mynavbarr > nav {
    pointer-events: auto;
}

.mynavbarr.nav-scrolled {
    top: 40px;
}


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

.mynavbarr .nav-link {
    color: #ffffff !important;

    font-weight: 500;

    border-radius: 18px;

    padding: 10px 14px !important;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


/* Hover */

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

    background:
        linear-gradient(
            135deg,
            rgba(62, 142, 197, 0.32),
            rgba(91, 76, 150, 0.32)
        );

    transform: translateY(-1px);
}


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

.mynavbarr .nav-link.active,
.mynavbarr .nav-link.content-active {

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(35, 112, 168, 0.92),
            rgba(30, 65, 105, 0.92),
            rgba(91, 76, 150, 0.90)
        );

    border: 1px solid rgba(255,255,255,0.35);

    box-shadow:
        0 7px 20px rgba(25, 75, 120, 0.28);

    font-weight: 600;
}


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

.mynavbarr .dropdown-menu {
    background: rgba(18, 28, 42, 0.96);

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

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 15px;

    box-shadow:
        0 15px 35px rgba(0,0,0,0.25);

    padding: 8px;
}


.mynavbarr .dropdown-item {
    color: white;

    border-radius: 10px;

    padding: 9px 14px;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.mynavbarr .dropdown-item:hover {
    color: white;

    background:
        linear-gradient(
            135deg,
            rgba(45, 117, 170, 0.45),
            rgba(92, 77, 150, 0.45)
        );

    transform: translateX(3px);
}


/* =========================================================
   ACTIVE DROPDOWN TITLE
========================================================= */

.mynavbarr .dropdown > .nav-link.active {
    color: white !important;

    background:
        linear-gradient(
            135deg,
            rgba(35, 112, 168, 0.92),
            rgba(30, 65, 105, 0.92),
            rgba(91, 76, 150, 0.90)
        );
}


/* =========================================================
   DONATION BUTTON
========================================================= */

.donation-nav-btn {

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

    gap: 7px;

    color: white !important;

    background:
        linear-gradient(
            135deg,
            #2777a8,
            #214d79,
            #66558f
        );

    border: 1px solid rgba(255,255,255,0.55);

    border-radius: 30px;

    padding: 9px 17px;

    font-weight: 600;

    box-shadow:
        0 8px 22px rgba(30, 70, 110, 0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.donation-nav-btn:hover,
.donation-nav-btn.active {

    color: white !important;

    background:
        linear-gradient(
            135deg,
            #328cc1,
            #234f7d,
            #735fa0
        );

    transform: translateY(-2px);

    box-shadow:
        0 12px 28px rgba(45, 100, 150, 0.30);
}


/* =========================================================
   MY PROFILE
========================================================= */

.my-profile-box {

    border-radius: 40px;

    border: 2px solid rgba(255,255,255,0.8);

    background:
        linear-gradient(
            135deg,
            #102a43 0%,
            #1769aa 30%,
            #328cc1 50%,
            #62558d 72%,
            #4d4078 100%
        );

    box-shadow:
        0 10px 30px rgba(0,0,0,0.20);
}


.profile-trigger {
    color: white !important;
}


.profile-trigger p {
    color: white !important;
}


/* =========================================================
   TRANSLATION
========================================================= */

.navbar-translation {
    display: inline-flex;
    align-items: center;
}


.navbar-translation .translation-toggle {
    color: #ffffff !important;

    font-size: 15px;
    font-weight: 500;

    border-radius: 18px;

    padding: 10px 12px !important;

    white-space: nowrap;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.navbar-translation .translation-toggle:hover {
    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            rgba(62, 142, 197, 0.32),
            rgba(91, 76, 150, 0.32)
        );

    transform: translateY(-1px);
}


.navbar-translation .translation-icon {
    font-size: 22px;
    color: #ffffff !important;
    margin-right: 5px;
}


/* =========================================================
   MOBILE TRANSLATION ICON
========================================================= */

@media (max-width: 991.98px) {

    .mobile-navbar-translation .translation-toggle {
        color: #ffffff !important;
    }

    .mobile-navbar-translation .translation-toggle .translation-icon {
        font-size: 22px !important;
        color: #ffffff !important;
        margin-right: 0 !important;
    }

}

.navbar-translation .translation-menu {
    min-width: 190px;
}


.navbar-translation .translation-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
}


.navbar-translation .language-flag {
    font-size: 18px;

    width: 22px;

    text-align: center;

    flex-shrink: 0;
}


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

.mobile-navbar-header {
    display: none;
}


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

@media (max-width: 991.98px) {

    .mynavbarr {

        position: fixed !important;

        top: 5px;

        left: 0;
        right: 0;

        width: 100%;

        bottom: auto !important;

        height: auto !important;

        z-index: 99999 !important;

        pointer-events: none;

        transition: top 0.4s ease;
    }


    .mynavbarr.nav-scrolled {
        top: 0;
    }


    .mynavbarr > nav {
        pointer-events: auto;
    }


    .glass-box {
        padding: 12px 10px;
    }


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

    .mobile-navbar-header {

        display: flex;

        align-items: center;

        width: 100%;

        min-width: 0;

        gap: 5px;
    }


    /* =====================================================
       MOBILE LOGO + WEBSITE NAME
    ===================================================== */

    .mobile-navbar-brand {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 5px;

        flex: 1;

        min-width: 0;

        overflow: hidden;

        margin: 0 3px;
    }


    .mobile-navbar-brand .mobile-site-logo {

        width: 30px;

        height: 30px;

        object-fit: contain;

        flex-shrink: 0;
    }


    .mobile-navbar-brand .mobile-site-name {

        color: #ffffff;

        font-size: 9px;

        font-weight: 600;

        white-space: nowrap;

        line-height: 1;

        margin: 0;

        overflow: hidden;

        text-overflow: clip;
    }


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

    .mobile-navbar-translation {

        display: inline-flex;

        align-items: center;

        flex-shrink: 0;
    }


    .mobile-navbar-translation .translation-toggle {

        display: flex;

        align-items: center;

        justify-content: center;

        width: 38px;

        height: 38px;

        padding: 0 !important;

        border-radius: 14px;
    }


    .mobile-navbar-translation .translation-icon {

        font-size: 17px;

        margin: 0;
    }


    .mobile-navbar-translation .translation-text {

        display: none;
    }


    .mobile-navbar-translation .translation-menu {

        min-width: 175px;
    }


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

    .mynavbarr .navbar-toggler {

        flex-shrink: 0;

        width: 42px;

        height: 38px;

        padding: 0;

        border: 1px solid rgba(255,255,255,0.35);

        border-radius: 13px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    .mynavbarr .navbar-toggler:focus {

        box-shadow:
            0 0 0 2px rgba(255,255,255,0.15);
    }


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

    .mynavbarr .navbar-collapse {

        width: 100%;

        margin-top: 10px;
    }


    .mynavbarr .navbar-nav {

        width: 100%;
    }


    .mynavbarr .navbar-nav .nav-link {

        width: 100%;

        margin-bottom: 3px;
    }


    .mynavbarr .navbar-nav .dropdown-menu {

        position: static;

        float: none;

        width: 100%;

        margin: 5px 0;
    }


    .my-profile-box {

        margin-top: 15px;

        margin-right: 0 !important;
    }


    .donation-nav-btn {

        margin-top: 8px;

        margin-bottom: 8px;

        justify-content: center;
    }


    .header-carousel {

        padding-top: 40px;
    }


    /* =====================================================
       HIDE DESKTOP TRANSLATION
    ===================================================== */

    .desktop-navbar-translation {

        display: none !important;
    }

}


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

@media (min-width: 992px) {

    .mobile-navbar-header {

        display: none !important;
    }

}