html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

header {
    background-image: url('/img/backgound.jpg');
    text-align: center;
    width: 100%;
    height: 450px;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 85% 85% / 30%;
    cursor: pointer;
    -webkit-animation: slidein 30s;
    animation: slidein 30s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

@keyframes slidein {
    from {
        background-position: top;
        background-size: 2000px;
    }

    to {
        background-position: -5px 0px;
        background-size: 2000px;
    }
}

header .overlay {
    width: 100%;
    height: 100%;
    padding: 20px;
    color: #FFF;
    text-shadow: 1px 1px 1px #333;
}



.description {
    color: #141212;
    font-size: large;
    text-align:left;
}

@media (max-width: 576px) {
    .description {
        color: #141212;
        font-size: large;
        text-align: center;
    }
}

.descriptionfirstword {
    color: #9e30e1;
    background-color: transparent;
    padding-left: 0;
}

#freeShipping {
    background-image: url('/img/backgoundFreeShipping.jpg');
    text-align: center;
    height: 300px;
    background-position: center;
    background-color: #000030;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
}

.console {
    background: #e5eef566;
    color: black;
    padding-top: 15px !important;
    margin-top: 25px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: 100%;
}


.consolewhite {
    background: white;
    color: black;
    font-size: 14px;
    margin-right: auto !important;
    margin-left: auto !important;
    border-radius: 4px;
    box-shadow: 3px 3px 5px lightgrey;
    width: 95%;
}

#ourProducts {
    white-space: nowrap;
    overflow: hidden;
    padding: 16px;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ed82d0' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ed82d0' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}


.split-text-container {
    display: flex;
    font-size: 35px;
    font-weight: #333;
    text-transform: uppercase;
    color: black;
    overflow: hidden;
    text-align: center;
    padding: 16px;
}

.text-part {
    display: inline-block;
    position: relative;
    transform: translateX(0);
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;

}

    .text-part.left {
        transform: translateX(-200%);
        animation-name: slide-in-left;
        padding-right:20px;
    }

    .text-part.right {
        transform: translateX(200%);
        animation-name: slide-in-right;
    }

@keyframes slide-in-left {
    0% {
        transform: translateX(-200%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        transform: translateX(200%);
    }

    100% {
        transform: translateX(0);
    }
}