/* Font import for better typography - moved to top */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

/* Ensure html and body cover the full viewport */
html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

:root {
    --primary-color: #1b4332;
    --accent-color: rgba(221, 184, 146, 0.7);
    --hover-color: #2d6a4f;
    --text-color: #333;
    --transition: all 0.3s ease;
    --font-primary: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gradient-start: #b08d57;
    --gradient-end: #ddb892;
    --green-gradient: linear-gradient(135deg, #1b4332, #2d6a4f);
    --gold-gradient: linear-gradient(135deg, #b08d57, #ddb892);
    --gold-brown-gradient: linear-gradient(135deg, #b08d57, #816653, #b08d57);
}

/* Apply the gradient background */
body {
    font-family: var(--font-primary) !important;
    font-size: 18px;
    background-color: #f8f9fa;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full viewport height */
}

/* Header styling */
header {
    background: #FFFFFF; /* White background */
    color: #003366; /* Dark blue text */
    padding: 0; /* Remove padding */
    position: relative;
    z-index: 1000; /* Ensure header is on top */
}

/* Navbar styling */
.navbar {
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.15);
    margin-bottom: 0;
    position: relative;
    z-index: 1051;
    white-space: nowrap;
    padding: 0.8rem 1.5rem;
}

.navbar .container-fluid {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Navbar links */
.navbar-nav .nav-link {
    color: var(--primary-color) !important;
    padding: 8px 15px !important;
    font-size: 1.1rem;
    font-weight: 300;
    font-family: var(--font-primary);
    letter-spacing: 0.025em;
    position: relative;
    transition: var(--transition);
    text-transform: none;
}

/* Underline animation for nav links */
.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: linear-gradient(to right, #b08d57, #ddb892);
    transition: width 0.3s ease;
    transform: translateX(-50%);
    opacity: 0.8;
}

.navbar-nav .nav-link:hover::after {
    width: calc(100% - 30px); /* Adjust for padding */
}

/* Split button style for nav items with dropdowns */
.nav-item.dropdown {
    display: flex;
    align-items: center;
}

.nav-item.dropdown > .nav-link {
    display: flex;
    align-items: center;
    padding-right: 30px !important; /* Space for arrow */
}

/* Arrow styling for dropdown toggles */
.nav-item.dropdown > .nav-link::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: none;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
}

.nav-item.dropdown:hover > .nav-link::before {
    transform: translateY(-30%) rotate(225deg);
}

/* Dropdown menu base styles */
.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    transform-origin: top;
    display: none;
    opacity: 0;
    visibility: hidden;
    border-radius: 8px;
    border: none;
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.1);
    padding: 6px;
    margin-top: 0;
    z-index: 1000;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show animation for dropdowns */
.dropdown-menu.show,
.nav-item.dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    animation: dropdownSlide 0.2s ease forwards;
}

@keyframes dropdownSlide {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Submenu specific positioning */
.dropdown-submenu .dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -8px !important;
}

