body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    /* Ensure that the footer is pushed to the bottom of the page if content is less */
    display: flex;
    flex-direction: column;
}

/* Common styles */
header {
    background-color: #333;
    color: #FF914D;
    padding: 20px;
    display: fixed;
    justify-content: center;
    align-items: center;
}

.header-content {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    position: right;
}

.logo {
    height: 250px;
    width: auto;
    margin-right: 20px;
    /* Adds space between the logo and the title */
}

.school-info {
    text-align: center;
    margin: 0 auto;
}

h1 {
    margin: 0;
    font-size: 3.5em;
    /* Increase the size of the school name */
    font-weight: bold;
    /* Make the school name bold */
}

.address {
    margin: 5px 0 0 0;
    font-size: 1.5em;
    color: #fff;
}

nav {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    align-items: center;
    /* Ensure items are centered vertically */
    padding: 10px;
    /* Add some padding for better look */
}

nav ul {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    padding: 14px 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    /* Ensures clickable area covers the padding */
}

/* Menu toggle button hidden by default */
.menu-toggle {
    display: none;
    cursor: pointer;
    padding: 14px 20px;
    color: white;
    font-size: 1.5em;
    /* Make it larger for better visibility */
}

nav a:hover {
    color: #FF914D;
}

/* Hero Section */
.hero {
    background: url(images/college.jpg);
    color: white;
    padding: 300px 80px;
    text-align: center;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    align-content: baseline;
}

.hero h2 {
    font-size: 3em;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.5em;
    margin-bottom: 30px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #45a049;
}

/* chairman block */
#message-chairman {
    display: flex;
    justify-content: space-between;
    padding: 30px 20px;
    background-color: #f0f0f0;
}

#message-chairman .message {
    width: 45%;
    padding: 40px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#message-chairman .chairman {
    width: 45%
}

.oppo {
    height: 700px;
    width: 550px;
    border-radius: 10px;
}

#message-chairman h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    color: #1510a9;
}

#message-chairman h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #a91010;
    text-decoration: underline;
}

#message-chairman p {
    font-size: 1rem;
    line-height: 1.5;
}

/* vision-mission */
#vision-mission {
    display: flex;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: #f0f0f0;
}

#vision-mission .vision, #vision-mission .mission {
    width: 45%;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#vision-mission h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

#vision-mission h1 {
    font-size: 1.2rem;
    text-align: center;
    text-decoration: underline;
    color: #a91010;
}

#vision-mission p {
    font-size: 1rem;
    line-height: 1.5;
}

#facility {
    text-align: center;
}

#facility h1 {
    font-size: 3rem;
    text-decoration: underline;
    text-align: center;
}

/* classroom-library-laboratries */
#classroom-library-laboratories {
    display: flex;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: #f0f0f0;
}

#classroom-library-laboratories .classroom, #classroom-library-laboratories .library, #classroom-library-laboratories .laboratories {
    width: 45%;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#classroom-library-laboratories h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

/* computer-auditorium-medical */
#computer-auditorium-medical {
    display: flex;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: #f0f0f0;
}

#computer-auditorium-medical .computer, #computer-auditorium-medical .auditorium, #computer-auditorium-medical .medical {
    width: 45%;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#computer-auditorium-medical h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

/* cafe-sports-transport */
#cafe-sports-transport {
    display: flex;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: #f0f0f0;
}

#cafe-sports-transport .cafe, #cafe-sports-transport .sports, #cafe-sports-transport .transport {
    width: 45%;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#cafe-sports-transport h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

.contact {
    background-color: #14124b;
    color: white;
    padding: 100px 80px;
    text-align: center;
}

.contact-content {
    text-align: center;
    font-size: large;
    font-weight: bolder;
}

.contact-content h2 {
    text-align: center;
    font-size: larger;
    font-weight: bolder;
}

.btn2 {
    display: inline-block;
    padding: 10px 20px;
    color: rgb(237, 230, 230);
    text-decoration: none;
    border-radius: 10px;
    transition: background-color 0.3s;
    border-color: #f0f0f0;
    border-style: groove;
}

#memories-off {
    display: flex;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: #f0f0f0;
}

#memories-off .memories {
    width: 45%;
    height: 20%;
    padding: 100px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#memories-off .off {
    width: 45%
}

.vivo {
    height: 50%;
    width: 70%;
    border-radius: 10px;
}

#memories-off h2 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #a80f0f;
}

.inspiration {
    display: flex ;
    text-align: center;
}

#inspiration h1 {
    padding: 5px 20px;
    font-size: 2rem;
    text-align: center;
    color: #a80f0f;
}

#photos-onn {
    display: flex;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: #f0f0f0;
}

#photos-onn .photos, #photos-onn .onn {
    width: 45%
}

.apple {
    height: 50%;
    width: 100%;
    border-radius: 10px;
}

.under {
    display: flex ;
    text-align: center;
}

#under h1 {
    padding: 5px 20px;
    font-size: 2rem;
    text-align: center;
    color: #a80f0f;
}

.raj {
    height: 10%;
    width: 17%;
    border-radius: 10px;
    padding-left: 42%;
}

.first {
    background-color: #14124b;
    color: #f0f0f0;
    text-align: center;
}

.first-content {
    max-width: 800px;
    margin: 30px auto;
    align-content: baseline;
}

.first-content h1 {
    font-size: 3rem;
    font-style: bold;
    text-align: center;
}

#second-content {
    display: flex;
    justify-content: space-between;
    padding: 50px 20px;
    background-color: #f0f0f0;
}

#second-content .second {
    width: 45%;
    height: 10%;
    padding: 100px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#second-content .content {
    width: 45%
}

