/* ========================================
   СБРОС СТИЛЕЙ
======================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Montserrat',sans-serif;
    /* цвет верхушки  */
    background:#e9ddcf;
    /* текст о школе */
    color:#2f241f;
    overflow-x:hidden;
    line-height:1.7;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
   
}

.container{
    width:min(1200px,90%);
    margin:auto;
}

section{
    padding:100px 0;
}

h1,h2,h3{
    font-family:'Cormorant Garamond',serif;
}

h2{
    font-size:48px;
    text-align:center;
    margin-bottom:25px;
    /* руководитель школы */
    color:#3e2d26;
}

/* ========================================
   HEADER
======================================== */

header{
    position:relative;
    height:100vh;
    overflow:hidden;
}

/* .hero video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
} */

.overlay{
    position:absolute;
    inset:0;
    /* фон на главном */
    background:#b4a492;
    z-index:-1;
}

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 6%;
    z-index:999;
    transition:.4s;
}

.navbar.scrolled{
    background:white;
    box-shadow:0 5px 20px rgba(217, 14, 14, 0.08);
}

.logo img{
    height:200px;
}

.navbar ul{
    display:flex;
    gap:35px;
}

.navbar a{
    /* цвет меню и кнопки записаться */
    color:#2f241f;
    font-weight:500;
    transition:.3s;
}

.navbar.scrolled a{
    color:#333;
}

.navbar a:hover{
    /* цвет кнопки записаться когда наводишь */
    color:#070707;
}
.button,
.hero-button{

    display:inline-block;

    padding:15px 40px;

    border-radius:50px;

/* кнопки */
   background: #ead7c0;   

    color:#222;

    font-weight:600;

    transition:.35s;

    box-shadow:0 10px 25px rgba(212,175,55,.35);

}

.button:hover,
.hero-button:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(212,175,55,.45);

}
.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.hero-content{
/* цвет текса на главном */
color:white;

max-width:850px;

padding:20px;

}

.hero h1{

font-size:78px;

margin-bottom:25px;

}

.hero p{

font-size:24px;

margin-bottom:45px;

font-weight:300;

}
#about{
/* фон на разделе о школе */
background:#e9ddcf;

}

#about p{

max-width:900px;

margin:30px auto;

text-align:center;

font-size:20px;

}

.advantages{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

margin-top:70px;

}

.advantages div{

background:#fff;

padding:35px;

border-radius:20px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

}

.advantages div:hover{

transform:translateY(-10px);

}

.advantages h3{

font-size:52px;

color:#d4af37;

}

.advantages p{

margin-top:10px;

font-size:18px;

}
#teacher{

background:#faf7f2;

}

#teacher .container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.teacher-photo{
    width:100%;
    max-width:500px;
    margin:0 auto;
}

.teacher-photo img{
    width:100%;
    height:auto;
    border-radius:25px;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.teacher-info h3{

font-size:36px;

margin:20px 0;
/* цвет фио руководителя */
color:#7b5b2c;

}

.teacher-info p{

margin-bottom:20px;

font-size:18px;

}
/* ========================================
   ОБЩИЕ СЕКЦИИ
======================================== */

.section {
    padding: 110px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 60px;
}

.section-title span {
    display: inline-block;
    color: #4a2f24;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.section-title h2 {
    font-size: 48px;
    margin-bottom: 15px;
}

.section-title p {
    max-width: 700px;
    margin: auto;
    color: #666;
    font-size: 18px;
}
/* ========================================
   НАПРАВЛЕНИЯ
======================================== */
/* 
.direction-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));

    gap: 30px;

}

.direction-card {

    background: white;

    padding: 40px;

    border-radius: 20px;

    text-align: center;

    transition: .4s;

    box-shadow: 0 15px 40px rgba(0,0,0,.08);

}

.direction-card:hover {

    transform: translateY(-12px);

}

.direction-icon {

    font-size: 60px;

    margin-bottom: 25px;

}

.direction-card h3 {

    font-size: 30px;

    margin-bottom: 20px;

    color: #7b5b2c;

} */
/* ========================================
   СТОИМОСТЬ
======================================== */

.gold {

    background: #faf7f1;

}

.price-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));

    gap: 35px;

}

.price-card {
/* цвет ячеек в ценах */
    background: #f5efe6;

    border-radius: 25px;

    padding: 45px;

    position: relative;

    transition: .4s;
/* цвет тени */
    box-shadow: 0 20px 45px rgba(47, 36, 31, 0.35);

}

.price-card:hover {

    transform: translateY(-10px);

}

.price-card h3 {

    font-size: 30px;

    margin-bottom: 20px;

}

.price-value {

    font-size: 42px;
/* в разделе стоимость цвет цен */
    color: #3e2d26;

    font-weight: bold;

    margin-bottom: 30px;

}

.price-card ul {

    line-height: 2;

}

