@media (max-width: 1199.98px) {.mobile{display: none;} }


@media (max-width: 991.98px) {  header img{display: none;} 
.bike{display: none;}
.card{
     margin-right: 60%;
     margin-top: 7rem;
 }
.card h3 {
  font-size: 1.3rem;
    margin-right: auto;
    margin-left: auto;
  }
  .card h4{ 
      font-size: 1rem;
    margin-top: 1rem;
    margin-right: auto;
    margin-left: auto;
  }

}

/* @media (max-width: 767.98px) {
    } */

@media (max-width: 575.98px) {
    
    :root{
      --bgcolor: #eff2f1 ;
      --firstcolor: #4059ad;
      --secondcolor: #97d8c4;
      --thirdcolor: #f4b942;
      --textcolor: #424242;
      --border-radius: 5px;
      
      
    }
    
    /* header styles */
header{display: none;}
.mobile{display: block;}
.mobileheader{
    height: 3rem;
    background-color: #090947;
    background-image: linear-gradient(315deg, #090947 0%, #5a585a 74%);
    }



.mobileheader img{
      height: 3rem;
      margin-right: 42%;

}


.mobile-bg-img{
    height: 11rem;
    z-index:-100;
    position: absolute;

}

.mobile h6{
    margin-right: 40%;
    margin-top: 3rem;
}



.mobile .title2{position: absolute;
    margin-right: 40%;
    margin-top: 1rem;
    
}
    /* body styles */
body{
       
       
 height: 100vh;
 direction: rtl;
 text-align: right;
 color: var(--textcolor);
 background-color:#f0f0ee ;
  }

.quote{
    text-align: center;
    height: 2rem;
    margin-top: 6.8rem;
    background: linear-gradient(to right, #ffffff 0%, #818398 93%);
   }








.mobile a{
        color: var(--bgcolor);
        text-align: center;
        
      }


.mobile a:hover{text-decoration: none;}


.mobile a p{
  position: relative;
  margin-top: 0;}


.mobile a div{
       height: 3rem;
       background-color: #090947;
       background-image: linear-gradient(315deg, #090947 0%, #5a585a 74%);
       
       border: solid var(--bgcolor) 2px;

}



.bg-img{
    
      display: none;
    }
.card{
       display: none;
     }
    
.bike{ 
      display: none;
     }
     }