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

.hero{

    position:relative;

    width:100%;

    height:145vh;

    overflow:hidden;

    margin-top:-45px;

}

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

.hero-slider{

    position:relative;

    width:100%;

    height:100%;

}

.slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:opacity 1s ease;

}

.slide.active{

    opacity:1;

    visibility:visible;

    z-index:2;

}

/*=========================================
            SLIDER IMAGE
=========================================*/

.slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    animation:zoom 8s linear infinite;

}

/*=========================================
            ZOOM EFFECT
=========================================*/

@keyframes zoom{

    0%{

        transform:scale(1);

    }

    100%{

        transform:scale(1.12);

    }

}

/*=========================================
            DARK OVERLAY
=========================================*/

.overlay{

    position:absolute;

    inset:0;

    background:rgba(11,46,79,.55);

    z-index:1;

}

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

.hero-content{

    position:absolute;

    top:55%;

    left:50%;

    transform:translate(-50%,-50%);

    width:90%;

    max-width:1200px;

    z-index:5;

    color:#fff;

}

/*=========================================
            ADMISSION TAG
=========================================*/

.hero-tag{

    display:inline-block;

    padding:10px 22px;

    background:#D4AF37;

    color:#0F4C81;

    font-weight:600;

    border-radius:40px;

    margin-bottom:25px;

    letter-spacing:.5px;

}

/*=========================================
            HEADING
=========================================*/

.hero-content h1{

    font-size:4rem;

    line-height:1.2;

    font-weight:700;

    max-width:760px;

}

.hero-content h1 span{

    color:#D4AF37;

}

/*=========================================
            PARAGRAPH
=========================================*/

.hero-content p{

    margin-top:25px;

    max-width:650px;

    line-height:1.8;

    font-size:18px;

    color:#F1F5F9;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:40px;

}

.btn{

    display:inline-block;

    padding:15px 35px;

    background:#0F4C81;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    border:2px solid #0F4C81;

}

.btn:hover{

    background:#D4AF37;

    color:#0F4C81;

    border-color:#D4AF37;

    transform:translateY(-5px);

}

.btn-outline{

    display:inline-block;

    padding:15px 35px;

    border:2px solid #fff;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.btn-outline:hover{

    background:#fff;

    color:#0F4C81;

    transform:translateY(-5px);

}


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

.slide.active .hero-tag{

    animation:fadeDown .8s ease forwards;

}

.slide.active h1{

    animation:fadeLeft 1s ease forwards;

}

.slide.active p{

    animation:fadeRight 1.2s ease forwards;

}

.slide.active .hero-buttons{

    animation:fadeUp 1.4s ease forwards;

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.prev,
.next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    color:#fff;

    cursor:pointer;

    transition:.35s;

    z-index:100;

}

.prev{

    left:35px;

}

.next{

    right:35px;

}

.prev:hover,
.next:hover{

    background:#D4AF37;

    color:#0F4C81;

}

.prev i,
.next i{

    font-size:22px;

}


/*=========================================
            SLIDER DOTS
=========================================*/

.slider-dots{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:100;

}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

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

    cursor:pointer;

    transition:.35s;

}

.dot.active{

    width:40px;

    border-radius:20px;

    background:#D4AF37;

}

/*=========================================
        SCROLL DOWN INDICATOR
=========================================*/

.scroll-down{

    position:absolute;

    left:50%;

    bottom:95px;

    transform:translateX(-50%);

    width:35px;

    height:60px;

    border:2px solid #fff;

    border-radius:30px;

    z-index:100;

}

.scroll-down span{

    position:absolute;

    left:50%;

    top:12px;

    width:6px;

    height:12px;

    background:#fff;

    border-radius:10px;

    transform:translateX(-50%);

    animation:scroll 2s infinite;

}

@keyframes scroll{

    0%{

        opacity:1;

        transform:translate(-50%,0);

    }

    100%{

        opacity:0;

        transform:translate(-50%,22px);

    }

}


/*=========================================
        HERO BOTTOM SHAPE
=========================================*/

.hero::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-2px;
    width:100%;

    height:110px;
    background:#F8FAFC;

    clip-path:polygon(0 60%,20% 75%,40% 55%,60% 75%,80% 55%,100% 75%,100% 100%,0 100%);

    z-index:20;

}

