* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f9f9f9;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
    margin: 0;
    background-color: #3333331a;
    position: sticky;
    top: 0;
    transition: transform 0.3s ease-in-out;
    transform: translateY(0);
    z-index: 100;
}

nav.hidden {
    transform: translateY(-100%);
}

#logo {
    width: 60px;
    height: auto;
    border-radius: 50%;
}

#nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#nav-link li {
    list-style: none;
    margin: 10px;
    font-size: 15px;
}

#nav-link li:hover {
    transform: scale(1.2);
}

#nav-link li a {
    text-decoration: none;
    color: #fff;
}

#nav-link li a:hover {
    text-decoration: 2px rgb(238, 81, 8) solid underline;
}

.hero {
    height: 100vh;
    padding: 20% auto;
    position: relative;
    top: -70px;
    background: linear-gradient(rgba(238, 81, 8, 0.6), rgba(122, 11, 11, 0.4)),
        url(images/DALL·E\ 2024-12-22\ 21.53.04\ -\ A\ vibrant\ scene\ of\ students\ using\ their\ laptops\ in\ a\ modern\ school\ setting.\ The\ classroom\ is\ bright\ and\ filled\ with\ natural\ lig.webp);

    background-size: cover;
}

.hero-title {
    padding-top: 5%;
}

h1 {
    font-size: 100px;
    text-align: center;
    margin: 15px 0;
    color: #fff;
}

h2 {
    font-size: 60px;
    text-align: center;
    margin: 10px 0;
    color: #ffffff;
}

.hero-title p {
    width: 70%;
    font-size: 20px;
    line-height: 1.7;
    margin: 10px auto 20px;
    text-align: center;
    color: #eee;
}

button {
    /* margin-top: 50px; */
    padding: 20px 35px;
    margin: 50px auto 30px;
    background-color: rgb(238, 81, 8);
    /* margin-top: 50px; */
    outline: none;
    border: 1px solid #f1f1f1;
    display: block;
    border-radius: 20px;
    color: white;
    font-size: 20px;
}

button:hover {
    transition: all 0.3s ease-in-out;
    background-color: #fff;
    color: #000;
    transform: scale(1.1);
}

/*--------------- about------------------------ */
#about {
    background-color: rgba(238, 81, 8, 0.7);
    padding: 50px;
    width: 70%;
    margin: 0 auto;
    position: absolute;
    top: 90%;
    left: 14%;
    border-radius: 30px;
}

#about .about-container {
    text-align: center;
}

/* #about .about-container h2 {
    color: #fff;
    font-size: 50px;
} */

#about .about-container p {
    color: #ffffd9;
    font-size: 20px;
    line-height: 1.5;
    width: 70%;
    margin: 0 auto;
}

/* ------------------latest news------------------ */
#latest-news {
    margin: 10rem auto 2rem;
    padding: 1.5rem;
    max-width: 800px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#latest-news h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #fe8343;
    /* Accent color */
}

#latest-news ul {
    list-style: none;
    padding: 0;
}

#latest-news ul li {
    margin-bottom: 0.8rem;
}

#latest-news ul li a {
    text-decoration: none;
    color: #d86121;
    font-weight: bold;
    transition: color 0.3s;
}

#latest-news ul li a:hover {
    color: #290101;
}

/* --------------events----------------------------- */
#events {
    margin: 2rem auto;
    padding: 1.5rem;
    max-width: 800px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#events h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #fe8343;
    /* Accent color */
}

#events .events {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

#events .event {
    padding: 1.5rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fefefe;
    transition: transform 0.3s, box-shadow 0.3s;
}

#events .event h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #333;
}

#events .event p {
    margin: 0;
    color: #666;
}

#events .event:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Mission & Vision Section */
.mission-vision {
    background: linear-gradient(rgba(238, 81, 8, 0.6), rgba(0, 0, 0, 0.3)),
        url("images/elibrary.jpeg");
    background-attachment: fixed;
    background-size: cover;
    background-position: bottom center;
    color: white;
    padding: 150px 20px;
    text-align: center;
}

.mission-vision h2 {
    font-size: 40px;
    margin-bottom: 20px;
    color: #fff;
}

.mission-vision p {
    font-size: 20px;
    line-height: 1.8;
    width: 70%;
    margin: 0 auto;
}

/* -----------------offer---------------------------- */
#offer {
    margin: 50px 20px;
}

