@import url(root.css);

.section-subtitle {
    color: #fff;
    text-align: center;
    font-size: var(--text-size-4);
    font-weight: 500;
    margin-bottom: 2vh;
}

.section-subtitle span {
    position: relative;
}

.section-subtitle span::before {
    position: absolute;
    content: "";
    left: 0;
    top: -0.5vh;
    width: 100%;
    height: 0.1vh;
    background: linear-gradient(to right, #BF00FF40, #BF00FF, #BF00FF40);
}

.section-subtitle span::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -0.5vh;
    width: 100%;
    height: 0.1vh;
    background: linear-gradient(to right, #BF00FF40, #BF00FF, #BF00FF40);
}



.section-title {
    color: #fff;
    text-align: center;
    font-size: var(--text-size-2);
}

.section-title span {
    color: var(--main-color-);
}




.faq {
    background-color: var(--bg-color-);
    width: 100%;
}

.faq .container {
    width: 40%;
    margin: auto;
    color: #fff;
}

.faq .container h1 {
    color: #fff;
    font-family: ProductSans-Bold;
    font-size: var(--text-size-2);
    text-align: center;
}

.faq .container .wrapper {
    width: 100%;
    margin-top: 3vh;
    background:
        linear-gradient(#151515, #151515) padding-box,
        linear-gradient(-45deg, #BF00FF, #BF00FF00) border-box;
    border: 0.1vh solid transparent;
    box-sizing: border-box;
    border-radius: 1vh;
    padding-bottom: 1vh;
}

.faq .container .wrapper .item {
    overflow: hidden;
}



.faq .container .wrapper .item i {
    color: var(--main-color-);
    transition: 0.3s ease all;
    font-size: var(--text-size-3);
}



.faq .container .item .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1vh 3vh;
    position: relative;
    box-sizing: border-box;
}

.faq .container .item .box .title {
    color: #fff;
    font-size: var(--text-size-3);
    padding: 1vh;
    box-sizing: border-box;
    font-weight: 500;
}


.faq .container .wrapper .item .box::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 0.1vh;
    background: linear-gradient(to right, #BF00FF00, #BF00FF);
}

.faq .container .wrapper .item .box::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0vh;
    width: 100%;
    height: 0.1vh;
    background: linear-gradient(to right, #BF00FF00, #BF00FF);
}

.faq .container .wrapper .first .box::before {
    display: none;

}

.faq .container .wrapper .last .box::after {
    display: none;
}


.faq .container .item .text {
    color: #fff;
    font-size: var(--text-size-4);
    line-height: 3vh;
    max-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0vh 4vh;
    transition: 0.3s ease all;

}


.faq .container .wrapper .item.active i {
    transform: rotate(180deg);
}

.faq .container .wrapper .item.active .text {
    max-height: 10vh;
    padding: 1vh 4vh;
}



.free-support {
    width: 100%;
}


.free-support .container {
       width: 65%;

    height: 50vh;
    margin: auto;
    background: url("../public/home-images/free-support.png");
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    border-radius: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.free-support .container .title {
    font-size: var(--text-size-2);
    font-weight: 600;
    color: #fff;
}

.free-support .container .text {
    font-weight: 400;
    font-size: var(--text-size-3);
    color: #fff;
    margin-top: 1vh;
}

.free-support .container .tags {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vh;
    color: #fff;
    font-weight: 400;
    margin-top: 5vh;
    font-size: var(--text-size-3);
}

.free-support .container .tags i {
    color: #00FF62;
    font-size: var(--text-size-3);
}

.free-support .container .btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vh;
    margin-top: 4vh;
}

.free-support .container .btns .btn-1 {
    font-size: var(--text-size-3);
    padding: 1.6vh 3vh;
    border-radius: 10vh;
    background: var(--main-color-);
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease all;
    overflow: hidden;
}

.free-support .container .btns .btn-1 i {
    transition: 0.3s ease all;
}

.free-support .container .btns .btn-1:hover i {
    transform: translateX(1vh);
}

.free-support .container .btns .btn-2 {
    font-size: var(--text-size-3);
    padding: 1.6vh 3vh;
    border-radius: 10vh;
    background: #ffffff20;
    border: 0.1vh solid var(--main-color-);
    color: #fff;
    cursor: pointer;
    transition: 0.3s ease all;
    overflow: hidden;
}

.free-support .container .btns .btn-2:hover {
    background: #BF00FF20;
}



.game-servers {
    width: 100%;
    margin-top: 20vh;
}

.game-servers .container {
    width: 70%;
    margin: auto;
}

.game-servers .container .wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 2vh;
    margin-top: 6vh;
}

.game-servers .container .wrapper .item {
    position: relative;
    flex-basis: 35vh;
    flex-grow: 1;
    border-radius: 2vh;
    overflow: hidden;
    border: 0.1vh solid transparent;
    transition: 0.3s ease all;
}

.game-servers .container .wrapper .item .information {
    position: absolute;
    color: #fff;
    bottom: 2vh;
    left: 3vh;
}

.game-servers .container .wrapper .item .information .name {
    font-size: var(--text-size-3);
    font-weight: 600;
}

.game-servers .container .wrapper .item .information .text {
    font-size: var(--text-size-4);
    margin-top: 1vh;
}

.game-servers .container .wrapper .item .information .text span {
    color: var(--main-color-);
}

.game-servers .container .wrapper .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2vh;
    z-index: -1;
}

.game-servers .container .wrapper .item .discount {
    position: absolute;
    top: 2vh;
    right: 2vh;
    padding: 0.6vh 2vh;
    background: var(--main-color-);
    color: #fff;
    font-size: var(--text-size-4);
    border-radius: 20vh;
    font-weight: 500;
}

.game-servers .container .wrapper .item:hover {
    background:
        linear-gradient(#151515, #151515) padding-box,
        linear-gradient(-45deg, #BF00FF50, #BF00FF00) border-box;
    border: 0.1vh solid transparent;
}

.system-information {
    width: 100%;
}


.system-information .container {
    width: 70%;
    margin: auto;
}

.system-information .container .item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4vh;
    margin-top: 4vh;
}

.system-information .container .item .text-place h2 {
    color: #fff;
    font-size: var(--text-size-2);
}

.system-information .container .item .text-place h2 span {
    color: var(--main-color-);
}


.system-information .container .item .text-place p {
    color: #fff;
    font-size: var(--text-size-4);
    font-weight: 300;
    margin-top: 2vh;
    line-height: 3vh;
}


.system-information .container .item .align-right {
    text-align: right;
}

.system-information .container .item .img-place {
    width: 100%;
}


.system-information .container .item .img-place img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2vh;
}