:root {
    --dark-green: #1a3a20;
    --light-green: #4a7856;
    --dark-purple: #4b2c4d;
    --light-purple: #7d4d7f;
    --text-light: #f8f9fa;
    --text-dark: #212529;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: var(--text-dark);
}

.navbar {
    background-color: var(--dark-green);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand, .nav-link {
    color: var(--text-light) !important;
}

    .nav-link:hover {
        color: #c9c9c9 !important;
    }

.btn-primary {
    background-color: var(--dark-purple);
    border-color: var(--dark-purple);
}

    .btn-primary:hover {
        background-color: var(--light-purple);
        border-color: var(--light-purple);
    }

.btn-success {
    background-color: var(--light-green);
    border-color: var(--light-green);
}

    .btn-success:hover {
        background-color: var(--dark-green);
        border-color: var(--dark-green);
    }

.hero-section {
    background: linear-gradient(135deg, var(--dark-green), var(--dark-purple));
    color: white;
    padding: 4rem 0;
    margin-bottom: 2rem;
}

.feature-box {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

    .feature-box:hover {
        transform: translateY(-5px);
    }

.footer {
    background-color: var(--dark-green);
    color: var(--text-light);
    padding: 2rem 0;
    margin-top: 2rem;
}

.album-cover {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    margin-bottom: 15px;
}

.gallery-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s;
}

    .gallery-img:hover {
        transform: scale(1.05);
    }

.contact-icon {
    font-size: 2rem;
    color: var(--dark-purple);
    margin-bottom: 1rem;
}

/* Стили для пагинации */
.pagination {
    justify-content: center;
    margin-top: 20px;
}

.page-item.active .page-link {
    background-color: #4b2c4d;
    border-color: #4b2c4d;
}

.page-link {
    color: #4b2c4d;
}

    .page-link:hover {
        color: #1a3a20;
    }