input.css

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


@layer base{
    h5{
        @apply absolute px-6 duration-200 w-52 bottom-4 md:bottom-8 md:px-10 group-hover:scale-110 group-hover:text-black;
    }
}

@layer components{
    .btn{
        @apply px-10 py-2 my-0 font-bold tracking-widest uppercase border-2 border-black font-alata hover:bg-black hover:text-white;
    }
    .item-container{
        @apply flex flex-col justify-between space-y-6 text-2xl text-white uppercase md:flex-row md:space-y-0 md:space-x-8;
    }

    .item-desktop-img{
        @apply hidden w-full duration-200 md:block group-hover:scale-110;
    }
    .item-mobile-img{
        @apply w-full md:hidden;
    }
    .item-gradient{
        @apply absolute top-0 bottom-0 right-0 left-0 bg-gradient-to-b from-transparent to-gray-900 group-hover:from-gray-50 group-hover:to-white group-hover:opacity-70 ;
    }
   
}

#hero{
    background-image: url(../images/desktop/image-hero.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.nav-link{
    @apply mx-2 duration-150 group-hover:border-b group-hover:border-blue-50;
}

@media(max-width:567px){
    #hero{
        background-image: url(../images/mobile/image-hero.jpg);
        background-position: center;
    }
}
.hamburger{
    cursor:pointer;
    width:24px;
    height:24px;
    transition:all .25s;
    position:relative;
}
.hamburger-top,
.hamburger-middle,
.hamburger-bottom
{
    /* @apply absolute w-6 h-[2px] top-10 right-0 bg-white rotate-0 duration-500; */
    position:absolute;
    width:24px;
    height: 2px;
    top:0;
    left:0;
    background:#fff;
    transform: rotate(0);
    transition: all .5s;
}
.hamburger-middle{
    transform: translateY(7px)
}
.hamburger-bottom{
    transform: translateY(14px)
}

.open{
    transform:rotate(90deg);
}

.open .hamburger-top{
    transform: rotate(45deg) translateY(6px) translateX(6px);
}
.open .hamburger-middle{
    display:none;
}
.open .hamburger-bottom{
    transform: rotate(-45deg) translateY(6px) translateX(-6px) ;
}