@import url('https://fonts.googleapis.com/css2?family=poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");



:root {
  --bg-color:#333;
  --second-bg-color:#1913468b;
  --text-color:#ededed;
  --main-color:#aa0e9ae0;
  --sean-color:yellowgreen;
}

*{
    margin: 0;
    padding: 0;
}

/* used
p
img
h3
span*2
h6
h7
h1
all items margin top & bottom set to 15px
*/


/* free
  h2
  h4
  h5
*/


  header,footer,.product-container{
    padding: 1em;
    border-radius: 10px;
  }

 

body  {
    border: 1px red solid;
    margin-left: 6em;
    margin-right: 6em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: lowercase;
  min-height: 100vh;
   background-color:var(--bg-color);
   display: grid;
   grid-template-columns:350px 1fr;
   grid-template-rows: auto 1fr auto;
   grid-template-areas: 
   "header header"
   "sidebar main"
   "sidebar footer";
  }

  header {
    grid-area: header;
     margin-top: 4em;
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    margin-left: 6em;
    margin-right: 8em;
    border: 1px red solid;
    text-transform: lowercase;
    justify-content: center;
    align-items: center;
    /* font-family: 'poppins', sans-serif; */
    font-family: 'Courier New', Courier, monospace;
    background: #fff;
  }
  aside {
    grid-area: sidebar;
    /* height:calc( 100vh-280px);
    top: 280px; */
    height:calc( 100vh-500px);
     top: 500px;
   height: 100vh;
    height: 100dvh;
    align-items: center;
    position: sticky;
    margin-left: 6em;
    margin-right: 6em;
    margin-top: 6em;
    font-size: 1rem;
    /* padding-top: 5px; */
    /* padding-bottom: 5px; */
    margin-bottom: 1em;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: lowercase;
    justify-content: center;
    /* overflow-y: auto; */
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    font-family: cursive;
    /* overflow-y: auto; */
  /* Optional: Stylish scrollbars for a cleaner look */
    /* scrollbar-width: thin; */
     /* scrollbar-gutter: stable;(Optional) Prevents the layout from "jumping" when the scrollbar appears or disappears. */
    color: #fff;
    word-spacing: 2px;
    border-radius: 10% 50% 10% 50% / 50% 10% 50% 10%;
    /* start of glass */
   background: rgba(255, 255, 255, 0.2);
   /* background: #fff; */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
   /* end of glass */
  }



  aside .sidebar-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: yellowgreen 2px dotted;
    padding: min(1rem, 8%);
    border-radius: 50% 10% 50% 10% / 10% 50% 10% 50%;;
    margin-bottom: 5rem;
    position: relative;
  }

  
  
/* hidden  cards that don't match the selected category.   START*/
  aside .sidebar-content.hidden {
     display: none !important; }
/* hidden  cards that don't match the selected category.   END*/
 
  aside .sidebar-content:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

  }
    aside .sidebar-content span {
    font-size: 10px;
    font-weight: 800;
    margin: 10px;
    border-radius: 8px;
    text-transform: uppercase;
    border: 1px red solid;
    padding: 5px;
    background: #000;
    color: yellowgreen;
    text-decoration: dotted;
   position: relative;
    right: -4.5rem;
    top: -5rem;
    z-index: -1;
  }


  aside .sidebar-content h1 {
    font-size: 0.8rem;
    font-weight: 200;
    /* margin: 10px; */
    align-items: center;
    text-align: center;
    border-radius: 8px;
    text-transform: uppercase;
    border: 1px red solid;
    padding: 5px;
    background-color: #000;
    color: yellowgreen;
  }

  aside .sidebar-content img {
    border: 2px red solid;
    border-radius: 20px;
    max-width: 100%;
    margin: 5px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* background: red; */
    padding: min(.2rem, 8%);
    margin-top: -90px;
    rotate: 10deg;
    margin-bottom: 10px;
  }
   /* navButton start */
   #navButton{
    display: none;
  }
   /* navButton end */

  /* Hide all items starting from the 6th one */
  /* Hide all items initially except the first few */
.sidebar-content.product {
    display: none;
}

/* Show only the first 2 items initially (adjust number as needed) */
.sidebar-content.product.visible-item {
    display: block;
}

/* Optional: Add smooth transition */
.sidebar-content.product {
    transition: opacity 0.3s ease;
}

/* When showing all items */
.sidebar-content.product.show-all {
    display: block;
    opacity: 1;
}

/* Button styling */
#toggleBtn {
  margin-top: 10px;
    color: forestgreen;
    /* position: relative; */
    align-items: center;
    text-align: center;
    font-size: 15px;
    text-transform: lowercase;
    display: flex;
    padding: 5px;
    border-radius: 10px;
    background: #000;
}

#toggleBtn:hover{
 background-color: #0056b3;
  border: groove;
  padding: 5px;
}


.pagination-controls {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
    margin-top: -3em;
}

.pagination-btn {
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#prevBtn {
    background-color: #6c757d;
    color: white;
}

#nextBtn {
    background-color: #28a745;
    color: white;
}

