/* ClubMy Main Stylesheet */



:root {



  --primary-color: #7c3aed;



  --secondary-color: #f59e0b;



  --secondary-color-rgb: 245, 158, 11;

  /* RGB values for secondary color */



  --dark-bg: #0f172a;



  --light-text: #f8fafc;



  --accent-color: #10b981;



}







* {



  margin: 0;



  padding: 0;



  box-sizing: border-box;



}







html {



  overflow-x: hidden;



  width: 100%;



}







body {



  font-family: 'Poppins', sans-serif;



  background-color: var(--dark-bg);



  color: var(--light-text);



  line-height: 1.6;



  width: 100%;



  overflow-x: hidden;



  max-width: 100vw;



}







.container {



  width: 100%;



  max-width: 1200px;



  margin: 0 auto;



  padding: 0 20px;



  box-sizing: border-box;



  overflow-x: hidden;



}







/* Header */



header {



  background-color: rgba(15, 23, 42, 0.95);



  padding: 20px 0;



  position: sticky;



  top: 0;



  z-index: 100;



  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);



}







.header-container {



  display: flex;



  justify-content: space-between;



  align-items: center;



  overflow: visible;



}







.logo {



  font-size: 28px;



  font-weight: 700;



  color: var(--light-text);



  text-decoration: none;



}







.logo span {



  color: var(--secondary-color);



}







nav ul {



  display: flex;



  list-style: none;



}







nav ul li {



  margin-left: 20px;



}







/* Dropdown Menu Styles */



nav ul li.dropdown {



  position: relative;



}







nav ul li.dropdown .dropdown-toggle {



  display: flex;



  align-items: center;



  gap: 5px;



}







nav ul li.dropdown .dropdown-toggle i {



  font-size: 12px;



  transition: transform 0.3s ease;



}







nav ul li.dropdown:hover .dropdown-toggle i {



  transform: rotate(180deg);



}







nav ul li.dropdown .dropdown-menu {



  position: absolute;



  top: 100%;



  left: 0;



  background-color: rgba(30, 41, 59, 0.95);



  min-width: 180px;



  border-radius: 8px;



  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);



  padding: 10px 0;



  opacity: 0;



  visibility: hidden;



  transform: translateY(10px);



  transition: all 0.3s ease;



  z-index: 100;



  border: 1px solid rgba(255, 255, 255, 0.05);



}







nav ul li.dropdown:hover .dropdown-menu {



  opacity: 1;



  visibility: visible;



  transform: translateY(0);



}







nav ul li.dropdown .dropdown-menu li {



  margin: 0;



  padding: 0;



  display: block;



}







nav ul li.dropdown .dropdown-menu li a {



  padding: 10px 20px;



  display: block;



  color: var(--light-text);



  font-size: 14px;



  transition: all 0.2s ease;



}







nav ul li.dropdown .dropdown-menu li a:hover {



  background-color: rgba(124, 58, 237, 0.2);



  color: var(--secondary-color);



}







nav ul li a {



  color: var(--light-text);



  text-decoration: none;



  font-weight: 500;



  transition: color 0.3s;



}







nav ul li a:hover {



  color: var(--secondary-color);



}







/* Game Categories Navigation */



.game-nav {



  display: flex;



  justify-content: space-between;



  align-items: center;



  flex-wrap: wrap;



  margin: 30px 0;



  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9));



  border-radius: 15px;



  padding: 15px 20px;



  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);



  border: 1px solid rgba(255, 255, 255, 0.05);



  position: relative;



  overflow: hidden;



  z-index: 2;



}







.game-nav::before {



  content: '';



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background-image:



    radial-gradient(circle at 20% 30%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),



    radial-gradient(circle at 80% 70%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);



  opacity: 0.6;



  z-index: -1;



}







.game-nav-item {



  display: flex;



  flex-direction: column;



  align-items: center;



  text-decoration: none;



  padding: 12px 15px;



  border-radius: 12px;



  transition: all 0.3s ease;



  position: relative;



  flex: 1;



  min-width: 80px;



  max-width: 120px;



  cursor: default;



}







.game-nav-item::before {



  content: '';



  position: absolute;



  bottom: -3px;



  left: 50%;



  transform: translateX(-50%);



  width: 0;



  height: 3px;



  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));



  border-radius: 3px;



  transition: width 0.3s ease;



}







