:root {
    --green: #86C947;
    --gray: #F6F5F1;
    --white: #FFFFFF;
    --smooth-green: #E6F4D8;
    --dark: #484848;
    --light-dark: #5B5B5B;
    --dark-gray: #E7E7E7;
    --smooth-gray: #B8B8B8;
    --smooth-light-dark: #858585;

    --inter: 'Inter';
}

body, html {
    font-family: var(--inter);
    font-size: 14px;
    font-weight: 400;
    color: var(--dark);
    background-color: var(--gray);

    margin: 0;
    padding: 0;
    
    height: 100%;
    width: 100%;

    scroll-behavior: smooth;
}

body::-webkit-scrollbar {
    height: 3px; 
    background: var(--dark-gray); 
    width: 10px;
}

.disp-none {
    display: none;
}

body::-webkit-scrollbar-thumb {
    background: var(--green); 
    border-radius: 12px; 
}

body::-webkit-scrollbar-thumb:hover {
    background: var(--green); 
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--inter);

    transition: all .4s ease;
}

.container {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
}

/* header */

header {
    backdrop-filter: blur(12px);
    background: rgba(246, 245, 241, 0.77);
    width: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
}

.header-conent {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 13px;
}

.header-logo img {
    width: 160px;
    height: 47px;
}

.header-conent nav {
    display: flex;
    align-items: center;
    gap: 9px;
}

.header-conent nav a {
    text-decoration: none;
    border-radius: 10px;
    padding: 18.5px 27px;

    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--dark);

    background-color: var(--white);
}

.header-conent nav a:hover {
    color: var(--green);
}

.header-conent nav a:focus  {
    color: var(--smooth-gray);
}

.header-conent button {
    font-weight: 700;
    font-size: 17px;
    color: #fff;

    border-radius: 10px;
    background-color: var(--green);
    padding: 16px 26px;
    border: none;
    outline: none;

    cursor: pointer;
}

.header-conent button:hover {
    background-color: var(--light-dark);
}

.header-conent button:focus {
    background-color: var(--dark);
}

#openMobile {
    display: none;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    width: 41px;
    height: 41px;
    background: #fff;
    outline: none;
    cursor: pointer;
}

/* mobileMenu */

#mobileMenu {
    background-color: var(--gray);
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    transform: translateY(-120%);
}

.open-menu {
    transform: translateY(0%) !important;
}

#closeMobileMenu {
    width: 30px;
    height: 30px;
    background-color: var(--green);
    border: none;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    position: absolute;

    top: 43px;
    right: 38px;
    border-radius: 50px;
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 60px 0px;

    height: 100%;
}

.mobile-menu-inner div {
    display: flex;
    flex-direction: column;
    gap: 100px;
    align-items: center;
}

.mobile-menu-inner div img {
    width: 149px;
    height: 47px;
}

.mobile-menu-inner nav {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 31px;
}

.mobile-menu-inner nav a {
    width: 140px;
    height: 44px;
    background-color: var(--white);

    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: #484848;
    text-decoration: none;

    padding: 13px 21px;
    border-radius: 10px;

    text-align: center;
}

.mobile-menu-inner nav a:hover {
    color: var(--green);
}

.mobile-menu-inner nav a:focus  {
    color: var(--smooth-gray);
}

.mobile-menu-inner button {
    font-weight: 700;
    font-size: 12px;
    color: #fff;

    padding: 14px 21px;
    border-radius: 10px;
    background-color: var(--green);

    border: none;
    outline: none;
    cursor: pointer;

    border-radius: 10px;
}

.mobile-menu-inner button:hover {
    background-color: var(--light-dark);
}

.mobile-menu-inner button:focus {
    background-color: var(--dark);
}

/* main */

main {
    margin-top: 75px;
    padding-bottom: 53px;
}

.main-inner {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    height: 678px;
}

