/* From Uiverse.io by satyamchaudharydev */ 
/* this is a recreation of twitter search in css */
.form {
  --input-text-color: black;
  --input-bg-color: white;
  --focus-input-bg-color: transparent;
  --text-color: #949faa;
  --active-color: orange;
  --width-of-input: 200px;
  --inline-padding-of-input: 1.2em;
  --gap: 0.9rem;
  visibility: hidden;
}
/* form style */
.form {
  font-size: 0.9rem;
  display: flex;

  align-items: center;
  width: 420px;
  height: 35px;
  position: relative;
  isolation: isolate;
  font-size: 1.1rem;
  visibility: hidden;

}
/* a fancy bg for showing background and border when focus. */
.fancy-bg {
  position: absolute;
  width: 100%;
  inset: 0;
  background: var(--input-bg-color);
  border-radius: 30px;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
/* label styling */
label {
  width: 100%;
  padding: 0.8em;
  height: 40px;
  padding-inline: var(--inline-padding-of-input);
  display: flex;
  align-items: center;
}

.search,.close-btn {
  position: absolute;
}
/* styling search-icon */
.search {
  fill: var(--text-color);
  left: var(--inline-padding-of-input);
}
/* svg -- size */
svg {
  width: 17px;
  display: block;
}
/* styling of close button */
.close-btn {
  border: none;
  right: var(--inline-padding-of-input);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 0.1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--active-color);
  opacity: 0;
  visibility: hidden;
}
/* styling of input */
.input {
  color: var(--input-text-color);
  width: 100%;
  margin-inline: min(2em,calc(var(--inline-padding-of-input) + var(--gap)));
  background: none;
  border: none;
  visibility: hidden;
}

.input:focus {
  outline: none;
  visibility: hidden;
}