.game-nav-item:hover {



  transform: translateY(-5px);



  background-color: rgba(30, 41, 59, 0.6);



}







.game-nav-item:hover::before {



  width: 70%;



}







.game-nav-item img {



  width: 40px;



  height: 40px;



  object-fit: contain;



  margin-bottom: 8px;



  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));



  transition: transform 0.3s ease;



}







.game-nav-item:hover img {



  transform: scale(1.15);



}







.game-nav-item span {



  color: var(--light-text);



  font-size: 14px;



  font-weight: 500;



  text-align: center;



  transition: color 0.3s ease;



}







.game-nav-item:hover span {



  color: var(--secondary-color);



}







/* Active state for game nav */



.game-nav-item.active {



  background-color: rgba(124, 58, 237, 0.2);



}







.game-nav-item.active::before {



  width: 70%;



}







.game-nav-item.active span {



  color: var(--secondary-color);



}







/* Responsive styles for game nav */



@media (max-width: 768px) {



  .game-nav {



    padding: 10px;



    margin: 20px 0;



  }







  .game-nav-item {



    padding: 10px;



    min-width: 70px;



  }







  .game-nav-item img {



    width: 32px;



    height: 32px;



  }







  .game-nav-item span {



    font-size: 12px;



  }



}







@media (max-width: 480px) {



  .game-nav {



    justify-content: center;



    gap: 5px;



  }







  .game-nav-item {



    min-width: 60px;



    max-width: 80px;



    padding: 8px 5px;



  }







  .game-nav-item img {



    width: 28px;



    height: 28px;



    margin-bottom: 5px;



  }







  .game-nav-item span {



    font-size: 11px;



  }



}







.auth-buttons {



  display: flex;



  gap: 15px;



}







/* Enhanced Buttons */



.btn {



  padding: 12px 24px;



  border-radius: 8px;



  font-weight: 600;



  text-decoration: none;



  transition: all 0.3s;



  position: relative;



  overflow: hidden;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  letter-spacing: 0.5px;



  z-index: 1;



}







.btn:before {



  content: '';



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background: rgba(255, 255, 255, 0.1);



  z-index: -1;



  transform: translateY(100%);



  transition: transform 0.3s ease;



}







.btn:hover:before {



  transform: translateY(0);



}







.btn-primary {



  background: linear-gradient(135deg, var(--primary-color), #6025c0);



  color: white;



  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);



}







.btn-secondary {



  background: linear-gradient(135deg, var(--secondary-color), #e67e00);



  color: white;



  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);



}







.btn-glow {



  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));



  color: white;



  box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);



  position: relative;



  z-index: 1;



}







.btn-glow:after {



  content: '';



  position: absolute;



  top: -2px;



  left: -2px;



  right: -2px;



  bottom: -2px;



  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));



  z-index: -1;



  filter: blur(10px);



  opacity: 0;



  transition: opacity 0.3s;



  border-radius: 10px;



}







.btn-glow:hover:after {



  opacity: 0.7;



}







.btn-shine {



  background: linear-gradient(135deg, var(--secondary-color), #e67e00);



  color: white;



  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);



  position: relative;



  z-index: 1;



  overflow: hidden;



}







.btn-shine:before {



  content: '';



  position: absolute;



  top: -50%;



  left: -50%;



  width: 200%;



  height: 200%;



  background: rgba(255, 255, 255, 0.2);



  transform: rotate(45deg);



  z-index: -1;



  transition: all 0.5s;



  animation: shine-effect 3s infinite;



}







@keyframes shine-effect {



  0% {



    left: -50%;



  }



  100% {



    left: 150%;



  }



}







.btn:hover {



  transform: translateY(-3px);



  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);



}







.arrow-icon {



  margin-left: 8px;



  transition: transform 0.3s;



  display: inline-block;



  font-size: 14px;



}







.btn:hover .arrow-icon {



  transform: translateX(4px);



}







/* Hero Section */



.hero {



  background-image: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.9)), url('../images/hero-bg.jpg');



  background-size: cover;



  background-position: center;



  padding: 100px 0;



  text-align: center;



}







.hero h1 {



  font-size: 48px;



  margin-bottom: 20px;



  color: white;



  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);



  animation: fadeInUp 0.8s ease;



}







.hero p {



  font-size: 20px;



  max-width: 800px;



  margin: 0 auto 30px;



  color: rgba(255, 255, 255, 0.9);



  animation: fadeInUp 0.8s 0.2s ease both;



}







