/*!______________________________________body-container style section start_______________________________________*/

body{

background-color: black;
color: whitesmoke;

}

/**________________________________________Container div section start_________________________________*/

div.container{

background-color: #2B2B2B;

height: 2000px;
width: 90%;
margin: 0 auto;
}

/*!__________________________________________Main:- movie container section start__________________________________________*/

.movie-grid {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;       
    padding: 20px;
    justify-content: center; /* কার্ডগুলো মাঝখানে সুন্দর করে সাজানো থাকবে */
}

.movie-card {
    width: 220px;   
    background-color: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s ease;
    border: 1px solid #333;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

/* মাউস নিলে কার্ডের এনিমেশন */
.movie-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(255, 115, 115, 0.3);
    border-color: #d41f1f;
}

.poster-container {
    height: 300px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.poster-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

/* মাউস নিলে ছবির জুম এনিমেশন */
.movie-card:hover .poster-container img {
    transform: scale(1.1);
}

.quality {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #d41f1f;
    color: white;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
}

.movie-info {
    padding: 12px;
    text-align: center;
}

.movie-title {
    font-size: 14px;
    color: white;
    margin: 0;
}
/* --- মুভি সেকশন এন্ড --- */




/*!__________________________________________Main:- movie container section end__________________________________________*/

/* পুরো ওয়েবসাইটের সব লিঙ্কের জন্য এই নিয়ম কাজ করবে */
a {
    text-decoration: none !important; /* আন্ডারলাইন পুরোপুরি বন্ধ করার জন্য */
    color: inherit !important;        /* লিঙ্কটি তার ওপরের এলিমেন্টের রঙ নিজে থেকেই নিয়ে নেবে */
}

/* মাউস নিলেও যেন আন্ডারলাইন না আসে */
a:hover {
    text-decoration: none !important;
}


/* মুভি কন্টেইনার যেখানে সব কার্ডগুলো আছে */
.movie-grid {
    display: grid;
    /* প্রতি লাইনে কয়টি করে কার্ড থাকবে তা অটোমেটিক সেট করবে */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); 
    /* কার্ডগুলোর মধ্যে ২০ পিক্সেল গ্যাপ তৈরি করবে */
    gap: 20px; 
    padding: 20px;
    justify-items: center;
}

