.custom-toggler {
  border: 2px solid red;
  padding: 5px;
  outline: none;
  background: none; /* Removes any background color */
}

.custom-toggler .navbar-toggler-icon {
  position: relative;
  display: block;
  width: 30px;
  height: 24px;
  background-image: none; /* Removes Bootstrap's default icon */
}

.custom-toggler .navbar-toggler-icon::before,
.custom-toggler .navbar-toggler-icon::after,
.custom-toggler .navbar-toggler-icon span {
  content: '';
  position: absolute;
  width: 30px;
  height: 3px;
  background-color: red;
  transition: all 0.3s ease-in-out;
}

.custom-toggler .navbar-toggler-icon::before {
  top: 0;
}

.custom-toggler .navbar-toggler-icon span {
  top: 50%;
  transform: translateY(-50%);
}

.custom-toggler .navbar-toggler-icon::after {
  bottom: 0;
}

.custom-toggler.collapsed .navbar-toggler-icon::before {
  transform: rotate(45deg);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.custom-toggler.collapsed .navbar-toggler-icon::after {
  transform: rotate(-45deg);
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

.custom-toggler.collapsed .navbar-toggler-icon span {
  opacity: 0;
}

/* Override Bootstrap's default background-image */
.navbar-toggler-icon {
  background-image: none !important; /* Important to remove Bootstrap's default icon */
}

/* logo */
@media (min-width: 992px) { /* Adjust based on your breakpoint */
  .loading-content {
      display: flex;
      justify-content: center; /* Center the logo horizontally */
      width: 100%; 
      /* Take full width */
  }

  .loading-overlay {
      position: absolute; /* Ensure it's positioned correctly */
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      display: flex; 
      align-items: center; /* Center the logo vertically */
  }
}
.logo-image {
  transition: box-shadow 0.3s ease-in-out; /* Smooth transition for the shadow effect */
}

.logo-image:hover {
  box-shadow: 0 0 20px 5px rgba(255, 215, 0, 0.8); /* Gold shadow effect */
}

 /* Custom Styles */
 .promo-image {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* Smooth scaling effect */
}

.promo-image:hover {
  transform: scale(1.05); /* Scale effect on hover */
}



  /* caraousel */
 /* Default styles (for desktop and larger screens) */
.carousel-inner img {
  border-radius: 10px;
  height: 400px; /* Larger height for desktop */
  width: 100%;
  object-fit: cover;
  border: 5px solid transparent;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

/* Styles for mobile screens */
@media (max-width: 768px) {
  .carousel-inner img {
      height: 120px; /* Smaller height for mobile */
  }
}

.carousel-inner img:hover,
.carousel-inner img:active {
  border-color: #ffd700;
  border-style: solid;
  border-width: 3px;
  transform: scale(0.90);
}


/* text change */

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    0% { border-color: transparent; }
    50% { border-color: white; }
    100% { border-color: transparent; }
}

/* imagegirls */
.imggirls {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically if needed */
  height: auto; /* Adjust height based on content */
  width: 100%; /* Full width of the container */
  padding: 0 20px; /* Optional: add padding if needed */
  box-sizing: border-box; /* Include padding in width */
  margin-bottom: 50px; /* Adds space between this div and the next one */
}

.imggirls img {
  width: 100%; /* Default to full width */
  height: auto; /* Maintain aspect ratio */
  max-width: 800px; /* Adjust to desired maximum width */
}

@media (max-width: 1024px) {
  .imggirls {
      height: auto; /* Adjust height for smaller screens */
      padding: 20px;
      margin-bottom: 30px; /* Ensure enough space below on smaller screens */
  }

  .imggirls img {
      max-width: 100%; /* Ensure image fits smaller screens */
  }
}

/* Default styles for .imggirl2 */
.imggirl2 {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically if needed */
  height: auto; /* Adjust height based on content */
  width: 100%; /* Full width of the container */
  padding: 0 20px; /* Optional: add padding if needed */
  box-sizing: border-box; /* Include padding in width */
  margin-bottom: 50px; /* Adds space between this div and the next one */
}

/* Styles for .imggirl2 image */
.imggirl2 img {
  width: 100%; /* Default to full width */
  height: auto; /* Maintain aspect ratio */
  max-width: 800px; /* Adjust to desired maximum width */
}

/* Media query for screens smaller than 1024px (e.g., tablets and mobile devices) */
@media (max-width: 1024px) {
  .imggirl2 {
    height: auto; /* Adjust height for smaller screens */
    padding: 20px;
    margin-bottom: 30px; /* Ensure enough space below on smaller screens */
  }

  .imggirl2 img {
    max-width: 100%; /* Ensure image fits smaller screens */
  }
}

/* Hide .imggirl2 for screens 1024px and larger (laptops and larger) */
@media (min-width: 1024px) {
  .imggirl2 {
    display: none; /* Hide for laptops and larger screens */
  }
}

/* Default styles for .bgimage */
.bgimage {
  background-image: url('ong2.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  height: auto; /* Default height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Default styles for .container-style */
.container-style {
  margin: none;
  background-color: #Fdd980;
  height: auto; /* Default height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px; /* Add padding for better spacing */
  text-align: center; /* Center text for better readability */
}

/* Media query for screens 1024px and larger (laptops and larger) */
@media (min-width: 1024px) {
  .bgimage.laptop-bg {
    height: 100vh; /* Adjust for laptops and larger screens */
  }

  .container-style {
    height: 40vh; /* Adjust for laptops and larger screens */
    padding: 20px; /* More padding for larger screens */
  }
}

/* Styles for screens less than 768px (mobile) */
@media (max-width: 767px) {
  .bgimage {
    background-image: none; /* Hide background image on mobile */
    height: auto; /* Adjust height for mobile screens */
  }

  .container-style {
    height: auto; /* Adjust container height for mobile screens */
    padding: 15px; /* Adjust padding for mobile screens */
  }

  .text-center {
    text-align: center; /* Ensure text is centered on mobile */
  }

  .p-5 {
    padding: 1rem; /* Adjust padding for headings on mobile */
  }

  #animated-button {
    font-size: 1rem; /* Adjust button font size for mobile */
    padding: 10px 20px; /* Adjust button padding for mobile */
  }
}

/* Button animation */
#animated-button {
  opacity: 0; /* Start hidden */
  transform: translateX(100px); /* Start position off-screen */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

#animated-button.animate {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Move to original position */
}

/* Button animation */
#animated-button {
  opacity: 0; /* Start hidden */
  transform: translateX(100px); /* Start position off-screen */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

#animated-button.animate {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Move to original position */
}



/* image ke niche button */
#animated-button {
  opacity: 0; /* Start hidden */
  transform: translateX(100px); /* Start position off-screen */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

#animated-button.animate {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Move to original position */
}

