{% extends "base.html" %}

{% block title %}Minecraft Development - Devanturas by SimolZimol{% endblock %}
{% block description %}Professional Minecraft plugin development for Velocity, Spigot, Paper, and Bukkit servers by SimolZimol{% endblock %}

{% block content %}
<!-- Minecraft Hero Section -->
<section class="minecraft-hero">
    <div class="container">
        <div class="hero-content">
            <div class="hero-badge">
                <i class="fas fa-cube"></i>
                <span>Minecraft Development</span>
            </div>
            <h1>Professional Plugin Development</h1>
            <p class="hero-subtitle">Creating powerful, optimized plugins for Velocity, Spigot, Paper & Bukkit servers</p>
            
            <div class="hero-stats">
                <div class="stat-item">
                    <div class="stat-icon"><i class="fas fa-calendar-alt"></i></div>
                    <div class="stat-content">
                        <span class="stat-number">{{ info.experience }}</span>
                        <span class="stat-label">Development Experience</span>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon"><i class="fas fa-project-diagram"></i></div>
                    <div class="stat-content">
                        <span class="stat-number">{{ projects|length }}</span>
                        <span class="stat-label">Active Projects</span>
                    </div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon"><i class="fas fa-cubes"></i></div>
                    <div class="stat-content">
                        <span class="stat-number">1.15-1.21</span>
                        <span class="stat-label">MC Versions</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Featured Projects Section -->
<section class="minecraft-projects-section">
    <div class="container">
        <div class="section-header">
            <h2>My Minecraft Projects</h2>
            <p>Explore my collection of high-quality plugins and tools</p>
        </div>
        
        <div class="projects-grid">
            {% for project in projects %}
            <div class="project-card">
                <div class="project-card-header">
                    <div class="project-icon-wrapper">
                        <i class="fas fa-plug"></i>
                    </div>
                    <div class="project-badge">{{ project.version }}</div>
                </div>
                
                <div class="project-card-body">
                    <h3>{{ project.name }}</h3>
                    <p class="project-description">{{ project.description }}</p>
                    
                    <div class="project-meta">
                        <div class="meta-item">
                            <i class="fas fa-gamepad"></i>
                            <span>{{ project.supported_versions }}</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-download"></i>
                            <span>{{ project.downloads }}</span>
                        </div>
                    </div>
                </div>
                
                <div class="project-card-footer">
                    <a href="{{ project.url }}" class="project-link">
                        View Details <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Expertise Section -->
