@font-face {
    font-family: 'yekan';
    src: url('../font/Yekan.eot'), format('eot')
         url('../font/Yekan.woff2') format('woff2'),
         url('../font/Yekan.woff') format('woff'), 
         url('../font/Yekan.ttf')  format('truetype'), 
       
  }
  body{
    font-family:'yekan';
    margin: 0%;
    padding: 0%;
  
  }
  ul,li{
    margin: 0%;
    padding: 0%;
  }

/* ///////////////////////////////header/////////////////////////////////// */
header{
 background-color: #ffffff;
 

  
}
.fixed-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}

.background1{
   background: rgb(145, 78, 145);
   background: linear-gradient(183deg,  #B2A5FF 0%, rgb(188, 155, 235) 50%, #B2A5FF 100%);
  height: 6vh;
  justify-content: end;
  font-size: 14px;

  
}
.background1 a{
  margin: .5rem;
}
#nav-number{

  display: flex;
}




.background2{
  position: relative;
  background-color: #450b5c;
  height: 1vh;
  width: 75%;
}
/* 
 li:hover{
  border-bottom: 2px solid  #0b0e5c;
  transition: all 0.2s ease-in-out;
 
} */
.nav-item:hover{
  border-bottom: 2px solid  #420b5c;
  transition: all 0.3s ease-in-out;
}
ul{
  display: inline;
  margin: 0;
  padding: 0
}
ul li{
  margin: .1rem;
  font-size: 14px;
  font-weight: bold;
  color: #530b5c;
  display: inline-block;
}

ul li:hover ul {display: block;}

ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}



nav a{
  color:  #420b5c;
 

}
nav button{
  color: #2e0b5c ;
  
}
.boxitem{
 margin-left: -6.5%;
}
.Design_li{
  width: 10rem;
  height: 2rem;
 
  position: relative;
  margin-bottom: 4px;
  border-radius: 2px;
  text-align: center;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  border: none;
  outline: none;
  color:  #3c0b5c;
  margin-bottom: .5rem;
  margin-right: 1rem;
 
  
}
.Design_li:hover{
  background: linear-gradient(183deg, rgb(154, 7, 228) 0%, rgb(239, 220, 247) 50%, rgb(154, 7, 228) 100%);
 
}
.navbar-toggler{
  padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 5px;
    border-left-width: 5px;
    padding-left: 5px;
    border: none;
    
}
/* //////////////////////////////////////main///////////////////////////////////// */
.back_main{
   
    /* border: 1px solid red; */
    width: auto;
    
    margin-top: 6rem;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:fixed;

}

