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

.hero{
    position:relative;
    width:100%;
    overflow:hidden;
    isolation:isolate;
    background:var(--background);
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;

    transform: scaleX(-1);

    opacity:.65;

    z-index:-3;
}

.hero::after{
    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(
            circle at 15% 30%,
            rgba(255,255,255,.25),
            transparent 45%
        ),


        linear-gradient(
            115deg,
            rgba(255, 255, 255,.3),
            rgba(255,107,0,1)
        );

    z-index:-1;
    opacity: .45;
}

/* Main layout */
.hero-content{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:clamp(2rem,5vw,7rem);
    min-height:calc(100vh - 4rem);
    padding:
        clamp(1.5rem,4vw,4.5rem)
        clamp(1.5rem,3vw,3rem);
}
/* ==========================================================
                        LEFT SIDE
========================================================== */

.hero-info{
    display:flex;
    flex-direction:column;
    align-items:flex-start;

    position:relative;
    z-index:5;

    gap:clamp(2rem,4vw + 1rem,5.5rem);

    flex:1;
}

/* ---------- Title ---------- */
.hero-text{
    display:flex;
    flex-direction:column;

    gap:clamp(.7rem,1.5vw,1.5rem);

    max-width:700px;
}

.hero-text h1{
    color:var(text-dark);
    font-size:clamp(2.5rem,3.9vw,6.5rem);
    font-weight:700;
    line-height:1.08;
    text-shadow:0 0 4px rgba(255,255,255,.18);
}

.hero-text p{
    font-size:clamp(0.95rem,1.25vw,2rem);
    max-width:55ch;
    font-weight: 570;
    color:var(--text-gray-hero);
}

/* ---------- Buttons ---------- */

.hero-buttons{
    display:flex;
    flex-wrap:wrap;

    gap:1.2rem;

}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    white-space: nowrap;
    padding:.3rem 0.5rem;
    width:fit-content;
    border-radius:8px;
    transition: all 0.4s ease;
    font-weight:600;
    font-size: clamp(0.9rem,1.2vw + 0.1rem,1.5rem);
    font-family: var(--outfit);
}
.btn-primary {
    background:var(--primary-color);
    color: var(--background-light);
    border: 3px solid var(--primary-color);
}

.btn-primary:hover {
    background:var(--background-light);
    color: var(--primary-color);
    transform:translateY(-3px);
    box-shadow:
        0 7px 15px rgba(250, 197, 150, 0.948);
    transition: all 0.4s ease;
}

.btn-primary:hover img {
    transform: scale(1.2);
    transition: all 0.3s ease;
}

.btn-secondary {
    color: var(--text-dark);
    border: 3px solid var(--border);
    background-color: #f9f6f657;
}

.btn-secondary:hover {
    background:var(--border);
    color: rgb(255, 245, 237);
    transform:translateY(-3px);
    box-shadow:
        0 7px 15px rgba(43, 41, 40, 0.948);
    text-shadow:
        0 7px 15px rgb(255, 253, 252);
    transition: all 0.4s ease;
}

/* ---------- Experience ---------- */

.hero-stat{
    display:flex;
    flex-direction:column;

    gap:.2rem;
}

.hero-stat h2{
    color:var(--color-text-light);
    font-size:clamp(2.5rem,3.5vw,5rem);
    font-weight:640;
    line-height:1;
}

.hero-stat p{
    font-family: var(--outfit);
    font-size:clamp(.85rem,1vw,1rem);
    font-weight: 570;
    color:var(--text-gray-hero);

}

.hero-stat sup{
    font-weight:300;
}

.hero-bolt{

    position:absolute;

    inset:0;

    background:var(--hero-image)
               center/cover
               no-repeat;

    -webkit-mask:url("images/hero/hero-shape.svg") 
                 center/contain
                 no-repeat;

    mask:url("images/hero/hero-shape.svg")
         center/contain
         no-repeat;
}


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

.grid-container{
    display:flex;
    justify-content:center;
    align-items:center;

    position: relative;
    z-index: 3;

    inset: 0;
    flex:1;

    background-image: var(--hero-image);
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;

    mask:var(--hero-image)
        center
        no-repeat;


    -webkit-mask:var(--hero-image)
                center
                no-repeat;

}

/*@media (max-width:900px){

.hero-content{
    flex-direction:column;
    text-align:center;
}

.hero-text, .hero-info{
    align-items:center;
}

.hero
.hero-buttons{
    justify-content:center;
}
}*/