.heading{
	width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	margin: 20px auto;
	margin-top: 50px;
}
.heading h2{
	font-size: 40px;
	color: #000;
	margin-bottom: 25px;
	position: relative;
}
.heading h2::after{
	content: "";
	position: absolute;
	width: 100%;
	height: 4px;
	display: block;
	margin: 0 auto;
	background-color: darkred;

}
.heading p{
	font-size: 18px;
	color: black;
	margin-bottom: 35px;
	
	}

.container{
	width: 90%;
	margin: 0 auto;
	padding: 10px 20px;
}
.about{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.about-image{
	flex: 1;
	margin-right: 40px;
	overflow: hidden;


}
.about-image img{
	max-width: 100%;
	height: auto;
	display: flex;
	transition: 0.5s ease;
	margin-left: 10px;
}
.about-image:hover img{
transform: scale(1.2);
}
.about-content{
	flex: 1;
}
.about-content h2{
	font-size: 23px;
	margin-bottom: 15px;
	color: #333;
}
.about-content p{
	font-size: 18px;
	line-height: 1.5;
	color: black;
text-align: justify;}

.about-content .more{
	display: inline-block;
	padding: 10px 20px;
	color: white;
	background-color: darkred;
	font-size: 19px;
	text-decoration: none;
	border-radius: 25px;
	margin-top: 15px;
	transition: 0.3s ease;
}
.about-content .more:hover{
	background-color: darkred;
}

.animated-div {
  animation: fadeIn 3s ease-out forwards; 
  text-align: center;
  font-size: 50px;
  color: black;/* 3 seconds duration, ease-out, stays at end state */
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.sliding-text {
  position: relative; /* Essential for positioning during animation */
  left: -100%; /* Start off-screen */
  opacity: 0;
  transition: left 1s ease-out, opacity 1s ease-out; /* Smooth transition */
}

.sliding-text.active {
  left: 0;
  opacity: 1;}

  .slide-in-text {
  animation: slideIn 2s forwards; /* Animation name, duration, and fill-mode */
  opacity: 0; /* Start hidden */
}

@keyframes slideIn {
  from {
    transform: translateX(-100%); /* Start off-screen to the left */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* End at its original position */
    opacity: 1;
  }
}