/* প্রতিটি মুভি কার্ডের স্টাইল */
.movie-card {
    width: 100%;
    max-width: 200px;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* মাউস নিলে হালকা জুম হবে (অপশনাল) */
.movie-card:hover {
    transform: scale(1.05);
}




/*?____________________________________Imeage and search box section start__________________________________*/
/* লোগো বামে এবং সার্চ বক্স ডানে নেওয়ার জন্য */
div.top {
    display: flex !important;
    justify-content: space-between !important; 
    align-items: center !important;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
}

/* সার্চ কন্টেইনার আপডেট */
.search-container {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: 1px solid #c5a059;
    border-radius: 30px;
    padding: 0;
    width: 100%;
    max-width: 400px; /* ডানে রাখার জন্য উইডথ একটু কমিয়েছি */
    overflow: hidden;
}

/* ইনপুট বক্সের সাদা ব্যাকগ্রাউন্ড রিমুভ করার কোড */
input.Search-Box {
    border: none !important;
    outline: none !important;
    background: transparent !important; /* টাইপ করার সময়ও ট্রান্সপারেন্ট থাকবে */
    color: white !important; 
    padding: 12px 20px;
    flex: 1;
    font-size: 16px;
}

/* ব্রাউজারের অটোফিল (সাদা কালার) বন্ধ করার ম্যাজিক কোড */
input.Search-Box:-webkit-autofill,
input.Search-Box:-webkit-autofill:hover, 
input.Search-Box:-webkit-autofill:focus {
    -webkit-text-fill-color: white !important;
    -webkit-box-shadow: 0 0 0px 1000px #121212 inset !important; /* আপনার পেজের ব্যাকগ্রাউন্ড কালার */
    transition: background-color 5000s ease-in-out 0s;
}

.search-btn {
    background-color: #161b22; 
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 25px 25px 0;
    margin: 2px;
}

.search-btn i, .search-btn svg {
    color: white;
    font-size: 20px;
}
/**/
/**/
/**______________________________________________Imeage section start__________________________________*/

img.heading {
    height: 80px;
    width: 150px;
    margin-top: 10px;
    margin-left: 5px;
    /* নিচে এবং উপরে দুই দিকেই শ্যাডো দেওয়ার জন্য */
    box-shadow: 9px 10px 15px #FF7373, -9px -10px 15px #FF7373;
    border-radius: 10px; /* লোগোর কোণা গোল থাকলে শ্যাডো দেখতে সুন্দর লাগে */
}

img.heading {
    height: 80px;
    width: 150px;
    margin-top: 10px;
    margin-left: 5px;
    /* চারদিকে সমান গ্লো (Glow) দেওয়ার জন্য */
    box-shadow: 0 0 15px 5px #FF7373; 
    border-radius: 12px;
}

    _____________________________________________imeage section end__________________________________*/
/**/
/**/
/**____________________________________________Search-Box section start__________________________________*/
/* পিসি এবং বড় স্ক্রিনের জন্য (আগের মতোই থাকবে) */
.search-container {
    display: flex;
    align-items: center;
    background-color: black;
    border-radius: 10px;
    padding: 5px 15px;
    width: 400px; /* পিসিতে ৪০০ পিক্সেল */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

input.Search-Box {
    border: none;
    outline: none;
    width: 100%;
    padding: 10px;
    color: white;
    font-size: 16px;
    background: transparent;
}

.search-btn {
    background: black;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #555;
}

/* শুধুমাত্র মোবাইলের জন্য (Width কমানো হলো) */
@media (max-width: 768px) {
    .search-container {
        width: 80%; /* মোবাইলে স্ক্রিনের ৮০% জায়গা নেবে, যা ৪০০ পিক্সেল থেকে ছোট দেখাবে */
        max-width: 300px; /* এর বেশি চওড়া হবে না */
        padding: 3px 10px; /* হাইটও সামান্য কমানো হয়েছে */
    }

    input.Search-Box {
        padding: 8px; /* টেক্সট বক্সের প্যাডিং কিছুটা কমানো হলো */
        font-size: 14px; /* ফন্ট সাইজও সামান্য ছোট করা হলো */
    }
}
}
/**____________________________________________Search-Box section end__________________________________*/
/**/
/**/
/*?____________________________________Imeage and search box section end__________________________________*/
/**/
/**/
/**/
/*?___________________________________Home page's 1st toolbar section start____________________________________________*/
/**/
/**/
/**/
/**___________________________________Home page's 1st toolbar bckground section start____________________________________________*/


/*==============================================================
১. গ্লোবাল কন্টেন্ট ফিক্স (যাতে মুভি কার্ড হারিয়ে না যায়)
==============================================================*/
.main-content, .movie-container, .container, main, #main {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/*==============================================================
২. পিসি সেকশন (Desktop - 769px এর বেশি স্ক্রিনের জন্য)
==============================================================*/
@media screen and (min-width: 769px) {
    /* পিসিতে মোবাইল মেনু পুরোপুরি বন্ধ */
    .mobile-only-navbar, .mobile-side-drawer, .drawer-mask {
        display: none !important;
    }

    /* মেইন নেভিগেশন বার */
    div.first-toolbar {
        display: flex !important; /* পিসিতে এটাকে আবার দৃশ্যমান করা হলো */
        justify-content: center;
        gap: 10px;
        background: rgba(43, 43, 43, 0.9);
        backdrop-filter: blur(10px);
        padding: 0 20px;
        margin-top: 15px;
        border-bottom: 2px solid #333;
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .menu-item {
        position: relative;
        padding: 15px 15px;
        transition: all 0.3s ease;
    }

    .menu-item a {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: #ccc !important;
        text-decoration: none;
        transition: 0.3s;
    }

    /* পিসিতে আন্ডারলাইন অ্যানিমেশন */
    .menu-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 3px;
        background: #d41f1f;
        transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        transform: translateX(-50%);
        box-shadow: 0 0 10px #d41f1f;
    }

    .menu-item:hover::after {
        width: 100%;
    }

    .menu-item:hover > a {
        color: #d41f1f !important;
        text-shadow: 0 0 8px rgba(255, 115, 115, 0.5);
    }

    /* পিসি ড্রপডাউন কন্টেন্ট */
    .dropdown-content {
        display: block; 
        visibility: hidden;
        opacity: 0;
        position: absolute;
        background-color: #1a1a1a;
        min-width: 220px;
        box-shadow: 0px 10px 40px rgba(0,0,0,0.9);
        z-index: 10;
        top: 100%;
        left: 0;
        border-radius: 0 0 8px 8px;
        border-top: 3px solid #d41f1f;
        transform: translateY(20px);
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        max-height: 450px;
        overflow-y: auto;
    }

    .menu-item:hover .dropdown-content {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    .dropdown-content a {
        color: #eee !important;
        padding: 12px 20px;
        border-bottom: 1px solid #252525;
        text-align: left;
        display: block;
        text-transform: capitalize;
    }

    .dropdown-content a:hover {
        background: #252525;
        padding-left: 25px;
        color: #d41f1f !important;
    }
}

/*==============================================================
৩. মোবাইল সেকশন (Mobile - 768px বা তার কম স্ক্রিনের জন্য)
==============================================================*/
@media screen and (max-width: 768px) {
    /* পিসি টুলবার মোবাইলে হাইড */
    .first-toolbar, .desktop-only-navbar {
        display: none !important;
    }

    /* মোবাইল মেনু বাটন এবং ড্রয়ার স্টাইল */
    .mobile-only-navbar {
        display: block !important;
    }
    
    /* আপনার মোবাইল মেনু বাটন স্টাইল এখানে আসবে */
}






/*?___________________________________Home page's 1st toolbar Mobile section start____________________________________________*/




/* পিসি সেকশন ক্লিনআপ */
.mobile-only-navbar { display: none; }
.desktop-only-navbar { 
    background: #2b2b2b; 
    border-bottom: 1px solid #333;
    padding: 15px 0;
}
.pc-nav-content { display: flex; justify-content: center; gap: 20px; }
.pc-nav-content a { color: #ccc !important; text-decoration: none; font-size: 14px; font-weight: 600; }
.pc-dropdown-menu { display: none; position: absolute; background: #1a1a1a; min-width: 150px; z-index: 999; }
.pc-dropdown:hover .pc-dropdown-menu { display: block; }

/* মোবাইল রেসপন্সিভ (৭৬৮ পিক্সেল এর নিচে) */
@media screen and (max-width: 768px) {
    .desktop-only-navbar { display: none !important; } /* পিসি মেনু ডিলিট */
    .mobile-only-navbar { display: block; }

    .mobile-header-bar {
        display: flex; justify-content: space-between; align-items: center;
        background: #1a1a1a; padding: 12px 20px; margin: 10px;
        border: 1px solid #c5a059; border-radius: 4px; cursor: pointer; color: #fff;
    }
    .hamburger-icon span { display: block; width: 22px; height: 2px; background: #c5a059; margin: 4px 0; }

    .mobile-side-drawer {
        position: fixed; left: -280px; top: 0; width: 280px; height: 100vh;
        background: #111; z-index: 10001; transition: 0.3s; overflow-y: auto;
    }
    .mobile-side-drawer.open { left: 0; }

    /* Aqua Scrollbar */
    .mobile-side-drawer::-webkit-scrollbar { width: 5px; }
    .mobile-side-drawer::-webkit-scrollbar-thumb { background: #00ffff; }

    .drawer-link { border-bottom: 1px solid #222; }
    .drawer-link a, .drawer-flex { display: block; padding: 15px 20px; color: #eee; cursor: pointer; text-decoration: none;}
    .drawer-flex { display: flex; justify-content: space-between; }
    .drawer-sub-menu { display: none; background: #080808; padding-left: 20px; }
    .drawer-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); display: none; z-index: 10000; }
    .drawer-mask.active { display: block; }
}

/* পিসিতে মোবাইল এলিমেন্ট জোর করে হাইড করা */
@media screen and (min-width: 769px) {
    .mobile-only-navbar, 
    #toggle-mobile-menu, 
    .mobile-header-bar,
    #mobile-drawer {
        display: none !important;
    }
    
    /* যদি কোথাও MENU লেখাটা আলগাভাবে থাকে তবে সেটা সরাতে */
    body > b, body > span { 
        /* যদি মেনু টেক্সট সরাসরি বডিতে থাকে তবে এটি চেক করুন */
    }
}

/* মোবাইলে পিসি মেনু হাইড করা */
@media screen and (max-width: 768px) {
    .desktop-only-navbar {
        display: none !important;
    }
}







/* ১. আগের সেই ভুল ফিক্সটা রিমুভ করুন (যদি থাকে) */
body { text-indent: 0 !important; } 

/* ২. পিসিতে অতিরিক্ত অংশগুলো হাইড করার নিরাপদ উপায় */
@media screen and (min-width: 769px) {
    /* মোবাইলের হ্যামবার্গার সেকশন পিসিতে পুরোপুরি গায়েব */
    .mobile-only-navbar, 
    .mobile-header-bar, 
    #toggle-mobile-menu {
        display: none !important;
    }

    /* পিসি মেনুকে সুন্দর করা */
    .desktop-only-navbar {
        display: block !important;
        background: #1a1a1a;
        padding: 10px 0;
        margin-bottom: 20px;
    }

    .pc-nav-content {
        display: flex;
        justify-content: center;
        gap: 25px;
    }

    .pc-nav-content a {
        color: #ccc !important;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        transition: 0.3s;
    }

    .pc-nav-content a:hover {
        color: #00ffff !important; /* হোভার করলে একুয়া কালার */
    }
}

/* ৩. মোবাইলে পিসি মেনু হাইড */
@media screen and (max-width: 768px) {
    .desktop-only-navbar {
        display: none !important;
    }
}








/* ১. নিচের নতুন নেভিগেশন বারটি (যেটি আমি দিয়েছিলাম) পুরোপুরি রিমুভ করা */
.desktop-only-navbar {
    display: none !important;
}

/* ২. উপরের ওগোছালো বারটির (first-toolbar) বাড়তি জায়গা কমানো এবং সুন্দর করা */
.first-toolbar {
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    padding: 5px 0 !important;
    background: transparent !important; /* ব্যাকগ্রাউন্ড কালো করতে চাইলে #1a1a1a দিতে পারো */
}

/* ৩. বাম পাশের সেই একা পড়ে থাকা 'MENU' টেক্সটটি হাইড করতে */
/* তোমার স্ক্রিনশটে লোগোর নিচে যে MENU লেখা আছে তা সরাতে এটি কাজ করবে */
body > b, body > span {
    /* এটি কেবল তখনই কাজ করবে যদি MENU লেখাটি সরাসরি বডিতে থাকে */
}

/* ৪. ওপরের আর নিচে জায়গা কমানোর জন্য */
header, .main-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* মেইন কন্টেন্ট ফিরিয়ে আনার জন্য */
.main-content, .movie-container, .container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/*?___________________________________Home page's 1st toolbar Mobile section end____________________________________________*/


/*?___________________________________Home page's 1st toolbar section end____________________________________________*/

/**/
/**/
/**/
/**/
/**/
/**/
/**/
/*?___________________________________Home page's 2nd toolbar section start____________________________________________*/

/* ক্যাটাগরি কন্টেইনার স্টাইল */
.category-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 20px;
    margin-bottom: 10px;
}

/* সাধারণ ক্যাটাগরি বাটন স্টাইল */
.btn-category, .btn-telegram {
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: white;
    background: #333; /* গাঢ় ধূসর ব্যাকগ্রাউন্ড */
    border: 1px solid #555;
    transition: all 0.3s ease; /* অ্যানিমেশনের জন্য */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* টেলিগ্রাম বাটনের জন্য আলাদা কালার */
.btn-telegram {
    background: #0088cc;
    border-color: #0077b5;
}

/* হোভার অ্যানিমেশন (মাউস নিলে যা হবে) */
.btn-category:hover {
    background: #444;
    border-color: #ff9800; /* বর্ডার কালার পরিবর্তন হবে */
    transform: translateY(-3px); /* সামান্য উপরে উঠবে */
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3); /* গ্লো ইফেক্ট */
}

.btn-telegram:hover {
    background: #00a2f5;
    transform: scale(1.05); /* সামান্য বড় হবে */
    box-shadow: 0 4px 15px rgba(0, 136, 204, 0.4);
}

/* বাটন ক্লিক করলে একটু দেবে যাবে */
.btn-category:active, .btn-telegram:active {
    transform: translateY(0);
}

/*?___________________________________Home page's 2nd toolbar section end____________________________________________*/
/**/
/**/
/**/
/**/
/**/
/**/
/**/

/*!__________________________________________Main:- movie container section start__________________________________________*/


/*==============================================================
   মোবাইল সেকশন (নিখুঁত ফিটিং এর জন্য বিশেষ আপডেট)  start
==============================================================*/
@media (max-width: 768px) {
    .movie-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* এক লাইনে ২টা কার্ড */
        gap: 8px; /* কার্ডের মাঝখানের গ্যাপ একটু কমানো হলো */
        padding: 10px 8px; /* স্ক্রিনের দুই পাশে ৮px গ্যাপ থাকবে যাতে না কাটে */
        width: 100%; /* পুরো স্ক্রিন জুড়ে থাকবে */
        box-sizing: border-box; /* প্যাডিং যাতে কন্টেইনারের বাইরে না যায় */
    }

    .movie-card {
        min-height: auto; /* ফিক্সড হাইট বাদ দিয়ে কন্টেন্টের ওপর ছেড়ে দিন */
        display: flex;
        flex-direction: column;
        background-color: #1a1a1a;
        border: 1px solid #333;
        width: 100%; /* কার্ড যাতে কলামের বাইরে না যায় */
    }

    .poster-container {
        height: auto; 
        aspect-ratio: 2 / 3; /* পোস্টারের আসল সাইজ ঠিক রাখবে */
        overflow: hidden;
    }

    .poster-container img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .movie-info {
        padding: 8px 5px;
        background: #1a1a1a;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 55px; /* টাইটেলের জন্য জায়গা ফিক্সড */
    }

    .movie-title {
        font-size: 11px; /* মোবাইলে টাইটেল আরও একটু ছোট করা হলো নিখুঁত ফিটিং এর জন্য */
        color: #fff;
        line-height: 1.2;
        text-align: center;
        word-wrap: break-word; /* লম্বা শব্দ ভেঙে নিচে নামাবে */
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* সর্বোচ্চ ৩ লাইন দেখাবে, তারপরও না ধরলে ডট আসবে */
        -webkit-box-orient: vertical;
    }
}


/*==============================================================
   মোবাইল সেকশন (নিখুঁত ফিটিং এর জন্য বিশেষ আপডেট)  end
==============================================================*/



/*--- পিসি সেকশন (Desktop - মুভি কার্ড বড় এবং গ্যাপ কমানো হয়েছে) ---*/
.movie-grid {
    display: grid;
    /* কার্ডের সাইজ ২০০px থেকে বাড়িয়ে ২৫০px করা হলো এবং ১ লাইনে অটো সাজাবে */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 15px; /* কার্ডের মাঝখানের জায়গা ২০px থেকে কমিয়ে ১৫px করা হলো */
    padding: 20px;
    margin-top: 20px;
}

.movie-card {
    background-color: #1a1a1a;
    border-radius: 12px; /* বর্ডার রেডিয়াস একটু বাড়িয়ে আরও প্রিমিয়াম করা হলো */
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
}

/* হোভার করলে কার্ডটি সামান্য গ্লো করবে এবং বড় হবে */
.movie-card:hover {
    transform: translateY(-5px);
    border-color: #d41f1f;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.poster-container {
    position: relative;
    /* কার্ড বড় হওয়ায় পোস্টার হাইট ৩০০px থেকে বাড়িয়ে ৩৬০px করা হলো */
    height: 360px; 
}

.poster-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quality {
    position: absolute;
    top: 12px;
    left: 12px;
    background-color: #d41f1f;
    color: white;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 6px;
    z-index: 2;
}

.movie-info {
    padding: 15px 10px;
    text-align: center;
    background: #1a1a1a;
    flex-grow: 1;
}

.movie-title {
    font-size: 16px; /* টাইটেল ফন্ট একটু বড় করা হলো */
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* পিসিতে ২ লাইনের বেশি হলে ডট দেখাবে */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* মোবাইল সেকশন আগের মতোই থাকবে... */



/*!__________________________________________Main:- movie container section start__________________________________________*/



/**____________________________________________Container div section end__________________________________*/


/* পেজিনেশন স্টাইল */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    gap: 8px;
}

.page-link {
    background: #1a1a1a;
    color: #e0e0e0;
    padding: 10px 18px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #333;
    transition: all 0.3s ease;
}

/* অ্যাক্টিভ পেজ (বর্তমানে যে পেজে আছেন) */
.page-link.active {
    background: #d41f1f;
    color: white;
    border-color: #d41f1f;
    box-shadow: 0 0 15px rgba(255, 115, 115, 0.4);
}

/* হোভার ইফেক্ট */
.page-link:hover:not(.active) {
    background: #252525;
    border-color: #d41f1f;
    color: #d41f1f;
    transform: translateY(-3px);
}

/* PREV এবং NEXT বাটন স্পেশাল স্টাইল */
.page-link.prev, .page-link.next {
    background: #222;
    border-color: #444;
}

.dots {
    color: #666;
    padding: 0 5px;
}

/* মোবাইল রেসপন্সিভ */
@media (max-width: 600px) {
    .page-link {
        padding: 8px 12px;
        font-size: 12px;
    }
}




/*?________________________________ Responsive Design for Mobile start ________________________________*/

/*________________________________ Global & PC Style ________________________________*/
body {
    background-color: black;
    color: whitesmoke;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

div.container {
    background-color: #2B2B2B;
    width: 90%;
    max-width: 1200px; /* পিসিতে খুব বেশি চওড়া হবে না */
    margin: 0 auto;
    min-height: 100vh; /* ফিক্সড ২০০০পিএক্স এর বদলে স্ক্রিন অনুযায়ী হবে */
    height: auto;
    overflow: hidden;
}

/* মুভি গ্রিড - পিসিতে ৪-৫টা করে দেখাবে */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
}

/*________________________________ Responsive Design for Mobile ________________________________*/
@media (max-width: 768px) {
    div.container {
        width: 100%; /* মোবাইলে পুরো স্ক্রিন জুড়ে থাকবে */
    }

    /* লোগো এবং সার্চ বক্স উপরে-নিচে সাজানো */
    div.top {
        flex-direction: column;
        text-align: center;
        padding: 15px 0;
    }

    /* মোবাইলে এক লাইনে ২টা করে মুভি কার্ড দেখাবে */
    .movie-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }
}



/*?________________________________ Responsive Design for Mobile end ________________________________*/


/**____________________________________________Container div section end__________________________________*/



/*!_______________________________________body-container style section end________________________________________*/






/*==============================================================
   সব ধরনের স্ক্রলবার লাল করার কোড (Mobile + PC)
==============================================================*/

/* ১. ব্রাউজার এবং সাধারণ এলিমেন্টের জন্য (PC) */
::-webkit-scrollbar {
    width: 8px; /* স্ক্রলবারের চওড়া */
    height: 8px; /* অনুভূমিক স্ক্রলবারের উচ্চতা */
}

/* স্ক্রলবারের পেছনের অংশ (Track) */
::-webkit-scrollbar-track {
    background: #1a1a1a; /* আপনার সাইটের ব্যাকগ্রাউন্ডের সাথে মিল রেখে */
}

/* স্ক্রলবারের নড়াচড়া করার অংশ (Thumb) */
::-webkit-scrollbar-thumb {
    background: aqua; /* একদম লাল রঙ */
    border-radius: 10px; /* কোণাগুলো গোল করার জন্য */
}

/* মাউস হোভার করলে কালার একটু গাঢ় হবে */
::-webkit-scrollbar-thumb:hover {
    background: aqua; 
}

/* ২. ফায়ারফক্স (Firefox) ব্রাউজারের জন্য */
* {
    scrollbar-width: thin;
    scrollbar-color: aqua #1a1a1a;
}

/* ৩. ড্রপডাউন মেনু এবং নির্দিষ্ট সেকশনের জন্য (Mobile + PC) */
.dropdown-content::-webkit-scrollbar,
div.first-toolbar::-webkit-scrollbar,
.mobile-submenu::-webkit-scrollbar {
    width: 5px;
}

.dropdown-content::-webkit-scrollbar-thumb,
div.first-toolbar::-webkit-scrollbar-thumb,
.mobile-submenu::-webkit-scrollbar-thumb {
    background: aqua;
    border-radius: 10px;
}






/*!_______________________________________page changing buttons design start________________________________________*/


/* প্যাগিনেশন কন্টেইনার */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 50px 0;
    perspective: 1000px; /* ৩ডি ইফেক্টের জন্য */
}

/* সাধারণ বাটন স্টাইল */
.page-link {
    text-decoration: none;
    color: #00ffff;
    background: #1a1a1a;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 16px;
    border: 2px solid #00ffff;
    position: relative;
    z-index: 1;
    overflow: visible;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* পানির ঢেউয়ের মতো দোল খাওয়ার মেইন এনিমেশন */
    animation: waterWave 4s ease-in-out infinite;
}

/* হোভার করলে (Mouse Pointer নিলে) পরিবর্তন */
.page-link:hover {
    background: #00ffff;
    color: #000000 !important; /* লেখা কালো হবে */
    font-weight: 900 !important; /* লেখা বোল্ড হবে */
    box-shadow: 0 0 30px rgba(0, 255, 255, 0.8);
    transform: scale(1.1) rotate(2deg);
}

/* রাডার এনিমেশন (Radar Pulse) */
.page-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 2px solid #00ffff;
    border-radius: 50px;
    transform: translate(-50%, -50%);
    z-index: -1;
    /* রাডার এনিমেশন প্লে হবে */
    animation: radarSignal 2s linear infinite;
}

