body {
    font-family: 'Inter', sans-serif;
}

/* Custom styles for hamburger menu and country list */
.country-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.country-list.open {
    max-height: 500px;
    overflow-y: auto;

}

/* Aurora effect for text */
.aurora-text {
    background: linear-gradient(45deg, #a78bfa, #f472b6, #67e8f9, #34d399, #facc15);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: aurora 15s ease infinite;
}

@keyframes aurora {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Style for the initial hero text container */
#initial-hero-content {
    transition: opacity 0.5s ease-in-out;
}

/* Style for the country content container */
#country-content {
    transition: opacity 0.5s ease-in-out;
    padding-top: 2rem;

}

.portal-card {
    background-color: #1f2937;

    border-radius: 0.5rem;

    padding: 1.5rem;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: box-shadow 0.3s ease-in-out;

}

/* Glow effect on hover/focus */
.portal-card:hover,
.portal-card:focus-within {
    box-shadow: 0 0 15px 5px rgba(6, 182, 212, 0.6);
    /* Cyan glow */
}


.visit-portal-btn {
    display: inline-block;
    background-color: #4f46e5;
    /* indigo-600 */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.visit-portal-btn:hover {
    background-color: #4338ca;

}

/* Style for the country title when country content is displayed */
.country-title {

    margin-top: 0;
    margin-bottom: 2rem;
    display: block;

}

/* Styles for the large screen search dropdown */
#country-search-dropdown-lg {
    position: absolute;
    top: 55px;
    /* Position below the search bar */
    left: 50%;
    /* Center it relative to its container */
    transform: translateX(-50%);
    /* Adjust for centering */
    background-color: #1f2937;
    /* Match card background */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    /* Make it scrollable */
    overflow-y: auto;
    width: 250px;
    /* Match search bar width */
    z-index: 10;
    /* Ensure it's above other content */
    display: none;

    padding: 0.5rem 0;

}

#country-search-dropdown-lg ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#country-search-dropdown-lg li {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

#country-search-dropdown-lg li:hover {
    background-color: #374151;

}