/* Fonts loaded asynchronously in HTML head */ @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css');:root {--primary-color: #C50102;--secondary-color: #000000;--third-color: #111111;--text-primary: #FFFFFF;--text-secondary: #AAAAAA;--accent-primary: #FF0000;--gold-color: #FFD700;--dark-gold: #B8860B;--success-color: #28a745;--warning-color: #ffc107;--info-color: #17a2b8;--light-bg: #1a1a1a;--border-color: #333333} * {margin: 0;padding: 0;box-sizing: border-box} /* Breadcrumb Navigation */ .breadcrumb {background: rgba(0,0,0,0.8);padding: 10px 0;margin-top: 0} .breadcrumb-list {list-style: none;display: flex;align-items: center;max-width: 1200px;margin: 0 auto;padding: 0 20px} .breadcrumb-item {display: flex;align-items: center} .breadcrumb-item:not(:last-child)::after {content: "›";margin: 0 10px;color: var(--gold-color);font-weight: bold} .breadcrumb-item a {color: var(--text-primary);text-decoration: none;font-size: 14px;transition: color 0.3s ease} .breadcrumb-item a:hover {color: var(--gold-color)} .breadcrumb-item:last-child a {color: var(--gold-color);font-weight: 600} body {font-family: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url(images/background.png);background-position: center center;background-attachment: fixed;background-size: cover;background-repeat: no-repeat;color: var(--text-primary);line-height: 1.6;font-weight: 400;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} a {text-decoration: none;color: var(--accent-primary)} img {max-width: 100%;height: auto;width: auto} .btn {padding: 10px 20px;border: none;border-radius: 10px;font-weight: 700;transition: background 0.3s ease} .background-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.5);z-index: 1} .navbar {background-color: var(--secondary-color);display: flex;justify-content: space-between;align-items: center;padding: 20px 80px} .navbar .logo img {height: 50px;align-items: center} .navbar-menu {display: flex;gap: 20px;list-style: none} .navbar-menu li a {color: var(--text-primary);font-size: 1.2rem;font-weight: 500;padding: 8px 12px;border-radius: 6px;transition: background 0.3s ease,color 0.3s ease} .navbar-menu li a:hover {color: var(--primary-color)} .navbar .auth-buttons {display: flex;gap: 10px} .btn-login {background-color: var(--text-primary);color: var(--secondary-color);border: 2px solid var(--text-primary)} .btn-register {background-color: transparent;color: var(--text-primary);border: 2px solid var(--text-primary)} .btn-login:hover {background-color: transparent;color: var(--text-primary)} .btn-register:hover {background-color: var(--text-primary);color: var(--secondary-color)} .btn-primary {background: linear-gradient(135deg,var(--primary-color) 0%,var(--accent-primary) 100%);color: var(--text-primary);border: 2px solid var(--primary-color);padding: 12px 30px;font-size: 1.1rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;box-shadow: 0 4px 15px rgba(197,1,2,0.3);transition: all 0.3s ease} .btn-primary:hover {background: linear-gradient(135deg,var(--accent-primary) 0%,var(--primary-color) 100%);transform: translateY(-2px);box-shadow: 0 6px 20px rgba(197,1,2,0.4)} .btn-secondary {background-color: transparent;color: var(--text-primary);border: 2px solid var(--gold-color);padding: 12px 30px;font-size: 1.1rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;transition: all 0.3s ease} .btn-secondary:hover {background-color: var(--gold-color);color: var(--secondary-color);transform: translateY(-2px)} .btn-large {padding: 15px 40px;font-size: 1.2rem} .btn-play {background: linear-gradient(135deg,var(--gold-color) 0%,var(--dark-gold) 100%);color: var(--secondary-color);border: none;padding: 8px 20px;border-radius: 25px;font-size: 0.9rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;transition: all 0.3s ease;display: inline-block;margin-top: 10px} .btn-play:hover {background: linear-gradient(135deg,var(--dark-gold) 0%,var(--gold-color) 100%);transform: translateY(-2px);box-shadow: 0 4px 15px rgba(255,215,0,0.3)} main {max-width: 1200px;margin: 0 auto;padding: 0 16px} .container {max-width: 1200px;margin: 0 auto;padding: 0 20px} .hero {position: relative;background: linear-gradient(135deg,var(--accent-primary) 0%,var(--third-color) 100%);background-size: cover;background-repeat: no-repeat;background-position: center center;padding: 80px 50px;margin-top: 20px;border-radius: 15px;overflow: hidden;box-shadow: 0 10px 30px rgba(0,0,0,0.5);display: flex;align-items: center;justify-content: center;min-height: 60vh} .hero-content {position: relative;z-index: 2;max-width: 900px;text-align: center;width: 100%} .hero-content h1 {font-family: 'Poppins',sans-serif;font-size: 3rem;color: var(--text-primary);font-weight: 800;margin-bottom: 20px;line-height: 1.1;text-shadow: 2px 2px 4px rgba(0,0,0,0.7);letter-spacing: -0.02em} .hero-content p {margin-bottom: 40px;color: var(--text-primary);font-size: 1.25rem;line-height: 1.7;max-width: 700px;margin-left: auto;margin-right: auto;font-weight: 500;letter-spacing: 0.01em;text-shadow: 1px 1px 3px rgba(0,0,0,0.8);background: rgba(0,0,0,0.3);padding: 20px;border-radius: 10px;backdrop-filter: blur(5px)} .hero-buttons {display: flex;gap: 20px;justify-content: center;flex-wrap: wrap} .hero-image {margin: 20px 0;text-align: center} .hero-image img {max-width: 600px;width: 100%;height: auto;border-radius: 10px;box-shadow: 0 5px 15px rgba(0,0,0,0.3)} /* Why Choose Section */ .why-choose {margin: 60px 0;padding: 60px 0;background: linear-gradient(135deg,var(--light-bg) 0%,var(--third-color) 100%);border-radius: 15px} .why-choose h2 {font-family: 'Poppins',sans-serif;text-align: center;font-size: 2.8rem;color: var(--text-primary);margin-bottom: 50px;font-weight: 700;letter-spacing: -0.01em;text-shadow: 1px 1px 3px rgba(0,0,0,0.5);position: relative} .why-choose h2::after {content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 80px;height: 4px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%);border-radius: 2px} .features-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(350px,1fr));gap: 30px;margin-top: 40px} .feature-card {background: var(--secondary-color);padding: 40px 30px;border-radius: 15px;text-align: center;border: 1px solid var(--border-color);transition: all 0.3s ease;position: relative;overflow: hidden} .feature-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%)} .feature-card:hover {transform: translateY(-10px);box-shadow: 0 15px 40px rgba(0,0,0,0.3)} .feature-icon {margin-bottom: 20px} .feature-icon i {font-size: 3rem;color: var(--gold-color)} .feature-card h3 {font-family: 'Poppins',sans-serif;font-size: 1.5rem;color: var(--text-primary);margin-bottom: 15px;font-weight: 600;letter-spacing: -0.005em} .feature-card p {color: var(--text-secondary);line-height: 1.6;font-size: 1rem} /* General H2 styling for all sections */ h2 {font-family: 'Poppins',sans-serif;font-size: 2.5rem;color: var(--text-primary);font-weight: 700;letter-spacing: -0.01em;text-shadow: 1px 1px 3px rgba(0,0,0,0.5);position: relative;margin-bottom: 50px} h2::after {content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 80px;height: 4px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%);border-radius: 2px} /* H3 styling for subsection headings */ h3 {font-family: 'Poppins',sans-serif;font-size: 1.4rem;color: var(--gold-color);font-weight: 600;letter-spacing: -0.005em;margin-bottom: 15px;text-shadow: 1px 1px 2px rgba(0,0,0,0.3)} /* Pokies Section */ .pokies-section {margin: 60px 0;padding: 80px 0;background: linear-gradient(135deg,var(--light-bg) 0%,var(--third-color) 100%);border-radius: 20px;position: relative;overflow: hidden} .pokies-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23FFD700" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23FFD700" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="%23FFD700" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');opacity: 0.3;z-index: 1} .pokies-section .container {position: relative;z-index: 2} .pokies-section h2 {text-align: center;font-size: 2.8rem;color: var(--text-primary);margin-bottom: 20px;font-weight: 800;letter-spacing: -0.02em;text-shadow: 2px 2px 4px rgba(0,0,0,0.7)} .pokies-banner {text-align: center;margin: 30px 0 40px 0} .pokies-banner img {max-width: 60%;height: auto;border-radius: 15px;box-shadow: 0 10px 30px rgba(0,0,0,0.4);transition: transform 0.3s ease} .pokies-banner img:hover {transform: scale(1.02)} .pokies-section .section-subtitle {text-align: center;color: var(--text-secondary);font-size: 1.2rem;margin-bottom: 60px;max-width: 600px;margin-left: auto;margin-right: auto;font-weight: 400} .pokies-content {display: grid;grid-template-columns: 1fr 1fr;gap: 60px;align-items: start} .pokies-text {background: rgba(0,0,0,0.4);padding: 40px;border-radius: 20px;backdrop-filter: blur(10px);border: 1px solid rgba(255,215,0,0.2)} .pokies-text h3 {font-size: 1.5rem;color: var(--gold-color);margin-bottom: 20px;margin-top: 35px;font-weight: 700;letter-spacing: -0.01em;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);position: relative;padding-left: 40px;counter-increment: pokies-counter} .pokies-text {counter-reset: pokies-counter} .pokies-text h3::before {content: counter(pokies-counter);position: absolute;left: 0;top: 0;width: 30px;height: 30px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%);color: var(--text-primary);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1rem;font-weight: 700;text-shadow: none;box-shadow: 0 4px 15px rgba(197,1,2,0.3)} .pokies-text h3:first-child {margin-top: 0} .pokies-text p {color: var(--text-primary);line-height: 1.7;margin-bottom: 25px;font-size: 1.05rem;font-weight: 400} .pokies-features {display: flex;flex-direction: column;gap: 25px} .feature-highlight {background: linear-gradient(135deg,rgba(0,0,0,0.6) 0%,rgba(17,17,17,0.8) 100%);padding: 30px;border-radius: 20px;backdrop-filter: blur(15px);border: 1px solid rgba(255,215,0,0.3);transition: all 0.4s ease;position: relative;overflow: hidden} .feature-highlight::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%);transform: scaleX(0);transition: transform 0.3s ease} .feature-highlight:hover::before {transform: scaleX(1)} .feature-highlight:hover {transform: translateY(-5px);box-shadow: 0 20px 40px rgba(0,0,0,0.4);border-color: var(--gold-color)} .feature-highlight .feature-icon {width: 60px;height: 60px;background: linear-gradient(135deg,var(--gold-color) 0%,var(--dark-gold) 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 20px;box-shadow: 0 8px 20px rgba(255,215,0,0.3)} .feature-highlight .feature-icon i {font-size: 1.8rem;color: var(--secondary-color)} .feature-highlight h3 {font-size: 1.4rem;color: var(--text-primary);margin-bottom: 15px;font-weight: 700;letter-spacing: -0.01em;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)} .feature-highlight p {color: var(--text-secondary);line-height: 1.6;margin-bottom: 20px;font-size: 1rem} .feature-stats {display: flex;gap: 15px;flex-wrap: wrap} .feature-stats .stat {background: rgba(255,215,0,0.1);color: var(--gold-color);padding: 8px 16px;border-radius: 20px;font-size: 0.9rem;font-weight: 600;border: 1px solid rgba(255,215,0,0.3);text-transform: uppercase;letter-spacing: 0.5px} /* Live Casino Section */ .live-casino {margin: 60px 0;padding: 80px 0;background: linear-gradient(135deg,var(--third-color) 0%,var(--light-bg) 100%);border-radius: 20px;position: relative;overflow: hidden} .live-casino::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="live-pattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="2" fill="%23FFD700" opacity="0.1"/><circle cx="10" cy="10" r="1" fill="%23FFD700" opacity="0.05"/><circle cx="40" cy="40" r="1.5" fill="%23FFD700" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23live-pattern)"/></svg>');opacity: 0.4;z-index: 1} .live-casino .container {position: relative;z-index: 2} .live-casino h2 {text-align: center;font-size: 2.8rem;color: var(--text-primary);margin-bottom: 20px;font-weight: 800;letter-spacing: -0.02em;text-shadow: 2px 2px 4px rgba(0,0,0,0.7)} .live-casino .section-subtitle {text-align: center;color: var(--text-secondary);font-size: 1.2rem;margin-bottom: 60px;max-width: 700px;margin-left: auto;margin-right: auto;font-weight: 400} .live-casino-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(350px,1fr));gap: 30px;margin-bottom: 60px} .live-game-card {background: linear-gradient(135deg,rgba(0,0,0,0.6) 0%,rgba(17,17,17,0.8) 100%);padding: 30px;border-radius: 20px;backdrop-filter: blur(15px);border: 1px solid rgba(255,215,0,0.3);transition: all 0.4s ease;position: relative;overflow: hidden} .live-game-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%);transform: scaleX(0);transition: transform 0.3s ease} .live-game-card:hover::before {transform: scaleX(1)} .live-game-card:hover {transform: translateY(-8px);box-shadow: 0 20px 40px rgba(0,0,0,0.4);border-color: var(--gold-color)} .game-icon {width: 100%;height: 120px;display: flex;align-items: center;justify-content: center;margin-bottom: 20px;text-align: center} .game-icon img {max-width: 100%;height: auto;max-height: 120px;object-fit: contain} .live-game-card h3 {font-size: 1.5rem;color: var(--text-primary);margin-bottom: 15px;font-weight: 700;letter-spacing: -0.01em;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)} .live-game-card p {color: var(--text-secondary);line-height: 1.6;margin-bottom: 20px;font-size: 1rem} .game-features {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 20px} .feature-tag {background: rgba(255,215,0,0.1);color: var(--gold-color);padding: 6px 12px;border-radius: 15px;font-size: 0.85rem;font-weight: 600;border: 1px solid rgba(255,215,0,0.3);text-transform: uppercase;letter-spacing: 0.5px} .live-indicator {display: flex;align-items: center;gap: 8px;color: var(--success-color);font-size: 0.9rem;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px} .live-dot {width: 8px;height: 8px;background: var(--success-color);border-radius: 50%;animation: pulse 2s infinite} @keyframes pulse {0% {opacity: 1} 50% {opacity: 0.5} 100% {opacity: 1} } .live-benefits {display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 25px;margin-top: 40px} .benefit-item {background: rgba(0,0,0,0.4);padding: 25px;border-radius: 15px;text-align: center;backdrop-filter: blur(10px);border: 1px solid rgba(255,215,0,0.2);transition: all 0.3s ease} .benefit-item:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.3);border-color: var(--gold-color)} .benefit-icon {width: 50px;height: 50px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--accent-primary) 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 15px;box-shadow: 0 4px 15px rgba(197,1,2,0.3)} .benefit-icon i {font-size: 1.5rem;color: var(--text-primary)} .benefit-item h4 {font-size: 1.2rem;color: var(--text-primary);margin-bottom: 10px;font-weight: 600} .benefit-item p {color: var(--text-secondary);font-size: 0.95rem;line-height: 1.5} /* Bonuses Section */ .bonuses {margin: 60px 0;padding: 80px 0;background: linear-gradient(135deg,var(--light-bg) 0%,var(--third-color) 100%);border-radius: 20px;position: relative;overflow: hidden} .bonuses::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="bonus-pattern" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="2" fill="%23FFD700" opacity="0.1"/><circle cx="10" cy="10" r="1" fill="%23FFD700" opacity="0.05"/><circle cx="40" cy="40" r="1.5" fill="%23FFD700" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23bonus-pattern)"/></svg>');opacity: 0.3;z-index: 1} .bonuses .container {position: relative;z-index: 2;display: flex;flex-direction: column;align-items: center} .bonuses h2 {text-align: center;font-size: 2.8rem;color: var(--text-primary);margin-bottom: 20px;font-weight: 800;letter-spacing: -0.02em;text-shadow: 2px 2px 4px rgba(0,0,0,0.7)} .bonus-banner {text-align: center;margin: 30px 0 40px 0;width: 100%} .bonus-banner img {max-width: 60%;width: 60%;height: auto;border-radius: 15px;box-shadow: 0 10px 30px rgba(0,0,0,0.4);display: block;margin: 0 auto;text-align: center} .bonuses .section-subtitle {text-align: center;color: var(--text-secondary);font-size: 1.2rem;margin-bottom: 60px;max-width: 700px;margin-left: auto;margin-right: auto;font-weight: 400} .bonus-showcase {margin-bottom: 60px} .featured-bonus {background: linear-gradient(135deg,rgba(0,0,0,0.7) 0%,rgba(17,17,17,0.9) 100%);padding: 40px;border-radius: 25px;backdrop-filter: blur(20px);border: 2px solid rgba(255,215,0,0.4);text-align: center;position: relative;overflow: hidden} .featured-bonus::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 6px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%)} .bonus-badge {position: absolute;top: 20px;right: 20px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--accent-primary) 100%);color: var(--text-primary);padding: 8px 16px;border-radius: 20px;font-size: 0.9rem;font-weight: 700;text-transform: uppercase;letter-spacing: 1px;box-shadow: 0 4px 15px rgba(197,1,2,0.4)} .bonus-content {flex: 1} .bonus-content h3 {font-size: 2rem;color: var(--text-primary);margin-bottom: 10px;font-weight: 700;letter-spacing: -0.01em} .bonus-amount {font-size: 2.5rem;color: var(--gold-color);font-weight: 800;margin-bottom: 20px;text-shadow: 2px 2px 4px rgba(0,0,0,0.5)} .bonus-content p {color: var(--text-secondary);line-height: 1.6;margin-bottom: 25px;font-size: 1.1rem} .bonus-features {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 30px} .feature-tag {background: rgba(255,215,0,0.1);color: var(--gold-color);padding: 6px 14px;border-radius: 15px;font-size: 0.9rem;font-weight: 600;border: 1px solid rgba(255,215,0,0.3);text-transform: uppercase;letter-spacing: 0.5px} .bonus-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 30px;margin-bottom: 60px} .bonus-card {background: linear-gradient(135deg,rgba(0,0,0,0.6) 0%,rgba(17,17,17,0.8) 100%);padding: 30px;border-radius: 20px;backdrop-filter: blur(15px);border: 1px solid rgba(255,215,0,0.3);transition: all 0.4s ease;position: relative;overflow: hidden;text-align: center} .bonus-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%);transform: scaleX(0);transition: transform 0.3s ease} .bonus-card:hover::before {transform: scaleX(1)} .bonus-card:hover {transform: translateY(-8px);box-shadow: 0 20px 40px rgba(0,0,0,0.4);border-color: var(--gold-color)} .bonus-icon {width: 70px;height: 70px;background: linear-gradient(135deg,var(--gold-color) 0%,var(--dark-gold) 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 20px;box-shadow: 0 8px 20px rgba(255,215,0,0.3)} .bonus-icon i {font-size: 2rem;color: var(--secondary-color)} .bonus-card h3 {font-size: 1.4rem;color: var(--text-primary);margin-bottom: 10px;font-weight: 700;letter-spacing: -0.01em} .bonus-value {font-size: 1.8rem;color: var(--gold-color);font-weight: 800;margin-bottom: 15px;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)} .bonus-card p {color: var(--text-secondary);line-height: 1.6;margin-bottom: 20px;font-size: 1rem} .bonus-details {list-style: none;padding: 0;margin: 0 0 25px 0;text-align: left} .bonus-details li {color: var(--text-primary);padding: 5px 0;font-size: 0.95rem;position: relative;padding-left: 20px} .bonus-details li::before {content: '✓';position: absolute;left: 0;color: var(--gold-color);font-weight: 700} .bonus-terms {background: rgba(0,0,0,0.4);padding: 30px;border-radius: 15px;backdrop-filter: blur(10px);border: 1px solid rgba(255,215,0,0.2)} .bonus-terms h3 {font-size: 1.5rem;color: var(--text-primary);margin-bottom: 20px;font-weight: 700;text-align: center} .terms-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(250px,1fr));gap: 15px} .term-item {display: flex;align-items: center;gap: 10px;color: var(--text-secondary);font-size: 0.95rem} .term-item i {color: var(--success-color);font-size: 1.1rem} .bonus-cta {text-align: center;margin: 50px 0 40px 0} .bonus-cta .btn {font-size: 1.2rem;padding: 15px 40px;border-radius: 25px;text-transform: uppercase;letter-spacing: 1px;font-weight: 700;box-shadow: 0 8px 25px rgba(197,1,2,0.4);transition: all 0.3s ease} .bonus-cta .btn:hover {transform: translateY(-3px);box-shadow: 0 12px 35px rgba(197,1,2,0.6)} /* Payment Methods Section */ .payments {margin: 60px 0;padding: 60px 0;background: linear-gradient(135deg,var(--light-bg) 0%,var(--third-color) 100%);border-radius: 15px} .payments h2 {text-align: center;font-size: 2.2rem;color: var(--text-primary);margin-bottom: 50px;font-weight: 700} .payment-features {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 30px} .payment-feature {background: var(--secondary-color);padding: 30px;border-radius: 15px;border: 1px solid var(--border-color);text-align: center;transition: all 0.3s ease} .payment-feature:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.3)} .payment-feature h3 {font-size: 1.3rem;color: var(--gold-color);margin-bottom: 15px;font-weight: 600} .payment-feature p {color: var(--text-secondary);line-height: 1.6} /* Mobile Casino Section */ .mobile-casino {margin: 60px 0;padding: 60px 0;background: var(--light-bg);border-radius: 15px} .mobile-casino h2 {text-align: center;font-size: 2.2rem;color: var(--text-primary);margin-bottom: 50px;font-weight: 700} .mobile-content {display: grid;grid-template-columns: 1fr 1fr;gap: 50px;align-items: center} .mobile-text h3 {font-size: 1.3rem;color: var(--gold-color);margin-bottom: 15px;margin-top: 30px;font-weight: 600} .mobile-text h3:first-child {margin-top: 0} .mobile-text p {color: var(--text-secondary);line-height: 1.6;margin-bottom: 20px} .mobile-banner img {width: 100%;border-radius: 15px;box-shadow: 0 10px 30px rgba(0,0,0,0.3)} /* Responsible Gambling Section */ .responsible-gambling {margin: 60px 0;padding: 60px 0;background: linear-gradient(135deg,var(--third-color) 0%,var(--light-bg) 100%);border-radius: 15px} .responsible-gambling h2 {text-align: center;font-size: 2.2rem;color: var(--text-primary);margin-bottom: 50px;font-weight: 700} .responsible-features {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 30px} .responsible-feature {background: var(--secondary-color);padding: 30px;border-radius: 15px;border: 1px solid var(--border-color);text-align: center;transition: all 0.3s ease} .responsible-feature:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.3)} .responsible-feature h3 {font-size: 1.3rem;color: var(--gold-color);margin-bottom: 15px;font-weight: 600} .responsible-feature p {color: var(--text-secondary);line-height: 1.6} /* Reviews Section */ .reviews {margin: 60px 0;padding: 80px 0;background: linear-gradient(135deg,var(--light-bg) 0%,var(--third-color) 100%);border-radius: 20px;position: relative;overflow: hidden} .reviews::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="review-pattern" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1.5" fill="%23FFD700" opacity="0.1"/><circle cx="5" cy="5" r="0.8" fill="%23FFD700" opacity="0.05"/><circle cx="35" cy="35" r="1" fill="%23FFD700" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23review-pattern)"/></svg>');opacity: 0.3;z-index: 1} .reviews .container {position: relative;z-index: 2} .reviews h2 {text-align: center;font-size: 2.8rem;color: var(--text-primary);margin-bottom: 20px;font-weight: 800;letter-spacing: -0.02em;text-shadow: 2px 2px 4px rgba(0,0,0,0.7)} .reviews .section-subtitle {text-align: center;color: var(--text-secondary);font-size: 1.2rem;margin-bottom: 60px;max-width: 700px;margin-left: auto;margin-right: auto;font-weight: 400} .reviews-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(350px,1fr));gap: 30px;margin-bottom: 60px} .review-card {background: linear-gradient(135deg,rgba(0,0,0,0.6) 0%,rgba(17,17,17,0.8) 100%);padding: 30px;border-radius: 20px;backdrop-filter: blur(15px);border: 1px solid rgba(255,215,0,0.3);transition: all 0.4s ease;position: relative;overflow: hidden} .review-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%);transform: scaleX(0);transition: transform 0.3s ease} .review-card:hover::before {transform: scaleX(1)} .review-card:hover {transform: translateY(-8px);box-shadow: 0 20px 40px rgba(0,0,0,0.4);border-color: var(--gold-color)} .review-header {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 20px} .player-info {display: flex;align-items: center;gap: 15px} .player-avatar {width: 50px;height: 50px;background: linear-gradient(135deg,var(--gold-color) 0%,var(--dark-gold) 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 4px 15px rgba(255,215,0,0.3)} .player-avatar i {font-size: 1.8rem;color: var(--secondary-color)} .player-details h4 {font-size: 1.1rem;color: var(--text-primary);margin-bottom: 5px;font-weight: 600} .rating {display: flex;gap: 2px} .rating i {color: var(--gold-color);font-size: 0.9rem} .review-date {color: var(--text-secondary);font-size: 0.85rem;font-weight: 400} .review-content {margin-bottom: 20px} .review-content p {color: var(--text-primary);line-height: 1.6;font-size: 1rem;font-style: italic;margin: 0} .review-tags {display: flex;flex-wrap: wrap;gap: 8px} .tag {background: rgba(255,215,0,0.1);color: var(--gold-color);padding: 4px 12px;border-radius: 12px;font-size: 0.8rem;font-weight: 600;border: 1px solid rgba(255,215,0,0.3);text-transform: uppercase;letter-spacing: 0.5px} .review-stats {display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 30px;margin-top: 40px} .stat-item {text-align: center;background: rgba(0,0,0,0.4);padding: 30px;border-radius: 15px;backdrop-filter: blur(10px);border: 1px solid rgba(255,215,0,0.2);transition: all 0.3s ease} .stat-item:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.3);border-color: var(--gold-color)} .stat-number {font-size: 2.5rem;font-weight: 800;color: var(--gold-color);margin-bottom: 10px;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)} .stat-label {color: var(--text-secondary);font-size: 1rem;font-weight: 500;text-transform: uppercase;letter-spacing: 0.5px} /* Get Started Section */ .get-started {margin: 60px 0;padding: 80px 0;background: linear-gradient(135deg,var(--third-color) 0%,var(--light-bg) 100%);border-radius: 20px;position: relative;overflow: hidden} .get-started::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="steps-pattern" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="2" fill="%23FFD700" opacity="0.1"/><circle cx="10" cy="10" r="1" fill="%23FFD700" opacity="0.05"/><circle cx="50" cy="50" r="1.5" fill="%23FFD700" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23steps-pattern)"/></svg>');opacity: 0.3;z-index: 1} .get-started .container {position: relative;z-index: 2} .get-started h2 {text-align: center;font-size: 2.8rem;color: var(--text-primary);margin-bottom: 20px;font-weight: 800;letter-spacing: -0.02em;text-shadow: 2px 2px 4px rgba(0,0,0,0.7)} .get-started .section-subtitle {text-align: center;color: var(--text-secondary);font-size: 1.2rem;margin-bottom: 60px;max-width: 700px;margin-left: auto;margin-right: auto;font-weight: 400} .steps-container {display: flex;flex-direction: column;gap: 30px;margin-bottom: 60px} .step-card {background: linear-gradient(135deg,rgba(0,0,0,0.6) 0%,rgba(17,17,17,0.8) 100%);padding: 30px;border-radius: 20px;backdrop-filter: blur(15px);border: 1px solid rgba(255,215,0,0.3);transition: all 0.4s ease;position: relative;overflow: hidden;display: flex;align-items: center;gap: 30px} .step-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(135deg,var(--primary-color) 0%,var(--gold-color) 100%);transform: scaleX(0);transition: transform 0.3s ease} .step-card:hover::before {transform: scaleX(1)} .step-card:hover {transform: translateY(-5px);box-shadow: 0 20px 40px rgba(0,0,0,0.4);border-color: var(--gold-color)} .step-icon {width: 80px;height: 80px;background: linear-gradient(135deg,var(--gold-color) 0%,var(--dark-gold) 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;box-shadow: 0 8px 20px rgba(255,215,0,0.3);flex-shrink: 0} .step-icon i {font-size: 2rem;color: var(--secondary-color)} .step-content {flex: 1} .step-number {font-size: 1rem;color: var(--gold-color);font-weight: 700;margin-bottom: 10px;text-transform: uppercase;letter-spacing: 2px} .step-content h3 {font-size: 1.5rem;color: var(--text-primary);margin-bottom: 15px;font-weight: 700;letter-spacing: -0.01em;text-shadow: 1px 1px 2px rgba(0,0,0,0.5)} .step-content p {color: var(--text-secondary);line-height: 1.6;margin-bottom: 15px;font-size: 1rem} .step-features {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;gap: 10px} .step-features li {background: rgba(255,215,0,0.1);color: var(--gold-color);padding: 4px 12px;border-radius: 12px;font-size: 0.85rem;font-weight: 600;border: 1px solid rgba(255,215,0,0.3);text-transform: uppercase;letter-spacing: 0.5px} .step-arrow {color: var(--gold-color);font-size: 1.5rem;opacity: 0.7;transition: all 0.3s ease} .step-card:hover .step-arrow {opacity: 1;transform: translateX(5px)} .cta-section {background: linear-gradient(135deg,rgba(0,0,0,0.6) 0%,rgba(17,17,17,0.8) 100%);padding: 40px;border-radius: 20px;backdrop-filter: blur(15px);border: 1px solid rgba(255,215,0,0.3);display: flex;justify-content: space-between;align-items: center;gap: 40px} .cta-content h3 {font-size: 1.8rem;color: var(--text-primary);margin-bottom: 10px;font-weight: 700} .cta-content p {color: var(--text-secondary);margin-bottom: 25px;font-size: 1.1rem} .cta-buttons {display: flex;gap: 15px;flex-wrap: wrap} .cta-features {display: flex;flex-direction: column;gap: 15px} .cta-features .feature-item {display: flex;align-items: center;gap: 10px;color: var(--text-primary);font-weight: 600} .cta-features .feature-item i {color: var(--gold-color);font-size: 1.2rem} /* Final Word Section */ .final-word {margin: 60px 0;padding: 60px 0;background: var(--light-bg);border-radius: 15px;text-align: center} .final-word h2 {font-size: 2.2rem;color: var(--text-primary);margin-bottom: 30px;font-weight: 700} .final-word p {color: var(--text-secondary);line-height: 1.6;font-size: 1.1rem;margin-bottom: 20px;max-width: 800px;margin-left: auto;margin-right: auto} .final-cta {margin-top: 40px} .about-us {display: flex;justify-content: space-between;align-items: stretch;margin-top: 40px} .about-us-banner {flex: 1;max-width: 50%;overflow: hidden} .about-us-banner img {width: 100%;height: 100%;object-fit: cover;border-radius: 10px 0 0 10px} .about-us-intro {flex: 1;max-width: 50%;padding: 30px;background-color: var(--secondary-color);border-radius: 0 10px 10px 0;display: flex;flex-direction: column;justify-content: center} .about-us-intro h2 {font-size: 1.6rem;color: var(--text-primary);margin-bottom: 20px} .about-us-intro p {font-size: 1rem;color: var(--text-secondary);line-height: 1.8} .bonus {display: flex;flex-wrap: wrap;gap: 20px;margin-top: 20px} .bonus-carousel {width: 100%;max-width: 600px;overflow: hidden;position: relative;border-radius: 10px} .bonus-carousel a {flex-shrink: 0;width: 100%} .bonus-carousel-track {display: flex;transition: transform 0.5s ease-in-out} .bonus-carousel img {width: 100%;height: 100%;object-fit: cover;display: block;border-radius: 10px} .bonus-banner {flex: 1;display: flex;align-items: center;justify-content: center;overflow: hidden;border-radius: 10px;max-width: 600px;margin-top: 30px;height: auto} .bonus-banner img {width: 100%;height: auto;object-fit: cover;display: block} .bonus-details {flex: 1;display: flex;flex-direction: column;gap: 30px;background-color: var(--secondary-color);padding: 30px;border-radius: 10px} .bonus-intro h3 {font-size: 1.2rem;color: var(--text-primary);margin-bottom: 10px} .bonus-intro p {font-size: 1rem;color: var(--text-secondary);line-height: 1.6} .bonus-grid {display: flex;flex-wrap: wrap;gap: 20px;justify-content: space-between} .bonus-card {flex: 1;min-width: 200px;background-color: var(--third-color);padding: 20px;border-radius: 10px;text-align: left;transition: transform 0.3s ease} .bonus-card:hover {transform: translateY(-5px)} .bonus-card h4 {font-size: 1.1rem;color: var(--text-primary);margin-bottom: 10px} .bonus-card p {color: var(--text-secondary);font-size: 0.95rem;line-height: 1.5} .bonus-card i {display: block;font-size: 2rem;margin-bottom: 10px;color: var(--accent-primary)} .games {margin-top: 20px;display: flex;flex-direction: column;gap: 30px;padding: 30px;border-radius: 10px;background-color: var(--secondary-color)} .games-intro h3 {font-size: 1.5rem;color: var(--text-primary);margin-bottom: 10px} .games-intro p {font-size: 1rem;color: var(--text-secondary);line-height: 1.6} .games-grid {display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 20px} .game-card {background-color: var(--third-color);border-radius: 10px;overflow: hidden;padding: 15px;text-align: center;transition: transform 0.3s ease} .game-card:hover {transform: translateY(-5px)} .game-card img {width: 100%;height: auto;object-fit: cover;border-radius: 8px;margin-bottom: 10px} .game-card h4 {font-size: 1.1rem;color: var(--text-primary);margin: 0} /* Licensing & Compliance Section */ .licensing-compliance {margin: 60px 0;padding: 60px 0;background: linear-gradient(135deg,var(--third-color) 0%,var(--light-bg) 100%);border-radius: 15px} .licensing-compliance h2 {text-align: center;font-size: 2.2rem;color: var(--text-primary);margin-bottom: 50px;font-weight: 700} .compliance-features {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 30px} .compliance-feature {background: var(--secondary-color);padding: 30px;border-radius: 15px;border: 1px solid var(--border-color);text-align: center;transition: all 0.3s ease} .compliance-feature:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.3)} .compliance-feature h3 {font-size: 1.3rem;color: var(--gold-color);margin-bottom: 15px;font-weight: 600} .compliance-feature p {color: var(--text-secondary);line-height: 1.6} /* About Us Section */ .about-us {margin: 60px 0;padding: 80px 0;background: linear-gradient(135deg,var(--light-bg) 0%,var(--third-color) 100%);border-radius: 20px;position: relative;overflow: hidden} .about-us h2 {text-align: center;font-size: 2.8rem;color: var(--text-primary);margin-bottom: 50px;font-weight: 800;letter-spacing: -0.02em;text-shadow: 2px 2px 4px rgba(0,0,0,0.7)} .about-content {max-width: 1000px;margin: 0 auto} .about-text h3 {font-size: 1.5rem;color: var(--gold-color);margin-bottom: 20px;margin-top: 40px;font-weight: 700;letter-spacing: -0.01em} .about-text h3:first-child {margin-top: 0} .about-text p {color: var(--text-primary);line-height: 1.7;margin-bottom: 25px;font-size: 1.05rem;font-weight: 400} .team-members {display: grid;grid-template-columns: repeat(auto-fit,minmax(300px,1fr));gap: 25px;margin: 30px 0} .team-member {background: rgba(0,0,0,0.4);padding: 25px;border-radius: 15px;backdrop-filter: blur(10px);border: 1px solid rgba(255,215,0,0.2);transition: all 0.3s ease} .team-member:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.3);border-color: var(--gold-color)} .team-member h4 {font-size: 1.2rem;color: var(--text-primary);margin-bottom: 10px;font-weight: 600} .team-member p {color: var(--text-secondary);font-size: 0.95rem;line-height: 1.5;margin: 0} /* FAQ Section */ .faq {margin: 60px 0;padding: 80px 0;background: linear-gradient(135deg,var(--light-bg) 0%,var(--third-color) 100%);border-radius: 20px;position: relative;overflow: hidden} .faq::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="faq-pattern" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="1.5" fill="%23FFD700" opacity="0.1"/><circle cx="5" cy="5" r="0.8" fill="%23FFD700" opacity="0.05"/><circle cx="35" cy="35" r="1" fill="%23FFD700" opacity="0.08"/></pattern></defs><rect width="100" height="100" fill="url(%23faq-pattern)"/></svg>');opacity: 0.3;z-index: 1} .faq .container {position: relative;z-index: 2} .faq h2 {text-align: center;font-size: 2.8rem;color: var(--text-primary);margin-bottom: 20px;font-weight: 800;letter-spacing: -0.02em;text-shadow: 2px 2px 4px rgba(0,0,0,0.7)} .faq .section-subtitle {text-align: center;color: var(--text-secondary);font-size: 1.2rem;margin-bottom: 50px;max-width: 700px;margin-left: auto;margin-right: auto;font-weight: 400} .faq-container {max-width: 800px;margin: 0 auto} .faq-item {background: linear-gradient(135deg,rgba(0,0,0,0.6) 0%,rgba(17,17,17,0.8) 100%);border-radius: 15px;margin-bottom: 15px;border: 1px solid rgba(255,215,0,0.3);backdrop-filter: blur(15px);transition: all 0.3s ease;cursor: pointer;overflow: hidden} .faq-item:hover {transform: translateY(-2px);box-shadow: 0 10px 25px rgba(0,0,0,0.3);border-color: var(--gold-color)} .faq-question {padding: 25px 30px;display: flex;justify-content: space-between;align-items: center;transition: all 0.3s ease} .faq-question h3 {font-size: 1.3rem;color: var(--text-primary);margin: 0;font-weight: 600;letter-spacing: -0.01em;flex: 1;padding-right: 20px} .faq-icon {font-size: 1.5rem;color: var(--gold-color);font-weight: 700;transition: transform 0.3s ease;min-width: 30px;text-align: center} .faq-item.active .faq-icon {transform: rotate(45deg)} .faq-answer {max-height: 0;overflow: hidden;transition: max-height 0.4s ease,padding 0.4s ease;background: rgba(0,0,0,0.2)} .faq-item.active .faq-answer {max-height: 200px;padding: 0 30px 25px 30px} .faq-answer p {color: var(--text-secondary);font-size: 1rem;line-height: 1.6;margin: 0;padding-top: 15px} .footer {background-color: var(--secondary-color);padding: 40px 20px;margin-top: 40px;border-top: 1px solid var(--)} .footer-container {max-width: 1200px;margin: 0 auto;display: flex;flex-direction: column;align-items: center;gap: 30px} .footer-logo img {height: 50px} .footer-links {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center} .footer-links a {color: var(--text-secondary);font-size: 0.95rem;transition: color 0.3s ease} .footer-links a:hover {color: var(--accent-primary)} .footer-copy p {font-size: 0.85rem;color: var(--text-secondary);text-align: center} @media (max-width: 1024px) {.navbar {padding: 20px 40px;flex-wrap: wrap} .hero-content h1 {font-size: 2.5rem} h2 {font-size: 2.2rem} h3 {font-size: 1.3rem} .features-grid {grid-template-columns: repeat(auto-fit,minmax(300px,1fr))} .pokies-content {grid-template-columns: 1fr;gap: 40px} .pokies-banner {margin: 25px 0 35px 0} .pokies-banner img {max-width: 100%} .pokies-text {padding: 30px} .pokies-features {gap: 20px} .feature-highlight {padding: 25px} .live-casino-grid {grid-template-columns: 1fr;gap: 25px} .live-game-card {padding: 25px} .live-benefits {grid-template-columns: 1fr;gap: 15px} .live-game-card {padding: 20px} .game-icon {height: 100px} .game-icon img {max-height: 100px} .benefit-item {padding: 20px} .mobile-content {grid-template-columns: 1fr;gap: 30px} .about-us {flex-direction: column} .about-us-banner,.about-us-intro {max-width: 100%;border-radius: 10px} .about-us-intro {padding: 20px} .bonus {flex-direction: column} .bonus-banner,.bonus-details {max-width: 100%} .games {padding: 20px} .faq {padding: 40px 20px} .faq h2 {font-size: 2.2rem} .faq-question {padding: 20px 25px} .faq-question h3 {font-size: 1.1rem} .faq-item.active .faq-answer {padding: 0 25px 20px 25px} } @media (max-width: 768px) {.navbar {flex-direction: column;align-items: center;text-align: center;padding: 20px} .navbar .auth-buttons {margin-top: 10px;width: 100%;gap: 20px;justify-content: center} .navbar-menu {flex-direction: row;justify-content: center;gap: 10px;width: 100%} .hero {padding: 40px 20px;min-height: 50vh} .hero-content h1 {font-size: 2.2rem} h2 {font-size: 1.8rem} h3 {font-size: 1.2rem} .hero-content p {font-size: 1rem} .hero-buttons {flex-direction: column;align-items: center} .hero-image img {max-width: 450px} .features-grid {grid-template-columns: 1fr} .pokies-banner {margin: 20px 0 30px 0} .pokies-text {padding: 25px} .pokies-features {gap: 15px} .feature-highlight {padding: 20px} .feature-highlight .feature-icon {width: 50px;height: 50px} .feature-highlight .feature-icon i {font-size: 1.5rem} .feature-stats {gap: 10px} .feature-stats .stat {padding: 6px 12px;font-size: 0.8rem} .bonus-banner img {max-width: 100%} .bonus-grid {grid-template-columns: repeat(2,1fr);gap: 25px} .bonus-card {padding: 25px} .bonus-grid {grid-template-columns: 1fr;gap: 20px} .bonus-card {padding: 20px} .bonus-icon {width: 60px;height: 60px} .bonus-icon i {font-size: 1.5rem} .bonus-value {font-size: 1.5rem} .terms-grid {grid-template-columns: 1fr;gap: 10px} .payment-features {grid-template-columns: 1fr} .responsible-features {grid-template-columns: 1fr} .reviews-grid {grid-template-columns: 1fr;gap: 25px} .review-card {padding: 25px} .review-stats {grid-template-columns: 1fr;gap: 15px} .review-card {padding: 20px} .stat-item {padding: 25px} .stat-number {font-size: 2rem} .step-card {flex-direction: column;text-align: center;gap: 20px} .step-arrow {display: none} .cta-section {flex-direction: column;text-align: center;gap: 30px} .cta-features {flex-direction: row;justify-content: center;flex-wrap: wrap} .step-icon {width: 60px;height: 60px} .step-icon i {font-size: 1.5rem} .cta-section {padding: 30px} .cta-buttons {flex-direction: column;align-items: center} .about-us-intro h2 {font-size: 1.4rem} .games-intro h3,.faq h2 {font-size: 1.8rem} .faq .section-subtitle {font-size: 1rem} .faq-question {padding: 15px 20px} .faq-question h3 {font-size: 1rem} .faq-item.active .faq-answer {padding: 0 20px 15px 20px} .footer-container {gap: 20px} } @media (max-width: 480px) {.navbar {padding: 15px} .hero {padding: 30px 15px;min-height: 45vh} .hero-content h1 {font-size: 1.8rem} h2 {font-size: 1.6rem} h3 {font-size: 1.1rem} .hero-content p {font-size: 0.95rem} .hero-image img {max-width: 350px} .pokies-games .games-grid {grid-template-columns: 1fr} .about-us-intro {padding: 15px} .bonus-details {padding: 20px} .games {padding: 15px} .faq {padding: 15px} .footer {padding: 30px 15px} .footer-links {flex-direction: column;gap: 10px} .container {padding: 0 15px} .feature-card,.bonus-feature,.payment-feature,.responsible-feature {padding: 20px} .step {padding: 20px} } /* Live Winners Feed */ .live-winners-feed {background: linear-gradient(135deg,#1a1a2e,#16213e);padding: 60px 0;margin: 40px 0;border-radius: 15px;position: relative;overflow: hidden} .live-winners-feed::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="winners-pattern" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%23FFD700" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23winners-pattern)"/></svg>');opacity: 0.3;z-index: 1} .live-winners-feed .container {position: relative;z-index: 2} .winners-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;flex-wrap: wrap;gap: 20px} .winners-header h2 {color: white;font-size: 2.2rem;font-weight: 800;margin: 0;text-shadow: 2px 2px 4px rgba(0,0,0,0.5)} .live-indicator {display: flex;align-items: center;gap: 8px;background: rgba(255,0,0,0.2);padding: 8px 16px;border-radius: 20px;border: 1px solid #ff0000} .live-dot {width: 8px;height: 8px;background: #ff0000;border-radius: 50%;animation: livePulse 1.5s infinite} @keyframes livePulse {0%,100% {opacity: 1;transform: scale(1)} 50% {opacity: 0.5;transform: scale(1.2)}} .live-text {color: #ff0000;font-weight: 700;font-size: 0.9rem;text-transform: uppercase;letter-spacing: 1px} .winners-stats {display: flex;justify-content: center;gap: 40px;margin-bottom: 40px;flex-wrap: wrap} .stat-item {text-align: center;background: rgba(255,255,255,0.1);padding: 20px 25px;border-radius: 15px;backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.2);transition: transform 0.3s ease} .stat-item:hover {transform: translateY(-5px);border-color: var(--gold-color)} .stat-number {display: block;font-size: 2rem;font-weight: 800;color: var(--gold-color);text-shadow: 2px 2px 4px rgba(0,0,0,0.5);margin-bottom: 5px} .stat-label {display: block;color: white;font-size: 0.9rem;font-weight: 500;opacity: 0.9} .winners-feed {background: rgba(0,0,0,0.3);border-radius: 15px;padding: 20px;margin-bottom: 30px;max-height: 400px;overflow-y: auto;border: 1px solid rgba(255,255,255,0.1)} .winner-notification {display: flex;align-items: center;gap: 15px;padding: 15px;margin-bottom: 10px;background: rgba(255,255,255,0.05);border-radius: 10px;border-left: 4px solid var(--gold-color);transition: all 0.3s ease;animation: slideInRight 0.5s ease-out} @keyframes slideInRight {from {opacity: 0;transform: translateX(50px)} to {opacity: 1;transform: translateX(0)}} .winner-notification:hover {background: rgba(255,255,255,0.1);transform: translateX(5px);border-left-color: #ff6b35} .winner-avatar {width: 50px;height: 50px;border-radius: 50%;overflow: hidden;flex-shrink: 0;border: 2px solid var(--gold-color)} .winner-avatar img {width: 100%;height: 100%;object-fit: cover} .winner-details {flex: 1;min-width: 0} .winner-name {color: white;font-weight: 700;font-size: 1rem;margin-bottom: 2px} .winner-location {color: #ccc;font-size: 0.85rem;margin-bottom: 2px} .winner-game {color: var(--gold-color);font-size: 0.8rem;font-weight: 600} .winner-amount {color: #00ff88;font-weight: 800;font-size: 1.2rem;text-shadow: 1px 1px 2px rgba(0,0,0,0.5);margin-right: 10px} .winner-time {color: #999;font-size: 0.8rem;white-space: nowrap} .live-activity {background: rgba(0,0,0,0.2);border-radius: 10px;padding: 15px;margin-bottom: 30px;border: 1px solid rgba(255,255,255,0.1)} .activity-item {display: flex;align-items: center;gap: 10px;padding: 8px 0;color: white;font-size: 0.9rem;border-bottom: 1px solid rgba(255,255,255,0.1);animation: fadeInUp 0.5s ease-out} .activity-item:last-child {border-bottom: none} @keyframes fadeInUp {from {opacity: 0;transform: translateY(20px)} to {opacity: 1;transform: translateY(0)}} .activity-icon {font-size: 1.2rem;width: 20px;text-align: center} .activity-text {flex: 1;color: #e0e0e0} .activity-time {color: #999;font-size: 0.8rem;white-space: nowrap} .winners-cta {text-align: center;background: linear-gradient(135deg,rgba(255,107,53,0.2),rgba(255,0,0,0.2));padding: 30px;border-radius: 15px;border: 1px solid rgba(255,107,53,0.3)} .winners-cta h3 {color: white;font-size: 1.8rem;font-weight: 800;margin-bottom: 10px;text-shadow: 2px 2px 4px rgba(0,0,0,0.5)} .winners-cta p {color: #e0e0e0;font-size: 1.1rem;margin-bottom: 25px;opacity: 0.9} @media (max-width: 768px) {.winners-header {flex-direction: column;text-align: center} .winners-header h2 {font-size: 1.8rem} .winners-stats {gap: 20px} .stat-item {padding: 15px 20px} .stat-number {font-size: 1.5rem} .winner-notification {flex-direction: column;text-align: center;gap: 10px} .winner-details {order: 2} .winner-amount {order: 1;font-size: 1.5rem;margin-right: 0;margin-bottom: 5px} .winner-time {order: 3} .activity-item {flex-direction: column;text-align: center;gap: 5px} .activity-text {order: 1} .activity-time {order: 2}}