@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Nunito:wght@300;400;600&display=swap');

/* Apply Poppins as the default font for the whole page */
body {
font-family: 'nunito', sans-serif;
background-color: white;
font-family: 'poppins' sans-serif;
}



/* Ensure burgundy div is always on top */
.burgundy-nav {
position: relative;
z-index: 50; /* Higher than white div */
}

/* Ensure white div is below */
.white-nav {
position: relative;
z-index: 10;
}

/* Dropdown Styles */
.dropdown {
    position: absolute;
    z-index: 20; /* Ensure it's above other sections */
    background: white;
    display: none; /* Hidden by default */
    left: 0;
    margin-top: 10px; /* Add margin if necessary */
    top: 100%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds a soft shadow */
}

.show {
    display: block;
}


/* Initially hidden, positioned below navbar */
#mobile-menu {
position: absolute;
top: 100%; /* Ensures it starts below the navbar */
left: 0;
width: 100%;
background-color: #800020;
transform: translateY(-100%);
transition: transform 0.5s ease-in;
transition: transform 0.5s ease-out;
opacity: 0;
visibility: hidden;
}

/* Show menu when active */
#mobile-menu.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}

/* Smooth dropdown animation */
.dropdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out;
}

.dropdown-content.show {
max-height: 150px; /* Adjust height as needed */
}






/* apply button start of nav */
.Apply-button {
position: relative;
transition: all 0.3s ease-in-out;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
padding-block: 0.5rem;
padding-inline: 1.25rem;
background-color: #fdc500;
border-radius: 9999px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #840424;
gap: 10px;
font-weight: bold;
border: 3px solid #ffffff4d;
outline: none;
overflow: hidden;
font-size: 15px;
}

.icon {
width: 24px;
height: 24px;
transition: all 0.3s ease-in-out;
}

.Apply-button:hover {
transform: scale(1.05);
border-color: #fff9;
}

.Apply-button:hover .icon {
transform: translate(4px);
}

.Apply-button:hover::before {
animation: shine 1.5s ease-out infinite;
}

.Apply-button::before {
content: "";
position: absolute;
width: 100px;
height: 100%;
background-image: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.8),
rgba(255, 255, 255, 0) 70%
);
top: 0;
left: -100px;
opacity: 0.6;
}

@keyframes shine {
0% {
left: -100px;
}

60% {
left: 100%;
}

to {
left: 100%;
}
}


/* apply buton ends of Nav */


/* header styling starts */

@keyframes fade {
    0% { opacity: 0; }
    33% { opacity: 1; }
    66% { opacity: 1; }
    100% { opacity: 0; }
}

.animate-fade {
    animation: fade 4.5s infinite;
}

.animation-delay-1500 {
    animation-delay: 1.5s;
}

.animation-delay-3000 {
    animation-delay: 3s;
}
/* Send background images to the back */
.absolute.inset-0.w-full.h-full {
    z-index: -10;}

/* header styling ends */


/* hexagon styling */