.main-inner-left {
    background-image: url(../images/tracks.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 37px;

    border-radius: 15px;

    width: 50%;
    height: 100%;

    padding: 20px 59px;
}

.main-inner-right {
    width: 50%;
    background-image: url(../images/main_image.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 15px;
    height: 100%;
}

.main-inner-left__plash {
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.29);
    border-radius: 7px;
    padding: 6px 12px;
    width: fit-content;
    height: fit-content;
}

.main-inner-title {
    font-weight: 600;
    font-size: 70px;
    line-height: 94%;
    text-transform: uppercase;
    color: #fff;
}

.main-inner-subtitle {
    font-weight: 400;
    font-size: 18px;
    line-height: 109%;
    color: #fff;
}

.main-inner-button {
    width: 100%;
    background-color: var(--white);
    position: relative;
    border-radius: 9px;

    padding: 20px 25px;

    cursor: pointer;
}

.main-inner-button:hover .main-inner-btn {
    background-color: var(--light-dark);
}

.main-inner-button:active .main-inner-btn {
    background-color: #61af16;
}

.main-inner-button:active {
    background-color: #e6f4d8;
}

.main-inner-button span {
    font-weight: 500;
    font-size: 16px;
    line-height: 109%;
    color: #484848;
}

.main-inner-button button {
    position: absolute;
    border-radius: 9px;
    width: 43px;
    height: 52px;

    right: 3px;
    top: 50%;
    transform: translateY(-50%);

    background-color: #61af16;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border: none;
    outline: none;
    cursor: pointer;
}


/* about */

.about {
    position: relative;
    border-radius: 15px;
    background-color: var(--white);

    padding: 98px 59px;

    margin-bottom: 62px;
}

.top-about {
    position: absolute;
    background-image: url(../images/about-top.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    left: 46px;
    top: -22px;

    font-weight: 600;
    font-size: 12px;
    line-height: 109%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #86c947;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    width: 220px;
    height: 48px;
}

.top-start {
    display: flex;
    gap: 70px;
    justify-content: space-between;
    align-items: baseline;

    margin-bottom: 50px;
}

.top-start h2 {
    font-weight: 600;
    font-size: 68px;
    line-height: 93%;
    color: #484848;
    width: 60%;
}

.top-start h2 span {
    color: #86c947;
}

.top-start p {
    font-weight: 400;
    font-size: 16px;
    color: #484848;
    width: 40%;
}

.about-how h2 {
    font-weight: 600;
    font-size: 28px;
    color: #484848;
    margin-bottom: 35px;
}

.about-how-inner {
    column-count: 2;
    column-gap: 20px;

    margin-bottom: 66px;
}

.about-how-item {
    break-inside: avoid;

    display: flex;
    border-radius: 10px;
    border: 1px solid rgba(134, 201, 71, 0.27);
    margin-bottom: 11px;
}

.about-how-item__right {
    padding: 20px;
}

.about-how-item__right p {
    font-weight: 400;
    font-size: 16px;
    color: #484848;
}

.about-how-item__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 65px;

    background: #86c947;

    border-radius: 10px 0px 0px 10px;
}

.about-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.about-bottom-left {
    width: 50%;
    padding: 40px 45px;
    background-color: #86c947;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    gap: 14px;
}

.about-bottom-left h2 {
    margin-bottom: 21px;

    font-weight: 600;
    font-size: 28px;
    color: #fff;
}

.about-bottom-left p {
    font-weight: 400;
    font-size: 16px;
    color: #fff;
}

.about-bottom-right {
    background: #f6f5f1;
    border-radius: 10px;
    padding: 44px;

    width: 50%;
    position: relative;
    overflow: hidden;
}

.about-bottom-right svg {
    position: absolute;
    bottom: 0;
    left: 0;

    width: 143px;
    height: 168px;
}

.about-bottom-right h2 {
    font-weight: 600;
    font-size: 28px;
    color: #86c947;
}

.about-bottom-right__docs {
    display: flex;
    justify-content: right;
    gap: 27px;

    margin-top: -34px;
}

.about-bottom-right__docs a {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: center;
    text-decoration: none;

    width: 110px;
}

.about-bottom-right__docs a:hover {
    opacity: 0.6;
}

.about-bottom-right__docs a img {
    width: 104px;
    height: 147px;
}

.about-bottom-right__docs a p {
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #484848;
}

.about-bottom-overflow {
    position: absolute;
    background-image: url(../images/about-bottom.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    left: 46px;
    bottom: -22px;

    font-weight: 600;
    font-size: 12px;
    line-height: 109%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #86c947;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    width: 195px;
    height: 48px;
    
    
}

/* news */

.news {
    padding: 83px 0px;
}

.news-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 53px;
}

.news-top h2 {
    font-weight: 600;
    font-size: 68px;
    line-height: 86%;
    letter-spacing: -0.01em;
    color: #484848;
}

.news-top a {
    font-weight: 600;
    font-size: 14px;
    color: #fff;

    padding: 15px 28px;
    background: #86c947;
    border-radius: 10px;
    text-decoration: none;
}

.news-top a:hover {
    background: #5b5b5b;
}

.news-top a:focus {
    background: #484848;
}

.news-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.news-item {
    padding: 7px;
    background-color: var(--white);
    border: 1px solid #86c947;
    border-radius: 10px;
    width: 25%;
}

.news-item img {
    width: 100%;
    height: 187px;
    margin-bottom: 21px;
    object-fit: cover;
    border-radius: 10px;
}

.news-item-inner {
    padding: 0px 33px 33px 33px;
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.news-item-date {
    font-weight: 400;
    font-size: 14px;
    color: #86c947;
}

.news-item-title {
    font-weight: 500;
    font-size: 16px;
    color: #484848;

    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 2;
    -moz-line-clamp:2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

.news-button {
    display: none;
}

.news-item-text {
    font-weight: 400;
    font-size: 14px;
    color: #484848;

    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 3;
    -moz-line-clamp:3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

.news-item-inner a {
    font-weight: 500;
    font-size: 14px;
    color: #484848;
    padding: 14px 27px;
    border: 1px solid #484848;
    border-radius: 10px;
    text-decoration: none;
    width: fit-content;
}

.news-item-inner a:hover {
    background: #5b5b5b;
    color: var(--white);
}

.news-item-inner a:focus {
    background: #484848;
    color: var(--white);
}


/* howto */

.howto {
    background-color: var(--white);
    padding: 98px 54px;
    border-radius: 15px;

    position: relative;
}

.howto-top {
    position: absolute;
    left: 46px;
    top: -24px;
    background-image: url(../images/howto-top.svg);
    background-size: contain;
    width: 159px;
    height: 48px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-weight: 600;
    font-size: 12px;
    line-height: 109%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #86c947;
}

.howto-tile {
    font-weight: 600;
    font-size: 68px;
    line-height: 86%;
    letter-spacing: -0.01em;
    color: #484848;

    margin-bottom: 62px;
}

.how-to-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 19px;
}

.how-to-inner__item {
    width: 48%;
    position: relative;
    padding: 40px 48px;
    background: #f6f5f1;
    border-radius: 10px;
}

.how-to-inner__item h2 {
    font-weight: 600;
    font-size: 28px;
    line-height: 120%;
    text-transform: uppercase;
    color: #9cc947;

    margin-bottom: 20px;
    width: 303px;
    z-index: 55;
    position: relative;
}

.how-to-inner__item p {
    font-weight: 400;
    font-size: 16px;
    color: #484848;
    width: 403px;

    margin-bottom: 46px;
    z-index: 55;
    position: relative;
}

.how-to-inner__item button {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
    padding: 15px 24px;
    background: #86c947;
    border-radius: 10px;
    z-index: 55;
    position: relative;

    cursor: pointer;
    border: none;
    outline: none;
}

.how-to-inner__item button:hover {
    background: #5b5b5b;
}

.how-to-inner__item button:focus {
    background: #484848;
}

.how-to-inner__item svg {
    bottom: 0;
    right: 0;
    position: absolute;
}


/* sub */

.sub {
    position: relative;
    background-image: url(../images/green_back.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-radius: 10px;
}

.sub-top {
    position: absolute;
    top: -24px;
    left: 46px;

    width: 172px;
    height: 48px;
    background-image: url(../images/sub-top.svg);
    background-size: contain;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    font-weight: 600;
    font-size: 12px;
    line-height: 109%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
}

.sub-bottom {
    position: absolute;
    bottom: -24px;
    left: 46px;

    width: 259px;
    height: 48px;
    background-image: url(../images/sub-bottom.svg);
    background-size: contain;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    font-weight: 600;
    font-size: 12px;
    line-height: 109%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #86c947;
}

.sub-title {
    margin-bottom: 50px;
    font-weight: 600;
    font-size: 59px;
    line-height: 99%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
}

.sub-content {
    max-width: 900px;
    padding: 100px 50px;
    margin-right: auto;
    margin-left: auto;
}

.sub-form {
    border-radius: 10px;
}

.sub-form-top {
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    text-align: center;
    color: #484848;

    width: 100%;
    padding: 20px;
    background-color: #f6f5f1;
    border-radius: 10px 10px 0px 0px;
}

.sub-form-content {
    background-color: #fff;
    padding: 50px 75px 46px 75px;
    border-radius: 0px 0px 10px 10px;
}

.sub-form-pol {
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: #484848;

    margin-bottom: 18px;
}

.sub-form-input__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    margin-bottom: 29px;
}

.sub-form-input__container input {
    width: 33%;
    padding: 18px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background-color: #fff;

    font-weight: 400;
    font-size: 14px;
    color: #484848;
}

.sub-form-input__container input::placeholder {
    color: #b8b8b8;
}

.sub-form-input__container input:hover {
    border: 1px solid #b8b8b8;
}

.sub-form-input__container input:focus {
    border: 1px solid #858585;
    outline: none;
}

.classic-input {
    width: 100%;
    padding: 18px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background-color: #fff;

    font-weight: 400;
    font-size: 14px;
    color: #484848;
}

.classic-input::placeholder {
    color: #b8b8b8;
}

.classic-input:hover {
    border: 1px solid #b8b8b8;
}

.classic-input:focus {
    border: 1px solid #858585;
    outline: none;
}

.sub-form-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 36px;
}

.sub-form-price button {
    width: 25%;
    font-weight: 400;
    font-size: 16px;
    text-transform: uppercase;
    text-align: center;
    color: #484848;

    padding: 17px 3px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background-color: #fff;

    cursor: pointer;
    outline: none;

    white-space: nowrap;
}

.sub-form-price button:hover {
    background-color: #e6f4d8;
}

.sub-form-price button:active {
    background-color: #f6f5f1;
}

.sub-form-active-button {
    border: 1px solid #86c947 !important;
    color: #86c947 !important;
}

.sub-form-price input {
    width: 32.2%;

    font-weight: 400;
    font-size: 16px;
    text-align: center;
    color: #b8b8b8;

    padding: 17px 24px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    background-color: #fff;
}

.sub-form-price input::placeholder {
    color: #b8b8b8;
}

.sub-form-price input:hover {
    border: 1px solid #b8b8b8;
}

.sub-form-price input:focus {
    border: 1px solid #858585;
    outline: none;
}

.sub-form-button {
    background: #86c947;
    border-radius: 10px;
    width: 100%;

    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    color: #fff;

    padding: 18px;
    cursor: pointer;
    outline: none;
    border: none;

    margin-bottom: 24px;
}

.sub-form-button:hover {
    background-color:  #5b5b5b;
}

.sub-form-button:focus {
    background-color:  #484848;
}

.sub-form-content img {
    width: 114px;
    height: 13px;
    margin-bottom: 41px;

    margin-right: auto;
    margin-left: auto;
}

.sub-form-last {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sub-form-last div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sub-form-last div p {
    font-weight: 400;
    font-size: 12px;
    color: #858585;
}

.sub-form-last div p a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: #858585;
}

.paments_systems {
    width: 100%;
    display: flex;
}

/* Скрываем стандартный чекбокс */
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    max-width: 20px;
    min-width: 20px;
    height: 20px;
    max-height: 20px;
    min-height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
  }
  
  /* Стиль для отмеченного состояния */
  .custom-checkbox:checked {
    background-color: #86c947;
    border-color: #86c947;
  }
  
  /* Галочка (можно использовать псевдоэлемент или background-image) */
  .custom-checkbox:checked::before {
    content: "✓";
    color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
}

/* why */

.why {
    padding: 100px 0px;
}

.why-title {
    margin-bottom: 46px;
    font-weight: 600;
    font-size: 64px;
    line-height: 97%;
    color: #484848;
    text-align: left;
}

.why-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;

    margin-bottom: 56px;
}

