/* =====================================================
   SSSP HERO SLIDER V3
   PART 1
===================================================== */

.ssspHero{

    position:relative;
    overflow:hidden;
    background:#000;

}

.ssspHeroSwiper{

    width:100%;
    height:100%;

}

.ssspHero .swiper-slide{

    overflow:hidden;

}

/*===================================
ITEM
===================================*/

.ssspHeroItem{

    position:relative;
    min-height:760px;
    display:flex;
    align-items:center;
    overflow:hidden;

}

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

.ssspHeroBackground{

    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;

}

.ssspHeroBackgroundImage{

    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1);
    transition:transform 8s linear;

}

.swiper-slide-active .ssspHeroBackgroundImage{

    transform:scale(1.10);

}

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

.ssspHeroOverlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(23,12,8,.88) 0%,
        rgba(44,16,8,.72) 35%,
        rgba(0,0,0,.45) 70%,
        rgba(0,0,0,.18) 100%
    );

}

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

.ssspHero .container{

    position:relative;
    z-index:10;

}

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

.ssspHeroContent{

    max-width:680px;
    color:#fff;

}

/*===================================
BADGE
===================================*/

.ssspHeroBadge{

    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:10px 22px;

    border-radius:100px;

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

    backdrop-filter:blur(12px);

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

    margin-bottom:25px;

    font-size:15px;

    letter-spacing:1px;

    text-transform:uppercase;

}

.ssspHeroBadge i{

    color:#f6c35c;

}

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

.ssspHeroTopTitle{

    color:#f6c35c;

    font-size:22px;

    font-weight:600;

    margin-bottom:15px;

    letter-spacing:2px;

}

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

.ssspHeroTitle{

    font-size:68px;

    line-height:1.15;

    font-weight:800;

    color:#fff;

    margin-bottom:22px;

    text-shadow:0 12px 40px rgba(0,0,0,.45);

}

/*===================================
DIVIDER
===================================*/

.ssspHeroDivider{

    width:120px;

    height:4px;

    border-radius:100px;

    background:#d8b25b;

    margin:25px 0;

}

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

.ssspHeroDescription{

    font-size:22px;

    line-height:1.9;

    color:#f5f5f5;

    margin-bottom:40px;

}

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

