.training__main-sec {
position: relative;
background-color: #c23142;
overflow: hidden;
margin-bottom: 50px;
}
.training__content-wrap {
position: relative;
max-width: 480px;
padding: 94px 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
z-index: 1;
}
.training_content-head {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
color: #fff;
font-size: 14px;
font-weight: 300;
}
.training__wrap-text {
color: #fff;
}
.training__wrap-text > h1 {
margin-top: 0;
margin-bottom: 24px;
font-size: 50px;
line-height: 102%;
font-weight: 400;
}
.training__wrap-text > p {
font-size: 16px;
line-height: 137%;
font-weight: 300;
}
.training__content-wrap > span {
font-size: 22px;
font-weight: 400;
color: #fff;
}
.training__content-wrap > button {
padding: 15px 22px;
font-size: 17px;
background-color: #121217;
color: #fff;
transition: var(--default-transition);
}
.training__content-wrap > button:hover {
box-shadow: 0 0 10px #121217;
}
.training__main-img {
position: absolute;
top: 0;
right: 0;
object-fit: cover;
height: 100%;
width: 1044px;
}
.service__sidebar-toast {
padding: 24px 24px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: #fff;
border-left: 4px solid var(--accent-red-main);
}
.service__sidebar-toast > span:first-child,
.service__sidebar-toast > span:nth-child(2) {
font-size: 22px;
font-weight: 400;
color: var(--text-color-black);
}
.service__sidebar-toast > span:nth-child(2) {
color: var(--text-color-red);
margin-bottom: 8px;
}
.service__sidebar-toast > span:last-child {
font-size: 16px;
font-weight: 300;
color: var(--text-color-main);
}
.work-ex-title-training {
max-width: 450px;
}
.work-img-wrap-training {
height: 320px;
}
.work-card-title-training {
font-size: 18px;
font-weight: 500;
color: var(--text-color-black);
margin-bottom: 2px;
}
.work-card-sub {
font-size: 14px;
font-weight: 300;
color: var(--text-color-light);
}
.training__accordion {
margin-bottom: 36px;
}
.training__accord-item {
padding: 32px 0;
border-top: 1px solid var(--border-main-color);
cursor: pointer;
}
.training__accord-item:last-child {
border-bottom: 1px solid var(--border-main-color);
}
.training__accord-body {
display: none;
}
.training__accord-top {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 25px;
font-weight: 400;
color: var(--text-color-black);
}
.training__accord-top > span {
content: "";
display: block;
width: 25px;
height: 25px;
background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="26" height="27" viewBox="0 0 26 27" fill="none"%3E%3Cpath d="M13 5.9165V21.0832" stroke="%23B62D35" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3Cpath d="M5.41797 13.5H20.5846" stroke="%23B62D35" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3C/path%3E%3C/svg%3E');
background-repeat: no-repeat;
background-position: center;
}
.training__accord-active .training__accord-top > span {
height: 2px;
}
.training__accord-body {
color: var(--text-color-main);
font-size: 19px;
font-weight: 300;
line-height: 147%;
}
.training__accord-body h4 {
margin-top: 24px;
margin-bottom: 16px;
color: var(--text-color-black);
}
.training__accord-body ul {
margin: 0 0;
padding-inline-start: 20px;
}
.training__accord-body li:not(:last-child) {
margin-bottom: 10px;
}
.training__accord-body li::marker {
color: var(--accent-red-main);
}
.training__form-action {
padding: 32px 40px;
display: grid;
grid-template-columns: 1fr 0.68fr 0.68fr;
align-items: center;
gap: 30px;
background-color: #121217;
color: #fff;
}
.training__form-action span {
font-size: 16px;
line-height: 137%;
font-weight: 300;
color: var(--text-color-light);
}
.training__form-text-wrap > h2 {
font-size: 28px;
font-weight: 500;
line-height: 117%;
margin-bottom: 4px;
max-width: 330px;
}
.training__form-button-wrap > span {
margin-bottom: 4px;
}
.training__form-button-wrap > button {
width: 100%;
padding: 15px 15px;
background-color: var(--button-color-main);
font-size: 17px;
line-height: 140%;
font-weight: 500;
min-width: 185px;
color: #fff;
transition: var(--default-transition);
}
.training__form-button-wrap > button:hover {
background-color: #db3740;
}
.training__form-tel-wrap > span {
margin-bottom: 4px;
}
.training__form-tel > a {
min-width: 227px;
color: #fff;
font-size: 26px;
font-weight: 500;
line-height: 137%;
transition: var(--default-transition);
}
.training__form-tel {
display: flex;
flex-direction: row;
}
.training__form-tel > a:hover {
color: var(--accent-red-main);
}
.training__form-tel > span {
display: block;
width: 40px;
height: 40px;
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none" stroke="white" stroke-opacity="0.16"%3E%3Ccircle cx="20" cy="20" r="19.5" /%3E%3Cpath d="M27.4058 23.6427V25.865C27.4066 26.0713 27.3643 26.2755 27.2817 26.4645C27.1991 26.6535 27.0778 26.8232 26.9258 26.9626C26.7738 27.1021 26.5943 27.2083 26.3989 27.2744C26.2035 27.3405 25.9964 27.365 25.791 27.3464C23.5116 27.0988 21.3221 26.3199 19.3984 25.0724C17.6086 23.9351 16.0912 22.4177 14.9539 20.6279C13.702 18.6955 12.923 16.4953 12.6798 14.2057C12.6613 14.0009 12.6857 13.7944 12.7513 13.5995C12.817 13.4046 12.9225 13.2255 13.0611 13.0736C13.1998 12.9217 13.3686 12.8003 13.5567 12.7172C13.7449 12.6341 13.9482 12.5911 14.1539 12.5909H16.3761C16.7356 12.5874 17.0841 12.7147 17.3567 12.9491C17.6293 13.1835 17.8073 13.509 17.8576 13.865C17.9514 14.5761 18.1254 15.2744 18.3761 15.9464C18.4758 16.2116 18.4974 16.4997 18.4383 16.7767C18.3792 17.0537 18.242 17.308 18.0428 17.5094L17.1021 18.4502C18.1565 20.3046 19.692 21.8401 21.5465 22.8946L22.4872 21.9539C22.6886 21.7547 22.9429 21.6174 23.2199 21.5584C23.4969 21.4993 23.7851 21.5209 24.0502 21.6205C24.7223 21.8713 25.4205 22.0452 26.1317 22.139C26.4915 22.1898 26.8201 22.371 27.0551 22.6483C27.29 22.9255 27.4148 23.2795 27.4058 23.6427Z" fill="white" /%3E%3C/svg%3E');
background-size: contain;
background-repeat: no-repeat;
margin-right: 12px;
}
.tariffs__title {
color: var(--title-color);
font-size: var(--title-font-size);
font-weight: 400;
line-height: 110%;
margin-bottom: 30px;
text-align: center;
}
.tariffs__wrap {
position: relative;
}
.tariffs__slider {
overflow: hidden;
}
.tariff__item {
position: relative;
padding: 50px 50px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 18px;
line-height: 143%;
font-weight: 300;
color: var(--text-color-main);
border: 1px solid var(--border-main-color);
}
.tariff__item > h3 {
font-size: 28px;
font-weight: 500;
line-height: 121%;
margin-bottom: 16px;
color: var(--title-color);
}
.tariff__item > div {
text-align: center;
margin-bottom: 16px;
}
.tariff__item ul {
padding-inline-start: 20px;
margin: 0 0;
}
.tariff__item ul:last-of-type {
margin-bottom: 32px;
}
.tariff__item li {
margin-bottom: 8px;
}
.tariff__item ul li::marker {
color: var(--accent-red-main);
}
.tariff__list-none > li::marker {
color: #a9a9a9 !important;
}
.tariff__item > span {
font-size: 20px;
font-weight: 400;
color: var(--text-color-black);
margin-bottom: 32px;
}
.tariff__item > button {
padding: 15px 22px;
font-size: 17px;
font-weight: 500;
background-color: var(--button-color-main);
color: #fff;
transition: var(--default-transition);
}
.tariff__item > button:hover {
background-color: var(--button-color-main-hover);
}
.tariff__item-pop {
background-color: #121217;
color: #fff;
border: none;
}
.tariff__item-pop > button:hover {
background-color: #db3740;
}
.tariff__item-pop > h3 {
color: #fff;
}
.tariff__item-pop ul li::marker {
color: #fff;
}
.tariff__item-pop > span {
color: #fff;
}
.tariff__sticker {
padding: 4px 12px;
position: absolute;
top: 16px;
right: 16px;
font-size: 14px;
font-weight: 400;
border-radius: 40px;
background-color: var(--accent-red-main);
}
@media (max-width: 1400px) {
.training__main-img {
right: -300px;
}
}
@media (max-width: 992px) {
.training__main-sec {
margin-bottom: 30px;
}
.training__content-wrap {
padding-top: 74px;
padding-bottom: 80px;
max-width: 320px;
gap: 20px;
}
.training__wrap-text > h1 {
font-size: 30px;
margin-bottom: 16px;
}
.training__content-wrap > span {
font-size: 18px;
}
.training__content-wrap > button {
font-size: 16px;
}
.training__main-img {
right: -240px;
}
.service__sidebar-toast {
padding: 16px 16px;
grid-column: 1/3;
}
.service__sidebar-toast > span {
font-size: 19px;
}
.service__sidebar-toast > span:nth-child(2) {
margin-bottom: 6px;
}
.service__sidebar-toast > span:last-child {
font-size: 15px;
}
.work-img-wrap-training {
max-height: 275px;
margin-bottom: 16px;
}
.work-img-wrap-training > img {
max-height: 275px;
}
.work-card-title-training {
font-size: 17px;
}
.training__accord-item {
padding: 24px 0;
}
.training__accord-top {
font-size: 22px;
}
.training__accord-body {
font-size: 16px;
}
.training__accord-body h4 {
margin-bottom: 12px;
margin-top: 20px;
}
.training__accord-body li:not(:last-child) {
margin-bottom: 8px;
}
.training__form-action {
padding: 25px;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.training__form-text-wrap {
grid-column: 1/3;
}
.training__form-text-wrap > h2 {
max-width: 100%;
font-size: 25px;
}
.tariff__item {
padding: 24px 24px;
align-items: flex-start;
font-size: 16px;
}
.tariff__item > h3 {
font-size: 25px;
margin-bottom: 12px;
}
.tariff__item > div {
text-align: start;
margin-bottom: 12px;
}
.tariff__item ul:last-of-type {
margin-bottom: 20px;
}
.tariff__item > span {
margin-bottom: 20px;
}
.tariff__sticker {
top: 10px;
right: 10px;
padding: 2px 8px;
font-size: 13px;
}
}
@media(max-width: 670px) {
.training__main-sec {
display: flex;
height: 775px;
flex-direction: column;
align-items: center;
}
.training__content-wrap {
padding-top: 40px;
}
.training__main-img {
right: 0;
height: 411px;
bottom: 0;
top: auto;
}
}
@media(max-width: 600px) {
.training__form-action {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.training__form-text-wrap {
grid-column: auto;
}
.tariffs__slider {
overflow: visible;
}
}