:root{
    --orange: rgb(243, 100, 47);
    --green: rgb(18, 233, 18);
    --blue: rgb(59, 158, 240);
    --red: red;
    --light-gray: #dbe9f0;
    --medium-gray: rgba(245, 245, 245, 0.6);
    --gray: #ddd;
    --yellow: #ffc201;
    --white: #fff;
    --black: #000;
    --button-width: 100px;
    --highlights-width: 90px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, p, span, a {
    font-family: 'Open Sans', sans-serif;
}

/* Banner Carousel */
#banner .item img {
    z-index: -1;
}

.slick-slider {
    overflow-x: hidden;
}

.slick-dots {
    position: absolute;
    bottom: 1%;
    left: 50px;
    transform: translateY(-50%);
    display: flex;
    z-index: 999;
    justify-content: flex-start;
}

.slick-dots li {
    margin: 0 5px;
}

.slick-dots li button:before {
    font-size: 10px;
    color: var(--gray);
    width: 10px;
    height: 10px;
    border-radius: 25px;
    display: inline-block;
    content: '';
    background-color: var(--gray);
}

.slick-dots li.slick-active {
    margin-right: 25px;
}

.slick-dots li.slick-active button:before {
    background-color: var(--yellow);
    width: 30px;
    height: 8px;
    opacity: 1;
}

.slick-next,
.slick-prev {
    z-index: 99999;
}

/* Promotion Carousel */
.slick-prev, .slick-next {
    background: var(--light-gray) !important;
    border: none;
    cursor: pointer;
    border-radius: 50%;
    font-size: 20px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slick-prev {
    left: 25px;
    z-index: 1;
}

.slick-next {
    right: 25px;
}

.slick-prev:hover, .slick-next:hover {
    background: var(--light-gray);
    color: var(--green);
}

.slick-prev::before, .slick-next::before {
    content: '';
}

.slick-prev::before {
    font-family: 'Font Awesome Kit';
    font: var(--fa-font-solid);
    content: '\f053';
    color: var(--green);
}

.slick-next::before {
    font-family: 'Font Awesome 6 Free';
    font: var(--fa-font-solid);
    content: '\f054';
    color: var(--green);
}

.slick-prev:hover::before, .slick-next:hover::before {
    color: var(--green);
}

/* Popular Games Carousel */
.demo-play {
    background-color: var(--medium-gray);
    transform: translateY(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#populargames .item-image:hover .demo-play {
    opacity: 1;
    transform: translateY(0);
}

.demo-play .demo,
.demo-play .demo:focus,
.demo-play .demo:hover {
    background: var(--blue);
}

.demo-play .play,
.demo-play .play:focus,
.demo-play .play:hover {
    background: var(--orange);
}

.demo-play .demo,
.demo-play .play {
    width: var(--button-width);
}

.highlights {
    background: var(--blue);
    width: var(--highlights-width);
}

.info-hide {
    background: var(--light-gray);
}

.info-hide p {
    font-size: 15px;
}

.icons {
    cursor: pointer;
}

.info-hide-container {
    display: none;
    margin-top: -50px;
    z-index: 5;
}

.game-description {
    z-index: -1;
}

.icons:hover + .info-hide-container {
    display: block;
}

#populargames .slick-prev,
#casinogames .slick-prev,
#instantgames .slick-prev,
#gamesrow3 .slick-prev,
#populargames .slick-next,
#casinogames .slick-next,
#instantgames .slick-next,
#gamesrow3 .slick-next, {
    top: 80px;
}

/* Overall Styles */
.main-container {
    padding: 20px 0;
}

.container-title {
    padding: 0 60px;
}

.slider-container {
    padding: 0 50px;
}

.title {
    font-size: 15px;
}

.game-description p {
    font-size: 13px;
}

.hot {
    background: var(--orange);
}

.new {
    background: var(--red);
}

.hot,
.new {
    padding: 2px 8px;
    font-size: 13px;
}

/* Responsive Styles */
@media (max-width: 1300px) {
    .info-hide p {
        font-size: 11px;
    }

    .title {
        font-size: 13px;
    }

    .game-description p {
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    .slick-dots {
        left: 28px;
    }

    .slick-dots li.slick-active button:before {
        background-color: var(--red);
        width: 20px;
        height: 5px;
    }

    .slick-prev {
        left: 15px;
    }

    .slick-next {
        right: 15px;
    }

    .main-container {
        padding: 15px 0px;
    }

    .container-title {
        padding: 0 40px;
    }

    .slider-container {
        padding: 0 30px;
    }
}

@media (max-width: 500px) {
    #populargames .slick-prev,
    #casinogames .slick-prev,
    #instantgames .slick-prev,
    #gamesrow3 .slick-prev,
    #populargames .slick-next,
    #casinogames .slick-next,
    #instantgames .slick-next,
    #gamesrow3 .slick-next, {
        top: 70px;
    }
}