.slider {
    position: relative;
    display: flex;
}
	

.text {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    max-width: 40%;
    padding: 30px;
	margin-left:200px;
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.text h1,
.text p {
    color: black;
    font-family: 'Your Desired Font', sans-serif; /* Replace 'Your Desired Font' with the actual font you want to use */
    line-height: 1.6;
    margin-bottom: 20px; /* Adjust margin as needed */
}

.text h1 {
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 10px;
}

.text h2 {
    color: #3498db;
	font-weight: bold;
	font-size: 20px;
    font-style: italic;
    margin-bottom: 15px;
}



.slideshow {
  position: relative;
  z-index: 1;
  background-color:gray;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: gray;
  display: none;
  border-radius: 50%;
  cursor: pointer;
}

.dot:hover {
  background-color: green;
}

.slider {
  animation-name: slider;
  animation-duration: 1.5s;
}

@keyframes slider {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}


.container1 {
    width: 80%;
    max-width: auto;
    margin: 0 auto;
    display: flex;
    
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
	margin-bottom:20px;
}

.left-content img {
    max-width: 80%;
    height: auto;
    display: block;
    border-radius: 8px;
	margin-left:10%;
}

.left-content,
.right-content {
    flex: 1;
    padding: 20px;
}

.right-content h1 {
    color: #666666;
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 10px;

}

 span.highlight {
      display: inline-block;
      animation: flipText 2s linear infinite; /* Adjust the duration and timing function as needed */
      transform-origin: center;
	  color: orange;
    }

    @keyframes flipText {
      0%, 100% { transform: rotateX(0deg); }
      50% { transform: rotateX(90deg); }
    }
	
.right-content h2 {
    color: green;
    font-size: 24px;
    font-style: italic;
    margin-bottom: 16px;
}

.right-content p {
    color: #666;
	line-height: 1.8;
    font-size: 16px;
    
    margin-bottom: 20px;
	margin-right:5%;
	text-align: justify;

}
/**/
.container76{
    background-color: #f5f5f5;
}
.container2 {
    margin: 0;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    background-color: #f5f5f5;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
    margin-top: 20px;
}
 
.group-heading {
    width: 100%;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 20px;
    text-align: center;
    font-size: 2rem;
    color: #333;
    font-family: "Open Sans", sans-serif;
     line-height: 1.6;

}

.division {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 20px;
    margin-left: 10px;
    align-items: center; /* Center content vertically */
}


.division-content {
    margin-bottom: 20px;
}
.division-content p {
  color: #666;
  margin-top: 50px;
	line-height: 1.8;
    font-size: 16px;
    text-align: justify;
}

.division2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-right: 0px;
    align-items: center; /* Center content horizontally */
}

.button-container {
    padding: 20px;
   
    text-align: center;
}
.color-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.blue { background-color: rgb(15, 82, 226); }
.black { background-color: black; }
.gray { background-color: rgb(110, 110, 110); }
.white { background-color: white}
.yellow { background-color: yellow; }
button {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    
    color: white;
    border-radius: 45px;
    transition: background-color 0.3s ease;
}

 

.image-container {
    text-align: center;
}

.image-box {
    display: inline-block;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #f5f5f5;
}

img {
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .container2 {
        flex-direction: column; /* Change flex direction to column for small screens */
    }

    .division {
        margin-left: 0; /* Remove left margin for better alignment */
    }

    .division2 {
        margin-top: 0; /* Remove top margin for better alignment */
    }

    .group-heading {
        font-size: 20px; /* Decrease font size for better fit on small screens */
    }

    .button-container {
        padding: 10px; /* Decrease padding for better spacing */
    }

    button {
        
        font-size: 14px; /* Decrease font size for better fit on small screens */
    }
}
@media screen and (min-width: 1000px) and (max-width:1500px) {
  .division-content p {
    color: #666;
    margin-top: -20px;
    line-height: 1.8;
      font-size: 16px;
      text-align: justify;
  }

}

    .right-content {
        margin-left: 0px;
		margin-right:0px;
    }
	
	.right-content h1 {
		text-align: center;
		font-size:30px;
	}
	.right-content h2 {
		font-size:20px;
		text-align: center;
	}
	







