/* Add this rule at the beginning of your CSS file */
* {
    box-sizing: border-box; /* Ensure padding and border are included in width */
}

html, body {
    overflow-x: hidden; /* Hide horizontal overflow */
    margin: 0; /* Remove default margin */
    /*background-color: rgba(22, 34, 57, 0.95);
    background-image: url('slide/kk.png');
     background-size: contain; 
     background-position: center center; 
    background-repeat: no-repeat;*/
    /* Add additional background properties as needed */
}

/* CSS for the header */
header {
    position: fixed; /* Keeps the header fixed at the top of the page */
    top: 0; /* Aligns the header to the top of the page */
    width: 100%; /* Ensures the header spans the full width of the page */
    background-color: rgba(22, 34, 57, 0.95); /* Sets the header background color */
    /* Vendor prefixes for box-shadow */
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* Ensures the header remains above other content */
    padding: 10px 20px; /* Adds padding around the header, including on the left and right */
    height: 80px; /* Set the height of the header */

}

/* Style for the logo */
header .logo {
    float: left; /* Positions the logo to the left */
}

/* Style for the navigation */
header nav {
    float: right; /* Positions the navigation to the right */
}

/* Style for the navigation list */
header nav ul {
    list-style: none; /* Removes the list style */
    margin-right: 30px; /* Adds margin on the right */
    padding: 5px; /* Adds padding */
    display: -webkit-flex; /* Vendor prefix for flex */
    display: -moz-flex;
    display: flex; /* Display as a flexbox */
    gap: 20px; /* Adds space between list items */
    text-transform: capitalize; /* Capitalizes all text */
}

/* Style for each navigation list item */
header nav ul li {
    display: inline; /* Displays list items inline */
    padding-right: 20px;
}

/* Style for each navigation link */
header nav ul li a {
    text-decoration: none; /* Removes underline from links */
    color: #fff; /* Sets link color to white */
    font-weight: bold; /* Sets link font weight */
}
/* Adjust navigation styles for smaller screens */
@media (max-width: 1024px) {
    header nav ul {
        width: 100%; /* Fit to device width */
    }
}

/* Hamburger menu for smaller screens */
header .hamburger {
    display: none; /* Initially hides the hamburger icon */
    float: right; /* Positions the hamburger icon to the right */
    cursor: default; /* Changes the cursor to a pointer when hovering */
    z-index: 1001; /* Ensures the hamburger is above other elements */
    padding: 10px; /* Adds padding around the hamburger icon */
    margin-right: 10px; 
    width: 20px;
}

/* Hamburger lines */
header .hamburger div {
    width: 25px; /* Sets the width of the hamburger lines */
    height: 3px; /* Sets the height of the hamburger lines */
    background-color: #fff; /* Sets the color of the lines */
    margin: 5px 0; /* Adds margin between lines */
    
}

/* Responsive styling using media queries */
@media (max-width: 1024px) {
    /* On smaller screens, display the hamburger icon and hide navigation list */
    header .hamburger {
        display: block; /* Displays the hamburger icon */
        float: right; /* Ensure the hamburger is floated to the right */
    }
    
    /* Hide navigation list initially on smaller screens */
    header nav ul {
        display: none; /* Hide navigation list */
        /* Vendor prefix for flex direction */
        flex-direction: -webkit-column;
        flex-direction: -moz-column;
        flex-direction: column; /* Stack navigation links vertically */
        padding: 20px; /* Adds padding around the navigation list */
        gap: 15px; /* Adds spacing between each navigation link */
    }
    
    /* When the menu is open, display navigation list */
    header nav ul.active {
        display: -webkit-flex;
        display: -moz-flex;
        display: flex; /* Show navigation list */
        /* Vendor prefix for flex direction */
        flex-direction: -webkit-column;
        flex-direction: -moz-column;
        flex-direction: column; /* Stack navigation links vertically */
        padding: 20px; /* Adds padding around the navigation list */
        gap: 15px; /* Adds spacing between each navigation link */
    }
/* navigation background */
@media (max-width: 1024px) {
    header nav ul {
        background-color: rgba(22, 34, 57, 0.95); /* Background color for mobile nav */
        color: #fff; /* Text color */
        display: none; /* Hide initially */
    }

    /* Active navigation style */
    header nav ul.active li a {
        background-color: #333; /* Background color for active state */
        color: #fff; /* Text color */
    }
}
/* end of nagivation mobile */
@media (max-width: 1024px) {
    /* Adjust styles here */
    .element {
        width: 100%; /* Fit to device width */
            }
    /* Adjust other properties as needed */
}

   }