/* ////////////////////fooooter///////////////////// */
#footer{
  width: 100%;
  height: 90vh;
  background: rgb(0,1,6);
  background: linear-gradient(183deg, rgb(154, 7, 228) 0%, rgb(55, 33, 85) 50%, rgb(154, 7, 228) 100%);
 }
 #footer a{
   text-decoration: none;
   color: white;
 }
 #footer p{
   color: white;
 }
 #footer h3{
   color: white;
 }
 #footer hr{
   color: white;
 }
 #footer .footer-text{
     color: #fff;
     text-align: center;
     padding: 4%;
     
 }
 #footer .footer-text h2{
     font-size: 2rem;
 }
 #footer .footer-text p{
     font-size: 1rem;
     width: 60%;
     margin: auto;
 }
 #footer .footer-aout {
     color: #fff;
     width: 50%;
     text-align: center;
 } 
 #footer .footer-aout input{
     height: 2rem;
 }
 #footer .social{
     color: #fff;
     width: 50%;
     text-align: center;
 }
 #footer .social ul li{
    
     list-style: none;
     display: inline-block;
     font-size: 1.5rem;
     margin: .5rem;
     
 }

 #footer .social ul li a{
     text-decoration: none;
 }
 .footer_center{
   
  text-align: center;
  justify-content: center;
}

 /* /////////////////////////card////////////////////////////// */

 .section_card{
   height: 80vh;
   align-items: center;
   justify-content: center;
   
 }
 .section_card_div{
   margin-top: 5rem;
 }

 .card{
  padding: 0px 0 55px;
  margin-bottom: 30px;
  background-color: #ffffff;
  text-align: center;
  overflow: hidden;
  position: relative;
  box-shadow: 20px 20px 42px #d0d0d0, -20px -20px 42px #ffffff;
  width: 100%;
 
  
}
.card .picture{
  display: inline-block;
  height: 130px;
  width: 130px;
  z-index: 1;
  position: relative;
  border-radius: 20%;
  
  
}
.card .picture::before{
  content: "";
  width: 100%;
  height: 0;
  border-radius: 50%;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  position: absolute;
  bottom: 80%;
  right: 0;
  left: 0;
  opacity: 0.9;
  transform: scale(3);
  transition: all 0.3s linear 0s;
 
}
.card:hover .picture::before{
  height: 100%;
 
}
.card .picture::after{
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color:#80bdd0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

 
}
.card .picture img{
  width: 100%;
  height: auto;
  border-radius: 50%;
  transform: scale(1);
  transition: all 0.9s ease 0s;
  
 
}
.card:hover .picture img{
  box-shadow: 0 0 0 14px #f7f5ec;
  transform: scale(0.7);

}
.card .title{
  display: block;
  font-size: 15px;
  color: #1f1b1b;
  text-transform: capitalize;
  margin: 5px 37px 0;
  
}
.card .main-content{
  margin-bottom: -19px;
}
.card .main-content .name{
  padding: 0;
  margin: 8px;
  text-transform: uppercase;
}
.card .social{
  width: 100%;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  position: absolute;
  bottom: -100px;
  left: 0;
  transition: all 0.5s ease 0s ;
 
}
.card:hover .social{
  bottom: 0;
}
.card .social li{
  display: inline-block;
}
.card .social li a{
  display: block;
  padding: 10px;
  font-size: 17px;
  color: white;
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
.card .social li a:hover{
  color: #3e3b44;
  background-color: #f7f5ec;
  transition: 0.5s;
}
.skills{
  text-align: center;
  padding: 15px;
}
.skills ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.skills ul li{
  border: 1px solid #114e58;
  border-radius: 2px;
  display: inline-block;
  font-size: 12px;
  margin: 0 7px 7px 0;
  padding: 7px;
}
.skills ul li:hover{
  background: #aabaee;
  color: #fff;
  cursor: pointer;
  transition: 0.5s;
}
.phone-box {
  display: none;
  background-color: #e0f0ff;
  padding: 8px 12px;
  border-radius: 6px;
  margin-top: 6px;
  font-size: 14px;
}

.phone-link {
  color: #007bff;
  text-decoration: none;
}


.bi-instagram{
  color: #c32aa3;
}
.bi-whatsapp{
  color:rgb(30, 139, 20);
}
.bi-facebook{
  color: #1877f2;
}
.bi-twitter{
  color: #1da1f2;
}
.bi-github{
  color: #000000;
}
.bi-instagram:hover{
  color: #c32aa2b7;
}
.bi-facebook:hover{
  color: #1876f2be;
}
.bi-twitter:hover{
  color: #1da0f2c0;
}
.bi-github:hover{
  color: #000000be;
}

/* //////////////////////////////////form////////////////////////////////// */
*{
  margin: 0;
  padding: 0;
}
.center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.main{
  width: 100%;
  height: 100vh;
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  margin-bottom: 8rem;
 
}
.login{
  width: 350px;
  height: 400px;
  background: white;
  flex-direction: column;
  position: relative;
  box-shadow: 20px 20px 42px #d0d0d0, -20px -20px 42px #ffffff;
  
}
.user{
  width: 75px;
  height: 75px;
  color: white;
  font-size: 2.5rem;
  border-radius: 50%;
  margin-bottom: 50px;
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
}
.bi-envelope-fill .bi-key-fill{
  font-size: 1.8rem;
  color: rgb(77, 77,77);
}
input{
  width: 250px;
  height: 30px;
  border: none;
  border-bottom: 2px solid #000;
  outline: none;
  margin-left: 10px;
  padding-left: 5px;
  font-size: 1rem;
}
.email, .password{
  margin-bottom: 20px;
}
.btn{
  width: 150px;
  height: 40px;
  font-size: 1.1rem;
  outline: none;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  background-color: #0093e9;
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%) ;
  color: white;
}
/* ///////////////////////////////////////media////////////////////////// */
@media screen and (max-width: 768px) {
  .section_card{
    height:160vh;
    align-items: center;
    justify-content: center;
    padding-right: 14%;
  }
  .card{
  
    width: 130% ;

  }
}

@media screen and (max-width: 500px) {
.login{
  
  width: auto;
  margin-left: 20%;
}
.email{
 
  width: 100%; 
}
.password{
  
  width: 100%; 
}
}