/*
Theme Name: BelPortal Casino
Description: A modern casino landing page theme inspired by BelPortal Casino
Version: 1.0
Author: Your Name
*/

/* ========================================
   RESET AND BASE STYLES
   ======================================== */

/* CSS Reset - removes default browser styling */
* {
    margin: 0;           /* Remove all margins */
    padding: 0;          /* Remove all padding */
    box-sizing: border-box; /* Include padding and border in element's total width/height */
}

/* Base body styling */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Modern font stack */
    line-height: 1.6;    /* Improve readability with comfortable line spacing */
    color: #333;         /* Dark gray text color for good contrast */
    background: linear-gradient(135deg, #093028 0%, #237A57 100%) !important;/* Dark gradient background */
}

/* ========================================
   HEADER STYLES - MATCHING THE IMAGE DESIGN
   ======================================== */

/* Fixed header that stays at top of page */
.site-header {
    background: #0f4d3f !important;     /* Dark grey/black background matching image - force consistency */
    position: fixed;                     /* Keep header fixed at top */
    top: 0;                             /* Position at top of viewport */
    left: 0;                            /* Extend full width */
    right: 0;                           /* Extend full width */
    z-index: 1000;                      /* Ensure header appears above other content */
    padding: 0.75rem 0;                 /* Vertical padding */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle bottom border */
    transition: none;                   /* Disable any transitions that might cause color changes */
}

/* Container for header content */
.header-container {
    max-width: 1400px;                  /* Maximum width for large screens */
    margin: 0 auto;                     /* Center the container */
    padding: 0 2rem;                    /* Horizontal padding */
    display: flex;                      /* Use flexbox for layout */
    justify-content: space-between;     /* Space items apart - logo left, buttons right */
    align-items: center;                /* Vertically center items */
    width: 100%;                        /* Ensure full width */
}

/* Logo container for better size management */
.logo-container {
    display: flex;                      /* Use flexbox for layout */
    align-items: center;                /* Vertically center content */
    justify-content: flex-start;        /* Align to the left */
    width: 200px;                       /* Fixed width for logo container */
    height: 60px;                       /* Fixed height for logo container */
    overflow: hidden;                   /* Hide overflow if logo is too large */
}

/* Logo styling - matching the image design */
.logo {
    font-size: 2.4rem;                  /* Larger font size for logo */
    text-decoration: none;              /* Remove underline from link */
    display: flex;                      /* Use flexbox for logo parts */
    align-items: center;                /* Vertically center logo parts */
    margin-right: auto;                 /* Push logo to the left */
}

/* Custom logo image styling */
.custom-logo-link {
    display: flex;                      /* Use flexbox for logo */
    align-items: center;                /* Vertically center logo */
    justify-content: center;            /* Center the logo in container */
    text-decoration: none;              /* Remove underline */
    width: 100%;                        /* Take full width of container */
    height: 100%;                       /* Take full height of container */
}

.custom-logo {
    max-width: 100%;                    /* Maximum width to fit container */
    max-height: 100%;                   /* Maximum height to fit container */
    width: auto;                        /* Maintain aspect ratio */
    height: auto;                       /* Maintain aspect ratio */
    display: block;                     /* Block display */
    object-fit: contain;                /* Maintain aspect ratio */
}

/* "Bel" part of the logo - cursive style */
.logo-bel {
    font-family: 'Dancing Script', cursive; /* Cursive font for "Bel" */
    font-weight: 600;                   /* Semi-bold weight */
    color: #87CEEB;                     /* Light blue color matching image */
    font-size: 2.5rem;                  /* Much larger for better visibility */
}

/* "Portal" part of the logo - standard font */
.logo-portal {
    font-family: 'Inter', sans-serif;   /* Standard sans-serif font */
    font-weight: 500;                   /* Medium weight */
    color: #87CEEB;                     /* Light blue color matching image */
    font-size: 2.4rem;                  /* Much larger for better visibility */
    margin-left: 2px;                   /* Small gap between "Bet" and "Portal" */
}

/* Right side of header containing buttons and links */
.header-right {
    display: flex;                      /* Horizontal layout */
    align-items: center;                /* Vertically center items */
    gap: 1.5rem;                        /* Space between elements */
    margin-left: auto;                  /* Push to the right side */
    flex-shrink: 0;                     /* Prevent shrinking */
}

