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

.hero {

    position: relative;

    min-height: 720px;
    height: 85vh;
    max-height: 936px;

    /* border-radius: 24px; */

    overflow: hidden;

    isolation: isolate;

/* width:min(
        calc(100% - 48px),
        1728px
    ); */

    margin-inline:auto;
    /* margin-top:24px; */

    /* max-width:1728px; */

    /* margin:24px auto; */

    display: flex;

    flex-direction: column;
    background: #061C2B;

}

.hero::before{

content:"";

position:absolute;

right:25%;

top:50%;

transform:translateY(-50%);

width:700px;

height:700px;

background:

radial-gradient(

rgba(20,94,145,.35),

transparent 70%

);

filter:blur(80px);

z-index:-2;

}

.hero::before{

    content:"";

    position:absolute;

    top:0;

    right:38%;

    width:260px;

    height:100%;

    background:

    linear-gradient(

        90deg,

        rgba(6,28,43,1),

        rgba(6,28,43,0)

    );

    pointer-events:none;

    z-index:-1;

}

/* ==========================================
   Background Image
========================================== */

.hero__background{

    position:absolute;

    inset:0;

    background-image:url("../../../images/hero/hero-image.webp");

    background-size: 1280px auto;

    background-position: right -400px center;

    background-repeat:no-repeat;

    z-index:-3;

}


/* ==========================================
   Gradient Overlay
========================================== */

.hero__overlay{

    position:absolute;

    inset:0;

background:linear-gradient(
        90deg,
        rgba(6,28,43,1) 0%,
        rgba(6,28,43,.98) 20%,
        rgba(6,28,43,.95) 35%,
        rgba(6,28,43,.75) 50%,
        rgba(6,28,43,0) 68%
    );

    z-index:-2;

}


/* ==========================================
   Container
========================================== */

.hero__main{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    padding-top: 160px;
    padding-bottom: 88px;
}

.hero .container{

    display:flex;
    flex-direction:column;

    height:100%;

    min-height:inherit;

}


/* ==========================================
   Hero Content
========================================== */

.hero__content{

   display:block;

}


.hero__inner{

    max-width: 640px;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:24px;
    padding-left:8px;

}


.hero__title{

    font-family:var(--ff-heading);

    font-size:var(--fs-display);

    font-weight:700;

    line-height:1.05;

    color:var(--clr-white);

}


.hero__description{

    max-width:640px;

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

    font-size:20px;

    line-height:1.6;

}


.hero__buttons{

    display:flex;

    align-items:center;

    gap:30px;

    margin-top:8px;

}


.hero__secondary{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:white;

    text-decoration:underline;

    text-underline-offset:4px;

    transition:var(--transition);

}


.hero__secondary:hover{

    color:var(--clr-accent);

}


/* ==========================================
   Trust Bar
========================================== */

.hero__trust{

 display:flex;

justify-content:flex-start;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}


.trust-pill{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 20px;

    background:var(--clr-accent);

    color: var(--clr-primary);

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    box-shadow:0 10px 24px rgba(255,130,1,.28);

    transition:all .3s ease;
}

.trust-pill svg{

    width:16px;

    height:16px;

    stroke-width:2.25;

    flex-shrink:0;

}


.trust-pill:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 36px rgba(255,130,1,.35);

}


/* ==========================================
   Accent Text
========================================== */

.accent{

    color:var(--clr-accent);

}


/* ==========================================
   Hero Glow
========================================== */

.hero::after{

    content:"";

    position:absolute;

    right:20%;

    bottom:-140px;

    width:520px;

    height:520px;

    background:radial-gradient(

        rgba(20,94,145,.35),

        transparent 70%

    );

    filter:blur(60px);

    z-index:-1;

    pointer-events:none;

}