/* 
    Stylesheet Name : CloudGaming.my 2024 – Website Extend
    Created on      : May       16, 2024, 08:46:10 AM
    Last edited on  : August    08, 2024, 11:58:29 PM
    Author          : YTL Digital Design [AL]
*/

body {
    background-color: #1F1F1F;
}


/* Utilities */

.bg-black {
    background-color: #000 !important;
}

.marginBottom-60 {
    margin-bottom: 3rem;
}

.marginBottom-80 {
    margin-bottom: 3.5rem;
}

@media (min-width: 768px) {
    .marginBottom-60 {
        margin-bottom: 3.3rem;
    }

    .marginBottom-80 {
        margin-bottom: 4rem;
    }
}

@media (min-width: 992px) {
    .marginBottom-60 {
        margin-bottom: 3.5rem;
    }

    .marginBottom-80 {
        margin-bottom: 4.5rem;
    }
}

@media (min-width: 1200px) {
    .marginBottom-60 {
        margin-bottom: 3.8rem;
    }

    .marginBottom-80 {
        margin-bottom: 5rem;
    }
}

.span-tag {
    border: 1px solid #76B900;
    border-radius: 7px;
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.2rem 0.8rem;
}


/* Nav */

.layer-header .navbar-nav {}

.layer-header .navbar-nav .nav-item,
.layer-header .navbar-nav .menu-item {
    line-height: 21px;
    margin: 1rem 0 0;
}

.layer-header .navbar-nav .nav-item:first-child,
.layer-header .navbar-nav .menu-item:first-child {
    margin-top: 0;
}

.layer-header .navbar-nav .nav-item .nav-link,
.layer-header .navbar-nav .menu-item>a {
    color: rgba(255, 255, 255, 0.55);
    padding: 8px 12px;
}

.layer-header .navbar-nav .nav-item .nav-link:hover,
.layer-header .navbar-nav .menu-item>a:hover {
    color: rgba(255, 255, 255, 0.75);
    ;
}

.layer-header .navbar-nav .nav-item .nav-link.active,
.layer-header .navbar-nav .menu-item.current_page_item:not(.menu-item-type-custom)>a {
    color: #FFF;
}

.layer-header .navbar-nav .nav-item .btn,
.layer-header .navbar-nav .menu-item .btn {
    font-size: 14px;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
}

@media (min-width: 992px) {
    .layer-header .navbar-nav .nav-item,
    .layer-header .navbar-nav .menu-item {
        margin-top: 0;
    }
}


/* Layer Section */

.layer-section {
    padding: 2.5rem 0;
}

@media (min-width: 768px) {
    .layer-section {
        padding-top: 3.8rem;
        padding-bottom: 3.8rem;
    }
}

