/* ==========================================================================
   1. GOOGLE DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */
:root { --pub-m3-sys-bg: #F8F9FA; --pub-m3-sys-surface: #FFFFFF; --pub-m3-sys-surface-variant: #F0F4F9; --pub-m3-sys-primary: #1A73E8; --pub-m3-sys-primary-dark: #0043A4; --pub-m3-sys-gemini-gradient: linear-gradient(90deg, #1A73E8 0%, #8AB4F8 50%, #C58AF9 100%); --pub-m3-sys-text-main: #1F1F1F; --pub-m3-sys-text-sub: #5F6368; --pub-m3-shadow-sm: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15); --pub-m3-shadow-md: 0 4px 12px 0 rgba(60,64,67,0.15), 0 2px 4px 0 rgba(60,64,67,0.2); --pub-m3-radius-sm: 8px; --pub-m3-radius-md: 16px; --pub-m3-radius-lg: 28px; --pub-m3-radius-full: 9999px; }

/* ==========================================================================
   2. GLOBAL RESET & FORCE BASELINE REPAIR (আইকন নিচে নামানোর চূড়ান্ত ফিক্স)
   ========================================================================== */

.pub-m3-wrapper { font-family: 'Roboto', sans-serif; color: var(--pub-m3-sys-text-main); display: flex; flex-direction: column; min-height: 100vh; padding: 0 24px; }
.pub-m3-scrollable-content { flex: 1; width: 100%; }

/* গ্লোবাল আইকন পজিশন ফিক্স - জ্যামিতিকভাবে জোর করে ৪ পিক্সেল নিচে নামানো হলো */
.pub-m3-wrapper i[class^="fi-"] { 
    display: inline-block !important; 
    vertical-align: middle !important; 
    line-height: 1 !important; 
    transform: translateY(4px) !important; /* আইকনগুলোকে জোর করে লেখার লাইনে নামাবে */
    margin: 0 2px 0 0 !important;
    padding: 0 !important;
}

/* আইকনের ভেতরের ফন্ট গ্লিফ রিসেট */
.pub-m3-wrapper i[class^="fi-"]:before { 
    display: inline-block !important; 
    line-height: 1 !important; 
    vertical-align: middle !important; 
    margin: 0 !important; 
    padding: 0 !important; 
}

/* বাটন এবং ডকের ভেতরের নির্দিষ্ট আইকনগুলোর জন্য ফাইন-টিউন পজিশন */
.pub-m3-hotline i { transform: translateY(3px) !important; }
.pub-m3-btn-filled i { transform: translateY(2px) !important; }
.pub-m3-btn-search-trigger i { transform: translateY(0px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
 
/* ==========================================================================
   3. FLOATING ROUNDED NAVBAR (Google Spec)
   ========================================================================== */
.pub-m3-top-app-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 28px; background-color: rgba(255, 255, 255, 0.90); backdrop-filter: blur(16px); position: sticky; top: 16px; z-index: 100; max-width: 1200px; width: 100%; margin: 16px auto 0 auto; border-radius: var(--pub-m3-radius-full); border: 1px solid rgba(218, 220, 224, 0.60); box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.05), 0 4px 16px 0 rgba(60, 64, 67, 0.03); transition: background-color 0.2s, box-shadow 0.2s, border-color 0.2s; }
.pub-m3-top-app-bar:hover { background-color: #FFFFFF; border-color: rgba(26, 115, 232, 0.25); box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.08), 0 6px 20px 0 rgba(60, 64, 67, 0.06); }
.pub-m3-brand-title { font-size: 20px; font-weight: 500; color: var(--pub-m3-sys-text-main); display: flex; align-items: center; gap: 8px; } 
.pub-m3-web-actions { display: flex; align-items: center; gap: 24px; }
.pub-m3-hotline { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--pub-m3-sys-text-sub); text-decoration: none; font-size: 14px; line-height: 1; }

/* ==========================================================================
   4. CLASSIC HERO & INTELLIGENT SEARCH DOCK
   ========================================================================== */
.pub-m3-classic-hero { max-width: 1200px; margin: 40px auto; padding: 24px 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.pub-m3-hero-left h1 { font-size: 48px; line-height: 58px; font-weight: 400; margin-bottom: 16px; letter-spacing: -0.5px; }
.pub-m3-hero-left h1 span { background: var(--pub-m3-sys-gemini-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; }
.pub-m3-hero-left p { font-size: 16px; color: var(--pub-m3-sys-text-sub); margin-bottom: 32px; line-height: 26px; }
.pub-m3-hero-search-dock { display: flex; align-items: center; background-color: var(--pub-m3-sys-surface); border: 1px solid rgba(218, 220, 224, 0.80); padding: 8px 12px 8px 24px; border-radius: var(--pub-m3-radius-full); box-shadow: 0 4px 16px rgba(60, 64, 67, 0.04); max-width: 680px; width: 100%; margin-top: 16px; transition: box-shadow 0.2s, border-color 0.2s; }
.pub-m3-hero-search-dock:focus-within { box-shadow: var(--pub-m3-shadow-md); border-color: rgba(26, 115, 232, 0.4); }
.pub-m3-search-field-group { display: flex; flex-direction: column; text-align: left; position: relative; justify-content: flex-end; height: 48px; }
.pub-m3-search-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--pub-m3-sys-text-sub); letter-spacing: 0.5px; margin-bottom: 2px; line-height: 1; }
.pub-m3-search-divider { width: 1px; height: 32px; background-color: rgba(60, 64, 67, 0.15); margin: 0 20px; }
.pub-m3-search-native-input { border: none; outline: none; font-size: 14px; color: var(--pub-m3-sys-text-main); background: transparent; width: 100%; padding: 4px 0; height: 24px; }
.pub-m3-btn-search-trigger { width: 44px; height: 44px; border-radius: var(--pub-m3-radius-full); background: var(--pub-m3-sys-primary); color: white; border: none; cursor: pointer; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: background-color 0.2s; padding: 0 !important; }
.pub-m3-btn-search-trigger:hover { background-color: var(--pub-m3-sys-primary-dark); }
.pub-m3-hero-right-graphic { height: 320px; background: var(--pub-m3-sys-surface-variant); border-radius: var(--pub-m3-radius-lg); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pub-m3-ai-wave { position: absolute; width: 80%; height: 80%; background: var(--pub-m3-sys-gemini-gradient); border-radius: 50%; filter: blur(50px); opacity: 0.15; }
.pub-m3-center-card { background: white; padding: 24px; border-radius: var(--pub-m3-radius-md); box-shadow: var(--pub-m3-shadow-md); text-align: center; z-index: 2; border: 1px solid rgba(0,0,0,0.02); }


/* ==========================================================================
   5. SECTIONS GRID & CREATIVE FLAT/BUILDING CARDS
   ========================================================================== */
.pub-m3-section { padding: 32px 0; max-width: 1200px; margin: 0 auto; width: 100%; }
.pub-m3-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; width: 100%; }
.pub-m3-section-title { font-size: 22px; font-weight: 400; color: var(--pub-m3-sys-text-main); }
.pub-m3-view-all-link { line-height:1px; font-size: 14px; font-weight: 500; color: var(--pub-m3-sys-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--pub-m3-radius-full); transition: background-color 0.2s; }
.pub-m3-view-all-link:hover { background-color: #E8F0FE; }
.pub-m3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.pub-m3-creative-card { background-color: var(--pub-m3-sys-surface); border-radius: var(--pub-m3-radius-md); overflow: hidden; border: 1px solid rgba(60,64,67,0.12); transition: box-shadow 0.2s, border-color 0.2s; display: flex; flex-direction: column; }
.pub-m3-creative-card:hover { box-shadow: var(--pub-m3-shadow-md); border-color: var(--pub-m3-sys-primary); }
.pub-m3-avatar-flat { height: 180px; background-color: #E8F0FE; display: flex; align-items: center; justify-content: center; }
.pub-m3-avatar-building { height: 160px; background-color: #F3E8FF; display: flex; align-items: center; justify-content: center; }
.pub-m3-icon-circle { width: 60px; height: 60px; line-height:1px; background: white; border-radius: var(--pub-m3-radius-md); display: flex; align-items: center; justify-content: center; box-shadow: var(--pub-m3-shadow-sm); }
.pub-m3-card-content { padding: 20px; }
.pub-m3-card-title { font-size: 18px; font-weight: 500; margin-bottom: 6px; }
.pub-m3-card-location { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pub-m3-sys-text-sub); margin-bottom: 20px; }
.pub-m3-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--pub-m3-sys-surface-variant); padding-top: 16px; }
.pub-m3-card-price { font-size: 17px; font-weight: 500; }
.pub-m3-card-badge { background: var(--pub-m3-sys-surface-variant); padding: 4px 12px; border-radius: var(--pub-m3-radius-full); font-size: 12px; color: var(--pub-m3-sys-text-sub); }

/* ==========================================================================
   6. MAPS, FOOTER, MOBILE SYSTEM NAV SPEC
   ========================================================================== */
.pub-m3-map-container { background-color: var(--pub-m3-sys-surface); border-radius: var(--pub-m3-radius-md); height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(60,64,67,0.12); gap: 8px; }
.pub-m3-btn-filled { background-color: var(--pub-m3-sys-primary); color: white; border: none; padding: 10px 24px; border-radius: var(--pub-m3-radius-full); font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.pub-m3-btn-filled:hover { background-color: var(--pub-m3-sys-primary-dark); }  
.pub-m3-wrapper i[class^="fi-"] { font-size: 18px; }



.pub-m3-mobile-nav { display: none; position: fixed; bottom: 16px; left: 16px; right: 16px; height: 64px; background-color: rgba(255,255,255,0.92); backdrop-filter: blur(20px); border-radius: var(--pub-m3-radius-full); box-shadow: 0px 4px 20px rgba(0,0,0,0.06); z-index: 999; justify-content: space-around; align-items: center; padding: 0 16px; border: 1px solid rgba(0,0,0,0.04); }
.pub-m3-mobile-nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; background: none; border: none; color: var(--pub-m3-sys-text-sub); cursor: pointer; text-decoration: none; flex: 1; height: 100%; position: relative; }
/* মেটেরিয়াল ৩ স্পেক: সিলেক্টেড আইকন পিল হোল্ডার স্ট্রাকচার */
.pub-m3-mobile-icon-holder { width: 60px; height:60px; line-height:1px; border-radius: var(--pub-m3-radius-full); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.25s cubic-bezier(0.2, 0, 0, 1), color 0.25s; background-color: transparent; }
.pub-m3-mobile-nav-btn i { font-size: 28px !important; transition: transform 0.2s; }
/* সিলেক্টেড/অ্যাক্টিভ স্টেটের জন্য কাস্টম গুগলি টেক-ব্লু পিল ফিল */
.pub-m3-mobile-nav-btn.active .pub-m3-mobile-icon-holder { background-color: #E8F0FE !important; color: var(--pub-m3-sys-primary) !important; }
.pub-m3-mobile-nav-btn.active i { font-weight: bold !important; transform: scale(1.05); }


/**  Footer **/
.pub-m3-footer { background-color: rgba(255, 255, 255, 0.90); }
.pub-m3-footer { backdrop-filter: blur(16px); }
.pub-m3-footer { max-width: 1200px; }
.pub-m3-footer { width: 100%; }
.pub-m3-footer { margin: 64px auto 24px auto; } /* ওপর-নিচে এবং ডানে-বামে অটো মার্জিন ব্যালেন্স */
.pub-m3-footer { padding: 16px 28px; }
.pub-m3-footer { border-radius: var(--pub-m3-radius-full); } /* ডেক্সটপ অ্যাপ বারের মতো পারফেক্টলি রাউন্ডেড */
.pub-m3-footer { border: 1px solid rgba(218, 220, 224, 0.60); } /* ম্যাট স্ট্রোক বর্ডার */
.pub-m3-footer { box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.05), 0 4px 16px 0 rgba(60, 64, 67, 0.03); } /* গুগলের অ্যাম্বিয়েন্ট শ্যাডো */
.pub-m3-footer-content { display: flex; }
.pub-m3-footer-content { justify-content: space-between; }
.pub-m3-footer-content { align-items: center; }
.pub-m3-footer-left { display: flex; }
.pub-m3-footer-left { align-items: center; }
.pub-m3-footer-left { gap: 16px; }
.pub-m3-footer-logo { font-size: 14px; }
.pub-m3-footer-logo { font-weight: 700; }
.pub-m3-footer-logo { color: var(--pub-m3-sys-text-main); }
.pub-m3-footer-logo { letter-spacing: 0.5px; }
.pub-m3-footer-copyright { font-size: 13px; }
.pub-m3-footer-copyright { color: var(--pub-m3-sys-text-sub); }
.pub-m3-footer-right { display: flex; }
.pub-m3-footer-right { align-items: center; }
.pub-m3-footer-right { gap: 32px; } /* লিংক এবং সোশ্যালের মাঝে স্ট্যান্ডার্ড স্পেসিং */
.pub-m3-footer-links { display: flex; }
.pub-m3-footer-links { gap: 24px; }
.pub-m3-footer-link { font-size: 13px; }
.pub-m3-footer-link { font-weight: 500; }
.pub-m3-footer-link { color: var(--pub-m3-sys-text-sub); }
.pub-m3-footer-link { text-decoration: none; }
.pub-m3-footer-link { transition: color 0.2s; }
.pub-m3-footer-link:hover { color: var(--pub-m3-sys-primary); }
.pub-m3-footer-socials { display: flex; }
.pub-m3-footer-socials { gap: 16px; }
.pub-m3-footer-social-btn { color: var(--pub-m3-sys-text-sub); }
.pub-m3-footer-social-btn { text-decoration: none; }
.pub-m3-footer-social-btn { transition: color 0.2s, transform 0.2s; }
.pub-m3-footer-social-btn:hover { color: var(--pub-m3-sys-primary); }
.pub-m3-footer-social-btn:hover { transform: scale(1.08); }

/* ==========================================================================
   7. RADZEN COMPONENT OVERLAYS (Row & Line Aligned)
   ========================================================================== */
    .pub-m3-search-field-group .rz-dropdown-trigger .rzi {
        display: none !important; 
    }

    .pub-m3-search-field-group .rz-dropdown-label {
        text-align: center;
        padding: 0;
    }

/* ==========================================================================
   8. RESPONSIVE MEDIA BREAKPOINTS (Clean Single Blocks)
   ========================================================================== */
@media (max-width: 992px) {
    .pub-m3-classic-hero { grid-template-columns: 1fr; text-align: center; gap: 32px; margin: 24px auto; }
    .pub-m3-hero-left h1 { font-size: 38px; line-height: 48px; }
    .pub-m3-hero-left p { margin-left: auto; margin-right: auto; }
    .pub-m3-hero-right-graphic { height: 260px; }
}

@media (max-width: 768px) {
    .pub-m3-top-app-bar { top: 8px; margin: 8px auto 0 auto; padding: 12px 20px; }
    .pub-m3-brand-title { font-size: 18px; }
    .pub-m3-hero-search-dock { flex-direction: column; border-radius: var(--pub-m3-radius-md); padding: 16px; gap: 16px; }
    .pub-m3-search-divider { display: none; }
    .pub-m3-search-field-group { width: 100%; }
    .rz-dropdown { max-width: 100% !important; }
    .pub-m3-btn-search-trigger { width: 100%; border-radius: var(--pub-m3-radius-sm); height: 40px; }
    .pub-m3-web-actions .pub-m3-hotline{ display: none !important; }
    .pub-m3-btn-filled{padding: 7px 14px;font-size: 20px;}
    .pub-m3-btn-filled .m-none{ display: none !important; }
    .pub-m3-btn-filled{background-color: #6e72771c; color: #292626;}
    .pub-m3-btn-filled:hover{background-color:#e1edff}
    .pub-m3-footer { display: none !important; }
    .pub-m3-mobile-nav { display: flex; }
    .pub-m3-scrollable-content { padding-bottom: 96px; }
    .pub-m3-hero-search-dock .pub-m3-search-field-group {
        padding: 0 4px;
    }
}

/* ==========================================================================
   PERFECT 3-THUMBNAIL GALLERY STYLE
   ========================================================================== */
.pub-m3-gallery-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    width: 100%;
    height: 380px; /* বর্তমান হাইট ঠিক রাখা হলো */
    border-radius: var(--pub-m3-radius-md);
    overflow: hidden;
}

.pub-m3-gallery-main {
    position: relative !important; /* ওভারলে ঠিক রাখার জন্য বাধ্যতামূলক */
    width: 100%;
    height: 100%;
    background: #E8F0FE;
    overflow: hidden;
    border-radius: var(--pub-m3-radius-md);
    cursor: pointer;
}

    .pub-m3-gallery-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.pub-m3-gallery-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px; /* গ্যাপ একটু কমিয়ে দেওয়া হলো যাতে ৩টি ছবি অনায়াসে ধরে */
    height: 100%;
    overflow: hidden;
}

.pub-m3-thumb-item {
    flex: 1; /* ৩টি থাম্বনেইল সমানভাবে উচ্চতা ভাগ করে নেবে */
    position: relative;
    min-height: 0; /* ফ্লেক্সবক্সে ওভারফ্লো রোধ করার জন্য জরুরি */
    border-radius: var(--pub-m3-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid rgba(60,64,67,0.08);
    background: #f1f3f4;
}

    .pub-m3-thumb-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .pub-m3-thumb-item:hover {
        opacity: 0.85;
    }

.pub-m3-gallery-overlay-text {
    position: absolute;
    inset: 0;
    background: rgba(31, 31, 31, 0.6);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 500;
    z-index: 5;
}

/* Responsive for Mobile & Tablet */
@media (max-width: 992px) {
    .pub-m3-details-grid {
        grid-template-columns: 1fr !important;
    }

    .pub-m3-gallery-container {
        grid-template-columns: 1fr;
        height: auto;
    }

    .pub-m3-gallery-main {
        height: 250px;
    }

    .pub-m3-gallery-thumbs {
        flex-direction: row;
        height: 85px;
    }
}