/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Sarabun', sans-serif;
    background-color: #0a0a0a;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

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

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* Register Page Styles */
.register-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 20px 60px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

.register-container {
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.register-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.register-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #ffffff;
    font-size: 0.9rem;
}

.form-label i {
    color: #ffd700;
}

.form-input {
    padding: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.register-button,
.login-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    min-height: 50px;
}

.register-button.primary {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #000000;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.register-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4);
}

.login-button.secondary {
    background: transparent;
    color: #ffd700;
    border: 2px solid #ffd700;
}

.login-button.secondary:hover {
    background: #ffd700;
    color: #000000;
    transform: translateY(-2px);
}

/* Responsive Styles for Register Page */
@media (max-width: 768px) {
    .register-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .register-page {
        padding: 100px 15px 40px;
    }

    .register-container {
        max-width: 350px;
    }
}

.header.scrolled {
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    height: 70px;
}

/* Logo Styles */
.header-logo a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 1.5rem;
    color: #ffd700;
    transition: all 0.3s ease;
}

.header-logo a:hover {
    transform: scale(1.05);
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
}

.logo-text {
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    align-items: center;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    font-family: 'Sarabun', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: #ffffff;
    padding: 0.5rem 0;
    position: relative;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #ffd700;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* CTA Button */
.header-cta {
    display: flex;
    align-items: center;
}

.cta-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

.cta-button i {
    font-size: 1.1rem;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(15px);
    transform: translateY(-100%);
    transition: all 0.3s ease;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
}

.mobile-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
}

.mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav-link {
    font-family: 'Sarabun', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: #ffffff;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.mobile-nav-link:hover {
    color: #ffd700;
    padding-left: 1rem;
}

.mobile-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    margin-top: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.mobile-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-container {
        padding: 1rem;
    }

    .nav-menu,
    .header-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .logo-text {
        font-size: 1.25rem;
    }

    .logo-img {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0.75rem;
        height: 60px;
    }

    .mobile-menu {
        top: 60px;
    }

    .mobile-menu-content {
        padding: 1.5rem;
    }

    .logo-text {
        font-size: 1.1rem;
    }

    .logo-img {
        width: 30px;
        height: 30px;
    }
}

/* Body padding to account for fixed header */
body {
    padding-top: 70px;
}

body.menu-open {
    overflow: hidden;
}

@media (max-width: 480px) {
    body {
        padding-top: 60px;
    }
}

/* Smooth scrolling for anchor links */
html {
    scroll-padding-top: 90px;
}

/* Promotion Page Styles */

/* Promotion Hero Section */
.promotion-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
    padding: 2rem 0;
}

.promotion-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 40%, rgba(255, 215, 0, 0.1) 0%, transparent 70%),
                radial-gradient(circle at 70% 60%, rgba(255, 237, 78, 0.08) 0%, transparent 50%);
    z-index: 1;
}

.promotion-hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.promotion-hero-content {
    text-align: center;
}

.promotion-hero-title {
    font-size: 3rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 50%, #ffd700 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.promotion-hero-description {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.promotion-hero-cta {
    display: flex;
    justify-content: center;
}

.promotion-hero-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 1.25rem 3rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
    border: none;
}

.promotion-hero-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

.promotion-hero-button i {
    font-size: 1.3rem;
}

/* Section Base Styles */
.new-member-promo,
.wallet-promo,
.slot-games-promo,
.monthly-code-promo,
.vip-promo,
.uwallet-promo,
.special-event-promo,
.faq-promo,
.contact-promo {
    padding: 5rem 0;
    position: relative;
}

.new-member-promo:nth-child(even),
.wallet-promo:nth-child(even),
.slot-games-promo:nth-child(even),
.monthly-code-promo:nth-child(even),
.vip-promo:nth-child(even),
.uwallet-promo:nth-child(even),
.special-event-promo:nth-child(even),
.faq-promo:nth-child(even),
.contact-promo:nth-child(even) {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.5) 0%, rgba(10, 10, 10, 0.8) 100%);
}

.new-member-promo-container,
.wallet-promo-container,
.slot-games-promo-container,
.monthly-code-promo-container,
.vip-promo-container,
.uwallet-promo-container,
.special-event-promo-container,
.faq-promo-container,
.contact-promo-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Section Headers */
.new-member-promo-title,
.wallet-promo-title,
.slot-games-promo-title,
.monthly-code-promo-title,
.vip-promo-title,
.uwallet-promo-title,
.special-event-promo-title,
.faq-promo-title,
.contact-promo-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-bonus-title,
.wallet-promo-subtitle,
.slot-games-promo-subtitle,
.monthly-code-subtitle,
.vip-promo-subtitle,
.uwallet-promo-subtitle,
.special-event-subtitle {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.welcome-bonus-description,
.wallet-promo-description,
.slot-games-promo-description,
.monthly-code-description,
.vip-promo-description,
.uwallet-promo-description,
.special-event-description,
.contact-promo-description {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

/* Feature Grids */
.bonus-features-grid,
.wallet-features-grid,
.slot-promotions-grid,
.vip-benefits-grid,
.uwallet-features-grid,
.uwallet-advantages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.bonus-feature-item,
.wallet-feature-item,
.slot-promotion-item,
.vip-benefit-item,
.uwallet-feature-item,
.uwallet-advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.bonus-feature-item:hover,
.wallet-feature-item:hover,
.slot-promotion-item:hover,
.vip-benefit-item:hover,
.uwallet-feature-item:hover,
.uwallet-advantage-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.15);
}

