/* Основні стилі */
body { font-family: Arial, sans-serif; color: white; text-align: center; margin: 20px; background-color: #000a29; }
.container { max-width: 800px; margin: 0 auto; padding: 20px; border: 1px solid #000a29; border-radius: 8px; background-color: #000a29; }

/* Хедер */
header { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: #021e77; border-radius: 8px; color: white; }
.logo img { width: 200px; }
.menu { display: flex; gap: 15px; }
.menu a { text-decoration: none; color: white; font-weight: bold; background-color: #0292eb; padding: 10px 15px; border-radius: 5px; transition: 0.3s ease-in-out; }
.menu a:hover { background-color: #026aab; }

/* Блоки сайтів */
.service { display: flex; justify-content: space-between; align-items: center; padding: 15px; margin: 15px 0; background-color: #021e77; border-radius: 5px; transition: 0.3s ease-in-out; }
.service:hover { transform: scale(1.05); background-color: #0834bf; }
.service img { width: 100px; margin-right: 15px; }
.service .text { text-align: left; flex: 1; }
.service .rating { font-size: 18px; font-weight: bold; color: #ffffff; }
.service a { text-decoration: none; color: white; font-weight: bold; background-color: #0292eb; padding: 10px 15px; border-radius: 5px; }
.service a:hover { background-color: #026aab; }

/* Банери */
.banner { margin: 20px 0; text-align: center; }
.banner img { max-width: 100%; border-radius: 8px; }

/* Футер */
footer { background-color: #021e77; color: white; padding: 15px; text-align: center; border-radius: 8px 8px 0 0; margin-top: 20px; }
.footer-container { display: flex; justify-content: space-between; align-items: center; max-width: 800px; margin: 0 auto; padding-bottom: 10px; }
.footer-logo img { width: 200px; }
.footer-menu { display: flex; gap: 15px; }
.footer-menu a { text-decoration: none; color: white; font-weight: bold; padding: 10px 15px; border-radius: 5px; background-color: #0292eb; transition: 0.3s ease-in-out; }
.footer-menu a:hover { background-color: #026aab; }
.footer-bottom { margin-top: 10px; font-size: 14px; }

/* Адаптація */
@media (max-width: 600px) {
    .container, .footer-container { width: 90%; padding: 10px; }
    header, footer { flex-direction: column; align-items: center; }
    .menu, .footer-menu { flex-direction: column; align-items: center; }
    .service { flex-direction: column; align-items: center; }
    .service img { margin-bottom: 10px; }
    .service a, .service .rating { margin-top: 10px; }
}

/* Стилі для форми */
form { max-width: 600px; margin: 0 auto; text-align: left; }
label { display: block; margin-top: 10px; font-weight: bold; }
input, textarea { width: 100%; padding: 10px; margin-top: 5px; border: 1px solid #ddd; border-radius: 5px; }
button { margin-top: 15px; padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; }
button:hover { background-color: #0056b3; }

/* Відступи між Home, основною сторінкою та Footer */
header, .container, footer { margin-bottom: 10px; }

/* Для мобільних пристроїв */
@media (max-width: 600px) {
    header, .container, footer { margin-bottom: 5px; }
}