@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_mediumitalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_bolditalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_blackitalic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'DIN Pro';
    src: url('../fonts/dinpro_lightitalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Reset and base styles  */
* {
    padding: 0px;
    margin: 0px;
    border: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Links */

a, a:link, a:visited {
    text-decoration: none;
    color: #000;
}

a:hover {
    text-decoration: none;
}

/* Common */

aside, nav, footer, header, section, main {
    display: block;
}

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

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

img {
    vertical-align: top;
}

img, svg {
    width: 100%;
    max-width: 100%;
    height: auto;
}

address {
    font-style: normal;
}

/* Form */

input, textarea, button, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: transparent;
}

input::-ms-clear {
    display: none;
}

button, input[type="submit"] {
    display: inline-block;
    box-shadow: none;
    background-color: transparent;
    background: none;
    cursor: pointer;
}

input:focus, input:active,
button:focus, button:active {
    outline: none;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

label {
    cursor: pointer;
}

legend {
    display: block;
}

input[type='file'] {
    max-width: 100%;
}


html {
    font-size: 18px;
}

body {
    font-family: 'DIN Pro', Arial, sans-serif;
    font-weight: 400;
    font-size: 1rem;
}


:root {
    --black: #000;
    --light-black: rgba(29, 28, 34, 1);
    --white: #fff;
    --purple: rgba(74, 0, 205, 1);
    --dark-purple: rgba(58, 1, 159, 1);
    --dark-grey: rgb(119, 119, 119);
    --ligth-grey: rgba(232, 235, 238, 1);
    --ligth-grey-hover: rgba(187, 229, 21, 1);
    --grey: rgba(97, 96, 109, 1);
    --ligth-green: rgb(208, 255, 18);
    --pink: rgba(255, 62, 120, 1);
    --border-radius-btn: 0.3125rem;
    --border-radius-s14: 0.875rem;
    --border-radius-s18: 1.125rem;
    --border-radius-s20: 1.25rem;
    --border-radius-s16: 1rem;
    --border-std: 0.0625rem;
    --s12: 0.75rem;
    --s14: 0.875rem;
    --s16: 1rem;
    --s18: 1.125rem;
    --s20: 1.25rem;
    --s22: 1.5rem;
    --s24: 1.5rem;
    --s50: 2.5rem;
}


.container {
    width: 90%;
    margin: 0 auto;
    max-width: 1330px;
}

h1 {
    font-size: var(--s50);
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

h2 {
    font-size: var(--s24);
    font-weight: 500;
    margin-bottom: 1.5rem;
}

h3 {
    font-size: var(--s22);
    font-weight: 500;
    margin-bottom: 1rem;
}

section {
    padding: 2rem 0;
}

.btn {
    padding: 0.5rem 1.5rem;
    font-weight: 500;
    display: block;
    transition: all 0.3s ease;
}

.btn.purple {
    color: white;
    background: var(--purple);
    border-radius: var(--border-radius-btn);
}

.btn.purple:hover {
    background: var(--dark-purple);
}

.btn.light-green {
    background: var(--ligth-green);
    border-radius: var(--border-radius-s14);
    color: #000;
}

.btn.light-green:hover {
    background: var(--ligth-grey-hover);
}

.flexbox {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: center;
}


header {
    background: white;
    padding: 1.5rem 0;
}

.header__img {
    flex: 0 0 4.0625rem;
    background: var(--purple);
    border-radius: 50%;
    width: 3em;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__img img {
    width: 3em;
}

.header__title_wrap {
    text-align: center;
}

.header__img_wrap {
    justify-content: flex-start;
}

.header_title {
    font-weight: 700;
    font-size: var(--s20);
}

.header_description {
    text-align: center;
    font-size: var(--s14);
}

.header__phones {
    display: block;
    font-weight: 500;
}


.header__nav_wrap {
    margin: 1.5rem 0 0;
    border-radius: 0.875rem;
    border: 1px solid var(--dark-grey);
}


.header__nav_wrap ul li a {
    text-align: center;
    display: block;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
}


.header__nav_wrap ul li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header__nav_wrap ul.flexbox {
    gap: 0;
    align-items: normal;
}

.header__nav_wrap ul li:not(:last-of-type) {
    border-right: 1px solid var(--dark-grey);
}

.header__title_wrap {
    text-transform: uppercase;
}

.mobile {
    display: none;
}


.about_company_block__section {
    color: white;
    background: black;
    padding: 4rem 0;
}

.about_company_block__section .flexbox {
    gap: 3rem;
}

.about_company_block__section p {
    font-size: var(--s20);
}

.about_company_block_info {
    flex: 0 0 45%;
    overflow: hidden;
    border-radius: var(--border-radius-s14);
}

.btn_slider {
    width: 3.25rem;
    height: 3.25rem;
    transition: all 0.3s ease;
}

.btn_slider path {
    transition: all 0.3s ease;
}

.btn-next {
    transform: rotate(180deg);
}


.btn_slider svg {
    height: 100%;
}

.btn_slider:hover svg .arrow,
.btn_slider.active svg .arrow {
    fill: black;
}

.btn_slider.active svg .arrow_bg,
.btn_slider:hover svg .arrow_bg {
    fill: var(--ligth-green);
}

.custom-slider__wrapper {
    overflow: hidden;
}

.custom-slider__slides {
    display: flex;
    gap: 1rem;
    transition: transform 0.35s cubic-bezier(.6, 0, .3, 1);

    will-change: transform;

}

.custom-slider__slide {
    flex: 0 0 22.8%;

}


.custom-slider__header {
    margin-bottom: 1rem;
}


.contacts__section {
    background: var(--purple);
    color: white;
}

.contacts__section a {
    color: white;
    display: block;
}
.contacts__section a:hover {
    color: var(--ligth-green);
}
.header__nav_wrap ul li a:hover {
    color: var(--purple);;
}

.contacts__info_title {
    display: block;
    margin-bottom: 3rem;
    font-weight: 500;
    font-size: var(--s24);
}

.contacts__info_address {
    margin-top: 1rem;
}

.contacts__info_address p {
    margin-bottom: 1rem;
}

.contacts__info {
    flex: 0 0 27%;
}

.find_about_course_block__title {
    font-size: var(--s20);
    font-weight: 600;
}

.std_form_label {
    margin-bottom: 1.5rem;
}

.std_form_label input {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: var(--s18);
    border: 0.1rem solid var(--grey);
    border-radius: var(--border-radius-s14);
}

.std_form_label label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--s18);
    font-weight: 500;
}

.contacts_form .std_form_label input {
    color: white;
    border: none;
    padding: 1rem;
    border-bottom: 1px solid white;
    border-radius: var(--border-radius-btn) var(--border-radius-btn) 0 0;

}

.contacts_form input::placeholder {
    color: white;
}


.std_news_blog {
    background: var(--ligth-grey);
    border-radius: var(--border-radius-s14);
    padding: 1rem 2rem;
}

.std_news_blog:not(:last-of-type) {
    margin-bottom: 1.5rem;
}

.std_form_checkbox input:checked {
    background-color: var(--ligth-green);
    border-color: var(--ligth-green);
    color: black;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%228%22%20viewBox%3D%220%200%2011%208%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M10.4714%201.80458C10.7318%201.54423%2010.7318%201.12212%2010.4714%200.861766C10.2111%200.601417%209.78895%200.601417%209.5286%200.861766L4%206.39036L1.13807%203.52843C0.877722%203.26808%200.455612%203.26808%200.195262%203.52843C-0.0650874%203.78878%20-0.0650874%204.21089%200.195262%204.47124L3.5286%207.80457C3.78894%208.06493%204.21106%208.06493%204.4714%207.80457L10.4714%201.80458Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain; /* или нужный размер, например 11px 8px */
    background-position: center;
}

.std_form_checkbox {
    margin-top: 1.375rem;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.std_form_checkbox input {
    flex: 0 0 1rem;
    appearance: none;
    height: 1rem;
    border: var(--border-std) solid var(--ligth-green);
    border-radius: 0.25rem;
    background-color: #fff;
    cursor: pointer;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin: 0;
}

.iti {
    position: relative !important;
    display: inline-block !important;
    width: 100% !important;
    color: black;
}

.find_about_course_block .find_about_course_block__title {
    display: block;
    width: 60%;
    margin-bottom: 2.5rem;
    line-height: 1.25rem;
}

.btn.white {
    border: 0.1rem solid white;
    border-radius: var(--border-radius-btn);
    width: 100%;
    transition: all 0.3s ease;
}

.std_form_block {
    margin-bottom: 2rem;
}

.btn.white:hover {
    background: white;
    color: #000;
}

.contacts__section .container {
    width: 85%;
}

.contacts_form {
    flex: 0 0 50%;
    align-self: center;
}

.advantages_education_block_title_wrap {
    margin-bottom: 0.5rem;
}

.mfp-container {
    animation: .4s ease-in-out .1s forwards bg-show;
}


/* Контент попапа */
.mfp-content {
    max-width: 26rem;
    background: white;
    padding: 1.25rem;
    border-radius: var(--border-radius-s18);
    text-align: center;
    opacity: 0;
    animation: .4s ease-in-out .1s forwards show;
}

.mfp-removing .mfp-content {
    animation: hide 0.4s ease-in-out forwards;
}

.mfp-removing .mfp-container {
    animation: bg-hide 0.4s ease-in-out forwards;
}


@keyframes bg-show {
    0% {
        background-color: transparent;
    }
    100% {
        background-color: rgba(0, 0, 0, .75);
    }
}

@keyframes bg-hide {
    0% {
        background-color: rgba(0, 0, 0, .75);
    }
    100% {
        background-color: transparent;
    }
}


@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Закрывающая кнопка */
.mfp-close {
    color: black;
    font-size: var(--s24);
    position: absolute;
    right: 0.875rem;
    top: 0.875rem;
    cursor: pointer;
}

.mfp-content form button {
    width: 100%;
}


.accordion {
    overflow: hidden;
}


.accordion__header {
    --acc-color: #4A00CD;
    position: relative;
    padding-right: 5.5rem;
    cursor: pointer;
    user-select: none;
}

.accordion__header_title {
    font-weight: 500;
    font-size: var(--s22);
}

.accordion__header_description {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--s20);
    font-weight: 300;
}

/* Круг → через border у ::before */
.accordion__header::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 50%;
    border: 1px solid var(--acc-color); /* всегда фиолетовая обводка */
    background-color: transparent;
    transform: translateY(-50%);
    transition: background-color .3s ease;
}

/* Плюс → через SVG в ::after */
.accordion__header::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 3.3rem;
    height: 3.3rem;
    transform: translateY(-50%) rotate(0deg);

    background-color: rgba(74, 0, 205, 1); /* Задаёт цвет плюса */

    /* МАСКА SVG */
    -webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 52 51' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M25.0543 26.4463L25.226 34.6167C25.2365 35.1241 25.6566 35.5443 26.164 35.5547C26.6716 35.5654 27.074 35.163 27.0633 34.6554L26.8916 26.4849L35.0622 26.6565C35.5698 26.6671 35.9722 26.2648 35.9616 25.7571C35.9511 25.2497 35.531 24.8296 35.0236 24.8192L26.853 24.6476L26.6814 16.477C26.671 15.9696 26.2509 15.5495 25.7435 15.539C25.4899 15.5339 25.2623 15.6319 25.0997 15.7946C24.937 15.9572 24.839 16.1848 24.8443 16.4386L25.0159 24.6092L16.8455 24.4375C16.5916 24.4321 16.364 24.5302 16.2014 24.6928C16.0388 24.8554 15.9408 25.083 15.9461 25.3368C15.9566 25.8442 16.3767 26.2643 16.8841 26.2748L25.0543 26.4463Z'/%3e%3c/svg%3e");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 70% 70%;

    mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 52 51' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M25.0543 26.4463L25.226 34.6167C25.2365 35.1241 25.6566 35.5443 26.164 35.5547C26.6716 35.5654 27.074 35.163 27.0633 34.6554L26.8916 26.4849L35.0622 26.6565C35.5698 26.6671 35.9722 26.2648 35.9616 25.7571C35.9511 25.2497 35.531 24.8296 35.0236 24.8192L26.853 24.6476L26.6814 16.477C26.671 15.9696 26.2509 15.5495 25.7435 15.539C25.4899 15.5339 25.2623 15.6319 25.0997 15.7946C24.937 15.9572 24.839 16.1848 24.8443 16.4386L25.0159 24.6092L16.8455 24.4375C16.5916 24.4321 16.364 24.5302 16.2014 24.6928C16.0388 24.8554 15.9408 25.083 15.9461 25.3368C15.9566 25.8442 16.3767 26.2643 16.8841 26.2748L25.0543 26.4463Z'/%3e%3c/svg%3e");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 90% 90%;

    transition: transform .3s ease, background-color .3s ease;
}

