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

.hero{

    display:flex;
    align-items:center;

    min-height:calc(
        100svh
        - var(--header-height)
    );

}

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

.hero-bg{

    position:absolute;
    inset:0;

    z-index:1;

}

.hero-bg img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transform:scale(1.05);

}

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

.hero-overlay{

    position:absolute;
    inset:0;

    z-index:2;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.45) 45%,
            rgba(0,0,0,.12) 100%
        );

}

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

.hero-content{

    position:relative;

    z-index:3;

    width:100%;

    max-width:1200px;

    margin:0 auto;

    padding:120px 20px 80px;

}

/* ==========================
   Badge
========================== */

.hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:34px;

    padding:0 14px;

    border-radius:999px;

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

    backdrop-filter:blur(8px);

    font-size:13px;

    font-weight:700;

    margin-bottom:18px;

}

/* ==========================
   Title
========================== */

.hero-title{

    margin:0;

    font-size:34px;

    font-weight:800;

    line-height:1.25;

    letter-spacing:-0.03em;

}

/* ==========================
   Address
========================== */

.hero-address{

    margin-top:14px;

    opacity:.9;

    font-size:15px;

    line-height:1.6;

}

/* ==========================
   Buttons
========================== */

.hero-actions{

    display:flex;

    gap:12px;

    margin-top:28px;

}

.hero-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    flex:1;

    height:52px;

    border-radius:14px;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.hero-btn-primary{

    background:var(--primary);

    color:#fff;

}

.hero-btn-primary:hover{

    opacity:.92;

}

.hero-btn-secondary{

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

    color:#fff;

    backdrop-filter:blur(10px);

}

.hero-btn-secondary:hover{

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

}

/* ==========================
   Scroll
========================== */

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:16px;

    transform:translateX(-50%);

    z-index:5;

    animation:heroScroll 1.8s infinite;

    opacity:.85;

}

.hero-scroll svg{

    width:24px;
    height:24px;

}

@keyframes heroScroll{

    0%{

        transform:
            translate(-50%,0);

    }

    50%{

        transform:
            translate(-50%,8px);

    }

    100%{

        transform:
            translate(-50%,0);

    }

}

/* ==========================
   Tablet
========================== */

@media (min-width:768px){

    .hero-title{

        font-size:48px;

    }

    .hero-address{

        font-size:17px;

    }

    .hero-actions{

        width:420px;

    }

}

/* ==========================
   Desktop
========================== */

@media (min-width:1200px){

    .hero-content{

        padding-bottom:72px;

    }

    .hero-title{

        font-size:60px;

    }

}
@media (max-width:768px){

    .hero{

        align-items:flex-end;

    }
	
	.hero-bg img{

        object-position:center top;
        transform:none;
        
    }

    .hero-content{

        padding:
            0
            20px
            calc(48px + env(safe-area-inset-bottom));

    }

}