:root {
 --bs-body-font-size: 1.4rem;
 --bg-prussian-blue: #003153;
 --smaller-font-size: 0.84rem;
}


.bg-prussian-blue {
 background-color: var(--bg-prussian-blue) !important;
}

.smaller-font-size {
 font-size: var(--smaller-font-size) !important;
}


#hero .hero-illustration {
  transform: rotate(-30deg) translateX(-50px) scale(1.4);
}

#customers {
 .gallery {
 position: relative;
 white-space: nowrap;
 display: inline-block;
 animation: slidein 10s linear infinite;
 &:hover {
 animation-play-state: paused;
 }
 img {
 color: transparent;
 max-width: 100%;
 height: auto;
 filter: grayscale(1);
 }
 }
}
@keyframes slidein {
from {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}

#services {
  height:50vh;
}

#features {
  padding-top: 25rem ;
}

 .success {
        background-color: #d4edda;
        color: #155724;
        border-bottom: 2px solid #c3e6cb;
    }

    .error {
        background-color: #f8d7da;
        color: #721c24;
        border-bottom: 2px solid #f5c6cb;
    }

    #scrollTop.active {
right: 0px;
}
#scrollTop {
right: -1000px;
left: auto;
bottom: 25px
}

#loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white; 
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; 
        }