@keyframes fadeInUp {



  from {



    opacity: 0;



    transform: translateY(20px);



  }



  to {



    opacity: 1;



    transform: translateY(0);



  }



}







/* Promo Banner */



.promo-banner {



  padding: 50px 0;



  background-color: #0f172a;



  position: relative;



  overflow: hidden;



}







.promo-slider {



  position: relative;



  border-radius: 15px;



  overflow: hidden;



  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);



}







.promo-slides {



  position: relative;



  height: 350px;



}







.promo-slide {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  opacity: 0;



  transition: opacity 0.5s ease;



  display: none;



}







.promo-slide.active {



  opacity: 1;



  display: block;



}







.promo-content {



  display: flex;



  height: 100%;



  background: linear-gradient(135deg, #1e293b, #0f172a);



}







.promo-text {



  flex: 1;



  padding: 40px;



  display: flex;



  flex-direction: column;



  justify-content: center;



}







.promo-title {



  font-size: 32px;



  font-weight: 700;



  margin-bottom: 20px;



  color: white;



  position: relative;



  display: inline-block;



}







.promo-title:after {



  content: '';



  position: absolute;



  bottom: -10px;



  left: 0;



  width: 60px;



  height: 4px;



  background: linear-gradient(90deg, var(--secondary-color), transparent);



}







.promo-description {



  font-size: 18px;



  margin-bottom: 30px;



  color: rgba(255, 255, 255, 0.8);



  line-height: 1.6;



}







.promo-image {



  flex: 1;



  position: relative;



  overflow: hidden;



}







.promo-image img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.5s ease;



}







.promo-slide:hover .promo-image img {



  transform: scale(1.05);



}







.promo-badge {



  position: absolute;



  top: 20px;



  right: 20px;



  background: linear-gradient(135deg, var(--secondary-color), #e67e00);



  color: white;



  font-size: 24px;



  font-weight: 700;



  width: 70px;



  height: 70px;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);



  animation: pulse 2s infinite;



}







@keyframes pulse {



  0% {



    transform: scale(1);



    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);



  }



  50% {



    transform: scale(1.05);



    box-shadow: 0 5px 20px rgba(245, 158, 11, 0.5);



  }



  100% {



    transform: scale(1);



    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);



  }



}







.promo-controls {



  position: absolute;



  bottom: 20px;



  left: 0;



  width: 100%;



  display: flex;



  justify-content: center;



  align-items: center;



  z-index: 10;



}







.promo-dots {



  display: flex;



  gap: 10px;



}







.promo-dot {



  width: 12px;



  height: 12px;



  border-radius: 50%;



  background-color: rgba(255, 255, 255, 0.3);



  cursor: pointer;



  transition: all 0.3s;



}







.promo-dot.active {



  background-color: var(--secondary-color);



  transform: scale(1.2);



}







.promo-arrows {



  position: absolute;



  width: 100%;



  top: 50%;



  transform: translateY(-50%);



  display: flex;



  justify-content: space-between;



  padding: 0 20px;



}







.promo-arrow {



  background: rgba(15, 23, 42, 0.7);



  color: white;



  width: 40px;



  height: 40px;



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  border: none;



  font-size: 18px;



  transition: all 0.3s;



}







.promo-arrow:hover {



  background: var(--secondary-color);



  transform: scale(1.1);



}







/* Responsive styles for promo slider */



@media (max-width: 768px) {



  .promo-slides {



    height: 300px;



  }







  .promo-content {



    flex-direction: column;



  }







  .promo-text {



    padding: 30px;



    text-align: center;



    align-items: center;



  }







  .promo-title {



    font-size: 28px;



    margin-bottom: 10px;



  }







  .promo-description {



    font-size: 16px;



    margin-bottom: 20px;



  }







  .promo-image {



    display: none;



  }







  .promo-controls {



    bottom: 10px;



  }



}







@media (max-width: 480px) {



  .promo-slides {



    height: 250px;



  }







  .promo-text {



    padding: 20px;



  }







  .promo-title {



    font-size: 24px;



  }







  .promo-description {



    font-size: 14px;



    margin-bottom: 15px;



  }







  .promo-controls .promo-arrow {



    width: 30px;



    height: 30px;



    font-size: 14px;



  }



}







/* Marquee */



