/* ----- Default styles (Desktop) -----
   Already written by you
*/


/* ----- Tablet (768px and down) ----- */



/* ----- Mobile (below 768px) ----- */
@media (max-width: 1024px) {
 body, html{

    overflow-x: hidden;
  }
  .heads{
    
  }

  .high{
    display: none;
  }
  .row1{
    flex-direction: column;
    
    align-items: center;
    p{
        transform: rotate(0deg);
        margin-bottom: 50px;
    }
    h1{
        font-size: 2em;
        margin-bottom: 50px;
    }
   
    
  }
   .card-container{
    
        padding: 20px;
        height: 500px;
        overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
        display: none !important;
        
    }
    .card{
        position: relative;
        margin-right: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);;
    }
    .card:nth-child(1) {
    top: 0px;
    left: 0px;
}
.horizontal-scroll-section {
    display: block;
  
}

.card:nth-child(2) {
    top: 0px;
    left: 0px;
}

.card:nth-child(3) {
    top: 0px;
    left: 0px;
}

.card:nth-child(1) {
    transform: rotateY(0deg);
    z-index: 1;
}

.card:nth-child(2) {
    transform: rotateY(0deg);
    z-index: 1;
}

.card:nth-child(3) {
    transform: rotateY(0deg);
    z-index: 1;
}
.card:nth-child(1):hover {
    transform: translate3d(0px, 0px, 0px) rotateY(0deg) rotateX(0deg);
}

.card:nth-child(2):hover {
    transform: translate3d(0px, 0px, 0px) rotateY(0deg);
}

.card:nth-child(3):hover {
    transform: translate3d(0px, 0px, 0px) rotateY(0deg);
}

.download{
    
    height: auto;
    padding: 2em;
    flex-direction: column;

    p{
        font-size: 2em;
    }


}
  
.imgcont{
    position: relative;
    height: 500px;
    img{
        display: none;
    }

    button{
        margin-top: 30px;
        position: relative;
        top: 0%;
        right: 0%;
        padding: 10px 30px;
    }
}
.smn{
    font-size: .8em;
    margin-bottom: 30px;
}


.imgs{
    flex-direction: column;
    padding: 1em;

    h1{
        width: 95%;
        font-size: 2.2em;

        p{
            font-size: 12px;
        }
    }
}


footer{
    flex-direction: column;
}
.frow{
    margin-right: 0;
}

.a3{
    p{
        display: none;
    }
}

.comp{
    display: block;
    text-align: center;
    font-size: 10px !important;
}
}