@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%;
position: absolute;

}
header .logo{
  height: 5rem;
  width: 6rem;
  position: absolute;
  margin-left: 47%;
  margin-top: 1rem;
}
header .home{
height: 2rem;
width: 2rem;
display: block;
margin-left: 4%;
margin-top: 3%;
}

section{
    direction: rtl;
    text-align: right;
    width:80%;
    height:20rem;
    margin-top: 2rem;
    background-color: var(--bgcolor);
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
    margin-left: auto;
    margin-right: auto;
    color: var(--textcolor);
  


}
.section1{
margin-top:5%;
height: 55rem;

}
section h4{

  display: block;
  margin-top: 1rem;
  margin-right: 1rem;
}
section a{
 
  display:inline-block ;
  margin-right: 2rem;
  margin-top:3rem ;
  color: var(--textcolor);
}
section a:hover{
  text-decoration: none;
  color: var(--textcolor);
}
section a p{
width:7rem ;
}

section a img {transition: all .4s;}
section a img:hover{
  transform: rotate(15deg);
}

.section2{
  height: 30rem;
}
.section3{
 height: 60rem;
}



/* responsive */


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


@media (max-width: 991.98px) { 
  .logo{display: none;}
  .section1{height: 100rem;}
  .section3 {
    height: 120rem;
  }
}



@media (max-width: 767.98px) { 
  section a{
    display: block;
   margin-top: 1rem;
   font-size: 12px;
   padding-right: 5px;
   border-right:solid 1px #4059ad;
  }
  section a img {display: none;}
  section a p{
    width:80% ;
    }
   .section1{height: 55rem;}
    .section2{
      height: 25rem;
    }
    .section3{height: 60rem;}
    .section4{
     height:25rem ;
    }
 }

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