/* একটিভ বাটন (যে পেজে বর্তমানে আছেন) */
.page-link.active {
    background: #00ffff;
    color: #000;
    font-weight: bold;
    animation: activeGlow 1.5s infinite alternate;
}

/* ১. পানির ঢেউয়ের মতো দোল খাওয়ার এনিমেশন */
@keyframes waterWave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(-2deg); }
    50% { transform: translateY(2px) rotate(1deg); }
    75% { transform: translateY(-3px) rotate(-1deg); }
}

/* ২. রাডার সিগন্যাল এনিমেশন (Circle wise) */
@keyframes radarSignal {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }
    100% {
        width: 180%;
        height: 250%;
        opacity: 0;
    }
}

/* ৩. কালার গ্লো এনিমেশন (উজ্জ্বল হওয়া ও নিভে যাওয়া) */
@keyframes activeGlow {
    0% {
        box-shadow: 0 0 10px #00ffff, inset 0 0 5px #00ffff;
        filter: brightness(1);
    }
    100% {
        box-shadow: 0 0 30px #00ffff, inset 0 0 15px #00ffff;
        filter: brightness(1.3);
    }
}

/* প্রিভিয়াস ও নেক্সট বাটনের জন্য সামান্য বড় সাইজ */
.prev, .next {
    min-width: 100px;
    text-align: center;
}

