.logoutBer {
  position: fixed;
  top: 0;
  right: -300px;  /* প্রথমে স্ক্রিনের বাইরে */
  width: 300px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.3);
  opacity: 0;
  transition: right 0.4s ease, opacity 0.4s ease;
  z-index: 37;
}

/* active হলে slide+fade হবে */
.logoutBer.active {
  right: 0;
  opacity: 1;
}


.logoutBer >div>a{
  padding: 5pt;
}



/* বড় স্ক্রিন (1025px এবং তার বেশি) — siteber হবে ২০% */
@media screen and (min-width: 1024px) {

    .siteber {
    width: 80%;
  }

}


.search_symbol_image{
  width: 13pt; 
  height: 13pt;
  /*padding: 10px;*/
  margin-left: 10pt;
  margin-right: 10pt;
}


input:focus {
  outline: none;
}

.search_box{
  width: 90%; 
  border : solid 0pt; 
  border-top-left-radius: 15px; /* উপরের বাম কোণ */
  border-bottom-left-radius: 15px; /* নিচের বাম কোণ */
  font-size:14pt; 
  padding: 5pt;
  background-color: #E8F0FE;
}





.hamisah_big {
    width: auto; /* প্রয়োজন অনুযায়ী পরিবর্তন করুন */
    max-height: 60px; /* ব্যানারের উচ্চতার সাথে সামঞ্জস্য রেখে লোগোর সর্বোচ্চ উচ্চতা */
    animation: glow 2s infinite alternate;
    padding: 5pt;
  }


  .troli_symbol{
    max-width: 20pt; 
    /*height: 30pt; */
    margin-right: 30pt;
    z-index: 3;
  }


.close_sybmol_image{
  width: 20pt;
  height: 20pt;
}


.close_sybmol_image_card_board{
  width: 20pt;
  height: 20pt;
  float: right;

}


  .sidebar{
    display: none;
    width: 20%;  
  }


  .sidebar_under{
    display: flex;
    flex-direction: column;
    background-color: #CA2991; 
    color: black; 
    padding: 20pt;
    width: 100%;
    box-sizing: border-box;    
  }


  .sidebar_under > a{
    color: white;  
    padding : 10pt;
    text-decoration: none; 
  }


  .sidebar_under > a:hover{
    background-color: #c2185b; /* গাঢ় ম্যাজেন্টা */
    padding-top: 12pt;
  }



.close_sybmol :hover{
 transform: scale(1.15); /* হোভারে হালকা বড় হবে */
 box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2); /* হোভারে গাঢ় শ্যাডো */
}


.close_card_board :hover{
 transform: scale(1.15); /* হোভারে হালকা বড় হবে */
 box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2); /* হোভারে গাঢ় শ্যাডো */
}


.menu_symbol {
  padding: 2pt;
  box-sizing: border-box;
  margin-left: 20pt;
  margin-right: 10pt;
  display: flex; 
  justify-content: center;
  align-items: center;
  color: #0284C7;
  font-weight: bold;
  cursor: pointer;
  font-size: 20pt;

}


.menu_symbol {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.menu_symbol span {
  font-size: 28px;
  color: #000;
  position: relative;
  z-index: 2; /* উপরে থাকবে */
  transition: color 0.3s ease;
}

/* ডিফল্ট গোল বৃত্ত থাকবে না */
.menu_symbol::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50px;       /* আগের 70px → 50px */
  height: 50px;      /* আগের 70px → 50px */
  background: rgba(59, 21, 251, 0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); 
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  z-index: 1;
}

.menu_symbol:hover::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.menu_symbol:hover span {
  color: #3B15FB; /* ☰ রঙ পরিবর্তন */
}



  .top_bar {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* স্ক্রলবার হাইড */
    scrollbar-width: none; /* Firefox */
  }

  .top_bar::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .top_bar_content {
    display: inline-flex;
    gap: 12px;
    padding: 4px 10px;
    min-width: max-content;
  }

  .forBnFont {
    display: inline-block;
    font-size: 12pt;
    white-space: nowrap;
  }



.top_bar > .forBnFont{
  display: none;
}


  .troliAdedQuantity {
  position: absolute;
  top: -1px;
  right: 1px;
  background-color: white;
  color: red;
  border: 1px solid red;
  border-radius: 999px;
  padding: 3px 1px; /* ওপর-নিচ বেশি, ডানে-বামে কম */
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  min-width: 12px; /* প্রস্থ কম */
  text-align: center;
  margin-right: 20pt;
}



.menubar{
  width: 100%;
  z-index: 22; 
  box-sizing: border-box; 
  align-items: center;
}