<section class="minecraft-expertise-section">
    <div class="container">
        <div class="expertise-grid">
            <div class="expertise-column">
                <div class="section-header">
                    <h2>Technical Expertise</h2>
                    <p>Comprehensive development skills for modern Minecraft servers</p>
                </div>
                
                <div class="expertise-categories">
                    <div class="expertise-category">
                        <h3><i class="fas fa-code"></i> Development APIs</h3>
                        <div class="tag-list">
                            {% for api in info.preferred_apis %}
                            <span class="tag">{{ api }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div class="expertise-category">
                        <h3><i class="fas fa-server"></i> Server Platforms</h3>
                        <div class="tag-list">
                            {% for server_type in info.server_types %}
                            <span class="tag tag-server">{{ server_type }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div class="expertise-category">
                        <h3><i class="fas fa-star"></i> Specializations</h3>
                        <div class="specialties-list">
                            {% for specialty in info.specialties %}
                            <div class="specialty-item">
                                <i class="fas fa-check-circle"></i>
                                <span>{{ specialty }}</span>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="expertise-column">
                <div class="expertise-features">
                    <div class="feature-box">
                        <div class="feature-icon">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h3>Performance Optimized</h3>
                        <p>Every plugin is built with performance in mind, ensuring minimal server impact and maximum player experience.</p>
                    </div>
                    
                    <div class="feature-box">
                        <div class="feature-icon">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3>Secure & Reliable</h3>
                        <p>Following security best practices and thorough testing to deliver stable, production-ready code.</p>
                    </div>
                    
                    <div class="feature-box">
                        <div class="feature-icon">
                            <i class="fas fa-sync-alt"></i>
                        </div>
                        <h3>Regular Updates</h3>
                        <p>Continuous maintenance and updates to ensure compatibility with the latest Minecraft versions.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="services-section">
    <div class="container">
        <div class="section-header">
            <h2>Development Services</h2>
            <p>Comprehensive Minecraft plugin development solutions</p>
        </div>
        
        <div class="services-grid">
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-code"></i>
                </div>
                <h3>Custom Plugin Development</h3>
                <p>Tailored plugins built from the ground up to match your exact requirements and server vision.</p>
                <ul class="service-features">
                    <li><i class="fas fa-check"></i> Custom commands & features</li>
                    <li><i class="fas fa-check"></i> Database integration (MySQL, MongoDB)</li>
                    <li><i class="fas fa-check"></i> Permission system integration</li>
                    <li><i class="fas fa-check"></i> Advanced configuration options</li>
                </ul>
            </div>
            
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-tachometer-alt"></i>
                </div>
                <h3>Performance Optimization</h3>
                <p>Comprehensive analysis and optimization of existing plugins for better server performance.</p>
                <ul class="service-features">
                    <li><i class="fas fa-check"></i> Performance profiling & analysis</li>
                    <li><i class="fas fa-check"></i> Memory leak detection & fixes</li>
                    <li><i class="fas fa-check"></i> Async task optimization</li>
                    <li><i class="fas fa-check"></i> Server architecture consulting</li>
                </ul>
            </div>
            
            <div class="service-card">
                <div class="service-icon">
                    <i class="fas fa-wrench"></i>
                </div>
                <h3>Plugin Maintenance & Support</h3>
                <p>Ongoing maintenance, updates, and support to keep your plugins running smoothly.</p>
                <ul class="service-features">
                    <li><i class="fas fa-check"></i> Version compatibility updates</li>
                    <li><i class="fas fa-check"></i> Bug fixes & troubleshooting</li>
                    <li><i class="fas fa-check"></i> Feature enhancements</li>
                    <li><i class="fas fa-check"></i> Technical documentation</li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Resources & Downloads -->
<section class="resources-section">
    <div class="container">
        <div class="section-header">
            <h2>Download Platforms</h2>
            <p>Find my plugins on popular Minecraft platforms</p>
        </div>
        
        <div class="platforms-grid">
            <a href="https://modrinth.com/plugin/fly-simolzimol/" target="_blank" class="platform-card">
                <div class="platform-icon">
                    <i class="fas fa-cube"></i>
                </div>
                <h3>Modrinth</h3>
                <p>Modern plugin hosting with fast downloads and comprehensive documentation</p>
                <span class="platform-link-text">Visit Modrinth <i class="fas fa-external-link-alt"></i></span>
            </a>
            
            <a href="https://www.spigotmc.org/resources/fly.83164/" target="_blank" class="platform-card">
                <div class="platform-icon">
                    <i class="fas fa-plug"></i>
                </div>
                <h3>SpigotMC</h3>
                <p>The largest Minecraft server resource platform with millions of downloads</p>
                <span class="platform-link-text">Visit SpigotMC <i class="fas fa-external-link-alt"></i></span>
            </a>
            
            <a href="https://github.com/SimolZimol/" target="_blank" class="platform-card">
                <div class="platform-icon">
                    <i class="fab fa-github"></i>
                </div>
                <h3>GitHub</h3>
                <p>Open source projects, documentation, and version control repositories</p>
                <span class="platform-link-text">Visit GitHub <i class="fas fa-external-link-alt"></i></span>
            </a>
        </div>
    </div>
</section>

<!-- Hosting & Sponsoring Section -->
<section class="hosting-section">
    <div class="container">
        <div class="section-header">
            <h2>Server Hosting & Sponsoring</h2>
            <p>Supporting gaming communities with server infrastructure and technical expertise</p>
        </div>
        
        <div class="hosting-grid">
            <div class="hosting-main">
                <div class="hosting-feature-card">
                    <div class="hosting-icon">
                        <i class="fab fa-youtube"></i>
                    </div>
                    <h3>Active Partnership: Ludi et Historia</h3>
                    <p class="hosting-subtitle">Since August 2020</p>
                    <p>I actively support <a href="https://youtube.fandom.com/wiki/Ludi_et_Historia" target="_blank" style="color: #00d4ff;">Ludi et Historia</a>, a YouTube channel focused on gaming content, by providing and managing game servers for their community.</p>
                    
                    <div class="supported-games">
                        <h4>Supported Games:</h4>
                        <div class="game-tags">
                            <span class="game-tag"><i class="fas fa-cube"></i> Minecraft</span>
                            <span class="game-tag"><i class="fas fa-gamepad"></i> Valheim</span>
                            <span class="game-tag"><i class="fas fa-gamepad"></i> 7 Days to Die</span>
                            <span class="game-tag"><i class="fas fa-gamepad"></i> ARK</span>
                            <span class="game-tag"><i class="fas fa-ellipsis-h"></i> And more</span>
                        </div>
                    </div>
                    
                    <div class="hosting-features">
                        <div class="feature-item">
                            <i class="fas fa-server"></i>
                            <span>Professional server infrastructure</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-headset"></i>
                            <span>24/7 technical support</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-cogs"></i>
                            <span>Custom configurations & plugins</span>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-shield-alt"></i>
                            <span>Server security & backups</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="hosting-sidebar">
                <div class="hosting-info-card">
                    <h3><i class="fas fa-users"></i> Community Support</h3>
                    <p>Over the years, I've supported various small content creators and gaming communities with server hosting and technical assistance.</p>
                </div>
                
                <div class="hosting-info-card">
                    <h3><i class="fas fa-handshake"></i> Looking for Server Help?</h3>
                    <p>If you're a content creator or community leader in need of server infrastructure or technical support, feel free to reach out!</p>
                    <a href="{{ url_for('contact') }}" class="hosting-contact-btn">
                        <i class="fas fa-envelope"></i> Get in Touch
                    </a>
                </div>
                
                <div class="hosting-info-card">
                    <h3><i class="fas fa-rocket"></i> What I Offer</h3>
                    <ul class="hosting-offers">
                        <li><i class="fas fa-check"></i> Game server setup & hosting</li>
                        <li><i class="fas fa-check"></i> Custom plugin development</li>
                        <li><i class="fas fa-check"></i> Server optimization</li>
                        <li><i class="fas fa-check"></i> Technical consulting</li>
                        <li><i class="fas fa-check"></i> Long-term partnerships</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Call to Action -->
<section class="minecraft-cta-section">
    <div class="container">
        <div class="cta-box">
            <div class="cta-content">
                <h2>Need a Custom Minecraft Plugin or Server Support?</h2>
                <p>Let's discuss your project requirements and create something amazing for your server</p>
            </div>
            <div class="cta-actions">
                <a href="{{ url_for('contact') }}" class="btn btn-primary">
                    <i class="fas fa-comments"></i> Get in Touch
                </a>
                <a href="{{ url_for('projects') }}" class="btn btn-outline">
                    <i class="fas fa-folder-open"></i> All Projects
                </a>
            </div>
        </div>
    </div>
</section>

<style>
/* Minecraft Hero */
.minecraft-hero {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a2e 100%);
    padding: 120px 0 80px;
    position: relative;
    overflow: hidden;
}

.minecraft-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.1) 0%, transparent 50%);
}

