*{
    margin: 0;
    padding: 0;
}
.header{
    min-height: 100vh;
    width: 100%;
    background-image:linear-gradient(12deg, black, #6ab5f659), url(images/IMG-20250515-WA0026.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}

.logo {
    width: 140px; /* Adjust the size as needed */
    height: auto;
    
}
nav{
    display: flex;
    padding:2% 6%;
    justify-content: space-between;
    align-items:center;
    cursor: pointer;

}
nav img{
    width: 150px;
}
.nav-links{
    flex: 1;
    text-align: right;
    font-weight: 300px;
    font-size: 5px;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li::after {
    content:'';
    width: 0%;
    height: 2px;
    background-color:#1469be ;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after{
    width: 100%;

}
.nav-links ul li a{
    text-decoration:none;
    color: white;
    font-size: 18px;
    font-family:sans-serif ;
}
.text-box{
    width:90%;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    text-align: center;
}
.text-box h1{
    font-size: 30px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    font-family: "Poppins",sans-serif;
    color: white;

}
/* ...existing code... */

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.text-box h1 {
    /* ...existing code... */
    animation: fadeDown 2.2s ease;
}

/* ...existing code... */
.text-box p {
    margin-top: 1px;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 40px;
    color: white;
    font-size: 10px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
    font-family: "Poppins",sans-serif;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}
.text-box p {
    /* ...existing code... */
    animation: fadeDown 2.2s ease;
}

.hero-btn{
    display: inline-block;
    text-decoration: none;
    color:white;
    border: 1px solid white;
    padding: 12px 34px;
    font-size: medium13px;
    background: transparent;
    position: relative;
    cursor:pointer ;
    font-family:"Poppins",sans-serif ;
}
.hero-btn:hover{
    border: 1px solid #003366;
    background: #003366; ;
    transition: 1s;
}
/* cources */
.course{
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
    font-family: 'Josefin Sans', sans-serif;
}
h1{
    font-size: 36px;
    font-weight: 600;
    font-family: 'Rubik', sans-serif;
    color: #003366;
}
p {
    color: #777;
    font-size: 11px;
    font-weight: 400;
    line-height: 22px;
    padding: 40px;
   
}
.row{
    margin: 5%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 30px;
    flex-wrap: wrap;
}
.course-col{
    flex: 1 1 30%;
    display: flex;
    flex-direction: column;
    background: #dbe6f1;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
    cursor: pointer;
    transition: box-shadow 0.6s;
    min-width: 250px;
    
}
.course-col:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
    transition: 0.5s ease !important;

}


/*-----------campus---------*/
.row {
    margin: 5%;
    display: flex;
    justify-content: space-between;
}


.campus{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
     font-family: 'Josefin Sans', sans-serif;
}
.campus-col{
   flex-basis: 30%; 
   border-radius: 10px;
   margin-bottom: 30px;
   position: relative;
   overflow: hidden;
}

.campus-col img{
    width: 100%;
     display: block;
    width: 100;
}


.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background:rgba(106, 177, 248, 0.7); 
}
.layer h3 {
    width: 100%;
    font-weight: 900;
    color: white;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    
}

.layer:hover h3{
    bottom: 49%;
    opacity:1;
} 
/*---------facilities--------*/
.facilities{
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 30pxpx;
    font-family:'Josefin Sans', sans-serif ;
}
.facilities-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
}
.facilities-col img{
    width: 100%;
    border-radius: 10px;

}
.facilities-col p{
    padding: 0;
}
.facilities-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: left;
    
}
.facilities-col img:hover{
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
    transition: 0.5s ease !important;

}
/*--------testmonials-----*/
.testimonials{
    width: 100%;
    margin: auto;
    padding-top:100px ;
    text-align: center;
    font-family:'Josefin Sans', sans-serif ;

}
.testimonials-col{
    flex-basis: 44%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
    background: #dbe6f1;
    padding: 25px;
    cursor: pointer;
    display: flex;

}
.testimonials-col img{
    height: 40px;
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50%;
}
.testimonials-col p{
    padding: 0;
}
.testimonials-col h3{
    margin-top: 15px;
    text-align: center;
}
.testimonials-col .fa{
    color: #f44366;
    
}
.testimonials-col:hover{
    
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
    transition: 0.5s ease !important;
}
/*-----call to action section-----*/
.cta{
    margin: 100px auto;
    width: 80%;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7) ),url(images/banner\ 2\ \(1\).jpg);
    background-position: center;
    background-color: cover;
    border-radius: 10px;
    text-align: center;
    padding:100px 0;
}
.cta h1{
    color: white;
    margin-bottom: 40px;
    padding: 0;
    font-family: 'Josefin Sans', sans-serif;

}
/*......footer...*/
.footer{
    width: 100%;
    text-align: center;
    padding: 30px 0;
    font-family:'Josefin Sans', sans-serif ;
    background-color: #003366;
    
}
.footer h4{
    margin-bottom: 25px;
    margin-top: 20px;
    font-weight: 600;
}