#offer h2 {
    font-size: 50px;
    color: rgb(238, 81, 8);
    text-align: center;
}

#offer .offer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 25px auto;
}

#offer .offer-container .offer-item {
    width: 530px;
    height: 230px;
    padding: 20px 10px;
    margin: 10px 5px;
    background-color: rgb(245, 238, 235);
    border-radius: 10px;
}

#offer .offer-container .offer-item h3 {
    font-size: 20px;
    color: rgb(197, 120, 85);
    margin-bottom: 10px;
}

#offer .offer-container .offer-item p {
    font-size: 16px;
    line-height: 1.5;
}

/* -------------------courses------------------------------ */
#course {
    margin: 50px 20px;
}

#course h2 {
    text-align: center;
    font-size: 50px;
    color: rgb(238, 81, 8);
    margin: 20px 0;
}

#course .course-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 25px auto;
}

#course .course-container .course-item {
    margin: 10px;
    width: 445px;
    height: 415px;
    border-radius: 10px;
    background-color: rgb(245, 238, 235);
}

#course .course-container .course-item .course-image img {
    width: 100%;
    height: 250px;
}

#course .course-container .course-item .course-text {
    padding: 5px 10px;
}

#course .course-container .course-item .course-text h3 {
    font-size: 20px;
    color: rgb(197, 120, 85);
    margin-bottom: 10px;
}

#course .course-container .course-item .course-text p {
    font-size: 16px;
    line-height: 1.5;
}

/* ===================extracurriculars======================== */
#extracurriculars {
    margin: 50px 20px;
    /* display: flex;
    justify-content: space-between;
    align-items: center; */
}

#extracurriculars .extracurricular-info h2 {
    font-size: 50px;
    color: rgb(238, 81, 8);
    text-align: left;
}

#extracurriculars .extracurricular-info p {
    font-size: 20px;
    line-height: 1.5;
    margin-top: 10px;
}

#extracurriculars .extracurricular-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 25px auto;
}

#extracurriculars .extracurricular-container .extracurricular-item {
    /* position: relative; */
    /* margin: 20px; */
    width: 30%;
    height: 400px;
}

#extracurriculars .extracurricular-container .extracurricular-item .extracurricular-image {
    position: relative;
    width: 100%;
    height: 300px;
}

#extracurriculars .extracurricular-container .extracurricular-item img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
}

#extracurriculars .extracurricular-container .extracurricular-item .layer {
    position: absolute;
    width: 96%;
    height: 93%;
    background-color: rgba(99, 35, 6, 0.61);
    border-radius: 15px;
    padding: 10px 10px;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
    bottom: 0;
    opacity: 0;
}

#extracurriculars .extracurricular-container .extracurricular-item:hover .layer {
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

#extracurriculars .extracurricular-container .extracurricular-item h3 {
    font-size: 20px;
    color: rgba(233, 71, 71, 0.7);
    margin-top: 5px;
}

/* ----------------------facilities---------------------------- */
#facilities {
    margin: 50px 0 0;
    background-color: rgba(245, 238, 235, 0.8);
    padding: 50px 20px;
}

#facilities h2 {
    text-align: center;
    font-size: 50px;
    color: rgb(238, 81, 8);
    margin-bottom: 30px;
}

#facilities .facility-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#facilities .facility-item {
    margin: 0 30px;
    padding: 20px;
    transition: transform 0.3s ease;
}

#facilities .facility-item:hover {
    transform: scale(1.1);
}

#facilities .facility-item img {
    width: 100%;
    border-radius: 20px;
}

#facilities .facility-item p {
    font-size: 20px;
    color: #333;
    line-height: 1.5;
}

#facilities .facility-item p.detail {
    font-size: 20px;
    color: #333;
    text-align: center;
}

/* ---------------technologies-------------------------------------- */
#technologies {
    padding: 50px 20px;
    background-color: rgba(238, 81, 8, 0.7);
}

#technologies h2 {
    font-size: 50px;
    color: #fff;
    text-align: center;
}

#technologies p {
    color: #f1f1f1;
    font-size: 25px;
    margin-bottom: 20px;
    text-align: center;
}

#technologies .tech-list li {
    list-style: none;
    margin: 5px 55px;
    padding: 20px;
    color: #fff;
    background-color: #333;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

#technologies .tech-list li:hover {
    transform: scale(1.1);
}

/* ----------------------testimonials--------------------------- */
#testimonials {
    margin: 50px 20px;
    text-align: center;
}

