body {
    font-family: Rubik;     font-size: 18px;
 }
 body,h3,h1,a{
        font-family: Rubik;
 }

 body h1{
    font-weight: bold;
 }

 .dark_bg {
     background-image: url('../img/header-bg.svg');
     background-color: #0c2541;
     background-position: center top;
     background-attachment: fixed;
     background-size: 100% ;
     background-repeat: no-repeat;
 }

  .footer_bg {
      background-image: url('../img/bg_main_2002.jpg');
      background-color: #d7d7d7;
      background-position: center top;
      background-attachment: fixed;
      background-size: 500 130vh;
      background-repeat: no-repeat;
  }

  .nav_bg {
      font-family: Rubik;
      font-weight: bold;
      font-size: 16px;
  
  } 
.header_bg {
    background-image: url('../img/card3.png');
    background-position: right top;
    background-repeat: no-repeat;        
    background-color:#fff;

     font-family: Rubik;
    font-weight: bold;
    color: rgb(255, 153, 0);  
    font-size: 22px;
    border-left: 10px solid #f68e36;
}

.header-bg {
    background-image: url('../img/bg-hd.png');
    background-position: left center;
    background-repeat: no-repeat;
font-size: 20px;
font-family: Tajawal;
    color: rgb(255, 153, 0);}

.header a {
    color: #ff8000;
    font-size: 18px
}

.header a:hover {
    color: rgb(18, 68, 206)
}

.left-side h3 {
    padding: 8px;
    text-transform: uppercase;
    position: relative;
    border-bottom: 1px solid #e8e8e8;
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 30px;
    padding-bottom: 14px;
    color: rgb(255, 153, 0);
    font-family: Rubik
}

.left-side h3::after {
    width: 40px;
    height: 2px;
    position: absolute;
    content: "";
    top: auto;
    bottom: -1px;
    left: 0;
    background-color: rgb(218, 115, 13);
    right: 0;
}

ul {
     line-height: 1.2cm;
}
 
.loader {
    width: 50px;
    height: 65px;
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    width: 16px;
    height: 16px;
    background: #ffb700;
    border-radius: 50%;
    animation: bounce 2s linear infinite;
}

.loader::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 48px;
    width: 48px;
    background: #fff;
    border-radius: 4px;
    animation: rotate 2s linear infinite;
}

@keyframes bounce {

    0%,
    50%,
    100% {
        transform: translate(-50%, 0px);
        height: 20px;
    }

    20% {
        transform: translate(-25%, 85px);
        height: 28px;
    }

    25% {
        transform: translate(-25%, 110px);
        height: 12px;
    }

    70% {
        transform: translate(-75%, 85px);
        height: 28px;
    }

    75% {
        transform: translate(-75%, 108px);
        height: 12px;
    }
}

@keyframes rotate {

    0%,
    50%,
    100% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(90deg)
    }

    75% {
        transform: rotate(-90deg)
    }
}