.icons .fa{
    color: #f44366;
    margin: 0 13px;
    cursor: pointer;
    padding: 18px 0;
}
.fa-heart-o{
    color: #f44366;
}
/*----------About us page----*/
.sub-header{
    height: 50vh;
    width: 100%;
    background-image:linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner\ 2\ \(1\).jpg) ;
    background-position: center;
    background-size: cover;
    text-align: center;
    color: white;}
    .sub-header h1{
        color: white;
    }

/* General Styling */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
    color: #333;
}

/* About Us Section */
.about-us {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 80px 20px;
    background: white;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* Row Structure */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center;
}

/* Text Column */
.about-col {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

/* Headings */
.about-col h1 {
    font-size: 60px;
    font-weight: bold;
    color: #003366;
    margin-bottom: 20px;
    text-align: center;
    font-family: Rubik, sans-serif;
}

.about-col h2, .about-col h3, .about-col h4, .about-col h5 {
    color: #003366;
    margin-top: 25px;
    text-align: center;
    font-weight: bold;
}

.about-col p {
    font-size: 18px;
    line-height: 1.8;
    color: #333333;
    font-family: 'Rubik', sans-serif;
}

/* Button Styling */
.red-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 18px;
    color: #003366;
    border: 2px solid #003366;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
    font-weight: bold;
}

.red-btn:hover {
    background: #f44366;
    color: white;
}

/* Image Column */
.about-col img {
     width: 60%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    margin-bottom: 80px;
    margin-left: 200px;
}

.about-col img:hover {
    transform: scale(1.07);
}

/* Responsive Design */
@media (max-width: 768px) {
    .row {
        flex-direction: column;
        text-align: center;
    }

    .about-col img {
        margin-top: 30px;
    }
}


/*-----------choose-maktab-------*/
.choose-maktab{
     width: 80%;
    margin: auto;
    padding-top:80px ;
    padding-bottom: 50px;
    font-family:'Josefin Sans', sans-serif ;
}
.choose-col{
     flex-basis: 48%;
    padding: 30px 2px;
    font-family:'Josefin Sans', sans-serif ;
}
/*---------blog------*/
.blog-content {
    width: 80%;
    margin: auto;
    padding: 60px 0;
}
.blog-left{
    flex-basis: 65%;

}
.blog-left img{
    width: 100%;
}
.blog-left p{
    padding: 0;
    line-height: 22px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    padding: 15px 0 25px;
}
.blog-left h2{
    color: #222;
    font-weight: 600;
    margin: 30px 0;
    font-family: 'Josefin Sans', sans-serif;
}
.blog-left h1{
    font-size: large;
    padding: 30px 2px;
    flex-basis:48%;
    font-family:'Josefin Sans', sans-serif ;
}
/*---------blogtest--------*/
/* General Styling */
body {
    font-family: 'Josefin Sans', sans-serif;
    background-color: #f9f9f9;
    margin: 0;
    padding: 0;
}

