:root {
    --pontano-font: 'Pontano Sans', sans-serif;
    --coda-font: 'Coda', sans-serif;
    --mukta-font: ' Mukta', sans-serif;


    --darkblue-text-color: #220660;
    --primary-text-color: #181818;
    --primary-background-color: #ffffff;
    --secondary-background-color: #EAF4FF;
    --accent-color: #627CFC;
    --pink-accent: #FF778A;
    --secondary-text-color: #ffffff;
    --grey-text-color: #bfbfbf;
    --timing-function: 300ms cubic-bezier(0.2, 0, 0.7, 1);




    --light-blue-text: #a8d5f8;

    --price-accent-color: #333d5e;
    --price-card-bcg: #e9f5ff;
    --tutorial-grey-color: #747474;
    --hero-btn-color: #2A4C71;

    --opacity-text-color: rgba(255, 255, 255, 0.6);
    --alert-background-color: #FFD0D0;
    --red-text-color: #FF0000;
    --success-background-color: #AEEEC0;
    --red-cards-color: #f26666;



}

.header__nav li a#current {

    color: #AB5667;

    font-family: arial;

}

body {
    font-family: var(--pontano-font);
    color: var(--primary-text-color);
    overflow-x: hidden;
}


ul {
    margin-top: 0;
    margin-bottom: 0;
    list-style-type: none;
    list-style: none;
    padding-left: 0;
}

li {
    display: block;
}

label {
    margin-bottom: 0;
}

a {
    color: var(--primary-text-color);
    transition: all var(--timing-function);
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

.bg-color {
    background-color: var(--primary-background-color);
}

.container {
    width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
}

@media screen and (max-width:1199px) {
    .container {
        width: 767px;
        padding: 0 15px;
        margin: 0 auto;
    }
}

@media screen and (max-width:767px) {
    .container {
        width: 375px;
        padding: 0 15px;
        margin: 0 auto;
    }
}

header.header {
    position: fixed;
    top: 0;
    display: flex;
    padding: 10px 0;
    z-index: 100;
    margin: 0 auto;
    width: 100%;
    background-color: var(--primary-background-color);
    border-bottom: 1px solid var(--accent-color);
}

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

.header__nav {
    display: flex;
    gap: 30px;
    padding-left: 0;
    align-items: center;
}


.header__link {
    font-family: var(--coda-font);
    font-size: 18px;
    padding: 45px 0;
    color: var(--primary-text-color);
    text-transform: uppercase;
    width: fit-content;
}

.header__link:hover {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);

}

.header__link--accent {
    font-family: var(--arvo-font);
    color: var(--accent-color);
}

.header__link--accent:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

.header__link.active {
    color: var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    background-color: transparent;
}

.hero {
    background-color: var(--secondary-background-color);
}

.hero-container {
    display: flex;
    align-items: center;
    padding: 60px 0 90px 0;
    gap: 40px;

}

.hero-bcg {
    position: relative;
    background-image: url(/templates/sollutium/images/hero-bcg.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
}

.hero-bcg--a {
    background-image: url(/templates/sollutium/images/hero-bcg--a.svg);
}


.hero-label {
    width: fit-content;
    font-family: var(--arvo-font);
    text-transform: uppercase;
    font-size: 14px;
    color: var(--accent-color);
    background-color: var(--primary-background-color);
    padding: 5px 15px;
    border-radius: 20px;

}

.hero-thumb {
    display: flex;
    flex-direction: column;

}


.hero-title {
    width: 80%;
    color: var(--darkblue-text-color);
    font-family: var(--mukta-font);
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 40px 0;

}



.hero--padding {
    margin-top: 94px
}

.hero-title--accent {
    color: var(--accent-color);
    font-weight: 700;
}

.hero-text {
    font-family: var(--pontano-font);
    font-size: 18px;
    margin-bottom: 40px;
}

.hero-btn {
    white-space: nowrap;
    display: inline-block;
    font-family: var(--coda-font);
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 35px;
    color: var(--pink-accent);
    border: 1px solid var(--pink-accent);
    border-radius: 25px;
    text-align: center;
    background-color: transparent;
}

.hero-buttons-box {
    display: flex;
    gap: 30px;
}

.hero-btn:hover {
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    background-color: transparent;
}

.hero-btn-pink {
    white-space: nowrap;
    display: inline-block;
    color: var(--secondary-text-color);
    text-transform: uppercase;
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    transition: all var(--timing-function);
}

.hero-btn-pink:hover {
    color: var(--accent-color);
    background-color: transparent;
    text-decoration: none;
    border: 1px solid var(--accent-color);
}

input[type=radio] {
    opacity: 0;
    position: absolute;
}

#serversContent,
#hostingContent,
#cloudContent {
    display: none;
}

.services-menu__label {
    font-family: var(--arvo-font);
    cursor: pointer;
    padding: 10px;
    transition: all var(--timing-function);
    white-space: nowrap;
}

.services-menu__label:hover {
    text-decoration: underline;

}

