@import url('main.css');

.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, rgb(78, 28, 57) 0%, rgb(78, 28, 57) 7%, rgb(28, 22, 46) 50%, rgb(78, 28, 57) 93%, rgb(78, 28, 57) 100%);
    padding: 15px 30px;
    z-index: 1500;
    text-decoration: none;
}

.navbar .left {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar .left .main-logo,
.footer-right .main-logo {
    width: clamp(1px, 12vw, 184px);
    height: clamp(1px, 3vw, 41px);
}

.navbar .center {
    flex: 1;
    text-align: center;
    justify-content: center;
    gap: 40px;
    display: flex;
}

.navbar .center a {
    color: white;
    text-decoration: none;
    font-family: 'Vag-Medium', sans-serif;
    font-size: var(--fs-nav)
}

.navbar .center a span {
    position: relative;
    display: inline-block;
}

.navbar .center a span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0%;
    height: 1px;
    background: rgb(255, 255, 255);
    transition: width 0.3s ease;
}

.navbar .center a:hover {
    color: rgb(224, 11, 82);
}

.navbar .center a:hover span::after {
    width: 100%;
    background: rgb(224, 11, 82);
}


.side-menu {
    position: fixed;
    bottom: calc(var(--fs-gap10) + var(--nav-height));
    right: var(--fs-gap10);
    width: max-content;
    height: min-content;
    background: linear-gradient(0deg, #4E1C39, #1D162E);
    padding: var(--fs-gap10);
    box-sizing: border-box;
    z-index: 800;
    display: none;
    flex-direction: column;
    border-radius: var(--fs-border-radius);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
}

.side-menu.is-open {
    animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.side-menu.not-open {
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }
}

@keyframes slideDown {
    0% {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }

    99% {
        visibility: visible;
    }

    100% {
        opacity: 0;
        transform: translateY(20%);
        visibility: hidden;
        pointer-events: none;
    }
}

.side-links {
    display: flex;
    flex-direction: column;
    gap: var(--fs-gap10);
}


.side-menu-icon {
    width: clamp(1px, 1.3vw, 20px);
    height: clamp(1px, 1.3vw, 20px);
    display: block;
}

.side-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fs-gap10);
    width: 100% !important;
    opacity: inherit;
}

@media (max-width: 768px) {
    .side-menu-icon {
        width: clamp(1px, 5.34vw, 100px);
        height: clamp(1px, 5.34vw, 100px);
        display: block;
    }

    .side-menu.side-menu.is-open,
    .side-menu.side-menu.not-open {
        display: flex;
    }
}


.navigation-links {
    display: flex;
    font-size: var(--fs-nav-links);
    font-family: 'Vag-Bold';
    color: white;
    gap: var(--fs-gap10);
    justify-content: center;
    align-items: center;
    background: rgba(146, 21, 69, 0.4);
    backdrop-filter: blur(10px);
    margin-inline: auto;
    width: fit-content;
    padding-inline: var(--fs-gap20);
    padding-block: var(--fs-gap10);
    border-radius: var(--fs-border-radius);
    margin-top: calc(-1* var(--fs-gap10));
    flex-wrap: wrap;
}



.navigation-links p {
    margin: 0px;
    font-size: var(--fs-nav-links);
    font-family: 'Vag-Bold';
}

.navigation-links a {
    text-decoration: none;
    color: white;
}

.navigation-links a:hover {
    color: rgb(229, 11, 85)
}



@media (max-width: 768px) {
    .navigation-links {
        margin-top: var(--fs-gap10);
        margin-bottom: var(--fs-gap10);
        padding-inline: var(--fs-gap10);
    }
}