/* =========================================================
   ROOT VARIABLES
========================================================= */

:root{

    --primary:#041122;
    --primary-dark:#02101f;

    --gold:#cfa15c;
    --gold-light:#d9b87f;

    --white:#ffffff;

    --text:#2c323f;
    --text-light:#666666;

    --bg:#faf8f4;

    --border:#ece6db;

    --radius:16px;

    --transition:.35s ease;

}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Segoe UI',Roboto,Arial,sans-serif;

    color:var(--text);

    background:#fff;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

section{

    padding:80px 0;

}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,h2,h3,h4,h5,h6{

    font-weight:700;

    color:var(--primary);

}

p{

    color:#666;

    line-height:1.8;

}


/* =========================================================
   COMMON UTILITIES
========================================================= */

.max-w-450{

    max-width:450px;

}

.tracking-wide{

    letter-spacing:2px;

}

.leading-relaxed{

    line-height:1.8;

}


/* =========================================================
   NAVBAR
========================================================= */

.custom-navbar{

    background:var(--primary);

    border-bottom:2px solid var(--gold);

    padding:10px 0;

}

.navbar-brand{

    display:flex;

    align-items:center;

    gap:12px;

}

.brand-logo-img{

    width:55px;

    height:55px;

    object-fit:contain;

    flex-shrink:0;

}

.brand-text-wrapper{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.brand-title{

    color:var(--gold);

    font-size:1.30rem;

    font-weight:800;

    line-height:1.1;

    margin:0;

}

.brand-subtitle{

    color: #fff;

    font-size:.68rem;

    letter-spacing:2px;

    margin-top:2px;

}

.navbar-nav{

    align-items:center;

    gap:4px;

}

.navbar-nav .nav-link{

    color:#fff !important;

    font-size:.82rem;

    font-weight:600;

    padding:10px 14px !important;

}

.navbar-nav .nav-link:hover{

    color:var(--gold) !important;

}

.btn-apply{

    background:var(--gold);

    color:var(--primary) !important;

    font-weight:700;

    border-radius:5px;

    padding:8px 18px !important;

}

.btn-apply:hover{

    background:#fff;

}

.navbar-toggler{

    border:none;

}

.navbar-toggler:focus{

    box-shadow:none;

}


/* =========================================================
   HERO
========================================================= */

.hero-section{

    background:
        linear-gradient(rgba(4,17,34,.72),rgba(4,17,34,.82)),
        url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&q=80&w=1600");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    min-height:620px;

    display:flex;

    align-items:center;

}

.hero-title{

    font-size:3.6rem;

    line-height:1.15;

    color:#fff;

    margin-bottom:20px;

}

.hero-section .lead{

    font-size:1.25rem;

    color:#f3f3f3;

}

.btn-hero{

    background:var(--gold);

    color:var(--primary);

    border:none;

    font-weight:700;

    padding:14px 34px;

    border-radius:5px;

}

.btn-hero:hover{

    background:#fff;

}


/* =========================================================
   RESPONSIVE
========================================================= */


/* -----------------------------
   Tablet
----------------------------- */

@media (max-width:991.98px){

section{

    padding:70px 0;

}

.hero-section{

    min-height:620px;

}

.hero-title{

    font-size:3rem;

}

.navbar-collapse{

    background:var(--primary);

    padding:20px;

    margin-top:12px;

}

.navbar-nav{

    align-items:flex-start;

}

.navbar-nav .nav-link{

    width:100%;

    padding:12px 0 !important;

}

.btn-apply{

    width:100%;

    margin-top:15px;

    text-align:center;

}

}


/* -----------------------------
   Mobile
----------------------------- */

@media (max-width:767.98px){

section{

    padding:60px 0;

}

.hero-section{

    min-height:560px;

    text-align:center;

}

.hero-title{

    font-size:2.4rem;

}

.hero-section .lead{

    font-size:1rem;

}

.brand-logo-img{

    width:40px;

    height:40px;

}

.brand-title{

    font-size:1.05rem;

}

.brand-subtitle{

    font-size:.55rem;

    letter-spacing:1.5px;

}

}


/* -----------------------------
   Small Mobile
----------------------------- */

@media (max-width:575.98px){

.hero-section{

    min-height:520px;

}

.hero-title{

    font-size:2rem;

}

.btn-hero{

    width:100%;

}

}

/*=========================================================
    STATISTICS STRIP
=========================================================*/

.stats-strip{
    background:var(--primary);
    border-bottom:4px solid var(--gold);
    padding:18px 0;
}

.stats-item{
    text-align:center;
    height:100%;
}

.stats-item h3{
    color:#fff;
    font-size:2.5rem;
    font-weight:800;
    margin-bottom:8px;
}

.stats-item p{
    color:#d7d7d7;
    font-size:15px;
    margin:0;
    letter-spacing:.5px;
}

.border-end-custom{
    border-right:1px solid rgba(255,255,255,.15);
}


/*=========================================================
    WHY CHOOSE US
=========================================================*/

.choose-card{

    background:#fff;

    border:2px solid var(--border);

    border-radius:18px;

    padding:35px 28px;

    text-align:center;

    height:100%;

    transition:var(--transition);

    box-shadow:0 10px 28px rgba(0,0,0,.05);

}

.choose-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:0 18px 38px rgba(0,0,0,.12);

}