/* Styles for the video element */
#video-element {
    width: 100%; /* Make the video fill the entire width of the container */
    height: auto; /* Maintain the video's aspect ratio */
}


/* Static logo overlay */
.logo-overlay {
    position: absolute; /* Position the logo overlay absolutely */
    top: 0; /* Align the overlay with the top of the slide */
    left: 0; /* Align the overlay with the left side of the slide */
    width: 60px; /* Adjust the width as needed */
    height: 60px; /* Adjust the height as needed */
    z-index: 2; /* Place the overlay on top of the slide image */
    padding: 0; /* Remove padding */
}
/* Static logo */
.static-logo {
    width: 100%; /* Ensure the logo fills the overlay */
    height: 100%; /* Ensure the logo fills the overlay */
    object-fit: cover; /* Scale image to fit within the overlay and maintain aspect ratio */
}

/* Determine the height of the header and set it as a variable */
:root {
    --header-height: 80px; /* Change this value to match the total height of your header */
}

.slide-carousel {
    width: 100%; /* Set a fixed width for the carousel */
    height: 100vh; /* Set the height of the carousel to full viewport height */
    overflow: hidden; /* Hide overflow */
    position: relative; /* Needed for absolute positioning of slides */
    margin: 0 auto; /* Center the carousel */
    margin-top: var(var(--header-height) + 20px);
    border-radius: 5px; /* Optional: Add rounded corners */

}
@media (min-width: 1024px) {
    .slide-carousel {
        margin-top: calc(var(--header-height) + 40px); 

    }
}
/* Slides */
/* Slide styles */
.slide {
    width: 100%; /* Make slides full width of the container */
    height: 100vh; /* Set slides height to full viewport height */
    position: absolute; /* Needed for slides to overlap and animate */
    opacity: 0; /* Initially hide slides */
    transition: opacity 1s; /* Smooth transition for slide opacity */
    border-radius: 5px; /* Optional: Add rounded corners to slides */

}

/* Slide images */
.slide img {
    width: 100%; /* Make images full width of the slide */
    height: auto; /* Maintain the aspect ratio of images */
    object-fit: cover; /* Scale images to cover the slide */
}

/* Caption styling */
.caption {
    position: absolute;
    top: 50%; /* Vertically center the caption */
    left: 50%; /* Horizontally center the caption */
    transform: translate(-50%, -50%); /* Translate to center the caption */
    padding: 10px; /* Optional: Add padding for spacing around the text */
    
    color: blue;
    
    /* Remove the background */
    background: none; /* No background */
}


.caption h3,
.caption h2 {
    margin: 0;
    font-size: 36px; /* Adjust the font size as needed */
    font-weight: bold; /* Optional: Add bold weight */
    text-align: center; /* Center the text */
}

.caption p {
    margin: 5px 0;
}
/* slide on mobile device */

/* Responsive styling using media queries */
@media (max-width: 1024px) {
    /* Adjust styles for smaller screens */
    .slide img {
        /* Make images fill the width of mobile devices */
        width: 100%;
        height: 100%; /* Maintain aspect ratio */
        padding-top: 50px;
        

    }

    /* You can adjust the caption size, padding, or other styles as needed */
    .caption {
        font-size: 12px; /* Adjust font size */
        padding: 5px; /* Adjust padding */
    }
}
@media (max-width: 1024px) {
.welcome-section {
    margin-top: 0; /* Remove top margin */
}
p{
    text-align: justify;
}
}
/* slide on mobile device end */

.staff-section {
    background-color: rgba(22, 34, 57, 0.95); /* Set background color */
    padding: 30px; /* Add padding around the section */
    border-radius: 8px; /* Optional: Add rounded corners */
    margin-bottom: 40px; /* Add margin below the section */
    text-align: center; /* Center-align the content */
    color: #fff; /* Set text color to white for better readability */
}
/* Style for the Meet Our Staff heading */
.staff-section h2 {
    font-size: 32px; /* Adjust the font size */
    font-weight: bold; /* Make the heading bold */
    margin-top: 0; /* Remove top margin */
    margin-bottom: 20px; /* Add bottom margin for spacing */
    color: #fff; /* Set heading text color to white */
    text-align: center; /* Center-align the heading */
    border: 2px solid #fff; /* Add a white border */
    border-radius: 15px; /* Add a rounded border */
}

