
body {
    font-family: 'Arial', sans-serif;
    background-color: #f5f5f5;
    color: black;
}

/* Hero Section */
.hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('MBA BG image.png') center/cover no-repeat;
height: 30vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
position: sticky;
top: 0;
/* Add this line to specify the sticking point */
animation: fadeIn 1.5s ease-in-out;
z-index: 999;
}@media (max-width: 768px) {
.hero-section {
height: 30vh; /* Adjust height for smaller screens */
}
}

@media (max-width: 480px) {
.hero-section {
height: 30vh; /* Further adjust for mobile screens */
}
}

.hero-section h1 {
font-size: 2rem; /* Default size */
font-weight: bold;
text-transform: uppercase;
animation: fadeInDown 2s;
padding-top: 25px;
}

.hero-section p {
font-size: 1.5rem; /* Default size */
animation: fadeInUp 2s;
}

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

@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* Media queries for responsive design */
@media (max-width: 768px) {
.hero-section h1 {
font-size: 2rem; /* Adjust size for tablets */
}
.hero-section p {
font-size: 1.25rem; /* Adjust size for tablets */
}
}

@media (max-width: 480px) {
.hero-section h1 {
font-size: 1.9rem; /* Adjust size for mobile */
}
.hero-section p {
font-size: 0.9rem; /* Adjust size for mobile */
}
}


/* Navbar Section (on Hero) */
.navbar {
    position: absolute;
    bottom: -20px;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    z-index: 1;
background: #1b3a57;
}


.navbar-nav .nav-link {
    color: #333;
    padding: 10px 15px;
    margin-right: 10px;
    border-radius: 50px;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    background-color: #ffa726;
    color: red;
}


.menu .dropdown-menu .dropdown-item{
color: #fffff;
    margin-right: 20px;
}

.menu .dropdown-menu .dropdown-item:hover{
color: #e30613;
}
/* Responsive Hero Text */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }
    .hero-section p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-section h1 {
        font-size: 1.8rem;
    }
    .hero-section p {
        font-size: 0.9rem;
    }
}

 .section-header {
font-size: 2rem;
color: #1b3a57;
margin-bottom: 20px;
border-bottom: 3px solid #1b3a57;
display: inline-block;
animation: fadeInUp 1.5s ease-in-out;
text-align: center; /* Center the text */
}
.content-section {
    margin-top: 20px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    animation: fadeIn 1.5s ease-in-out;
}


.menu {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/') center/cover no-repeat;
    padding: 5px;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.menu .nav-link {
    color: #ecf0f1;
    font-size: 1.1rem;
    padding: 10px 20px;
    background-color: transparent;
    margin: 0 10px;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    border-bottom: 2px solid transparent;
}

.menu .nav-link:hover {
    background-color: transparent;
    color: #1abc9c;
    transform: translateY(-2px); 
}


.menu .nav-item {
    margin-right: 10px;
}

.menu .nav-link.active {
    background-color: transparent;
    color: #1abc9c;
    border-bottom: 2px solid #1abc9c;
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu .nav-link {
        font-size: 1rem;
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
    .menu {
        padding: 10px;
    }
    .menu .nav-link {
        font-size: 0.9rem;
        margin: 5px 0;
        display: block;
        width: 100%;
        text-align: center;
        border-bottom: 2px solid transparent;
    }
}
 .sidebar {
height: 100%; /* Full height */
width: 250px; /* Set the width of the sidebar */
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
top: 0; /* Stay at the top */
left: -250px; /* Hidden by default */
background: linear-gradient(, #4a4e69, #22223b); /* Gradient background */
overflow-x: hidden; /* Disable horizontal scroll */
transition: left 0.5s; /* Transition effect */
padding-top: 60px; /* Place content 60px from the top */
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.5); /* Shadow for depth */
}

.sidebar a {
padding: 15px 20px; /* Increased padding */
text-decoration: none; /* No underline */
font-size: 18px; /* Adjusted font size */
color: #f0edf4; /* Light text color */
display: block; /* Make it take the full width */
transition: color 0.3s, background-color 0.3s; /* Transition effect */
border-radius: 5px; /* Rounded corners */

}

.sidebar a:hover {
color: #fff; /* White text on hover */
background-color: rgba(255, 255, 255, 0.1); /* Light background on hover */
}
.sidebar ul {
list-style-type: none; /* Remove default list bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margin */
}


.close-btn {
font-size: 30px; /* Large font size */
margin-left: auto; /* Align to the right */
margin-top: 45px;   
margin-bottom: 10px; /* Space below */
color: red; /* Light text color */
background: none; /* No background */
border: none; /* No border */
cursor: pointer; /* Pointer cursor */
transition: color 0.3s; /* Transition for color */
background-color: #dddddd;
border-radius: 15px; /* Adjusted for rounded corners */

}

.close-btn:hover {
color: #fff; /* White color on hover */
}
.navbar{
background-color: #1b3a57;
}

