@tailwind base;
@tailwind components;
@tailwind utilities;

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

.product img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.product{
  height:100%;
  min-height: 100%;
}
footer{
    background: #f2f2f2;
}
#userDropdown{
    z-index: 11111111111 !important;
}
.big_ul{
    scrollbar-width: none; 
}
.owl-nav{
  display: none !important;
}


.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensures the header stays on top */
}
  .header {
    transition: background-color 0.3s ease;
  }
.search_btn{
  background-color: #822415;
  border-color: #822415;
}
.search_input{
  border-color: #822415;
}
  .active > *{
    @apply text-green-500
  }
  .inactive > *{
    @apply text-gray-500
  }


  .bottom-16{
    bottom: 16%;
  }

#userDropdown ul li a{
  font-size: 17px;
}
.whatsapp{
  background-color: rgb(51, 215, 51);
  padding: 0px 6px;
  border-radius: 10%;
  color: white;
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 5.5s steps(30, end),
    blink-caret .8s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}

.login-container,.register-container{
  background-color: #f2dbdb !important;

}
.login-btn,.register-btn{
  background-color: #822415;
}

.all_menu li a:hover{
  color: #822415;

}
.social_icons a i:hover{
  color: #822415;
}