.best {

    position: absolute;

    top: -15px;

    right: 20px;

    background: #d4af37;

    color: white;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;

}
/* расписание */

.gold {
/* цвет фона расписания и цен */
    background: #e9ddcf;

}

.raspisanie-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));

    gap: 35px;

}

.raspisanie-card {
/* цвет ячеек в расписание */
    background: #f5efe6;

    border-radius: 25px;

    padding: 45px;

    position: relative;

    transition: .4s;
/* цвет тени ячеек в расписание */
    box-shadow: 0 20px 45px rgba(47, 36, 31, 0.35);

}

.raspisanie-card:hover {

    transform: translateY(-10px);

}

.raspisanie-card h3 {

    font-size: 30px;

    margin-bottom: 20px;

}

.raspisanie-value {

    font-size: 42px;
/* цвет заголовкоы в ячейках расписания */
    color: #3e2d26;

    font-weight: bold;

    margin-bottom: 30px;

}

.raspisanie-card ul {

    line-height: 2;

}

.best {

    position: absolute;

    top: -15px;

    right: 20px;
/* надпись самый популярный */
    background: #4a2f24;
/* цвет текста надписи */
    color: white;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;

}
/* .best {

    position: absolute;

    top: -15px;

    right: 20px;

    background: #d4af37;

    color: white;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 14px;

} */
/* ========================================
   ГАЛЕРЕЯ
======================================== */
/* 
.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 20px;

}

.gallery-grid img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    border-radius: 20px;

    transition: .4s;

    cursor: pointer;

}

.gallery-grid img:hover {

    transform: scale(1.05);

} */
/* ========================================
   ОТЗЫВЫ
======================================== */

.reviews {

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));

    gap: 30px;

}

.review {
/* цвет отзывов */
    background: #f5efe6;

    padding: 40px;

    border-radius: 20px;

    box-shadow: 0 15px 35px rgba(0,0,0,.08);

    transition: .4s;

}

.review:hover {

    transform: translateY(-8px);

}

.review strong {

    display: block;

    margin-top: 20px;
/* цвет имен в отзывах */
    color: #3e2d26;

}
/* ==========================
   Анимация появления
========================== */

.hidden{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.show{

opacity:1;

transform:translateY(0);

}
/* ==========================
   Кнопка вверх
========================== */

#topButton{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:# 3e2d26;

color:white;

font-size:24px;

cursor:pointer;

display:none;

box-shadow:0 10px 20px rgba(0,0,0,.25);

transition:.3s;

z-index:999;

}

#topButton:hover{

transform:scale(1.1);

background:#b8860b;

}
/* ========================================
   БУРГЕР-МЕНЮ
======================================== */

/* .burger {

    display: none;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;

} */
 .burger{
    display:none;
    cursor:pointer;
    z-index:2000;
    position:relative;
}

.burger span {

    width: 30px;

    height: 3px;

    background: white;

    transition: .4s;

}

.navbar.scrolled .burger span {

    background: #222;

}

.burger.active span:nth-child(1) {

    transform: rotate(45deg) translateY(12px);

}

.burger.active span:nth-child(2) {

    opacity: 0;

}

.burger.active span:nth-child(3) {

    transform: rotate(-45deg) translateY(-12px);

}
.navbar{
    position:relative;
    z-index:1500;
}
.navbar ul{

    z-index:1900;

}
/* ==========================
   Слайдер руководителя
========================== */

.slider{

position:relative;

width:100%;

max-width:500px;

margin:auto;

overflow:hidden;

border-radius:20px;

}

.slide{

display:none;

width:100%;

border-radius:20px;

box-shadow:0 15px 35px rgba(251, 0, 0, 0.15);

}

.slide.active{

display:block;

animation:fade .8s;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}
.slider{
    position:relative;
    width:100%;
    max-width:500px;
    margin:auto;
}

.slide{
    display:none;
    width:100%;
    border-radius:20px;
}

.slide.active{
    display:block;
}
/* Размер текста в разделе "расписание" */

.raspisanie-card li{
    font-size:24px;
    line-height:1.6;
}

@media (max-width: 992px) {

    .burger {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        z-index: 9999;
    }

    .burger span {
        width: 30px;
        height: 3px;
        /* цвет меню три полоски */
        background: #3e2d26;
        display: block;
    }

}
.slide{
    display:none;
}

.slide.active{
    display:block;
}

.slider{
    max-width:420px;
    margin:auto;
}
/* ==========================
   ЯНДЕКС ФОРМА
========================== */

.yandex-form-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

.yandex-form {
    display: block;
    width: 100%;
    height: 1200px;
    border: none;
}

/* Планшет */
@media (max-width: 768px) {
    .yandex-form-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .yandex-form {
        height: 1050px;
    }
}

/* Телефон */
@media (max-width: 480px) {
    .yandex-form {
        height: 1000px;
    }
}