#servers_button:checked~#serversContent,
#hosting_button:checked~#hostingContent,
#cloud_button:checked~#cloudContent {
    display: flex;
    flex-flow: column;
}

#servers_button:checked~.services-menu label[for=servers_button],
#hosting_button:checked~.services-menu label[for=hosting_button],
#cloud_button:checked~.services-menu label[for=cloud_button] {
    color: var(--accent-color);
    text-decoration: underline;

}

.services-cards__desk-none {
    display: none;
}

.services-cards__mob-none {
    @media screen and (max-width:1199px) {
        display: none;
    }
}

.services-cards__list {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    flex-direction: column;
}

#services-box {
    margin-top: 180px;
}

/* .services-links__container {
    margin-bottom: 180px;
} */

/* .title-box {
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-background-color);
    padding: 20px 90px;
} */

.products-box--container {
    margin-bottom: 90px;
}



.section-title {
    color: #220660;
    text-align: center;
    font-family: var(--title-font);
    font-size: 32px;
    font-weight: 700;
    text-transform: capitalize;
}

.services-links__container .section-title {
    margin-bottom: 0px;
    white-space: nowrap;
}

.services-menu {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-top: 10px;
}

.price-billing__buttons {
    display: flex;
    gap: 30px;

}

.price-billing__button {
    background-color: transparent;
    border: none;
    color: var(--tutorial-grey-color);
    font-size: 18px;
    padding: 15px 0;
}



.price-billing__button.active {
    border: none;
    outline: none;
    color: var(--yellow-accent);
    text-decoration: underline;
    background-color: transparent;
}

.price-billing__button:hover {
    text-decoration: underline;
}

.price-billing__button:focus {
    outline: none;
}

.services-cards__key {
    width: 45%;
    position: relative;

}

.services-cards__key .services-cards__info {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding: 9px;
    margin-bottom: 0;
}

.services-cards__item--pos {
    width: 80%;
    position: absolute;
    right: 0;
}


.price-dedicated__list {
    position: relative;
    margin-top: 50px;
}



.services-cards__list>div:first-child {
    width: 60%;
}

.price-dedicated__list .services-cards__info {
    font-size: 14px;
    padding: 10px;
}

.price-dedicated__card .services-cards__info:last-child {
    width: 100%;
    margin: 0 auto;
    color: var(--accent-color);
    text-align: center;
    font-family: var(--arvo-font);
    font-weight: 700;

}

.price-dedicated__list .services-cards__info {
    text-align: center;
}

.services-cards__item {
    margin: 0;
    position: relative;
    padding: 30px;
    border-radius: 10px;
    background-color: var(--primary-background-color);
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.25));
}

.services-cards__item {
    display: flex;
    width: 100%;
}

.services-cards__item .services-cards__info:nth-child(n+6) {
    position: absolute;
    right: 0;
    right: -200px;
    width: 50%;
}

.services-cards__item .services-cards__info:nth-child(6) {
    top: 0;
}

.services-cards__item .services-cards__info:nth-child(7) {
    top: 36px;
}

.services-cards__item .services-cards__info:nth-child(8) {
    top: 72px;
}

.services-cards__item .services-cards__info:nth-child(9) {
    top: 108px;
}

.services-cards__item .services-cards__info:nth-child(10) {
    top: 144px;
}

.services-cards__item .services-cards__info:nth-child(11) {
    display: none;
}


.services-cards__item .services-cards__info:last-child {
    display: none;
}


.services-cards__item .services-cards__value:nth-child(n+6) {
    position: absolute;
    right: 0;
}

.services-cards__item .services-cards__value:nth-child(6) {
    top: 0;
}

.services-cards__item .services-cards__value:nth-child(7) {
    top: 36px;
}

.services-cards__item .services-cards__value:nth-child(8) {
    top: 72px;
}

.services-cards__item .services-cards__value:nth-child(9) {
    top: 108px;
}

.services-cards__item .services-cards__value:nth-child(10) {
    top: 144px;
}

.services-cards__item .services-cards__value:nth-child(11) {
    top: 30px;
    right: 0;
    padding: 9px 0;
    width: 220px;
    justify-content: start;
    display: flex;
}


/* .services-cards__item p.services-cards__value:last-child{
    top: 0;
    right: 0;
    padding: 9px 0;
    width: 190px;
    justify-content: start;
    display: flex;
  } */
.services-cards__item .more-services__title {
    display: flex;

}





.services-cards__value {
    margin: 0;
    padding: 9px;
    margin-bottom: 0;
    line-height: normal;
}

.services-cards__value {
    text-align: justify;
    width: 45%;
}

.services-cards__item .hero-btn {
    position: absolute;
    bottom: 30px;
    right: 50px;
    width: 200px;
    text-align: center;
}

.more-services__label {
    color: #03060D;
    position: relative;
    font-family: var(--coda-font);
    font-size: 18px;
    margin-bottom: 30px;
    text-align: center;
    text-transform: uppercase;
}

.advantages__section .more-services__label::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 95px;
    width: 65px;
    transform: translateX(-50%);
    border: 1px solid var(--pink-accent);
}

