/* Custom styles for DisSolved website */

/* Base Styles */
html {
    scroll-behavior: smooth;
}

/* Navigation Links */
.nav-link {
    @apply px-4 py-2 text-white hover:text-accent rounded-lg transition duration-300 font-medium;
}

.nav-link:hover {
    @apply bg-white/20;
}

.mobile-nav-link {
    @apply block px-4 py-3 text-white hover:text-accent hover:bg-white/20 rounded-lg transition duration-300;
}

/* Buttons */
.btn-primary {
    @apply inline-flex items-center justify-center bg-accent text-dark font-semibold py-3 px-8 rounded-lg hover:bg-accent/90 transition duration-300 shadow-lg hover:shadow-xl;
}

.btn-secondary {
    @apply inline-flex items-center justify-center border-2 border-white text-white font-semibold py-3 px-8 rounded-lg hover:bg-white hover:text-dark transition duration-300;
}

.btn-outline {
    @apply inline-flex items-center justify-center border-2 border-primary text-primary font-semibold py-2 px-6 rounded-lg hover:bg-primary hover:text-white transition duration-300;
}

/* Section Titles */
.section-title {
    @apply text-3xl lg:text-4xl font-bold text-center text-dark mb-12;
}

.section-title::after {
    content: '';
    @apply block w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mt-4 rounded-full;
}

/* Stat Cards */
.stat-card {
    @apply bg-light p-6 rounded-xl text-center hover:shadow-lg transition duration-300;
}

/* Toolkit Cards */
.toolkit-card {
    @apply bg-white border border-gray-100 rounded-xl p-6 hover:shadow-xl transition duration-300 hover:-translate-y-1;
}

.toolkit-icon {
    @apply w-14 h-14 rounded-xl flex items-center justify-center text-white text-2xl mb-4;
}

/* Tags */
.tag {
    @apply bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-sm font-medium;
}

/* Service Cards */
.service-card {
    @apply bg-light rounded-xl p-8 text-center hover:shadow-lg transition duration-300 hover:-translate-y-1;
}

/* Colab & GitHub Buttons */
.colab-btn {
    @apply inline-flex items-center transition duration-300 hover:opacity-80;
}

.colab-btn-sm {
    @apply inline-flex items-center transition duration-300 hover:opacity-80;
}

.github-btn {
    @apply inline-flex items-center justify-center bg-gray-800 text-white font-medium py-2 px-4 rounded-lg hover:bg-gray-700 transition duration-300;
}

.github-btn-sm {
    @apply inline-flex items-center justify-center bg-gray-800 text-white text-sm font-medium py-1.5 px-3 rounded-lg hover:bg-gray-700 transition duration-300;
}

/* Social Links */
.social-link {
    @apply w-12 h-12 bg-white/10 rounded-full flex items-center justify-center text-white hover:bg-accent hover:text-dark transition duration-300;
}

/* Form Focus States */
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* Smooth Scroll Offset for Fixed Header */
section[id] {
    scroll-margin-top: 80px;
}

/* Animation for cards on hover */
.toolkit-card,
.service-card {
    transform: translateY(0);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #0f766e;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0d5d56;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.75rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
}

/* Loading animation for form submission */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(135deg, #14b8a6, #5eead4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover effects */
.toolkit-card::before,
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0f766e, #14b8a6);
    border-radius: 8px 8px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.toolkit-card:hover::before,
.service-card:hover::before {
    opacity: 1;
}

.toolkit-card,
.service-card {
    position: relative;
    overflow: hidden;
}