#testimonials h2 {
    font-size: 50px;
    color: rgb(238, 81, 8);
    margin-bottom: 30px;
}

#testimonials .testimonial-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

#testimonials .testimonial-item {
    width: 400px;
    height: 150px;
    background-color: rgba(245, 238, 235, 0.9);
    margin: 20px;
    border-radius: 20px;
    padding: 10px 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    position: relative;
}

#testimonials .testimonial-item p {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

i.quote {
    color: rgb(197, 120, 85);
    font-size: 20px;
    margin: 15px 10px;
}

#testimonials .testimonial-item cite {
    margin-top: 10px;
    font-size: 20px;
    color: rgb(197, 120, 85);
}

#testimonials .testimonial-item .testi-image {
    border-radius: 50%;
    height: 70px;
    width: 70px;
    background-color: rgb(197, 120, 85);
    padding: 2px;
    position: absolute;
    bottom: 5px;
    right: 10px;
    transition: 0.3s ease-in-out all;
}

#testimonials .testimonial-item .testi-image:hover {
    transform: scale(1.2);
}

#testimonials .testimonial-item .testi-image img {
    border-radius: 50%;
    width: 95%;
    height: 95%;
    margin: 2px;
}

/* ----------------------footer------------------------------- */
footer {
    background-color: rgb(238, 81, 8);
    color: #fff;
    padding: 30px 40px;
    /* margin-top: 50px; */
}

footer .newsletter {
    margin-bottom: 30px;
}

footer .newsletter h2 {
    font-size: 30px;
    color: #fff;
    margin-bottom: 5px;
    text-align: center;
}

footer .newsletter p {
    font-size: 18px;
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}

footer .newsletter form {
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .newsletter input[type="email"] {
    width: 80%;
    padding: 20px;
    border: none;
    border-radius: 30px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    outline: none;
    color: #fff;
    font-size: 16px;
}

footer .newsletter input[type="submit"] {
    background-color: #333;
    color: #fff;
    padding: 20px 40px;
    border: none;
    border-radius: 30px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 16px;
}

footer .footer-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

footer .footer-info .about {
    width: 50%;
}

footer .footer-info .about h3 {
    font-size: 25px;
    color: #fff;
    margin-bottom: 10px;
}

footer .footer-info .about p {
    font-size: 16px;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 30px;
}

footer .footer-info .contact h3 {
    font-size: 25px;
    color: #fff;
    margin-bottom: 10px;
}

footer .footer-info .contact .contact-link i {
    margin: 10px 10px 10px 0;
    font-size: 25px;
}

footer .footer-info .contact .contact-link a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

footer .footer-info .contact .contact-link a:hover {
    text-decoration: underline 2px solid;
    color: rgb(219, 166, 141);
}

footer .footer-info .socials h3 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
}

footer .footer-info .socials .social-link {
    list-style: none;
}

footer .footer-info .socials .social-link li i {
    margin: 5px 10px 5px 0;
    font-size: 25px;
}

footer .footer-info .socials .social-link li a {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
}

footer .footer-info .socials .social-link li a:hover {
    text-decoration: underline 2px solid;
    color: rgb(219, 166, 141);
}

footer .footer-info .terms h3 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
}

footer .footer-info .terms ul {
    list-style: none;
}

footer .footer-info .terms ul li {
    margin-bottom: 5px;
}

footer .footer-info .terms ul li a {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
}

footer .footer-info .terms ul li a:hover {
    text-decoration: underline 2px solid;
    color: rgb(219, 166, 141);
}

hr {
    margin: 30px 0;
    border: none;
    border-top: 1px solid #a8a8a8;
}

footer .copyright {
    color: #e8e8e8;
    font-size: 14px;
    text-align: center;
}

footer .copyright #designer {
    font-size: 10px;
    color: #a8a8a8;
}

footer .copyright #designer a {
    color: rgba(122, 11, 11, 0.4);
    text-decoration: none;
}

footer .copyright #designer a:hover {
    color: rgb(197, 120, 85);
    text-decoration: 1px solid;
}

/* ---------------aboutus  page------------------------------------------------ */

/* About Hero Section */
.about-hero {
    background: linear-gradient(rgba(238, 81, 8, 0.8), rgba(0, 0, 0, 0.5)),
        url("images/advanced\ building.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 90px 20px 10px;
    height: 90vh;
    position: relative;
    top: -70px;
}

/* About Us Section */
#about-us {
    padding: 50px 0 0;
    /* background-color: #f5f5f5; */
    color: #333;
}

