@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
  /* set color  */
  --spanish-gray: hsl(0, 0%, 60%);
  --sonic-silver: hsla(0, 0%, 65%, 0.678);
  --eerie-black: hsl(0, 0%, 13%);
  --salom-pink: hsl(353, 100%, 78%);
  --sandy-brown: hsl(29, 90%, 65%);
  --sandy-yellow: #f3b15a;
  --bittersweet: hsl(0, 100%, 70%);
  --ocean-green: hsl(152, 51%, 52%);
  --davys-gray: hsl(0, 0%, 63%);
  --cultured: hsl(0, 0%, 92%);
  --cornflower-blue: hsl(226, 92%, 63%);
  --neon-blue: hsl(229, 100%, 59%);
  --ocean-blue: rgba(4, 205, 212, 0.918);
  --white: hsl(0, 100%, 100%);
  --onyx: hsl(0, 0%, 27%);

  /* set typography  */

  --fs-1: 1.563rem;
  --fs-2: 1.375rem;
  --fs-3: 1.25rem;
  --fs-4: 1.125rem;
  --fs-5: 1rem;
  --fs-6: 0.938rem;
  --fs-7: 0.875rem;
  --fs-8: 0.813rem;
  --fs-9: 0.75rem;
  --fs-10: 0.688rem;
  --fs-11: 0.625rem;

  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-700: 700;

  /* border radius  */

  --border-radius-md: 10px;
  --border-radius-sm: 5px;

  /* transition  */
  --transition-timing: 0.2s ease-in-out;
  --transition-scale: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 
    -------------------------------------
                RESET 
    ------------------------------------- */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
/* 
li {
  list-style: none;
} */

a {
  text-decoration: none;
  color: var(--white);
  font-size: 1rem;
}
button {
  background: none;
  font: inherit;
  border: none;
  cursor: pointer;
}

img,
i,
button,
a {
  display: block;
}
span {
  display: inline-block;
}

html {
  font-family: "Poppins", sans-serif;
  overscroll-behavior: contain;
  /* background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%); */
}

input {
  display: block;
  width: 100%;
  font: inherit;
}

input::placeholder {
  font: inherit;
}

/* body{ */
/* background: #efebe9; */
/* background: rgba(0, 0, 0, 0.863); */
/* padding-bottom: 60px; */
/* } */

/* ScrollBar Design  */
body{
  /* background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%); */
  background: url("../images/background-1.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body::-webkit-scrollbar {
  width: 15px;
}
body::-webkit-scrollbar-track {
  background: var(--white);
  border-left: 1px solid var(--cultured);
}

body::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 80%);
  border: 3px solid var(--white);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 100%, 70%);
}

/* #REUSED STYLE  */

.container {
  padding: 0 15px;
}

.has-scrollbar {
  padding: 0 15px;
}
.has-scrollbar::-webkit-scrollbar {
  background: transparent;
  border: 3px solid var(--white);
  border-radius: 20px;
}

.has-scrollbar:hover::-webkit-scrollbar-thumb {
  background: hsl(0, 0%, 90%);
}
.has-scrollbar::-webkit-scrollbar-thumb:hover {
  background: hsl(0, 0%, 80%);
}

.title {
  color: var(--eerie-black);
  font-size: var(--fs-5);
  font-weight: var(--weight-600);
  letter-spacing: 0.4px;
  text-transform: capitalize;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cultured);
  margin-bottom: 30px;
}

/* ---------------------------------
                    Main 
    --------------------------------- */
/* 
        Overlay 
    */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 0%, 0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: var(--transition-scale);
}

.overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* MODAL  */
.modal {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  background: hsl(0, 0%, 0%, 0.5) 50%;
  /* background: white; */
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  animation: popup 1s ease-in;
  -webkit-animation: popup 1s ease-in-out 5s forwards;
}

@keyframes popup {
  0% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  100% {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
}

.modal.close {
  display: none;
}

.modal-colse-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.modal-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 750px;
  text-align: center;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  z-index: 2;
  animation: scaleUp 0.5s ease-in-out 2s forwards;
  -webkit-animation: scaleUp 0.5s ease-in-out 2s forwards;
}
@keyframes scaleUp {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.modal-close-btn {
  position: absolute;
  top: 3rem;
  right: 6rem;
  background: var(--neon-blue);
  color: var(--white);
  font-size: var(--fs-6);
  padding: 4px 10px;
  border-radius: var(--border-radius-sm);
}
.modal-close-btn:hover {
  opacity: 0.9;
}
.modal-close-btn i {
  -webkit-text-stroke-width: 1px;
}

.modal-content .popup-peso img {
  text-align: center;
  width: 90%;
  height: 90%;
  margin: 1rem;
}

.modal-content .btn-peso-free {
  position: absolute;
  bottom: 0px;
  justify-content: center;
  align-items: center;
  background-color: var(--neon-blue);
  border-radius: var(--border-radius-md);
  font-size: var(--fs-7);
  font-weight: var(--weight-600);
  text-transform: uppercase;
  transition: var(--transition-timing);
  margin: auto;
  padding: 10px 15px;
}
.btn-peso-free:hover {
  background: var(--salom-pink);
}
.btn-peso-free a {
  color: var(--white);
}

/* Notification 

.notification-toast {
  display: flex;
  align-items: flex-start;
  position: fixed;
  bottom: 80px;
  right: 20px;
  left: 20px;
  background: var(--white);
  max-width: 300px;
  gap: 15px;
  padding: 15px;
  border-radius: var(--border-radius-md);
  box-shadow: 0 5px 20px hsla(0, 0%, 0%, 0.15);
  transform: translateX(calc(-100% - 40px));
  transition: var(--transition-scale);
  z-index: 5;
  animation: slideInOut 8s ease-in-out infinite;
}

.notification-toast.undo{
  display: none;
}

@keyframes slideInOut {
  0%,
  45%,
  100% {
    transform: translateX(calc(-100% - 40px));
    opacity: 0;
    visibility: hidden;
  }

  50%,
  95% {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }
}
.toast-banner {
  width: 70px;
  height: 70px;
}

.toast-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: var(--border-radius-md);
}
.toast-detail {
  width: calc(100% - 40px);
  padding-right: 10px;
}

.toast-message {
  font-size: var(--fs-9);
  color: var(--sonic-silver);
  margin-bottom: 8px;
}

.toast-title {
  font-size: var(--fs-6);
  font-weight: var(--weight-500);
  color: var(--onyx);
}

.toast-meta {
  font-size: var(--fs-10);
  color: var(--sonic-silver);
} */
/* End Notification  */

/* Header  */

/* .header-main{
        background: rgba(0, 171, 177, 0.918);
    } */

.header-main.active {
  background: #000000;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.header-main {
  position: fixed;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 15px 60px;
  z-index: 10;
  gap: 50px;
}

.header-logo {
  margin-bottom: 10px;
}
.header-logo img {
  margin: auto;
  width: 20rem;
  height: auto;
}

.header-search-container {
  position: relative;
  flex-grow: 1;
}

.header-main .links {
  display: flex;
  gap: 2rem;
}

.header-main .links .menu-title {
  position: relative;
  color: var(--white);
  font-size: var(--fs-4);
  font-weight: var(--weight-600);
  transition: var(--transition-timing);
}
.header-main .links .menu-title:hover {
  color: var(--ocean-blue);
}

.header-main .links .menu-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ocean-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: var(--transition-timing);
}

