/* GLOBAL */
body{
  margin:0;
  font-family:Arial;
  background:#f4f4f4;
}

/* HEADER */
.main-header{
  background:#0f3d4c;
  display:flex;
  justify-content:space-between;
  padding:15px;
  color:white;
}

.main-header nav a{
  color:white;
  margin:0 10px;
  text-decoration:none;
}

/* PRODUCT GRID */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  padding:20px;
}

.card{
  background:#fff;
  padding:15px;
  border-radius:10px;
}

/* ==========================================================================
   1. Global Reset (সব এলিমেন্টের জন্য বেসিক রিসেট)
   ========================================================================== */
* {
    margin: 0;         /* ডিফল্ট চারপাশের খালি জায়গা (space) রিমুভ করার জন্য */
    padding: 0;        /* ডিফল্ট ভেতরের স্পেস (padding) ০ করার জন্য */
    box-sizing: border-box; /* বর্ডার এবং প্যাডিং যেন এলিমেন্টের সাইজ বড় না করে */
    font-family: 'Segoe UI', Roboto, sans-serif; /* ওয়েবসাইটের লেখার স্টাইল বা ফন্ট পরিবর্তন করার জন্য */
}

/* ==========================================================================
   2. Body Section (পুরো ওয়েবসাইটের ব্যাকগ্রাউন্ড ও টেক্সট কালার)
   ========================================================================== */
body {
    background-color: #f5f7fa; /* পুরো ওয়েবসাইটের ব্যাকগ্রাউন্ড হালকা গ্রে (Gray) কালার করার জন্য */
    color: #2d3748;            /* ওয়েবসাইটের সব লেখার মেইন কালার ডার্ক গ্রে করার জন্য */
    line-height: 1.6;          /* লাইনের মধ্যকার গ্যাপ বা দূরত্ব ঠিক করার জন্য */
    display: flex;
    flex-direction: column;
    min-height: 100vh;         /* ফুটারকে সবসময় স্ক্রিনের নিচে ধরে রাখার জন্য */
}

/* ==========================================================================
   3. Header & Navigation (টপ বার এবং মেনু অপশন)
   ========================================================================== */
header {
    background: linear-gradient(135deg, #0f4c5c, #1d6a7d); /* হেডার ব্যাকগ্রাউন্ডে প্রিমিয়াম ডীপ টিল কালার গ্রেডিয়েন্ট দেওয়ার জন্য */
    padding: 18px 5%;          /* হেডারের উপরে-নিচে এবং ডানে-বামে স্পেস বাড়ানোর জন্য */
    display: flex;
    justify-content: space-between; /* "Mega Deals Zone" বামে এবং মেনু ডানে রাখার জন্য */
    align-items: center;       /* হেডার আইটেমগুলোকে লম্বালম্বিভাবে একদম মাঝে (center) রাখার জন্য */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* হেডারের নিচে সুন্দর হালকা শ্যাডো বা ছায়া দেওয়ার জন্য */
}

.logo {
    color: #ffffff;            /* "Mega Deals Zone" লেখার কালার একদম সাদা করার জন্য */
    font-size: 22px;           /* লোগোর লেখার সাইজ বড় করার জন্য */
    font-weight: 700;          /* লোগোর লেখাটি বোল্ড বা মোটা করার জন্য */
    letter-spacing: 0.5px;     /* অক্ষরের মাঝখানের গ্যাপ সামান্য বাড়ানোর জন্য */
}

nav ul {
    list-style: none;          /* মেনুর লিস্টের ডট (bullet points) রিমুভ করার জন্য */
    display: flex;
    gap: 25px;                 /* Home, Post, Affiliate মেনুগুলোর একটার থেকে আরেকটার দূরত্ব ২৫ পিক্সেল করার জন্য */
}

nav ul li a {
    color: #e2e8f0;            /* মেনু লিঙ্কের লেখার কালার হালকা অফ-হোয়াইট করার জন্য */
    text-decoration: none;     /* লিঙ্কের নিচের ডিফল্ট আন্ডারলাইন (underline) মুছে ফেলার জন্য */
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease; /* মাউস নিলে কালার চেঞ্জ হওয়ার ইফেক্টটি যেন স্মুথ বা সুন্দর দেখায় */
}

/* Hover Effect: মাউস মেনুর উপরে নিলে যা হবে */
nav ul li a:hover {
    color: #38bdf8;            /* মাউস নিলে মেনুর লেখার কালার স্কাই ব্লু (Sky Blue) হয়ে যাবে */
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.4); /* লেখার পেছনে হালকা গ্লো (Glow) ইফেক্ট দেওয়ার জন্য */
}

