@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%;

}
html, body {
  width: 100%;
  overflow-x: hidden;
}

ul,li{
  margin: 0%;
  padding: 0%;
}
a {
  text-decoration: none;
  color: inherit;
}
.containerme{
  width: 75%;
  margin: auto;


}
.container1me{
  display: flex;
  width: 75%;
  margin: auto;
  

}

/* ////////////////////////////////header////////////////////////////////// */
header{
  background-color: #ffffff;
  /* height: 13vh;
  background-color: rgb(255, 4, 4);
  font-size: 1px; */


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

.background1{
   background: rgb(0,1,6);
  background: linear-gradient(183deg, #6638d1 0%, #38016b 50%, #604ec5 100%);
  height: 6vh;
  justify-content: end;
  font-size: 14px;

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

  display: flex;
}




.background2{
  position: relative;
  background-color: #0b0e5c;
  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  #0b0e5c;
  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: #0b0e5c;
  display: inline-block;
}

ul li:hover ul {display: block;}

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



nav a{
  color:  #0b0e5c;
 

}
nav button{
  color: #0b0e5c ;
  
}
.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:  #0b0e5c;
  margin-bottom: .5rem;
  margin-right: 1rem;
 
  
}
.Design_li:hover{
  background: linear-gradient(183deg, rgb(46, 58, 110) 0%, rgb(220, 228, 247) 50%,  rgb(46, 58, 110) 100%);
 
}
/* ////////////////////////////////slider////////////////////////////////// */
#carouselExampleDark{

  margin-top: 5.8rem;
}

/* ////////////////////////////////section1////////////////////////////////// */


.section1{
    background-image: url(../image/worp-process-step.png);
    height: 50vh;
    width: 100%;
   background-position: center;
    background-repeat: no-repeat;   
       
}
.section1 p{
  color: #06084b;
  
}
#section1-box-text p{
  color: #06084b;
}
.section1-respansiv-item{
  margin-top: 5rem;
  
}
/* ////////////////////////////////item////////////////////////////////// */
.item{
    background: rgb(0,1,6);
    background: linear-gradient(183deg, #8f7efc 0%, #B2A5FF 50%, #8b78fa 100%);
    width: 130px;
    height: 130px;
    border-radius: 100px;
    cursor: pointer;
  }
  .item img{
    position: relative;
    padding-top: 35px;
    padding-bottom: 10px;
    padding-right: 35px;
    padding-left: 13px;
  }


.item img:hover {
    animation: anim .6s linear 1;
}

@keyframes anim {
    100% {
        transform: rotate(360deg);

    }
}
.box{
  background-color: #06084b;

    width: 95px;
    
}
.item::before{
    content: '';
    border: 2px dashed #0b0e5c;
    position: absolute;
    width: 140px;
    height: 140px;
    background: linear-gradient( to right,#f1f1f3,#00000000,#00000000,#f6f6f8);
    border-radius: 100px;
    z-index: -1;
    transition: all .8s;
    
  }
.item:hover::before{
    transform: rotate(270deg);
   

}

#marginright{
    top: 40%;
    right: 5%;
   height: 30%;
 
  
}
#marginright2{
  top: 140%;
 
 
}

  /* ////////////////////////////////section2////////////////////////////////// */
.section2{
  height: 120vh;


}
.section2 p{
  color: #06084b;
}

.designplatform p{
  color: dimgray;
}


.boxThumbnail div{
  margin: 20px;
}
.boxThumbnail a{
  color: black;
  cursor: pointer;
}
.taga{
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;
  cursor: pointer;
}
.taga a{
  margin: 10px;
}
/* ////////////////////////////////Thumbnail1////////////////////////////////// */
.Thumbnail1{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: #04032288;
}
.Thumbnail1 img{
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
}
.Thumbnail2{
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background: rgb(0,1,6);
  background: linear-gradient(183deg, #8f7efc 0%, #B2A5FF 50%, #8b78fa 100%);

}
.Thumbnail2 img{
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
}

#tto{
  background-image: url(../image/Untitled-6.png);
  background-size: contain;
 background-position:center ;
  background-repeat: no-repeat;
  margin-right: 1%;
  width: 100%

 ;

}


  
/* .margin-left{
  
} */

.element {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 700px;
}






  
  /* ////kaaaaaaaaaaaaaaaaaaaaaaaaaaaard///// */
  /* <!-- ..................................................section3.............................................................................. --> */

  #section3{
    
    height: 90vh;
 
    
  }
  #section3-box-text{
    text-align: center;
    margin-top: 10rem;
    padding: 1rem 0;
  }
  #section3-box-text p{
    color: #06084b;
  }
  .containercard {
    padding: 0rem 8rem;
    display: flex;
    width: 100%;
    margin-bottom: 10%;
    justify-content: space-between;
    

}
.containercard-card {
    width: 250px;
    height: 300px;

    position: relative;
    cursor: pointer;
    

}

.containercard-card .containercard-content {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.089);
    backdrop-filter: blur(20px);
    border: 1px solid #06084b;
    color:#06084b;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 30px rgb(0, 0, 0, 0.055);
    transition: all .4s;
    border-radius: 60px;
  
    
}

.containercard-card .containercard-content p {
    font-size: 0.8em;
    padding: 0.3em 1.5em;
    text-align: center;
}


.containercard-card:hover .containercard-content {
    color: rgb(36, 36, 36);
}
.containercard-card:hover .containercard-content a {
  color: rgb(36, 36, 36);
}

.containercard-card::before,
.containercard-card::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50%;
    background: #B2A5FF;
    z-index: -20;
    transition: all .4s;
    
}

.containercard-card::before {
    top: 0;
    right: 0;
}

.containercard-card::after {
    bottom: 0;
    left: 0;
    background: #c8bef888;
    
}

.containercard-card:hover::before {
    width: 50px;
    height: 50px;
    transform: translate(20px, -20px);
    border-radius: 50%;
}

.containercard-card:hover::after {
    width: 100px;
    height: 100px;
    transform: translate(-20px, 20px);
    border-radius: 50%;
}
.containercard-content button{
  width: 9rem;
  height: 2rem;
  border-radius: 3rem;
  background: rgba(37, 4, 102, 0.089);
  backdrop-filter: blur(20px);
  border: 1px solid #06084b;
  box-shadow: 0 0 30px rgba(14, 1, 73, 0.055);
}
.containercard-content button a{
  text-decoration: none;
  color: #06084b;
}
.containercard h2{
  font-size: 1.2rem;
 
}