/* Play button styling - matching the blue rectangular button */
.play-button {
    background: #FF006E !important;     /* Blue background matching image - force override */
    color: #F5F5F5;                     /* White text */
    text-decoration: none;              /* Remove underline */
    padding: 0.6rem 1.5rem;             /* Comfortable padding */
    border-radius: 6px;                 /* Slightly rounded corners */
    font-weight: 500;                   /* Medium font weight */
    font-size: 0.9rem;                  /* Appropriate font size */
    transition: background-color 0.3s ease; /* Smooth transition */
    display: inline-block;              /* Allow padding and margins */
}

/* Play button hover effect */
.play-button:hover {
    background: #0056b3;                /* Darker blue on hover */
    color: #F5F5F5;                     /* Maintain white text */
}

/* Blog link styling */
.blog-link {
    color: #ffffff;                     /* White text color */
    text-decoration: none;              /* Remove underline */
    font-weight: 400;                   /* Regular font weight */
    font-size: 0.9rem;                  /* Appropriate font size */
    transition: color 0.3s ease;        /* Smooth color transition */
}

/* Blog link hover effect */
.blog-link:hover {
    color: #00FFAA;                     /* Light blue color on hover */
}

/* ========================================
   HERO SECTION
   ======================================== */

/* Main hero section - full viewport height */
.hero-section {
    min-height: 100vh;                  /* Full viewport height */
    display: flex;                      /* Use flexbox for centering */
    align-items: center;                /* Vertically center content */
    justify-content: center;            /* Horizontally center content */
    text-align: center;                 /* Center text alignment */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); /* Multi-stop gradient */
    position: relative;                 /* For positioning pseudo-elements */
    overflow: hidden;                   /* Hide overflow from background effects */
}

/* Background texture overlay */
.hero-section::before {
    content: '';                        /* Required for pseudo-element */
    position: absolute;                 /* Position over the background */
    top: 0;                            /* Cover full area */
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); /* SVG texture pattern */
    opacity: 0.3;                       /* Make texture subtle */
}

/* Hero content container */
.hero-content {
    max-width: 800px;                   /* Limit content width */
    padding: 0 2rem;                    /* Horizontal padding */
    position: relative;                 /* Position above background */
    z-index: 2;                         /* Ensure content appears above background */
}

/* Main hero title */
.hero-title {
    font-size: 4rem;                    /* Large, impactful font size */
    font-weight: 900;                   /* Extra bold weight */
    color: #fff;                        /* White text */
    margin-bottom: 1rem;                /* Space below title */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Hero subtitle */
.hero-subtitle {
    font-size: 1.5rem;                  /* Medium-large font size */
    color: #ffd700;                     /* Gold color for emphasis */
    margin-bottom: 1.5rem;              /* Space below subtitle */
    font-weight: 600;                   /* Semi-bold weight */
}

/* Hero description text */
.hero-description {
    font-size: 1.1rem;                  /* Readable font size */
    color: #ccc;                        /* Light gray for secondary text */
    margin-bottom: 2rem;                /* Space before CTA button */
    line-height: 1.7;                   /* Comfortable line spacing */
}

/* ========================================
   CALL-TO-ACTION BUTTONS
   ======================================== */

/* Primary CTA button styling */
.cta-button {
    display: inline-block;              /* Allow padding and margins */
    padding: 1rem 2rem;                 /* Comfortable button padding */
    background: linear-gradient(45deg, #ffd700, #ffed4e); /* Gold gradient */
    color: #000;                        /* Dark text for contrast */
    text-decoration: none;              /* Remove underline */
    border-radius: 50px;                /* Rounded button shape */
    font-weight: 700;                   /* Bold text */
    font-size: 1.1rem;                  /* Readable font size */
    transition: all 0.3s ease;          /* Smooth transitions */
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); /* Golden glow effect */
    border: none;                       /* Remove default border */
    cursor: pointer;                    /* Hand cursor on hover */
}

/* CTA button hover effects */
.cta-button:hover {
    transform: translateY(-2px);        /* Slight lift effect */
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4); /* Enhanced glow */
    color: #000;                        /* Maintain text color */
}

/* CTA button active state */
.cta-button:active {
    transform: translateY(0);           /* Return to normal position */
}

/* ========================================
   FEATURES SECTION
   ======================================== */

/* Features section container */
.features-section {
    padding: 5rem 0;                    /* Vertical padding */
    background: #1a1a2e;                /* Dark background */
}

/* Features grid container */
.features-grid {
    max-width: 1200px;                  /* Maximum width */
    margin: 0 auto;                     /* Center the grid */
    padding: 0 2rem;                    /* Horizontal padding */
    display: grid;                      /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 3rem;                          /* Space between feature cards */
}