.bonus-feature-icon,
.wallet-feature-icon,
.slot-promotion-icon,
.vip-benefit-icon,
.uwallet-feature-icon,
.uwallet-advantage-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 50%;
    flex-shrink: 0;
}

.bonus-feature-icon i,
.wallet-feature-icon i,
.slot-promotion-icon i,
.vip-benefit-icon i,
.uwallet-feature-icon i,
.uwallet-advantage-icon i {
    color: #0a0a0a;
    font-size: 1.2rem;
}

.bonus-feature-content,
.wallet-feature-content,
.slot-promotion-content,
.vip-benefit-content,
.uwallet-feature-content,
.uwallet-advantage-content {
    flex: 1;
}

.bonus-feature-content p,
.wallet-feature-content h4,
.slot-promotion-content h5,
.vip-benefit-content h5,
.uwallet-feature-content h5,
.uwallet-advantage-content p {
    color: #ffffff;
    margin: 0;
    font-weight: 600;
}

/* Step Grids */
.wallet-steps-grid,
.code-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.wallet-step-item,
.code-step-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border-left: 4px solid #ffd700;
}

.wallet-step-number,
.code-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.wallet-step-content p,
.code-step-content p {
    color: #ffffff;
    margin: 0;
    font-weight: 500;
}

/* Popular Games Grid */
.popular-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.popular-game-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.popular-game-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.4);
}

.popular-game-name {
    color: #ffd700;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.popular-game-rtp {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 0.9rem;
}

/* Monthly Schedule Grid */
.monthly-schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.monthly-schedule-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.monthly-schedule-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.4);
}

.monthly-schedule-period {
    font-size: 1.1rem;
    color: #ffd700;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.monthly-schedule-reward {
    color: #ffffff;
    font-weight: 500;
}

/* VIP Levels Grid */
.vip-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.vip-level-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.vip-level-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.4);
}

.vip-level-tier {
    font-size: 1.2rem;
    color: #ffd700;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.vip-level-requirement {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

/* Festival Promotions Grid */
.festival-promotions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.festival-promotion-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.festival-promotion-item:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 215, 0, 0.4);
}

.festival-promotion-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.festival-promotion-content h5 {
    color: #ffd700;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.festival-promotion-content p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    font-size: 0.9rem;
}

/* Weekly Activities Grid */
.weekly-activities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.weekly-activity-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.weekly-activity-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.4);
}

.weekly-activity-day {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.weekly-activity-content h5 {
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.weekly-activity-content p {
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-size: 0.9rem;
}

/* FAQ Styles */
.faq-items {
    margin-bottom: 3rem;
}

.faq-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 215, 0, 0.2);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

.faq-question {
    background: rgba(255, 215, 0, 0.1);
    padding: 1.5rem;
    margin: 0;
    color: #ffd700;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.faq-answer {
    padding: 1.5rem;
}

.faq-answer p {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.6;
}

/* Contact Methods Grid */
.contact-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.contact-method-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
}

.contact-method-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 215, 0, 0.4);
}

.contact-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 50%;
    flex-shrink: 0;
}

.contact-method-icon i {
    color: #0a0a0a;
    font-size: 1.2rem;
}

.contact-method-content h4 {
    color: #ffd700;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.contact-method-content p {
    color: #ffffff;
    margin: 0;
    font-weight: 600;
}

.contact-support-text {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contact-note {
    text-align: center;
    margin-top: 2rem;
}

.contact-note p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* CTA Buttons */
.bonus-cta,
.wallet-cta,
.slot-games-cta,
.monthly-code-cta,
.vip-cta,
.uwallet-cta,
.special-event-cta,
.faq-final-cta,
.contact-final-cta {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.bonus-cta-button,
.wallet-cta-button,
.slot-games-cta-button,
.monthly-code-cta-button,
.vip-cta-button,
.uwallet-cta-button,
.special-event-cta-button,
.faq-final-cta-button,
.contact-final-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);
    border: none;
}

.bonus-cta-button:hover,
.wallet-cta-button:hover,
.slot-games-cta-button:hover,
.monthly-code-cta-button:hover,
.vip-cta-button:hover,
.uwallet-cta-button:hover,
.special-event-cta-button:hover,
.faq-final-cta-button:hover,
.contact-final-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

