.topbar{
    width: 100%;
    height: 105px;
    background-color: magenta;
    top: 0;
    left: 0;
}
 section{
    z-index: 0;
    position: relative;
   
   
}
/* Home section styling */
#home{
   
    z-index: 1;
    width: 100%;
    height: 100vh;
    background-color: blue;
    position: relative;
    overflow: hidden; /* Ensure content stays within the section */
}
/* three d text welcome  */
.welcome {
    position: absolute;
    width: 100%;
    height: 100vh; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.three-d-text {
    top: 20%;
    left: 16%;
    font-size: 70px;
    font-weight: 600;
    color: #fff;
    position: relative; /* Needed for pseudo-element positioning */
    z-index: 1;
    text-shadow: 
        1px 1px 0 #999, 
        2px 2px 0 #888,
        3px 3px 0 #777,
        4px 4px 0 #666,
        5px 5px 0 #555,
        6px 6px 0 #444,
        7px 7px 0 #333,
        8px 8px 0 #222,
        9px 9px 0 #111;
}
/* Name div styling */
#home .name {
    position: absolute;
    z-index: 1000;
    top: 75%;
    left: 50%;
    right: 0%;
    transform: translateX(-50%); /* Center horizontally */
    width: 100%; /* Ensure full width for marquee effect */
    overflow: hidden; /* Hide overflowing text */
    text-align: center; /* Center text inside the container */
}
/* apply now div styling */
#home .apply-now{
    position: fixed;
    z-index:9999;
    top: 50%;
    width: 100%;
    height:auto;
    background-color: transparent;
    justify-content: space-between;
    display: flex;
    justify-content: space-between;
    gap: 20px; /* Adjust the gap size as needed */
    opacity: 1;
}

.apply-now .left, .apply-now .right{

    background-color: navy;
  
}
 .apply-now .left a, .apply-now .right a{
    color: white;
    font-size: 48px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
} 

.left {
/* Adjust as needed */
    text-align: left; /* Center text horizontally */
    width: 300px;
    display: inline-flex;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    padding-bottom: 10px;
    padding-bottom: 10px;
   
    
}


.right {
    text-align: right; /* Align text to the right */
    width: 300px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    padding-bottom: 10px;
    padding-bottom: 10px;

}

/* Welcome messages container */
.welcome-messages {
    display: flex;
    animation: marquee 40s linear infinite; /* Adjust duration as needed */
}

/* Individual welcome message styling */
.welcome-message {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 40px;
    padding: 0 2rem; /* Spacing between messages */
    white-space: nowrap; /* Prevent text from wrapping */
    font-style: italic;
}

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

/* Image banner styling */
#home .image-banner {
    width: 100%;
    height: 100%;
}

#home .image-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(40%);

}
#home marquee{
    position: absolute;
    top: 60%;
}
#home marquee h1{
    color: white;
    font-size: 45px;
    text-align: center;
}
/* sections styling */
#about section{
    z-index: 2;
  
}
/* Styling for the About section */

 #about #mission,
 #about #history,
 #about #team,
 #about #testimonials,
 #about #achievements,
 #about #facilities,
 #about #partnerships{
    display:flex;
   
    background-color: white;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding-top:300px;
   
   
}

.section-content, .image{
    width: 100%;
    height: 100vh;
}
.image img{
    width:100%;
    padding-top: 50px;
}
.section-content{
    padding: 30px;
}


h2 {
    color: navy;
    font-size: 4em;
    margin-bottom: 20px;
    text-align: center;
}



p {
    color: #555;
    font-size: 1.1em;
    line-height: 1.8;
}

#about img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
}
/* admissiion styling */
#admissions section{
    display: block;
}
#admissions #process,
#admissions #fees,
#admissions #scholarships,
#admissions #faqs,
#admissions #apply-now,
#admissions #visit-us,
#admissions #contact-admissions{
    display: inline-flex;
    background-color: white;
    padding: 50px 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding-top: 150px;
   
}
#admissions img {
    background: transparent;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#academics #curriculum,