.marquee-container {



  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));



  padding: 12px 0;



  overflow: hidden;



  position: relative;



}







.marquee-content {



  display: flex;



  animation: marquee 20s linear infinite;



  white-space: nowrap;



}







.marquee-item {



  color: white;



  font-weight: 600;



  font-size: 16px;



  padding: 0 50px;



  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);



}







@keyframes marquee {



  0% {



    transform: translateX(0);



  }



  100% {



    transform: translateX(-50%);



  }



}







/* Game Categories */



.game-categories {



  padding: 60px 0;



}







.section-title {



  text-align: center;



  margin-bottom: 40px;



  font-size: 36px;



  color: var(--light-text);



}







.category-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));



  gap: 20px;



}







.category-card {



  background: linear-gradient(135deg, #1e293b, #0f172a);



  border-radius: 10px;



  overflow: hidden;



  transition: transform 0.3s;



  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);



}







.category-card:hover {



  transform: translateY(-10px);



}







.category-image {



  height: 180px;



  overflow: hidden;



}







.category-image img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.5s;



}







.category-card:hover .category-image img {



  transform: scale(1.05);



}







.category-content {



  padding: 20px;



}







.category-content h3 {



  font-size: 22px;



  margin-bottom: 10px;



  color: var(--light-text);



}







.category-content p {



  color: rgba(255, 255, 255, 0.7);



  margin-bottom: 15px;



}







/* Featured Games */



.featured-games {



  padding: 60px 0;



  background-color: #1e293b;



}







.game-slider {



  overflow: hidden;



  position: relative;



}







.game-slide {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));



  gap: 20px;



}







.game-card {



  background: linear-gradient(135deg, #2d3748, #1a202c);



  border-radius: 15px;



  overflow: hidden;



  transition: all 0.3s ease;



  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);



  border: 1px solid rgba(255, 255, 255, 0.05);



  height: 100%;



  display: flex;



  flex-direction: column;



}







.game-card:hover {



  transform: translateY(-8px);



  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);



  border-color: rgba(255, 255, 255, 0.1);



}







.game-image {



  height: 200px;



  overflow: hidden;



  position: relative;



}







.game-image::after {



  content: '';



  position: absolute;



  bottom: 0;



  left: 0;



  width: 100%;



  height: 50px;



  background: linear-gradient(to top, rgba(26, 32, 44, 0.8), transparent);



  z-index: 1;



}







.game-image img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  transition: transform 0.5s ease;



}







.game-card:hover .game-image img {



  transform: scale(1.05);



}







.game-info {



  padding: 25px;



  flex: 1;



  display: flex;



  flex-direction: column;



}







.game-info h3 {



  font-size: 22px;



  margin-bottom: 12px;



  color: var(--light-text);



  font-weight: 600;



}







.game-info p {



  font-size: 15px;



  color: rgba(255, 255, 255, 0.7);



  margin-bottom: 20px;



  line-height: 1.5;



  flex: 1;



}







.game-provider {



  display: inline-block;



  font-size: 13px;



  color: var(--secondary-color);



  margin-bottom: 8px;



  font-weight: 600;



  letter-spacing: 0.5px;



  text-transform: uppercase;



  position: relative;



  padding-left: 18px;



}







.game-provider::before {



  content: '•';



  position: absolute;



  left: 0;



  top: 0;



  font-size: 18px;



  color: var(--secondary-color);



}







.play-btn {



  display: inline-block;



  background: linear-gradient(135deg, var(--accent-color), #0d9669);



  color: white;



  padding: 12px 20px;



  border-radius: 8px;



  text-decoration: none;



  font-size: 15px;



  font-weight: 600;



  transition: all 0.3s;



  text-align: center;



  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);



  margin-top: auto;



  position: relative;



  overflow: hidden;



  z-index: 1;



}







.play-btn::before {



  content: '';



  position: absolute;



  top: 0;



  left: -100%;



  width: 100%;



  height: 100%;



  background: rgba(255, 255, 255, 0.2);



  transition: all 0.4s ease;



  z-index: -1;



}







.play-btn:hover {



  transform: translateY(-3px);



  box-shadow: 0 8px 15px rgba(16, 185, 129, 0.4);



}







.play-btn:hover::before {



  left: 100%;



}







/* Promotions */



.promotions {



  padding: 60px 0;



}







.promo-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));



  gap: 30px;



}