/* Mobile optimizations for dropdowns */
@media (max-width: 991px) {
    /* Navbar toggler button */
    .navbar-toggler {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1053;
        border: none;
        padding: 0.5rem;
        background: transparent;
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Basic mobile menu structure */
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: -320px;
        width: 320px;
        height: 100vh;
        background: #ffffff;
        padding: 1rem;
        z-index: 1052;
        transition: right 0.3s ease;
        overflow-y: auto;
    }

    .navbar-collapse.show {
        right: 0;
    }

    /* Nav items and links */
    .navbar-nav {
        padding-top: 4rem;
        padding-bottom: 6rem;
    }

    .nav-item {
        border-bottom: 1px solid #e0e0e0;
    }

    .nav-item:last-child {
        border-bottom: none;
        margin-bottom: 4rem;
    }

    .nav-link {
        padding: 12px 15px !important;
        font-size: 16px !important;
        color: #003366 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Basic dropdown styles */
    .dropdown-menu {
        display: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    .dropdown-menu.show {
        display: block !important;
    }

    /* Dropdown items */
    .dropdown-item {
        padding: 10px 15px 10px 30px !important;
        font-size: 15px !important;
        color: #003366 !important;
        border-left: 2px solid #e0e0e0;
        margin-left: 15px;
    }

    /* Dropdown arrows */
    .nav-item.dropdown > .nav-link::after {
        content: '';
        width: 8px;
        height: 8px;
        border-right: 2px solid #003366;
        border-bottom: 2px solid #003366;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
        margin-left: auto;
    }

    .nav-item.dropdown.show > .nav-link::after {
        transform: rotate(-135deg);
    }

    /* Language switcher */
    .language-switcher {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1rem;
        background: #ffffff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1053;
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    /* Scroll to top button */
    .scroll-top-btn {
        z-index: 1020;
    }
}

/* User area styling */
.user-area {
    position: relative;
    padding: 6px 14px;
    border-radius: 20px;
    margin: 0 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px; /* Restored to original height */
}

.user-area .nav-link {
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 300;
    font-family: var(--font-primary);
    letter-spacing: 0.025em;
    line-height: 1;
    height: 100%;
}

.user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    line-height: 1;
    margin-top: -1px; /* Slight adjustment to vertically align icon */
}

.user-area::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    background: var(--gold-gradient) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.8;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.user-area:hover::after {
    opacity: 1;
}

.user-area:hover .user-icon {
    transform: translateY(-1px);
    filter: brightness(1.2);
}

/* Contact Bookmark Widget */
.contact-bookmark {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, 
        rgba(176, 141, 87, 0.5), 
        rgba(221, 184, 146, 0.5)
    );
    padding: 15px;
    border-radius: 25px 0 0 25px;
    cursor: pointer;
    z-index: 2000; /* Lowered z-index to be behind scroll bar */
    transition: all 0.3s ease;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.contact-bookmark i {
    color: var(--primary-color);
    font-size: 1.2rem;
    transition: all 0.3s ease;
    transform-origin: center center;
}

/* Only animate on hover when not active */
.contact-bookmark:hover:not(.active) i {
    animation: phoneRing 1s ease-in-out infinite;
}

/* Stop animation when active */
.contact-bookmark.active i {
    animation: none;
    transform: scale(1.1);
}

.contact-bookmark:hover {
    background: linear-gradient(135deg, 
        rgba(176, 141, 87, 0.8), 
        rgba(221, 184, 146, 0.8)
    );
    transform: translateY(-50%) scale(1.05);
}

@keyframes phoneRing {
    0% {
        transform: rotate(0deg) scale(1);
    }
    20% {
        transform: rotate(-15deg) scale(1.1);
    }
    40% {
        transform: rotate(15deg) scale(1.1);
    }
    60% {
        transform: rotate(-10deg) scale(1.1);
    }
    80% {
        transform: rotate(10deg) scale(1.1);
    }
    100% {
        transform: rotate(0deg) scale(1);
    }
}

.contact-dropdown-content {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    width: 250px;
    margin-right: 15px;
    z-index: 999; /* Match parent z-index */
}

.contact-bookmark.active .contact-dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(-10px);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    padding: 10px;
    text-decoration: none;
    color: var(--primary-color);
    transition: all 0.3s ease;
    border-radius: 8px;
}

.contact-item:hover {
    background: rgba(176, 141, 87, 0.1);
    transform: translateX(5px);
}

.contact-item i {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #b08d57, #ddb892);
    border-radius: 50%;
    margin-right: 12px;
    color: white;
    font-size: 14px;
    transition: all 0.3s ease;
}

.contact-item:hover i {
    transform: scale(1.1);
    background: linear-gradient(135deg, #ddb892, #b08d57);
}

.contact-item-text {
    display: flex;
    flex-direction: column;
}

.contact-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}

.contact-value {
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500;
}

/* Animation for the bookmark */
@keyframes bookmarkBounce {
    0%, 100% { 
        transform: translateY(-50%) scale(1); 
    }
    50% { 
        transform: translateY(-50%) scale(1.1); 
    }
}

.contact-bookmark.bounce {
    animation: bookmarkBounce 0.5s ease;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .contact-bookmark {
        padding: 12px;
    }

    .contact-dropdown-content {
        width: 220px;
        margin-right: 10px;
    }

    .contact-item {
        padding: 8px;
    }

    .contact-item i {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }

    .contact-label {
        font-size: 11px;
    }

    .contact-value {
        font-size: 13px;
    }
}

/* Contact dropdown specific styles */
.contact-dropdown {
    min-width: 280px !important;
    padding: 15px !important;
    right: auto !important;
    left: 0 !important;
    transform: translateY(10px);
}

.nav-item.dropdown:hover .contact-dropdown {
    transform: translateY(0);
}

/* Submenu arrow styling */
.dropdown-submenu > .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 35px;
    position: relative;
}