.more-services__section .section-title {
    margin-bottom: 35px;
}

.more-services__section .text {
    margin: 0 auto;
    text-align: center;
    width: 45%;
    margin-bottom: 30px;
}

.more-services__list {
    display: flex;
    flex-wrap: wrap;

}

.more-services__item {
    width: calc(100% / 3);
    padding: 20px 15px;
}

.more-services__item a:hover {
    color: var(--pink-accent);
}

.more-services__item .more-services__title {
    display: block;
    margin-bottom: 30px;
}

.more-services__item svg {
    display: block;
    margin-bottom: 20px;
}

.more-services__title {
    position: relative;
    white-space: nowrap;
    color: #505050;
    font-family: var(--mukta-font);
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 35px;
}

.more-services__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 45px;
    width: 65px;
    border: 1px solid var(--accent-color);
}

.advantages__section {
    background-color: var(--primary-background-color);
    padding: 60px 0;
    position: relative;
}



#advantages {
    position: absolute;
    top: -120px;
    left: 0;
}

.advantages__section .more-services__label::before {
    display: none;
}

.advantages__section .more-services__title {
    white-space: wrap;
    line-height: 42px
}

.advantages__section .more-services__title::before {
    top: inherit;
    bottom: -10px;
}

.contact-section {
    padding: 30px 0;
    background-color: var(--accent-color);
}

.contact-section p {
    color: var(--secondary-text-color);
}

.contact-us-section .section-title {
    text-align: initial;
}

.contact-us-section p {
    text-align: initial;
}

.contact-us-section {
    padding: 75px 120px 75px 75px;
    border-radius: 25px;
    border: 3px solid #627CFC;
    background: #FFF;
    display: flex;
    gap: 140px;

    position: absolute;
    top: -350px;
}




.contact-list {
    width: 80%;
    display: flex;
    gap: 90px;
    align-items: center;
    margin: 0 auto;
}

.contact-info {

    display: flex;
    flex-direction: column;
}

.contact-info h4 {
    color: var(--secondary-text-color);

    font-family: var(--mukta-font);
    font-size: 28px;

    font-weight: 800;

    text-transform: capitalize;
}

.contact-info a {
    color: var(--secondary-text-color);

    font-family: var(--pontano-font);
    font-size: 18px;
    font-style: normal;



}

.contact-item {
    width: 50%;
    color: var(--pink-accent);
    display: flex;
    gap: 25px;
    justify-content: center;
    align-items: center;
}

.contact-item use {
    fill: currentColor;
}

.contact-section a {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

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

.products__box h2 {
    margin-bottom: 30px;
}

.contact-link svg {
    color: var(--accent-color);
    margin-right: 10px;
}

.contact-link use {
    fill: currentColor;
}



.contact-page__map {
    width: 100%;
    background-color: var(--primary-background-color);
    padding: 60px;
    border-radius: 25px;
    border: 3px solid #C3CDFF;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.25));
    display: flex;
    gap: 15px;
}

.contacts-container {
    background-color: var(--secondary-background-color);
    padding: 20px 0;
}

.contacts-container .products__box {
    justify-content: space-around;
}

.contact-content {
    margin: 60px 0 180px;
}

.contact-content .section-title {
    text-align: inherit;
    margin-bottom: 30px;
}

.contact-content .section-title::after {
    display: none;
}

.form {
    border-radius: 25px;
    border: 3px solid #627CFC;
    background: #FFF;
    box-shadow: 0px 15px 25px 0px rgba(0, 0, 0, 0.25);
    padding: 30px;
    display: flex;
}

.form input,
.form textarea {
    padding-left: 10px;
}


.form input::placeholder,
.form textarea::placeholder {
    color: #4B4B4B;
    font-family: var(--pontano-font);
    font-size: 18px;
    font-style: normal;
    line-height: normal;
}

.form-box {
    width: 30%;
}

.form>* {
    width: 100%;
}

.form-box .section-title {
    font-size: 28px;
    text-align: start;
    margin-bottom: 30px;
}

.form-box .section-title::after {
    display: none;
}


.form-box .section-title--accent {
    color: var(--primary-text-color);

}

.form-container label {
    text-transform: uppercase;
}



.form input {
    border: none;
    background-color: #C3CDFF;
}

.form button {
    width: 220px;
}

.form textarea {
    border: none;
    background-color: #C3CDFF;
}


.section-title--white {
    color: var(--secondary-text-color);
}

.section-title--black {
    color: var(--primary-text-color);
}




.submit-error {
    display: none;
    font-family: var(--libre-font);
    text-transform: uppercase;
    padding: 5px 20px;
    color: var(--primary-text-color);
    background-color: var(--alert-background-color);
}

.submit-error p {
    margin-bottom: 0;
}

.submit-success {
    display: none;
    text-transform: uppercase;
    padding: 5px 20px;
    font-family: var(--libre-font);
    color: var(--primary-text-color);
    background-color: var(--success-background-color);
}

.submit-success p {
    margin-bottom: 0;
}

.form {
    width: 700px;
    display: flex;
    gap: 30px;
    flex-direction: column;
}

.form .section-title {
    font-size: 28px;
}


form {
    flex-flow: column;
    display: flex;
    gap: 10px;
}

.advantages-section {
    padding: 60px 0;
    background-color: var(--primary-background-color);
}

.advantages-section__container {
    display: flex;
    gap: 90px;
}

.advantages-section .section-title {
    margin-bottom: 60px;
}

.advantages-section__item {
    margin-bottom: 30px;
}

.advantages-section__item h3 {
    text-align: end;
}

.advantages-section__item p {
    text-align: end;
}

.benefits-section {
    background-color: var(--pink-accent);
    padding: 60px 0;
}

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

.benefits-item {
    display: flex;
    gap: 20px;
    align-items: center;

}

.benefits-item p {
    color: var(--secondary-text-color);
    font-family: var(--mukta-font);
    font-size: 28px;
    font-weight: 600;
    text-transform: capitalize;
}

.about-section__container {
    display: flex;
    gap: 120px;
}

.about-section__image {
    margin: 0 30px;
}

.accordion-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.accordion h5 {
    text-transform: capitalize;
}


/* .active,
.accordion:hover {
    background-color: transparent;
} */

.accordion:after.active {
    align-items: center;
}

.accordion:after {
    content: '\002B';
    font-size: 32px;
    display: flex;
    justify-content: center;
    padding-left: 2px;
    color: var(--primary-text-color);
    font-weight: bold;
}

.active.accordion:after {
    content: "\2212";
}



button.accordion {
    text-align: left;
    border: none;
    background-color: transparent;
    padding: 20px 0;
    width: 100%;
    justify-content: space-between;
    display: flex;
}

button.accordion:hover,
button.accordion:focus {
    background-color: transparent;
    outline: none;
}

.faq-accordeon__box .panel:not(:last-child) {
    border-bottom: 1px solid var(--tutorial-grey-color);
}

.faq-section {
    padding: 30px 0 100px 0;
    position: relative;
}

#contacts-box {
    position: absolute;
    bottom: 0;
}

