.block-title {
    color: var(--main-color-black, #3E3E3E);
    font-family: Open Sans;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 3rem;

}
.content-block > .container {
    padding: 0 5rem 2.5rem;
}

.path {
    padding: 2.56rem 0 0;
    color: var(--secondary-color-grey, #D9D9D9);
    /* Subtitle/Sub 3-14px */
    font-family: Open Sans;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);
}

.modal > .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 44.625rem;
    border-radius: 0.5rem;
    padding: 3rem;
    position: relative;
}

.modal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}

.modal .close:hover,
.modal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal .modal-content > .modal-title {
    margin-bottom: 2.1rem;
}

.modal .modal-content > .modal-title > .bold {
    color: var(--Text-black, #3E3E3E);
    /* Headlines/H3-24px */
    font-family: Open Sans;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.modal .modal-content > .modal-title > .text {
    color: #737373;

    /* Subtitle/Sub 3-14px */
    font-family: Open Sans;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal .platform-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal .platform-links > .link {
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    background: var(--secondary-color-light-grey, #F6F6F6);
    height: 4.75rem;
    padding: 0.75rem;
    gap: 1.5rem;
}

table tr:nth-child(odd) {
    background-color: #f6f6f6;
}
.side-table {
    padding: 0 5rem 3rem;
    background: white;
}

.table {
    width: 75%;
}

.side-table .title {
    color: rgb(62, 62, 62);
    font-size: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 2.06rem;
    letter-spacing: 0;
    text-align: left;
    font-family: "Open Sans";
}

table .name {
    color: rgb(108, 108, 108);
    font-weight: 400;
    text-align: left;
    padding: 0.5rem;
    font-family: "Open Sans";
}

table .value {
    color: rgb(62, 62, 62);
    font-weight: 400;
    text-align: left;
    padding: 0.5rem;
    font-family: "Open Sans";
}

.modal .link > .image {
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
}

.modal .link > .image > img {
    width: 80%;
    height: auto;
}

.modal .link > .text > .title {
    color: var(--Text-black, #3E3E3E);
    /* Headlines/H3-24px */
    font-family: Open Sans;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.modal .link > .text {
    color: var(--Text-black, #3E3E3E);
    /* Subtitle/Sub 3-14px */
    font-family: Open Sans;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    flex: 5;
}

.modal .link > .detail-link {
    margin: 1rem;
}

.modal-mobile {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    border-top: 1px solid #ccc;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(3px);

}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Применяем анимацию к модальному окну */
.modal-mobile-content {
    animation: slideInFromBottom 0.2s ease-out;
}

.modal-mobile-content {
    display: flex;
    width: 100%;
    flex-direction: column;
    background-color: white;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    position: fixed;
    bottom: 0;
}

.modal-mobile > .modal-mobile-content > .modal-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 1.25rem 2rem;
}

.modal-mobile > .modal-mobile-content > .modal-title > .text > .text {
    color: #737373;
    font-family: Work Sans;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.015rem;
}

.modal-mobile-content > .modal-title > .text > .bold {
    color: #9A9A9A;
    font-family: Open Sans;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.close-mobile-modal {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

.close-mobile-modal > svg {
    width: 100%;
    height: 100%;
}

.modal-mobile > .modal-mobile-content > .modal-body {
    display: flex;
    flex-direction: column;
    width: 100% -1rem;
    gap: 1rem;
    margin: 1rem 0.5rem 1.5rem;
}

.modal-mobile > .modal-mobile-content > .modal-body > .link {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    border-radius: 0.5rem;
    background: var(--secondary-color-light-grey, #F6F6F6);
    padding: 0.75rem;
    align-items: center;
}

.modal-mobile-content > .modal-body > .link > .image {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.modal-mobile-content > .modal-body > .link > .image > img {
    width: 4rem;
    height: auto;
}

.modal-mobile-content > .modal-body > .link > .text {
    color: var(--Text-black, #3E3E3E);
    font-family: Open Sans;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal-mobile-content > .modal-body > .link > .text > .title {
    color: var(--Text-black, #3E3E3E);
    font-family: Open Sans;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


/* Add this class to your body when the modal is open */
.body-modal-open {
    overflow: hidden;
}

.product {
    display: flex;
    gap: 6.75rem;
    position: relative;
}

.product-view {
    position: sticky;
    z-index: 1;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    flex-wrap: wrap;
    gap: 1.2rem;
    height: max-content;
    justify-content: space-between;
}

.product-view > .main-image {
    max-width: 100%;
    height: auto;
    min-height: 24rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 3;
    padding: 5rem;
}

.product-view > .main-image img {
    max-width: 100%;
    max-height: 25rem;
    width: auto;
    height: auto;
}

.product-view > .thumbnail-container {
    display: flex;
    width: 100%;
    height: auto;
    gap: 1.2rem;
    flex: 1;
}

.product-view .hidden-thumbnail {
    display: none;
}

.product-view .thumbnail {
    flex: 1;
    min-height: 10.25rem;
    width: 12.3125rem;
    background: var(--secondary-color-light-grey, #F6F6F6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-view .thumbnail img {
    width: auto;
    height: auto;
    max-width: 9, 85rem;
    max-height: 8.25rem;
}

.product-info {
    width: auto;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
}

.product-info > .name {
    color: var(--main-color-light-green, #7BAF21);
    /* Headlines/H1-36px */
    font-family: Open Sans;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-info > .description {
    color: var(--secondary-color-dark-grey, #6C6C6C);
    /* Subtitle/Sub 1-20px */
    font-family: Open Sans;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 1rem;
}

.product-info > .buy {
    border-radius: 0.5rem;
    background: var(--main-color-light-green, #7BAF21);
    padding: 1.5rem;
    margin: 1.5rem 0 2.25rem;
}

.product-info > .buy:hover {
    background: #6C991E;
    box-shadow: 0px 0px 8px 4px rgba(204, 204, 204, 0.10);
}

.product-info > .buy:active {
    background: var(--main-color-dark-green, #285F38);
}


.product-info > .buy > div {
    color: #FFF;

    text-align: center;
    /* Headlines/H3-24px */
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.product-info > .main-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-info > .main-info > .card {
    border-radius: 0.5rem;
    border: 1px solid var(--secondary-color-grey, #D9D9D9);
    display: flex;
    padding: 1rem 1.5rem;
    align-items: center;
    gap: 1.5rem;
}

.product-info > .main-info > .card > .text {
    color: var(--main-color-light-green, #7BAF21);
    /* Subtitle/Sub 2-16px */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.product-info > .main-info > .card > .text > span {
    font-weight: 700;
    color: var(--secondary-color-dark-grey, #6C6C6C);
    display: block;
}

.product-info > .additional-info {
    border-radius: 0.5rem;
    background: var(--secondary-color-light-grey, #F6F6F6);
    padding: 1.5rem;
    margin-top: 0.5rem;
}

.product-info > .additional-info > .title {
    color: var(--secondary-color-dark-grey, #6C6C6C);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-left: 4rem;
    margin-bottom: 1.44rem;
}

.product-info > .additional-info > .list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
}

.product-info > .additional-info > .list > .element {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.product-info > .additional-info > .list > .element > .text {
    color: #000;
    /* Subtitle/Sub 2-16px */
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.banner-block {
    border-radius: 0.5rem;
    background: var(--secondary-color-light-grey, #F6F6F6);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}

.banner-block img {
    width: 100%;
    height: auto;
}

.green {
    background: var(--main-color-light-green, #7BAF21);
    color: #fff;
}

.dark {
    background: var(--main-color-black, #3E3E3E);
    color: #fff;
}

.light {
    color: var(--main-color-black, #3E3E3E);
    background-color: #FFF;
    border: 1px solid var(--secondary-color-grey, #D9D9D9);
}

.just-block {
    display: flex;
    width: 100% -padding;
    padding: 2.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    border-radius: 0.5rem;
    line-height: normal;
    font-style: normal;
}

.just-block > .title {
    font-weight: 700;
    font-size: 1.25rem;
}

.just-block > .text {
    font-size: 1rem;
    font-weight: 400;
}

.block-w-banners {
    display: flex;
    width: 100% -padding;
    padding: 2.25rem;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: 0.5rem;
    line-height: normal;
    font-style: normal;
    border-radius: 0.5rem;
    background: var(--secondary-color-light-grey, #F6F6F6);
    color: var(--main-color-black, #3E3E3E);
}

.block-w-banners .title {
    align-self: flex-start;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.block-w-banners .feature {
    display: flex;
    max-width: 30.125rem;
    width: 100%;
    padding: 1rem;
    align-items: center;
    gap: 1.5rem;
    border-radius: 0.5rem;
    background: var(--secondary-color-grey, #D9D9D9);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--main-color-black, #3E3E3E);

}

.block-w-banners img {
    width: 100%;
    height: auto;
}

.block-title .text {
    align-self: flex-start;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
}

.block-w-ico {
    display: flex;
    width: 100% -padding;
    padding: 2.25rem;
    align-items: center;
    gap: 1.5rem;
    border-radius: 0.5rem;
    /* background: var(--secondary-color-light-grey, #F6F6F6); */
    /* color: var(--secondary-color-dark-grey, #6C6C6C); */
    font-style: normal;
    line-height: normal;
}

.block-w-ico > .info {
    display: flex;
    gap: 1.25rem;
    flex-direction: column;
}

.block-w-ico .title {
    font-size: 1.25rem;
    font-weight: 700;
}

.block-w-ico .text {
    font-size: 1rem;
    font-weight: 400;
}

.banner_spectra {
    height: 52rem;
    position: relative;
}

.banner_spectra .mobile-block {
    display: none;
}

.banner_spectra > .block {
    width: 34.375rem;
    height: 9.4375rem;
    background: var(--main-color-light-green, #7BAF21);
    color: var(--main-color-white, #FFF);
    font-style: normal;
    line-height: normal;
    padding: 4rem 0 0 2.25rem;
    position: absolute;
    top: 0;
    right: 0;
}

.banner_spectra > .block > .title {
    font-size: 1.25rem;
    font-weight: 700;
}

.banner_spectra > .block > .text {
    font-size: 1rem;
    font-weight: 400;
}

.banner_spectra > .block-dark {
    position: absolute;
    top: 34.44rem;
    right: 0rem;
    background: var(--main-color-black, #3E3E3E);
    width: 32.375rem;
    height: auto;
    color: var(--secondary-color-grey, #D9D9D9);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 2.25rem;
}

.banner_spectra > .block-dark > .title {
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.banner_spectra > .block-dark {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.blank {
    height: 22rem;
}

.after-banner {
    display: flex;
    flex-direction: row;
}

.after-banner > .row {
    flex: 1;
}

.after-banner > .row-w-blocks {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 6rem;
    width: 100%;
}

.banner_spectra_features {
    height: 36.4975rem;
    max-width: 100%;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.banner_spectra_features > .left {
    height: 100%;
    flex: 1;
    color: var(--secondary-color-light-grey, #F6F6F6);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1rem;
    padding-top: 3rem;
}

.banner_spectra_features > .left > .title-mobile {
    display: none;
    color: var(--main-color-white, #FFF);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.banner_spectra_features > .left > .text {
    width: 100%;
    max-width: 28rem;
}

.banner_spectra_features > .right {
    flex: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 2.44rem;
    width: 100%;
    color: var(--main-color-white, #FFF);
    font-style: normal;
    line-height: normal;
}

.banner_spectra_features > .right > .title {
    font-size: 1.5rem;
    font-weight: 700;
}

.banner_spectra_features > .right > .text {
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
}

.banner_spectra_features > .right > .features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 28rem;
}

.banner_spectra_features > .right > .features > .feature {
    display: flex;
    width: auto;

    padding: 1rem;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    background: var(--main-color-light-green, #7BAF21);
}

.banner_spectra_features > .right > .features > .feature > .text {
    font-size: 1.25rem;
    font-weight: 700;
}

.banner_spectra_internet > .content {
    border-radius: 0.5rem;
    height: 49.5rem;
    width: 100%;
    margin-top: 2rem;
    position: relative;
}

.banner_spectra_internet > .content > .first-block {
    width: 31.625rem;
    height: 40.9375rem;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #285F38 41.46%, rgba(62, 62, 62, 0.00) 127.71%);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: var(--secondary-color-grey, #D9D9D9);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 2.25rem;
    position: absolute;
    right: 0;
    top: 0;
}

.banner_spectra_internet > .content > .first-block > .title {
    font-size: 1.25rem;
    font-weight: 700;
}

.banner_spectra_internet > .content > .first-block > .image {
    width: 100%;
    height: auto;
}

.banner_spectra_internet > .content > .first-block > .image > img {
    width: 100%;
    height: auto;
}

.banner_spectra_internet > .content > .second-block {
    width: 31.625rem;
    height: 11rem;
    padding: 2.25rem;
    border-radius: 0rem 0rem 0.5rem 0.5rem;
    background: var(--main-color-dark-green, #285F38);
    color: var(--secondary-color-light-grey, #F6F6F6);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: absolute;
    top: 43.19rem;
    right: 0;
}

.banner_spectra_internet > .blank-2 {
    width: 100%;
    height: 10rem;
}

.mesh_card {
    width: 100%;
    height: fit-content;
    color: white;
    font-style: normal;
    line-height: normal;
    position: relative;
}

.mesh_card > .content {
    width: 100%;
    max-width: 34.375rem;
    padding: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 4.5rem;
}

.mesh_card > .content > .title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.mesh_card > .content > .text {
    font-size: 1rem;
    font-weight: 400;
}

.mesh_card > .content > .cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.mesh_card > .content > .cards > .card {
    display: flex;
    width: 34.375rem;
    color: var(--main-color-black, #3E3E3E);
    padding: 1rem;
    align-items: center;
    gap: 1.5rem;
    border-radius: 0.5rem;
    background: var(--secondary-color-light-grey, #F6F6F6);
}

.mesh_card > .footer-text {
    bottom: 2.5rem;
    right: 10.5rem;
    position: absolute;
    width: 27.25rem;
    color: var(--main-color-white, #FFF);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.add-product {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    border-radius: 0.5rem;
    background: var(--secondary-color-light-grey, #F6F6F6);
}

.add-product > img {
    width: 100%;
    height: auto;
}

.add-product > img {
    width: 100%;
    height: auto;
}

.add-product > .content {
    padding: 2.25rem;
    color: var(--secondary-color-dark-grey, #6C6C6C);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.add-product > .content > .title {
    font-weight: 700;
    font-size: 1.25rem;

}

.icon-titled-block {
    margin-top: 3rem;
    position: relative;
    display: inline-flex;
    height: auto;
    align-items: center;
    flex-shrink: 0;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 0.5rem;
    border: 1px solid #D9D9D9;
    width: auto;
}

.icon-titled-block > .icon {
    position: absolute;
    top: -1.63rem;
    left: 2.37rem;
    background-color: #7BAF21;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-titled-block > .text {
    width: auto;
    padding: 3.55rem 4.625rem 2.25rem 2.25rem;
}

.gray {
    background: var(--secondary-color-light-grey, #F6F6F6);
    color: var(--main-color-black, #3E3E3E);
}

.mobile-app-block {
    width: 100%;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid #D9D9D9;
}

.mobile-app-block .phone-image img {
    width: auto;
    height: 16.125rem;
}

.mobile-app-block > .phone-image {
    width: 80%;
    height: auto;
    padding-left: 3.63rem;
    display: flex;

}

.mobile-app-block > .content {
    border-radius: 0.5rem;
    background: var(--main-color-black, #3E3E3E);
    display: flex;
    gap: 1.5rem;
    align-items: center;
    color: var(--secondary-color-light-grey, #F6F6F6);
    /* Headlines/H4-20px */
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 1.5rem;
}

.mobile-app-block > .content > .text {
    max-width: 20rem;
}

.mobile-app-block > .footer-text {
    color: var(--secondary-color-dark-grey, #6C6C6C);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 2.15rem;
    display: flex;
    justify-content: center;
    align-items: center;

}

.mobile-app-block > .footer-text > .text {
    width: 80%;
}

.mesh-system-banner {
    display: flex;
    gap: 4rem;
    justify-content: center;
    padding-top: 2.5rem;
    width: 100%;
}

.mesh-system-banner > .image {
    flex: 1;
}

.mesh-system-banner > .image > img {
    width: 100%;
    height: auto;
}

.mesh-system-banner > .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mesh-system-banner > .content > .title {
    color: var(--main-color-black, #3E3E3E);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 25.25rem;
}

.mesh-system-banner > .content > .text {
    color: var(--secondary-color-dark-grey, #6C6C6C);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 27.25rem;
}

.moblie-title {
    display: none;
}

@media only screen and (max-width: 1440px) {
    .content-block > .container {
        padding: 0;
        margin: 0 1rem 0;
        width: calc(100% - 2rem);
    }

    .block-title {
        font-size: 1.5rem;
        padding-top: 2rem;
        width: calc(100%);
    }

    .product {
        display: flex;
        gap: 1rem;
        position: relative;
        flex: 50% 50%;
    }

    .product-view {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .product-info {
        flex: 1;
        width: 100%;
    }

    .banner_spectra_features {
        margin-top: 2rem;
    }

    .side-table {
        padding: 1rem;
    }
    .content-HT.arman_1605 {
        width: 97%;
    }
}

@media only screen and (max-width: 1300px) {
    .mesh_card > .footer-text {
        bottom: 0;
        right: 0;
        position: relative;
        width: auto;
        max-width: 33rem;
        padding: 1.5rem;
        padding-left: 4.5rem;
    }
    h1.design-arman-1 {
        top: 50px;
        left: 340px;
    }
}

@media only screen and (max-width: 1024px) {
    .product {
        display: flex;
        flex-direction: column;
    }
    h1.design-arman-1 {
        font-size: 60px;
        line-height: 60px;
        top: 180px;
    }
    .moblie-title {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        font-style: normal;
        line-height: normal;
        padding-top: 2rem;
    }

    .moblie-title > .name {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--main-color-black, #3E3E3E);
    }

    .moblie-title > .description {
        font-weight: 400;
        font-size: 1.25rem;
        color: var(--secondary-color-dark-grey, #6C6C6C);
    }

    .product-view {
        position: relative;
        width: 100%;
        height: auto;
    }

    .product-view .thumbnail {
        border-radius: 0.5rem;
    }

    .product-view > .main-image {
        width: 100% -10rem;
        height: 100% -10rem;

    }

    .product-view > .main-image img {
        max-width: 100%;
        max-height: 25rem;
        width: auto;
        height: auto;
    }

    .product-view .thumbnail {
        flex: 1;
        height: auto;
        background: var(--secondary-color-light-grey, #F6F6F6);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 3rem 0;
    }

    .table {
        width: 90%;
    }

    .product-info > .name, .product-info > .description {
        display: none;
    }

    .banner_spectra_features {
        flex-direction: column;
        height: fit-content;
        padding: 2.5rem;
        background-size: cover !important;
    }

    .banner_spectra_features > .left {
        align-items: baseline;
        width: 100%;
        padding-top: 0;
    }

    .banner_spectra_features > .left > .title-mobile {
        display: block;
    }

    .banner_spectra_features > .right {
        width: 100%;
    }

    .banner_spectra_features > .right > .title {
        display: none;
    }

    .banner_spectra_internet > .content {
        background: none !important;
        height: fit-content;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2.25rem;
    }

    .banner_spectra_internet > .blank-2 {
        display: none;
    }

    .banner_spectra_internet > .content > .first-block {
        position: relative;
        width: 100%;
        height: fit-content;
        padding: 0;
        border-radius: 0.5rem;
        background: linear-gradient(180deg, #285F38 41.46%, rgba(62, 62, 62, 0.00) 127.71%) !important;
    }

    .banner_spectra_internet > .content > .first-block > .title {
        padding: 1.75rem 1.5rem 0;
    }

    .banner_spectra_internet > .content > .first-block > .text {
        padding: 0 1.5rem 0;
    }

    .banner_spectra_internet > .content > .first-block > .image {
        padding: 0 1.5rem 0;
        display: flex;
        width: auto;
        justify-content: center;
        align-items: center;
    }

    .banner_spectra_internet > .content > .first-block > .image > img {
        width: 60%;
        height: auto;
    }

    .banner_spectra_internet > .content > .second-block {
        position: relative;
        top: 0;
        width: 100%;
        padding: 0;
        border-radius: 0.5rem;
        height: fit-content;
    }

    .banner_spectra_internet .content > .second-block > .text {
        padding: 1.5rem;
    }

    .mesh-system-banner > .content {
        width: 50%;
    }
    .main-block.arman.reveal.active {
        margin: 0px;
    }
    .sub-blocks-container.arman.text-block {
        display: flex;
        flex-direction: column;
    }
}
@media only screen and (max-width: 800px) {
    .product-card.arman {
        display: flex;
        flex-direction: column;
    }
    .product-card-content.black.arman {
        top: 0px;
        position: relative;
    }
    .content-HT.arman_1605 {
        margin: 100px 0px;
    }
    .container.arman_1605::after {
        height: 4%;
    }
    p.extra-text-1 {
        width: 100%;
        top: 695px;
    }
    p.extra-text-2 {
        top: 755px;
        width: 100%;
    }
    p.extra-text-3 {
        top: 815px;
        width: 100%;
    }
    .title-code-block.arman {
        margin-top: 300px;
    }
}
@media only screen and (max-width: 768px) {
    .banner_spectra {
        width: 100%;
        position: relative;
        height: max-content;
        background: none !important;
        display: flex;
        gap: 1.5rem;
        flex-direction: column;
        padding: 1.5rem 0 1.5rem;
    }

    .product-view .main-image {
        padding: 0;
    }

    .product-view .thumbnail {
        padding: 0;
    }

    .banner_spectra > .block {
        width: 100%;
        background: var(--main-color-light-green, #7BAF21);
        color: var(--main-color-white, #FFF);
        /* Headlines/H4-20px */
        padding: 0;
        height: auto;
        position: relative;
        border-radius: 0.5rem;
    }

    .banner_spectra > .block > .title {
        font-size: 1.25rem;
        font-weight: 700;
        padding: 0 1.5rem;
        padding-top: 1.5rem;

    }

    .banner_spectra > .block > .text {
        font-size: 1rem;
        font-weight: 400;
        padding: 0 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1.5rem;
    }

    .banner_spectra > .block > .mobile-block {
        display: block !important;
        height: 25rem;
        width: 100%;
        border-radius: 0 0rem 0.5rem 0.5rem;
        background-size: cover !important;
        background-position: center !important;
    }

    .banner_spectra > .block-dark {
        position: relative;
        background: var(--main-color-black, #3E3E3E);
        width: 100%;
        height: fit-content;
        border-radius: 0.5rem;
        padding: 0;
        top: 0;
        padding-bottom: 1.5rem;
    }

    .banner_spectra > .block-dark > .title {
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 0 1.5rem;
        padding-top: 1.5rem;
    }

    .banner_spectra > .block-dark img {
        padding: 0 1.5rem;
        width: 80%;
        height: auto;
    }

    .banner_spectra > .block-dark .text {
        padding: 0 1.5rem;
    }

    .banner_spectra > .block-dark {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .blank {
        display: none;
    }

    .after-banner {
        padding: 0;
        width: 100%;
        max-width: fit-content;
    }

    .after-banner > .row {
        display: none;
    }

    .after-banner > .row-w-blocks {
        width: 100%;
        padding: 0;
        padding-left: 0;
        padding-bottom: 2rem;
    }

    .banner_spectra_features {
        padding: 1.5rem;
    }

    .banner_spectra_features > .left {
        padding-top: 0;
    }

    .banner_spectra_internet > .content > .first-block > .image > img {
        width: 100%;
        height: auto;
    }

    .block-w-ico {
        padding: 1rem 0 1rem;
        align-items: center;
        gap: 1rem;
        border-radius: 0.5rem;
        /* background: var(--secondary-color-light-grey, #F6F6F6); */
        /* color: var(--secondary-color-dark-grey, #6C6C6C); */
        font-style: normal;
        line-height: normal;
    }

    .block-w-ico > .info {
        gap: 1rem;
        margin-right: 1rem;
    }

    .block-w-ico > .img {
        margin-left: 1rem;
    }

    .mesh_card {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .mesh_card > .content {
        width: 100%;
        max-width: 34.375rem;
        padding: 0;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .mesh_card > .content > .title {
        font-size: 1.5rem;
        padding-top: 1rem;
    }

    .mesh_card > .content > .cards > .card {
        width: auto;
    }

    .mesh_card > .content > * {
        padding: 0 1.5rem 0;
    }

    .icon-titled-block {
        display: flex;
        justify-content: center;
        padding: 1.75rem;
    }

    .icon-titled-block > .text {
        width: auto;
        padding: 0;
    }

    .icon-titled-block > .icon {
        top: -3rem;
    }

    .mobile-app-block > .phone-image {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0;

    }

    .mobile-app-block > .content {
        gap: 1rem;
        font-size: 1rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        padding: 1rem;
    }

    .mesh-system-banner {
        gap: 3rem;
        flex-direction: column;
        justify-content: baseline;
        padding-top: 2.5rem;
        width: 100%;
        padding-bottom: 2rem;
    }

    .mesh-system-banner > .content {
        width: 100%;
    }

    .mesh-system-banner > .content > .title {
        width: 100%;
    }

    .mesh-system-banner > .content > .text {
        width: 100%;
    }

    .block-w-banners .feature {
        padding: 0.5rem;
    }
}
@media only screen and (max-width: 560px) {
    .cbtt-arman {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        padding: 30px 0 0 0;
    }
    .sub-block.arman.text-block:nth-child(4) .divider, .sub-block.arman.text-block:nth-child(5) .divider, .sub-block.arman.text-block:nth-child(6) .divider, .sub-block.arman.text-block:nth-child(7) .divider, .sub-block.arman.text-block:nth-child(8) .divider {
        height: 50%;
        border: none;
        border-left: 4px solid #7eb02e;
        margin: 0 20px 0 -10px;
    }
    .sub-block.arman.text-block {
        width: 90%;
        margin: 20px;
    }
    .sub-blocks-main.arman.text-block {
        width: 100%;
    }
    .sub-blocks-main.text-block p {
        width: 100%;
    }
    h1.design-arman-1 {
        left: 170px;
    }
    h2.design-arman-2 {
        top: 560px;
        left: 0;
    }
} 
@media only screen and (max-width: 480px) { 
    h1.design-arman-1 {
        text-indent: 0px;
        left: auto;
        top: 180px;
        font-size: 46px;
        line-height: 46px;
    }
    p.extra-text-2 {
        top: 795px;
        width: 100%;
    }
    p.extra-text-3 {
        top: 890px;
        width: 100%;
    }
}