.icon-box{

    width:78px;

    height:78px;

    margin:auto;

    margin-bottom:24px;

    border-radius:50%;

    background:#f8f2e9;

    color:var(--gold);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    transition:var(--transition);

}

.choose-card:hover .icon-box{

    background:var(--gold);

    color:#fff;

    transform:rotate(8deg) scale(1.08);

}

.choose-card h5{

    font-size:1.4rem;

    margin-bottom:16px;

    color:var(--primary);

}

.choose-card p{

    font-size:15px;

    color:#666;

    line-height:1.8;

    margin:0;

}


/*=========================================================
    VISION & MISSION
=========================================================*/

.vm-card{

    background:#fff;

    border:2px solid var(--border);

    border-radius:18px;

    padding:40px;

    height:100%;

    transition:var(--transition);

    box-shadow:0 10px 28px rgba(0,0,0,.05);

}

.vm-card:hover{

    background:var(--primary);

    border-color:var(--gold);

    transform:translateY(-10px);

    box-shadow:0 20px 42px rgba(0,0,0,.15);

}

.vm-card i{

    font-size:48px;

    color:var(--gold);

    margin-bottom:22px;

    transition:var(--transition);

}

.vm-card h3{

    margin-bottom:20px;

    font-size:2rem;

    color:var(--primary);

    transition:var(--transition);

}

.vm-card p{

    color:#666;

    line-height:1.9;

    transition:var(--transition);

}

.mission-list{

    padding:0;

    margin:0;

}

.mission-list li{

    list-style:none;

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:14px;

    color:#666;

    line-height:1.8;

    transition:var(--transition);

}

.mission-list li i{

    font-size:15px;

    color:var(--gold);

    margin-top:5px;

}


/* Hover */

.vm-card:hover h3,

.vm-card:hover p,

.vm-card:hover li{

    color:#fff;

}

.vm-card:hover i{

    color:#ffc107;

}



/*=========================================================
    RESPONSIVE
=========================================================*/

/*-----------------------
   Tablet
-----------------------*/

@media (max-width:991.98px){

.stats-item{

    margin-bottom:25px;

}

.border-end-custom{

    border-right:none;

}

.choose-card{

    padding:30px 24px;

}

.vm-card{

    padding:32px;

}

.vm-card h3{

    font-size:1.8rem;

}

}


/*-----------------------
   Mobile
-----------------------*/

@media (max-width:767.98px){

.stats-strip{

    padding:25px 0;

}

.stats-item h3{

    font-size:2rem;

}

.stats-item p{

    font-size:14px;

}

.choose-card{

    padding:28px 22px;

}

.icon-box{

    width:68px;

    height:68px;

    font-size:26px;

}

.choose-card h5{

    font-size:1.25rem;

}

.vm-card{

    padding:28px;

}

.vm-card h3{

    font-size:1.6rem;

}

.vm-card i{

    font-size:42px;

}

}


/*-----------------------
   Small Mobile
-----------------------*/

@media (max-width:575.98px){

.choose-card{

    padding:24px 20px;

}

.vm-card{

    padding:24px;

}

.vm-card p,

.mission-list li{

    font-size:15px;

}

}

/*=========================================================
                    GALLERY
=========================================================*/

.gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    height:300px;
    cursor:pointer;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:var(--transition);
}

.gallery-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .6s ease;
}

.gallery-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 42px rgba(0,0,0,.15);
}

.gallery-card:hover img{
    transform:scale(1.12);
}

/* Overlay */

.gallery-overlay{

    position:absolute;

    inset:0;

    background:rgba(4,17,34,.70);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.35s;

}

.gallery-overlay i{

    font-size:42px;

    color:#fff;

    transform:scale(.6);

    transition:.35s;

}

.gallery-card:hover .gallery-overlay{

    opacity:1;

}

.gallery-card:hover .gallery-overlay i{

    transform:scale(1);

}

/* Modal */

.modal-content{

    background:var(--primary);

    border:none;

    border-radius:18px;

}

.carousel-item img{

    width:100%;

    max-height:85vh;

    object-fit:contain;

}

.carousel-control-prev-icon,
.carousel-control-next-icon{

    width:48px;

    height:48px;

    background-size:60%;

}



/*=========================================================
                    IMPACT SECTION
=========================================================*/

