﻿@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&family=Major+Mono+Display&display=swap');
/* 1. Global Reset */
html, body { scrollbar-gutter: stable both-edges; scrollbar-width: none; -ms-overflow-style: none; }
 
::-webkit-scrollbar { width: 0px; background: transparent; }
 
body:hover::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-thumb { background: transparent; border-radius: 10px; }

body:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border: 2px solid transparent; background-clip: content-box; }
 
::-webkit-scrollbar-track { background: transparent !important; }

/* কন্টেন্ট আসার সময় স্মুথ ট্রানজিশন */
.fade-in-content { animation: fadeIn 0.5s ease-in-out; }

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(5px); } 
    to { opacity: 1; transform: translateY(0); }
}

a{ 
    text-decoration: none !important;
}

:root {
    --primary-color: #3a44b1;
    --text-dark: #2d3436;
    --accent-color: #3a44b1;
    --accent-soft: rgba(58, 68, 177, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --text-main: #2d3436;
    --text-muted: #636e72;

    --wa-primary: #2563eb;
    --wa-accent: #06b6d4;
    --wa-text: #1e293b;
    --wa-light-bg: #f8fafc;
}

.skeleton-container {
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.skeleton-visible {
    opacity: 1 !important;
}
 
/******
    -----------------------------------
    Start Desktop Header Nav
    ----------------------------------
******/
 
.wa-desktop-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 85px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wa-header-shrunk {
    height: 65px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(58, 68, 177, 0.1);
}

.wa-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 0 20px;
}

.wa-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Styling */
.wa-logo-text {
    font-size: 24px;
    font-weight: 900;
    color: #1a1a1a;
    transition: 0.3s;
    letter-spacing: -0.5px;
}

.wa-highlight {
    color: #3a44b1;
}

/* Desktop Menu Styling */
.wa-nav-menu {
    display: flex;
    gap: 40px;
    align-items: center;
}

.wa-nav-item-wrapper {
    position: relative;
}

.wa-nav-link-premium {
    text-decoration: none !important;
    color: #444 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 8px 0;
    transition: all 0.3s ease;
}

    .wa-nav-link-premium:hover {
        color: #3a44b1 !important;
    }

.wa-nav-active-bar {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: #3a44b1;
    border-radius: 10px;
    transition: width 0.3s ease;
}

.wa-nav-item-wrapper:hover .wa-nav-active-bar {
    width: 100%;
}

.wa-header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Hotline Styles */
.wa-hotline-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 20px;
    border-right: 1px solid rgba(0,0,0,0.1);
}

.wa-hotline-icon {
    font-size: 20px;
    color: #3a44b1;
    background: #f0f2ff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.wa-hotline-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
}

.wa-hotline-number {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
}

/***Header Profile***/
/* --- Profile Section Wrapper --- */

.wa-profile,.rz-navigation-item-wrapper {
    border-radius:3rem;
}
.wa-profile-wrapper {
    display: flex;
    align-items: center;
    padding-left: 15px;
}

.wa-custom-profile-menu {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* --- Profile Trigger (Avatar & Chevron) --- */
.wa-profile-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.wa-profile-trigger:hover {
    background: rgba(58, 68, 177, 0.05);
}

.wa-avatar-ring {
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3a44b1 0%, #4f46e5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(58, 68, 177, 0.2);
}

.wa-profile-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #ffffff;
}

.wa-chevron-icon {
    font-size: 12px;
    color: #94a3b8;
    transition: 0.3s;
}

.profile-avatar-circle {
    width: 150px;
    height: 150px;
    background-color: #3a44b1;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 60px; /* অক্ষরের সাইজ */
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 auto; /* মাঝখানে রাখার জন্য */
    border: 4px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Dropdown Premium Card Styling --- */
/* Radzen এর ড্রপডাউন কন্টেইনারকে টার্গেট করা */
.rz-profile-menu .rz-navigation-menu {
    top: 55px !important;
    right: 0 !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
    padding: 10px !important;
    min-width: 220px !important;
    overflow: hidden !important;
}

.wa-dropdown-header {
    padding: 15px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    margin-bottom: 10px;
}

.wa-user-name {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.wa-user-status {
    font-size: 14px;
    color: #1a1a1a;
    font-weight: 700;
}

/* --- Menu Items Styling --- */
.wa-menu-item .rz-navigation-item-link {
    padding: 12px 15px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    color: #475569 !important;
    font-weight: 600 !important;
}

.wa-menu-item:hover .rz-navigation-item-link {
    background: #f0f2ff !important;
    color: #3a44b1 !important;
}

.wa-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.03);
    margin: 8px 10px;
}

.wa-logout .rz-navigation-item-link {
    color: #ef4444 !important; /* Logout Red Color */
}

.wa-logout:hover .rz-navigation-item-link {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}
/***End Profile***/

.wa-logo-section {
    padding: 10px;
}

.wa-logo-img { 
    width: 150px; 
    max-width: 100%;
    height: auto;
    display: block;
}
 
/* ছোট মোবাইলের জন্য (Screen 480px এর নিচে) */
@media (max-width: 480px) {
    .wa-logo-img {
        width: 100px; /* মোবাইলে লোগোটি একটু ছোট দেখাবে */
    }
}

/****** -----------------------------------
    2. MOBILE VIEW ADJUSTMENTS
    -----------------------------------
******/
@media (max-width: 767px) {
    .wa-desktop-header {
        background: transparent !important;
        border: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        display: flex !important; /* Header must be flex to align items */
        box-shadow: none !important;
    }

    /* Hide desktop items */
    .wa-logo-section,
    .wa-nav-menu,
    .wa-hotline-wrapper,
    .wa-profile-section {
        display: none !important;
    }

    .wa-mobile-toggle-btn {
        display: flex !important;
    }
}

/* ============================================================
   ১. মোমাইল টগল বাটন (Toggle Button) - Fix for Visibility
   ============================================================ */
.wa-mobile-toggle-btn {
    background: #ffffff !important;
    border: none;
    display: none; /* Desktop এ হাইড */
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    position: fixed;
    top: 15px;
    right: 20px; 
    z-index: 999999 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    align-items: flex-end;
    gap: 5px;
    padding-right: 12px;
}

/* যখন মেনু ওপেন হবে (X Icon Active State) */
.wa-toggle-active {
    /* মেনু ওপেন হলে বাটনটিকে ট্রান্সপারেন্ট বা হালকা গ্রে করা যায় */
    background: #f1f5f9 !important;
    box-shadow: none !important;
    align-items: center !important;
    padding-right: 0 !important;
}

/* লাইন কালার ফিক্স */
.wa-line {
    display: block;
    height: 1.5px;
    background: #1a1a1a; /* ডিফল্ট কালো কালার */
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wa-line-1 {
    width: 24px;
}

.wa-line-2 {
    width: 18px;
}

.wa-line-3 {
    width: 12px;
}

/* ক্রস (X) হওয়ার সময় কালার পরিবর্তন */
.wa-toggle-active .wa-line {
    background: #3a44b1 !important; /* মেনু ওপেন হলে লাইনগুলো ব্লু হবে */
    width: 24px !important;
}

.wa-toggle-active .wa-line-1 {
    transform: translateY(5.5px) rotate(45deg);
}

.wa-toggle-active .wa-line-2 {
    opacity: 0;
    transform: translateX(10px);
}

.wa-toggle-active .wa-line-3 {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* ============================================================
   ২. সার্কুলার এক্সপানশন মেনু (Full Screen Premium Menu)
   ============================================================ */

/* মেনু ওপেন থাকলে বডি স্ক্রল হবে না */
body:has(.wa-menu-active) {
    overflow: hidden;
} 
.wa-premium-menu-overlay {
    position: fixed;
    top: 15px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 999; /* বাটনের ঠিক নিচে */
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* একটিভ স্টেট - বৃত্তটি বড় হয়ে পুরো স্ক্রিন হবে */
.wa-menu-active {
    visibility: visible;
    opacity: 1;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #ffffff;
}

/* মেনু কন্টেন্ট এনিমেশন */
.wa-menu-content {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.5s ease;
    transition-delay: 0.3s;
    text-align: center;
    width: 100%;
}

.wa-menu-active .wa-menu-content {
    opacity: 1;
    transform: translateY(0);
}

/* মেনু লিংকের স্টাইল */
.wa-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 50px;
} 
.wa-menu-item.active {
    color: #3a44b1;
}

/* হেল্পলাইন কার্ড */
.wa-menu-footer-premium {
    padding: 25px;
    background: #f8faff;
    border-radius: 24px;
    display: inline-block;
    min-width: 260px;
    border: 1px solid rgba(58, 68, 177, 0.05);
}

.wa-help-text {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #94a3b8;
    font-weight: 700;
}

.wa-help-number {
    font-size: 20px;
    font-weight: 800;
    color: #3a44b1;
    text-decoration: none !important;
    display: block;
    margin-top: 5px;
}

/* লোগো হেডার স্টাইল */
.wa-menu-header {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 0;
    text-align: center;
    margin-bottom: 40px;
}
 
.wa-highlight {
    color: #3a44b1; /* আপনার থিম ব্লু কালার */
}

/* কন্টেন্ট এলাইনমেন্ট ঠিক করা */
.wa-menu-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding-top: 0; /* লোগোর জন্য উপরে জায়গা রাখা */
}

/* মোবাইল ভিউতে বাটন দেখানোর জন্য */
@media (max-width: 767px) {
    .wa-mobile-toggle-btn {
        display: flex !important;
    }

    .wa-menu-item {
        font-size: 32px;
        font-weight: 800;
        color: #1a1a1a;
        text-decoration: none !important;
        letter-spacing: -1px;
        transition: 0.3s;
    }
}

.wa-mbl-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 25px; /* গ্যাপ একটু বাড়ালে প্রিমিয়াম লাগে */
    margin: 80px 0 40px 0;
}

.wa-mbl-menu-item {
    font-size: 36px; /* বড় এবং বোল্ড ফন্ট */
    font-weight: 800;
    color: #1a1a1a;
    text-decoration: none !important;
    letter-spacing: -2px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    opacity: 0.8;
}

/* নেভিগেশন নাম্বার স্টাইল */
.wa-mbl-nav-number {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-right: 15px;
    color: #3a44b1;
    font-family: 'Inter', sans-serif;
}

