/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero-pesquisa{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:

    linear-gradient(

        rgba(0,0,0,.45),

        rgba(0,0,0,.55)

    ),

    url("/banner/alojamento.jpg")

    center center/cover no-repeat;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(13,110,253,.10),

        rgba(0,0,0,.55)

    );

}

.hero-content{

    position:relative;

    z-index:5;

    padding:80px 0;

}

/*
|--------------------------------------------------------------------------
| BADGE
|--------------------------------------------------------------------------
*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

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

    backdrop-filter:blur(14px);

    border-radius:999px;

    color:#fff;

    font-size:14px;

    font-weight:700;

    margin-bottom:30px;

}

.hero-badge i{

    color:#ffd43b;

}

/*
|--------------------------------------------------------------------------
| TITLE
|--------------------------------------------------------------------------
*/

.hero-title{

    margin-bottom:45px;

}

.hero-title h1{

    font-size:56px;

    font-weight:900;

    color:#fff;

    text-align: center;

    margin-bottom:18px;

    line-height:1.1;

}

.hero-title h1 span{

    color:#ffd43b;

}

.hero-title p{

    font-size:20px;

    color:#f8fafc;

    text-align: center;

    max-width:850px;

}

/*
|--------------------------------------------------------------------------
| SEARCH
|--------------------------------------------------------------------------
*/

.hero-search{

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

    backdrop-filter:blur(20px);

    border-radius:28px;

    padding:28px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.20);

}

/*
|--------------------------------------------------------------------------
| GRID
|--------------------------------------------------------------------------
*/

.hero-grid{

    display:grid;

    grid-template-columns:

    2fr

    2fr

    1fr

    1fr

    220px;

    gap:18px;

}

/*
|--------------------------------------------------------------------------
| LABEL
|--------------------------------------------------------------------------
*/

.hero-item label{

    display:block;

    font-size:13px;

    font-weight:700;

    color:#334155;

    margin-bottom:10px;

}

/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

.hero-input{

    position:relative;

}

.hero-input i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#64748b;

    font-size:18px;

}

.hero-input input{

    width:100%;

    height:62px;

    border-radius:18px;

    border:1px solid #e5e7eb;

    padding-left:52px;

    padding-right:15px;

    transition:.30s;

    font-size:15px;

    font-weight:600;

    background:#fff;

}

.hero-input input:focus{

    outline:none;

    border-color:#0d6efd;

    box-shadow:

    0 0 0 5px rgba(13,110,253,.12);

}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.hero-search-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:18px;

    background:

    linear-gradient(

        135deg,

        #0d6efd,

        #2563eb

    );

    color:#fff;

    font-weight:800;

    font-size:16px;

    transition:.30s;

    box-shadow:

    0 15px 30px rgba(13,110,253,.30);

}

.hero-search-btn:hover{

    transform:translateY(-3px);

    box-shadow:

    0 20px 40px rgba(13,110,253,.40);

}

/*
|--------------------------------------------------------------------------
| COUNTER
|--------------------------------------------------------------------------
*/

.hero-counter{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:20px;

    margin-top:45px;

}

.hero-counter-card{

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

    backdrop-filter:blur(15px);

    border-radius:20px;

    padding:24px;

    text-align:center;

    transition:.30s;

}

.hero-counter-card:hover{

    transform:translateY(-5px);

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

}

.hero-counter-card strong{

    display:block;

    color:#fff;

    font-size:38px;

    font-weight:900;

    margin-bottom:8px;

}

.hero-counter-card span{

    color:#f8fafc;

    font-size:14px;

}

/*
|--------------------------------------------------------------------------
| LOADING
|--------------------------------------------------------------------------
*/

.hero-search-btn.loading{

    pointer-events:none;

    opacity:.75;

}

.hero-search-btn.loading::after{

    content:"";

    width:18px;

    height:18px;

    margin-left:10px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.35);

    border-top:2px solid #fff;

    display:inline-block;

    animation:heroSpin .7s linear infinite;

}

/*
|--------------------------------------------------------------------------
| ANIMATION
|--------------------------------------------------------------------------
*/

@keyframes heroSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.hero-content{

    animation:heroFade .8s ease;

}

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*
|--------------------------------------------------------------------------
| RESPONSIVO
|--------------------------------------------------------------------------
*/

@media(max-width:1200px){

    .hero-grid{

        grid-template-columns:

        repeat(2,1fr);

    }

}

@media(max-width:992px){

    .hero-title h1{

        font-size:42px;

    }

    .hero-title p{

        font-size:17px;

    }

    .hero-counter{

        grid-template-columns:

        repeat(2,1fr);

    }

}

@media(max-width:768px){

    .hero-pesquisa{

        min-height:auto;

    }

    .hero-grid{

        grid-template-columns:1fr;

    }

    .hero-title{

        text-align:center;

    }

    .hero-title h1{

        font-size:34px;

    }

    .hero-title p{

        font-size:15px;

    }

    .hero-counter{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .hero-search{

        padding:18px;

    }

    .hero-input input{

        height:56px;

    }

    .hero-search-btn{

        height:56px;

    }

}