/* start of channel */
#channel{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: min(2em, 5%);
  border: groove 2px;
  overflow: hidden;
  background: #000;
  border-top-left-radius: 20PX;
  border-bottom-right-radius: 20PX;
  font-family: 'Courier New', Courier, monospace;
    margin-top: 1em;
     transition: all 0.2s ease-out;
}

#channel:hover{
   box-shadow: inset 0 0 0 2px #25D366; /* Inner border effect */
}

#channel ul{
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: min(2em, 1%);
}

#channel li{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 5px;
  padding: min(1em, 10%);
  font-size: clamp(2em, calc(1vh + 1em), 2em);
}

#channel li .bi{
  color: green;
  font-size: clamp(1em, calc(1vh + 1em), em);
  cursor: pointer;
  transition: all 0.3s ease-out;
}

#channel li .bi:hover{
  transform: scale(1.1); /* Example: slight zoom */
}

#channel li .bi-whatsapp{
  color: green;
}

#channel li .bi-whatsapp:hover {
  /* Add your hover styles here */
  color: blue; /* Example: WhatsApp green */
}

#channel li .bi-telegram{
  color: green;
}
#channel li .bi-telegram:hover {
  /* Add your hover styles here */
  color: #25D366; /* Example: WhatsApp green */
}

#channel p{
       border-radius: 10px;
    color: #000;
    background: orangered;
   padding: min(1em, 2%);
  font-weight: 600;
  font-size: clamp(1em, calc(1vh + 1em), 2em);
}
/* end of channel */



/* END OF SIDEBAR */

  main {
    grid-area: main;
    background: #fff;
    font-family: 'Courier New', Courier, monospace;
      border: 1px red solid;
    /* margin-left: 6em; */
    margin-right: 6em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: lowercase;
    justify-content: center;
align-items: center; 
  }

  footer {
    grid-area: footer;
  }

/* background blur */
/* .bg-image { */
  /* The image used */
  /* background-image: url("/images/george2.jpg"); */

  /* Add the blur effect */
  /* filter: blur(8px); */
  /* -webkit-filter: blur(8px); */

  /* Full height */
  /* height: 100%; */

  /* Center and scale the image nicely */
  /* background-position: center; */
  /* background-repeat: no-repeat; */
  /* background-size: cover; */
/* } */

/* end of that above */


  /* USED BOX*/
  /* 
   <div class="product-container">  ----1---
       
        <div class="product"  data-category="jewerly">
          <img src="/images/hp z book 15 work station.jpg" alt="hp z book 15"> 
          <div class="group"><h3>hp z book 15</h3> <h5>used</h5></div>
          <p>Price:  <del>$370.4</del><span style="color: forestgreen; font-size: 20px; margin-top: 1px; overflow: hidden;"><b>$344.1</b></span><span>offer 7%</span></p>
          <div class="contacts"><a href="tel:+256750812318"><i class="bi bi-telephone"></i></a>  <a href="#"><i class="bi bi-telegram"></i></a> <a href="whatsapp://+256750812318"><i class="bi bi-whatsapp"></i></a> <a href="#"><i class="bi bi-wechat"></i></a>  <button>Add to Cart</button></div>
         <h6>location; <span>uae abu dhabi</span><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7344.456522077665!2d54.48444080000001!3d24.368420600000007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5e413ebd13d805%3A0xa30ec5a4782255c4!2sBudget%20Rent%20a%20Car%20%7C%20Musaffah%20Abu%20Dhabi!5e1!3m2!1sen!2sae!4v1722891807268!5m2!1sen!2sae"  allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></h6>
         <div class="piece">1 piece available</div>
        </div>
       
    
    

    
    */

    /* FREE/NEW BOX  ----1---*/  

    /* 
      <div class="product"  data-category="game_controllers">
          <img src="/images/hp z book 15 work station.jpg" alt="hp z book 15"> 
          <div class="group"><h3>  xbox controller</h3> <h5>new</h5></div>
          <p>Price:<del>$71.42</del><span style="color: forestgreen; font-size: 20px; margin-top: 1px; overflow: hidden;"><b>$57.14</b></span><span>offer 20%</span></p>  
          <div class="contacts"><a href="tel:+256750812318"><i class="bi bi-telephone"></i></a>  <a href="#"><i class="bi bi-telegram"></i></a> <a href="whatsapp://+256750812318"><i class="bi bi-whatsapp"></i></a> <a href="#"><i class="bi bi-wechat"></i></a>  <button>Add to Cart</button></div>
          <h6>location; <span>uae abu dhabi</span><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7344.456522077665!2d54.48444080000001!3d24.368420600000007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5e413ebd13d805%3A0xa30ec5a4782255c4!2sBudget%20Rent%20a%20Car%20%7C%20Musaffah%20Abu%20Dhabi!5e1!3m2!1sen!2sae!4v1722891807268!5m2!1sen!2sae"  allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe></h6>
          <!-- <div class="supplier"><span>MADE IN</span><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Flag_of_Mexico.svg/1920px-Flag_of_Mexico.svg.png" alt=""></div> -->
         <div class="between">min.order: 1 piece</div>
        </div>
       
        
        */
 





        /* END OF RETURN BOX */

        /* nav button{
          display: none;
        } */

  header p {
    margin: 5px;
    overflow: hidden;
    color: yellowgreen;
    opacity: .7;
    font-size: clamp(1rem ,calc(7vh + 1rem), 1rem);
    padding: 5px;
    font-weight: 900;
    background: #333;
    border-radius: 4px;
    border: 1px red solid;
    justify-content: center;
    align-items: center;
  }


  


