/* =========================================================
   SSSP PREMIUM CULTURAL HERO SLIDER
   ========================================================= */


/* =========================================================
   GOOGLE FONTS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,500;1,600&display=swap');


/* =========================================================
   ROOT
   ========================================================= */

.ssspPremiumHero{

    position:relative;

    width:100%;

    overflow:hidden;

    background:
    #170604;

}


.ssspPremiumHero *,
.ssspPremiumHero *::before,
.ssspPremiumHero *::after{

    box-sizing:border-box;

}


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

.ssspPremiumHeroSwiper{

    width:100%;

    position:relative;

}


.ssspPremiumHero .swiper-slide{

    overflow:hidden;

}


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

.ssspPremiumHeroItem{

    position:relative;

    min-height:760px;

    display:flex;

    align-items:center;

    overflow:hidden;

    isolation:isolate;

}


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

.ssspPremiumHeroBackground{

    position:absolute;

    inset:0;

    z-index:-5;

    overflow:hidden;

}


.ssspPremiumHeroBackgroundImage{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    transform:scale(1.02);

    transition:
    transform 9s ease;

}


.swiper-slide-active
.ssspPremiumHeroBackgroundImage{

    transform:scale(1.10);

}


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

.ssspPremiumHeroOverlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(15,3,3,.97) 0%,
        rgba(30,7,5,.94) 24%,
        rgba(48,12,7,.76) 46%,
        rgba(48,10,7,.44) 70%,
        rgba(16,3,2,.28) 100%
    );

}


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

.ssspPremiumHeroLeftOverlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        rgba(8,2,2,.72) 0%,
        rgba(30,5,4,.55) 34%,
        rgba(55,12,6,.15) 60%,
        transparent 100%
    );

}


/* =========================================================
   GOLD ATMOSPHERE
   ========================================================= */

.ssspPremiumHeroGoldGlow{

    position:absolute;

    width:700px;

    height:700px;

    top:-380px;

    left:30%;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(214,154,61,.20) 0%,
        rgba(158,73,20,.09) 38%,
        transparent 72%
    );

    filter:blur(30px);

    pointer-events:none;

}


/* =========================================================
   TEXTURE
   ========================================================= */

.ssspPremiumHeroTexture{

    position:absolute;

    inset:0;

    opacity:.22;

    pointer-events:none;

    background-image:

    radial-gradient(
        rgba(255,255,255,.10) 1px,
        transparent 1px
    );

    background-size:5px 5px;

    mix-blend-mode:soft-light;

}


/* =========================================================
   GOLD BORDER
   ========================================================= */

.ssspPremiumHeroBorder{

    position:absolute;

    inset:20px;

    border:

    1px solid rgba(220,169,79,.30);

    pointer-events:none;

}


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

.ssspPremiumHeroContainer{

    position:relative;

    z-index:10;

    padding-top:65px;

    padding-bottom:120px;

}


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

.ssspPremiumHeroContent{

    position:relative;

    max-width:720px;

    color:#fff;

}


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

.ssspPremiumHeroBadge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:
    11px 22px;

    border-radius:100px;

    margin-bottom:22px;

    color:

    #f4ead8;

    font-family:

    'DM Sans',
    sans-serif;

    font-size:14px;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

    background:

    linear-gradient(
        90deg,
        rgba(255,255,255,.09),
        rgba(255,255,255,.03)
    );

    border:

    1px solid rgba(222,176,91,.52);

    box-shadow:

    0 12px 35px rgba(0,0,0,.20),

    inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

}


.ssspBadgeIcon{

    color:#f3bf62;

    font-size:15px;

}


/* =========================================================
   EYEBROW
   ========================================================= */

.ssspPremiumHeroEyebrow{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:10px;

    color:#efc06b;

    font-family:

    'DM Sans',
    sans-serif;

    font-size:18px;

    letter-spacing:7px;

    text-transform:uppercase;

}


.ssspPremiumHeroEyebrow span{

    width:32px;

    height:1px;

    background:#dba650;

}


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

