nav{
    background-color: #2323239d;
    z-index: 999;
    position: fixed !important;
    width: 100%;
    /* height: 10vh; */
  
 }
 nav a{
    color: white !important;
    
 }
nav a:hover{
    text-decoration: underline;
    text-decoration-color:#7632fe;
    text-decoration-thickness: 2px;
    text-decoration-skip-ink: auto;
  
}
nav img{
    width:30%;
}
.blog:hover .plogPage{
    display: block !important;
    visibility: visible !important;
}


.home{
    background-image: url(../imges/background.webp);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    background-position: center;
    position: relative;
   
}
.layer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2323239d;
   color: white;

}


.layer2 {
    height: 100%;
    width: 100%;
    background-color: #171717d0 !important;
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    transform: translateX(-100%);
    transition: transform .8s ease-in-out;
    
}

.layers h3{
      transition: color .8s ease;
}
.layers:hover .layer2 {
    transform: translateX(0);
}
.layers:hover h3{
    color:white;
 
}
.layer3{
    top:100%;
    /* background-color: #1e1d1e78; */
    width: 100%;
    height: 100%;
}
.layers:hover .layer3{
    top:0;

}
/* .imgesWork{
    width: 90%;
    margin-top: 5%;
} */

.textLayer{
    
    color:white;
    top:100%;
    width: 100%;


}
.layers:hover .textLayer{
    top:30%;
    transition: all .5s ;
    
 
}
.icons div{
    width: 40px;
    height: 40px;
    background-color: #7632fe;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
}
.works{
     box-shadow: inset 0 4px 3px rgba(240, 212, 230, 0.2);
}

.pLayerr:hover .gemIcon{
    color: #25bca6;
    transition: all 1s ;
    scale: 1.2;
}
.layerss:hover{
    color: white;
    transition: all 1s ;
  

}
.layerss .layer2{
    z-index: -1;
   
}
.layerss:hover .layer2{
    top:0;
    left:0;
    background-color: #2c2928;
    transition: all 1s ;
  animation: move 1.5s ease-in-out alternate;
    
 
}
@keyframes move {
  0%{    left:-100%; }
  50% {     left:0%; }
  100% {     left:-100%; }
}


.chooseUs{
    background-color: #E8E8E8;
}

.background2{
    background-image: url(../imges/background2.webp);
       height: auto;
    background-attachment: fixed;
}

.layerr {
    height: 100%;
    width: 100%;
    background-color: #2c2928;
    z-index: -1;
    top: 0;
    left: 0;
    position: absolute;
    transform: translateX(-100%);
    transition: transform .8s ease-in-out;
    
}

.pLayerr{
      transition: color .8s ease;
}
.pLayerr:hover .layerr {
    transform: translateX(0);
}
.pLayerr:hover{
    color:white;
 
}


@keyframes move {
  0%{    left:-100%; }
  50% {     left:0%; }
  100% {     left:-100%; }
}
.btns{
    color: #25bca6;
    border: 2px solid #25bca6 ;
    border-radius: 3px;
    padding: 5px;
}
  
.background3{
        background-image: url(../imges/background3.webp);
       height: auto;
    background-attachment: fixed;
}









































/* Extra */
@media only screen and (max-width: 600px) {
    nav img{
    width:30%;
    

}
.child img{
    width: 90%;
}
}
/* Small devices  */
@media only screen and (min-width: 600px) {

}

/* Medium devices */
@media only screen and (min-width: 768px) {
        nav img{
    width:20%;
}
.background3{
    height: 50vh;
}


}

/* Large devices  */
@media only screen and (min-width: 992px) {
        nav img{
    width:8%;
}
.background2{
    
    height: 30vh;
   
}

}

/* Extra large  */
@media only screen and (min-width: 1200px) {

}