.impact-section{

    background:var(--bg);

}

.impact-counter{

    background:#fff;

    border:2px solid var(--border);

    border-radius:18px;

    text-align:center;

    padding:35px 25px;

    height:100%;

    transition:var(--transition);

    box-shadow:0 10px 28px rgba(0,0,0,.05);

}

.impact-counter:hover{

    background:var(--primary);

    border-color:var(--gold);

    transform:translateY(-10px);

}

.impact-icon{

    width:76px;

    height:76px;

    margin:auto auto 22px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f8f2e9;

    transition:var(--transition);

}

.impact-icon i{

    font-size:30px;

    color:var(--gold);

}

.impact-counter:hover .impact-icon{

    background:var(--gold);

}

.impact-counter:hover .impact-icon i{

    color:#fff;

}

.impact-count{

    font-size:2.8rem;

    font-weight:800;

    color:var(--primary);

    margin-bottom:10px;

    transition:var(--transition);

}

.impact-counter p{

    color:#666;

    margin:0;

    font-size:16px;

    transition:var(--transition);

}

.impact-counter:hover .impact-count,
.impact-counter:hover p{

    color:#fff;

}



/*=========================================================
                ACHIEVEMENT CARDS
=========================================================*/

.achievement-card{

    background:#fff;

    border:2px solid var(--border);

    border-radius:18px;

    text-align:center;

    padding:35px 25px;

    height:100%;

    transition:var(--transition);

    box-shadow:0 10px 28px rgba(0,0,0,.05);

}

.achievement-card:hover{

    background:var(--primary);

    border-color:var(--gold);

    transform:translateY(-10px);

}

.achievement-icon{

    width:72px;

    height:72px;

    margin:auto auto 20px;

    border-radius:50%;

    background:#f8f2e9;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.achievement-icon i{

    font-size:28px;

    color:var(--gold);

}

.achievement-card:hover .achievement-icon{

    background:var(--gold);

}

.achievement-card:hover .achievement-icon i{

    color:#fff;

}

.achievement-card h5{

    color:var(--primary);

    margin-bottom:12px;

    font-size:1.3rem;

    transition:var(--transition);

}

.achievement-card p{

    color:#666;

    line-height:1.8;

    margin:0;

    transition:var(--transition);

}

.achievement-card:hover h5,
.achievement-card:hover p{

    color:#fff;

}



/*=========================================================
                    RESPONSIVE
=========================================================*/

/* Tablet */

@media (max-width:991.98px){

.gallery-card{

    height:260px;

}

.impact-counter,
.achievement-card{

    padding:30px;

}

}



/* Mobile */

@media (max-width:767.98px){

.gallery-card{

    height:220px;

}

.gallery-overlay i{

    font-size:34px;

}

.impact-counter,
.achievement-card{

    padding:25px;

}

.impact-icon{

    width:66px;

    height:66px;

}

.achievement-icon{

    width:64px;

    height:64px;

}

.impact-count{

    font-size:2.2rem;

}

}



/* Small Mobile */

@media (max-width:575.98px){

.gallery-card{

    height:200px;

}

.carousel-item img{

    max-height:70vh;

}

.impact-count{

    font-size:2rem;

}

.impact-counter p{

    font-size:15px;

}

.achievement-card h5{

    font-size:1.15rem;

}

}

/*=========================================================
                    CONTACT SECTION
=========================================================*/

.contact-section{
    background:var(--bg);
}

.contact-info-card{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:22px;
    background:#fff;
    border:2px solid var(--border);
    border-radius:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.05);
    transition:var(--transition);
    height:100%;
}

.contact-info-card:hover{
    background:var(--primary);
    border-color:var(--gold);
    transform:translateY(-8px);
}

.contact-icon{
    width:58px;
    height:58px;
    flex-shrink:0;
    border-radius:50%;
    background:#f8f2e9;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:var(--transition);
}

.contact-icon i{
    color:var(--gold);
    font-size:22px;
}

.contact-info-card:hover .contact-icon{
    background:var(--gold);
}

.contact-info-card:hover .contact-icon i{
    color:#fff;
}

.contact-info-card h5{
    color:var(--primary);
    margin-bottom:6px;
    transition:var(--transition);
}

.contact-info-card p{
    margin:0;
    color:#666;
    line-height:1.7;
    transition:var(--transition);
}

.contact-info-card:hover h5,
.contact-info-card:hover p{
    color:#fff;
}

/* Contact Form */

.contact-form-box{
    background:#fff;
    padding:35px;
    border-radius:18px;
    border:2px solid var(--gold);
    box-shadow:0 10px 28px rgba(0,0,0,.05);
}

.contact-form-box h3{
    margin-bottom:24px;
}

