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

.hero{
    position:relative;
    width:100%;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    color:#fff;
}

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

.hero video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
}

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

.hero-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            rgba(0,0,0,.55),
            rgba(0,0,0,.65)
        );
    z-index:-1;
}

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

.hero .container{
    position:relative;
    z-index:2;
}

.hero-tag{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:50px;

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

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

font-size:15px;

font-weight:600;

margin-bottom:30px;

animation:fadeDown 1s ease;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.1;

color:#fff;

max-width:850px;

margin-bottom:30px;

animation:fadeUp 1s ease;

}

.hero p{

font-size:21px;

line-height:1.9;

max-width:700px;

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

margin-bottom:45px;

animation:fadeUp 1.2s ease;

}

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

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

animation:fadeUp 1.4s ease;

}

.hero-buttons .btn{

padding:16px 38px;

font-size:17px;

}

/* ==========================
SCROLL BUTTON
========================== */

.scroll-down{

position:absolute;

left:50%;

bottom:35px;

transform:translateX(-50%);

width:55px;

height:55px;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

animation:bounce 2s infinite;

transition:.3s;

}

.scroll-down:hover{

background:var(--secondary);

color:#222;

}

/* ==========================
DECORATIVE SHAPES
========================== */

.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:rgba(212,175,55,.12);

top:-200px;

right:-150px;

filter:blur(50px);

}

.hero::after{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

background:rgba(11,107,83,.15);

bottom:-150px;

left:-120px;

filter:blur(40px);

}

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

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes bounce{

0%,
100%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(12px);

}

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:1200px){

.hero h1{

font-size:60px;

}

}

@media(max-width:992px){

.hero{

text-align:center;

}

.hero h1{

font-size:52px;

}

.hero p{

margin-left:auto;

margin-right:auto;

}

.hero-buttons{

justify-content:center;

}

}

@media(max-width:768px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

line-height:1.7;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:100%;

max-width:320px;

}

.hero-tag{

font-size:13px;

padding:8px 18px;

}

.scroll-down{

display:none;

}

}

@media(max-width:576px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

}