.promo-card {



  background: linear-gradient(135deg, #312e81, #1e1b4b);



  border-radius: 10px;



  overflow: hidden;



  transition: all 0.3s;



}







.promo-card:hover {



  transform: translateY(-5px);



  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);



}







.promo-image {



  height: 200px;



  overflow: hidden;



}







.promo-image img {



  width: 100%;



  height: 100%;



  object-fit: cover;



}







.promo-content {



  padding: 25px;



}







.promo-content h3 {



  font-size: 24px;



  margin-bottom: 15px;



  color: var(--light-text);



}







.promo-content p {



  color: rgba(255, 255, 255, 0.8);



  margin-bottom: 20px;



}







.promo-badge {



  display: inline-block;



  background-color: var(--secondary-color);



  color: white;



  padding: 5px 10px;



  border-radius: 5px;



  font-size: 14px;



  margin-bottom: 15px;



}







/* Footer */



footer {



  background-color: #0f172a;



  padding: 60px 0 30px;



}







.footer-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));



  gap: 30px;



  margin-bottom: 40px;



}







.footer-column h3 {



  font-size: 20px;



  margin-bottom: 20px;



  color: var(--light-text);



}







.footer-links {



  list-style: none;



}







.footer-links li {



  margin-bottom: 10px;



}







.footer-links a {



  color: rgba(255, 255, 255, 0.7);



  text-decoration: none;



  transition: color 0.3s;



}







.footer-links a:hover {



  color: var(--secondary-color);



}







.footer-bottom {



  text-align: center;



  padding-top: 30px;



  border-top: 1px solid rgba(255, 255, 255, 0.1);



  color: rgba(255, 255, 255, 0.5);



  font-size: 14px;



}







/* Why Choose Us Section */



.why-choose-us {



  padding: 80px 0;



  position: relative;



  background: linear-gradient(135deg, #0f172a, #1e1b4b);



  overflow: hidden;



}







.why-choose-bg-pattern {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background-image:



    radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),



    radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);



  opacity: 0.6;



  z-index: 0;



}







.why-choose-us .container {



  position: relative;



  z-index: 1;



}







.highlight-text {



  color: var(--secondary-color);



  position: relative;



}







.highlight-text:after {



  content: '';



  position: absolute;



  bottom: -5px;



  left: 0;



  width: 100%;



  height: 3px;



  background: linear-gradient(90deg, var(--secondary-color), transparent);



}







.section-subtitle {



  text-align: center;



  max-width: 700px;



  margin: -20px auto 40px;



  color: rgba(255, 255, 255, 0.8);



  font-size: 18px;



}







.stats-container {



  display: flex;



  justify-content: center;



  flex-wrap: wrap;



  gap: 30px;



  margin-bottom: 50px;



}







.stat-item {



  text-align: center;



  padding: 20px 30px;



  background: rgba(30, 41, 59, 0.5);



  border-radius: 10px;



  border: 1px solid rgba(255, 255, 255, 0.1);



  min-width: 150px;



  backdrop-filter: blur(10px);



  transition: transform 0.3s, box-shadow 0.3s;



}







.stat-item:hover {



  transform: translateY(-5px);



  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);



  border-color: rgba(var(--secondary-color-rgb), 0.3);



}







.stat-number {



  font-size: 36px;



  font-weight: 700;



  color: var(--secondary-color);



  margin-bottom: 5px;



  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



}







.stat-label {



  font-size: 16px;



  color: rgba(255, 255, 255, 0.8);



}







.features-grid {



  display: grid;



  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));



  gap: 30px;



  margin-bottom: 50px;



}







.feature-card {



  background: rgba(30, 41, 59, 0.6);



  border-radius: 15px;



  overflow: hidden;



  padding: 30px;



  border: 1px solid rgba(255, 255, 255, 0.05);



  transition: transform 0.4s, box-shadow 0.4s;



  display: flex;



  flex-direction: column;



  position: relative;



}







.feature-card:hover {



  transform: translateY(-10px);



  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);



  border-color: rgba(255, 255, 255, 0.1);



}







.feature-card:before {



  content: '';



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 3px;



  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));



  opacity: 0;



  transition: opacity 0.4s;



}







.feature-card:hover:before {



  opacity: 1;



}







.feature-icon-wrapper {



  margin-bottom: 20px;



  position: relative;



  width: 80px;



  height: 80px;



}