/* Individual feature card */
.feature-card {
    text-align: center;                 /* Center content */
    padding: 2rem;                      /* Internal padding */
    background: rgba(255, 255, 255, 0.05); /* Semi-transparent background */
    border-radius: 15px;                /* Rounded corners */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    transition: transform 0.3s ease;    /* Smooth transform transition */
}

/* Feature card hover effect */
.feature-card:hover {
    transform: translateY(-5px);        /* Lift effect on hover */
}

/* Feature icon styling */
.feature-icon {
    font-size: 3rem;                    /* Large icon size */
    color: #ffd700;                     /* Gold color */
    margin-bottom: 1rem;                /* Space below icon */
}

/* Feature title */
.feature-title {
    font-size: 1.5rem;                  /* Medium-large font size */
    color: #fff;                        /* White text */
    margin-bottom: 1rem;                /* Space below title */
    font-weight: 600;                   /* Semi-bold weight */
}

/* Feature description */
.feature-description {
    color: #ccc;                        /* Light gray text */
    line-height: 1.6;                   /* Comfortable line spacing */
}

/* ========================================
   GAMES SECTION
   ======================================== */

/* Games section container */
.games-section {
    padding: 5rem 0;                    /* Vertical padding */
    background: #16213e;                /* Slightly lighter background */
}

/* Section title styling */
.section-title {
    text-align: center;                 /* Center the title */
    font-size: 3rem;                    /* Large font size */
    color: #fff;                        /* White text */
    margin-bottom: 3rem;                /* Space below title */
    font-weight: 700;                   /* Bold weight */
}

/* Games grid container */
.games-grid {
    max-width: 1200px;                  /* Maximum width */
    margin: 0 auto;                     /* Center the grid */
    padding: 0 2rem;                    /* Horizontal padding */
    display: grid;                      /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 2rem;                          /* Space between game cards */
}

