/*=========================================================================
    SCHOOL CMS
    File        : hero.css
    Purpose     : Hero Section Styling
    Description :
        - Full Screen Swiper Hero
        - Dark Overlay
        - Animated Content
        - CTA Buttons
        - Scroll Indicator
        - Swiper Navigation
========================================================================*/


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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}



/*=========================================================
    SWIPER
=========================================================*/

.heroSwiper{

    width:100%;

    height:100%;

}



.heroSwiper .swiper-slide{

    position:relative;

    overflow:hidden;

}



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

.hero-image{

    width:100%;

    height:100%;

}



.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}



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

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.60),
            rgba(0,0,0,.55)
        );

    z-index:2;

}



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

.hero-content{

    position:absolute;

    top:50%;

    left:50%;

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

    width:100%;

    max-width:1200px;

    padding:0 20px;

    color:#fff;

    text-align:center;

    z-index:3;

}



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

.hero-subtitle{

    display:inline-block;

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

    backdrop-filter:blur(8px);

    padding:10px 22px;

    border-radius:50px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

    margin-bottom:25px;

}



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

.hero-title{

    font-size:68px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

    text-shadow:0 8px 20px rgba(0,0,0,.35);

}



/*=========================================================
    DESCRIPTION
=========================================================*/

.hero-description{

    max-width:760px;

    margin:auto;

    font-size:20px;

    line-height:1.9;

    margin-bottom:40px;

}



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

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}



.hero-btn-primary{

    background:var(--primary);

    color:#fff;

    padding:16px 36px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow);

}



.hero-btn-primary:hover{

    color:#fff;

    transform:translateY(-5px);

    background:#084298;

}



.hero-btn-secondary{

    background:var(--secondary);

    color:#000;

    padding:16px 36px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

}



.hero-btn-secondary:hover{

    color:#000;

    transform:translateY(-5px);

}



/*=========================================================
    SWIPER PAGINATION
=========================================================*/

.heroSwiper .swiper-pagination-bullet{

    width:14px;

    height:14px;

    background:#ffffff;

    opacity:.7;

}



.heroSwiper .swiper-pagination-bullet-active{

    background:var(--secondary);

    opacity:1;

}



/*=========================================================
    SWIPER ARROWS
=========================================================*/

.heroSwiper .swiper-button-next,

.heroSwiper .swiper-button-prev{

    width:60px;

    height:60px;

    border-radius:50%;

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

    backdrop-filter:blur(8px);

    color:#fff;

    transition:var(--transition);

}



.heroSwiper .swiper-button-next:hover,

.heroSwiper .swiper-button-prev:hover{

    background:var(--secondary);

    color:#000;

}



.heroSwiper .swiper-button-next::after,

.heroSwiper .swiper-button-prev::after{

    font-size:22px;

    font-weight:700;

}



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

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:5;

}



.scroll-indicator span{

    display:block;

    width:28px;

    height:48px;

    border:2px solid #fff;

    border-radius:30px;

    position:relative;

}



.scroll-indicator span::before{

    content:"";

    position:absolute;

    top:8px;

    left:50%;

    width:6px;

    height:10px;

    background:#fff;

    border-radius:50px;

    transform:translateX(-50%);

    animation:scrollDown 1.8s infinite;

}



/*=========================================================
    SCROLL ANIMATION
=========================================================*/

@keyframes scrollDown{

    0%{

        opacity:1;

        top:8px;

    }

    100%{

        opacity:0;

        top:26px;

    }

}



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

@media(max-width:1200px){

.hero-title{

    font-size:56px;

}

}



@media(max-width:992px){

.hero{

    height:90vh;

}

.hero-title{

    font-size:46px;

}

.hero-description{

    font-size:18px;

}

}



@media(max-width:768px){

.hero{

    height:85vh;

}

.hero-title{

    font-size:36px;

}

.hero-description{

    font-size:16px;

    line-height:1.7;

}

.hero-buttons{

    flex-direction:column;

}

.hero-btn-primary,

.hero-btn-secondary{

    width:100%;

    max-width:300px;

    text-align:center;

}

.heroSwiper .swiper-button-next,

.heroSwiper .swiper-button-prev{

    display:none;

}

}



@media(max-width:576px){

.hero-subtitle{

    font-size:12px;

    padding:8px 18px;

}

.hero-title{

    font-size:30px;

}

.hero-description{

    font-size:15px;

}

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

.hero-slide{

    min-height:100vh;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    position:relative;

}

.hero-overlay{

    min-height:100vh;

    background:linear-gradient(

        rgba(0,0,0,.60),

        rgba(0,0,0,.60)

    );

    display:flex;

    align-items:center;

}

.hero-title{

    font-size:3.8rem;

    font-weight:800;

    color:#fff;

    margin-bottom:20px;

}

.hero-subtitle{

    color:#ffc107;

    font-size:18px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

}

.hero-description{

    color:#f8f9fa;

    font-size:18px;

    line-height:1.8;

}

.carousel-control-prev,

.carousel-control-next{

    width:70px;

}

.carousel-control-prev-icon,

.carousel-control-next-icon{

    width:50px;

    height:50px;

}

@media(max-width:768px){

    .hero-title{

        font-size:2.3rem;

    }

    .hero-description{

        font-size:16px;

    }

}