.feature-icon {



  width: 80px;



  height: 80px;



  border-radius: 50%;



  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(245, 158, 11, 0.2));



  display: flex;



  align-items: center;



  justify-content: center;



  margin-bottom: 20px;



  position: relative;



  z-index: 1;



  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);



  transition: all 0.4s ease;



}







.feature-icon:before {



  content: '';



  position: absolute;



  top: -3px;



  left: -3px;



  right: -3px;



  bottom: -3px;



  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));



  border-radius: 50%;



  z-index: -1;



  opacity: 0.7;



  transition: opacity 0.4s ease;



}







.feature-card:hover .feature-icon {



  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);



}







.feature-card:hover .feature-icon:before {



  opacity: 0.9;



}







.feature-icon i {



  font-size: 32px;



  color: white;



  transition: transform 0.3s, color 0.3s;



}







.feature-card:hover .feature-icon i {



  transform: scale(1.2);



  color: rgba(255, 255, 255, 0.95);



}







.feature-content {



  flex: 1;



}







.feature-card h3 {



  font-size: 22px;



  margin-bottom: 15px;



  color: var(--light-text);



  position: relative;



  display: inline-block;



}







.feature-card p {



  color: rgba(255, 255, 255, 0.7);



  margin-bottom: 20px;



  line-height: 1.6;



}







.feature-badge {



  display: inline-block;



  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));



  color: white;



  padding: 5px 12px;



  border-radius: 20px;



  font-size: 12px;



  font-weight: 500;



  margin-top: auto;



}







.why-choose-cta {



  display: flex;



  justify-content: center;



  gap: 20px;



  margin-top: 30px;



}







.btn-large {



  padding: 12px 30px;



  font-size: 16px;



}







.btn-outline {



  background: transparent;



  color: var(--light-text);



  border: 1px solid rgba(255, 255, 255, 0.3);



  padding: 12px 30px;



  border-radius: 5px;



  font-weight: 500;



  text-decoration: none;



  transition: all 0.3s;



}







.btn-outline:hover {



  background: rgba(255, 255, 255, 0.1);



  border-color: var(--light-text);



  transform: translateY(-2px);



}







/* Responsive */



/* Mobile Menu Button */



.mobile-menu-btn {



  display: none;



  background: none;



  border: none;



  color: var(--light-text);



  font-size: 24px;



  cursor: pointer;



  z-index: 101;



}







@media (max-width: 768px) {



  .mobile-menu-btn {



    display: block;



  }







  .header-container {



    flex-direction: row;



    justify-content: space-between;



    align-items: center;



    position: relative;



  }







  nav {



    position: fixed;



    top: 0;



    left: -100%;



    width: 80%;



    max-width: 300px;



    height: 100vh;



    background-color: rgba(15, 23, 42, 0.98);



    z-index: 100;



    transition: left 0.3s ease;



    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.3);



    padding: 80px 20px 20px;



    overflow-y: auto;



  }







  nav.active {



    left: 0;



  }







  nav ul {



    flex-direction: column;



    align-items: flex-start;



  }







  nav ul li {



    margin: 0 0 15px;



    width: 100%;



  }







  nav ul li a {



    display: block;



    padding: 10px 0;



    width: 100%;



  }







  /* Dropdown handling on mobile */



  nav ul li.dropdown {



    position: relative;



  }







  nav ul li.dropdown .dropdown-toggle {



    width: 100%;



    justify-content: space-between;



  }







  nav ul li.dropdown .dropdown-menu {



    position: static;



    opacity: 0;



    visibility: hidden;



    height: 0;



    transform: none;



    box-shadow: none;



    padding: 0;



    margin-left: 15px;



    border-left: 2px solid var(--primary-color);



    transition: all 0.3s ease;



    background-color: transparent;



  }







  nav ul li.dropdown.active .dropdown-menu {



    opacity: 1;



    visibility: visible;



    height: auto;



    padding: 10px 0;



  }







  nav ul li.dropdown .dropdown-menu li a {



    padding: 8px 15px;



  }







  .auth-buttons {



    display: none;



    position: fixed;



    bottom: 0;



    left: 0;



    width: 100%;



    padding: 15px;



    background-color: rgba(15, 23, 42, 0.95);



    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);



    z-index: 99;



    gap: 10px;



  }







  .auth-buttons.mobile-visible {



    display: flex;



    justify-content: center;



  }







  .auth-buttons .btn {



    flex: 1;



    max-width: 150px;



  }







  .hero h1 {



    font-size: 36px;



  }







  .hero p {



    font-size: 18px;



  }







  .stats-container {



    gap: 15px;



  }







  .stat-item {



    padding: 15px;



    min-width: 120px;



  }







  .stat-number {



    font-size: 28px;



  }







  .stat-label {



    font-size: 14px;



  }







  .features-grid {



    grid-template-columns: 1fr;



  }







  .why-choose-cta {



    flex-direction: column;



    align-items: center;



  }







  /* Hot Games responsive */



  .hot-games .container {



    padding: 0 20px;



  }







  .games-grid {



    gap: 20px;



    padding: 15px 0;



  }







  .game-card {



    max-width: 400px;



    margin: 0 auto;



  }



}