/*====================================
        HIGHLIGHTS SECTION
=====================================*/

.highlights{

    padding:90px 8%;

    background:#F8FAFC;

}

.highlights-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:50px;

}

/*====================================
        CARD
=====================================*/

.highlight-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

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

    transition:.35s;

    display:flex;

    flex-direction:column;

}

.highlight-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(15,76,129,.18);

}

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

.highlight-title{

    text-align:center;

    padding:22px;

    border-bottom:1px solid #E5E7EB;

}

.highlight-title h3{

    color:#0F4C81;

    font-size:28px;

    font-weight:700;

    position:relative;

}

.highlight-title h3::after{

    content:"";

    width:70px;

    height:4px;

    background:#D4AF37;

    display:block;

    margin:12px auto 0;

    border-radius:30px;

}

/*====================================
        BODY
=====================================*/

.highlight-body{

    padding:28px;

    display:flex;

    flex-direction:column;

    flex:1;

}

/*====================================
        ABOUT
=====================================*/

.highlight-body img{

    width:100%;

    height:250px;

    object-fit:cover;

    border-radius:16px;

    margin-bottom:22px;

}

.highlight-body p{

    color:#475569;

    line-height:1.9;

    font-size:16px;

    text-align:justify;

}

/*====================================
        FACILITIES
=====================================*/

.facility-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:30px;

}

.facility-box{

    border:1px solid #E2E8F0;

    border-radius:16px;

    padding:25px 15px;

    text-align:center;

    transition:.35s;

}

.facility-box:hover{

    background:#0F4C81;

    color:#fff;

}

.facility-box i{

    font-size:38px;

    color:#0F4C81;

    margin-bottom:15px;

    transition:.35s;

}

.facility-box:hover i{

    color:#D4AF37;

}

.facility-box span{

    display:block;

    font-size:18px;

    font-weight:600;

}

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

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

    margin-bottom:30px;

}

.gallery-grid img{

    width:100%;

    height:130px;

    object-fit:cover;

    border-radius:12px;

    transition:.35s;

    cursor:pointer;

}

.gallery-grid img:hover{

    transform:scale(1.05);

}

/*====================================
        BUTTON
=====================================*/

.highlight-btn{

    margin:auto auto 0;

    padding:14px 38px;

    background:#0F4C81;

    color:#fff;

    border-radius:40px;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.highlight-btn:hover{

    background:#D4AF37;

    color:#0F4C81;

}




/*=========================================
            NOTICE SECTION
=========================================*/

.notice-section{

    padding:100px 0;

    background:#fff;

}

.notice-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

    margin-top:60px;

}

/*================ Notice Cards =================*/

.notice-list{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.notice-card{

    background:#fff;

    border-left:5px solid #D4AF37;

    border-radius:12px;

    padding:22px 25px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.35s;

}

.notice-card:hover{

    transform:translateY(-6px);

}

.notice-content h4{

    color:#0F4C81;

    margin-bottom:10px;

    font-size:18px;

}

.notice-content span{

    color:#64748B;

    font-size:14px;

}

.notice-content i{

    color:#D4AF37;

    margin-right:6px;

}

/*================ Download Button =================*/

.download-btn{

    background:#0F4C81;

    color:#fff;

    padding:12px 22px;

    border-radius:40px;

    transition:.35s;

    font-weight:600;

}

.download-btn i{

    margin-right:8px;

}

.download-btn:hover{

    background:#D4AF37;

    color:#0F4C81;

}

/*================ Moving Notice =================*/

.moving-notice{

    background:#0F4C81;

    color:#fff;

    border-radius:15px;

    padding:30px;

    overflow:hidden;

}

.moving-notice h3{

    margin-bottom:25px;

    color:#D4AF37;

}

.notice-scroll{

    overflow:hidden;

    white-space:nowrap;

}

.notice-track{

    display:inline-flex;

    gap:50px;

    animation:moveNotice 22s linear infinite;

}

.notice-track span{

    font-size:16px;

}

.notice-scroll:hover .notice-track{

    animation-play-state:paused;

}

@keyframes moveNotice{

    from{

        transform:translateX(100%);

    }

    to{

        transform:translateX(-100%);

    }

}