.ivr {
    position: absolute;
    content: "";
    height: 60px;
    background-color: var(--color-green-950);
    width: 20%;
    bottom: 0;
    right: 0;
    border-top-left-radius: 30px;

    &:before,
    &:after {
        position: absolute;
        content: "";
        width: 30px;
        aspect-ratio: 1;
        background: radial-gradient(circle 30px at top left,
                #0000 98%,
                var(--color-green-950)) top left;
    }

    &:before {
        bottom: 0;
        left: -30px;
    }

    &:after {
        right: 0;
        top: -30px;
    }
}

.ivt {
    position: absolute;
    content: "";
    height: 60px;
    background-color: var(--color-green-950);
    width: 25%;
    top: 0;
    right: 0;
    border-bottom-left-radius: 30px;

    &:before,
    &:after {
        position: absolute;
        content: "";
        width: 30px;
        aspect-ratio: 1;
        background: radial-gradient(circle 30px at bottom left,
                #0000 98%,
                var(--color-green-950)) bottom left;
    }

    &:before {
        top: 0;
        left: -30px;
    }

    &:after {
        right: 0;
        bottom: -30px;
    }
}

.ivtl {
    position: absolute;
    content: "";
    height: 60px;
    background-color: var(--color-green-950);
    width: 15%;
    top: 0;
    left: 0;
    border-bottom-right-radius: 30px;

    &:before,
    &:after {
        position: absolute;
        content: "";
        width: 30px;
        aspect-ratio: 1;
        background: radial-gradient(circle 30px at bottom right,
                #0000 98%,
                var(--color-green-950)) bottom right;
    }

    &:before {
        top: 0;
        right: -30px;
    }

    &:after {
        left: 0;
        bottom: -30px;
    }
}

.lobster {
    font-family: "Lobster", sans-serif;
    font-style: normal;
}


.jost {
    font-family: "Jost", sans-serif;
}

/* Carousel Css */

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

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

.slider {
    height: 100px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider::before,
.slider::after {
    background: transparent;
    content: "";
    height: 0px;
    position: absolute;
    width: 0px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slider-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
}

.slide {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hover-pause:hover .slider-track {
    animation-play-state: paused;
}

/* For logo images */
.logo-img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
    max-height: 60px;
    max-width: 180px;
}

.logo-img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Carousl CSS ends */