/* 🎨 Цветовые переменные */
:root {
  --primary-color: #0D2B4C;     /* Тёмно-синий */
  --accent-color: #DCA527;      /* Золотистый */
  --light-bg: #F7F7F7;          /* Светло-серый фон */
  --white: #FFFFFF;             /* Белый */
  --text-dark: #333333;         /* Основной текст */
  --text-gray: #444444;         /* Второстепенный текст */
  --star-color: #FFD700;        /* Звёзды отзывов */
}

body {margin:0; padding:0; font-family: 'Open Sans', sans-serif;}
h1, h2, h3 {font-family: 'Montserrat', sans-serif; margin:0;}
a {text-decoration:none; color:var(--primary-color);} /* ссылки тёмно-синие */

/* кнопки */
.btn {
  display:inline-block;
  padding:14px 26px;
  border-radius:8px;
  font-weight:bold;
  font-size:16px;
  transition:0.3s;
}
.btn-yellow {background:var(--accent-color); color:var(--white);}
.btn-yellow:hover {background:#c4911f;}
.btn-blue {background:var(--primary-color); color:var(--white);}
.btn-blue:hover {background:#0a213a;}

/* HERO */
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--white);
  text-align: center;
  position: relative;
  background-image: url('https://i.ibb.co/twQbL9kS/1000051117.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45); /* затемнение */
  z-index: 0;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero img {
  width: 50%;      /* логотип занимает 50% ширины */
  height: auto;    /* сохраняет пропорции */
  margin-bottom: 40px; /* отступ от заголовка и кнопок */
  margin-top: 30px;
}

.hero h1 {
  font-size: 42px;
  margin-bottom: 15px;
}

.hero p {
  font-size: 20px;
  max-width: 600px;
  margin: 0 auto 30px auto;
}

.hero .buttons {
  margin-top: 40px;  /* сдвигаем кнопки ниже */
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  z-index: 2;
}

.hero .buttons a {
  margin: 0 8px;
}


/* ABOUT */
.section {
  padding: 100px 20px; /* Десктоп — больше воздуха */
  max-width: 1200px;
  margin: auto;
}

/* Планшеты */
@media(max-width: 1024px) {
  .section {
    padding: 70px 20px;
  }
}

/* Телефоны */
@media(max-width: 768px) {
  .section {
    padding: 50px 15px;
  }
}
.about {display:flex; flex-wrap:wrap; gap:30px; align-items:center;}
.about img {flex:1; max-width:500px; border-radius:10px;}
.about-text {flex:1;}
.about-text h2 {color:var(--primary-color); font-size:36px; margin-bottom:20px;}
.about-text p {font-size:18px; line-height:1.6; color:var(--text-dark);}

/* SERVICES */
.services {background:var(--light-bg); text-align:center;}
.service-cards {display:flex; flex-wrap:wrap; gap:20px; margin-top:40px;}
.service-card {
  background:var(--white);
  border-radius:10px;
  padding:20px;
  flex:1; min-width:250px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
}
.service-card h3 {color:var(--primary-color); font-size:22px; margin:10px 0;}
.service-card p {color:var(--text-gray); font-size:16px;}


/* REVIEWS */
.reviews {background:var(--light-bg); text-align:center;}
.review-cards {display:flex; flex-wrap:wrap; gap:20px; margin-top:40px;}
.review-card {
  background:var(--white);
  border-radius:10px;
  padding:20px;
  flex:1; min-width:250px;
  box-shadow:0 4px 10px rgba(0,0,0,0.05);
  text-align:left;
}
.review-header {display:flex; align-items:center; gap:15px; margin-bottom:10px;}
.review-header img {width:50px; height:50px; border-radius:50%;}
.stars {color:var(--star-color); margin-bottom:10px;}
.review-card p {color:var(--text-gray); font-size:16px; font-style:italic;}

/* CONTACT */
.contact {display:flex; flex-wrap:wrap; gap:30px;}
.contact-info {flex:1; min-width:250px;}
.contact-form {flex:1; min-width:250px;}
.contact-info p {margin:8px 0; font-size:16px;}
.contact-info a {color:var(--primary-color); font-weight:bold;}

/* Иконки контактов */
.contact-info img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 6px;
  filter: none; /* убираем общий фильтр */
}

/* Индивидуальные фирменные цвета */
.contact-info img[alt="WhatsApp"] {
  filter: invert(38%) sepia(89%) saturate(611%) hue-rotate(90deg) brightness(95%) contrast(92%);
}

.contact-info img[alt="Email"] {
  filter: invert(22%) sepia(91%) saturate(5400%) hue-rotate(5deg) brightness(97%) contrast(104%);
}

.contact-info img[alt="Instagram"] {
  filter: invert(37%) sepia(85%) saturate(1300%) hue-rotate(310deg) brightness(95%) contrast(95%);
}

.contact-info img[alt="Facebook"] {
  filter: invert(36%) sepia(98%) saturate(1350%) hue-rotate(205deg) brightness(95%) contrast(95%);
}


.contact-form input, .contact-form textarea {
  width:100%; padding:10px; margin-bottom:10px;
  border:1px solid #ccc; border-radius:6px;
}
.contact-form button {border:none; cursor:pointer;}



/* FOOTER */
.footer {background:var(--primary-color); color:var(--white); text-align:center; padding:20px;}

/* Responsive */
@media(max-width:768px){
  .hero h1 {font-size:28px;}
  .about {flex-direction:column;}
}

/* Flags */
.flag-icon {
  width: 18px;
  height: 12px;
  vertical-align: middle;
  margin-left: 4px;
  border-radius: 2px;
  display: inline-block;
}



/* Ссылки по умолчанию — тёмно-синие */
a {
  color: var(--primary-color);
}

/* Ссылки внутри .contact-info — тоже тёмно-синие */
.contact-info a {
  color: var(--primary-color) !important;
  font-weight: bold;
}

/* Кнопки всегда с белым текстом */
.btn-yellow,
.btn-blue {
  color: var(--white) !important;
}

.contact-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.contact-buttons .btn {
  flex: 1; /* кнопки будут одинаковой ширины */
  text-align: center;
}