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



/* html এবং body ট্যাগের ওভারফ্লো ফিক্স (যেন sticky কাজ করতে পারে) */
html, body {
    overflow-x: hidden !important;
    height: auto !important;
}
body {
    padding-top: 0 !important;
}

/*==============Digital Clock=============== */
/* ডিজিটাল ঘড়ি ও তারিখের মেইন কন্টেইনার */
.topbar-clock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #800080 !important;
    background: white !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

/* আইকন ও টেক্সটকে দুই লাইনে সাজানোর র্যাপার */
.clock-date-wrapper {
    display: flex !important;
    flex-direction: column !important; /* লেখাগুলোকে একটির নিচে আরেকটি রাখবে */
    align-items: flex-start !important;
    line-height: 1.2 !important;
}

/* ঘড়ির সময় (উপরের লাইন) */
#clock-text {
    font-size: 13px !important;
    font-weight: bold !important;
    font-family: 'Courier New', Courier, monospace !important;
    letter-spacing: 0.5px;
}

/* লাইভ তারিখ (নিচের ছোট লাইন) */
#date-text {
    font-size: 10px !important; /* ঘড়ির চেয়ে সাইজ ছোট করা হলো */
    font-weight: 500 !important;
    color: #008080 !important; /* হালকা একটু ধূসর কালার যেন আলাদা বোঝা যায় */
    font-family: system-ui, sans-serif !important;
}

.topbar-clock i {
    color: #FF00FF !important; /* সোনালী আইকন */
    font-size: 16px !important;
    animation: clockBlink 2s infinite;
}

@keyframes clockBlink {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}
/*==============Digital Clock=============== */

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

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

        .nav_con li a {
            color: white;
            font-size: 15px;
            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;
        }

        .navmail{
            font-size: 15px;
            margin-right: 5px;
        }
        .navcall{
            font-size: 15px;
            margin-right: 5px;
        }
        .navwhatsapp{
            font-size: 15px;
            margin-right: 5px;
        }
        .nav_con li a:hover{
            background: blue;
            padding: 2px 2px;
            border-radius: 20px;
        }
        .navyou{
            color: #ff0000;
            font-size: 30px;
            margin-left: 5px;
            margin-right: 10px;
        }
        .navfb{
            color: mediumblue;
            font-size: 30px;
            margin-right: 5px;
        }
        .navyou:hover{
            font-size: 35px;
            border-radius: 50px;
        }
        .navfb: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;
            }
            .topbar-social-icons{
                margin-top: 15px;
            }
            .navyou{
            color: #ff0000;
            font-size: 30px;
            margin-left: 1px;
            margin-right: 6px;
            }
            .navfb{
                color: mediumblue;
                font-size: 30px;
                margin-right: 5px;
            }
            .navyou:hover{
                font-size: 35px;
                border-radius: 50px;
            }
            .navfb:hover{
                font-size: 35px;
                border-radius: 50px;
            }
        }
        /* ==============Nav Top=============== */

        /*=========== ৩. মেইন হেডার (Sticky) ============== */
        header {
            position: -webkit-sticky !important;
            position: sticky !important;
            top: 0px !important; /* সবুজ বারের হাইট ৪৮px, তাই এটি ঠিক তার নিচে স্টিকি হয়ে আটকে থাকবে */
            background: #e1d7d7 !important; /* আপনার দেওয়া ব্যাকগ্রাউন্ড কালার */
            display: flex !important;
            justify-content: space-between !important;
            align-items: center !important;
            padding: 10px 5% !important;
            width: 100% !important;
            z-index: 100 !important;
            box-sizing: border-box !important;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        }
        
        /* ২. যখনই স্ক্রোল করা হবে, এই ক্লাসটি জাভাস্ক্রিপ্ট দিয়ে একটিভেট হবে */
        header.is-sticky {
            position: fixed !important;
            top: 0 !important; /* স্ক্রিনের একদম মাথায় আটকে যাবে */
            left: 0 !important;
            width: 100% !important;
            z-index: 100 !important; /* সর্বোচ্চ পাওয়ার যেন সবকিছুর উপরে থাকে */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
            animation: slideDown 0.4s ease-in-out; /* স্ক্রোল করলে মেনুটি সুন্দরভাবে নেমে আসবে */
        }


        /* ৭. হোমপেজের স্লাইডার বা ব্যানারের জোর করে ওপরে চলে আসা বন্ধ করা */
        .slider, .banner, .hero, .carousel, .main-slider, .swiper-container, iframe {
            z-index: 1 !important;
            position: relative !important;
        }
        /* ৫. ডান পাশের ঘড়ি, তারিখ এবং সোশ্যাল আইকন এলাইনমেন্ট */
        .topbar-right-content {
            display: flex !important;
            align-items: center !important;
            gap: 15px !important;
        }
        
        .topbar-social-icons {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
        }
        
        .topbar-social-icons a {
            color: #fff !important;
            font-size: 14px !important;
        }
        
        .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: 2;
            /* 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: 5;
            
            /* শুরুতে লুকানো থাকবে */
            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; margin-right: 5px; }
            .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;
            }

        }
        /*=============== ৭. প্রোফাইল এবং মোবাইল সেটিংস =================*/
/* ===== Theme-aware top clock bar ===== */
.topbar-clock{
    background:#ffffff !important;
    color:#5f176f !important;
    border:1px solid #e1e5ea !important;
    box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
    transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease !important;
}
.topbar-clock #clock-text{
    color:#4f1761 !important;
}
.topbar-clock #date-text{
    color:#087f7f !important;
}
.topbar-clock i{
    color:#c218c2 !important;
}

html.sadia-dark .topbar-clock{
    background:#182129 !important;
    color:#f3f6f8 !important;
    border-color:#34414c !important;
    box-shadow:0 3px 10px rgba(0,0,0,.35) !important;
}
html.sadia-dark .topbar-clock #clock-text{
    color:#f5f7fa !important;
}
html.sadia-dark .topbar-clock #date-text{
    color:#83d9cf !important;
}
html.sadia-dark .topbar-clock i{
    color:#ffd166 !important;
}