:root {
    /* backgrounds */
    --back-color1: #eef7fc;
    --back-color2: #ffffff;
    --extra-back-color1: #ffdbe8;
    --extra-back-color2: #dee0ff;
    --extra-back-color3: #ceebfc;
    --accent-color1: #e3f2fa;
    --accent-color2: #f5fafd;
    --border-soft: #d4e0e8;
    /* brand / interactive */
    --elements-color: #6bb9d9;
    --focus-color: #6bb9d9;
    --hover-color: #5aa8c9;
    --active-color: #4a97b8;
    /* text */
    --text-color: #43464a;
    --header-color: #2c2f33;
    --text-muted: #8a8f96;
}


/*elements styles*/

html {
    box-sizing: border-box;
    overflow-x: hidden;
}

h1,
h2,
h3 {
    margin: 0;
}

p {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

body {
    font-family: "Montserrat", Arial, sans-serif;
    background-color: #fff;
    overflow-x: hidden;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button {
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

button:focus {
    outline: none;
}

svg * {
    transition: 0.3s ease;
}


/*common classes styles*/

.container {
    max-width: 1160px;
    margin: 0 auto;
}

.section {
    padding: 100px 0 50px;
}

.section__header {
    font-family: inherit;
    font-weight: 400;
    font-size: 40px;
    line-height: 60px;
    color: var(--header-color);
    font-weight: 500;
    margin-bottom: 50px;
}

.item__header {
    font-family: inherit;
    font-size: 26px;
    line-height: 31px;
    font-weight: 400;
    color: var(--text-color);
}

.item__text {
    font-family: inherit;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: var(--text-color);
}

.flex {
    display: flex;
    justify-content: space-between;
}

.signup-button {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}

.nav {
    font-family: inherit;
}

.text {
    font-family: inherit;
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
}

.back-1 {
    background-color: var(--extra-back-color1);
}

.back-2 {
    background-color: var(--extra-back-color2);
}

.back-3 {
    background-color: var(--extra-back-color3);
}


/*specific classes styles*/

.header {
    background-color: var(--back-color1);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 11;
}

.header__container {
    padding: 32px 0;
    flex-flow: row nowrap;
    align-items: center;
}

.header__burger-btn {
    display: none;
    align-self: center;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 32px;
    z-index: 1;
}

.burger-btn__img--diasbled {
    display: none;
}

.header-nav__list {
    flex-flow: row nowrap;
    justify-content: flex-start;
    color: var(--text-color);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
}

.header-nav__item:not(:last-child) {
    margin-right: 60px;
}

.header__signin-links {
    flex-flow: row nowrap;
    justify-content: flex-start;
}

.item__link:focus {
    outline: 2px dotted var(--focus-color);
}

.signin-links__button {
    margin-right: 30px;
    min-height: 36px;
    min-width: 130px;
    font-size: 14px;
    color: var(--text-color);
    font-weight: 600;
    border: 1px solid var(--text-color);
}

.signin-links__button:focus {
    outline: 2px dotted var(--focus-color);
}

.signin-links__item {
    height: 34px;
    width: 34px;
    border-radius: 50%;
}

.signin-links__item:not(:last-child) {
    margin-right: 10px;
}

.signin-links__item--tg {
    background: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' cy='17' r='17' fill='%2386C7EB'/%3E%3Cpath d='M25.1994 8.04604C25.6456 8.37689 25.6456 8.37689 25.9474 8.82397C26.1746 11.1319 25.6152 13.46 25.2305 15.7281C25.1287 16.3359 25.0274 16.9438 24.9268 17.5518C24.8607 17.9512 24.794 18.3504 24.7267 18.7495C24.5687 19.702 24.4278 20.651 24.3264 21.6119C24.3073 21.7881 24.2882 21.9643 24.2685 22.1458C24.2191 22.621 24.1752 23.0968 24.1318 23.5726C23.9232 24.5159 23.5948 24.9859 22.9553 25.6791C22.2181 26.0624 21.7877 26.0352 20.9606 25.9384C20.1689 25.5602 19.4484 25.0825 18.7165 24.5932C18.5217 24.468 18.3269 24.3429 18.1262 24.2139C15.3841 22.4255 15.3841 22.4255 14.4776 21.0115C14.5414 19.9051 14.9306 19.3583 15.6464 18.5643C15.8451 18.3433 16.0437 18.1224 16.2484 17.8947C17.6317 16.4053 19.0449 14.9463 20.4619 13.4915C19.1491 13.9194 18.1401 14.7742 17.049 15.6146C16.6478 15.9196 16.2465 16.2245 15.8451 16.5293C15.6528 16.676 15.4604 16.8227 15.2622 16.9739C14.5939 17.4825 13.9222 17.9853 13.2465 18.4832C12.9732 18.6858 12.9732 18.6858 12.6943 18.8925C11.6062 19.6102 10.4843 19.5982 9.24145 19.4557C6.71541 18.7565 6.71541 18.7565 6 17.6405C6.00438 16.8676 6.00438 16.8676 6.24934 16.0846C6.84884 15.6182 6.84884 15.6182 7.67527 15.2267C7.82817 15.1528 7.98108 15.079 8.13862 15.0029C8.66935 14.7503 9.2039 14.5091 9.74014 14.2695C9.93946 14.1796 10.1388 14.0897 10.3441 13.997C11.9232 13.288 13.5113 12.6023 15.101 11.9195C15.8046 11.6159 16.508 11.3119 17.2114 11.0078C17.6653 10.8117 18.1193 10.6161 18.5735 10.421C19.5639 9.99483 20.5513 9.56456 21.5303 9.11075C21.6902 9.03712 21.85 8.96349 22.0147 8.88763C22.4293 8.69541 22.8426 8.50029 23.2558 8.3049C23.9752 8.03767 24.4444 7.93067 25.1994 8.04604Z' fill='%23FCFDFE'/%3E%3C/svg%3E%0A");
}

.signin-links__item--wu {
    background: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' cy='17' r='17' fill='%231B8755'/%3E%3Cpath d='M21.9695 7.93796C24.5112 9.44727 26.1042 11.7477 26.9141 14.5661C27.196 17.2583 26.8248 19.9159 25.1923 22.1263C23.2122 24.439 21.0517 25.7097 18.01 25.9897C16.6836 26.0418 15.6393 25.9019 14.3908 25.4404C13.0992 24.9655 12.2316 24.9027 10.9031 25.2185C10.6527 25.2771 10.4023 25.3357 10.1443 25.396C9.45286 25.5651 8.76477 25.7428 8.07762 25.9287C8.47622 23.7715 8.47622 23.7715 8.81342 22.7921C9.22852 21.4805 9.00752 20.5347 8.49059 19.307C7.59143 16.876 8.02302 14.2869 9.01945 11.9622C11.8599 7.23341 16.9524 5.86675 21.9695 7.93796Z' fill='%23FCFDFD'/%3E%3Cpath d='M14.6095 12C14.8629 12.0368 14.8629 12.0368 15.1214 12.0744C16.0464 13.7482 16.0464 13.7482 15.9888 14.6331C15.8744 14.9643 15.7588 15.2951 15.6413 15.6251C15.5261 16.1305 15.5261 16.1305 15.8128 16.553C16.7449 17.6266 17.5788 18.4656 18.989 18.7388C19.05 18.5867 19.111 18.4345 19.1739 18.2777C19.4441 17.7868 19.4441 17.7868 20.1266 17.5488C20.5914 17.7338 20.5914 17.7338 21.0793 18.0099C21.2421 18.1004 21.4048 18.1909 21.5725 18.2842C21.696 18.3557 21.8195 18.4272 21.9467 18.5008C22.0178 19.1554 22.0178 19.1554 21.9467 19.9289C21.3175 20.7106 20.9251 20.8648 19.956 21C18.1162 20.8915 16.4453 19.7817 15.1214 18.5008C13.8686 17.0173 12.9539 15.8121 13.0018 13.787C13.1472 12.7314 13.5913 12.121 14.6095 12Z' fill='%23228A5A'/%3E%3C/svg%3E%0A");
}

.signin-links__item--em {
    background: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' cy='17' r='17' fill='%23454544'/%3E%3Crect x='7' y='9' width='20' height='16' rx='2' fill='%23FDEB18'/%3E%3Cpath d='M9.06958 10.25C9.56539 10.5242 10.0599 10.8008 10.554 11.0781C10.7083 11.1646 10.8626 11.2511 11.0217 11.3402C11.9413 11.8642 12.8297 12.4163 13.7043 13.0127C13.8926 13.1401 14.0808 13.2674 14.2747 13.3986C14.6444 13.651 15.0115 13.9071 15.3757 14.1673C15.5457 14.2829 15.7157 14.3985 15.8909 14.5176C16.1147 14.6752 16.1147 14.6752 16.3431 14.8361C16.8362 15.0562 16.8362 15.0562 17.4152 14.8334C18.126 14.4713 18.7953 14.0759 19.469 13.6484C19.7312 13.4831 19.9933 13.3178 20.2634 13.1475C20.5346 12.975 20.8058 12.8026 21.0852 12.625C21.6243 12.2835 22.1637 11.9423 22.7034 11.6016C22.9415 11.4503 23.1797 11.299 23.4251 11.1431C23.9641 10.8143 24.4998 10.5204 25.0696 10.25C25.2098 11.0493 25.2738 11.4836 25.0696 12.25C24.4897 12.8849 23.7868 13.2879 23.0474 13.7184C22.4667 14.0607 21.8967 14.4186 21.3254 14.7764C20.8759 15.0545 20.426 15.3322 19.9758 15.6094C19.7558 15.7456 19.5358 15.8819 19.3091 16.0222C18.9943 16.2118 18.9943 16.2118 18.6731 16.4053C18.4848 16.5198 18.2965 16.6344 18.1024 16.7524C17.5696 17 17.5696 17 16.5696 17C16.0367 16.7524 16.0367 16.7524 15.4661 16.4053C15.2562 16.2789 15.0463 16.1525 14.8301 16.0222C14.6101 15.886 14.39 15.7497 14.1633 15.6094C13.9394 15.4715 13.7155 15.3337 13.4849 15.1917C13.0434 14.9185 12.6026 14.6441 12.1626 14.3685C11.674 14.0649 11.1819 13.7708 10.6848 13.4814C10.4612 13.3432 10.2375 13.2049 10.0071 13.0625C9.72671 12.8943 9.72671 12.8943 9.44068 12.7227C8.83499 11.9512 9.01045 11.208 9.06958 10.25Z' fill='%234B4A43'/%3E%3C/svg%3E%0A");
}

.signin-links__link {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.signin-links__link:focus {
    outline: 2px dotted var(--focus-color);
}

.main {
    position: relative;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

.overlay--active {
    opacity: 1;
    visibility: visible;
}

.signup {
    padding: 30px;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    border: 2px solid var(--focus-color);
    border-radius: 32px;
    background-color: var(--back-color2);
}

.signup__header-wrapper {
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: flex-start;
}

.signup__header {
    margin-top: -5px;
    font-size: 25px;
    line-height: 31px;
}

.signup__close-btn {
    width: 30px;
    height: 24px;
    cursor: pointer;
}

.signup__close-btn:focus {
    outline: 2px dotted var(--text-color);
}

.signup__variant-list {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    font-family: inherit;
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
    color: var(--text-color);
    gap: 30px;
}

.signup__link:focus {
    outline: 2px dotted var(--text-color);
}

.signup__link {
    display: block;
    padding: 10px 20px 10px 50px;
    border-radius: 30px;
    border: 2px solid;
    background-position: -1px center;
    background-size: 46px;
    background-repeat: no-repeat;
    background-color: var(--back-color1)
}

.signup__link--tg {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' cy='17' r='17' fill='%2386C7EB'/%3E%3Cpath d='M25.1994 8.04604C25.6456 8.37689 25.6456 8.37689 25.9474 8.82397C26.1746 11.1319 25.6152 13.46 25.2305 15.7281C25.1287 16.3359 25.0274 16.9438 24.9268 17.5518C24.8607 17.9512 24.794 18.3504 24.7267 18.7495C24.5687 19.702 24.4278 20.651 24.3264 21.6119C24.3073 21.7881 24.2882 21.9643 24.2685 22.1458C24.2191 22.621 24.1752 23.0968 24.1318 23.5726C23.9232 24.5159 23.5948 24.9859 22.9553 25.6791C22.2181 26.0624 21.7877 26.0352 20.9606 25.9384C20.1689 25.5602 19.4484 25.0825 18.7165 24.5932C18.5217 24.468 18.3269 24.3429 18.1262 24.2139C15.3841 22.4255 15.3841 22.4255 14.4776 21.0115C14.5414 19.9051 14.9306 19.3583 15.6464 18.5643C15.8451 18.3433 16.0437 18.1224 16.2484 17.8947C17.6317 16.4053 19.0449 14.9463 20.4619 13.4915C19.1491 13.9194 18.1401 14.7742 17.049 15.6146C16.6478 15.9196 16.2465 16.2245 15.8451 16.5293C15.6528 16.676 15.4604 16.8227 15.2622 16.9739C14.5939 17.4825 13.9222 17.9853 13.2465 18.4832C12.9732 18.6858 12.9732 18.6858 12.6943 18.8925C11.6062 19.6102 10.4843 19.5982 9.24145 19.4557C6.71541 18.7565 6.71541 18.7565 6 17.6405C6.00438 16.8676 6.00438 16.8676 6.24934 16.0846C6.84884 15.6182 6.84884 15.6182 7.67527 15.2267C7.82817 15.1528 7.98108 15.079 8.13862 15.0029C8.66935 14.7503 9.2039 14.5091 9.74014 14.2695C9.93946 14.1796 10.1388 14.0897 10.3441 13.997C11.9232 13.288 13.5113 12.6023 15.101 11.9195C15.8046 11.6159 16.508 11.3119 17.2114 11.0078C17.6653 10.8117 18.1193 10.6161 18.5735 10.421C19.5639 9.99483 20.5513 9.56456 21.5303 9.11075C21.6902 9.03712 21.85 8.96349 22.0147 8.88763C22.4293 8.69541 22.8426 8.50029 23.2558 8.3049C23.9752 8.03767 24.4444 7.93067 25.1994 8.04604Z' fill='%23FCFDFE'/%3E%3C/svg%3E%0A");
    border-color: #86C7EB;
}

.signup__link--wa {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' cy='17' r='17' fill='%231B8755'/%3E%3Cpath d='M21.9695 7.93796C24.5112 9.44727 26.1042 11.7477 26.9141 14.5661C27.196 17.2583 26.8248 19.9159 25.1923 22.1263C23.2122 24.439 21.0517 25.7097 18.01 25.9897C16.6836 26.0418 15.6393 25.9019 14.3908 25.4404C13.0992 24.9655 12.2316 24.9027 10.9031 25.2185C10.6527 25.2771 10.4023 25.3357 10.1443 25.396C9.45286 25.5651 8.76477 25.7428 8.07762 25.9287C8.47622 23.7715 8.47622 23.7715 8.81342 22.7921C9.22852 21.4805 9.00752 20.5347 8.49059 19.307C7.59143 16.876 8.02302 14.2869 9.01945 11.9622C11.8599 7.23341 16.9524 5.86675 21.9695 7.93796Z' fill='%23FCFDFD'/%3E%3Cpath d='M14.6095 12C14.8629 12.0368 14.8629 12.0368 15.1214 12.0744C16.0464 13.7482 16.0464 13.7482 15.9888 14.6331C15.8744 14.9643 15.7588 15.2951 15.6413 15.6251C15.5261 16.1305 15.5261 16.1305 15.8128 16.553C16.7449 17.6266 17.5788 18.4656 18.989 18.7388C19.05 18.5867 19.111 18.4345 19.1739 18.2777C19.4441 17.7868 19.4441 17.7868 20.1266 17.5488C20.5914 17.7338 20.5914 17.7338 21.0793 18.0099C21.2421 18.1004 21.4048 18.1909 21.5725 18.2842C21.696 18.3557 21.8195 18.4272 21.9467 18.5008C22.0178 19.1554 22.0178 19.1554 21.9467 19.9289C21.3175 20.7106 20.9251 20.8648 19.956 21C18.1162 20.8915 16.4453 19.7817 15.1214 18.5008C13.8686 17.0173 12.9539 15.8121 13.0018 13.787C13.1472 12.7314 13.5913 12.121 14.6095 12Z' fill='%23228A5A'/%3E%3C/svg%3E%0A");
    border-color: #1B8755;
}

.signup__link--em {
    background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='17' cy='17' r='17' fill='%23454544'/%3E%3Crect x='7' y='9' width='20' height='16' rx='2' fill='%23FDEB18'/%3E%3Cpath d='M9.06958 10.25C9.56539 10.5242 10.0599 10.8008 10.554 11.0781C10.7083 11.1646 10.8626 11.2511 11.0217 11.3402C11.9413 11.8642 12.8297 12.4163 13.7043 13.0127C13.8926 13.1401 14.0808 13.2674 14.2747 13.3986C14.6444 13.651 15.0115 13.9071 15.3757 14.1673C15.5457 14.2829 15.7157 14.3985 15.8909 14.5176C16.1147 14.6752 16.1147 14.6752 16.3431 14.8361C16.8362 15.0562 16.8362 15.0562 17.4152 14.8334C18.126 14.4713 18.7953 14.0759 19.469 13.6484C19.7312 13.4831 19.9933 13.3178 20.2634 13.1475C20.5346 12.975 20.8058 12.8026 21.0852 12.625C21.6243 12.2835 22.1637 11.9423 22.7034 11.6016C22.9415 11.4503 23.1797 11.299 23.4251 11.1431C23.9641 10.8143 24.4998 10.5204 25.0696 10.25C25.2098 11.0493 25.2738 11.4836 25.0696 12.25C24.4897 12.8849 23.7868 13.2879 23.0474 13.7184C22.4667 14.0607 21.8967 14.4186 21.3254 14.7764C20.8759 15.0545 20.426 15.3322 19.9758 15.6094C19.7558 15.7456 19.5358 15.8819 19.3091 16.0222C18.9943 16.2118 18.9943 16.2118 18.6731 16.4053C18.4848 16.5198 18.2965 16.6344 18.1024 16.7524C17.5696 17 17.5696 17 16.5696 17C16.0367 16.7524 16.0367 16.7524 15.4661 16.4053C15.2562 16.2789 15.0463 16.1525 14.8301 16.0222C14.6101 15.886 14.39 15.7497 14.1633 15.6094C13.9394 15.4715 13.7155 15.3337 13.4849 15.1917C13.0434 14.9185 12.6026 14.6441 12.1626 14.3685C11.674 14.0649 11.1819 13.7708 10.6848 13.4814C10.4612 13.3432 10.2375 13.2049 10.0071 13.0625C9.72671 12.8943 9.72671 12.8943 9.44068 12.7227C8.83499 11.9512 9.01045 11.208 9.06958 10.25Z' fill='%234B4A43'/%3E%3C/svg%3E%0A");
    border-color: #454544;
}

.hero {
    padding: 0px;
    background-color: var(--back-color1);
}

.hero__container {
    padding: 150px 0;
    flex-flow: row nowrap;
    background-image: url(../img/hero/main-photo-min.webp);
    background-position: 80% 55%;
    background-repeat: no-repeat;
    background-size: 65%;
}

.hero__wrapper {
    flex-flow: column nowrap;
    justify-content: center;
    flex-basis: 425px;
}

.hero__header {
    margin-bottom: 80px;
    font-family: inherit;
    color: var(--header-color);
    font-weight: 600;
    font-size: 45px;
    line-height: 63px;
}

.hero__decription {
    padding: 20px 20px 30px 20px;
    background-color: var(--elements-color);
    border-radius: 30px;
}

.hero__text {
    display: inline-block;
    padding: 10px;
    margin-bottom: 20px;
    font-family: inherit;
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
    color: var(--back-color2);
}

.hero__button {
    width: 100%;
    padding: 18px 0;
    font-size: 18px;
    font-weight: 500;
    color: var(--elements-color);
    background-color: var(--back-color2);
}

.hero__button:focus,
/*
.problems-items__button:focus,
*/
.price-item__button:focus,
.principles__button:focus {
    outline: 2px dotted var(--text-color);
}

.hero__features-list {
    padding-bottom: 180px;
    flex-flow: column nowrap;
    align-items: flex-end;
    font-family: inherit;
    font-size: 18px;
    font-weight: 400;
    color: var(--header-color);
}

.hero__features-item {
    padding: 18px 0;
    text-align: center;
    border-radius: 30px;
}

.hero__features-item:not(:last-child) {
    margin-bottom: 15px;
}

.hero__features-item:first-child {
    min-width: 278px;
}

.hero__features-item:nth-child(2) {
    min-width: 308px;
}

.hero__features-item:last-child {
    min-width: 338px;
}

.problems {
    background-color: var(--back-color2);
}

.problems__list {
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 50px;
}

.problems__item {
    padding: 40px 20px;
    width: 355px;
/*
    border: 1px solid #86c8ec;
*/  
    border-width: 21px 1px;
    border-style: solid;
    border-color: var(--elements-color);
    border-radius: 33px;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: stretch;
}

.problems-item__wrapper {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.problems-item__text {
    min-height: 264px;
}

.problems-item__header {
    margin-bottom: 20px;
}

/*
.problems-items__button {
    background-color: #86c8ec;
    color: #fff;
    padding: 18px 0;
    display: none;
}
*/

.price {
    background: var(--back-color1);
}

.price__list {
    font-family: inherit;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
}

.price__item {
    min-width: 400px;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-content: stretch;
    padding: 25px 25px;
    border: 2px solid var(--border-soft);
    border-radius: 30px;
    background-color: var(--back-color2);
}

.price-item__header {
    margin-bottom: 30px;
    padding: 18px 10px;
    background-color: var(--accent-color1);
    border-color: transparent;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
}

.price-item__description {
    margin-bottom: 30px;
    padding: 18px 10px;
    background-color: var(--accent-color2);
    border-color: transparent;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-color);
    text-align: center;
}

.price-item__button {
    background-color: var(--elements-color);
    padding: 18px 0;
    font-size: 22px;
    font-weight: 400;
    color: var(--back-color2);
}

.feedback__list {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
}

.feedback__item {
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 40px;
}

.feedback__item:nth-child(even) {
    flex-direction: row-reverse;
}

.feedback__photo {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

.feedback__item:nth-child(odd) .feedback__photo {
    margin-right: 30px;
}

.feedback__item:nth-child(even) .feedback__photo {
    margin-left: 30px;
}

.feedback__wrapper {
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 20px;
}

.feedback__item:nth-child(even) .feedback__wrapper {
    flex-direction: row-reverse;
}

.feedback__vector {
    margin-top: 32px;
    width: 32px;
    height: 32px;
}

.feedback__text {
    padding: 30px 40px 50px 40px;
    max-width: 840px;
    min-height: 135px;
    border-radius: 30px;
    background-color: var(--back-color1);
    font-size: 16px;
    line-height: 19px;
    width: 400;
    color: var(--text-color);
}

.education {
    background: var(--back-color1);
    position: relative;
}

.swiper {
    width: 100%;
    height: 500px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    height: 100%;
}

.swiper-slide img {
    display: block;
    object-fit: contain;
    height: 100%;
}

.slide--vertical {
    max-width: 355px;
}

.slide--horisontal {
    max-width: 700px;
}

.swiper-slide:first-child,
.swiper-slide:last-child {
    width: calc((100% - 1160px)/2);
}

.swiper-button-prev:focus,
.swiper-button-next:focus {
    outline: 2px dotted var(--focus-color);
}

.approach {
    position: relative;
}

.approach__back {
    position: absolute;
    z-index: -1;
    background-image: url('../img/approach/back-min.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.approach__back--small {
    top: 50px;
    right: 50px;
    width: 531px;
    height: 534px;
}

.approach__back--big {
    bottom: 50px;
    left: -50px;
    width: 655px;
    height: 669px;
}

.approach__list {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.approach__item {
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 50px;
}

.approach-item__number {
    flex: 15%;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: 70px;
    font-weight: 400;
    color: var(--text-color);
    border-radius: 35px;
    background-color: transparent;
}

.approach-item__description {
    padding: 40px 70px 30px 60px;
    flex: 83%;
    font-family: inherit;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: var(--text-color);
    border-radius: 35px;
}

.approach-item__number:nth-child(even) {
    margin-right: 30px;
}

.approach-item__number:nth-child(add) {
    margin-left: 30px;
}

.principles {
    padding-bottom: 150px;
    background-image: url('../img/principles/waves-min.png');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    background-color: var(--back-color1);
}

.principles__wrapper {
    padding: 50px 40px;
    border-radius: 40px;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    background-color: var(--back-color2);
}

.principles__list {
    flex-flow: column nowrap;
    justify-content: flex-start;
    font-family: inherit;
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    flex: 1;
}

.principles__item {
    background: url('../img/principles/pointer.svg') left center no-repeat;
    padding-left: 45px;
    background-size: 17px;
}

.principles__item:not(:last-child) {
    margin-bottom: 30px;
}

.principles__banner {
    position: relative;
    padding: 240px 70px 50px 70px;
    border-radius: 30px;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    background-image: url('../img/principles/image.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 0;
    background-color: var(--back-color1);
}

.principles__text {
    margin-bottom: 20px;
    font-family: inherit;
    font-size: 26px;
    line-height: 39px;
    color: var(--text-color);
    text-align: center;
}

.principles__button {
    padding: 20px 40px;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    background-color: var(--elements-color);
}

.principles__arrow {
    display: block;
    position: absolute;
    top: 20%;
    left: 40%;
    z-index: 1;
}

.faq {
    background-color: var(--back-color1);
}

.faq__list {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.faq__item:not(:last-child) {
    margin-bottom: 30px;
}

.faq-item__question {
    position: relative;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.faq-item__question:hover svg circle {
    fill: var(--extra-back-color3);
}

.faq-item__header {
    font-size: 20px;
    font-weight: 500;
}

.faq-item__text {
    line-height: 1.5;
}

.accordionjs .acc_section .acc_head {
    display: flex;
}

.accordionjs .acc_section:first-of-type .acc_head,
.accordionjs .acc_section .acc_head {
    margin: 0;
    padding: 25px 70px 25px 25px;
    border-color: transparent;
}

.accordionjs .acc_section:first-of-type,
.accordionjs .acc_section:last-of-type,
.accordionjs .acc_section {
    border-color: transparent;
    border-radius: 38px;
    background-color: var(--back-color2);
}

.accordionjs .acc_section.acc_active>.acc_head {
    background-color: var(--back-color2);
    border: unset;
}

.accordionjs .acc_section .acc_head h3 {
    margin: 0;
    line-height: 1.5;
}

.accordionjs .acc_section .acc_content {
    padding: 0 25px 30px 25px;
}

.question__img {
    position: absolute;
    right: 20px;
    top: calc(50%-20px);
    display: inline-block;
    width: 40px;
    height: 40px;
}

.acc_active .question__img {
    transform: rotate(45deg);
}

.faq-item__question:focus .question__img {
    border: 2px dotted var(--focus-color);
    border-radius: 50%;
}

.footer__wrapper {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.my-contacts__list,
.dev-contacts__list {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.my-contacts__list {
    margin-bottom: 50px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 400;
    color: var(--text-color);
}

.my-contacts__item {
    padding-left: 60px;
    margin-bottom: 20px;
    min-height: 42px;
    flex-flow: row nowrap;
    align-items: center;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

.my-contacts__item--phone {
    background-image: url(../img/footer/phone.png);
}

.my-contacts__item--email {
    background-image: url(../img/footer/email.png);
}

.section__h3 {
    margin-bottom: 30px;
    font-family: inherit;
    font-size: 24px;
    font-weight: 500;
    color: var(--header-color);
}

.dev-contacts__list {
    font-family: inherit;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--text-color);
}

.dev-contacts__item {
    margin-bottom: 20px;
}

.footer__link:focus {
    outline: 2px dotted var(--elements-color);
}

.footer__container {
    background-image: url('../img/footer/footer_img-min.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
}

@media (max-width: 1199px) {
    .signup__header {
        font-size: 22px;
        line-height: 26px;
    }
    .signup__variant-list {
        font-size: 16px;
        line-height: 19px;
    }
    .signup__link {
        background-size: 42px;
    }
    .container {
        max-width: 100%;
        padding-left: 25px;
        padding-right: 25px;
    }
    .header__burger-btn {
        display: inline-flex;
    }
    .header__burger-btn:active rect {
        fill: var(--text-color);
    }
    .header__burger-btn:active rect:nth-child(2) {
        x: 5;
        width: 25;
    }
    .header__burger-btn:active rect:nth-child(3) {
        x: 12;
        width: 18;
    }
    .header__nav {
        margin: 0;
        padding: 100px 25px 32px 25px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--back-color1);
        border: 1px solid var(--focus-color);
        border-radius: 32px;
        visibility: hidden;
        opacity: 0;
        transform: translateX(-440px);
        transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;
    }
    .header__nav--visible {
        transform: translateX(0px);
        opacity: 1;
        visibility: visible;
    }
    .header-nav__list {
        flex-flow: column nowrap;
    }
    .header-nav__item {
        margin-right: 0;
    }
    .header-nav__item:not(:last-child) {
        padding: 0;
        margin-bottom: 32px;
    }
    .hero {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .hero__container {
        padding-top: 50px;
        padding-bottom: 0;
        background-position: right center;
        background-size: contain;
    }
    .hero__wrapper:nth-child(2) {
        display: none;
    }
    .hero__header {
        font-weight: 600;
        font-size: 28px;
        line-height: 39px;
    }
    .hero__text,
    .hero__button {
        font-size: 16px;
        line-height: 22px;
    }
    .hero__text {
        margin-bottom: 0;
    }
    .section__header {
        font-size: 24px;
        line-height: 32px;
    }
    .item__header {
        font-size: 22px;
        line-height: 26px;
    }
    .item__text {
        font-size: 16px;
        line-height: 1.2;
    }
    .problems__list {
        justify-content: space-evenly;
        gap: 30px;
    }
    .problems__item {
        padding: 20px;
        width: 300px;
    }
    .problems-item__header {
        margin-bottom: 10px;
    }
    .problems-item__text {
        min-height: 232px;
    }
    .price__item {
        min-width: 350px;
    }
    .feedback__list {
        row-gap: 40px;
    }
    .feedback__item {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: unset;
    }
    .feedback__item:nth-child(even) {
        flex-direction: column;
    }
    .feedback__item:nth-child(even) .feedback__photo {
        align-self: flex-end;
    }
    .feedback__wrapper {
        flex-flow: column nowrap;
        padding-top: 0;
    }
    .feedback__item:nth-child(even) .feedback__wrapper {
        flex-direction: column;
    }
    .feedback__vector {
        margin-top: 0;
    }
    .feedback__item:nth-child(odd) .feedback__vector {
        margin-left: 32px;
        transform: rotate(90deg);
    }
    .feedback__item:nth-child(even) .feedback__vector {
        margin-right: 32px;
        transform: rotate(-90deg);
        align-self: flex-end;
    }
    .feedback__text {
        padding: 20px;
        font-size: 14px;
        line-height: 17px;
        max-width: unset;
        min-height: 88px;
    }
    .approach__back {
        position: absolute;
        z-index: -1;
        background-image: url('../img/approach/back-min.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    .approach__back--small {
        top: 50px;
        right: 30px;
        width: 265px;
        height: 267px;
    }
    .approach__back--big {
        bottom: 50px;
        left: 50px;
        width: 327px;
        height: 334px;
    }
    .approach-item__number {
        font-size: 40px;
        flex: 10%;
        visibility: hidden;
    }
    .approach-item__description {
        font-size: 13px;
        line-height: 16px;
        padding: 20px;
        flex: 88%;
    }
    .principles {
        padding-bottom: 50px;
    }
    .principles__wrapper {
        padding: 0;
        border-radius: 0;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: stretch;
        background-color: transparent;
        row-gap: 30px;
    }
    .principles__list {
        padding: 30px;
        border-radius: 30px;
        flex-flow: row wrap;
        align-items: flex-start;
        font-size: 14px;
        line-height: 17px;
        gap: 30px;
        background-color: var(--back-color2);
    }
    .principles__item {
        flex: 48%;
    }
    .principles__item:not(:last-child) {
        margin-bottom: 0;
    }
    .principles__banner {
        align-items: center;
        padding: 150px 0 30px;
        border-radius: 30px;
        background-size: 400px;
        background-position: 50% -20px;
    }
    .principles__text {
        padding-right: 0;
        font-size: 20px;
        line-height: 30px;
    }
    .principles__button {
        padding: 18px 20px;
    }
    .principles__arrow {
        width: 57px;
        height: 57px;
        top: 20%;
        left: calc((100% - 70px) / 2)
    }
    .faq__item:not(:last-child) {
        margin-bottom: 20px;
    }
    .faq-item__header {
        text-align: left;
        font-size: 18px;
    }
    .question__img {
        right: 20px;
        width: 35px;
        height: 35px;
    }
    .accordionjs .acc_section .acc_head h3 {
        line-height: 1.2;
    }
    .accordionjs .acc_section:first-of-type .acc_head,
    .accordionjs .acc_section .acc_head {
        padding: 20px 65px 20px 20px;
    }
    .accordionjs .acc_section .acc_content {
        padding: 0 20px 20px 20px;
    }
    .my-contacts__list {
        margin-bottom: 30px;
        font-size: 16px;
    }
    .my-contacts__item {
        min-height: 30px;
    }
    .dev-contacts__list {
        font-size: 16px;
    }
    /*focused state*/
    .item__link:focus {
        outline: none;
    }
    .signin-links__button:focus {
        outline: none;
    }
    .signin-links__link:focus {
        outline: none;
    }
    .hero__button:focus,
    /*
    .problems-items__button:focus,
    */
    .price-item__button:focus,
    .principles__button:focus {
        outline: none;
    }
    .swiper-button-prev:focus,
    .swiper-button-next:focus {
        outline: none;
    }
    .faq-item__question:focus .question__img {
        border: none;
    }
    .footer__link:focus {
        outline: none;
    }
}

@media (max-width: 879px) {
    .section {
        padding-top: 70px;
    }
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .header__container {
        padding: 16px;
    }
    .header__nav {
        padding-top: 68px;
    }
    .hero {
        padding-top: 80px;
        padding-bottom: 50px;
    }
    .hero__container {
        padding-top: 0;
        padding-bottom: 0;
        justify-content: center;
        align-items: center;
        background-image: none;
    }
    .hero__wrapper {
        min-height: 600px;
        justify-content: space-between;
        align-items: stretch;
        background-image: url('../img/hero/main-photo-min.webp');
        background-size: 344px;
        background-position-x: right;
        background-position-y: 35%;
        background-repeat: no-repeat;
    }
    .hero__decription {
        padding: 10px;
    }
    .price__list {
        flex-flow: row wrap;
        gap: 30px;
    }
    .price__item {
        min-width: 300px;
    }
    .approach-item__number {
        display: none;
    }
    .principles__wrapper {
        justify-content: flex-start;
        align-items: center;
    }
    .principles__list {
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .footer__container {
        padding-bottom: 225px;
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 320px;
    }
    .footer__wrapper {
        align-items: center;
    }
}

@media (max-width: 661px) {
    .problems-item__text {
        min-height: 0;
    }
}