/* Individual game card */
.game-card {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    border-radius: 15px;                /* Rounded corners */
    overflow: hidden;                   /* Hide overflow from rounded corners */
    transition: transform 0.3s ease;    /* Smooth transform transition */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

/* Game card hover effect */
.game-card:hover {
    transform: translateY(-5px);        /* Lift effect on hover */
}

/* Game image container */
.game-image {
    height: 200px;                      /* Fixed height for consistency */
    background: linear-gradient(45deg, #ffd700, #ffed4e); /* Gold gradient background */
    display: flex;                      /* Center the emoji */
    align-items: center;                /* Vertical centering */
    justify-content: center;            /* Horizontal centering */
    font-size: 4rem;                    /* Large emoji size */
}

/* Game content container */
.game-content {
    padding: 1.5rem;                    /* Internal padding */
}

/* Game title */
.game-title {
    font-size: 1.2rem;                  /* Medium font size */
    color: #fff;                        /* White text */
    margin-bottom: 0.5rem;              /* Space below title */
    font-weight: 600;                   /* Semi-bold weight */
}

/* Game description */
.game-description {
    color: #ccc;                        /* Light gray text */
    font-size: 0.9rem;                  /* Smaller font size */
    line-height: 1.5;                   /* Comfortable line spacing */
}

/* ========================================
   BONUS SECTION
   ======================================== */

/* Bonus section container */
.bonus-section {
    padding: 5rem 0;                    /* Vertical padding */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); /* Gradient background */
    text-align: center;                 /* Center all content */
}

/* Bonus content container */
.bonus-content {
    max-width: 800px;                   /* Maximum width */
    margin: 0 auto;                     /* Center the content */
    padding: 0 2rem;                    /* Horizontal padding */
}

/* Bonus amount display */
.bonus-amount {
    font-size: 4rem;                    /* Very large font size */
    font-weight: 900;                   /* Extra bold weight */
    color: #ffd700;                     /* Gold color */
    margin-bottom: 1rem;                /* Space below amount */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Subtle text shadow */
}

/* Bonus description */
.bonus-description {
    font-size: 1.3rem;                  /* Large font size */
    color: #fff;                        /* White text */
    margin-bottom: 2rem;                /* Space before button */
    line-height: 1.6;                   /* Comfortable line spacing */
}

/* ========================================
   FOOTER STYLES
   ======================================== */

/* Footer container */
.site-footer {
    background: #065a46;                /* Dark background */
    padding: 3rem 0;                    /* Vertical padding */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle top border */
}

/* Footer content container */
.footer-content {
    max-width: 1200px;                  /* Maximum width */
    margin: 0 auto;                     /* Center the content */
    padding: 0 2rem;                    /* Horizontal padding */
    text-align: center;                 /* Center all text */
}

/* Footer links */
.footer-links {
    margin-bottom: 2rem;                /* Space below links */
}

.footer-links a {
    color: #ccc;                        /* Light gray text */
    text-decoration: none;              /* Remove underline */
    margin: 0 1rem;                     /* Horizontal spacing */
    transition: color 0.3s ease;        /* Smooth color transition */
}

.footer-links a:hover {
    color: #ffd700;                     /* Gold color on hover */
}

/* Footer information */
.footer-info {
    margin-bottom: 1rem;                /* Space below info */
}

.footer-info p {
    color: #999;                        /* Muted text color */
    margin-bottom: 0.5rem;              /* Space between paragraphs */
}

.footer-info a {
    color: #ffd700;                     /* Gold color for links */
    text-decoration: none;              /* Remove underline */
}

/* Footer languages */
.footer-languages {
    color: #999;                        /* Muted text color */
}

.footer-languages a {
    color: #ccc;                        /* Light gray for language links */
    text-decoration: none;              /* Remove underline */
    margin: 0 0.5rem;                   /* Horizontal spacing */
    transition: color 0.3s ease;        /* Smooth color transition */
}

.footer-languages a:hover {
    color: #ffd700;                     /* Gold color on hover */
}

/* ========================================
   HEADER CONSISTENCY
   ======================================== */

/* Ensure header background stays consistent during scroll */
.site-header {
    background-color: #0f4d3f !important;
}

/* But exclude interactive elements from the header background override */
.site-header .blog-link,
.site-header .custom-logo-link,
.site-header .logo {
    background-color: transparent !important;
}

/* ========================================
   ANIMATIONS AND EFFECTS
   ======================================== */

/* Fade-in-up animation class */
.fade-in-up {
    opacity: 0;                         /* Start invisible */
    transform: translateY(30px);        /* Start below final position */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transitions */
}

/* Fade-in-up animation when visible */
.fade-in-up.visible {
    opacity: 1;                         /* Fully visible */
    transform: translateY(0);           /* Final position */
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Mobile devices (up to 768px) */
@media (max-width: 768px) {
    /* Adjust header for mobile */
    .header-container {
        padding: 0 1rem;                /* Reduce horizontal padding */
    }
    
    /* Adjust logo container for mobile */
    .logo-container {
        width: 150px;                   /* Smaller width on mobile */
        height: 50px;                   /* Smaller height on mobile */
    }
    
    /* Adjust logo size for mobile */
    .logo {
        font-size: 1.8rem;              /* Smaller logo on mobile */
    }
    
    .logo-bel {
        font-size: 1.9rem;              /* Smaller "Bet" text on mobile */
    }
    
    .logo-portal {
        font-size: 1.8rem;              /* Smaller "Portal" text on mobile */
    }
    
    .nav-menu {
        display: none;                  /* Hide navigation on mobile (add mobile menu later) */
    }
    
    /* Adjust hero section for mobile */
    .hero-title {
        font-size: 2.5rem;              /* Smaller title on mobile */
    }
    
    .hero-subtitle {
        font-size: 1.2rem;              /* Smaller subtitle on mobile */
    }
    
    .hero-description {
        font-size: 1rem;                /* Smaller description on mobile */
    }
    
    /* Adjust features grid for mobile */
    .features-grid {
        grid-template-columns: 1fr;     /* Single column on mobile */
        gap: 2rem;                      /* Reduce gap */
        padding: 0 1rem;                /* Reduce padding */
    }
    
    /* Adjust games grid for mobile */
    .games-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Smaller minimum width */
        gap: 1.5rem;                    /* Reduce gap */
        padding: 0 1rem;                /* Reduce padding */
    }
    
    /* Adjust section titles for mobile */
    .section-title {
        font-size: 2rem;                /* Smaller titles on mobile */
    }
    
    /* Adjust bonus amount for mobile */
    .bonus-amount {
        font-size: 3rem;                /* Smaller bonus amount on mobile */
    }
}

/* Tablet devices (768px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Adjust hero title for tablet */
    .hero-title {
        font-size: 3rem;                /* Medium title size for tablet */
    }
    
    /* Adjust features grid for tablet */
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on tablet */
    }
    
    /* Adjust games grid for tablet */
    .games-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Medium minimum width */
    }
}

/* ========================================
   LOGO SIZE UTILITY CLASSES
   ======================================== */

/* Logo size variations - you can add these classes to .logo-container */
.logo-container.small {
    width: 150px;
    height: 45px;
}

.logo-container.medium {
    width: 200px;
    height: 60px;
}

.logo-container.large {
    width: 250px;
    height: 75px;
}

.logo-container.xlarge {
    width: 300px;
    height: 90px;
}

