@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//////////////////////////////// */
:root{
  --primary-color: #7854f7;
  --dark-color: #181131;
  --accent-color:#d57d00;
  --light-color:#f7f7f7;
  --secaondary-color:#515151;
  --pink-color:rgb(255,20,147);
  --Orange-colo:#f4511e;


}

.back_header{
  background-image: url(../image/blog-back-wave.png);
  width: 100%;
  height: 100vh;
  background-color: rgb(244, 241, 250);
  background-position: bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  
}
.blogbigc{
  position: absolute;
  top: 0%;
}

.blog-dot{
  position: absolute;
  right: 20%;
  top: 88%;
}
.blog-dotsm{
  position :absolute;
  right: 80%;
  top: 30%;
  
}
.text_center{
  display: flex;
  }
.main{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4vh;
  margin-top: 18rem;
  
}
.main h1{
  margin-bottom: 20%;
  font-size: 3.5rem;
  font-weight: 40;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: rgb(244, 216, 247);
  text-shadow: 1px 1px 1px #d2b7f7,
  1px 2px 1px #d7a5f3,1px 3px 1px #cb9ee9,
  1px 4px 1px #6b5777,1px 5px 1px #45364e,
  1px 6px 1px #794985,1px 7px 1px #9a69a3,
  1px 8px 1px #b70ebd,1px 9px 1px #e227e2,
  1px 20px 6px rgba(160, 33, 172, 0.781),
  1px 22px 8px rgba(127, 89, 153, 0.4),
  1px 24px 10px rgba(42, 3, 54, 0.5);
}

.main_text{
 line-height: 1.5rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30vh;
  
  
}


/* ///////////////////////////media////////////////////////// */
@media screen and (max-width: 768px) {
  body{
    background-color: #ffffff;
    
   }
  .back_header{
    background-image: url(../image/blog-back-wave.png);
    width: 100%;
    height: 100vh;
    background-color: rgb(244, 241, 250);
    background-position: bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
  .main_text{
    height: auto;
    margin-top: 7.2rem;
    background-image: url(../image/blog-back-wave.png);
    width: 100%;
    height: 100vh;
    background-color: rgb(244, 241, 250);
    background-position: bottom;
    background-repeat: no-repeat;
    background-attachment: fixed
  }

  .main{
    margin-top: 13rem;
  }
  #footer{
    margin-top: 22rem;
    margin-bottom: 0%;
  }
  .blog-dotsm{
   display: none;
  }
  .blog-dot{
    display: none;
  }
}