@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300&display=swap');
*{
   margin: 0;
   padding: 0;
   font-family: 'Cairo', sans-serif;
}
:root {
   --bgcolor: #240019;
}
body {
   width: 100%;
   height: 120vh;
   font-family: system-ui;
   background-color: var(--bgcolor);
   range: none;
}
::-webkit-scrollbar {
   width: 10px;
   height: 20px;
}
::-webkit-scrollbar-thumb {
   background: linear-gradient(
       to bottom, #ff850a, #ff3474
   );
}
::-webkit-scrollbar-track {
   background-color: #474747;
}
section {
   background: url(../img/image.png);
   width: 100%;
   height: 110vh;
   direction: rtl;
   margin: 15px 0;
}
h1 {
   color: #fff;
   text-align: center;
   padding: 15px;
}
.home {
   display: grid;
   grid-template-columns: repeat(2, auto);
   justify-content: space-evenly;
}
.card {
   margin: 20px 0;
}
.icon {
   display: flex;
   justify-content: space-evenly;
   position: relative;
   top: 25px;
}
.icon a {
   text-decoration: none;
   color: #ffff;
   margin: 10px;
   font-size: 20px;
}
.icon a i {
   margin: 10px;
}

@media (max-width: 700px){
   .home {
      grid-template-columns: repeat(1, auto);
   }  
}
@media (min-width: 1000px) and (max-width: 1440px){
   .home {
      grid-template-columns: repeat(3, auto);
   }  
}
@media (min-width: 1440px) and (max-width: 2560px){
   .home {
      grid-template-columns: repeat(4, auto);
   }  
}

@media (min-width: 2561px) {
   .home {
      grid-template-columns: repeat(5, auto);
   }  
}