* {
  box-sizing: border-box;
}

.flex-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
    height: auto;
    padding: 15px;
   
}

.flex-itemh{
    align-items: center;
    flex-grow: 0;
    flex-shrink: 1;
}


/**search bar**/


form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}


@media screen and (max-width: 600px) {
  .flex-container {
    flex-direction: column;
    }
    
    .flex-item{
    flex-grow: 0;
    flex-shrink: 1;
   margin-left: 30px;
   align-content: center;
}
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}
form.example button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}
}



/**old**/


  .cancelbtn { 
	padding: 14px 20px; 
	background-color: #f44336; 
} 
.signupbtn { 
	float: left; 
	width:20%; 
} 

@media screen and (max-width: 300px) { 
	.cancelbtn, .signupbtn { 
	width: 100%; 
	} 
} 
.clearfix::after { 
	content: ""; 
	clear: both; 
	display: table; 
} 



/* মূল বা বাইরের ফ্লেক্সবক্স */
.main-flex-box {
  display: flex;
}

/* ফ্লেক্স আইটেম, যা নিজেই এখন একটি ফ্লেক্স কন্টেইনার */
.flex-item {
                            /* এর ফলে ভেতরের ছবি ও লেখা পাশাপাশি বসবে */
  align-items: center; /* ছবি ও লেখা উপর-নিচ বরাবর মাঝে থাকবে */
  gap: 15px; /* ছবি ও লেখার মাঝের দূরত্ব */
  border: none; /* চেনার সুবিধার্থে বর্ডার */
  padding: 10px;
  margin: 15px;
}

/* লেখার গ্রুপকে নিচে নিচে রাখার জন্য */
.text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flex-item img {
  width: 350px;
  height: 300px;
}
.img :hover{
    background-color: #2196F3;
    transition: width 2s, height 4s, background-color 3s;
    position: relative;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-direction: normal; 
}

/**Animation*/



@keyframes myAnimation {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:0px; top:0px;}
  50%  {background-color:blue; left:0px; top:0px;}
  75%  {background-color:green; left:0px; top:0px;}
  100% {background-color:red; left:0px; top:0px;}
}


/**modal image galary**/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1 {
  text-align: center;
  padding: 20px;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 15px;
}

.gallery-item {
  position: relative;
  width: calc(25% - 20px);
  height: auto;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.gallery-item:hover {
  transform: scale(1.1);
  opacity: .95;
}

.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  width: 100%;
}

.button:hover{
    transform: scale(1);
    background-color: blue;
    color: green;
    opacity: .9
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

/* Modal content (image) */
.modal-content {
  position: relative;
  top: 60px;
  width: 50%;
  height: auto;
  max-width: 90%;
  max-height: 90%;
  border-radius: 5px;
  overflow: hidden;
  animation: zoomIn 0.5s;
 
}

@keyframes zoomIn {
  from {transform: scale(0.6);}
  to {transform: scale(1);}
}

.modal.show {
  display: flex;
  opacity: 1;
 
}

/* Close button */
.close {
  position: relative;
  top: 70px;
  width: 50%;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.3s;
}

/* Caption of modal image */
.caption {
  position: absolute;
  bottom: 15px;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 24px;
}

@media screen and (max-width: 768px) {
  .gallery-item {
     width: calc(50% - 20px);
  }
}

@media screen and (max-width: 480px) {
  .gallery-item  {
    width: calc(100% - 20px);
  }
}

/*order*/
/*homepage*/
.product-grid { display: flex; gap: 20px; }
    .product-card { padding: 20px; border: 1px solid #ddd; border-radius: 8px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
    button { background: #007bff; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-weight: bold; margin-top: 10px; }
    button:hover { background: #00bcd4; }
    .checkout-btn { display: inline-block; background: #28a745; color: white; padding: 12px 25px; text-decoration: none; border-radius: 5px; font-weight: bold; margin-top: 30px; }
    .checkout-btn:hover { background: #218838; }
    
   
    /**carousel**/
    
    /* ================ Carousel & Video Section CSS ================ */
#nz-media-section-wrapper {
    box-sizing: border-box;
    background-color: #007bff;
    padding: 30px 0;
    width: 100%;
}

#nz-media-section-wrapper .nz-container {
    display: flex;
    flex-direction: column; /* মোবাইলে ডিফল্ট ওপর-নিচে থাকবে */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

#nz-media-section-wrapper .nz-slider-part, 
#nz-media-section-wrapper .nz-video-part {
    width: 100%;
    box-sizing: border-box;
}

#nz-media-section-wrapper .nz-custom-slider {
    position: relative;
    width: 100%;
    height: 400px; /* ডেক্সটপ উচ্চতা */
    border-radius: 12px;
    overflow: hidden;
    background-color: #e0e0e0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

#nz-media-section-wrapper .nz-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

#nz-media-section-wrapper .nz-single-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s;
    z-index: 1;
}

#nz-media-section-wrapper .nz-single-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

#nz-media-section-wrapper .nz-single-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ডেক্সটপে স্ক্রিন বড় তাই কভার থাকবে */
}

#nz-media-section-wrapper .nz-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #ffffff;
    border: none;
    width: 45px;
    height: 45px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nz-media-section-wrapper .nz-arrow-left { left: 15px; }
#nz-media-section-wrapper .nz-arrow-right { right: 15px; }

#nz-media-section-wrapper .nz-video-box {
    position: relative;
    width: 100%;
    height: 400px; /* ডেক্সটপ ভিডিও উচ্চতা */
    border-radius: 12px;
    overflow: hidden;
    background-color: #000000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* ========================================== */
/* বড় স্ক্রিনের জন্য (আপনার আগের @media) */
/* ========================================== */
@media (min-width: 992px) {
    #nz-media-section-wrapper .nz-container {
        flex-direction: row; /* ডেক্সটপে পাশাপাশি দেখাবে */
    }
    #nz-media-section-wrapper .nz-slider-part {
        flex: 1.2;
    }
    #nz-media-section-wrapper .nz-video-part {
        flex: 0.8;
    }
}