#academics #extra-curricular,
#academics #student-support,
#academics #library,
#academics #technology,
#academics #academic-calendar,
#academics #results,
#events #school-calendar,
#events #workshops-seminars,
#events #competitions,
#events #cultural-events,
#events #sports-events,
#events #parent-teacher-meetings,
#events #alumni-reunions,
#resources #gallery,
#resources #blog,
#resources #contact,
#resources #faq,
#resources #parent-services,
#resources #teacher-services,
#resources #student-services {
    display: inline-flex;
    background-color: white;
    padding: 50px 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding-top: 150px;
}
/* media queries */


@media screen and (max-width: 1040px) {
    .topbar {
        width: 100%;
        height: 101px;
        background-color:magenta; /* Adjust height for smaller screens */
        }

    .welcome {
        height: 80vh; /* Adjust height as needed for smaller screens */
        padding: 20px;
    }

    .three-d-text {
        font-size: 40px; /* Adjust font size for smaller screens */
    }

    #home .name {
        top: 70%;
        font-size: 24px; /* Adjust font size for smaller screens */
    }

    #home .apply-now {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .apply-now .left, .apply-now .right {
        width: 90%;
        text-align: center; /* Center text */
    }

    .apply-now .left a, .apply-now .right a {
        font-size: 24px; /* Adjust font size for smaller screens */
    }

    .welcome-messages {
        animation: marquee 20s linear infinite; /* Adjust duration as needed */
    }

    .welcome-message {
        font-size: 24px; /* Adjust font size for smaller screens */
    }

    .image-banner img {
        filter: brightness(60%);
    }

    #about #mission, #about #history, #about #team, #about #testimonials, #about #achievements, #about #facilities, #about #partnerships,
    #admissions #process, #admissions #fees, #admissions #scholarships, #admissions #faqs, #admissions #apply-now, #admissions #visit-us, #admissions #contact-admissions,
    #academics #curriculum, #academics #extra-curricular, #academics #student-support, #academics #library, #academics #technology, #academics #academic-calendar, #academics #results,
    #events #school-calendar, #events #workshops-seminars, #events #competitions, #events #cultural-events, #events #sports-events, #events #parent-teacher-meetings, #events #alumni-reunions,
    #resources #gallery, #resources #blog, #resources #contact, #resources #faq, #resources #parent-services, #resources #teacher-services, #resources #student-services {
        flex-direction: row;
        display: block;
        padding: 20px 10px; /* Adjust padding for smaller screens */
    }

    .section-content {
        width: 100%;
        padding: 20px; /* Adjust padding for smaller screens */
    }

    .image img {
        padding-top: 20px; /* Adjust padding for smaller screens */
    }

    h2 {
        font-size: 2em; /* Adjust font size for smaller screens */
    }

    p {
        font-size: 1em; /* Adjust font size for smaller screens */
        line-height: 1.5;
    }
}