/* Add a class to style the menu toggle */
.menu-toggle {
    font-size: 24px;
    cursor: pointer;
    display: none;
}




.service-sector p {
    text-align: center;
    color: green;
    font-size: 15px;
   
}

.service-sector {
	    color: green;
margin-top: 20px;
    margin-bottom: 20px;
    text-align: center; /* Add this line to center-align the content */
}

.services {
    margin-left: auto;
    margin-right: auto;
    width: 80%; /* Adjust the width based on your preference */
    overflow: hidden; /* Clear floats within the .services container */
	margin-bottom: 50px;
}

.sector {
    margin: 10px;
    float: left;
    width: 23%; /* Adjust the width based on your preference */
    border: none;
    text-align: center;
    padding: 10px;
}

.sector img {
    height: 200px;
    width: 100%; /* Make the image responsive within the .sector container */
}

.details {
    text-align: center;
    margin: 10px;
    padding: 10px;
}

.details a {
    text-decoration: none;
    line-height: 30px;
    color: green;
}

.details a:hover {
    color: orange;
}


 .batterys-container,
        .division-container {
            max-width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
			
        }

        .batterys.content
         {
			max-width: 80%;
            padding: 10px;
            margin: 10px;
        }

        .batterys.content h2{
            margin-left: 10px;
			font-size:13px;
        }
		.batterys.content h3{
            margin-left: 10px;
			font-size:25px;
			color: #666;
        }

        .batterys.image img {
        align-items: left;
        }

        .batterys h2 {
			color: #666;
			line-height: 1.6;            
			margin-bottom: 10px;
        }

        .division-container {
            margin-top: -50px;
			background-color: white;
        }

        .division {
            flex: 1;
            box-sizing: border-box;
            padding: 20px;
            margin: 10px;
            width: 100%;
        }

        .left, .center, .right {
            flex: 1;
        }

        .battery h1 {
			color: #666;
			line-height: 1.6;            
			text-align: left;
            font-size: 18px;
        }

        .battery p {
            color: #666;
			line-height: 1.6;
            font-size: 12px;
            text-align: justify;
            text-align: left;
        }

        .battery-icon {
            font-size: 50px;
            text-align: left;
			opacity:0.5;
        }

        .warranty-icon {
            font-size: 50px;
            color: black;
            align-items: left;
						opacity:0.5;

        }

        .automated-battery-icon {
            font-size: 50px;
						opacity:0.5;

        }
		
		

        .additional-section {
            text-align: center;
            border-radius: 10px;
            width: 80%; /* Adjust the width based on your preference */
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          }
        
          .additional-section h2 {
            text-align: center;
            font-size: 2rem;
            color: #333;
            font-family: "Open Sans", sans-serif;
             line-height: 1.6;
       
          }
        
          .additional-divisions {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
          }
        
          .additional-left,
          .additional-right {
            flex: 1;
            padding: 20px;
          }
        
          .additional-left p {
            font-size: 16px;
            color: #666;
            text-align: left;
            padding: 10px;
            border-bottom: 1px solid #eee;
            margin: 0;
          }
        
          .additional-left p:last-child {
            border-bottom: none;
          }
        
          .additional-left img {
            width: 20px;
            height: auto;
            margin-right: 10px;
            vertical-align: middle;
          }
        
          .additional-right img {
            width: 100%;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          }
        
          @media screen and (max-width: 768px) {
            .additional-section {
              width: 90%;
            }
        
            .additional-left,
            .additional-right {
              flex: 1 1 100%;
            }
        
            .additional-left p {
              font-size: 14px;
            }
          }



 .header12 {
            background-color: transparent;
            font-size: 15px;
            padding: 20px;
            text-align: center;
			color: #666;
			line-height: 1;
        }
		.header12 h2{
      text-align: center;
      font-size: 2rem;
      color: #333;
      font-family: "Open Sans", sans-serif;
       line-height: 1.6;
 
    }
		.header1 {
            background-color: transparent;
            text-align: center;
			color: #666;
			font-style:italic;
			font-size: 12px;


        }

        .section8-1,
        .section8-2,
        .section9 {
            display: flex;
            justify-content: space-around;
            margin: 20px;
            width: 80%;
            margin: 20px auto;
            /* Center horizontally using margin:auto */
            text-align: center;
            justify-content: center;
            flex-wrap: wrap;
            /* Allow content to wrap to the next line */
        }

        .conten {
            flex: 1;
            display: flex;
            align-items: center;
            background-color: white;
            padding: 10px;
            margin: 10px;
            text-align: left;
            width: 50%;
			background-color: white;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

            /* Adjust width to control spacing */
        }

        .conten img {
            width: 15%;
           height: auto;
            margin-right: 20px;
            /* Adjust the margin between image and text */
        }

        .conten h4 {
            margin-bottom: 10px;
            color: blueviolet;
            font-size: 18px;
			color: #666;
			line-height: 1.6;
        }

        .conten i ,p{
            margin-right: 20px;
            /* Adjust the margin to control the space between the icon and the heading */
           color: #666;
			line-height: 1.6;
        }

        .section9 {
            display: flex;
			background-color: white;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            justify-content: space-around;
            width: 100%;
            margin-top: 20px;
            /* Center horizontally using margin:auto */
            text-align: center;
            justify-content: center;
			margin-bottom:20px;
        }

        .content9 {
            flex: 1;
            display: flex;
            align-items: center;
            padding: 10px;
            margin: 10px;
            text-align: left;
            width: 30%;
            /* Adjust width to control spacing */
        }

        .content9 img {
            width: 15%;
            height: auto;
            /* Adjust image width */
            margin-right: 20px;
            /* Adjust the margin between image and text */
        }

        .content9 h4 {
            margin-bottom: 10px;
           color: #666;
            font-size: 18px;
        }

        .content9 p {
           
            margin-right: 10px;
           color: #666;
			
            /* Adjust the margin between image and text */
        }


        .content9 i {
            margin-right: 20px;
            /* Adjust the margin to control the space between the icon and the heading */
            color: black;
        }

        @media screen and (max-width: 768px) {
	
.header1
{
	margin:10px;
}	
			
    .section8-1,
    .section8-2,
    .section9 {
        flex-direction: column;
        width: 100%;
		

    }

    .conten,
    .content9 {
        width: 100%;
		text-align:justify;

    }
	.conten
	{
		margin-right:10px;
	}

    .content9 {
        margin-bottom: 20px; /* Add margin between content9 items for better spacing */
    }
    p{
        margin-right: 10px;
    }
}



  



     
 .testimonial-container {
            max-width: 35%;
            margin: 30px auto;
            padding: 10px;
            background: url('5.jpg');
            border-radius: 8px;
            text-align: center;
            position: relative;
            overflow: hidden;
			height:50vh;
			opacity:0.7;
        }

        .header-container {
            margin-bottom: 20px;
        }

        .header-container h1 {
           
            margin-bottom: 10px;
            margin-left: auto;
            font-family: 'cursive', serif;
        }

        .testimonial-container .header-container h2 {
            color: black;
            margin-left: auto;
            margin-bottom: 15px;
			font-size:20px;
        }

        .testimonial-wrapper {
            display: flex;
            width: 70%; /* Set the width to accommodate all testimonials */
            transition: transform 0.5s ease-in-out;
			margin-left:17%;
        }

        .testimonial {
            flex: 0 0 100%;
            align-items: center;
            border-radius: 6px;
            padding: 10px;
            background-color: #fff;
            box-sizing: border-box;
            text-align: left;
            opacity: 0;
			height: auto;
            transition: opacity 0.5s ease-in-out;
        }

        .testimonial.active {
            opacity: 1;
			background-color:#001f3f; 
			
       }

        .testimonial.active h3 {
            color: white;
            padding: 10px;
        }

        .testimonial p {
            color: white;
            line-height: 1.5;
			text-align:justify;
			padding: 10px;
        }
	
	@media (max-width: 768px) {
		
	.testimonial-container
	{
max-width: 90%;	}	
		
    .testimonial-wrapper { 
        width: 100%;
        margin-left: 0;
        flex-direction: row;
        align-items: center;
    }

    .testimonial {
        flex: 0 0 100%; /* Adjust the width as needed */
        margin-right: 0;
    }
}
	
	
	
	 .contact {
            display: flex;
            width: 100%;
            height: 10%;
			font-family: Arial, sans-serif;
            margin-bottom: 0px;
			margin-top:10px;
            padding: 5px;
            justify-content: left;
			background-color:#f5f5f5;
        }

         
 .details {
    padding: 20px;
    width: 60%;
    margin-left: 40px;
   margin-top:8%;
    display: flex;
    flex-direction: column;
    line-height:1.5;
    justify-content: left;
}

