input.css

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

.section-container{
    @apply max-w-6xl mx-auto text-center px-10;
}

@layer base {
    h3 {
       @apply mb-8 text-4xl font-bold text-darkGrayishBlue md:text-5xl;
    }
}

@layer base {
    h5 {
        @apply mb-2 text-2xl font-bold text-darkGrayishBlue;
    }
}

.button-container{
    @apply flex flex-col justify-center w-full space-y-6 text-xl text-white md:flex-row md:space-y-0 md:space-x-4;
}

body{
    background-image:url('../images/bg-header-desktop.png');
    background-repeat: no-repeat;
    background-size:contain;
}
.ficon:hover{
    filter: invert(53%) sepia(68%) saturate(434%) hue-rotate(121deg) brightness(101%) contrast(94%)
}
@media (max-width:576px) {
    body{
        background-image: url('../images/bg-header-mobile.png')
    }
}