html {
    scroll-behavior: smooth;
    overflow-y: scroll; /* Ensure vertical scrolling */
}
.title {
top: 30px;
padding-top: 70px;
font-size: 30px;
color: #333;
z-index: 10;
text-align: center;
width: 100%;
}
p {
    padding-top: 20px;
font-size: 2VW;
font-family: "ClashdisplayR"; /* Ensure correct font is used */
margin-top: 20px; /* Space above the text */
text-align: center; /* Center the text below the images */
max-width: 600px; /* Set a max width for better alignment */
margin: 1px auto; /* Center the paragraph */
}

.container {
width: auto;
margin-top: 60px;
padding: 20px;
display: flex; /* Flexbox for side-by-side layout */
justify-content: space-between; /* Space between the two images */
align-items: flex-start; /* Align items to the top */
margin-bottom: 100px; /* Space between sections */
}

.image-wrapper {
position: relative; /* Positioning for overlay */
width: 45%; /* Ensure consistent width for images */
height: auto;
}
.text-wrapper {
    opacity: 0;
    transition: opacity 0.6s ease, transform 1s ease;
}

.text-wrapper.from-left {
    transform: translateX(-150px);
}

.text-wrapper.from-right {
    transform: translateX(150px);
}

.text-wrapper.show {
    opacity: 1;
    transform: translateX(0);
}

@media screen and (max-width:786px)
{
.container{
    display: block;
    margin: 0;
    padding-bottom: 50px;
    gap: 0;
}
p{
    gap: 0;
    padding: 2px;
    font-size: 2.5vh;
}
.image-wrapper{
    width: 100%;

}

}