* {margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif}
.hero{min-height: 60vh; background-image: url("images/header.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; color: white; display: flex; align-items: center; justify-content: center}
.hero::before{content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4)}
.hero *{position: relative; z-index: 1}
.hero-title{font-size: 48px; text-align: center; max-width: 90%}
@media (max-width: 768px){
    .hero{min-height: 50vh; width: 100%; background-position: center top; background-size: cover}
    .hero-title{font-size: 28px; padding: 0 10px; text-align: center}
    .menu{position: absolute; top: 10px; right: 10px}
}
.menu{position: absolute; top: 20px; right: 40px}
.menu a{color: white; text-decoration: none; margin-left: 20px; font-weight: bold}
.hero h1{position: absolute; bottom: 40px; width: 100%; font-size: 36px}
.materials{padding: 60px 10%; background-color: #f9f9f9; color: #333}
.materials h2{text-align: center; font-size: 32px; margin-bottom: 20px}
.materials p{text-align: center; max-width: 800px; margin: 0 auto 20px auto; line-height: 1.6; font-size: 16px}
.cards{display: flex; gap: 20px; margin-top: 40px; justify-content: center}
.card{background-color: white; padding: 25px; border-radius: 12px; box-shadow: 0 6px 15px rgba(0,0,0,0.1); flex: 1 1 300px; max-width: 350px; transition: transform 0.3s ease, box-shadow 0.3s ease}
.card:hover{transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0,0,0,0.15)}
.card:active{transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.12)}
.card h3{font-size: 20px; margin-bottom: 12px; color: #1f8f4a}
.card p{font-size: 15px; margin-bottom: 15px; color: #555}
.card ul{list-style: none; padding-left: 0}
.card ul li{position: relative; padding-left: 25px; margin-bottom: 10px; font-size: 14.5px}
.card ul li::before{content: "✔"; position: absolute; left: 0; top: 1px; color: #1f8f4a; font-weight: bold}
/* Адаптивність для мобільних */
@media (max-width: 768px){
    .cards{flex-direction: column; align-items: center}
    .card{max-width: 90%; margin-bottom: 25px}
    .materials h2{font-size: 28px}
    .materials p{font-size: 15px}
    .card h3{font-size: 18px}
    .card p,
    .card ul li{font-size: 14px}
}
.content{display: flex; align-items: center; gap: 40px; padding: 60px 10%; background-color: #fff; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.05); margin: 40px 0; padding: 60px 10%}
.content{display: flex; align-items: center; gap: 40px; padding: 60px 10%; max-width: 1200px; margin: 0 auto}
.content img{width: 400px; max-width: 100%; border-radius: 8px}
.text h2{margin-bottom: 15px}
.text p{line-height: 1.6}
.content .text{max-width: 600px}
.content .text p{font-size: 16px; line-height: 1.7; color: #444; margin-bottom: 16px}
.content .text ul{list-style: none; padding-left: 0; margin-top: 15px}
.content .text ul li{position: relative; padding-left: 28px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.6; color: #333}
.content .text ul li::before{content: "✔"; position: absolute; left: 0; top: 2px; color: #1f8f4a; font-weight: bold}
@media (max-width: 768px) {
    .content{flex-direction: column; padding: 40px 20px; gap: 30px}
    .content img{width: 100%; max-width: 100%}
    .content .text{max-width: 100%; text-align: left}
    .content .text h2{font-size: 22px; margin-bottom: 15px}
    .content .text p{font-size: 15px}
    .content .text ul li{font-size: 14.5px}
}
.footer{background-color: #222; color: white; text-align: center; padding: 20px}