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

body {
    --bg-color: #060028;
    --logo-img: center / contain no-repeat url("../img/logo-light.svg");
    --subtitle-color: #FFD964;
    --text-color: #fff;
    --contact-border: #56BE87;
    --list-item-color: #fff;
    --btn-border: 2px solid #fff;
    --btn-color: #fff;
    --menu-list-bg: #060028;
    --menu-list-border: 1px solid #fff;
}

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

.main {
    background: bottom / cover no-repeat url("../img/contact/contact-bg.png"), #fff;
    position: relative;
    overflow: hidden;
}

.icons {
    transition: 0.3s ease-in-out;
    pointer-events: none;
}

.icons.hide {
    opacity: 0;
    transition: 0.3s ease-in-out;
}

.icons.hide.icon-left {
    transform: translateX(-100%);
}

.icons.hide.icon-right {
    transform: translateX(100%);
}

.icon-left {
    position: fixed;
    top: 250px;
    left: 0;
    width: 268px;
    height: 200px;
}

.icon-left .icon-1 {
    width: 200px;
    position: absolute;
    top: 0;
    left: 0;
    animation: iconMove 15s linear 0s infinite;
}

@keyframes iconMove {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 198;
    }
}

.icon-left .icon-2 {
    width: 38px;
    height: 42px;
    position: absolute;
    top: 71px;
    right: 0;
    background: center / contain no-repeat url("../img/contact/icons/icon-left-star.svg");
    transition: all 0.5s;
}

.icon-left .icon-3 {
    width: 12px;
    height: 12px;
    position: absolute;
    bottom: 70px;
    right: 40px;
    background: center / contain no-repeat url("../img/contact/icons/icon-left-ellipse.svg");
    transition: all 0.5s;
}

.icon-left .icon-4 {
    width: 55px;
    height: 55px;
    position: absolute;
    bottom: 0;
    left: 46px;
    background: center / contain no-repeat url("../img/contact/icons/icon-left-fiolet.svg");
    transition: all 0.5s;
}

.icon-right {
    width: 150px;
    height: 177px;
    position: fixed;
    top: 193px;
    right: 147px;
    margin-left: auto;
}

.icon-right .icon-1 {
    width: 80px;
    height: 150px;
    position: absolute;
    top: 0px;
    right: 0;
    background: center / contain no-repeat url("../img/contact/icons/icon-right-fill.svg");
    transition: all 0.5s;
}

.icon-right .icon-2 {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 65px;
    left: 0;
    background: center / contain no-repeat url("../img/contact/icons/icon-right-lines.svg");
    transition: all 0.5s;
}

.icon-right .icon-3 {
    width: 80px;
    height: 70px;
    position: absolute;
    bottom: 0;
    left: 16px;
    background: center / contain no-repeat url("../img/contact/icons/icon-right-border.svg");
    transition: all 0.5s;
}

.main__inner {
    padding: 64px 0 112px;
}

.main__info {
    max-width: 475px;
    margin: 0 auto 48px;
    text-align: center;
}

.main__subtitle {
    font: 700 28px/30px "Epom";
    color: #FF8C67;
    display: inline;
    position: relative;
}

.main__subtitle::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -100%;
    width: 120px;
    height: 49px;
    background: center / contain no-repeat url("../img/contact/icons/title-arrow-left.svg");
}

.main__subtitle::after {
    content: "";
    position: absolute;
    top: 10px;
    right: -100%;
    width: 120px;
    height: 49px;
    background: center / contain no-repeat url("../img/contact/icons/title-arrow-right.svg");
}

h1.main__title {
    font: 600 48px/60px "Jokker";
    margin: 0 0 8px;
    color: #fff;
    max-width: 100%;
}

p.main__desc {
    font: 400 18px/28px "Figtree";
    color: #fff;
}

.main__form {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    max-width: 600px;
    max-height: 2000px;
    transition: all 0.3s ease-in-out;
    margin: 0 auto;
}

.main__form.hide {
    max-height: 0;
    overflow: hidden;
    padding: 0 32px;
    opacity: 0;
    transition: all 0.25s linear;
}

.main__form label {
    max-width: 100%;
    border-radius: 8px;
}

.main__form label.consent {
    color: #fff;
}

.main__form .radio-label {
    margin-bottom: 0;
}

.main__form input {
    background: #FCF9F3;
    border: 1px solid #9BA5B9;
    border-radius: 8px;
    padding: 14px 20px;
    font: 400 16px/24px "Figtree";
}