.accordion__item.is-open .accordion__header::after {
    transform: translateY(-50%) rotate(45deg);
    background-color: #fff;
    color: #fff; /* плюс становится белым */

}

.accordion__item.is-open .accordion__header::before {
    background-color: var(--purple);
}

.accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    font-size: var(--s20);
    font-weight: 300;
}

.accordion__item.is-open .accordion__content {
    padding: 1rem 0 0;
}

.faq_wrap .std_news_blog {
    padding: 2rem 1.5rem 2.5rem 1.5rem;
}

.accordion__header {
    font-weight: 500;
    font-size: var(--s18);
}

.std_news_blog.light-green {
    background: var(--ligth-green);
}

.std_news_blog.purple {
    background: var(--purple);
    color: white;
}

.title {
    font-weight: 500;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    font-size: var(--s24);
}

.banners {
    height: 45em;
    overflow: hidden;
    border-radius: 0.875rem;
    background-image: url("/upload/big_banner.webp");
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#tag {
    position: absolute;
    bottom: 4em;
    left: 3em;
    display: flex;
    max-width: 35rem;
    flex-wrap: wrap;
}

#tag a {
    color: #ffffff;
}

.banners #tag a {
    padding: .5rem 1rem;
    background-color: var(--purple);
    border-radius: 1.875rem;
    margin: .4rem;
}

