@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
        
        .trainers-hero {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(16, 185, 129, 0.1) 100%);
        }
        
        .dark .trainers-hero {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
        }
        
        .wave-shape {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
            transform: rotate(180deg);
        }
        
        .wave-shape svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 100px;
        }
        
        .wave-shape .shape-fill {
            fill: #FFFFFF;
        }
        
        .dark .wave-shape .shape-fill {
            fill: #0f172a;
        }
        
        .floating-shape {
            position: absolute;
            opacity: 0.1;
            z-index: 0;
        }
        
        .shape-1 {
            top: 20%;
            left: 5%;
            width: 100px;
            height: 100px;
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            background: #3b82f6;
            animation: float 8s ease-in-out infinite;
        }
        
        .shape-2 {
            bottom: 15%;
            right: 10%;
            width: 150px;
            height: 150px;
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            background: #10b981;
            animation: float 10s ease-in-out infinite;
            animation-delay: 1s;
        }
        
        .dark .floating-shape {
            opacity: 0.05;
        }
        
        .trainer-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .trainer-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .dark .trainer-card {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
        }
        
        .dark .trainer-card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
        }
        
        .social-links {
            display: flex;
            gap: 0.75rem;
            justify-content: center;
        }
        
        .social-link {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            transform: translateY(-3px);
        }
        
        .tab-button {
            transition: all 0.3s ease;
            border-bottom: 2px solid transparent;
        }
        
        .tab-button.active {
            border-bottom-color: #3b82f6;
            color: #3b82f6;
            font-weight: 600;
        }
        
        .dark .tab-button.active {
            border-bottom-color: #2563eb;
            color: #2563eb;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
            animation: fadeIn 0.5s ease-in;
        }
        
        .trainer-modal {
            transition: all 0.3s ease;
            opacity: 0;
            visibility: hidden;
        }
        
        .trainer-modal.active {
            opacity: 1;
            visibility: visible;
        }

    
    .view-profile-btn {
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .view-profile-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 5px;
        height: 5px;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        border-radius: 100%;
        transform: scale(1, 1) translate(-50%, -50%);
        transform-origin: 50% 50%;
    }
    
    .view-profile-btn:focus:not(:active)::after {
        animation: ripple 1s ease-out;
    }
    
    @keyframes ripple {
        0% {
            transform: scale(0, 0);
            opacity: 0.5;
        }
        100% {
            transform: scale(20, 20);
            opacity: 0;
        }
    }
    
    @keyframes float {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-20px) rotate(5deg);
        }
    }
    
    @keyframes float-delay {
        0%, 100% {
            transform: translateY(0) rotate(0deg);
        }
        50% {
            transform: translateY(-15px) rotate(-5deg);
        }
    }
    
    .animate-float {
        animation: float 8s ease-in-out infinite;
    }
    
    .animate-float-delay {
        animation: float-delay 9s ease-in-out infinite;
        animation-delay: 1s;
    }
    
    .cta-btn-primary:hover {
        box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 0.3);
    }
    
    .cta-btn-secondary:hover {
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
    }

    @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    @keyframes float-delay {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-8px);
        }
    }
    
    .animate-float {
        animation: float 5s ease-in-out infinite;
    }
    
    .animate-float-delay {
        animation: float-delay 6s ease-in-out infinite;
        animation-delay: 1s;
    }
    
    .trainer-card:hover .social-icon {
        transform: translateY(-3px);
    }