@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animated {
    animation: fadeIn 1s ease-in-out;
}

/* Add hover effect for the heading */
h2:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}
button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

.content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px; /* Add padding here */
}

.left-side,
.right-side,
.right-image {
flex: 1;
}

.right-side {
max-width: 600px; /* Adjust as needed */
padding: 0 20px; /* Add padding for text and button */
text-align: center;
}

.right-side h2 {
font-size: 2em;
}

.right-side p {
font-size: 1.2em;
}

button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
border-radius: 5px;
}

button:hover {
background-color: #0056b3;
}

@keyframes motionLeft {
0% { transform: translateX(-10px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}

@keyframes motionRight {
0% { transform: translateX(10px); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}

.right-image img {
    max-width: 78%;
    height: auto;
    padding-left: 210px;
    animation: motionLeft 1s ease-out, fadeIn 1s ease-in-out;
    border: none;
}

.right-image img {
animation-name: motionRight, fadeIn; /* Apply different animation to right image */
}

.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
color: white;
}