{% extends "base.html" %}

{% block content %}
<style>
    .about-hero {
        text-align: center;
        margin-bottom: 2rem;
        padding: 2rem;
        background: linear-gradient(135deg, #fef9f0 0%, #fff4e6 100%);
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }
    
    .about-hero h2 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        position: relative;
        display: inline-block;
    }
    
    .about-hero p {
        font-size: 1.2rem;
        color: #666;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .about-content {
        background: white;
        border-radius: 20px;
        padding: 2rem;
        margin: 2rem 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .about-content h3 {
        color: #8B5A2B;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-size: 1.4rem;
        position: relative;
        padding-left: 1rem;
        border-left: 4px solid #d4a373;
    }
    
    .about-content h3:first-of-type {
        margin-top: 0;
    }
    
    .about-content p {
        line-height: 1.8;
        color: #444;
        margin-bottom: 1rem;
        text-align: justify;
    }
    
    .about-content ul {
        list-style: none;
        padding-left: 0;
        margin: 1rem 0;
    }
    
    .about-content li {
        padding: 0.5rem 0;
        padding-left: 1.8rem;
        position: relative;
        line-height: 1.6;
        color: #555;
    }
    
    .about-content li::before {
        content: "🐴";
        position: absolute;
        left: 0;
        color: #d4a373;
    }
    
    .about-quote {
        background: linear-gradient(135deg, #2c1810 0%, #4a2c2c 100%);
        color: white;
        padding: 2rem;
        border-radius: 20px;
        margin: 2rem 0;
        text-align: center;
        font-style: italic;
        position: relative;
        overflow: hidden;
    }
    
    .about-quote::before {
        content: '"';
        position: absolute;
        left: 20px;
        top: 10px;
        font-size: 80px;
        opacity: 0.1;
        font-family: serif;
    }
    
    .about-quote::after {
        content: '"';
        position: absolute;
        right: 20px;
        bottom: 10px;
        font-size: 80px;
        opacity: 0.1;
        font-family: serif;
    }
    
    .about-quote p {
        font-size: 1.2rem;
        line-height: 1.6;
        position: relative;
        z-index: 1;
    }
    
    .about-quote .author {
        margin-top: 1rem;
        font-size: 0.9rem;
        opacity: 0.8;
    }
    
    @media (max-width: 768px) {
        .about-hero h2 {
            font-size: 1.8rem;
        }
        
        .about-content {
            padding: 1.5rem;
        }
        
        .about-content h3 {
            font-size: 1.2rem;
        }
        
        .about-quote p {
            font-size: 1rem;
        }
    }
</style>

<div class="about-hero">
    <h2>🐴 О нашей базе "Конный двор"</h2>
    <p>Место, где лошади и люди находят друг друга</p>
</div>

<div class="about-content">
    <h3>Кто мы такие?</h3>
    <p>"Конный двор" — это уютная конно-спортивная база, расположенная в живописном месте Республики Башкортостан. Мы создали это место для тех, кто хочет прикоснуться к миру лошадей, научиться верховой езде или просто отдохнуть на природе в компании этих удивительных животных.</p>
    
    <h3>Наша миссия</h3>
    <p>Мы стремимся подарить каждому посетителю радость общения с лошадьми, помочь раскрыть красоту и пользу верховой езды, создать комфортные условия для занятий и прогулок. Наши инструкторы — профессионалы с многолетним опытом, которые найдут подход как к взрослым, так и к детям.</p>
    
    <h3>Что мы предлагаем?</h3>
    <ul>
        <li>Обучение верховой езде для начинающих и опытных всадников</li>
        <li>Конные прогулки по живописному лесу</li>
        <li>Зимние прогулки в санях</li>
        <li>Экскурсии с рассказом о лошадях и уходе за ними</li>
        <li>Подарочные сертификаты и абонементы</li>
    </ul>
    
    <h3>Почему выбирают нас?</h3>
    <ul>
        <li>Опытные инструкторы с педагогическим образованием</li>
        <li>Добрые, ухоженные и обученные лошади</li>
        <li>Живописные маршруты для прогулок</li>
        <li>Индивидуальный подход к каждому ученику</li>
        <li>Доступные цены и гибкая система скидок</li>
    </ul>
</div>

<div class="about-quote">
    <p>Лошадь — это зеркало души человека. Приходя к нам, вы не просто учитесь ездить верхом, вы учитесь понимать, чувствовать и доверять. И это меняет жизнь.</p>
    <div class="author">— Основатель базы "Конный двор"</div>
</div>
{% endblock %}