.whatsapp-button {
	display: inline-block; /* Maintain inline-block for proper button behavior */
	transition: all 0.2s ease-in; /* Smooth transition effects */
	position: relative; /* Required for hover effects */
	overflow: hidden; /* Prevent text clipping on hover */
	z-index: 1; /* Ensure button is above other elements */
	text-decoration: none; /* Remove underline from text */
	cursor: pointer; /* Indicate clickability */
	font-size: 18px; /* Consistent with your previous preference */
	border-radius: 0.5em; /* Rounded corners */
	
	/* Increased padding for bigger button */
	padding: 15px 30px;
	
	/* Adjust background and border colors as needed */
	background-color:  #25D366; /* Light gray background */
	color: #090909; /* Dark gray text */
	border: 1px solid #e8e8e8; /* Light gray border */
	box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff; /* Subtle shadow */
	
	/* Font family (choose a professional font) */
	font-family: sans-serif; /* Replace with desired font family */
  }
  
  .whatsapp-button:active {
	color: #666; /* Darker gray on button press */
	box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff; /* Inset shadow on press */
  }
  
  .whatsapp-button:before { /* Base ripple effect */
	color: #ffffff;
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%) scaleY(1) scaleX(1.25);
	top: 100%;
	width: 140%;
	height: 180%;
	background-color: rgba(0, 0, 0, 0.05); /* Transparent black */
	border-radius: 50%;
	display: block;
	transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
	z-index: -1;
  }
  
  .whatsapp-button:after { /* Secondary ripple effect (optional) */
	content: "";
	position: absolute;
	left: 55%;
	transform: translateX(-50%) scaleY(1) scaleX(1.45);
	top: 180%;
	width: 160%;
	height: 190%;
	background-color: #009087; /* Green color for the second ripple */
	border-radius: 50%;
	display: block;
	transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
	z-index: -1;
  }
  
  .whatsapp-button:hover {
	color: #ffffff; /* White text on hover */
	border: 1px solid #009087; /* Green border on hover */
  }
  
  .whatsapp-button:hover:before {
	top: -35%; /* Animate ripple effect on hover */
	background-color: #009087; /* Green color for the first ripple on hover */
	transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  
  .whatsapp-button:hover:after { /* Animate secondary ripple (optional) */
	top: -45%;
	background-color: #009087; /* Green color for the second ripple on hover */
	transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
  .whatsapp-button{
	width: 180px;
}
	
.button-container {
	display: flex; /* Enable flexbox layout */
	flex-direction: column; /* Stack buttons vertically */
	align-items: left; /* Horizontally center buttons */
  }

  




body {
	overflow: hidden;
}



body {
	background: #e8e8e8;
}
.form-area {
	padding-top: 7%;
}
.row.single-form {
	box-shadow: 0 2px 20px -5px rgba(0,0,0,0.5);
}
.left {
	background: #5d3fc3;
	padding: 200px 98px;
}
.left h2 {
	font-family: poppins;
	color: #fff;
	font-weight: 700;
	font-size: 48px;
}
.left h2 span {
	font-weight: 100;
}
.single-form{
    background: #fff;
}
.right {
	padding: 70px 100px;
	position: relative;
}
.right i {
	position: absolute;
	font-size: 80px;
	left: -27px;
	top: 40%;
	color: #fff;
}
.form-control {
	border: 2px solid #000;
}
.right button {
	border: none;
	border-radius: 0;
	background: #252525;
	width: 180px;
	color: #fff;
	padding: 15px 0;
	display: inline-block;
	font-size: 16px;
	margin-top: 20px;
	cursor: pointer;
}
.right button:hover{
    background-color: #252525;
}


/*responsive*/

@media (min-width:768px) and (max-width:991px){
    .right i {
	top: -52px;
	transform: rotate(90deg);
	left: 50%;
}
}

@media (max-width:767px){
    .left {
  padding: 90px 15px;
  text-align: center;
}
.left h2 {
  font-size: 25px;
}
.right {
  padding: 25px;
}
.right i {
  top: -52px;
  transform: rotate(90deg);
  left: 46%;
}
    .right button {
	width: 150px;
	padding: 12px 0;
}
    
}