@media (max-width: 480px) {



  .hot-games .container {



    padding: 0 15px;



  }







  .games-grid {



    gap: 15px;



    padding: 10px 0;



  }







  .game-info {



    padding: 20px;



  }







  .play-btn {



    width: 100%;



    padding: 14px 20px;



  }



}







/* Provider Pages */



.provider-header {



  background-size: cover;



  background-position: center;



  padding: 80px 0;



  text-align: center;



  position: relative;



}







.provider-header::before {



  content: '';



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.95));



}







.provider-header-content {



  position: relative;



  z-index: 1;



}







.provider-header h1 {



  font-size: 42px;



  margin-bottom: 20px;



  color: white;



}







.provider-header p {



  font-size: 18px;



  max-width: 800px;



  margin: 0 auto;



  color: rgba(255, 255, 255, 0.9);



}







.provider-logo {



  max-width: 200px;



  margin: 0 auto 30px;



}







/* Hot Games Section */



.hot-games {



  padding: 80px 0;



  background-color: #0f172a;



  position: relative;



}







.hot-games .container {



  padding: 0 30px;



}







.games-grid {



  display: grid;



  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));



  gap: 30px;



  margin-top: 50px;



  padding: 20px 0;



}







/* FAQ Preview Section */



.faq-preview {



  padding: 80px 0;



  position: relative;



  background: linear-gradient(135deg, #1e1b4b, #0f172a);



  overflow: hidden;



}







.faq-bg-pattern {



  position: absolute;



  top: 0;



  left: 0;



  width: 100%;



  height: 100%;



  background-image:



    radial-gradient(circle at 80% 10%, rgba(124, 58, 237, 0.1) 0%, transparent 50%),



    radial-gradient(circle at 20% 90%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);



  opacity: 0.6;



  z-index: 0;



}







.faq-preview .container {



  position: relative;



  z-index: 1;



}







.section-header {



  text-align: center;



  margin-bottom: 50px;



}







.faq-container {



  max-width: 900px;



  margin: 0 auto 40px;



}







.faq-item {



  background: rgba(30, 41, 59, 0.5);



  border-radius: 15px;



  margin-bottom: 20px;



  overflow: hidden;



  border: 1px solid rgba(255, 255, 255, 0.05);



  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);



  transition: all 0.3s ease;



}







.faq-item:hover {



  transform: translateY(-3px);



  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);



  border-color: rgba(255, 255, 255, 0.1);



}







.faq-question {



  padding: 20px 25px;



  cursor: pointer;



  display: flex;



  align-items: center;



  position: relative;



}







.faq-question h3 {



  font-size: 18px;



  font-weight: 500;



  color: var(--light-text);



  margin: 0;



  flex: 1;



}







.faq-icon {



  position: relative;



  width: 24px;



  height: 24px;



  margin-right: 15px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));



}







.faq-icon:before,



.faq-icon:after {



  content: '';



  position: absolute;



  background-color: white;



  transition: transform 0.3s ease;



}







.faq-icon:before {



  top: 11px;



  left: 6px;



  width: 12px;



  height: 2px;



}







.faq-icon:after {



  top: 6px;



  left: 11px;



  width: 2px;



  height: 12px;



}







.faq-item.active .faq-icon:after {



  transform: rotate(90deg);



  opacity: 0;



}







.faq-answer {



  padding: 0 25px 0 64px;



  max-height: 0;



  overflow: hidden;



  transition: all 0.3s ease;



}