.why-item {
    background-color: #fff;
    padding: 26px 64px;
    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.why-item-num {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    max-width: 46px;
    max-height: 46px;

    border-radius: 200px;
    border: 1px #e6f4d8 solid;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    color: #86c947;

    margin-right: 44px;
}

.why-cube {
    height: 121px;
    min-width: 128px;
    background: #e6f4d8;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-right: 48px;
}

.why-cube span {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    background-color: #c6eba2;
    border-radius: 100px;
}

.why-item h3 {
    font-weight: 600;
    font-size: 20px;
    line-height: 120%;
    text-transform: uppercase;
    color: #484848;

    width: 30%;
}

.why-item p {
    font-weight: 400;
    font-size: 16px;
    color: #484848;

    width: 50%;
}

.why-button {
    background: #86c947;
    outline: none;
    border: none;
    cursor: pointer;

    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    padding: 22px 48px;
    border-radius: 10px;

    width: fit-content;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    display: flex;
}

.why-button:hover {
    background: #5b5b5b;
}

.why-button:focus {
    background: #484848;
}

.disp-none {
    display: none;
}

.classic-button {
    background-color: var(--green);
    font-weight: 700;
    font-size: 18px;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    padding: 18px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.classic-button:hover {
    background: #5b5b5b !important;
}

.classic-button:active {
    background: #484848 !important;
}


/* help */

.help {
    padding: 103px 121px;
    position: relative;
    background-color: #fff;
    border-radius: 15px;
}

.help-top {
    background-image: url(../images/help-top.svg);
    background-size: cover;
    background-position: center;

    width: 134px;
    height: 48px;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    font-weight: 600;
    font-size: 12px;
    line-height: 109%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #86c947;

    position: absolute;
    left: 46px;
    top: -24px;
}

.help-bottom {
    background-image: url(../images/help-bottom.svg);
    background-size: cover;
    background-position: center;

    width: 173px;
    height: 48px;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;

    font-weight: 600;
    font-size: 12px;
    line-height: 109%;
    letter-spacing: -0.01em;
    text-align: center;
    color: #86c947;

    position: absolute;
    left: 46px;
    bottom: -25px;

    z-index: 99;
}

.help-title {
    font-weight: 600;
    font-size: 64px;
    line-height: 97%;
    text-align: center;
    color: #484848;

    margin-bottom: 52px;
}

.help-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.help-item {
    width: 23.7%;
    background: #f6f5f1;
    border-radius: 10px;
    padding: 7px;
}

.help-item-img {
    width: 100%;
    height: 220px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px 10px 0px 0px;

    position: relative;
}

.help-item-img span {
    top: 7px;
    right: 10px;
    position: absolute;

    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;

    padding: 4px 12px;
    border-radius: 40px;
    background: #fa6833;
}

.help-item-content {
    padding: 29px;
}

.help-item-name {
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    color: #484848;

    margin-bottom: 9px;
}

.help-item-years {
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    color: #484848;
    display: block;

    margin-bottom: 16px;
}

.help-item-text {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    color: #484848;

    margin-bottom: 20px;
}

.help-item-text span {
    font-weight: 500;
}

.help-item-bottom {
    display: flex;
    flex-direction: column;
    gap: 11px;

    margin-bottom: 23px;
}

.help-item-bottom__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.help-item-bottom__top span {
    font-weight: 500;
    font-size: 14px;
    color: #b8b8b8;
}

.help-item-bottom__top p {
    font-weight: 600;
    font-size: 14px;
    color: #86c947;
}

.help-item-bottom__bottom {
    position: relative;
    width: 100%;
    height: 4px;
    background: #d7d7d7;
    border-radius: 3px;
}

.help-item-bottom__bottom-line {
    position: absolute;
    top: 0;
    left: 0;
    background: #86c947;
    border-radius: 3px;
    height: 4px;
}

.help-item-content button {
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    background: #5b5b5b;
    border-radius: 10px;

    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    color: #fff;

    padding: 15px;
}

.help-item-content button:hover {

}

.help-item-content button:focus {
    
}

.help-item-mobile__content {
    display: none;
}

.help-subtitle {
    font-weight: 500;
    font-size: 16px;
    text-align: center;
    color: #484848;

    margin-bottom: 62px;
    max-width: 690px;
    margin-right: auto;
    margin-left: auto;
}

.help-button {
    margin-top: 59px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    width: fit-content;
    justify-content: center;

    background: #86c947;
    border-radius: 10px;
    padding: 22px 47px;
    
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;

    cursor: pointer;
    outline: none;
    border: none;
}

.help-button:hover {
    background: #5b5b5b;
}

.help-button:focus {
    background: #484848;
}

.pets-help {
    background-color: var(--gray);
}

.pets-help .help-item {
    background-color: var(--white);
}


/* faq */

.faq {
    border-radius: 15px;
    background-color: #fff;
    position: relative;

    padding: 94px 0px 120px 0px;
}

.faq-top {
    position: absolute;
    top: -24px;
    left: 46px;
    object-fit: cover;

    width: 120px;
    height: 48px;
}

.faq-bottom {
    position: absolute;
    bottom: -41px;
    right: 50%;
    transform: translateX(50%);
    width: 256px;
    height: 84px;
}

.faq-title {
    font-weight: 600;
    font-size: 64px;
    line-height: 98%;
    text-align: center;
    color: #484848;

    margin-bottom: 59px;
}

.faq-inner {
    padding: 0px 169px;
    display: flex;
    gap: 20px;
}

.faq-inner-block {
    width: 50%;
}

.faq-item {
    position: relative;
    /* max-height: 74px;
    min-height: 74px;
    height: 74px; */

    margin-bottom: 12px;
    color: #484848;
}

.faq-item-top {
    max-height: 74px;
    min-height: 74px;
    height: 74px;
    background: #f6f5f1;
    border-radius: 4px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0px 18px 0px 32px;

    position: relative;
    z-index: 5;
}

.faq-item-top__title {
    font-weight: 400;
    font-size: 16px;
    
}

.faq-item-bottom__text {
    font-weight: 400;
    font-size: 16px;
    color: #484848;
}

.faq-item-bottom {
    background: #e6f4d8;
    border-radius: 0 0 4px 4px;
    padding: 10px 18px 18px 29px;

    position: relative;
    z-index: 3;
    margin-top: -74px;

    max-height: 74px;
    min-height: 74px;
    height: 74px;
}

.open-bottom {
    margin-top: 0px;
}

.open-top {
    background: #86c947;
    color: #fff;
}

.open-svg {
    transform: rotate(90deg);
}

.open-svg-path {
    fill: #fff;
}


/* footer */

footer {
    padding-top: 114px;
    padding-bottom: 27px;
}

.footer-top {
    padding: 0px 58px;

    display: flex;
    justify-content: space-between;

    gap: 100px;
    padding-bottom: 38px;

    border-bottom: 1px #DDDDDD solid;
}

.footer-top-first {
    width: 50%;
}

.footer-title {
    font-weight: 600;
    font-size: 32px;
    text-transform: uppercase;
    color: #86c947;

    margin-bottom: 20px;
}

.footer-subtitle {
    font-weight: 400;
    font-size: 16px;
    color: #484848;

    margin-bottom: 32px;
}

.footer-form-inputs {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 18px;
}

.footer-form-inputs input {
    font-weight: 400;
    font-size: 14px;
    color: var(--dark);

    padding: 18px;

    border: 1px solid #86c947;
    border-radius: 10px;
    width: 60%;
    background-color: #fff;
}

.footer-form-inputs input::placeholder {
    font-weight: 400;
    font-size: 14px;
    color: #b8b8b8;
}

.footer-form-inputs button {
    padding: 15.5px 30px;
    border-radius: 10px;

    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;

    background-color: #86c947;
    cursor: pointer;
    border: none;
    outline: none;
}

.footer-form-inputs button:hover {
    background: #5b5b5b;
}

.footer-form-inputs button:focus {
    background: #484848;
}

.footer-form-inputs input:hover {
    border: 1px solid #b8b8b8;
}

.footer-form-inputs input:focus {
    border: 1px solid #858585;
    outline: none;
}

.footer-form-last {
    display: flex;
    gap: 12px;
}

.footer-form-last p {
    font-weight: 400;
    font-size: 12px;
    color: #858585;
}

.footer-form-last p a {
    color: #858585;
}

.footer-top-center_first {
    margin-bottom: 82px;
}

.footer-top-center_first h3 {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    color: #484848;
}

.footer-top-center_first a {
    font-weight: 400;
    font-size: 18px;
    color: #484848;

    margin-bottom: 2px;
    text-decoration: none;
}

.footer-top-center_first p {
    font-weight: 400;
    font-size: 12px;
    color: #b8b8b8;
}

.footer-top-center_block {
    margin-bottom: 27px;
}

.footer-top-center_block:last-child {
    margin-bottom: 0;
}

.footer-top-center_block h3 {
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    color: #484848;
    white-space: nowrap;
    margin-bottom: 5px;
}

.footer-top-center_block a {
    font-weight: 400;
    font-size: 18px;
    color: #484848;
    text-decoration: none;
}

.footer-top-bottom h3 {
    margin-bottom: 16px;
    white-space: nowrap;
    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    color: #484848;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;

    padding: 31px 58px 0px 58px;
}

.footer-bottom div {
    /* width: 25%; */
}

.footer-bottom-company {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.footer-bottom-company p {
    font-weight: 500;
    font-size: 12px;
    color: #858585;
}

.footer-bottom-company p:last-of-type {
    font-weight: 400;
    font-size: 12px;
    line-height: 142%;
    color: #858585;
}

.footer-bottom-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-bottom-links a {
    font-weight: 400;
    font-size: 12px;
    line-height: 167%;
    color: #858585;
    text-decoration: none;
}

.footer-bottom-other {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.footer-bottom-other a {
    font-weight: 400;
    font-size: 12px;
    color: #858585;
    text-decoration: none;
}

.footer-bottom-end a {
    font-weight: 400;
    font-size: 12px;
    color: #858585;
    text-decoration: none;
}


/* pop`s */

.form_radio {
	margin-bottom: 10px;
}
.form_radio input[type=radio] {
	display: none;
}
.form_radio label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 0;
	line-height: 18px;
	user-select: none;
}
.form_radio label:before {
	content: "";
	display: inline-block;
	width: 17px;
	height: 18px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background: url(../images/radio-1.png) 0 0 no-repeat;
    background-position: center;
    background-size: contain;
}
 
/* Checked */
.form_radio input[type=radio]:checked + label:before {
	background: url(../images/radio-2.png) 0 0 no-repeat;
    background-position: center;
    background-size: contain;
}
 
/* Hover */
.form_radio label:hover:before {
	filter: brightness(120%);
}
 
/* Disabled */
.form_radio input[type=radio]:disabled + label:before {
	filter: grayscale(100%);
}


.pop {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 999999999;
    backdrop-filter: blur(3px);
    background: rgba(246, 245, 241, 0.77);

    transform: translateY(-100%);
}

.open-pop {
    transform: translateY(0%) !important;
}

.pop-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    max-width: 648px;
    width: 95%;
    background-color: #fff;
    border-radius: 10px;

    max-height: 91%;
    overflow: scroll;
}

.pop-inner-header {
    background: #86c947;
    position: relative;
    padding: 15px 12px;

    border-radius: 10px 10px 0px 0px;
}

.pop-inner-header h2 {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: #fff;
}

.close-pop {
    width: 30px;
    max-width: 30px;
    height: 30px;
    max-height: 30px;
    border-radius: 100px;
    background-color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    cursor: pointer;
    border: none;
    outline: none;

    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
}

.back-pop {
    width: unset !important;
    max-width: unset !important;
    height: unset !important;
    max-height: unset !important;
    border-radius: unset !important;
    background-color: transparent !important;

    flex-direction: row !important;
    gap: 7px !important;
    justify-content: left !important;

    position: static !important;
    top: unset !important;
    right: unset !important;
    bottom: unset !important;

    margin-bottom: 17px;
}

.back-pop p {
    font-weight: 400;
    font-size: 12px;
    line-height: 192%;
    color: #484848;
}

.close-pop:hover svg path {
    fill: #484848;
}

.close-pop:active svg path {
    fill: #B8B8B8;
}

.pop-body {
    padding: 49px 100px;
}

.pop-body h3 {
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: #484848;

    margin-bottom: 17px;
}

.pop-2-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.pop-2-input .classic-input {
    width: 48% !important;
}

.pop-radios {
    display: flex;
    align-items: center;
    gap: 27px;

    margin-bottom: 28px;
}

.pop-checkboxs {
    display: flex;
    flex-direction: column;
    gap: 14px;

    margin-bottom: 15px;
}

.pop-checkboxs div {
    display: flex;
    align-items: center;
    gap: 14px;
}

.custom-checkbox-pop {
    width: 13px;
    height: 13px;
    min-width: 13px;
    max-width: 13px;
    min-height: 13px;
    max-height: 13px;
}

.custom-checkbox-pop::before {
    font-size: 9px !important;
}

.pop-body button[type="submit"] {
    width: 100%;
    margin-top: 28px;
    padding: 16px;
    background: #86c947;
    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;

    margin-bottom: 22px;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}

.pop-body-end {
    display: flex;
    align-items: center;
    gap: 7px;
}

.pop-body-end p {
    font-weight: 400;
    font-size: 12px;
    color: #858585;
}

.pop-body-end p a {
    color: #858585;
}

.pop-4-input {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pop-4-input input {
    width: 100%;
}

.pop-4-input div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pop-4-input div input {
    width: 50%;
}

#help .pop-inner {
    max-width: 790px;
}

#help .pop-body {
    padding: 50px;
}

.sub-form-payments {
    justify-content: left;
    margin-bottom: 0;
}

.sub-form-payments button {
    display: flex;
    gap: 9px;
    align-items: center;
    width: fit-content !important;
    text-transform: none;
    padding-left: 26px;
    padding-right: 26px;
}

.sub-form-payments button p {
    text-transform: none;
}

.sub-form-payments button img {
    width: 78px;
    height: 9px;
}

/* news page */


.breadcrumps {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 42px;
    margin-top: 25px;
}

.breadcrumps a {
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    color: #484848;
}

.breadcrumps a:last-of-type {
    color: #858585;
    font-weight: 400;
}

.breadcrumps span:last-of-type {
    color: #858585;
    font-weight: 400;
    font-size: 12px;
}

/* post */

.post {
    background-color: #fff;
    padding: 50px 60px;
    border-radius: 10px;

    margin-top: 84px;
}

.post .breadcrumps {
    margin-top: 0;
}

.post-title {
    margin-bottom: 64px;
    font-weight: 600;
    font-size: 68px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #484848;
}

.post-inner {
    display: flex;
    justify-content: space-between;
    gap: 130px;
}

.post-info {
    width: 200px;
}

.post-info-date {
    padding: 26px 0px;
    font-weight: 500;
    font-size: 14px;
    color: #484848;
    white-space: nowrap;

    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;

    margin-bottom: 26px;
}

.post-info-share h3 {
    font-weight: 500;
    font-size: 14px;
    color: #484848;

    margin-bottom: 20px;
}

.post-info-share div {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-info-share div a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    border-radius: 10px;
    width: 51px;
    min-width: 51px;
    height: 51px;
    min-height: 51px;
    background: #e6f4d8;
}

.post-main {
    width: 100%;
}

.post-main img {
    width: 90%;
}

.post-main p {
    margin-bottom: 32px;
    font-weight: 400;
    font-size: 18px;
    line-height: 135%;
    color: #484848;
}

.post-main h2 {
    font-weight: 600;
    font-size: 18px;
    line-height: 130%;
    text-transform: uppercase;
    color: #484848;
    margin-bottom: 32px;
}

.post-info-share__hidden {
    display: none;
}

.error-text {
    text-align: center;
    margin: 10px 0px;
    color: #d91e1e;
    font-weight: 700;
    font-size: 18px;
}

#referalWarn {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 100%;
}

