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

.tok-hero{

    position:relative;

    overflow:hidden;

    background:#071A33;

}

/*==============================
SEARCH
==============================*/

.tok-hero-search{

    position:absolute;

    top:15px;

    left:50%;

    transform:translateX(-50%);

    width:72%;

    z-index:100;

}

.tok-hero-search .tok-container{

    position:relative;

}

.tok-search-card{

    display:grid;

    grid-template-columns:180px 1fr 70px;

    align-items:center;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    height:58px;

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

}

.tok-search-category{

    position:relative;

    background:#E31E24;

}

.tok-search-category::after{

    content:"\f107";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    color:#fff;

    position:absolute;

    right:22px;

    top:50%;

    transform:translateY(-50%);

    pointer-events:none;

}

.tok-search-category select{

    width:100%;

    height:58px;

    border:none;

    background:transparent;

    color:#fff;

    appearance:none;

    padding:0 55px 0 24px;

    font-size:15px;

    font-weight:700;

    outline:none;

}

.tok-search-field input{

    width:100%;

    height:58px;

    border:none;

    padding:0 28px;

    font-size:16px;

    outline:none;

}

.tok-search-button{

    height:58px;

    border:none;

    background:#0D47A1;

    color:#fff;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.tok-search-button:hover{

    background:#083A82;

}

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

.tok-hero-slider{

    width:100%;

    height:760px;

}

.tok-hero-slide{

    position:relative;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.tok-hero-slide::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(7,26,51,.82) 0%,

    rgba(7,26,51,.72) 35%,

    rgba(7,26,51,.35) 70%,

    rgba(7,26,51,.20) 100%

    );

}

.tok-hero-slide .tok-container{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    height:100%;

}




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

.tok-hero-content{

    max-width:680px;

    padding-top:120px;

    color:#fff;

}

.tok-eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    margin-bottom:28px;

    border-radius:50px;

    background:#0D47A1;

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    box-shadow:0 15px 40px rgba(227,30,36,.35);

}

.tok-hero-title{

    margin:0 0 30px;

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

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    color:#fff;

}

.tok-hero-title br{

    display:block;

}

.tok-hero-text{

    max-width:600px;

    margin:0 0 45px;

    font-size:20px;

    line-height:1.9;

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

}

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

.tok-hero-buttons{

    display:flex;

    gap:20px;

    align-items:center;

}

.tok-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:200px;

    height:60px;

    padding:0 35px;

    border-radius:12px;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.35s ease;

}

.tok-btn-primary{

    background:#0D47A1;

    color:#fff;

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

}

.tok-btn-primary:hover{

    background:#083A82;

    transform:translateY(-4px);

}

.tok-btn-outline{

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

    color:#fff;

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

    backdrop-filter:blur(12px);

}

.tok-btn-outline:hover{

    background:#fff;

    color:#071A33;

    transform:translateY(-4px);

}

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

.tok-hero-prev,
.tok-hero-next{

    position:absolute;

    top:50%;

    width:58px;

    height:58px;

    margin-top:-29px;

    border-radius:50%;

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

    backdrop-filter:blur(14px);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.35s;

    z-index:30;

}

.tok-hero-prev{

    left:40px;

}

.tok-hero-next{

    right:40px;

}

.tok-hero-prev:hover,
.tok-hero-next:hover{

    background:#E31E24;

    transform:scale(1.08);

}

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

.tok-hero-pagination{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:30;

}

.tok-hero-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    margin:0 8px !important;

    background:#fff;

    opacity:.45;

    transition:.35s;

}

.tok-hero-pagination .swiper-pagination-bullet-active{

    width:34px;

    border-radius:30px;

    background:#E31E24;

    opacity:1;

}






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

.tok-hero-slide{

    overflow:hidden;

}

.tok-hero-slide{

    animation:tokKenBurns 10s ease-in-out infinite alternate;

}

@keyframes tokKenBurns{

    from{

        background-size:100%;

    }

    to{

        background-size:108%;

    }

}

.swiper-slide-active .tok-eyebrow{

    animation:tokFadeUp .6s ease both;

}

.swiper-slide-active .tok-hero-title{

    animation:tokFadeUp .8s ease .15s both;

}

.swiper-slide-active .tok-hero-text{

    animation:tokFadeUp .9s ease .35s both;

}

.swiper-slide-active .tok-hero-buttons{

    animation:tokFadeUp 1s ease .55s both;

}

@keyframes tokFadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
SEARCH EFFECTS
==================================================*/

.tok-search-card{

    transition:.35s ease;

}

.tok-search-card:hover{

    transform:translateY(-4px);

    box-shadow:0 35px 80px rgba(0,0,0,.20);

}

.tok-search-field input:focus{

    background:#fafcff;

}

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

@media (max-width: 767px){

    .tok-hero{

        min-height:100vh;

    }

    .tok-hero-slider{

        height:100vh;

        min-height:700px;

    }

    .tok-hero-slide{

        background-size:cover !important;

        background-repeat:no-repeat;

        background-position:center center;

    }

    .tok-hero-slide::before{

        background:linear-gradient(
            rgba(7,26,51,.75),
            rgba(7,26,51,.80)
        );

    }

    .tok-hero-content{

        padding-top:110px;

        text-align:center;

        max-width:100%;

    }

}




/*========================================
HIDE FLOATING SEARCH ON MOBILE
========================================*/

@media (max-width: 991px){

    .tok-hero-search{

        display:none;

    }

    .tok-hero-content{

        padding-top:90px;

    }

    .tok-hero-slider{

        height:620px;

    }

}





.tok-blue{

    color:#0D47A1;

}

.tok-red{

    color:#E31E24;

}











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

@media (max-width: 767px){

    /* Hide slider arrows */

    .tok-hero-prev,
    .tok-hero-next{

        display:none !important;

    }

}