/* For Tablet View */
@media screen and (min-device-width: 768px)
    and (max-device-width: 1024px) {

}
 
/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
    and (orientation: portrait) {

        html, body {
            max-width: 100%;
            overflow-y: scroll !important;
            overflow-x: hidden !important;
        }

        .logo img {
            width: 13rem !important;
        }

        .pola-wrapper {
            width: 100% !important;
            padding: 0.58rem !important;
        }

        .rtp-card-img {
            width: 100% !important;
        }
        .slider, .swiper {
            width: 100%;
            height: 100%;
        }

        .icon-card-bg p {
            font-size: 0.6rem !important;
            font-weight: bold !important;
        }

        .icon-prov {
            justify-content: start !important;
        }

        .icon-card-bg img {
            width: 3rem !important;
        }

        .title-game {
            font-size: 1.2rem !important;
        }

        .item-nav-bottom {
            font-size: 0.7rem !important;
        }

        .icon-providers {
            top: 0.2rem !important;
            right: 0 !important;
        }

}
 
/* For Mobile Landscape View */
@media screen and (max-device-width: 850px)
    and (orientation: landscape) {
        
        html, body {
            max-width: 100%;
            overflow-y: scroll !important;
            overflow-x: hidden !important;
        }
}
 
/* For Mobile Phones Portrait or Landscape View */
@media screen
    and (max-device-width: 640px) {
        
        .btn-play {
            font-size: 0.6rem !important;
        }    
}

/* Modal content */
#contact .modal-content {
    background: linear-gradient(135deg, #2c0d0d, #4a0f0f); /* maroon gelap */
    color: #fff;
    border: 2px solid #d4af37; /* gold border */
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); /* glow emas */
    overflow: hidden;
}

/* Header */
#contact .modal-header {
    background: linear-gradient(90deg, #5c0a0a, #8b0000);
    border-bottom: 1px solid #d4af37;
}

#contact .modal-title {
    font-weight: bold;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;

    /* warna putih */
    color: #ffffff !important;

    /* efek glow halus putih */
    text-shadow: 0 0 4px rgba(255,255,255,0.6),
}



/* Close button */
#contact .btn-close {
    filter: invert(80%) sepia(20%) saturate(300%) hue-rotate(10deg);
    opacity: 0.8;
}
#contact .btn-close:hover {
    opacity: 1;
}

/* Body */
#contact .modal-body {
    background: linear-gradient(180deg, #2c0d0d, #1a0000);
}

/* WA text */
#contact .modal-body p {
    font-weight: bold;
    font-size: 1.2rem;
    color: #ffd700;
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.7);
    margin: 0;
}