input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body{
        font-family: 'Montserrat', sans-serif;
    }
}

@layer components{
    .container{
        @apply max-w-[1300px]
    }
}


/* <----------------------- Burger menu setup -----------------------> */

.rob{
    font-family: 'Roboto', sans-serif;
}

.grid__cont{
    grid-template-columns: repeat(auto-fit , minmax(300px,1fr));
    grid-gap:50px;
}

.anim-tran{
    transition: all .2s ease-in-out;
}

.modal{
    transform: translateY(-200%);
    background-color: #fff; 
    width: 100%;
    position: absolute;
    transition: all 1s ease;

}

.active{
    transform: translateY(0);
    transition: all 1s ease;
}

.slider{
    position: absolute;
    animation: scroll 50s linear infinite;
    transform: translate(0,50%);

}

.slider-container{
    position: relative;
    width: 100%;
    height: 50vh;
}

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

@keyframes scroll {
    0%{
        left: -200px;
    }

    100%{
        left: 100%;
    }
}