.bsg-banner {
    display: flex;
    padding: 10px;
}

.bsg-banner-poster {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .bsg-banner-poster > img {
        width: 291px;
        height: 381px;
        padding: 10px;
    }

.bsg-banner-content {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: black;
}

.bsg-banner-content-texts {
    height: 40%;
}

.bsg-banner-content-texts-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bsg-info-text {
    letter-spacing: 0em;
    text-align: center;
}

#bsgInfoText1.bsg-info-text {
    color: #FFBB00;
    font-family: Raleway;
    font-size: 40px;
    font-weight: 800;
    line-height: 47px;
}

#bsgInfoText2.bsg-info-text {
    color: #FFFFFF;
    font-family: Montserrat;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
}

.bsg-minigames-carousel {
    display: flex;
    align-items: center;
}

.icon-star {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='20' viewBox='0 0 21 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.4605 8.45312C20.5894 7.89453 20.398 7.30859 19.9644 6.92969C19.2847 6.33984 16.4605 5.81641 14.98 5.58594C14.605 5.53516 14.2847 5.30078 14.1167 4.96094C13.437 3.625 12.0698 1.09766 11.2964 0.636719C10.8042 0.34375 10.187 0.34375 9.69484 0.636719C8.9214 1.10156 7.55422 3.625 6.87844 4.96094C6.71047 5.30078 6.39015 5.53516 6.01515 5.58594C4.53859 5.81641 1.71047 6.33984 1.03078 6.92969C0.597186 7.30859 0.40578 7.89453 0.534686 8.45312C0.737811 9.33203 2.71437 11.4141 3.77687 12.4688C4.05031 12.7305 4.1714 13.1133 4.105 13.4844C3.87062 14.9609 3.49172 17.8086 3.84328 18.6406C4.06984 19.168 4.56594 19.5312 5.14015 19.582C6.03859 19.6602 8.62844 18.4219 9.96047 17.7383C10.2925 17.5625 10.6948 17.5625 11.0269 17.7383C12.3589 18.4219 14.9527 19.6602 15.8472 19.582C16.4175 19.5312 16.9175 19.168 17.1441 18.6406C17.4956 17.8125 17.1167 14.9648 16.8823 13.4844C16.8159 13.1133 16.9409 12.7305 17.2105 12.4688C18.2769 11.4141 20.2573 9.33203 20.4605 8.45312ZM6.62844 8.84375C6.44875 8.84375 6.30422 8.69922 6.30422 8.51953C6.30422 8.14062 6.49953 7.79297 6.85109 7.53906C7.1714 7.30859 7.58937 7.17969 8.03469 7.17969C8.48 7.17969 8.89797 7.30859 9.21828 7.53906C9.56984 7.79297 9.76515 8.14062 9.76515 8.51953C9.76515 8.69922 9.62062 8.84375 9.44094 8.84375C9.26125 8.84375 9.11672 8.69922 9.11672 8.51953C9.11672 8.15234 8.61281 7.82812 8.03859 7.82812C7.46437 7.82812 6.96047 8.14844 6.96047 8.51953C6.96047 8.69922 6.81594 8.84375 6.63625 8.84766C6.62844 8.84766 6.62844 8.84766 6.62844 8.84375ZM14.0386 11.8906C14.0386 13.6094 12.648 15 10.9331 15.0039H10.9292H10.0698C8.35109 15.0039 6.96047 13.6133 6.96047 11.8945C6.96047 11.5859 7.21047 11.3359 7.51906 11.3359H13.48C13.7886 11.3359 14.0386 11.5859 14.0386 11.8906C14.0386 11.8945 14.0386 11.8945 14.0386 11.8906ZM14.3745 8.84375C14.1948 8.84375 14.0503 8.69922 14.0503 8.51953C14.0503 8.15234 13.5464 7.82812 12.9722 7.82812C12.398 7.82812 11.8941 8.14844 11.8941 8.51953C11.8941 8.69922 11.7495 8.84375 11.5698 8.84375C11.3902 8.84375 11.2456 8.69922 11.2456 8.51953C11.2456 8.14062 11.4409 7.79297 11.7925 7.53906C12.1128 7.30859 12.5308 7.17969 12.9761 7.17969C13.4214 7.17969 13.8394 7.30859 14.1597 7.53906C14.5112 7.79297 14.7066 8.14062 14.7066 8.51953C14.7066 8.69922 14.562 8.84375 14.3823 8.84766C14.3784 8.84766 14.3745 8.84766 14.3745 8.84375Z' fill='black'/%3E%3C/svg%3E%0A");
}