.logo {
  overflow: hidden;
  border: 1px red solid;
  justify-content: center;
  align-items: center;
  padding:1em;
  font-family: 'Courier New', Courier, monospace;
}

.logo .logo  {
  background: linear-gradient(to left, #4CAF50, blue, cyan,  red, yellowgreen);
  /* background: linear-gradient(to left, black, yellow, red); */
  background-clip: text;
  color: transparent;
   padding: 5px;
  border-radius: 10px;
  text-decoration: none;
 font-size: 40px;
 font-weight: 800;
 border: groove;
 /* color: peru; */
 animation: bounce 7s infinite;
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
 
}





  /* search */

 form{
  border: 1px red solid;
  padding: 5px;
  justify-content: center;
  align-items: center;
 }

.logo span {
  float: right;
display: inline-flex;
align-items: center;
}

.logo span input[type="search"] {
  font-family: 'Courier New', Courier, monospace;
padding: 10px;
border: 1px solid #ccc;
border-radius: 7px 0 0 7px; /* Match button border radius */
width: 65%;
/* border: #000 inset 3px; */
border: groove;
}

.logo span button {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 0 7px 7px 0;
cursor: pointer;
border: #333 solid 1px;
}


.logo span button:hover{
transform: scale(1.1);
color: yellow;
}


/* sign */

.logo .login  {
  justify-content: center;
  align-items: center;
  border: red 1px solid;
  width: 300px;
  justify-content:space-between;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 10px;
  position: relative;
  margin-right: 50px;
}
.logo .login  a{
  color:red;
  background: none;
  cursor: pointer;
  font-size: 20px;
  text-decoration: none;
}


.logo .login  a:hover{
  color: green;
}
/* sign end */


/* the icons */
.logo .login .bi-cart {
  font-family: 'poppins', sans-serif;
  color: green;
  font-size: 20px;

}
.logo .login .bi-cart:hover {
  /* transform: scale(1.2); */
  color:blue;
  cursor: pointer;
}
/* icon end */



/* END OF NAV */




/* Target the anchor tags (links) within the list items (li) */
header .buttons{
  top: 0;
  position: sticky;
  justify-content:space-between;
  align-items: center;
  display:flex;
 flex-wrap: wrap;
 text-align: center;
}


header .buttons button{
  /* top: 0;
  position: sticky; */
 text-transform: lowercase;
 margin: 4px;
  /* Set the text decoration to none to remove the underline */
  text-decoration: none;
  /* Set the initial font color */
  color: #333/* Adjust this value for your desired color */;
  opacity: 1.8;
  font-size: clamp(0.7rem ,calc(7vh + 1rem), 1rem);
  font-weight: 600;
  background-color: #ccc;
  padding: 4px;
  gap: 10px;
  cursor: pointer;
  border-radius: 6px;

}


/* Style for the hover effect (when the mouse is over a link) */
header .buttons button:hover{
  transform: scale(1.1);
  /* Change the color on hover */
  color: #007bff; /* Adjust this value for your desired hover color */
  /* Optionally, add a slight font weight increase for emphasis */
  font-weight: bold;
}



/* home */
header  .buttons .all{
  background-color: forestgreen;
  color: #fff;
  font-family: 'poppins',sans-serif;
  text-transform: uppercase;
  margin-right: 30px;
  letter-spacing: 2px;
}
header  .buttons   .all:hover{
  color: green;
  background-color: transparent;
  /* border: groove; */
}

/* end of all */









  /* start of MAIN INSIDE BODY*/



h6 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  color: #555;
  font-size: 12px;
  /* font-family: Arial, Helvetica, sans-serif; */
  margin-top: 4px;
  font-family: 'poppins', sans-serif;
  opacity: 0.7;
     background: #fff;
    margin: 3px;
    border-radius: 10px;
  text-transform: lowercase;
  /* text-shadow: 1px 2px #000; */
  margin-bottom: 2px;
  border: red 1px solid;
  width: 98%;
  padding: 3px;
}

.product h6 span {
  color: #555;
  padding: 3px;
  opacity: 0.7;
  border: red 1px solid;
}






/* 
iframe {
  margin-left: 10px;
  margin-top: 3px;
  width:80px;
   height:25px;
    border:#000 dashed 1px;
    /* right: 0px; 
    cursor: pointer;
    box-shadow: 4px 5px #000;
    border-radius: 3px;
    border: red 1px solid;
} */