.input::placeholder {
  color: var(--text-color)
}
/* input background change in focus */
.input:focus ~ .fancy-bg {
  border: 1px solid var(--active-color);
  background: var(--focus-input-bg-color);
}
/* search icon color change in focus */
.input:focus ~ .search {
  fill: var(--active-color);
}
/* showing close button when typing */
.input:valid ~ .close-btn {
  opacity: 1;
  visibility: visible;
}
/* this is for the default background in input,when selecting autofill options -- you can remove this code if you do not want to override the browser style.  */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
  -webkit-transition-delay: 9999s;
}


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

}
 header{
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  align-items: center;
  height: 79px;
 }
 .headerLeft{
  display: flex;
  gap: 15px;
  align-items: center;
  margin-left: 80px;
 }
  .headerLeft img{
    width: 70px;
     height: 55px;
    object-fit: contain;
  }
   .headerLeft h1{
   font-size: 2rem;
     font-family: "Oswald", sans-serif;
   font-weight: bold;
   position: relative;
   right: 10px;
   
   }
     .headerMid{
      display: none;
     
     }
     .select{
     width: 200px;
     height: 35px;
     background: white;
     text-align: center;
     padding-top: 4px;
    border-right: solid orange 2px;
    padding-right: 10px;
     }
     .headerRight{
      display: flex;
      gap: 30px;
      
     }
     header .fa-solid{
        font-size: 30px;
     }
      .headerRight{
        display: flex;
        text-align: center;
      }
          .headerRight p{
            background-color: orange;
            width: 30px;
            height: 30px;
            text-align: center;
            padding-top: 2px;
            border-radius: 15px;
          }
    
          .p2{
            position: absolute;
            top: 7px;
            right: 107px;
          }
          #bottom-header{
            border-top: solid 0.2px rgb(206, 206, 206);
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
            padding-left: 60px;
            text-align: center;
            align-items: center;
              padding-bottom: 25px;
          }
          .BTNlist button{
            display: flex;
            background-color: orange;
            align-items: center;
            padding: 7px 15px;
            text-align: center;
            gap: 10px;
            margin-left: 23px;
          }
             .links {
            display: flex;
            gap: 55px;
            
               margin-left: auto;
           margin-right: auto;
          position: relative;
          right: 85px;
        
          }
           .links a{
            font-size: 1.1rem;
           }
           .links a:hover{
            color: orange;
            font-weight: 600;
           }
           .login a{
            background-color: orange;
            padding: 7px;
            transition: 0.3s;
            
           }
           .login{
            display: flex;
            gap: 10px;
           position: relative;
           left: 50px; 
          
           }
           .login a:hover{
            transform: scale(1.13);
           }
           .list {
             display: flex;
            flex-direction: column;
            gap: 30px;
            position: absolute;
            top: 148px;
            left: 83px;
            background-color: #000000;
            width: 207.5px;
            height: 450px;
            color: white;
            font-size: 1.1rem;
            font-weight: 510;
            padding: 15px 10px;
            z-index: 999;
          display: none;
            
           }
           .list a:hover{
            background-color: orange;
         
           }
           .browsCategory{
            font-size: 1.2rem;
            font-weight: 550;
           }

           /*swiper*/
                       .swiper {
                margin-top: 20px ;
           
                  width: 90%;
                height: 100%;
                margin-left: auto;
                margin-right: auto;
               
    }

     .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }


       .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      justify-content: center;
    }
    .swiper-button-next{
      color: orange;
    }
    .swiper-button-prev{
      color: orange;
    }
    .swiper-pagination{
      color: orange;
    }





   .link-img{
      display: flex ;
      width: 220px;
      
      margin-bottom: 4rem;
      margin-left: 10px;
      background-color: #efefef;
      padding: 9px 20px 20px 5px;
      align-items: center;
     
      justify-content: center;
      transition: 0.4s;

    }
     .link-img img{
      padding-right: 20px;
      transition: 0.3s;
      padding-top: 5px;
     }
     .link-img img:hover{
      transform: scale(1.07);
     }
     .link-img:hover{
      transform: scale(1.05);
     }
     .link-img h4{
      line-height: 18px;
      padding-bottom: 3px;
     }
     .link-img h3 span{
      color: orange;
      font-size: 1.25rem;
      font-weight: 650;
      position: relative;
      bottom: 10px;
      left: 7px;
     }
     .link-img h3{
      margin-top: 15px;
      line-height: 20px;
      position: relative;
      bottom: 13px;
     }
     .link-img h4{
      padding-top: 0px;
      font-weight: 500;
     }


 
       .swiper-hero img{
    width: 100px;
    height: 140px;
      object-fit: contain;
     text-align: center;
        display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;
      margin-right: auto;

     }
  

  .swiper-hero  {
      display: flex;
      width: 50px;
      height: 480px;
     
    }
      #hero3 .swiper-button-next{
      color: orange;
   
      
    }
      #hero3 .swiper-button-prev{
      color: rgb(197, 128, 0);
     
       
    }
    
   #hero3 #topLeftHero3{
      display: flex;
      gap: 10px;
      font-size: 1.5rem;
      font-weight: 650;
     
      align-items: center;
    
      color: white;
      background-color: #000000;
      width: 200px;
     margin-top: 25px;
 
     padding: 10px 20px;
     
     
    }
   
    .borderBottom{
      border-bottom: orange solid 5px;
   
    }
    .hero3-descount{
      background-color: orange;
      width: fit-content;
      padding: 5px;
   position: absolute;
   top: 52px;
   right: 10px;

    }

    .hero3-stars{
      color: orange;
      margin-bottom: 10px;
    }
    .hero3-lorem{
    height: 57px;
    overflow-y: scroll;
    margin-bottom: 20px;

    }
       .hero3-price{
      color: orange;
      font-size: 1.5rem;
      font-weight: 500;
      margin-bottom: 20px;
    }
     .hero3-price::before{
      content: "price :";
      display: flex;
     
    
     }
       .hero3-price span{
      color: black;
      text-decoration: solid orange line-through 2px;
        font-size: 1.3rem;
      font-weight: 400;
      margin-left: 10px;
      position: relative;
      top: 1px;
      left: 2px;
     }
     .hero3-add{
      background-color: orange;
      padding: 4px 15px;
      transition: 0.3s; 
     
     }
     .hero3-add:hover{
      scale: 1.1;
     }
     .hero3-love{
     color: white;
     background-color: black;
     padding: 3px 5px;
     font-size: 1.7rem;
     }
    
   
       #footer{
      margin-top: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      background-color: #222222;
      width: 100%;
      height: 930px;
      overflow: hidden;
       
      
     }
     .hero3-shadow{
      position: relative;
     }




   
     
 
 
    