.dropdown-submenu > .dropdown-item::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    position: absolute;
    right: 15px;
    transform: translateY(-50%) rotate(-45deg);
    top: 50%;
    transition: transform 0.3s ease;
}

.dropdown-submenu:hover > .dropdown-item::after {
    transform: translateY(-50%) rotate(-45deg) scale(1.2);
}

/* Hover bridge for easier navigation */
.dropdown::before,
.dropdown-submenu::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 30px;
    background: transparent;
}

.dropdown-submenu::after {
    content: '';
    position: absolute;
    top: 0;
    right: -30px;
    width: 30px;
    height: 100%;
    background: transparent;
}

/* Dropdown items styling */
.dropdown-item {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--primary-color);
    padding: 10px 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    margin: 0 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(176, 141, 87, 0.15), 
        rgba(221, 184, 146, 0.15)
    );
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: -1;
    border-radius: 6px;
}

.dropdown-item:hover {
    color: var(--primary-color);
    transform: translateX(8px);
    padding-left: 25px;
    background: linear-gradient(135deg, #1b4332, #2d6a4f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dropdown-item:hover::before {
    width: calc(100% + 8px);
    margin-left: -4px;
    box-shadow: 
        0 2px 8px rgba(176, 141, 87, 0.1),
        0 2px 8px rgba(221, 184, 146, 0.1);
}

/* Main content area */
main {
    padding: 1px 0 60px 0; /* Add bottom padding of 60px */
    flex: 1;
}

/* Footer styling */
footer {
    background: #FFFFFF;
    color: #003366;
    padding: 1px 0;
    text-align: center;
    border-top: 1px solid #ddd;
    margin-top: auto;
    position: relative; /* Change to relative */
    width: 100%; /* Ensure it spans the full width */
    bottom: 0; /* Align it to the bottom */
    z-index: 1000; /* Ensure the footer is on top */
}

    footer a {
        color: #003366; /* Dark blue links */
    }

        footer a:hover {
            color: #0056b3; /* Darker blue on hover */
        }

/* Common button styles */

.sticky-top {
    top: 0; /* Keep it at the top */
    z-index: 1030; /* Ensure it is above other content */
}

/* Bottom bar styling */
.bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 12px 25px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 
        0 -4px 20px rgba(0, 51, 102, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.7);
    z-index: 1000;
    text-align: center;
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.bottom-bar:hover {
    transform: scale(1.03);
    box-shadow: 
        0 -6px 25px rgba(0, 51, 102, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* Footer link styling */
.footer-link {
    color: var(--primary-color) !important;
    text-decoration: none;
    position: relative;
    padding: 5px 10px;
    transition: all 0.3s ease;
    font-weight: 500;
}

.footer-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gold-gradient);
    transition: width 0.3s ease, left 0.3s ease;
    border-radius: 2px;
}

.footer-link:hover {
    color: #0056b3 !important;
    transform: translateY(-2px);
}

.footer-link:hover::before {
    width: calc(100% - 20px);
    left: 10px;
}

/* Separator styling */
.bottom-bar .mx-2 {
    color: rgba(0, 51, 102, 0.3);
    font-weight: 300;
    margin: 0 8px;
    position: relative;
    top: -1px;
}

/* Copyright text styling */
.bottom-bar span:first-child {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .bottom-bar {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .footer-link {
        padding: 3px 6px;
    }
    
    .bottom-bar .mx-2 {
        margin: 0 4px;
    }
}

.nextbyte_logo {
    height: 75px;
    width: auto;
    margin-left: 5px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Dropdown core styles */
.dropdown {
    position: relative !important;
}

/* Language switcher styling */
.language-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    color: #666;
    font-weight: 500;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: visible;
    margin: 0 3px;
    box-shadow: 0 2px 5px rgba(0, 51, 102, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.language-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gold-gradient);
    border-radius: 50%;
    opacity: 0.2;
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: -1;
}

/* Gradient rim */
.language-link::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gold-brown-gradient);
    border-radius: 50%;
    z-index: -2;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.language-link:hover {
    color: #111;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 51, 102, 0.25);
    border-color: transparent;
}

.language-link:hover::before {
    opacity: 0.8;
}

.language-link:hover::after {
    opacity: 0.8;
}

.language-link.active {
    color: white;
    font-weight: 600;
    transform: translateY(0);
    border-color: transparent;
}

.language-link.active::before {
    opacity: 0.9;
    background: var(--green-gradient);
}

.language-link.active::after {
    opacity: 0.9;
    background: var(--green-gradient);
}

.language-link.active:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(0, 51, 102, 0.3);
}

