/* ==========================================
   Smart Shishu - Master CSS File 
   ========================================== */

/* ১. ভেরিয়েবল সেট করা (রঙের সহজ নিয়ন্ত্রন) */
:root {
    --primary-bg: #fdfaf1;
    --header-gradient: linear-gradient(135deg, #FF4E50 0%, #F9D423 100%);
    --whatsapp-color: #25d366;
}

/* ২. পুরো পেজের সাধারণ সেটিংস */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Hind Siliguri', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--primary-bg);
    overflow-x: hidden;
    padding-bottom: 80px;
}

/* ৩. হেডার বা ওপরের অংশ */
header {
    background: var(--header-gradient);
    padding: 45px 20px;
    text-align: center;
    color: white;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    position: relative; /* দুই পাশের বাটন যেন হেডারের ভেতরেই থাকে তার জন্য */
}

header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    animation: bounceIn 1.5s ease;
}

@keyframes bounceIn {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); }
}

/* ৪. নোটিশ বা অ্যাড বক্স */
.ad-container {
    width: 90%;
    max-width: 600px;
    background: #fff;
    margin: 25px auto;
    border: 2px dashed #bbb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 15px;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
}

/* ৫. বাটনের গ্রিড (মোবাইলের জন্য ২ কলাম) */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 25px;
    max-width: 600px;
    margin: 0 auto;
}

/* ৬. গোলাকার বাটনের স্টাইল */
.btn-item {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 5px solid white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    line-height: 1.3;
}

.btn-item:hover {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 12px 25px rgba(0,0,0,0.2);
}

/* ৭. প্রতিটি ক্যাটাগরির আলাদা আলাদা রঙ */
.bg-letters { background: #FF4757; }
.bg-math { background: #1E90FF; }
.bg-world { background: #2ED573; }
.bg-creative { background: #FFA502; }
.bg-games { background: #7158E2; }
.bg-habits { background: #E84393; }

/* ৮. হোয়াটসঅ্যাপ বাটন */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--whatsapp-color);
    color: white;
    padding: 12px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 999;
}

/* ৯. ফুটার সেকশন */
footer {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 0.95rem;
}

.footer-links a {
    color: #6c5ce7;
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
}

/* ==========================================
   ১০. ভয়েস হাইলাইট সিস্টেম (লেখা নড়বে না) 
   ========================================== */

.word-span { 
    display: inline-block; 
    padding: 0 2px;
    border-radius: 4px; 
    transition: background-color 0.15s ease, color 0.15s ease; 
}

.active-word { 
    background-color: #ffeaa7 !important; 
    color: #d63031 !important; 
    font-weight: 900 !important;
}

.active-point { 
    border-color: #00b894 !important; 
    background: #f0fff4 !important; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important; 
}

/* ==========================================
   ১১. লোগো ও হেডার রেস্পন্সিভ ডিজাইন (নতুন অ্যাড করা হলো) 
   ========================================== */

/* লোগো এবং হেডলাইনের মেইন বক্স (বাটন থেকে দূরে রাখার জন্য) */
.header-title-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap; /* ছোট স্ক্রিনে ভেঙে নিচে যাওয়ার জন্য */
    gap: 15px; /* লোগো এবং লেখার মাঝে নিরাপদ দূরত্ব (টাচ করবে না) */
    margin-top: 40px; /* ওপরের ব্যাক বাটন থেকে নিচে নামানোর জন্য */
    padding: 0 10px;
}

/* মোবাইল ও আইফোনের জন্য ডিফল্ট লোগো সাইজ */
.header-logo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    object-fit: cover;
    flex-shrink: 0; /* লোগো যেন চ্যাপ্টা না হয় */
    margin: 0 auto;
}

/* আইপ্যাড বা ট্যাবলেটের জন্য (মাঝারি স্ক্রিন) */
@media (min-width: 768px) {
    .header-logo {
        width: 85px;
        height: 85px;
        border-width: 4px;
    }
    header h1 {
        font-size: 3.5rem; /* লোগোর সাথে সামঞ্জস্য রেখে লেখাও বড় হবে */
    }
    .header-title-box {
        margin-top: 20px; /* বড় স্ক্রিনে বাটন অনেক সাইডে থাকে, তাই মার্জিন কমানো হলো */
    }
}

/* ল্যাপটপ বা কম্পিউটারের জন্য (বড় স্ক্রিন) */
@media (min-width: 1024px) {
    .header-logo {
        width: 110px;
        height: 110px;
        border-width: 5px;
    }
    header h1 {
        font-size: 4rem;
    }
    header {
        padding: 55px 40px; /* লোগো যাতে হেডারের বর্ডারের বাইরে না যায়, তাই হেডারকে একটু বড় করা হলো */
    }
}