/* ================================
   🔝 TOP BAR (ঘড়ি + ভাষা + সার্চ)
================================ */
.top-bar{
  background:#006a4e;
  color:#ffffff;
  padding:8px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  font-weight:500;
}

.top-left,
.top-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.top-left span{
  white-space:nowrap;
}

.top-right input,
.top-right select{
  padding:5px 8px;
  border:none;
  border-radius:4px;
}

/* ================================
   ✅ HEADER AREA (Slider + Menu reference)
   👉 layout.blade.php এ <div class="header-area"> আছে
   ✅ Menu overlay স্লাইডারের উপর বসার জন্য এটা জরুরি
================================ */
.header-area{
  position: relative; /* ✅ menu absolute হলে slider এর উপরেই থাকবে */
}

/* ================================
   🖼️ SLIDER
================================ */
.slider{
  position:relative;
  width:100%;
  height:260px;
  overflow:hidden;
  background:#000;
  margin:0;
  padding:0;
}

/* স্লাইড ইমেজ */
.slide{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:260px;
  object-fit:cover;
  opacity:0;
  transition:opacity 1s ease-in-out;
}

/* active স্লাইড */
.slide.active{ opacity:1; }

/* ================================
   🌑 SLIDER DARK OVERLAY
================================ */
.slider-dark-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.20);
  z-index:5;
}

/* =====================================
   🏛️ LOGO + TITLE (স্লাইডারের ভিতরে)
===================================== */
.slider-overlay-left{
  position:absolute;
  top:42%;                 /* ✅ উপরে–নিচে কন্ট্রোল (Desktop) */
  left:40px;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
  gap:20px;
  z-index:10;              /* ✅ Dark overlay এর উপরে থাকবে */
}

.overlay-logo{
  width:125px;
  height:125px;
  object-fit:contain;
}

.overlay-text h1{
  margin:0;
  font-size:58px;
  font-weight:800;
  color:#ffffff;
  line-height:1.1;
  font-family:'SolaimanLipi','Noto Sans Bengali',sans-serif;
  text-shadow:2px 2px 6px rgba(0,0,0,0.6);
}

/* =====================================
   🌿 MAIN MENU BAR (GLASS OVER SLIDER)
   ✅ Desktop: স্লাইডারের উপর overlay থাকবে
===================================== */
.site-menu-wrapper{
  width:100%;
  position:absolute;         /* ✅ স্লাইডারের উপর বসবে */
  left:0;
  bottom:0px;               /* ✅ মেনু উপরে/নিচে করতে শুধু এই মান বদলাবেন */
  z-index:30;                /* ✅ Logo/title এর উপরেও আসতে পারে */
  background:transparent;
}

/* ✅ menu-inner wrapper (পুরোনো স্ট্রাকচার সাপোর্ট)
   ✅ Desktop এ আর max-width দিয়ে আটকে রাখবো না (menu full width হবে)
*/
.menu-inner{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

/* ✅ GLASS SHAPE
   ✅ FIX: max-width/margin auto তুলে দিয়ে bar কে full width করা হলো
   ✅ top-bar এর মতো same horizontal span দেখাবে
*/
.site-menu{
  width:100%;
  max-width:none;
  margin:0;

  background: rgba(6, 46, 28, 0.45);  /* ✅ glass স্বচ্ছ (0.30 দিলে আরও স্বচ্ছ) */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-top: 1px solid rgba(30, 127, 79, 0.6);
  border-bottom: 1px solid rgba(30, 127, 79, 0.6);
}

/* MENU LIST */
.site-menu-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  justify-content:center;
}

/* MENU ITEM */
.site-menu-list > li{
  border-right: 1px solid rgba(30, 127, 79, 0.5);
}

.site-menu-list > li:last-child{
  border-right:none;
}

/* MENU LINK */
.site-menu-list > li > a{
  display:block;
  padding:10px 18px;
  color:#ffffff;
  text-decoration:none;
  font-size:15px;
  font-weight:500;
}

.site-menu-list > li > a:hover{
  background: rgba(11, 74, 46, 0.6);
}

/* =================================
   🔻 FOOTER (ঘড়ির বারের মতো)
================================ */
.site-footer{
  background:#006a4e;
  color:#ffffff;
  height:50px;
  display:flex;
  align-items:center;
  font-family:'SolaimanLipi','Noto Sans Bengali',sans-serif;
  margin-top:35px;
}

.footer-inner{
  max-width:1400px;
  margin:0 auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 15px;
}

.footer-left{ font-size:16px; }
.footer-center{ font-size:16px; }

.footer-right{
  display:flex;
  gap:25px;
}

.footer-right a{
  color:#ffffff;
  text-decoration:none;
  font-size:16px;
}