#footer .content{
margin-top: 15px;

  margin-left: auto;
  margin-right: auto
  
}

 @import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
 .content h2 {
  color: #fff;
  font-size: 5em;
  position: absolute;
  transform: translate(-50%, -50%);
}

.content h2:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px orange;
}

.content h2:nth-child(2) {
  color: orange;
  animation: animate 4s ease-in-out infinite;
}

@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}
/* From Uiverse.io by firemonste_8052 */ 
ul {
  list-style: none;
}

.example-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder; /* Made bolder */
  background-color: orange; /* Black background */
  border-radius: 30px; /* Added border-radius to make the container rounded */
  padding: 20px; /* Added padding for better appearance */
  height: 70px;
  width: 300px;
}

.example-1 .icon-content {
  margin: 0 10px;
  position: relative;
  font-weight: bolder; /* Made bolder */
}

.example-1 .icon-content .tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff; /* White background */
  color: #000; /* Black text */
  padding: 6px 10px;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
  font-weight: bolder; /* Made bolder */
}

.example-1 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}

.example-1 .icon-content .link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #fff; /* White icons */
  background-color: orange; /* Black background */
  transition: all 0.3s ease-in-out;
  font-weight: bolder; /* Made bolder */
}

.example-1 .icon-content .link:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}

.example-1 .icon-content .link svg {
  width: 30px;
  height: 30px;
  fill: #fff; /* White icons */
}

.example-1 .icon-content .link[data-social="spotify"]:hover {
  color: #00a2ff;
}

.example-1 .icon-content .link[data-social="pinterest"]:hover {
  color: #ff009d;
}

.example-1 .icon-content .link[data-social="dribbble"]:hover {
  color: #686868;
}

.example-1 .icon-content .link[data-social="telegram"]:hover {
  color: #23b100;
}
.pages{
  margin-top: 100px;

  display: flex;
  justify-content: center;
}



.times h3{
  color: orange;
  font-size:2.2rem ;
  font-weight: 650;

  margin-bottom:5px;
}
.times{
  display: flex;
  flex-direction: column;

 text-align: center;
  margin-top: 50px;

}
.times p{
  color: white;
  margin-bottom: 8px;
  font-size: 1.3rem;
}
.location iframe{
  width: 560px;
  height: 420px;
margin-left: auto;
margin-right: auto;

margin-top: 50px;
  object-fit: contain;
 
}

   #scroll{
  background-color: orange;
  padding: 3px;
  width:40px;
  height: 40px;
  font-size: 1.5rem;
  border-radius: 20px;
  text-align: center;
  position: absolute;
  bottom: 30px;
  right: 15px;
  position: fixed;
  display: none;
  cursor: pointer;
  z-index: 999;
 
}

#scroll:hover{
transform: translateY(-5px);

}

.shopPage{
 background-color: rgba(0, 0, 0, 0.94);
  width: 350px;
  height: 670px;
  z-index: 999;
  position: absolute;
  right: 135px;
  top: 58px;
  border-radius:20px 0 0 20px ;
  overflow-y: scroll;
   display: flex;
  flex-direction: column;
  display: none;
  color: white;
 text-align: center;
}
.shopPage img{
  margin: auto;
  height: 100px;
  object-fit: contain;
  margin-top: 25px;
  margin-bottom: 5px;

  
}
.shopPage input{
  width: 50px;
  height: 25px;
  color: orange;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;

}
.Delete{
  background-color: brown;
  margin-top: 5px;
  padding: 5px;

}

.positive{
  font-size: 1.2rem;
  background-color: #686868;
  padding: 0px 4px 0px 4px;
  position: relative;
  left: 5px;
}
.negative{

    font-size: 1.2rem;
  background-color: #686868;
  padding: 0px 8px 0px 8px;
  position: relative;
  right: 5px;
}

.border{
  background-color: orange;
  height: 4px;
  margin-top: 5px;
}
.addd{
  background-color: orange;
  width: fit-content;
  padding: 5px 10px 5px 5px;
  transition: 0.4s;
}
.addd:hover{
transform: scale(1.15);

}