.hero-content {
    position: relative;
    text-align: center;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: #00d4ff;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: #cfcfcf;
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    margin-top: 3rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.25rem 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-2px);
}

.stat-icon {
    font-size: 2rem;
    color: #00d4ff;
}

.stat-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.stat-label {
    font-size: 0.85rem;
    color: #9b9b9b;
    margin-top: 0.25rem;
}

/* Projects Section */
.minecraft-projects-section {
    padding: 80px 0;
    background: #0f0f1f;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: #ffffff;
}

.section-header p {
    font-size: 1.1rem;
    color: #9b9b9b;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.project-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.project-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 212, 255, 0.15);
}

.project-card-header {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
}

.project-icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00d4ff 0%, #8a2be2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ffffff;
}

.project-badge {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: #00d4ff;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.project-card-body {
    padding: 1.5rem;
}

.project-card-body h3 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
    color: #ffffff;
}

.project-description {
    color: #cfcfcf;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

.project-meta {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #9b9b9b;
    font-size: 0.9rem;
}

.meta-item i {
    color: #00d4ff;
}

.project-card-footer {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.project-link {
    color: #00d4ff;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s ease;
}

.project-link:hover {
    gap: 0.5rem;
}

/* Expertise Section */
.minecraft-expertise-section {
    padding: 80px 0;
    background: #0a0a1a;
}

.expertise-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 3rem;
}

.expertise-categories {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.expertise-category h3 {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.expertise-category h3 i {
    color: #00d4ff;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tag {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: #00d4ff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(0, 212, 255, 0.2);
    border-color: #00d4ff;
}

.tag-server {
    background: rgba(138, 43, 226, 0.1);
    border-color: rgba(138, 43, 226, 0.3);
    color: #8a2be2;
}

.tag-server:hover {
    background: rgba(138, 43, 226, 0.2);
    border-color: #8a2be2;
}

.specialties-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.specialty-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #cfcfcf;
    font-size: 0.95rem;
}

.specialty-item i {
    color: #00d4ff;
    font-size: 1.1rem;
}

.expertise-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.75rem;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-box:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateX(5px);
}

.feature-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #00d4ff 0%, #8a2be2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.feature-box h3 {
    font-size: 1.25rem;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.feature-box p {
    color: #9b9b9b;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Services Section */
.services-section {
    padding: 80px 0;
    background: #0f0f1f;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2rem;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.service-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-5px);
}

.service-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, #00d4ff 0%, #8a2be2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.service-card h3 {
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 1rem;
}

.service-card > p {
    color: #9b9b9b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.service-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #cfcfcf;
    font-size: 0.95rem;
}

.service-features i {
    color: #00d4ff;
    font-size: 0.9rem;
}

/* Resources Section */
.resources-section {
    padding: 80px 0;
    background: #0a0a1a;
}

.platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.platform-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 2rem;
    border-radius: 16px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
}