.header-main .links .menu-title:hover::after {
  transform: scaleX(1);
}

.header-search-container .search-field {
  font-size: var(--fs-7);
  color: var(--white);
  padding: 10px 15px;
  padding-right: 50px;
  border: 1px solid var(--cultured);
  border-radius: var(--border-radius-md);
}
.search-field::-webkit-search-cancel-button {
  display: none;
}

.header-search-container input::placeholder {
  color: var(--white);
}

.search-btn {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  color: var(--onyx);
  font-size: 18px;
  padding: 8px 15px;
  transition: color var(--transition-timing);
  border: var(--border-radius-md);
}
.search-btn i {
  color: var(--white);
}

.search-btn i:hover {
  color: var(--ocean-blue);
}

.login-btn {
  justify-content: center;
  align-items: center;
  background: var(--neon-blue);
  padding: 10px 25px;
  border-radius: var(--border-radius-md);
}
.header-main .toggle_btn {
  color: var(--white);
  font-size: 1.8rem;
  cursor: pointer;
  display: none;
  padding-left: 15px;
}
/* Mobile Search Box  */

/* Dropdown Menu  */

.dropdown_menu_category {
  display: none;
  position: fixed;
  top: 100px;
  height: 0px;
  width: 100%;
  background: rgba(155, 153, 153, 0.137);
  backdrop-filter: blur(20px);
  overflow: hidden;
  transition: var(--transition-timing);
  z-index: 10;
}

.dropdown_menu_category.active {
  background: rgba(0, 0, 0, 0.701);
}

.mobile-menu-links {
  display: none;
}

.mobile-menu-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 15px;
  gap: 0.8rem;
}
.mobile-menu-container .menu-title {
  position: relative;
  color: var(--white);
  font-size: var(--fs-8);
  padding: 2px 2px;
  justify-content: center;
  align-items: center;
}
.dropdown_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  column-gap: 20px;
  padding: 0px 12px;
}
.dropdown_container:nth-child(3) {
  padding-bottom: 10px;
}

.dropdown_title {
  color: var(--white);
  font-size: var(--fs-5);
  font-weight: var(--weight-600);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
}

.dropdown-link {
  position: relative;
  color: var(--white);
  font-size: var(--fs-7);
  text-transform: capitalize;
  transition: var(--transition-timing);
}
.dropdown-link:hover {
  color: var(--ocean-blue);
}
.dropdown_container a:nth-child(2) {
  font-size: var(--fs-6);
  font-weight: var(--weight-600);
  color: var(--ocean-blue);
}
/* .dropdown_container a:nth-child(2):hover{
        color: var(--salom-pink);
    } */
.dropdown_menu {
  display: flex;
}

.dropdown-link:not(:last-child)::after {
  position: absolute;
  content: "";
  top: 3px;
  right: -10px;
  background: var(--sonic-silver);
  width: 1px;
  height: 15px;
}
.mobile-search-container {
  position: relative;
  padding: 5px 25px;
  margin: 5px 15px;
  flex-grow: 1;
}
.mobile-search-container .search-field {
  font-size: var(--fs-7);
  color: var(--onyx);
  padding: 10px 15px;
  padding-right: 50px;
  border: 1px solid var(--cultured);
  border-radius: var(--border-radius-md);
}
.mobile-search-btn {
  position: absolute;
  top: 50%;
  right: 26px;
  background: var(--neon-blue);
  transform: translateY(-50%);
  color: var(--white);
  font-size: 18px;
  padding: 7.5px 25px;
  transition: color var(--transition-timing);
  border: var(--border-radius-md);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-transition: color var(--transition-timing);
  -moz-transition: color var(--transition-timing);
  -ms-transition: color var(--transition-timing);
  -o-transition: color var(--transition-timing);
}

/* End Header  */

/* Main  */

/* Carouse Banner  */

.banner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 0 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: url("../images/movies/bg-95-Free.jpg") no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: 0.5s;
}

.banner::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.877);
}

.content {
  position: relative;
  max-width: 550px;
  display: none;
  visibility: hidden;
  transform: scale(0);
  transition: 0.5s;
}

.content.active {
  display: block;
  visibility: visible;
  transform: scale(1);
  transition: 0.5s;
}

.movie-title {
  max-width: 30rem;
}

.banner .content h4 {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  font-size: 30px;
}

.banner .content h4 span {
  padding: 0 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.banner .content h4 span:first-child {
  padding-left: 0;
}

.banner .content h4 span:last-child {
  border-right: none;
}

.banner .content h4 span i {
  background: var(--ocean-blue);
  color: var(--white);
  padding: 0 8px;
  display: inline-block;
  border-radius: 2px;
}

.banner .content p {
  font-size: 1em;
  font-weight: var(--weight-600);
  line-height: 1.5em;
  color: var(--white);
  margin: 10px 0 20px;
}

.banner .content .button a {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  background: var(--ocean-blue);
  color: var(--white);
  padding: 6px 20px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: var(--transition-timing);
  cursor: pointer;
}

.banner .content .button a:nth-child(2) {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.banner .content .button a:hover:nth-child(2) {
  background: var(--ocean-blue);
}
.carousel {
  position: relative;
  height: 650px;
  perspective: 800px;
}

.banner .carousel-box {
  position: relative;
  min-width: 950px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

.carousel .carousel-item {
  width: 350px;
  cursor: pointer;
}

.carousel .carousel-item img {
  max-width: 350px;
  border-radius: var(--border-radius-md);
  transform: translateX(-0.5em) translateY(-11em);
  object-fit: cover;
  object-position: center;
}

/* End Carousel Banner */

/* Casino  */
#casino .container {
  display: flex;
}

/* End Casino */

/* Auto Slider  */
.auto-slider {
  width: 100%;
  height: 15rem;
  /* background: greenyellow; */
  position: relative;
  display: flex;
  margin: 0px;
  align-items: center;
  overflow: hidden;
}

.auto-slider::before,
.auto-slider::after {
  content: "";
  height: 100%;
  position: absolute;
  width: 15%;
  z-index: 2;
}
.auto-slider::before {
  left: 0;
  top: 0;
}
.auto-slider::after {
  right: -10px;
  top: 0;
  transform: rotateZ(180deg);
}

.slider-track {
  position: absolute;
  /* background: wheat; */
  top: 35px;
  display: flex;
  transition: 0.5s ease-out;
  animation: scroll 35s linear infinite;
  -webkit-animation: scroll 35s linear infinite;
}

.slider-track:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 9));
  }
}

