/*
Theme Name: Yoga
Description: Тема для студии йоги
Version: 1.0
Author: Yoga Studio
*/

/* Fonts are loaded via fonts.css */

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_mediumitalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_bolditalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_blackitalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'GothamPro';
    src: url('./style/fonts/GothamPro/gothampro_lightitalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'BubbleSans';
    src: url('./style/fonts/BubbleSans/BubbleSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Racama';
    src: url('./style/fonts/Racama/Racama.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
/*Обнуление*/
*,
b::before,
*::after {
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--color-link);
}

ul,
ol,
li {
    list-style: none;
}

img {
    vertical-align: top;
}

button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: inherit;
    font-size: inherit;
}

html,
body {
    height: 100%;
    line-height: 150%;
    font-family: GothamPro;
    color: var(--color-default);
    font-size: var(--font-size-default);
    background-color: var(--color-background);
    overflow-x: hidden;
}

body {
    display: grid;
    grid-template-rows: 1fr auto;
}

input,
textarea {
    outline: none;
}

/* ------------------------------------------------------------------------------------ */

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 20px;
    box-sizing: content-box;
    width: 100%;
}

.ibg {
    position: relative;
}

.ibg img,
.ibg svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

h1 {
    font-size: var(--font-size-h1);
    margin-bottom: 5px;
    font-weight: 600;
    font-family: Bubble Sans;
    text-transform: uppercase;
}

h2 {
    font-size: var(--font-size-h2);
    margin-bottom: 40px;
    text-transform: uppercase;
    color: var(--color-accent-light);
}

h3 {
    font-size: var(--font-size-h3);
    margin-bottom: 30px;
}

main {
    gap: 110px;
    display: flex;
    flex-direction: column;
    margin-top: 120px;
}


button {
    gap: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    padding: 15px 30px;
    border-radius: 5px;
    background: transparent;
    color: var(--button-fill);
    border: 1px solid var(--button-fill);
    font-size: var(--font-size-default);
}


button[disabled] {
    cursor: not-allowed;
    filter: opacity(0.7);
}

button.button_fill {
    border: none;
    transition: 0.2s all;
    color: var(--color-white);
    background: var(--button-fill);
}

button.button_fill:hover {
    filter: brightness(0.9);
}

h2::after,
h2::before {
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--color-accent-light);
    display: block;
}

h2 {
    white-space: nowrap;
    gap: 30px;
    text-align: center;
    line-height: 120%;
    display: flex;
    align-items: center;
}


.slider__button,
.slider__button.swiper-button-next, 
.slider__button.swiper-button-prev {
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 70px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 5px;
    background: var(--color-white);
}

.slider__button.swiper-button-next::after, 
.slider__button.swiper-button-prev::after {
    content: none;
}

.slider__button.swiper-button-next svg, 
.slider__button.swiper-button-prev svg {
    width: auto;
    height: auto;
}

@media (max-width: 540px) {
    .slider__button,
    .slider__button.swiper-button-next, 
    .slider__button.swiper-button-prev {
        width: 50px;
    }

    .slider__button svg, 
    .slider__button svg {
        transform: scale(0.7);
    }
}

section.section_fill {
    background: var(--section-fill);
    border-top: 10px solid var(--color-green);
    border-bottom: 10px solid var(--color-green);
}

.main_margin {
    margin: 160px 0px;
    gap: 0px;
}

.main_margin h1.title {
    margin-bottom: 40px;
}

.main_margin .block-content__info {
    padding-top: 0px;
}

.main_margin .contacts {
    margin: 100px 0px -160px;
}

.block-content__info .block-content__context {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.block-content__context h3 {
    margin-bottom: 0px;
}


@media (max-width: 1500px) {
    .previews__swiper  .swiper-slide {
        width: 49% !important;
    }
}

@media (max-width: 1024px) {
    .previews__swiper  .swiper-slide {
        width: 100% !important;
    }
}

/* Fonts are loaded via fonts.css */


:root {
    /* Шрифты */
   --font-size-default: 18px;
   --font-size-label: 12px;
   --font-size-h1: 60px;
   --font-size-h2: 45px;
   --font-size-h3: 28px;

   /* Тени */
   --box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.25);

   /* Контейнер */
   --container-width: 1720px;

   /* Цвета */
   --color-border: #2780AE;
   --color-hover: #40404027;

   --color-icon: #A6D1E8;
   --color-icon-active: #2780AE;

   --color-focus: #2A2A2A;
   --color-link: #2780AE;
   --color-accent: #2780AE;
   --color-accent-light: #2180AD;
   --section-fill: #FBF5EF;
   --color-red: #FFC6BA;
   --color-white: #FEFEFE;
   --color-default: #333239;
   --color-black: #333239;
   --color-green: #7EB952;
   --color-category: #2780AE;

   --color-background: #FEFEFE;

   --color-scroll: #2780AE;

   --button-fill: #2780AE;
   --color-hover-option: #40404020;
}

@media (max-width: 1200px) {
   :root {
       --font-size-h1: 50px;
       --font-size-h2: 40px;
       --font-size-h3: 25px;
   }
}

@media (max-width: 990px) {
   :root {
       --font-size-h1: 45px;
       --font-size-h2: 35px;
       --font-size-h3: 23px;
       --font-size-default: 17px;
   }

}

@media (max-width:490px) {
   :root {
       --font-size-h1: 40px;
       --font-size-h2: 25px;
       --font-size-h3: 20px;
       --font-size-default: 16px;
   }
}

@media (max-width:390px) {
   :root {
       --font-size-h1: 35px;
       --font-size-h2: 23px;
       --font-size-h3: 19px;
   }
}

/* Elem hover */

.elem_hover {
    transition: 0.1s ease-out;
}

.elem_hover:hover {
    color: #4680C2;
}

.elem_hover svg * {
    transition: 0.1s ease-out;
}

.elem_hover:hover svg * {
    fill: #4680C2;
}


/* Logo */

.logo {
    position: relative;
    aspect-ratio: 5/4;
    width: 100%;
    max-width: 100px;
}

.logo svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Social */