.language-link.active:hover::before {
    opacity: 0.8;
    background: var(--gold-gradient);
}

.language-link.active:hover::after {
    opacity: 0.8;
    background: var(--gold-brown-gradient);
}

/* User icon and area styling */
.user-area {
    position: relative;
    padding: 5px 10px;
    border-radius: 20px;
    margin-right: 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: transparent;
}

.user-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 2px solid transparent;
    background: var(--gold-gradient) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.8; /* Increased opacity to make rim more visible */
    transition: opacity 0.4s ease;
    z-index: -1; /* Ensure rim stays behind content */
}

.user-area:hover::after {
    opacity: 1;
}

.user-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.user-area:hover .user-icon {
    transform: translateY(-1px);
    filter: brightness(1.2);
}

/* Notification bell styling */
.notification-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.notification-bell .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    position: relative;
    height: 100%;
    transform-style: preserve-3d;
    perspective: 500px;
}

.notification-bell i {
    font-size: 1.3rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
    transform-origin: top center;
}

.notification-bell:hover i {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transform: translateY(-1px);
    animation: bellShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes bellShake {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(8deg); }
    40% { transform: rotate(-8deg); }
    60% { transform: rotate(4deg); }
    80% { transform: rotate(-4deg); }
    90% { transform: rotate(2deg); }
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background: #8B1E3F;  /* Deep burgundy/maroon color */
    color: #ffffff;
    border-radius: 50%;
    padding: 0.25em 0.6em;
    font-size: 0.7rem;
    box-shadow: 0 2px 5px rgba(139, 30, 63, 0.3);
    transition: all 0.3s ease;
}

@keyframes badgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(139, 30, 63, 0.4);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(139, 30, 63, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(139, 30, 63, 0);
    }
}

.notification-new {
    animation: bellRing 1s ease-out;
}

.notification-new + .notification-badge {
    animation: badgePulse 1.5s infinite;
}

