@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Akshar:wght@500&family=Baloo+2:wght@600&family=Biryani:wght@700&family=Dhurjati&family=Eczar&family=Gidugu&family=Gurajada&family=Hind+Vadodara:wght@600&family=Mallanna&family=Martel:wght@600&family=Mukta+Vaani:wght@500&family=NTR&family=Noto+Sans+Devanagari&family=Noto+Sans+Telugu&family=Noto+Serif+Gujarati:wght@800&family=Palanquin:wght@700&family=Peddana&family=Rajdhani:wght@500&family=Ravi+Prakash&family=Sahitya&family=Sree+Krushnadevaraya&family=Sura&family=Suranna&family=Teko:wght@500&family=Tenali+Ramakrishna&family=Timmana&family=Tiro+Devanagari+Hindi&family=Tiro+Devanagari+Marathi&family=Tiro+Devanagari+Sanskrit&display=swap');

	a {
		text-decoration:none;
		color:#000;
	}
 

.background_setting{
	background-color:#242323;
}



  .right_icon{
	color:#fff;
	font-size:18px;
	display:none;
}
.left_icon{
	color:#fff;
	font-size:18px;
	display:none;
}



  .right_touch{
	position:absolute; top:0px;  right:0px; height:100%; width:50%;
}

.left_touch{
	position:absolute; top:0px; left:0px; height:100%; width:50%;
}

     .gradientback_top{

    position:absolute;
     top:0px;
    left:0px;
    width:100%;
    height:20%;
        background: linear-gradient(to top,  rgba(137,255,241,0) 0%,rgba(0,0,0,0.6) 100%); 

}
.story {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
	background-color:rgba(181,181,181,0.5);
  padding: 1.5px 15px;
  border-radius:10px;
  cursor: pointer;
}

.story.active {
  background-color:#fff;
}

  .main_window_stories {
	height:100%;
}

 .container_story {
	height:100%;
}


	body {
		
		  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	 
	 
	}
	
	
::-webkit-scrollbar {
  width: 0px;
  height:0px;

}


 

::-webkit-scrollbar-thumb {

  background: #bbbdbb; 
}

 

.main_window {
	height:100%;
}
.sd {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
}
  .sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
   overflow-x: hidden;
 transition: 0.1s;
  text-align:center;
}




 .menuNav {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  display:none;
   overflow-x: hidden;
 transition: 0.1s;

  text-align:center;
}



  .botnav {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 0;
  display:none;
   overflow-x: hidden;
 transition: 0.1s;

  text-align:center;
}


     .inline-list {
              list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
        }

        .inline-list li {
			 white-space: nowrap;
			font-size:12px;
            display: inline;
 			     margin-right: 10px;
            padding: 6px 12px;
            background-color: #007bff;
            color: #fff;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
		
		  .inline-list li:hover {
            background-color: #0056b3;
        }
		
		.cate_grid {
			margin-bottom:5px;
			background-color:#eee;
			color:#000;
			cursor:pointer;
			border-radius:5px;
			padding:10px;
			font-weight:normal;
			font-size:14px;
			border:1px solid #000;
			
		}
		
    /* CSS styles for the product cards */
    .product-card {
		cursor:pointer;
		border:1px solid #ccc;
      background-color:#eee;
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .product-card img {
      width: 100%;
	  
	    
        height: 250px; /* Set the height as per your requirement */
        object-fit: cover; 
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    .product-card .card-body {
      padding: 5px;
    }
	
	
	 /* Custom CSS for horizontal to vertical transition */
    .category-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    .category-item {
		cursor:pointer;
			  font-size:14px;
padding:4px 8px;
		    flex: 0 0 auto;
			font-weight:bold;
			border:1px solid #999;
			border-radius:20px;
			margin-bottom:5px;
      margin-right: 10px; /* Adjust spacing */
	  
    }
	
	
@media only screen and (min-width: 800px) {      
	  .transform_div{
		 width:85%;
		  <!--  transform: scale(0.9);  transform-origin: top center; -->
		   
	  }
	  
	  
	  
    }
	
	.opt_btn{
 border-radius:18px; 
padding:2px 8px;
border:1px solid #fff;	
font-size:10px;
color:#fff;
cursor:pointer;
	}
	
	
	.navbar-toggler{
		border:none;
		
	}
	
	.navbar-toggler:active{
		border:none;
	}
	
	
	
	
	
.range {
	
  -webkit-appearance: none;
 background-color:orange;
  cursor: pointer;
  height: 3px;
  margin: 0;
  transitionx: 0.1s ease-in;
  vertical-align: center;
  width: 100%;
}
.wrap:hover .range,
.wrap.hover .range { height: 4px; }

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #aeaeae;
  border-radius: 8px;
  box-shadow: inset 0 0 0 5px #eaeaea;
  height: 8px;
  transitionx: 0.1s ease-in;
  width: 8px;
}
.wrap:hover .range::-webkit-slider-thumb,
.wrap.hover .range::-webkit-slider-thumb {
  width: 10px;
  height: 10px;
}



.menu_opt{
	font-size:16px; 
	padding:10px 10px;
	cursor:pointer;
	
}
.menu_opt:hover {
	background-color:#eee;
	
}

    .container_next {
        position: relative;
        
		border-radius:4px;
		
        overflow: hidden;
    }



 .more_sec {
         width: 100%;
          color: #fff;
        display: none;
				box-shadow: 0 4px 8px 0 rgba(244, 244, 0, 0.2);

        animation: slideIn 0.2s ease forwards;
    }
	
	
	
	 .menuNavanim {
         
          
        
				box-shadow: 0 4px 8px 0 rgba(244, 244, 0, 0.2);

        animation: slideOut 0.2s ease forwards;
    }
	
	
	
    .box {
 		overflow:hidden;
		 
        
        width: 100%;
          color: #fff;
        display: block;
 
        animation: slideIn 0.5s ease forwards;
    }

    @keyframes slideIn {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
	
	
	
	  @keyframes slideOut {
		  from {
            transform: translateY(-100%);
        }
        to {
            transform: translateX(0);
        }
        
    }
	
	
	
	
	.mobile_f_height
	{
		height:100%;
	}
	
	
	  .maxtext {
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
     font-family: Arial, sans-serif;
	  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	  font-size:18px;
}

 .bottopanim {
         
      animation: bottomtotop 0.8s ease forwards;
    }
	
	
	   @keyframes bottomtotop {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0);
        }
    }
	
	
	
	
.typewriter-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: .0em;

}

.repeat {
  animation: none;
  animation: typing 1s steps(40, end), blink-caret .75s step-end infinite;
}


@keyframes typing {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}