/* payment */
/* payment */

/* Payments Partners Section */
.payments-partners {
  text-align: center;
  margin-top: 2rem;
}

.payments-partners h4 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: gold;
}

.payments-logos {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.payments-logos img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.payments-logos img:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* footer */

/* Background gradient */
.bg-gradient-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background: linear-gradient(to top right, #000000, #434343);
  opacity: 0.3;
  z-index: -1;
}

/* Footer spacer */
.footer-spacer {
  height: 100px;
  background-color: #111111;
}

/* Footer */
.footer {
  background-color: #111111;
  color: #e0e0e0;
  padding: 4rem 0;
  border-top: 1px solid #444444;
}

.footer h4 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.footer h5 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #ff9800;
}

.footer a {
  color: #e0e0e0;
  text-decoration: none;
  transition: color 0.3s;
}

.footer a:hover {
  color: #ff9800;
  text-decoration: underline;
}

.footer-icon {
  font-size: 2.5rem;
  color: #ff9800;
  margin-right: 1rem;
  transition: color 0.3s;
}

.footer-icon:hover {
  color: #ffffff;
}





.footer .newsletter input,
.footer .newsletter button {
  border-radius: 0.5rem;
}

.footer .newsletter input {
  border: 1px solid #444444;
  padding: 0.75rem 1.25rem;
  background-color: #333333;
  color: #ffffff;
}

.footer .newsletter button {
  border: none;
  background-color: #ff9800;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  transition: background-color 0.3s;
}

.footer .newsletter button:hover {
  background-color: #e68900;
}

.footer-card {
  background: #222222;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 1.5rem;
  transition: transform 0.3s, box-shadow 0.3s;
}

.footer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.footer-card .card-icon {
  font-size: 2.5rem;
  color: #ff9800;
  margin-bottom: 1rem;
}

/* Basic styling for the container */
.social-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding: 20px;
  background-color: #1D1D1D;
}

/* Styling for the social media icons */
.social-icon {
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 2px solid gold;
  border-radius: 50%;
  color: gold;
  font-size: 50px;
  transition: all 0.3s ease-in-out;
}

/* Hover effect to change icon color */
.social-icon:hover {
  background-color: gold;
  color: #1D1D1D;
}

/* Responsive design for smaller devices */
@media (max-width: 768px) {
  .social-container {
      gap: 75px;
  }
  
  .social-icon {
      width: 75px;
      height: 75px;
      font-size: 50px;
  }
}

@media (max-width: 480px) {
  .social-container {
      gap: 30px;
  }

  .social-icon {
      width: 75px;
      height: 75px;
      font-size: 50px;
  }
}


