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

.hero{

    position:relative;

    min-height:calc(100vh - 92px);

    margin-top:92px;

    display:flex;

    align-items:center;

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

    background-size:cover;

    overflow:hidden;

}

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

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.90) 22%,
        rgba(0,0,0,.68) 48%,
        rgba(0,0,0,.28) 72%,
        rgba(0,0,0,.05) 100%
    );

    z-index:1;

}

/* ===================================================
   CONTAINER
=================================================== */

.hero .container{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:flex-start;

    width:100%;

    height:100%;

}

/* ===================================================
   TEXTO
=================================================== */

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    max-width:560px;

    margin-top:-75px;

}

.hero-tag{

    display:inline-block;

    color:var(--gold);

    font-size:14px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.hero-tag::after{

    content:"";

    display:block;

    width:60px;

    height:2px;

    margin-top:14px;

    background:var(--gold);

}

.hero h1{

    font-size:clamp(48px,4vw,70px);
    
    line-height:.94;

    font-weight:800;

    color:#fff;

    margin-bottom:28px;

}

.hero h1 span{

    color:var(--gold);

}

.hero p{

    max-width:520px;

    font-size:20px;

    line-height:1.8;

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

    margin-bottom:28px;

}

/* ===================================================
   BOTÕES
=================================================== */

.hero-buttons{

    display:flex;
    gap:18px;
    margin-top:-10px;

}

.hero-buttons .btn{

    min-width:185px;

    padding:18px 34px;

}

/* ===================================================
   DRONE
=================================================== */

.hero-drone{

    position:absolute;

    top:55px;

    right:clamp(10px,2vw,40px);

    width:min(42vw,720px);

    z-index:3;

    pointer-events:none;

}

.hero-drone img{

    width:100%;

    display:block;

    filter:drop-shadow(0 35px 60px rgba(0,0,0,.45));

}

/* ===================================================
   FEATURES
=================================================== */

.hero-features{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:25px;

    width:min(76%,1400px);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:24px;

    border-top:1px solid rgba(212,168,71,.20);

    z-index:5;

}

.feature-item{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    position:relative;

}

.feature-item i{

    color:var(--gold);

    font-size:20px;

}

.feature-item span{

    color:#fff;

    font-size:14px;

    font-weight:600;

    text-transform:uppercase;

}

.feature-item:not(:last-child)::after{

    content:"";

    position:absolute;

    right:-10px;

    top:50%;

    transform:translateY(-50%);

    width:1px;

    height:28px;

    background:rgba(212,168,71,.18);

}

/* ===================================================
   RESPONSIVO
=================================================== */

@media(max-width:992px){

    .hero{

        padding:180px 0 140px;

    }

    .hero-drone{

        display:none;

    }

    .hero-content{

        max-width:100%;

    }

    .hero h1{

        font-size:52px;

    }

    .hero p{

        max-width:100%;

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .hero-features{

        position:relative;

        left:auto;

        bottom:auto;

        transform:none;

        width:100%;

        margin-top:80px;

        flex-wrap:wrap;

        border:none;

        gap:24px;

    }

    .feature-item{

        width:45%;

        justify-content:flex-start;

    }

    .feature-item::after{

        display:none;

    }

}

@media(max-width:768px){

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

    .hero{

        width:100%;
        max-width:100%;

        min-height:auto;

        padding:140px 0 70px;

        align-items:flex-start;

        background-image:url("../images/hero/hero-bg-mobile.webp") !important;

        background-size:cover !important;

        background-repeat:no-repeat;

        background-position:center center;

    }


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

    .hero::before{

        background:linear-gradient(
            180deg,
            rgba(0,0,0,.68) 0%,
            rgba(0,0,0,.55) 35%,
            rgba(0,0,0,.66) 68%,
            rgba(0,0,0,.94) 100%
        );

    }


    /* ===================================================
       CONTAINER
    =================================================== */

    .hero .container{

        min-height:auto;

        align-items:flex-start;

    }


    /* ===================================================
       CONTEÚDO
    =================================================== */

    .hero-content{

        width:100%;

        max-width:100%;

    }


    .hero h1{

        font-size:44px;

        line-height:1.02;

    }


    .hero p{

        max-width:100%;

        font-size:17px;

        line-height:1.7;

        margin-bottom:36px;

    }


    /* ===================================================
       BOTÕES
    =================================================== */

    .hero-buttons{

        gap:14px;

    }


    /* ===================================================
       FEATURES
    =================================================== */

    .hero-features{

        margin-top:55px;

        padding:0 24px;

        gap:20px;

    }


    .feature-item{

        width:100%;

    }

}