.ssspPremiumHeroTitle{

    margin:0;

    color:#fffaf0;

    font-family:

    'Playfair Display',
    serif;

    font-size:70px;

    font-weight:700;

    line-height:1.05;

    letter-spacing:-1.8px;

    text-shadow:

    0 10px 45px rgba(0,0,0,.48);

}


/* =========================================================
   ORNAMENT
   ========================================================= */

.ssspPremiumHeroOrnament{

    display:flex;

    align-items:center;

    gap:10px;

    margin:

    20px 0 12px;

    color:#d9a84f;

}


.ssspPremiumHeroOrnament span{

    display:block;

    width:190px;

    max-width:40%;

    height:1px;

    background:

    linear-gradient(
        90deg,
        #c58a35,
        rgba(220,175,92,.25)
    );

}


.ssspPremiumHeroOrnament span:last-child{

    background:

    linear-gradient(
        90deg,
        rgba(220,175,92,.25),
        #c58a35
    );

}


.ssspPremiumHeroOrnament i{

    font-size:11px;

    transform:rotate(45deg);

}


/* =========================================================
   LEGACY LINE
   ========================================================= */

.ssspPremiumHeroLegacy{

    color:#f0ce8d;

    font-family:

    'Cormorant Garamond',
    serif;

    font-size:29px;

    font-style:italic;

    font-weight:600;

    letter-spacing:.3px;

    margin-bottom:17px;

}


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

.ssspPremiumHeroDescription{

    max-width:700px;

    color:

    rgba(255,247,236,.86);

    font-family:

    'DM Sans',
    sans-serif;

    font-size:18px;

    font-weight:400;

    line-height:1.75;

    margin-bottom:30px;

}


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

.ssspPremiumHeroButtons{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:18px;

}


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

.ssspPremiumPrimaryButton{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    min-width:270px;

    padding:

    7px 10px 7px 28px;

    min-height:64px;

    overflow:hidden;

    border-radius:14px;

    color:#fff;

    text-decoration:none;

    font-family:

    'DM Sans',
    sans-serif;

    font-size:17px;

    font-weight:700;

    background:

    linear-gradient(
        135deg,
        #77120f 0%,
        #a81f19 55%,
        #7c0f0c 100%
    );

    border:

    1px solid #e3b95f;

    box-shadow:

    0 18px 35px rgba(0,0,0,.28),

    inset 0 1px 0 rgba(255,255,255,.18);

    transition:

    transform .35s ease,
    box-shadow .35s ease;

}


.ssspPremiumPrimaryButton::before{

    content:"";

    position:absolute;

    width:100px;

    height:150px;

    top:-40px;

    left:-130px;

    transform:rotate(22deg);

    background:

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

    transition:left .55s ease;

}


.ssspPremiumPrimaryButton:hover::before{

    left:115%;

}


.ssspPremiumPrimaryButton:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:

    0 22px 45px rgba(0,0,0,.42);

}


.ssspPremiumPrimaryButton b{

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    color:#6e170f;

    background:

    #f7d58b;

    font-size:15px;

}


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

.ssspPremiumSecondaryButton{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    min-width:210px;

    min-height:64px;

    padding:

    0 26px;

    border-radius:14px;

    color:#fff;

    text-decoration:none;

    font-family:

    'DM Sans',
    sans-serif;

    font-size:17px;

    font-weight:600;

    border:

    1px solid rgba(244,213,151,.58);

    background:

    rgba(30,8,5,.26);

    backdrop-filter:blur(8px);

    transition:.35s ease;

}


.ssspPremiumSecondaryButton:hover{

    color:#3b1009;

    background:#f2d293;

    border-color:#f2d293;

    transform:translateY(-4px);

}


/* =========================================================
   FEATURES
   ========================================================= */

.ssspPremiumHeroFeatures{

    display:flex;

    align-items:stretch;

    flex-wrap:wrap;

    margin-top:42px;

    padding-top:25px;

    border-top:

    1px solid rgba(225,177,90,.22);

}


.ssspPremiumHeroFeature{

    display:flex;

    align-items:center;

    gap:13px;

    padding:

    0 28px;

    min-height:48px;

    color:

    rgba(255,247,235,.88);

    font-family:

    'DM Sans',
    sans-serif;

    font-size:14px;

    line-height:1.35;

    border-right:

    1px solid rgba(225,177,90,.22);

}