.social {
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.social__icon {
    width: 40px;
    aspect-ratio: 1;
    position: relative;
}

.social__icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Header */

.header {
    position: fixed;
    z-index: 100;
    width: 100%;
    background: #FEFEFE;
}

.header .container {
    gap: 50px;
    display: flex;
    align-items: center;
    padding: 20px 50px;
    justify-content: space-between; 
}

.header__logo {
    width: 100px;
    min-width: 100px;
}

.menu__list {
    gap: 20px;
    display: flex;
    align-items: center;
}

.menu {
    max-width: 100%;
}

.menu__item svg {
    aspect-ratio: 1;
    width: 8px;
    min-width: 8px;
    height: auto;
}

.menu__link,
.menu-details__link {
    color: var(--color-default);
    white-space: nowrap;
}

.menu__link {
    position: relative;
    z-index: 20;
}

.menu-details {
    position: relative;
}

.menu-details:hover .menu-details__content {
    display: block;
}

.menu-details__arrow {
    transition: 0.1s ease-out;
}

.menu-details:hover .menu-details__arrow {
    transform: rotate(180deg);
}

.menu-details__summary {
    gap: 8px;
    display: flex;
    align-items: center;
}

.menu-details__content {
    display: none;
    position: absolute;
    top: 0px;
    padding-top: 30px;
}

.menu-details__list {
    padding: 15px 20px 10px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    width: 300px;
    background: #FFF;
}

.header__link {
    font-size: 20px;
}

.header__link.text_involve {
    font-size: 18px;
}

.header__link_bold {
    font-weight: 700;
}


.header__gamburger {
    position: relative;
    padding: 10px;
    margin: 0px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.header__gamburger::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #FFF;
    border-radius: 45px;
}

.header__gamburger svg {
    position: relative;
    z-index: 2;
}

.header__bg {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    z-index: 2;
    background: #00000080;
}



.header__close {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
    height: auto;
}


.header__close * {
    stroke: #2a2a2a
}

.header_open .header__close {
    display: block;
}

.header_open .header__bg {
    display: block;
}

.header.header_open {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    height: 100%;
    justify-content: end;
    left: auto;
    right: 0px;
    padding: 0px;
    background: transparent;
}

.header.header_open .container {
    align-content: start;
    background: #fff;
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100%;
    margin: 0;
    max-width: 400px;
    position: relative;
    width: 100%;
    z-index: 2;
}

.header.header_open .menu {
    display: flex;
    height: 100%;
}

.header.header_open .menu__list {
    flex-direction: column;
    align-items: start;
}

.header.header_open .header__contacts {
    gap: 20px;
    display: flex;
    align-items: start;
    flex-direction: column;
}

.header.header_open .header__contacts svg * {
    fill: var(--color-accent);
}

.header.header_open .header__gamburger {
    display: none;
}

.header.header_open .menu-details__content {
    position: relative;
    padding-top: 0px;
}

.header.header_open .menu__link, .menu-details__link {
    white-space: normal;
}

.header__contacts {
    display: none;
}

@media (max-width: 768px) {
    .menu {
        display: none;
    }
}

@media (max-width: 490px) {
    .header.header_open .container {
        max-width: none;
    }
}

/* Breadcrumbs */

.breadcrumbs__list {
    gap: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
    content: "/";
    margin-left: 5px;
}

.breadcrumbs__link {
    color: var(--color-default);
}

.breadcrumbs__item:last-child .breadcrumbs__link,
.breadcrumbs__current {
    pointer-events: none;
    color: var(--color-accent);
}


/* Header title */

.header-title h1.title {
    white-space: nowrap;
    gap: 40px;
    text-align: center;
    line-height: 120%;
    display: flex;
    font-family: GothamPro;
    font-weight: 400;
    color: var(--color-accent);
    font-size: var(--font-size-h2);
    align-items: center;
}

.header-title h1::after,
.header-title h1::before {
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--color-accent-light);
    display: block;
}

.header-title__desc {
    max-width: 1200px;
    text-align: center;
    line-height: 150%;
    margin: 0px auto 40px;
}

@media (max-width: 768px) {
    .header-title h1.title {
        gap: 20px;
        white-space: normal;
    }

    h2.title {
        white-space: normal;
    }

    .header-title h1.title {
        width: 100%;
        justify-content: center;
    }

    .header-title h1::after,
    .header-title h1::before {
        content: none;
    }

}

/* Categories */


