/* ===============================
   GOOGLE FONT
================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
    background:#ffffff;
}

/* ===============================
   NAVBAR
================================= */

.navbar{
    transition:.4s;
    padding:15px 0;
}

.navbar-brand{
    font-size:30px;
    font-weight:700;
}

.nav-link{
    color:#fff !important;
    margin-left:15px;
    font-weight:500;
    transition:.3s;
}

.nav-link:hover{
    color:#ffc107 !important;
}

.btn-warning{
    padding:12px 28px;
    border-radius:50px;
    font-weight:600;
}

.btn-outline-light{
    border-radius:50px;
    padding:12px 28px;
}

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

.hero{

    background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
    url("images/bg.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:100vh;

    display:flex;

    align-items:center;

}

.hero h1{

    font-size:65px;

    line-height:1.2;

}

.hero p{

    color:#ddd;

}

.hero img{

    animation:carMove 4s ease-in-out infinite;

}

@keyframes carMove{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===============================
   SEARCH CARD
================================= */

.card{

    border-radius:25px;

    margin-top:-90px;

    position:relative;

    z-index:10;

}

.form-control,

.form-select{

    height:55px;

    border-radius:12px;

}

.form-control:focus,

.form-select:focus{

    box-shadow:none;

    border-color:#ffc107;

}

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

.btn{

    transition:.4s;

}

.btn:hover{

    transform:translateY(-4px);

}

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

section{

    padding:80px 0;

}

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

@media(max-width:991px){

.hero{

text-align:center;

padding-top:120px;

}

.hero h1{

font-size:45px;

}

.hero img{

margin-top:50px;

}

.card{

margin-top:20px;

}

}

@media(max-width:768px){

.hero{

min-height:auto;

padding:120px 0 80px;

}

.hero h1{

font-size:36px;

}

.hero p{

font-size:15px;

}

.navbar-brand{

font-size:25px;

}

.btn{

width:100%;

margin-bottom:10px;

}

.btn-outline-light{

margin-left:0 !important;

}

}

@media(max-width:576px){

.hero h1{

font-size:30px;

}

.hero p{

font-size:14px;

}

.card-body{

padding:25px;

}

}