.faq-section .more-services__title {
    margin-bottom: 0;
}

.faq-section .contact-us-section .section-title::after {
    display: none;
}

.faq-section .contact-us-section .section-title {
    margin-bottom: 30px;
}

.faq-section .contact-us-section a {
    margin-top: 30px;
}

.faq-section .section-title {
    margin-bottom: 60px;
}

button.active {
    background-color: transparent;
}

.price-billing__buttons button.active:after {
    content: "";
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 1px solid var(--primary-text-color);
}

footer.footer {
    background-color: #000000;
    padding: 60px 0;

}

section.form {
    position: absolute;
    top: -160px;
    left: 50%;
    transform: translateX(-50%);
}

.footer-content {
    display: flex;
    gap: 120px;
    align-items: end;
}

.footer-content div {
    width: 50%;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-content p {
    color: var(--secondary-background-color);
}

.footer-text {
    font-size: 18px;
}

.footer-thumb {
    display: flex;
    gap: 60px;
}

.footer-subtitle {
    font-size: 20px;
    font-family: var(--yantramanav-font);
    color: var(--accent-color);
    text-transform: uppercase;
    white-space: nowrap;
    margin-bottom: 20px;
}

.footer-list li {
    color: var(--secondary-text-color);
}

.footer-list a {
    display: block;
    color: var(--secondary-text-color);
    padding: 5px 0;
    text-transform: uppercase;
    font-size: 18px;
    font-family: var(--coda-font);
}

.footer-list a:hover {
    color: var(--accent-color);
}

.footer-link {
    color: var(--secondary-text-color);
    text-transform: none;

}

.footer-link span {
    text-transform: uppercase;
}

.list-style-alpha {
    list-style: auto;
    padding-left: 18px;
}

.list-style-alpha li {
    display: list-item;
}

.main-content {
    margin-bottom: 180px;
    width: 80%;
}

.bold-text {
    font-weight: 600;
}

.underline-text {
    text-decoration: underline;
}

.main-content h3 {
    font-family: var(--yantramanav-font);
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 60px auto 30px;
}

.docs--container {
    width: 100%;
    display: flex;
    gap: 60px;
    margin: 60px 0 0;
}

.nav-box {
    width: 20%;
}

.nav-link--active {
    opacity: 0.5;
}


.docs-title {
    background-color: var(--accent-color);
    padding: 20px 0;
}

.docs-title .section-title {
    text-align: inherit;
    color: var(--secondary-text-color);
    display: flex;
    align-items: center;
    padding: 20px 0 0;
}

main {
    background-color: #F1F4FF;
    position: relative;
}

ul.splide__pagination {
    width: 100vw;
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: -100px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: end;
    padding: 0;
}

ul.splide__pagination li:first-child::before {
    content: 'Dedicated Servers';
    position: absolute;
    right: 33%;
    top: 54%;
    transform: translate(50%, -50%);
    color: var(--secondary-text-color);
    text-align: center;
    white-space: nowrap;
    font-family: var(--mukta-font);
    font-size: 28px;
    text-transform: capitalize;
    z-index: 10;
}

ul.splide__pagination li:last-child::before {
    content: 'IaaS Solution';
    position: absolute;
    left: 33%;
    top: 54%;
    transform: translate(-50%, -50%);
    color: var(--secondary-text-color);
    text-align: center;
    white-space: nowrap;
    font-family: var(--mukta-font);
    font-size: 28px;
    text-transform: capitalize;
    z-index: 10;
}

ul.splide__pagination li:nth-child(2)::before {
    content: 'DDoS Protection';
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    color: var(--secondary-text-color);
    text-align: center;
    white-space: nowrap;
    font-family: var(--mukta-font);
    font-size: 28px;
    text-transform: capitalize;
    z-index: 10;
}

ul.splide__pagination li:first-child,
ul.splide__pagination li:last-child {
    width: 35%;
}

ul.splide__pagination li:first-child button.is-active {
    border-radius: 0 25px 0 0;
}

ul.splide__pagination li:last-child button.is-active {
    border-radius: 25px 0 0 0;
}


.splide__pagination li {
    width: 30%;
    /* background-color: var(--accent-color); */
    /* height: 106px; */
    position: relative;
}

.splide__pagination button {
    width: 100%;
    height: 106px;
    transform: none;
    background-color: var(--accent-color);
    border-radius: inherit;
    margin: 0;
    opacity: 1;
}

button.splide__pagination__page.is-active {
    background: var(--pink-accent);
    transform: none;
    z-index: 1;
    opacity: 1;
    outline: none;
}

button.splide__pagination__page.is-active {
    height: 130px;
    border-radius: 25px 25px 0 0;
}



.splide__pagination li:first-child>button.splide__pagination__page::before {
    content: "";
    display: block;
    position: absolute;
    right: 30%;
    top: -84%;
    transform: translate(50%, 50%);
    width: 70px;
    height: 75px;
    background-image: url(/templates/sollutium/images/sollutium-dedicated-icon.svg);
}

div.splide {
    position: revert;
}


li:first-child>button[aria-selected="true"].splide__pagination__page::after {
    content: "";
    display: block;
    position: absolute;
    right: 30%;
    top: -67%;
    transform: translate(50%, 50%);
    width: 70px;
    height: 75px;
    background-image: url(/templates/sollutium/images/sollutium-dedicated-hover.svg);
}

.splide__pagination li:nth-child(2)>button.splide__pagination__page::before {
    content: "";
    display: block;
    position: absolute;
    right: 50%;
    top: -132%;
    transform: translate(50%, 50%);
    width: 80px;
    height: 106px;
    background-image: url(/templates/sollutium/images/sollutium-ddos-icon.svg);
}

li:nth-child(2)>button[aria-selected="true"].splide__pagination__page::after {
    content: "";
    display: block;
    position: absolute;
    right: 50%;
    top: -107%;
    transform: translate(50%, 50%);
    width: 80px;
    height: 105px;
    background-image: url(/templates/sollutium/images/sollutium-ddos-active.svg);
}

.splide__pagination li:nth-child(3)>button.splide__pagination__page::before {
    content: "";
    display: block;
    position: absolute;
    right: 70%;
    top: -90%;
    transform: translate(50%, 50%);
    width: 75px;
    height: 72px;
    background-image: url(/templates/sollutium/images/sollutium-iptv-icon.svg);
}

li:nth-child(3)>button[aria-selected="true"].splide__pagination__page::after {
    content: "";
    display: block;
    position: absolute;
    right: 70%;
    top: -75%;
    transform: translate(50%, 50%);
    width: 75px;
    height: 75px;
    background-image: url(/templates/sollutium/images/sollutium-iptv-hover.svg);
}


li[role="presentation"]>button[aria-selected="true"].splide__pagination__page::before {
    display: none;
}

/* .splide {
    position: relative;
} */

.slider-sections {
    position: absolute;
    bottom: 0;
    left: 0;
}

.title-box {
    min-width: 90%;
    justify-content: space-between;
    display: flex;
    position: absolute;
    top: 40px;
    right: 50%;
    transform: translateX(50%);
    z-index: 10;
}

.title-box p {
    width: 30%;
    white-space: nowrap;
    color: var(--secondary-text-color);
    text-align: center;
    font-family: var(--mukta-font);
    font-size: 28px;
    text-transform: capitalize;
}

.title-box p:first-child,
.title-box p:last-child {
    width: 35%;
}


.splide__arrows {
    display: none;
}

.services-cards__item::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 280px;
    border-right: 1px solid var(--grey-text-color);
    height: 70%;
}

