@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 img{
    width: 100%;
 
  
  }
  
 body{
   height: 100vh;
   direction: rtl;
   text-align: right;
   color: var(--textcolor);
 }

.card{
  
  position:absolute;
  width: 50%;
  height: 70vh;
  background-color:var(--secondcolor);
  margin-top: 10%;
  margin-right: 25%;
  opacity: 60%;
  

}

.card2{
    
  position:absolute;
  width: 40%;
  height: 50vh;
  background-color:var(--bgcolor);
  margin-top: 15%;
  margin-right: 30%;
 color: var(--textcolor);
 transition: all .5s;
}
.card2:hover{ margin-top:14.5%;box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);}


.card2 h5{

  margin-right: 6rem;
  margin-top: 4rem;
}

.socialmedia{
  margin-right:1rem;
  margin-top: 10%;
}
.socialmedia img{
  margin-right: 3rem;
  height: 4rem;
}


/* responsive */




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

@media (max-width: 1199.98px) {
  .socialmedia img{
    margin-right: 2.5rem;
    height: 2.5rem;
  }
  .card2 h5{

    margin-right: 2rem;
    margin-top: 4rem;
  }
  
}

@media (max-width: 991.98px) {
  .socialmedia{margin-right: .5rem;
  margin-top: 3rem;}
.socialmedia img{
  margin-right: 2rem;
  height: 2rem;
}
.card2 h5{
font-size:15px;
margin-top:4rem;

} }
/* tablet */
@media (max-width: 767.98px) {
  .card{
 
  width: 60%;
  height: 70vh;
  background-color:var(--secondcolor);
  margin-top: 10%;
 
  opacity: 60%;
  

  }
  .card2{
    
    position:absolute;
    width: 40%;
    height: 50vh;
    margin-top: 15%;
    margin-right: 30%;
  }
  .socialmedia{margin-right: .5rem;
    margin-top: 3rem;}
  .socialmedia img{
    margin-right: 2rem;
    height: 2rem;
  }
  .card2 h5{
 display: none;
  }
}


/* mobile */
@media (max-width: 575.98px) { 
  .card{ display: none;}
  .card2{ width:70%;
  margin-right: 15%;
  margin-top: 50%;}
  .card2 img{
    height:2rem;
    display: block;
    margin-top: 1rem;
    margin-right: 40%;
  }



 }