.troliAdedQuantity {
  position: absolute;
  top: -3px;
  right: -2px;
  background-color: red;
  color: white;
/*  border: 2px solid red;
*/  border-radius: 999px;
  padding: 6px 3px; /* ওপর-নিচ বেশি, ডানে-বামে কম */
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  min-width: 12px; /* প্রস্থ কম */
  text-align: center;
  margin-right: 20pt;
}



.menu_button {
    background-color: transparent;
    padding: 5px;
    cursor: pointer;
    color: blue;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;
    /*width: 100%;*/
    margin: 0;
  } 

  .logOut {
    position: relative;
    display: inline-block;
  }

  .sub_menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
   /* min-width: 85px;*/
    z-index: 100;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;

  }

  .sub_menu a {
    color: black;
    padding: 5px;
    text-decoration: none;
    display: block;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;
  }

  .sub_menu a:hover {
    background-color: blue;
    color: #fff;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;
  }

  .logOut:hover .sub_menu {
    display: block;
    font-family: SutonnyOMJ, Arial;
    font-size: 11pt;
  }

  .logOut:hover .menu_button {
    background-color: blue;
    color: #fff;
    font-family: SutonnyOMJ, Arial;
    font-size: 8pt;
  }

.top_bar_secondBox {
  position: relative;
  width: 100%;
  z-index: 30;
}



.top_barFram{
  float: right;
}
.top_bar {
  width: 100%;
  background-color: #F5F5F5;
  padding: 0pt;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  padding: 2pt;
}




.secondBox {
  width: 100%;
  height: 50pt;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /*padding: 10pt;*/
  background-color: #fff;
 /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
  box-sizing: border-box;  
  /*background-color: red;*/
  transition: box-shadow 0.3s ease; /* ছায়া স্মুথলি আসবে/যাবে */

}







.menu_symbol_image {
  width: 20pt;
  height: 20pt;
  object-fit: contain; /* ফাঁকা না রেখে ফিট করার জন্য */
}


.menu_symbol_small :hover {
 transform: scale(1.10); /* হোভারে হালকা বড় হবে */
 box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.2); /* হোভারে গাঢ় শ্যাডো */
}



 

      #searchResults {
        position: fixed;
        top: 70pt;
        left: 54%; /* স্ক্রিনের মাঝখান থেকে শুরু */
        transform: translateX(-49%); /* নিজেকে মাঝখানে আনার জন্য shift */
        width: 100%; /* প্রস্থ ঠিক করুন আপনার পছন্দমতো, যেমন 60%, 70%, ইত্যাদি */
        z-index: 9999;
        background-color: #5AECFF;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 8px; /* একটু স্মার্ট দেখানোর জন্য */
      }


  .imgFromSearchBox {
  width: 100%;
  background-color: white;
  border-bottom: solid 1pt;
  /*border: solid 1pt;*/
  display: flex; /* flex layout */
  align-items: center; /* vertically center */
  padding: 5pt;
  gap: 10pt; /* ১০pt গ্যাপ */
  box-sizing: border-box;
}

.category_imageFromSearch {
  width: 0.5in;
  height: 0.5in;
  box-sizing: border-box;
  margin-right: 10pt;
}

.anchorSearchResults {
  font-family: sutonnyOMJ, sans-serif;
  /*width: 100%;*/
  text-decoration: none; /* লিংক আন্ডারলাইন সরাতে চাইলে */
  color: black; /* default কালার */
  box-sizing: border-box;
}

.anchorSearchResults:hover {
  background-color: magenta;
  color: white;
  padding: 2pt;
  width: auto; /* hover করলে অটো উইডথ */
}


.search_box_big{
        background-color: #fff;
        padding: 3px;
        width: 100%; 
        height: 20pt;
        border: solid 1pt #0EA5E9;
        border-radius: 20pt; 
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-left: 180pt;
        margin-right: 180pt;
/*       display: grid; 
        grid-template-columns: repeat(3, 3% 94% 3%);*/    
    }


.search_box_big > .menu_symbol {
  display: none;
}

.search_input{
  /*background-color: #71CFFA;*/
  font-size: 14px;
  width: 100%;
  height: 100%;
  border : solid 0px;
  border-radius: 20pt;

}


.loging_link a{
  color: #0EA5E9;
  font-size: 11pt; 
  margin-right: 10pt;
  border: solid 1pt;
  padding: 2pt;
  cursor: pointer;

}


.loging_link a:hover{
  color: #fff;
  background-color: #0EA5E9;

}






.forBnFont{
  font-family: sutonnyOMJ;
  font-size: 13pt;
  color: #0EA5E9;
}


