/* Сброс стилей */
* { margin:0; padding:0; box-sizing: border-box; }

/* Шрифты */
body { font-family: 'Roboto', sans-serif; line-height: 1.6; color:#333; background:#f7f7f7; }

/* Баннер */
.banner {
    width: 100%;
    height: 60vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-overlay {
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
}

.banner-overlay h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.banner-overlay p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    padding: 12px 25px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: 0.3s all;
}

.btn-primary { background: #007bff; color: #fff; }
.btn-primary:hover { background: #0056b3; }

.btn-secondary { background: #28a745; color: #fff; }
.btn-secondary:hover { background: #1e7e34; }

/* Основной контент */
.main-content { padding: 50px 20px; text-align: center; }

.features { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }

.feature { background: #fff; padding: 30px; border-radius: 10px; width: 300px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

.feature h2 { margin-bottom: 15px; color:#007bff; }
.feature p { color: #555; }

/* Футер */
footer { text-align: center; padding: 20px; background: #222; color:#fff; }

/* Адаптив */
@media(max-width: 768px){
    .banner-overlay h1 { font-size: 2rem; }
    .banner-overlay p { font-size: 1rem; }
    .features { flex-direction: column; gap: 20px; }
}