/*
 Theme Name:   Blogger Friends BD PRO
 Theme URI:    https://bloggerfriendsbd.info
 Description:  GeneratePress Child theme for mobile responsive discovers blog and news website. Using this child theme you can easily create a google discover blog website. This GeneratePress Child theme design by wplitetheme.com
 Author:       Md Julhas Uddin
 Author URI:   https://www.facebook.com/mdjulhasuddin24
 Template:     generatepress
 Version:      1.4.0
*/

.main-navigation {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
/* Sticky widgets */ 
.auto-width.gb-query-loop-wrapper {
    flex: 1;
}
@media (min-width: 768px) {
.sticky-container > .gb-inside-container,.sticky-container {
    position: sticky;
    top: 80px;
}
#right-sidebar .inside-right-sidebar {
    height: 100%;
}
}
select#wp-block-categories-1 {
    width: 100%;
}
.wplite-banner-ads {
	margin-bottom: 15px;
}
.rank-math-breadcrumb p {
	background: #e5e8ec;
	color: #000000;
	padding: 5px 10px;
	border-radius: 4px;
    font-size: 11px;
	font-weight: 700;
}
@media (max-width: 768px){
	.rank-math-breadcrumb p {
		margin: 0px 10px;
	}
}
/*Block Images*/
.wp-block-image {
    padding-top: 10px;
    padding-bottom: 20px;
}

.wp-block-image img {
    box-shadow: 0 10px 10px 0 rgb(0 0 0 / 6%);
    border: 1px solid #cfcfcf;
    padding: 3px;
}
/*Table of contents*/
#toc_container li a {
    display: block;
    width: 100%;
    color: var(--link-text);
    padding: 10px 1em;
    border-top: 1px solid #aaa;
}
#toc_container {
    background: #f9f9f900;
    border: 1px solid #aaa;
    padding: 0px;
}
#toc_container span.toc_toggle {
    font-weight: 400;
    background: #fff;
    padding: 3px 20px;
    font-size: 18px;
    text-transform: capitalize;
    text-align: center;
    display: block;
}
/*Floating Social Share*/
.wplitetheme-float-social-wrapper {
    position: fixed;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9999;
}

.wplitetheme-float-social-sharing {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    min-height: 40px;
    font-size: 12px;
    padding: 5px 10px;
}

.wplitetheme-float-social-sharing svg {
    position: relative;
    top: 0.5em;
}

.wplitetheme-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);
}

.wplitetheme-social-facebook:hover {
    background-color: rgba(59, 89, 152, .8);
}

.wplitetheme-social-twitter {
    fill: #fff;
    background-color: #0f1419;
}

.wplitetheme-social-twitter:hover {
    background-color: #0f1419;
}

.wplitetheme-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}

.wplitetheme-social-whatsapp:hover {
    background-color: rgba(37, 211, 102, .8);
}