.slider-item {
  margin: 0 15px;
  width: 250px;
  height: 195px;
  perspective: 100px;
  /* background: wheat; */
}

.slider-item img {
  width: 100%;
  border-radius: 20px;
  transition: transform 1s;
}

.slider-item img:hover {
  transform: translateZ(20px);
}

/* End Auto Slider  */

/* Casino Product Container  */
.product-container .casino-container {
  position: relative;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding: 0 8rem;
  margin-bottom: 30px;
  gap: 20px;
}

.casino-container .casino-promotion{
  background: var(--eerie-black);
  height: max-content;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 200px;
  padding: 1rem 0 4rem 0;
  margin: 1rem 0;
  box-shadow: 0 0 5px 4px var(--eerie-black);
}
.casino-promotion .casino-promotion-list{
  background: #ffc600;
  padding: 1.5rem 1rem;
  border-top-left-radius: 100px;
  border-bottom-right-radius: 200px;
}




.product-container .casino-promotion-title {
  text-align: left;
  padding: 1rem 0;
}

.product-container .casino-promotion-title img{
  width: 100%;
}


.casino-show .best-promotion {
  position: relative;
  background: transparent;
  max-width: 450px;
  width: 100%;
}

.casino-list,
.top-casino {
  position: relative;
  background: #fdfff6;
  min-width: 25.5rem;
  width: 100%;
  padding: 0 20px;
  border: 1px solid var(--cultured);
  border-radius: var(--border-radius-md);
}


.sidebar-list {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 10px;
}

.sidebar-menu-list {
  line-height: 28px;
  padding: 0 0.2rem;
  width: calc(100% - 280px);
}

.sidebar-link {
  color: var(--eerie-black);
  text-transform: capitalize;
  text-overflow:initial;
  white-space: nowrap;
  overflow: hidden;
  padding: 0.5rem 10px;
  transition: 0.2s;
}

.sidebar-link:hover {
  color: var(--cultured);
}

.top-casino {
  margin: 15px 0;
  background: var(--eerie-black);
}
.top-casino .casino-title {
  color: var(--white);
  font-size: var(--fs-1);
  font-weight: var(--weight-600);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-left: 10px solid var(--ocean-blue);
  padding: 0 12px;
}
.top-menu-casino {
  display: grid;
  grid-template-columns: auto auto;
  padding: 0 15px 15px;
  gap: 20px;
}
.top-menu-casino .top-menu-casino-list:first-child .logo-img{
  height: 8rem;
  object-fit: contain;
}
.top-menu-casino-list img {
  max-width: 250px;
  width: 100%;
  padding: 10px;
  height: 80px;
  object-fit: contain;
}

/* The best Promotion  */

.slide-best-pro-link {
  max-width: 430px;
  height: 15rem;
  /* margin: 0 10px; */
  overflow: hidden;
  position: relative;
  background-image: url("../images/movies/bg-10-bonus.jpg");
  background-position: center;
  background-size: cover;
  animation: change 15s infinite ease-in-out;
  -webkit-animation: change 15s infinite ease-in-out;
}
@keyframes change {
  0% {
    background-image: url("../images/movies/bg-free.jpg");
  }
  20% {
    background-image: url("../images/movies/bg-free.jpg");
  }

  40% {
    background-image: url("../images/movies/bg-birthday.jpg");
  }

  60% {
    background-image: url("../images/movies/bg-referral.jpg");
  }

  80% {
    background-image: url("../images/movies/bg-wealthy-bonus.jpg");
  }

  100% {
    background-image: url("../images/movies/bg-easy win.jpg");
  }
}

.promotion-show {
  position: absolute;
  top: 0;
  right: 30px;
  padding: 0 50px;
}
.free-product {
  display: flex;
  position: relative;
  top: 0;
  width: 100%;
  gap: 3px;
}

.free-1st-product img {
  max-width: 54rem;
  width: 100%;
  object-position: center;
  object-fit: contain;
  transition: 0.5s;
}
.free-1st-product img:hover,
.free-2nd-product img:hover {
  scale: 1.01;
}

.free-title {
  color: var(--white);
  position: absolute;
  font-size: 2rem;
  font-weight: var(--weight-600);
  top: 10px;
  padding: 5px 20px;
  margin: 0 10px;
  background: repeating-linear-gradient(
    -45deg,
    #00000000,
    #00000000 2px,
    #00000046 0.5px,
    #00000046 4px
  );
}
.free-2nd-product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.product-2nd {
  position: relative;
}
.free-2nd-product img {
  max-width: 26.9rem;
  width: 100%;
  object-fit: contain;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
}
.product-promotion {
  margin-top: 15px;
  display: flex;
  flex-direction: column;
}

.product-promotion .promotion-container {
  position: relative;
  display: flex;
  background: #000000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgb(47, 47, 47) 67%, rgba(0, 0, 0, 1) 100%);
  width: 100%;
  margin: 5px 0;
  height: auto;
  border-radius: 10px;
  box-shadow: 2px 0 5px 4px #000000ca;
  transition: 0.2s ease-in;
  padding: 1rem 0;
  -webkit-transition: 0.2s ease-in;
  -moz-transition: 0.2s ease-in;
  -ms-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
}


.promotion-container:hover {
  scale: 1.01;
}


.product-promotion .promotion-link {
  object-position: center;
  padding: 10px 20px;
  margin: 10px 0;
}
.promotion-link img {
  max-width: 50rem;
  width: 100%;
  object-position: center;
  object-fit: contain;
}

