/* Custom Styles for IFGF */

/* Global Layout Container */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Link Styles */
.link-primary {
    color: #374151;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.link-primary:hover {
    color: #111827;
}

.link-primary::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #111827;
    transition: width 0.3s ease;
}

.link-primary:hover::after {
    width: 100%;
}

/* Button Styles */
.btn-primary {
    @apply inline-flex items-center gap-2 bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 font-medium transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg;
}

.btn-outline {
    @apply inline-flex items-center gap-2 border border-gray-300 hover:border-gray-800 text-gray-700 hover:text-gray-900 px-6 py-3 font-medium transition-all duration-300 hover:bg-gray-50;
}

/* Registration Link Special Style */
.register-link {
    @apply text-gray-700 hover:text-gray-900 font-medium transition-all duration-300 relative;
}

.register-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-gray-800 transition-all duration-300;
}

.register-link:hover::after {
    @apply w-full;
}

/* FAQ Accordion */
.faq-item {
    @apply border border-gray-200 transition-all duration-300 hover:border-gray-300 hover:shadow-sm;
}

.faq-button {
    @apply w-full text-left p-6 focus:outline-none transition-colors duration-200 hover:bg-gray-50;
}

.faq-content {
    @apply border-t border-gray-200 bg-gray-50;
}

/* Navigation Cards */
.nav-card {
    @apply text-center transition-all duration-500 hover:transform hover:-translate-y-2 hover:shadow-xl cursor-pointer;
}

.nav-card img {
    @apply w-full h-64 object-cover mb-6 transition-all duration-500 hover:brightness-110;
}

.nav-card.nav-link::after {
    display: none;
}

.nav-card.nav-link h3 {
    position: relative;
    display: inline-block;
}

.nav-card.nav-link:hover h3 {
    color: #374151;
}

.nav-card.nav-link h3::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #374151;
    transition: width 0.3s ease;
}

.nav-card.nav-link:hover h3::after {
    width: 100%;
}

/* Stats Cards */
.stat-card {
    @apply transition-all duration-300 hover:transform hover:scale-105;
}

/* Activity Icons */
.activity-icon {
    @apply w-16 h-16 mx-auto mb-6 flex items-center justify-center transition-all duration-300 hover:transform hover:scale-110;
}

/* Smooth Animations */
.fade-in {
    @apply opacity-0 transform translate-y-8 transition-all duration-700;
}

.fade-in.visible {
    @apply opacity-100 translate-y-0;
}

/* Quote Section Special Styling */
.quote-section blockquote {
    @apply relative;
}

.quote-section blockquote::before {
    content: '"';
    @apply absolute -top-4 -left-2 text-6xl text-gray-300 font-marcellus;
}

.quote-section blockquote::after {
    content: '"';
    @apply absolute -bottom-8 -right-2 text-6xl text-gray-300 font-marcellus;
}

/* Navigation Link Styles */
.nav-link {
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.nav-link:hover {
    color: #fde047;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #fde047;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link-mobile {
    display: block;
    color: white;
    padding: 8px 0;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link-mobile:hover {
    color: #fde047;
}

.nav-link-mobile::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #fde047;
    transition: width 0.3s ease;
}

.nav-link-mobile:hover::after {
    width: 100%;
}