/* Story Section */
.story h2 {
    font-size: 35px;
    text-align: center;
    margin-bottom: 20px;
    color: rgb(238, 81, 8);
}

.story p {
    font-size: 18px;
    line-height: 1.6;
    width: 70%;
    margin: 0 auto;
    text-align: center;
    color: #555;
}

/* Team Section */
.team {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
}

.team-member {
    text-align: center;
    width: 300px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.team-member img {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 15px;
}

.team-member h3 {
    font-size: 22px;
    margin-bottom: 5px;
    color: rgb(238, 81, 8);
}

.team-member p {
    font-size: 16px;
    color: #666;
}

/* -------------------mission------------------- */
#mission {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#mission .mission-image {
    margin: 0 20px;
}

#mission .mission-image img {
    width: 800px;
    height: auto;
    border-radius: 20px;
}

#mission .mission-text {
    text-align: center;
    padding: 0 20px;
}

#mission .mission-text h2 {
    font-size: 50px;
    color: rgb(238, 81, 8);
}

#mission .mission-text p {
    line-height: 2;
    font-size: 20px;
}

/* ===============value========================= */
#values {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#values .value-image {
    margin: 0 20px;
}

#values .value-image img {
    width: 800px;
    height: auto;
    border-radius: 20px;
}

#values .value-text {
    text-align: center;
    padding: 0 20px;
}

#values .value-text h2 {
    font-size: 50px;
    color: rgb(238, 81, 8);
}

#values .value-text p {
    line-height: 2;
    font-size: 20px;
}

/* Principal's Message Section */
#princi-message {
    /* background-color: #f9f9f9; */
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px 30px;
    margin: 20px auto;
    width: 90%;
    max-width: 950px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#princi-message h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 15px;
    text-transform: capitalize;
    font-weight: bold;
}

#princi-message p {
    font-size: 1.4rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* -----------------------------------Academics page------------------------------- */
.acad-hero {
    background-image: linear-gradient(rgba(238, 81, 8, 0.6), rgba(0, 0, 0, 0.3)),
        url("images/newsletter.jpg");
    background-size: cover;
    height: 100vh;
    background-position: center;
    color: white;
    text-align: center;
    padding: 10px 20px;
    position: relative;
    top: -70px;
}

/* .wwo-hero h1 {
    font-size: 50px;
    margin: 20px 0;
} */

/* .hero-title p {
    font-size: 20px;
    line-height: 1.5;
    width: 80%;
    margin: 0 auto;
} */
/* ----------------faculty------------------------------ */
#faculty {
    padding: 20px;
    /* background-color: #f9f9f9; */
    /* border: 1px solid #ddd; */
    border-radius: 8px;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    margin-bottom: 10px;
}

#faculty h2 {
    /* font-size: 28px; */
    font-weight: bold;
    margin-bottom: 15px;
    /* color: #333; */
    text-align: center;
    font-size: 2.5rem;
    color: #2c3e50;
    /* margin-bottom: 10px; */
}

#faculty p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    width: 80%;
    margin: 0 auto 20px;
    text-align: center;
}

#faculty ul {
    list-style: none;
    padding: 0;
    margin: 0 10%;
}

#faculty ul li {
    margin-bottom: 10px;
    font-size: 16px;
    color: #444;
}

#faculty ul li b {
    color: #fe8343;
    /* Highlight faculty names in brand color */
}

#faculty ul li::before {
    content: "✔";
    margin-right: 10px;
    color: #290101;
    /* Subtle accent color for bullet points */
    font-size: 14px;
}

/* ----------------what we offer---------------------------------- */
#what-we-offer {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

#what-we-offer .wwo {
    margin-bottom: 40px;
}

#what-we-offer h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

#what-we-offer p {
    font-size: 1.4rem;
    color: #7f8c8d;
    max-width: 70%;
    line-height: 1.5;
    margin: 0 auto;
    padding-bottom: 10px;
}

.wwo-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.wwo-item {
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.wwo-item h3 {
    font-size: 1.5rem;
    color: #34495e;
    margin-bottom: 10px;
}

.wwo-item p {
    font-size: 0.95rem;
    color: #95a5a6;
}

.wwo-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* ----------------courses--------------------------------- */
#courses {
    padding: 20px;
    background-color: #f9f9f9;
}

