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 {
    border: 3px solid #9500cc !important;
    position: relative;
    border-radius: 30px;
}

.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;
}

.circle-1 {
    animation: circle-1 2s;
    opacity: 1;
    z-index: 0;
}

.circle-2 {
    animation: circle-2 2s;
    opacity: 1;
    z-index: 0;
}

.circle-3 {
    animation: circle-3 2s;
    opacity: 1;
    z-index: 0;
}

.circle-4 {
    animation: circle-4 2s;
    display: block;
}

.circle-5 {
    animation: circle-5 2s;
    display: block;
}

/* 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;
}

@keyframes shake {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }
  
  .animate-shake {
    animation: shake 0.3s ease-in-out; /* Adjust the duration and easing as needed */
  }



@keyframes circle-1 {
    0% {
        transform: translate(-50%,-25%) rotate(45deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(0,0) rotate(0);
    }
}

@keyframes circle-2 {
    0% {
        transform: translate(50%,25%) rotate(-45deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(0,0) rotate(0);
    }
}

@keyframes circle-3 {
    0% {
        transform: translate(100%,50%) rotate(25deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(0,0) rotate(0);
    }
}

@keyframes circle-4 {
    0% {
        transform: translate(100%,-50%) rotate(25deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(0,0) rotate(0);
    }
}

@keyframes circle-5 {
    0% {
        transform: translate(-100%,50%) rotate(25deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(0,0) rotate(0);
    }
}



/* .nav-container {
    transition: margin-left 0.1s ease-in-out;
} */

@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 */
    }
}