/* হোভার ইফেক্ট */
.wa-mbl-menu-item:hover {
    opacity: 1;
    padding-left: 15px; /* হালকা স্লাইডিং মুভমেন্ট */
    color: #3a44b1;
}

/* একটি আন্ডারলাইন এনিমেশন */
.wa-mbl-menu-item::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: #3a44b1;
    transition: width 0.3s ease;
}

.wa-mbl-menu-item:hover::after {
    width: 60px;
}

/* Active State */
.wa-mbl-menu-item.active {
    color: #3a44b1;
    opacity: 1;
}

    .wa-mbl-menu-item.active .wa-mbl-nav-number {
        color: #1a1a1a;
    }

@media (max-width: 767px) {
    .wa-mbl-menu-item {
        font-size: 30px; /* মোবাইলে সামান্য ছোট */
        letter-spacing: -1.5px;
    }
}
/******
    -----------------------------------
    End Desktop Header Nav
    ----------------------------------
******/



/******
    -----------------------------------
    Start Mobile Nav
    ----------------------------------
******/
 
/* Main Floating Container */
.wa-app-nav-container { position: fixed; bottom: 20px; left: 20px; right: 20px; height: 70px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 24px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); border: 1px solid rgba(255, 255, 255, 0.4); z-index: 9999; }

.wa-app-nav-content { display: flex; width: 100%; height: 100%; justify-content: space-around; align-items: center; position: relative; }

.wa-app-nav-item { text-decoration: none !important; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; transition: all 0.3s ease; flex: 1; }

.wa-icon-box {
    font-size: 20px;
    margin-bottom: 4px;
}

.wa-nav-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Premium Floating Home Button Fix */
.wa-app-nav-home {
    position: relative;
    overflow: visible;
}

.wa-home-circle {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3a44b1 0%, #4f46e5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    box-shadow: 0 10px 25px rgba(58, 68, 177, 0.4);
    border: 6px solid #fff;
    z-index: 5;
    transform: translateY(-38px); /* Home button k r ektu opore tullam */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.wa-home-label {
    margin-top: -30px; /* Label k niche align korlam */
    color: #3a44b1;
}

/* ১. ডিফল্ট ইন-অ্যাক্টিভ আইকন (Tour & Profile) */
.wa-nav-svg {
    width: 24px;
    height: 24px;
    /* একটি গ্রে-িশ কালার ফিল্টার */
    filter: invert(60%) sepia(10%) saturate(500%) hue-rotate(200deg) brightness(90%) contrast(85%);
    transition: all 0.3s ease;
}

/* ২. হোম আইকন - এটি সব সময় হোয়াইট থাকবে */
/* এখানে Specificity বাড়ানো হয়েছে যেন .wa-active এটাকে পরিবর্তন করতে না পারে */
.wa-app-nav-home .wa-home-circle .wa-nav-svg {
    filter: brightness(0) invert(1) !important;
}

/* ৩. অ্যাক্টিভ স্টেট স্টাইলিং (শুধুমাত্র Tour এবং Profile এর জন্য) */
/* :not(.wa-app-nav-home) ব্যবহার করে আমরা হোম বাটনকে এই ফিল্টার থেকে বাদ দিয়েছি */
.wa-app-nav-item.wa-active:not(.wa-app-nav-home) .wa-nav-svg {
    /* এটি আইকনকে আপনার ব্র্যান্ডের ব্লু (#3a44b1) কালারে রূপান্তর করবে */
    filter: invert(21%) sepia(85%) saturate(2643%) hue-rotate(231deg) brightness(84%) contrast(89%) !important;
    transform: scale(1.1);
}

/* ৪. অ্যাক্টিভ টেক্সট কালার */
.wa-app-nav-item.wa-active {
    color: #3a44b1 !important;
}

/* ৫. হোম বাটন স্টাইলিং */
.wa-home-label {
    margin-top: -30px;
    color: #3a44b1;
}

/* হোম একটিভ হলে সার্কেলের গ্লো বাড়বে */
.wa-app-nav-home.wa-active .wa-home-circle {
    box-shadow: 0 12px 30px rgba(58, 68, 177, 0.6);
}

/* ৬. গ্লো ইফেক্ট */
.wa-home-glow {
    position: absolute;
    top: -45px;
    width: 40px;
    height: 40px;
    background: #3a44b1;
    filter: blur(20px);
    opacity: 0.3;
    z-index: 1;
}

/* ৭. ইন্টারঅ্যাকশন (ক্লিক করলে ছোট হবে) */
.wa-app-nav-item:active .wa-home-circle {
    transform: translateY(-38px) scale(0.9);
}

/* Padding for the Body */
@media (max-width: 767px) {
    .rz-body {
        padding-bottom: 120px !important;
    }
} 
/******
    -----------------------------------
    End Mobile Nav
    ----------------------------------
******/

/******
    -----------------------------------
    Hero Video Banner
    ----------------------------------
******/
/* Hero Section Styles */
.video-hero-section {
    position: relative;
    height: 580px;
    width: 100%;
    overflow: hidden;
    background: radial-gradient(circle, #3a394d 0%, #2e2d3c 100%);
    min-height: 400px;
}

.video-loaded {
    opacity: 1 !important;
}

.background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1; 
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* ১.৫ সেকেন্ড ধরে ধীরে আসবে */
}

.hero-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 15%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}  
@media (max-width: 767px)
{
    .video-hero-section {
        height: 440px;
    } 
}

/******
    -----------------------------------
    End Video Banner
    ----------------------------------
******/
/*** Start welcome text***/
.hero-content-container {
    display: flex;
    flex-direction: column; /* টেক্সটগুলো উপর-নিচে থাকবে */
    justify-content: flex-end; /* কন্টেন্টকে নিচের দিকে নামিয়ে আনে */
    height: 100%; /* প্যারেন্ট overlay-এর উচ্চতা নেবে */
    text-align: center;
    padding-bottom: 80px !important; /* এই প্যাডিং দিয়ে টেক্সটকে সার্চ বারের ঠিক উপরে বসানো যাবে */
}

/* আপনার নতুন টেক্সটের স্টাইল */
.hero-sub-title {
    font-size: 1.2rem;
    font-family: "Major Mono Display", monospace;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.5rem;
    color: #fff;
    opacity: 0.9;
    margin-bottom: 5px;
}

.hero-title {
    font-size: 4rem;
    font-family: "Bungee Inline", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: -20px;  
}