.faq-item.active .faq-answer {



  padding: 0 25px 20px 64px;



  max-height: 500px;



}







.faq-answer p {



  color: rgba(255, 255, 255, 0.7);



  line-height: 1.6;



}







.faq-more {



  text-align: center;



  margin-top: 40px;



}







/* FAQ Page Styles */



.faq-section {



  padding: 60px 0;



}







.faq-categories {



  margin-bottom: 40px;



}







.category-tabs {



  display: flex;



  justify-content: center;



  flex-wrap: wrap;



  gap: 10px;



  margin-bottom: 30px;



}







.category-tab {



  background: rgba(30, 41, 59, 0.5);



  border: 1px solid rgba(255, 255, 255, 0.1);



  color: var(--light-text);



  padding: 10px 20px;



  border-radius: 30px;



  cursor: pointer;



  transition: all 0.3s;



  font-weight: 500;



}







.category-tab:hover {



  background: rgba(30, 41, 59, 0.8);



  border-color: rgba(255, 255, 255, 0.2);



}







.category-tab.active {



  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));



  border-color: transparent;



  box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);



}







/* Guide Pages */



.guide-content {



  max-width: 900px;



  margin: 0 auto;



  padding: 60px 0;



}







.guide-content h2 {



  font-size: 28px;



  margin: 30px 0 20px;



  color: var(--light-text);



}







.guide-content p {



  margin-bottom: 20px;



  line-height: 1.8;



}







.guide-content ul,

.guide-content ol {



  margin: 20px 0;



  padding-left: 20px;



}







.guide-content li {



  margin-bottom: 10px;



}







.guide-image {



  width: 100%;



  border-radius: 10px;



  margin: 30px 0;



}







/* Schema Markup Styles */



.breadcrumb {



  padding: 15px 0;



  background-color: rgba(30, 41, 59, 0.5);



}







.breadcrumb ul {



  display: flex;



  list-style: none;



  flex-wrap: wrap;



}







.breadcrumb ul li {



  margin-right: 10px;



  font-size: 14px;



  color: rgba(255, 255, 255, 0.7);



}







.breadcrumb ul li:after {



  content: '/';



  margin-left: 10px;



}







.breadcrumb ul li:last-child:after {



  content: '';



}







.breadcrumb a {



  color: rgba(255, 255, 255, 0.7);



  text-decoration: none;



}







.breadcrumb a:hover {



  color: var(--secondary-color);



}



/* SEO Content Section */

.seo-content-section {

  position: relative;

  z-index: 10;

}



.seo-box {

  background: #1a1a1a;

  padding: 40px 30px;

  border-radius: 15px;

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);

  border: 1px solid rgba(255, 255, 255, 0.05);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}





/* Welcome Modal */

.modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.85);

  backdrop-filter: blur(5px);

  z-index: 1000;

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  visibility: hidden;

  transition: all 0.4s ease;

}



.modal-overlay.active {

  opacity: 1;

  visibility: visible;

}



.modal-content {

  background: rgba(26, 26, 26, 0.95);

  padding: 40px;

  border-radius: 20px;

  width: 90%;

  max-width: 500px;

  text-align: center;

  position: relative;

  border: 2px solid #7c3aed;

  box-shadow: 0 0 30px rgba(124, 58, 237, 0.4);

  transform: scale(0.7);

  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

}



.modal-overlay.active .modal-content {

  transform: scale(1);

}



.modal-close {

  position: absolute;

  top: 15px;

  right: 20px;

  background: none;

  border: none;

  color: #fff;

  font-size: 30px;

  cursor: pointer;

  transition: color 0.3s ease;

}



.modal-close:hover {

  color: #7c3aed;

}



.modal-header h2 {

  color: #ffd700;

  font-size: 2em;

  margin-bottom: 20px;

  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);

}



.modal-body .highlight-text {

  font-size: 1.4em;

  color: #fff;

  margin-bottom: 15px;

  font-weight: bold;

}



.modal-body p {

  color: #e0e0e0;

  margin-bottom: 25px;

  line-height: 1.6;

}



.btn-pulse {

  animation: pulse 2s infinite;

}



@keyframes pulse {

  0% {

    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.7);

  }



  70% {

    box-shadow: 0 0 0 15px rgba(124, 58, 237, 0);

  }



  100% {

    box-shadow: 0 0 0 0 rgba(124, 58, 237, 0);

  }

}