#courses h2 {
    text-align: center;
    color: #ff5722;
}

#courses h3 {
    color: #4caf50;
}

#courses p {
    text-align: center;
    color: #666;
    margin-bottom: 20px;
}

.section.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.course {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.course h3 {
    margin-bottom: 10px;
    color: #2196f3;
}

.course p {
    color: #555;
}

/* --------------------------------admissions page-------------------------------------- */
.admission-hero {
    background: linear-gradient(to bottom,
            rgba(119, 43, 1, 0.8),
            rgba(94, 24, 3, 0.8)),
        url("images/hallway.jpeg");
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 70vh;
    text-align: center;
    padding: 60px 0;
    color: #fff;
    position: relative;
    top: -70px;
}

#admissions {
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    font-family: Arial, sans-serif;
    color: #333;
}

#admissions h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ff5722;
    text-align: center;
    border-bottom: 2px solid #ff5722;
    padding-bottom: 5px;
    display: inline-block;
}

#admissions p {
    font-size: 1rem;
    margin-bottom: 20px;
    text-align: justify;
}

#admissions ol,
#admissions ul {
    padding-left: 40px;
    margin-bottom: 20px;
}

#admissions ol li,
#admissions ul li {
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.5;
}

#admissions ul li::marker {
    color: #ff5722;
}

#admissions ol li a,
#admissions ul li a {
    color: #ff5722;
    text-decoration: none;
}

#admissions ol li a:hover,
#admissions ul li a:hover {
    text-decoration: underline;
}

#admissions ul li b {
    color: #333;
}

#admissions p:last-child {
    text-align: center;
    margin-top: 30px;
    font-size: 1rem;
}

#admissions p a {
    color: #ff5722;
    font-weight: bold;
}

#admissions p a:hover {
    text-decoration: underline;
}

/* --------------------------contact page------------------------------------------- */

h1.contact-heading {
    color: #ff5722;
    text-align: center;
    margin-bottom: 10px;
}
h2.contact-subheading{
    text-align: center;
    margin-bottom: 30px;
    color: #666;
}

#contact-section {
    padding: 60px 60px;
    background: linear-gradient(to bottom, #ffffff, #f7b38f);
    margin: 0 auto;
    position: relative;
}

.contact-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}
.contact-info {
    flex: 1;
    background: #f7faff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    line-height: 1.5;
}

.contact-info h3 {
    font-size: 50px;
    margin-bottom: 20px;
    color: #581906;
}

.contact-info h4 {
    color: #ff5722;
   
    font-size: 22px;
    display: block;
    margin-bottom: 5px;
}

.contact-info a:hover {
    text-decoration: underline;
}

.contact-info a {
    font-size: 16px;
    color: #555;
    text-decoration: none;
    /* display: block; */
}
.contact-info i{
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 25px;
    color: #ff5722;
}

.contact-form {
    flex: 1;
    background: #ffffff;
    padding: 30px 30px 5px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-form label {
    font-weight: bold;
    /* margin-bottom: 5px; */
    font-size: 16px;
    color: #ff5722;
}

.contact-form input,
.contact-form textarea {
    margin: 0 auto 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    width: 90%;
    background-color: #fdfdfd;
    transition: border-color 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #ff5722;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 119, 204, 0.5);
}

/* Media Queries */

/* General adjustments for medium screens (max-width: 1024px) */
@media (max-width: 1024px) {
    .wwo-container {
        flex-direction: column;
        /* Stack items vertically */
        gap: 20px;
    }

    .course,
    .testimonial-item {
        width: 100%;
        /* Make courses and testimonials full-width */
    }

    #facilities .facility-container {
        flex-direction: column;
        /* Stack facility items */
        align-items: center;
    }

    #facilities .facility-item {
        margin: 20px 0;
        /* Add spacing between stacked items */
    }
}