/* Section Titles */
.bonus-features-title,
.wallet-steps-title,
.slot-promotions-title,
.popular-games-title,
.monthly-schedule-title,
.code-steps-title,
.vip-benefits-title,
.vip-levels-title,
.uwallet-features-title,
.uwallet-advantages-title,
.festival-promotions-title,
.weekly-activities-title {
    font-size: 1.4rem;
    color: #ffffff;
    margin-bottom: 2rem;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .promotion-hero-title {
        font-size: 2.5rem;
    }

    .new-member-promo-title,
    .wallet-promo-title,
    .slot-games-promo-title,
    .monthly-code-promo-title,
    .vip-promo-title,
    .uwallet-promo-title,
    .special-event-promo-title,
    .faq-promo-title,
    .contact-promo-title {
        font-size: 2rem;
    }

    .bonus-features-grid,
    .wallet-features-grid,
    .slot-promotions-grid,
    .vip-benefits-grid,
    .uwallet-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .new-member-promo,
    .wallet-promo,
    .slot-games-promo,
    .monthly-code-promo,
    .vip-promo,
    .uwallet-promo,
    .special-event-promo,
    .faq-promo,
    .contact-promo {
        padding: 3rem 0;
    }

    .new-member-promo-container,
    .wallet-promo-container,
    .slot-games-promo-container,
    .monthly-code-promo-container,
    .vip-promo-container,
    .uwallet-promo-container,
    .special-event-promo-container,
    .faq-promo-container,
    .contact-promo-container {
        padding: 0 1rem;
    }

    .promotion-hero-title {
        font-size: 2rem;
    }

    .promotion-hero-description {
        font-size: 1.1rem;
    }

    .promotion-hero-button {
        font-size: 1rem;
        padding: 1rem 2rem;
    }

    .new-member-promo-title,
    .wallet-promo-title,
    .slot-games-promo-title,
    .monthly-code-promo-title,
    .vip-promo-title,
    .uwallet-promo-title,
    .special-event-promo-title,
    .faq-promo-title,
    .contact-promo-title {
        font-size: 1.75rem;
    }

    .bonus-features-grid,
    .wallet-features-grid,
    .slot-promotions-grid,
    .vip-benefits-grid,
    .uwallet-features-grid,
    .uwallet-advantages-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .wallet-steps-grid,
    .code-steps-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .popular-games-grid,
    .monthly-schedule-grid,
    .vip-levels-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .festival-promotions-grid,
    .weekly-activities-grid {
        grid-template-columns: 1fr;
    }

    .contact-methods {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .promotion-hero {
        min-height: 60vh;
        padding: 1rem 0;
    }

    .promotion-hero-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .promotion-hero-description {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .promotion-hero-button {
        font-size: 0.9rem;
        padding: 0.875rem 1.5rem;
    }

    .new-member-promo-title,
    .wallet-promo-title,
    .slot-games-promo-title,
    .monthly-code-promo-title,
    .vip-promo-title,
    .uwallet-promo-title,
    .special-event-promo-title,
    .faq-promo-title,
    .contact-promo-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .welcome-bonus-title,
    .wallet-promo-subtitle,
    .slot-games-promo-subtitle,
    .monthly-code-subtitle,
    .vip-promo-subtitle,
    .uwallet-promo-subtitle,
    .special-event-subtitle {
        font-size: 1.4rem;
    }

    .bonus-feature-item,
    .wallet-feature-item,
    .slot-promotion-item,
    .vip-benefit-item,
    .uwallet-feature-item,
    .uwallet-advantage-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .festival-promotion-item {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .popular-games-grid,
    .monthly-schedule-grid,
    .vip-levels-grid {
        grid-template-columns: 1fr;
    }

    .bonus-cta-button,
    .wallet-cta-button,
    .slot-games-cta-button,
    .monthly-code-cta-button,
    .vip-cta-button,
    .uwallet-cta-button,
    .special-event-cta-button,
    .faq-final-cta-button,
    .contact-final-cta-button {
        font-size: 0.9rem;
        padding: 0.875rem 1.5rem;
    }
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 70%),
                radial-gradient(circle at 80% 20%, rgba(255, 237, 78, 0.05) 0%, transparent 50%);
    z-index: 1;
}

.hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hero-title {
    font-family: 'Prompt', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 1rem;
}

.hero-title::first-line {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
    max-width: 90%;
}

.hero-cta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 1rem;
}

.hero-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.hero-button.primary {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.hero-button.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

.hero-button.secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffd700;
}

.hero-button.secondary:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
    border-color: #ffed4e;
    color: #ffd700;
}

