/* Advanced Blue Theme - Student Art Hub */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blue1: #4b6cb7;
  --blue2: #182848;
  --light-bg: #f5f7ff;
  --card: #ffffff;
  --text-dark: #1a1c2b;
  --muted: #6b7280;
  --radius: 14px;
  --shadow: 0 10px 25px rgba(0,0,0,0.08);
}
body { font-family: Inter, 'Segoe UI', Arial; background: var(--light-bg); color: var(--text-dark); }
/* HEADER */
header { background: linear-gradient(90deg,var(--blue1),var(--blue2)); padding:22px 0; color:white;
border-bottom-left-radius:20px; border-bottom-right-radius:20px; box-shadow:0 4px 25px rgba(0,0,0,0.2); }
header h1 { text-align:center; font-size:1.9rem; font-weight:800; letter-spacing:1px; }
nav { margin-top:10px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
nav a { color:white; font-weight:600; padding:8px 14px; border-radius:10px; transition:.25s; }
nav a:hover { background:rgba(255,255,255,0.15); transform:translateY(-2px); }
/* CONTAINER */
.container { max-width:1150px; margin:auto; padding:20px; }
/* HERO */
.hero { background:var(--card); padding:40px 30px; border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; margin:25px 0;}
.hero input[type='text']{width:65%;max-width:420px;padding:12px;border-radius:10px;border:2px solid #d8dfee;background:#f9fbff;}
.hero h2{font-size:1.7rem;margin-bottom:10px;color:var(--blue2);}
.hero button{padding:12px 18px;background:linear-gradient(90deg,var(--blue1),var(--blue2));color:white;border-radius:10px;border:none;
font-weight:700;transition:.2s;}
.hero button:hover{opacity:.95;transform:translateY(-2px);}
/* GRID */
.gallery{margin-top:25px;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.item{background:var(--card);padding:15px;border-radius:var(--radius);box-shadow:var(--shadow);transition:.3s;}
.item:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,0.12);}
.item img{width:100%;height:180px;object-fit:cover;border-radius:12px;}
.price{margin:10px 0;font-weight:800;font-size:1.1rem;color:var(--blue2);}
/* FORMS */
form input,form select,form textarea{padding:12px;border-radius:10px;border:2px solid #e0e4f3;background:#f9fbff;}
/* BUTTONS */
button{background:linear-gradient(90deg,var(--blue1),var(--blue2));color:white;border:none;padding:10px 18px;border-radius:10px;
cursor:pointer;font-weight:700;transition:.25s;}
button:hover{opacity:.95;transform:translateY(-2px);}
/* SELLERS */
.seller-card{background:var(--card);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px;}
.seller-listing{background:#f3f6ff;padding:10px;border-radius:8px;margin-top:10px;}
/* FOOTER */
footer{text-align:center;padding:15px;background:var(--card);margin-top:30px;border-radius:18px 18px 0 0;box-shadow:var(--shadow);}
footer a{color:var(--blue1);font-weight:600;}
/* RESPONSIVE */
@media(max-width:650px){.hero input[type='text']{width:90%;}.gallery{grid-template-columns:1fr;} }
.card, .item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover, .item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}/* --- ZONAL LEVEL ENHANCEMENTS --- */

/* Hover effects for every card */
.card, .item {
    border: none !important;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

.card:hover, .item:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(30, 58, 138, 0.2) !important;
}

/* Modern Gradient Buttons */
button {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: bold !important;
    border-radius: 50px !important; /* Rounded Pill shape */
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Navigation link animation */
nav a {
    position: relative;
    padding-bottom: 5px;
}
nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: white;
    transition: width 0.3s;
}
nav a:hover::after {
    width: 100%;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }}