html {
  scroll-behavior: smooth;
}
 body{
   background: #f9f9f9;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
 }
 /* Navbar container */
 .navsbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
    border-bottom:5px solid red;
    position: sticky;
    height: 82px;
  
  }
  
  /* Links inside the navbar */
  .navsbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    /* padding: 20px 20px; */
    padding: 30px 20px;
    text-decoration: none !important;
  }
  
  /* The dropdown container */
  .drop-down {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .drop-down .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    background-color:#111;
    padding: 20px 20px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
    display:none;
  }
  .searchBtn{
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    background-color:#111;
    padding: 20px 20px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0;
  }
  /* Add a red background color to navbar links on hover */
  .navsbar a:hover, .drop-down:hover .dropbtn  {
    color: #111; background-color: red !important;
  }
 
  /* Dropdown content (hidden by default) */
  .dropdown-contents {
    display: inline-block;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    display:none;
  }
  
  /* Links inside the dropdown */
  .dropdown-contents a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    display:none;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-contents a:hover {
    background-color: #ddd;
  }
  
  /* Show the dropdown menu on hover */
  .drop-down:hover .dropdown-contents {
    display: block;
    position:relative;
  }  /*logo*/
  .loges{
    /* height:30px;
    width:100px;
    padding:0; */
    height: 50px;
    width: 100px;
    padding: 0;
    margin-top:5px;
}
    .logo{
        padding :0 !important;
        margin: 11px
    }
    /*searchbox*/
   .right a{
     float: right;
   }
      
 .search-container {
       /* float: right;*/
        color:#111;
        color:#eee;
        
        
      }


      
      .navsbar input[type=text] {
        padding: 10px;
        margin-top: 20px;
        font-size: 17px;
        border: none;
        background-color:#333;
        width:30%;
        color:#eee;
        border-radius:25px ;
        /* outline:2px solid #eee; */
      }
      /*right*/

      .navsbar .search-containers button {
      /*  float: right;*/
        padding: 6px 10px;
        margin-top: 10px;
        margin-right: 16px;
        background: #333 !important;
        font-size: 17px;
        border: none;
        cursor: pointer;
      }
      .fa-search{
        color:#eee;
      }
       .search-containers button:hover {
        background: rgb(218, 7, 7);
        padding-top:7px
      }
      /*SLIDE SHOW ABOUT US PAGE*/
      * {box-sizing:border-box}

/* Slideshow container
.slideshow-container {
  width:100%;
  height:500px;
  position: relative;
  margin: auto;
}

/* Hide the images by default 
.mySlides {
  display: none;
  
}

/* Next & previous buttons 
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
} */

/* Position the "next button" to the right 
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through 
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/*scrollbar
::-webkit-scrollbar {
  width: 5px;          
}

::-webkit-scrollbar-thumb {   
 border-radius: 30px;
 background: -webkit-gradient(linear,left top,left bottom,from(#eee),to(#eee(240, 11, 11)));
 box-shadow: inset 2px 2px 2px rgba(255,255,255,.25), inset -2px -2px 2px rgba(0,0,0,.25);}

::-webkit-scrollbar-track {     
 background-color: #fff;
 /* background: linear-gradient(to right,#201c29,#201c29 1px,#100e17 1px,#100e17); 
}*/

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
      /*nav 2bar*/
      /* The navigation menu */
.subnar {
  overflow: hidden;
  background-color:#eee;

}

/* Navigation links */
.subnar a {
  float: left;
  font-size: 16px;
  color: #111;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

/* The subnavigation menu */
.subnav {
  float: left;
  overflow: hidden;
  border-bottom:5px solid #333;
  
}

/* Subnav button */
.subnav .subnavbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: #111;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Add a red background color to navigation links on hover */
.subnar a:hover, .subnav:hover .subnavbtn {
  background-color: red;
  color:black;
}


/* Style the subnav content - positioned absolute */
.subnav-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #eee;
  width: 100%;
  z-index: 5;
  border-bottom:5px solid #333;

}

/* Style the subnav links */
.subnav-content a {
  float: left;
  color: #111;
  text-decoration: none;
  border-top:3px solid #111;
  padding-right:100px;
}

/* Add a grey background color on hover */
.subnav-content a:hover {
  background-color: #eee;
  color: black;
}