.ssspHeroButtons{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

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

.ssspHeroPrimaryButton{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:210px;

    height:60px;

    border-radius:12px;

    background:#8b1d1d;

    color:#fff;

    font-weight:700;

    text-decoration:none;

    transition:.35s;

}

.ssspHeroPrimaryButton:hover{

    background:#b22626;

    color:#fff;

    transform:translateY(-4px);

}

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

.ssspHeroSecondaryButton{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:210px;

    height:60px;

    border-radius:12px;

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

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.ssspHeroSecondaryButton:hover{

    background:#fff;

    color:#222;

    transform:translateY(-4px);

}

/*===================================
RIGHT SIDE
===================================*/

.ssspHeroVisual{

    position:relative;

    width:480px;

    height:480px;

    margin:auto;

}
/* =====================================================
   SSSP HERO SLIDER V3
   PART 2
   Logo • Rings • Glow • Navigation • Pagination
===================================================== */

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

.ssspHeroVisual{

    position:relative;

    width:480px;

    height:480px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*=========================
 GOLD GLOW
=========================*/

.ssspHeroGlow{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(255,210,120,.65) 0%,
        rgba(255,210,120,.18) 45%,
        rgba(255,210,120,0) 75%);

    filter:blur(35px);

    animation:ssspGlow 5s ease-in-out infinite;

    z-index:1;

}

@keyframes ssspGlow{

    0%{

        transform:scale(1);

        opacity:.7;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

    100%{

        transform:scale(1);

        opacity:.7;

    }

}

/*=========================
 LOGO
=========================*/

.ssspHeroLogo{

    position:relative;

    width:190px;

    z-index:20;

    filter:
        drop-shadow(0 15px 35px rgba(0,0,0,.45));

    animation:ssspLogoFloat 4.5s ease-in-out infinite;

}

@keyframes ssspLogoFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================
 RINGS
=========================*/

.ssspHeroRing{

    position:absolute;

    border-radius:50%;

    border:2px solid rgba(255,215,120,.28);

}

/* Ring 1 */

.ringOne{

    width:240px;

    height:240px;

    animation:ssspRotateClock 18s linear infinite;

}

/* Ring 2 */

.ringTwo{

    width:300px;

    height:300px;

    border-style:dashed;

    animation:ssspRotateAnti 25s linear infinite;

}

/* Ring 3 */

.ringThree{

    width:360px;

    height:360px;

    opacity:.75;

    animation:ssspRotateClock 34s linear infinite;

}

/* Ring 4 */

.ringFour{

    width:430px;

    height:430px;

    border-color:rgba(255,255,255,.12);

    animation:ssspRotateAnti 42s linear infinite;

}

/*=========================
 RING ANIMATION
=========================*/

@keyframes ssspRotateClock{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes ssspRotateAnti{

    from{

        transform:rotate(360deg);

    }

    to{

        transform:rotate(0deg);

    }

}

/*=========================
 HOVER
=========================*/

.ssspHeroVisual:hover .ringOne{

    animation-duration:8s;

}

.ssspHeroVisual:hover .ringTwo{

    animation-duration:12s;

}

.ssspHeroVisual:hover .ringThree{

    animation-duration:16s;

}

.ssspHeroVisual:hover .ringFour{

    animation-duration:22s;

}

.ssspHeroVisual:hover .ssspHeroLogo{

    transform:scale(1.05);

}

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

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

    width:64px;

    height:64px;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

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

    color:#fff;

    transition:.35s;

}

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

    background:#8b1d1d;

    border-color:#8b1d1d;

    transform:scale(1.08);

}

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

    font-size:22px;

    font-weight:700;

}

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

.ssspHero .swiper-pagination{

    bottom:35px !important;

}

.ssspHero .swiper-pagination-bullet{

    width:14px;

    height:14px;

    opacity:1;

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

    transition:.35s;

}

.ssspHero .swiper-pagination-bullet-active{

    width:40px;

    border-radius:50px;

    background:#d8b25b;

}

/*=========================
 ENTRY ANIMATION
=========================*/

.swiper-slide-active .ssspHeroBadge{

    animation:ssspFadeUp .7s ease forwards;

}

.swiper-slide-active .ssspHeroTopTitle{

    animation:ssspFadeUp .9s ease forwards;

}

.swiper-slide-active .ssspHeroTitle{

    animation:ssspFadeUp 1.1s ease forwards;

}

.swiper-slide-active .ssspHeroDivider{

    animation:ssspFadeUp 1.3s ease forwards;

}

.swiper-slide-active .ssspHeroDescription{

    animation:ssspFadeUp 1.5s ease forwards;

}

.swiper-slide-active .ssspHeroButtons{

    animation:ssspFadeUp 1.7s ease forwards;

}

.swiper-slide-active .ssspHeroVisual{

    animation:ssspZoom .9s ease forwards;

}

/*=========================
 KEYFRAMES
=========================*/

@keyframes ssspFadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes ssspZoom{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}
/* =====================================================
   SSSP HERO SLIDER V3
   PART 3
   Responsive + Mobile + Performance
===================================================== */

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

@media (max-width:1600px){

    .ssspHeroItem{

        min-height:720px;

    }

    .ssspHeroTitle{

        font-size:60px;

    }

    .ssspHeroVisual{

        width:430px;
        height:430px;

    }

    .ringFour{

        width:390px;
        height:390px;

    }

}

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

@media (max-width:1200px){

    .ssspHeroItem{

        min-height:680px;

    }

    .ssspHeroTitle{

        font-size:50px;

    }

    .ssspHeroDescription{

        font-size:20px;

    }

    .ssspHeroVisual{

        width:360px;
        height:360px;

    }

    .ringOne{

        width:190px;
        height:190px;

    }

    .ringTwo{

        width:240px;
        height:240px;

    }

    .ringThree{

        width:290px;
        height:290px;

    }

    .ringFour{

        width:340px;
        height:340px;

    }

    .ssspHeroLogo{

        width:150px;

    }

}

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

@media (max-width:991px){

    .ssspHeroItem{

        min-height:auto;

        padding:120px 0 80px;

    }

    .ssspHeroContent{

        max-width:100%;

        text-align:center;

    }

    .ssspHeroDivider{

        margin:20px auto 30px;

    }

    .ssspHeroButtons{

        justify-content:center;

    }

    .ssspHeroVisual{

        margin-top:60px;

        width:320px;

        height:320px;

    }

    .ssspHeroTitle{

        font-size:42px;

    }

    .ssspHeroDescription{

        font-size:18px;

        line-height:1.8;

    }

    .ssspHeroBadge{

        justify-content:center;

    }

    .ssspHeroTopTitle{

        font-size:18px;

    }

}

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

@media (max-width:767px){

    .ssspHeroItem{

        padding:90px 0 70px;

    }

    .ssspHeroTitle{

        font-size:34px;

        line-height:1.3;

    }

    .ssspHeroDescription{

        font-size:16px;

    }

    .ssspHeroButtons{

        flex-direction:column;

        gap:15px;

    }

    .ssspHeroPrimaryButton,
    .ssspHeroSecondaryButton{

        width:100%;

        min-width:100%;

    }

    .ssspHeroVisual{

        width:260px;

        height:260px;

        margin-top:45px;

    }

    .ringOne{

        width:150px;
        height:150px;

    }

    .ringTwo{

        width:190px;
        height:190px;

    }

    .ringThree{

        width:230px;
        height:230px;

    }

    .ringFour{

        width:270px;
        height:270px;

    }

    .ssspHeroLogo{

        width:120px;

    }

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

        display:none;

    }

}

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