/* ========================================
   DEVELOPMENT SECTION
   ======================================== */

.development-section {
    min-height: 80vh;                    /* Full viewport height minus header */
    display: flex;                       /* Flexbox for centering */
    align-items: center;                 /* Vertical centering */
    justify-content: center;             /* Horizontal centering */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    padding: 2rem 0;                     /* Vertical padding */
}

.development-content {
    text-align: center;                  /* Center all text */
    max-width: 600px;                    /* Maximum width for readability */
    margin: 0 auto;                      /* Center the content */
    padding: 3rem 2rem;                  /* Padding around content */
    background: rgba(255, 255, 255, 0.05); /* Subtle background */
    border-radius: 20px;                 /* Rounded corners */
    backdrop-filter: blur(10px);         /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

.development-title {
    font-size: 3rem;                     /* Large title */
    font-weight: 700;                    /* Bold weight */
    color: #ffd700;                      /* Gold color */
    margin-bottom: 1rem;                 /* Space below title */
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5); /* Glow effect */
}

.development-subtitle {
    font-size: 1.5rem;                   /* Medium subtitle */
    font-weight: 500;                    /* Medium weight */
    color: #87CEEB;                      /* Light blue color */
    margin-bottom: 1.5rem;               /* Space below subtitle */
}

.development-description {
    font-size: 1.1rem;                   /* Readable description */
    color: #ffffff;                      /* White text */
    line-height: 1.6;                    /* Good line spacing */
    margin-bottom: 2rem;                 /* Space below description */
    opacity: 0.9;                        /* Slightly transparent */
}

.development-status {
    display: flex;                       /* Flexbox for status */
    align-items: center;                 /* Vertical alignment */
    justify-content: center;             /* Center the status */
    gap: 0.5rem;                         /* Space between elements */
    padding: 1rem 2rem;                  /* Padding around status */
    background: rgba(255, 215, 0, 0.1);  /* Subtle gold background */
    border-radius: 50px;                 /* Rounded status bar */
    border: 1px solid rgba(255, 215, 0, 0.3); /* Gold border */
}

.status-indicator {
    color: #ffd700;                      /* Gold indicator */
    font-size: 1.2rem;                   /* Large indicator */
    animation: pulse 2s infinite;        /* Pulsing animation */
}

.status-text {
    color: #ffffff;                      /* White text */
    font-weight: 500;                    /* Medium weight */
    font-size: 1rem;                     /* Appropriate size */
}

/* Pulsing animation for status indicator */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Mobile responsive for development section */
@media (max-width: 768px) {
    .development-content {
        padding: 2rem 1rem;              /* Less padding on mobile */
        margin: 0 1rem;                  /* Side margins on mobile */
    }
    
    .development-title {
        font-size: 2rem;                 /* Smaller title on mobile */
    }
    
    .development-subtitle {
        font-size: 1.2rem;               /* Smaller subtitle on mobile */
    }
    
    .development-description {
        font-size: 1rem;                 /* Smaller description on mobile */
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Container class for consistent spacing */
.container {
    max-width: 1200px;                  /* Maximum width */
    margin: 0 auto;                     /* Center the container */
    padding: 0 2rem;                    /* Horizontal padding */
}

/* Text alignment utilities */
.text-center {
    text-align: center;                 /* Center text alignment */
}

.text-left {
    text-align: left;                   /* Left text alignment */
}

.text-right {
    text-align: right;                  /* Right text alignment */
}

/* Margin utilities */
.mb-1 { margin-bottom: 0.5rem; }       /* Small bottom margin */
.mb-2 { margin-bottom: 1rem; }         /* Medium bottom margin */
.mb-3 { margin-bottom: 1.5rem; }       /* Large bottom margin */
.mb-4 { margin-bottom: 2rem; }         /* Extra large bottom margin */

/* Padding utilities */
.p-1 { padding: 0.5rem; }              /* Small padding */
.p-2 { padding: 1rem; }                /* Medium padding */
.p-3 { padding: 1.5rem; }              /* Large padding */
.p-4 { padding: 2rem; }                /* Extra large padding */

/* ========================================
   CUSTOM SCROLLBAR
   ======================================== */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;                         /* Scrollbar width */
}

::-webkit-scrollbar-track {
    background: #1a1a2e;                /* Track background */
}

::-webkit-scrollbar-thumb {
    background: #ffd700;                /* Thumb color */
    border-radius: 4px;                 /* Rounded corners */
}

::-webkit-scrollbar-thumb:hover {
    background: #ffed4e;                /* Lighter color on hover */
}