/* হোভার ইফেক্ট: মাউস নিলে বাটন অরেঞ্জ হবে */
.page-link:hover {
    background-color: #FCDC5A !important; /* Orange Color */
    border-color: #FCDC5A !important;
    color: #000000 !important; /* লেখা কালো হবে */
    font-weight: 900 !important; /* লেখা বোল্ড হবে */
    box-shadow: 0 0 25px #FCDC5A; /* অরেঞ্জ গ্লো */
    transform: scale(1.1) translateY(-2px); /* হালকা বড় হবে */
    transition: all 0.3s ease;
}

/* যদি রাডার এনিমেশন থাকে তবে সেটার রঙও হোভারের সময় চেঞ্জ হবে */
.page-link:hover::before {
    border-color: #FCDC5A;
}

/* মোবাইল ডিভাইসের জন্য রেসপন্সিভ ডিজাইন */
@media screen and (max-width: 600px) {
    .pagination-container {
        flex-wrap: wrap; /* বাটন বেশি হলে স্বয়ংক্রিয়ভাবে পরের লাইনে চলে আসবে */
        gap: 8px; /* মোবাইলে গ্যাপ একটু কমিয়ে দেওয়া হলো */
        justify-content: center;
        padding: 0 10px;
    }

    .page-link {
        padding: 8px 14px; /* মোবাইলে বাটনের সাইজ একটু ছোট করা হলো */
        font-size: 13px;
        min-width: auto; /* ফিক্সড উইডথ থাকলে তা সরিয়ে দেবে */
    }

    .prev, .next {
        padding: 8px 12px;
        font-size: 12px;
        flex: 0 0 auto; /* বাটনগুলোকে স্ক্রিন অনুযায়ী ছোট হতে সাহায্য করবে */
    }
    
    /* রাডার এনিমেশন মোবাইলে স্ক্রিনের বাইরে যেতে চাইলে এটি ব্যবহার করুন */
    .page-link::before {
        display: none; /* মোবাইলে রাডার এনিমেশন বন্ধ রাখাই ভালো, এতে ডিজাইন ক্লিন থাকে */
    }
}