.ssspPremiumHeroFeature:first-child{

    padding-left:0;

}


.ssspPremiumHeroFeature:last-child{

    border-right:0;

}


.ssspPremiumHeroFeatureIcon{

    color:#efbd5a;

    font-size:26px;

}


/* =========================================================
   FLOATING QUOTE
   ========================================================= */

.ssspPremiumHeroQuote{

    position:absolute;

    z-index:8;

    left:49%;

    top:14%;

    display:flex;

    flex-direction:column;

    color:

    rgba(242,185,88,.95);

    font-family:

    'Cormorant Garamond',
    serif;

    font-size:31px;

    line-height:1.12;

    font-style:italic;

    text-align:center;

    pointer-events:none;

    opacity:.94;

}


.ssspPremiumHeroQuote i{

    width:150px;

    height:1px;

    display:block;

    margin:

    22px auto 0;

    background:

    linear-gradient(
        90deg,
        transparent,
        #e0a33e,
        transparent
    );

}


/* =========================================================
   ANNIVERSARY
   ========================================================= */

.ssspPremiumHeroAnniversary{

    position:absolute;

    z-index:10;

    top:34px;

    right:55px;

    display:flex;

    align-items:flex-start;

    gap:9px;

    color:#f0ca81;

    pointer-events:none;

}


.ssspPremiumHeroAnniversary strong{

    font-family:

    'Playfair Display',
    serif;

    font-size:72px;

    line-height:.75;

    font-weight:600;

    letter-spacing:-5px;

}


.ssspPremiumHeroAnniversary div{

    display:flex;

    flex-direction:column;

    padding-top:5px;

}


.ssspPremiumHeroAnniversary span{

    font-family:

    'DM Sans',
    sans-serif;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

}


.ssspPremiumHeroAnniversary small{

    margin-top:6px;

    font-family:

    'DM Sans',
    sans-serif;

    font-size:8px;

    line-height:1.45;

    letter-spacing:1.4px;

}


/* =========================================================
   BOTTOM ART PANEL
   ========================================================= */

.ssspPremiumHeroBottomArt{

    position:absolute;

    z-index:7;

    width:58%;

    min-width:800px;

    height:175px;

    right:-40px;

    bottom:-78px;

    transform:

    rotate(-8deg);

    background:

    linear-gradient(
        135deg,
        rgba(255,249,233,.98),
        rgba(235,214,176,.96)
    );

    box-shadow:

    0 -10px 35px rgba(0,0,0,.12);

}


.ssspPremiumHeroBottomArt::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.16;

    background-image:

    radial-gradient(
        #8b5a24 1px,
        transparent 1px
    );

    background-size:7px 7px;

}


.ssspPremiumHeroBottomContent{

    position:absolute;

    left:48%;

    top:45px;

    transform:

    rotate(8deg);

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#4b2916;

    font-family:

    'Cormorant Garamond',
    serif;

    text-align:center;

}


.ssspPremiumHeroBottomContent span{

    font-size:27px;

    font-style:italic;

}


.ssspPremiumHeroBottomContent strong{

    font-size:29px;

    font-weight:600;

    font-style:italic;

}


.ssspPremiumHeroBottomContent i{

    margin-top:8px;

    color:#a87b35;

    font-size:10px;

    transform:rotate(45deg);

}


/* =========================================================
   SIDE DECORATION
   ========================================================= */