/* For tablets and larger phones (max-width: 768px) */
@media (max-width: 768px) {
    .hero-title h1 {
        font-size: 60px;
    }

    h2 {
        font-size: 40px;
    }

    .hero-title p {
        width: 90%;
        font-size: 18px;
    }

    #about {
        width: 90%;
        left: 4%;
        padding: 10px;
    }

    .mission-vision h2 {
        font-size: 30px;
    }

    .mission-vision p {
        font-size: 18px;
    }

    #offer .offer-container {
        flex-direction: column;
        align-items: center;
    }

    #offer .offer-container .offer-item {
        width: 90%;
        margin: 10px 0;
    }

    #course .course-container {
        flex-direction: column;
        align-items: center;
    }

    #course .course-container .course-item {
        width: 90%;
        margin: 10px 0;
    }

    #facilities .facility-container {
        flex-direction: column;
        align-items: center;
    }

    #facilities .facility-item {
        width: 90%;
        margin: 10px 0;
    }

    .about-hero {
        padding: 60px 20px;
        height: 70vh;
    }

    .about-hero h1 {
        font-size: 40px;
    }

    .about-hero p {
        font-size: 18px;
    }

    .team {
        flex-direction: column;
        align-items: center;
    }

    .team-member {
        width: 90%;
        margin-bottom: 20px;
    }

    #mission,
    #values {
        flex-direction: column;
        align-items: center;
    }

    #mission .mission-image img,
    #values .value-image img {
        width: 90%;
        margin-bottom: 20px;
    }

    #mission .mission-text,
    #values .value-text {
        width: 90%;
    }

    #princi-message {
        width: 95%;
        padding: 10px 20px;
    }

    .acad-hero {
        padding: 60px 20px;
        height: 70vh;
    }

    #testimonials .testimonial-container {
        flex-direction: column;
        align-items: center;
    }

    #testimonials .testimonial-item {
        width: 90%;
        margin: 10px 0;
    }

    footer .footer-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    footer .footer-info .about,
    footer .footer-info .contact,
    footer .footer-info .socials,
    footer .footer-info .terms {
        width: 90%;
        margin-bottom: 20px;
    }

    #what-we-offer p,
    #courses p {
        font-size: 1.2rem;
        max-width: 90%;
    }

    .wwo-container {
        flex-direction: column;
        align-items: center;
    }

    .wwo-item {
        width: 90%;
        margin: 10px 0;
    }

    .section.grid {
        grid-template-columns: 1fr;
    }

    #admissions h2 {
        font-size: 1.5rem;
    }

    #admissions p,
    #admissions ol li,
    #admissions ul li {
        font-size: 0.9rem;
    }
    #contact-section {
        flex-direction: column;
    }
    .contact-content {
        flex-direction: column;
    }
}

/* For small screens (max-width: 480px) */
 @media (max-width: 480px) {
    nav {
      flex-direction: column;
    }
    #nav-link {
      flex-direction: column;
      align-items: flex-start;
    }
    #nav-link li {
      margin: 5px 0;
      font-size: 14px;
    }
    #logo {
      width: 50px;
    }
    .hero-title h1 {
      font-size: 40px;
    }
    h2 {
      font-size: 30px;
    }
    .hero-title p {
      font-size: 16px;
    }
    #about {
      width: 70%;
      left: 2%;
    }
    .mission-vision h2 {
      font-size: 25px;
    }
    .mission-vision p {
      font-size: 16px;
    }
    #offer h2 {
      font-size: 40px;
    }
    #course h2 {
      font-size: 40px;
    }
    #extracurriculars .extracurricular-info h2 {
      font-size: 40px;
    }
    #facilities h2 {
      font-size: 40px;
    }
    .about-hero {
      padding: 30px 20px;
      height: 60vh;
    }
    .about-hero h1 {
      font-size: 30px;
    }
    .about-hero p {
      font-size: 16px;
    }
    .story h2 {
      font-size: 25px;
    }
    .story p {
      width: 90%;
      font-size: 16px;
    }
    .team-member img {
      height: 150px;
    }
    .team-member h3 {
      font-size: 18px;
    }
    .team-member p {
      font-size: 14px;
    }
    #mission .mission-text h2,
    #values .value-text h2 {
      font-size: 30px;
    }
    #mission .mission-text p,
    #values .value-text p {
      font-size: 16px;
    }
    #princi-message h2 {
      font-size: 1.5rem;
    }
    #princi-message p {
      font-size: 1.2rem;
    }
    .acad-hero {
      padding: 30px 20px;
      height: 60vh;
    }
    .acad-hero h1 {
      font-size: 30px;
    }
    .acad-hero p {
      font-size: 16px;
    }
    #faculty h2 {
      font-size: 2rem;
    }
    #faculty p {
      font-size: 14px;
      width: 90%;
    }
    #faculty ul li {
      font-size: 14px;
    }
    #testimonials h2 {
      font-size: 30px;
    }
    #testimonials .testimonial-item {
      width: 95%;
    }
    footer .newsletter h2 {
      font-size: 24px;
    }
    footer .newsletter p {
      font-size: 16px;
    }
    footer .footer-info .about h3,
    footer .footer-info .contact h3,
    footer .footer-info .socials h3,
    footer .footer-info .terms h3 {
      font-size: 20px;
    }
    footer .footer-info .about p,
    footer .footer-info .contact .contact-link a,
    footer .footer-info .socials .social-link li a,
    footer .footer-info .terms ul li a {
      font-size: 16px;
    }
    #what-we-offer h2,
    #courses h2 {
      font-size: 2rem;
    }
    #what-we-offer p,
    #courses p {
      font-size: 1rem;
    }
    .wwo-item {
      width: 100%;
    }
    #admissions h2 {
      font-size: 1.2rem;
    }
    #admissions p,
    #admissions ol li,
    #admissions ul li {
      font-size: 0.8rem;
    }
    #contact-section {
        padding: 20px;
    }
    .contact-form input,
    .contact-form textarea {
        font-size: 14px;
    }
    .contact-form button {
        font-size: 14px;
    }
    .contact-info h3 {
        font-size: 18px;
    }
    .contact-info p {
        font-size: 14px;
    }
    .contact-info a {
        font-size: 14px;
    }
} 

