:root {
     --bg-dark: #070D19;
     --bg-card: #111A2E;
     --bg-card-hover: #192642;
     --accent-green: #00E88F;
     --accent-green-hover: #00c679;
     --accent-blue: #0A84FF;
     --text-main: #FFFFFF;
     --text-muted: #A0ABC0;
     --font-heading: 'Montserrat', sans-serif;
     --font-body: 'Roboto', sans-serif;
     --transition: all 0.3s ease;
 }


 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font-body);
     background-color: var(--bg-dark);
     color: var(--text-main);
     line-height: 1.6;
     overflow-x: hidden;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: var(--font-heading);
     font-weight: 700;
     color: var(--text-main);
 }

 a {
     text-decoration: none;
     color: var(--text-main);
     transition: var(--transition);
 }

 ul {
     list-style: none;
 }

 .container {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 .section-header {
     text-align: center;
     margin-bottom: 50px;
 }

 .section-header h2 {
     font-size: 2.5rem;
     margin-bottom: 15px;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .section-header p {
     color: var(--text-muted);
     font-size: 1.1rem;
     max-width: 600px;
     margin: 0 auto;
 }

 .btn {
     display: inline-block;
     padding: 12px 28px;
     border-radius: 4px;
     font-family: var(--font-heading);
     font-weight: 600;
     cursor: pointer;
     border: none;
     transition: var(--transition);
     text-transform: uppercase;
     font-size: 0.9rem;
     letter-spacing: 0.5px;
 }

 .btn-primary {
     background-color: var(--accent-green);
     color: var(--bg-dark);
 }

 .btn-primary:hover {
     background-color: var(--accent-green-hover);
     transform: translateY(-2px);
 }

 .btn-outline {
     background-color: transparent;
     border: 2px solid var(--accent-green);
     color: var(--accent-green);
 }

 .btn-outline:hover {
     background-color: var(--accent-green);
     color: var(--bg-dark);
     transform: translateY(-2px);
 }


 header {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: rgba(7, 13, 25, 0.95);
     backdrop-filter: blur(10px);
     z-index: 1000;
     padding: 20px 0;
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
     transition: var(--transition);
 }

 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .logo {
     font-family: var(--font-heading);
     font-size: 1.8rem;
     font-weight: 800;
     color: var(--text-main);
     letter-spacing: -0.5px;
 }

 .logo span {
     color: var(--accent-green);
 }

 .nav-links {
     display: flex;
     gap: 30px;
 }

 .nav-links a {
     font-size: 0.95rem;
     font-weight: 500;
     color: var(--text-muted);
 }

 .nav-links a:hover {
     color: var(--accent-green);
 }

 .auth-buttons {
     display: flex;
     gap: 15px;
 }

 .auth-buttons button {
     font-size: 0.85rem;
     padding: 10px 20px;
 }

 .mobile-menu-btn {
     display: none;
     font-size: 1.5rem;
     cursor: pointer;
     color: var(--text-main);
 }


 .hero {
     height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
     background: linear-gradient(to bottom, rgba(7, 13, 25, 0.7), rgba(7, 13, 25, 1)),
         url('../img/hero.jpeg') center/cover no-repeat;
     padding-top: 80px;
 }

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

 .hero h1 {
     font-size: 4rem;
     line-height: 1.1;
     margin-bottom: 20px;
     text-transform: uppercase;
 }

 .hero h1 span {
     color: var(--accent-green);
 }

 .hero p {
     font-size: 1.2rem;
     color: var(--text-muted);
     margin-bottom: 40px;
     max-width: 600px;
 }

 .hero-buttons {
     display: flex;
     gap: 20px;
     margin-bottom: 50px;
 }

 .trust-badges {
     display: flex;
     gap: 40px;
 }

 .trust-item {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--text-muted);
     font-size: 0.9rem;
     font-weight: 500;
 }

 .trust-item i {
     color: var(--accent-blue);
     font-size: 1.2rem;
 }


 .services {
     padding: 100px 0;
     background-color: var(--bg-dark);
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .service-card {
     background-color: var(--bg-card);
     padding: 40px 30px;
     border-radius: 8px;
     text-align: left;
     transition: var(--transition);
     border: 1px solid rgba(255, 255, 255, 0.02);
 }

 .service-card:hover {
     transform: translateY(-10px);
     background-color: var(--bg-card-hover);
     border-color: rgba(0, 232, 143, 0.3);
 }

 .service-card i {
     font-size: 2.5rem;
     color: var(--accent-green);
     margin-bottom: 20px;
 }

 .service-card h3 {
     font-size: 1.3rem;
     margin-bottom: 15px;
 }

 .service-card p {
     color: var(--text-muted);
     font-size: 0.95rem;
 }


 .about {
     padding: 100px 0;
     background-color: #0A111F;
 }

 .about-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .about-card {
     background-color: var(--bg-card);
     border-radius: 8px;
     overflow: hidden;
     transition: var(--transition);
 }

 .about-card:hover {
     transform: translateY(-5px);
 }

 .about-card img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .about-content {
     padding: 30px;
 }

 .about-content h3 {
     margin-bottom: 15px;
     font-size: 1.2rem;
 }

 .about-content p {
     color: var(--text-muted);
     font-size: 0.95rem;
 }


 .testimonials {
     padding: 100px 0;
 }

 .test-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
 }

 .test-card {
     background-color: var(--bg-card);
     padding: 30px;
     border-radius: 8px;
     border-top: 3px solid var(--accent-blue);
 }

 .stars {
     color: #FFD700;
     margin-bottom: 15px;
     font-size: 0.9rem;
 }

 .test-text {
     font-style: italic;
     color: var(--text-muted);
     margin-bottom: 20px;
     font-size: 0.95rem;
 }

 .test-user {
     font-weight: 600;
     font-size: 1rem;
     font-family: var(--font-heading);
 }


 .sports {
     padding: 100px 0;
     background-color: #0A111F;
 }

 .sports-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .sport-card {
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     height: 250px;
     cursor: pointer;
 }

 .sport-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .sport-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(7, 13, 25, 0.9) 10%, rgba(7, 13, 25, 0.2) 100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 25px;
 }

 .sport-card:hover img {
     transform: scale(1.1);
 }

 .sport-card h3 {
     font-size: 1.4rem;
     margin-bottom: 5px;
     color: var(--accent-green);
 }

 .sport-card p {
     color: #fff;
     font-size: 0.9rem;
 }


 .faq {
     padding: 100px 0;
 }

 .faq-container {
     max-width: 800px;
     margin: 0 auto;
 }

 .faq-item {
     background-color: var(--bg-card);
     margin-bottom: 15px;
     border-radius: 4px;
     overflow: hidden;
 }

 .faq-question {
     padding: 20px 25px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     font-family: var(--font-heading);
     font-weight: 600;
     font-size: 1.05rem;
     transition: var(--transition);
 }

 .faq-question:hover {
     color: var(--accent-green);
 }

 .faq-question i {
     transition: transform 0.3s ease;
 }

 .faq-item.active .faq-question i {
     transform: rotate(180deg);
     color: var(--accent-green);
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s ease;
     background-color: #0E1627;
 }

 .faq-answer p {
     padding: 0 25px 20px 25px;
     color: var(--text-muted);
     font-size: 0.95rem;
 }

 


 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.8);
     backdrop-filter: blur(5px);
     z-index: 2000;
     display: none;
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .modal-overlay.active {
     display: flex;
     opacity: 1;
 }

 .modal-box {
     background-color: var(--bg-card);
     width: 100%;
     max-width: 450px;
     padding: 40px;
     border-radius: 8px;
     position: relative;
     transform: translateY(-20px);
     transition: transform 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .modal-overlay.active .modal-box {
     transform: translateY(0);
 }

 .modal-close {
     position: absolute;
     top: 20px;
     right: 20px;
     background: none;
     border: none;
     color: var(--text-muted);
     font-size: 1.5rem;
     cursor: pointer;
     transition: var(--transition);
 }

 .modal-close:hover {
     color: var(--text-main);
 }

 .modal-title {
     font-size: 1.8rem;
     margin-bottom: 25px;
     text-align: center;
 }

 .form-group {
     margin-bottom: 20px;
 }

 .form-group label {
     display: block;
     margin-bottom: 8px;
     font-size: 0.9rem;
     color: var(--text-muted);
 }

 .form-group input {
     width: 100%;
     padding: 12px 15px;
     background-color: rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     color: var(--text-main);
     font-family: var(--font-body);
     transition: var(--transition);
 }

 .form-group input:focus {
     outline: none;
     border-color: var(--accent-green);
     background-color: rgba(0, 0, 0, 0.4);
 }

 .btn-submit {
     width: 100%;
     margin-top: 10px;
 }


 .age-gate-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--bg-dark);
     z-index: 9999;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .age-gate-box {
     background-color: var(--bg-card);
     max-width: 500px;
     padding: 50px;
     text-align: center;
     border-radius: 8px;
     border-top: 4px solid var(--accent-green);
 }

 .age-gate-box i {
     font-size: 3rem;
     color: var(--accent-green);
     margin-bottom: 20px;
 }

 .age-gate-box h2 {
     margin-bottom: 15px;
 }

 .age-gate-box p {
     color: var(--text-muted);
     margin-bottom: 30px;
     font-size: 0.95rem;
 }

 .age-buttons {
     display: flex;
     gap: 15px;
     justify-content: center;
 }


 .cookie-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     background-color: rgba(17, 26, 46, 0.95);
     backdrop-filter: blur(10px);
     padding: 20px;
     z-index: 1500;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     display: none;
 }

 .cookie-text {
     font-size: 0.9rem;
     color: var(--text-muted);
     max-width: 800px;
 }

 .cookie-buttons {
     display: flex;
     gap: 15px;
 }

 .cookie-buttons button {
     padding: 8px 20px;
     font-size: 0.85rem;
 }


 @media (max-width: 992px) {
     .hero h1 {
         font-size: 3rem;
     }

     .nav-links,
     .auth-buttons {
         display: none;
     }

     .mobile-menu-btn {
         display: block;
     }


     .nav-active .nav-links,
     .nav-active .auth-buttons {
         display: flex;
         flex-direction: column;
         position: absolute;
         top: 70px;
         left: 0;
         width: 100%;
         background-color: var(--bg-card);
         padding: 20px;
         text-align: center;
     }

     .nav-active .auth-buttons {
         top: auto;
         bottom: -60px;
         position: relative;
         margin-top: 20px;
     }
 }

 @media (max-width: 768px) {
     .hero h1 {
         font-size: 2.2rem;
     }

     .hero-buttons {
         flex-direction: column;
     }

     .trust-badges {
         flex-direction: column;
         gap: 15px;
     }

     .cookie-bar {
         flex-direction: column;
         text-align: center;
         gap: 15px;
     }
 }
 .page-banner {
            padding: 150px 0 60px;
            background: linear-gradient(to bottom, #111A2E, #070D19);
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .page-banner h1 {
            font-size: 3rem;
            margin-bottom: 15px;
            color: var(--accent-green);
        }

        .page-banner p {
            color: var(--text-muted);
            font-size: 1.1rem;
        }

        
        .policy-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 60px 20px 100px;
        }

        .policy-content {
            background-color: var(--bg-card);
            padding: 50px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .policy-content h2 {
            font-size: 1.8rem;
            margin-top: 40px;
            margin-bottom: 20px;
            color: var(--text-main);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 10px;
        }

        .policy-content h2:first-child {
            margin-top: 0;
        }

        .policy-content h3 {
            font-size: 1.3rem;
            margin-top: 25px;
            margin-bottom: 15px;
            color: #d1d5db;
        }

        .policy-content p {
            color: var(--text-muted);
            margin-bottom: 20px;
            line-height: 1.8;
            font-size: 1rem;
        }

        .policy-content ul {
            margin-bottom: 20px;
            padding-left: 20px;
            color: var(--text-muted);
        }

        .policy-content li {
            margin-bottom: 10px;
            line-height: 1.6;
            list-style-type: disc;
        }

        .policy-content strong {
            color: #fff;
        }@media (max-width: 768px) {
            .page-banner h1 { font-size: 2.2rem; }
            .policy-content { padding: 30px 20px; }
        }
 


footer {
  width: 100%;
}

.bg-dark {
  background: #111827;
}

.text-white {
  color: #fff;
}

.text-muted {
  color: rgba(255, 255, 255, 0.65);
}

.text-center {
  text-align: center;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}


h3, p, a, span, address {
  margin-top: 0;
}

h3 {
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 700;
}

p {
  font-size: 1rem;
  line-height: 1.7;
}

.small {
  font-size: 0.875rem;
  line-height: 1.6;
}


.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.me-3 {
  margin-right: 1rem;
}

.m-1 {
  margin: 0.25rem;
}


.badge {
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.bg-secondary {
  background: #4b5563;
  color: #fff;
}


.d-flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-content-center {
  justify-content: center;
}

.align-items-center {
  align-items: center;
}

.gap-4 {
  gap: 1.5rem;
}


a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s ease, color 0.25s ease;
  cursor: pointer;
}

a:hover {
  opacity: 0.85;
}

.text-decoration-underline {
  text-decoration: underline;
}


.img-blog a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.7rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
}

.img-blog img {
  display: block;
  max-height: 40px;
  width: auto;
  object-fit: contain;
}


nav a {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}


address {
  font-style: normal;
  line-height: 1.7;
}

address a {
  text-decoration: underline;
}


@media (max-width: 768px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  h3 {
    font-size: 1.4rem;
  }

  p {
    font-size: 0.95rem;
  }

  .gap-4 {
    gap: 1rem;
  }

  nav a,
  .mb-3.small a {
    display: inline-block;
    margin-right: 0.75rem;
    margin-bottom: 0.5rem;
  }
}