/* Custom styles for ExamFlip landing page */

/* Feature card styling */
.feature-card {
    @apply bg-gray-700 p-6 rounded-lg shadow-lg flex flex-col md:flex-row items-start transform transition duration-300;
}

.feature-card:hover {
    @apply -translate-y-2 shadow-xl;
}

.feature-icon {
    @apply text-green-400 text-4xl mb-4 md:mb-0 md:mr-6 flex-shrink-0;
}

.feature-content {
    @apply flex-grow;
}

.feature-title {
    @apply text-xl font-semibold mb-2;
}

.feature-text {
    @apply text-gray-300;
}

/* Testimonial card styling */
.testimonial-card {
    @apply bg-gray-700 p-6 rounded-lg shadow-lg transform transition duration-300;
}

.testimonial-card:hover {
    @apply -translate-y-2 shadow-xl;
}

.testimonial-content {
    @apply flex flex-col;
}

.testimonial-text {
    @apply text-lg italic text-gray-300 mb-6;
}

.testimonial-author {
    @apply mt-auto;
}

.testimonial-name {
    @apply font-semibold text-white;
}

.testimonial-title {
    @apply text-sm text-gray-400;
}

/* Mobile menu button */
.mobile-menu-button {
    @apply md:hidden z-50 relative;
}

/* Mobile menu */
.mobile-menu {
    @apply fixed inset-0 bg-gray-900 bg-opacity-95 z-40 flex flex-col items-center justify-center text-center;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu a {
    @apply block py-3 text-xl;
}

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

/* Custom gradient text */
.gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500;
}

/* Ensure hero video / mobile CTA visibility is robust across stylesheets.
   The !important here ensures the mobile rule wins if a non-!important rule
   in the head attempted to force the video visible. */

.hero-video { display: none !important; }
.mobile-hero-cta { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; }

@media (min-width: 768px) {
    .hero-video { display: block !important; }
    .mobile-hero-cta { display: none !important; }
}