*{
    box-sizing: border-box;
    margin: 0%;
    padding: 0%;
}
.body{
  width: 100%;
  height: max-content;
  margin: 0%;
  padding: 0;
}
body{
    height: max-content;
    width: 100%;
    padding: 0%;
  
    margin: 0;
}
.menu{
  display: none;
}
 .details{
    height: 80vh;
    width: 100%;
    margin: 0%;
    border: none;
    box-sizing: border-box;
    padding: 5vh 0;
    background-color: #1D1D20;
   
  
 }
 .wlcmtxt{
    position: absolute;
    height: max-content;
    width: 50vh;
background-color: #1D1D20;
 top: 50vh;
    left: 10%;
    border-left: 2px solid #C6B75B;
    color: white;
    padding: 0 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: justify;
    font-family: Georgia;
    line-height: 20px;
    margin: 1vh auto;
    
    
 }
 .Welcome{
    position: absolute;
    top: 20%;
    left: 10%;
    margin: 1vh auto;
    color: #C6B75B;
    font-size: 10vh;

 }
 .navlinks{
   height: 50px;
   width: max-content;
   

   display: flex;
   gap: 10PX;
 }
.nav-icons{
   background-color: white;
   height: 40px;
   width: 40px;
   margin: 0 auto;
   border-radius: 3px;
   transition: 0.1s linear;
 }
.nav-icons:hover{
   box-shadow: 1px 1px 10px #C6B75B;
 }
 .profile-img{
   height: 50vh;
   width: 300px;
   position: absolute;
   top: 20%;
   right: 25%;
 }
 .header{
   width: 100%;
   height: 5vh;
   border: none;
   box-sizing: border-box;
   justify-content: space-between;
   display: flex;
   align-items: center;
   padding: 1vh 5vh;
   margin: 0%;
 }
 .logo{
   width: 13vh;
   height: 13vh;
   border-radius: 50%;
 }
 nav{
   display: flex;
   list-style: none;
   width: max-content;
   height: 100%;
   box-sizing: border-box;
   border: none;
   justify-content: space-between;
   gap: 5vh;
 }
 .links{
   text-decoration: none;
   color: #C6B75B;
   transition: 0.1s linear;
  

 }
 .links:hover{
   border-bottom: 1px solid #C6B75B;
 }
 .main{
   width: 100%;
   height: 80vh;
   margin: 5vh 0;
   padding: 0 0;
   box-sizing: border-box;
   position: relative;
 
   
 }
 .comp-img{
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 .infm{
   position: absolute;
   top: 5vh;
   left: 10vh;
   width: max-content;
   height: max-content;
   display: flex;
   flex-direction: column;
   justify-content: left;
   gap: 3vh;
 }
 .infm h1{
   font-size: 10vh;
   color: white;
 }
 .infm p{
   font-size: 2vh;
   color: white;
 }
 .infm button{
   width: 30vh;
   height: 5vh;
   background-color: #C6B75B;
   color: black;
   border: none;
   border-radius: 1vh;
   padding: 1vh 3vh;
   font-size: large;
 }
 .dtls{
   position: absolute;
   top: 60vh;
   left: 0vh;
   width: 100%;
   height: 20vh;
   background-color: #0b0b0c;
   mix-blend-mode: difference;
   display: flex;
   padding: 0 10vh;
   gap: 2vh;
 }
 .frlnce{
   color: white;
   mix-blend-mode: none;
   background-color: #1D1D20;
   position: relative;
   margin: 0 auto;
   text-align: center;
   display: flex;
   flex-direction: column;
   gap: 2vh;
   padding: 3vh auto;
 }
 .about{
   height: 80vh;
   width: 100%;
   display: flex;
   margin: 5vh 0;
   padding: 2vh 10vh;
   background-color: #1D1D20;
   gap: 3vh;
   justify-content: center;
  
 }
 .aboutservices{
  justify-content: center;
  align-items: center;
 }
 .abtimg{
   border-radius: 1vh;
 }
 .abtdtls{
   padding: 2vh 5vh;
   display: flex;
   flex-direction: column;

 }
  .abtdtls h1{
   color: white;
   margin: 1vh 0;
  }
   .abtdtls p{
      color: white;
      margin: 1vh 0;
   }

.level{
   height: 1vh;
   width: 100%;
   border-radius: 3px;
   margin-top: 1px;
  background: linear-gradient(to right,#FE4900 50%, #C6B75B 80%, #C6B75B 100%);
  
}
.ttl{
   margin: 1vh auto;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 0;
}
.ttl p{
   margin: 0%;
}
.hire-me{
   width: 25vh;
   height: 7vh;
   position: relative;
   margin: 2vh auto;
   border: none;
   background-color: #C6B75B;
   border-radius: 1vh;
   font-size: larger;
   color: white;
}
.aboutclr{
 justify-content: center;
 align-items: center;
 position: relative;
}
.mblgit{
  top: 55vh;
  left: 15vh;
}
.aboutclr h1{
   font-size: 8vh;
   color: white;
}
.myabtinf{
   line-height: 3vh;
   word-spacing: 0.5vh;
   width: 100%;
}
.services{
   width: 100%;
   height: 20vh;
   justify-content: center;
   align-items: center;
   display: flex;
   box-sizing: border-box;
}
.service{
   height: 100%;
   width: 31%;
   margin: 0 auto;
  
   background-color: #C6B75B;
   box-sizing: border-box;
   border: none;
   border-radius: 1vh;
   justify-content: center;
   align-items: center;
   display: flex;
   position: relative;
}
.serviceimg{
   height: 10vh;
   width: 10vh;
   border-radius: 50%;
   box-sizing: border-box;
   margin: auto;
}
.servicedetail{
   height: 100%;
   width: 22vh;
   margin: 0 0 0 1vh;
   justify-content: center;
   align-items: center;
   position: relative;
   padding: 0 2vh;
   background-color: #C6B75B;
   border-radius: 0 1vh 1vh 0;
}
.servicedetail h3{
   margin: 1vh auto;
   font-size: 3vh;
   color: black;
}
.servicedetail p{
   margin: 0%;
   color: white;
   font-size: 1.7vh;
}
.portfolios{
   height: 40vh;
   width: 100%;
    justify-content: center;
   align-items: center;
   display: flex;
   box-sizing: border-box;
}
.portfolio{
   width: 100%;
   height: 100%;
   border-radius: 1vh;
   transition: 1s ease;
   
}
.portfolio:hover{
  scale: 1.05;
}
.form{
  position: absolute;
  top: 5vh;
  right: 5vh;
  display: flex;
  flex-direction: column;
  background-color: none;
  backdrop-filter: blur(5px);
  width: max-content;
  height: max-content;
  text-align: center;
  border-radius: 2vh;
}
#form{
  display: flex;
  flex-direction: column;
  gap: 5vh;
  width: 60vh;
}
.inputs{
  height: 5vh;
  width: 95%;
  margin: 1vh auto;
  border: none;
  outline: none;
  border-bottom: 1px solid #C6B75B;
  padding: 0 3vh;
  border-radius: 1vh;
}
.submit{
  background-color: #C6B75B;
  color: black;
  font-size: larger;
  cursor: pointer;
}
.submit:hover{
  box-shadow: 1px 2px 10px rgba(#C6B75B, #C6B75B, #C6B75B, 1.5);
}

 
@media (min-width: 1201px) { 
  .body{
    width: 1200px;
    height: max-content;
    margin: 2vh auto;
  }
}