.piece {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  color: red;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 900;
  border: red 1px solid;
  padding: 5px;
  background: #999;
  border-radius: 10px;
  margin: 5px;
  /* opacity: 0.6; */

  overflow: hidden;
  display: -webkit-box; /* Required for -webkit-line-clamp */
  -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
  -webkit-line-clamp: 1; /* Limit to 3 lines */
  line-clamp: 1; /* Standard property for modern browsers */
  text-overflow: ellipsis; /* Adds "..." at the end of truncated text */
}  



 .product-container h3 {
    color: #fff;
    font-size: clamp(1em, calc(1vh + 1em), 1em);
    text-transform: uppercase;
    font-weight: 800;
    border-radius: 10px;
    padding: 3px;
    margin: 3px;
    margin-top: -1.5rem;
    border: red 1px solid;
    cursor: none;

    /* The Secret Sauce */
    overflow: hidden;       /* Hides the text when it leaves the border */
    white-space: nowrap;    /* Forces text onto one single long line */
    display: block;         /* Changed from -webkit-box to standard block */
}

.product-container h3 span {
    /* padding-left: 100%;     Starts the text off-side to the right */
    display: inline-block;
    /* Remove padding-left: 100% for this version */
    
    /* 'alternate' makes it go back and forth.
       '5s' is the speed—adjust based on title length.
    */
    animation: marquee-bounce 5s linear infinite alternate;
   
}

/* The Animation */
@keyframes marquee-bounce {
    0% {
        transform: translateX(0%);
    }
    100% {
        /* This moves the text left until the end of the text 
           hits the right edge of the container */
        transform: translateX(calc(-100% + 100px)); 
    }
}

/* Optional: Pause on hover so people can actually read it! */
.product-container h3:hover span {
    animation-play-state: paused;
}


.product-container {
  overflow: hidden;
  border: 1px solid red;
  background-color: #000;
  /* background-image: url(/images/george2.jpg); */
  justify-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}



 .product-container .product {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  align-items: center;
   width: fit-content;
    height: fit-content;
    /* overflow: hidden; */
    margin: 10px;
    font-size: 12px;
    padding: 10px;
   
/* start of glass */
   background: rgba(255, 255, 255, 0.2);
   /* background: #fff; */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10% 50% 10% 50% / 50% 10% 50% 10%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    padding: 20px;
   /* end of glass */
   
  }
  
  .product-container .product:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: groove 4px;

  }
  

  
/* hidden  cards that don't match the selected category.   START*/
.product-container .product.hidden {
  display: none;
}
/* hidden  cards that don't match the selected category.   END*/


     
.product-container  .product .image_BX {
    width: 125px;
    height: fit-content;
    /* overflow: hidden; */
    border: red 1px solid;
    border-radius: 10px;
    /* justify-content: center; */
    align-items: center;
    /* flex-direction: column; */
    text-align: center;
    /* height: auto; */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 1px;
}

     
.product-container  .product .image_BX  img {
  border: red 1px dotted;
    padding: 3px;
    display: flex;
    flex-wrap: wrap;
    background: yellow;
    /* justify-content: center; */
    align-items: center;
    text-align: center;
    /* padding-bottom: 1rem; */
    /* height: auto; */
    /* aspect-ratio: 1 / 1; */
    /* object-fit: cover; */
    margin: 5px;
    /* padding: 5px 5px; */
    /* overflow: hidden; */
    /* background: #999; */
    padding: 1px;
    border-radius: 20px;
    cursor: pointer;
    
}


/* ============================================
   STARTB OF PRODUCTS PREVIEW (The Detail Window)
   ============================================ */
   /* ============================================
   PRODUCTS PREVIEW (The Detail Window)
   ============================================ */
.products-preview {
    position: fixed;
    top: 0; left: 0;
    min-height: 100vh;
    width: 100%;
    border: dotted grey 1px;
    /* border-radius: 8px; */
    /* background: rgba(0, 0, 0, 0.8); */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 1000; /* Level 2: Above the shop, below the modal */
    padding: 10px;

    /* start of glass */
   background: #000;
   /* background: #fff; */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* border-radius: 10% 50% 10% 50% / 50% 10% 50% 10%; */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    
   /* end of glass */
}

.products-preview.active {
    display: flex;
}

.products-preview .preview {
    display: none; /* Hidden until targeted */
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    font-weight: 600;
    background: #fff;
    position: relative;
    width: 90%;
    aspect-ratio: 1/1;
    object-fit: cover;
    height: auto;
    min-height: 80vh;
    height: 80dvh;
    max-width: 600px;
    border-radius: 8px;
    /* Sidebar is 100% of the screen height */
    overflow-y: auto;   /* Scroll only if there are too many items */
    overflow-x: hidden; /* Prevent horizontal shifting/scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Extra smooth for iPhone/Safari */

}

.products-preview .preview.active {
    display: inline-block;
}

/* Close Icon for Preview */
.products-preview .preview .fa-times {
    color: green;
    padding: 7px;
    background: transparent;
    border-radius: 50% 10% 30% 40%;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    cursor: pointer;
    /* color: #444; */
    font-size: 2rem;
    border: groove;
/* THE "EAS" PART: 
       'all' targets color, rotate, and background. 
       '0.3s' is the speed.
       'ease' makes it start and end smoothly. */
    transition: all 0.3s ease; 
}


/* 2. The Hover State */
.products-preview .preview .fa-times:hover {
    color: red;
    rotate: 180deg;
    border-radius: 4% 40% 50% 40%;
    background: #e0e0e0; /* Changed 'grey' to a lighter grey for better 'red' contrast */
}