/* =========================================
   ✅ RESPONSIVE FIXES
========================================= */

/* ✅ Top bar responsive */
@media (max-width: 768px){
  .top-bar{
    flex-wrap:wrap;
    gap:8px;
    padding:8px 12px;
    font-size:13px;
  }

  .top-left, .top-right{
    flex-wrap:wrap;
    gap:8px;
  }

  .top-right input{
    width:160px;
  }
}

/* ✅ Slider + overlay responsive */
@media (max-width: 768px){
  .slider{ height:180px; }
  .slide{ height:180px; }

  .slider-overlay-left{
    left:12px;
    top:50%;
    gap:10px;
  }

  .overlay-logo{
    width:60px;
    height:60px;
  }

  .overlay-text h1{
    font-size:26px;
    line-height:1.1;
  }
}

/* =========================================
   ✅ MOBILE MENU (Sticky + Toggle)
   ✅ মোবাইলে মেনু top-bar এর নিচে থাকবে + toggle কাজ করবে
========================================= */

/* ✅ Desktop এ বাটন লুকানো */
.menu-toggle{
  display:none; /* ✅ ডেস্কটপে লুকানো */
}

@media (max-width: 992px){

  /* ✅ মোবাইলে overlay বন্ধ (কারণ overlay হলে অনেক সময় এলোমেলো হয়)
     ✅ মোবাইলে sticky হবে, কিন্তু top-bar এর নিচে থাকবে */
  .site-menu-wrapper{
    position: sticky !important;  /* ✅ স্ক্রল করলে থাকবে */
    top: 62px !important;         /* ✅ টপবারের নিচে (প্রয়োজনে 56/70 করে বদলাবেন) */
    bottom: auto !important;      /* ✅ desktop bottom বন্ধ */
    z-index: 999999 !important;

    padding: 10px 12px !important;
  }

  /* ✅ মোবাইলে বাটন দেখাবে */
  .menu-toggle{
    display:block !important;
    width:100% !important;

    background: rgba(6, 46, 28, 0.55);
    color:#fff;
    border:1px solid rgba(30, 127, 79, 0.55);
    padding:10px 12px;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
  }

  /* ✅ মোবাইলে মেনু (nav) ডিফল্টে লুকানো */
  .site-menu{
    display:none !important;
    max-width:100% !important;
    margin:10px 0 0 0 !important;

    background: rgba(6, 46, 28, 0.75); /* ✅ মোবাইলে একটু বেশি visible */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    border-radius:10px;
    overflow:hidden;
  }

  /* ✅ open হলে দেখাবে */
  .site-menu.open{
    display:block !important;
  }

  /* ✅ মোবাইলে লিস্ট vertical */
  .site-menu-list{
    flex-direction:column;
    align-items:stretch;
  }

  .site-menu-list > li{
    border-right:none;
    border-bottom:1px solid rgba(30, 127, 79, 0.35);
  }

  .site-menu-list > li:last-child{
    border-bottom:none;
  }

  .site-menu-list > li > a{
    padding:12px 14px;
    text-align:left;
  }
}

/* ✅ Footer responsive */
@media(max-width:768px){
  .site-footer{
    height:auto;
    padding:10px 0;
  }
  .footer-inner{
    flex-direction:column;
    gap:8px;
    text-align:center;
  }
  .footer-right{
    justify-content:center;
    gap:16px;
  }
}







/* =========================================================
   ✅ MOBILE MENU OVERLAY ON SLIDER (FINAL)
   👉 এটা style.css এর একদম নিচে বসাবেন
   ✅ মোবাইলেও মেনু স্লাইডারের উপর গ্লাস overlay হবে
   ✅ সব কন্ট্রোল নিচের ভ্যারিয়েবল দিয়ে
========================================================= */

/* =========================
   ✅ MANUAL CONTROL (মোবাইলে সব এখান থেকে কন্ট্রোল)
========================= */
:root{
  --moMenuBottom: 0px;      /* ✅ মোবাইলে স্লাইডারের নিচ থেকে কত উপরে থাকবে (12px/20px) */
  --moMenuSideGap: 12px;     /* ✅ মোবাইলে দুই পাশে গ্যাপ (12px/16px) */
  --moMenuMaxWidth: 992px;   /* ✅ মোবাইলে মেনুর সর্বোচ্চ width (360/400/420px) */
  --moBtnHeight: 38px;       /* ✅ ☰ বাটনের উচ্চতা (40/44/48px) */
  --moBtnFont: 16px;         /* ✅ ☰ বাটনের ফন্ট সাইজ */
  --moMenuMaxHeight: 40vh;   /* ✅ মেনু খুললে সর্বোচ্চ হাইট (50vh/60vh/70vh) */
}