/*Social Share*/
.wpjankari-social-wrapper {
    margin: 20px 5px 20px 5px;
    font-size: 0;
    text-align: center;
	display: flex;
    flex-wrap: wrap;
}
.wpjankari-social-sharing {
	padding: 8px;
	margin: 4px;
	border-radius: 3px;
    flex: 1;
    transition: background-color 0.3s, transform 0.3s, color 0.3s;
}
.wpjankari-social-sharing:hover {
	transform: translateY(-3px);
	border: none;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
@media only screen and (max-width: 600px) {
    .wpjankari-social-sharing {
		display: inline-block;
    }
}
.wpjankari-social-sharing svg {
    position: relative;
    top: 0.15em;
    display: inline-block;
}
.wpjankari-social-facebook {
    fill: #fff;
    background-color: rgba(59, 89, 152, 1);
}
.wpjankari-social-twitter {
    fill: #fff;
    background-color: rgba(0, 0, 0);
}
.wpjankari-social-whatsapp {
    fill: #fff;
    background-color: rgba(37, 211, 102, 1);
}
.wpjankari-social-telegram {
    fill: #fff;
    background-color: rgb(2, 126, 189);
}
.wpjankari-social-more {
    fill: #fff;
    background-color: rgba(0, 0, 0);
}
/*Follow Us Button*/
.whatsapphighlight {
	animation: WPLiteTheme-GreenBorderAnimation 1s infinite;
}
@keyframes WPLiteTheme-GreenBorderAnimation {
	0% {
		border-color: transparent;
	}
	50% {
		border-color: #25d366;
	}
	100% {
		border-color: transparent;
	}
}
.telegramhighlight {
	animation: WPLiteTheme-BlueBorderAnimation 1s infinite;
}
@keyframes WPLiteTheme-BlueBorderAnimation {
	0% {
		border-color: transparent;
	}
	50% {
		border-color: #0086ce;
	}
	100% {
		border-color: transparent;
	}
}
/*Tag Cloud*/
.widget_epcl_tag_cloud a, .widget_tag_cloud a, .wp-block-tag-cloud a {
    font-size: 12px!important;
    margin-bottom: 8px;
    margin-right: 8px;
}
.widget_epcl_tag_cloud a, .widget_tag_cloud a, .wp-block-tag-cloud a,  div.tags a{
    color: #333333;
    display: inline-block;
    padding: 4px 15px;
    line-height: 1.2;
    margin-right: 10px;
    background: #fff;
    border: 1px solid #333333;
    border-radius: 25px;
}








/* শুধুমাত্র মোবাইলের জন্য মেনুটিকে ফুটারে (নিচে) ফিক্সড করা */
@media (max-width: 768px) {
    .gb-element-81b61f6d.sticky-footer-menu {
        position: fixed;
        bottom: 0; /* মেনুটিকে একদম নিচে রাখার জন্য */
        left: 0;
        width: 100%;
        z-index: 99999; /* মেনুটি যেন অন্য সবকিছুর উপরে থাকে */
        background-color: #ffffff; /* ব্যাকগ্রাউন্ড কালার সাদা */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* মেনুর উপরের দিকে হালকা শ্যাডো */
        display: flex;
        justify-content: space-around; /* আইকনগুলো সমান দূরত্বে রাখার জন্য */
        
    }









	
	
	
	
	
	
	
/* শুধুমাত্র মোবাইলের জন্য (৭৬৮ পিক্সেল বা তার কম স্ক্রিনে) */
@media (max-width: 768px) {
    
    /* ১. হেডারের মূল লেআউট - মেনুকে আলাদা রাখার জন্য position: relative দেওয়া হলো */
    #mobile-header .inside-navigation {
        position: relative !important; /* এটি খুবই জরুরি */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding: 8px 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* থিমের লুকানো কোড বন্ধ */
    #mobile-header .inside-navigation::before,
    #mobile-header .inside-navigation::after {
        display: none !important;
        content: none !important;
    }

    /* ২. লোগো (একদম বামে এবং সাইজ স্ট্রিক্টভাবে লক করা) */
    #mobile-header .site-logo, 
    #mobile-header .mobile-header-logo {
        display: flex !important;
        order: 1 !important;
        flex: 0 0 50px !important;
        width: 50px !important;
        max-width: 50px !important;
        height: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        align-items: center !important;
    }

    #mobile-header .site-logo img, 
    #mobile-header .mobile-header-logo img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 50px !important;
        object-fit: contain !important;
        object-position: center left !important;
    }

    /* ৩. কাস্টম সার্চ বক্স (মাঝখানের জায়গা নেবে, কিন্তু মেনুর সাথে ধাক্কা খাবে না) */
    .custom-mobile-search {
        display: block !important;
        order: 2 !important;
        flex: 1 1 auto !important; 
        min-width: 0 !important; /* আগের 230px বাদ দেওয়া হলো, এটাই ডিজাইন ভাঙছিল */
        width: 100% !important;
        /* ডান পাশে 45px জায়গা ছেড়ে দেওয়া হলো, যাতে মেনুর নিচে না ঢুকে যায় */
        margin: 0 45px 0 12px !important; 
    }

    .custom-mobile-search form,
    .custom-mobile-search label {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* সার্চ ইনপুটের প্রফেশনাল ডিজাইন */
    .custom-mobile-search input[type="search"] {
        display: block !important;
        width: 100% !important;
        height: 42px !important; /* আগের চেয়ে একটু বড় করা হলো */
        border: 1px solid #cbd5e1 !important;
        border-radius: 30px !important;
        padding: 0 15px 0 38px !important;
        font-size: 14px !important;
        background-color: #f8fafc !important;
        color: #333 !important;
        box-sizing: border-box !important;
        /* সার্চ আইকন */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23888"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>') !important;
        background-repeat: no-repeat !important;
        background-position: 12px center !important;
        background-size: 16px !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        outline: none !important;
        margin: 0 !important;
    }

    .custom-mobile-search input[type="search"]:focus {
        border-color: #94a3b8 !important;
        background-color: #ffffff !important;
    }

    /* ৪. মেনু বাটন (ম্যাজিক কোড: সার্চ বক্স থেকে সম্পূর্ণ আলাদা করে ডান কোণায় ফিক্সড করা হলো) */
    #mobile-header .mobile-menu-control-wrapper,
    #mobile-header button.menu-toggle {
        position: absolute !important; /* সার্চ বক্সের সাথে কানেকশন ব্রেক! */
        right: 10px !important; /* সবসময় একদম ডান কোণায় ১০ পিক্সেল দূরে থাকবে */
        top: 50% !important;
        transform: translateY(-50%) !important; /* লম্বালম্বি মাঝখানে রাখার জন্য */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
        margin: 0 !important;
        padding: 5px !important;
        color: #333 !important;
        width: auto !important;
        height: auto !important;
        z-index: 99 !important;
		font-size: 28px !important;
    }

    #mobile-header button.menu-toggle .mobile-menu {
        display: none !important;
    }

    /* ৫. ডিফল্ট সার্চ ও অন্যান্য থিমের লুকানো কোড সম্পূর্ণ রিমুভ করা */
    #mobile-header .search-item,
    #mobile-header .mobile-bar-items,
    #mobile-header .menu-bar-items {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        visibility: hidden !important;
    }
}

/* ডেস্কটপে কাস্টম সার্চ বক্স লুকানো */
@media (min-width: 769px) {
    .custom-mobile-search {
        display: none !important;
    }
}





	
	
	@media (max-width: 768px) {
    /* শুধুমাত্র সার্চ বক্সকে জোর করে লম্বা করার কমান্ড */
    #mobile-header .custom-mobile-search {
        flex: 1 1 auto !important; /* মাঝখানের সম্পূর্ণ ফাঁকা জায়গা নিতে বাধ্য করবে */
        width: 100% !important;
        min-width: 220px !important; /* যাতে কোনোভাবেই আর গুটিয়ে না যায় */
        margin: 0 12px !important; /* লোগো ও মেনুর মাঝখানে সুন্দর গ্যাপ */
        display: block !important;
    }

    #mobile-header .custom-mobile-search form {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }


		
		
		


    #mobile-header .site-logo img, 
    #mobile-header .mobile-header-logo img {
        max-height: 72px !important;
    }