.banners #tag a:hover {
    background-color: var(--ligth-green);
    color: #000000;
}


.news ul li {
    margin-left: 0.4rem;
}

.news ul li:not(:last-of-type) {
    margin-bottom: 0.5rem;
}

.news ul li,
.news ul {
    list-style: disc;
    list-style-position: inside;
}

.course_detail_description.flexbox {
    align-items: flex-start;
}


.news p {
    margin-bottom: 1rem;
    font-size: var(--s20);
    font-weight: 300;
}


.scrollbar::-webkit-scrollbar, .scrolled::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar::-webkit-scrollbar-thumb, .scrolled::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #ccc;
    background: var(--purple);
    border: 1px solid #fff;
    border-color: var(--purple);
}

.payment_block__info.flexbox {
    align-items: flex-start;
}

/*──────────────────────────────────────────
  ОСНОВА: 18.3 rem (≈ 292.8 px) – как у вас
──────────────────────────────────────────*/

.clock {
    --d: 18.6rem;
    --r: calc(var(--d) / 2);
    width: 19rem;
    height: 19rem;
    background: var(--ligth-grey);
    border: 0.2rem solid var(--purple);
    border-radius: 50%;
    margin: 8% auto 0;
    position: relative;
}

/* центр точки */
.dot {
    width: 0.875rem;
    height: 0.875rem; /* 14 px */
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--grey);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0.125rem 0.25rem -0.0625rem #000;
}

