body{
    background-color: #fafafa;
    font-family:Arial, Helvetica, sans-serif; 
    max-width: 2000px;
}
.animated-red-gradient { 
    background: linear-gradient(45deg, #d30007, #f32f2f, #c40000, #ff2323, #f93232);
    background-size: 300% 300%;
    animation: metallicGradientMove 8s linear infinite;
}
.text-outline {
    color: transparent;
    -webkit-text-stroke: 1px #f32f2f; 
}
.change-hover{
    opacity: 88%;
    transition: opacity 0.2s ease;
}
.change-hover:hover{
    opacity: 100%;
    transition: opacity 0.2s ease;
}
@keyframes metallicGradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
::-webkit-scrollbar {
  width: 10px;
}
@media (max-width: 992px) {
  ::-webkit-scrollbar {
    width: 0px;
  }
}    
::-webkit-scrollbar-track {
  background: #ff383f2d;
}
::-webkit-scrollbar-thumb {
  background: #c10007;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff; 
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  position: relative;
  width: 80px;
  height: 80px;
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  border: 8px solid transparent;
  border-top-color: #c10007;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: spin 1.2s ease-in-out infinite;
}
.loader::after {
  border: 8px solid transparent;
  border-bottom-color: #c10006ab;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  animation-direction: reverse;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}