/*
  This file contains custom CSS.
  Most styling is handled by Tailwind CSS directly in index.html.
  This file can be used for specific overrides or complex animations not easily
  achievable with utility classes.
*/

/* Basic body styling, font is handled by Tailwind and Google Fonts import */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Keyframe animations for hero section elements */
@keyframes fadeInFromBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations with delays */
.animate-fade-in-up {
    animation: fadeInFromBottom 0.8s ease-out forwards;
    opacity: 0; /* Start invisible */
}

.animate-fade-in-up.delay-200 {
    animation-delay: 0.2s;
}

.animate-fade-in-up.delay-400 {
    animation-delay: 0.4s;
}

/* Custom styles for the mobile menu button (hamburger icon) */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px; /* Adjust size as needed */
    height: 20px; /* Adjust size as needed */
    cursor: pointer;
    padding: 5px;
}

.hamburger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333; /* Color of the bars */
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Transform hamburger to 'X' when open */
.hamburger-menu.open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Ensure smooth scrolling behavior */
html {
    scroll-behavior: smooth;
}