.bg-1 {
     padding-top: 30px;
     padding-bottom: 30px;
     background-image: linear-gradient(0deg, #2E0001, #8F090B, #BF2E2F);
 }

 .bg-2 {
     padding-top: 30px;
     padding-bottom: 30px;
     background-image: linear-gradient(180deg, #200000, #330101, #820202);
 }

 .bg-3 {
     padding-top: 30px;
     padding-bottom: 30px;
     background-image: url(https://swinza.club/wp-content/uploads/2024/09/bg-3.png);
     background-repeat: no-repeat;
     background-size: cover;
 }

 .bg-4 {
     padding-top: 30px;
     padding-bottom: 30px;
     background-image: linear-gradient(180deg, #550000, #000000);
 }

 .blog-regis>img {
     max-width: 170px;
     height: 105px;
 }

 .side_swgame {
     height: auto;
     border-radius: 20px;
 }

 .btn-swgame {
     background-image: linear-gradient(90deg, #FFB804, #FFBF00, #FF453E);
     border: 2.5px solid #FFB804;
     color: black !important;
     font-weight: bold;
     padding: 5px 30px;
     border-radius: 100px;
     animation: 1.6s playShadow ease-out infinite;
     font-size: 16px;
 }

 .blog-fist>a>img {
     height: 61px;
 }

 .game_imge {
     max-width: 118px;
     max-height: 118px;
     margin: 5px;
     position: relative;
     overflow: hidden;
     border-radius: 20px;
     flex: 1 1 calc(33.33% - 10px);
 }


 /* สำหรับหน้าจอขนาดกลางขึ้นไป (md) */
 @media (min-width: 768px) {
     .blog-fist>img {
         height: 66px;
     }

     .bg-1 {
         padding-top: 75px;
         padding-bottom: 75px;

     }

     .bg-2 {
         padding-top: 75px;
         padding-bottom: 75px;

     }

     .bg-3 {
         padding-top: 75px;
         padding-bottom: 75px;

     }

     .bg-4 {
         padding-top: 75px;
         padding-bottom: 75px;
     }

     .blog-regis>img {
         max-width: 300px;
         height: auto;
     }

     .btn-swgame {
         padding: 10px 45px;
         font-size: 20px;
     }

     .custom-bg>div {
         font-size: 16px;
     }

     .game_imge {
         max-width: 206px;
         max-height: 253px;
         margin: 5px;
         position: relative;
         overflow: hidden;
         border-radius: 20px;
     }

 }

 /* สำหรับหน้าจอขนาดใหญ่ขึ้นไป (lg) */
 @media (min-width: 992px) {
     .side_swgame {
         height: 276px;
     }

     .blog-regis>img {
         max-width: 359px;
         height: 203px;
     }

     .bg-2 {
         padding-top: 75px;
         padding-bottom: 75px;
         background: #200000;
     }

     .custom-bg>div {
         font-size: 18x;
     }

 }



 .bg-black {
     padding-top: 75px;
     padding-bottom: 75px;
     background: #000000;
 }




 .blog-promotions>div>img {
     width: 100%;
     height: auto;
 }

 /* Animation for the top row */
 @keyframes moveUp {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 /* Animation for the middle row */
 @keyframes moveDown {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(10px);
     }
 }

 /* Apply animation to each row */
 .moveUp-prmotions {
     animation: moveUp 2s ease-in-out infinite;
 }

 .moveDown-prmotions {
     animation: moveDown 2s ease-in-out infinite;
 }

 .swgame_hover {
     transition: transform 0.3s ease;
 }

 .swgame_hover:hover {
     transform: scale(1.05);
 }



 .game_imge>img:hover {
     transition: filter 0.3s ease;
     filter: brightness(0.2);
 }

 .game_imge>img {
     width: 100%;
 }

 .game_imge>.custom-bg>.btn-swgame {
     position: absolute;
     text-decoration: none;
 }

 .custom-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     background-color: rgba(0, 0, 0, 0.8);
     opacity: 0;
     transition: opacity 0.6s ease;
     z-index: 1;
 }

 .game_imge:hover .custom-bg {
     opacity: 1;
 }

 .custom-bg>div {
     font-size: 10px;
     color: #fff;
     margin-top: auto;
     padding-bottom: 10px;
     z-index: 2;
 }

 .game_block {
     display: flex;
     justify-content: center;
 }

 .find_input>div>input {
     padding: 16px;
     padding-left: 30px;
     border: unset;
     border-top-left-radius: 30px;
     border-bottom-left-radius: 30px;
     background: #DEDEDE;
 }

 .find_input>div>input:focus {
     background: #DEDEDE;
 }

 .find_input>div>span {
     width: 52px;
     background: linear-gradient(180deg, #FE3F42, #B22222);
     border: unset;
     border-bottom-right-radius: 30px;
     border-top-right-radius: 30px;
     cursor: pointer;
 }

 .find_input>div>span>img {
     margin-left: 5px;
 }

 .find_input button {
     display: inline-block;
     background-image: linear-gradient(90deg, #FFB804, #FFBF00, #FF453E);
     border: 2.5px solid #FFB804;
     color: black !important;
     font-weight: bold;
     padding: 15px 25px;
     border-radius: 100px;
     font-size: 14px;
 }



 #provider_modal .modal-header {
     border: unset;
 }

 #provider_modal .modal-content {
     background: linear-gradient(0deg, #000000, #331422);
     border: unset;
 }

 #provider_modal .provider-list li {
     width: 110px;
     height: 50px;
     float: left;
     background-color: rgba(213, 213, 213, .19);
     margin: 7px;
     padding: 10px;
     border-radius: 5px
 }

 #provider_modal .provider-list li:hover {
     border: 2px solid;
     border-image: linear-gradient(90deg, #FFB804, #FF453E);
     border-image-slice: 1;
     border-radius: 5px;
 }

 #provider_modal .provider-list li img {
     max-height: 40px
 }

 #findgame_modal .modal-header {
     border: unset;
     background: #131313;
 }

 #findgame_modal.modal-header {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
 }

 #findgame_modal .modal-header .head-modal {
     text-align: center;
     flex-grow: 1;
     color: white;
     font-size: 22px;
 }


 #findgame_modal .modal-content {
     background: #1C1B1B;
     border: unset;
 }

 .find_icon_s {
     width: 36px;
     height: 36px;
     background: linear-gradient(180deg, #FE3F42, #B22222);
     border-radius: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     right: 10px;
     top: 10px;
     cursor: pointer;
     z-index: 100;
 }

 #find_intput_modal {
     padding: 16px;
     padding-left: 30px;
     border: unset;
     background: #131313;
     border-radius: 30px;
     color: white;
 }

 #staticBackdrop {
     .modal-header {
         border: unset;
     }

     .modal-content {
         background: linear-gradient(0deg, #000000, #331422);
         border: unset;
     }
 }

 #ez-toc-container {
     width: 100%;
 }