.staff-carousel {
    display: flex;
    overflow: hidden; /* Change to hidden to hide overflow */
    width: 100%;
}

.staff-card {
    flex: 0 0 auto;
    width: 220px; /* Set a specific width */
    height: 380px; /* Set a specific height */
    margin-right: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
}

.staff-card img {
    width: 100%; /* Ensures the image fits the card */
    height: 200px; /* Set a specific height */
    object-fit: cover; /* Use cover to fill the image without stretching */
    border-radius: 5px 5px 0 0;
}

.staff-details {
    background-color: rgba(22, 34, 57, 0.95); /* Set the background color */
    padding: 10px; /* Add padding around the section */
    color: #fff; /* Set text color to white for better readability */
    display: flex; /* Use flexbox to align content */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    height: 190px; /* Set a consistent height for the section */
    border-radius: 5px; /* Optional: Add rounded corners */
    text-align: center; /* Center-align the text */
}

.staff-details h3 {
    margin: 0;
    text-align: center;
}

.staff-details p {
    margin: 5px 0;
}

/* Style for the logo container */
header .logo {
    display: flex; /* Use flexbox to align items side by side */
    align-items: center; /* Vertically center the image and text */
    float: left; /* Keep the logo container to the left */
}

/* Style for the logo image */
header .logo img {
    margin-right: 10px; /* Add some space between the image and the text */
}

/* Style for the text */
header .logo span {
    color: #fff; /* Set the text color to white */
    font-weight: 700; /* Set the font weight to bold */
    font-size: 1.5rem; /* Increase the font size */
}

/* Footer styles */
footer {
    background-color: rgba(22, 34, 57, 0.95); /* Background color */
    color: #fff; /* Text color */
    padding: 20px; /* Padding around the footer */
    text-align: center; /* Center text within the footer */
}

/* Footer content container */
.footer-content {
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack sections vertically */
    align-items: center; /* Center sections horizontally */
}

/* Footer row containing address, contact information, and social links */
.footer-row {
    display: flex; /* Use flexbox to align items in a row */
    justify-content: space-between; /* Distribute space evenly */
    width: 100%; /* Take up full width */
    margin-bottom: 20px; /* Add spacing between the row and copyright section */
}

/* Style for footer sections */
.footer-section {
    margin: 0; /* Reset margin */
    padding: 10px; /* Padding within each section */
    text-align: center; /* Center the content within each section */
}

/* Style for school address section */
.footer-section.school-address p {
    text-align: justify; /* Justify text alignment */
}

/* Style for contact information section */
.footer-section.contact-info p, h3 {
    text-align: justify; /* Justify text alignment */
}

/* Style for headings */
.footer-section h3 {
    margin-top: 0; /* Remove top margin */
    margin-bottom: 10px; /* Add bottom margin */
    font-weight: bold; /* Make headings bold */
}

/* Style for links */
footer a {
    color: #fff; /* Match link color to text color */
    text-decoration: none; /* Remove underline */
}