.promotion-container .promotion-text {
  max-width: 28.5rem;
  color: var(--white);
}
.promotion-text {
  /* background: wheat; */
  display: flex;
  flex-direction: column;
  margin: 5px 5px;
  cursor: pointer;
}
.promotion-text .promotion-title {
  color: var(--sandy-yellow);
  font-size: 2rem;
  font-weight: var(--weight-500);
}

.promotion-text .product-text {
  color: var(--white);
  font-size: var(--fs-7);
}
.product-promotion .apply-btn {
  position: absolute;
  bottom: 0;
  right: 15px;
  background: var(--sandy-yellow);
  align-items: center;
  justify-content: center;
  padding: 10px 25px;
  border-radius: var(--border-radius-md);
}
.apply-btn a{
  color:var(--eerie-black);
}

/* End Casino Product Container  */

/* Top 3 Free Online Casino  */
.top-3-casino {
  padding: 0px 140px;
  justify-content: center;
  align-items: center;
  /* background: black; */
}
.top-3-casino .top-box {
  width: 100%;
  height: max-content;
  display: flex;
  flex-wrap: wrap;
  padding: 50px 10px;
  justify-content: center;
  align-items: center;
  /* height: calc(max-content - 100px); */
  background: #000000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgb(47, 47, 47) 67%, rgba(0, 0, 0, 1) 100%);
  border-radius: var(--border-radius-md);
  gap: 50px;
}

/* .top-box .box:nth-child(1) {
  background: transparent;
  color: var(--white);
  justify-content: center;
  align-items: center;
  box-shadow: none;
}

.top-box .box:nth-child(1) img {
  max-width: 150px;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
} */

.top-box .box {
  max-width: 250px;
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: column;
  padding: 0 10px 2rem 10px;
  background: #ffc600;
  text-align: center;
  justify-content: center;
  align-items: center;
  box-shadow: 3px 0 5px 10px #050505fb;
  border-radius: var(--border-radius-md);
  
}

/* .top-box .box .bet-logo{
  background :green;
  width: 15rem;
  height: auto;
  padding: 0;
} */
.top-box .box img{
  max-width: max-content;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit:contain;
}


/* .box a > img {
  max-width:20rem;
  display: block;
  width: 100%;
  margin: 0 auto;
} */
.box-container{
  height: max-content;
  
}
.box-container .box-title {
  font-size: var(--fs-1);
  font-weight: var(--weight-600);
}


/* Type of casino  */

.available {
  justify-content: center;
  align-items: center;
  padding: 2rem 9rem;
}

.available-container {
  /* border: 1px solid var(--white); */
  background: var(--eerie-black);
  border: 0;
  border-radius: var(--border-radius-md);
}

.available-title {
  display: flex;
  width: 100%;
  padding: 10px 20px;
  border: 0;
  /* border-bottom: 1px solid var(--sonic-silver); */
  justify-content: space-between;
}

.available-logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.available-logo img {
  max-width: 60px;
  width: 100%;
  height: 40px;
}

.logo-text {
  justify-content: center;
  align-items: center;
  gap: 1px;
}
.logo-text .logo-title {
  color: var(--white);
  font-size: var(--fs-1);
  font-weight: var(--weight-500);
}

.logo-text p {
  position: relative;
  color: var(--white);
  font-size: var(--fs-6);
  font-weight: var(--weight-500);
  top: -12px;
}

.ava-title {
  font-size: 2rem;
  font-weight: var(--weight-600);
  text-transform: uppercase;
  color: var(--white);
  /* background: -webkit-linear-gradient(#f7ef8a, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  /* width: max-content; */
}
.available-text p {
  font-weight: var(--weight-400);
  color: var(--white);
}

.available-list {
  background: #f5f8ff;
}

.list-text {
  position: relative;
  text-align: center;
  padding: 10px 20px;
}
.list-text .list-title {
  font-size: var(--fs-1);
  font-weight: var(--weight-600);
}
.list-text p {
  font-size: var(--fs-6);
  font-weight: var(--weight-300);
  color: var(--spanish-gray);
}

.list-logo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 25px 25px;
  border: 0;
  background: #00000D;
background: linear-gradient(180deg, rgba(0, 0, 13, 1) 0%, rgba(82, 82, 82, 1) 49%, rgba(255, 198, 0, 1) 100%);
  /* background-image: linear-gradient(to top, #ffc600 35%, var(--eerie-black) 65%); */
}

.logo-box {
  display:flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: var(--cultured);
  padding: 10px 15px;
  border: 2px solid var(--onyx);
  border-radius: var(--border-radius-md);
  transition: 0.35s;
  -webkit-transition: 0.35s;
  -moz-transition: 0.35s;
  -ms-transition: 0.35s;
  -o-transition: 0.35s;
}
.logo-box:hover {
  box-shadow: 0 0 10px 5px #e0e3eb;
}
.logo-box img {
  max-width: 120px;
  width: 100%;
  padding: 10px 15px;
  margin-bottom: 15px;
}
.logo-box p {
  font-size: var(--fs-5);
  text-transform: capitalize;
}

.logo-box span{
  font-size: var(--fs-4);
  font-weight: var(--weight-600);
  color: rgb(78, 177, 83);

}

/* Check Scam Online Casino  */

.warring-text {
  text-align: center;
}
.warring-title {
  font-size: 2.5rem;
  font-weight: var(--weight-600);
  text-transform: capitalize;
}

.warring-text p {
  color: var(--davys-gray);
}

.warring-video {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 20px 10px;
  align-items: center;
  justify-content: center;
  gap: 30px;
}

.scam-video iframe {
  width: 460px;
  height: 260px;
}

/* End Top 3 Free Online Casino  */

