$accent: #f8e013;
$primary: #202020;
$white: #F9F9F9;
.container{
width: 100%;
height: 100vh;
padding: 60px 0;
background: $white;
display: grid;
place-items:center;
}
.loader{
width: 70px;
height: 70px;
}
/* ------Wheels animation---------- */
.wheel{
fill:$primary;
}
.wheel-details{
fill:$white;
}
.back-wheel{
transform-origin: 18px 56px;
animation: wheel 300ms linear infinite;
}
.front-wheel{
transform-origin: 59px 56px;
animation: wheel 300ms linear infinite;
animation-delay: 200ms;
}
@keyframes wheel{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/* ------Lines styles---------- */
.line{
stroke:$primary;
stroke-linecap:round;
stroke-linejoin:round;
stroke-width:1.6px;
}
.line-1{
stroke-dasharray: 20% 80%;
animation: line-1 400ms linear infinite;
}
.line-2{
stroke-dasharray: 10% 90%;
animation: line-1 400ms linear infinite;
animation-delay:200ms;
}
.line-floor{
stroke-dasharray: 60% 10%;
stroke-dashoffset:65;
animation: line-2 800ms linear infinite;
}
/* ------Lines animation---------- */
@keyframes line-1{
from{
stroke-dashoffset: 0;
}
to{
stroke-dashoffset: -80;
}
}
@keyframes line-2{
from{
stroke-dashoffset: 0;   
}
to{
stroke-dashoffset: -56;   
}
}
/* ------Car styles---------- */
.car{
transform-origin:center center;
animation: car 600ms linear infinite;
}
/* ------Car animation---------- */
@keyframes car{
0%{
transform:rotate(0deg);
}
50%{
transform:rotate(-1deg) translateY(1px);
}
100%{
transform:rotate(0deg);
}
}
.cloud{
fill:$primary;
opacity:.1;
animation: cloud 900ms linear infinite;
}
@keyframes cloud {
from{
transform: translateX(40%);
}
to{
transform: translateX(-90%);
}
}
body {
background-color: #ECF8F9;
}
h1 {
font-size: 25px;
color: #1D267D;
}
.navbar,  h2, accordion-button, accordion-body {
font-family: 'Poppins', sans-serif;
}
video {
height: 300px;
width: 600px;
}
img {
border-radius: 20px;
}
.imgone {
border-radius: 1px;
}