.platform-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 212, 255, 0.1);
}

.platform-icon {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    background: linear-gradient(135deg, #00d4ff 0%, #8a2be2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.platform-card h3 {
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.platform-card p {
    color: #9b9b9b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.platform-link-text {
    color: #00d4ff;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* CTA Section */
.minecraft-cta-section {
    padding: 80px 0;
    background: #0f0f1f;
}

.cta-box {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(138, 43, 226, 0.1) 100%);
    border: 1px solid rgba(0, 212, 255, 0.3);
    padding: 3rem;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.cta-content h2 {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.cta-content p {
    font-size: 1.1rem;
    color: #cfcfcf;
}

.cta-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Hosting & Sponsoring Section */
.hosting-section {
    padding: 80px 0;
    background: #0a0a1a;
}

.hosting-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.hosting-feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 16px;
    padding: 2.5rem;
}

.hosting-icon {
    width: 70px;
    height: 70px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.hosting-feature-card h3 {
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.hosting-subtitle {
    color: #00d4ff;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hosting-feature-card > p {
    color: #e0e0e0;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.hosting-feature-card a {
    color: #00d4ff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.hosting-feature-card a:hover {
    color: #00a8e6;
    text-decoration: underline;
}

.supported-games {
    margin: 2rem 0;
}

.supported-games h4 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.game-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.game-tag {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    color: #00d4ff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hosting-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.feature-item i {
    color: #00d4ff;
    font-size: 1.1rem;
}

.hosting-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hosting-info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 16px;
    padding: 1.75rem;
}

.hosting-info-card h3 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hosting-info-card h3 i {
    color: #00d4ff;
}

.hosting-info-card p {
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.hosting-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.hosting-contact-btn:hover {
    background: linear-gradient(135deg, #00a8e6 0%, #007aa3 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}

.hosting-offers {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hosting-offers li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #e0e0e0;
    font-size: 0.95rem;
}

.hosting-offers i {
    color: #00d4ff;
    font-size: 0.9rem;
}

.btn {
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    color: #ffffff;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #00a8e6 0%, #007aa3 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}

.btn-outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.btn-outline:hover {
    border-color: #00d4ff;
    background: rgba(0, 212, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .expertise-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .hosting-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-stats {
        gap: 1.5rem;
    }
    
    .stat-item {
        padding: 1rem 1.5rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-box {
        text-align: center;
        justify-content: center;
    }
    
    .cta-actions {
        justify-content: center;
    }
    
    .hosting-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .stat-item {
        flex-direction: column;
        text-align: center;
    }
    
    .stat-content {
        align-items: center;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .hosting-feature-card {
        padding: 1.5rem;
    }
    
    .game-tags {
        justify-content: center;
    }
}
</style>
{% endblock %}