.main__form input::placeholder {
    color: #65717E;
}

.main__form input:focus {
    box-shadow: none;
    background: #F4F6FF;
    border: 1px solid #5273EF;
}

.main__form label span.form-title {
    margin: 0 0 16px;
    color: #fff;
    font: 700 16px/24px "Figtree";
}

.main__form label.radio-label.product,
.main__form .account-number-field {
    display: none;
}

.main__form label.radio-label.product.active,
.main__form .account-number-field.active {
    padding-bottom: 16px;
    margin-bottom: 8px;
    display: block;
}

.main__form label .radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 0 8px;
    gap: 8px;
}

.main__form label .radio li {
    font: 400 16px/24px "Figtree";
    background: transparent;
    color: #fff;
    padding: 8px 24px;
    border-radius: 56px;
    border: 1px solid #56BE87;
    cursor: pointer;
    transition: 0.3s;
}

.main__form label .radio li:hover {
    transform: scale(1.02);
    transition: 0.3s;
}

.main__form label .radio li.active {
    background: #56BE87;
    color: #060028;
    transition: 0.3s;
}

.main__form label textarea {
    background: #FCF9F3;
    border: 1px solid #9BA5B9;
    border-radius: 8px;
    padding: 14px 20px;
    height: 140px;
}

.main__form label textarea::placeholder {
    color: #65717E;
}

.main__form label textarea:focus {
    box-shadow: none;
    background: #F4F6FF;
    border: 1px solid #5273EF;
}

.main__form div.submit-wrap .btn {
    margin: 32px 0 0;
    max-width: 100%;
    background: #5273EF;
    border-radius: 100px;
    color: #fff;
    text-align: center;
    font: 700 16px/20px "Figtree";
    width: 100%;
    border: none;
    padding: 20px;
    height: 60px;
    transition: 0.3s;
}

.main__form div.submit-wrap .btn:hover {
    color: #060028;
    background: #56BE87;
    transition: 0.3s;
}

.additions {
    background: #fff;
}

.additions__inner {
    padding: 104px 0 56px;
    position: relative;
    z-index: 1;
}
.additions__box {
    display: flex;
    justify-content: space-between;
}
.additions__item {
    max-width: 48.5%;
    width: 100%;
    padding: 32px;
    background: #F7F7F9;
    border-radius: 16px;
}
.additions__item-title {
    color: #060028;
    font: 600 32px/40px "Jokker";
    margin: 0 0 8px;
}
.additions__item-text {
    color: #060028;
    font: 400 18px/28px "Figtree";
    margin: 0 0 16px;
}
.additions__item-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}
.additions__item:nth-child(1) .additions__item-bottom .block {
    max-width: 232px;
}
.additions__item:nth-child(2) .additions__item-bottom .block {
    max-width: 264px;
}
.additions__item-link,
.additions__item-link:visited {
    padding: 20px;
    max-width: 220px;
    width: 100%;
    text-align: center;
    color: #060028;
    font: 700 16px/20px "Figtree";
    cursor: pointer;
    margin: 0 0 32px;
    border: 2px solid #060028;
    border-radius: 100px;
    transition: 0.3s;
}
.additions__item-link:hover,
.additions__item-link:visited:hover {
    color: #fff;
    background: #5273EF;
    border: 2px solid #5273EF;
    transition: 0.3s;
}
.additions__item-info {
    font: 400 16px/24px "Figtree";
    color: #060028;
}
.additions__item-info a {
    font-width: 600;
    color: #5273EF;
    text-decoration: underline;
}
.additions__item:nth-child(1) .additions__item-img {
    max-width: 232px;
    width: 100%;
    height: auto;
}
.additions__item:nth-child(2) .additions__item-img {
    max-width: 173px;
    width: 100%;
    height: auto;
}
.additions .address {
    display: flex;
    align-items: center;
    padding: 24px 40px;
    border: 3px solid #060028;
    border-radius: 16px;
    background: #fff;
    position: relative;
    max-width: 600px;
    margin: 116px auto 0;
}
.additions .address-bg {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    background: #5273EF;
    z-index: -1;
    transition: all 0.35s linear;
}
.additions .address__icon {
    width: 107px;
    margin-right: 32px;
}
.additions .address__info {
    color: #060028;
}
.additions .address__info-title {
    font: 600 32px/40px "Jokker";
    margin-bottom: 8px;
}
.additions .address__info-text {
    font: 400 20px/28px "Figtree";
}
.thx {
    max-width: 440px;
    width: 100%;
    padding: 0 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    margin: 0 auto;
    transition: all 0.25s linear;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
}
.thx.show {
    padding: 40px;
    opacity: 1;
    max-height: 1000px;
    transition: all 0.3s ease-in-out;
}
.thx img {
    margin: 0 auto 16px;
    display: block;
}
#thx-1, #thx-error {
    display: none;
}
.thx #thx-1 img {
    width: 87px;
}
.thx #thx-error img {
    width: 74px;
}
.thx h3 {
    font: 600 32px/40px "Jokker";
    color: #fff;
    text-align: center;
}
.thx #thx-1 h3 {
    margin: 0 0 16px;
}
.thx #thx-error h3 {
    margin: 0 0 8px;
}
.thx p.description {
    font: 400 16px/24px "Figtree";
    color: #fff;
    text-align: center;
    margin: 0;
}