/*───────────────── стрелки ─────────────────*/
.hour-hand {
    position: absolute;
    z-index: 5;
    width: 0.25rem; /* 4 px  */
    height: 4.0625rem; /* 65 px */
    top: 4.8rem; /* 79 px */
    left: 50%;
    margin-left: -0.125rem; /* -2 px */
    background: #333;
    border-radius: 50% 50% 0 0;
    transform-origin: 50% 4.5rem; /* 72 px */
}

.minute-hand {
    position: absolute;
    z-index: 6;
    width: 0.25rem; /* 4 px  */
    height: 6.25rem; /* 100 px*/
    top: 2.8rem; /* 46 px */
    left: 50%;
    margin-left: -0.125rem;
    background: var(--grey);
    border-radius: 50% 50% 0 0;
    transform-origin: 50% 6.5625rem; /* 105 px*/
}

.second-hand {
    position: absolute;
    z-index: 7;
    width: 0.125rem; /* 2 px  */
    height: 7.5rem; /* 120 px*/
    top: 1.5rem; /* 26 px */
    left: 50%;
    margin-left: -0.0625rem;
    background: var(--purple);
    border-radius: 50% 50% 0 0;
    transform-origin: 50% 7.8125rem; /* 125 px*/
}

/*───────────────── цифры ─────────────────*/
.clock span {
    position: absolute;
    z-index: 4;
    font: 700 1.375rem/1 'Poiret One'; /* 22 px */
    color: #333;
}

