/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Lightweight Astra Child Theme built for custom development, design enhancements, and scalable WordPress projects while preserving compatibility with future Astra updates.
Author: Mohammed Abdullah
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Custom CSS এখানে লিখুন */

/* সব পেজ থেকে পেজের মূল শিরোনাম বা টাইটেল লুকিয়ে রাখার জন্য */
.page-header, .entry-title, .page-title {
    display: none !important;
}

/* ==========================================
   ১. পুরো বডি এবং মেইন কন্টেইনারের গ্যাপ দূর করার জন্য 
   ========================================== */

/* ওয়েবসাইট এর চারপাশের ডিফল্ট খালি জায়গা (মার্জিন-প্যাডিং) দূর করা এবং স্ক্রিন যেন ডানে-বামে নড়াচড়া না করে (Overflow) তা লক করা */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
}

/* এলিমেন্টর বা সাধারণ থিমের মেইন পেজ এরিয়াকে ফুল-উইডথ (পুরো স্ক্রিন জুড়ে) করার জন্য এবং ডানে-বামের বাড়তি জায়গা বাদ দেওয়ার জন্য */
.site-main, .page-content, .entry-content {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ==========================================
   ২. স্টিকি হেডার ডিজাইন (Sticky Header)
   ========================================== */

/* শুরুতে পৃষ্ঠা যখন একদম উপরে থাকবে: হেডারটি স্ক্রিনের উপরে আটকে থাকবে, কিন্তু সম্পূর্ণ স্বচ্ছ (Transperant) দেখাবে */
.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999 !important; /* হেডারকে সব কন্টেন্টের উপরে রাখার জন্য যেন নিচে ঢাকা না পড়ে */
  
  background-color: transparent !important; /* শুরুতে ব্যাকগ্রাউন্ড সম্পূর্ণ স্বচ্ছ থাকবে */
  backdrop-filter: blur(0px) !important;     /* শুরুতে পেছনের কন্টেন্টে কোনো ব্লার থাকবে না */
  -webkit-backdrop-filter: blur(0px) !important;
  
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease; /* পরিবর্তনগুলো যেন স্মুথলি হয় */
}

/* স্ক্রোল করে নিচে নামার পর: হেডারে একটি হালকা কালো রঙ এবং ব্লার ইফেক্ট আসবে, যেন পেছনের কন্টেন্ট দেখা না যায় */
.sticky-header.scrolled {
  background-color: rgba(13, 17, 23, 0.95) !important; /* স্ক্রোল করলে ৯০% গাঢ় কালো ব্যাকগ্রাউন্ড আসবে */
  backdrop-filter: blur(20px) !important;               /* পেছনের কন্টেন্ট ঝাপসা বা ব্লার করার জন্য */
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);            /* হেডারের নিচে একটি সুন্দর শ্যাডো বা ছায়া দেওয়ার জন্য */
}

/* হেডারটি ফিক্সড থাকার কারণে নিচের মেইন কন্টেন্ট যেন হেডারের পেছনের ঢুকে না যায়, সেজন্য উপর থেকে ১০০ পিক্সেল জায়গা খালি করা */
#page, 
.site-content, 
#content, 
.elementor-location-header + .elementor,
.theme-main {
  padding-top: 25px !important; /* কম্পিউটার স্ক্রিনের জন্য লোগো ও মেনুর হাইট অনুযায়ী গ্যাপ */
}

/* মোবাইল স্ক্রিনের জন্য উপর থেকে খালি জায়গার পরিমাণ কিছুটা কমিয়ে ৮০ পিক্সেল করা */
@media (max-width: 767px) {
  #page, .site-content, #content, .elementor-location-header + .elementor, .theme-main {
    padding-top: 25px !important;
  }
}

/* হেডারের বাড়তি ফাঁকা জায়গা একবারে কমিয়ে হেডারটিকে অনেক স্লিম বা চিকন করার জন্য */
.sticky-header {
  padding-top: 5px !important;    /* উপরের খালি জায়গা মাত্র ৫ পিক্সেল করা হলো */
  padding-bottom: 5px !important; /* নিচের খালি জায়গা মাত্র ৫ পিক্সেল করা হলো */
  min-height: auto !important;    /* এলিমেন্টরের তৈরি করা ডিফল্ট মিনিমাম হাইট বাতিল করা হলো */
  height: auto !important;
}

/* হেডারের ভেতরের মূল কন্টেইনার, কলাম এবং উইজেটের মার্জিন-প্যাডিং জিরো করে সবকিছুকে একদম মাঝখানে (Vertically Center) আনার জন্য */
.sticky-header .elementor-container,
.sticky-header .elementor-widget-wrap,
.sticky-header .elementor-row {
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  gap: 15px !important;           /* লোগো, মেনু ও বাটনের মাঝখানের পারস্পরিক দূরত্ব ১৫ পিক্সেল রাখা */
  align-items: center !important; /* সব উপাদানকে লম্বালম্বিভাবে একদম মাঝখানে সোজা রাখার জন্য */
}

/* হেডারের ভেতরের প্রতিটি উইজেটের নিচের ডিফল্ট খালি জায়গা (বটম মার্জিন) রিমুভ করার জন্য */
.sticky-header .elementor-widget {
  margin-bottom: 0 !important;
}

/* লোগো অনেক বড় থাকলে হেডার ছোট হতে চায় না, তাই লোগোর সর্বোচ্চ উচ্চতা ৪৫ পিক্সেল লক করে দেওয়া */
.sticky-header img,
.sticky-header .elementor-widget-image img {
  max-height: 45px !important; /* লোগোটি লম্বায় ৪৫ পিক্সেলের বেশি বড় হতে পারবে na */
  width: auto !important;
  object-fit: contain;         /* লোগোর অনুপাত বা শেপ ঠিক রাখার জন্য */
}

/* নেভিগেশন মেনুর লেখার উপরের এবং নিচের ফাঁকা জায়গা এবং লাইনের উচ্চতা ফিক্স করা */
.sticky-header .elementor-nav-menu--main .elementor-item {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1 !important;
}

/* পুরো হেডারের সর্বোচ্চ উচ্চতা ৭০ পিক্সেলের মধ্যে জোরপূর্বক লক করে দেওয়া, যেন হেডারটি দেখতে নিখুঁত লাগে */
.sticky-header, 
.sticky-header > .elementor-element, 
.sticky-header .elementor-container {
  max-height: 70px !important;
}
/*=======================*/