/* Blog Section */
.blog-about {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    padding: 60px 20px;
    background: white;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

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

/* Text Column */
.blog-col {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

.blog-col h1 {
    font-size: 36px;
    color: #333;
    margin-bottom: 15px;
}

.blog-col h2 {
    font-size: 28px;
    color: #444;
    margin-top: 20px;
}

.blog-col p {
    font-size: 18px;
    line-height: 1.7;
    color: #666;
}

/* Image Column */
.blog-col img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
    margin-bottom: 80px;
    
}

.blog-col img:hover {
    transform: scale(1.05);
}

/* Button Styling */
.red-btn {
    padding: 12px 25px;
    font-size: 18px;
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
    background: linear-gradient(90deg, #003366 70%, #6ab5f6 100%);
    border-color: white;
}

.red-btn:hover {
    background: linear-gradient(90deg, #6ab5f6 70%, #003366 100%);
    color: #fff;
    border-color: white;
}


/* Footer Styling */
.footer {
    text-align: center;
    padding: 40px 20px;
    background: #333;
    color: white;
}

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

.icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    font-size: 22px;
}

.icons i {
    color: white;
    transition: color 0.3s ease-in-out;
}

.icons i:hover {
    color: #f44366;
}
.family{
    margin-top:0px ;
}
/*contact us page*/
.location{
    width: 80%;
    margin: auto;
    padding: 80px 0;
    font-family: 'Josefin Sans', sans-serif;
}
.location iframe{
    width: 100%;
}
/* Contact Us Section */
.contact-us {
    width: 100%;
    margin: auto;
}

.contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
}

.contact-row .contact-col {
    flex-basis: 45%;
    padding: 20px;
    font-family: 'Josefin Sans', sans-serif;
    margin-bottom: 30px;
    text-align: left;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.contact-col div {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.contact-col div .fa {
    font-size: 28px;
    color: #f44366;
    margin: 10px;
    margin-right: 30px;
}

.contact-col div p {
    padding: 0;
    font-family: 'Josefin Sans', sans-serif;
}

.contact-col div h5 {
    font-size: 20px;
    color: #333;
    margin-bottom: 5px;
    font-weight: 400;
    font-family: 'Josefin Sans', sans-serif;
}

.contact-col input,
.contact-col textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
    font-size: 16px;
    font-family: 'Josefin Sans', sans-serif;
    outline: none;
    box-sizing: border-box;
}

/* Responsive: Stack columns on small screens */
@media (max-width: 900px) {
    .contact-row {
        flex-direction: column;
    }
    .contact-row .contact-col {
        flex-basis: 100%;
    }
}
/***admission page***/
/* ...existing code... */

/* ...existing code... */

.admission-section {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(120deg, #f6faff 60%, #eaf4fb 100%);
    padding: 80px 0 60px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.admission-form-container {
    width: 100%;
    max-width: 820px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(0,51,102,0.10);
    padding: 48px 36px 36px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #003366;
    margin: 0 auto;
    transition: box-shadow 0.3s;
}

.admission-form-container h2 {
    margin-bottom: 32px;
    color: #003366;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-align: center;
}

.admission-form-container form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-flex-row {
    display: flex;
    gap: 36px;
    align-items: flex-start;
    width: 100%;
}

.form-fields {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-fields input,
.form-fields select {
    width: 100%;
    padding: 15px 18px;
    border: 1.5px solid #b3c6e0;
    border-radius: 8px;
    font-size: 17px;
    font-family: 'Josefin Sans', sans-serif;
    background: #f8fafd;
    transition: border 0.2s, box-shadow 0.2s;
    outline: none;
    color: #003366;
}

.form-fields input:focus,
.form-fields select:focus {
    border-color: #6ab5f6;
    box-shadow: 0 0 0 2px #eaf4fb;
}

.form-fields input:hover,
.form-fields select:hover {
    border-color: #003366;
}

.photo-upload-block {
    flex: 1;
    background: #f0f6fa;
    border: 2.5px dashed #6ab5f6;
    border-radius: 14px;
    padding: 32px 16px 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 180px;
    max-width: 220px;
    box-sizing: border-box;
    position: relative;
    margin-left: 36px;
    box-shadow: 0 4px 24px rgba(106,181,246,0.10);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.photo-upload-block label {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.1rem;
    color: #003366;
    margin-bottom: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.photo-upload-block input[type="file"] {
    display: none;
}

.photo-preview {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    object-fit: cover;
    margin-bottom: 12px;
    border: 2px solid #6ab5f6;
    background: #fff;
    box-shadow: 0 2px 8px rgba(106,181,246,0.13);
    display: none;
    transition: box-shadow 0.2s;
}

.photo-upload-block.uploaded .photo-preview {
    display: block;
}

.photo-upload-block .upload-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background: #eaf4fb;
    color: #6ab5f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    margin-bottom: 12px;
    border: 2px dashed #b3c6e0;
    transition: background 0.2s, color 0.2s;
    box-shadow: 0 1px 4px rgba(106,181,246,0.07);
}

.photo-upload-block.uploaded .upload-placeholder {
    display: none;
}

.photo-upload-block .upload-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 0;
    background: linear-gradient(90deg, #003366 70%, #6ab5f6 100%);
    color: #fff;
    border-radius: 8px;
    text-align: center;
    font-size: 1.08rem;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s, color 0.2s;
    border: none;
    box-shadow: 0 1px 4px rgba(106,181,246,0.10);
}

.photo-upload-block .upload-btn:hover {
    background: linear-gradient(90deg, #6ab5f6 70%, #003366 100%);
    color: #fff;
}

.admission-form-container .hero-btn {
    width: 100%;
    padding: 16px;
    font-size: 19px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #003366 60%, #6ab5f6 100%);
    color: #fff;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.2s;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,51,102,0.08);
    margin-top: 18px;
}

.admission-form-container .hero-btn:hover {
    background: linear-gradient(90deg, #6ab5f6 60%, #003366 100%);
    color: #fff;
}

@media (max-width: 900px) {
    .form-flex-row {
        flex-direction: column;
        gap: 18px;
    }
    .photo-upload-block {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        margin-left: 0;
        margin-top: 18px;
    }
    .admission-form-container {
        padding: 28px 6px 18px 6px;
    }
}

/* ...existing code... */


/*****testblog page*****/
.blog-section {
    width: 100%;
    background: #f9f9f9;
    padding: 60px 0;
}

.blog-section h2 {
    text-align: center;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.5rem;
    color: #f44366;
    margin-bottom: 40px;
    font-weight: 700;
}

.blog-list {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}

.blog-post {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    overflow: hidden;
    width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: box-shadow 0.3s;
}

.blog-post:hover {
    box-shadow: 0 6px 24px rgba(244,67,102,0.15);
}

.blog-post img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: #eee;
}

.blog-post h3 {
    font-family: 'Rubik', sans-serif;
    color: #003366;
    font-size: 24px;
    margin: 18px 0 10px 0;
    text-align: center;
    font-weight: 600;
    padding: 0 16px;
}

.blog-post p {
    font-family: 'Josefin Sans', sans-serif;
    color: #333;
    font-size: 1rem;
    text-align: center;
    padding: 0 18px 24px 18px;
    flex-grow: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .blog-list {
        gap: 24px;
    }
    .blog-post {
        width: 90%;
        max-width: 400px;
    }
}


.choose{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
     font-family: 'Josefin Sans', sans-serif;
}
/* choose section */
.row1 {
    margin: 105px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
    
}


.choose{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
     font-family: 'Josefin Sans', sans-serif;
}

.choose-col {
    flex-basis: 30%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    max-width: 220px;
    min-width: 180px;
    padding: 0; /* Ensure no padding */
    height: 250px; /* Match the image height */
    display: flex;
    align-items: stretch;
}

.choose-col img {
    width: 100%;
    height: 100%; /* Fill the parent */
    display: block;
    object-fit: cover;
}

.layer1 {
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
    pointer-events: none; /* So hover works on parent */
    z-index: 2;
}

.choose-col:hover .layer1 {
    background:rgba(106, 177, 248, 0.7); ;
    pointer-events: auto;
    cursor: pointer;
}



.layer1 h3 {
    width: 100%;
    font-weight: 900;
    color: white;
    font-size: 18px; /* Smaller font */
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    text-align: center;
}
/* ...existing code... */



.layer1:hover{
    background:rgb(244, 67, 54,0.7) ;
}


.layer1:hover h3{
    bottom: 49%;
    opacity:1;
} 
.choose-box h1 {
    text-align: center;
    color: white;
   font-family: poppins, sans-serif;
   animation: fadeDown 1.2s ease;
   
}
/* ...existing code... */

@keyframes fadeDown {
    0% {
        opacity: 0;
        transform: translateY(-40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.choose-box h1 {
    /* ...existing code... */
    animation: fadeDown 2.2s ease;
}
.choose-col a {
    display: block;
    width: 100%;
    height: 100%;
}
.sub-header h1 {
    font-size: 30px; /* or any size you prefer */
    font-weight: 700;
}
/*Ahmad ali php */
.Error, .Success {
    width: 90%;
    max-width: 400px;
    text-align: center;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 20px;
    border-radius: 8px;
    font-family: 'Josefin Sans', sans-serif;
    color: white;
    margin: 0 auto;
    display: block;
    box-sizing: border-box;
    /* Remove any padding-left or text-align:left overrides */
}
.Error {
    background-color: #f44336; /* Red for error */
    border: 1px solid #d32f2f;
}
.Success {
    background-color: #4caf50; /* Green for success */
    border: 1px solid #388e3c;
}


/* ...existing code... */

/* Responsive navigation menu */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-links ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    .nav-links ul li {
        display: block;
        padding: 12px 0;
        text-align: left;
    }
    .nav-links {
        width: 100%;
        text-align: left;
        font-size: 16px;
    }
    .logo {
        width: 120px;
    }
}

/* Responsive blog section */
@media (max-width: 900px) {
    .blog-list {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    .blog-post {
        width: 95%;
        max-width: 400px;
    }
}

/* Responsive images */
.blog-post img,
.logo {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Responsive text sizes */
@media (max-width: 600px) {
    h1, h2 {
        font-size: 1.5rem;
    }
    .blog-post p {
        font-size: 1rem;
    }
    .read-more {
        font-size: 1rem;
    }
    footer p {
        font-size: 0.9rem;
    }
}

/* Responsive footer */
@media (max-width: 600px) {
    footer .icons {
        flex-direction: row;
        gap: 10px;
        font-size: 18px;
    }
}
/* --- Add or update at the end of your CSS file --- */

/* Responsive navigation menu for mobile */
@media (max-width: 900px) {
    nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }
    .nav-links {
        position: absolute;
        top: 60px;
        right: 0;
        background: #222;
        width: 200px;
        height: 0;
        overflow: hidden;
        transition: height 0.4s;
        z-index: 100;
        text-align: left;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    .nav-links.open {
        height: 220px;
        padding: 10px 0;
    }
    .nav-links ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    .nav-links ul li {
        display: block;
        padding: 12px 24px;
        text-align: left;
    }
    .nav-links ul li a {
        font-size: 18px;
        color: #fff;
    }
    .menu-icon {
        display: block;
        font-size: 28px;
        color: #fff;
        cursor: pointer;
        margin-left: auto;
        margin-right: 10px;
        z-index: 101;
    }
}

/* Hide menu icon on desktop */
.menu-icon {
    display: none;
}

/* Responsive header text */
@media (max-width: 600px) {
    .text-box h1 {
        font-size: 20px;
        padding: 0 5px;
    }
    .text-box p {
        font-size: 12px;
        padding: 5px;
    }
    .hero-btn {
        padding: 10px 18px;
        font-size: 14px;
    }
}

/* Responsive course, campus, facilities, testimonials */
@media (max-width: 900px) {
    .row {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    .course-col,
    .campus-col,
    .facilities-col,
    .testimonials-col {
        min-width: 0;
        width: 100%;
        margin-bottom: 20px;
    }
    .campus-col img,
    .facilities-col img {
        height: auto;
        min-height: 180px;
        object-fit: cover;
    }
}

/* Responsive cta section */
@media (max-width: 600px) {
    .cta {
        padding: 40px 5px;
        width: 95%;
    }
    .cta h1 {
        font-size: 1.2rem;
    }
}

/* Responsive footer */
@media (max-width: 600px) {
    .footer {
        padding: 20px 5px;
    }
    .footer h4 {
        font-size: 1.1rem;
    }
    .footer p {
        font-size: 0.95rem;
        padding: 10px 0;
    }
    .icons {
        font-size: 18px;
        gap: 8px;
    }
}

/* Make images fluid */
img, .logo {
    max-width: 100%;
    height: auto;
    display: block;
}
.menu-icon {
    display: none;
}

@media (max-width: 900px) {
    .menu-icon {
        display: block;
        font-size: 28px;
        color: #fff;
        cursor: pointer;
        margin-left: auto;
        margin-right: 10px;
        z-index: 101;
    }
}
@media (max-width: 600px) {
    h1 {
        font-size: 1.5rem !important;
    }
    h2 {
        font-size: 1.2rem !important;
    }
    .text-box h1 {
        font-size: 1.2rem !important;
    }
    .text-box p {
        font-size: 1rem !important;
    }
}
img, .logo {
    max-width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 600px) {
    .text-box {
        top: 35%;
    }
}
.menu-icon {
    display: none;
}

@media (max-width: 900px) {
    .menu-icon {
        display: block;
        font-size: 28px;
        color: #fff;
        cursor: pointer;
        margin-left: auto;
        margin-right: 10px;
        z-index: 101;
    }
    .nav-links {
        position: absolute;
        top: 60px;
        right: 0;
        background: #222;
        width: 200px;
        height: 0;
        overflow: hidden;
        transition: height 0.4s;
        z-index: 100;
        text-align: left;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    }
    .nav-links.open {
        height: 260px; /* Increased height to fit all links */
        padding: 10px 0;
    }
    .nav-links ul {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }
    .nav-links ul li {
        display: block;
        padding: 12px 24px;
        text-align: left;
    }
    .nav-links ul li a {
        font-size: 18px;
        color: #fff;
    }
}
/* Responsive testimonials: horizontal, small, no horizontal scroll */
@media (max-width: 600px) {
    .testimonials {
        padding-top: 40px;
    }
    .row {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .testimonials-col {
        flex: 1 1 45%;
        max-width: 100vw;
        min-width: 140px;
        padding: 10px 6px;
        margin-bottom: 10px;
        font-size: 0.92rem;
        border-radius: 8px;
        background: #dbe6f1;
        display: flex;
        align-items: flex-start;
    }
    .testimonials-col img {
        height: 28px;
        margin-right: 10px;
        margin-left: 0;
    }
    .testimonials-col h3 {
        font-size: 0.95rem;
        margin-top: 6px;
        margin-bottom: 2px;
        text-align: left;
    }
    .testimonials-col p {
        font-size: 0.70rem;
        line-height: 1.4;
    }
}
/* Move the top About Us heading down a bit on mobile */
@media (max-width: 600px) {
    .sub-header h1 {
        margin-top: 60px;
    }
}

@media (max-width: 600px) {
    .choose-box h1 {
        margin-top: 60px;
        font-size: 1.3rem;
        padding: 0 10px;
    }
}
@media (max-width: 600px) {
    .about-col p {
        max-width: 98vw;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2vw;
        padding-right: 2vw;
        text-align: justify; /* Makes both sides more even */
    }
}
/* Center .about-col content on mobile */
@media (max-width: 600px) {
    .about-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .about-col img {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 30px;
        display: block;
    }
    .about-col h1,
    .about-col h2,
    .about-col h3,
    .about-col h4,
    .about-col h5,
    .about-col p {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 900px) {
    .about-col img {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 30px;
        float: none;
        width: 80%;
    }
}


html, body {
    overflow-x: hidden !important;
    width: 100vw;
    max-width: 100vw;
}
@media (max-width: 600px) {
    .about-col p {
        padding: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}
@media (max-width: 600px) {
    .Error, .Success {
        width: 98vw;
        max-width: 98vw;
        font-size: 1rem;
        left: 50%;
        transform: translateX(-50%);
        padding: 12px 4vw;
    }
}
.course p {
    color: #333333;
    font-size: 13px;
    width: auto;
    
}
.campus p {
    color: #333333;
    font-size: 13px;
    width: auto;
}
.facilities p {
    color: #333333;
    font-size: 13px;
    width: auto;
}
.testimonials p {
    color: #333333;
    font-size: 13px;
    
}
@media (max-width: 600px) {
    .admission-form-container {
        padding: 10px 2vw !important;
    }
    .form-fields input,
    .form-fields select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding-left: 10px;
        padding-right: 10px;
    }
    .form-fields {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    .form-flex-row {
        gap: 0 !important;
    }
}
.course-col h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #003366;
}