{% extends "base.html" %}

{% block content %}
<style>
    .hero {
        text-align: center;
        padding: 4rem 2rem;
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(8px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .hero h2 {
        color: white !important;
        font-size: 2.8rem;
        margin-bottom: 1.5rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        border-left: none;
    }
    
    .about-text {
        max-width: 800px;
        margin: 1.5rem auto;
        font-size: 1.2rem;
        line-height: 1.8;
        color: white !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    }
    
    .about-text p {
        color: white !important;
        margin-bottom: 1rem;
    }
    
    @media (max-width: 768px) {
        .hero {
            padding: 2rem 1rem;
        }
        
        .hero h2 {
            font-size: 1.8rem;
        }
        
        .about-text {
            font-size: 1rem;
        }
    }
</style>

<section class="hero">
    <h2>Добро пожаловать в "Конный двор"!</h2>
    <div class="about-text">
        <p>Это база где вы сможете поближе познакомиться с лошадьми, обучиться навыкам верховной езды, подышать свежим воздухом.</p>
        <p>Наша база занимается проведением прогулок верхом и в санях, а также обучением навыкам верховной езды. Приходите к нам и вы откроете для себя удивительный мир лошадей и отдыха!</p>
    </div>
</section>
{% endblock %}