.forBnFontBig{
  font-family: sutonnyOMJ;
  font-size: 12pt;
  color: #0EA5E9;
  margin-left: 4pt;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* এর উচ্চতা নির্দিষ্ট করে দিন */
  /*height: 50px;*/ /* উদাহরণস্বরূপ, আপনার প্রয়োজন অনুযায়ী মান পরিবর্তন করুন */

  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: center; 
/*  margin-top: 10pt;"
*/}



.homeBoundariBox{
  display: flex; 
  justify-content: center;
  align-items: center;
  padding: 4pt;
  box-sizing: border-box;
}





.forBnFontBig a {
  font-size: 14px;
  background-color: white;
  /*background-color: #0EA5E9;*/
  border : solid 1pt #949394;
  color: white;
  border-radius: 8px;
  padding: 5px;
  margin-right: 7px;
  display: flex;
  align-items: center;
  /* উচ্চতা 100% করে দিন */
  /*height: 100%;*/
  color : #949394;
}


.homeBoundariBox{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.homeBoundariBox{
  display: flex; 
  justify-content: center;
  align-items: center;
  padding: 4pt;
  box-sizing: border-box;
}




.homBer {
  display: grid;
  grid-template-columns: 10% 80% 10%;
  /*background: linear-gradient(to right, #E0F7FA, #FFFFFF); /* light cyan to white */
  /*background-color: #E0F7FA;*/
  background-color: white;
  border-bottom: solid #0EA5E9 1pt;
  padding: 1pt;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
}




   @media screen and (max-width: 1024px){

    .second_row {
      display: flex;
      flex-wrap: wrap;  /* স্ক্রীন ছোট হলে ভেঙে যাবে */
      align-items: flex-start;
      gap: 10px;
      max-width: 100%;
    }


.loging_link{
  color: blue; 
  font-size: 12pt; 
}


.catagory_display_container{
  padding: 2pt; 
  box-sizing: border-box; 
  margin : 0pt;  
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  grid-gap: 1pt; 
}

.category_name{
  padding:6pt;
  font-size: 13pt;
}


.aro{  padding:6pt;
  font-size: 13pt;
}


.catagory_display_inner{
  width: 100%;
}

.catagory_display_out_box {
    height: 100%;
    padding : 0pt;
    box-sizing: border-box; 
    background-color: white;
  }

  .sidebar{
    display: none;
    width: 90%;  
  }


  .sidebar_under{
    font-size: 10pt;

  }

  .close_sybmol_image{
  width: 15pt;
  height: 15pt;
}

  .sidebar_under > a{
    padding-top: 5pt; 
  }


.menu_symbol_image_small{
  width: 15pt; 
  height: 15pt;  
}


.smal_one_two{
  display: flex; 
  flex-direction: column; 
  position: relative; 
  margin-bottom: 0pt;
}






.hamisah_big_small {
  float: right;
  margin : 3pt;
  }




  .troli_symbol{
    font-size: 8pt;
    float: right;
  }




.logoutBer{  
  width: 80%;
}
.homBer {
  margin-top: 0pt;
}
}




@media (max-width: 1024px) {
  .secondBox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto; /* স্বয়ংক্রিয় উচ্চতা */

    /*margin-bottom: 20pt !important;*/

    top: 0pt;

  }


  /* menu_symbol বাম পাশে */
  .menu_symbol span {
    display: inline-block;
    /* vertical-align: top;  এটি সরিয়ে দিন */
    margin-left: 2pt;
    padding: 3pt;
    order: -2;
    font-size: 25px;

  }


  .menu_symbol_image {
  width: 15pt;
  height: 15pt;
}



  .hamisah_big {
    order: -1;

    max-width: 1.25in;
    height: auto; /* প্রয়োজন অনুযায়ী পরিবর্তন করুন */
    /*max-height: 50px;*/ /* ব্যানারের উচ্চতার সাথে সামঞ্জস্য রেখে লোগোর সর্বোচ্চ উচ্চতা */
    animation: glow 2s infinite alternate;
  }




  .loging_link i {
    margin-right: 2pt;
    font-size: 16px; /* ছোট ফন্ট */
    padding: 2pt 3pt; /* padding সামান্য কমানো */
    border-width: 1pt;
    border-radius: 4pt; /* কোণ কিছুটা নরম */
    border: solid 1pt;
  }

  /* loging_link এবং tro_sym_troliBox একসাথে রাখার জন্য flex group */
  .loging_link {
    order: 3 !important;
    display: flex;
    /* vertical-align: top; এটি সরিয়ে দিন */
    margin: 1px 0 1px auto; /* ডানে ঠেলবে */
   /* margin-top: 2pt;*/
   
   }

  .tro_sym_troliBox {
    order: 4 !important;
    display: flex;
    /* vertical-align: top; এটি সরিয়ে দিন */
   /* margin: 5px 0 5px auto; /* ডানে ঠেলবে */
  }


 .tro_sym_troliBox span i {
    font-size: 14px;
  }

.logIn{
  border: solid 0pt !important;
}


  .search_box_big {
    background-color: #71CFFA;
    flex-basis: 250%;
    height: 30px;
    margin: 5px 0;
    order: 5;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;
    padding-right: 5px; 
    border-radius: 0pt; 


  }

.search_input{
  background-color: #fff;
  font-size: 14px;
  width: 100%;
  border : solid #8B8889 1px;
  height: 100%;
  box-sizing: border-box;
}





 .homBer {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .homBer::-webkit-scrollbar {
      display: none; /* Chrome, Safari */
    }


    .homBer > div:nth-child(2) {
      display: inline-block;
      min-width: max-content;
      padding: 4pt;
    }



    .top_bar {
    display:block;
  }




.troli_symbol{
    margin-top: 6pt;
}


.dividedDash {
      display: none;
    }


  .reset_button{
  cursor: pointer; 
  padding: 7px;
}


.search_symbol_image{
  padding: 5px;
}


      #searchResults {
        position: fixed;
        top: 90pt;
        left: 50%; /* স্ক্রিনের মাঝখান থেকে শুরু */
        transform: translateX(-50%); /* নিজেকে মাঝখানে আনার জন্য shift */

      }


    .action-buttons{
    padding: 5pt;
    width: 70%;
    box-sizing: border-box;
    margin-left: 70%;
    transform: translate(-85%);
    

  }

          .quantityCad {
            width: fit-content (70%);
        }

}




