/* var */
:root {
    --color-blue: #1B1D4A;
    --color-red: #ED2C2B;
    --color-yellow: #ffc813;
    --color-white: #ffffff;
    --color-gray: #ffffff33;
    --color-shadow: rgba(0, 0, 0, 0.2);

    --font-main: sans-serif;
}
/* base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-main), sans-serif;
  color: var(--color-white);
  background-color: var(--color-blue);
  font-size: 16px;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  border: none;
  background: transparent;
}
a {
  text-decoration: none;
  color: inherit;
}
ul,
ol {
  list-style: none;
}
/* base template styles */
hr {border-color: var(--color-gray);}
h1, h2, h3, h4 {font-weight: bold;}
h1, h2 {
    font-size: clamp(28px, 4vw, 36px);
    text-transform: uppercase;
}
h3{font-size: clamp(22px, 4vw, 26px);}
.secondary-title {font-size: clamp(22px, 4vw, 26px);margin-bottom: 20px;}
body.lock {overflow: hidden;}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}
.btn {
    display: block;
    width: max-content;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    transition: opacity 0.2s ease, transform 0.1s ease;
    text-align: center;
    cursor: pointer;
}
.btn span {
    display: block;
    padding: 10px 20px;
    margin: 3px;
}
.btn:hover {
    opacity: 0.8;
}
.btn:active {
    transform: translateY(2px);
}

