input.css

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

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

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


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

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

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

.burger{
    height: 20px;
    position: relative;
    width: 30px;
}

.burger-line{
    display: flex;
    width: 30px;
    height: 2px;
    background-color: rgb(255, 255, 255);
    transition: .3s all ease;
}

.top-line{
    position: absolute;
    left:0;
    top: 0;
}

.mid-line{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
}

.bottom-line{
    position: absolute;
    left: 0;
    bottom: 0;
}

.burger.active>.top-line{
    transform: translateY(8px) rotate(45deg);
    transition: .3s all ease;
}

.burger.active>.mid-line{
    margin-top: -10px;
    transform: translateY(8px) rotate(135deg);
    transition: .3s all ease;
}

.burger.active>.bottom-line{
    opacity: 0;
    transition: .3s all ease;
}

.container-card{
    margin: 0 auto;
}