html {
    scroll-behavior: smooth;
    overflow-x: clip;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: clip;
}

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

.active-nav {
    background-color: white !important; /* or another color to highlight */
    color: black;
}

.active-video-button {
    outline: 2px solid #9500cc !important;
    position: relative;
}

.owl-item {
    background: none;
}

/* FAQ's */

.activeFaq, .accordion:hover {
        border-radius: 30px;
}


.accordion:after {
    content: '\002B';
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.activeFaq:after {
    content: "\2212";
}

.owl-carousel .owl-stage-outer {
    width: 100vw;
    overflow: hidden;
}

.show-price-nav {
    opacity: 1;
}

.meteor-white-left {
    animation: meteor-white-left 2.5s;
    opacity: 1;
    z-index: 0;
}

.meteor-blue-left {
    animation: meteor-blue-left 3.5s;
    opacity: 1;
    z-index: 0;
}

.meteor-white-right {
    animation: meteor-white-right 2.5s;
    opacity: 1;
    z-index: 0;
}

.meteor-blue-right {
    animation: meteor-blue-right 3.5s;
    opacity: 1;
    z-index: 0;
}

.meteor-white-shield {
    animation: meteor-white-shield 3s;
    opacity: 1;
    z-index: 0;;
}

.meteor-blue-shield {
    animation: meteor-blue-shield 3s;
    opacity: 1;
    z-index: 0;;
}

/* Active (selected) button style */
.price-select.active {
    background-color: white;
    color: black;
}

/* Inactive buttons */
.price-select.inactive {
    background-color: transparent;
    color: white;
}

.elements-scroll::-webkit-scrollbar {
    display: none;
}

/* For IE, Edge (older versions) */
.elements-scroll {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.owl-nav.disabled {
    display: block !important;
    position: absolute;
    top: 0;
}

.pricing-scroll::-webkit-scrollbar {
    height: 8px; /* Adjust height for horizontal scroll bar */
    background-color: rgba(18,18,18,0.8);
}

.pricing-scroll::-webkit-scrollbar-thumb {
    background-color: #9500cc; /* Color of the scroll bar thumb */
    border-radius: 10px; /* Rounded scroll bar thumb */
}

h3.game-title {
    -ms-overflow-style: none; /* Internet Explorer and Edge */
    scrollbar-width: none; /* Firefox */
}

h3.game-title::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

/* Add fade-in and fade-out effects */
.video-fade {
    opacity: 1;
    transition: opacity 0.5s ease; /* Smooth transition effect */
}

.video-hidden {
    opacity: 0; /* Completely hidden */
}

/* Review Carousel */

.owl-stage {
    display: flex;
}

#package2 .package2-inner {
    border: 4px #9500cc solid;
}

#package2 .most-popular {
    display: flex;
}

.supports-modding {
    display: flex;
}

.group:hover .map-popup {
    animation: map-popup 0.5s forwards;
}

.servers-online {
    animation: servers-online 2s infinite;
}

