/* //////   moving horizontally in loop */



:root {
  --primary-bg:#523103; /* global scope */
  --secondaryDark: #331e01;
    --secondaryDark1: #be8a41;

}

 ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1; 
        }
        ::-webkit-scrollbar-thumb {
            background: var(--secondaryDark1); 
            border-radius: 4px;
        }


/* general  */
.bg_1{
background-color: var(--primary-bg);
}
.bg_2{
background-color: var(--secondaryDark);
}
.textColor
{
color: var(--primary-bg);
}




html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

a{
text-decoration:unset;
color: unset;

}
h3{
  margin: unset;
}
h4{
  font-size: unset;
    margin: unset;
       font-weight: unset;
}
 
.Back_groundimage{
    background-image: url("https://m.media-amazon.com/images/I/71DSo1te5sL.jpg");
    background-size: cover;
}
 
header{
    position:sticky;
    top:0;
    z-index:900;
  }
  
.header-container{
    padding: 0 100px 0 100px;
}
.fixedIcon{
    font-size: 20px;
    font-weight: 550;
    margin: 0 2px 0 2px;
flex-shrink: 0;
   
}


/* //// */
.overflowContainer{
  display: flex;
  column-gap: 15px;

}

.overflow_flex{
    display: flex;
  column-gap: 15px;
overflow-x: scroll;  
flex-wrap: nowrap;
flex-direction: row;
scrollbar-width: none;
}

.flex_item{
    flex-shrink: 0;
}

