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

:root{
    --red:#ff5a3c;
    --light-red:#f9edeb;
}

*{
    font-family: 'Nunito', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; 
    border:0;
    text-decoration: none;
    text-transform: capitalize;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

body{
    background:#f7f7f7;
}

section{
    padding:2rem 9%;
}

.btn{
    margin-top: 1rem;
    display: inline-block;
    padding:.8rem 3.5rem;
    border-radius: .5rem;
    font-size: 1.7rem;
    color:var(--red);
    background:var(--light-red);
    cursor: pointer;
    text-align: center;
}

.btn:hover{
    background:var(--red);
    color:#fff;
}

.heading{
    text-align: center;
    color:#333;
    font-size: 4rem;
    padding-bottom: 3rem;
}

.heading span{
    color:var(--red);
    background:var(--light-red);
    border-radius: .5rem;
    padding:.2rem 1.5rem;
}


.home{
    min-height: 100vh;
    background:url(img/home-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;

}

.home form{
    margin-top: 7rem;
    background:#fff;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
    border:.1rem solid rgba(0,0,0,.2);
    width:70rem;
    padding:2rem;
    font-size: 62.5%;
}

.home form h3{
    text-align: center;
    color:#333;
    font-size: 3rem;
}

.home form .buttons-container{
    display: flex;
    gap:1.5rem;
}

.home form .buttons-container .btn{
    flex:1;
}

.home form .inputBox{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
    margin-top: 2rem;
}

.home form .inputBox input,
.home form .inputBox select{
    flex:1 1 25rem;
    border:.1rem solid #333;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
    font-size: 1.5rem;
    padding:1rem;
    text-transform: none;
}

.home form .btn{
    width: 100%;
    margin-top: 2rem;
}


/* media queries  */
@media (max-width:991px){

    html{
        font-size:55%;
    }

    header{
        padding:1.5rem 1rem;
    }

    section{
        padding:1.5rem;
    }

}