@charset "utf-8";
/* CSS Document */
body{
 margin:0px;
 padding:0px;
 background-color:#161616; 
}
ul{
 list-style:none;
}
a{
 text-decoration:none;
}

mark.purple{
  color: #667cf3;
  background: none;
}

nav{
 display:flex;
 justify-content: space-between;
 align-items: center;
 margin-left: auto;
 text-transform: uppercase;
 font-weight: 600;
 letter-spacing: 2px;
 font-family: calibri;
 position: absolute;
 top: 0;
 left: 0;
 width:100%;
 box-sizing: border-box;
 padding: 10px 50px;
 background-color:#F4F7FF;
 box-shadow:2px 2px 12px rgba(0,0,0,0.05); 
 z-index: 1;
}
 
.menu{
 display: flex;
}
.menu li a{
 padding: 10px 15px;
 color:#6c707c;
 font-size: 15px;
 font-family:"Nunito", "Roboto", "Helvetica", "Arial", sans-serif;
 
}


.toggle{
 display:none;
}
.active a{
  border-bottom: 2px solid black;
}


.menu li a:hover{
 color: black!important;
 border-bottom: 2px solid bl;
 font-weight: bold;
 font-size: 18px;
 transition: all ease 0.4s;
}








footer p{
  font-family: calibri;
 }
 footer{
  height:60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color:#161616;
 }
 
 .copyright{
   font-size: 18px;
   color:#b5b5b5;
   padding-bottom: 10px;
 }




@media(max-width:600px){
 .p-container{
  grid-template-columns:1fr ;
  grid-template-rows: auto;}
 .c-b-heading{
  font-size: 1.2rem;
  text-align: center;
  margin: 0px 10%;
 }
 .name{
  width:60%;
 }
 
 
 .black-line{
  margin-bottom: 20px;
 }
 .social{
  left: 30px;
  transform: translateX(-10px);
 }

 .nav{
   float: none;
   display: block;
 }
}
@media(max-width:400px){
 .s-box{
  width: 100%;
  height:400px;
 }
}

@media(max-width:1190px){
  #main{
   background-size: 1150px !important;
   
  }
  .name{
   left: 10%;
   top: 50%;
   transform: translate(-10%,-50%);
  }
  .about-model img{
   height:400px;
  }
  #services{
   height:auto;
  }
  .b-container{
   flex-wrap: wrap;
  }
  .s-box{
   flex-grow: 1;
  }
  .s-b-img img{
   object-fit:cover;
  }
  #contact-form form{
   width:95% !important;
  }
  
 }
 @media(max-width:970px){
  #main{
   background-image: none !important;
   
  }
  .name{
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
  }
  .about-model{
   display: none;
  }
  #about{
   justify-content: center;
   padding-top: 0px;
  }
  .about-text{
   width: 90%;
  }
  .about-text h1{
   font-size:4rem;
  }
  
  .p-container{
   width:100%;
  
  }
  
 }
 @media(max-width:900px){
  .toggle{
    display:block;
   }
   .toggle:before{
  content:'\f0c9';
  font-family: fontAwesome;
  line-height: 0px;
    margin-left:-30px;
 }
   .toggle.active:before{
  content:'\f00d' !important;
  
   }
  nav{
   padding:10px 30px;
  }
  
  nav ul{
   position:absolute; 
   width: 100%;
   height:auto;
   box-sizing:border-box;
   background-color:#0F0F0F;
   top: 50px;
   left: 0;
   transition: 0.5s;
   overflow: hidden;
   display: none !important;
   border:3px solid #1F1F1F;
  }
  
   nav ul li a{
   border-bottom: 1px solid rgba(255,255,255,0.10) ;
   color:#ffffff !important;
   width: 100%;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0px !important;
   padding: 0px !important;
  }
   nav ul{
    padding:0px;
    margin:0px;
   }
  
   .active-menu {
   display: block !important;
  }
  
   nav ul li a:hover{
    background-color:rgba(27,29,32,0.15);
  
    }
  
  
  .p-container{
   grid-template-columns:1fr 1fr;
  grid-template-rows:auto;
  grid-gap: 10px;
   height: auto;
  }
  .c-b-heading{
   font-size: 1.4rem;
   text-align: center;
  }
  #contact-form{
   padding: 20px;
   height: auto;
   box-sizing: border-box;
  }
  
  
  #contact-form form {
   flex-direction: column;
   height:auto;
   padding: 20px;
   width:90% !important;
  
  }
  .contact-left,.contact-right{
   width:100%;
   border: none;
  }
  .f-name,.f-number{
   width: 100%;
  
  }
  .f-name input,.f-number input{
   width:100%;
   border: none;
   background-color: #262626 !important;
   padding: 10px;
   box-sizing: border-box;
   height: 40px;
   
  }
  textarea{
   background-color: #262626 !important;
   margin: 10px 0px;
   padding: 10px;
   height: 200px !important;
   width:100% !important;
  }
  .message{
   margin:0px;
  }
  #contact-form form h1{
   margin:5px 0px;
  }
  
  
 }