@media(max-width:1600px ){

#hero2{
display: flex;
flex-wrap: wrap;
width: fit-content;
column-gap: 50px;
row-gap: 0px;

}
}
@media(max-width:1240px ){
   .links {
            display: none;
          
          }
        
}

@media(max-width:1210px ){
       .headerRight{
      display: flex;
      gap: 15px;
      
     }
      .headerLeft{
  display: flex;
  gap: 15px;
  align-items: center;
  margin-left: 30px;
 }
  #bottom-header{
     padding-left: 17px;
  }
   .list{
      position: absolute;
            top: 148px;
            left: 40px;
   }
      .headerRight .fa-cart-shopping{
      position: absolute;
      right: 50px;
      top: 27px;
      }
         .headerRight .fa-heart{
      position: absolute;
      right: 100px;
      top: 27px;
      }
         .headerRight .p2{
         
              position: absolute;
            top: 7px;
            right: 30px;
     
          }
          .shopPage{
              width: 290px;
             height: 570px;
              z-index: 999;
              position: absolute;
              right: 72px;
              top: 58px;
              overflow-y: scroll;
          }
            .login{
            display: none;
           
          
           }
           @media(max-width: 533px ){
                    .headerRight .fa-heart{
   display: none;
      }
.headerLeft h1{
  font-size: 1.5rem;
}

           }


        
}
 @media(max-width: 578px ){


    .hero3-price{
      font-size: 1.15rem;
    }
     .hero3-price span{
      font-size: 1rem;
      margin-left: 4px;
     }

 }
  @media(max-width: 740px ){


    #hero3{
      margin-left: 20px;
    }


 }

 @media(max-width: 433px){
hero3-stars{

  margin-bottom: 5px;
 
}

 }
 @media(max-width:431px){

 .hero3-price{
      font-size: 1rem;
    }
     .hero3-price span{
      font-size: 0.8rem;
      margin-left: 3px;
     }
     .addd{
  background-color: orange;
  width: fit-content;
  padding: 5px 4px 5px 2px;
  
}
 }

 @media(max-width:400px){
 

  }
   @media(max-width:1280px){
  #hero .swiper-button-next{
   display: none;
    }
   #hero .swiper-button-prev{
     display: none;
    }


   }
       @media(max-width:420px){
.hero3-stars{
 font-size: 13px;
}
       }
        @media(max-width:677px){
          .location iframe{
         width: 450px;


          }
        }
           @media(max-width:570px){
          .location iframe{
         width: 350px;
           height: 365px;

          }
        }
          @media(max-width:895px){
     
           #footer .content{
      
            font-size: 0.8rem;
           }
        }
             @media(max-width:720px){
     
           #footer .content{
            margin-top: 0px;
            font-size: 0.6rem;
           }
                #footer{
   
      height: 870px;
 
     }
        }
          @media(max-width:537px){
       
           #footer .content{
      
            font-size: 0.5rem;
           }
                      #footer{
   
      height: 830px;
 
     }
     .pages{
  margin-top: 50px;

  display: flex;
  justify-content: center;
}
        }
               @media(max-width:446px){
       
           #footer .content{
      
            font-size: 0.42rem;
           }
                      #footer{
   
      height: 820px;
 
     }
     .pages{
  margin-top: 50px;

  display: flex;
  justify-content: center;
}
        }
          
               @media(max-width: 380px ){
               .BTNlist button{
            display: flex;
            background-color: orange;
            align-items: center;
            padding: 7px 10px;
            text-align: center;
            gap: 10px;
            margin-left: 20px;
            width: 210px

          }
        
 .hero3-price{
      
      text-align: start;
    }
     .hero3-price span{
   display: none;
     }
       .location iframe{
         width: 330px;
          height: 350px;
         
          }
         #footer .content{
         margin-top: 0;
          font-size:0.38rem;
         
           }
           .shopPage{
            width: 250px;
           }
       #footer{
   
      height: 799px;
 
     }
     .headerLeft h1{
      font-size: 1.1rem;
     }
           .headerLeft{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-left: 30px;
 }
 .headerLeft img{
  width: 60px;
  height: 50px;
 }

           }