/* extracted from canvas */ 
body{margin:0;font-family:sans-serif;background:linear-gradient(180deg,#eef2f7 0%,#dce3ee 100%);color:#333;padding-bottom:90px;}
header{backdrop-filter:blur(12px);background:rgba(255,255,255,0.6);padding:15px 22px;display:flex;justify-content:space-between;align-items:center;border-radius:0 0 28px 28px;box-shadow:0 4px 20px rgba(0,0,0,0.08);position:sticky;top:0;z-index:999;}
header img{height:55px;}
.social-icons a{margin-left:12px;color:#555;text-decoration:none;font-size:26px;filter:drop-shadow(2px 2px 3px #d1d9e6);}
.container{padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:20px;}
.card{background:#fff;border-radius:24px;padding:22px;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;box-shadow:0 6px 18px rgba(0,0,0,0.06);transition:0.25s ease;border:1px solid #eef1f5;}
.card:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,0.12);}
.card-title{font-size:17px;margin-bottom:12px;font-weight:bold;color:#3a6ee8;}
.btn{margin-top:10px;padding:10px 15px;background:linear-gradient(145deg,#d7dce3,#fff);color:#3a6ee8;border-radius:12px;text-decoration:none;font-weight:bold;box-shadow:4px 4px 8px #c5ccd9,-4px -4px 8px #fff;}
.banner-container{margin:0;padding:0;background:#e9eef5;overflow:hidden;width:100vw;max-width:100vw;aspect-ratio:16/9;position:relative;}
.banner-container .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s;}
.banner-container .slide.active{opacity:1;}
/* === Bottom Navigation (Fixed Mobile Navbar) === */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 78px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(14px);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.10);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 8px;
    z-index: 999;
}

/* هر گزینه در منو */
.bottom-nav a {
    text-decoration: none;
    color: #6c6c6c;
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 70px;
    transition: 0.25s ease;
    font-weight: 600;
}

/* آیکون‌ها */
.bottom-nav a i {
    font-size: 24px;
    margin-bottom: 0;
    display: block;
}

/* حالت فعال */
.bottom-nav a.active,
.bottom-nav a:hover {
    color: #3a6ee8;
    transform: translateY(-4px);
    font-weight: 700;
}