.sction {
    background-image: url(../images/milk.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size:contain;
    min-height: 99vh;
    overflow: hidden;
    /* padding-top: 20vh; */
    background-attachment: fixed;
    border-radius: 2rem !important;
    padding: 1rem 3rem;
}
@media only screen and (max-width: 1199px) {
    .sction {
        padding: 1rem;
    }
}
@media only screen and (max-width: 768px) {
    .sction {
        background-size:cover;
        border-radius: 0rem !important;
        min-height: 100vh;
    }
  }
.loginbg {
    border-radius: 2rem !important;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    color: #222;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* Container styles */
.scrolling-text-container {
    background-color:transparent;
    border-radius: 4px;
    overflow: hidden;
}

/* Inner container styles */
.scrolling-text-inner {
    display: flex;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 0;
}

/* Text styles */
.scrolling-text {
    display: flex;
}

.scrolling-text-item {
    padding: 0 30px;
}

/* Apply the animation to the text items */
.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

/* Pause the animation when a user hovers over it */
.scrolling-text-container:hover .scrolling-text-inner>div {
    animation-play-state: paused;
}

/* Setting the Animation using Keyframes */
@keyframes scroll-left {
    0% {
        transform: translateX(0%);
    }

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

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }

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