/* General Styles */
html {
    scroll-padding-top: 30px; /* Adjust this value to match the height of your fixed header */
}

body {
    font-family: 'Arial', sans-serif;
    color: #333;
}

/* Hero Section */
.jumbotron {
    background: #f5f5f5;
    padding: 100px 0;
    margin-bottom: 0;
}

.jumbotron .btn-primary {
    background-color: #9b5d24;
    border-color: #9b5d24;
}

/* About Us Section */
#about {
    background: #ffffff;
    color: #555;
}

/* Courses Section */
#courses h3 {
    color: #9b5d24;
}

#courses .btn-secondary {
    background-color: #ffae42;
    border-color: #ffae42;
}

/* Team Section */
#team  .btn-secondary {
    background-color: #ffae42;
    border-color: #ffae42;
}

/* Contact Section */
#contact {
    color: #555;
}

.names h5 {
    color: #9b5d24;
}

/* Footer */
footer {
    background: #333;
    color: #fff;
}


/* Social Links for Footer */
footer .social-links a i {
    transition: color 0.3s ease, transform 0.3s ease; /* Added transition */
}

.social-links a i:hover {
    color: #ffae42; /* Change color on hover */
    transform: scale(1.1); /* Slightly enlarge link on hover */
}
.social-links a:hover{
    text-decoration: none;
}

/* Custom Background for Footer */
.bg-custom {
    background-color: #9b5d24; /* Same as Explore Our Courses button */
}

/* To ensure text remains visible on this background */
.bg-custom p {
    color: white;
}

/* Custom Button Style */
.btn-custom {
    background-color: #9b5d24; /* Same as Explore Our Courses button */
    color: white; /* Ensure the text color contrasts well */
    border: none; /* Remove border if necessary */
}

.btn-custom:hover {
    background-color: #7c4a1e; /* Darker shade for hover effect */
    color: white;
}

/* Custom Link Style */
.custom-link {
    color: #9b5d24;
    text-decoration: none;
}

.custom-link:hover {
    color: #7c4a1e;
    text-decoration: underline; /* Optional: Add underline on hover */
}

.carousel-item img {
    height: 400px; /* Set a height that works well with your layout */
    object-fit: cover; /* Ensures the image covers the entire space without distortion */
}

/* General Styles for Dropdown Menu */
.nav-item .dropdown-menu {
    background-color: #f5f5f5; /* Matches hero section background */
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for better visibility */
}

.nav-item .dropdown-menu .dropdown-item {
    color: #333; /* Match general text color */
    padding: 10px 20px; /* Adjust padding for spacing */
    font-family: 'Arial', sans-serif; /* Match general font */
}

.nav-item .dropdown-menu .dropdown-item:hover {
    background-color: #ffae42; /* Match secondary button hover color */
    color: white; /* Ensure text is readable on hover */
}

/* Hover Effect for Main Courses Link */
.nav-item.dropdown:hover .nav-link {
    color: #9b5d24; /* Matches main brand color */
}

.nav-item .dropdown-toggle::after {
    color: #9b5d24; /* Adjust the dropdown arrow color */
}

/* Display Dropdown on Hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

/* Optional: Add Transition for Smooth Hover Effect */
.nav-item .dropdown-menu {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.flyer-item img {
    max-width: 100%; /* Ensure responsiveness */
    height: auto; /* Maintain aspect ratio */
}

.flyer-item img.limited-width {
    max-width: 400px; /* Limit the width to 400px on large screens */
    margin: 0 auto; /* Center the image */
    display: block; /* Ensure block-level display for centering */
}

/* Ensure image can expand fully on smaller screens */
@media (max-width: 768px) {
    .flyer-item img.limited-width {
        max-width: 100%; /* Allow full width on smaller screens */
    }
}