.std {
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

#second-content h2 {
    font-size: 2.1rem;
    text-decoration: underline;
    color: #1510a9;
}

#second-content p {
    font-size: 1rem;
    line-height: 1.5;
}

#bbfte {
    text-align: center;
}

#bbfte h1 {
    font-size: 3rem;
    text-decoration: underline;
    text-align: center;
    color: #1510a9;
}

#bbfte p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 10px;
}

#modern h2 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-align: left;
    color: #1510a9;
    padding: 0 10px;
}

#modern p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 10px;
}

#experience h2 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-align: left;
    color: #1510a9;
    padding: 0 10px;
}

#experience p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 10px;
}

#focus h2 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-align: left;
    color: #1510a9;
    padding: 0 10px;
}

#focus p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 10px;
}

#support h2 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-align: left;
    color: #1510a9;
    padding: 0 10px;
}

#support p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 10px;
}

.bro {
    background-color: #14124b;
    color: #f0f0f0;
    text-align: center;
}

.bro-content {
    max-width: 800px;
    margin: 30px auto;
    align-content: baseline;
}

.bro-content h1 {
    font-size: 3rem;
    font-style: bold;
    text-align: center;
}

#third {
    text-align: left;
}

#third h1 {
    font-size: 3rem;
    text-decoration: underline;
    text-align: left;
    padding: 10px 20px;
    color: #1510a9;
}

#fourth h2 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-align: left;
    color: #1510a9;
    padding: 0 10px;
}

#fourth p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 10px;
}

#fifth h2 {
    font-size: 1.5rem;
    text-decoration: underline;
    text-align: left;
    color: #1510a9;
    padding: 0 10px;
}

#fifth p {
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 10px;
}

.contact {
    background-color: #a80c0c;
    color: white;
    padding: 100px 80px;
    text-align: center;
}

.contact-content {
    text-align: center;
    font-size: large;
}

.contact-content h2 {
    font-size: 3rem;
    text-align: center;
    text-decoration: underline;
    font-weight: bolder;
}

/* Contact Form and Map Styles */
.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

form {
    display: flex;
    flex-wrap: wrap;
    max-width: 45%;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    margin-bottom: 20px;
    flex: 1 1 200px;
}

label {
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"], input[type="email"], input[type="tel"], textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 16px;
    width: 100%;
}

textarea {
    resize: vertical;
    height: 100px;
}

button {
    padding: 10px 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    align-self: flex-end;
}

button:hover {
    background-color: #45a049;
}

/* Google Maps Container */
.map-container {
    width: 50%;
    margin-top: 20px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Media Queries for Mobile Responsiveness */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }

    form {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .map-container {
        width: 100%;
        height: 400px;
    }

    .menu-toggle {
        display: block;
        /* Show the toggle button on mobile */
    }

    nav ul {
        flex-direction: column;
        display: none;
        /* Hide menu by default */
        width: 100%;
        /* Make the menu take the full width */
        background-color: #333;
        /* Ensure background matches */
        position: absolute;
        /* Position it over the content */
        top: 60px;
        /* Position below the nav bar */
        left: 0;
    }

    nav ul.active {
        display: flex;
        /* Show menu when active */
    }

    nav ul li {
        text-align: center;
        padding: 10px 0;
        /* Adjust padding for mobile */
    }

    .messages-section {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .message-block {
        flex: 1 1 100%;
        max-width: 90%;
        /* Ensure messages don't stretch too wide */
    }

    .logo {
        height: 170px;
        /* Further adjust logo size for very small screens */
    }
}

@media (max-width: 480px) {
    header {
        padding: 15px;
    }

    .header-content h1 {
        font-size: 1.5em;
        /* Adjust font size for smaller screens */
    }

    .logo {
        height: 170px;
        /* Further adjust logo size for very small screens */
    }

    footer {
        padding: 5px;
    }
}

.footer {
    display: flex;
    justify-content: space-between;
    background-color: #1a1a1a;
    padding: 20px;
}

.footer div {
    width: 30%;
}

.footer h3 {
    margin-bottom: 10px;
    border-bottom: 3px solid #f50057;
    display: inline-block;
    padding-bottom: 5px;
}

.follow-us h3 {
    color: #ddd;
    cursor: pointer;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.social-icons a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #f50057;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    text-decoration: none;
}

.navigation h3 {
    color: #ddd;
    cursor: pointer;
}

.navigation ul {
    list-style-type: none;
    padding: 0;
}

.navigation ul li {
    margin-bottom: 10px;
}

.navigation ul li a {
    color: white;
    text-decoration: none;
}

.navigation ul li a:hover {
    text-decoration: underline;
}

.sakshi p {
    margin: 10px 0;
    color: #f0f0f0;
}

.sakshi h3 {
    color: #ddd;
    cursor: pointer;
}

.kk {
    background-color: #1a1a1a ;
    color: #ddd;
    text-align: center;
}
.committee-page{
width:90%;
max-width:1100px;
margin:auto;
padding:40px 0;
}

.subtitle{
text-align:center;
margin-bottom:40px;
color:#555;
}

.committee{
background:white;
padding:25px;
margin-bottom:30px;
border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.committee h2{
color:#0a6a5a;
margin-bottom:15px;
}

table{
width:100%;
border-collapse:collapse;
}

table th{
background:#0a6a5a;
color:white;
padding:12px;
text-align:left;
}

table td{
padding:10px;
border-bottom:1px solid #ddd;
}

table tr:hover{
background:#f1f1f1;
}

@media(max-width:768px){

table th, table td{
font-size:14px;
padding:8px;
}

}