/* When you move the mouse over the subnav container, open the subnav content */
.subnav:hover .subnav-content {
  display: block;
}
/*SIde-NAv*/
.side-nav{
  display: inline;
  
  
}
.side-nav ul{
    list-style-type: none;
    margin:0;
    padding: 0;
    width: 14%;
    background-color: #f1f1f1;
    height:1400px; /* Full height */
    display:inline-block;
    /* Make it stick, even on scroll */
    line-height:30px;
    /* overflow:auto; Enable scrolling if the sidenav has too much content */
    overflow:scroll;
}
.side-nav li{

  width:100%;
padding-left:10px;

  /* text-align:center; */

}
#side-nav-h3{
  text-align:center;
  
}
.side-nav li:hover{
  background:lightgray;
  opacity:(0.1)
}
.side-nav a{
  text-decoration:none;
  list-style: none;
  color:#111;

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*Login*/


/* Button used to open the contact form - fixed at the bottom of the page */
/*.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed; 
  bottom: 23px;
  right: 28px;
  width: 280px;

}*/
.overlay{
  width:100%;
  height:100%;
  display:none;
  background:rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left:0;
  z-index: 1;
}
.cart-overlay{
  width:100%;
  height:100%;
  display:none;
  background:rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left:0;
  z-index: 1;
}
/* The popup form - hidden by default */
.forms-popup {
  position: absolute;
  height:500px;
  width:500px;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  box-shadow:0 0 20px rgba(0,0,0,0.5);
  display: none;
  z-index: 1;


}

/* Add styles to the form container */
.form-container {
max-width: 500px;
padding: 10px;
background-color: white;
width:100%;
background:#eee;
color:#333;
/* background-image: linear-gradient(to bottom right, black, red); */
box-shadow: 0px 0px 0px 3px #eee;
position:absolute;
border-radius:20px;
padding-top:20px;
}

/* Full-width input fields */
.form-container input[type=text] {
width: 100% !important; 
padding: 15px !important;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-bottom:3px solid red;
overflow:hidden;
border-radius: 25px; 
}
.form-container input[type=password]{
width: 100% !important; 
padding: 15px !important;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
border-bottom:3px solid green;
overflow:hidden;
border-radius: 25px; 
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}

      /*caroselswu*/
      .carousel .carousel-item img {
        height: 300px;
        object-fit: cover;
        
    }
        /* widgets*/
      .sticky-container{
        padding:0px;
        margin:0px;
        position:fixed;
        right:-131px;
        top:280px;
        width:210px;
        z-index: 1100;
      }
      .sticky li{
        list-style-type:none;
        background-color:#fff;
        color:#efefef;
        height:43px;
        padding:0px;
        margin:0px 0px 1px 0px; 
        -webkit-transition:all 0.25s ease-in-out;
        -moz-transition:all 0.25s ease-in-out;
        -o-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
        cursor:pointer;
        
      
    }
      
      .sticky li:hover{
        margin-left:-115px;
      }
      .sticky li img{
        float:left;
        margin:5px 4px;
        margin-right:5px;
      }
      .sticky li p{
        padding-top:5px;
        margin:0px;
        line-height:16px;
        font-size:11px;
      }
      .sticky li p a{
        text-decoration:none;
        color:#2C3539;
      }
      .sticky li p a:hover{
        text-decoration:underline;
      }
      /*div box*/
      .boxet{
        display: inline-block;
         position: absolute;
        margin-left:100px;
      }
   /*products*/
     
   .featured-elements{
        margin: 50px 5px;

   }
   .featured-elements img{
        width:100%;
        height:500px;
        padding:20px 5px;
        transition:1s;
        cursor:pointer;
        

    
}
.new-arrival{
  background-color:red;
  width:110px;
  font-size:14px;
  color:#eee;
  margin-left:auto;
  margin-right:auto;

}
.featured-elements img{
  box-shadow:0px 0px 2px 2px green;

}
.featured-elements img:hover{
 transform:scale(1.1);
}

/*featured-deals*/
.title{
  background:red;
  color:#fff;
  width:174px;
  padding: 4px 10px;
  height:40px;
  margin-bottom: 30px;
  display:flex;
}
.title h2{
  font-size:23px;
}
.title::after{
  content:'';
  border-top:41px solid red;
  border-right:50px solid transparent;
  position:absolute;
  display:flex;
  margin-top: -4px;
  margin-left:162px;
}
.fa-star{
  color:rgba(240, 236, 28, 0.685);
  
}
/*Product Top*/
.product-top img{
/* width:100%; */
height:230px;
box-shadow:0px 0px 2px 2px black;
line-height:1em;
box-sizing: content-box;
padding: 20px 30px;
}

.product-top{
  margin: auto;
  width: 200px;
  text-align: center;
}


.imago{
  /* padding:25px 73px; */
}
/*
.overlay-right{
  display:block;
  opacity:0;
  position:absolute;
  top:10%;
  margin-left:0;
  width:70px;
}*/
/*.overlay-right .fa{
  cursor:pointer;
  background-color:#000;
  color:#000;
  width:35px;
  font-size:20px;
  padding:7px;
  margin-top:5%;
  margin-bottom:5%;
}*/
.overlay-right .btn-secondary{
  
  border:none !important;
  box-shadow:none;

}
.product-top img:hover{
  /*opacity:1;
  margin-left:5%;*/
  transform:scale(1.2);
}
/*HR*/
.type_2 {
  border: 0;
  height: 55px;
  /* margin-left:280px; */
  background-image: url(../image/type_2.png);
  background-repeat: no-repeat;
  /* margin-top: 200px; */
  position: relative;
  }
  /*Flip i*/

  /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 280px;
  height: 50px;
  border: 1px solid #f1f1f1;
  perspective: 500px; /* Remove this if you don't want the 3D effect */
  margin-right:auto;
  margin-left:auto;
  display:block;
}



/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card p{
margin-top:10px;
font-size:20px;
}
.flips {
    width:100px;
    height:100px;
   

}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: red;
  color: #eee;
 
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}/*
.btn-cart{
  width:50%;
  height:30px;
  border:none;
  outline:none;
  margin-top:20px;
  margin-left:auto;
  margin-right:auto;
  display:block;
  cut

}
*/
/*All Rows Of the Products*/
/*.row{
line-height:50px;
}
.col-md-3{
  line-height:50px;
}*/

/*footer*/
.footer{
  background:#333;
  /* padding:10px; */
}
.footer h3{
  color:#eee;
}
.footer a{
  color:#eee;
  line-height:20px;
}
.footer a:hover{
  background-color:red;
}
.adrss{
  color:#eee;
}
.fa-mobile-alt {
  color:#eee;
}
.fa-fax{
  color:#eee;
}


.col-md-3{
width: max-content !important
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
  }
/*footer*/
.container.tex-center {
  background: none;
  border: 0;
}