.services-links__container--pos {
    position: initial;
}

.services-cards__item .services-cards__value.more-services__title {
    position: absolute;
    bottom: initial;
    top: 30px;
    right: 0px;
    width: 200px;
    justify-content: start;
    display: flex;
    font-size: 20px;
}

.products-section {
    margin-bottom: 90px;
}

.products-card-section {
    margin-top: 160px;
}

.products-section h3.more-services__title {
    font-size: 20px;
}

.products-section .more-services__title::before {
    display: none;
}

.hero-product .label-container {
    width: 100vw;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    position: absolute;
}

.hero-product .label-item:first-child,
.hero-product .label-item:last-child {
    width: 40vw;
}

.hero-product .label-container li {
    width: 28vw;
}

.label-container p {
    color: var(--secondary-text-color);
    text-align: center;
    font-family: var(--mukta-font);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 0;

}

.label-container li {
    width: calc(100% / 3);
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color);
    gap: 20px;
}

.label-container li:nth-child(2) {
    background-color: var(--pink-accent);
}

h2.section-title {
    position: relative;
}

h2.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 55px;
    width: 65px;
    transform: translateX(-50%);
    border: 1px solid var(--pink-accent);
}

.hero-product .hero-container {
    padding: 60px 0 120px 0;
}

.product-adv .more-services__title {
    font-size: 22px;
}