@keyframes bellRing {
    0% { transform: rotate(0); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-15deg); }
    60% { transform: rotate(7deg); }
    80% { transform: rotate(-7deg); }
    100% { transform: rotate(0); }
}

@keyframes badgeBubble {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes badgeGlow {
    0% { box-shadow: 0 0 0 0 rgba(139, 30, 63, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(139, 30, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 30, 63, 0); }
}

/* User dropdown styling enhancement */
.user-area .nav-link {
    font-size: 1.1rem; /* Match navbar link size */
    font-weight: 300; /* Light weight */
    font-family: var(--font-primary);
    letter-spacing: 0.025em;
    padding: 5px 8px !important; /* Adjust padding to fit inside rim */
    display: flex;
    align-items: center;
}

.navbar-nav {
    flex-wrap: nowrap;
}

/* Language switcher enhancements to match the navbar */
.language-link {
    font-family: var(--font-primary);
    font-weight: 500;
}

/* Add a larger clickable area for dropdown items and improve hover target */
.dropdown-item {
    position: relative;
    z-index: 1;
}

/* Create an invisible pseudo-element to increase the hover area */
.dropdown-submenu > a:before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px; /* Extend left to create a bridge to the submenu */
    width: calc(100% + 40px); /* Extend right as well */
    height: 100%;
    z-index: -1;
}

/* Create a hover bridge between parent menu and submenu */
.dropdown-submenu:after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px; /* Extend right to create a bridge */
    width: 20px; /* Width of the bridge */
    height: 100%;
    pointer-events: auto; /* Allow interaction */
}

/* Enhance the hover area for dropdown parents */
.dropdown > a,
.dropdown-submenu > a {
    padding-right: 25px !important; /* More space for dropdown indicators */
}

/* Show dropdown on hover/click/focus with no delay */
.dropdown:hover > .dropdown-menu,
.dropdown.show > .dropdown-menu,
.dropdown-menu:hover,
.dropdown:focus-within > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    pointer-events: auto;
}

/* Submenu styling */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0 !important;
    left: 100% !important;
    margin-top: -8px !important;
    margin-left: 0;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    /* Even longer timeout for submenus */
    transition: visibility 0s linear 3s, opacity 0.3s ease;
    pointer-events: none;
}

/* Show submenu on hover/click/focus with no delay */
.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu.show > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu,
.dropdown-submenu > .dropdown-menu:hover {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    pointer-events: auto;
}

/* Create a wide hover corridor between dropdown item and its submenu */
.dropdown-submenu::after {
    content: '';
    position: absolute;
    top: 0;
    right: -30px;  /* Wide corridor to the right */
    width: 30px;
    height: 100%;
    background: transparent;
    z-index: 1040;
}

/* Create huge invisible hover bridges between all menu levels */
.dropdown::before,
.dropdown-submenu::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 30px; /* Tall bridge to child menu */
    background: transparent;
    z-index: 1040;
}

/* Update hover effect for dropdown items */
.dropdown-item {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--primary-color);
    padding: 10px 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    margin: 0 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(176, 141, 87, 0.15), 
        rgba(221, 184, 146, 0.15)
    );
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: -1;
    border-radius: 6px;
}

.dropdown-item:hover {
    color: var(--primary-color);
    transform: translateX(8px);
    padding-left: 25px;
    background: linear-gradient(135deg, #1b4332, #2d6a4f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dropdown-item:hover::before {
    width: calc(100% + 8px);
    margin-left: -4px;
    box-shadow: 
        0 2px 8px rgba(176, 141, 87, 0.1),
        0 2px 8px rgba(221, 184, 146, 0.1);
}

/* Nav link group for combined button and dropdown */
.nav-link-group {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link-group .nav-link {
    padding-right: 35px !important;
}

/* Gradient arrow for main nav dropdowns */
.nav-link-group::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--gold-gradient);
    transform: translateY(-50%);
    transition: all 0.3s ease;
    opacity: 0.8;
}

