@charset "UTF-8";

@font-face {
font-family: icons;
font-display: swap;
src: url(//school-star.ru/wp-content/themes/sky/assets/fonts/icons.woff2) format("woff2"), url(//school-star.ru/wp-content/themes/sky/assets/fonts/icons.woff) format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Montserrat;
font-display: swap;
src: url(//school-star.ru/wp-content/themes/sky/assets/fonts/Montserrat-Bold.woff2) format("woff2"), url(//school-star.ru/wp-content/themes/sky/assets/fonts/Montserrat-Bold.woff) format("woff");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: Montserrat;
font-display: swap;
src: url(//school-star.ru/wp-content/themes/sky/assets/fonts/Montserrat-Regular.woff2) format("woff2"), url(//school-star.ru/wp-content/themes/sky/assets/fonts/Montserrat-Regular.woff) format("woff");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: Montserrat;
font-display: swap;
src: url(//school-star.ru/wp-content/themes/sky/assets/fonts/Montserrat-Medium.woff2) format("woff2"), url(//school-star.ru/wp-content/themes/sky/assets/fonts/Montserrat-Medium.woff) format("woff");
font-weight: 500;
font-style: normal;
}
.purpose__list li::before, .card-process__zoom::before, .slider-nav__btn::before, [class*=_icon-]:before {
font-family: "icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class*=_icon-]:before {
display: block;
}
._icon-arr-tab:before {
content: "\e900";
}
._icon-arr:before {
content: "\e901";
}
._icon-arr-b:before {
content: "\e902";
}
._icon-check:before {
content: "\e903";
}
._icon-ok:before {
content: "\e904";
}
._icon-phone:before {
content: "\e905";
}
._icon-t:before {
content: "\e906";
font-size: 20px;
}
._icon-vk:before {
content: "\e907";
font-size: 25px;
}
._icon-w:before {
content: "\e908";
font-size: 20px;
}
._icon-close:before {
content: "\e909";
}
._icon-zoom:before {
content: "\e90a";
}
:root {
--main-text: #000;
--accent-color: #105DEF;
--fade-duration: 0.5s;
--fade-delay-step: 0.2s;
--hover-duration: 0.2s;
}
* {
padding: 0px;
margin: 0px;
border: 0px;
}
*,
*:before,
*:after {
box-sizing: border-box;
outline-color: var(--accent-color);
}
html {
font-size: 10px;
}
html,
body {
height: 100%;
min-width: 320px;
}
body {
color: var(--new-main-text);
line-height: 1.4;
font-family: Montserrat,"Segoe UI Emoji", "Noto Color Emoji", sans-serif;
font-size: 1.4rem;
font-weight: 400;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (min-width: 767.98px) {
body {
font-size: 1.8rem;
}
}
@media (min-width: 1279.98px) {
body {
font-size: 2.2rem;
}
}
input,
button,
textarea {
font-family: Montserrat;
font-size: inherit;
}
button {
cursor: pointer;
color: inherit;
background-color: inherit;
}
a {
color: inherit;
transition: all 0.3s ease 0s;
}
a:link,
a:visited {
text-decoration: none;
}
@media (hover: hover) {
a:hover {
text-decoration: none;
color: var(--accent-color);
}
}
ul li {
list-style: none;
}
img {
vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
}
body {
background-color: var(--bg-color);
}
.lock body {
overflow: hidden;
touch-action: none;
}
.loaded body {
opacity: 1;
}
.wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.wrapper > main {
flex: 1 1 auto;
}
.wrapper > * {
min-width: 0;
} [class*=__container] {
max-width: 1440px;
box-sizing: content-box;
margin: 0 auto;
padding: 0 20px;
}
.form {
width: 100%;
display: grid;
gap: 20px;
}
.form__input {
color: #464646;
}
.form__input input {
width: 100%;
padding: 20px;
border: 1px solid #878787;
border-radius: 5px;
}
.btn {
font-family: Montserrat;
font-size: 1.8rem;
line-height: 1.2;
font-weight: 700;
text-transform: uppercase;
text-align: center;
padding: 19px 33px;
background: var(--accent-color);
color: #fff;
cursor: pointer;
display: inline-block;
align-items: center;
justify-content: center;
transition: all 0.3s ease 0s;
width: 100%;
border-radius: 80px;
-webkit-appearance: none;
-webkit-border-radius: 80px;
outline: 0;
}
@media (min-width: 767.98px) {
.btn {
font-size: 2.2rem;
padding: 17px 31px;
width: auto;
}
}
@media (hover: hover) {
.btn:hover {
background: #2571ff;
color: #fbf9f4;
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.17);
}
}
.btn span {
display: none;
}
@media (min-width: 767.98px) {
.btn span {
display: inline;
}
}
.btn_wt {
background: #fff;
color: var(--accent-color);
}
@media (hover: hover) {
.btn_wt:hover {
color: var(--accent-color);
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.25);
background: #d3e2ff;
}
}
.select {
position: relative;
}
.select__body {
position: relative;
}
.select__title {
color: inherit;
text-align: left;
border: 1px solid var(--light-color);
background: transparent;
cursor: pointer;
width: 100%;
border-radius: 40px;
padding: 8px 16px;
}
.filter-prod__item_main .select__title {
width: 270px;
}
.select__value {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
gap: 11px;
}
.select__value:before {
content: "\e914";
color: var(--main-color-text);
font-size: 21px;
align-self: stretch;
flex: 0 0 21px;
transition: all 0.3s ease 0s;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(-90deg);
}
.select__content {
font-weight: 500;
font-size: 1.6rem;
}
.select__text {
flex: 1 1 auto;
}
.select__input {
width: 100%;
background-color: transparent;
height: 100%;
}
.select__options {
border: 2px solid var(--accent-color);
color: #000000;
position: absolute;
z-index: 3;
border-radius: 0 0 4px 4px;
min-width: 100%;
top: 120%;
left: 0;
background: var(--light-color);
padding: 20px 44px 20px 20px;
border-radius: 20px;
}
.select__scroll {
overflow-y: auto;
max-height: 200px;
}
.select__option {
display: inline-flex;
text-align: left;
cursor: pointer;
color: inherit;
font-size: 1.6rem;
font-weight: 500;
border-bottom: 2px solid transparent;
transition: all 0.3s ease 0s;
}
.select__option._select-selected {
border-bottom: 2px solid #0d5dd6;
}
.select__option:not(:last-child) {
margin-bottom: 8px;
}
@media (any-hover: hover) {
.select__option:hover {
border-bottom: 2px solid #0d5dd6;
}
}
.select__row {
display: inline-flex;
align-items: center;
}
.select._select-open {
z-index: 5;
}
.select._select-disabled .select__title {
background-color: var(--accent-color);
}
.select._select-disabled .select__content {
color: #DADADA;
}
.select._select-disabled .select__value::before {
color: #DADADA;
}
._select-tag {
cursor: pointer;
}
body::after {
content: "";
background: rgba(0, 0, 0, 0.4);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.8s ease 0s;
pointer-events: none;
z-index: 149;
}
body.popup-show::after {
opacity: 1;
}
.popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 0;
transition: visibility 0.8s ease 0s;
visibility: hidden;
pointer-events: none;
}
.popup_show {
z-index: 150;
visibility: visible;
overflow: auto;
pointer-events: auto;
}
.popup_show .popup__content {
visibility: visible;
transform: scale(1);
opacity: 1;
}
.popup__wrapper {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100%;
flex: 1 1 auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.popup__content {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
transition: transform 0.3s ease 0s;
pointer-events: none;
background: #fff;
border-radius: 20px;
}
@media (min-width: 767.98px) {
.popup__content {
border-radius: 30px;
}
}
.lock .popup__content {
visibility: visible;
pointer-events: visible;
}
.popup__close {
position: absolute;
z-index: 2;
right: 15px;
top: 25px;
}
@media (min-width: 767.98px) {
.popup__close {
right: 25px;
}
}
.popup__close::before {
font-size: 23px;
}
.popup__body {
padding: 40px 15px 35px;
}
@media (min-width: 767.98px) {
.popup__body {
padding: 40px 30px 40px;
}
}
.popup__grid {
display: grid;
justify-items: center;
text-align: center;
gap: 20px;
width: 100%;
}
.popup__grid_sing-up {
max-width: 684px;
}
@media (min-width: 767.98px) {
.popup__grid_sing-up {
padding: 20px 40px 20px;
}
}
.popup__grid_thanks {
max-width: 402px;
}
.popup__page {
display: grid;
gap: 15px;
}
.popup__icon {
font-size: 50px;
color: var(--accent-color);
}
.popup__title {
font-size: 3rem;
line-height: 1.2;
font-weight: 700;
}
@media (min-width: 767.98px) {
.popup__title {
font-size: 4.4rem;
}
}
.popup__text {
color: #464646;
font-size: 1.6rem;
max-width: 356px;
}
.popup__text a {
color: var(--accent-color);
}
.pagging {
padding-top: 20px;
padding-bottom: 20px;
display: flex;
gap: 5px;
}
.pagging__list {
display: flex;
gap: 5px;
}
.pagging__item {
display: inline-flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid #d9e3e6;
background: var(--light-color);
color: #333;
font-size: 1.3rem;
font-weight: 600;
}
.pagging__item._active {
color: var(--light-text-color);
background: var(--accent-color);
background: #014155;
}
[class*=-ibg] {
position: relative;
}
[class*=-ibg] picture,
[class*=-ibg] picture img,
[class*=-ibg] video,
[class*=-ibg] iframe,
[class*=-ibg] svg,
[class*=-ibg] img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
[class*=-ibg_contain] img {
object-fit: contain;
}
h1,
h2 {
font-size: 3.2rem;
line-height: 1.2;
font-weight: 700;
text-align: center;
}
@media (min-width: 767.98px) {
h1,
h2 {
font-size: 4.6rem;
}
}
@media (min-width: 1279.98px) {
h1 {
font-size: 7.8rem;
}
}
@media (min-width: 1279.98px) {
h2 {
font-size: 6.4rem;
}
}
.slider-nav {
display: flex;
justify-content: center;
gap: 6px;
position: relative;
padding-top: 20px;
}
@media (min-width: 767.98px) {
.slider-nav {
gap: 10px;
}
}
.slider-nav__btn {
width: 33px;
height: 33px;
border: 1px solid var(--accent-color);
border-radius: 100%;
position: relative;
z-index: 2;
transition: all 0.3s ease 0s;
}
@media (min-width: 767.98px) {
.slider-nav__btn {
width: 57px;
height: 57px;
}
}
.slider-nav__btn::before {
content: "\e901";
color: var(--accent-color);
font-size: 15px;
}
@media (min-width: 767.98px) {
.slider-nav__btn::before {
content: "\e900";
font-size: 20px;
}
}
@media (hover: hover) {
.slider-nav__btn:hover {
border: 1px solid #659aff;
}
.slider-nav__btn:hover::before {
color: #659aff;
}
}
.slider-nav__btn--prev {
transform: rotate(180deg);
}
.custom-slider-wrapper {
position: relative;
overflow: hidden;
max-width: calc(100% + 40px);
margin: 0 -20px;
padding: 0 20px;
}
.custom-slider {
transition: transform 0.4s ease-in-out;
will-change: transform;
}
.custom-slider-slide {
flex: 0 0 100%; display: grid;
}
.custom-item {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
}
.custom-slide {
flex: 0 0 100%; box-sizing: border-box;
display: none; }
.custom-slide.active {
display: block; }
.slide-content {
background: #f0f0f0;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.bs {
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.05);
transition: all 0.3s ease 0s;
}
@media (hover: hover) {
.bs:hover {
transform: translateY(10px);
box-shadow: 0 4px 34px 0 rgba(0, 0, 0, 0.15);
}
} .fade-in,
.fade-in-child {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--fade-duration) ease-in-out, transform var(--fade-duration) ease-in-out;
} .fade-in.show,
.fade-in-child.show {
opacity: 1;
transform: translateY(0);
}
.hero__img {
position: relative;
}
.hero__placeholder {
transition: opacity 1s ease-in-out;
}
.hero__video {
opacity: 0;
pointer-events: none;
transition: opacity 1s ease-in-out;
} @keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
1% {
transform: scale(1.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
2% {
transform: scale(1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
100% {
transform: scale(1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
}
.image-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
padding: 40px 10px 10px;
}
.image-popup-overlay__close {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
cursor: pointer;
font-size: 30px;
color: white;
z-index: 10;
}
.image-popup-overlay img {
min-width: 320px;
max-height: 95%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-radius: 10px;
transition: transform 0.3s ease;
object-fit: contain;
}
.image-popup-overlay img.show {
transform: scale(1);
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
@keyframes scroll-right {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(50%);
}
}
.header {
padding: 8px 0;
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
background: #fff;
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.header_scrolled {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1470px) {
.header::before {
content: "";
position: absolute;
z-index: 11;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.06);
background: #fff;
}
}
.header__container {
display: flex;
align-items: center;
gap: 24px;
}
@media (min-width: 767.98px) {
.header__container {
gap: 17px;
}
}
.header__logo {
flex: 1 1 auto;
position: relative;
z-index: 12;
}
@media (min-width: 1470px) {
.header__logo {
flex: 1 0 auto;
}
}
.header_scrolled .header__logo img {
width: 45px;
flex: 0 0 45px;
}
@media (min-width: 1470px) {
.header__phone {
order: 3;
}
}
.header__btn {
display: none;
}
@media (min-width: 767.98px) {
.header__btn {
display: block;
position: relative;
z-index: 12;
font-size: 1.8rem;
}
}
@media (min-width: 1470px) {
.header__btn {
order: 4;
}
}
.header_scrolled .header__btn {
padding-top: 10px;
padding-bottom: 10px;
}
.header__menu {
order: 5;
}
@media (min-width: 1470px) {
.header__menu {
order: 2;
}
}
.logo {
display: inline-flex;
}
.logo img {
transition: all 0.3s ease 0s;
width: 59px;
flex: 0 0 59px;
}
@media (min-width: 767.98px) {
.logo img {
width: 84px;
flex: 0 0 84px;
}
}
@media (min-width: 1470px) {
.logo img {
width: 100px;
flex: 0 0 100px;
}
}
.phone {
position: relative;
z-index: 12;
}
@media (min-width: 767.98px) {
.phone {
display: flex;
align-items: center;
gap: 4px;
}
}
.phone::before {
font-size: 28px;
color: var(--accent-color);
}
@media (min-width: 1470px) {
.phone::before {
font-size: 22px;
}
}
.phone__text {
display: none;
}
@media (min-width: 767.98px) {
.phone__text {
display: inline;
font-size: 1.6rem;
}
}
.menu {
position: relative;
}
.menu__wrapper {
background: #f1f6ff;
transition: all 0.3s ease 0s;
}
@media (max-width: 1470px) {
.menu__wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(100%);
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 40px;
padding: 175px 24px 70px;
overflow-y: scroll;
}
.menu-open .menu__wrapper {
transform: translateX(0);
}
}
@media (min-width: 1470px) {
.menu__wrapper {
position: absolute;
width: 200px;
top: 100%;
right: 0;
padding: 20px;
transform: translateX(30px);
overflow: hidden;
opacity: 0;
}
.menu-open .menu__wrapper {
transform: translateX(0);
overflow: visible;
opacity: 1;
}
}
.menu__main {
display: none;
}
@media (min-width: 1470px) {
.menu__main {
display: block;
}
}
@media (min-width: 1470px) {
.menu__body > *:first-child {
display: none;
}
}
.menu__list {
display: flex;
flex-direction: column; align-items: start;
text-align: left;
}
@media (min-width: 1470px) {
.menu__list {
flex-direction: row;
gap: 22px;
}
}
@media (min-width: 1470px) {
.menu__list_extra {
flex-direction: column;
align-items: center;
text-align: center;
}
}
.menu__btn {
max-width: 320px;
}
@media (min-width: 767.98px) {
.menu__btn {
display: none;
}
}
@media (min-width: 1470px) {
.menu__btn {
padding: 15px 35px;
}
}
.menu__wrapper .menu__body .menu-item:not(:last-child) {
margin-bottom: 10px;
}
.menu-item {
font-weight: 700;
font-size: 2rem;
line-height: 1.1;
}
@media (min-width: 1470px) {
.menu-item {
font-size: 1.6rem;
font-weight: 400;
text-align: center;
}
}
.menu__wrapper .menu__list:first-child {
margin-bottom: 20px;
}
.icon-menu {
display: none;
display: grid;
justify-content: center;
align-items: center;
position: relative;
width: 33px;
height: 22px;
cursor: pointer;
z-index: 12;
}
@media (min-width: 767.98px) {
.icon-menu {
width: 50px;
height: 50px;
}
}
.icon-menu__lines {
display: block;
width: 23px;
height: 17px;
position: relative;
}
.icon-menu__lines::before, .icon-menu__lines::after {
content: "";
}
.icon-menu__lines::before, .icon-menu__lines::after, .icon-menu__lines span {
width: 100%;
transition: all 0.3s ease 0s;
left: 0;
position: absolute;
height: 3px;
border-radius: 2px;
background: var(--accent-color);
}
.icon-menu__lines::before {
top: 0;
}
.icon-menu__lines::after {
bottom: 0px;
}
.icon-menu__lines span {
top: calc(50% - 1.5px);
}
.menu-open .icon-menu__lines::before, .menu-open .icon-menu__lines::after {
background: var(--accent-color);
width: 100%;
}
.menu-open .icon-menu__lines::before {
transform: rotate(-45deg);
top: calc(50% - 1px);
}
.menu-open .icon-menu__lines::after {
transform: rotate(45deg);
bottom: calc(50% - 1px);
}
.menu-open .icon-menu__lines span {
opacity: 0;
}
.footer {
background: #232c49;
padding-top: 20px;
padding-bottom: 25px;
color: #fff;
}
@media (min-width: 767.98px) {
.footer {
padding-bottom: 20px;
}
}
@media (min-width: 1279.98px) {
.footer {
padding-top: 35px;
padding-bottom: 35px;
}
}
.footer__container {
display: flex;
flex-direction: column;
align-items: center;
}
@media (min-width: 767.98px) {
.footer__container {
flex-direction: row;
gap: 44px;
}
}
@media (min-width: 1279.98px) {
.footer__container {
gap: 60px;
}
}
.footer__link {
font-size: 1.4rem;
}
@media (min-width: 1279.98px) {
.footer__link {
font-size: 1.6;
}
}
@media (min-width: 767.98px) {
.footer__link_personal {
order: 2;
}
}
@media (min-width: 767.98px) {
.footer__link_offer {
order: 3;
}
}
@media (min-width: 767.98px) {
.footer__link_dev {
order: 4;
}
}
.footer__copy {
font-size: 1.6rem;
}
@media (min-width: 767.98px) {
.footer__copy {
flex: 1 1 auto;
order: 1;
}
}
.hero {
height: 100vh;
padding-top: 80px;
padding-bottom: 50px;
min-height: 500px;
color: #fff;
position: relative;
}
@media (min-width: 767.98px) {
.hero {
min-height: 700px;
}
}
.hero__container {
height: 100%;
position: relative;
z-index: 2;
display: grid;
align-content: center;
justify-items: center;
gap: 20px;
text-align: center;
}
@media (min-width: 1279.98px) {
.hero__container {
gap: 25px;
}
}
.hero__title {
max-width: 481px;
}
@media (min-width: 1279.98px) {
.hero__title {
max-width: 1235px;
}
}
.hero__text {
max-width: 485px;
}
@media (min-width: 991.98px) {
.hero__text {
max-width: 684px;
}
}
.hero__btn {
transition: scale 0.2s ease, box-shadow 0.2s ease; animation: pulse 5.1s infinite; }
@media (hover: hover) {
.hero__btn:hover {
scale: 1.1;
}
}
.hero__img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero__img::before {
content: "";
background: #000;
opacity: 0.6;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.advantages {
padding-top: 40px;
padding-bottom: 50px;
}
@media (min-width: 767.98px) {
.advantages {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (min-width: 1279.98px) {
.advantages {
padding-top: 158px;
padding-bottom: 158px;
}
}
.advantages__container {
display: grid;
justify-items: center;
}
.advantages__body {
max-width: 320px;
display: grid;
gap: 20px;
}
@media (min-width: 767.98px) {
.advantages__body {
max-width: 728px;
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1279.98px) {
.advantages__body {
max-width: 100%;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.advantages__body .advantage:nth-child(1) {
background: linear-gradient(180deg, #d3e2ff 0%, #bfe9ff 100%);
}
.advantages__body .advantage:nth-child(2) {
background: linear-gradient(180deg, #ffebd0 0%, #ffdfb2 100%);
}
.advantages__body .advantage:nth-child(3) {
background: linear-gradient(180deg, #f0deff 0%, #dfb8ff 100%);
}
.advantages__body .advantage:nth-child(4) {
background: linear-gradient(180deg, #d8ffdc 0%, #bfffc5 100%);
}
.advantage {
border-radius: 30px;
padding: 25px 33px 20px;
display: grid;
grid-template-rows: auto 1fr;
justify-items: center;
gap: 22px;
text-align: center;
}
@media (min-width: 767.98px) {
.advantage {
gap: 33px;
}
}
.advantage__img {
height: 51px;
}
@media (min-width: 1279.98px) {
.advantage__body {
font-size: 1.8rem;
}
}
.principal {
overflow: hidden;
padding-top: 50px;
color: #fff;
background: linear-gradient(90deg, #3481e4 0%, #004dd6 100%);
}
@media (min-width: 1279.98px) {
.principal {
padding-top: 60px;
}
}
@media (min-width: 1279.98px) {
.principal {
position: relative;
padding-top: 125px;
padding-bottom: 125px;
}
}
.principal__container {
display: grid;
justify-items: center;
gap: 20px;
}
@media (min-width: 1279.98px) {
.principal__container {
justify-content: start;
}
}
.principal__body {
max-width: 320px;
display: grid;
justify-items: center;
gap: 20px;
}
@media (min-width: 767.98px) {
.principal__body {
max-width: 585px;
}
}
@media (min-width: 1279.98px) {
.principal__body {
max-width: 750px;
justify-items: start;
}
}
@media (min-width: 1279.98px) {
.principal__title {
text-align: left;
}
}
.principal__text {
text-align: center;
}
@media (min-width: 1279.98px) {
.principal__text {
text-align: left;
padding-bottom: 5px;
}
}
.principal__img {
max-width: 318px;
width: 100%;
aspect-ratio: 318/291;
}
@media (min-width: 767.98px) {
.principal__img {
max-width: unset;
width: 437px;
}
}
@media (min-width: 1279.98px) {
.principal__img {
width: 631px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-8%);
}
}
.program {
background: #f1f6ff;
padding-top: 80px;
}
@media (min-width: 1279.98px) {
.program {
padding-top: 110px;
}
}
.program__container {
display: grid;
justify-items: center;
gap: 25px;
}
@media (min-width: 1279.98px) {
.program__container {
grid-template-columns: 1fr 1fr;
align-items: center;
}
}
.program__body {
text-align: center;
display: grid;
justify-items: center;
gap: 20px;
max-width: 542px;
}
@media (min-width: 1279.98px) {
.program__body {
grid-area: 1/2/2/3;
text-align: left;
justify-items: start;
min-width: 100%;
}
}
@media (min-width: 1279.98px) {
.program__title {
text-align: left;
}
}
.program__img {
width: 100%;
max-width: 320px;
padding-bottom: 258px;
position: relative;
}
@media (min-width: 767.98px) {
.program__img {
padding-bottom: 406px;
}
}
@media (min-width: 1279.98px) {
.program__img {
padding-bottom: 531px;
transform: translateX(-10%);
}
}
.program__img::before {
content: "";
width: 258px;
height: 100%;
background: #105DEF;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 767.98px) {
.program__img::before {
width: 406px;
}
}
@media (min-width: 1279.98px) {
.program__img::before {
width: 531px;
}
}
.program__img picture img {
width: 360px;
aspect-ratio: 360/369;
left: 50%;
transform: translateX(-50%);
}
@media (min-width: 767.98px) {
.program__img picture img {
width: 581px;
aspect-ratio: 581/432;
}
}
@media (min-width: 1279.98px) {
.program__img picture img {
width: 783px;
aspect-ratio: 783/572;
}
}
.process {
background: #f1f6ff;
padding-top: 90px;
padding-bottom: 60px;
}
@media (min-width: 767.98px) {
.process {
padding-bottom: 80px;
}
}
@media (min-width: 1279.98px) {
.process {
padding-top: 180px;
padding-bottom: 170px;
}
}
.process__container {
display: grid;
justify-items: center;
gap: 20px;
}
.process__header {
max-width: 320px;
display: grid;
justify-items: center;
gap: 20px;
}
@media (min-width: 767.98px) {
.process__header {
max-width: 512px;
}
}
@media (min-width: 1279.98px) {
.process__header {
max-width: 1145px;
justify-items: start;
justify-self: start;
}
}
@media (min-width: 1279.98px) {
.process__title {
text-align: left;
}
}
.process__text {
text-align: center;
}
@media (min-width: 1279.98px) {
.process__text {
max-width: 785px;
text-align: left;
}
}
.process__tags-wrapper {
overflow: hidden;
position: relative;
margin: 0 -20px;
width: calc(100% + 40px);
}
@media (min-width: 1279.98px) {
.process__tags-wrapper {
margin: 0;
width: 100%;
}
}
.process__tags {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.process__tags-row {
display: flex;
gap: 10px;
white-space: nowrap;
will-change: transform;
}
.process__tags-row_left .tag:nth-child(5n+1) {
background: #d3e2ff;
}
.process__tags-row_left .tag:nth-child(5n+2) {
background: #ffebd0;
}
.process__tags-row_left .tag:nth-child(5n+3) {
background: #f0deff;
}
.process__tags-row_left .tag:nth-child(5n+4) {
background: #d8ffdc;
}
.process__tags-row_left .tag:nth-child(5n+5) {
background: #ffd0d0;
}
.process__tags-row_right .tag:nth-child(4n+1) {
background: #f0deff;
}
.process__tags-row_right .tag:nth-child(4n+2) {
background: #d3e2ff;
}
.process__tags-row_right .tag:nth-child(4n+3) {
background: #ffebd0;
}
.process__tags-row_right .tag:nth-child(4n+4) {
background: #d8ffdc;
}
.process__tag {
background: #f0f0f0;
padding: 10px 15px;
border-radius: 5px;
white-space: nowrap;
}
.process__body {
max-width: 320px;
display: grid;
gap: 20px;
}
@media (min-width: 767.98px) {
.process__body {
grid-template-areas: "a a b b c c" "d d d e e e";
max-width: 730px;
grid-template-columns: repeat(6, 1fr);
}
.process__body > :nth-child(1) {
grid-area: a;
}
.process__body > :nth-child(2) {
grid-area: b;
}
.process__body > :nth-child(3) {
grid-area: c;
}
.process__body > :nth-child(4) {
grid-area: d;
}
.process__body > :nth-child(5) {
grid-area: e;
}
}
@media (min-width: 1279.98px) {
.process__body {
max-width: 100%;
}
}
.process__btn {
display: none;
}
@media (min-width: 767.98px) {
.process__btn {
display: block;
}
}
.tag {
line-height: 1.2;
text-transform: uppercase;
font-weight: 700;
padding: 17px 25px;
border-radius: 81px;
}
@media (min-width: 991.98px) {
.tag {
font-size: 1.4rem;
}
}
@media (min-width: 1279.98px) {
.tag {
font-size: 1.8rem;
}
}
.card-process {
border-radius: 30px;
background: #fff;
padding: 20px 30px;
display: grid;
justify-items: center;
grid-template-rows: auto 1fr;
gap: 15px;
}
@media (min-width: 767.98px) {
.card-process {
padding: 20px 15px;
}
}
.card-process__img {
width: 100%;
aspect-ratio: 255/180;
border-radius: 15px;
overflow: hidden;
transition: all 0.3s ease 0s;
}
.card-process__img img {
object-fit: cover;
}
.card-process__zoom {
cursor: pointer;
}
.card-process__zoom::before {
content: "\e90a";
color: #fff;
font-size: 30px;
position: absolute;
z-index: 4;
width: 100%;
height: 100%;
background-color: rgba(56, 56, 56, 0.4392156863);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease 0s;
display: flex;
justify-content: center;
align-items: center;
}
@media (hover: hover) {
.card-process__zoom:hover::before {
opacity: 1;
}
}
.card-process__header {
text-align: center;
}
@media (min-width: 767.98px) {
.card-process__header {
font-size: 1.4rem;
}
}
@media (min-width: 1279.98px) {
.card-process__header {
font-size: 1.6rem;
}
}
.quantity {
padding-top: 60px;
margin-bottom: 80px;
}
@media (min-width: 767.98px) {
.quantity {
padding-top: 80px;
margin-bottom: 120px;
}
}
@media (min-width: 1279.98px) {
.quantity {
padding-top: 170px;
margin-bottom: 210px;
}
}
.quantity__container {
display: grid;
justify-items: center;
}
@media (min-width: 1279.98px) {
.quantity__container {
justify-items: start;
}
}
.quantity__title {
margin-bottom: 20px;
}
@media (min-width: 767.98px) {
.quantity__title {
max-width: 584px;
}
}
@media (min-width: 1279.98px) {
.quantity__title {
max-width: 1000px;
text-align: left;
}
}
.quantity__body {
display: grid;
gap: 20px;
}
@media (min-width: 767.98px) {
.quantity__body {
max-width: 730px;
}
}
@media (min-width: 1279.98px) {
.quantity__body {
max-width: 100%;
grid-template-columns: 1fr 1fr;
}
}
.quantity__info {
display: grid;
justify-content: center;
gap: 20px;
}
.quantity__slider-wrapper {
position: relative;
overflow: visible;
}
.quantity__slider-inner {
overflow: hidden;
}
@media (min-width: 1279.98px) {
.quantity__slider-inner {
height: 100%;
}
}
@media (min-width: 1279.98px) {
.quantity__slider {
height: 100%;
}
}
.quantity__slide {
border-radius: 25px;
overflow: hidden;
width: 100%;
padding-bottom: 50%;
}
.quantity__nav-wrapper {
display: flex;
justify-content: center;
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
transform: translateY(50%);
}
.quantity__nav {
display: flex;
justify-content: center;
gap: 6px;
padding: 7.5px;
}
@media (min-width: 767.98px) {
.quantity__nav {
gap: 10px;
padding: 13px 15px;
}
}
.quantity__nav::before {
content: "";
background: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 48px;
}
.info-quantity-item {
background: #f1f6ff;
padding: 20px;
border-radius: 30px;
display: grid;
gap: 10px;
}
@media (min-width: 767.98px) {
.info-quantity-item {
grid-template-columns: auto 1fr;
gap: 18px;
padding: 20px 30px;
}
}
@media (min-width: 1279.98px) {
.info-quantity-item {
padding: 45px 30px;
}
}
.info-quantity-item__icon::before {
font-size: 39px;
color: var(--accent-color);
}
.info-quantity-item__text > *:not(:last-child) {
margin-bottom: 15px;
}
@media (min-width: 1279.98px) {
.info-quantity-item__text > *:not(:last-child) {
margin-bottom: 20px;
}
}
.info-quantity-item__btn {
font-size: 1.5rem;
}
@media (min-width: 767.98px) {
.info-quantity-item__btn {
font-size: 1.8rem;
}
}
.skills {
padding-bottom: 80px;
}
@media (min-width: 1279.98px) {
.skills {
padding-bottom: 180px;
}
}
.skills__container {
display: grid;
justify-items: center;
gap: 20px;
}
@media (min-width: 1279.98px) {
.skills__container {
justify-items: start;
}
}
@media (min-width: 767.98px) {
.skills__title {
max-width: 555px;
}
}
@media (min-width: 1279.98px) {
.skills__title {
text-align: left;
max-width: 1000px;
}
}
.skills__subtitle {
text-align: center;
}
@media (min-width: 1279.98px) {
.skills__subtitle {
text-align: left;
}
}
.skills__body {
justify-self: normal;
}
.spollers {
display: grid;
gap: 20px;
}
.spollers__item {
background: #f1f6ff;
padding: 20px;
border-radius: 20px;
}
@media (min-width: 767.98px) {
.spollers__item {
padding: 20px 30px;
}
}
.spollers__title {
width: 100%;
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
gap: 10px;
text-align: left;
font-size: 2.4rem;
font-weight: 700;
}
@media (min-width: 767.98px) {
.spollers__title {
font-size: 2.8rem;
}
}
.spollers__title::before {
color: var(--accent-color);
transition: all 0.3s ease 0s;
}
.spollers__title._spoller-active::before {
transform: rotate(-90deg);
}
.spollers__body {
padding-top: 15px;
}
@media (min-width: 767.98px) {
.spollers__body {
padding-top: 20px;
}
}
.safety {
padding-top: 80px;
padding-bottom: 80px;
background: #f1f6ff;
}
@media (min-width: 1279.98px) {
.safety {
padding-top: 160px;
padding-bottom: 160px;
}
}
.safety__title {
margin-bottom: 20px;
}
@media (min-width: 1279.98px) {
.safety__title {
margin-bottom: 30px;
}
}
@media (min-width: 1279.98px) {
.safety__slider-wrapper {
overflow: visible;
}
}
@media (min-width: 1279.98px) {
.safety__slider {
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
}
.safety__slider .custom-slider-slide {
grid-template-rows: 1fr 1fr;
gap: 20px;
}
@media (min-width: 767.98px) {
.safety__slider .custom-slider-slide {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1279.98px) {
.safety__swiper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
overflow: visible;
}
}
@media (min-width: 1279.98px) {
.safety__nav {
display: none;
}
}
.safety-item {
padding: 25px 20px;
border-radius: 30px;
overflow: hidden;
box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.05);
height: 100%;
display: grid;
grid-template-rows: 70px auto 1fr;
gap: 20px;
}
.safety-item__title {
font-size: 2rem;
font-weight: 700;
}
.safety-item__text {
font-weight: 500;
}
.license {
background: linear-gradient(90deg, #3481e4 0%, #004dd6 100%);
padding-top: 50px;
padding-bottom: 50px;
}
@media (min-width: 767.98px) {
.license {
padding-top: 60px;
padding-bottom: 80px;
}
}
@media (min-width: 1279.98px) {
.license {
padding-top: 117px;
padding-bottom: 117px;
}
}
.license__container {
display: grid;
justify-items: center;
gap: 30px;
}
@media (min-width: 1279.98px) {
.license__container {
grid-template-columns: 41.9847328244% 49.3407356003%;
gap: 120px;
}
}
.license__body {
color: #fff;
display: grid;
gap: 20px;
max-width: 320px;
}
@media (min-width: 767.98px) {
.license__body {
max-width: 645px;
}
}
@media (min-width: 1279.98px) {
.license__title {
text-align: left;
}
}
.license__text {
text-align: center;
}
@media (min-width: 1279.98px) {
.license__text {
text-align: left;
}
}
@media (min-width: 767.98px) {
.license__btn {
justify-self: center;
}
}
@media (min-width: 1279.98px) {
.license__btn {
justify-self: left;
}
}
.license__img {
width: 100%;
padding-bottom: 65%;
border-radius: 15px;
overflow: hidden;
}
.questions {
padding-top: 80px;
margin-bottom: 70px;
}
@media (min-width: 767.98px) {
.questions {
margin-bottom: 80px;
}
}
@media (min-width: 1279.98px) {
.questions {
margin-bottom: 160px;
}
}
.questions__title {
margin-bottom: 15px;
}
@media (min-width: 767.98px) {
.questions__title {
padding-bottom: 20px;
}
}
@media (min-width: 1279.98px) {
.questions__title {
padding-bottom: 30px;
text-align: left;
}
}
.documents {
margin-bottom: 80px;
}
@media (min-width: 1279.98px) {
.documents {
margin-bottom: 160px;
}
}
.documents__container {
display: grid;
gap: 20px;
justify-items: center;
}
@media (min-width: 1279.98px) {
.documents__container {
justify-items: left;
}
}
@media (min-width: 767.98px) {
.documents__title {
max-width: 685px;
}
}
@media (min-width: 1279.98px) {
.documents__title {
max-width: 1050px;
text-align: left;
}
}
.documents__subtitle {
text-align: center;
}
@media (min-width: 767.98px) {
.documents__subtitle {
max-width: 655px;
}
}
@media (min-width: 1279.98px) {
.documents__subtitle {
max-width: 832px;
text-align: left;
margin-bottom: 10px;
}
}
@media (min-width: 1279.98px) {
.documents__slider {
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
}
.documents__slider .custom-slider-slide {
grid-template-rows: 1fr 1fr;
gap: 20px;
}
@media (min-width: 1279.98px) {
.documents__nav {
display: none;
}
}
@media (min-width: 1279.98px) {
.documents__btn {
justify-self: center;
}
}
.documents-item {
height: 100%;
padding: 20px;
display: grid;
grid-template-rows: auto auto 1fr;
gap: 15px;
border-radius: 30px;
}
.documents-item__count {
width: 36px;
height: 36px;
background: #000;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
font-weight: 700;
border-radius: 100%;
}
@media (min-width: 767.98px) {
.documents-item__count {
width: 55px;
height: 55px;
font-size: 2rem;
}
}
.documents-item__title {
font-weight: 700;
font-size: 1.8rem;
}
@media (min-width: 1279.98px) {
.documents-item__title {
font-size: 2rem;
}
}
.documents-item__text {
font-weight: 500;
}
.price {
margin-bottom: 60px;
}
@media (min-width: 767.98px) {
.price {
margin-bottom: 80px;
}
}
@media (min-width: 1279.98px) {
.price {
margin-bottom: 160px;
}
}
.price__container {
display: grid;
justify-items: center;
gap: 20px;
}
.price__body {
background: #f1f6ff;
padding: 30px 20px;
border-radius: 20px;
}
@media (min-width: 767.98px) {
.price__body {
padding: 20px 30px;
}
}
@media (min-width: 1279.98px) {
.price__body {
padding: 40px 50px;
}
}
.price__item {
font-size: 1.6rem;
}
@media (min-width: 767.98px) {
.price__item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
}
}
@media (min-width: 1279.98px) {
.price__item {
font-size: 2rem;
}
}
.price__item:not(:last-child) {
border-bottom: 1px solid #8581cf;
margin-bottom: 20px;
padding-bottom: 20px;
}
.price__item-text {
margin-bottom: 6px;
font-weight: 500;
}
.price__item-cost {
font-weight: 700;
}
@media (min-width: 767.98px) {
.price__item-cost {
flex-shrink: 0;
font-weight: 500;
}
}
.price__item-cost b {
color: var(--accent-color);
}
.purpose {
margin-bottom: 60px;
}
@media (min-width: 767.98px) {
.purpose {
margin-bottom: 80px;
}
}
@media (min-width: 1279.98px) {
.purpose {
margin-bottom: 160px;
}
}
.purpose__container {
display: grid;
gap: 12px;
}
@media (min-width: 1279.98px) {
.purpose__container {
grid-template-columns: 1fr 1fr;
gap: 20px;
}
}
@media (min-width: 1279.98px) {
.purpose__body {
padding-right: 60px;
}
}
.purpose__title {
margin-bottom: 12px;
}
@media (min-width: 1279.98px) {
.purpose__title {
text-align: left;
}
}
.purpose__subtitle {
margin-bottom: 40px;
}
.purpose__list li {
display: flex;
gap: 8px;
}
@media (min-width: 767.98px) {
.purpose__list li {
gap: 12px;
}
}
.purpose__list li::before {
content: "\e903";
font-size: 23px;
color: var(--accent-color);
}
@media (min-width: 767.98px) {
.purpose__list li::before {
font-size: 31px;
}
}
.purpose__list li:not(:last-child) {
margin-bottom: 12px;
}
.purpose__img {
padding-bottom: 82%;
border-radius: 30px;
overflow: hidden;
}
.contacts {
background: linear-gradient(90deg, #3481e4 0%, #004dd6 100%);
position: relative;
}
@media (min-width: 1279.98px) {
.contacts__container {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
.contacts__body {
display: grid;
justify-items: center;
color: #fff;
padding-top: 60px;
padding-bottom: 40px;
}
@media (min-width: 767.98px) {
.contacts__body {
padding-top: 80px;
padding-bottom: 60px;
}
}
@media (min-width: 1279.98px) {
.contacts__body {
justify-items: start;
padding-top: 115px;
padding-bottom: 200px;
}
}
@media (hover: hover) {
.contacts__body a:hover {
color: #fff;
opacity: 0.5;
}
}
.contacts__title {
margin-bottom: 20px;
}
@media (min-width: 1279.98px) {
.contacts__title {
text-align: left;
}
}
.contacts__list {
margin-bottom: 20px;
}
@media (min-width: 767.98px) {
.contacts__list {
font-size: 2.2rem;
}
}
.contacts__item {
display: flex;
justify-content: center;
gap: 5px;
}
@media (min-width: 767.98px) {
.contacts__item {
gap: 10px;
}
}
@media (min-width: 1279.98px) {
.contacts__item {
justify-content: flex-start;
}
}
.contacts__item-title {
color: #c3d0f6;
}
.contacts__socials {
display: flex;
justify-content: center;
align-items: center;
gap: 11px;
}
.contacts__map {
position: relative;
margin: 0 -20px;
height: 370px;
}
@media (min-width: 767.98px) {
.contacts__map {
height: 451px;
}
}
@media (min-width: 1279.98px) {
.contacts__map {
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 100%;
}
}
.contacts iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}