@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');
/* SpyX Hero Foundation */

.spyx-hero{
    position: relative;
    background: #000;
    overflow: hidden;
        padding-top: 60px;

}

.spyx-hero-bg{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
z-index:1;
}

.spyx-hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.6));
z-index:2;
}

.spyx-hero-left,
.spyx-hero-right{
position:absolute;
bottom:0;
z-index:3;
}

.spyx-hero-left{
    left:-100px;
    top:60;
    width:400px;
}

.spyx-hero-right{
    right:-100px;
    top:60;
    width:400px;
}

.spyx-hero-left img,
.spyx-hero-right img{
width:100%;
display:block;
}

.spyx-hero-content{
position:relative;
z-index:5;
max-width:760px;
margin:0 auto;
padding:60px 20px 40px;
text-align:center;
color:#fff;
}

.spyx-badge{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    padding:12px 28px;

    background:#090909;

    border-radius:5px;

    overflow:hidden;

    margin-bottom:30px;

    font-family:'Oswald',sans-serif;

    font-size:22px;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.5px;

    color:#fff;

    z-index:2;
}

/* Gradient Border */
.spyx-badge::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:5px;

    background:linear-gradient(
        90deg,
        rgba(110,0,0,.55) 0%,
        rgba(255,40,40,1) 50%,
        rgba(110,0,0,.55) 100%
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    pointer-events:none;
}

/* Red glow inside */
.spyx-badge::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:180px;
    height:60px;

    background:radial-gradient(
        circle,
        rgba(255,0,0,.30) 0%,
        rgba(255,0,0,0) 70%
    );

    pointer-events:none;
}

.spyx-badge span{
    position:relative;
    z-index:3;
    color:#d81e1e;
}

.spyx-badge strong{

    color:#e32020;

}

.spyx-subtitle{

    font-size:18px;

    letter-spacing:5px;

    font-weight:600;

}

.spyx-hero-content h1{

    font-family:'Big Shoulders Display', sans-serif;

    font-size:118px;

    font-weight:900;

    line-height:.82;

    letter-spacing:1px;

    text-transform:uppercase;

    margin:8px 0 20px;

    color:#f7f7f7;

}


.white-line{

    display:block;

    color:#f4f4f4;

    font-weight:900;

    letter-spacing:1px;

    text-shadow:
        0 2px 3px rgba(0,0,0,.35);

}

.red-line{
    margin-top: 20px;

    display:block;

    font-weight:900;

    letter-spacing:1px;

    background:linear-gradient(
        180deg,
        #ff7272 0%,
        #ff3030 45%,
        #ba0000 100%
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

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

}
.spyx-description{

    max-width:470px;

    margin:25px auto 40px;

    font-family:'Inter',sans-serif;

    font-size:22px;

    font-weight:400;

    line-height:1.6;

    color:#d8d8d8;

}

.spyx-buttons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:40px;
}

.spyx-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    min-width:280px;
    height:56px;

    padding:0 34px;

    border-radius:6px;

    font-family:'Oswald',sans-serif;

    font-size:18px;

    font-weight:400;

    letter-spacing:.6px;

    text-transform:uppercase;

    text-decoration:none;

    line-height:1;

    transition:.25s ease;

}

.spyx-btn.primary{

    color:#fff;

    background:linear-gradient(
        180deg,
        #ef2d2d 0%,
        #d71818 45%,
        #aa0909 100%
    );

    border:1px solid #d72626;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 18px rgba(255,0,0,.18);

}

.spyx-btn.primary:hover{

    transform:translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 24px rgba(255,0,0,.35);

}
.spyx-btn.secondary{

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

    color:#fff;

    border:1px solid #b81414;

    box-shadow:
        0 0 14px rgba(255,0,0,.12);

}

.spyx-btn.secondary:hover{

    background:#111;

    border-color:#ff3a3a;

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

}
.btn-icon{

    font-size:22px;

    font-weight:400;

    line-height:1;

}

.btn-play{

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    border:2px solid #e32020;

    border-radius:50%;

    color:#e32020;

    font-size:10px;

    line-height:1;

}




/* Remove Hello Elementor container */

body:not([class*=elementor-page-]) .site-main{

    max-width:100%!important;

    width:100%!important;

    margin:0!important;

    padding:0!important;

}

/*==============================================================
    SPYX HERO - MOBILE (320px - 599px)
==============================================================*/

@media only screen and (max-width:599px){

.spyx-hero{
    position:relative;
    min-height:auto;
    overflow:hidden;
}

/* Background */
.spyx-hero-bg{
    background-position:center top;
}

/* Overlay */
.spyx-hero-overlay{
    background:linear-gradient(
        rgba(0,0,0,.30),
        rgba(0,0,0,.70)
    );
}

/* Characters */
.spyx-hero-left,
.spyx-hero-right{
    position:absolute;
    z-index:3;
    width:210px;
}

.spyx-hero-left{
    left:-45px;
    top:50px;
}

.spyx-hero-right{
    right:-45px;
    top:50px;
}

.spyx-hero-left img,
.spyx-hero-right img{
    width:100%;
    display:block;
}

/* Content */

.spyx-hero-content{

    position:relative;

    z-index:5;

    margin:0 auto;

    padding:105px 20px 45px;

    text-align:center;

}

/* Badge */

.spyx-badge{

    font-size:15px;

    padding:10px 18px;

    margin-bottom:16px;

}

/* Subtitle */

.spyx-subtitle{

    font-size:13px;

    letter-spacing:3px;

}

/* Heading */

.spyx-hero-content h1{

    font-size:62px;

    line-height:.84;

    margin:10px 0 16px;

}

.red-line{

    margin-top:8px;

}

/* Description */

.spyx-description{

    max-width:310px;

    margin:18px auto 26px;

    font-size:15px;

    line-height:1.6;

}

/* Buttons */

.spyx-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:24px;

}

.spyx-btn{

    width:100%;

    max-width:300px;

    min-width:unset;

    height:50px;

    margin:0 auto;

    font-size:16px;

}

}


/*==============================================================
    SPYX HERO - TABLET (600px - 1024px)
==============================================================*/

@media only screen and (min-width:600px) and (max-width:1024px){

.spyx-hero{

    position:relative;

    min-height:auto;

    overflow:hidden;

}

/* Characters stay cinematic */

.spyx-hero-left,
.spyx-hero-right{

    position:absolute;

    width:290px;

    z-index:3;

}

.spyx-hero-left{

    left:-70px;

    top:0;

}

.spyx-hero-right{

    right:-70px;

    top:0;

}

.spyx-hero-content{

    position:relative;

    z-index:5;

    max-width:560px;

    margin:0 auto;

    padding:80px 30px 70px;

    text-align:center;

}

.spyx-badge{

    font-size:18px;

    padding:11px 24px;

}

.spyx-subtitle{

    font-size:15px;

    letter-spacing:4px;

}

.spyx-hero-content h1{

    font-size:82px;

    line-height:.85;

    margin:12px 0 18px;

}

.red-line{

    margin-top:12px;

}

.spyx-description{

    max-width:430px;

    margin:22px auto 30px;

    font-size:18px;

    line-height:1.6;

}

.spyx-buttons{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;

}

.spyx-btn{

    min-width:240px;

    height:54px;

    font-size:17px;

}

}