.icon-left {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='30' height='30' rx='15' fill='%23444444' fill-opacity='0.7'/%3E%3Crect x='1' y='1' width='30' height='30' rx='15' stroke='%23CCCCCC' stroke-width='2'/%3E%3Cg clip-path='url(%23clip0_1551_3213)'%3E%3Cpath d='M18.7776 21.8801L19.3787 21.2789C19.459 21.1988 19.499 21.1066 19.499 21.0022C19.499 20.8982 19.459 20.8059 19.3787 20.7258L14.6532 16.0001L19.3786 11.2745C19.4589 11.1944 19.4989 11.1021 19.4989 10.9979C19.4989 10.8937 19.4589 10.8015 19.3786 10.7214L18.7775 10.1203C18.6973 10.04 18.6051 10 18.5009 10C18.3967 10 18.3045 10.0401 18.2244 10.1203L12.6211 15.7235C12.5409 15.8036 12.5009 15.8959 12.5009 16.0001C12.5009 16.1043 12.5409 16.1964 12.6211 16.2764L18.2244 21.8801C18.3045 21.9602 18.3968 22 18.5009 22C18.6051 22 18.6973 21.9602 18.7776 21.8801Z' fill='white' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1551_3213'%3E%3Crect width='12' height='12' fill='white' transform='translate(22 10) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

    .icon-left:hover {
        background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='30' height='30' rx='15' fill='%23190056' fill-opacity='0.7'/%3E%3Crect x='1' y='1' width='30' height='30' rx='15' stroke='%23CCCCCC' stroke-width='2'/%3E%3Cg clip-path='url(%23clip0_1551_3213)'%3E%3Cpath d='M18.7776 21.8801L19.3787 21.2789C19.459 21.1988 19.499 21.1066 19.499 21.0022C19.499 20.8982 19.459 20.8059 19.3787 20.7258L14.6532 16.0001L19.3786 11.2745C19.4589 11.1944 19.4989 11.1021 19.4989 10.9979C19.4989 10.8937 19.4589 10.8015 19.3786 10.7214L18.7775 10.1203C18.6973 10.04 18.6051 10 18.5009 10C18.3967 10 18.3045 10.0401 18.2244 10.1203L12.6211 15.7235C12.5409 15.8036 12.5009 15.8959 12.5009 16.0001C12.5009 16.1043 12.5409 16.1964 12.6211 16.2764L18.2244 21.8801C18.3045 21.9602 18.3968 22 18.5009 22C18.6051 22 18.6973 21.9602 18.7776 21.8801Z' fill='white' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1551_3213'%3E%3Crect width='12' height='12' fill='white' transform='translate(22 10) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    }

.icon-right {
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='30' height='30' rx='15' fill='%23444444' fill-opacity='0.7'/%3E%3Crect x='1' y='1' width='30' height='30' rx='15' stroke='%23CCCCCC' stroke-width='2'/%3E%3Cg clip-path='url(%23clip0_1551_3217)'%3E%3Cpath d='M13.2224 10.1199L12.6213 10.7211C12.541 10.8012 12.501 10.8934 12.501 10.9978C12.501 11.1018 12.541 11.1941 12.6213 11.2742L17.3468 15.9999L12.6214 20.7255C12.5411 20.8056 12.5011 20.8979 12.5011 21.0021C12.5011 21.1063 12.5411 21.1985 12.6214 21.2786L13.2225 21.8797C13.3027 21.96 13.3949 22 13.4991 22C13.6033 22 13.6955 21.9599 13.7756 21.8797L19.3789 16.2765C19.4591 16.1964 19.4991 16.1041 19.4991 15.9999C19.4991 15.8957 19.4591 15.8036 19.3789 15.7236L13.7756 10.1199C13.6955 10.0398 13.6032 10 13.4991 10C13.3949 10 13.3026 10.0398 13.2224 10.1199Z' fill='white' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1551_3217'%3E%3Crect width='12' height='12' fill='white' transform='translate(10 22) rotate(-90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

    .icon-right:hover {
        background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='30' height='30' rx='15' fill='%23190056' fill-opacity='0.7'/%3E%3Crect x='1' y='1' width='30' height='30' rx='15' stroke='%23CCCCCC' stroke-width='2'/%3E%3Cg clip-path='url(%23clip0_1551_3217)'%3E%3Cpath d='M13.2224 10.1199L12.6213 10.7211C12.541 10.8012 12.501 10.8934 12.501 10.9978C12.501 11.1018 12.541 11.1941 12.6213 11.2742L17.3468 15.9999L12.6214 20.7255C12.5411 20.8056 12.5011 20.8979 12.5011 21.0021C12.5011 21.1063 12.5411 21.1985 12.6214 21.2786L13.2225 21.8797C13.3027 21.96 13.3949 22 13.4991 22C13.6033 22 13.6955 21.9599 13.7756 21.8797L19.3789 16.2765C19.4591 16.1964 19.4991 16.1041 19.4991 15.9999C19.4991 15.8957 19.4591 15.8036 19.3789 15.7236L13.7756 10.1199C13.6955 10.0398 13.6032 10 13.4991 10C13.3949 10 13.3026 10.0398 13.2224 10.1199Z' fill='white' stroke='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1551_3217'%3E%3Crect width='12' height='12' fill='white' transform='translate(10 22) rotate(-90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    }

.icon-2 {
    /*background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;*/
    display: inline-block;
    height: 32px;
    width: 32px;
    /*border-radius: 50%;
    object-fit: contain;*/
}

.owl-prev, .owl-next {
    position: absolute !important;
    top: 40% !important;
    background-color: transparent !important;
}

.owl-prev{
    left: 0;
}

.owl-next {
    right: 0;
}

.carousel-element {
    padding: 20px;
    cursor: pointer;
}

.carousel-element > img{
    border-radius: 5px;
}

div#minigameModal {
    --bs-modal-width: 320px !important;
}

#game-modal-header.modal-header {
    border: none !important;
}

#game-modal-title {
    font-family: Open Sans;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: center;
    color: #FFFFFF;
}

#game-modal-content {
    background-color: black;
    border-radius: 20px;
}