/* Thumbnail Gallery Grid */
.gallery-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    border: grey dotted 1px;
}
.gallery-grid img{
    border-radius: 10px;
    width: 100px;
    height: 140px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    background: red;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin: 5px;
    border: groove;
}

.product-thumbnail {
    width: 100%;
    height: 20vh;
    height: 20dvh;
    object-fit: cover;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}

.product-thumbnail:hover {
    border-color: #3498db;
    transform: scale(1.05);
}

 .image-gallery{
  border: blue 1px solid;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

.products-preview h2{
     font-size: clamp(1em, calc(1vh + 1em), 2em);
    color: grey;
    /* background: #777; */
    text-transform: lowercase;
    text-align: center;
    letter-spacing: 2px;
}

.products-preview h3{
    font-size: clamp(1em, calc(1vh + 1em), 1em);
    margin: 3px;
    border-radius: 10px;
    color: darkblue;
    border: grey dotted;
    background: #777;
    text-transform: lowercase;
    text-align: center;
}

.products-preview .description{
    color: #000;
    font-size: clamp(1em, calc(1vh + 1em), 1em);
    font-weight: 600;
    text-align: initial;
    font-family: cursive;
}

.products-preview .water-mark{
        color: red;
    opacity: 0.3;
    text-decoration: dotted;
    text-decoration-line: initial;
    text-decoration-thickness: initial;
    text-decoration-style: dotted;
    text-decoration-color: initial;
    position: absolute;
    font-size: clamp(3em, calc(1vh + 1em), 1em);
}

/* Pricing and Buttons */
.products-preview .preview .price {
    font-size: clamp(1em, calc(1vh + 1em), 1.7em);
    color: forestgreen;
    font-weight: bold;
    margin: 3px;
}

.products-preview .preview .buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.products-preview .preview .buttons a {
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.buttons .cart { background: #333; color: #fff; }
.buttons .buy { background: #3498db; color: #fff; }
   /* ============================================
   END OF PRODUCTS PREVIEW (The Detail Window)
   ============================================ */

/* Base Modal State - MUST BE HIDDEN BY DEFAULT */
/* Base Modal - Hidden by default */
.modal {
    display: none; /* JS will change this to flex */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99999; /* Higher than everything else */
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex !important;
}

.modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
}

.full-image {
    max-width: 100%;
    max-height: 90vh;
    display: none; /* Hidden until loaded */
    border: 3px solid white;
    justify-content: center;
    align-items: center;
    background: #000;
}

.full-image.loaded {
    display: block !important;
    border-radius: 10px;
    border: grey 0.5px dotted
}

.close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 50px;
    background: none;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.close-btn:hover{
     rotate: -180deg;
     transition: 0.2s ease-in-out;
     color: red;
     font-weight: 600;
}
  

/* Ensure preview container doesn't block the modal */
.products-preview {
    z-index: 1000;
}

/* END OF PRD'T MODAL */

   .product-container .product .image_BX mark {
    display: inline-block; /* Add this line */
    color: #fff;
    background: linear-gradient(90deg, #00bdff, #0079ff);
    border-radius: 50%;
    border: #000 outset 2px;
    padding: 4px;
    overflow: hidden;
    font-style: italic;
    font-weight: 800;
    font-size:  clamp(1em, calc(1vh + 1em), 1em);
    text-transform: lowercase;
    text-decoration: dotted;
    position: relative;
     right: -3.5rem;
    top: -7.5rem;
    /* z-index: -1; */
    /* opacity: 0.6; */
    box-shadow: 5px 12px 12px #000;
    animation: borderRotate 7s linear infinite;

}



@keyframes borderRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.product-container .product .image_BX p {
  overflow: hidden;
  white-space: nowrap;
  display: flex; /* Use flex to put spans side-by-side */
  border: red 1px solid;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.product-container .product .image_BX p span {
  display: inline-block;
  padding-right: 20px; /* Space between the loops */
  /* Remove 'alternate' - we want it to reset to the start */
  animation: marquee-continuous 15s linear infinite;
}

.product-container .product .image_BX p:hover span {
  animation-play-state: paused;
}

@keyframes marquee-continuous {
  0% {
    transform: translateX(0%);
  }
  100% {
    /* We move it by exactly 100% of the single span's width */
    transform: translateX(-30% );
  }
}





.product-container .product .image_BX p b {
  align-items: center;
    padding: 3px;
    color: forestgreen;
    font-size: clamp(1rem, calc(1vh + 1em), 1rem);
    overflow: hidden;
    
  font-family: cursive;
  margin-left: 0.5em;
  border: red 1px solid;
}






.product-container .product .image_BX del {
  font-size: clamp(1em, calc(1vh + 1em), 1em);
  color: brown;
  text-decoration: line-through;
  border: red 1px solid;
  background-color: sandybrown;
  padding: 1px;
}



.product-container .product .contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
  align-items: center;
  border: red 1px solid;
  border-radius: 10px;
  padding: 3px;
}

.product-container .product .contacts button {
  color: #000;
  font-size: 10px;
  padding: 5px;
  font-weight: 300;
  font-family: cursive;
  border-radius: 7px;
  opacity: 0.7;
  border: /*#4CAF50*/red dotted 3px;
  cursor: pointer;
  margin-top: 5px;
  background-color: #4CAF50;
  border: red 1px solid;
}


.product-container .product .contacts button:hover {
  transform: scale(0.9);
  color: #fff;
  background: #000;
}


.product-container .product .contacts i {
  font-size: 30px;
  margin: 5px;
  /* border-radius: 50%; */
  letter-spacing: 15px;
  background: none;
  overflow: hidden;
  /* margin-bottom: 10px; */
  cursor: pointer;
  border: #f0c 1px solid;
}

.product-container .product .contacts i:hover {
  transform: scale(1.9);
}



.product-container .product .contacts .bi-telephone {
  color: #4CAF50;
  transition: transform 0.3s ease-in-out; /* Add transition for smooth effect */
  animation: thunderEffect 0.9s ease-in-out infinite;
  
}



@keyframes thunderEffect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  75% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 6;
    color:red;
  }
}






.product-container .product .contacts .bi-telephone:hover {
  color: gold; /* Darker green on hover */
  transform: scale(1.3); /* Increase scale on hover */
}


.product-container .product .contacts .bi-telegram {
  color: #4cafaf;
  transition: transform 0.3s ease-in-out; /* Add transition for smooth effect */
  animation: thunderEffect 0.9s ease-in-out infinite;
  
}



@keyframes thunderEffect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  25% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  75% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 6;
    color:red;
  }
}