.hero-title-animat {
    text-shadow: none !important;
    background: linear-gradient(90deg, #fff, #ff00ea, #fff); /* দাগের ভেতর দিয়ে যে রঙ যাবে */
    background-size: 200% auto;
    -webkit-background-clip: text; /* ফন্টের ভেতর রঙ দেখানোর জন্য */
    -webkit-text-fill-color: transparent; /* ফন্টের মেইন রঙ স্বচ্ছ করার জন্য */
    animation: shine 3s linear infinite;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

@media (max-width: 768px)
{
    .hero-title {
        font-size: 1.5rem;
        margin-bottom: 0px;
    }
    .hero-sub-title {
        font-size: 1rem;
        margin-bottom: 0px;
    }
}
/*** End welcome text***/
/******
    -----------------------------------
    Search Wrapper
    ----------------------------------
******/
.wa-search-body {
    padding: 30px 40px;
} 
/*** Start wa-pill***/ 
.wa-search-wrapper {
    margin-top: -80px;
    padding: 0 20px;
    z-index: 99;
    position: relative;
}

.wa-search-card-premium {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 32px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    padding: 10px;
}

/* ট্যাব সিস্টেম: Floating Pill Style */
.wa-search-tabs-container {
    display: flex;
    justify-content: start;
    padding: 15px 30px;
}

.wa-tabs-pill-wrapper {
    display: flex;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 20px;
    position: relative;
    width: fit-content;
    min-width: 280px;
}

.wa-active-bg-pill {
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: calc(50% - 6px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.15); /* হালকা বাউন্স */
    z-index: 1;
}

.shift-tour {
    left: 6px;
}

.shift-visa {
    left: calc(50%);
}

.wa-tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 25px;
    font-weight: 700;
    color: #64748b;
    z-index: 2;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    transition: 0.3s;
}

    .wa-tab-btn.active {
        color: #3a44b1;
    }

/* ইনপুট ফিল্ড ডিজাইন */
.wa-search-body {
    padding: 20px 30px 30px;
}

.wa-input-group {
    flex: 1;
    min-width: 240px;
}

.wa-input-group label {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    display: block;
    margin-left: 5px;
}

.wa-input-with-icon {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    padding: 2px 15px;
    transition: 0.3s ease-in-out;
}

.wa-input-with-icon:focus-within {
    border-color: #3a44b1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(58, 68, 177, 0.08);
}

.wa-input-with-icon i {
    color: #3a44b1;
    font-size: 18px;
}

/* Radzen DropDown কাস্টমাইজেশন */
.wa-custom-select {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
}

/* প্রিমিয়াম সার্চ বাটন */
.wa-search-btn-premium {
    background: linear-gradient(135deg, #3a44b1 0%, #6366f1 100%) !important;
    color: white !important;
    border-radius: 18px !important;
    height: 46px !important;
    padding: 0 40px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    box-shadow: 0 12px 24px -6px rgba(58, 68, 177, 0.4) !important;
    transition: 0.3s !important;
}

.wa-search-btn-premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px -5px rgba(58, 68, 177, 0.5) !important;
}

/* এনিমেশন */
.wa-entrance-animation {
    animation: slideUpFade 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* রেসপন্সিভ মোবাইল ভিউ */
@media (max-width: 768px) {
    .wa-search-body {
        padding: 15px;
    }

    .wa-fields-stack {
        gap: 1rem !important;
    }

    .wa-input-group, .wa-search-btn-wrapper, .wa-search-btn-premium {
        width: 100% !important;
    }

    .wa-tabs-pill-wrapper {
        width: 100%;
    }

    .wa-search-tabs-container {
        justify-content: center;
    } 
} 

/*** End wa-pill***/
/* 3. Input Groups & Labels */
.wa-input-group {
    flex: 1;
    min-width: 220px;
} 
.wa-input-group label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.wa-input-group label i {
    color: #3a44b1;
    margin-right: 5px;
}

/* 4. Radzen Premium Overrides (Alignment Fix) */
.wa-custom-dropdown, .wa-custom-picker {
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 16px !important;
    height: 56px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
}

/* Internal Text & Placeholder Alignment */
.wa-custom-picker .rz-inputtext,
.wa-custom-dropdown .rz-dropdown-label {
    background-color: transparent !important;
    border: none !important;
    color: #1a1a1a !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important; /* Vertically Centers Placeholder/Date */
    padding: 0 15px !important;
    line-height: normal !important;
}

/* Placeholder Color */
.wa-custom-picker .rz-inputtext::placeholder,
.wa-custom-dropdown .rz-placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

/* Icons & Focus */
.wa-custom-dropdown .rz-dropdown-trigger,
.wa-custom-picker .rz-button {
    background-color: transparent !important;
    color: #3a44b1 !important;
}

.wa-custom-picker:focus-within,
.wa-custom-dropdown:focus-within {
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(58, 68, 177, 0.15) !important;
    transform: translateY(-2px);
}

/* 5. Search Button */
.wa-premium-search-btn {
    background: linear-gradient(135deg, #3a44b1 0%, #4f46e5 100%) !important;
    border-radius: 16px !important;
    height: 56px !important;
    padding: 0 35px !important;
    border: none !important;
    box-shadow: 0 10px 20px rgba(58, 68, 177, 0.25) !important;
    transition: all 0.3s !important;
    color: white !important;
}

.wa-premium-search-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 15px 30px rgba(58, 68, 177, 0.35) !important;
}

/* 6. Mobile Responsiveness */
@media (max-width: 767px) { 
    .wa-search-body {
        padding: 20px;
    }
     
    /* Search button wrapper k full width kora */
    .wa-search-btn-wrapper {
        width: 100% !important;
        margin-top: 10px; /* Label gulor sathe ektu distance rakhar jonno */
    }

    /* Button nijeke full width kora */
    .wa-premium-search-btn {
        width: 100% !important;
        display: block !important;
    }

    /* Stack er gap mobile e ektu komiye deya */
    .wa-fields-stack {
        gap: 1rem !important;
    } 
}

/*****
    Global Dropdown Panel target (Radzen runtime e body-r niche thake)
****/
.rz-dropdown-panel {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 20px !important; /* Aro rounded premium look */
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12) !important;
    margin-top: 5px !important;
    padding: 8px !important;
    max-width: 100% !important; /* Width jeno baire na jay */
    box-sizing: border-box !important;
    overflow: hidden !important; /* Color baire jawa bondho korbe */ 
}

/* 2. Filter Search Box (Jodi AllowFiltering thake) */
.rz-dropdown-filter-container {
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    margin: 8px !important;
    border: none !important;
    padding: 5px 12px !important;
}

.rz-dropdown-filter {
    background: transparent !important;
    color: #1a1a1a !important;
    font-size: 14px !important;
}
 
/* 3. Each List Item Style */
.rz-dropdown-items .rz-dropdown-item {
    padding: 12px 30px !important;
    margin: 2px 0 !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

/* 4. Hover effect (The Premium Slide) */
.rz-dropdown-items .rz-dropdown-item:hover:not(.rz-state-highlight) {
    background: rgba(58, 68, 177, 0.06) !important;
    color: #3a44b1 !important;
    padding-left: 24px !important; /* Slide touch */
}

/* 5. Selected State (Active item) */
.rz-dropdown-items .rz-state-highlight {
    background: linear-gradient(135deg, #3a44b1 0%, #4f46e5 100%) !important;
    color: white !important;
    /* Box shadow dewar somoy overflow check kora hoyeche */
    box-shadow: 0 4px 12px rgba(58, 68, 177, 0.2) !important;
    width: 100% !important;
}
/*****
    End Global Dropdown Panel target (Radzen runtime e body-r niche thake)
****/


/* 6. Opening Animation */
@keyframes waFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 7. Custom Scrollbar Fix */
.rz-dropdown-items-wrapper::-webkit-scrollbar {
    width: 6px;
}

.rz-dropdown-items-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/******
    -----------------------------------
    End Search Wrapper
    ----------------------------------
******/


/******
    -----------------------------------
    Start Datepicker View
    ----------------------------------
******/

/* Desktop e Radzen er default style thakbe, tai ekhane kichu likhar dorkar nai */

/* Shudhu Mobile View er jonno custom positioning */
@media (max-width: 767px) {
    .rz-datepicker-popup-container {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 92vw !important;
        z-index: 2000 !important;
        /* Mobile e baire click korle jeno bondho hoy */
        pointer-events: auto;
    }

    /* Screen er pichone halka dark effect deyar jonno (Optional) */
    .rz-datepicker-open::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1999;
    }
}

/******
    -----------------------------------
    End Datepicker View
    ----------------------------------
******/


/******
    -----------------------------------
    Star Promo Add
    ----------------------------------
******/


.wa-promo-section {
    position: relative;
    padding: 30px 10px;
    max-width: 1300px;
    margin: 0 auto;
}

.wa-promo-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

/* Scrollable Container */
.wa-promo-list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 15px 5px;
    scrollbar-width: none; /* Firefox hide */
}

.wa-promo-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari hide */
}

/* Premium Card Design */
.wa-promo-card {
    min-width: 350px; /* Web view: 3 cards pashapashi */
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    height: 140px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.wa-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 5px 5px 11px rgba(58, 68, 177, 0.1);
}

.wa-promo-img {
    width: 40%;
    background: #f8fafc;
}

    .wa-promo-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.wa-promo-content {
    width: 60%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .wa-promo-content h4 {
        font-size: 1.1rem;
        font-weight: 800;
        color: #1e293b;
        margin: 0 0 5px 0;
    }

    .wa-promo-content p {
        font-size: 0.85rem;
        color: #64748b;
        margin: 0;
        line-height: 1.4;
    }

/* Arrow Buttons Customization */
.wa-nav-btn {
    position: absolute;
    width: 45px;
    height: 45px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    color: #4f46e5;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .wa-nav-btn:hover {
        background: #4f46e5;
        color: #ffffff;
        transform: scale(1.1);
    }

    .wa-nav-btn.prev {
        left: -15px;
    }

    .wa-nav-btn.next {
        right: -15px;
    }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .wa-promo-card {
        min-width: calc(50% - 10px);
    }
    /* Tablets e 2 card */
}

@media (max-width: 767px) {
    .wa-promo-card {
        min-width: 300px;
    }
    /* Mobile e 1 card + side view */
    .wa-nav-btn {
        display: none;
    }
    /* Mobile e swipe support dorkar, arrow bad */
    .wa-promo-section {
        padding: 10px;
    }
}


/******
    -----------------------------------
    End Promo Add
    ----------------------------------
******/


/******
    -----------------------------------
    Star Tour Package
    ----------------------------------
******/
.wa-tour-section {
    padding: 60px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.wa-section-header {
    text-align: center;
    margin-bottom: 40px;
    /* Jodi upore kothao display: flex deya thake, 
       tahole niche column direction ti add korun */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wa-section-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0; 
    display: block; /* Ensure korar jonno eta block level */
}

.wa-section-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    margin-top: 10px;
    display: block; /* Ensure korar jonno eta block level */
}

.wa-tour-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.wa-tour-list {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 5px;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

    .wa-tour-list::-webkit-scrollbar {
        display: none;
    }

/* Tour Card Styling */
.wa-tour-card {
    min-width: calc(25% - 19px); /* Web-e 4ti card show korbe */
    background: #fff;
    border-radius: 24px;
    overflow: hidden; 
    border: 1px solid #f1f5f9;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: all 0.3s ease;
}

.wa-tour-card:hover {
    transform: translateY(-12px);
    /* Multi-layered shadow for depth */
    box-shadow: 0 25px 50px -12px rgba(58, 68, 177, 0.15), 0 10px 20px -5px rgba(58, 68, 177, 0.1);
    border-color: rgba(58, 68, 177, 0.1); /* Hover e border ektu highlight hobe */
}

.wa-tour-img {
    height: 250px;
    position: relative;
}

    .wa-tour-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.wa-tour-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #3a44b1;
    color: #fff;
    padding: 8px 15px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(58, 68, 177, 0.3);
}

.wa-tour-content {
    padding: 20px;
}

