@font-face {
    font-family: 'Tektur';
    src: local('Tektur Regular'), local('Tektur-Regular'),
    url('/assets/fonts/Tektur-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Tektur';
    src: local('Tektur Medium'), local('Tektur-Medium'),
    url('/assets/fonts/Tektur-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Tektur';
    src: local('Tektur SemiBold'), local('Tektur-SemiBold'),
    url('/assets/fonts/Tektur-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Tektur';
    src: local('Tektur Bold'), local('Tektur-Bold'),
    url('/assets/fonts/Tektur-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Tektur';
    src: local('Tektur ExtraBold'), local('Tektur-ExtraBold'),
    url('/assets/fonts/Tektur-ExtraBold.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

:root {
    --font-family: "Tektur", sans-serif;
    --primary: #65aef8;
    --0b2209: #091622;
    --0c1528: #0b1926;
    --131d31: #132231;
    --2d3b56: #2d4156;
    --7f9ba8: #7f94a8;
    --ecfbfe: #ecf5fe;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--0c1528);
    font-family: 'Tektur', sans-serif;
}

a {
    text-decoration: none;
}

[class*="__container"] {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}

.btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    padding: 9px 18px;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--0c1528);
    background: var(--primary);
    height: 48px;
    cursor: pointer;
    outline: none;
    border: none;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.btn svg path,
.btn svg circle {
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}

.header_nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    margin-left: auto;
}

.header_nav_item {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.header_nav_item svg path,
.header_nav_item svg circle {
    transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

header {
    position: relative;
}

.menu-triger, .menu-close {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 25px;
    height: 17px;
    position: relative;
    top: 15px;

}

.menu-triger span {
    width: 25px;
    height: 4px;
    background: var(--primary);
}

.menu-close {
    z-index: 100;
    position: absolute;
    right: 20px;
    top: 20px;
}

.menu-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 4px;
    background: var(--primary);
    transform-origin: center;
    transition: transform 0.3s ease;
}

.menu-close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-popup {
    display: none;
    background: #0b1926;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0;
    box-sizing: border-box;
    padding: 30px;
    z-index: 9999;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.menu-popup ul {
    margin: 0;
    padding: 0;
}

.menu-popup li {
    list-style: none;
    margin: 18px 0;
    padding: 0;
}

.body_pointer * {
    cursor: pointer;
}

.header_nav_item:hover .header_nav_item_name {
    color: var(--primary);
}

.header_nav_item:nth-child(1):hover svg path, .header_nav_item:nth-child(2):hover svg path {
    fill: var(--primary);
}

.header_nav_item:nth-child(3):hover svg circle, .header_nav_item:nth-child(3):hover svg path {
    fill: transparent;
    stroke: var(--primary);
}

.header_nav_item_name {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--7f9ba8);
    transition: color 0.3s ease-in-out;
}

.btn:hover {
    background: rgba(101, 174, 248, 0.1);
    color: var(--primary);
}

.btn:hover svg {
    transition: all 0.3s ease-in-out;
}

.btn:hover svg path {
    stroke: var(--primary);
}

.main {
    overflow: hidden;
    position: relative;
}

.main__container {
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    gap: 40px;
}
.main-left {
    max-width: 650px;
}

.main-right-title {
    margin-top: 20px;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.main-right-form {
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}
.option-input[type="radio"] {
    display: none; /* Hide the actual radio button */
}
.main-right-payment-systems {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.main-right-fetatures {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-right-fetatures-content {
    display: flex;
    gap: 20px;
}

.main-right-fetatures-content-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main-right-fetatures-content-left-block {
    cursor: pointer;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 160px;
    border: 2px solid var(--131d31);
}

.main-right-fetatures-content-left-block.active {
    background: var(--131d31);
}

.main-right-fetatures-content-left-block.active
.main-right-fetatures-content-left-block-title {
    color: var(--ecfbfe);
}
.main-right-fetatures-content-left-block.active
.main-right-fetatures-content-left-block-image {
    color: #65acf8;
}

.main-right-fetatures-content-left-block-image {
    color: #7f94a8;
}

.main-right-fetatures-content-right h2 {
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    margin-bottom: 16px;
}

.main-right-fetatures-content-right p {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.main-right-fetatures-content-left-block-title {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.main-right-fetatures-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

@media (max-width: 768px) {
    .header_nav {
        display: none;
    }

    .main__container {
        padding: 0px 15px;
        flex-direction: column;

        margin-bottom: 60px;
    }

    .menu-triger {
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 25px;
        height: 17px;
        cursor: pointer;
    }

    .menu-triger span {
        width: 25px;
        height: 4px;
        background: var(--primary);
    }

    .menu-popup {
        display: none;
    }

    .menu-popup.active {
        display: block;
    }

    .header__container {
        flex-direction: column;
        align-items: center;
    }

    .header_nav_item {
        display: block;
        width: 100%;
        text-align: center;
    }

    .header_nav_item_name {
        font-size: 14px;
    }

    .menu-close {
        display: flex;
    }

    .menu-close span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 25px;
        height: 4px;
        background: var(--primary);
        transform-origin: center;
        transition: transform 0.3s ease;
    }
}

@media (max-width: 480px) {
    .main_title {
        font-size: 80px;
    }
}


.advantages {
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 750px;
    padding: 90px 15px;
}

.advantage {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 480px;
}

.advantage:nth-child(2) {
    justify-content: flex-start;
}

.advantage:nth-child(3) {
    margin: 100px auto;
}

.advantage:nth-child(4) {
    margin-left: auto;
}

.advantage_title {
    display: flex;
    align-items: center;
    gap: 20px;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.advantage_content {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--7f9ba8);
}

.advantage:nth-child(2) .advantage_content {
    text-align: center;
}

.advantage:nth-child(3) .advantage_content {
    text-align: right;
}

.products {

    display: flex;
    gap: 40px;
    padding: 40px 100px;
}

.products_images {
    display: flex;
    gap: 20px;
}

.products_images_left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.products_image_left {
    border-radius: 6px;
    padding: 3px;
    max-height: 60px;
}

.products_image_left.active {
    border: 2px solid var(--primary);
    border-radius: 6px;
}

.products_image_left img {
    width: 50px;
    height: 50px;
    border-radius: 4px;
}

.products_buys {
    width: 100%;
    height: 100%;
    max-width: 750px;
}

.product_buy_header {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.product_buy_header img {
    width: 93px;
    height: 20px;
}

.product_buy_period {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 40px;
    cursor: pointer;
}

.product_buy_period_item {
    display: flex;
    align-items: center;
    border: 2px solid var(--131d31);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.3s ease-in-out;
}

.product_buy_period_item:hover {
    background: var(--131d31);
}

.product_buy_period_item-left svg {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.product_buy_period_item.active svg.inactive-svg {
    transform: scale(0.7);
    opacity: 0;
}

.product_buy_period_item.active svg.active-svg {
    transform: scale(1);
    opacity: 1;
}

.product_buy_period_item:not(.active) svg.active-svg {
    transform: scale(0.7);
    opacity: 0;
}

.product_buy_period_item:not(.active) svg.inactive-svg {
    transform: scale(1);
    opacity: 1;
}

.product_buy_period_item.active {
    background: var(--131d31);
}

.product_buy_period_item-left {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.products_image_main {
    max-width: 850px;
}

.products_image_main img {
    max-width: 850px;
    width: 100%;
    max-height: 450px;
    height: 100%;
}

.product_buy_period_item-price {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--primary);
    margin-left: auto;
}

.product_buy_btn {
    margin-top: 40px;
    justify-content: center;
}

.product_buy_provider {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    margin-top: 20px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.product_buy_system {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.product_buy_system_header {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.product_buy_system_requirements {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.product_buy_system_item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product_buy_system_item_name {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.product_buy_system_item_value {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.product_buy_description, .product_buy_option {
    margin-top: 40px;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
}

.product_buy_description_title, .product_buy_option_title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.product_buy_description_text {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.product_buy_option_content {
    display: flex;
    gap: 20px;
}

.product_buy_option_select {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product_buy_option_select_item {
    display: flex;
    gap: 15px;
    align-items: center;
    border: 2px solid var(--131d31);
    border-radius: 8px;
    padding: 16px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    width: 200px;
    cursor: pointer;
}

.product_buy_option_select_item.active {
    color: var(--ecfbfe);
    background: var(--131d31);
}

.product_buy_option_select_item.active svg path{
    fill: var(--primary);
}

.product_buy_option_desc {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product_buy_option_desc_title {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.product_buy_option_desc_text {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.product_buy_option_desc_text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer {
    width: 100%;
    background: var(--0b2209);
    margin-top: auto;
}

.footer__container {
    width: 100%;
    padding: 36px 15px;
}

.footer_content {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.footer_social_items, .footer_terms_items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
}

.footer_social_item {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    transition: color 0.3s ease-in-out;
}

.footer_social_item:hover {
    color: var(--primary);
}

.footer_terms_header {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--primary);
}

.footer_bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--0c1528);
    border-radius: 6px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    padding: 16px 10px;
    margin-top: 36px;
}

.order_content {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 40px 0;
}

.order_detail {
    width: 100%;
    max-width: 700px;
}

.order_detail_title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--ecfbfe);
    margin-bottom: 24px;
}

.order_detail_contact {
    padding: 24px;
    background: var(--0b2209);
    border-radius: 8px;
}

.order_detail_contact_title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
    margin-bottom: 12px;
}

.order_detail_contact_desc {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    margin-bottom: 24px;
}

.order_detail_contact_input {
    font-family: var(--font-family);
    border: 2px solid var(--131d31);
    border-radius: 6px;
    padding: 9px 18px;
    width: 100%;
    background: transparent;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    outline: none;
}

.payments_methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
    width: 100%;
}

.payments_method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px;
    border: 2px solid var(--131d31);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}

.payments_method.active {
    background: var(--131d31);
}

.payment_method_info {
    display: flex;
    align-items: center;
    gap: 16px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.payment_method_other {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--primary);
}



.order_push {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.order_image, .order_image img {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 280px;
}

.invoice_detail {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--0b2209);
    border-radius: 8px;
    padding: 24px;
}

.invoice_detail_title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.invoice_detail_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.invoice_detail_item_name {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    width: 100%;
}

.invoice_detail_item_value {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    width: 100%;
}

.invoice_pay {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--0b2209);
    border-radius: 8px;
    padding: 24px;
    margin-top: 24px;
}

.invoice_pay_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.invoice_pay_status {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: right;
    color: #f89b65;
    padding: 8px;
    background: rgba(248, 155, 101, 0.2);
    border-radius: 8px
}

.invoice_pay_desc {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.invoice_pay_detail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.invoice_pay_detail_item {
    display: flex;
    align-items: center;
    width: 100%;
}

.invoice_pay_detail_item_name {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
    width: 100%;
}

.invoice_pay_detail_item_val_wr {
    width: 100%;
}

.invoice_pay_detail_item_value {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: right;
    color: var(--primary);
    background: rgba(101, 174, 248, 0.2);
    border-radius: 8px;
    padding: 8px;
    text-wrap: nowrap;
    width: min-content;
}

.invoice_warning {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    background: rgba(248, 101, 101, 0.2);
    width: 100%;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: #f86565;
    border-radius: 8px;
}

.btn.custom {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--primary);
    background: rgba(101, 174, 248, 0.1);
    border-radius: 6px;
}

.panel_container {
    width: 100%;
    height: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

.panel_title {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--ecfbfe);
    margin-bottom: 24px;
}

.panel_detail {
    padding: 24px;
    border-radius: 8px;
    background: var(--0b2209);
}

.panel_detail_title {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
    margin-bottom: 24px;
}

.panel_detail_user {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.panel_detail_user_desc {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.panel_detail_user_mail {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.panel_table {
    width: 100%;
    margin-top: 24px;
}

.panel_table_head {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 8px;
    padding: 16px;
    background: var(--0c1528);
}

.panel_table_head_item {
    width: 100%;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.panel_table_body {
    width: 100%;
}

.panel_table_body_items {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 16px;
    gap: 12px;
}

@media (max-width: 768px) {
    .payments_methods {
        flex-direction: column !important;
    }

    .payments_method {
        width: 100% !important;
        margin-bottom: 10px;
    }
}


.panel_table_body_item {
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.panel_table_body_item:nth-child(1) {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.panel_table_head_item:nth-child(3), .panel_table_body_item:nth-child(3) {
    width: 50%;
}

.panel_table_head_item:nth-child(2), .panel_table_head_item:nth-child(4) {
    width: 120%;
}

.panel_table_body_item:nth-child(2), .panel_table_body_item:nth-child(4) {
    width: 130%;
}

/* START HERE */

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 36px;
    background: var(--0c1528);
    width: 100%;
    max-width: 430px;
    z-index: 9999;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

.modal.active {
    visibility: visible;
    opacity: 1;
}

.modal_content {
    position: relative;
    z-index: 99;
    margin-bottom: 36px;
}

.modal_content_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.05em;
    color: var(--ecfbfe);
    margin-bottom: 24px;
}

.modal_content_notify {
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--primary);
    border-radius: 8px;
    padding: 16px;
    background: rgba(101, 174, 248, 0.2);
    margin-bottom: 24px;
}

.modal_content_input_wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal_content_input_label {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.modal_content_input {
    font-family: var(--font-family);
    border: 2px solid var(--131d31);
    border-radius: 6px;
    padding: 9px 18px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
    background: transparent;
    outline: none;
}

.modal_content_error {
    display: flex;
    align-items: center;
    border-radius: 8px;
    padding: 16px;
    background: rgba(248, 101, 101, 0.2);
    gap: 10px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: #f86565;
    margin-top: 12px;
}

.modal_backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0;
    visibility: hidden;
    transition: .2s all ease;
}

.modal_backdrop.active {
    opacity: .7;
    visibility: visible;
}

.modal_decor {
    position: absolute;
    top: 5px;
    left: -18px;
}

.modal_content_inputs_wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.modal_content_input_wr {
    width: 100%;
    border: 2px solid var(--131d31);
    border-radius: 6px;
    padding: 9px 18px;
    outline: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--ecfbfe);
}

.modal_btn {
    position: relative;
    z-index: 99;
}

/* STA2 */



/* STA2 */

.modal_close {
    cursor: pointer;
    transform: rotate(45deg);
}

.products {
    background-color: #091622;
    padding-top: 100px;
    padding-bottom: 100px;
}

.products__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, 380px);
    grid-gap: 30px;
    justify-items: center;  /* Центрирует элементы внутри grid */
    position: relative;  /* Добавляет контекст для абсолютного позиционирования */
}

.products_image {
    position: relative;
    cursor: pointer;
    border-radius: 6px;
    transition: 0.3s;
    z-index: 1;
}

.products_image:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(101, 172, 248, 0.2);
}

.products-decor-1 {
    position: absolute;
    bottom: 357px;
    left: -230px;
}

.products-decor-2 {
    position: absolute;
    bottom: 357px;
    left: 280px;
    opacity: 0.2;
}


.main {
    overflow: hidden;
    position: relative;
}

.products-decor-3 {
    position: absolute;
    right: -530px;
    top: -240px;
}

.map {
    position: relative;
    background-color: #0b1926;
}

.map_content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.map_content-title {
    display: flex;
    align-items: center;
    gap: 20px;
}

.map_content-title-text {
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.map_content-subtext {
    max-width: 485px;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--7f9ba8);
}

#select {
    padding-top: 100px;
}

#pay {
    padding-top: 80px;
    padding-left: 386px;
}

#pay .map_content-subtext {
    text-align: center;
    max-width: 465px;
}

#recive {
    padding-top: 93px;
    padding-left: 733px;
    padding-bottom: 113px;
}

#recive .map_content-subtext {
    text-align: end;
    max-width: 447px;
}

.map-decor {
    position: absolute;
    left: -112px;
}

.map-dot-decor-1 {
    position: absolute;
    left: -380px;
    bottom: 0;
}

.map-dot-decor-2 {
    position: absolute;
    right: 260px;
    bottom: -30px;
    opacity: 0.2;
}

.map-dot-decor-3 {
    position: absolute;
    right: 0px;
    bottom: -30px;
    opacity: 0.2;
}


.main-left {
    max-width: 650px;
}

.splide__slide-img {
    border-radius: 6px;
}

#thumbnail-slider .splide__slide.is-active {
    border: 2px solid #65acf8;
}

#thumbnail-slider .splide__slide {
    border-radius: 10px;
}

#main-slider .splide__slide {
    border-radius: 6px;
}

#main-slider {
    max-width: 850px;
}

.splide__slide-img {
    width: 650px;
    height: 380px;
    height: auto;
    object-fit: cover;
}

#thumbnail-slider {
    margin-top: 20px;
}

.description {
    margin: 40px 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.description-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.description-subtitle {
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.system {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.system-title {
    font-family: var(--font-family);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}








/* STA */
.advantage_mob_head {
    display: none;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 65px;
}

.advantage_head_title {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ecfbfe);
}

.advantage_head_text {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.05em;
    color: var(--7f9ba8);
    text-align: center;
}

.panel_container_mob {
    display: none;
}

.panel_headmob {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ecfbfe);
}

.panel_items_mob {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 36px;
}

.panel_item_mob {
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 8px;
    padding: 24px;
    background: var(--0b2209);
}

.panel_item_other_mob {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.panel_item_date {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.panel_item_name {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--ecfbfe);
}

.panel_item_duration, .panel_item_key {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    color: var(--7f9ba8);
}

.copy_key {
    width: 100%;
    border-radius: 6px;
    padding: 9px 18px;
    background: rgba(101, 174, 248, 0.1);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--primary);
}

.menu {
    display: none;
}

#mainImage {
    position: relative;
}

.main_image {
    position: relative;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #65AEF8;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
}

.left-arrow {
    left: -15px;
}

.right-arrow {
    right: -15px;
}

.modal_close {
    cursor: pointer;
    transform: rotate(45deg);
}

@media screen and (max-width: 1280px) {
    .map {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    #select,
    #pay,
    #recive {
        padding: 0;
    }
    #pay .map_content-subtext {
        text-align: start;
        max-width: 485px;
    }
    #recive .map_content-subtext {
        text-align: start;
        max-width: 485px;
    }
    .map__container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
        padding: 0px 15px;
    }
    .map-dot-decor-2 {
        bottom: -120px;
    }
}