/* Loading Animation */
.loading-animation {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* When in view: fully visible and in place */
.loading-animation.visible {
  opacity: 1;
  transform: translateY(0);
}


/* scroll */

/* horizontal scroll bar */
.scroll-container {
  overflow-x: hidden;
  /* Hide the scrollbar */
  overflow-y: hidden;
  white-space: nowrap;
  background-color: #000;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  text-align: center;
  position: relative;
  /* Necessary for animation */
}

.scroll-content {
  display: inline-flex;
  /* Inline flex for horizontal scrolling */
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 100%;
  animation: scroll 15s linear infinite;
  /* Add animation for scrolling */
}

.button {
  color: white;
  flex: 0 0 auto;
  height: 50px;
  width: fit-content;
  margin: 5px;
  border: none;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  background-color: transparent;
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }

  100% {
      transform: translateX(-100%);
  }
}

@media (max-width: 1200px) {
  .scroll-container {
      text-align: center;
  }
}

@media (max-width: 768px) {
  .button {
      margin: 3px;
      height: 45px;
  }
}

@media (max-width: 480px) {
  .button {
      margin: 2px;
      height: 40px;
  }

  .scroll-content {
      justify-content: flex-start;
  }
}

.scroll-container::-webkit-scrollbar {
  height: 10px;
  background-color: #000;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #ffd700;
  border-radius: 10px;
}

/* customer */

.support-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px;
  color: #f9b233;
}

.text-container {
  max-width: 50%;
}

.text-container h1 {
  font-size: 3em;
  margin-bottom: 20px;
}

.text-container p {
  font-size: 1.2em;
  margin-bottom: 20px;
}

.text-container .whatsapp-only span {
  color: rgb(0, 241, 36);
  font-weight: bold;
}

.contact-buttons {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.contact-buttons button {
  background-color: #f9b233;
  border: none;
  padding: 15px 30px;
  color: #000;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1.2em;
  transition: transform 0.3s ease;
}

.contact-buttons button:hover {
  transform: scale(1.1);
}

.image-container {
  position: relative;
  max-width: 45%;
}

.image-container img {
  max-width: 100%;
  height: auto;
}

.image-container .cards {
  position: absolute;
  bottom: -20px;
  right: -20px;
  display: flex;
  gap: 10px;
}

.image-container .cards img {
  max-width: 60px;
  height: auto;
  transform: rotate(-10deg);
}

.image-container .cards img:nth-child(2) {
  transform: rotate(0deg);
}

.image-container .cards img:nth-child(3) {
  transform: rotate(10deg);
}

@media screen and (max-width: 768px) {
  .support-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
  }

  .text-container {
      max-width: 100%;
      margin-bottom: 20px;
  }

  .image-container {
      max-width: 80%;
  }

  .image-container .cards img {
      max-width: 40px;
  }
}

.horizontal-scroll {
  width: 99%; /* Full screen width */
  overflow: hidden;
  position: relative;

  background-color: #1D1D1D; 
   padding: 10px 0; /* Padding to match full screen effect */
}

.image-container2 {
  
  display: flex;
  animation: scroll 15s linear infinite;
  gap: 6vw; /* Space between images */
  width: max-content; /* Ensures the images scroll continuously */
}

.image-container2 img {
  
  height:15vh; /* Image height */
  width: 10vw; /* Maintain aspect ratio */
  border: 2px solid #FFD700; /* Gold border */
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.7); /* Gold glow effect */
  transition: transform 0.3s ease;
}

/* Hover effect for images */
.image-container2 img:hover {
  transform: scale(1.1);
  box-shadow: 0px 0px 15px 5px gold; /* Gold glowing effect */
}

/* Infinite scroll animation */
@keyframes scroll {
  0% {
      transform: translateX(100%);
  }
  100% {
      transform: translateX(-100%);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .image-container2 img {
      height: 1vh;
      width: auto; /* Adjust height for tablets */
  }
}

@media (max-width: 480px) {
  .image-container2 img {
      height: 10vh;
      width: auto; /* Adjust height for mobile */
  }
}
/* Main animation settings remain the same */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .image-container2 {
    animation: scroll 15s linear infinite; /* Faster scroll for smaller screens */
  }
  
  .image-container2 img {
    height: 12vh; /* Adjust image size */
    width: auto;
  }
}

@media (max-width: 480px) {
  .image-container2 {
    animation: scroll 8s linear infinite; /* Faster scroll for even smaller screens */
  }

  .image-container2 img {
    height: 10vh; /* Smaller image size for mobile */
    width: auto;
  }
}


/* whatsapp */

.button-container {
  position: relative;
}