.product-container .product .contacts .bi-telegram:hover {
  color: #4cafaf; /* Darker green on hover */
  transform: scale(1.3); /* Increase scale on hover */
}





.product-container .product .contacts .bi-whatsapp {
  color: #4CAF50;
  transition: transform 0.4s ease-in-out; /* Add transition for smooth effect */
  animation: bombExplosion 0.6s  ease-out infinite;
}



@keyframes bombExplosion {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0.8;
    color: grey;
    
  }
  100% {
    transform: scale(0);
    opacity: 5;
    
  }
}




.product-container .product .contacts .bi-whatsapp:hover {
  color: goldenrod; /* Darker green on hover */
  transform: scale(1.4); /* Increase scale on hover */
}



.product-container .product .contacts .bi-wechat {
  color: green;
  transition: transform 0.4s ease-in-out; /* Add transition for smooth effect */
  animation: bombExplosion 0.6s  ease-out infinite;
}



@keyframes bombExplosion {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(2);
    opacity: 0.8;
    color: grey;
    
  }
  100% {
    transform: scale(0);
    opacity: 5;
    
  }
}




.product-container .product .contacts .bi-wechat:hover {
  color: goldenrod; /* Darker green on hover */
  transform: scale(1.4); /* Increase scale on hover */
}




.product-container .product .between {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  /* display: inline-flex; */
   /* margin-top: 1px; */
   font-size: 15px;
   font-weight: bold;
   border: #4CAF50 1px solid;
   /* font-family: 'poppins', sans-serif; */
   border-radius: 10px;
   background: #999;
   padding: 5px;
   letter-spacing: 1px;
   font-weight: 900;

   /* opacity: 0.5; 50% opacity */
   overflow: hidden;
   display: -webkit-box; /* Required for -webkit-line-clamp */
   -webkit-box-orient: vertical; /* Required for -webkit-line-clamp */
   -webkit-line-clamp: 1; /* Limit to 3 lines */
   line-clamp: 1; /* Standard property for modern browsers */
   text-overflow: ellipsis; /* Adds "..." at the end of truncated text */

  
}





  
  /* FOOTER */
  footer {

      border: 1px red solid;
    /* margin-left: 6em; */
    margin-right: 6em;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: lowercase;
    text-align: center;
    padding: 20px;
    background-color:#000;
    opacity: 0.7;
    letter-spacing: 4px;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    /* font-family: cursive; */
     font-family: 'Courier New', Courier, monospace;

  }




/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  *{
    margin: 0;
    padding: 0;
    text-align: center;
  }

  body{
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr;
  }
  aside{
    position: fixed;
    width: 300px;
    display: none;
  }
  .show{
        /* filter: drop-shadow(2px 4px 6px black); */
        /* overflow-y: scroll; */
        /* background-color: #000; */
        /* filter: drop-shadow(2px 4px 6px black); */
        align-content: center;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        z-index: 999999;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        top: auto;
        height: 90vh;
        /* margin: 2rem; */
        background-clip: text;
        height: 90dvh;
        width: stretch;
  }
  /* start of navButton */
  #navButton{
    display: flex;
  }
  /* end of navButton */

  .header p {
    /* font-size:7px; */
  }

/* start of logo */
     .logo{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-evenly;
     }

  .logo .logo {
    font-size: 1rem;
  } 
  /* end of logo */

  /* start of form */
  form{
    margin-top: 1rem;
    padding: 1px;
    border: 1px red solid;
    display: inline-flex;
    align-items: center;
   }
  
  .logo span {
    /* float: right;
  display: inline-flex;
  align-items: center; */
  }
  
  .logo span input[type="search"] {
  padding: 2px;
  width:50px;
  height: 15px;
  font-size: 7px;
  }
  
  .logo span button {
  padding: 2px 3px;
  font-size: 7px;
  }
  
  
  .logo span button:hover{
  transform: scale(1.1);
  color: yellow;
  }
  /* end of form */


  /* start of loGIN */
