﻿.is-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

.custom-nav-container-desktop {
    max-width: 100%;
    padding: 8px;
    display: flex;
    justify-content: center;
    position: relative;
}

.custom-nav-desktop {
    width: 60%;
    max-width: 65%;
    isolation: isolate;
    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.4);
    border: 0.5px solid #ffffff75;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    gap: 85px;
    align-items: center;
    padding: 20px 20px;
    position: relative;
    overflow: hidden;
}

.custom-nav-desktop::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(255, 255, 255, 0.05);
}

.custom-nav-desktop::after {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1.1px);
    -webkit-backdrop-filter: blur(1.1px);
    filter: url(#glass-distortion);
    -webkit-filter: url(#glass-distortion);
}

@media(min-width:1370px) and (max-width:1920px) {
    .custom-nav-desktop {
        width: 80%;
        max-width: 85%;
        gap: 75px;
    }
}

@media(max-width:1369px) {
    .custom-nav-desktop {
        width: 90%;
        max-width: 95%;
        gap: 65px;
    }
}

.nav-logo-image {
    padding-left: 8px;
    width: 150px;
    max-width: 160px;
    z-index: 999;
    filter: drop-shadow(-1px 0px 4px #000000);
}

.navbar-icon {
    color: white;
    font-size: 1.5rem;
    margin-left: 10px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.desktopAncleLink {
    text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.73);
    font-size: 20px;
    color: #fff;
    padding: 5px 12px 8px 12px;
    z-index: 999;
    width: 135px;
    text-align: center;
    transition: 0.1s ease-in-out;
}

.desktopAncleLink:hover {
    color: #fff;
    text-decoration: none;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.219);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.desktopAncleLink.active {
    text-align: center;
    padding-bottom: 5px;
    border-radius: 22px;
    background: rgb(255 255 255 / 0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 0.8px solid rgba(255, 255, 255, 0.5);
}

.icon-share-desk {
    z-index: 999;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M18 16.08c-.76 0-1.44.3-1.96.77l-7.2-4.14c.14-.3.2-.6.2-.9s-.06-.6-.2-.9l7.2-4.14c.52.47 1.2.77 1.96.77 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .3.06.6.2.9L8.44 9.87c-.52-.47-1.2-.77-1.96-.77-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.77l7.2 4.14c-.14.3-.2.6-.2.9 0 1.66 1.34 3 3 3s3-1.34 3-3-1.34-3-3-3z"/></svg>');
}

.desk-share-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 250px;
    height: 70px;
    position: absolute;
    left: 69%;
    top: 105px;
    padding: 16px 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.3px solid rgba(255, 255, 255, 0.6);
    gap: 10px;
    visibility: hidden;
    opacity: 1;
    transform: translateX(12px);
    transition: all 0.2s ease-in-out;
    align-items: center;
}

@media(max-width:1244px) {
    .desk-share-menu {
        left: 68%;
    }
}

.desk-share-menu.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.desk-share-menu a {
    color: #fff;
}

.social-icon {
    transition: all 0.1s ease-in-out;
    z-index: 999;
}

.social-icon:hover {
    transform: scale(1.5);
}