@media (max-width:480px){

    .ssspHeroItem{

        padding:80px 0 60px;

    }

    .ssspHeroTitle{

        font-size:28px;

    }

    .ssspHeroDescription{

        font-size:15px;

    }

    .ssspHeroBadge{

        font-size:12px;

        padding:8px 16px;

    }

    .ssspHeroTopTitle{

        font-size:15px;

    }

    .ssspHeroVisual{

        width:220px;

        height:220px;

    }

    .ringOne{

        width:130px;
        height:130px;

    }

    .ringTwo{

        width:165px;
        height:165px;

    }

    .ringThree{

        width:195px;
        height:195px;

    }

    .ringFour{

        width:225px;
        height:225px;

    }

    .ssspHeroLogo{

        width:105px;

    }

}

/*=========================
 TOUCH DEVICES
=========================*/

@media (hover:none){

    .ssspHeroPrimaryButton:hover,
    .ssspHeroSecondaryButton:hover{

        transform:none;

    }

}

/*=========================
 ACCESSIBILITY
=========================*/

.ssspHeroPrimaryButton:focus,
.ssspHeroSecondaryButton:focus{

    outline:3px solid #f5c65d;

    outline-offset:4px;

}

/*=========================
 PERFORMANCE
=========================*/

.ssspHeroBackgroundImage,
.ssspHeroLogo,
.ssspHeroRing{

    will-change:transform;

}

.ssspHero *,
.ssspHero *::before,
.ssspHero *::after{

    box-sizing:border-box;

}

/*=========================
 REDUCE MOTION
=========================*/

@media (prefers-reduced-motion:reduce){

    .ssspHero *,
    .ssspHero *::before,
    .ssspHero *::after{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}