/* ----------------- Общие стили ----------------- */
* {margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif;}
body {line-height:1.6; color:#333; background:#f9f9f9;}
.container {width:90%; max-width:1200px; margin:0 auto;}

/* ----------------- Header ----------------- */
header {background:#0a7a4f; color:#fff; padding:15px 0;}
header h1 {display:inline-block; font-size:1.8em;}
header nav {float:right;}
header nav a {color:#fff; margin-left:20px; text-decoration:none; font-weight:bold;}

/* ----------------- Hero Section ----------------- */
.hero {background:#e0f5ec; padding:60px 0;}
.hero-container {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.hero-text {flex:1 1 500px; padding:20px; opacity:0; transform: translateY(20px); animation: fadeInUp 1s forwards;}
.hero-image {flex:1 1 400px; padding:20px;}
.hero-image img {width:100%; border-radius:15px; opacity:0; transform: translateY(20px); animation: fadeInUp 1s 0.3s forwards;}
.hero h2 {font-size:2.2em; margin-bottom:20px;}
.hero p {font-size:1.2em; margin-bottom:30px;}
.btn, .cta-btn {background:#0a7a4f; color:#fff; padding:15px 30px; text-decoration:none; border-radius:5px; font-weight:bold; transition:0.3s;}
.btn:hover, .cta-btn:hover {background:#07603a;}

/* ----------------- Sections ----------------- */
section {padding:60px 0;}
h2 {text-align:center; margin-bottom:40px;}

/* ----------------- Cases ----------------- */
.cases .case-grid, .testimonial-carousel .testimonial-slide {display:flex; gap:20px; flex-wrap:wrap; justify-content:center;}
.case, .testimonial {background:#fff; padding:20px; border-radius:15px; flex:1 1 45%; box-shadow:0 5px 15px rgba(0,0,0,0.1); opacity:0; transform: translateY(20px); animation: fadeInUp 0.8s forwards;}
.case img, .testimonial img {width:100%; border-radius:10px; margin-bottom:15px;}

/* ----------------- Contact Form ----------------- */
.contact form {display:flex; flex-direction:column; gap:15px; max-width:500px; margin:0 auto;}
.contact input, .contact textarea {padding:10px; border:1px solid #ccc; border-radius:5px;}
.contact button {padding:15px; border:none; background:#0a7a4f; color:#fff; border-radius:5px; cursor:pointer; font-weight:bold; transition:0.3s;}
.contact button:hover {background:#07603a;}

/* ----------------- Footer ----------------- */
footer {background:#222; color:#fff; padding:20px 0; text-align:center;}
footer nav a {color:#fff; margin:0 10px; text-decoration:none;}

/* ----------------- Testimonials Carousel ----------------- */
.testimonial-carousel {position:relative; overflow:hidden; max-width:900px; margin:0 auto;}
.testimonial-slide {display:flex; transition: transform 0.5s ease-in-out;}
.testimonial-slide .testimonial {min-width:100%; flex:0 0 100%;}
.prev, .next {position:absolute; top:50%; transform:translateY(-50%); background:#0a7a4f; color:#fff; border:none; padding:10px; cursor:pointer; border-radius:50%;}
.prev {left:10px;}
.next {right:10px;}

/* ----------------- Popup Form ----------------- */
.popup {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); justify-content:center; align-items:center;}
.popup-content {background:#fff; padding:30px; border-radius:10px; max-width:400px; width:100%; position:relative;}
.popup .close {position:absolute; top:10px; right:15px; cursor:pointer; font-size:1.5em;}

/* ----------------- Animations ----------------- */
@keyframes fadeInUp {to {opacity:1; transform:translateY(0);}}

/* ----------------- Мобильная адаптация ----------------- */
@media (max-width:1024px) {
    .hero-container {flex-direction:column-reverse; text-align:center;}
    .hero-text, .hero-image {flex:1 1 100%; padding:10px;}
    header nav {float:none; margin-top:10px;}
    header nav a {margin: 0 10px;}
    .case, .testimonial {flex:1 1 80%;}
}

@media (max-width:768px) {
    .hero h2 {font-size:1.8em;}
    .hero p {font-size:1.1em;}
    .btn, .cta-btn {padding:12px 25px;}
    .case, .testimonial {flex:1 1 90%;}
    .contact form {width:90%;}
}

@media (max-width:480px) {
    .hero {padding:40px 0;}
    .hero h2 {font-size:1.5em;}
    .hero p {font-size:1em;}
    .btn, .cta-btn {padding:10px 20px;}
    .case, .testimonial {flex:1 1 100%;}
    header h1 {font-size:1.5em;}
    header nav {text-align:center;}
}