.products-section .more-services__title {
    margin-bottom: 0px;
}



.products-secvices .more-services__title {
    margin: 60px 0 20px;
}

.products-secvices .more-services__title--mar {
    margin: 20px 0;
}

.products-secvices .services-cards__item .services-cards__value.more-services__title {
    right: 20px;
    top: -40px;
}

.products-secvices .services-cards__value {
    width: 50%;
}

.products-secvices .services-cards__item--pos {
    width: 75%;

}

.form-thumb {
    display: flex;

    justify-content: space-between;
}

.docs .section-title::after {
    display: none;
}

#menu {
    display: none;
}

.more-services__section--padding {
    padding: 60px 0 400px;
}

.faq-section--padding {
    padding: 300px 0 100px 0;
}

.hero-product .hero-container--padding {
    padding: 60px 0;
}

.copyright {
    width: 100%;
    text-align: center;
    padding: 10px 0;
}

.nav-list a {
    white-space: nowrap;
    padding: 0.5rem 1rem 0.5rem 0;
    text-transform: uppercase;
}

#vps-pos {
    position: relative;
}

#vps {
    position: absolute;
    top: -150px;
    left: 0;
}

#dedicated-pos {
    position: relative;
}

#dedicated {
    position: absolute;
    top: -150px;
    left: 0;
}

#shared-pos {
    position: relative;
}

#shared {
    position: absolute;
    top: -150px;
    left: 0;
}

#services--pos {
    position: relative;
}

#services-1 {
    position: absolute;
    top: -120px;
    left: 0;
}

#services-2 {
    position: absolute;
    top: 300px;
    left: 0;
}

.about-section--pos {
    position: relative;
}

#about-section {
    position: absolute;
    top: -120px;
    left: 0;
}

#about-us-section {
    position: absolute;
    top: -110px;
    left: 0;
}

.list-disk-inside {
    margin-bottom: 30px;
    padding-left: 19px;
}

.list-disk-inside li {
    display: list-item;
    list-style: outside;

}

.list-disk-inside p {
    display: inline;
}

.list-disk-bold {
    font-weight: 600;
}


.bold {
    display: block;
    margin-bottom: 30px;
}

.p-list-item {
    display: list-item;
    list-style: outside;
    margin-left: 19px;
}

table.privacy-table th {
    width: 50%;
    padding: 10px;
    border-right: 1px solid var(--accent-color);
    padding: 10px 10px 10px 20px;
}

table.privacy-table tr {
    border-left: 1px solid var(--accent-color);
    border-top: 1px solid var(--accent-color);
}

table.privacy-table td {
    border-left: 1px solid var(--accent-color);
    border-top: 1px solid var(--accent-color);
    border-right: 1px solid var(--accent-color);
    padding: 10px 10px 10px 20px;
}

table.privacy-table td:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--accent-color);
}