.hero-button i {
    font-size: 1.2rem;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero-img {
    max-width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.hero-img:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Hero Responsive Design */
@media (max-width: 1024px) {
    .hero-container {
        gap: 3rem;
        padding: 2rem 1.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 1rem;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    .hero-cta {
        flex-direction: column;
        gap: 1rem;
    }

    .hero-button {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    .hero-image {
        order: -1;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 90vh;
    }

    .hero-container {
        padding: 1.5rem 1rem;
    }

    .hero-title {
        font-size: 1.875rem;
        line-height: 1.3;
    }

    .hero-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .hero-button {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
}

/* About Section */
.about {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
    position: relative;
}

.about-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.about-header {
    text-align: center;
    margin-bottom: 4rem;
}

.about-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.about-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
    max-width: 900px;
    margin: 0 auto;
}

/* Features Section */
.features-section {
    margin-bottom: 5rem;
}

.features-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 3rem;
}

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

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 15px;
    flex-shrink: 0;
}

.feature-icon i {
    font-size: 1.5rem;
    color: #0a0a0a;
}

.feature-content {
    flex: 1;
}

.feature-heading {
    font-family: 'Prompt', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.feature-text {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #cccccc;
}

/* Security Section */
.security-section {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.security-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.security-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 1.5rem;
}

.security-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
}

.security-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.security-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.security-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* About Responsive Design */
@media (max-width: 1024px) {
    .about-container {
        padding: 0 1.5rem;
    }

    .about-title {
        font-size: 2.25rem;
    }

    .features-title {
        font-size: 1.75rem;
    }

    .security-title {
        font-size: 1.75rem;
    }

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }

    .security-content {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .about {
        padding: 3rem 0;
    }

    .about-container {
        padding: 0 1rem;
    }

    .about-header {
        margin-bottom: 3rem;
    }

    .about-title {
        font-size: 2rem;
    }

    .about-description {
        font-size: 1rem;
    }

    .features-section {
        margin-bottom: 3rem;
    }

    .features-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-item {
        padding: 1.5rem;
        gap: 1rem;
    }

    .feature-icon {
        width: 50px;
        height: 50px;
    }

    .feature-icon i {
        font-size: 1.25rem;
    }

    .feature-heading {
        font-size: 1.1rem;
    }

    .feature-text {
        font-size: 0.95rem;
    }

    .security-section {
        padding: 2rem;
    }

    .security-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .security-title {
        font-size: 1.5rem;
    }

    .security-description {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .about {
        padding: 2rem 0;
    }

    .about-container {
        padding: 0 0.75rem;
    }

    .about-title {
        font-size: 1.75rem;
        line-height: 1.4;
    }

    .about-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .features-title {
        font-size: 1.375rem;
    }

    .feature-item {
        padding: 1.25rem;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .feature-icon {
        align-self: center;
        width: 45px;
        height: 45px;
    }

    .security-section {
        padding: 1.5rem;
    }

    .security-title {
        font-size: 1.375rem;
    }

    .security-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

/* Wallet Guide Section */
.wallet-guide {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    position: relative;
}

.wallet-guide-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.wallet-guide-header {
    text-align: center;
    margin-bottom: 4rem;
}

.wallet-guide-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.wallet-guide-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
    max-width: 900px;
    margin: 0 auto;
}

/* Wallet Processes */
.wallet-processes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

.process-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 2rem;
    text-align: center;
}

/* Deposit Process */
.deposit-process {
    background: rgba(255, 255, 255, 0.02);
    padding: 2.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
}

.step-item:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateX(10px);
}

.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.step-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Withdrawal Process */
.withdrawal-process {
    background: rgba(255, 255, 255, 0.02);
    padding: 2.5rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.withdrawal-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.withdrawal-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
}

.withdrawal-item:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateX(10px);
}

.withdrawal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 50%;
    flex-shrink: 0;
}

.withdrawal-icon i {
    font-size: 1.25rem;
    color: #0a0a0a;
}

.withdrawal-content {
    flex: 1;
}

.withdrawal-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.withdrawal-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Wallet Features */
.wallet-features {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wallet-features-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}

.wallet-features-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
}

.wallet-features-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wallet-guide-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.wallet-guide-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Wallet Guide Responsive Design */
@media (max-width: 1024px) {
    .wallet-guide-container {
        padding: 0 1.5rem;
    }

    .wallet-guide-title {
        font-size: 2.25rem;
    }

    .process-title {
        font-size: 1.5rem;
    }

    .wallet-processes {
        gap: 2rem;
    }

    .wallet-features-content {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .wallet-guide {
        padding: 3rem 0;
    }

    .wallet-guide-container {
        padding: 0 1rem;
    }

    .wallet-guide-header {
        margin-bottom: 3rem;
    }

    .wallet-guide-title {
        font-size: 2rem;
    }

    .wallet-guide-description {
        font-size: 1rem;
    }

    .wallet-processes {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .process-title {
        font-size: 1.375rem;
        margin-bottom: 1.5rem;
    }

    .deposit-process,
    .withdrawal-process {
        padding: 2rem;
    }

    .step-item,
    .withdrawal-item {
        padding: 1.25rem;
        gap: 1rem;
    }

    .step-number,
    .withdrawal-icon {
        width: 45px;
        height: 45px;
    }

    .step-number {
        font-size: 1.25rem;
    }

    .withdrawal-icon i {
        font-size: 1.1rem;
    }

    .step-title,
    .withdrawal-title {
        font-size: 1.1rem;
    }

    .step-description,
    .withdrawal-description {
        font-size: 0.95rem;
    }

    .wallet-features {
        padding: 2rem;
    }

    .wallet-features-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .wallet-features-description {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .wallet-guide {
        padding: 2rem 0;
    }

    .wallet-guide-container {
        padding: 0 0.75rem;
    }

    .wallet-guide-title {
        font-size: 1.75rem;
        line-height: 1.4;
    }

    .wallet-guide-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .process-title {
        font-size: 1.25rem;
    }

    .deposit-process,
    .withdrawal-process {
        padding: 1.5rem;
    }

    .step-item,
    .withdrawal-item {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
        gap: 1rem;
    }

    .step-item:hover,
    .withdrawal-item:hover {
        transform: translateY(-5px);
    }

    .step-number,
    .withdrawal-icon {
        width: 40px;
        height: 40px;
    }

    .step-title,
    .withdrawal-title {
        font-size: 1rem;
    }

    .step-description,
    .withdrawal-description {
        font-size: 0.9rem;
    }

    .wallet-features {
        padding: 1.5rem;
    }

    .wallet-features-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }
}

/* Slot Games Section */
.slot-games {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
    position: relative;
}

.slot-games-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.slot-games-header {
    text-align: center;
    margin-bottom: 4rem;
}

.slot-games-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.slot-games-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
    max-width: 900px;
    margin: 0 auto;
}

/* Game Types */
.game-types {
    margin-bottom: 3rem;
}

.game-types-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 3rem;
}

/* Video Slots */
.video-slots {
    margin-bottom: 3rem;
}

.video-slots-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
    text-align: center;
}

.video-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.video-slot-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.video-slot-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.video-slot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.video-slot-icon i {
    font-size: 1.25rem;
    color: #0a0a0a;
}

.video-slot-content {
    flex: 1;
}