.nav-link-group::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 8px;
    height: 2px;
    background: var(--gold-gradient);
    transform: translateY(-50%) rotate(90deg);
    transition: all 0.3s ease;
    opacity: 0.8;
}

.nav-item.dropdown:hover .nav-link-group::before {
    transform: translateY(-50%) rotate(0deg);
}

/* Remove dropdown arrow from user area */
.user-area .nav-link::after,
.user-area .nav-link::before {
    display: none !important;
}

/* Dropdown menu animation and styling */
.dropdown-menu {
    padding: 8px;
    min-width: 220px;
}

/* Show dropdowns on hover with animation */
.nav-item.dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Submenu arrow styling */
.dropdown-submenu > .dropdown-item::after {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--gold-gradient);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.8;
}

.dropdown-submenu:hover > .dropdown-item::after {
    transform: translateY(-50%) scale(1.2);
    opacity: 1;
}

/* Dropdown items hover effect */
.dropdown-item {
    font-family: var(--font-primary);
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--primary-color);
    padding: 10px 20px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 1;
    margin: 0 6px;
    border-radius: 6px;
    white-space: nowrap;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(176, 141, 87, 0.15), 
        rgba(221, 184, 146, 0.15)
    );
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: -1;
    border-radius: 6px;
}

.dropdown-item:hover {
    color: var(--primary-color);
    transform: translateX(8px);
    padding-left: 25px;
    background: linear-gradient(135deg, #1b4332, #2d6a4f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dropdown-item:hover::before {
    width: calc(100% + 8px);
    margin-left: -4px;
    box-shadow: 
        0 2px 8px rgba(176, 141, 87, 0.1),
        0 2px 8px rgba(221, 184, 146, 0.1);
}

/* Submenu positioning and animation */
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -8px;
    margin-left: 0;
    transform: translateX(-10px);
}

.dropdown-submenu:hover > .dropdown-menu {
    transform: translateX(0);
}

/* Hover bridges for smoother navigation */
.dropdown::before,
.dropdown-submenu::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.dropdown-submenu::after {
    content: '';
    position: absolute;
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    background: transparent;
}

/* Animation for dropdown appearance */
@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* User area dropdown specific styling */
.user-area .dropdown-menu {
    min-width: 180px;
    right: 0 !important;
    left: auto !important;
    margin-top: 5px;
}

.user-area .dropdown-item {
    font-size: 1rem;
    padding: 8px 16px;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.user-area .dropdown-item:hover {
    transform: translateX(6px);
    padding-left: 20px;
}

.user-area .dropdown-item:hover::before {
    width: calc(100% + 6px);
    margin-left: -3px;
}

/* Scroll to top button styling */
.scroll-top-btn {
    position: fixed;
    bottom: 80px;
    right: 40px;
    width: 60px;  /* Increased from 45px */
    height: 60px; /* Increased from 45px */
    border-radius: 50%;
    background: var(--gold-gradient);
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7; /* Increased from 0.5 for better visibility */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 51, 102, 0.4); /* Enhanced shadow */
    z-index: 1020;
    padding: 0;
}

.scroll-top-btn i {
    font-size: 24px; /* Increased from default size */
    color: white;
    transition: all 0.3s ease;
}

.scroll-top-btn:hover {
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0, 51, 102, 0.5);
}

