@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

*{
    font-family: 'Montserrat', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border:none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .2s linear;
    scroll-behavior: smooth;
    list-style: none;
 }
 
 :root{
     --bg-color:#fdfdfd;
     --text-color:#333;
     --main-color:orange;
     --white-color:#fdfdfd;
     --shadow-color: rgba(0,0,0,.2);
   }
   body{
    background-color:white; 
   }
   header{
     position: fixed;
     width: 100%;
     top: 0;
     right: 0;
     z-index: 1000;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: black;
     padding: 28px 12%;
     transition: all .50s ease;
   }
   .logo{
     display: flex;
     align-items: center;
   }
   .logo span{
     color: white;
     font-size: 1.7rem;
     font-weight: 600;
   }
   .navbar{
     display: flex;
   }
   .navbar a{
     color: white;
     font-size: 1.9rem;
     font-weight: 500;
     padding: 5px 0;
     margin: 0px 30px;
     transition: all .50s ease;
   }
   .navbar a:hover{
     color: var(--main-color);
   }
   .navbar a.active{
     color: var(--main-color);
   }
   #menu-icon{
     font-size: 35px;
     color:white;
     cursor: pointer;
     z-index: 10001;
     display: none;
   }
   
   @media (max-width:1280px){
     header{
       padding: 14px 2%;
       transition: .2s;
     }
     .navbar a{
       padding: 5px 0;
       margin: 0px 20px;
       color: white;
     }
   }
   @media (max-width:1090px){
     #menu-icon{
       display: block;
     }
     .navbar{
       position: absolute;
       top: 100%;
       right: -100%;
       width: 270px;
       height: 70vh;
       background:hsl(0, 100%, 90%/0.1);
       backdrop-filter:blur(1rem) ;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       border-radius: 10px;
       border-style:solid ;
       transition: all .50s ease;
     }
     .navbar a{
       display: block;
       margin: 12px 0;
       padding: 0px 25px;
       transition: all .50s ease;
       color: black;
   
     }
     .navbar a:hover{
       color: var(--main-color);
       transform: translateY(5px);
     }
     .navbar a.active{
       color: var(--main-color);
     }
     .navbar.open{
       right: 2%;
     }
   }
html{
    font-size: 62.5%;
    overflow-x: hidden;

}
body{
    background:var(--bg-color);
    color: var(--text-color);
}
.btn
{
 display: inline-block;
 padding: 1.2rem 2.8rem;
 background-color: var(--main-color);
 border-radius: .6rem;
 box-shadow: 0 .2rem .5rem var(--shadow-color);
 font-size: 1.6rem;
 color: var(--white-color);
 letter-spacing: .1rem;
 font-weight: 600;
 border: .2rem solid transparent;
 transition: .5s ease;   
}
.btn:hover{
background: transparent;
color: var(--main-color);
border-color: var(--main-color);
}
.contact{
    margin-top: 150px;
}

.contact h2{
    margin-bottom: 3rem;
    text-align: center;
    font-size: 4rem;
}
.contact form{
    max-width: 70rem;
    margin: 1rem auto;
    text-align: center;
    margin-bottom: 3rem;
}
.contact form .input-box
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.contact form .input-box input,
.contact form textarea{
    width: 100%;
    padding: 1.5rem;
    font-size: 1.6rem;
    color: var(--text-color);
    background: var(--bg-color);
    border-radius: .8rem;
    margin: .7rem 0;
    box-shadow:0 .1rem .5rem var(--shadow-color) ;
}
.contact form .input-box input{
    width: 49%;
}
.contact form textarea
{
    resize: none;
}
.contact form .btn{
   margin-top: 2rem;
   cursor: pointer; 
}
/*BREAKPOINT*/
@media (max-width: 1200px) {
   
    .contact {
       min-height: auto;
    }

.contact form .input-box input{
 width: 100%;   
}
}