.categories__list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.categories__item {
    transition: 0.2s all;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    background: var(--color-white);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

.categories__item:hover {
    filter: brightness(0.95);
}

.categories__item.categories__item_active {
    filter: none;
    box-shadow: none;
    background: var(--color-accent);
    color: var(--color-white);
}

.categories__item.categories__item_active a {
    color: var(--color-white);
}


/* Hero */

.hero {
    min-height: 70vh;
    position: relative;
    width: 100vw;
    left: 0px;
}

.hero__content {
    width: 100%;
    display: flex;
    padding: 150px 125px 0px 40px;
    justify-content: space-between;
}

.hero__logo {
    aspect-ratio: 7/3;
    width: 100%;
    max-width: 700px;
    max-height: 300px;
}

.hero__logo img {
    object-fit: contain;
}

.hero .container {
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 2;
    max-width: none;
}

.hero__link {
    margin-top: 170px;
    height: max-content;
}

.hero__link button {
    font-size: 52px;
    padding: 10px 40px;
}

.hero.slider-column_1 .slider__image {
    min-height: 76vh;
}

.hero.slider-column_1 .slider__count::before {
    color: #9DCCE7;
}
.hero.slider-column_1 .slider__count::after {
    background: #9DCCE7;
}

@media (max-width: 1140px) {
    .hero__content {
        padding: 50px 50px 0px 40px;
    }

    .hero__logo {
        max-width: 400px;
        max-height: 250px;
    }

    .hero__link {
        margin-top: 170px;
    }

    .hero__link button {
        font-size: 42px;
        padding: 10px 40px;
    }
}

@media (max-width: 860px) {
    .hero__link button {
        font-size: 32px;
    }

    .hero__logo {
        max-width: 240px;
        max-height: 190px;
    }
}

@media (max-width: 630px) {
    .hero__content {
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }

    .hero__logo {
        max-width: none;
        max-height: none;
    }

    .hero__link {
        margin-top: 40px;
    }
}


/* Slider 1 Columns */

.slider-column_1 .swiper-wrapper {
    counter-reset: my-counter;
}

.slider-column_1 .slider__image {
    position: relative;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    min-height: auto;
    object-fit: cover;
}

.slider-column_1 .slider__image img {
    object-position: bottom;
}

.slider-column_1 .swiper__actions {
    position: absolute;
    bottom: 15px;
    right: 30px;
    z-index: 2;
    display: flex;
    gap: 5px;
}

.slider-column_1 .slider__count {
    counter-increment: my-counter;
    position: absolute;
    bottom: 170px;
    left: -100px;
    transform: rotate(-90deg);
    display: flex;
    align-items: center;
    gap: 10px;
}

.slider-column_1 .slider__count::before {
    font-family: Racama;
    content: '0'counter(my-counter);
    font-weight: 500;
    position: relative;
    z-index: 2;
    color: var(--color-white);
    font-size: 96px;
    height: 80px;
    line-height: 1;
}

.slider-column_1 .slider__count::after {
    content: '';
    width: 20vw;
    height: 3px;
    background: var(--color-white);
    max-width: 250px;
}

@media (max-width: 790px) {
    .slider-column_1 .slider__count {
        left: -70px;
    }

    .slider-column_1 .slider__count::before {
        font-size: 64px;
    }
}


@media (max-width: 640px) {
    .slider-column_1 .slider__count {
        display: none;
    }
}



/* Slider 2 Columns*/

.slider-column_2 {
    position: relative;
}

.slider-column_2 .swiper {
    max-width: 1480px;
}


.slider-column_2 .swiper__actions {
    bottom: 250px;
    top: auto;
    left: 0px;
    max-width: var(--container-width);
    margin: 0 auto;
    position: relative;
    width: 100%;
}


.slider-column_2 .slider__button {
    background: var(--color-accent);
}

.slider-column_2 .slider__button svg * {
    fill: var(--color-white);
}

.slider-column_2 .slider__button.swiper-button-prev {
    left: 0px;
}

.slider-column_2 .slider__button.swiper-button-next {
    right: 0px;
}


.slider-column_2 .slider__image {
    width: 100%;
    aspect-ratio: 18/13;
    min-height: auto;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}







/* Advantages */

.advantages h2 {
    white-space: nowrap;
}

.advantages .text {
    max-width: 750px;
    margin-bottom: 20px;

}
.advantages__list {
    gap: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.advantage__image {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.advantage__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 13/19;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--color-border);
}

.advantage__name {
    text-align: center;
    padding: 0px 7px;
}

.advantage__name::before {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcgMUw5LjY2NjY3IDQuNjY2NjdMMTMuMzMzMyA0LjY2NjY3TDEwLjY2NjcgNy4zMzMzM0wxMS45OTk5IDEwLjk5OTlMNyA5LjY2NjY3TDIuMDAwMDEgMTAuOTk5OUwzLjMzMzM0IDcuMzMzMzNMMC42NjY2NzQgNC42NjY2N0w0LjMzMzM0IDQuNjY2NjdMNyAxWiIgZmlsbD0iIzI3ODBBRSIvPgo8L3N2Zz4K');
}

.advantage__name::after {
    content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcgMUw5LjY2NjY3IDQuNjY2NjdMMTMuMzMzMyA0LjY2NjY3TDEwLjY2NjcgNy4zMzMzM0wxMS45OTk5IDEwLjk5OTlMNyA5LjY2NjY3TDIuMDAwMDEgMTAuOTk5OUwzLjMzMzM0IDcuMzMzMzNMMC42NjY2NzQgNC42NjY2N0w0LjMzMzM0IDQuNjY2NjdMNyAxWiIgZmlsbD0iIzI3ODBBRSIvPgo8L3N2Zz4K');
}


@media (max-width: 1200px) {
    .advantages__list {
        gap: 20px;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 820px) {
    .advantages__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .advantages h2 {
        white-space: normal;
    }
}

@media (max-width: 420px) {
    .advantages__list {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Feedbacks */

.feedbacks__list {
    gap: 30px;
    display: flex;
    flex-direction: column;
}
.feedbacks__item {
    gap: 30px;
    display: grid;
    grid-template-columns: 100px 1fr;
}
.feedback__avatar {
    overflow: hidden;
    aspect-ratio: 1;
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    border-radius: 50%;
}

.feedback__content {
    gap: 10px;
    display: flex;
    flex-direction: column;
}
.feedback__name {
    font-weight: 400;
    line-height: normal;
    font-size: 14px;
    margin-bottom: 5px;
}

.feedback__title {
    line-height: normal;
    font-weight: 400;
    font-size: 20px;
}

.feedback__desc {
    line-height: 150%;
}

.default-avatar {
    width: 100%;
    height: 100%;
    background: #2780AE;
    display: grid;
    place-items: center;
}

.avatar-initial {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

@media (max-width: 600px) {
    .feedbacks__item {
        grid-template-columns: 45px 1fr;
    }
}

@media (max-width: 460px) {
    .feedbacks__item {
        grid-template-columns: 1fr;
    }
}


/* Regular Classes */

.regular-classes.regular-classes_preview .regular-classes__list {
    grid-template-columns: repeat(3, 1fr);
}

.regular-classes.regular-classes_preview .class__link {
    padding: 0px;
    border-radius: 0px;
    box-shadow: none;
}

.regular-classes .container {
    height: 100%;
}

.regular-classes__list {
    gap: 15px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.class__link {
    gap: 20px;
    display: flex;
    padding: 15px;
    border-radius: 5px;
    flex-direction: column;
    height: 100%;
    box-shadow: var(--box-shadow);
}

.class h3 {
    margin-bottom: 0px;
}

.class__image {
    width: 100%;
    border-radius: 5px;
    aspect-ratio: 3/2;
    overflow: hidden;
}

.class__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.class__name {
    font-size: 26px;
    line-height: 130%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.class__date {
    font-size: 15px;
    color: var(--color-default);
    margin-bottom: -15px;
}

.class__description {
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.class__category {
    background: var(--color-category);
    color: var(--color-white);
    padding: 5px 15px;
    border-radius: 10px;
    font-size: 16px;
}

.class__link h3,
.class__link p {
    color: var(--color-default);
}

@media (max-width: 1500px) {
    .regular-classes__list {
        gap: 15px;
    }
}


@media (max-width: 1200px) {
    .class__name {
        font-size: 22px;
    }

    .regular-classes.regular-classes_preview .regular-classes__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .regular-classes__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .class__name {
        font-size: 20px;
    }

    .class__description {
        -webkit-line-clamp: 3;
    }

    .regular-classes__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 490px) {
    .regular-classes.regular-classes_preview .regular-classes__list {
        grid-template-columns: 1fr;
    }

    .regular-classes__list {
        grid-template-columns: 1fr;
    }
}

/* FAQ STYLES FROM ORIGINAL */
.faq h2.title {
    margin-bottom: 50px;
}

.faq__list {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
}
.faq__item {
    border-bottom: 1px solid #E8E6EE;
}
.faq-details__summary {
    gap: 50px;
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 25px 0px;
    font-size: var(--font-size-h3);
    justify-content: space-between;
}
.faq-details__icon {
    position: relative;
}

.faq-details__icon svg {
    aspect-ratio: 1;
    width: 26px;
    height: auto;
}

.line-vertical {
    transition: 0.2s all;
}

.faq-details[open] .line-vertical {
    transform: rotateX(-90deg);
}

.faq-details__content {
    padding: 0px 0px 20px;
}

/* ARTICLE GROUPS STYLES FROM ORIGINAL */
.article__groups {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.article__group {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.article__group a {
    color: var(--color-default);
}

/* Hero detail */

.hero-detail .container {
    gap: 40px;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.hero-detail__content {
    gap: 30px;
    display: flex;
    width: 100%;
    flex-direction: column;
}

.hero-detail__content .text {
    text-align: center;
}

.hero-detail__actions {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.hero-detail__advantage {
    gap: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.hero-detail__image {
    width: 100%;
    aspect-ratio: 58/37;
}

.hero-detail__link button.button_fill {
    background: var(--color-white);
    color: var(--color-default);
    box-shadow: var(--box-shadow);
}

.hero-detail__advantages {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(3, 1fr);
}

.hero-detail__advantage-title {
    text-align: center;
}

@media (max-width: 990px) {
    .hero-detail__advantages {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 590px) {
    .hero-detail__advantages {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 420px) {
    .hero-detail__actions {
        flex-direction: column;
    }

    .hero-detail__link button.button_fill {
        width: 100%;
    }
}





.previews .container {
    position: relative;
}

@media (max-width: 1024px) {
    .slider-column_2 .swiper__actions {
        position: absolute;
        width: 100%;
        top: 60%;
        bottom: auto;
    }
}


/* About detail */

.hero-detail + .about-detail {
    margin: 150px 0px;
}
.about-detail__desc {
    text-align: center;
    max-width: 1200px;
    margin: 0px auto;
}


/* Article */

.article .container {
    gap: 120px;
    display: flex;
}

.article__column,
.wp-block-column {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.article__column h2,
.wp-block-column h2 {
    text-align: start;
    white-space: normal;
    font-size: 25px;
    line-height: 130%;
    text-transform: none;
    margin-bottom: 0px;
}

.article__column h2::before,
.article__column h2::after,
.wp-block-column h2::before,
.wp-block-column h2::after {
    content: none;
}

.article__column img,
.wp-block-column img {
    object-fit: contain;
    aspect-ratio: 8/5;
    width: 100%;
}

.article__column p,
.wp-block-column p {
    line-height: 150%;
    text-align: justify;
}

.article__column ul,
.wp-block-column ul {
    gap: 10px;
    display: flex;
    padding-left: 20px;
    flex-direction: column;
}


.article__column ul li,
.wp-block-column ul li {
    list-style: disc;
}

.article__groups {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.article__group {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.article__group a {
    color: var(--color-default);
}


@media (max-width: 1200px) {
    .article .container {
        gap: 60px;
    }
}

@media (max-width: 830px) {
    .article .container {
        gap: 30px;
        grid-template-columns: 1fr;
    }
}



/* Block content */

.block-content {
    gap: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.block-content h2::before {
    content: none
}

.block-content.block-content_reverse h2::before {
    content: ''
}

.block-content.block-content_reverse h2::after {
    content: none;
}

.block-content.block-content_reverse > *:nth-child(1) {
    grid-column: 2;
    grid-row: 1;
}

.block-content__info {
    padding: 30px 100px 30px 0px;
}

.block-content.block-content_reverse .block-content__info {
    padding: 30px 0px 30px 100px;
}

.block-content__image, 
.block-content__swiper {
    aspect-ratio: 10/7;
    width: 100%;
    max-width: 50vw;
}

@media (max-width: 1600px) {
    .block-content__image, 
    .block-content__swiper {
        aspect-ratio: auto;
    }
}

@media (max-width: 1100px) {
    .block-content {
        grid-template-columns: 1fr;
    }
    .block-content__image, 
    .block-content__swiper {
        max-width: 100%;
        aspect-ratio: 10 / 7;
    }

    .block-content {
        padding: 0px 20px 40px;
    }

    .block-content__info {

        padding: 0px;
    }

    .block-content.block-content_reverse > *:nth-child(1) {
        grid-column: 1;
    }

    .block-content.block-content_reverse .block-content__info {
        padding: 0px;
    }
}



.shedule-table__header {
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 15px;
    background: var(--section-fill);
    margin-bottom: 20px;
    border-radius: 5px;
}

.shedule-table__th {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-transform: lowercase;
}

.shedule-table__date {
    font-size: 25px;
}

.shedule-table__list {
    gap: 20px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.shedule-table__group {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.shedule-table__item {
    box-shadow: var(--box-shadow);
    position: relative;
}

.shedule-table__item::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: -2px;
    bottom: -2px;
    border-radius: 5px;
    background: var(--color-category);
}

.shedule-table__content {
    padding: 20px;
    gap: 5px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    z-index: 2;
    position: relative;
    background: var(--color-background);
}

.shedule__name {
    font-weight: 400;
}
.shedule__time {
    font-size: 15px;
}
.shedule__place {
    font-size: 11px;
    margin-bottom: 5px;
    line-height: normal;
}

.shedule__teacher {
    font-size: 11px;
    line-height: normal;
}

.shedule__duration {
    font-size: 10px;
    color: var(--color-accent);
    font-weight: 500;
}

.shedule__level {
    font-size: 10px;
    color: var(--color-accent-light);
    font-weight: 400;
}

.shedule__description {
    font-size: 9px;
    color: #666;
    line-height: 1.3;
    margin-top: 2px;
}

.shedule__teacher_experience {
    font-size: 9px;
    color: #888;
    font-weight: 400;
}

.shedule__teacher_specialization {
    font-size: 9px;
    color: #888;
    font-style: italic;
}

.shedule-table__link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.shedule-table__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.shedule-table__link:hover .shedule-table__content {
    background-color: rgba(135, 208, 64, 0.05);
}

.shedule__teacher-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.shedule__teacher-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

/* Teachers Archive Styles */
.teachers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.teachers__item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.teachers__item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.teachers__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.teachers__image {
    height: 250px;
    overflow: hidden;
}

.teachers__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teachers__content {
    padding: 20px;
}

.teachers__name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--color-text);
}

.teachers__specialization {
    font-size: 14px;
    color: var(--color-accent);
    font-weight: 500;
    margin-bottom: 8px;
}

.teachers__experience {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.teachers__bio {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}

.shedule__header {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {
    .shedule__table {
        overflow-y: hidden;
        overflow-x: auto;
        max-width: calc(100vw - 40px);
        padding-left: 5px;
    }
    
    .shedule-table__header {
        width: fit-content;
    }

    .shedule-table__th,
    .shedule-table__group {
        min-width: 200px;
    }
}


.contacts {
    background: #2780AE;
    color: var(--color-white);
    position: relative;
}

.contacts .container {
    padding: 60px 20px;
}

.contacts .logo {
    position: absolute;
    top: -80px;
    max-width: 250px;
}
.contacts .title {
    justify-content: center;
    color: var(--color-white);
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
}

.contacts .title::after,
.contacts .title::before {
    content: none;
}

.contacts .text {
    color: var(--color-white);
}

.contacts_desc {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto 50px;
}

.contacts__groups {
    gap: 100px;
    display: flex;
    justify-content: space-between;
}
.contacts__group .title {
    margin-bottom: 30px;
}

.contacts__group.contacts__group_form {
    width: 100%;
    max-width: 500px;
}

.contacts__group-list {
    gap: 20px;
    display: flex;
    flex-direction: column;
}
.contacts-item__label,
.form__item label {
    font-size: 11px;
    font-family: GothamPro;
    line-height: 150%;
}
.socials {
    display: flex;
    gap: 20px;
    align-items: center;
    
}
.contacts__group-link {
    color: var(--color-white);
}
.form {
    width: 100%;
    gap: 20px;
    display: flex;
    flex-direction: column;
}
.form__item {
    display: flex;
    flex-direction: column;
}
.form__item_input input,
.form__item_textarea textarea {
    padding: 15px 30px;
    border-radius: 5px;
}

.form__item_input label,
.form__item_textarea label {
    padding: 0px 20px;
    margin: 0px 0px -8px 15px;
    background: var(--color-accent);
    position: relative;
    width: max-content;
}

.form__item_textarea textarea {
    min-height: 84px;
    resize: none;
}

.form__button.button_fill {
    margin-top: 20px;
    color: var(--color-default);
    background: var(--color-white);
}

.contacts__map {
    width: 100%;
    height: 620px;
}

.contacts__map iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 1430px) {
    .contacts__groups {
        gap: 50px;
    }
}

@media (max-width: 1320px) {
    .contacts__groups {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .contacts__group:nth-child(2) {
        order: 3;
    }
}

@media (max-width: 1100px) {
    .contacts .logo {
        max-width: 200px;
    }
}

@media (max-width: 768px) {
    .contacts__group:nth-child(2) {
        order: initial;
    }

    .contacts__groups {
        grid-template-columns: repeat(1, 1fr);
    }
}



/* Footer */

.footer {
    border-top: 1px solid var(--color-default);
}

.footer .container {
    padding: 40px 20px;
    gap: 100px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer__group {
    gap: 15px;
    display: flex;
    flex-direction: column;
}


@media (max-width: 1150px) {
    .footer .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .footer__group:first-child {
        order: 3;
    }

    .footer__group:nth-child(2) {
        order: 1;
    }
}

@media (max-width: 750px) {
    .footer .container {
        text-align: center;
        justify-items: center;
        grid-template-columns: repeat(1, 1fr);
    }

    .footer .socials {
        justify-content: center;
    }
}



/* Results */

.results {
    margin-bottom: 100px;
}


.results h2.title {
    margin-bottom: 50px;
}

.results__list {
    gap: 40px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.results__item {
    gap: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.results__icon {
    width: 90px;
    aspect-ratio: 1;
}

.results__name {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

.results__desc {
    text-align: center;
    font-size: 16px;
}

@media (max-width: 1200px) {
    .results__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 660px) {
    .results__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 660px) {
    .results__list {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* FAQ */

.faq {
    margin-bottom: 100px;
}

.faq h2.title {
    margin-bottom: 50px;
}

.faq__list {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
}
.faq__item {
    border-bottom: 1px solid #E8E6EE;
}
.faq-details__summary {
    gap: 50px;
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 25px 0px;
    font-size: var(--font-size-h3);
    justify-content: space-between;
}
.faq-details__icon {
    position: relative;
}

.faq-details__icon svg {
    aspect-ratio: 1;
    width: 26px;
    height: auto;
}

.line-vertical {
    transition: 0.2s all;
}

.faq-details[open] .line-vertical {
    transform: rotateX(-90deg);
}

.faq-details__content {
    padding: 0px 0px 20px;
}





.slider {
    width: 100%;
    height: 700px;
    margin: 40px auto;
    position: relative;
    overflow: hidden;
    perspective: 1200px;
  }
  
  .stage {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 435px;
    height: 80%;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.8);
    transition: transform 0.5s ease, opacity 0.5s ease;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0,0,0,.15);
  }
  
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* позиции */
  .center {
    visibility: visible;
    opacity: 1;
    z-index: 5;
    transform: translate(-50%, -50%) scale(1);
  }
  
  .left {
    visibility: visible;
    z-index: 4;
    opacity: 1;
    transform: translate(calc(-50% - 220px), -50%) scale(0.9);
  }
  
  .right {
    visibility: visible;
    z-index: 4;
    opacity: 1;
    transform: translate(calc(-50% + 220px), -50%) scale(0.9);
  }
  
  .far {
    visibility: visible;
    z-index: 3;
    opacity: 1;
    transform: translate(calc(-50% + 420px), -50%) scale(0.8);
  }

.left::before,
.right::before,
.far::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 2;
    height: 100%;
    background: rgba(218, 218, 218, 0.6);
}

  
  .slide__image {
    width: 100%;
    height: 100%;
    max-width: 545px;
  }

  .teachers .container {
    display: grid;
    gap: 80px;
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }

  .teachers__content {
    gap: 30px;
    display: flex;
    flex-direction: column;
}
.teacher__name {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: var(--font-size-h3);
    color: var(--color-accent);
}
.teacher__field {
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.teacher__label,
.teacher__label.text {
    font-size: 14px;
    line-height: 150%;
}

.teacher__desc {
    line-height: 130%;
}

.teachers__slider .swiper__actions {
    position: absolute;
    bottom: 15px;
    right: 30px;
    z-index: 2;
    display: flex;
    gap: 5px;
}

.teachers__slider .slider__button {
    background: var(--color-default);
}

@media (max-width: 1350px) {
    .teachers .container {
        justify-items: center;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 850px) {
    .slider {
        height: 500px;
    }

    .slide {
        width: 345px;
        height: 60%;
    }
}

@media (max-width: 490px) {
    .slide {
        width: 220px;
        height: 60%;
    }
}

@media (max-width: 370px) {
    .slide {
        width: 230px;
        height: 40%;
    }

    .teachers__slider .swiper__actions {
        right: 80px;
    }
}



/* Requisites */

.requisites {
}

.requisites__columns {
    max-width: 890px;
    gap: 150px;
    display: grid;
    margin-bottom: 40px;
    grid-template-columns: repeat(2, 1fr)
}

.requisites__column {
    gap: 20px;
    display: flex;
    flex-direction: column
}

.requisites__column .form__item {
    gap: 5px;
    display: flex;
    flex-direction: column
}

.requisites__column .form__label {
    font-size: 11px;
    font-family: GothamPro;
    line-height: 150%;
}

.requisites__link {
    margin-top: 10px;
}

.requisites__desc {
    max-width: 890px;
}

@media (max-width: 660px) {
    .requisites__columns {
        gap: 100px;
        grid-template-columns: 1fr;
    }
}


/* Prices */

.prices__category-list {
    gap: 60px;
    display: flex;
    flex-direction: column;
    margin-bottom: 90px;
}
.prices__category {
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.price-category__title {
    color: var(--color-accent);
    margin-bottom: 0px;
}

.prices__list {
    gap: 20px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.prices__item {
    gap: 30px;
    display: flex;
    padding: 30px 20px;
    flex-direction: column;
    transition: 0.2s all;
}

.prices__item:hover {
    background: rgba(0,0,0,.02);
}

.price__package {
    font-size: 16px;
    font-weight: 400;
}

.price__desc {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.price__name,
.price__cost {
    font-size: 22px;
    font-weight: 400;
}

.price__daterange {
    font-size: 16px;
    font-weight: 400;
}

.price .button_fill {
    margin-top: 10px;
}


.prices__discount {
    gap: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.prices__discount .title {
    margin-bottom: 0px;
    width: 100%;
}

.discount__desc {
    margin: 5px 0px 60px;
    font-weight: 400;
    color: var(--color-accent);
    text-transform: uppercase;
    font-size: var(--font-size-h3);
}

.discount__content {
    width: 100%;
    gap: 100px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.discount__column {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.discount__column h3.title {
    color: var(--color-accent);
}

.discount__list {
    padding-left: 20px;
}

.discount__item {
    list-style-type: disc;
}

@media (max-width: 1200px) {
    .prices__list {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width:820px) {
    .prices__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 570px) {
    .prices__list {
        grid-template-columns: repeat(1, 1fr);
    }

    .discount__content {
        grid-template-columns: 1fr;
    }
}









.date-range {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.filters {
    display: flex;
    gap: 60px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    position: relative;
}

.filter-btn {
    cursor: pointer;
    border: none;
    padding: 0px;
    text-decoration: underline;
    color: var(--color-default);
    transition: background-color 0.3s;
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    margin-top: 5px;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    display: none;
}

.dropdown.show {
    display: block;
}

.dropdown label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 14px;
}

.dropdown label:last-child {
    margin-bottom: 0;
}

.dropdown input {
    margin-right: 8px;
}











.date-filter-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.date-filter-icon {
    aspect-ratio: 1;
    width: 35px;
}

.date-filter-btn {
    padding: 10px 20px;
    background: #E8E6EE;
    color: #424148;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    transition: background-color 0.3s;
    max-width: 330px;
    width: 100%;
    text-align: center;
}

.date-filter-btn:hover {
    filter: brightness(0.95)
}

.date-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-top: 5px;
    min-width: 300px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    display: none;
}

.date-dropdown.show {
    display: block;
}

.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.nav-btn {
    padding: 6px 10px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.nav-btn:hover {
    background: #545b62;
}

#currentMonthDisplay {
    font-weight: 500;
    font-size: 14px;
}

.week-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}

.week-day {
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    padding: 5px;
}

.calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.date-cell {
    text-align: center;
    padding: 8px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.date-cell:hover {
    background: #e3f2fd;
}

.date-cell.other-month {
    color: #ccc;
    cursor: not-allowed;
}

.date-cell.current {
    background: #007bff;
    color: white;
}

.date-cell.hover-week {
    background: #e3f2fd;
    color: var(--color-default);
    outline: 1px solid #2196f3;
}

.date-cell.selected {
    background: #28a745;
    color: white;
}

.date-cell.week-start {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.date-cell.week-end {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.calendar-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    justify-content: flex-end;
}

.action-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

.action-btn {
    background: #007bff;
    color: white;
}

.action-btn:hover {
    background: #0056b3;
}

.action-btn.secondary {
    background: #6c757d;
}

.action-btn.secondary:hover {
    background: #545b62;
}

@media (max-width: 768px) {
    .date-filter-btn {
        font-size: 18px;
    }
}

@media (max-width: 490px) {
    .date-filter-btn {
        font-size: 16px;
    }
}

/* =====================================================
   WORDPRESS BLOCK STYLES
   ===================================================== */

/* Remove margin-bottom from h2 headings in WordPress blocks */
.wp-block-heading h2 {
    margin-bottom: 0;
}

/* =====================================================
   ARTICLE GRID LAYOUT
   ===================================================== */

/* Article container */
.article__content  .wp-block-columns {
    gap: 120px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

/* Article content with column distribution */
.article__content {
    column-fill: auto;
}
.article__content h2 {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 0;
    line-height: 140%;
    white-space: normal;
    text-transform: none;
}

.article__content h2::before,
.article__content h2::after {
    content: none;
}

.article__content blockquote {
    font-size: 25px;
    line-height: 150%;
    color: var(--color-accent);
}

.article__content cite {
    font-size: 12px;
    text-align: center;
    color: var(--color-default);
    font-style: normal;
} 

/* Ensure images don't break across columns */
.article__content img {
    break-inside: avoid;
}


/* Teachers section - полное переопределение */
.teachers {
    width: 100% !important;
    max-width: none !important;
}


/* Teachers page layout */
.teachers__layout {
    display: flex !important;
    gap: 80px;
    align-items: flex-start;
    min-height: 700px;
    width: 100% !important;
    max-width: none !important;
    flex-direction: row !important;
}

/* Left side - teacher info */
.teachers__info {
    width: 490px;
    flex-shrink: 0;
}


/* Стили для преподавателей из оригинальной верстки */
.teachers__content {
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.teacher__name {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 28px;
    color: #2780AE;
}

.teacher__field {
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.teacher__label {
    font-size: 14px;
    line-height: 150%;
}

.teacher__desc {
    line-height: 130%;
}

/* Right side - 3D slider */
.teachers__slider-3d {
    flex: 1;
    position: relative;
    height: 700px;
    perspective: 1000px;
    min-width: 0;
}

.slider-3d__container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.slider-3d__slide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.slider-3d__slide.active {
    transform: translate(-50%, -50%) translateZ(0px) scale(1);
    z-index: 10;
}

.slider-3d__slide.prev-1 {
    transform: translate(-50%, -50%) translateZ(-100px) translateX(-200px) scale(0.8);
    opacity: 0.7;
    z-index: 5;
}

.slider-3d__slide.prev-2 {
    transform: translate(-50%, -50%) translateZ(-200px) translateX(-400px) scale(0.6);
    opacity: 0.4;
    z-index: 3;
}

.slider-3d__slide.next-1 {
    transform: translate(-50%, -50%) translateZ(-100px) translateX(200px) scale(0.8);
    opacity: 0.7;
    z-index: 5;
}

.slider-3d__slide.next-2 {
    transform: translate(-50%, -50%) translateZ(-200px) translateX(400px) scale(0.6);
    opacity: 0.4;
    z-index: 3;
}

.slider-3d__slide.hidden {
    transform: translate(-50%, -50%) translateZ(-300px) scale(0.4);
    opacity: 0;
    z-index: 1;
}

.slider-3d__image {
    width: 545px;
    height: 700px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

.slider-3d__slide.active .slider-3d__image {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.slider-3d__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.slider-3d__slide:hover .slider-3d__image img {
    transform: scale(1.05);
}

/* Navigation buttons */
.slider-3d__nav {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    gap: 15px;
    z-index: 20;
}

.slider-3d__btn {
    width: 70px;
    height: 70px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.slider-3d__btn:hover {
    transform: scale(1.05);
}

.slider-3d__btn svg {
    width: 70px;
    height: 70px;
}

.slider-3d__btn svg rect {
    transition: fill 0.3s ease;
}

.slider-3d__btn:hover svg rect {
    fill: #555;
}

/* Responsive - переопределение старых стилей */
@media (max-width: 1350px) {
    .teachers .container {
        display: block !important;
        grid-template-columns: none !important;
        justify-items: initial !important;
    }
}

@media (max-width: 1200px) {
    .teachers__layout {
        flex-direction: column !important;
        gap: 40px;
    }
    
    .teachers__info {
        width: 100% !important;
    }
    
    .teachers__slider-3d {
        height: 500px;
    }
    
    .slider-3d__image {
        width: 400px;
        height: 500px;
    }
}

@media (max-width: 768px) {
    .teachers__layout {
        gap: 30px !important;
    }
    
    .teachers__info {
        order: 2;
    }
    
    .teachers__slider-3d {
        height: 350px;
        order: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .slider-3d__container {
        position: relative;
        width: 280px;
        height: 350px;
    }
    
    .slider-3d__slide {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: center center;
    }
    
    .slider-3d__slide.active {
        transform: translate(0, 0) translateZ(0px) scale(1);
        z-index: 10;
    }
    
    .slider-3d__slide.prev-1 {
        transform: translate(-50px, 0) translateZ(-50px) scale(0.8);
        opacity: 0.7;
        z-index: 5;
    }
    
    .slider-3d__slide.prev-2 {
        transform: translate(-100px, 0) translateZ(-100px) scale(0.6);
        opacity: 0.4;
        z-index: 3;
    }
    
    .slider-3d__slide.next-1 {
        transform: translate(50px, 0) translateZ(-50px) scale(0.8);
        opacity: 0.7;
        z-index: 5;
    }
    
    .slider-3d__slide.next-2 {
        transform: translate(100px, 0) translateZ(-100px) scale(0.6);
        opacity: 0.4;
        z-index: 3;
    }
    
    .slider-3d__slide.hidden {
        transform: translate(0, 0) translateZ(-150px) scale(0.4);
        opacity: 0;
        z-index: 1;
    }
    
    .slider-3d__image {
        width: 280px;
        height: 350px;
    }
    
    .teacher__name {
        font-size: 1.8rem;
        margin-bottom: 15px;
    }
    
    .teacher__field {
        margin-bottom: 15px;
    }
    
    .teacher__label {
        font-size: 13px;
    }
    
    .teacher__desc {
        font-size: 14px;
    }
    
    .slider-3d__nav {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    
    .slider-3d__btn {
        width: 50px;
        height: 50px;
    }
    
    .slider-3d__btn svg {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .teachers__layout {
        gap: 20px !important;
    }
    
    .teachers__slider-3d {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .slider-3d__container {
        position: relative;
        width: 250px;
        height: 300px;
    }
    
    .slider-3d__slide {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: center center;
    }
    
    .slider-3d__slide.active {
        transform: translate(0, 0) translateZ(0px) scale(1);
        z-index: 10;
    }
    
    .slider-3d__slide.prev-1 {
        transform: translate(-40px, 0) translateZ(-40px) scale(0.8);
        opacity: 0.7;
        z-index: 5;
    }
    
    .slider-3d__slide.prev-2 {
        transform: translate(-80px, 0) translateZ(-80px) scale(0.6);
        opacity: 0.4;
        z-index: 3;
    }
    
    .slider-3d__slide.next-1 {
        transform: translate(40px, 0) translateZ(-40px) scale(0.8);
        opacity: 0.7;
        z-index: 5;
    }
    
    .slider-3d__slide.next-2 {
        transform: translate(80px, 0) translateZ(-80px) scale(0.6);
        opacity: 0.4;
        z-index: 3;
    }
    
    .slider-3d__slide.hidden {
        transform: translate(0, 0) translateZ(-120px) scale(0.4);
        opacity: 0;
        z-index: 1;
    }
    
    .slider-3d__image {
        width: 250px;
        height: 300px;
    }
    
    .teacher__name {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }
    
    .teacher__field {
        margin-bottom: 12px;
    }
    
    .teacher__label {
        font-size: 12px;
    }
    
    .teacher__desc {
        font-size: 13px;
    }
    
    .slider-3d__nav {
        bottom: 15px;
        right: 15px;
        gap: 8px;
    }
    
    .slider-3d__btn {
        width: 45px;
        height: 45px;
    }
    
    .slider-3d__btn svg {
        width: 45px;
        height: 45px;
    }
}

/* =====================================================
   REQUISITES STYLES
   ===================================================== */
.requisites {
}

.requisites__columns {
    max-width: 890px;
    gap: 150px;
    display: grid;
    margin-bottom: 40px;
    grid-template-columns: repeat(2, 1fr);
}

.requisites__column {
    gap: 20px;
    display: flex;
    flex-direction: column;
}

.requisites__column .form__item {
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.requisites__column .form__label {
    font-size: 11px;
    font-family: GothamPro;
    line-height: 150%;
}

.requisites__link {
    margin-top: 10px;
}

.requisites__desc {
    max-width: 890px;
}

@media (max-width: 660px) {
    .requisites__columns {
        gap: 100px;
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   YOGA CONTENT STYLES
   ===================================================== */

.yoga-content-list {
    margin: 40px 0;
}

.yoga-content-list h2 {
    margin-bottom: 30px;
    font-size: 28px;
    color: #333;
}

.yoga-content-item__direction,
.yoga-content-item__type {
    background: #f8f9fa;
    color: #666;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-right: 10px;
    display: inline-block;
}

.yoga-content-item__direction {
    background: #e3f2fd;
    color: #1976d2;
}

.article__subtitle {
    font-size: 24px;
    color: #666;
    margin: 20px 0;
    font-weight: 400;
}

.article__excerpt {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin: 20px 0;
    font-style: italic;
}

.article__image {
    margin: 30px 0;
    text-align: center;
}

.article__image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.05);
}

.links-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.links-list__item {
    margin-bottom: 20px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
}

.links-list__link {
    font-size: 18px;
    font-weight: 600;
    color: #1976d2;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

.links-list__link:hover {
    text-decoration: underline;
}

.links-list__description {
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.faq-list {
    margin: 20px 0;
}

.faq-item {
    margin-bottom: 30px;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #1976d2;
}

.faq-item__question {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
}

.faq-item__answer {
    color: #666;
    line-height: 1.6;
}

.content-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.content-type-item {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.content-type-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.content-type-item__title {
    margin: 0 0 15px 0;
    font-size: 20px;
}

.content-type-item__title a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.content-type-item__title a:hover {
    color: #1976d2;
}

.content-type-item__excerpt {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.content-type-item__link {
    color: #1976d2;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.content-type-item__link:hover {
    color: #1565c0;
}

.navigation-links {
    margin: 40px 0;
    text-align: center;
}

.term-description {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    color: #666;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .content-types-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 15px;
    }
    
    .content-type-item {
        padding: 20px;
    }
    
    .article__subtitle {
        font-size: 20px;
    }
    
    .article__excerpt {
        font-size: 16px;
    }
}

/* Feedback stars */
.feedback__rating,
.review-detail__rating {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 15px;
}

.star {
    font-size: 18px;
    color: #ddd;
    transition: color 0.3s ease;
}

.star--filled {
    color: #ffd700;
}

.rating-text {
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}

/* Single review page */
.single-review {
    padding: 60px 0;
}

.review-detail {
    background: #fff;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

.review-detail__header {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.review-detail__avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.review-detail__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-detail__info {
    flex: 1;
}

.review-detail__author {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.2;
}

.review-detail__rating {
    margin-bottom: 10px;
}

.review-detail__date {
    font-size: 14px;
    color: #666;
}

.review-detail__content {
    line-height: 1.6;
}

.review-detail__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.3;
}

.review-detail__text {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
}

.review-navigation {
    text-align: center;
    margin-top: 40px;
}

.btn {
    display: inline-block;
    padding: 15px 30px;
    background: var(--color-accent);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    background: var(--color-accent-dark);
    transform: translateY(-2px);
}

.btn--secondary {
    background: #666;
}

.btn--secondary:hover {
    background: #555;
}

/* No reviews message */
.no-reviews {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 1.1rem;
}

/* Responsive for reviews */
@media (max-width: 768px) {
    .review-detail {
        padding: 30px 20px;
    }
    
    .review-detail__header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .review-detail__avatar {
        width: 100px;
        height: 100px;
    }
    
    .review-detail__author {
        font-size: 1.5rem;
    }
    
    .review-detail__title {
        font-size: 1.3rem;
    }
    
    .btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}

/* YOGA DIRECTION TAXONOMY STYLES */
.yoga-direction-content {
    padding: 40px 0;
}

.content-types-grid {
    display: grid;
    gap: 40px;
}

.content-type-section {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.content-type-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #007cba;
    padding-bottom: 10px;
}

.content-type-posts {
    display: grid;
    gap: 20px;
}

.content-type-item {
    padding: 15px;
    border-left: 4px solid #007cba;
    background: #f8f9fa;
    border-radius: 0 8px 8px 0;
}

.content-type-item__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.content-type-item__link {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.content-type-item__link:hover {
    color: #007cba;
}

.content-type-item__excerpt {
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Responsive styles for yoga direction */
@media (max-width: 768px) {
    .content-type-section {
        padding: 20px;
    }
    
    .content-type-title {
        font-size: 20px;
    }
    
    .content-type-item__title {
        font-size: 16px;
    }
}

/* YOGA CONTENT TYPE TAXONOMY STYLES */
.categories__list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.categories__item {
    transition: 0.2s all;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    background: var(--color-white);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

.categories__item:hover {
    filter: brightness(0.95);
}

.categories__item.categories__item_active {
    filter: none;
    box-shadow: none;
    background: var(--color-accent);
    color: var(--color-white);
}

.regular-classes__list {
    gap: 15px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.class__link {
    gap: 20px;
    display: flex;
    padding: 15px;
    border-radius: 5px;
    flex-direction: column;
    box-shadow: var(--box-shadow);
}

.class h3 {
    margin-bottom: 0px;
}

.class__image {
    width: 100%;
    border-radius: 5px;
    aspect-ratio: 3/2;
    overflow: hidden;
}

.class__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.class__name {
    font-size: 26px;
    line-height: 130%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.class__date {
    font-size: 15px;
    color: var(--color-default);
    margin-bottom: -15px;
}

.class__description {
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.class__category {
    background: var(--color-category);
    color: var(--color-white);
    padding: 5px 15px;
    border-radius: 10px;
    font-size: 16px;
}

.class__link h3,
.class__link p {
    color: var(--color-default);
}

.text {
    font-size: var(--font-size-default);
    line-height: 150%;
    color: var(--color-default);
}

.no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #666;
}

@media (max-width: 1500px) {
    .regular-classes__list {
        gap: 15px;
    }
}

@media (max-width: 1200px) {
    .class__name {
        font-size: 22px;
    }

    .regular-classes.regular-classes_preview .regular-classes__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .regular-classes__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .class__name {
        font-size: 20px;
    }

    .class__description {
        -webkit-line-clamp: 3;
    }

    .regular-classes__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 490px) {
    .regular-classes.regular-classes_preview .regular-classes__list {
        grid-template-columns: 1fr;
    }

    .regular-classes__list {
        grid-template-columns: 1fr;
    }
}