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

:root{
   --peru:#eee;
   --black:#eee;
   --white:#fff;
   --light-black:#666;
   --light-white:black;
   --light-bg:#f5f5f5;
   --dark-bg:rgba(0,0,0,.7);
   --border:.1rem solid #aaa;
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
   font-family: 'Dosis', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
   transition: all 0.4s cubic-bezier(.43,1.1,.62,1.08);
   text-transform: capitalize;
}

* > img{
   user-select: none;
   pointer-events: none;
}
html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
 }
 
 html::-webkit-scrollbar{
    width: 1rem;
 }
 
 html::-webkit-scrollbar-track{
    background-color:#eee;
 }
 
 html::-webkit-scrollbar-thumb{
    background-color:black;
 }
 
 section{
    padding:5rem 10%;
 }
 .heading{
    text-align: center;
    margin-bottom: 3rem;
 }
 
 .heading span{
    font-size: 2.5rem;
    color:var(--peru);
 }
 
 .heading h3{
    font-size: 4.5rem;
    color:var(--black);
 }
 .btn{
    margin-top: 1rem;
    display:inline-block;
    background: black;
    color:#eee;
    font-size: 2rem;
    cursor: pointer;
    padding:1rem 3rem;
    
 }
 
 .btn:hover{
    letter-spacing: .2rem;
 }
.order{
    background: var(--peru);
 }
 
 .order .heading span{
    color:black;
 }
 
 .order .heading h3{
    color:black;
 }
 
 .order form{
    padding:2rem;
    background: var(--white);
    box-shadow: var(--box-shadow);
 }
 
 .order form .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:2rem;
 }
 
 .order form .box-container .box{
    flex:1 1 41rem;
 }
 
 .order form .box-container .box .inputBox input,
 .order form .box-container .box .inputBox textarea{
    width: 100%;
    margin:1rem 0;
    padding:1.2rem 1.4rem;
    font-size: 1.7rem;
    color:var(--light-black);
    border:var(--border);
    text-transform: none;
 }
 
 .order form .box-container .box .inputBox input::placeholder,
 .order form .box-container .box .inputBox textarea::placeholder{
    text-transform: capitalize;
 }
 
 .order form .box-container .box .inputBox input:focus,
 .order form .box-container .box .inputBox textarea:focus{
    background: var(--black);
    color:black;
 }
 
 .order form .box-container .box .inputBox input:focus::placeholder,
 .order form .box-container .box .inputBox textarea:focus::placeholder{
    color:var(--light-white);
 }
 
 .order form .box-container .box .inputBox textarea{
    height: 20rem;
    resize: none;
 }
 
 .order form .box-container .box .inputBox .map{
    height: 20rem;
    width: 100%;
    margin:1rem 0;
 }
 
 .order form .box-container .box .inputBox span{
    color:var(--light-black);
    font-size: 2rem;
 }