@media screen and (max-width:1199px) {
    .hero img {
        display: none;
    }

    .price-billing__buttons {
        margin-left: 20px
    }

    .services-cards__list {
        flex-wrap: wrap;
        row-gap: 60px;
    }

    .services-cards__list>* {
        width: 100%;
    }

    .price-dedicated__card a {
        margin-left: -55px;
    }

    .services-cards__list a {
        margin-left: -55px;
    }

    .services-menu {
        gap: 26px;
    }

    .more-services__item {
        padding: 30px 10px 30px;
    }

    .advantages-section__container {
        flex-direction: column-reverse;
    }

    .advantages-section img {
        margin: 0 0 10px auto;
    }

    .advantages-section__container {
        gap: 30px;
    }

    .advantages-section__item h3 {
        text-align: start;
    }

    .advantages-section__item p {
        text-align: start;
    }

    .about-section__container {
        flex-flow: column;
        gap: 30px;
    }

    .contact-illustration {
        width: 240px;
    }

    .docs--container {
        flex-direction: column;
    }

    .nav-box {
        width: 100%;
    }

    .nav-list {
        display: flex;
        align-items: center;

    }

    .nav-link {
        font-size: 14px;
        display: block;
        padding: 0.5rem;
    }

    .main-content {
        width: 100%;
    }

    .docs .section-title {

        width: 100%;
        text-align: center;
    }

    .docs--container {
        gap: 30px;
    }

    .contact-content>.container {

        gap: 30px;
    }

    .services-cards__item::after {
        display: none;
    }

    .header__nav {
        gap: 30px;
    }

    .services-cards__list>* {
        width: 100%;
    }



    .hero-container img {
        width: 250px;
    }

    .price-billing__buttons {
        margin-left: 60px;
    }

    .services-links__container .section-title {
        white-space: wrap;
        font-size: 22px;
    }

    .title-box {
        top: -70px;
    }

    .hero-title {
        width: 100%;
    }

    .advantages-section .more-services__item {
        width: 100%;
    }

    .faq-container div:first-child {
        display: none;
    }

    .form-thumb {
        flex-direction: column;
        gap: 30px;
    }

    .form {
        width: 100%;
    }

    .footer-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-content p {

        width: 100%;
    }

    .footer-thumb {
        justify-content: space-between;
    }


    .services-cards__item .services-cards__info:nth-child(n+6) {
        position: initial;
    }


    .services-cards__item .services-cards__value:nth-child(n+6) {
        position: initial;

    }

    .services-cards__item--pos {
        width: 100%;
        position: initial;

    }

    .services-cards__key {
        width: 100%;
        position: initial;
    }

    .services-cards__item {
        padding: 30px 30px 100px;
    }

    .services-cards__item .hero-btn {
        bottom: 30px;
        left: 90px;
    }



    .services-cards__item .services-cards__value.more-services__title {
        position: absolute;
        bottom: 30px;
        top: initial;
        right: initial;
        width: 190px;
        justify-content: start;
        display: flex;
    }



    .form-bcg {
        padding: 0 0 90px;
    }

    .advantages-section__container {
        margin-bottom: 0;
    }

    /* burger menu */
    .header__nav {
        display: none;
    }

    #burger-menu {
        cursor: pointer;
        height: 27px;
        width: 27px;
        padding: 10px;
        overflow: visible;
        position: relative;
        z-index: 2;
    }

    #burger-menu span,
    #burger-menu span:before,
    #burger-menu span:after {
        background: var(--accent-color);
        display: block;
        height: 4px;
        opacity: 1;
        position: absolute;
        transition: 0.3s ease-in-out;
    }

    #burger-menu span:before,
    #burger-menu span:after {
        content: "";
    }

    #burger-menu span {
        right: 0px;
        top: 13px;
        width: 27px;
    }

    #burger-menu span:before {
        left: 0px;
        top: -10px;
        width: 16px;
    }

    #burger-menu span:after {
        left: 0px;
        top: 10px;
        width: 20px;
    }

    #burger-menu.close span {
        transform: rotate(-45deg);
        top: 13px;
        width: 27px;
    }

    #burger-menu.close span:before {
        top: 0px;
        transform: rotate(90deg);
        width: 27px;
    }

    #burger-menu.close span:after {
        top: 0px;
        left: 0;
        transform: rotate(90deg);
        opacity: 0;
        width: 0;
    }

    #menu {
        display: block;
        z-index: 1;
        width: 100%;
        min-height: 100%;
        position: fixed;
        top: 95px;
        left: 0;
        visibility: hidden;
        opacity: 0;
        text-align: center;
        padding-top: 20px;
        transition: all 0.3s ease-in-out;

    }

    .title-box {
        top: -50px;
    }

    .title-box p {
        font-size: 22px;
    }

    #menu.overlay {
        visibility: visible;
        opacity: 1;
        padding-top: 40px;
        background: var(--primary-background-color);
        z-index: 10;
    }

    #menu li {
        list-style: none;
    }

    #menu a {

        display: block;
        font-size: 22px;
        margin-bottom: 0;
        text-decoration: none;
        padding: 20px 0;
    }

    h2.section-title::after {
        display: none;
    }


    .benefits-list {
        gap: 20px;
    }


    .benefits-item p {
        font-size: 16px;
    }

    .more-services__title {
        white-space: normal;
    }

    .more-services__title::before {
        display: none;
    }

    .advantages-section img {
        margin: 0 auto;
    }

    .contact-us-section {
        flex-direction: column-reverse;
        gap: 20px;
    }

    .contact-us-section img {
        width: 150px;
        margin: 0 auto;
    }

    .faq-section--padding {
        padding: 450px 0 100px 0;
    }

    ul.splide__pagination li:first-child::before {
        font-size: 22px;
    }

    ul.splide__pagination li:nth-child(2)::before {
        font-size: 22px;
    }

    ul.splide__pagination li:last-child::before {
        font-size: 22px;
    }

    .contact-list {
        width: 90%;
        gap: inherit;
        justify-content: space-between;
    }

    .contact-item:first-child svg {
        width: 150px;
    }

    .form-box {
        width: 100%;
    }

    .contact-page__map {

        padding: 30px 10px;
    }
}






