body{
    font-family: 'Segoe UI',sans-serif;
    background:#f4f7fb;
}

.hero{

    min-height:100vh;

    background:
        linear-gradient(rgba(15,55,116,.55),
        rgba(22,35,65,.55)),
        url("../img/background.png") center center/cover;

    display:flex;
    align-items:center;
}

.hero h1{

    font-size:55px;
    font-weight:700;
    color:white;
    margin-bottom:20px;
}

.hero p{

    color:white;
    font-size:20px;
    opacity:.95;
    margin-bottom:50px;
}

.search-card{

    background:rgba(255,255,255,.18);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-radius:20px;

    padding:25px;

    border:1px solid rgba(255,255,255,.25);

    box-shadow:0 15px 40px rgba(0,0,0,.18);

}

.form-control,
.form-select{

    height:62px;

    border:none;

    border-radius:14px;

    font-size:17px;

}

.form-control:focus,
.form-select:focus{

    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

.btn-search{

    height:62px;

    border-radius:14px;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

.btn-search:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(13,110,253,.35);

}

.feature{

    background:white;

    border-radius:20px;

    padding:25px;

    text-align:center;

    transition:.3s;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.feature:hover{

    transform:translateY(-10px);

}

.feature i{

    font-size:42px;

    color:#0d6efd;

    margin-bottom:20px;

}

@media(max-width:768px){

.hero h1{

font-size:36px;

}

.search-card{

padding:20px;

}

}