/* Custom Fonts */
.lobster {
    font-family: 'Lobster', cursive;
}


.poppins {
    font-family: 'Poppins', sans-serif;
}


/* Custom Colors */
.bg-custom-teal {
    background-color: #1a535c;
}
.text-custom-teal {
    color: #1a535c;
}
.text-custom-coral {
    color: #ff6b6b;
}
.bg-custom-coral {
    background-color: #ff6b6b;
}
.bg-custom-yellow {
    background-color: #ffd166;
}
.hover-bg-custom-coral {
    background-color: #e55a5a;
}
.bg-custom-pale {
    background-color: #F8F4F0;
}


/* Animated banner gradient */
.animated-gradient-banner {
    background: linear-gradient(90deg, #ff6b6b, #ffd166, #1a535c);
    background-size: 200% 200%;
    animation: gradient-animation 10s ease infinite;
}
@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* Radial gradient for a creative hero background */
.hero-gradient-bg {
    background: radial-gradient(circle at top, #ffe6c2, #ffffff);
}


/* Sidebar styles */
#sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #1a535c;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 100;
    padding: 2rem;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
}
#sidebar.open {
    transform: translateX(0);
}


/* Overlay for when the sidebar is open */
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    display: none;
}
#overlay.active {
    display: block;
}


/* Scroll to top button */
#scrollToTopBtn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #1a535c;
    color: white;
    padding: 0.75rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    cursor: pointer;
    z-index: 50;
    opacity: 0;
    transform: translateY(20px);
}
#scrollToTopBtn.show {
    opacity: 1;
    transform: translateY(0);
}


/* Custom scrollbar for a cleaner, modern look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: #c4d7d2;
    border-radius: 4px;
}
::-webkit-scrollbar-track {
    background-color: #F8F4F0;
}


/* Modal specific styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
}
.modal.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s;
}
.modal-content {
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    max-width: 90%;
    min-width: 300px;
}