/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/

@media screen and (max-width: 490px) {
   #topbar .amiri {
      font-size: 18px;
   }
}

@media screen and (max-width: 410px) {
   #topbar .amiri {
      font-size: 16px;
   }
}

@media screen and (max-width: 372px) {
   #topbar .amiri {
      font-size: 14px;
   }
}

@media screen and (max-width: 346px) {
   #topbar .amiri {
      font-size: 12px;
   }
}

@media screen and (max-width: 321px) {
   #topbar .pe-2 {
      display: none;
   }
}

#topbar {
   height: 130px;
   padding: 0;
   font-size: 14px;
   transition: all 0.5s;
   overflow: hidden;
   color: rgba(1, 91, 31, 0.69);
   z-index: 996;

}

#topbar .container::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-image: url('../img/topbar/alg_dra_tb_r.jpg');
   background-size: cover;
   background-repeat: no-repeat;
   z-index: -1;
}

[dir='ltr'] #topbar .container::before {
   transform: scaleX(1);
}

[dir='rtl'] #topbar .container::before {
   transform: scaleX(-1);
}


#topbar .container {
   position: relative;
   /* Other styles for your container */
}


#topbar.topbar-scrolled {
   top: -18%;
}