/* ১. বেসিক রিসেট */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background-color: white;
            color: #333;
            overflow-x: hidden;
        }

        /* ২. ফিক্সড কন্টেইনার */
        .fixed-top-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 5000;
            background: white;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
        }

        /* ৩. হেডার ডিজাইন */
        header {
            background: rgb(224, 224, 224);
            color: rgb(0, 0, 0);
            padding: 0 5%;
            height: 70px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .icon-logo{
            width: 50px;
            height: 50px;
            position: sticky;
        }
        .logo a {
            color: rgb(0, 4, 255);
            text-decoration: none;
            font-weight: bold;
            font-size: 20px;
        }

        /* ৪. সার্চ বার */
        .search-container {
            position: relative;
            flex-grow: 0.4;
            margin: 0 20px;
        }
        .search-bar input {
            width: 100%;
            padding: 10px 20px;
            border-radius: 25px;
            border: 1px solid rgb(0, 145, 84);
            background: rgba(255,255,255,0.1);
            color: white;
            outline: none;
        }
        #search-results {
            position: absolute;
            top: 55px;
            left: 0;
            width: 100%;
            background: white;
            border-radius: 8px;
            max-height: 300px;
            overflow-y: auto;
            display: none;
            box-shadow: 0 5px 20px rgba(0,0,0,0.3);
            z-index: 6000;
        }
        .search-item {
            padding: 12px 20px;
            border-bottom: 1px solid #eee;
            text-decoration: none;
            color: #333;
            display: block;
        }

        /* ৫. ন্যাভিগেশন বার */
        nav {
            background: rgb(228, 228, 228);
            height: 50px;
            overflow-x: auto;
            white-space: nowrap;
            border-bottom: 2px solid #e0e0e0;
            scrollbar-width: none;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        .nav-list :active {
            background: rgb(255, 0, 0);
            height: 50px;
            border-radius: 5px;
        }
        
        nav::-webkit-scrollbar { display: none; }

        .nav-list {
            display: inline-flex;
            list-style: none;
            padding: 0 20px;
        }
        .nav-link { 
            display: block;
            color: rgb(0, 0, 0);
            padding: 0 20px;
            line-height: 50px; 
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer; 
        }

        /* ৬. ড্রপডাউন মেনু (Fix: স্ক্রিনের বাইরে যাওয়া রোধ করতে dynamic positioning ব্যবহার করা হয়েছে) */
        .dropdown {
            list-style: none;
            position: fixed; 
            background: white;
            min-width: 200px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            display: none;
            z-index: 9999;
            border-top: 3px solid #1abc9c;
            border-radius: 0 0 5px 5px;
        }
        .dropdown li a {
            padding: 12px 20px;
            display: block;
            color: #444;
            text-decoration: none;
            border-bottom: 1px solid #f1f1f1;
            white-space: nowrap;
        }
        .dropdown li a:hover { background: #cccccc; color: #000000; }

        .page-content {
            /* হেডার (70px) + ন্যাভ (50px) = 120px. 
            তাই অন্তত 130px বা 140px টপ মার্জিন দিন */
            margin-top: 130px; 
            padding: 20px 5%;
            min-height: 80vh; /* যাতে ফুটার সবসময় নিচে থাকে */
            display: block;   /* নিশ্চিত করুন এটি যেন ইনলাইন না হয় */
            position: relative;
            z-index: 1;       /* হেডার থেকে কম কিন্তু সাধারণ থেকে বেশি */
        }
        

/* ৮. ফুটার সেকশন */
        footer {
            background: black;
            color: #ecf0f1;
            width: 100%;
            padding: 20px 0 20px 0;
            margin-top: 50px;
            position: relative; /* ফিক্সড নয়, কনটেন্টের নিচে থাকবে */
            clear: both;        /* ফ্লোটিং কনটেন্ট ক্লিয়ার করবে */
        }
        .footer-content {
            width: 90%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            padding-bottom: 30px;
        }
        .footer-section h3 { color: yellow; margin-bottom: 15px; }
        .footer-section a { color: #bdc3c7; text-decoration: none; display: block; margin-bottom: 8px; }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,0.1);
            padding-top: 20px;
            text-align: center;
        }

        @media (max-width: 600px) { 
    /* ১. হেডার লেআউট ঠিক করা */
    header {
        padding: 0 15px;
        display: flex;
        justify-content: space-between; /* লোগো বামে এবং বাকি সব ডানে */
        align-items: center;
        gap: 10px;
    }

    /* ২. লোগো বা নামের অংশ (যাতে এক লাইনে থাকে) */
    .logo {
        flex: 1; /* লোগোকে যতটুকু সম্ভব বড় জায়গা দিবে */
        text-align: left;
    }

    .logo a {
        font-size: 17px; /* নাম অনুযায়ী এডজাস্ট করতে পারেন */
        white-space: nowrap; /* নাম দুই লাইনে হবে না */
        display: inline-block;
    }

    /* ৩. সার্চ কন্টেইনারকে ছোট করে ডানে প্রোফাইলের পাশে রাখা */
    .search-container {
        flex-grow: 0; /* অতিরিক্ত জায়গা নিবে না */
        margin: 0;
        min-width: 40px; /* আইকনের জন্য নূন্যতম জায়গা */
    }

    .search-bar input {
        width: 45px; /* শুরুতে ছোট গোল আইকনের মতো দেখাবে */
        height: 35px;
        padding: 5px 10px;
        border-radius: 30px;
        transition: width 0.3s ease; /* ক্লিক করলে বড় হওয়ার জন্য */
        font-size: 13px;
    }

    /* ইউজার যদি সার্চ বক্সে ক্লিক করে তবে এটি কিছুটা বড় হবে */
    .search-bar input:focus {
        width: 120px; 
        position: absolute;
        right: 0;
        z-index: 10;
        background: white;
        color: black;
    }

    /* লোগো আইকন সাইজ ছোট করা */
    .icon-logo {
        width: 35px;
        height: 35px;
    }
}