/* 1. LOGO REPLACEMENT */
.brand img {
    display: none !important;
}

.brand::before {
    content: "";
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 10px auto;
    background-image: url("logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 2. BACKGROUND COLORS */
body, header {
    background-color: #C6DEF1 !important; /* Light Blue */
}

#main {
    background-color: #2478FF !important; /* Vibrant Blue */
}

/* 3. TEXT READABILITY & DEPTH (Updated to Black with White Shadow) */
#main, .item, .item-name, .item-info, #main i, #main .material-icons {
    color: #000000 !important; /* Changed to Black */
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8) !important; /* Changed to White Shadow */
    transition: all 0.3s ease !important; /* Added for smooth hover */
}

/* 4. HOVER EFFECTS (New Section) */
#main .item:hover, .item-name:hover {
    text-shadow: 0px 0px 15px white, 0px 0px 5px white !important; /* Glow effect */
    transform: translateY(-2px); /* Subtle lift */
    cursor: pointer;
}