/* ==========================================================================
   4. Main Content (মাঝখানের কন্টেন্ট এরিয়া বা বক্স)
   ========================================================================== */
main {
    max-width: 1000px;         /* কন্টেন্ট বক্সটি সর্বোচ্চ ১০০০ পিক্সেল চওড়া হবে */
    width: 90%;                /* ছোট স্ক্রিনে দুই পাশে ১০% জায়গা খালি থাকবে */
    margin: 50px auto;         /* বক্সটিকে স্ক্রিনের একদম মাঝখানে (center) বসানোর জন্য */
    padding: 35px;             /* বক্সের ভেতরের কন্টেন্ট এবং বর্ডারের মাঝে স্পেস তৈরি করার জন্য */
    background: #ffffff;       /* কন্টেন্ট বক্সের ব্যাকগ্রাউন্ড কালার একদম সাদা করার জন্য */
    border-radius: 12px;       /* বক্সের চারকোনা সুন্দর গোলাকার (rounded) করার জন্য */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* বক্সের চারপাশে সফট শ্যাডো বা ছায়া দেওয়ার জন্য */
    flex: 1;
}

/* Welcome Heading */
h2 {
    color: #0f4c5c;            /* "Welcome" লেখার কালার হেডারের সাথে ম্যাচ করে ডীপ টিল করার জন্য */
    margin-bottom: 15px;       /* লেখার নিচে কিছুটা খালি জায়গা তৈরি করার জন্য */
    font-size: 32px;
    font-weight: 700;
}

/* Paragraph text */
p {
    font-size: 16px;
    color: #4a5568;            /* প্যারাগ্রাফের লেখার কালার কিছুটা সফট ডার্ক করার জন্য */
    margin-bottom: 20px;
}

/* Normal Links (Google, Facebook, Youtube) */
a {
    color: #1d6a7d;            /* সাধারণ লিঙ্কের কালার ব্লু-গ্রিন করার জন্য */
    text-decoration: none;     /* সাধারণ লিঙ্কের নিচের আন্ডারলাইন সরানোর জন্য */
    font-weight: 600;
}

a:hover {
    color: #38bdf8;            /* সাধারণ লিঙ্কের উপর মাউস নিলে স্কাই ব্লু কালার হবে */
    text-decoration: underline; /* মাউস নিলে নিচে আন্ডারলাইন ভেসে উঠবে */
}

/* ==========================================================================
   5. Footer Section (নিচের কপিরাইট এবং ডেভেলপার ইনফো)
   ========================================================================== */
footer {
    text-align: center;        /* কপিরাইট লেখাটি স্ক্রিনের মাঝে রাখার জন্য */
    padding: 20px;             /* ফুটারের উপরে নিচে স্পেস দেওয়ার জন্য */
    background-color: #1a202c; /* ফুটারের ব্যাকগ্রাউন্ড কালার চারকোল ব্ল্যাক করার জন্য */
    color: #a0aec0;            /* ফুটারের লেখার কালার লাইট গ্রে করার জন্য */
    font-size: 14px;
    border-top: 1px solid #2d3748; /* ফুটারের উপরে একটি হালকা চিকন বর্ডার দেওয়ার জন্য */
}

footer a {
    color: #38bdf8;            /* ফুটারের ভেতরের লিঙ্কের কালার আলাদাভাবে স্কাই ব্লু করার জন্য */
    margin: 0 8px;             /* লিঙ্কগুলোর মাঝে গ্যাপ দেওয়ার জন্য */
}

/* ==========================================================================
   6. Responsive Design (মোবাইল স্ক্রিনের জন্য লেআউট ঠিক করা)
   ========================================================================== */
@media (max-width: 768px) {
    /* স্ক্রিন ৭৬৮ পিক্সেল বা তার ছোট (যেমন মোবাইল) হলে নিচের রুলস কাজ করবে */
    header {
        flex-direction: column; /* মোবাইলে লোগো উপরে এবং মেনু নিচে চলে আসবে (লম্বালম্বি) */
        gap: 15px;
        text-align: center;
        padding: 15px;
    }

    nav ul {
        flex-direction: row;    /* মোবাইলেও মেনু আইটেমগুলো পাশাপাশি থাকবে */
        flex-wrap: wrap;        /* জায়গা না ধরলে মেনু অটোমেটিক নিচের লাইনে চলে যাবে */
        justify-content: center;/* মেনু আইটেমগুলো মোবাইলে সেন্টারে থাকবে */
        gap: 15px;
    }

    main {
        margin: 20px auto;      /* মোবাইলে কন্টেন্ট বক্সের উপরের গ্যাপ কমানোর জন্য */
        padding: 20px;          /* মোবাইলে বক্সের ভেতরের প্যাডিং কিছুটা কমানোর জন্য */
    }
}