.sparkling-button {
  padding: 10px 20px;
  /* Adjust padding as needed */
  font-size: 1rem;
  /* Adjust font size as needed */
  font-weight: bold;
  color: #fff;
  background: linear-gradient(45deg, #b38600, #ffd700);
  border: 2px solid #ffd700;
  border-radius: 20px;
  /* Adjust border-radius as needed */
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
  /* Adjust shadow as needed */
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Space between icon and text */
}

.sparkling-button .whatsapp-icon {
  width: 24px;
  /* Adjust size of the icon */
  height: 24px;
  /* Adjust size of the icon */
}

.sparkling-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  /* Adjust border-radius as needed */
  background: transparent;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.7);
  animation: sparkle 2s infinite linear;
  pointer-events: none;
}

.sparkling-button:hover {
  background: linear-gradient(45deg, #ffd700, #b38600);
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8);
}

@keyframes sparkle {
  0% {
      box-shadow:
          0 0 8px 2px rgba(255, 255, 255, 0.7),
          0 0 16px 4px rgba(255, 255, 255, 0.7),
          0 0 24px 6px rgba(255, 255, 255, 0.7),
          0 0 32px 8px rgba(255, 255, 255, 0.7);
  }

  50% {
      box-shadow:
          8px 8px 8px 2px rgba(255, 255, 255, 0.7),
          16px 16px 16px 4px rgba(255, 255, 255, 0.7),
          24px 24px 24px 6px rgba(255, 255, 255, 0.7),
          32px 32px 32px 8px rgba(255, 255, 255, 0.7);
  }

  100% {
      box-shadow:
          0 0 8px 2px rgba(255, 255, 255, 0.7),
          0 0 16px 4px rgba(255, 255, 255, 0.7),
          0 0 24px 6px rgba(255, 255, 255, 0.7),
          0 0 32px 8px rgba(255, 255, 255, 0.7);
  }
}

/* Responsive Design */
@media (max-width: 600px) {
  .sparkling-button {
      padding: 8px 16px;
      /* Adjust padding as needed */
      font-size: 0.9rem;
      /* Adjust font size as needed */
  }

  .sparkling-button .whatsapp-icon {
      width: 20px;
      /* Adjust size for smaller screens */
      height: 20px;
      /* Adjust size for smaller screens */
  }

  .sparkling-button::before {
      box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.7);
  }
}
/* Initial state with loading effect */
.support-container.loading {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Loaded state */
.support-container.loaded {
  opacity: 1;
  transform: translateY(0);
}


/* images 3 */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0% { border-color: transparent; }
  50% { border-color: white; }
  100% { border-color: transparent; }
}

#animated-text2 {
  display: inline;
  overflow: hidden;
  white-space: nowrap;
  color: rgb(215, 197, 94); /* Change text color to white */
  border-right: 2px solid white; /* Change border color to white */
  animation: blink 0.75s step-end infinite;
  font-family: monospace;
}

.typing-animation {
  animation: typing 3s steps(30, end) 1s forwards;
}

/* Container for the images */
.gamesimages3 {
display: flex;
flex-wrap: wrap;
gap: 10px; /* Optional: spacing between images */
justify-content: center; /* Center images horizontally */
}

/* Images within the container */
.gamesimages3 img {
width: calc(33.33% - 10px); /* 3 images per row for large screens */
height: auto;
opacity: 0; /* Initially hidden */
transform: translateY(50px); /* Positioned lower for animation */
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.3s ease; /* Add transition for filter */
}

/* Make images visible when scrolled into view */
.gamesimages3.visible img {
opacity: 1; /* Make visible when scrolled into view */
transform: translateY(0); /* Move into place */
}

/* Golden glow effect on hover */
.gamesimages3 img:hover {
filter: drop-shadow(0 0 10px gold); /* Golden glow effect */
}

/* Adjust for laptops */
@media (min-width: 1024px) and (max-width: 1440px) {
.gamesimages3 img {
  width: calc(25% - 10px); /* 4 images per row for laptops */
  height: 50vh;
}
}

/* Adjust for smaller screens */
@media (max-width: 768px) {
.gamesimages3 img {
  width: calc(50% - 10px); /* 2 images per row for small screens */
}
}








/* Prevent text selection */
/* body {
  -webkit-user-select: none; 
  -moz-user-select: none;   
     -ms-user-select: none;     
    user-select: none;} */

/* html {
  touch-action: manipulation;
} */

.promo-image {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease; /* Smooth scaling effect */
  border: 5px solid #ffd700; /* Gold border */
  border-radius: 10px; /* Rounded corners */
}

.promo-image:hover {
  transform: scale(1.05); /* Scale effect on hover */
  box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.7); /* Gold shadow effect on hover */
}

.promo-container {
  margin-bottom: 30px; /* Space between images */
}

.heading {
  color: #ffd700;
  font-size: 2rem;
  font-weight: bold;
}

.subheading {
  color: rgb(187, 32, 83);
  font-size: 2rem;
}