/* Recommended Live Casino  */
.recommend-live {
  background-color: #130f40;
  background-image: linear-gradient(315deg, #130f4063 0%, #000000ec 74%),
    url("../images/bg-casino.jpg");
  padding: 3rem 15rem;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.recommend-live .recommend-title {
  color: var(--white);
  font-size: 2rem;
  margin-bottom: 25px;
  font-weight: var(--weight-600);
  text-transform: uppercase;
}
.recommend-live .recommend-live-game {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 15px;
}

.live-game-list {
  max-width: 380px;
  width: 100%;
  /* padding: 0 10px 0; */
  border: 1px solid rgba(255, 255, 255, 0.438);
  margin-bottom: 25px;
  justify-content: center;
  align-items: center;
  border-radius: var(--border-radius-md);
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}


.live-game-list:hover {
  background: rgba(236, 194, 194, 0.37);
}

.live-game-list .game-img{
  /* background: #219150; */
  display: flex;
  justify-content: center;
}
.live-game-list .live-img {
  /* height: 50px; */
  margin-left: auto;
  margin-right: auto;
}

.live-game {
  /* background: blue; */
  padding: 0 20px 40px;
}

.live-game-title {
  color: var(--white);
  font-size: var(--fs-3);
  font-weight: var(--weight-400);
}
.live-game-text {
  font-size: var(--fs-6);
  line-height: 1.7;
  color: #b3afa6;
}
.live-game-list .recommend-link{
  display: flex;
  justify-content: space-around;
  margin: 0.5rem 0;
  align-items: center;
}
.live-game-btn {
  text-align: center;
  text-transform: uppercase;
  color: var(--eerie-black);
  background: rgba(255, 255, 255, 0.692);
  padding: 8px 10px;
  margin: 0 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.438);
  /* margin-bottom: 15px; */
  width: 100%;

  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.live-game-btn:hover {
  color: var(--white);
  background: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #56317a 100%);
  border: none;
}

/* End Recommended Live Casino  */

/* Footer tap  */

.footer {
  /* background: linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0.048)), url("../images/bg-casino.jpg"); */
  /* background: #f5f8ff; */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}


.footer .credit {
  text-transform: capitalize;
  text-align: center;
  padding: 1rem;
  font-size: 1.3rem;
  font-weight: var(--weight-500);
  color: var(--eerie-black);
}
.footer .credit span {
  color:var(--ocean-green);
}

/* Responsive  */

@media(min-width: 1920px){
  .casino-show{
    max-width: 30rem;
    width: 100%;
    /* background: #130f40; */
  }

  .sidebar-list{
    display: flex;
    justify-content: space-around;
  }

  .casino-list .sidebar-menu-list{
    padding: 0;
    width: 100%;
    /* background: #130f40; */
  }

  .promotion-show{
    width: 65%;
    height: 100%;

  }
  /* .product-promotion .promotion-container:last-child{
    display: none;
  } */
}
@media(min-width: 1600px){

  .casino-show{
    max-width: 30rem;
    width: 100%;
    /* background: #130f40; */
  }

  .sidebar-list{
    display: flex;
    justify-content: space-around;
  }

  .casino-list .sidebar-menu-list{
    padding: 0;
    width: 100%;
    /* background: #130f40; */
  }

  .promotion-show{
    width: 65%;
    /* background: #3ab5b0; */

  }
  
}

@media(max-width: 1600px){

  /* .product-promotion .promotion-container:last-child{
    display: none;
  } */
}

@media (max-width: 1520px) {
  .mobile-search-container,
  .header-search-container {
    display: none;
  }

  .dropdown_menu_category,
  .mobile-search-container {
    display: block;
  }

  /* Banner  */

  .banner{
    padding: 6rem 5rem;
  }

  .movie-title{
    max-width: 20rem;
  }

  /* Carousle  */

  .banner .carousel-box {
    min-width: 800px;
  }
  .carousel-box .carousel {
    height: 600px;
    perspective: 700px;
  }

  .carousel .carousel-item {
    width: 300px;
  }

  .carousel .carousel-item img {
    transform: translateX(1.5rem) translateY(-8rem);
  }

  /* Auto slider  */
  .auto-slider {
    height: 9.5rem;
  }
  .slider-track {
    top: 10px;
  }
  .slider-item {
    width: 200px;
  }
  .slider-item img:hover {
    transform: translateZ(10px);
    -webkit-transform: translateZ(10px);
    -moz-transform: translateZ(10px);
    -ms-transform: translateZ(10px);
    -o-transform: translateZ(10px);
  }
  /* End Auto Slider  */

  /* Casino Product Container  */

  /* .product-promotion .promotion-container:last-child{
    display: block;
  } */
  .product-container .casino-container {
    display: flex;
    padding: 0 2rem;
  }
  .casino-show {
    max-width: 350px;
    width: 100%;
  }

  .casino-list,
  .top-casino {
    max-width: 350px;
    width: 100%;
    padding: 0 10px;
  }

  .sidebar-title {
    font-size: var(--fs-2);
  }
  .sidebar-menu-list {
    width: calc(100% - 10px);
  }
  .sidebar-menu-list .sidebar-link:nth-child(1){
    font-size: var(--fs-3);
    font-weight: var(--weight-600);
    color: var(--eerie-black);
  }
  .sidebar-list .sidebar-link {
    font-size: var(--fs-7);
    padding: 0 5px;
  }
  .top-casino .casino-title {
    font-size: var(--fs-2);
  }
  .best-promotion {
    display: none;
  }

  .promotion-show {
    position: relative;
    right: auto;
    width: 100%;
    padding: 0 10px;
    margin: 0 1rem;
  }
  .free-1st-product img {
    height: auto;
  }
  .product-promotion {
    margin-top: 10px;
  }

  .promotion-text .promotion-title {
    font-size: var(--fs-1);
  }
  .promotion-text .product-text {
    font-size: var(--fs-7);
  }
  .promotion-text .apply-btn {
    bottom: 15px;
    padding: 8px 21px;
  }

  /* End Casino Product Container  */

  /* Top 3 Free Online Casino  */

  .top-3-casino {
    padding: 0px 80px;
  }
  .top-box .box {
    height: 25.5rem;
  }
  .box-container .box-text {
    font-size: var(--fs-6);
  }

  /* End Top 3 Free Online Casino  */

  /* Check Scam Online Casino  */
  .scam-video iframe {
    width: 400px;
    height: 200px;
  }

  /*End Check Scam Online Casino  */

  /* Recommended Live Casino  */

  .recommend-live {
    padding: 3rem 8rem;
  }
  .live-game-list {
    max-width: 350px;
    /* width: 100%;
    padding: 10px 15px; */
  }
  .live-game-list .live-img {
    /* height: 15rem; */
    width: 100%;
    height: auto;
  }
  .live-game-list .live-game {
    padding: 0 15px 15px;
  }
  .live-game-title {
    font-size: var(--fs-4);
  }
  .live-game-text {
    font-size: var(--fs-7);
  }
  .live-game-btn {
    padding: 8px 8px;
  }
}

@media (max-width: 1330px) {
  /* ----------------
            NOTIFICATION TOAST
        ----------------- */
  .notification-toast {
    bottom: 30px;
  }
  .notification-toast.close {
    display: none;
  }

  /* Header  */

  /* .header{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            align-items: center;
        }
        .header.active{
            background: var(--white);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);;
        } */

  .header-main .header-logo img {
    max-width: 150px;
    width: 100%;
    height: 40px;
  }

  .header-main .links .menu-title {
    font-size: var(--fs-5);
  }

  /* CAROUSEL */

  .banner .content h4 {
    font-weight: 350;
    font-size: var(--fs-4);
  }
  .banner .content p {
    font-size: var(--fs-7);
    font-weight: 10px;
  }

  .banner .content .button a {
    font-weight: 400;
  }

  .banner .carousel-box {
    min-width: 680px;
  }

  .carousel-box .carousel {
    position: relative;
    height: 450px;
    perspective: 80rem;
  }
  .carousel .carousel-item {
    width: 200px;
  }

  .carousel .carousel-item img {
    min-width: 250px;
    transform: translateX(-1rem) translateY(-6rem);
    -webkit-transform: translateX(-1rem) translateY(-6rem);
    -moz-transform: translateX(-1rem) translateY(-6rem);
    -ms-transform: translateX(-1rem) translateY(-6rem);
    -o-transform: translateX(-1rem) translateY(-6rem);
  }

  /* CAsino Product Container  */
  .casino-show .best-promotion {
    display: block;
  }
  .free-product {
    display: flex;
    flex-direction: column;
  }
  .free-2nd-product {
    background: wheat;
    display: flex;
    flex-direction: row;
  }
  .promotion-container {
    padding: 5px 2px;
  }
  /* .promotion-container:last-child{
    display: block;
  } */

  .promotion-link img {
    /* max-width: 35rem; */
    width: 100%;
  }
  .promotion-title {
    font-size: var(--fs-2);
  }
  .promotion-text .product-text {
    display: none;
  }

  /* Top 3 Free online Casino  */
  .top-3-casino {
    padding: 0px 100px;
  }

  .top-box .box {
    max-width: 300px;
    width: 100%;
    height: 25rem;
  }
  .box a > img {
    max-width: 250px;
  }
  .box .apply-btn {
    left: 11rem;
  }

  /* Warring Video  */
  .scam-video iframe {
    width: 350px;
  }

  /* Recommended Live Casino  */
  .recommend-live {
    padding: 3rem 4rem;
  }
  .live-game-list {
    max-width: 320px;
    width: 100%;
    padding: 10px 4px;
  }

  .live-game-btn {
    font-size: var(--fs-8);
  }
}

@media (max-width: 1024px) {
  .header-main .container {
    gap: 8px;
  }
  .header-main .header-logo img {
    min-width: 10rem;
    width: 100%;
    height: 40px;
  }
  .header-main .links .menu-title {
    font-size: var(--fs-5);
  }

  .header-main .login-btn {
    padding: 4px 14px;
    border-radius: var(--border-radius-sm);
    -webkit-border-radius: var(--border-radius-sm);
    -moz-border-radius: var(--border-radius-sm);
    -ms-border-radius: var(--border-radius-sm);
    -o-border-radius: var(--border-radius-sm);
  }

  main {
    background: 10px;
  }

  /* Banner Carousel  */

  .banner {
    padding: 0 50px;
    max-height: 50vh;
    height: 100%;
  }
  .banner .movie-title {
    max-width: 200px;
  }

  .banner .content h4 {
    font-weight: 300px;
    font-size: var(--fs-6);
  }
  .banner .content p {
    font-size: var(--fs-8);
  }
  .banner .content .button a {
    font-size: var(--fs-8);
  }
  .banner .carousel-box {
    min-width: 40rem;
  }
  .carousel-box .carousel {
    height: 28rem;
  }
  .carousel .carousel-item img {
    min-width: 200px;
    transform: translateX(0rem) translateY(-3.5rem);
    -webkit-transform: translateX(0rem) translateY(-3.5rem);
    -moz-transform: translateX(0rem) translateY(-3.5rem);
    -ms-transform: translateX(0rem) translateY(-3.5rem);
    -o-transform: translateX(0rem) translateY(-3.5rem);
  }

  /* Product Container  */
  .casino-list,
  .top-casino {
    max-width: 380px;
    width: 100%;
  }
  .sidebar-menu-list {
    width: calc(100% - 205px);
  }
  .casino-show .best-promotion {
    display: none;
  }

  .free-2nd-product .free-title {
    font-size: var(--fs-5);
  }


  .product-promotion .promotion-container{
    display: flex;
    flex-direction: column;
    height: max-content;
  }
  .promotion-text .promotion-title {
    font-size: 15px;
  }
  .promotion-text .apply-btn a {
    font-size: 10px;
  }

  /* Top 3 Free Online Casino   */
  .top-3-casino {
    padding: 0px 0px;
  }
  .top-box .box {
    max-width: 280px;
    width: 100%;
  }
  .box .apply-btn {
    left: 9rem;
  }

  /* Type of Casino  */

  .available {
    padding: 2rem 2rem;
  }

  .available-text p,
  .logo-text p,
  .logo-box p {
    font-size: var(--fs-8);
  }

  /* Check Scam Online Casino */
  .scam-video iframe {
    width: 300px;
    height: 160px;
  }

  /* Recommended Live Casino  */
  .recommend-live .recommend-live-game {
    gap: 10px;
  }
  .live-game-list {
    max-width: 280px;
  }
  .live-game-list .live-img {
    /* height: 180px; */
    width: 100%;
    height: auto;
  }
}

@media (max-width: 990px) {
    body{
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
  /* modal  */

  .modal-content {
    max-width: 550px;
  }
  .modal-close-btn {
    right: 5rem;
    font-size: var(--fs-7);
    padding: 3px 9px;
  }
  .modal-content .btn-peso-free a {
    font-size: var(--fs-8);
    font-weight: var(--weight-700);
    padding: 5px 10px;
  }

  /* Header  */

  .header-main .links {
    display: flex;
  }
  .header-main .links .menu-title {
    font-size: var(--fs-6);
  }

  .login-btn {
    display: none;
  }
  /* Banner Carousel  */
  .banner {
    min-height: max-content;
    padding: 5rem 2rem;
  }

  .dropdown_menu_category.open {
    height: 5.5rem;
  }

  /* Check Scam Online Casino  */
  .scam-video iframe {
    width: 250px;
  }
}
@media (max-width: 950px) {
    body{
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
  /* Dropdown Menu  */

  .dropdown_menu_category.open {
    height: 5.5rem;
  }
}

@media (max-width: 820px) {
    body{
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
  .header-main .links {
    gap: 1rem;
  }

  .header-main .header-logo img {
    max-width: 120px;
    width: 100%;
    height: 30px;
  }

  .header-main .links .menu-title {
    font-size: var(--fs-7);
  }
  .header-main .login-btn {
    display: none;
  }
  .header-main .toggle_btn {
    display: none;
    font-size: var(--fs-4);
  }
  /* Dropdown Menu list  */
  .mobile-search-btn {
    font-size: 15px;
    right: 20px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
  }

  /* Banner Carousel  */
  .banner {
    min-height: max-content;
    padding: 5rem 2rem
  }

  .banner .content h4 {
    font-size: var(--fs-7);
  }
  .banner .content h4 span i {
    padding: 1px 8px;
  }
  .banner .content p {
    font-size: var(--fs-9);
  }

  .banner .content .button a {
    font-size: var(--fs-9);
    padding: 6px 15px;
  }

  .banner .carousel-box {
    min-width: 25rem;
  }

  .carousel-box .carousel {
    height: 23rem;
    perspective: 500px;
  }
  .carousel .carousel-item img {
    height: 18rem;
    object-fit: contain;
    object-position: center;
    transform: translateX(0rem) translateY(-2.7rem);
    -webkit-transform: translateX(0rem) translateY(-2.7rem);
    -moz-transform: translateX(0rem) translateY(-2.7rem);
    -ms-transform: translateX(0rem) translateY(-2.7rem);
    -o-transform: translateX(0rem) translateY(-2.7rem);
  }

  /* Mobile dropdown  */

  .dropdown_menu_category {
    top: 45px;
  }
  /* Dropdown Menu  */

  .dropdown_menu_category.open {
    height: 5.5rem;
  }

  /* Casino Product Container  */
  .product-container {
    padding: 10px 0 0;
  }

  .promotion-show {
    padding: 0 0;
  }
  .free-1st-product img {
    width: 100%;
  }
  .free-2nd-product .free-title {
    font-size: 2rem;
  }
  .promotion-container{
    display: flex;
    flex-direction: column;
    height: 40rem;
  }
  /* .product-promotion .promotion-container:last-child{
    display: inline-block;
  } */
  .promotion-container .promotion-link img {
    width: 100%;
  }

  .promotion-text .product-text {
    display: block;
    font-size: var(--fs-9);
  }

  /* Type of Casino  */

  .available-text .ava-title {
    font-size: var(--fs-1);
  }
  .available-text p {
    font-size: var(--fs-5);
  }
  .available-logo img {
    width: 35px;
  }
  .logo-title {
    font-size: var(--fs-1);
  }

  .list-logo img {
    max-width: 80px;
    width: 100%;
  }

  /* Check Scam Online Casino  */

  .warring-title {
    font-size: 2rem;
  }
  .warring-text p {
    font-size: var(--fs-8);
  }

  .warring-video {
    grid-template-columns: auto auto;
  }
  .scam-video iframe {
    width: 360px;
    height: 200px;
  }
}

@media (max-width: 600px) {
    body{
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
  /* Modal  */
  .modal-content {
    max-width: 450px;
  }
  .modal-close-btn {
    right:4rem;
    font-size: var(--fs-8);
  }

  .modal-content .btn-peso-free a {
    font-size: var(--fs-10);
    padding: 4px 8px;
  }

  /* Header  */
  .header-main .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    gap: 10px;
  }
  .header-main i > .fa-bars {
    font-size: 25px;
    align-items: center;
  }

  .header-main .header-logo img {
    max-width: 150px;
    width: 100%;
    height: 45px;
  }

  .header-main .links {
    display: none;
  }
  .header-search-container,
  .login-btn {
    display: none;
  }

  .header-main .toggle_btn i {
    font-size: var(--fs-3);
  }

  .banner {
    display: flex;
    flex-direction: column-reverse;
    min-height: 100vh;
  }

  .banner .content {
    color: black;
    
    /* top: 100px; */
  }
  .banner .carousel-box {
    position: relative;
    min-width: 100%;
    /* top: -20px; */
  }

  .carousel .carousel-item img {
    transform: translateX(0.1rem) translateY(-2rem);
    -webkit-transform: translateX(0.1rem) translateY(-2rem);
    -moz-transform: translateX(0.1rem) translateY(-2rem);
    -ms-transform: translateX(0.1rem) translateY(-2rem);
    -o-transform: translateX(0.1rem) translateY(-2rem);
  }

  /* Mobile  */
  .dropdown_menu_category {
    top: 60px;
  }

  .mobile-menu-links {
    display: block;
  }
  .mobile-menu-container {
    gap: 1rem;
  }
  .mobile-menu-container .menu-title {
    font-size: var(--fs-5);
  }

  .mobile-menu-container .menu-title:hover {
    color: var(--ocean-blue);
  }
  .mobile-menu-container .menu-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--ocean-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: var(--transition-timing);
  }

  .mobile-menu-container .menu-title:hover::after {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
  }

  .mobile-search-container {
    display: block;
  }
  .dropdown_menu_category .dropdown_title {
    font-size: var(--fs-7);
    justify-content: center;
    align-items: center;
  }

  .dropdown_menu_category.open {
    height: 5.5rem;
  }

  .dropdown-link {
    font-size: var(--fs-8);
  }

  .mobile-search-container {
    position: relative;
    padding: 2px 10px;
  }
  .mobile-search-container .search-field {
    padding: 4px 10px;
    font-size: var(--fs-8);
  }
  .mobile-search-container .mobile-search-btn {
    position: absolute;
    padding: 4px 10px;
    font-size: var(--fs-8);
    right: 10px;
  }

  /* Casino Product container */

  .product-container .casino-container {
    display : flex;
    flex-direction: column;
    padding: 0 10px;
  }

  .free-product .free-title {
    font-size: var(--fs-1);
  }

  .product-promotion .promotion-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 30rem;
    padding: 10px 15px;
  }
  .product-promotion .promotion-link {
    width: 100%;
    padding: 0 0;
    margin: 0 0;
  }
  .product-promotion .promotion-link img {
    margin: 0 auto;
    width: 100%;
  }

  /* Top 3 Free Online Casino  */
  
  .box .apply-btn {
    position: relative;
    top: 20px;
    left: 8rem;
  }

  /* Recommended Live Casino  */
  .recommend-live .recommend-title {
    font-size: var(--fs-1);
    text-align: center;
  }

  .live-game-list {
    max-width: 225px;
    width: 100%;
  }
  .live-game-list .live-img {
    /* max-height: 120px; */
    /* height: 100%; */
    width: 100%;
    height: auto;
  }

  /* Check Scam Online Casino  */
  .scam-video iframe {
    width: 250px;
    height: 130px;
  }

  /* Footer  */
  .footer .box-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px 20px;
    margin: 0 0;
    /* justify-content: center; */
  }
}

@media (max-width: 550px) {

  /* Header Toggle Btn  */
  .header-main .toggle_btn{
    display: block;
  }
  /* Dropdown Menu  */
  .dropdown_menu_category.open {
    height: 5.5rem;
  }
  /* Casino Product Container  */
  .product-promotion .promotion-container {
    height: 17rem;
    display: flex;
    flex-direction: column;
  }

  

  /* Check Scam Online Casino  */
  .scam-video iframe {
    width: 200px;
  }
  /* Footer  */
  .payment-img {
    max-width: 300px;
  }
  .footer .credit {
    font-size: var(--fs-3);
  }
}

@media (max-width: 500px) {
  /* Carousel Banner  */

  .banner {
    display: flex;
    /* flex-direction: column; */
    min-height: 100vh;
  }

  .banner .content {
    color: black;
    /* top: 100px; */
  }
  .banner .carousel-box {
    position: relative;
    min-width: 100%;
    /* top: -8rem; */
  }

  .carousel .carousel-item img {
    transform: translateX(0.1rem) translateY(-2rem);
    -webkit-transform: translateX(0.1rem) translateY(-2rem);
    -moz-transform: translateX(0.1rem) translateY(-2rem);
    -ms-transform: translateX(0.1rem) translateY(-2rem);
    -o-transform: translateX(0.1rem) translateY(-2rem);
  }

  /* Dropdown Menu  */
  /* Dropdown Menu  */

  .dropdown_menu_category.open {
    height: 5.5rem;
  }

  /* Auto Slider  */
  .auto-slider {
    height: 6rem;
  }
  .slider-track {
    top: 10px;
  }
  .slider-item {
    width: 120px;
    height: 10px;
  }

  /* Casino Product Container  */
  .free-2nd-product .free-title {
    font-size: var(--fs-5);
  }
  /* Availbale Casino  */
  .available-text {
    display: none;
  }

  .available-logo img {
    width: 70px;
    height: auto;
  }
  .logo-text .logo-title {
    font-size: 2rem;
  }

  /* Check Scam Online Casino  */

  .warring-video {
    display: flex;
    flex-wrap: wrap;
  }
  .scam-video iframe {
    width: 300px;
    height: auto;
  }

  /* Recommended Live Casino  */

  .recommend-live {
    padding: 2rem 10px;
  }
  .live-game-list {
    max-width: 300px;
  }

  /* Footer  */

  .footer .box-container {
    padding: 0 2rem 2rem;
    justify-content: start;
  }
}
@media (max-width: 400px) {
  /* Modal  */
  .modal-content {
    max-width: 300px;
  }
  .modal-close-btn {
    right:3rem;
    font-size: var(--fs-11);
  }
  .modal-content .btn-peso-free a {
    font-size: var(--fs-11);
    padding: 1px 6px;
  }

  /* Notification  */

  .toast-banner {
    width: 50px;
    height: 60px;
  }

  .toast-message {
    font-size: var(--fs-10);
    margin-bottom: 5px;
  }
  .toast-title {
    font-size: var(--fs-7);
  }
  .toast-message {
    font-size: var(--fs-11);
  }

  /* Banner Carousel  */
  .banner {
    min-height: 94vh;
  }

  .movie-title {
    height: 6rem;
  }

  .product-promotion .promotion-container {
    height: 17rem;
    display: flex;
    flex-direction: column;
  }

  
}

@media (max-width: 389px) {
  /* Banner Carousel  */
  .banner {
    min-height: 55rem;
  }

  .movie-title {
    height: 6rem;
  }


  /* Dropdown Menu  */

  .dropdown_menu_category.open {
    height: 5.5rem;
  }

  /* Type Of Casino  */

  .available-list .list-logo {
    padding: 0 1px;
  }

  .logo-box {
    padding: 5px 10px;
  }
  .logo-box img {
    max-width: 80px;
    width: 100%;
    padding: 5px 10px;
    margin-bottom: 10px;
  }

  .product-promotion .promotion-container {
    height: 17rem;
    display: flex;
    flex-direction: column;
  }

}

@media (max-width: 300px) {
  /* Header  */

  .header-main {
    padding: 15px 5px;
  }
  .header-main .header-logo img {
    max-width: 100px;
    height: 35px;
  }

  /* Banner Carousel */
  .banner {
    height: 10rem;
    padding: 0 10px;
  }

  .movie-title {
    height: 6rem;
  }

  .banner .carousel {
    height: 250px;
    perspective: 200px;
  }

  .carousel .carousel-item img {
    max-height: 200px;
    transform: translateY(0rem);
    -webkit-transform: translateY(0rem);
    -moz-transform: translateY(0rem);
    -ms-transform: translateY(0rem);
    -o-transform: translateY(0rem);
  }

  /* Dropdown Menu  */

  .dropdown_menu_category.open {
    height: 5.5rem;
  }

  .mobile-menu-container {
    gap: 0.5rem;
  }
  .mobile-menu-container .menu-title {
    font-size: var(--fs-8);
  }

  .product-promotion .promotion-container {
    height: 17rem;
    display: flex;
    flex-direction: column;
  }

  /* Type of Casino  */
  .available-logo img {
    width: 45px;
  }

  .available .logo-title {
    font-size: var(--fs-4);
    font-weight: var(--weight-600);
  }
  .available .logo-text p {
    font-size: var(--fs-11);
  }
  .list-text {
    padding: 1px 0 10px;
  }
  .available-list .list-title {
    font-size: var(--fs-5);
  }
  .available-list .list-text p {
    font-size: var(--fs-10);
  }

  .available-list .list-logo {
    padding: 0px 0px 15px;
  }
  .available-list .logo-box img {
    max-width: 60px;
    width: 100%;
    margin: 0 auto;
  }

  /* Check Scam ONline Casino  */
  .scam-video iframe {
    width: 250px;
  }
  /* Footer  */
  .footer .box-container {
    padding: 0 1rem;
  }
  .footer .box {
    line-height: 5px;
    padding: 0 10px;
  }
  .footer .box-container .box h3 {
    padding: 0.1rem 0;
  }
  .footer .box-container .box a {
    padding: 1rem 0;
    font-size: var(--fs-6);
  }

  .footer .box-container .box a:hover i {
    padding-right: 1rem;
  }
  .payment-img {
    padding: 1rem 0 0;
  }

  .footer .credit {
    font-size: var(--fs-8);
  }
}