/* ১. রিসেট এবং গ্লোবাল স্টাইল */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: sans-serif;
}

        /* ==============Nav Top=============== */
        /* ১. ডেক্সটপ ভিউ (ডিফল্ট): সব পাশাপাশি থাকবে */
        .nav {
            background: #28a745;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 5%;
            color: white;
        }

        /* কন্টাক্ট লিঙ্কগুলো ডেক্সটপে পাশাপাশি করার জন্য */
        .nav_con {
            display: flex;
            flex-direction: row; 
            gap: 20px;
        }

        .nav_con li a {
            color: white;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* সোশ্যাল আইকনগুলো সবসময় পাশাপাশি থাকবে */
        .nav_con1 {
            display: flex;
            flex-direction: row;
            gap: 15px;
            align-items: center;
        }

        .nav_con1 li a {
            color: white;
            font-size: 26px;
        }

        .fa-youtube{
            color: #ff0000;
        }
        .fa-facebook{
            color: mediumblue;
        }
        .fa-youtube:hover{
            font-size: 35px;
            border-radius: 50px;
        }
        .fa-facebook:hover{
            font-size: 35px;
            border-radius: 50px;
        }
        /* ২. মোবাইল ভিউ (৯০০ পিক্সেলের নিচে): কন্টাক্ট লিঙ্কগুলো নিচে নিচে হবে */
        @media (max-width: 900px) {
            .nav {
                flex-direction: row; /* মেইন বার ডানে-বামে ভাগ করা থাকবে */
                align-items: flex-start; /* কন্টেন্টগুলো উপরে এলাইন হবে */
                padding: 10px 3%;
            }

            /* কন্টাক্ট লিঙ্কগুলো মোবাইলে লম্বালম্বি (Vertical) এবং বামে থাকবে */
            .nav_con {
                flex-direction: column; 
                align-items: flex-start; 
                gap: 8px;
            }

            /* সোশ্যাল আইকনগুলো মোবাইলেও ডানে পাশাপাশি থাকবে */
            .nav_con1 {
                flex-direction: row; 
                justify-content: flex-end;
                gap: 20px;
                margin-top: 15px;
            }
        }
        /* ==============Nav Top=============== */

        /*=========== ৩. মেইন হেডার (Sticky) ============== */
        header.header2 {
            background: #e1d7d7;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 5%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 2000;
        }
        
        .navlogo {
            width: 100px;
            height: auto;
        }
        /*=========== ৩. মেইন হেডার (Sticky) ============== */

        /*================ ৪. সার্চ বক্স ডিজাইন =====================*/
        /* ১. ডেস্কটপ ভিউতে সাধারণ অবস্থা */
        .search-wrap {
            display: flex;
            align-items: center;
            position: relative;
            width: 150px; /* ডেস্কটপে শুরুতে এই সাইজ থাকবে */
            transition: width 0.4s ease-in-out;
            margin: 10px;
        }
        /* ২. ডেস্কটপে ক্লিক করলে বড় হবে */
        .search-wrap:focus-within {
            width: 250px; /* ক্লিক করলে যতটুকু বড় করতে চান */
        }
        /* ৩. ইনপুট বক্সের ডিজাইন */
        .search-wrap input[type="text"] {
            width: 100%;
            padding: 10px 40px 10px 15px;
            border: 1px solid #ccc;
            border-radius: 25px;
            outline: none;
            background-color: #f9f9f9;
        }
        .search-wrap button {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            position: absolute; /* এটি ইনপুট বক্সের ভেতরে আইকনটিকে রাখবে */
            right: 15px;         /* বক্সের ডান দিক থেকে দূরত্ব */
            top: 50%;
            transform: translateY(-50%); /* আইকনটিকে একদম মাঝখানে (লম্বালম্বিভাবে) রাখবে */
            display: flex;
            align-items: center;
        }

        .search-wrap button i {
            color: #888;         /* আইকনের হালকা ধূসর রঙ */
            font-size: 16px;
        }
        /* ৪. সার্চ ফরমকে পজিশন করা এবং ক্লিক করলে বড় হওয়া */
        .search-wrap form {
            position: relative; /* এটি আইকনকে বক্সের ভেতরে আটকে রাখবে */
            width: 100%;
            display: flex;
            align-items: center;
        }

        /* যখন ইনপুট বক্সে ক্লিক (Focus) করবেন */
        .search-wrap input[type="text"]:focus {
            border-color: #007bff;   /* বর্ডার নীল হবে */
            background-color: #fff;  /* ব্যাকগ্রাউন্ড সাদা হবে */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
        }

        @media screen and (max-width: 900px) {
            /* হেডারের মেইন কন্টেইনার */
            header {
                display: flex !important;
                justify-content: space-between !important;
                align-items: center !important;
                padding: 5px 10px;
            }

            /* ১. লোগো বামে থাকবে */
            .logo {
                flex: 1;
            }

            /* ২. সার্চ কন্টেইনার - শুরুতে ছোট থাকবে */
            .search-wrap {
                margin-left: auto !important;
                margin-right: 10px !important;
                width: auto !important;
                max-width: 130px !important; /* শুরুতে এই মাপে থাকবে */
                transition: max-width 0.4s ease-in-out !important; /* স্মুথ বড় হওয়ার জন্য */
            }

            /* বক্সে ক্লিক করলে বা ভেতরে কার্সর থাকলে বড় হবে */
            .search-wrap:focus-within {
                max-width: 210px !important; /* লোগোর দিকে যতটুকু বড় করতে চান */
            }

            /* ৩. ইনপুট ফিল্ডের ডিজাইন */
            .search-wrap input[type="text"] {
                width: 100% !important;
                height: 35px;
                padding: 5px 35px 5px 15px;
                border-radius: 20px;
                font-size: 12px;
                background-color: #f1f1f1;
                border: 1px solid #ccc;
                transition: background-color 0.3s ease;
            }

            /* ক্লিক অবস্থায় ইনপুটের ব্যাকগ্রাউন্ড সাদা হবে */
            .search-wrap input[type="text"]:focus {
                background-color: #fff !important;
                border-color: #007bff !important;
            }

            /* ৪. আইকনগুলো যাতে জায়গা না হারায় */
            .nav-icons {
                display: flex;
                align-items: center;
                gap: 5px;
                flex-shrink: 0;
            }
            
        }
        
        /*================ ৪. সার্চ বক্স ডিজাইন =====================*/
        
        /*============= ৫. নেভিগেশন মেনু =======================*/
        nav#navbar {
            display: flex;
            flex-grow: 1;
            justify-content: center;
        }
        nav ul#toggle_icon {
            display: flex;
            gap: 3px;
            align-items: center;
        }
        nav ul li {
            position: relative;
        }
        nav ul li a {
            color: #333;
            font-size: 12px;
            font-weight: bold;
            padding: 5px;
            display: flex;
            align-items: center;
            gap: 1px;
            border: solid 1px;
            border-radius: 10px;
        }
        /*============= ৫. নেভিগেশন মেনু =======================*/
        
        /*================= ৬. ড্রপডাউন সেটিংস ===============*/
        nav ul li ul {
            position: absolute;
            top: 100%;
            left: 0;
            background: #ffffff;
            min-width: 150px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            display: none;
            z-index: 3000;
            /* border-top: 3px solid #28a745; */
        }
        nav ul li:hover > ul {
            display: block;
        }
        nav ul li ul li a {
            padding: 5px 10px;
            font-weight: normal;
            border-bottom: 1px solid #eee;
        }
        /* মেনু আইকন এবং লেখার মাঝে গ্যাপ */
        nav ul li a i {
            margin-right: 8px; /* আইকন থেকে লেখার দূরত্ব */
            color: #28a745;    /* আইকনের রঙ (আপনার থিম অনুযায়ী সবুজ করা হয়েছে) */
            font-size: 14px;
        }
        
        /* হোভার ইফেক্ট (ঐচ্ছিক) */
        nav ul li a:hover i {
            color: #000; /* মাউস নিলে আইকনের রঙ পরিবর্তন হবে */
        }
        /*================= ৬. ড্রপডাউন সেটিংস ===============*/

        /*=============== ৭. প্রোফাইল এবং মোবাইল সেটিংস =================*/
        .header-right-side {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        /* ইউজার ড্রপডাউন পজিশন ফিক্স */
        .user-account-wrap {
            position: relative;
        }
        /* ১. মেইন ইউজার আইকন (যেটা ছোট হয়ে গেছে) */
        .user-account-wrap .user-icon {
            font-size: 28px !important; /* মেইন আইকন বড় করার জন্য */
            color: #28a745;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
        }
        .user-icon, .user-pic {
            font-size: 28px;
            cursor: pointer;
            color: #444;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            object-fit: cover;
        }
        .user-dropdown {
            position: absolute;
            top: 100%; /* আইকনের ঠিক নিচ থেকে শুরু হবে */
            right: 0;
            background: #fff;
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
            border-radius: 8px;
            width: 160px;
            z-index: 999;
            
            /* শুরুতে লুকানো থাকবে */
            display: none; 
            margin-top: -5px; /* ড্রপডাউনকে আইকনের আরেকটু কাছে নিয়ে আসবে */
        }
        .user-account-wrap:hover .user-dropdown {
            display: block;
        }
        /* ২. ড্রপডাউন মেনুর ভেতরের ছোট আইকনগুলো */
        .user-dropdown a i {
            font-size: 18px !important; /* ড্রপডাউনের আইকন সাইজ */
            width: 25px; /* আইকনগুলো এক লাইনে রাখার জন্য */
            margin-right: 10px;
            color: #28a745;
            display: inline-block;
        }

        /* ৩. ড্রপডাউন টেক্সট এলাইনমেন্ট */
        /* ড্রপডাউন আইটেমগুলোর মাঝের গ্যাপ ঠিক করা */
        .user-dropdown a {
            padding: 12px 15px;
            display: flex;
            align-items: center;
            color: #333;
            transition: background 0.2s;
        }

        .user-dropdown a:hover {
            background: #f8f9fa;
        }
        /* মোবাইল রেসপন্সিভ */
        .toggleMenu {
            display: none;
            font-size: 24px;
            cursor: pointer;
        }
        @media (max-width: 900px) {
            .toggleMenu { display: block; }
            .search-wrap { flex-grow: 1; margin: 0 5px; }
            nav#navbar {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: #ff9800;
                display: none;
                padding: 5px 0;
            }
            nav#navbar.active { display: block; }
            nav ul#toggle_icon { flex-direction: row; flex-wrap: wrap; justify-content: center; }
            nav ul li a { color: rgb(14, 27, 53); 
                padding: 1px;
                border: solid 1px;
                border-radius: 10px;
                padding: 4px;
                font-size: 10px;
            }
            nav ul li a:hover{
                color: #007bff;
                background-color: #570707;
            }

        }
        /*=============== ৭. প্রোফাইল এবং মোবাইল সেটিংস =================*/