/* --------------------------------Page style--------------------------------- */
html {
    scroll-behavior: smooth;
}
body{
font-family:'poppins'
}
/* --------------------------------Page Bubble--------------------------------- */
@keyframes float-bubble {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-10px, -15px); }
    50%  { transform: translate(15px, -10px); }
    75%  { transform: translate(-5px, 10px); }
    100% { transform: translate(0, 0); }
}


.floating-bubble {
    position: absolute;
    width: 100px;
    height: 100px;
    opacity: 0.3;
    z-index: 0;
    transition: transform 10s ease-in-out;
}
/* --------------------------------Mobile styles (default)--------------------------------- */
#drawer {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 80%;
    background-color: #1f2937; /* Dark background */
    color: white;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 50;
}
#drawer.open {
    transform: translateX(0);
}
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 40;
    display: none; /* Hidden by default, shown when drawer is open */
}
.drawer-overlay.show {
    display: block;
}

/*------------------ Desktop styles (using media query) --------------------------*/
@media (min-width: 768px) {
    #drawer {
        display: none !important;  /* Hide the drawer on desktop */
        transform: translateX(-100%) !important; /* Ensure it's hidden */
    }
    .drawer-overlay {
        display: none !important;
    }
    .md\:flex { /* Targeting the navbar links */
        display: flex !important;
    }
    .md\:hidden{
        display: none;
    }
}

/* Dropdown styles */
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    transform-origin: top right;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.dropdown-content.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
.dropdown-content a {
    color: #1f2937;
    padding: 1rem;
    text-decoration: none;
    display: block;
    transition-colors 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}
.dropdown-content a:hover {
    background-color: #f7fafc;
    color: #1e40af;
}
.dropdown-content a:last-child {
    border-bottom: none;
}