/* base.css */
:root {
    --contact-bg: #1f2933;      
    --contact-text: #f5f5f5;    
    --contact-accent: #45d16f;  
    --contact-border: #2f3b4a;  
}


/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a202c; /* Dark gray for track */
}

::-webkit-scrollbar-thumb {
    background: #10b981; /* Green for thumb */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #059669; /* Darker green on hover */
}

/* Card animation for Hero Section */
.card-animation {
    animation: floatAndRotate 15s ease-in-out infinite;
    opacity: 0.2;
    filter: blur(2px);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.card-animation:nth-child(1) { animation-delay: 0s; left: 10%; top: 15%; transform: rotate(15deg); }
.card-animation:nth-child(2) { animation-delay: 3s; right: 15%; top: 20%; transform: rotate(-10deg); }
.card-animation:nth-child(3) { animation-delay: 6s; left: 20%; bottom: 10%; transform: rotate(5deg); }
.card-animation:nth-child(4) { animation-delay: 9s; right: 10%; bottom: 20%; transform: rotate(-18deg); }
.card-animation:nth-child(5) { animation-delay: 12s; left: 5%; top: 40%; transform: rotate(8deg); }

@keyframes floatAndRotate {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
    25% { transform: translateY(-10px) rotate(5deg); opacity: 0.3; }
    50% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
    75% { transform: translateY(10px) rotate(-5deg); opacity: 0.3; }
    100% { transform: translateY(0) rotate(0deg); opacity: 0.2; }
}

/* Responsive Typography for Headings */
@media (min-width: 1024px) {
    h1 { font-size: 4.5rem; /* ~72px */ }
    h2 { font-size: 2.8rem; /* ~45px */ }
    h3 { font-size: 2.2rem; /* ~35px */ }
}

@media (min-width: 768px) and (max-width: 1023px) {
    h1 { font-size: 3.8rem; /* ~60px */ }
    h2 { font-size: 2.2rem; /* ~35px */ }
    h3 { font-size: 1.8rem; /* ~29px */ }
}

@media (max-width: 767px) {
    h1 { font-size: 2.2rem; /* ~35px */ }
    h2 { font-size: 1.8rem; /* ~29px */ }
    h3 { font-size: 1.5rem; /* ~24px */ }
    .text-xl { font-size: 1.125rem; /* ~18px */ }
    .text-lg { font-size: 1rem; /* ~16px */ }
    .text-sm { font-size: 0.875rem; /* ~14px */ }
    .text-xs { font-size: 0.75rem; /* ~12px */ }
    .header .text-3xl { font-size: 1.5rem; /* ~24px */ }
}

/* Testimonial Carousel styles */
.testimonial-wrapper {
    display: flex;
}

.testimonial-item {
    min-width: 100%;
}

.testimonial-dots .dot {
    transition: background-color 0.3s ease;
}

.testimonial-dots .dot.active {
    background-color: #10b981; /* Green */
}

/* Community messages animation */
.message-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Ensure no underline on buttons */
button {
    text-decoration: none !important;
}

/* Ensure images in game cards have consistent height */
.game-card a.block {
    height: 240px; /* Example fixed height */
}

.game-card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* Parent container for the policy content */
.securePolicyGrid {
    margin-top: 40px; /* Top margin for spacing from elements above */
    margin-left: auto; /* Center the grid horizontally */
    margin-right: auto; /* Center the grid horizontally */
    max-width: 960px; /* Max width for readability on large screens */
    padding-left: 20px; /* Left padding for content inside */
    padding-right: 20px; /* Right padding for content inside */
    box-sizing: border-box; /* Include padding in the element's total width and height */
}

/* Heading styles */
.securePolicyGrid h1 {
    font-size: 2rem; /* Moderate size for main section titles */
    margin-top: 2.5rem; /* Space above the heading */
    margin-bottom: 1.2rem; /* Space below the heading */
    line-height: 1.2; /* Tighter line height for headings */
    color: #fff; /* Darker color for prominence */
}

.securePolicyGrid h2 {
    font-size: 1.75rem; /* Slightly smaller than h1 */
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    color: #fff;
}

.securePolicyGrid h3 {
    font-size: 1.5rem;
    margin-top: 1.8rem;
    margin-bottom: 0.9rem;
    line-height: 1.4;
    color: #fff;
}

.securePolicyGrid h4 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    line-height: 1.5;
    color: #fff;
}

.securePolicyGrid h5 {
    font-size: 1.1rem; /* Just a bit larger than body text */
    margin-top: 1.2rem;
    margin-bottom: 0.7rem;
    line-height: 1.6;
    color: #fff;
}

/* Paragraph style */
.securePolicyGrid p {
    font-size: 1rem; /* Standard body text size */
    margin-bottom: 1em; /* Space between paragraphs */
    line-height: 1.6; /* Good line height for readability */
    color: #fff; /* Slightly softer text color */
}

/* Unordered list styles */
.securePolicyGrid ul {
    list-style-type: disc; /* Standard disc bullets */
    margin-top: 1.5em; /* Space above the list */
    margin-bottom: 1.5em; /* Space below the list */
    padding-left: 25px; /* Indentation for bullet points */
    color: #fff;
}

/* List item styles */
.securePolicyGrid li {
    font-size: 1rem; /* Inherit or set explicitly */
    margin-bottom: 0.7em; /* Space between list items */
    line-height: 1.6; /* Good line height for readability */
}

#prev-testimonial, #next-testimonial{
    top: 100%;
}

.testimonial-dots{
    display: none !important;
}

.imagesBl img{
    width: 100%;
    height: auto;
    object-fit: contain;
}

#contact-section,
.contact-section {
    background-color: var(--contact-bg);
    color: var(--contact-text);
    padding: 60px 0;
    text-align: center;
}

.contact-section h2,
.contact-title {
    font-size: 32px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--contact-accent);
    margin-bottom: 30px;
}

.contact-form {
    max-width: 420px;
    margin: 0 auto;
    text-align: left;
}

.contact-form .form-group {
    margin-bottom: 18px;
}

.contact-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--contact-text);
}

.contact-form .form-control,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid var(--contact-border);
    background-color: #111827;      
    color: var(--contact-text);
    font-size: 14px;
    outline: none;
}

.contact-form .form-control::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #9ca3af;
}

.contact-form .form-control:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--contact-accent);
    box-shadow: 0 0 0 1px var(--contact-accent);
}

.contact-form button[type="submit"],
.contact-form .btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    border: none;
    border-radius: 999px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.08em;
    background: var(--contact-accent);
    color: #0b1220;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.contact-form button[type="submit"]:hover,
.contact-form .btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

header span{
    font-size: 1.1rem !important;
}

#games-showcase, #how-to-play, #leaderboards, #faq, #testimonials, #contact{
    overflow: hidden !important;
}