/* @media (max-width: 480px) {
    nav {
      flex-direction: column;
      align-items: flex-start;
      padding: 10px;
    }
  
    #nav-link {
      flex-direction: column;
      align-items: flex-start;
      padding: 0;
    }
  
    #nav-link li {
      margin: 10px 0;
      font-size: 16px;
    }
  
    #logo {
      width: 60px;
      margin-bottom: 10px;
    }
  
    .hero-title h1 {
      font-size: 36px;
      text-align: center;
    }
  
    .hero-title p {
      font-size: 14px;
      text-align: center;
      padding: 0 10px;
    }
  
    h2 {
      font-size: 28px;
    }
  
    #about {
      width: 90%;
      margin: 0 auto;
    }
  
    .mission-vision h2 {
      font-size: 22px;
      text-align: center;
    }
  
    .mission-vision p {
      font-size: 14px;
      line-height: 1.6;
      padding: 0 10px;
      text-align: justify;
    }
  
    #offer h2,
    #course h2,
    #extracurriculars .extracurricular-info h2,
    #facilities h2 {
      font-size: 32px;
      text-align: center;
    }
  
    .about-hero {
      padding: 20px 15px;
      height: 50vh;
    }
  
    .about-hero h1 {
      font-size: 28px;
      text-align: center;
    }
  
    .about-hero p {
      font-size: 14px;
      line-height: 1.6;
      text-align: justify;
      padding: 0 10px;
    }
  
    .story h2 {
      font-size: 22px;
      text-align: center;
    }
  
    .story p {
      width: 95%;
      font-size: 14px;
      margin: 0 auto;
      line-height: 1.6;
      text-align: justify;
    }
  
    .team-member img {
      height: 120px;
      width: auto;
    }
  
    .team-member h3 {
      font-size: 16px;
      text-align: center;
    }
  
    .team-member p {
      font-size: 12px;
      text-align: center;
    }
  
    #mission .mission-text h2,
    #values .value-text h2 {
      font-size: 28px;
      text-align: center;
    }
  
    #mission .mission-text p,
    #values .value-text p {
      font-size: 14px;
      line-height: 1.6;
      padding: 0 10px;
      text-align: justify;
    }
  
    #princi-message h2 {
      font-size: 20px;
      text-align: center;
    }
  
    #princi-message p {
      font-size: 14px;
      text-align: justify;
      line-height: 1.6;
      padding: 0 10px;
    }
  
    .acad-hero {
      padding: 20px 15px;
      height: 50vh;
    }
  
    .acad-hero h1 {
      font-size: 28px;
      text-align: center;
    }
  
    .acad-hero p {
      font-size: 14px;
      text-align: justify;
      line-height: 1.6;
    }
  
    #faculty h2 {
      font-size: 24px;
      text-align: center;
    }
  
    #faculty p {
      font-size: 14px;
      width: 95%;
      line-height: 1.6;
      margin: 0 auto;
      text-align: justify;
    }
  
    #faculty ul li {
      font-size: 14px;
    }
  
    #testimonials h2 {
      font-size: 28px;
      text-align: center;
    }
  
    #testimonials .testimonial-item {
      width: 95%;
      margin: 10px auto;
    }
  
    footer .newsletter h2 {
      font-size: 20px;
      text-align: center;
    }
  
    footer .newsletter p {
      font-size: 14px;
      text-align: justify;
      line-height: 1.6;
    }
  
    footer .footer-info .about h3,
    footer .footer-info .contact h3,
    footer .footer-info .socials h3,
    footer .footer-info .terms h3 {
      font-size: 18px;
    }
  
    footer .footer-info .about p,
    footer .footer-info .contact .contact-link a,
    footer .footer-info .socials .social-link li a,
    footer .footer-info .terms ul li a {
      font-size: 14px;
    }
  
    #what-we-offer h2,
    #courses h2 {
      font-size: 28px;
      text-align: center;
    }
  
    #what-we-offer p,
    #courses p {
      font-size: 14px;
      text-align: justify;
      line-height: 1.6;
    }
  
    .wwo-item {
      width: 100%;
      margin-bottom: 20px;
    }
  
    #admissions h2 {
      font-size: 18px;
      text-align: center;
    }
  
    #admissions p,
    #admissions ol li,
    #admissions ul li {
      font-size: 14px;
      line-height: 1.6;
      padding: 0 10px;
      text-align: justify;
    }
  } */