/* sign */

.logo .login  {
  border: red 1px solid;
 margin-top: 10px;
 padding: 2px;
 margin-right:5px;
 align-items: center;
 display: inline-block;
 width: 70px;
}

.logo .login  a{
  font-size: 8px;
}


.logo .login  a:hover{
  color: green;
}
/* sign end */
  /* end of loGIN */
  

  /* cart */
  /* the icons */
.logo .login .bi-cart {
  font-size: 8px;
  /* margin-left: 5px; */
}
.logo .login .bi-cart:hover {
  /* transform: scale(1.2); */
  /* color:blue;
  cursor: pointer; */
}
/* icon end */


  /* end of cart */
   


  

/* Target the anchor tags (links) within the list items (li) */
header .buttons{
  /* justify-content:space-evenly;
  align-items: center;
  display:flex;
 flex-wrap: wrap; */
 /* padding-top: 2px;
 padding-bottom: 2px; */
}


header .buttons button{
 /* text-transform: lowercase;
 margin: 4px;
  /* Set the text decoration to none to remove the underline */
  text-decoration: none;
  /* Set the initial font color */
  color: #333/* Adjust this value for your desired color */;
  /* opacity: 1.8; */ 
  font-size: 9px;
  /* font-weight: 600;
  background-color: #ccc; */
  /* border-radius: 2px;
  padding: 2px;
  gap: 10px;
  cursor: pointer;
  border-radius: 6px; */

}


/* Style for the hover effect (when the mouse is over a link) */
header .buttons button:hover{
  /* transform: scale(1.1); */
  /* Change the color on hover */
  /* color: #007bff; Adjust this value for your desired hover color */
  /* Optionally, add a slight font weight increase for emphasis */
  /* font-weight: bold; */
}



/* home */
header  .buttons .all{
  /* background-color: black;
  color: #fff;
  font-family: 'poppins',sans-serif;
  text-transform: uppercase;
  margin-right: 30px;
  letter-spacing: 2px; */
}
header  .buttons   .all:hover{
  /* color: green;
  background-color: transparent; */
  /* border: groove; */
}

/* end of all */

 /*start of prdts  */
 .product-container{
  /*  */
 }

 .product-container .product {
    /* width: 100%;
    height: 330px; */
    border-radius: 8px;
  }

  .product-container h3 {
    /* color: peru; */
    /* font-size: 12px; */
   }


  /* .product-container .product .group  {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 1px;
    margin-bottom: 1px;
    border: red 1px solid;
    padding: 2px;
    
} */

/* .product-container .product .group h5 {
  padding:2px ;
  margin-left: 1px;
  font-size: 10px;
 
}

  .product-container  .product img {
      width: 100%;
      height: 100px;
      border-radius: 0px;
  }
   */

  
/* ============================================
   STARTB OF PRODUCTS PREVIEW (The Detail Window)
   ============================================ */
   /* ============================================
   PRODUCTS PREVIEW (The Detail Window)
   ============================================ */
.products-preview {
    /* position: fixed;
    top: 0; left: 0;
    min-height: 100vh;
    width: 100%;
    border: dotted grey 1px; */
    /* border-radius: 8px; */
    /* background: rgba(0, 0, 0, 0.8); */
    /* display: none; Hidden by default */
    /* align-items: center;
    justify-content: center; */
    /* z-index: 1000; Level 2: Above the shop, below the modal */
    /* padding: 10px; */

    /* start of glass */
   /* background: #000; */
   /* background: #fff; */
    /* backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
    /* border-radius: 10% 50% 10% 50% / 50% 10% 50% 10%; */
    /* border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); */
    
   /* end of glass */
}

.products-preview.active {
    /* display: flex; */
}

.products-preview .preview {
    /* display: none; Hidden until targeted */
    /* justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    font-weight: 600;
    background: #fff;
    position: relative;
    width: 90%;
    aspect-ratio: 1/1;
    object-fit: cover;
    height: auto;
    min-height: 80vh;
    height: 80dvh;
    max-width: 600px;
    border-radius: 8px; */
    /* Sidebar is 100% of the screen height */
    /* overflow-y: auto;   Scroll only if there are too many items */
    /* overflow-x: hidden; Prevent horizontal shifting/scrolling */
    /* scroll-behavior: smooth; */
    /* -webkit-overflow-scrolling: touch; Extra smooth for iPhone/Safari */

}

.products-preview .preview.active {
    /* display: inline-block; */
    
}

/* Close Icon for Preview */
.products-preview .preview .fa-times {
   font-size: 1.2rem;
    /* color: green;
    padding: 7px;
    background: transparent;
    border-radius: 50% 10% 30% 40%;
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    cursor: pointer;
    /* color: #444; 
    font-size: 2rem;
    border: groove; */
/* THE "EAS" PART: 
       'all' targets color, rotate, and background. 
       '0.3s' is the speed.
       'ease' makes it start and end smoothly. */
    /* transition: all 0.3s ease;  */
   
}


