/* Nav bar */
.navbar {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
 
.navbar-nav .nav-link:hover {
    color: rgb(212, 166, 49);
}

.navbar-brand {
    margin: 0;
    padding: 0;
    font-size: 1.8rem;
    font-weight: 350;
    color: rgb(212, 166, 49);
    text-decoration: none;
    pointer-events: none; /* Disables hover and click interactions */
}


.navbar-subtitle {
    font-size: 0.9rem; /* Smaller font size */
    margin: 0;
    padding: 0;
    color: rgb(100, 100, 100); /* Optional: Adjust color */
    line-height: 1.2; /* Adjust spacing */
}

.navbar.scrolled {
    background-color: rgb(212, 166, 49) !important;
    transition: background-color 0.5s ease;
}

.navbar.scrolled .navbar-brand,
.navbar.scrolled .navbar-subtitle {
    opacity: 0; /* Make the text invisible */
    transition: opacity 0.3s ease; /* Smooth transition */
}

.navbar.scrolled .nav-link:hover {
    color: white; /* Change hover color to white */
}

.navbar.scrolled img {
    height: 70px; /* Increase the logo size */
    transition: height 0.3s ease; /* Smooth transition */
}


/* Footer */
footer {
    background-color: rgb(43, 39, 29); /* Dominant gold color */
    color: white;
    padding: 40px 0; /* Add padding to ensure content is not cut off */
}

footer a {
    color: rgba(255, 255, 255, 0.8); /* Slightly muted white */
    text-decoration: none;
}

footer a:hover {
    color: white; /* Bright white on hover */
}

footer .fas, footer .fab {
    font-size: 1.2rem;
}

.footer h5 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.footer p, .footer a {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8); /* Slightly muted white */
    text-decoration: none;
}

.footer .social-icons a {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.footer .social-icons a:hover {
    color: #343a40; /* Darker color on hover */
}

.footer .form-control {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.footer .btn-light {
    background-color: white;
    color: rgb(212, 166, 49);
    border: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.footer .btn-light:hover {
    background-color: #b58e2e; /* Darker gold */
    color: white;
}

.text-light {
    color: rgba(255, 255, 255, 0.8) !important; /* Ensure text is visible */
}


/* slideshow */
.carousel-item img {
    height: 500px; /* Adjust the height as needed */
    object-fit: cover; /* Ensures the image covers the entire slide area */
}

.carousel-caption {
    position: absolute;
    top: 50%;
    left: 5%; /* Align the caption to the left */
    transform: translateY(-50%); /* Center vertically */
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: left; /* Align text to the left */
    max-width: 40%; /* Optional: Limit the width of the caption */
}

.carousel-caption h1 {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.carousel-caption p {
    font-size: 1.2rem;
    margin: 0;
}

/* General styles */
body {
    margin: 0;
    padding-top: 80px; /* Adjust based on the height of your navbar */
}


/* News section */
.news-section {
    background-color: #f8f9fa; /* Light background */
}

.news-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #343a40; /* Dark text */
    margin-bottom: 20px;
}

.card {
    border: none;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.card-img-top {
    height: 200px;
    object-fit: cover; /* Ensure images fit nicely */
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #212529; /* Darker text for titles */
}

.card-text {
    font-size: 1rem;
    color: #6c757d; /* Muted text for descriptions */
}

.btn-primary {
    background-color: rgb(212, 166, 49); /* Gold button */
    border: none;
}

.btn-primary:hover {
    background-color: #b58e2e; /* Darker gold on hover */
}

/* History section */
.history-section {
    background-color: #ffffff; /* White background */
    border-top: 1px solid #ddd; /* Optional: Add a border to separate the section */
    margin-bottom: 40px; /* Add space before the footer */
}

.history-section h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #343a40; /* Dark text */
    margin-bottom: 20px;
}

.accordion-button {
    background-color: rgb(212, 166, 49); /* Gold background */
    color: white;
    font-weight: bold;
    border: none;
}

.accordion-button:not(.collapsed) {
    background-color: #b58e2e; /* Darker gold when expanded */
    color: white;
}

.accordion-button:hover {
    background-color: #a47c1f; /* Slightly darker gold on hover */
}

.accordion-body {
    font-size: 1rem;
    color: #6c757d; /* Muted text for body */
}

/* Moving Headlines Section */
.moving-headlines {
    background-color: rgb(188, 166, 109); /* Gold background */
    color: white;
    overflow: hidden;
    white-space: nowrap;
}

.moving-headlines .marquee {
    display: inline-block;
    animation: marquee 30s linear infinite; /* Smooth scrolling animation */
}

.moving-headlines p {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
    display: inline-block;
}

/* Keyframes for marquee effect */
@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Dropdown Links Hover Effect */
.navbar .dropdown-menu .dropdown-item {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgb(212, 166, 49); /* Gold background on hover */
    color: white; /* White text on hover */
}

/* Admissions Section Hover Effect */
.admissions-section div {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.admissions-section div:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.15); /* Subtle shadow on hover */
    /* background-color: rgba(212, 166, 49, 0.1); Light gold background on hover */
}

/* Staff Section */
.staff-section img {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.staff-section img:hover {
    transform: scale(1.05);
}

/* Staff Section Overlay */
.staff-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background */
    color: white;
    text-align: center;
    padding: 10px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.position-relative:hover .staff-overlay {
    opacity: 1; /* Show overlay on hover */
    /* color: goldenrod; Change text color to goldenrod on hover */
}