@media screen and (max-width: 768px) {
    .topbar {
        width: 100%;
        height: 101px;
        background-color:magenta; /* Adjust height for smaller screens */
        }
    .welcome {
        height: 70vh; /* Adjust height as needed for medium screens */
        padding: 30px;
    }

    .three-d-text {
        font-size: 30px;
        left:0;
        right: 0;
        top: 10%; /* Adjust font size for smaller screens */
    }

    #home .name {
        padding-top:10px;
        font-size: 18px; /* Adjust font size for smaller screens */
    }

    #home .apply-now {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        top: 90vh;
    }

    .apply-now .left, .apply-now .right {
        width: 90%;
        text-align: center; /* Center text */
    }
    .apply-now .left{
        display: none;
        }
    .apply-now .right{
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
   
        
    }


    .apply-now .left a, .apply-now .right a {
        font-size: 24px; /* Adjust font size for medium screens */
    }

    .welcome-messages {
        animation: marquee 20s linear infinite; /* Adjust duration as needed */
    }

    .welcome-message {
        font-size: 24px; /* Adjust font size for medium screens */
    }

    .image-banner img {
        filter: brightness(60%);
    }

    #about #mission, #about #history, #about #team, #about #testimonials, #about #achievements, #about #facilities, #about #partnerships,
    #admissions #process, #admissions #fees, #admissions #scholarships, #admissions #faqs, #admissions #apply-now, #admissions #visit-us, #admissions #contact-admissions,
    #academics #curriculum, #academics #extra-curricular, #academics #student-support, #academics #library, #academics #technology, #academics #academic-calendar, #academics #results,
    #events #school-calendar, #events #workshops-seminars, #events #competitions, #events #cultural-events, #events #sports-events, #events #parent-teacher-meetings, #events #alumni-reunions,
    #resources #gallery, #resources #blog, #resources #contact, #resources #faq, #resources #parent-services, #resources #teacher-services, #resources #student-services {
        flex-direction: column;
        padding: 20px 10px; /* Adjust padding for smaller screens */
    }

    .section-content {
        width: 100%;
        padding: 20px; /* Adjust padding for smaller screens */
    }

    .image img {
        padding-top: 20px; /* Adjust padding for smaller screens */
    }

    h2 {
        font-size: 2em; /* Adjust font size for smaller screens */
    }

    p {
        font-size: 1em; /* Adjust font size for smaller screens */
        line-height: 1.5;
    }
}
@media screen and (max-width: 480px) {
    .topbar {
    width: 100%;
    height: 101px;
    background-color:magenta; /* Adjust height for smaller screens */
    }

    .welcome {
        height: 90vh; /* Adjust height as needed for smaller screens */
        padding: 20px;
        
    }

    .three-d-text {
        font-size: 30px;
        left:0;
        right: 0;
        top: 10%; /* Adjust font size for smaller screens */
    }

    #home .name {
        padding-top:10px;
        font-size: 18px; /* Adjust font size for smaller screens */
    }

    #home .apply-now {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        top: 90vh;
    }

    .apply-now .left, .apply-now .right {
        width: 90%;
        text-align: center; /* Center text */
    }
    .apply-now .left{
        display: none;
        }
    .apply-now .right{
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
   
        
    }

    .apply-now .left a, .apply-now .right a {
        font-size: 20px; /* Adjust font size for smaller screens */
    }

    .welcome-messages {
        animation: marquee 15s linear infinite; /* Adjust duration as needed */
    }

    .welcome-message {
        font-size: 20px; /* Adjust font size for smaller screens */
    }

    .image-banner img {
        filter: brightness(70%);
    }

    #about #mission, #about #history, #about #team, #about #testimonials, #about #achievements, #about #facilities, #about #partnerships,
    #admissions #process, #admissions #fees, #admissions #scholarships, #admissions #faqs, #admissions #apply-now, #admissions #visit-us, #admissions #contact-admissions,
    #academics #curriculum, #academics #extra-curricular, #academics #student-support, #academics #library, #academics #technology, #academics #academic-calendar, #academics #results,
    #events #school-calendar, #events #workshops-seminars, #events #competitions, #events #cultural-events, #events #sports-events, #events #parent-teacher-meetings, #events #alumni-reunions,
    #resources #gallery, #resources #blog, #resources #contact, #resources #faq, #resources #parent-services, #resources #teacher-services, #resources #student-services {
        display: block;
        padding: 15px 10px; /* Adjust padding for smaller screens */
    }

    .section-content {
        width: 100%;
        display: block;
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .image img {
        max-width: 100%;
        
        padding: 15px;
         /* Adjust padding for smaller screens */
    }

    h2 {
        font-size: 2em; /* Adjust font size for smaller screens */
    }

    p {
        font-size: 0.9em; /* Adjust font size for smaller screens */
        line-height: 1.3;
    }
}