/*====================================================
                HOME PAGE CSS
====================================================*/

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

.hero{

    position:relative;

    overflow:hidden;

    width:100%;

    height:100vh;

    min-height:700px;

    display:flex;

    align-items:center;

    justify-content:center;

    isolation:isolate;

    background:
        linear-gradient(
            rgba(6,39,65,.82),
            rgba(6,39,65,.55)
        ),
        url("../images/school.png") center center/cover no-repeat;

}

.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    top:-180px;

    right:-150px;

    z-index:-1;

    pointer-events:none;

    will-change:transform;

    transform:translate3d(0,0,0);

    animation:floatHero 8s ease-in-out infinite;

}

.hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(85,172,238,.10);

    bottom:-120px;

    left:-100px;

    z-index:-1;

    pointer-events:none;

    will-change:transform;

    transform:translate3d(0,0,0);

    animation:floatHero2 10s ease-in-out infinite;

}

.hero-overlay{

    position:relative;

    z-index:2;

    width:100%;

    text-align:center;

}

.hero-content{

    max-width:900px;

    margin:auto;

    padding:30px;

}

.hero-title{

    font-size:4.5rem;

    font-weight:800;

    color:#fff;

    letter-spacing:2px;

    margin-bottom:20px;

    animation:slideDown 1s ease;

}

.hero-subtitle{

    font-size:1.35rem;

    color:#f8f9fa;

    margin-bottom:40px;

    animation:fadeUp 1.3s ease;

}

.hero .btn{

    padding:15px 40px;

    border-radius:50px;

    font-size:18px;

    font-weight:600;

    transition:.4s;

}

.hero .btn:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.25);

}

/*==========================
        SECTION TITLE
==========================*/

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    color:#062741;

    font-size:2.7rem;

    font-weight:700;

    position:relative;

    display:inline-block;

}

.section-title h2::after{

    content:"";

    width:80px;

    height:4px;

    background:#55ACEE;

    position:absolute;

    bottom:-12px;

    left:50%;

    transform:translateX(-50%);

    border-radius:20px;

}

/*==========================
        QUICK LINKS
==========================*/

.quick-links{

    padding:90px 0;

}

.quick-links .card{

    border:none;

    border-radius:20px;

    transition:.4s;

    background:#fff;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.quick-links .card:hover{

    transform:translateY(-12px);

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

}

.quick-links i{

    font-size:60px;

    color:#062741;

    transition:.4s;

}

.quick-links .card:hover i{

    transform:rotate(12deg) scale(1.15);

    color:#55ACEE;

}

.quick-links h5{

    margin-top:20px;

    font-weight:700;

}

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

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

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

}

.gallery-item img{

    width:100%;

    transition:.6s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent,
        rgba(6,39,65,.65)
    );

    opacity:0;

    transition:.4s;

}

.gallery-item:hover::after{

    opacity:1;

}

/*==========================
        NEWS
==========================*/

.news-card{

    border:none;

    border-radius:18px;

    overflow:hidden;

    transition:.4s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.news-card img{

    transition:.5s;

}

.news-card:hover img{

    transform:scale(1.08);

}

.news-card:hover{

    transform:translateY(-12px);

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

}

.news-card .card-title{

    color:#062741;

    font-weight:700;

}

/*==========================
        BUTTONS
==========================*/

.btn-primary{

    background:#062741;

    border:none;

}

.btn-primary:hover{

    background:#0A4A77;

}

.btn-warning{

    border-radius:40px;

    transition:.35s;

}

.btn-warning:hover{

    transform:translateY(-4px);

}
/*=========================================
        ENQUIRY POPUP
=========================================*/

#enquiryModal .modal-content{

    border:none;

    border-radius:18px;

    overflow:hidden;

}

#enquiryModal .modal-header{

    background:linear-gradient(
        135deg,
        #062741,
        #0B4C78
    );

    color:#ffffff;

}

#enquiryModal .modal-title{

    font-weight:700;

}

#enquiryModal input,
#enquiryModal textarea{

    border-radius:10px;
    color:#062741;
    padding:12px;

}
/* ===========================
   ENQUIRY MODAL
=========================== */

#enquiryModal textarea,
#enquiryModal input{
    color:#333;
    background:#fff;
}

/* Placeholder color */
#enquiryModal textarea::placeholder,
#enquiryModal input::placeholder{
    color:#777 !important;
    opacity:1;
}

/* Firefox */
#enquiryModal textarea::-moz-placeholder,
#enquiryModal input::-moz-placeholder{
    color:#777;
    opacity:1;
}

/* Chrome/Safari */
#enquiryModal textarea::-webkit-input-placeholder,
#enquiryModal input::-webkit-input-placeholder{
    color:#777;
}

/* Focus */
#enquiryModal textarea:focus,
#enquiryModal input:focus{
    border-color:#0B4C78;
    box-shadow:0 0 0 0.2rem rgba(11,76,120,.2);
}
#enquiryModal .btn-primary{

    background:#062741;

    border:none;

    font-weight:600;

    padding:12px;

    border-radius:10px;

}

#enquiryModal .btn-primary:hover{

    background:#0B4C78;

}
/*=========================================
        FLOATING ENQUIRY BUTTON
=========================================*/

.floating-enquiry-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:1050;

    display:flex;

    align-items:center;

    gap:10px;

    padding:15px 26px;

    border:none;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #ffb300,
        #ff9800
    );

    color:#062741;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    box-shadow:0 12px 35px rgba(0,0,0,.25);

    transition:.35s;

    animation:floatButton 2.5s ease-in-out infinite;

}

.floating-enquiry-btn:hover{

    transform:translateY(-6px);

    background:linear-gradient(
        135deg,
        #ffd54f,
        #ffb300
    );

    box-shadow:0 18px 40px rgba(0,0,0,.35);

}

.floating-enquiry-btn i{

    font-size:20px;

}

@keyframes floatButton{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Mobile */

@media(max-width:768px){

    .floating-enquiry-btn{

        right:15px;

        bottom:18px;

        padding:12px 18px;

        font-size:14px;

    }

    .floating-enquiry-btn i{

        font-size:18px;

    }

}
/*==========================
        FLOATING ANIMATION
==========================*/

@keyframes floatHero{

    0%{

        transform:translate3d(0,0,0);

    }

    50%{

        transform:translate3d(0,30px,0);

    }

    100%{

        transform:translate3d(0,0,0);

    }

}

@keyframes floatHero2{

    0%{

        transform:translate3d(0,0,0);

    }

    50%{

        transform:translate3d(25px,-20px,0);

    }

    100%{

        transform:translate3d(0,0,0);

    }

}

@keyframes slideDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .hero-title{

        font-size:3rem;

    }

    .hero-subtitle{

        font-size:1.2rem;

    }

}

@media(max-width:768px){

    .hero{

        min-height:80vh;

        background-attachment:scroll;

    }

    .hero-title{

        font-size:2.3rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .section-title h2{

        font-size:2rem;

    }

    .quick-links{

        padding:60px 0;

    }

}