@media (max-width: 991px) {
    .scroll-top-btn {
        bottom: 90px;
        right: 20px;
        width: 50px;  /* Increased from 40px */
        height: 50px; /* Increased from 40px */
        z-index: 1020;
    }
    
    .scroll-top-btn i {
        font-size: 20px; /* Increased from 18px */
    }

    .navbar-collapse {
        z-index: 1052;
    }

    .navbar-toggler {
        z-index: 1053;
    }

    /* Mobile menu section separators */
    .nav-item {
        position: relative;
        padding: 8px 0;
    }

    .nav-item:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, 
            rgba(176, 141, 87, 0.2), 
            rgba(221, 184, 146, 0.2), 
            rgba(176, 141, 87, 0.2));
    }

    /* Adjust dropdown items spacing and borders */
    .dropdown-menu {
        margin: 8px 0 !important;
        padding: 8px 0 !important;
        background: rgba(176, 141, 87, 0.03) !important;
        border-radius: 8px !important;
    }

    .dropdown-item {
        padding: 10px 15px !important;
        margin: 2px 8px !important;
    }

    /* Inner dropdowns (submenus) */
    .dropdown-submenu .dropdown-menu {
        margin: 4px 0 4px 15px !important;
        padding: 4px 0 !important;
        border-left: 2px solid rgba(176, 141, 87, 0.2) !important;
        border-radius: 0 8px 8px 0 !important;
    }

    /* Navbar collapse adjustments */
    .navbar-collapse {
        z-index: 1052;
        padding: 1rem !important;
    }

    .navbar-toggler {
        z-index: 1053;
    }

    /* Add section headers */
    .nav-section-header {
        font-size: 0.85rem;
        color: rgba(0, 51, 102, 0.6);
        padding: 8px 15px;
        margin-top: 15px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }
}

/* Arrow spin animation */
@keyframes spinArrow {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(360deg) scale(1.2); }
    100% { transform: rotate(720deg); }
}

.scroll-top-btn i.spin-arrow {
    animation: spinArrow 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Contact dropdown specific styles */
.contact-dropdown {
    min-width: 280px !important;
    padding: 15px !important;
}

.contact-info-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: var(--primary-color);
    transition: all 0.3s ease;
    border-radius: 6px;
    margin-bottom: 5px;
}