.ssspPremiumHeroSideDecoration{

    position:absolute;

    z-index:12;

    left:55px;

    top:50%;

    transform:

    translateY(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}


.ssspPremiumHeroSideDecoration span{

    width:1px;

    height:72px;

    background:

    linear-gradient(
        transparent,
        #d49c45
    );

}


.ssspPremiumHeroSideDecoration i{

    width:8px;

    height:8px;

    transform:rotate(45deg);

    background:#e3b25d;

}


.ssspPremiumHeroSideDecoration b{

    width:1px;

    height:72px;

    background:

    linear-gradient(
        #d49c45,
        transparent
    );

}


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

.ssspPremiumHeroPrev,
.ssspPremiumHeroNext{

    position:absolute;

    z-index:30;

    top:50%;

    transform:

    translateY(-50%);

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    border-radius:50%;

    color:#fff;

    font-size:20px;

    background:

    rgba(31,9,6,.48);

    border:

    1px solid rgba(237,202,132,.52);

    backdrop-filter:blur(10px);

    box-shadow:

    0 12px 30px rgba(0,0,0,.20);

    transition:.35s ease;

}


.ssspPremiumHeroPrev{

    left:28px;

}


.ssspPremiumHeroNext{

    right:28px;

}


.ssspPremiumHeroPrev:hover,
.ssspPremiumHeroNext:hover{

    color:#4a160d;

    background:#efc879;

    border-color:#efc879;

    transform:

    translateY(-50%)
    scale(1.08);

}


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

.ssspPremiumHeroPagination{

    position:absolute;

    z-index:30;

    left:110px !important;

    bottom:30px !important;

    width:auto !important;

}


.ssspPremiumHeroPagination
.swiper-pagination-bullet{

    width:10px;

    height:10px;

    margin:0 6px !important;

    opacity:1;

    background:

    rgba(255,255,255,.65);

    transition:.35s ease;

}


.ssspPremiumHeroPagination
.swiper-pagination-bullet-active{

    width:32px;

    border-radius:30px;

    background:#e6b85f;

}


/* =========================================================
   EMPTY
   ========================================================= */

.ssspPremiumHeroEmpty{

    padding:80px 0;

    text-align:center;

    color:#fff;

    background:#220806;

}


/* =========================================================
   ENTRY ANIMATIONS
   ========================================================= */

.swiper-slide-active
.ssspPremiumHeroBadge{

    animation:

    ssspFadeUp .6s ease both;

}


.swiper-slide-active
.ssspPremiumHeroEyebrow{

    animation:

    ssspFadeUp .8s ease both;

}


.swiper-slide-active
.ssspPremiumHeroTitle{

    animation:

    ssspFadeUp 1s ease both;

}


.swiper-slide-active
.ssspPremiumHeroOrnament{

    animation:

    ssspFadeUp 1.15s ease both;

}


.swiper-slide-active
.ssspPremiumHeroLegacy{

    animation:

    ssspFadeUp 1.25s ease both;

}


.swiper-slide-active
.ssspPremiumHeroDescription{

    animation:

    ssspFadeUp 1.4s ease both;

}


.swiper-slide-active
.ssspPremiumHeroButtons{

    animation:

    ssspFadeUp 1.55s ease both;

}


.swiper-slide-active
.ssspPremiumHeroFeatures{

    animation:

    ssspFadeUp 1.7s ease both;

}


.swiper-slide-active
.ssspPremiumHeroQuote{

    animation:

    ssspQuoteIn 1.4s ease both;

}


@keyframes ssspFadeUp{

    from{

        opacity:0;

        transform:
        translateY(38px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}


@keyframes ssspQuoteIn{

    from{

        opacity:0;

        transform:
        translateY(30px)
        scale(.95);

    }

    to{

        opacity:.94;

        transform:
        translateY(0)
        scale(1);

    }

}


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

@media (max-width:1500px){

    .ssspPremiumHeroItem{

        min-height:720px;

    }

    .ssspPremiumHeroTitle{

        font-size:62px;

    }

    .ssspPremiumHeroQuote{

        font-size:27px;

        left:50%;

    }

}


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

@media (max-width:1200px){

    .ssspPremiumHeroItem{

        min-height:690px;

    }

    .ssspPremiumHeroTitle{

        font-size:54px;

    }

    .ssspPremiumHeroQuote{

        display:none;

    }

    .ssspPremiumHeroFeature{

        padding:

        0 16px;

    }

    .ssspPremiumHeroBottomArt{

        width:68%;

    }

}


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

@media (max-width:991px){

    .ssspPremiumHeroItem{

        min-height:auto;

        padding:110px 0 160px;

    }

    .ssspPremiumHeroContainer{

        padding-top:20px;

        padding-bottom:20px;

    }

    .ssspPremiumHeroContent{

        max-width:100%;

        text-align:center;

    }

    .ssspPremiumHeroEyebrow{

        justify-content:center;

    }

    .ssspPremiumHeroOrnament{

        justify-content:center;

    }

    .ssspPremiumHeroButtons{

        justify-content:center;

    }

    .ssspPremiumHeroFeatures{

        justify-content:center;

    }

    .ssspPremiumHeroFeature:first-child{

        padding-left:18px;

    }

    .ssspPremiumHeroAnniversary{

        top:25px;

        right:30px;

    }

    .ssspPremiumHeroSideDecoration{

        display:none;

    }

    .ssspPremiumHeroPagination{

        left:50% !important;

        transform:translateX(-50%);

    }

    .ssspPremiumHeroBottomArt{

        width:100%;

        min-width:0;

        right:-80px;

    }

}


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

@media (max-width:767px){

    .ssspPremiumHeroItem{

        padding:

        95px 0 145px;

        min-height:auto;

    }

    .ssspPremiumHeroBorder{

        inset:10px;

    }

    .ssspPremiumHeroContainer{

        padding-left:20px;

        padding-right:20px;

    }

    .ssspPremiumHeroBadge{

        font-size:11px;

        letter-spacing:1px;

        padding:

        9px 15px;

        margin-bottom:18px;

    }

    .ssspPremiumHeroEyebrow{

        font-size:13px;

        letter-spacing:4px;

    }

    .ssspPremiumHeroTitle{

        font-size:39px;

        line-height:1.08;

        letter-spacing:-1px;

    }

    .ssspPremiumHeroLegacy{

        font-size:23px;

    }

    .ssspPremiumHeroDescription{

        font-size:15px;

        line-height:1.75;

    }

    .ssspPremiumHeroButtons{

        flex-direction:column;

    }

    .ssspPremiumPrimaryButton,
    .ssspPremiumSecondaryButton{

        width:100%;

        min-width:100%;

    }

    .ssspPremiumHeroFeatures{

        gap:20px;

        margin-top:32px;

    }

    .ssspPremiumHeroFeature{

        width:calc(50% - 10px);

        justify-content:center;

        padding:0 5px !important;

        border-right:0;

        font-size:12px;

    }

    .ssspPremiumHeroFeatureIcon{

        font-size:22px;

    }

    .ssspPremiumHeroAnniversary{

        transform:scale(.72);

        transform-origin:top right;

        right:12px;

        top:20px;

    }

    .ssspPremiumHeroPrev,
    .ssspPremiumHeroNext{

        width:44px;

        height:44px;

        font-size:14px;

        top:auto;

        bottom:22px;

    }

    .ssspPremiumHeroPrev{

        left:20px;

    }

    .ssspPremiumHeroNext{

        right:20px;

    }

    .ssspPremiumHeroPagination{

        bottom:37px !important;

    }

    .ssspPremiumHeroBottomArt{

        height:115px;

        bottom:-48px;

        right:-50px;

    }

    .ssspPremiumHeroBottomContent{

        left:30%;

        top:25px;

    }

    .ssspPremiumHeroBottomContent span{

        font-size:20px;

    }

    .ssspPremiumHeroBottomContent strong{

        font-size:21px;

    }

}


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

@media (max-width:480px){

    .ssspPremiumHeroItem{

        padding-top:88px;

    }

    .ssspPremiumHeroTitle{

        font-size:33px;

    }

    .ssspPremiumHeroLegacy{

        font-size:20px;

    }

    .ssspPremiumHeroDescription{

        font-size:14px;

    }

    .ssspPremiumHeroFeature{

        width:100%;

    }

    .ssspPremiumHeroFeatures{

        gap:15px;

    }

    .ssspPremiumHeroBottomContent{

        left:20%;

    }

}


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

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

    .ssspPremiumHero *,
    .ssspPremiumHero *::before,
    .ssspPremiumHero *::after{

        animation:none !important;

        transition:none !important;

    }

}