@import './bootstrap.min.css';
@import './all.min.css';



*{
margin: 0;
padding: 0;
box-sizing: border-box;}

:root{
  --bgcolor: #eff2f1 ;
  --firstcolor: #4059ad;
  --secondcolor: #97d8c4;
  --thirdcolor: #f4b942;
  --textcolor: #424242;
  --border-radius: 5px;
  
  
}

/* header styles */
header img{
    width: 100%;
    position: absolute;
}
header ul{
  position:absolute;
  margin-top:3rem;
  margin-right: 4rem;
}
header ul li{
  display: inline ;
  margin-right: 2rem;

}
header ul li a {
  color: var(--bgcolor);
  font-size: 1.2rem;
  transition: all .5s;
}
header ul li a:hover{
  text-decoration: none;
  color: var(--secondcolor);
}

header .logo{
  height: 5rem;
  width: 6rem;
  position: absolute;
  margin-right: 84%;
  margin-top: 2rem;
}
/* body styles */
 body{
   
   
   height: 100vh;
   direction: rtl;
   text-align: right;
   color: var(--textcolor);
   background-color:#f0f0ee ;
 }

 .bg-img{
  height: 100vh;
  position: absolute;
  z-index:-100;
}
 .card{
   width: 47%;
   height: 70%;
   background:linear-gradient(#eff2f1,white);
   position: absolute;
   box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.3);
   border-radius: var(--border-radius);
   margin-right: 45%;
   margin-top: 10%;
   transition: all .3s ;
   opacity: 80%;
 }

 .card:hover {
  margin-top: 9.5%;
  box-shadow: 0 0 3rem 0 rgba(0, 0, 0, .5);
 }
 
 .card h3 {
   color: var(--textcolor);
   margin-top: 4rem;
   margin-right: auto;
   margin-left: auto;
 }
 .card h4{ 
   margin-top: 1rem;
   margin-right: auto;
   margin-left: auto;
 }
 .card h5{
   font-family: none;
   margin-top: 3rem;
   margin-right: auto;
   margin-left: auto;
 }


 .button1{
   width: 6rem;
   height: 4rem;
   border-radius: var(--border-radius);
   border: .5px #b8c6db solid;
   position:relative;
   background-color: #b8c6db;
background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 74%);
   color: var(--textcolor);
   transition: .3s;
   margin-top: 3rem;
  
  
   
 }
 .button1:focus{outline: none;
background-color: var(--bgcolor);}
 .button1:hover{
  margin-top: 2.8rem;
   -webkit-box-shadow: 0px 14px 17px -9px rgba(0,0,0,0.79), 0px 1px 13px -17px rgba(0,0,0,0.35); 
   box-shadow: 0px 14px 17px -9px rgba(0,0,0,0.79), 0px 1px 13px -17px rgba(0,0,0,0.35);
  }


 .bike{
   height: 15rem;
  margin-top: 23rem;
  margin-right: 60rem;
  animation: bike 3s;
  animation-fill-mode:forwards;
  display: none;
 }

 @keyframes bike {
  0% {margin-right:60rem; }
  100% {margin-right: 33rem;}
  }

  .mobile{display: none;}