style.css

.text-warning{
    color: #121111;
}

*{
    font-family: monospace;
}

body{
    background: f1fbff;
}

.section-padding{
    padding: 100px 0;
}

.carousel-item{
    height: 95vh;
    min-height: 300px;
}

.carousel-caption{
    bottom: 150px;
z-index: 2;
}

.carousel-caption{
    font-size: 45px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 25px;
}

.carousel-caption p{
    width: 60%;
    margin: auto;
    font-size: 18px;
    line-height: 1.9;
}

.carousel-inner::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(0, 0, 0,0.7);
    z-index: 1;
}

.d-block-w-100{
    width: 100%;
}

    


/* .navbar-nav a{
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 500;
}

.navbar-light .navbar-brand{
    color: #000;
    font-size: 25px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover{
    color: #000;

}
.w-100{
height: 100vh;
}
 */

 /* responsive.css */

 @media only screen and (min-width: 768px) and (max-width: 991px){
    .carousel-caption{
        bottom: 370px;
    }
    .carousel-caption p{
        width: 100%;
        /* font-size: 15px; */
    }
    .carousel-caption h5{
        font-size: 25px;
    }
    .d-block-w-100{
        max-width: 100%;
        height: auto;
    }
 } 

 @media only screen and (max-width: 767px){
    .d-block-w-100{
        max-width: 100%;
        height: auto;
    }
    .carousel-caption{
        bottom: 200px;
    }
    .navbar-nav{
        text-align: center;
    }
    .carousel-caption{
        bottom:125px;
    }
    .carousel-caption h5{
        font-size: 17px;
    }
    .carousel-caption a{
        padding: 10px 15px;
    }
    .carousel-caption p{
        width: 100%;
        line-height: 1.6;
        font-size: 12px;
    }
}


/* principle's note */

/* Custom styles for Principal's Note */
.note-box {
    border: 2px solid #dee2e6; /* Light border for the box */
    border-radius: 10px; /* Rounded corners */
    background-color: #ffffff; /* White background */
    padding: 2rem; /* Padding inside the box */
}

.note-box h2 {
    color: #343a40; /* Darker color for the heading */
}

.note-box .principal-info {
    border-bottom: 2px solid #dee2e6; /* Bottom border for the info section */
    padding-bottom: 1rem; /* Padding at the bottom */
    margin-bottom: 1rem; /* Margin at the bottom */
}

.note-box .principal-note-text {
    line-height: 1.6; /* Improved readability with line spacing */
    color: #495057; /* Slightly darker text color for better contrast */
}








/* Custom styles for Footer */
.footer {
    background-color: #343a40; /* Dark background for footer */
    color: #f8f9fa; /* Light text color */
}

.footer h5 {
    color: #f8f9fa; /* Light color for headings */
}

.footer address {
    font-style: normal; /* Remove italics for address */
}

.footer a {
    color: #f8f9fa; /* Light color for links */
}

.footer a:hover {
    text-decoration: underline; /* Underline links on hover */
}

.footer .logo {
    width: 24px; /* Set a consistent width for social media icons */
    height: auto; /* Maintain aspect ratio */
}

/* Ensure map takes full width */
.embed-responsive-16by9 {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border-radius: 0.5rem; /* Optional: rounded corners for the map */
}

.embed-responsive-16by9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}






/*  */
.navbar {
    background-color: #f8f9fa; /* Light background for the navbar */
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-brand .logo {
    width: 50px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
    transform: scale(1.3); /* Scale the image */
    transform-origin: 0; /* Ensure scaling from the top-left corner */
}

.nav-link {
    display: flex;
    align-items: center;
}

.nav-link i {
    margin-right: 5px; /* Space between icon and text */
}




/* MAP GEOLOCATION IN THE INDEX PAGE */