.free-shipping-bar {width: 100%; margin-top: 12px;}
.free-shipping-bar-progress-wrapper {position: relative; display: flex; align-items: center;}
.free-shipping-bar-content .message {text-align: center; font-weight: 300; font-size: 16px;}
.free-shipping-bar-content .free-shipping-bar-progress {position: relative; height: 40px; display: flex; align-items: center; width: 0%;}
.free-shipping-bar-content .free-shipping-bar-progress-fill {background-color: #006c67; border-radius: 100px; width: 100%; height: 8px;}
.free-shipping-bar-content .free-shipping-bar-progress-fill.striped {background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px; animation: moveFreeShippingBar 10s linear infinite;}
.free-shipping-bar-content .free-shipping-bar-progress-empty {width: 100%; height: 8px; position: absolute; background: #eee; border-radius: 100px;}
.shipping-bar-truck {width: 30px; height: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; border: 1px solid var(--bg-shipping-bar); background: #fff; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.shipping-bar-truck i {color: var(--bg-shipping-bar); display: flex; font-size: 15px;}

@keyframes moveFreeShippingBar {
	0% {background-position: 0 0;}
	100% {background-position: 400px 0;}
}

@media (max-width: 991px) {
	.free-shipping-bar-content .message {font-size: 14px;}
}