.referal-inner {
    background-color: var(--white);
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    max-width: 500px;
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    display: flex;
    flex-direction: column;

    animation: referalWarn 3s ease 1s infinite;
}

.referal-inner h2 {
    font-size: 21px;
    margin-bottom: 9px;
}

.referal-inner a {
    text-decoration: none;
}

.referal-inner a:last-of-type {
    margin-top: 10px;
}

@keyframes referalWarn {
    0% {
        transform: translateY(0px);
        box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    }

    50% {
        transform: translateY(-15px);
        box-shadow: 0px 0px 16px 0px rgba(130, 213, 53, 0.586);
    }

    100% {
        transform: translateY(0px);
        box-shadow: 0px 0px 16px 0px rgba(34, 60, 80, 0.2);
    }
}

.make-help {
    position: relative;
}

.help-menu {
    margin-top: 5px;
    padding: 10px;
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    position: absolute;
    top: 62px;
    left: 0;
    z-index: 998;
    display: flex;
    flex-direction: column;
}
.help-menu .help-title {
    font-weight: 500;
    font-size: 13px;
    line-height: 97%;
    text-align: center;
    color: #484848;
    margin-bottom: 5px;
}
.help-link {
    display: block;
    padding: 6px 10px;
    margin-bottom: 5px;
    background: #86c946;
    border-radius: 6px;
    text-decoration: none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}
.help-link:hover {
    background: #ddd;
}

.mobile-menu-inner .help-menu {
    top: unset;
    bottom: 70px;
    gap: 0;
}


input[type="password"], 
input[type="text"].toggle-password {
    padding-right: 35px; /* чтобы текст не налезал на иконку */
    position: relative;
}

.eye-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    font-size: 16px;
}