@media (max-width: 991.98px) {

	/*Global*/
	.sections-detail {
		margin: 0 0 30px;
	}
	/*Pop*//*Nothing*/

	/*header*/
	.header-right {
		display: flex;
		color: #fff;
		align-items: center;
	}
	.header-right a{
	   
		color: #ffffff;
	}
    .header-left img {
		max-width: 300px;
		height: auto;
	}
	.menu-icon {
		display: flex; /* Show menu icon on mobile */
	  }
	  
	  .menu {
		display: flex; /* Show menu items by default on mobile */
		flex-direction: column;
		background-color: #7b6cd5;
		position: fixed; /* Fixed position for sliding side menu */
		top: 0;
		right: -250px; /* Start with the menu off-screen */
		width: 250px; /* Adjust width as needed */
		height: 100%; /* Cover the entire viewport */
		padding: 10px;
		transition: right 0.3s ease; /* Add smooth sliding animation */
	  }
	  
	  .menu.active {
		right: 0; /* Slide the menu in when active */
		z-index: 1000;
	  }
	  .menu li {
		margin-right: 20px;
		margin-top: 10px;
	}
	  .overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
		display: none; /* Initially hidden */
		z-index: 999; /* Place it above the content but below the menu */
		transition: opacity 0.3s ease; /* Add smooth fade animation */
	  }
	  
	  .menu.active + .overlay {
		display: block; /* Show the overlay when the menu is active */
	  }
	  .close-button {
		position: absolute;
		top: 10px;
		right: 10px; /* Adjust the position as needed */
		background: none;
		border: none;
		cursor: pointer;
		font-size: 16px;
		color: white;
	  }
	  
	  /* Add styles for the close button hover effect if needed */
	  .close-button:hover {
		text-decoration: underline;
	  }	  
	  
/*Banner*/
.banner-outer-img {
	background-image: url(http://kakaverivilayankulam.com/img/5.jpg);
	background-size: 200%;
    background-position-y: center;

  }
.banner-section-1 {
	display: flex;
	flex-direction: row; /* Arrange items horizontally */
	align-items: center; /* Vertically center items */
	padding: 20px;
  }
  
  .banner-text {
	flex: 1; /* Take up available space */
	padding: 20px;
	width: 70%; /* Adjusted to cover 70% */
	font-size: 18px; /* Adjust font size for smaller screens */
	  }
	.banner-text p {
		font-size: 18px;
	}  
	.banner-text h1 {
		font-size: 13px!important;
	}
  
  .banner-image {
	 /* Take up available space */
	text-align: right;
	display: inline;
	width: 30%; /* Adjusted to cover 30% */
  }
  
  .banner-image img {
	max-width: 100%; /* Ensure the image doesn't exceed its container width */
	height: auto; /* Maintain the image's aspect ratio and fit within the container height */
  }
  .controls {
    text-align: center;
  }

  .controls button {
    padding: 8px 10px;
    font-size: 14px;
  }
	/*Service*/
	.temple-template .service-section .service-detail > div {
		margin-bottom: 40px;
	}
	.temple-template .best-class-club .detail-col-club {
		padding-right: 15px;
		
	}
	/*Class temple Club*/
	.temple-template .best-class-club .best-class-club-desc {
		padding: 60px 30px;
	}
	.temple-template .best-class-club .best-class-club-img {
		padding: 400px 0;
	}
	.temple-template .header .logo {
		font-size: 20x;
	}
	/*Navigation list*/
	nav ul {
		display: inline-flex;
	}
	/*Slider*/
	.temple-template  .Slider-section {
		padding: 30px 15px;
	}
	.temple-template  .Slider-section {
		background-image: url(../img/Slider-of-temple-mobile.jpg);
	    background-size: cover;
	    background-repeat: no-repeat;
	    background-position: center center;
	}
	.temple-template  .Slider-section .section-title{
		color: #fe86d4;
	}
	.temple-template  .Slider-section .section-title-desc {
		color: #fff;
	}
	.temple-template .Slider-section .Slider-detail-title {
		color: #fe86d4;
    	margin-top: 10px;
	}
	.temple-template .Slider-section .Slider-detail-desc {
		color: #fff;
	}
	.temple-template .Slider-section .Slider-detail-soul,
	.temple-template .Slider-section .Slider-detail-health,
	.temple-template .Slider-section .Slider-detail-relax,
	.temple-template .Slider-section .Slider-detail-energy,
	.temple-template .Slider-section .Slider-detail-mind,
	.temple-template .Slider-section .Slider-detail-meditat {
		width: 100%;	
		text-align: center;
		margin: 0 auto 24px;
	}
	/*temple Place*/
	.temple-template .templePlace-section .templePlace-col > div{
		margin-bottom: 40px;
	}
	/*Contact us*/
	.temple-template .contact-section .appointment 
	.appointment-form .box-select::before {
	    content: "\f0dd";
	    font-family: "Font Awesome 5 Free";
	    position: absolute;
	    top: 41%;
	    right: -0.5%;
	    width: 35px;
	    height: 38px;
	    text-align: center;
	    font-size: 14px;
	    line-height: 37px;
	    color: rgb(255, 255, 255);
	    background-color: rgb(123, 108, 213);
	    font-weight: 600;
	    border-radius: 3px;
	    transform: translate(-50%, -50%);
	}
	.temple-template .contact-section .appointment 
	.appointment-form .appointment-form-col-left {
		padding-right: 15px;
	}
	.temple-template .contact-section .appointment 
	.appointment-form .appointment-form-col-right {
		padding-left: 15px;
	    padding-right: 15px;
	}
	/* Trainers*/
	.temple-template .trainer-section .trainer-col {
		margin-bottom: 0px;
	}
	.temple-template .trainer-section .trainer-col > div{
		margin-bottom: 40px;
	}
	/*Copyright*/
	.temple-template .footer .copyright,
	.temple-template .footer .copyright .social {
		text-align: center;
	}
	.row {
		flex-direction: column-reverse;
	  }
}

@media (max-width: 767.98px)  { 
	/*header*/
	
	/*Contact us*/
	.temple-template .contact-section .appointment 
	.appointment-form .box-select::before {
	    content: "\f0dd";
	    font-family: "Font Awesome 5 Free";
	    position: absolute;
	    top: 41%;
	    right: -0.6%;
	    width: 35px;
	    height: 38px;
	    text-align: center;
	    font-size: 14px;
	    line-height: 37px;
	    color: rgb(255, 255, 255);
	    background-color: rgb(123, 108, 213);
	    font-weight: 600;
	    border-radius: 3px;
	    transform: translate(-50%, -50%);
	}
	.row {
		flex-direction: column-reverse;
	  }
	  
	.Gallery img {
		width: 97%;
		margin-top: 5px;

	}
	/*Global*/
	.sections-detail {
		margin: 0 0 30px;
	}

}