@media screen and (max-width: 480px) {
    .menu {
        display: block;
    }
    .advantage_mob_head {
        display: block;
    }
    .header_nav_item {
        display: none;
    }
    .main_title {
        font-size: 48px;
    }

    .main_content {
        justify-content: flex-start;
        gap: 15px;
        margin-top: 75px;
    }
    .advantages {
        background-image: url(/assets/images/background_mob.png);
    }
    .advantage {
        width: 100%;
        max-width: 350px;
        margin: 64px auto;
    }
    .advantage:nth-child(2) {
        margin: 0 auto;
    }
    .advantage_title {
        font-size: 24px;
    }
    .advantage:nth-child(2) .advantage_content, .advantage:nth-child(3) .advantage_content{
        text-align: left;
    }
    .products {
        flex-direction: column;
    }
    .products_images {
        flex-direction: column;
    }
    .products_image_main, .products_image_main img {
        width: 100%;
    }
    .products_images_left {
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }
    .products {
        padding: 64px 32px;
    }
    .product_buy_header {
        font-size: 24px;
    }
    .product_buy_option_content {
        flex-direction: column;
    }
    .product_buy_option_select {
        flex-direction: row;
    }
    .product_buy_option_select_item {
        justify-content: center;
    }
    .product_buy_option_select_item div {
        display: none;
    }
    .order_content {
        padding: 64px 32px;
        flex-direction: column;
    }
    .order_detail_title {
        font-size: 24px;
    }
    .order_detail_contact {
        background: transparent;
        padding: 0;
    }
    .payment_method_other {
        display: none;
    }
    .payments_methods {
        flex-direction: row;
        overflow: auto;
    }
    .payment_method_info {
        flex-direction: column;
        text-wrap: nowrap;
    }
    .invoice_detail_item {
        gap: 40px;
    }
    .invoice_pay_detail_item {
        flex-direction: column;
    }
    .btn.custom {
        padding: 18px;
        height: 100%;
    }
    .panel_container {
        display: none;
    }
    .panel_container_mob {
        display: block;
        padding: 64px 32px;
    }
}

.header_nav_item {
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.lang {
    display: flex;
    align-items: center;
}

.lang_input[type="radio"] {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
}

.lang_input[type="radio"]:checked + label {
    color: #ffffff;
    border: 2px solid #65acf8;
}

.language {
    background-color: #132231;
    border-radius: 6px;
    color: #7f94a8;
    padding: 7px 10px;
    cursor: pointer;
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0.01em;
    text-align: center;
    color: var(--7f9ba8);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* При наведении на метки */
.language:hover {
    background-color: #65acf8;
    color: white;
}

/* Медиазапросы для мобильной версии */
@media (max-width: 768px) {
    .language {
        font-size: 14px;
        padding: 6px 8px;
    }
}