/* Style for social links */
.social-links {
    display: flex; /* Use flexbox */
    justify-content: center; /* Center the links */
    list-style: none; /* Remove list style */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

/* Style for each social link item */
.social-links li {
    margin: 0 10px; /* Add margin between social link items */
}
/* Style for Font Awesome icons */
.social-links li a i {
    font-size: 24px; /* Set the size of the icons */
    color: #fff; /* Set the color to white */
}

/* Style for each social link anchor */
.social-links li a img {
    width: 24px; /* Set width for social icons */
    height: 24px; /* Set height for social icons */
}

/* Style for the horizontal rule in the footer */
footer hr {
    border: 0; /* Remove default border */
    border-top: 1px solid #fff; /* Add a top border with a solid white line */
    width: 100%; /* Make the horizontal rule full width */
    margin: 5px 0; /* Add margin above and below the rule */
}

/* Style for the certifications and partners section */
.footer-section.certifications {
    padding: 20px; /* Padding around the section */
    text-align: center; /* Center-align the content */
}

/* Style for the section heading */
.footer-section.certifications h3 {
    font-weight: bold; /* Bold heading */
    margin-top: 0; /* Remove top margin */
    margin-bottom: 10px; /* Add bottom margin */
    text-align: center; /* Center-align the heading */
}

/* Style for the partners container */
.partners {
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Space out the partners evenly */
    flex-wrap: wrap; /* Wrap partners to the next row when needed */
    margin-bottom: 20px; /* Margin below the container */
}

/* Style for each partner div */
.partner {
    display: flex; /* Use flexbox */
    flex-direction: column; /* Align image and text vertically */
    align-items: center; /* Center-align image and text */
    width: calc(33.33% - 20px); /* Take up one-third of the container, minus the margin */
    margin: 10px; /* Add margin around each partner div */
}

/* Style for partner images */
.partner img {
    width: 100%; /* Full width of the container */
    height: 189px; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Add bottom margin */
}

/* Responsive styling using media queries */
@media (max-width: 1024px) {
    /* Adjust the layout for smaller screens */
    .partners {
        flex-direction: column; /* Stack partners vertically */
        align-items: center; /* Center-align the partners */
    }

    /* Adjust each partner div for smaller screens */
    .partner {
        width: 100%; /* Take up full width */
    }
}

/* Style for the welcome section */
.welcome-section {
    background-color: rgba(22, 34, 57, 0.95); /* Set background color */
    padding: 20px; /* Add padding around the section */
    border-radius: 8px; /* Optional: Add rounded corners */
    color: #fff; /* Set text color to white */
    text-align: justify-all; /* Center-align the content */
    line-height: 1.5; /* Increase line height for readability */
}

/* Style for the welcome note heading */
.welcome-section h2 {
    font-size: 32px; /* Adjust font size */
    font-weight: bold; /* Make the heading bold */
    margin-top: 0; /* Remove top margin */
    margin-bottom: 20px; /* Add bottom margin for spacing */
    text-align: center;
    color: #fff; /* Set heading text color to white */
    border: 2px solid #fff; /* Add a white border */
    border-radius: 15px; /* Add a rounded border */
}

/* Style for the welcome note paragraph */
.welcome-section p {
    font-size: 18px; /* Increase the font size */
    margin-bottom: 20px; /* Add bottom margin for spacing */
    text-align: justify;
}

/* Style for the list items */
.welcome-section ul {
    list-style: none; /* Remove default list style */
    padding-left: 0; /* Remove padding */
    margin-bottom: 20px; /* Add margin below the list */
}

/* Style for each list item */
.welcome-section ul li {
    display: flex; /* Use flexbox */
    align-items: center; /* Center-align icons and text */
    margin-bottom: 10px; /* Add margin between list items */
    font-size: 18px; /* Increase the font size */
}

/* Style for Font Awesome icons */
.welcome-section ul li i {
    margin-right: 10px; /* Add margin to the right of the icon */
    color: #fff; /* Set icon color to white */
}

/* Responsive styling using media queries */
@media (max-width: 1024px) {
    /* Adjust the welcome section for smaller screens */
    .welcome-section {
        padding: 15px; /* Reduce padding */
    }

    /* Adjust the font size for heading */
    .welcome-section h2 {
        font-size: 28px; /* Slightly decrease the font size */
    }

    /* Adjust the font size for paragraphs */
    .welcome-section p {
        font-size: 16px; /* Slightly decrease the font size */
        margin-bottom: 15px; /* Adjust bottom margin */
    }

    /* Adjust the font size for list items */
    .welcome-section ul li {
        font-size: 16px; /* Slightly decrease the font size */
    }

    /* Adjust the spacing for Font Awesome icons */
    .welcome-section ul li i {
        margin-right: 8px; /* Adjust the right margin */
    }
}


/* Style for the news and events container */
.news-events-container {
    display: flex; /* Use flexbox to create a row layout */
    justify-content: space-between; /* Distribute space evenly between items */
    margin-bottom: 20px; /* Add margin below the container */
    gap: 20px; /* Add space between the columns */
}

/* Style for news-event and archive-link divs */
.news-event, .archive-link {
    flex: 1; /* Each item takes up an equal portion of the container */
    padding: 10px; /* Add padding around each div */
    text-align: center; /* Center-align the text */
    background-color: rgba(22, 34, 57, 0.95); /* Optional: Set background color */
    color: #fff; /* Optional: Set text color */
    border-radius: 5px; /* Optional: Add rounded corners */
}

/* Style for the cta-button */
.cta-button {
    display: inline-block; /* Ensure the button is displayed inline-block */
    padding: 10px 15px; /* Add padding */
    margin-top: 10px; /* Add margin above the button */
    background-color: #4CAF50; /* Button background color */
    color: #fff; /* Button text color */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Add rounded corners */
}


/* Style for the news and events section */
.news-events-section {
    background-color: rgba(22, 34, 57, 0.95); /* Set background color */
    padding: 20px; /* Add padding around the section */
    border-radius: 8px; /* Optional: Add rounded corners */
    color: #fff; /* Set text color to white */
    text-align: center; /* Center-align the content */
    margin-bottom: 40px; /* Add margin below the section */
}

/* Style for the news and events heading */
.news-events-section h2 {
    font-size: 32px; /* Adjust font size */
    font-weight: bold; /* Make the heading bold */
    margin-top: 0; /* Remove top margin */
    margin-bottom: 20px; /* Add bottom margin for spacing */
    border: 2px solid #FFFF00; /* Add a white border */
    border-radius: 15px; /* Add a rounded border */
}

/* Style for news and event items */
.news-events-section .news-event {
    margin-bottom: 20px; /* Add margin between news and event items */
}

/* Style for news and event subheadings */
.news-events-section .news-event h3 {
    font-size: 24px; /* Adjust font size */
    font-weight: bold; /* Make the subheading bold */
    margin-bottom: 10px; /* Add bottom margin */
}

/* Style for news and event descriptions */
.news-events-section .news-event p {
    font-size: 18px; /* Adjust font size */
    line-height: 1.5; /* Improve readability */
}

/* Style for the news image */
.news-image {
    width: 50px; /* Set the width of the image */
    height: 50px; /* Set the height of the image */
    margin-right: 10px; /* Add space between the image and text */
    float: left; /* Float the image to the left of the text */
    border-radius: 50%; /* Optional: Add rounded corners */
}

/* Style for the Read More link */
.read-more-link {
    color: #007BFF; /* Set the link color */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Make the text bold */
    margin-left: 10px; /* Add margin to the left for spacing */
}

.read-more-link:hover {
    text-decoration: underline; /* Add underline on hover */
}


/* Popup styles */
.popup {
    position: fixed;
    top: 50%; /* Move the popup down 50% of the page height */
    left: 50%; /* Move the popup right 50% of the page width */
    transform: translate(-50%, -50%); /* Center the popup using translation */
    width: 80%; /* Width of the popup content */
    max-width: 400px; /* Maximum width for larger screens */
    /*background-color: rgba(0, 0, 0, 0.5);  Semi-transparent background */
    z-index: 1001; /* Ensure the popup appears on top of other content */
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    padding: 10px; /* Add padding around the popup */
    border-radius: 10px; /* Optional: Add rounded corners */
}

/* Popup content styles */
.popup-content {
    padding: 20px; /* Padding around the popup content */
    border-radius: 10px; /* Add rounded corners */
    text-align: center; /* Center the text content */
    position: relative; /* Ensure absolute positioning for child elements like the close button */
    background-color: rgba(0, 0, 0, 0.5); /* White background for the popup content */
    width: 80%; /* Default width for the popup content */
    max-width: 400px; /* Maximum width for larger screens */
    height: auto; /* Allow the height to adjust based on content */
}

/* Popup close button styles */
.popup-close {
    position: absolute;
    top: 10px; /* Position at the top of the popup content */
    right: 10px; /* Position on the right side */
    font-size: 24px; /* Font size for the close button */
    cursor: pointer; /* Show a pointer cursor when hovered */
    color: red; /* Set the color to red */
    font-weight: bold; /* Make the close button bold */
    z-index: 1002; /* Ensure the close button appears on top of other content */
}

/* Popup image styles */
.popup-image {
    width: 100%; /* Allow the image to fill the content width */
    height: auto;
    margin-bottom: 10px;
}

/* Responsive styles */
@media (max-width: 1024px) {
    /* Adjust the popup content styles for smaller screens */
    .popup {
        width: 90%; /* Reduce the width of the popup content on smaller screens */
        max-width: none; /* Remove the maximum width limit */
        padding: 5px; /* Reduce padding */
    }
}

/* Responsive styles */
@media (max-width: 1024px) {
    /* Reduce padding around popup content */
    .popup-content {
        padding: 10px; /* Reduce padding to fit smaller screens */
    }
}

.testimonial-section {
    text-align: center;
    position: relative; /* Required for positioning pseudo-elements */
    background-color: rgba(22, 34, 57, 0.95);
}

.testimonial-section h2 {
    display: inline-block; /* Ensures the width is only as wide as the content */
    position: relative; /* Required for positioning pseudo-elements */
    padding: 0 10px; /* Add padding to create space around the heading */
    /*background-color: red; /* Ensure background is consistent */
    color: white;
}

.testimonial-section h2:before,
.testimonial-section h2:after {
    content: "";
    display: inline-block;
    width: 80%;
    border-top: 1px solid #fff; /* Adjust border properties as needed */
    position: absolute;
    top: 50%;
}

.testimonial-section h2:before {
    right: 100%; /* Position the left line */
    margin-right: 15px; /* Adjust distance from text */
}

.testimonial-section h2:after {
    left: 100%; /* Position the right line */
    margin-left: 15px; /* Adjust distance from text */
}


.testimonial-callout {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.testimonial-image img {
    width: 50px; /* Adjust the image size as needed */
    height: 50px; /* Adjust the image size as needed */
    border-radius: 50%;
    margin-right: 10px;
}

.testimonial-message {
    flex: 1;
    display: flex;
    align-items: center;
}
.testimonial-message p {
    margin: 0; /* Remove default margin */
    padding: 10px; /* Add padding inside the oval */
    font-size: 16px; 
    text-align: center;
}

.callout-oval {
    background-color: #f0f0f0; /* Background color of the oval shape */
    padding: 20px 50px;
    border-radius: 50px; /* Adjust the border-radius to control the oval shape */
    max-width: 80%; /* Limit the width of the oval shape */
}

.testimonial-author {
    font-style: italic;
    margin-left: 10px;
    display: block;
    text-align: right;
    color: #f0f0f0;
}


.testimonial-container {
    white-space: nowrap; /* Prevent testimonials from wrapping */
    overflow: hidden; /* Hide overflow content */
}

.testimonial {
    display: inline-block; /* Display testimonials in a row */
    margin-right: 20px; /* Adjust margin between testimonials */
    animation: scrollTestimonials 30s linear infinite; /* Adjust animation duration as needed */
}

@keyframes scrollTestimonials {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Style the submenu container */
.submenu {
    position: relative;
    display: inline-block;
}

/* Style the submenu content (hidden by default) */
.submenu-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Style the links inside the submenu */
.submenu-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of submenu links on hover */
.submenu-content a:hover {
    background-color: #ddd;
}

/* Show the submenu content when hovering over the submenu container */
.submenu:hover .submenu-content {
    display: block;
}
/* swivel facilities */

/* curriculum vitae */

/* Keep the original CSS for larger screens */

.curriculum {
  background-color: rgba(22, 34, 57, 0.95);
  padding: 50px 0; /* Adjust padding as needed */
}

.curriculum-section {
  display: flex;
  margin-bottom: 30px; /* Add margin between sections */
}

.curriculum h2 {
    text-align: center;
    color: #fff;
}

.curriculum-image {
  flex: 1;
  margin-right: 20px; /* Add space between image and text */
  margin-left: 20px;
}

.curriculum-content {
  flex: 2;
  padding-right: 20px;
}

.curriculum-content p,
.curriculum-content h3,
.curriculum-content h4,
.curriculum-content ol,
.curriculum-content ul {
  margin-top: 0; /* Remove default margin */
  margin-bottom: 15px; 
  color: #fff;
  text-align: justify;
  font-size: 18px;
}

.curriculum-content {
    color: #fff;
  text-align: justify;
  font-size: 18px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Add media query for smaller screens */
@media screen and (max-width: 1024px) {
  .curriculum-section {
    flex-direction: column;
  }

  .curriculum-image,
  .curriculum-content {
    flex: 1 0 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

/* board of directors */

.board-of-directors {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: rgba(22, 34, 57, 0.95);
}

.responsive {
  padding: 10px;
  max-width: 200px;
}

.gallery {
  border: 1px solid #ccc;
  margin: 5px;
}

.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
  background-color: rgba(22, 34, 57, 0.8);
  color: #fff;
  font-size: 16px;
}

.section-heading {
  text-align: center;
  margin-bottom: 30px;
  
}

.section-heading h2 {
  color: #222;
  font-size: 36px;
}

.section-heading .h5 {
  color: #666;
  font-size: 18px;
}