.h12 {
    top: 1.875rem;
    left: 50%;
    margin-left: -0.5625rem;
}

/* 30/±9 px */
.h3 {
    top: 8.75rem;
    right: 1.875rem;
}

/* 140/30 px */
.h6 {
    bottom: 1.875rem;
    left: 50%;
    margin-left: -0.3125rem;
}

.h9 {
    top: 8.75rem;
    left: 2rem;
}

/* 140/32 px */

/*───────────────── риски циферблата ─────────────────*/
.diallines {
    position: absolute;
    z-index: 2;
    left: 50%;
    margin-left: -0.0625rem; /* центрируем 1 px */
    width: 0.125rem;
    height: 0.9375rem; /* 2×15 px */
    background: #666;
    transform-origin: 50% var(--r);
}

.diallines.fat { /* каждая 5-я («часовая») */
    width: 0.25rem;
    height: 1.375rem; /* 4×22 px */
}

/*───────────────── подписи ─────────────────*/
.info {
    position: absolute;
    z-index: 3;
    left: 50%;
    margin-left: -3.75rem; /* 120 px /2 */
    width: 7.5rem;
    height: 1.25rem; /* 120×20 px */
    font: 700 0.6875rem/1.25rem 'Poiret One';
    background: var(--grey);
    color: white;
    text-align: center;
    border-radius: 0.4375rem; /* 7 px */
    letter-spacing: 0.1875rem; /* 3 px */
}

.date {
    top: 5rem;
}

/* 80 px  */
.day {
    top: 12.5rem;
}

/* 200 px */

.city {
    text-align: center;
    font-weight: 500;
    font-size: var(--s24);
    margin-top: 1rem;
}

.information__map{
    flex: 0 0 50%;
    border-radius: var(--border-radius-s14);
    overflow: hidden;
}

.information.flexbox{
    align-items: flex-start;
}

.information_wrap{
    flex: 1;
    height: 550px;
}

#city-question-popup p{
    font-size: var(--s20);
    margin-bottom: 1rem;
    display: block;
    text-align: center;
}
#city-auto-name{
    display: block;
}
#cityNo,
#cityYes{
   flex: 0 0 45%;
}
.req-label {
    min-width: 10rem;
    max-width: 10rem;
    display: block;
}
.req-value:hover {
    cursor: pointer;
color: var(--purple);
}
.req-value:active {
    color: var(--purple);
}
.city_choice {
    width: 20%;
}
.recommendations_section_courses_container, .recommendations_section_courses_hour {
    font-size: .9rem;
}
.recommendations_section_courses_price {
 white-space: nowrap;

}
.news.course_section__courses {
    width:100%
}
.course_section__section .flexbox {
    justify-content: flex-start;
    align-items: flex-start;
}
.course_section__section {
    padding: 0;
}
.b24-widget-button-block svg {
   max-width: 1.5rem;
}
.section_pay img {
    width: 20rem;
    padding: 1rem;
}
.payment_block__info_right {
    position: sticky;
    top: 1rem;
}
.payment_block__info {
    position: relative;
}
.find_about_course_block .find_about_course_block__title {
    text-align: left;
}