.about-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 15px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 60px;
}

.about-heading {
    text-align: center;
    margin-bottom: 20px;
    animation: fade-in 1s ease; /* Initial fade-in on load */
}

.about-content {
    display: grid;
    grid-template-columns: minmax(auto, 350px) minmax(auto, 500px);
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.profile-pic {
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    width: 300px;
    height: 300px;
    object-fit: cover;
    transition: transform 0.5s ease;
    animation: zoom-in 2s ease-in-out infinite alternate;
}

.about-content p {
    max-width: 500px;
    margin: 0 auto;
    text-align: justify;
    opacity: 0; /* Initially hidden */
    transform: translateX(-20px); /* Initially translated */
    animation: fade-in 1s ease forwards; /* Fade-in on load */
    animation-delay: 0.5s;
}

/* Animation keyframes */
@keyframes zoom-in {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

@keyframes fade-in {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@media (max-width: 767px) {
    .about-container {
        height: 100vh;
        padding: 20px;
    }
    .about-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-content img {
        margin: 0 auto;
        margin-bottom: 10px;
    }
    .about-content p {
        max-width: 90%;
    }
}

@media (max-width: 250px) {
    .about-container {
        padding: 10px;
        height: 100vh;
    }
    .profile-pic {
        width: 150px;
        height: 150px;
    }
    .about-heading {
        font-size: 1.2em;
    }
    .about-content p {
        font-size: 0.9em;
    }
}

/* Scroll animation styles */
.about-heading,
.about-content {
    opacity: 0; /* Initial state for animation */
    transform: translateY(20px); /* Initial translate for animation */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Transition properties */
}

.is-visible {
    opacity: 1; /* Final state for animation */
    transform: translateY(0); /* Reset translate */
}