.wa-tour-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.wa-tour-location {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wa-tour-rating {
    background: #fff9e6;
    color: #ffb800;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.wa-tour-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.3;
}

.wa-tour-info {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 20px;
}

.wa-tour-btn {
    width: 100%;
    padding: 12px;
    background: #f1f5f9;
    border: none;
    border-radius: 12px;
    color: #3a44b1;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

    .wa-tour-btn:hover {
        background: #3a44b1;
        color: #fff;
    }

/* Mobile Adjustments */
@media (max-width: 1024px) {
    .wa-tour-card {
        min-width: calc(50% - 15px);
    }
}

@media (max-width: 767px) {
    .wa-tour-card {
        min-width: 280px;
    }

    .wa-nav-btn {
        display: none;
    }
}
/******
    -----------------------------------
    End Tour Package
    ----------------------------------
******/

/******
    -----------------------------------
    Hot Deal Pacakge
    ----------------------------------
******/
.wa-hot-deals-section {
    padding: 60px 20px;
    background-color: #fff9f9; /* Halka red/warm tint pichone */
    border-radius: 50px;
    margin: 40px 0;
}

/* Hot Card Unique Look */
.wa-hot-card {
    border: 1px solid rgba(255, 71, 87, 0.1) !important;
}

.wa-deal-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff4757;
    color: white;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Price Styling */
.wa-price-wrapper {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wa-old-price {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 14px;
}

.wa-new-price {
    color: #ff4757;
    font-size: 20px;
    font-weight: 800;
}

.wa-hot-btn {
    background: #ff4757 !important;
    color: white !important;
    border: none !important;
}

    .wa-hot-btn:hover {
        background: #e84118 !important;
        box-shadow: 0 10px 20px rgba(232, 65, 24, 0.2) !important;
    }
/******
    -----------------------------------
    End Hot Deal Pacakge
    ----------------------------------
******/

/******
    -----------------------------------
    Destination
    ----------------------------------
******/

.wa-dest-section {
    padding: 60px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

.wa-dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 20px;
}

/* বড় কার্ডের ডিজাইন (অসম গ্রিড লুক) */
.wa-dest-card.boro-card {
    grid-column: span 1;
    grid-row: span 2;
}

.wa-dest-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

    .wa-dest-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s ease;
    }

    /* Hover Effect */
    .wa-dest-card:hover img {
        transform: scale(1.1);
    }

.wa-dest-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 25px;
    transition: background 0.3s ease;
}

.wa-dest-card:hover .wa-dest-overlay {
    background: linear-gradient(to top, rgba(58, 68, 177, 0.8) 0%, transparent 80%);
}

.wa-dest-info h3 {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
}

.wa-dest-info p {
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
    margin: 5px 0 0 0;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .wa-dest-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .wa-dest-grid {
        grid-template-columns: 1fr; /* মোবাইলে এক সারিতে একটা */
        grid-auto-rows: 200px;
    }

    .wa-dest-card.boro-card {
        grid-row: span 1;
    }
}

/******
    -----------------------------------
    End Destination
    ----------------------------------
******/

/******
    -----------------------------------
    Footer
    ----------------------------------
******/
.wa-premium-footer {
    background: #05070a; /* Extreme Dark */
    position: relative;
    padding: 100px 0 40px;
    color: #fff;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

/* Luxury Orbs for Depth */
.footer-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.15;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: #3a44b1;
    top: -100px;
    left: -100px;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: #4f46e5;
    bottom: -50px;
    right: -50px;
}

.wa-footer-main {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1.3fr;
    gap: 60px;
    position: relative;
    z-index: 1;
}

/* Brand Section */
.brand-tagline {
    color: #94a3b8;
    font-size: 15px;
    line-height: 1.8;
    margin: 25px 0;
    max-width: 320px;
}

.social-wrapper {
    display: flex;
    gap: 12px;
}

.social-btn {
    width: 45px;
    height: 45px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .social-btn:hover {
        background: #3a44b1;
        transform: rotate(15deg) scale(1.1);
        box-shadow: 0 10px 20px rgba(58, 68, 177, 0.3);
    }

/* Links Grid */
.footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.link-group h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.link-group a {
    display: block;
    color: #64748b;
    text-decoration: none;
    margin-bottom: 15px;
    font-size: 15px;
    transition: 0.3s;
}

    .link-group a:hover {
        color: #fff;
        transform: translateX(8px);
    }

/* Luxury Newsletter */
.footer-newsletter h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-newsletter p {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 25px;
}

.luxury-input-group {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 8px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    transition: 0.3s;
}

    .luxury-input-group:focus-within {
        border-color: #3a44b1;
        background: rgba(255,255,255,0.06);
    }

    .luxury-input-group input {
        background: transparent;
        border: none;
        padding: 0 20px;
        color: #fff;
        width: 100%;
        outline: none;
        font-size: 14px;
    }

.subscribe-btn {
    background: #3a44b1;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.3s;
}

    .subscribe-btn:hover {
        background: #4f46e5;
        box-shadow: 0 5px 15px rgba(58, 68, 177, 0.4);
    }

/* Bottom Bar */
.wa-footer-bottom-bar {
    margin-top: 80px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright-text {
    color: #475569;
    font-size: 13px;
}

.footer-badges {
    display: flex;
    gap: 30px;
}

.badge-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 13px;
}

    .badge-item i {
        color: #3a44b1;
        font-size: 18px;
    }

/* Responsive */
@media (max-width: 1024px) {
    .wa-footer-main {
        grid-template-columns: 1fr 1fr;
    }

    .footer-newsletter {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .wa-footer-main {
        grid-template-columns: 1fr;
    }

    .footer-newsletter, .footer-links-grid {
        grid-column: span 1;
    }

    .wa-footer-bottom-bar {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}
/* Icon alignment fix */
.social-btn i {
    font-size: 1.2rem;
    line-height: 1;
}

.badge-item i {
    color: #3a44b1;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

.subscribe-btn i {
    display: flex;
    align-items: center;
}

/* Mobile view-te puro footer hide korar jonno */
@media (max-width: 767px) {
    /* Shudhu mobile view-te space hobe */
    .wa-bottom-spacer {
        height: 53px !important; /* Apnar bottom menu-r height onujayi barate ba komate paren */
        width: 100%;
        display: block;
        background: transparent; /* Eti ekdom invisible thakbe */
    }

    .wa-premium-footer {
        display: none !important;
    }
}
 
/* Desktop-e space dorkar nai */
@media (min-width: 768px) {
    .wa-bottom-spacer {
        display: none;
    }
}
/******
    -----------------------------------
    End Footer
    ----------------------------------
******/


/******
    -----------------------------------
    Tour Page
    ----------------------------------
******/
.wa-tour-page {
    background: #f8fafc;
    min-height: 100vh;
}

.wa-tour-page-section {
    padding: 0px 20px 60px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Header with Overlay */
.wa-tour-header-bg {
    height: 480px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.wa-top-hero-content {
    display: flex;
    flex-direction: column; /* এটি আইটেমগুলোকে নিচে নিচে রাখবে */
    align-items: center; /* সেন্টার অ্যালাইন করবে */
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

.wa-top-hero-content h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px; /* নিচের প্যারাগ্রাফ থেকে গ্যাপ */
    line-height: 1.2;
}

.wa-top-hero-content p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 650px;
    margin: 0;
}

/* Filter Container */
/* Container Fix */
.wa-filter-wrapper {
    max-width: 900px;
    margin: -45px auto 60px;
    padding: 0 20px;
    position: relative;
    z-index: 100;
}

.wa-main-filter-card {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.12);
    padding: 12px;
    overflow: hidden;
}

/* Desktop View */
.wa-filter-top-row {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;

}

.wa-input-group {
    flex: 1; 
}

    .wa-input-group label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        color: #64748b;
        margin-bottom: 4px;
    }

/* Action Buttons */
.wa-action-group {
    display: flex;
    gap: 10px;
    flex-shrink: 0;  
}

/* Advance Toggle Button Style */
.wa-advance-toggle {
    background: #f1f5f9;
    border: none;
    width: 55px; /* Square shape for icon only button */
    height: 55px;
    border-radius: 16px;
    color: #3a44b1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1.2rem;
}

    .wa-advance-toggle.active {
        background: #3a44b1;
        color: #fff;
    }

/* Search Button Style */
.wa-search-main-btn {
    background: #3a44b1;
    border: none;
    width: 55px; /* Same size as toggle button */
    height: 55px;
    border-radius: 16px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 8px 20px rgba(58, 68, 177, 0.2);
}

.wa-search-main-btn:hover {
    background: #2d3691;
}
 

 
/* Expandable Panel Logic */
.wa-advance-panel {
    max-height: 0;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8fafc;
    border-radius: 18px;
    margin-top: 0;
}

    .wa-advance-panel.show {
        max-height: 300px; /* Adjust based on content */
        opacity: 1;
        margin-top: 15px;
        padding: 15px;
    }

.wa-advance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Radzen Dropdown Override */
::deep .wa-custom-dropdown.rz-dropdown {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    padding: 0 !important;
}

::deep .rz-dropdown-label {
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
     
    .wa-advance-grid {
        grid-template-columns: 1fr;
    }

    .wa-advance-panel.show {
        max-height: 600px;
    }

    .wa-top-hero-content h1 {
        font-size: 2.5rem;
    }

    .wa-filter-top-row {
        flex-direction: column; /* Mobile-e niche niche chole ashbe */
        align-items: stretch;
        gap: 15px;
    }

    .wa-action-group {
        display: flex;
        flex-direction: row !important; /* Button duto pasapasi thakbe */
        justify-content: flex-end; /* Button duto daan dike thakbe */
        gap: 12px;
        margin-top: 0rem;
    }

    .wa-input-group {
        width: 100%;
        border-bottom: 1px solid #f1f5f9; /* Visual separation */
        padding-bottom: 10px;
    }

    .wa-advance-toggle, .wa-search-main-btn {
        flex: 1; /* Mobile-e button duto shoman size nibe, sundor lagbe */
        height: 50px;
    }
}

/* Tour Grid */
.wa-tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

.wa-tour-card-premium {
    background: white;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: 0.4s;
}

    .wa-tour-card-premium:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 50px rgba(58, 68, 177, 0.12);
    }

.wa-card-image {
    position: relative;
    height: 240px;
    background-color: #f8fafccc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .wa-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.wa-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #ff4757;
    color: white;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 800;
}

.wa-wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4757;
    cursor: pointer;
}

.wa-card-body {
    padding: 25px;
}

.wa-card-meta {
    display: flex;
    justify-content: space-between;
    color: #64748b;
    font-size: 13px;
    margin-bottom: 12px;
}

.wa-card-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
    line-height: 1.4;
}

.wa-card-loc {
    font-size: 13px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wa-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.current-price {
    color: #3a44b1;
    font-size: 1.3rem;
    font-weight: 800;
}

.old-price {
    color: #94a3b8;
    text-decoration: line-through;
    font-size: 13px;
    margin-right: 5px;
}

.wa-book-btn-mini {
    background: #f1f5f9;
    color: #3a44b1;
    border: none;
    padding: 10px 22px;
    border-radius: 14px;
    font-weight: 700;
    transition: 0.3s;
}

.wa-book-btn-mini:hover {
    background: #3a44b1;
    color: white;
}
 
@media (max-width: 992px) {
    .wa-tour-header-bg {
        height: 350px;
        border-radius: 0 0 40px 40px;
    } 
}
/******
    -----------------------------------
    End Tour Page
    ----------------------------------
******/

/******
    -----------------------------------
    Single Tour Page
    ----------------------------------
******/
/* --- Existing Page Base --- */
.tpd-wa-page {
    background: #f8fafc;
    padding-bottom: 100px;
    overflow-x: hidden;
}

/* --- Container Fix for Mobile Alignment --- */
.all-dest-wa-container {
    width: 100%;
    max-width: 1240px; /* আপনার গ্রিডের উইডথ অনুযায়ী */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* --- Hero & Gallery Section --- */
.tpd-wa-hero {
    height: 700px;
    position: relative;
    overflow: hidden;
}

.tpd-wa-hero-img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
    transition: background-image 0.6s ease-in-out;
    will-change: background-image, opacity;
} 

.tpd-wa-main-title {
    color: white;
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 15px 0;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.tpd-wa-hero-meta {
    display: flex;
    gap: 20px;
    color: rgba(255,255,255,0.9);
    font-weight: 600;
}

    .tpd-wa-hero-meta i {
        color: #3a44b1;
        background: white;
        padding: 3px;
        border-radius: 50%;
        font-size: 12px;
    }

/* New: Gallery Thumbnails Row */
.tpd-wa-gallery-wrapper {
    margin-top: 40px;
    padding-bottom: 20px;
}

.tpd-wa-gallery-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 5px;
    scrollbar-width: none;
}

    .tpd-wa-gallery-scroll::-webkit-scrollbar {
        display: none;
    }

.tpd-wa-thumb {
    width: 110px;
    height: 75px;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    border: 3px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .tpd-wa-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tpd-wa-thumb:hover {
        transform: translateY(-8px);
        border-color: #ffffff;
        box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    }

    .tpd-wa-thumb.active {
        border-color: #3a44b1;
        transform: scale(1.05);
        box-shadow: 0 0 25px rgba(58, 68, 177, 0.5);
    }

.tpd-wa-view-all {
    position: relative;
}

.tpd-wa-overlay-count {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 800;
    backdrop-filter: blur(3px);
}

/* --- Badges --- */
.tpd-wa-badges {
    display: flex;
    gap: 10px;
}

.tpd-wa-badge-feat {
    background: #ff385c;
    color: white;
    padding: 6px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
}

.tpd-wa-badge-cat {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    color: white;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
}

/* --- Main Grid Layout --- */
.tpd-wa-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    margin-top: -60px;
    position: relative;
    z-index: 10;
}

/* --- Left Column Elements --- */
.tpd-wa-section-card {
    background: white;
    border-radius: 30px;
    padding: 40px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
}

.tpd-wa-info-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    background: white;
    padding: 25px;
    border-radius: 25px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.tpd-wa-info-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .tpd-wa-info-item i {
        font-size: 1.5rem;
        color: #3a44b1;
        background: #f0f2ff;
        padding: 10px;
        border-radius: 12px;
    }

    .tpd-wa-info-item small {
        display: block;
        color: #888;
        font-weight: 600;
    }

    .tpd-wa-info-item strong {
        color: #1e293b;
        font-size: 14px;
    }

.tpd-wa-st {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
}

.tpd-wa-highlights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.tpd-wa-h-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #475569;
}

.tpd-wa-h-item i {
    color: #10b981;
}

/* --- Timeline --- */
.tpd-wa-time-item {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
    position: relative;
}

.tpd-wa-time-day {
    width: 55px;
    height: 55px;
    background: #3a44b1;
    color: white;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
}

.tpd-wa-time-body h5 {
    font-weight: 800;
    margin-bottom: 8px;
    color: #1e293b;
}

.tpd-wa-time-meta {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
}

/* --- Dual List --- */
.tpd-wa-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.tpd-wa-list-box {
    padding: 30px;
    border-radius: 25px;
}

    .tpd-wa-list-box.inc {
        background: #f0fff4;
        color: #166534;
    }

    .tpd-wa-list-box.exc {
        background: #fff5f5;
        color: #991b1b;
    }

/* Sidebar Premium Style */
.tpd-wa-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.tpd-wa-booking-card {
    background: #ffffff;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06) !important;
}

/* Premium Price Card Update */
.premium-price-card {
    border: 1.5px solid #f1f5f9;
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden; /* এনিমেশনের জন্য জরুরি */
}

.discount-badge-mini {
    background: #fff1f2;
    color: #e11d48;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #ffe4e6;
}

.old-price-mini {
    font-size: 11px;
    color: #94a3b8;
    text-decoration: line-through;
    display: block;
    margin-bottom: -2px;
}

.premium-price-card.active {
    border-color: #3a44b1;
    background: #fcfdff;
    box-shadow: 0 10px 25px rgba(58, 68, 177, 0.08);
}

/* Highlights Container Animation */
.highlights-container {
    max-height: 0;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    visibility: hidden;
}

    .highlights-container.show {
        max-height: 100px; /* কন্টেন্ট অনুযায়ী বাড়বে */
        opacity: 1;
        visibility: visible;
    }

.selected-indicator {
    width: 4px;
    height: 20px;
    background: #3a44b1;
    border-radius: 10px;
}

.plan-name {
    font-weight: 700;
    color: #1e293b;
    font-size: 1rem;
}

.highlight-text {
    font-size: 0.75rem;
    color: #64748b;
}

.price-currency {
    font-size: 0.85rem;
    font-weight: 600;
    color: #3a44b1;
    margin-right: 2px;
}

.price-amount {
    font-size: 1.15rem;
    font-weight: 900;
    color: #3a44b1;
}

/* Form Elements */
.custom-input-group .form-control {
    padding: 12px;
    border-radius: 12px;
    border-color: #e2e8f0;
    background-color: #f8fafc;
}

.input-group-text {
    border-radius: 12px 0 0 12px !important;
    border-color: #e2e8f0;
    color: #94a3b8;
}

/* Total Box Styling */
.total-summary-card {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

.divider {
    height: 1px;
    background: #e2e8f0;
    width: 100%;
}

.fw-black {
    font-weight: 900;
}

.tracking-wider {
    letter-spacing: 1px;
}

/* Booking Button */
.premium-booking-btn {
    background: linear-gradient(135deg, #3a44b1, #4f46e5);
    border: none;
    border-radius: 16px;
    transition: all 0.3s;
}

    .premium-booking-btn:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(58, 68, 177, 0.3) !important;
    }

    .premium-booking-btn:disabled {
        background: #cbd5e1;
        opacity: 0.8;
    }


/* --- Buttons & Inputs --- */
.tpd-wa-btn-primary {
    width: 100%;
    background: #3a44b1;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 18px;
    font-weight: 800;
    font-size: 1rem;
    margin-top: 15px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(58, 68, 177, 0.2);
}

    .tpd-wa-btn-primary:hover {
        transform: translateY(-3px);
        background: #2d3691;
    }

.tpd-wa-btn-outline {
    width: 100%;
    background: transparent;
    color: #3a44b1;
    border: 2px solid #3a44b1;
    padding: 15px;
    border-radius: 18px;
    font-weight: 800;
    margin-top: 10px;
    cursor: pointer;
}

.tpd-wa-trust-footer {
    margin-top: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: #10b981;
}

.all-dest-wa-container, .mtop {
    margin-top: -50px;
}

/* --- Responsive Layout (Updated with all-dest-wa-container) --- */
@media (max-width: 1100px) {
    .all-dest-wa-container {
        padding: 0 20px !important;
    }

    .tpd-wa-grid {
        grid-template-columns: 1fr !important;
        margin-top: -40px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .tpd-wa-sidebar {
        position: static;
        width: 100%;
    }

    .tpd-wa-info-bar {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .tpd-wa-hero {
        height: 600px;
    }

    .tpd-wa-main-title {
        font-size: 1.5rem;
    }

    .tpd-wa-section-card,
    .tpd-wa-info-bar,
    .tpd-wa-booking-card {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 25px !important;
        box-sizing: border-box;
    }

    .tpd-wa-highlights-grid,
    .tpd-wa-split {
        grid-template-columns: 1fr; /* ছোট স্ক্রিনে হাইলাইটস এবং ইনক্লুশন লিস্ট নিচে নিচে আসবে */
    }
}
/******
    -----------------------------------
    End Single Tour Page
    ----------------------------------
******/


/******
    -----------------------------------
    Load More Container
    ----------------------------------
******/
/* Load More Container */
.wa-load-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
    width: 100%;
}

/* Base Button Style */
.wa-load-more-btn {
    background: #ffffff;
    border: 2px solid #3a44b1;
    color: #3a44b1;
    padding: 12px 35px;
    border-radius: 50px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(58, 68, 177, 0.1);
}

    /* Hover State */
    .wa-load-more-btn:hover:not(:disabled) {
        background: #3a44b1;
        color: #ffffff;
        box-shadow: 0 8px 25px rgba(58, 68, 177, 0.25);
        transform: translateY(-2px);
    }

    /* Loading/Disabled State */
    .wa-load-more-btn:disabled {
        cursor: not-allowed;
        opacity: 0.8;
        background: #f8fafc;
        border-color: #cbd5e1;
        color: #94a3b8;
    }

/* Loader Spinner (Only shows when isMoreItem is true) */
.wa-loader-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(58, 68, 177, 0.2);
    border-top: 3px solid currentColor; /* Automatically matches text color */
    border-radius: 50%;
    animation: wa-spin 0.8s linear infinite;
    display: inline-block;
}

/* Single Spinner Animation */
@keyframes wa-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Typography and Icons */
.wa-load-text {
    font-size: 15px;
    letter-spacing: 0.5px;
}

.wa-load-more-btn i {
    font-size: 1.2rem;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .wa-load-more-btn {
        width: 80%;
        justify-content: center;
    }
}
/******
    -----------------------------------
    End Load More Container
    ----------------------------------
******/

/******
    -----------------------------------
    Back To Top
    ----------------------------------
******/
.wa-back-to-top {
    position: fixed;
    bottom: 90px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: #3a44b1;
    color: white;
    border-radius: 50%; /* গোল বাটন প্রিমিয়াম লাগে */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 10px 20px rgba(58, 68, 177, 0.3);
    /* শুরুতে ইনভিজিবল থাকবে */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

/* JS যখন এই ক্লাসটি অ্যাড করবে তখন বাটন দেখা যাবে */
.wa-back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wa-back-to-top:hover {
    background: #2d3691;
    transform: scale(1.1);
}

/* মোবাইল রেসপন্সিভ - ফুটারে যেন লেগে না যায় */
@media (max-width: 767px) {
    .wa-back-to-top {
       display:none !important;
    }
}
/******
    -----------------------------------
    End Back To Top
    ----------------------------------
******/

/******
    -----------------------------------
    Destination Page
    ----------------------------------
******/
/* Page Wrapper */
.wa-all-dest-page {
    background: #fcfcfc;
    min-height: 100vh;
}

.wa-dest-page-section {
    padding: 0px 20px 60px 20px;
    max-width: 1300px;
    margin: 0 auto;
}

/* Grid Layout */
.wa-all-dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

/* Destination Card */
.wa-all-dest-card {
    height: 400px;
    border-radius: 35px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.wa-all-dest-img-box {
    width: 100%;
    height: 100%;
    position: relative;
}

    .wa-all-dest-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1s cubic-bezier(0.2, 1, 0.3, 1);
    }

.wa-all-dest-card:hover .wa-all-dest-img-box img {
    transform: scale(1.1);
}

/* Overlay & Content */
.wa-all-dest-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 35px;
}

.wa-all-dest-badge {
    position: absolute;
    top: 25px;
    right: 25px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid rgba(255,255,255,0.3);
}

.wa-all-dest-info h3 {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 5px;
    transform: translateY(10px);
    transition: 0.4s;
}

.wa-all-dest-info p {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    margin-bottom: 25px;
    transform: translateY(10px);
    transition: 0.5s;
}

/* Premium Explore Button */
.wa-all-dest-btn {
    background: white;
    color: #3a44b1;
    border: none;
    padding: 14px 30px;
    border-radius: 18px;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.4s ease;
}

/* Hover Effects */
.wa-all-dest-card:hover .wa-all-dest-info h3,
.wa-all-dest-card:hover .wa-all-dest-info p {
    transform: translateY(0);
}

.wa-all-dest-card:hover .wa-all-dest-btn {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .wa-all-dest-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .wa-all-dest-card {
        height: 320px;
        border-radius: 25px;
    }

    .wa-all-dest-btn {
        opacity: 1;
        transform: translateY(0);
        padding: 10px 20px;
    }

    .wa-all-dest-info h3 {
        font-size: 1.6rem;
        transform: translateY(0);
    }

    .wa-all-dest-info p {
        font-size: 1rem;
        transform: translateY(0);
    }
}
/******
    -----------------------------------
    End Destination Page
    ----------------------------------
******/

/******
    -----------------------------------
    Single Destination Page
    ----------------------------------
******/
/* --- Single Destination Page Wrapper --- */
.sdtp-wa-page {
    background: #f8fafc;
    padding-bottom: 100px;
    overflow-x: hidden;
}

/* --- Hero Section --- */
.sdtp-hero {
    height: 480px;
    position: relative;
    overflow: hidden;
}

.sdtp-hero-img {
    height: 480px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.sdtp-hero-content {
    max-width: 800px;
    text-align: left;
}

.sdtp-tour-count {
    background: rgba(58, 68, 177, 0.2);
    backdrop-filter: blur(10px);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,0.3);
    display: inline-block;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.sdtp-main-title {
    color: white;
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 15px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.sdtp-hero-meta {
    display: flex;
    gap: 20px;
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
}

 

/* --- Grid Header --- */
.sdtp-grid-header {
    margin: 60px 0 30px;
}

.sdtp-grid-header h2 {
    font-size: 2.2rem;
    font-weight: 900;
    color: #1e293b;
}

/* --- Package Grid --- */
.sdtp-tour-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
}

/* --- Premium Card Styling --- */
.sdtp-card-premium {
    background: white;
    border-radius: 35px;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #f1f5f9;
}

    .sdtp-card-premium:hover {
        transform: translateY(-12px);
        box-shadow: 0 30px 60px rgba(58, 68, 177, 0.1);
    }

.sdtp-card-image {
    height: 250px;
    position: relative;
}

    .sdtp-card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Badges */
.sdtp-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 18px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 11px;
    color: white;
    text-transform: uppercase;
}

.sdtp-badge-hot {
    background: linear-gradient(45deg, #ff385c, #ff8a00);
}

.sdtp-badge-offer {
    background: linear-gradient(45deg, #10b981, #34d399);
}

.sdtp-badge-regular {
    background: #64748b;
}

.sdtp-wishlist {
    position: absolute;
    top: 20px;
    right: 20px;
    background: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Card Body */
.sdtp-card-body {
    padding: 30px;
}

.sdtp-card-meta {
    display: flex;
    gap: 15px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 12px;
}

.sdtp-tag-fire {
    color: #ff385c;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sdtp-card-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
}

.sdtp-card-loc {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 25px;
}

/* Card Footer & Price */
.sdtp-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 20px;
}

.sdtp-price .old-price {
    display: block;
    font-size: 13px;
    color: #94a3b8;
    text-decoration: line-through;
}

.sdtp-price .current-price {
    font-size: 1.6rem;
    font-weight: 900;
    color: #3a44b1;
}

.sdtp-btn-mini {
    background: #f0f2ff;
    color: #3a44b1;
    border: none;
    padding: 12px 25px;
    border-radius: 15px;
    font-weight: 800;
    transition: 0.3s;
}

    .sdtp-btn-mini:hover {
        background: #3a44b1;
        color: white;
    }

/* --- Hot Deal Card Unique Border --- */
.sdtp-hot-deal-card {
    border: 1px solid #f8fafc
}

/* --- Loader & Load More --- */
.sdtp-load-more-container {
    text-align: center;
    margin-top: 60px;
}

.sdtp-load-more-btn {
    background: white;
    border: 2px solid #3a44b1;
    color: #3a44b1;
    padding: 15px 40px;
    border-radius: 20px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.sdtp-loader-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid rgba(58, 68, 177, 0.2);
    border-top-color: #3a44b1;
    border-radius: 50%;
    animation: sdtp-spin 0.8s linear infinite;
}

@keyframes sdtp-spin {
    to {
        transform: rotate(360deg);
    }
}
 
/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    .sdtp-main-title {
        font-size: 2.2rem;
    }

    .sdtp-hero {
        height: 350px;
    }

    .sdtp-hero-img {
        height: 350px;
        border-radius: 0 0 40px 40px;
    }

    .sdtp-tour-grid {
        grid-template-columns: 1fr;
    } 
}
/******
    -----------------------------------
    End Single Destination Page
    ----------------------------------
******/


/******
    -----------------------------------
    Start User Profile Page
    ----------------------------------
******/
/* Custom Variable Colors */
:root {
    --accent-color: #3a44b1;
    --accent-soft: rgba(58, 68, 177, 0.08);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --text-main: #2d3436;
    --text-muted: #636e72;
}

/* Tour Specific */
.bg-gradient-tour { background: linear-gradient(135deg, #11998e, #38ef7d); } /* Greenish */
.bg-tour-soft { background: rgba(17, 153, 142, 0.1); color: #11998e !important; }

/* Air Specific */
.bg-gradient-air { background: linear-gradient(135deg, #3a44b1, #6b73ff); } /* Blueish */
.bg-air-soft { background: rgba(58, 68, 177, 0.1); color: #3a44b1 !important; }

/* Hotel Specific */
.bg-gradient-hotel { background: linear-gradient(135deg, #f2994a, #f2c94c); } /* Golden/Orange */
.bg-hotel-soft { background: rgba(242, 153, 74, 0.1); color: #e67e22 !important; }

/* Text Muted Small */
.b-details p {
    margin-bottom: 2px !important;
}

/* Base Wrapper */
.profile-premium-wrapper {
    background: #f0f3f7;
    background-image: radial-gradient(circle at 20% 20%, #e0e7ff 0%, transparent 40%), radial-gradient(circle at 80% 80%, #fef3c7 0%, transparent 40%);
    min-height: 100vh;
    padding-bottom: 3rem;
}

/* Content Layout */
.content-container {
    padding-top: 2rem;
    max-width: 1280px;
    margin: 0 auto;
}

/* Minimal Top Nav */
.minimal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    background: transparent;
}

.premium-logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--accent-color);
}

    .premium-logo span {
        color: #6b73ff;
    }

/* Glass Card Enhanced */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
}

.sticky-sidebar {
    position: sticky;
    top: 20px;
    z-index: 10;
}

/* Profile Elements */
.premium-gradient-header {
    height: 140px;
    background: linear-gradient(135deg, #3a44b1 0%, #6b73ff 100%);
    border-radius: 30px 30px 0 0;
}

.avatar-wrapper {
    text-align: center;
    margin-top: -70px;
    padding: 0 15px;
}

.avatar-ring {
    position: relative;
    display: inline-block;
    padding: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.profile-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
}

.status-indicator {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    background: #00ca71;
    border: 3px solid white;
    border-radius: 50%;
}

.user-name {
    font-weight: 800;
    color: var(--text-main);
    margin-top: 15px;
}

.user-membership {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 600;
    background: var(--accent-soft);
    padding: 5px 15px;
    border-radius: 20px;
    display: inline-block;
}

/* Sidebar Menu */
.action-menu {
    padding: 15px 20px 25px 20px;
}

.menu-btn {
    width: 100%;
    padding: 12px 18px;
    margin-bottom: 8px;
    border: none;
    background: transparent;
    text-align: left;
    border-radius: 15px;
    font-weight: 600;
    color: var(--text-muted);
    transition: 0.3s;
}

    .menu-btn i {
        margin-right: 12px;
    }

    .menu-btn:hover {
        background: var(--accent-soft);
        color: var(--accent-color);
    }

    .menu-btn.active {
        background: var(--accent-color);
        color: white;
    }

    .menu-btn.logout:hover {
        background: #fee2e2;
        color: #dc2626;
    }

/* --- Tab & Content Styling --- */
.main-content-area {
    padding: 2.5rem;
}

/* RadzenTabs Responsive Fix */
::deep .rz-tabview-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #eee !important;
    margin-bottom: 1.5rem !important;
}

    ::deep .rz-tabview-nav li {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

/* Info Tiles */
.info-tile {
    background: white;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    height: 100%;
}

    .info-tile label {
        font-size: 0.7rem;
        color: var(--text-muted);
        text-transform: uppercase;
        display: block;
        margin-bottom: 5px;
    }

    .info-tile span {
        font-weight: 600;
        color: var(--text-main);
        word-break: break-all;
    }

/* Booking Card Premium Responsive */
.booking-card-premium {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 20px;
    border-radius: 22px;
    border: 1px solid #f0f0f0;
    gap: 20px;
}

.img-placeholder {
    width: 65px;
    height: 65px;
    border-radius: 18px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.bg-gradient-blue {
    background: linear-gradient(135deg, #6b73ff, #3a44b1);
}

.b-details {
    flex-grow: 1;
}

    .b-details h6 {
        margin: 0 0 5px 0;
        font-weight: 700;
    }

    .b-details p {
        margin: 0;
        font-size: 0.85rem;
        color: var(--text-muted);
    }

/* --- Media Queries --- */

@media (max-width: 991px) {
    .content-container {
        padding: 1rem 15px;
    }

    .sticky-sidebar {
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }

    .main-content-area {
        padding: 1.5rem;
    }
} 

@media (max-width: 768px) { 
    /* User logic requested change */
    .minimal-nav {
        display: none;
    }

    .section-title {
        font-size: 1.5rem;
        text-align: center;
    }
     
    /* Booking Card Stack on Mobile */
    .booking-card-premium {
        flex-direction: column;
        text-align: center;
    }

    .booking-page-wrapper {
        padding-top: 30px !important;
    }

    .b-action {
        margin-left: 0;
        width: 100%;
    }

        .b-action button {
            width: 100%;
        }

    .img-placeholder {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .premium-gradient-header {
        height: 100px;
    }

    .profile-img {
        width: 110px;
        height: 110px;
    }

    .avatar-wrapper {
        margin-top: -55px;
    } 
}

/* Hotel & Tour Specific Gradients */
.bg-gradient-orange {
    background: linear-gradient(135deg, #ff9966, #ff5e62);
}

.bg-primary-soft {
    background: rgba(58, 68, 177, 0.1);
    font-size: 0.7rem;
}

.bg-warning-soft {
    background: rgba(255, 193, 7, 0.1);
    font-size: 0.7rem;
}

/* Wishlist Item Design */
.wishlist-item {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: 0.3s;
}

    .wishlist-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    }

    .wishlist-item img {
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

/* Password Form Width */
.max-w-500 {
    max-width: 500px;
    margin: 0 auto;
}

/* Input Styling Fix for Radzen */
::deep .rz-textbox, ::deep .rz-password {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    padding: 10px 15px !important;
}

/* Section Title Animation */
.section-title {
    animation: fadeInRight 0.5s ease-out;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-15px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/******
    -----------------------------------
    End User Profile Page
    ----------------------------------
******/

/******
    -----------------------------------
    Start Booking Page
    ----------------------------------
******/
.booking-page-wrapper {
    background: #f4f7fa;
    min-height: 100vh;
    padding-top: 50px;
}

.fw-800 {
    font-weight: 800;
}

.booking-glass-card {
    background: white;
    border-radius: 25px;
    border: 1px solid rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Step Number Indicator */
.step-num {
    width: 35px;
    height: 35px;
    background: var(--accent-color, #3a44b1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(58, 68, 177, 0.3);
}

/* Order Summary Image */
.summary-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* Custom Radzen SelectBar */
::deep .custom-payment-bar .rz-selectbutton-item {
    background: #f8f9fa !important;
    border: none !important;
    padding: 10px !important;
    font-weight: 600 !important;
}

::deep .custom-payment-bar .rz-state-active {
    background: #3a44b1 !important;
    color: white !important;
}

/* Form Label styling */
.form-label {
    color: #4a5568;
    margin-bottom: 8px;
}

/* Input Fields Adjust */
::deep .rz-textbox, ::deep .rz-numeric, ::deep .rz-password {
    background: #fdfdfd !important;
    border: 1px solid #e2e8f0 !important;
    padding: 12px !important;
}

/* Responsive adjust */
@media (max-width: 991px) {
    .sticky-top {
        position: relative !important;
        top: 0 !important;
        margin-top: 2rem;
    }
}


/*** payment Method ***/
/* Payment Method Item Common Style */
.payment-method-item {
    padding: 15px;
    border: 2px solid #eee;
    border-radius: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: 0.3s all ease;
    background: white;
}

    /* SSLCommerz Selected State (Blueish/Original) */
    .payment-method-item.selected:has(img[alt="SSLCommerz"]) {
        border-color: #0056b3;
        background: rgba(0, 86, 179, 0.05);
    }

    /* bKash Selected State (Pinkish) */
    .payment-method-item.selected:has(img[alt="bKash"]) {
        border-color: #e2136e;
        background: rgba(226, 19, 110, 0.05);
    }

    .payment-method-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    }

/*** end payment Method ***/
/******
    -----------------------------------
    End Booking Page
    ----------------------------------
******/

/******
    -----------------------------------
    Start Booking Confirmed Page
    ----------------------------------
******/
/* Background & Floating Orbs */
/* মেইন র‍্যাপার - প্রিমিয়াম গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড */
.premium-confirm-wrapper {
    min-height: 100vh;
    background: radial-gradient(at 0% 0%, rgba(58, 68, 177, 0.12) 0px, transparent 50%), radial-gradient(at 100% 100%, rgba(255, 153, 102, 0.12) 0px, transparent 50%), #f8fafc;
    padding-top: 100px;
    padding-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* ব্যাকগ্রাউন্ডের ভাসমান গোলক (Animated Orbs) */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    opacity: 0.6;
    animation: orbFloat 15s infinite alternate ease-in-out;
}

.orb-1 {
    width: 450px;
    height: 450px;
    background: rgba(58, 68, 177, 0.15);
    top: -100px;
    right: -100px;
}

.orb-2 {
    width: 350px;
    height: 350px;
    background: rgba(255, 153, 102, 0.15);
    bottom: -80px;
    left: -80px;
    animation-delay: -5s;
}

@keyframes orbFloat {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(40px, 60px) scale(1.1);
    }
}

/* Glass Receipt Card - উচ্চমানের গ্লাস ইফেক্ট */
.glass-receipt-card {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 40px;
    padding: 35px;
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 10;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.06);
}

/* Success Icon Animation */
.check-container {
    position: relative;
    width: 75px;
    height: 75px;
    margin: 0 auto;
}

.check-bg {
    position: absolute;
    inset: 0;
    background: #3a44b1;
    border-radius: 22px;
    transform: rotate(15deg);
    box-shadow: 0 10px 20px rgba(58, 68, 177, 0.3);
}

.check-container i {
    position: relative;
    font-size: 42px;
    color: white;
    line-height: 75px;
}

/* Ticket/Receipt Body */
.receipt-body {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    padding: 25px;
    border: 1px dashed #cbd5e1;
    margin-top: 25px;
}

.label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.ref-id {
    font-weight: 800;
    color: #1e293b;
    font-size: 1.25rem;
}

.booking-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.val {
    font-weight: 600;
    color: #334155;
    font-size: 0.95rem;
}

.status-pill {
    background: rgba(5, 150, 105, 0.1);
    color: #059669;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
}

.qr-placeholder {
    font-size: 48px;
    color: #1e293b;
    opacity: 0.9;
}

/* Premium Buttons */
.premium-btn {
    border-radius: 18px !important;
    height: 55px !important;
    background: #3a44b1 !important;
    font-weight: bold !important;
    box-shadow: 0 10px 25px rgba(58, 68, 177, 0.25) !important;
    border: none !important;
}

@media (max-width: 768px) {
    .premium-confirm-wrapper {
        padding-top: 80px;
    }

    .glass-receipt-card {
        margin: 15px;
        padding: 25px;
    }
}
/******
    -----------------------------------
    End Booking Confirmed Page
    ----------------------------------
******/

/******
    -----------------------------------
    Start About Page
    ----------------------------------
******/
.about-wrapper {
    background: #f8fafc;
    overflow: hidden;
    padding-top: 80px;
}

.fw-800 {
    font-weight: 800;
}

.text-gradient {
    background: linear-gradient(135deg, #3a44b1, #ff9966);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Hero Section */
.about-hero {
    padding: 100px 0;
    position: relative;
}

.bg-primary-soft {
    background: rgba(58, 68, 177, 0.1);
}

/* Stats Glass Card */
.stats-glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.03);
}

/* Image Stack & Overlay */
.about-img-stack {
    position: relative;
    padding-bottom: 50px;
}

.img-main {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.img-overlay-card {
    position: absolute;
    bottom: 0;
    right: -20px;
    background: white;
    width: 250px;
    border-radius: 20px;
}

/* Icons */
.icon-circle {
    width: 45px;
    height: 45px;
    background: #3a44b1;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

/* CTA Section */
.glass-cta {
    background: linear-gradient(135deg, #3a44b1, #6b73ff);
    border-radius: 40px;
    position: relative;
    overflow: hidden;
}

.orb-about-1 {
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(58, 68, 177, 0.05);
    border-radius: 50%;
    filter: blur(100px);
    top: -100px;
    left: -100px;
    z-index: 0;
}

@media (max-width: 991px) {
    .img-overlay-card {
        position: relative;
        right: 0;
        width: 100%;
        margin-top: 20px;
    }
}
/******
    -----------------------------------
    End About Page
    ----------------------------------
******/

/******
    -----------------------------------
    Start Contact Page
    ----------------------------------
******/
.contact-wrapper {
    background: #fcfdfe;
    position: relative;
    overflow: hidden;
    padding-top: 80px;
}

.fw-800 {
    font-weight: 800;
}

/* Background Decorations */
.orb-contact-1 {
    position: absolute;
    width: 600px;
    height: 600px;
    background: rgba(58, 68, 177, 0.05);
    border-radius: 50%;
    filter: blur(120px);
    top: -150px;
    left: -150px;
    z-index: 0;
}

.orb-contact-2 {
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(255, 153, 102, 0.07);
    border-radius: 50%;
    filter: blur(100px);
    bottom: -100px;
    right: -50px;
    z-index: 0;
}

/* Glass Cards Style */
.info-glass-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 25px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: 0.3s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

    .info-glass-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(58, 68, 177, 0.08);
    }

.form-glass-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
}

/* Icons & Socials */
.icon-box {
    width: 50px;
    height: 50px;
    background: #f0f3ff;
    color: #3a44b1;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.social-link {
    color: white;
    font-size: 1.2rem;
    opacity: 0.8;
    transition: 0.3s;
}

    .social-link:hover {
        opacity: 1;
        transform: scale(1.2);
    }

/* Input Styling */
.premium-input {
    border: 2px solid #f1f5f9 !important;
    border-radius: 15px !important;
    padding: 12px 20px !important;
    background: #f8fafc !important;
    transition: 0.3s;
}

    .premium-input:focus {
        border-color: #3a44b1 !important;
        background: white !important;
        box-shadow: 0 0 0 4px rgba(58, 68, 177, 0.05) !important;
    }

.premium-send-btn {
    background: #3a44b1 !important;
    box-shadow: 0 10px 20px rgba(58, 68, 177, 0.2) !important;
}

.text-gradient {
    background: linear-gradient(135deg, #3a44b1, #ff9966);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ম্যাপ কন্টেইনার স্টাইল */
.map-responsive-container {
    position: relative;
    width: 100%;
    height: 450px; /* এখানে আপনি ম্যাপের উচ্চতা কন্ট্রোল করবেন */
    border-radius: 30px; /* প্রিমিয়াম রাউন্ডেড কর্নার */
    overflow: hidden;
    background: #e5e7eb; /* ম্যাপ লোড হওয়ার আগে হালকা ব্যাকগ্রাউন্ড */
}

    /* আইফ্রেমকে কন্টেইনারের সমান করা */
    .map-responsive-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important; /* HTML এ যাই থাকুক, এটা ১০০% হবে */
        height: 100% !important; /* HTML এ যাই থাকুক, এটা ১০০% হবে */
        filter: grayscale(10%) contrast(1.1); /* ম্যাপে হালকা ড্রামাটিক লুক দেওয়ার জন্য */
    }

@media (max-width: 768px) {
    .map-responsive-container {
        height: 300px; /* মোবাইলে ম্যাপের উচ্চতা কিছুটা কমানো */
        border-radius: 20px;
    }
}
/******
    -----------------------------------
    End Contact Page
    ----------------------------------
******/

/******
    -----------------------------------
    Privacy Page
    ----------------------------------
******/
.privacy-wrapper {
    background: #f8fafc;
    min-height: 100vh;
    padding-top: 80px;
    position: relative;
}

.fw-800 {
    font-weight: 800;
}

/* Hero Section */
.privacy-hero {
    padding: 80px 0 50px;
    position: relative;
}

.orb-privacy {
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(58, 68, 177, 0.05);
    border-radius: 50%;
    filter: blur(80px);
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

/* Glass & Card Effects */
.quick-links-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.policy-content-card {
    background: white;
    border-radius: 35px;
    border: 1px solid rgba(0,0,0,0.03);
    box-shadow: 0 20px 50px rgba(0,0,0,0.04);
}

/* Typography & Lists */
.lh-lg {
    line-height: 1.8 !important;
}

.custom-list {
    list-style: none;
    padding-left: 0;
}

    .custom-list li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 15px;
        color: #64748b;
    }

        .custom-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #3a44b1;
            font-weight: bold;
        }

/* Icons */
.icon-sq {
    width: 45px;
    height: 45px;
    background: #3a44b1;
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.alert-premium {
    background: rgba(58, 68, 177, 0.03);
    border-left: 4px solid #3a44b1 !important;
    border-radius: 15px;
}

.text-gradient {
    background: linear-gradient(135deg, #3a44b1, #ff9966);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* পুরো পেজ যেন স্মুথলি স্ক্রল হয় */
html {
    scroll-behavior: smooth;
}

/* সেকশনগুলো যেন নেভবারের নিচে না ঢাকা পড়ে যায় */
section {
    scroll-margin-top: 100px; /* আপনার নেভবারের উচ্চতা অনুযায়ী এটি সেট করুন */
    padding-top: 10px;
}

/* নেভিগেশন বাটনের স্টাইল */
.wa-btn-nav {
    background: #f1f5f9;
    border: none;
    padding: 8px 18px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    transition: 0.3s;
}

    .wa-btn-nav:hover {
        background: #3a44b1;
        color: white;
        transform: translateY(-2px);
    }
/******
    -----------------------------------
    End Privacy Page
    ----------------------------------
******/


/******
    -----------------------------------
    Start Visa Search Details Page
    ----------------------------------
******/
.wa-frontend-wrapper {
    background: var(--wa-light-bg);
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    color: var(--wa-text);
}

.wa-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section */
.wa-hero-section {
    padding: 100px 0 60px;
    color: white;
    border-radius: 0 0 40px 40px;
}

.wa-breadcrumb {
    font-size: 14px;
    margin-bottom: 20px;
    opacity: 0.8;
}

.wa-breadcrumb span {
    cursor: pointer;
}

.wa-breadcrumb .wa-active {
    color: var(--wa-accent);
    font-weight: bold;
}
     
.wa-hero-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.wa-meta-item {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
}

/* Main Grid */
.wa-search-main-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    margin-top: -10px;
    padding-bottom: 60px;
}

/* Summary Tiles */
.wa-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.wa-summary-card {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #eef2f6;
}

    .wa-summary-card i {
        font-size: 24px;
        color: var(--wa-primary);
    }

    .wa-summary-card small {
        color: #64748b;
        display: block;
        font-size: 12px;
    }

    .wa-summary-card p {
        font-weight: 700;
        margin: 0;
        font-size: 15px;
    }

/* Section Cards */
.wa-section-card {
    background: white;
    border-radius: 24px;
    padding: 35px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid #eef2f6;
}

.wa-section-header {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0f172a;
}

.wa-content-body {
    line-height: 1.8;
    color: #475569;
}

/* Embassy Cards */
.wa-embassy-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.wa-embassy-card {
    padding: 20px;
    background: #f1f5f9;
    border-radius: 16px;
}

    .wa-embassy-card h5 {
        margin-bottom: 10px;
        font-weight: 700;
        color: var(--wa-primary);
    }

    .wa-embassy-card p {
        font-size: 13px;
        margin-bottom: 10px;
    }

.wa-embassy-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
}

.wa-holiday {
    color: #ef4444;
}

/* Sidebar Booking Card */
.wa-sidebar-column {
    position: relative;
}

.wa-booking-card {
    position: sticky;
    top: 40px;
    background: white;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border: 1px solid #eef2f6;
}

.wa-booking-header span {
    color: #64748b;
    font-size: 14px;
}

.wa-price {
    font-size: 32px;
    font-weight: 800;
    color: var(--wa-primary);
    margin: 5px 0 20px;
} 
 
.wa-btn-apply-now {
    width: 100%;
    padding: 18px;
    border-radius: 15px;
    border: none;
    background: linear-gradient(135deg, var(--wa-primary), #1d4ed8);
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2);
}

    .wa-btn-apply-now:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 25px rgba(37, 99, 235, 0.3);
    }

.wa-trust-badges {
    margin: 20px 0;
    font-size: 13px;
    color: #10b981;
    font-weight: 600;
}

.wa-updated-tag {
    text-align: center;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 15px;
}

/* Responsive */
@media (max-width: 992px) {
    .wa-search-main-grid {
        grid-template-columns: 1fr;
        margin-top: 20px;
    } 
    .wa-summary-grid {
        grid-template-columns: 1fr;
    }

    .wa-embassy-list {
        grid-template-columns: 1fr;
    }
}

/* Inline Search Bar Styles */
.wa-inline-search-wrapper {
    margin-top: -35px; /* Hero section এর উপরে কিছুটা তুলে দেওয়া হয়েছে */
    position: relative;
    z-index: 100;
    margin-bottom: 40px;
}

.wa-search-glass-card {
    background: white;
    padding: 15px 30px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
}

.wa-search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 154px;
    gap: 20px;
    align-items: end;
}

.wa-search-item label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.wa-inline-select {
    width: 100% !important;
    border: none !important;
    background: #f1f5f9 !important;
    border-radius: 12px !important;
    height: 45px !important;
}


/* Mobile Responsive Search */
@media (max-width: 768px) {
    .wa-search-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}



/* Not Found            */
/* No Visa Found Styles */
.wa-no-visa-found-container {
    grid-column: 1 / -1; /* পুরো গ্রিড জুড়ে থাকবে */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background: white;
    border-radius: 30px;
    border: 1px solid #eef2f6;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    min-height: 450px;
}

.wa-error-content {
    text-align: center;
    max-width: 500px;
}

.wa-illustration-box {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
}

.wa-main-icon {
    width: 100%;
    height: 100%;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #94a3b8;
    position: relative;
    z-index: 2;
}

.wa-ripple {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #2563eb;
    border-radius: 50%;
    animation: wa-ripple-effect 2s infinite;
    z-index: 1;
}

@keyframes wa-ripple-effect {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.wa-error-title {
    font-weight: 800;
    font-size: 28px;
    color: #1e293b;
    margin-bottom: 12px;
}

.wa-error-subtitle {
    color: #64748b;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.wa-help-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 35px;
}

.wa-help-item {
    background: #f8fafc;
    padding: 15px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

    .wa-help-item i {
        color: #2563eb;
        font-size: 20px;
    }

    .wa-help-item p {
        font-size: 13px;
        margin: 0;
        color: #475569;
    }

.wa-error-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.wa-btn-modify {
    background: #2563eb;
    color: white;
    padding: 12px 25px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

    .wa-btn-modify:hover {
        background: #1d4ed8;
        transform: translateY(-2px);
    }

.wa-btn-home {
    background: white;
    color: #64748b;
    padding: 12px 25px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 576px) {
    .wa-error-actions {
        flex-direction: column;
    }

    .wa-help-grid {
        grid-template-columns: 1fr;
    }
}
/******
    -----------------------------------
    End Visa Search Details Page
    ----------------------------------
******/

/******
    -----------------------------------
    End Not Found
    ----------------------------------
******/
/* Not Found Section Styling */
.wa-notfound-container {
    grid-column: 1 / -1; /* গ্রিড লেআউট হলে পুরো জায়গা নিবে */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background: #f8fafc;
    border-radius: 20px;
    border: 1px dashed #cbd5e1;
    margin: 20px 0;
}

.wa-notfound-content {
    text-align: center;
    max-width: 450px;
}

.wa-notfound-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 25px;
}

.wa-notfound-icon {
    font-size: 80px;
    color: #64748b;
    position: relative;
    z-index: 2;
}

.wa-notfound-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: rgba(203, 213, 225, 0.4);
    border-radius: 50%;
    z-index: 1;
    animation: wa-pulse-animation 2s infinite;
}

@keyframes wa-pulse-animation {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

.wa-notfound-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
}

.wa-notfound-text {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 30px;
}

.wa-notfound-btn {
    background: #0ea5e9; /* আপনার থিম কালার অনুযায়ী পরিবর্তন করতে পারেন */
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

    .wa-notfound-btn:hover {
        background: #0284c7;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
    }

    .wa-notfound-btn i {
        font-size: 18px;
    }

/******
    -----------------------------------
    End Not Found
    ----------------------------------
******/ 

/******
    -----------------------------------
    Payment invoice QR
    ----------------------------------
******/
.qr-placeholder {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff; /* একদম সাদা ব্যাকগ্রাউন্ড স্ক্যানিংয়ের জন্য ভালো */
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
    transition: transform 0.2s ease;
}

    .qr-placeholder:hover {
        transform: scale(1.05); /* হালকা বড় হবে হোভারে */
    }

.qr-label {
    font-size: 9px;
    font-weight: 700;
    color: #64748b;
    margin-top: 5px;
    font-family: 'Monaco', monospace;
}
/******
    -----------------------------------
    End Payment invoice QR
    ----------------------------------
******/


