/* Custom styles and animations */
html {
    scroll-behavior: smooth; /* Smooth scroll for internal links */
}
body {
   font-family: 'Inter', sans-serif;
   background-color: #111827; /* Dark background */
   color: #d1d5db; /* Default text color */
}

footer {
    background-color: #111827 !important; /* Dark background */
}

/* Initial state for scroll animations */
.scroll-animate {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* State when element is visible */
.scroll-animate.is-visible {
   opacity: 1;
   transform: translateY(0);
}

/* Simple fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Apply animation with delay */
.animate-fade-in-1 { animation: fadeIn 0.8s ease-out forwards; opacity: 0; animation-delay: 0.2s; }
.animate-fade-in-2 { animation: fadeIn 0.8s ease-out forwards; opacity: 0; animation-delay: 0.4s; }
.animate-fade-in-3 { animation: fadeIn 0.8s ease-out forwards; opacity: 0; animation-delay: 0.6s; }
.animate-fade-in-4 { animation: fadeIn 0.8s ease-out forwards; opacity: 0; animation-delay: 0.8s; }

/* Style for the hero background - using a gradient as placeholder */
.hero-bg {
    /* Replace with your actual background image URL if you have one */
    /* background-image: url('your-image-url.jpg'); */
    background: linear-gradient(rgba(17, 24, 39, 0.8), rgba(17, 24, 39, 0.95)), /* Dark overlay */
                radial-gradient(circle at top left, #3b82f630, transparent 60%), /* Subtle blue glow */
                radial-gradient(circle at bottom right, #4f46e530, transparent 70%); /* Subtle indigo glow */
    background-size: cover;
    background-position: center;
}

/* Ensure buttons have good contrast and hover effects */
.btn {
    @apply px-6 py-3 rounded-lg font-semibold transition duration-300 ease-in-out shadow-md;
}
.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;
}
.btn-secondary {
    @apply bg-gray-100 text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50;
}


/* Styling for FAQ items */
.faq-item details > summary {
    list-style: none; /* Remove default marker */
    cursor: pointer;
}
.faq-item details > summary::-webkit-details-marker {
    display: none; /* Remove default marker (Chrome) */
}
.faq-item details > summary::after {
     content: '+'; /* Custom marker */
     float: right;
     font-size: 1.5em;
     line-height: 1;
     transition: transform 0.3s ease-out;
}
.faq-item details[open] > summary::after {
    transform: rotate(45deg); /* Rotate marker when open */
}
.faq-item details[open] > summary {
    color: #60a5fa; /* Highlight summary when open */
}

/* Section divider */
.section-divider {
    border-bottom: 1px solid #374151; /* gray-700 */
    margin-top: 4rem; /* 64px */
    margin-bottom: 4rem; /* 64px */
}