.contact-info-item i {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.contact-info-item:hover {
    background: linear-gradient(to right, rgba(176, 141, 87, 0.1), rgba(221, 184, 146, 0.1));
    transform: translateX(5px);
}

.contact-info-item:hover i {
    transform: scale(1.2);
}

.contact-info-label {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 2px;
}

.contact-info-value {
    font-weight: 500;
    color: var(--primary-color);
}

/* Mobile optimizations */
@media (max-width: 991px) {
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        padding: 1rem;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 51, 102, 0.15);
        margin-top: 1rem;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        backdrop-filter: blur(10px);
        width: 100%;
    }

    .navbar-nav {
        width: 100%;
    }

    .nav-item {
        width: 100%;
        margin: 2px 0;
    }

    .nav-item.dropdown {
        display: block;
        width: 100%;
    }

    .nav-link-group {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Dropdown menu base styles for mobile */
    .dropdown-menu {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        margin: 5px 0 !important;
        padding: 0 !important;
        background: transparent !important;
        animation: none !important;
    }

    /* Inner dropdowns (submenus) */
    .dropdown-submenu .dropdown-menu {
        margin-left: 0 !important;
        padding-left: 1rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-left: 2px solid rgba(176, 141, 87, 0.3) !important;
    }

    /* Dropdown items in mobile view */
    .dropdown-item {
        padding: 12px 16px !important;
        margin: 2px 0 !important;
        border-radius: 8px !important;
        white-space: normal !important;
        width: 100% !important;
        font-size: 1rem !important;
    }

    .dropdown-item:hover {
        transform: translateX(5px) !important;
        background: rgba(176, 141, 87, 0.1) !important;
    }

    /* Remove dropdown arrows and hover effects */
    .nav-link-group::before,
    .nav-link-group::after,
    .dropdown-submenu > .dropdown-item::after,
    .nav-item.dropdown > .nav-link::before {
        display: none !important;
    }

    /* Adjust nav links for better mobile visibility */
    .navbar-nav .nav-link {
        padding: 12px 16px !important;
        font-size: 1.1rem !important;
    }

    /* Contact dropdown adjustments */
    .contact-dropdown {
        padding: 0 !important;
    }

    .contact-info-item {
        margin: 5px 0 !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    /* Override any desktop-specific hover effects */
    .dropdown::before,
    .dropdown::after,
    .dropdown-submenu::before,
    .dropdown-submenu::after {
        display: none !important;
    }

    /* Ensure dropdowns are properly contained */
    .navbar-nav .dropdown {
        position: static !important;
    }

    /* Animation keyframes */
    @keyframes mobileSlide {
        0% {
            opacity: 0;
            transform: translateY(-5px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Ensure proper stacking on mobile */
    .navbar > .container-fluid {
        padding: 0 1rem;
    }

    .navbar-collapse {
        order: 2;
    }

    /* Prevent any unwanted overflow */
    .dropdown,
    .dropdown-menu,
    .dropdown-submenu {
        overflow: visible !important;
    }

    /* Mobile adjustments for user area */
    .user-area {
        width: 100%;
        height: 36px; /* Match desktop height */
        margin: 5px 0;
        justify-content: flex-start;
    }

    .user-area .nav-link {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Cookie Consent Styles */
.cookie-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    z-index: 9998;
    display: none;
    transition: opacity 0.4s ease;
}

.cookie-overlay.show {
    opacity: 1;
}

.cookie-consent-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    max-width: 500px;
    width: 90%;
    display: none;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(176, 141, 87, 0.1);
}

.cookie-consent-popup.show {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.cookie-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.1s;
}

.cookie-consent-popup.show .cookie-content {
    opacity: 1;
    transform: translateY(0);
}

.cookie-content h3 {
    color: transparent;
    font-size: 1.3em;
    margin-bottom: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #b08d57, #ddb892);
    -webkit-background-clip: text;
    background-clip: text;
}

.cookie-content p {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
    font-size: 0.95em;
}

.cookie-settings {
    background: rgba(176, 141, 87, 0.05);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.cookie-option {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(176, 141, 87, 0.1);
}

.cookie-option:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.cookie-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cookie-option-header span {
    font-weight: 500;
    color: #333;
    font-size: 0.95em;
}

.cookie-description {
    font-size: 0.85em;
    color: #666;
    margin-left: 0;
}

/* Switch styling */
.cookie-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    margin: 8px;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: .4s;
    border-radius: 34px;
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cookie-switch input:checked + .switch-slider {
    background: linear-gradient(135deg, #b08d57, #ddb892);
}

.cookie-switch input:checked + .switch-slider:before {
    transform: translateX(22px);
}

.cookie-switch.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.cookie-switch.disabled .switch-slider {
    background: linear-gradient(135deg, #b08d57, #ddb892);
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.cookie-button {
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.9em;
}

.cookie-button.accept-all {
    background: linear-gradient(135deg, #b08d57, #ddb892);
    color: white;
    border: none;
}

.cookie-button.accept-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(176, 141, 87, 0.2);
}

.cookie-button.save-preferences {
    background: white;
    border: 2px solid #b08d57;
    color: #b08d57;
}

.cookie-button.save-preferences:hover {
    background: rgba(176, 141, 87, 0.05);
}

.cookie-link {
    color: #b08d57;
    text-decoration: none;
    position: relative;
    font-size: 0.85em;
}

.cookie-link:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(135deg, #b08d57, #ddb892);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.cookie-link:hover:after {
    transform: scaleX(1);
    transform-origin: left;
}

@media (max-width: 768px) {
    .cookie-consent-popup {
        width: 95%;
        padding: 20px;
    }

    .cookie-content h3 {
        font-size: 1.2em;
    }

    .cookie-content p {
        font-size: 0.9em;
    }

    .cookie-settings {
        padding: 12px;
    }

    .cookie-actions {
        flex-direction: column;
        gap: 8px;
    }

    .cookie-button {
        width: 100%;
        margin: 4px 0;
        padding: 12px 20px;
    }
}