/* ОБЩИЕ СТИЛИ И ПЕРЕМЕННЫЕ */
:root {
  /* Основные цвета (можно менять) */
  --primary-color: #004080;       /* Темно-синий */
  --secondary-color: #0080c0;     /* Посветлее, голубоватый */
  --accent-color: #ffc107;        /* Желтый акцент */
  --light-background: #f9f9f9;    /* Светлый фон */
  --dark-text: #333;
  --light-text: #f9f9f9;
  --transition-speed: 0.3s;
}
* {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  color: var(--dark-text);
  background-color: var(--light-background);
  line-height: 1.5;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ШАПКА + HERO-БЛОК */
header {
  width: 100%;
  background: linear-gradient(
    45deg, 
    var(--primary-color) 0%, 
    var(--secondary-color) 100%
  );
  color: var(--light-text);
  position: relative;
  overflow: hidden; /* Чтобы фон или элементы не вылезали за границы */
}

/* ВЕРХНЯЯ ПАНЕЛЬ (ЛОГО + МЕНЮ) */
.top-bar {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  align-items: center;
  padding: 15px 0px;
  width: 1160px;
}
.logo {
  font-size: 24px;
  font-weight: bold;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}
nav ul li {
  position: relative; /* Для выпадающего меню нужно relative */
}
nav ul li a {
  color: var(--light-text);
  font-weight: bold;
  padding: 5px 0;
  transition: color var(--transition-speed);
}
nav ul li a:hover {
  color: var(--accent-color);
}

/* ВЫПАДАЮЩЕЕ МЕНЮ */
.dropdown {
  display: none;
  position: absolute;
  top: 100%; /* Ниже основного пункта меню */
  left: 0;
  background-color: #fff;
  min-width: 150px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.dropdown li {
  display: block; 
}
.dropdown li a {
  display: block;
  padding: 6px 10px;
  color: var(--dark-text);
}
.dropdown li a:hover {
  background-color: #eee;
  color: var(--primary-color);
}
/* Показать подменю при наведении */
nav ul li:hover .dropdown {
  display: block;
}

/* HERO (большой баннер) */
.hero {
    display: flex;
    justify-content: center;
    width: 1160px;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    padding: 50px 0px;
    min-height: 400px; /* Высота баннера */
}
.hero-text {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
}
.hero h1 {
  font-size: 36px;
}
.hero p {
  font-size: 18px;
  max-width: 600px;
}
.btn-hero {
  padding: 15px 30px;
  background-color: var(--accent-color);
  color: var(--dark-text);
  font-weight: bold;
  border-radius: 4px;
  transition: background-color var(--transition-speed);
}
.btn-hero:hover {
  background-color: #e6ae07; /* немножко темнее */
}

/* ОСНОВНОЙ КОНТЕНТ */
main {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

/* ПРИМЕР РАЗДЕЛА: КАРТОЧКИ */
.cards-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.card {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 250px;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: transform var(--transition-speed);
}
.card:hover {
  transform: translateY(-5px);
}
.card-header {
  background-color: var(--primary-color);
  color: var(--light-text);
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
}
.card-content {
  padding: 15px;
  color: var(--dark-text);
}
.card-content p {
  margin-bottom: 10px;
}
.card-content a {
  color: var(--primary-color);
  font-weight: bold;
  transition: color var(--transition-speed);
}
.card-content a:hover {
  color: var(--secondary-color);
}

/* РАЗДЕЛ «ВЫБЕРИТЕ СВОЙ КЛАСС» */
.classes-section {
  margin-bottom: 40px;
}
.classes-section h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
.class-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.class-item {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.class-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.class-item h3 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
}
.class-item p {
  margin-bottom: 15px;
  line-height: 1.4;
}
.class-item a {
  font-weight: bold;
  color: var(--primary-color);
}
.class-item a:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}


.class-item {
transition: 
transform 0.3s ease,  /* анимация движения */
box-shadow 0.3s ease, /* анимация тени */
background-color 0.3s ease; /* анимация цвета фона */
}

.class-item:hover {
transform: translateY(-5px);
box-shadow: 0 2px 12px rgba(0,0,0,0.15);
background-color: #f5f5f5; /* любой светлый оттенок */
}
/* ПОДВАЛ */
footer {
  background-color: #eee;
  text-align: center;
  padding: 20px;
  margin-top: 40px;
  color: #666;
}

/* Экран до 992px (примерно планшеты) */
@media (max-width: 992px) {
    .hero {
      flex-direction: column;
      min-height: auto; /* чтобы баннер тянулся по высоте */
      text-align: center; /* можно выровнять текст по центру */
    }
  
    .hero-text {
      align-items: center;
    }
  
    .cards-section {
      justify-content: center; /* карточки будут выровнены по центру */
    }
  }
  
  /* Экран до 768px (планшеты/смартфоны в альбомной ориентации) */
  @media (max-width: 768px) {
    /* Меню можно переписать в «бургер», но в упрощенном виде - сделаем меню в столбик */
    nav ul {
      flex-direction: column;
      gap: 10px;
      background-color: var(--primary-color);
      padding: 10px;
      position: absolute;
      top: 60px; /* примерная высота шапки */
      right: 20px;
      display: none; /* по умолчанию скрываем (обычно JS включает/выключает) */
    }
    nav ul.show {
      display: flex; /* если добавить класс .show, меню появится */
    }
    
    /* Можно упростить отображение шапки (добавлять бургер-иконку через HTML/JS) */
    .top-bar {
      flex-wrap: wrap;
    }
  
    .cards-section {
      flex-direction: column;
    }
  
    .card {
      flex: 1 1 100%;
    }
  }
  
  /* Экран до 576px (смартфоны в портретной ориентации) */
  @media (max-width: 576px) {
    .logo {
      font-size: 20px;
    }
  
    .hero h1 {
      font-size: 28px;
    }
  
    .hero p {
      font-size: 16px;
    }
    
    .btn-hero {
      width: 100%;
      text-align: center;
    }
    
    .cards-section {
      gap: 15px;
    }
  
    .cards-section .card {
      min-width: auto;
    }
  
    /* Общий отступ поменьше */
    main {
      padding: 0 10px;
    }
  }