/* ========================================== */
/* মোবাইল স্ক্রিনের জন্য ফিক্সড @media (নতুন যুক্ত করুন) */
/* ========================================== */
@media (max-width: 767px) {
    /* ১. মোবাইলে স্লাইডার বক্সের ৪০০ পিক্সেল ফিক্সড উচ্চতা কমিয়ে অটো করা */
    #nz-media-section-wrapper .nz-custom-slider {
        height: 230px !important; /* মোবাইলের স্ক্রিন অনুযায়ী স্ট্যান্ডার্ড উচ্চতা */
    }

    /* ২. মোবাইল ভিউতে ছবি না কেটে পুরোটা দেখানোর ফিক্স */
    #nz-media-section-wrapper .nz-single-slide img {
        object-fit: contain !important; /* ছবি ডানে-বামে কাটবে না, পুরোটা আসবে */
        background-color: #e0e0e0; /* ছবি ছোট হলে ব্যাকগ্রাউন্ড খালি দেখাবে না */
    }

    /* ৩. স্লাইডারের সাথে সামঞ্জস্য রেখে ভিডিওর উচ্চতাও মোবাইলে কমানো */
    #nz-media-section-wrapper .nz-video-box {
        height: 230px !important; 
    }
}


/**navbar**/

#custom-safe-nav {
      margin-bottom: 0;
      border-radius: 0;
      z-index: 99999;
      position: fixed;
       width: 100%;
      left: 0;
      top: 0;
    }
    /* ড্রপডাউন মেনু ডেক্সটপ স্টাইল */
    #custom-safe-nav .dropdown-menu {
      background-color: #222222 !important; /* নেভবারের মতো কালো ব্যাকগ্রাউন্ড */
      border: 1px solid #333333;
      padding: 5px 0;
      margin-top: 0;
    }
    #custom-safe-nav .dropdown-menu > li > a {
      color: #9d9d9d !important;
      padding: 10px 20px;
      display: block;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
    }
    #custom-safe-nav .dropdown-menu > li > a:hover {
      background-color: #080808 !important;
      color: #ffffff !important;
    }
    /* লগইন বাটন সিএসএস ফিক্স */
    #custom-safe-nav .nav-login-btn {
      background-color: #2ecc71 !important;
      color: white !important;
      border: none;
      padding: 6px 16px;
      font-size: 14px;
      font-weight: bold;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.2s;
    }
    #custom-safe-nav .nav-login-btn:hover {
      background-color: #27ae60 !important;
    }
    
    /* মোবাইল স্ক্রিনের জন্য বিশেষ ড্রপডাউন ফিক্স */
    @media (max-width: 768px) {
      #custom-safe-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: auto !important;
        background-color: #111111 !important;
        box-shadow: none !important;
        border: none !important;
        display: none; /* ডিফল্ট হাইড */
      }
      #custom-safe-nav .dropdown.open-active .dropdown-menu {
        display: block !important; /* ক্লিক করলে দেখাবে */
      }
    }
    
    /**header**/
    
       
        .custom-responsive-header-wrapper .flex-container {
            display: flex;
            flex-direction: column;
            background-color: forestgreen;
            color: #fff;
            padding: 20px 15px;
            gap: 20px;
            box-sizing: border-box;
            width: 100%;
            margin-top: 55px;
        }

        .custom-responsive-header-wrapper .flex-itemh {
            width: 100% !important;
            box-sizing: border-box;
            text-align: center;
        }

        /* গ্লোবাল ইমেজ কন্ট্রোল (যেন অন্য সেকশনে ইফেক্ট না ফেলে) */
        .custom-responsive-header-wrapper .logo-img {
            max-width: 100%;
            height: 160px !important;
            border-radius: 2%;
            margin-top: 0;
        }

        .custom-responsive-header-wrapper .cover-img {
            max-width: 100%;
            height: 250px !important;
            border-radius: 8px;
        }

        /* মোবাইল ও ইমেইল আইকনের সাইজ ফিক্সড (এটি আপনার সেটাপ ভাঙা রোধ করবে) */
        .custom-responsive-header-wrapper .contact-icon {
            width: 25px !important;
            height: 25px !important;
            object-fit: contain;
            flex-shrink: 0;
        }

        .custom-responsive-header-wrapper .desc-p {
            text-align: justify;
            font-size: 13px;
            color: white;
            margin: 10px auto;
            max-width: 300px;
        }

        .custom-responsive-header-wrapper .desc-bn {
            text-align: justify;
            font-size: 11px;
            color: yellow;
            margin: 10px auto;
            max-width: 300px;
        }

        /* সার্চ বক্স ডিজাইন */
        .custom-responsive-header-wrapper .example {
            display: flex;
            max-width: 280px;
            margin: 0 auto 20px auto !important;
        }

        .custom-responsive-header-wrapper .example input {
            width: 100%;
            padding: 8px 10px;
            border: none;
            border-radius: 4px 0 0 4px;
            color: #000;
            font-size: 14px;
        }

        .custom-responsive-header-wrapper .example button {
            padding: 8px 15px;
            background: #28a745;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }

        /* কন্টাক্ট ইনফো রো লেআউট */
        .custom-responsive-header-wrapper .contact-info {
            font-size: 15px;
            font-weight: bold;
            margin: 12px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .custom-responsive-header-wrapper .contact-info b {
            font-size: 16px;
            color: #ffffff;
        }

        /* সোশ্যাল মিডিয়া আইকন রো */
        .custom-responsive-header-wrapper .social-icons {
            margin-top: 15px;
            display: flex;
            justify-content: center;
            gap: 12px;
        }

        .custom-responsive-header-wrapper .social-icons img {
            width: 30px !important;
            height: 30px !important;
            transition: transform 0.2s;
        }
        
        .custom-responsive-header-wrapper .social-icons img:hover {
            transform: scale(1.1);
        }

        /* ডেক্সটপ বা বড় স্ক্রিনের জন্য রেসপন্সিভ গ্রিড (992px) */
        @media (min-width: 992px) {
            .custom-responsive-header-wrapper .flex-container {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 20px 30px;
            }

            .custom-responsive-header-wrapper .flex-itemh:nth-child(1) { width: 15% !important; }
            .custom-responsive-header-wrapper .flex-itemh:nth-child(2) { width: 23% !important; text-align: left; }
            .custom-responsive-header-wrapper .flex-itemh:nth-child(3) { width: 32% !important; }
            .custom-responsive-header-wrapper .flex-itemh:nth-child(4) { width: 30% !important; text-align: left; }

            .custom-responsive-header-wrapper .desc-p,
            .custom-responsive-header-wrapper .desc-bn {
                margin-left: 15px;
                max-width: 100%;
            }

            .custom-responsive-header-wrapper .example {
                margin-left: 30px !important;
            }

            .custom-responsive-header-wrapper .contact-info {
                justify-content: flex-start;
                margin-left: 30px;
            }

            .custom-responsive-header-wrapper .social-icons,
            .custom-responsive-header-wrapper .checkout-btn-div {
                justify-content: flex-start;
                margin-left: 30px;
            }
        }
    
        
        /*footer*/
        
        /* ফুটারের মূল কন্টেইনার স্টাইল */
        #nz-custom-footer {
            background-color: #1a1a1a; /* আকর্ষণীয় ডার্ক ব্যাকগ্রাউন্ড */
            color: #b0b0b0;
            padding: 50px 0 20px 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 14px;
            width: 100%;
            box-sizing: border-box;
        }

        #nz-custom-footer .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            flex-direction: column; /* মোবাইলের জন্য ডিফল্ট কলাম লেআউট */
            gap: 30px;
            box-sizing: border-box;
        }

        /* প্রতিটি কলামের স্টাইল */
        #nz-custom-footer .footer-column {
            width: 100%;
            box-sizing: border-box;
        }

        /* শিরোনাম বা হেডিং স্টাইল */
        #nz-custom-footer .footer-column h4 {
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 8px;
        }

        /* শিরোনামের নিচে ছোট বর্ডার লাইন */
        #nz-custom-footer .footer-column h4::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 2px;
            background-color: #2ecc71; /* আপনার থিমের সাথে মিল রেখে সবুজ লাইন */
        }

        #nz-custom-footer .footer-column p {
            line-height: 1.6;
            margin: 0 0 15px 0;
        }

        /* লিংকগুলোর স্টাইল */
        #nz-custom-footer .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #nz-custom-footer .footer-links li {
            margin-bottom: 10px;
        }

        #nz-custom-footer .footer-links li a {
            color: #b0b0b0;
            text-decoration: none;
            transition: color 0.2s, padding-left 0.2s;
            display: inline-block;
        }

        /* মাউস নিলে লিংক হালকা সরবে এবং কালার চেঞ্জ হবে */
        #nz-custom-footer .footer-links li a:hover {
            color: #2ecc71;
            padding-left: 5px;
        }

        /* কন্টাক্ট ইনফো স্টাইল */
        #nz-custom-footer .contact-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        #nz-custom-footer .contact-item i {
            color: #2ecc71;
            font-size: 16px;
        }

        /* সোশ্যাল মিডিয়া আইকন রো */
        #nz-custom-footer .footer-socials {
            display: flex;
            gap: 12px;
            margin-top: 15px;
        }

        #nz-custom-footer .footer-socials a img {
            width: 32px !important;
            height: 32px !important;
            transition: transform 0.2s;
        }

        #nz-custom-footer .footer-socials a img:hover {
            transform: translateY(-3px);
        }

        /* নিচের কপিরাইট সেকশন */
        #nz-custom-footer .footer-bottom {
            border-top: 1px solid #2d2d2d;
            margin-top: 40px;
            padding-top: 20px;
            text-align: center;
            font-size: 13px;
        }

        /* ========================================== */
        /* ডেক্সটপ বা বড় স্ক্রিনের জন্য (পাশাপাশি ৪ কলাম) */
        /* ========================================== */
        @media (min-width: 768px) {
            #nz-custom-footer .footer-container {
                flex-direction: row; /* পাশাপাশি দেখাবে */
                justify-content: space-between;
                flex-wrap: wrap;
            }

            #nz-custom-footer .footer-column {
                width: 45%; /* ট্যাবলেটে ২ কলাম করে দেখাবে */
            }
        }

        @media (min-width: 992px) {
            #nz-custom-footer .footer-column {
                width: 22%; /* বড় স্ক্রিনে চমৎকার ৪ কলাম লেআউট */
            }
        }
        
        
        /**new signup button**/
        
        /* মোডাল ব্যাকগ্রাউন্ড এবং বক্স ফিক্স */
    .nz-w3-modal {
      display: none; /* ডিফল্ট হাইড থাকবে */
      position: fixed;
      z-index: 100000; /* নেভবারের ওপরে দেখানোর জন্য */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4); /* আবছা কালো ব্যাকগ্রাউন্ড */
      font-family: 'Segoe UI', Arial, sans-serif;
    }
    
    .nz-modal-content {
      background-color: #fff;
      margin: 10% auto; /* স্ক্রিনের মাঝখানে পজিশন */
      padding: 0;
      border-radius: 8px;
      max-width: 450px; /* ফর্মের সাইজ */
      width: 90%;
      position: relative;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      animation: nzanimatetop 0.4s;
    }

    @keyframes nzanimatetop {
      from {top:-300px; opacity:0} to {top:0; opacity:1}
    }

    /* ক্লোজ (ক্রস) বাটন */
    .nz-close {
      position: absolute;
      right: 15px;
      top: 10px;
      color: #777;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }
    .nz-close:hover { color: #000; }

    /* ফর্ম ডিজাইন */
    .nz-modal-header {
      background-color: #28a745; /* আপনার থিমের সাথে মিল রেখে সবুজ হেডার */
      color: white;
      padding: 20px;
      text-align: center;
      border-radius: 8px 8px 0 0;
      margin: 0;
    }
    .nz-modal-header h2 { margin: 0; font-size: 22px; font-weight: bold; }

    .nz-form-container {
      padding: 25px;
    }
    .nz-form-group {
      margin-bottom: 15px;
      text-align: left;
    }
    .nz-form-group label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
      color: #333;
      font-size: 14px;
    }
    .nz-form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      font-size: 14px;
    }
    .nz-form-group input:focus {
      border-color: #28a745;
      outline: none;
    }

    /* সাবমিট বাটন */
    .nz-signup-submit {
      width: 100%;
      background-color: #28a745;
      color: white;
      padding: 12px;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.2s;
    }
    .nz-signup-submit:hover { background-color: #218838; }

    .nz-modal-footer {
      padding: 15px 25px;
      background-color: #f1f1f1;
      border-radius: 0 0 8px 8px;
      text-align: right;
    }
    .nz-modal-footer button {
      background-color: #dc3545;
      color: white;
      border: none;
      padding: 8px 15px;
      border-radius: 4px;
      cursor: pointer;
    }