/* @media (max-width: 480px) {
    nav {
        flex-direction: column;
    }

    #nav-link {
        flex-direction: column;
        align-items: flex-start;
    }

    #nav-link li {
        margin: 5px 0;
        font-size: 14px;
    }

    #logo {
        width: 50px;
    }

    .hero-title h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 30px;
    }

    .hero-title p {
        font-size: 16px;
    }

    #about {
        width: 95%;
        left: 2.5%;
    }

    .mission-vision h2 {
        font-size: 25px;
    }

    .mission-vision p {
        font-size: 16px;
    }

    #offer h2 {
        font-size: 40px;
    }

    #course h2 {
        font-size: 40px;
    }

    #extracurriculars .extracurricular-info h2 {
        font-size: 40px;
    }

    #facilities h2 {
        font-size: 40px;
    }

    .about-hero {
        padding: 30px 20px;
        height: 60vh;
    }

    .about-hero h1 {
        font-size: 30px;
    }

    .about-hero p {
        font-size: 16px;
    }

    .story h2 {
        font-size: 25px;
    }

    .story p {
        width: 90%;
        font-size: 16px;
    }

    .team-member img {
        height: 150px;
    }

    .team-member h3 {
        font-size: 18px;
    }

    .team-member p {
        font-size: 14px;
    }

    #mission .mission-text h2,
    #values .value-text h2 {
        font-size: 30px;
    }

    #mission .mission-text p,
    #values .value-text p {
        font-size: 16px;
    }

    #princi-message h2 {
        font-size: 1.5rem;
    }

    #princi-message p {
        font-size: 1.2rem;
    }

    .acad-hero {
        padding: 30px 20px;
        height: 60vh;
    }

    .acad-hero h1 {
        font-size: 30px;
    }

    .acad-hero p {
        font-size: 16px;
    }

    #faculty h2 {
        font-size: 2rem;
    }

    #faculty p {
        font-size: 14px;
        width: 90%;
    }

    #faculty ul li {
        font-size: 14px;
    }

    #testimonials h2 {
        font-size: 30px;
    }

    #testimonials .testimonial-item {
        width: 95%;
    }

    footer .newsletter h2 {
        font-size: 24px;
    }

    footer .newsletter p {
        font-size: 16px;
    }

    footer .footer-info .about h3,
    footer .footer-info .contact h3,
    footer .footer-info .socials h3,
    footer .footer-info .terms h3 {
        font-size: 20px;
    }

    footer .footer-info .about p,
    footer .footer-info .contact .contact-link a,
    footer .footer-info .socials .social-link li a,
    footer .footer-info .terms ul li a {
        font-size: 16px;
    }

    #what-we-offer h2,
    #courses h2 {
        font-size: 2rem;
    }

    #what-we-offer p,
    #courses p {
        font-size: 1rem;
    }

    .wwo-item {
        width: 100%;
    }

    #admissions h2 {
        font-size: 1.2rem;
    }

    #admissions p,
    #admissions ol li,
    #admissions ul li {
        font-size: 0.8rem;
    }
} */