@keyframes map-popup {
    0% {
        bottom: 120px;
        visibility: visible;
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        bottom: 140px;
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes servers-online {
    0% {
        box-shadow: 0px 0px 25px rgba(5, 255, 2, 0);
    }

    50% {
        box-shadow: 0px 0px 25px rgba(5, 255, 2, 0.8);
    }

    100% {
        box-shadow: 0px 0px 25px rgba(5, 255, 2, 0);
    }
}

/* Hide scrollbar for Chrome, Safari and Opera */
.video-scroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.video-scroll {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.feature-vid:hover .leftFeature {
    animation: left-transition 0.3s forwards;
}

/* Header */

@keyframes pulseCircle {
    0% {
        transform: scale(0.90);
        box-shadow: 0 0 0 0 rgba(0,63,82, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0,63,82, 0);
    }

    100% {
        transform: scale(0.90);
        box-shadow: 0 0 0 0 rgba(0,63,82, 0);
    }
}

/* Features */
/* Runs 24/7 Block */

.server-status {
    animation: pulseCircle 2s infinite;
}

@keyframes pulseCircle {
    0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(0,63,82, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0,63,82, 0);
    }

    100% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgba(0,63,82, 0);
    }
}

svg .circle {
    transform-origin: center;
    animation: rotateGradient 3s linear infinite;
}

@keyframes rotateGradient {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.center-circle {
    animation: centerCircle 2s infinite;
}

@keyframes centerCircle {
    0% {
        background: rgba(0,63,82,0.5);
    }
    50% {
        background: rgba(0,63,82,1);
    }
    100% {
        background: rgba(0,63,82,0.5);
    }
}

/* Scheduled Backups block */

.number-changer {
    animation: number-changer 0.2s infinite;
}

@keyframes flicker {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

.feature-backup {
    animation: backup 4s infinite;
}

@keyframes backup {
    0% {
        opacity: 0;
    }
    30% {
        transform: translate(calc(32px + -90%), calc(48px + -100%));
        opacity: 0;
    }

    80% {
        transform: translate(auto, auto);
        opacity: 1;
    }

    100% {
        transform: translate(auto, auto);
        opacity: 1;
    }
}

.scheduled-backups-bars {
    animation: scheduled-backups-bars 4s infinite;
}

@keyframes scheduled-backups-bars {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

.feature-backup-primary {
    animation: backup-primary 4s infinite;
}

@keyframes backup-primary {
    0% {
        background: rgba(0,63,82,0.5);
    }
    30% {
        background: rgba(0,63,82,1);
        transform: scale(90%);
    }
    100% {
        background: rgba(0,63,82,0.5);
        transform: scale(100%);
    }
}

.block-up {
    animation: block-up 1.3s forwards;
}

.block-right {
    animation: block-right 1.3s forwards;
}

.block-right-down {
    animation: block-right-down 1.3s forwards;
}

.block-left {
    animation: block-left 1.3s forwards;
}

.block-down-2 {
    animation: block-down-2 2.2s forwards;
}

.block-left-2 {
    animation: block-left-2 2.5s forwards;
}

.header-icon {
    animation: animate-header-icon 1.7s forwards;
}

.header-border {
    animation: header-border 2s forwards;
}


@keyframes block-up {
    0% {
        top: 104px;
        opacity: 0;
        transform: skewY(50deg);
    }

    100% {
        top: -104px;
        opacity: 1;
        transform: skewY(0);
    }
}

@keyframes block-right {
    0% {
        right: 104px;
        opacity: 0;
        transform: skewY(50deg);
    }

    100% {
        right: -104px;
        opacity: 1;
        transform: skewY(0);
    }
}

@keyframes block-right-down {
    0% {
        right: 104px;
        bottom: 104px;
        opacity: 0;
        transform: skewY(50deg);
    }

    100% {
        right: -104px;
        bottom: -104px;
        opacity: 1;
        transform: skewY(0);
    }
}

@keyframes block-left {
    0% {
        left: 104px;
        opacity: 0;
        transform: skewY(50deg);
    }

    100% {
        left: -104px;
        opacity: 1;
        transform: skewY(0);
    }
}

@keyframes block-down-2 {
    0% {
        opacity: 0;
        transform: skewY(50deg);
    }

    50% {
        opacity: 0;
    }

    100% {
        bottom: -104px;
        opacity: 1;
        transform: skewY(0);
    }
}

@keyframes block-left-2 {
    0% {
        left: 104px;
        opacity: 0;
        transform: skewY(50deg);
    }

    50% {
        opacity: 0;
    }

    100% {
        left: -208px;
        opacity: 1;
        transform: skewY(0);
    }
}

@keyframes animate-header-icon {
    0% {
        opacity: 0;
        transform: translateY(150px);
    }

    70% {
        opacity: 0;
    }

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

@keyframes left-transition {
    0% {
        left: 90%;
        visibility: visible;
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        left: 110%;
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes header-border {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Git Block */

.bottom-block {
    animation: bottom-block 1s forwards;
}

@keyframes bottom-block {
    0% {
        opacity: 0;
        transform: translateY(29px)
    }

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

@keyframes shake {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }
  
  .animate-shake {
    animation: shake 0.3s ease-in-out;
  }

  .text-container {
    color: white;
    font-family: 'GT Walsheim Pro', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    padding-bottom: 6px;
    text-align: left;
}

.scale-change-11 {
    animation: scale-11 3s infinite;
}

@keyframes scale-11 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.line-test {
    animation: line-test 3s infinite;
}

.line-test-2 {
    animation: line-test 3s infinite;
    animation-delay: 1s;
}

@keyframes line-test {
    0% {
        border-color: rgb(107 114 128);
    }
    50% {
        border-color: rgb(255,255,255);
    }
    100% {
        border-color: rgb(107 114 128);
    }   
}

.commit-container {
    transition: opacity 0.3s ease-in-out; /* Smooth fade transition */
}

.commit-container.fade {
    opacity: 0; /* State for fading out */
}

/* Cursor blinking effect */
.cursor::after {
    content: '|';
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

@keyframes meteor-white-left {
    0% {
        transform: translate(-250%,0) rotate(-30deg);
        opacity: 0;
        width: 0;
        height: 0;
    }
    100% {
        transform: translate(0,0) rotate(0deg);
        opacity: 1;
        width: 162px;
        height: 6px;
    }
}

@keyframes meteor-blue-left {
    0% {
        transform: translate(-200%,0);
        opacity: 0;
        width: 0;
        height: 0;
    }
    10% {
        opacity: 0;
    }
    100% {
        transform: translate(0,0);
        opacity: 1;
        width: 106px;
        height: 6px;
    }
}

@keyframes meteor-white-right {
    0% {
        transform: translate(-400%,0);
        opacity: 0;
        width: 0;
        height: 0;
    }
    35% {
        opacity: 0;
    }
    100% {
        transform: translate(0,0);
        opacity: 1;
        width: 162px;
        height: 6px;
    }
}

@keyframes meteor-blue-right {
    0% {
        transform: translate(-350%,0)  rotate(-30deg);
        opacity: 0;
        width: 0;
        height: 0;
    }
    35% {
        opacity: 0;
    }
    100% {
        transform: translate(0,0) rotate(0deg);
        opacity: 1;
        width: 106px;
        height: 6px;
    }
}

@keyframes meteor-white-shield {
    0% {
        opacity: 0;
        box-shadow: 0px 0px 70px 70px rgba(255,255,255,0.5);
    }
    100% {
        opacity: 1;
        box-shadow: 0px 0px 20px 6px rgba(255,255,255,0.5);
    }
}

@keyframes meteor-blue-shield {
    0% {
        opacity: 0;
        box-shadow: 0px 0px 50px 50px rgba(0,157,204,0.5);
    }
    100% {
        opacity: 1;
        box-shadow: 0px 0px 15px 5px rgba(0,157,204,0.5);
    }
}

@media only screen and (max-width: 1150px) {
    .header-inner {
        margin-bottom: 0;
    }
    .trustpilot-header {
        bottom: 0;
    }
}

@media only screen and (max-width: 1100px) {
    .bg-gameMap {
        background-size: 350px;
        background-position-y: center;
    }
}


@media only screen and (max-width: 639px) {
    /* #products-carousel .owl-stage {
        margin-left: 20px;
    } */
    #products-mobile .owl-stage {
        margin-right: 20px;
        margin-left: 20px;
    }
    .map-bg-top {
        background-position-y: center bottom;
        background-size: 100% auto;
    }
    .rated-excellent-block {
        order: 2; /* Place it after the div with class 2 */
    }

    .hardware-block {
        order: 1; /* Place it before the div with class 1 */
    }
    .pricing-scroll::-webkit-scrollbar {
    display: none;
    }
    /* For IE, Edge (older versions) */
    .pricing-scroll {
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    @keyframes block-right {
        0% {
            right: 138px;
            opacity: 0;
            transform: skewY(50deg);
        }

        100% {
            right: -138px;
            opacity: 1;
            transform: skewY(0);
        }
    }

    @keyframes block-up {
        0% {
            top: 0;
            right: 0;
            opacity: 0;
            transform: skewY(50deg);
        }

        100% {
            top: 0;
            right: -72px;
            opacity: 1;
            transform: skewY(0);
        }
    }

    @keyframes block-right-down {
        0% {
            top: 66px;
            right: 0;
            opacity: 0;
            transform: skewY(50deg);
        }

        100% {
            top: 66px;
            right: -72px;
            opacity: 1;
            transform: skewY(0);
        }
    }

    @keyframes block-left {
        0% {
            left: 72px;
            opacity: 0;
            transform: skewY(50deg);
        }

        100% {
            left: -72px;
            opacity: 1;
            transform: skewY(0);
        }
    }

    @keyframes block-left-2 {
        0% {
            left: 138px;
            opacity: 0;
            transform: skewY(50deg);
        }

        50% {
            opacity: 0;
        }

        100% {
            left: -138px;
            opacity: 1;
            transform: skewY(0);
        }
    }

    @keyframes map-popup {
        0% {
            bottom: 90px;
            visibility: visible;
            opacity: 0;
            transform: scale(0.95);
        }
    
        100% {
            bottom: 100px;
            opacity: 1;
            transform: scale(1);
        }
    }
}