/*!_______________________________________page changing buttons design end________________________________________*/






















/* 📱 মোবাইলের জন্য সিঙ্গেল-লাইন সেন্টারড ওভাল লেআউট (১০০% গ্যারান্টিড) */
@media (max-width: 576px) {
    .premium-pagination-wrapper {
        padding: 0 10px !important;
        display: flex !important;
        justify-content: center !important; /* মেইন ওভাল ট্র্যাপকে স্ক্রিনের মাঝে রাখবে */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .premium-pagination {
        display: flex !important; /* ইনলাইন বা গ্রিড নয়, পিওর ফ্লেক্স */
        flex-direction: row !important;
        flex-wrap: nowrap !important; /* কোনোভাবেই যেন ২য় লাইনে না যায় */
        justify-content: flex-start !important; 
        align-items: center !important;
        gap: 5px !important; /* মোবাইলে বাটনের মাঝের স্পেস কিছুটা কমানো হলো */
        padding: 6px 10px !important;
        border-radius: 50px !important; /* ক্যাপসুল শেপ ঠিক রাখবে */
        max-width: 100% !important;
        overflow-x: auto !important; /* স্ক্রিন বিন্দুমাত্র ছোট হলে ডানে-বামে স্ক্রোল হবে, ভাঙবে না */
        white-space: nowrap !important; /* কোনো টেক্সট বা লিস্ট আইটেম ভাঙবে না */
        
        /* স্ক্রোলবার হাইড করার আধুনিক ট্রিক */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }

    /* Chrome, Safari এবং Opera-র জন্য স্ক্রোলবার লুকানো */
    .premium-pagination::-webkit-scrollbar {
        display: none !important;
    }

    /* 🎯 এটি সবচেয়ে গুরুত্বপূর্ণ: মোবাইলে বাটনগুলোর নিজস্ব সংকোচন ক্ষমতা বন্ধ করা */
    .premium-pagination li {
        display: inline-block !important;
        flex-shrink: 0 !important; /* বাটনগুলো নিজে চেপে বা দুমড়ে-মুচড়ে যাবে না */
    }

    .premium-link, .premium-active {
        height: 36px !important; /* পারফেক্ট স্লিম সাইজ */
        padding: 0 10px !important; /* দুই পাশের স্পেস একটু কমানো যাতে স্ক্রিনে বেশি বাটন ধরে */
        font-size: 11px !important;
        border-radius: 50px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .premium-active {
        font-size: 12px !important;
        padding: 0 12px !important;
        transform: scale(1) !important; /* মোবাইল ভিউতে বাড়তি জুম অফ */
    }

    .premium-nav-btn {
        font-size: 10px !important;
        padding: 0 8px !important;
    }
}