.btn-primary span {
    background-color: var(--color-red);
}
.btn-secondary span {
    background-color: var(--color-white);
    color: var(--color-blue);
}
@media (max-width: 500px) {
    .btn {width: 100%;}
}
/* header */
.header {
    right: 0;
    left: 0;
    z-index: 10;
    padding: 10px 0px;
    background-color: var(--color-shadow);
}
.header .container {padding: 0px 20px;}
.header__logo {
    display: flex;
    align-items: center;
    gap: 5px;
}
.header__logo img {height: 70px;}
.header__logo span {
    display: block;
    width: 50px;
    font-size: 10px;
    font-weight: bold;
    opacity: 0.8;
    transition: color 0.2s ease;
}
.header__logo:hover span {color: var(--color-yellow);}
.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.header__nav {
    flex: 1;
    max-width: 400px;
    margin: 0 20px;
}
.header__nav ul {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
header .contacts__block {
    max-width: 210px;
    font-size: 12px;
}
header .contacts__block .item svg {width: 14px;}

.contacts__block {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0.8;
}
.contacts__block .item{
    display: flex;
    align-items: flex-start;
    gap: 5px;
}
.contacts__block .item svg {flex-shrink: 0;}
.contacts__block .item,
.contacts__block .item-link {
    cursor: pointer;
    transition: color 0.2s ease;
}
.contacts__block .item:hover,
.contacts__block .item-link:hover {color: var(--color-yellow);}
.header__nav ul a {
    padding-block: 2px;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 110%; /* Линия строго под текстом */
    background-size: 0% 3px; /* Изначальная длина линии 0% */
    background-repeat: no-repeat;
    transition: color 0.2s ease, background-size 0.2s ease-in-out;
}
.header__nav ul a:hover {
    color: var(--color-yellow);
    background-size: 100% 3px;
}
.burger-btn {
    width: 40px;
    height: 30px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    flex-direction: column;
    justify-content: space-between; 
    padding: 0;
    position: relative;
    z-index: 10;
}
.burger-line {
  display: block;
  width: 100%;
  height: 4px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
  transform-origin: center;
}
.burger-btn.is-active .burger-line:nth-child(1) {transform: translateY(13px) rotate(45deg);}
.burger-btn.is-active .burger-line:nth-child(2) {opacity: 0;}
.burger-btn.is-active .burger-line:nth-child(3) {transform: translateY(-13px) rotate(-45deg);}
.header__nav.open {right: 0;}
.header__mob-contacts {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
}
.header__socials {
    display: flex;
    gap: 10px;
    padding: 10px;
}
@media (min-width: 769px) {
    .header__nav hr,
    .header__nav .header__mob-contacts {display: none;} 
}
@media (max-width: 768px) {
    .header__inner {align-items: center;}
    .burger-btn {display: flex;}
    .header__nav {
        width: 100%;
        height: 100vh;
        margin: 90px 0px 0px 0px;
        padding: 30px;
        display: flex;
        gap: 30px;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -150%;
        z-index: 5;
        background: #16173b;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        transition: right 0.4s ease;
        text-align: center;
    }
    .header__nav ul {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 22px;
    }
    .header__nav ul a {
        display: block;
        padding: 10px 20px;
    }
    .contacts__block {max-width: unset;}
    .header__mob-contacts {
        font-size: 14px;
        font-style: normal;
    }
}
@media (max-width: 500px) {
    header .contacts__block {display: none;}
}
/* hero */
.hero {
    position: relative;
    max-height: 700px;
    height: 100vh;
    padding-top: 90px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.hero .container {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.hero video {
    position: absolute;
    width: 50%;
    right: 0;
    z-index: -2;
}
.hero .shadow {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgb(0 0 0 / 10%);
    z-index: -1;
}
.hero__descr {
    max-width: 500px;
    color: var(--color-white);
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 50px;
}
.hero__descr h1 {margin-bottom: 10px;}   
.hero__descr span {opacity: 0.9;}
.hero__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
@media (max-width: 600px) {
    .hero {
        padding-bottom: 20px;
    }
    .hero .container {
        align-items: center;
    }
    .hero video {
        top: 50%;
        transform: translateY(-50%);
        width: unset;
        opacity: 0.4;
    }
}
/* tizers */
.tizers {
    position: relative;
    overflow: hidden;
}
/* .tizers::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    left: 50%;
    width: 200vh;
    height: 200vh;
    background-image: url(/local/templates/cska/imgs/bg_stars.png);
    background-size: 100px;
    transform-origin: center;
    opacity: 0.06;
    z-index: -1;
} */
.tizers .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}
.tizers__info {
    max-width: 60%;
    width: 100vw;
    position: relative;
    height: 300px;
}
.tizers__imgs {
    position: relative;
    width: 235px;  /* Задайте ширину вашей картинки */
    height: 350px; /* Задайте высоту вашей картинки */
    margin-top: 200px;
}
.tizers__imgs img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 1s ease;
}
.tizers__imgs img:nth-child(1) { z-index: 1;}
.tizers__imgs img:nth-child(2) { z-index: 2;}
.tizers__imgs img:nth-child(3) { z-index: 3;}
.tizers__imgs img:nth-child(4) { z-index: 4;}

#tizers.active img:nth-child(1) {transform: translateY(0);}
#tizers.active img:nth-child(2) {transform: translateY(-20%);}
#tizers.active img:nth-child(3) {transform: translateY(-40%);}
#tizers.active img:nth-child(4) {transform: translateY(-60%);}

.tizers__descr,
.tizers__items {
    position: absolute;
    transform: translateX(100vw);
    transition: transform 1.5s ease;
}
#tizers.active .tizers__descr,
#tizers.active .tizers__items {
    transform: translateX(0);
}
.tizers__item img {
    width: 50px;
    flex-shrink: 0;
}
.tizers__items {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    bottom: 0;
    transition-delay: 0.1s;
}
.tizers__item {
    max-width: 300px;
    width: 45%;
    display: flex;
    align-items: center;
    gap: 20px;
}
.tizers__item span {
    width: 100%;
    display: block;
    text-transform: uppercase;
}
@media (max-width: 1000px) {
    .tizers__info {height: 400px;}
}
@media (max-width: 800px) {
    .tizers__info {height: 500px;}
    .tizers .container {gap: 20px;}
    .tizers__imgs {
        width: 215px;
        height: 320px;
    }
}
@media (max-width: 600px) {
    .tizers__imgs {display: none;}
    .tizers__info {
        height: 400px;
        max-width: 100%;
    }
}
@media (max-width: 500px) {
    .tizers__info {height: 600px;}
    .tizers__item {width: 100%;}
}
@media (max-width: 400px) {
    .tizers__info {height: 680px;}
}