/* ///// */

  .slider {
    width: 100%;
    max-width: 1250px;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin: auto;
  }

  .slider-track {
    display: flex;
    gap: 16px;
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  .product {
    flex: 0 0 auto;
    width: 33%;
   
    background: #fff;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 10px;
    text-align: left;
  }

 

.shrink__{
  flex-shrink: 0;
}


.ImgShow{
  object-fit: contain;
  border-style: dotted;
  width: 300px;
  max-height:300px ;
  transition:  border-style .1s;
}
.ImgShow1{
  object-fit: contain;
  border-style: dotted;
  width: 15rem;
  height:300px ;
  transition:border-style .1s;
}

.ImgShow3{
  object-fit: contain;
  border-style: dotted;
  width: 15rem;
  height:300px ;
  transition:border-style .1s;
}
.ImgShow:hover{
  border-style:groove;
  border-color: yellowgreen;
}
.ImgShow1:hover{
  border-style:groove;
  border-color: yellowgreen;
}
.imgShow{
  object-fit: contain;
   width: 350px;
  height:300px ;

}
   /*  ///// product show */
   .EnquireNow{
    background-color: rgb(148, 6, 6);
   }
     .EnquireNow:hover{
    background-color: rgb(104, 6, 6);
   }
/* /////front page */
   .saleProducts{
    font-size: 2rem;
    font-weight: 300;
   border-bottom: 1px solid yellowgreen;
 }
 .ProductsName{
    font-size: 1rem;
    font-weight: 500;
   letter-spacing: 2px;
 }
 .ColumGap{
  column-gap: 1%;
  row-gap: 50px;
 }


.imgCenter{
  display: block;
  margin: auto;
}
.cursor_{
  cursor: pointer;
}
.contactForm{
  text-align: center;
  padding: 2%;
  background-color: rgb(194, 12, 27);
  color: white;
  border-radius: 5px;

}

/* ////logo icon */
.img-logo-icon{
width:1
}

.width-Screen_infra{
width: 75%;
}
.width_blog_item{
width: 50%;
}
.width_review_item{
width: 50%;
}
/* side bar icons  */

.sidebar_faq{
    position:fixed; 
    top:14%; 
    right:0%; 
    z-index:100;
}
.sidebar_facebook{
    position:fixed; 
    top:35%; 
    right:0%; 
    z-index:100;
}
.sidebar_instagram{
    position:fixed; 
    top:42%; 
    right:0%; 
    z-index:100;
}
.sidebar_msg{
    position:fixed; 
    top:21%; 
    right:0%; 
    z-index:100;
}
.sidebar_whatsapp{
    position:fixed; 
    top:28%; 
    right:0%; 
    z-index:100;
}
.sidebar_search{
    position:fixed; 
    top:7%; 
    right:0%; 
    z-index:100;
}

.responsive_img{
  width:300px;
  max-height:300px;
  object-fit:contain;
}
    

.btn:hover{
background-color: #6d4304;
color: #523103;
}


    .kryFeatures{
letter-spacing: 1px; 
font-weight:400;
 font-size:14px;
    }
.iconimg{
width:50px;
object-fit:contain
}
 
 .ImgShow1__ {
object-fit: contain;
width: 290px;
height:auto ;
  }
  
  .blogImg{
      width:250px;
      height:250px;
      object-fit:content;
      
  }

/* /////break width */
@media only screen and (max-width: 1400px) {
 

}

@media only screen and (max-width: 900px) {
 
 
    
}

@media only screen and (max-width: 780px) {
 
 .ImgShow1__ {
object-fit: contain;
width: 200px;
height:auto ;
  }

.width_blog_item{
width: 75%;
}
}




.bac{
  background-color: #C99F69;
}


  .imgCenter{
 display: block;
  margin: auto;
     }



     .bac{
  background-color: #523103;
  position: relative;
}
ul li {
      list-style-type: none;
      margin-left: 0;
}
.header_menu{
background-color: #523103;
color:white;
width:200px;
height:110px;
padding: 1rem;
overflow: visible;
text-align: center;
position: absolute;
right:0;
z-index: 4;
top:20px;
font-size: 60px;

}
header .img1 {

width: 500px;
top:10px;
overflow: visible;
position: absolute;
right:25%;
z-index: 4;
 margin-left: 200px;

}
.header_dialog{
bottom: 10px;
}

 .menu-button {
         
            z-index: 1001; /* Ensure it's on top of other elements */
            background: none;
            border: none;
            padding: 10px;
            cursor: pointer;
            border-radius: 50%;
            transition: background-color 0.3s ease;
        }

      
        /* SVG icon styles */
        .menu-icon {
            width: 32px;
            height: 32px;
            stroke: rgb(122, 97, 16);
            stroke-width: 3;
            stroke-linecap: round;
        }

        /* --- SVG Animation --- */
        .menu-icon .top-bar,
        .menu-icon .middle-bar,
        .menu-icon .bottom-bar {
            transform-origin: center;
            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        }

        /* When the button has the 'active' class, animate to an 'X' */
        .menu-button.active .top-bar {
            transform: translateY(8px) rotate(45deg);
        }
        .menu-button.active .middle-bar {
            opacity: 0;
        }
        .menu-button.active .bottom-bar {
            transform: translateY(-8px) rotate(-45deg);
        }

        /* --- Off-Canvas Menu Styles --- */
        .offcanvas-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 380px;
            height: 100vh;
            background-color: white;
            box-shadow: 2px 0 8px rgba(0,0,0,0.1);
            transform: translateX(-100%); /* Hide the menu off-screen */
            transition: transform 0.3s ease-in-out;
            z-index: 1000;
            padding: 80px 20px 20px;
            box-sizing: border-box;
        }

        .offcanvas-menu.open {
            transform: translateX(0); /* Slide the menu in */
        }

        .offcanvas-menu nav a {
            display: block;
    
            text-decoration: none;
            padding: 15px 10px;
            font-size: 1.1rem;
            border-radius: 6px;
            transition: background-color 0.2s, color 0.2s;
        }

        
        
        /* --- Background Overlay --- */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden; /* Prevent interaction when hidden */
            transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
            z-index: 999;
        }

        .overlay.active {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.3s ease-in-out;
        }
        /* 2. Make the middle bar invisible */
        .menu-button.active .middle-bar {
            opacity: 0;
        }

        /* 3. Rotate the bottom bar up by 45 degrees and move it to the center */
        .menu-button.active .bottom-bar {
            transform: translateY(-8px) rotate(-45deg);
        }

          #main-navbar.navbar-hidden {
    transform: translateY(-100%); /* Hides the navbar by moving it up */
}
#main-navbar {
    position: fixed; /* Sticks to the top */
    top: 0;
    left: 0;
    width: 100%;
    
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  

    /* --- Animation --- */
    /* This makes the show/hide smooth */
    transform: translateY(0); /* Default state: visible */
    transition: transform 0.3s ease-in-out;
}

         .first_{
          background-color: #523103;

        }
       .second_{
          background-color: #331e01;

        }

        .arraow_color{
          color: #331e01;

        }
               .backgroundImage{
          background-image: url("/assets/photos/qqq.gif");
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          object-fit: cover;
        }