body {
        background-color: #1c1c1c;
        color: #f8f9fa;
        font-family: Arial, sans-serif;
      }

      /* Navbar styling */
      .navbar {
        background-color: #000;
      }

      .navbar .nav-link {
        color: #f8f9fa !important;
        margin-left: 15px;
      }

      .navbar .nav-link.active,
      .navbar .nav-link:hover {
        color: #ebcf74 !important;
      }
      
      .dropdown-menu {
        background: #000000;
        color: #fff;
        border: 1px solid #363636;
      }
      
      .dropdown-item {
           background: #000000;
           color: #ffffff;
      }
      
      .dropdown-item:focus, .dropdown-item:hover {
            color: #ebcf74 !important;
            background-color: #1e1e1e !important;
      }

      /* Hero Section styling */
      .hero-banner {
        background-image: url("../assete/hero-bg-1.webp"); /* Replace with your background image URL */
        background-size: cover;
        background-position: center;
        color: #ebcf74;
        padding: 100px 0;
        position: relative;
      }

      .hero-content {
        max-width: 600px;
      }

      .hero-text h1 {
        font-size: 3rem;
        color: #ebcf74;
        font-weight: bold;
      }

      .hero-text p {
        color: #f8f9fa;
        font-size: 1.1rem;
      }

      .hero-buttons .btn {
        color: #ebcf74;
        background-color: transparent;
        border: 2px solid #ebcf74;
        border-radius: 30px;
        margin: 10px 0;
        width: 100%;
        max-width: 250px;
      }

      .btn {
        color: #ebcf74;
        background-color: transparent;
        border: 2px solid #ebcf74;
      }

      .hero-buttons .btn:hover,
      .btn:hover {
        background-color: #ebcf74;
        color: #000;
      }

      /* Player Image styling */
      .hero-player-image {
        width: 350px;
        height: 378px;
        object-fit: cover;
        max-width: 500px;
      }

      .text-warning {
        color: #ebcf74 !important;
      }

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

      .carousel-item img {
        position: absolute;
        top: 0;
        left: 0;
        min-height: 300px;
        object-fit: cover;
      }

      .happy-circle {
        width: 239px;
        height: 239px;
        border-width: 6px !important;
      }

      .feature-card {
        margin: 0 70px !important;
      }

      .bg-site2 {
        background-color: #0088CC;
      }

      .available-sites {
         background-image: url("../assete/banner-2.jpg");
             background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
      }

    .customer-support {
      background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('../assete/customer-support-bg-2.png');
      background-size: cover;
      background-position: center;
      color: white;
    }
    .btn-whatsapp {
      background-color: #ff8500;
      color: white;
      border: none;
      font-weight: bold;
    }
    .btn-whatsapp:hover {
      background-color: #e57300;
      color: white;
    }
    .icon-whatsapp {
      margin-right: 5px;
    }
    .safe-secure {
      background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)), url('../assete/safe-secure.png');
      background-size: cover;
      background-position: center;
      color: white;
    }
    .guarantee-badge {
      max-width: 200px;
    }

    .instant-withdrawal {
      background: linear-gradient(to right, rgb(0 0 0 / 50%), rgb(0 0 0 / 90%)), url(../assete/banner-bg-3.webp);
      background-size: cover;
      background-position: center;
      color: white;
    }
    .service-badge {
  max-width: 100%;
  height: auto;
}
    .how-to-bet {
      background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)), url('../assete/bg3.webp');
      background-size: cover;
      background-position: center;
      color: white;
    }
    .icon {
      max-width: 100px;
      margin-bottom: 10px;
    }
    .btn-whatsapp {
      background-color: #ff8500;
      color: white;
      border: none;
      font-weight: bold;
      font-size: 18px;
      padding: 10px 20px;
    }
    .btn-whatsapp:hover {
      background-color: #e57300;
    }
    .icon-whatsapp {
      margin-right: 8px;
    }
    .how-to-bet h2 {
      font-size: 3.5rem;
      line-height: 1.2;
    }
    .how-to-bet p {
      font-size: 1.1rem;
      color: #f0f0f0;
    }
    .how-to-bet .highlight {
      color: #ff8500;
      font-weight: bold;
    }
    .how-to-bet hr {
      border-top: 2px solid #ff8500;
      width: 60px;
      margin: 1rem 0;
    }
    .how-to-bet .whatsapp-note {
      font-size: 1.2rem;
      color: #ff8500;
    }
    
    /* new hero css starts*/
    .hero {
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 6%;
  color: #fff;
  position: relative;

  background: url('../assete/fairplay-hero.png') no-repeat center/cover;
}

/* Overlay for readability */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.1));
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

/* Heading */
.hero h1 {
  font-size: 64px;
  font-weight: 800;
  line-height: 1.1;
}

.hero h1 span {
  background: linear-gradient(45deg, #ffd700, #ff9800);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Text */
.hero p {
  font-size: 18px;
  margin: 20px 0 30px;
  color: #f1f1f1;
}

/* Buttons */
.hero-buttons {
  display: flex;
  gap: 15px;
}

/* Base button */
.btn {
  padding: 14px 30px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
  display: inline-block;
  text-align: center;
}

/* Deposit */
.deposit {
  background: linear-gradient(45deg, #000000, #00c853);
  /*color: #000;*/
  box-shadow: 0 0 20px rgba(0,255,100,0.6);
}

/* Withdrawal */
.withdraw {
  border: 2px solid #ffd700;
  color: #ffd700;
}

/* Hover */
.btn:hover {
  transform: scale(1.05);
}

.desktop-only { display: flex; }

/* MOBILE CTA (hidden desktop) */
.mobile-cta {
  display: none;
}

/* 📱 MOBILE */
@media (max-width: 768px) {

  .hero {
    height: auto;
    padding: 80px 20px 120px;
    text-align: center;
    background-position: right center;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero p {
    font-size: 15px;
  }

  /* Hide desktop buttons */
  .desktop {
    display: none;
  }
  
  .desktop-only { display: none; }
  .mobile-cta { display: flex; }

  /* Sticky CTA */
  .mobile-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000;
    padding: 10px;
    gap: 10px;
    z-index: 999;
  }

  .mobile-cta .btn {
    flex: 1;
    padding: 16px;
    font-size: 16px;
    border-radius: 8px;
  }

  .deposit {
    box-shadow: none;
  }
}


/* new hero css ends */

.gradient-bg-com {
    background: radial-gradient(circle at top left, #1a2a6c, #b21f1f, #fdbb2d);
}