/* services */
.services .container {position: relative;}
.services .container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/local/templates/cska/imgs/bg_fakel.png);
    background-size: 60%;
    background-repeat: repeat-y;
    opacity: 0.6;
    z-index: -1;
}
.services hr {margin-block: 30px;}
.service {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: stretch;
    gap: 5%;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.service__info {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.service__items {
    max-width: 65%;
    display: flex;
    gap: 30px;
}
.service__card {
    display: flex!important;
    flex-direction: column;
}
.card {
    padding: 3px;
    border: 2px solid var(--color-white);
}
.card__info {
    flex-grow: 1;
    padding:14px;
    background-image: url(/local/templates/cska/imgs/bg_card_info.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.card__info .title {margin-bottom: 5px;}
.show-services {
    width: 100vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    background: rgb(255 255 255 / 10%);
    padding: 20px;
    text-align: center;
    cursor: pointer;
}
.show-services:hover {background: rgb(255 255 255 / 20%);}

/* --- МАГИЯ СКРЫТИЯ --- */
/* Выбираем все карточки, начиная с 3-й, и полностью скрываем их */
.service:nth-child(n+3) {
  display: none;
  opacity: 0;
  transform: translateY(20px);
}

/* --- МАГИЯ РАСКРЫТИЯ --- */
/* Когда контейнер открыт, возвращаем карточкам отображение */
.services.is-open .service:nth-child(n+3) {
  display: flex;
  /* Запускаем анимацию проявления (делаем через анимацию, чтобы display:block не срабатывал топорно) */
  animation: fadeIn 0.5s forwards ease-out;
}

/* Эффект поочередного появления (каскад) для скрытых карточек */
.services.is-open .service:nth-child(3)  { animation-delay: 0.05s; }
.services.is-open .service:nth-child(4)  { animation-delay: 0.1s; }
.services.is-open .service:nth-child(5)  { animation-delay: 0.15s; }
/* ...при желании можно прописать задержку для каждой, чтобы они вылетали веером */

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 700px) {
    .service {
        flex-direction: column;
        gap: 20px;
    }
    .service__info {width: auto;}
    .services .container::before {display: none;}
}

/* swiper */
.swiper {
    max-width: 1200px;
    width: 100%;
    height: max-content;
}
.swiper-slide {height: auto!important;}

/* gallery */
.gallery p {text-align: justify;}
.top {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.gallery__imgs {height: 500px;}
.gallery__card {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.gallery__img {
    position: absolute;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: scale 0.6s ease;
}
.gallery__card:hover .gallery__img {scale: 1.1;}
.gallery__card-info {
    position: absolute;
    bottom: 3px;
    width: calc(100% - 6px);;
    padding: 40px 20px;
    background: linear-gradient(0deg, rgb(0 0 0 / 88%) 10%, rgb(0 0 0 / 60%) 70%, rgb(0 0 0 / 10%));
}
.gallery__card-info h3 {
    margin-bottom: 10px;
}
.gallery__card-info h3,
.gallery__img-desc {
    max-width: 700px;
}
/* prices */
/* .prices {
    background: url(bg_fakel_colored.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
} */
/* .prices .bottom {
    background: var(--color-white);
} */
 .prices__block {background-color: var(--color-white);}
.prices__types {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
}
.prices__types .type {
    width: max-content;
    padding: 5px 15px;
    border: 2px solid var(--color-blue);
    color: var(--color-blue);
    font-weight: bold;
    cursor: pointer;
}
.prices__types .type:hover {opacity: 0.8;}
.prices__types .type:active {transform: translateY(2px);}

.prices__types .type.active {
    background-color: var(--color-blue);
    color: var(--color-white);
}
.prices__table {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}
.prices__table .type__title {
    height: 55px;
    display: flex!important;
    align-items: flex-end;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prices__table .type {
    color: var(--color-blue);
    font-weight: bold;
    display: flex;
    flex-direction: column;
}
.prices table {
    width: 100%;
    border: 1px solid #E7E8EE;
    border-spacing: 0;
}
.prices table .price {
    color: var(--color-blue);
}
.prices table .descr {
    font-size: 14px;
    color: #6D7697;
    font-weight: 400;
}
.prices th {
    padding: 10px 10px 10px 20px;
    text-align: left;
}
.prices tr:nth-child(odd) {
    background-color: #E7E8EE;
}

.prices__table.show {display: grid;}
@media (max-width: 700px) {
    .prices__table {grid-template-columns: 1fr;}
    .prices table th {
        padding: 10px 5px 10px 10px;
    }
}

/* marquee */
.marquee-container {
  overflow: hidden; /* Прячем все, что выходит за рамки экрана */
  white-space: nowrap; /* Запрещаем тексту переноситься на новую строку */
  background: #F1F1F2;
  color: var(--color-blue);
  padding: 15px 0;
  display: flex;
}

.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: marquee-animation 20s linear infinite; 
}

.marquee-content {
    display: flex;
    gap: 20px;
    font-weight: bold;
    text-transform: uppercase;
}
.marquee-content:nth-child(odd) {color: #6D7697;}
.marquee-content svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.marquee-container:hover .marquee-track {animation-play-state: paused;}
@keyframes marquee-animation {
  0% {transform: translateX(0%);}
  100% {transform: translateX(-50%);}
}

/* reviews */
.review__card {
    display: flex!important;
    flex-direction: column;
    background: var(--color-white);
    padding: 20px;
    color: var(--color-blue);
}
.review__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.review__user-rating svg {width: 70px;}
.review__user-igm {
    flex-shrink: 0;
    height: 60px;
    width: 60px;
    border-radius: 100px;
    overflow: hidden;
}
.review__user-igm img {
    object-fit: cover;
    height: 100%;
}
.review__user-name {
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: bold;
}
.review__text {
    flex-grow: 1;
    margin-bottom: 20px;
}
.review__date {
    color: #6D7697;
    font-size: 14px;
}


/* contacts */
.contacts .bottom {
    display: flex;
    gap: 20px;
}

.contacts__info {
    padding: 40px 30px;
    background: url(/local/templates/cska/imgs/bg_contact.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.contact__item {
    margin-bottom: 15px;
}
.contact__item h4 {
    display: block;
    color: var(--color-yellow);
    margin-bottom: 5px;
}
.contact__item span {
    display: block;
    transition: color 0.3s ease;
}
.contact__item span:hover {
    color: var(--color-yellow);
}
.socilas {
    display: flex;
    gap: 5px;
}
.social svg {
    color: var(--color-white);
    cursor: pointer;
    transition: color 0.3 ease;
}
.social svg:hover {
    color: var(--color-yellow);
}
@media (max-width: 700px) {
    .contacts .bottom {flex-direction: column;}
}
/* feedback */
.feedback .container {
    background: url(/local/templates/cska/imgs/bg_fakel.png);
    background-size: 347px;
    background-repeat: no-repeat;
}
.feedback h3 {margin-bottom: 30px;}
.feedback__descr {
    max-width: 300px;
    margin-bottom: 30px;
}
.feedback form {
    display: flex;
    gap: 10px;
}
.feedback input {
    max-width: 300px;
    padding: 10px;
}
@media (max-width: 700px) {
    .feedback form {flex-direction: column;}
    .feedback input {max-width: 100%;}
}

/* footer */
.footer {background-color: rgb(0 0 0 / 20%);}
.footer .container {padding: 60px 20px 40px 20px;}
.footer hr {margin-block: 40px;}
.footer__top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer__top .left {
    display: flex;
    gap: 10px;
    align-items: center;
}
.footer__logo {flex-shrink: 0;}
.footer__logo img {height: 150px;}
.footer__logo-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer__logo-text {max-width: 100px;}
.footer__links {
    display: grid;
    grid-auto-flow: column;
    gap: 50px;
}
.footer .links__title {
    margin-bottom: 8px;
    text-transform: uppercase;
}
.site__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer__bottom {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}
.footer__bottom a {
    width: max-content;
    display: block;
    border-bottom: 1px solid var(--color-white);
    margin-bottom: 5px;
    transition: color 0.3s ease;
}
.footer__bottom a:hover {
    color: var(--color-yellow);
}
footer .contacts__block {max-width: 250px;}
footer .contacts__block .item svg {width: 20px;}
.site__links li {
    margin-bottom: 5px;
    transition: color 0.3s ease;
}
.site__links li:hover {color: var(--color-yellow);}
@media(max-width:600px) {
    .footer__links {
        grid-auto-flow: unset;
        grid-template-columns: 1fr 1fr;
    }
    footer .contacts__block {max-width: 100%;}
    .site__links:last-child {grid-column: 1 / -1;}
    .footer__bottom {
        flex-direction: column;
        gap: 10px;
    }
}

/* reviews page */
.reviews__page {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* faq */
.faq-item {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background-color: var(--color-white);
}
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 10px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--color-blue);
  font-weight: bold;
  text-align: left;
}
.faq-icon {
  font-size: 24px;
  transition: transform 0.3s ease;
  padding: 5px;
  cursor: pointer;
}
.faq-answer {
    color: var(--color-blue);
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}
.faq-answer-content {
  overflow: hidden;
  min-height: 0; 
  padding: 0 10px;
  line-height: 1.5;
  transition: padding 0.3s ease-out;
}
.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
}
.faq-item.active .faq-answer-content {
  padding-block: 15px;
}
.faq-item.active .faq-icon {
  transform: rotate(315deg);
}
.faq hr {
    margin-inline: 10px;
    border-color: var(--color-blue);
}
/* privacy and terms */
.privacy ul,
.tems ul {
    list-style: unset;
    padding-left: 30px;
}
.privacy p,
.tems p  {margin-bottom: 5px;}
hr {margin-block: 30px;}