@media screen and (max-width:767px) {

    .header-logo {
        width: 100px;
    }

    .benefits-list {
        flex-direction: column;
    }

    .more-services__list {
        gap: 30px;
    }

    .hero .hero-title {
        font-size: 22px;
    }

    .benefits-item {
        width: 80%;
        margin: 0 auto;
    }

    .benefits-item img {
        width: 90px;
    }

    .hero-container img {
        display: none;
    }

    .hero-thumb {
        align-items: center;
    }

    .hero-title,
    .hero-text {
        text-align: center;
    }

    .hero-buttons-box {
        display: flex;
        flex-direction: column;
    }


    .services-cards__list>*:nth-child(odd) {
        margin-right: 0;
    }

    .services-cards__list>*:nth-child(even) {
        margin-left: 0;
    }

    .price-billing__buttons {
        margin-left: 0;
    }

    .services-cards__list>* {
        width: 100%;
    }

    .services-menu {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero-container {
        gap: 0;
    }

    .header-container {
        position: relative;
    }



    .hero-container {
        padding: 150px 0 60px;
    }



    .header__nav {
        width: 100%;
        gap: 10px;
        justify-content: space-between;
    }

    .more-services__item {
        width: 100%;

    }

    .header__link {
        font-size: 14px;
    }

    .more-services__item:not(:last-child) {
        border-right: none;
    }

    .more-services__title {

        width: 90%;
    }

    .form {
        flex-direction: column;
        gap: 0;
    }

    .form button {
        margin: 0 auto;
    }

    .form-box .section-title {
        text-align: center;
    }

    .form-box .form-label {
        text-align: center;
    }

    .footer-content {
        flex-direction: column;
    }


    .footer-content>div {
        width: 100%;
    }

    .footer-logo {
        width: 240px;
    }

    .footer-thumb {
        gap: 30px;
    }

    .footer-content {
        gap: 20px;
    }

    .contacts-container {
        padding: 110px 0 30px;
    }

    .products__box .section-title {
        font-size: 20px;
    }

    .products__box {
        justify-content: space-between;
    }

    .contact-content .container {
        flex-direction: column;
    }

    .contact-illustration {
        display: none;
    }

    .contact-page__map iframe {
        height: 350px;
    }

    .title-box {
        top: -90px;
    }

    .services-cards__list {
        row-gap: 30px;
    }

    .faq-section .more-services__title {
        font-size: 20px;
        text-align: start;
    }

    section.form {
        width: 90;
    }

    .contact-page__map {
        flex-direction: column;
        width: 100%;
        gap: 30px;
    }

    .contact-list {
        width: 90%;
        align-items: center;

    }

    .advantages-section .more-services__item {
        width: 100%;
    }

    footer.footer {
        padding-top: 60px;
    }

    .products-section h3.more-services__title {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .services-cards__item {
        padding: 20px 10px 160px 20px;
    }

    .services-cards__item .services-cards__value.more-services__title {
        font-size: 16px;
        position: absolute;
        bottom: 90px;
        top: initial;
        right: initial;
        left: 130px;
        width: 190px;
        justify-content: start;
        display: flex;
    }

    .services-cards__item .hero-btn {
        bottom: 30px;
        left: 150px;
    }

    .services-cards__value {
        white-space: nowrap;
    }

    .box {
        flex-direction: column;
        gap: 30px
    }

    .header-container {
        padding: 10px;
        bottom: -80%;
    }


    .products-section h3.more-services__title {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .splide img {
        display: none;
    }

    .hero-bcg {

        background-position: top;
    }

    .hero-container {
        padding: 30px 0 200px;
    }


    .title-box {
        top: -60px;
    }

    .title-box p {
        white-space: initial;
        font-size: 18px;
    }



    .more-services__section .text {
        width: 100%;
    }

    .more-services__list {
        gap: 0;
    }

    .more-services__item {
        padding: 10px 0;
    }


    .contact-section .contact-list {
        gap: 30px;
    }

    .contact-section .contact-item {
        width: 100%;
    }

    /* .contact-section .contact-item svg {
        width: 130px;
    } */

    .contact-section .contact-info {
        width: 80%;
    }

    .contact-section a {
        margin: inherit;
    }

    .contact-list {
        flex-direction: column;
    }

    .label-container li {
        flex-direction: column;
        gap: 0px;
    }

    .label-container p {
        font-size: 20px;
    }

    .contact-us-section {
        width: 90%;
        padding: 20px;
    }

    .contact-us-section img {
        display: none;
    }

    .faq-section--padding {
        padding: 370px 0 100px 0;
    }

    .hero--padding {
        margin-top: 74px;
    }

    ul.splide__pagination li:first-child::before {
        white-space: wrap;
        font-size: 18px;
    }

    ul.splide__pagination li:nth-child(2)::before {
        white-space: wrap;
        font-size: 18px;
    }

    ul.splide__pagination li:last-child::before {
        white-space: wrap;
        font-size: 18px;
    }

    .contact-container {
        padding: 0px;

    }

    .contact-item:first-child svg {
        width: 80px;
    }

    .form-bcg {
        padding: 0;
    }

    .contact-content {
        margin: 60px 0;
    }

    .hero-product .hero-container {
        padding: 60px 0;
    }
}