/* 2. The Hover State */
.products-preview .preview .fa-times:hover {
    /* color: red;
    rotate: 180deg;
    border-radius: 4% 40% 50% 40%;
    background: #e0e0e0; Changed 'grey' to a lighter grey for better 'red' contrast */
}

/* Thumbnail Gallery Grid */
.gallery-grid {
    /* display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    border: grey dotted 1px; */
}
.gallery-grid img{
    /* border-radius: 10px;
    width: 100px;
    height: 140px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    background: red;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin: 5px;
    border: groove; */
}

.product-thumbnail {
    /* width: 100%;
    height: 20vh;
    height: 20dvh;
    object-fit: cover;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s; */
}

.product-thumbnail:hover {
    /* border-color: #3498db;
    transform: scale(1.05); */
}

 .image-gallery{
  /* border: blue 1px solid;
  justify-content: center;
  align-items: center;
  padding: 5px; */
}

.products-preview h2{
  /* font-size: 2rem;
    color: grey;
    /* background: #777; */
    font-size: 1.2rem;
}

.products-preview h3{
  /* font-size: 1.2rem;
    margin: 3px;
    border-radius: 10px;
    color: darkblue;
    border: grey dotted;
    background: #777;
    text-transform: lowercase;
    text-align: center; */
    background: none;
}

.products-preview .description{
    /* color: #000;
    font-size: 1rem;
    font-weight: 600;
    text-align: initial;
    font-family: cursive; */
    margin: 1rem;
    /* padding: 1rem; */
}

.products-preview .water-mark{
        /* color: red;
    opacity: 0.3;
    text-decoration: dotted;
    text-decoration-line: initial;
    text-decoration-thickness: initial;
    text-decoration-style: dotted;
    text-decoration-color: initial;
    position: absolute;
    font-size: 3rem; */
    font-size: 2rem;
}

/* Pricing and Buttons */
.products-preview .preview .price {
    /* font-size: 1.7rem;
    color: forestgreen;
    font-weight: bold;
    margin: 3px; */
}

.products-preview .preview .buttons {
    /* display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem; */
}

.products-preview .preview .buttons a {
    /* padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold; */
}
/* 
.buttons .cart { background: #333; color: #fff; }
.buttons .buy { background: #3498db; color: #fff; } */
   /* ============================================
   END OF PRODUCTS PREVIEW (The Detail Window)
   ============================================ */

/* Base Modal State - MUST BE HIDDEN BY DEFAULT */
/* Base Modal - Hidden by default */
.modal {
    /* display: none; /* JS will change this to flex 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99999; /* Higher than everything else 
    justify-content: center;
    align-items: center; */
}

.modal.active {
    /* display: flex !important; */
}

.modal-content {
    /* position: relative;
    max-width: 90%;
    max-height: 90%; */
}

.full-image {
    /* /* max-width: 100%;
    max-height: 90vh;
    display: none; /* Hidden until loaded 
    border: 3px solid white;
    justify-content: center;
    align-items: center;
    background: #000;  */
}

.full-image.loaded {
    /* display: block !important;
    border-radius: 10px;
    border: grey 0.5px dotted */
}

.close-btn {
    /* position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 50px;
    background: none;
    border: none;
    cursor: pointer;
    transition: 0.2s; */
}

.close-btn:hover{
     /* rotate: -180deg;
     transition: 0.2s ease-in-out;
     color: red;
     font-weight: 600; */
}
  

/* Ensure preview container doesn't block the modal */
.products-preview {
    /* z-index: 1000; */
}

/* END OF PRD'T MODAL */

  
.product-container .product p {
  font-size: 13px;
}
.product-container .product p b {
  font-size: 13px;
}

.product p span {
  font-size: 13px;
 }


del {
  font-size: 10px;
}



.product-container .product .contacts {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
}

.product-container .product .contacts button {
  font-size: 6px;
  padding: 1px;
  border-radius: 7px;
}

/* 
.product-container .product .contacts button:hover {
  transform: scale(0.9);
  color: #fff;
  background: #000;
} */


.product-container .product .contacts i {
  font-size: 14px;
}


h6 {
  font-size: 9px;
  padding: 1px;
}

.product h6 span {
  padding: 1px;
}
iframe {
  /* margin-left: 10px; */
  width:40px;
   height:17px;
}


.product-container .product .between {
   font-size: 8px;
   padding: 0px;
   letter-spacing: 0px;
   border-radius: 3px;
}

.piece {
  font-size: 8px;
  letter-spacing: 0px;
  padding: 0px;
  border-radius: 3px;
}  


}
/* END OF 600PX */  



/* START OF 768PX */
/* Styles for larger screens (Tablets and Desktops - as before) */

 @media screen and (min-width: 601px) and (max-width: 768px)  {


 }

/* END OF 768PX  */

  

/* START OF 992PX */
  @media screen and (min-width: 769px) and (max-width: 992px) {
  }
/* END OF 992PX  */

/* END OF 993  LARGER SCREENS */



/*sm*/
/* @media  (min-width:640px) {} */

/*ms   tablets*/
/* @media  (min-width:768px) {} */

/*ls*/
/* @media  (min-width:1024px) {} */

/*xl*/
/* @media  (min-width:1280px) {} */

/*2xl*/
/* @media  (min-width:1536px) {} */

/*END OF sean @media */