.custom-input{
    border:2px solid #e7dfd2;
    border-radius:10px;
    height:50px;
    padding:12px 16px;
    transition:var(--transition);
    box-shadow:none;
}

textarea.custom-input{
    height:140px;
    resize:none;
}

.custom-input:focus{
    border-color:var(--gold);
    box-shadow:0 0 0 .18rem rgba(207,161,92,.2);
}

.contact-btn{
    background:var(--gold);
    color:var(--primary);
    font-weight:700;
    border:none;
    border-radius:10px;
    padding:12px;
    transition:var(--transition);
}

.contact-btn:hover{
    background:var(--primary);
    color:#fff;
}

/* Mobile Contact Cards */
@media (max-width:575.98px){

    .contact-info-card{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 25px 20px;
        gap: 15px;
    }

    .contact-info-card > div:last-child{
        width: 100%;
    }

    .contact-info-card h5{
        margin-bottom: 10px;
        font-size: 1.5rem;
    }

    .contact-info-card p{
        margin: 0;
        text-align: center;
        line-height: 1.8;
        word-break: break-word;
    }

    .contact-icon{
        margin: 0 auto;
        width: 60px;
        height: 60px;
    }

}


/*=========================================================
                        FOOTER
=========================================================*/

.footer-section{
    background:var(--primary);
    color:#d8d8d8;
    padding:70px 0 20px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:15px;
}

.footer-logo-img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    background:#fff;
    padding:4px;
}

.footer-logo h4{
    color:#fff;
    margin:0;
}

.footer-logo span{
    color:var(--gold);
    font-size:14px;
    letter-spacing:1px;
}

.footer-about{
    margin-top:18px;
    line-height:1.9;
}

.footer-heading{
    color:#fff;
    margin-bottom:25px;
    position:relative;
}

.footer-heading::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:45px;
    height:3px;
    background:var(--gold);
}

.footer-links{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-links li{
    margin-bottom:14px;
}

.footer-links a{
    color:#d0d0d0;
}

.footer-links a:hover{
    color:var(--gold);
    padding-left:6px;
}

.footer-contact{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-contact li{
    display:flex;
    gap:12px;
    margin-bottom:16px;
}

.footer-contact i{
    color:var(--gold);
    width:20px;
}

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

.social-icons a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#13253f;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:var(--transition);
}

.social-icons a:hover{
    background:var(--gold);
    color:var(--primary);
}

.footer-section hr{
    margin:40px 0 20px;
    border-color:rgba(255,255,255,.1);
}

.footer-bottom{
    text-align:center;
    color:#bbb;
    font-size:15px;
}


/*=========================================================
                GLOBAL RESPONSIVE
=========================================================*/

@media (max-width:991.98px){

.container{
    max-width:96%;
}

.contact-form-box{
    margin-top:30px;
}

.footer-section{
    text-align:center;
}

.footer-logo{
    justify-content:center;
}

.footer-heading::after{
    left:50%;
    transform:translateX(-50%);
}

.footer-contact li{
    justify-content:center;
}

.social-icons{
    justify-content:center;
}

}

@media (max-width:767.98px){

.container{
    max-width:95%;
}

.contact-info-card{
    padding:18px;
}

.contact-icon{
    width:50px;
    height:50px;
}

.contact-form-box{
    padding:25px;
}

.footer-section{
    padding:55px 0 20px;
}

.footer-logo{
    flex-direction:column;
}

.footer-logo-img{
    width:55px;
    height:55px;
}

}

@media (max-width:575.98px){

section{
    padding:50px 0;
}

.contact-info-card{
    flex-direction:column;
    text-align:center;
}

.contact-icon{
    margin:auto;
}

.contact-form-box{
    padding:20px;
}

.footer-heading{
    font-size:20px;
}

.footer-bottom{
    font-size:14px;
}

}


/*=========================================================
                OPTIONAL UTILITIES
=========================================================*/

.rounded-xl{
    border-radius:18px;
}

.shadow-soft{
    box-shadow:0 10px 28px rgba(0,0,0,.06);
}

.bg-light-gold{
    background:#f8f2e9;
}

.text-gold{
    color:var(--gold);
}

.admission-img {
    width: 400px;      /* Adjust to 280px, 300px, 350px as needed */
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}


.contact-info-card{
    display:flex;
    align-items:center;
    gap:20px;
}

.contact-content{
    flex:1;
}

@media (max-width:767px){

    .contact-info-card{
        flex-direction:column;
        justify-content:center;
        align-items:center;
        text-align:center;
        padding:28px 20px;
    }

    .contact-icon{
        margin:0 auto;
    }

    .contact-content{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .contact-content h5{
        width:100%;
        text-align:center;
        margin:10px 0 8px;
    }

    .contact-content p{
        width:100%;
        margin:0;
        text-align:center;
        line-height:1.8;
    }
}