/*==================================================
GSPL HERO V3
PART-1
==================================================*/

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

.gspl-hero{

    position:relative;

    width:100%;

    height:560px;

    margin-top:95px;

    overflow:hidden;

    background:#111;

}

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

.gsplHeroSlider,
.gsplHeroSlider .swiper-wrapper,
.gsplHeroSlider .swiper-slide{

    width:100%;
    height:100%;

}

/*==============================
SLIDE
==============================*/

.gsplHeroSlider .swiper-slide{

    position:relative;

    overflow:hidden;

}

/*==============================
BACKGROUND
==============================*/

.hero-bg{

    position:absolute;

    inset:0;

    z-index:1;

}

.hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1);

    transition:transform 8s ease;

}

.swiper-slide-active .hero-bg img{

    transform:scale(1.08);

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.65) 35%,
    rgba(0,0,0,.25) 70%,
    rgba(0,0,0,.12) 100%
    );

}

/*==============================
CONTAINER
==============================*/

.gspl-hero .gspl-container{

    position:relative;

    z-index:10;

    width:100%;

    max-width:1320px;

    height:100%;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    padding:0 30px;

}

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

.hero-content{

    width:100%;

    max-width:700px;

    margin-top:-20px;


    color:#fff;

}

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

.hero-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

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

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

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

.hero-content h1{

    font-family:'Space Grotesk',sans-serif;

    font-size:58px;

    line-height:1.08;

    font-weight:620;

    color:#fff;

    margin-bottom:24px;

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

}

/*==============================
TEXT
==============================*/

.hero-content p{

    max-width:620px;

    font-size:18px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

    margin-bottom:35px;

}

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

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

}
/*==================================================
GSPL HERO V3
PART-2
==================================================*/

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

.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:200px;

    height:56px;

    padding:0 30px;

    border-radius:8px;

    font-size:16px;

    font-weight:600;

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.hero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transition:.45s;

}

.hero-btn:hover::before{

    left:100%;

}

.hero-btn-primary{

    background:#C32026;

    color:#fff;

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

}

.hero-btn-primary:hover{

    background:#fff;

    color:#111;

    transform:translateY(-4px);

}

.hero-btn-outline{

    background:transparent;

    border:2px solid rgba(255,255,255,.55);

    color:#fff;

}

.hero-btn-outline:hover{

    background:#fff;

    color:#111;

}


/*==============================
CONTENT ANIMATION
==============================*/

.hero-content>*{

    opacity:0;

    transform:translateY(40px);

}

.swiper-slide-active .hero-tag{

    animation:heroFade .5s forwards;

}

.swiper-slide-active h1{

    animation:heroFade .8s .15s forwards;

}

.swiper-slide-active p{

    animation:heroFade .9s .3s forwards;

}

.swiper-slide-active .hero-buttons{

    animation:heroFade 1s .45s forwards;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:25px;

    transform:translateX(-50%);

    z-index:15;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#fff;

}

.hero-scroll span{

    font-size:11px;

    letter-spacing:4px;

    margin-bottom:10px;

}

.scroll-line{

    width:2px;

    height:50px;

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

    position:relative;

    overflow:hidden;

}

.scroll-line::after{

    content:"";

    position:absolute;

    top:-100%;

    left:0;

    width:100%;

    height:100%;

    background:#fff;

    animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

    from{

        top:-100%;

    }

    to{

        top:100%;

    }

}


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

.gsplHeroSlider .swiper-button-next,
.gsplHeroSlider .swiper-button-prev{

    width:56px;

    height:56px;

    border-radius:50%;

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    color:#fff;

    transition:.35s;

}

.gsplHeroSlider .swiper-button-prev{

    left:30px;

}

.gsplHeroSlider .swiper-button-next{

    right:30px;

}

.gsplHeroSlider .swiper-button-next::after,
.gsplHeroSlider .swiper-button-prev::after{

    font-size:18px;

    font-weight:700;

}

.gsplHeroSlider .swiper-button-next:hover,
.gsplHeroSlider .swiper-button-prev:hover{

    background:#C32026;

    border-color:#C32026;

}


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

.gsplHeroSlider .swiper-pagination{

    bottom:20px !important;

}

.gsplHeroSlider .swiper-pagination-bullet{

    width:12px;

    height:12px;

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

    opacity:1;

    transition:.35s;

}

.gsplHeroSlider .swiper-pagination-bullet-active{

    width:34px;

    border-radius:50px;

    background:#C32026;

}
/*==================================================
GSPL HERO V3
PART-3 (Responsive)
==================================================*/

/*==================================
LARGE DESKTOP
==================================*/

@media (min-width:1600px){

    .gspl-hero{
        height:680px;
    }

    .hero-content h1{
        font-size:76px;
    }

    .hero-content p{
        font-size:20px;
    }

}


/*==================================
LAPTOP
==================================*/

@media (max-width:1400px){

    .gspl-hero{
        height:580px;
    }

    .hero-content h1{
        font-size:58px;
    }

    .hero-content p{
        font-size:17px;
    }

}


/*==================================
TABLET
==================================*/

@media (max-width:992px){

    .gspl-hero{
        height:500px;
    }

    .gspl-hero .gspl-container{

        justify-content:center;

        text-align:center;

        padding:0 25px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        max-width:100%;

        font-size:16px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .gsplHeroSlider .swiper-button-next,
    .gsplHeroSlider .swiper-button-prev{

        display:none;

    }

}


/*==================================
MOBILE
==================================*/

/*==================================
MOBILE
==================================*/

@media (max-width:768px){

    .gspl-hero{

        height:650px;
        min-height:650px;

    }

    .gsplHeroSlider,
    .gsplHeroSlider .swiper-slide{

        height:650px;

    }

    .gspl-hero .gspl-container{

        padding:0 20px;
        align-items:center;

    }

    .hero-content{

        max-width:100%;
        text-align:center;

    }

    .hero-tag{

        font-size:12px;
        padding:8px 18px;
        letter-spacing:1px;
        margin-bottom:18px;

    }

    .hero-content h1{

        font-size:34px;
        line-height:1.15;
        margin-bottom:18px;

    }

    .hero-content p{

        font-size:15px;
        line-height:1.7;
        margin-bottom:28px;

    }

    .hero-buttons{

        display:flex;
        flex-direction:column;
        width:100%;
        gap:14px;

    }

    .hero-btn{

        width:100%;
        min-width:100%;
        height:52px;

    }

    .hero-scroll{

        display:none;

    }

    .gsplHeroSlider .swiper-button-next,
    .gsplHeroSlider .swiper-button-prev{

        display:none;

    }

}
@media (max-width:768px){

.hero-bg img{

    object-position:center center;

}

}


/*==================================
SMALL MOBILE
==================================*/

@media (max-width:480px){

    .gspl-hero{

        height:620px;
        min-height:620px;

    }

    .gsplHeroSlider,
    .gsplHeroSlider .swiper-slide{

        height:620px;

    }

    .hero-content h1{

        font-size:28px;

    }

    .hero-content p{

        font-size:14px;
        margin-bottom:24px;

    }

}



/*==================================
SAFETY FIX
==================================*/

html,
body{

    overflow-x:hidden;

}

.gsplHeroSlider,
.gsplHeroSlider .swiper-wrapper,
.gsplHeroSlider .swiper-slide{

    width:100%;

    height:100%;

}

.hero-bg img{

    width:100%;

    height:100%;

    display:block;

}

.swiper-slide{

    overflow:hidden;

}