@media (max-width: 1024px) {
  .menu_symbol {
    /*border: solid #0284C7 1pt;
  /*background-color: #0284C7;*/
    padding: 1pt;
    box-sizing: border-box;
    margin-left: 10pt;
    margin-right: 5pt;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4pt;
    color: #0284C7;
    font-weight: bold;
    cursor: pointer;
    font-size: 14pt;
  }



  .menu_symbol:hover {
    transform: scale(1.20);
    /*box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);*/
    /*background-color: blue;*/
  }

  .menu_symbol_image {
    width: 14pt;
    height: 14pt;
    object-fit: contain;
  }

  .menu_symbol_small:hover {
    transform: scale(1.08);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.15);
  }

  .hamisah_big {
    max-height: 40px;
    width: auto;
  }
}









/*-----------------------*/








@media (max-width: 1024px) {


.menu_symbol {
  display: block; /* ডিফল্টে লুকানো */
  transition: opacity 0.3s ease;
}

.search_box_big.fixed .menu_symbol {
  display: inline-block; /* fixed হলে দেখাবে */
}

.search_box_big.fixed .search_symbol_image {
  display: none; /* fixed হলে সার্চ আইকন লুকাবে */
}



.menu_symbol_inside {
  display: none; /* ডিফল্টে লুকানো */
  font-size: 22px;
  cursor: pointer;
  margin-right: 8px;
}

.search_box_big.fixed .menu_symbol_inside {
  display: inline-block; /* fixed হলে দেখাবে */
}

.search_box_big.fixed .search_symbol_image {
  display: none; /* fixed হলে 🔍 লুকাবে */
}



.menu_symbol, .search_symbol_image {
    transition: opacity 0.3s ease;
    opacity: 1; /* ডিফল্ট */
}

/* JS style.display দিয়ে হ্যান্ডেল করার জন্য opacity optional */
.menu_symbol, .search_symbol_image {
    transition: opacity 0.3s ease;
    opacity: 1; /* ডিফল্ট */
}

.search_box_big.fixed .menu_symbol,
.search_box_big.fixed .search_symbol_image {
    opacity: 1;
}
#menu_symbol {
    display: none; /* ডিফল্টে hide */
}


.search_box_big {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  background-color: white;
  border : solid 0pt;
}

.search_box_big.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  z-index: 999;
}

.search_input {
  width: 100%;
  padding: 8px 35px 8px 10px; /* ডান পাশে icon-এর জায়গা রাখার জন্য */
  font-size: 12px;
  border: 1px solid #949394 ; /* চোয়েন কালার */
  border-radius: 20px;
  outline: none;

}

.search_symbol_image {
  position: absolute;
  right: 10px;
  width: 20px;
  cursor: pointer;
}

.reset_button {
  position: absolute;
  right: 35px; /* search icon-এর বাম পাশে */
  font-size: 18px;
  color: #777;
  background: none;
  border: none;
  display: none; /* শুরুতে হাইড থাকবে */
  cursor: pointer;
}



@media (max-width: 1024px) {
.search_box_big {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search_box_big.fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 90%;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}



.menu_symbol {
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;
}

}


/*------------------------------*/