.video-slot-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.video-slot-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Jackpot Slots */
.jackpot-slots {
    margin-bottom: 3rem;
}

.jackpot-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    text-align: center;
}

.jackpot-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #cccccc;
    text-align: center;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.jackpot-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.jackpot-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 215, 0, 0.05);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
}

.jackpot-item:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.jackpot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.jackpot-icon i {
    font-size: 1.25rem;
    color: #0a0a0a;
}

.jackpot-content {
    flex: 1;
}

.jackpot-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 0.5rem;
}

.jackpot-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Gaming Tips */
.gaming-tips {
    margin-bottom: 3rem;
}

.tips-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
    text-align: center;
}

.tips-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tip-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.tip-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.tip-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.tip-content {
    flex: 1;
}

.tip-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.tip-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Slot Games Image */
.slot-games-image {
    text-align: center;
    margin-top: 3rem;
}

.slot-collection-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.slot-collection-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Wallet System Section */
.wallet-system {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    position: relative;
}

.wallet-system-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.wallet-system-header {
    text-align: center;
    margin-bottom: 4rem;
}

.wallet-system-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.wallet-system-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
    max-width: 900px;
    margin: 0 auto;
}

/* Wallet Features Section */
.wallet-features-section {
    margin-bottom: 4rem;
}

.wallet-features-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 3rem;
}

.wallet-feature-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.feature-group-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2rem;
    text-align: center;
}

.feature-group-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-group-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.feature-group-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.feature-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.feature-group-icon i {
    font-size: 1.25rem;
    color: #0a0a0a;
}

.feature-group-content {
    flex: 1;
}

.feature-group-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.feature-group-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Wallet Usage */
.wallet-usage {
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.wallet-usage-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #cccccc;
}

/* Comparison Section */
.comparison-section {
    margin-bottom: 3rem;
}

.comparison-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 2rem;
}

.comparison-table {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: rgba(255, 215, 0, 0.1);
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-cell {
    padding: 1rem 1.5rem;
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    text-align: center;
}

.feature-header,
.alfabet-header,
.competitor-header {
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffd700;
}

.feature-cell {
    font-weight: 600;
    color: #ffffff;
    text-align: left;
    background: rgba(255, 255, 255, 0.02);
}

.alfabet-cell {
    color: #ffd700;
    font-weight: 600;
    background: rgba(255, 215, 0, 0.05);
}

.competitor-cell {
    color: #cccccc;
}

/* Wallet System Image */
.wallet-system-image {
    text-align: center;
    margin-top: 3rem;
}

.wallet-system-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.wallet-system-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Slot Games Responsive Design */
@media (max-width: 1024px) {
    .slot-games-container,
    .wallet-system-container {
        padding: 0 1.5rem;
    }

    .slot-games-title,
    .wallet-system-title {
        font-size: 2.25rem;
    }

    .game-types-title,
    .wallet-features-title {
        font-size: 1.75rem;
    }

    .video-slots-grid,
    .jackpot-types,
    .tips-list {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.25rem;
    }

    .wallet-feature-groups {
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .slot-games,
    .wallet-system {
        padding: 3rem 0;
    }

    .slot-games-container,
    .wallet-system-container {
        padding: 0 1rem;
    }

    .slot-games-header,
    .wallet-system-header {
        margin-bottom: 3rem;
    }

    .slot-games-title,
    .wallet-system-title {
        font-size: 2rem;
    }

    .slot-games-description,
    .wallet-system-description {
        font-size: 1rem;
    }

    .game-types-title,
    .wallet-features-title {
        font-size: 1.5rem;
    }

    .video-slots-title,
    .jackpot-title,
    .tips-title,
    .feature-group-title {
        font-size: 1.25rem;
    }

    .video-slots-grid,
    .jackpot-types,
    .tips-list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .wallet-feature-groups {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .comparison-header,
    .comparison-row {
        grid-template-columns: 1fr;
    }

    .comparison-cell {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .feature-header,
    .alfabet-header,
    .competitor-header {
        font-size: 1rem;
    }

    .comparison-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .slot-games,
    .wallet-system {
        padding: 2rem 0;
    }

    .slot-games-container,
    .wallet-system-container {
        padding: 0 0.75rem;
    }

    .slot-games-title,
    .wallet-system-title {
        font-size: 1.75rem;
        line-height: 1.4;
    }

    .slot-games-description,
    .wallet-system-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .game-types-title,
    .wallet-features-title {
        font-size: 1.375rem;
    }

    .video-slot-item,
    .jackpot-item,
    .tip-item,
    .feature-group-item {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
        gap: 1rem;
    }

    .video-slot-item:hover,
    .jackpot-item:hover,
    .tip-item:hover,
    .feature-group-item:hover {
        transform: translateY(-5px);
    }

    .video-slot-icon,
    .jackpot-icon,
    .tip-number,
    .feature-group-icon {
        align-self: center;
    }

    .wallet-usage {
        padding: 1.5rem;
    }

    .comparison-title {
        font-size: 1.375rem;
    }
}

/* Promotions Section */
.promotions {
    padding: 5rem 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
    position: relative;
}

.promotions-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.promotions-header {
    text-align: center;
    margin-bottom: 4rem;
}

.promotions-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.promotions-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
    max-width: 900px;
    margin: 0 auto;
}

/* New Member Promotions */
.new-member-promotions {
    margin-bottom: 4rem;
}

.new-member-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 2rem;
}

.welcome-package-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 2rem;
}

.welcome-packages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.welcome-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 215, 0, 0.05);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 215, 0, 0.1);
    transition: all 0.3s ease;
}