@media(max-width: 1439px){
    .icon-right {
        right: 0;
    }
}

@media(max-width: 1199px){
    .icon-left,
    .icon-right {
        display: none;
    }
    .main {
        background: bottom / cover no-repeat url("../img/contact/contact-bg-tablet.png"), #fff;
    }
    .main__inner {
        padding: 48px 0 80px;
    }
    .additions__inner {
        padding: 80px 0 32px;
    }
    .additions__box {
        flex-direction: column;
    }
    .additions__item {
        max-width: 610px;
        margin: 0 auto 24px;
    }
    .additions__item:last-child {
        margin: 0 auto;
    }
    .additions .address {
        margin: 76px auto 0;
    }
}

@media(max-width: 639px) {
    .main {
        background: #060028;
    }
    .main .container {
        padding: 0;
    }
    .main__inner {
        padding: 48px 0 0;
    }
    .main__info {
        margin-bottom: 40px;
        padding: 0 15px;
    }
    .main__subtitle {
        font: 700 24px/26px "Epom";
    }
    .main__subtitle::before,
    .main__subtitle::after {
        width: 101px;
        height: 41px;
    }
    h1.main__title {
        font: 600 40px/50px "Jokker";
    }
    p.main__desc {
        font: 400 16px/24px "Figtree";
    }
    .main__form {
        padding: 32px 20px 48px;
        border-radius: 0;
    }
    .main__form label .radio {
        justify-content: flex-start;
    }
    .main__form label .radio li {
        margin: 0 10px 16px 0;
    }
    .main__form label span.form-title {
        margin: 0 0 16px;
    }
    .main__form label textarea {
        height: 92px;
    }
    .thx {
        border-radius: 0;
    }
    .thx.show {
        padding: 40px 20px;
    }
    .thx p.description {
        max-width: 200px;
        margin: 0 auto;
    }
    .additions__inner {
        padding: 48px 0;
    }
    .additions__item {
        padding: 24px 24px 32px;
        text-align: center;
        border-radius: 12px;
    }
    .additions__item-title {
        font: 600 22px/28px "Jokker";
        margin: 0 0 8px;
    }
    .additions__item-text {
        font: 400 16px/24px "Figtree";
        margin: 0 0 16px;
    }
    .additions__item-bottom {
        display: block;
    }
    .additions__item:nth-child(1) .additions__item-bottom .block,
    .additions__item:nth-child(2) .additions__item-bottom .block {
        max-width: 100%;
    }
    .additions__item-link {
        display: block;
        max-width: 100%;
        margin: 0 0 24px;
    }
    .additions__item-info {
        font: 400 14px/20px "Figtree";
        margin: 0 0 16px;
    }
    .additions__item-info a {
        display: block;
        font: 600 16px/24px "Figtree";
        margin-top: 2px;
    }
    .additions__item:nth-child(1) .additions__item-img {
        max-width: 196px;
    }
    .additions__item:nth-child(2) .additions__item-img {
        max-width: 141px;
    }
    .additions .address {
        flex-direction: column;
        text-align: center;
        padding: 24px;
    }
    .additions .address__icon {
        width: 70px;
        margin: 0 auto 16px;
    }
    .additions .address__info-title {
        font: 600 22px/28px "Jokker";
    }
    .additions .address__info-text {
        font: 400 16px/24px "Figtree";
    }
}