/* navigation */
.main{
    padding: 10px;


}
.nav-main{
    display: flex;
    justify-content: space-around;    
    align-items: center;
   
}
.nav{
    display: flex;
      justify-content: center;    
    align-items: center;
       gap: 10px;
}

.navList{
    display: flex;
      justify-content: center;    
    align-items: center; 
    font-weight: bold; 
    font-family: sans-serif; 
    text-wrap: wrap;
    gap: 10px;
    
}
.logo{
  height: 50px;
  width: 208;
  margin-bottom: 20px;
}
a {
  text-decoration: none;
   list-style: none;
   color: black;
}


.btn1{
background-color: #A53DFF;
color: wheat;
height: 48px;
width: 111px;
border-radius: 4px;
border: none;
font-size: medium;
font-family: sans-serif;

}


/* hero section */

.exta{
    display: flex;
     padding:40px 150px ;   
    /* align-items: center;
     top: 222px; */
     
}
.text{
  height:336px ;
  width: 648px;
  gap: 24px;
  /* margin-top:55px; */
}
.h2{
  height: 100px;
  width: 560px;
  gap: 16px;
  line-height: 70px;
  font-style: SemiBold;
  font-size: 60px;
  text-wrap: wrap;
  
  
}
.h4{
  height: 72px;
  width: 500px;
   text-wrap: wrap;
     
  
}
.btn2{
background-color: #A53DFF;
color: wheat;
height: 48px;
width: 111px;
border-radius: 4px;
border: none;
font-size: medium;
font-family: sans-serif;

}
.img{
  
  border-radius: 25px;
  box-shadow: rgb(192, 190, 190);
 
}

/* small card */
.smallCard{
  display: flex;
  margin-top: 20px;
  /* align-items: center;
  justify-content: center; */
  gap: 20px;
  

}
.card{
  background-color: #e9ecf1;
  padding: 8px 30px;
  font-size: small;
  line-height: 5px;
  border-radius: 4px;

}


/* Professional User Experience Designer */
.Main{
  display: flex;
  /* justify-content: space-between; */
     /* padding:50px 100px ;  */
      padding:40px 150px ; 
      gap: 60px;  


}

.btn3{
border-color: #A53DFF;
border: 2px;
color: black;
height: 48px;
width: 111px;
border-radius: 4px;
font-size: medium;
font-family: sans-serif;

}
.user{
   height: 400px;
     width: 500px;
    
}
.h1{
 
  line-height: 38px;
  font-size: 38px;
  
  letter-spacing: 0px;
  text-wrap: wrap;
  
}
.h5{
  /* /* height: 72px; */
   width: 500px; 
  
  line-height: 22px;
  font-size: 18px;
  margin-top: 20px;
  color: #556070;
  text-wrap: wrap;
  


}
.h6{
  /* /* height: 72px; */
   width: 500px; 
  line-height: 22px;
  font-size: 18px;
  letter-spacing: 0px;
  color: #556070;
  margin-top: 20px;
text-wrap: wrap;

}


/* Work Process */
.work{
    padding:40px 150px ; 
  background-color: #F0F1F3;
  
}
.CArd{
  display: flex;
  gap: 10px;
}

.card1{
  background-color: white;
  border-radius: 4px;
  padding: 20px 30px;
 text-wrap: wrap;
  
  

}
.card2{
  background-color: white;
  border-radius: 4px;
  padding: 20px 30px;
 text-wrap: wrap;
  margin-top: 10px;
  

}
.card3{
  background-color: white;
  border-radius: 4px;
  padding: 20px 30px;
 text-wrap: wrap;
  

}
.card4{
  background-color: white;
  border-radius: 4px;
  padding: 20px 30px;
 text-wrap: wrap;
  margin-top: 10px;
  

}
.Process{
  display: flex;
  align-items: center;
  gap: 40px;
  overflow: hidden;
}


/* Portfolio */
.port{

   padding:40px 150px ; 
}

.multi{
  display: flex;
 gap: 20px;
}
.multi2{
  display: flex;
 gap: 20px;
 margin-top: 20px;
}
.for{
  box-shadow: 21px 22px 93px 0px rgba(0, 0, 0, 0.20);
border-radius: 8px;
  border: 1px;
  background-color: whitesmoke;
   
}

.for1{
  padding: 20px 30px;
  
 
}

.btn5{
  background-color: #A53DFF;
  border-radius: 4px;
  border: none;
  color: white;
  font-weight: 600;
  padding: 10px 20px;
  box-shadow: 21px 22px 93px 0px rgba(0, 0, 0, 0.20);

}
.btn4{
  box-shadow: 21px 22px 93px 0px rgba(0, 0, 0, 0.20);
  border-radius: 4px;
  background-color: #cedbf1;
  border: none;
  color: #A53DFF;
   padding: 10px 20px;
   font-weight: 900;
}
.car-img{
  height: 220px;
  width: 350px;
  
}

@media(max-width:600px){
 



}
/* Let’s work Together */
.DoYou{
  color: white;
  text-align: center;
  padding:100px 400px ; 
}

/* What I do? */

.card5{
  background-color: white;
  padding: 10px 20px;
  border-radius: 4px;
  border-left: 6px solid #A53DFF;

  outline: none;
   
}
.card6{
   background-color: white;
  padding: 10px 20px;
  border-radius: 4px;
  margin-top: 10px;
}
.wood{
 background-color: #F0F1F3;
padding:40px 150px ;

}
/* form */
.input{
  padding: 10px 5px;
  font-size: 16px;

  
  outline: none;
  width: 100%;
  margin-bottom: 20px;

}
/* footer */
.foo{
   
  padding:100px 150px ; 


}
.icon{
    display: flex;
    justify-content: space-around;    
    align-items: center;
   
}
.nav{
    display: flex;
      justify-content: center;    
    align-items: center;
       gap: 30px;
}

.List{
    display: flex;
      justify-content: center;    
    align-items: center; 
    font-weight: bold; 
    font-family: sans-serif; 
    color: white;
    font-size: 16px;
    
    gap: 10px;
    
}
.logo2{
  height: 50px;
  width: 208;
  
}
.ank {
  text-decoration: none;
   list-style: none;
   color: white;
}












@media(max-width:600px){
.nav-main{
 display: block;
    justify-content:center;    
    align-items: center; 
    text-align: center;
    flex: 100%;
    position: center;
}
.nav{
 display: block;
    justify-content:center;    
    align-items: center; 
    flex: 100%;
}

/* hero section */
.exta{
    display: block;
     padding:20px 50px ; 
     flex: 100%;     
}
.img{
  margin-top: 20px;
 
}
.Main{
  display: block;
  /* justify-content: space-between; */
     /* padding:50px 100px ;  */
      padding:20px 50px ; 
      gap: 20px;  


}
/* work */
 .Process{
  display: block;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  flex: 100%;
}
.h1{
  text-align: center;
}
.work{
    padding:20px 50px ; 
  background-color: #F0F1F3;
  
}
/* portfolio */
.port{

   padding:20px 50px ; 
} 
.multi{
  display: block;
 
 flex: 100%;
 margin-top: 20px;
}
.multi2{
  display: block;
margin-top: 20px;
 flex: 100%;
}
.for1{
  padding: 20px 30px;
  
 
}
.car-img{
  height: 220px;
  width: 350px;
  
}

 /* Let’s work Together */
 .DoYou{
  color: white;
  text-align: center;
  padding:20px 80px ; 
}
}