.contact .details p
{
	
	color: #666666;
text-align: left;	
	
}

.contact .details h1
{
	color: #666666;
text-align: left;
font-size: 30px;
}


        
        textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        


        .custom-heading {
            text-align: center;
            font-weight: bold;

        }

        .contact h2 {
            text-align: center;
			margin-bottom:10px;
            font-style:italic;
            font-size: 18px;
			color: white;
        }
		


        .contact h3{
            color: black;
            font-size: 22px;
            font-weight: bold;
        }

        @media screen and (max-width: 768px) {
    .contact {
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    .details {
        width: 100%;
        margin:0px;
        border-radius: 8px 8px 0 0;
    }
	.contact .details h1
	{
	font-size:23px;	
	}
.contact .details p
	{
text-align: justify;
	}
}
	
	
	
  

        .contain {
            width: 100%;
			margin-top:20px;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			
			background-color: #ffffff;
        }

       .contain h2 {
        text-align: center;
        font-size: 2rem;
        color: #333;
        font-family: "Open Sans", sans-serif;
	      line-height: 1.6;
	
        }

        .accordion {
			
            margin-top: 20px;
        }

        .accordion-item {
            margin-bottom: 10px;
            position: relative;
			margin-left:20%;
        }

        /* Style for accordion headers */
        .accordion-header {
            padding: 10px;
            cursor: pointer;
            font-size: 18px;
			color: #687187;			
			line-height: 1.6;            
			position: relative; /* Ensure relative positioning for absolute arrow */

        }

        /* Style for visible accordion content */
        .accordion-content.active {
            display: block;
            padding: 10px;
        }

        /* Style for hidden accordion content */
        .accordion-content {
            display: none;
            padding: 10px;
			color: #687187;			
			line-height: 1.6;
			width:65%;
			font-size:16px;
        }

        /* Style for the arrow icon */
        .accordion-arrow {
            position: absolute;
            top: 60%;
            right: 10px;
            transform: translateY(-50%) rotate(0deg); /* Initial rotation */
            transition: transform 0.3s; /* Add transition for smooth rotation */
			margin-right:25%;
        }

        .accordion-arrow img {
            width: 20px; /* Set the width of your arrow image */
            height: 20px; /* Set the height of your arrow image */
        }

        .accordion-item.active .accordion-arrow {
            transform: translateY(-50%) rotate(-180deg); /* Rotate arrow when accordion is active */
        }

        @media screen and (max-width: 768px) {
            .contain {
                width: 98%;
				margin-left:5px;
            }
			.contain h2 {
				font-size:20px;
			}
			
			.accordion-header {
				margin-left:10px;
			font-size:15px;
			text-indent:-18px;
			margin-right:5px;			
			}
			
			.accordion-content {
			font-size:14px;
			width:85%;
			}
			.accordion-item {
				margin-left:0px;
			}
			.accordion-arrow {
				margin-right:0px;
			}
			.contain
			{
				margin-right:10px;
			}

            .accordion-arrow {
                right: 5px; /* Adjust the right position for smaller screens */
            }
            
        }
	
	      
 


 

@media only screen and (max-width: 768px) {
    /* Top Bar Styles */
    



/* General styles for the slideshow */
.slideshow {
    margin-top: 0;
}

.slides {
    display: none;
}

.slider {
    position: relative;
}

.slider img
{
	width:50%;
	height:auto;
}

/* Styles for left-aligned text */
.text.left {
    margin-left: 20%;
    text-align: center;
	    max-width: 70%;

}

.text.left h1 {
    margin-top: 30px;
    font-size:32px;
    margin-bottom: 10px;
    
}

.text.left p {
    font-size: 16px;
    margin-bottom: 20px;
    
}


    /* Container1 Styles */
    .container1 {
        flex-direction: column;
    }

    .left-content img {
        margin-left: 0px;
		max-width: 100%;
		
    }

   .right-content p
   
   {
	  		margin-right:0px;
 
   }

    .ren h1 {
        padding: 0 10px;
		        font-size: 30px;

    }

    .ren p {
        padding: 5px 10px;
		        font-size: 20px;

    }

    .ren-btn {
        font-size: 50px;
        bottom: 30px;
    }

    .ren-btn a {
        font-size: 18px;
        padding: 8px 12px;
    }
     
}

/*gallary*/
.gallery-container {
    max-width: 500px;
    margin: auto;
    background-color: #f5f5f5;
    border-radius: 10px;
    overflow: hidden;
    
  }
  
  .button-container {
    padding: 20px;
    text-align: center;
  }
  
  button {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
   
  
  .image-container {
    text-align: center;
  }
  
  .image-box {
    display: inline-block;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
     
  }
  
  .image-box img {
    max-width: 100%;
    height: 300px;
  }

/*
*, *:before, *:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  
   
  .skw-pages {
    overflow: hidden;
    position: relative;
    height: 80vh;
  }
  
  .skw-page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
  
  .skw-page__half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100vh;
    transition: transform 1s;
  }
  
  .skw-page__half--left {
    left: 0;
    transform: translate3d(-32.4vh, 100%, 0);
  }
  
  .skw-page__half--right {
    left: 50%;
    transform: translate3d(32.4vh, -100%, 0);
  }
  
  .skw-page.active .skw-page__half {
    transform: translate3d(0,0,0);
  }
  
  .skw-page__skewed {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 140%;
    height: 100%;
    transform: skewX(-18deg);
    background: #000;
  }
  
  .skw-page__skewed .skw-page__half--left {
    left: -40%;
  }
  
  .skw-page__skewed .skw-page__half--right {
    right: -40%;
  }
  
  .skw-page__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 30%;
    color: #fff;
    transform: skewX(18deg);
    transition: transform 1s, opacity 1s;
    background-size: cover;
  }
  
  .skw-page__content .skw-page__half--left {
    padding-left: 30%;
    padding-right: 30%;
    transform-origin: 100% 0;
  }
  
  .skw-page__content .skw-page__half--right {
    padding-left: 30%;
    padding-right: 30%;
    transform-origin: 0 100%;
  }
  
  .skw-page.inactive .skw-page__content {
    opacity: 0.5;
    transform: skewX(18deg) scale(0.95);
  }
  
  .skw-page__heading {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
  }
  
  .skw-page__description {
    font-size: 18px;
    text-align: center;
  }
  
  .skw-page__link {
    color: #FFA0A0;
  }
  
  .skw-page-1 .skw-page__half--left .skw-page__content {
    background-image: url('assets/images/ebike/yellow2.jpg');
}


  
  .skw-page-1 .skw-page__half--right .skw-page__content {
    background: lighten(#1C1C1C, 5%);
  }
  
  .skw-page-2 .skw-page__half--left .skw-page__content {
    background: lighten(#1C1C1C, 5%);
  }
  
  .skw-page-2 .skw-page__half--right .skw-page__content {
    background-image: url('assets/images/ebike/yellow2.jpg');
}

.skw-page-3 .skw-page__half--left .skw-page__content {
    background-image: url('assets/images/ebike/yellow2.jpg');
}
  
  .skw-page-3 .skw-page__half--right .skw-page__content {
    background: lighten(#1C1C1C, 5%);
  }
  
  .skw-page-4 .skw-page__half--left .skw-page__content {
    background: lighten(#1C1C1C, 5%);
  }
  
  .skw-page-4 .skw-page__half--right .skw-page__content {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg');
  }
  
  .skw-page-5 .skw-page__half--left .skw-page__content {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg');
  }
  
  .skw-page-5 .skw-page__half--right .skw-page__content {
    background: lighten(#1C1C1C, 5%);
  }
  @media screen and (max-width: 768px) {
    .skw-pages {
      height: auto;
      min-height: 100vh;
    }
  
    .skw-page__half {
      height: 50vh;
    }
  
    .skw-page__content {
      padding: 0 10%;
    }
  
    .skw-page__content .skw-page__half--left,
    .skw-page__content .skw-page__half--right {
      padding: 0 5%;
    }
  
    .skw-page__heading {
      font-size: 20px;
    }
  
    .skw-page__description {
      font-size: 16px;
    }
  }*/
  
  /*banner*/
  .banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    gap: 50px;
    padding: 0 80px;
    text-align: center;
    height: 600px; /* Change height to min-height */
    background: #ffffff;
  }
  
  .banner > img {
    width: 500vw;
    transition: 0.1s linear;
  }
  
  .banner h2 {
    font-weight: 500;
    font-size: 30px;
    margin: 0 0 10px;
  }
  
  .banner p {
    margin: 0;
    line-height: 1.65;
    font-size: 17px;
    opacity: 0.7;
  }
  
  @media (min-width: 420px) {
    .banner > img {
      width: 90vw;
    }
  }
  
  @media (min-width: 648px) {
    .banner {
      text-align: left;
      flex-direction: row;
      justify-content: space-between;
    }
  
    .banner > img {
      width: 30vw;
    }
  }
  
  .waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: -1;
  }
  
  .waves > use {
    fill: #00ff00; /* Green color */
    animation: move-forever 2s -2s linear infinite;
  }
  
  .waves > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 6s;
  }
  
  .waves > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 3s;
  }
  
  @keyframes move-forever {
    0% {
      transform: translateX(-90px);
    }
    100% {
      transform: translateX(85px);
    }
  }
  
  svg {
    width: 100%;
    min-width: 2100px;
    margin-left: -200px;
    height: 100px;
    margin-top: 5px; /* Adjust this value as needed */
  }
  
  .pricing-row {
    display: flex;
    justify-content: space-between;
    margin-top: 50px; /* Adjust margin as needed */
  }
  
  .pricing-label {
    background: linear-gradient(to right, #e7982fde, #44c41d);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    color: white;
    padding: 10px;
    text-align: center;
    width: calc(50% - 10px); /* Adjust width as needed */
    animation: slideIn 0.5s ease-out forwards;
    transition: transform 0.3s ease;
    position: relative;
    margin-bottom: 20px; /* Add margin between pricing labels */
  }
  
  .pricing-label img {
    width: 100px; /* Adjust image size as needed */
    border-radius: 50%;
    margin-bottom: 20px;
  }
  
  .pricing-label:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  }
  
  .pricing-label h2 {
    font-size: 24px;
    margin-top: 0;
  }
  
  .pricing-label .price {
    font-size: 26px;
    font-weight: bold;
    color: #000;
    margin: 10px 0;
  }
  
  .pricing-label .price span {
    font-size: 16px;
    font-weight: normal;
  }
  
  .pricing-label ul {
    list-style: none;
    padding: 0;
  }
  
  .pricing-label ul li {
    margin-bottom: 5px;
    text-align: left;
    color: #000;
    margin-left: 20px;
  }
  
  .pricing-label button {
    background-color: #fff;
    color: #3f51b5;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    transition: background-color 0.3s, color 0.3s;
  }
  
  .pricing-label button:hover {
    background-color: #f9f9f9;
    color: #333;
  }
  
  @media (max-width: 767px) {
    .banner {
      padding: 20px; /* Adjust padding as needed */
      text-align: center; /* Center align content */
      height: auto; /* Remove fixed height */
    }
  
    .banner > img {
      width: 100%;
      max-width: 300px; /* Adjust max-width as needed */
      margin-bottom: 20px;
    }
  
    .banner h2,
    .banner p {
      text-align: center; /* Center align heading and paragraph */
    }
  
    .pricing-row {
      flex-direction: column; /* Display pricing labels in a column */
    }
  
    .pricing-label {
      width: 70%; /* Make pricing labels full width */
      margin: 0 auto;
      margin-bottom: 20px;
    }
  
    .pricing-label img {
     
      margin: 0 auto 20px; /* Center the image */
    }
  }
  @media (min-width: 1000px) and (max-width: 1500px) {
    .banner {
      padding: 20px; /* Adjust padding as needed */
      text-align: center; /* Center align content */
      height: auto; /* Remove fixed height */
    }
  
    .banner > img {
      width: 100%;
      max-width: 400px; /* Adjust max-width as needed */
      margin-bottom: 20px;
    }
  
    .banner h2,
    .banner p {
      text-align: center; /* Center align heading and paragraph */
    }
  
     
  }
  /*review*/