/* ✅ মোবাইলে overlay enable */
@media (max-width: 992px){

  /* ✅ মোবাইলে header-area এর ভিতরে overlay হবে */
  .site-menu-wrapper{
    position: absolute !important;     /* ✅ overlay */
    left: 0 !important;
    right: 0 !important;
    bottom: var(--moMenuBottom) !important; /* ✅ slider এর নিচে বসবে */
    top: auto !important;

    z-index: 999999 !important;
    background: transparent !important;

    padding: 0 !important; /* ✅ wrapper padding off */
  }

  /* ✅ মোবাইলে menu-inner কে center করে width কন্ট্রোল */
  .menu-inner{
    max-width: var(--moMenuMaxWidth) !important; /* ✅ width control */
    margin: 0 auto !important;                   /* ✅ center */
    padding: 0 var(--moMenuSideGap) !important;  /* ✅ দুই পাশে gap */
  }

  /* ✅ ☰ বাটন সাইজ কন্ট্রোল */
  .menu-toggle{
    height: var(--moBtnHeight) !important;       /* ✅ বাটনের height */
    font-size: var(--moBtnFont) !important;      /* ✅ বাটনের font */
    padding: 0 12px !important;                  /* ✅ ভিতরের padding */
    display: flex !important;                    /* ✅ center align */
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;

    background: rgba(6,46,28,0.35) !important;   /* ✅ glass */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* ✅ মেনু খুললে গ্লাস + height control */
  .site-menu{
    max-height: var(--moMenuMaxHeight) !important; /* ✅ menu height control */
    overflow-y: auto !important;

    background: rgba(6,46,28,0.45) !important;   /* ✅ glass */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;

    border-radius: 12px !important;
  }
}




/* =========================================
   ✅ MOBILE SLIDER OVERLAY LOGO + TITLE FIX
   ✅ মোবাইলে লোগো/লেখা উপরে উঠবে + সাইজ বড় হবে
   👉 style.css এর একদম নিচে বসাবেন
========================================= */

@media (max-width: 768px){

  .slider-overlay-left{
    top: 40% !important;  /* ✅ উপরে তুলছে (আগে ছিল 50%) */
    left: 12px !important;
    gap: 12px !important; /* ✅ লোগো আর লেখার গ্যাপ */
  }

  .overlay-logo{
    width: 85px !important;  /* ✅ লোগো বড় */
    height: 85px !important; /* ✅ লোগো বড় */
  }

  .overlay-text h1{
    font-size: 36px !important; /* ✅ লেখা বড় */
    line-height: 1.15 !important;
  }
}





/* =========================================================
   ✅ HEADER OVERLAY SUBTITLE (DB Editable)
   👉 এই ক্লাসটি header.blade.php এ যোগ করা হয়েছে: .overlay-subtitle
   ✅ এখানে থেকেই "কালিহাতি টাঙ্গাইল" লেখার সাইজ/গ্যাপ কন্ট্রোল করবেন
========================================================= */

.overlay-subtitle{
  margin-top: 6px;            /* বাংলা কমেন্ট: শিরোনামের (h1) নিচে গ্যাপ কম/বেশি করতে এই মান পরিবর্তন করুন */
  font-size: 30px;            /* বাংলা কমেন্ট: সাব-টাইটেল লেখা বড়/ছোট করতে এই মান পরিবর্তন করুন */
  font-weight: 600;           /* বাংলা কমেন্ট: লেখা মোটা/পাতলা করতে 400/500/600/700 ব্যবহার করুন */
  color: #ffffff;             /* বাংলা কমেন্ট: সাব-টাইটেল রঙ পরিবর্তন করতে এখানে পরিবর্তন করুন */
  text-shadow: 1px 1px 4px rgba(0,0,0,0.55); /* বাংলা কমেন্ট: ব্যাকগ্রাউন্ডে স্পষ্ট করতে শ্যাডো */
  line-height: 1.2;           /* বাংলা কমেন্ট: লাইনের উচ্চতা (টাইট/লুজ) */
  text-align: center;
  font-family:'SolaimanLipi','Noto Sans Bengali',sans-serif;
}

/* ✅ মোবাইলে সাব-টাইটেল সাইজ কমিয়ে সুন্দর রাখা */
@media (max-width: 768px){
  .overlay-subtitle{
    font-size: 16px;          /* বাংলা কমেন্ট: মোবাইলে সাব-টাইটেল বড়/ছোট করতে এই মান পরিবর্তন করুন */
    margin-top: 4px;          /* বাংলা কমেন্ট: মোবাইলে গ্যাপ কম/বেশি করতে এই মান পরিবর্তন করুন */
    text-align: center;
  }
}