#game-modal-body {
    display: flex;
    justify-content: center;
}

#spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-close-game-modal {
    width: 28px;
    height: 28px;
    top: 16px;
    left: 16px;
    padding: 8px;
    border-radius: 20px;
    gap: 8px;
    background: #444444;
    display: flex;
    cursor: pointer;
}

    .btn-close-game-modal:hover {
        background: #CCCCCC;
    }

        .btn-close-game-modal:hover > svg {
            filter: invert(1);
        }

.btns-card {
    padding: 8px 0px;
    border-radius: 8px;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: ease-in .4s ease 0s;
}

.carousel-element:hover .btns-card {
    opacity: 1;
    transform: scale(1);
}

.carousel-element:hover .carousel-img{
    outline: 2px solid yellow;
}

.title-card {
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0em;
    text-align: center;
    color: white;
    width: 90%;
}

.play-fun {
    background-color: #BCDC60;
    border: 3px solid white;
    padding: 8px 12px;
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 150px;
}

    .play-fun:hover {
        background-color: #82C73D;
        cursor: pointer;
    }

.text-btns {
    font-family: "Montserrat";
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
    color: #000000;
    padding-left: 8px;
    width: 80%;
}

@media only screen and (max-width: 480px) and (orientation: portrait) {
    .carousel-element:hover .btns-card {
        opacity: 0;
        transform: scale(1);
    }

    .col-4.bsg-banner-poster {
        display: none;
    }

    .bsg-banner-content {
        border-radius: 8px;
    }

    .carousel-element {
        padding: 30px;
    }

    .owl-prev, .owl-next {
        top: 45% !important;
    }

    #bsgInfoText2.bsg-info-text {
        padding: 0px 10px 0px 10px;
    }
}

@media only screen and (max-height: 575.98px) {
    .carousel-element:hover .btns-card {
        opacity: 0;
        transform: scale(1);
    }


    .col-4.bsg-banner-poster {
        display: none;
    }

    .bsg-banner-content {
        border-radius: 8px;
    }
}

@media only screen and (device-width: 820px) and (device-height: 1180px) {
    .carousel-element:hover .btns-card {
        opacity: 0;
        transform: scale(1);
    }


    .col-4.bsg-banner-poster {
        display: none;
    }

    .bsg-banner-content {
        border-radius: 8px;
    }
}

@media only screen and (device-width: 540px) and (device-height: 720px) {
    .carousel-element:hover .btns-card {
        opacity: 0;
        transform: scale(1);
    }

    .col-4.bsg-banner-poster {
        display: none;
    }

    .bsg-banner-content {
        border-radius: 8px;
    }

    .bsg-banner-content-texts {
        height: 30%;
    }

    .owl-prev, .owl-next {
        top: 45% !important;
    }
}

@media only screen and (max-width: 993px){
    .col-4.bsg-banner-poster {
        display: none;
    }
}