body {
    margin:0;
    font-family:Poppins,sans-serif;
    background:#0a0a10;
    color:#fff;
}

    #logo {
      display: block;
      margin: 0 auto 0px;
      width: 150px;
      opacity: 0.9;
      transition: transform 0.3s ease;
    }
    
    #logo:hover {
      transform: scale(1.05);
    }

/* ======================================================
   NAVBAR
====================================================== */
.navbar {
    width: 98%;
    padding: 12px 20px;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    flex-wrap: wrap;
}
.nav-title { font-size: 1.5rem; font-weight: 800; }
.nav-links { display: flex; gap: 12px; }
.nav-item {
    padding: 10px 16px;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}
.nav-item:hover { background: rgba(255,255,255,0.25); }

/* Hamburger Menu for Mobile */
.navbar .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.navbar .hamburger div {
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 2px;
}
@media(max-width:768px){
    .nav-links{
        display:none;
        width:93%;
        flex-direction: column;
        margin-top:10px;
        gap:5px;
    }
    .nav-links.show{ display:flex; }
    .navbar .hamburger{ display:flex; width: 49px; }
}

.main-container{ 
    display:flex; 
    margin-top:70px; 
    min-height:calc(100vh - 70px - 50px); 
    flex-direction:column; 
    gap:10px; 
    padding:10px; 
}

.provider-select{
    width:90%;
    padding:10px;
    border-radius:10px;
    background:#0a0a10;
    color:#fff;
    font-weight:600;
    border:1px solid rgba(255,255,255,0.2);
    backdrop-filter:blur(12px);
    cursor:pointer;
    margin-bottom:10px;
    transition:0.3s;
}
.provider-select:hover{ border-color:#ffcc00; }
.provider-select option{ background:#0a0a10; color:#fff; }

.content{ display:flex; flex-direction:column; gap:15px; }

.slot-card{
    display:flex;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(12px);
    border-radius:15px;
    padding:10px;
    border:1px solid rgba(255,255,255,0.2);
    align-items:center;
    gap:10px;
    transition:0.3s;
    box-shadow:0 0 10px rgba(255,204,0,0.1);
}
.slot-card:hover{ 
    transform:scale(1.03); 
    border-color:#ffcc00; 
    box-shadow:0 0 25px #ffcc00,0 0 40px rgba(255,204,0,0.5);
}
.slot-card img{
    width:80px; height:80px; object-fit:cover; border-radius:12px; border:2px solid rgba(255,255,255,0.2);
    transition:0.3s;
}
.slot-card img:hover{ transform:scale(1.1); box-shadow:0 0 15px #ffcc00; }
.slot-card-details{ display:flex; flex-direction:column; gap:3px; flex:1; }
.slot-card h3{ margin:0; color:#ffcc00; font-size:1rem; font-weight:700; text-shadow:0 0 5px #ffcc00; }
.slot-card p{ margin:0; font-size:0.85rem; }

a {
    text-decoration: none;
    color: #ffffff;
}

footer{ text-align:center; padding:20px; opacity:0.7; }