/*
Theme Name: fire-order
Theme URI: https:/wp-content/themes/fire-order/
Description: Fire Order Theme
Author: King Protea Digital Marketing
Template: astra
Version: 1.1
*/



/* Last Update: 2025/03/06 */



/* Preloader START */

.loader {

/* Overall Position */
    position:fixed;
    left:0px;
    top:0px;
    z-index: 9999;
     width: 100%;
    height: 100%;
    background: #CCCCCC;

/* Position to Scroll */    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

/* Logo */  
.loader-image {
    background: url('/wp-content/uploads/2025/01/001-fire-order-shield-250x250-1.png');
    background-size: cover; /* Adjusts the size of the background image */
    background-position: center; /* Centers the background image */
    width: 250px;
    height: 250px;
}

/* Text */  
.loading-text {
  color: black;
  font-size: 14pt;
  font-weight: 600;
  margin-left: 10px;
}

.dot {
  margin-left: 3px;
  animation: blink 1.5s infinite;
}
.dot:nth-child(2) {
  animation-delay: 0.3s;
}

.dot:nth-child(3) {
  animation-delay: 0.6s;
}

/* Bar */
.loading-bar-background {
  --height: 30px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 5px;
  width: 200px;
  height: var(--height);
  background-color: #6E7787 /*change this*/;
  box-shadow: #0c0c0c -2px 2px 4px 0px inset;
  border-radius: calc(var(--height) / 2);
}

.loading-bar {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  --height: 20px;
  width: 0%;
  height: var(--height);
  overflow: hidden;
  background: rgb(222, 74, 15);
  background: linear-gradient(
    0deg,
    #cc0000 0%, /*bar colour bottom*/
    #0942A1 80% /*bar colour top and thickness*/
  );
  border-radius: calc(var(--height) / 2);
  animation: loading 4s ease-out infinite;
}

.white-bars-container {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 18px;
}

.white-bar {
  background: rgb(255, 255, 255);
  background: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  width: 10px;
  height: 45px;
  opacity: 0.3;
  rotate: 45deg;
}


/* Animations */
@keyframes loading {
  0% {
    width: 0;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Preloader END */




/* Disable Mobile Animations - Delay*/

   @media all and (max-width: 768px) { 
    .o-anim-ready[class*="delay-"] {
        animation-delay: 0s !important;
        -webkit-animation-delay: 0s !important;
    }

     /* Disable Mobile Animations - Specific */
    .o-anim-ready.backInRight,
    .o-anim-ready.backInLeft, 
    .o-anim-ready.pulse,
    .o-anim-ready.fadeInLeftBig {
        animation: none !important;
        -webkit-animation: none !important;
    }


 /* Disable Mobile Animations - backInDown */
    .o-anim-ready.backInDown {
        animation: none !important;
        -webkit-animation: none !important;
    }

* {
        transition: none !important;
      /*   transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important; 
        -ms-transform: none !important; */
    } 

    
   /*  * {
        transition: none !important;
        transform: none !important;
        -webkit-transform: none !important;
        -moz-transform: none !important;
        -ms-transform: none !important; 
    } */
} 
/* Disable Mobile Animations END */