.welcome-item:hover {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.welcome-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.welcome-icon i {
    font-size: 1.25rem;
    color: #0a0a0a;
}

.welcome-content {
    flex: 1;
}

.welcome-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 0.5rem;
}

.welcome-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Daily Promotions */
.daily-promotions {
    margin-bottom: 4rem;
}

.daily-promotions-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 3rem;
}

.promotion-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.promo-section-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    margin-bottom: 2rem;
}

/* Daily Promo Grid */
.daily-promo-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.daily-promo-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.daily-promo-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateX(10px);
}

.daily-promo-day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 40px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 8px;
    flex-shrink: 0;
}

.daily-promo-content {
    flex: 1;
}

.daily-promo-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.25rem;
}

.daily-promo-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.9rem;
    color: #cccccc;
    line-height: 1.4;
}

/* Special Promo Grid */
.special-promo-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.special-promo-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.special-promo-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.special-promo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.special-promo-icon i {
    font-size: 1.25rem;
    color: #0a0a0a;
}

.special-promo-content {
    flex: 1;
}

.special-promo-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 0.5rem;
}

.special-promo-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Bonus Conditions */
.bonus-conditions {
    margin-bottom: 4rem;
}

.bonus-conditions-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 1.5rem;
}

.bonus-conditions-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #cccccc;
    text-align: center;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.conditions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.condition-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.condition-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.condition-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.condition-icon i {
    font-size: 1.25rem;
    color: #0a0a0a;
}

.condition-content {
    flex: 1;
}

.condition-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.condition-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Promo CTA */
.promo-cta {
    text-align: center;
}

.promo-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.promo-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

.promo-cta-button i {
    font-size: 1.2rem;
}

/* Promo Usage */
.promo-usage {
    margin-bottom: 3rem;
}

.promo-usage-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 2rem;
}