@media (min-width: 992px) {
    .layer-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

@media (min-width: 1200px) {
    .layer-section {
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

.layer-section.section-fullBG {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}


/* Layer Page Banner */
.layer-pageBanner {}

.layer-pageBanner .layer-pbPanel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40vh;
    padding: 2.5rem 0;
    position: relative;
}

.layer-pageBanner .layer-pbBannerImage {
    background: url('../images/img-home-mask.jpg') center center no-repeat;
    background-size: cover;
    display: block;
    /* padding: 0 0 50%; */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.layer-pageBanner .layer-pbContent {
    position: relative;
    z-index: 2;
}

.layer-pageBanner .panel-logoImg {}

.layer-pageBanner h2 {}

.layer-pageBanner.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.pbSlider-dots {
    bottom: 30px;
}

.pbSlider-dots li,
.pbSlider-dots li button,
.pbSlider-dots li button:before {
    transition: all 230ms linear;
}

.pbSlider-dots li,
.pbSlider-dots li button,
.pbSlider-dots li button:before {
    height: 5px;
    padding: 0;
    width: 20px;
}

.pbSlider-dots li.slick-active,
.pbSlider-dots li.slick-active button,
.pbSlider-dots li.slick-active button:before {
    width: 35px;
}

.pbSlider-dots li {}

.pbSlider-dots li.slick-active {}

.pbSlider-dots li button {}

.pbSlider-dots li.slick-active button {}

.pbSlider-dots li button:before {
    background-color: #4E4E4E;
    content: '';
    display: inline-block;
    font-family: auto;
    font-size: 0;
    border-radius: 5px;
    position: relative;
    top: auto;
    left: auto;
    opacity: 1;
}

.pbSlider-dots li.slick-active button:before {
    background-color: #FF0084;
    opacity: 1;
}

@media (min-width: 768px) {
    .layer-pageBanner .layer-pbPanel {
        /* min-height: 60vh; */
        padding: 3rem 0;
    }
}

@media (min-width: 1200px) {
    .layer-pageBanner .layer-pbPanel {
        /* min-height: 60vh; */
        padding: 5rem 0;
    }
}


/* Layer Marquee Slider */

.layer-marqueeSlider {}

.layer-marqueeSlider .layer-marqueeSliderItem {
    margin: 0 12px;
    height: 360px;
    /* width: 280px; */
}

.layer-marqueeSlider .layer-marqueeSliderItem a {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 12px;
    cursor: default;
    display: block;
    height: 100%;
    width: 100%;
}

.layer-marqueeSlider .layer-marqueeSliderItem img {
    border-radius: 12px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.layer-marqueeSlider.marquee-homeGames {
    margin: 0 0 20px;
    position: relative;
}

.layer-marqueeSlider:after {
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;
}

.layer-marqueeSlider.marquee-homeGames .layer-marqueeSliderItem {
    height: 120px;
    margin: 0 10px;
}

.layer-marqueeSlider.marquee-homeGames .layer-marqueeSliderItem a {
    border-radius: 0;
    cursor: default;
}

@media (min-width: 768px) {
    .layer-marqueeSlider .layer-marqueeSliderItem {
        height: 260px;
    }

    .layer-marqueeSlider.marquee-homeGames .layer-marqueeSliderItem {
        height: 180px;
    }
}

@media (min-width: 992px) {
    .layer-marqueeSlider .layer-marqueeSliderItem {
        height: 370px;
    }

    .layer-marqueeSlider.marquee-homeGames .layer-marqueeSliderItem {
        height: 160px;
    }
}

@media (min-width: 1200px) {
    .layer-marqueeSlider .layer-marqueeSliderItem {
        height: 340px;
    }

    .layer-marqueeSlider.marquee-homeGames .layer-marqueeSliderItem {
        height: 250px;
    }
}

@media (min-width: 1440px) {
    .layer-marqueeSlider .layer-marqueeSliderItem {
        height: 414px;
    }
}

@media (min-width: 1600px) {
    .layer-marqueeSlider.marquee-homeGames .layer-marqueeSliderItem {
        height: 210px;
    }
}

@media (min-width: 1920px) {
    .layer-marqueeSlider.marquee-homeGames .layer-marqueeSliderItem {
        height: 250px;
    }
}


/* Layer Breadcrumbs */
.layer-breadcrumbs {}

.layer-breadcrumbs .listing-breadcrumbs,
.listing-breadcrumbs {
    display: flex;
    font-size: 0;
    line-height: 1.5rem;
    list-style-type: none;
    margin: 0;
    padding: 0.5rem 0;
}

.listing-breadcrumbs li {
    color: #F7F7FF;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    margin: 0;
}

.listing-breadcrumbs li:before {
    content: '/';
    margin: 0 0.8rem;
}

.listing-breadcrumbs li:first-of-type::before {
    display: none;
}

.listing-breadcrumbs li a,
.listing-breadcrumbs span {
    color: #F7F7FF;
    display: inline-block;
    line-height: 1.5rem;
}

.listing-breadcrumbs li a {}

.listing-breadcrumbs li span {
    font-weight: 700;
}