/* VIP Logo */
.vip-logo {
    will-change: transform, filter; /* Improve rendering */
    width: 120px;            /* Adjust size */
    height: auto;            /* Maintain aspect ratio */
    cursor: pointer;         /* Pointer cursor on hover */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); /* Glow effect */
    -webkit-filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); 
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth hover effect */
}

.vip-logo:hover {
    transform: scale(1.1); /* Slight zoom effect on hover */
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)); /* Brighter glow */
}


/* Logo Container */
.logo-container {
    display: flex;
    justify-content: center; /* Center the logo horizontally */
    padding: 20px 0;         /* Add spacing above and below */
    overflow: visible;
}

/* General Styles */
body {
    font-family: 'Orbitron', Arial, sans-serif; /* Futuristic font */
    background-color: black; /* Match website background */
    color: white; /* Text color for readability */
    overflow: auto;
    margin: 0px;
}

main {
    display: flex;
    flex-direction: column;       /* Stacks items vertically */
    justify-content: flex-start;  /* Aligns content to the top */
    align-items: center;          /* Centers horizontally */
    min-height: calc(100vh - 60px); /* Adjust for header height */
    padding: 10px;                /* Small padding */
    box-sizing: border-box;       /* Include padding in size */
}


.double-slider-container {
    margin-bottom: 15px; /* spacing around this slider */
    text-align: center;  /* center everything */
}

.double-slider {
    position: relative;
    width: 300px; /* or whatever width you need */
    height: 6px;
    margin: 10px auto;
    background: transparent;
    cursor: pointer;
}

.double-slider .track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    background: #444;      /* track color */
    border-radius: 3px;
    transform: translateY(-50%);
}

.double-slider .range {
    position: absolute;
    top: 50%;
    height: 6px;
    background: #f80;      /* selected range color */
    border-radius: 3px;
    transform: translateY(-50%);
}

.thumb {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #fff;       /* thumb color */
    border: 2px solid #f80; /* border color matching range color */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;           /* indicates draggable */
}

/* Left/Right thumbs */
.thumb-left { left: 0; }
.thumb-right { right: 0; }