.usage-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.usage-step {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.usage-step:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.usage-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.usage-step-content {
    flex: 1;
}

.usage-step-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.usage-step-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Promotions Image */
.promotions-image {
    text-align: center;
    margin-top: 3rem;
}

.promotions-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.promotions-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Customer Service Section */
.customer-service {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    position: relative;
}

.customer-service-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.customer-service-header {
    text-align: center;
    margin-bottom: 4rem;
}

.customer-service-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.customer-service-description {
    font-family: 'Sarabun', sans-serif;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #cccccc;
    max-width: 900px;
    margin: 0 auto;
}

/* Service Sections */
.service-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.contact-channels-title,
.service-offered-title {
    font-family: 'Prompt', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    margin-bottom: 2rem;
}

/* Contact Grid */
.contact-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.contact-icon i {
    font-size: 1.25rem;
    color: #0a0a0a;
}

.contact-content {
    flex: 1;
}

.contact-method {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.contact-detail {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    color: #ffd700;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.contact-time {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.9rem;
    color: #cccccc;
    line-height: 1.4;
}

/* Service Grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.service-item:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateY(-5px);
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 15px;
    margin-bottom: 1rem;
}

.service-icon i {
    font-size: 1.5rem;
    color: #0a0a0a;
}

.service-name {
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.service-desc {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.95rem;
    color: #cccccc;
    line-height: 1.6;
}

/* Additional Info */
.additional-info {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.additional-info-text {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #cccccc;
}

.additional-link {
    color: #ffd700;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.additional-link:hover {
    color: #ffed4e;
    text-decoration: underline;
}

/* Final CTA */
.final-cta {
    text-align: center;
    margin-bottom: 3rem;
}

.final-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 1.2rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.3);
    margin-bottom: 1rem;
}

.final-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

.final-cta-button i {
    font-size: 1.3rem;
}

.final-cta-text {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #cccccc;
    max-width: 600px;
    margin: 0 auto;
}

/* Customer Service Image */
.customer-service-image {
    text-align: center;
    margin-top: 3rem;
}

.customer-service-img {
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.customer-service-img:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Promotions & Customer Service Responsive Design */
@media (max-width: 1024px) {
    .promotions-container,
    .customer-service-container {
        padding: 0 1.5rem;
    }

    .promotions-title,
    .customer-service-title {
        font-size: 2.25rem;
    }

    .new-member-title,
    .daily-promotions-title,
    .contact-channels-title,
    .service-offered-title {
        font-size: 1.75rem;
    }

    .promotion-sections,
    .service-sections {
        gap: 2rem;
    }

    .welcome-packages,
    .conditions-grid,
    .usage-steps {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .promotions,
    .customer-service {
        padding: 3rem 0;
    }

    .promotions-container,
    .customer-service-container {
        padding: 0 1rem;
    }

    .promotions-header,
    .customer-service-header {
        margin-bottom: 3rem;
    }

    .promotions-title,
    .customer-service-title {
        font-size: 2rem;
    }

    .promotions-description,
    .customer-service-description {
        font-size: 1rem;
    }

    .new-member-title,
    .daily-promotions-title,
    .contact-channels-title,
    .service-offered-title {
        font-size: 1.5rem;
    }

    .welcome-package-title,
    .promo-section-title {
        font-size: 1.25rem;
    }

    .promotion-sections,
    .service-sections {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .welcome-packages,
    .conditions-grid,
    .usage-steps {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .final-cta-button {
        font-size: 1.1rem;
        padding: 1rem 2rem;
    }
}

@media (max-width: 480px) {
    .promotions,
    .customer-service {
        padding: 2rem 0;
    }

    .promotions-container,
    .customer-service-container {
        padding: 0 0.75rem;
    }

    .promotions-title,
    .customer-service-title {
        font-size: 1.75rem;
        line-height: 1.4;
    }

    .promotions-description,
    .customer-service-description {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .new-member-title,
    .daily-promotions-title,
    .contact-channels-title,
    .service-offered-title {
        font-size: 1.375rem;
    }

    .welcome-item,
    .condition-item,
    .usage-step,
    .contact-item {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
        gap: 1rem;
    }

    .welcome-item:hover,
    .condition-item:hover,
    .usage-step:hover,
    .contact-item:hover {
        transform: translateY(-5px);
    }

    .welcome-icon,
    .condition-icon,
    .usage-step-number,
    .contact-icon {
        align-self: center;
    }

    .daily-promo-item {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
    }

    .daily-promo-item:hover {
        transform: translateY(-5px);
    }

    .daily-promo-day {
        align-self: center;
        min-width: 100px;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .final-cta-button {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }

    .additional-info {
        padding: 1.5rem;
    }
}

/* Footer Styles */
.footer {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem 0;
    margin-bottom: 80px; /* Space for sticky buttons */
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-legal-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer-legal-item {
    position: relative;
}

.footer-legal-item:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: -1rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 300;
}

.footer-legal-link {
    font-family: 'Sarabun', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #cccccc;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
    position: relative;
    white-space: nowrap;
}

.footer-legal-link:hover {
    color: #ffd700;
}

.footer-legal-link::after {
    content: '';
    position: absolute;
    bottom: 0.25rem;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, #ffd700, #ffed4e);
    transition: width 0.3s ease;
}

.footer-legal-link:hover::after {
    width: 100%;
}

/* Login Page Styles */
.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 2rem 120px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
}

.login-container {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.login-title {
    font-family: 'Prompt', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffd700;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 0;
}

.login-form {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.form-label {
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label i {
    color: #ffd700;
    font-size: 1.1rem;
}

.form-input {
    font-family: 'Sarabun', sans-serif;
    font-size: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #ffffff;
    transition: all 0.3s ease;
    outline: none;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-input:focus {
    border-color: #ffd700;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    padding-right: 3.5rem;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    outline: none;
}

.password-toggle:hover {
    color: #ffd700;
}

.form-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.login-button,
.register-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-family: 'Prompt', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1.25rem 2rem;
    border-radius: 12px;
    border: 2px solid transparent;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
}

.login-button.primary {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.login-button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4);
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

.register-button.secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffd700;
}

.register-button.secondary:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
    border-color: #ffed4e;
    color: #ffd700;
}

.login-button i,
.register-button i {
    font-size: 1.2rem;
}

/* Login Page Responsive Design */
@media (max-width: 768px) {
    .login {
        padding: 100px 1.5rem 100px;
    }

    .login-title {
        font-size: 2rem;
    }

    .login-form {
        padding: 2rem;
        gap: 1.5rem;
    }

    .form-input {
        font-size: 0.95rem;
        padding: 0.875rem 1rem;
    }

    .password-input-wrapper .form-input {
        padding-right: 3rem;
    }

    .password-toggle {
        right: 0.75rem;
        font-size: 1rem;
    }

    .login-button,
    .register-button {
        font-size: 1rem;
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .login {
        padding: 90px 1rem 90px;
    }

    .login-title {
        font-size: 1.75rem;
    }

    .login-form {
        padding: 1.5rem;
        gap: 1.25rem;
    }

    .form-label {
        font-size: 0.9rem;
    }

    .form-input {
        font-size: 0.9rem;
        padding: 0.75rem 0.875rem;
    }

    .password-input-wrapper .form-input {
        padding-right: 2.75rem;
    }

    .password-toggle {
        right: 0.625rem;
        font-size: 0.95rem;
    }

    .login-button,
    .register-button {
        font-size: 0.95rem;
        padding: 0.875rem 1.25rem;
    }
}

@media (max-width: 360px) {
    .login {
        padding: 80px 0.75rem 80px;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .login-form {
        padding: 1.25rem;
        gap: 1rem;
    }

    .form-label {
        font-size: 0.85rem;
    }

    .form-input {
        font-size: 0.85rem;
        padding: 0.65rem 0.75rem;
    }

    .password-input-wrapper .form-input {
        padding-right: 2.5rem;
    }

    .password-toggle {
        right: 0.5rem;
        font-size: 0.9rem;
    }

    .login-button,
    .register-button {
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
}

/* Sticky Buttons Styles */
.sticky-buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.75rem 0;
    box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.3);
}

.sticky-buttons-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 1rem;
}

.sticky-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 200px;
    min-height: 50px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: 25px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sticky-button.primary {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #0a0a0a;
    border-color: transparent;
    box-shadow: 0 3px 15px rgba(255, 215, 0, 0.3);
}

.sticky-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 215, 0, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2);
}

.sticky-button.primary:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(255, 215, 0, 0.4);
}

.sticky-button i {
    font-size: 1rem;
    flex-shrink: 0;
}

.sticky-button span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer and Sticky Buttons Responsive Design */
@media (max-width: 1024px) {
    .footer-container {
        padding: 0 1.5rem;
    }

    .footer-legal-list {
        gap: 1.5rem;
    }

    .sticky-buttons-container {
        gap: 0.75rem;
        padding: 0 1.5rem;
    }

    .sticky-button {
        font-size: 0.85rem;
        padding: 0.65rem 0.75rem;
        min-height: 48px;
    }
}

@media (max-width: 768px) {
    .footer {
        padding: 1.5rem 0;
    }

    .footer-container {
        padding: 0 1rem;
    }

    .footer-legal-list {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-legal-item:not(:last-child)::after {
        display: none;
    }

    .footer-legal-link {
        font-size: 0.85rem;
        padding: 0.75rem 0;
    }

    .sticky-buttons {
        padding: 0.5rem 0;
    }

    .sticky-buttons-container {
        gap: 0.5rem;
        padding: 0 1rem;
    }

    .sticky-button {
        font-size: 0.8rem;
        padding: 0.6rem 0.5rem;
        min-height: 46px;
        max-width: none;
    }

    .sticky-button span {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 1rem 0;
        margin-bottom: 70px; /* Adjusted for smaller sticky buttons */
    }

    .footer-container {
        padding: 0 0.75rem;
    }

    .footer-legal-list {
        gap: 0.75rem;
    }

    .footer-legal-link {
        font-size: 0.8rem;
        padding: 0.5rem 0;
    }

    .sticky-buttons {
        padding: 0.375rem 0;
    }

    .sticky-buttons-container {
        gap: 0.375rem;
        padding: 0 0.75rem;
    }

    .sticky-button {
        font-size: 0.75rem;
        padding: 0.5rem 0.375rem;
        min-height: 42px;
        border-radius: 20px;
        gap: 0.375rem;
    }

    .sticky-button i {
        font-size: 0.9rem;
    }

    .sticky-button span {
        font-size: 0.7rem;
    }
}

/* Legal Pages Styles */
.legal-page {
    min-height: 100vh;
    padding: 120px 20px 60px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    position: relative;
}

.legal-container {
    max-width: 1280px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    padding: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.legal-title {
    font-size: 2.5rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    line-height: 1.2;
}

.legal-content {
    color: #ffffff;
    line-height: 1.8;
    font-size: 1rem;
}

.legal-section {
    margin-bottom: 2.5rem;
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-heading {
    font-size: 1.5rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    color: #ffd700;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.legal-subheading {
    font-size: 1.25rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    color: #ffcc00;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.legal-small-heading {
    font-size: 1.1rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 600;
    color: #ffaa00;
    margin-bottom: 0.75rem;
    margin-top: 1rem;
}

.legal-text {
    margin-bottom: 1rem;
    color: #e0e0e0;
    text-align: justify;
}

.legal-text:last-child {
    margin-bottom: 0;
}

.legal-list {
    margin: 1rem 0;
    padding-left: 0;
}

.legal-list li {
    margin-bottom: 0.75rem;
    color: #e0e0e0;
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.7;
}

.legal-list li:before {
    content: "•";
    color: #ffd700;
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

.legal-note {
    background: rgba(255, 215, 0, 0.1);
    border-left: 4px solid #ffd700;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    color: #ffffff;
    font-style: italic;
}

.legal-commitment {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 183, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 15px;
    padding: 2rem;
    margin-top: 3rem;
    text-align: center;
}

.legal-commitment-title {
    font-size: 1.75rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 700;
    color: #ffd700;
    margin-bottom: 1rem;
}

.legal-commitment .legal-text {
    font-size: 1.1rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0;
}

/* Responsive Design for Legal Pages */
@media (max-width: 1024px) {
    .legal-container {
        padding: 2.5rem;
        margin: 0 1rem;
    }

    .legal-title {
        font-size: 2.25rem;
    }

    .legal-heading {
        font-size: 1.4rem;
    }

    .legal-subheading {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .legal-page {
        padding: 100px 15px 60px;
    }

    .legal-container {
        padding: 2rem;
        margin: 0 0.5rem;
        border-radius: 15px;
    }

    .legal-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
    }

    .legal-heading {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }

    .legal-subheading {
        font-size: 1.15rem;
        margin-bottom: 0.875rem;
    }

    .legal-small-heading {
        font-size: 1.05rem;
    }

    .legal-content {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .legal-list li {
        padding-left: 1.25rem;
        margin-bottom: 0.625rem;
    }

    .legal-commitment {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .legal-commitment-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .legal-page {
        padding: 90px 10px 60px;
    }

    .legal-container {
        padding: 1.5rem;
        margin: 0 0.25rem;
        border-radius: 12px;
    }

    .legal-title {
        font-size: 1.75rem;
        margin-bottom: 1.25rem;
    }

    .legal-heading {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .legal-subheading {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .legal-small-heading {
        font-size: 1rem;
    }

    .legal-content {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .legal-text {
        text-align: left;
        margin-bottom: 0.875rem;
    }

    .legal-list li {
        padding-left: 1rem;
        margin-bottom: 0.5rem;
        line-height: 1.6;
    }

    .legal-note {
        padding: 0.75rem;
        margin: 1rem 0;
        border-radius: 6px;
    }

    .legal-commitment {
        padding: 1.25rem;
        margin-top: 1.5rem;
        border-radius: 12px;
    }

    .legal-commitment-title {
        font-size: 1.35rem;
        margin-bottom: 0.75rem;
    }

    .legal-commitment .legal-text {
        font-size: 1rem;
    }
}