/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");




*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: 'Poppins', sans-serif; */
  /* font-family: Georgia, 'Times New Roman', Times, serif; */
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;



}



/* Then you can use it in your CSS */
.selector {
  font-family: 'Teko', sans-serif;
}


.c-item {
height: 600px;
margin-top: 72px;

}
.c-img{
height: 100%;
object-fit: cover;

}


/* kuku card image */
/* width eka hiegt eka wadi krnna puluwan card eke */
.kuku-product-card {
  width: auto;
  height: auto;
  position: relative;
}

.kuku-image-container {
  position: relative;
  width: 100%;
  height: auto; /* Set height to auto */
  object-fit: cover;
  border-radius: 20px;
}

.kuku-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px; /* Rounded corners for all devices */
}

.kuku-image-container .kuku-overlay {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.kuku-image-container:hover .kuku-overlay {
  opacity: 1;
}

.kuku-image-container .kuku-hover-button {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kuku-image-container:hover .kuku-hover-button {
  opacity: 1;
}

/* Default button styles */
.kuku-hover-button button {
  width: 250px; /* Default width */
  height: 50px;
  padding: 10px 20px;
  margin-top: 10px;
  font-size: 16px;
  background-color: #000000;
  color: #fff;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Adjusting button size for medium devices */
@media (max-width: 768px) {
  .kuku-hover-button button {
    width: 200px; /* Adjust width for medium devices */
    height: 40px; /* Adjust height for medium devices */
    padding: 8px 16px; /* Adjust padding for medium devices */
    font-size: 14px; /* Adjust font size for medium devices */
  }
}

/* Adjusting button size for small devices */
@media (max-width: 576px) {
  .kuku-hover-button button {
    width: 150px; /* Adjust width for small devices */
    height: 30px; /* Adjust height for small devices */
    padding: 6px 12px; /* Adjust padding for small devices */
    font-size: 12px; /* Adjust font size for small devices */
  }
}

.kuku-icon {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  top: 0%;
  left: 8%;
}

@media (max-width: 576px) {
  .kuku-icon {
    position: absolute;
    transform: translateX(-50%);
    text-align: center;
    top: 0%;
    left: 15%;
  }
}

.kuku-icon button {
  width: 120px;
  height: 40px;
  padding: 10px 20px;
  font-size: 14px;
  background-color: #500a0a;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}



/* ////btn///// */



/* kuku card image end */
.wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.wrapper i:first-child{
  left: -22px;
}
.wrapper i:last-child{
  right: -22px;
}

/* reive */

.categorey-img-1{

  width: 600px;
  height: 850px;

background-position: center;
background-repeat: no-repeat;
background-size: auto;

 
}


/* //////// */
 
  .container-icon-img {
  
    align-items: center;
    justify-content: center;
  }
  

/* ///fotter// */
.fotter-img{
width: auto;
height: auto;
  margin-right: 130px;
}

@media (max-width:370px){
  .fotter-img {
    margin-right: 130px;
} 
 }



.h3-get{

  writing-mode:vertical-rl;
}

.image{
  width: 100%;
}

.float{
	position:relative;
  z-index: 99;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#0C9;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.my-float{
	margin-top:22px;
}


.selected + label {
  background-color: black; /* Change background color when button is selected */
  color: white; /* Change text color when button is selected */
  /* Add any other styles you want for the selected state */
}



body::-webkit-scrollbar {
  display: none;
}


body {
  -ms-overflow-style: none; 
  scrollbar-width: none; 
}