
.about-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px; /* Reduced margin */
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start with a slight downward offset */
    animation: fadeInUp 0.6s forwards; /* Apply animation */
    animation-delay: 0.2s; /* Delay the animation slightly */
    width: 100%; /* Stretch to full width */
    margin-left: 40px; /* Shift the section to the right */
}

#profile-pic {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-right: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.about-text {
    max-width: 800px;
    text-align: left;
}

.about-text p {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.about-text i {
    margin-right: 10px;
    color: #ff729f;
}


.video-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}


.video-item {
    display: flex;
    flex-direction: row;      /* Side by side */
    align-items: center;      /* Vertically center */
    justify-content: center;  /* Horizontally center */
    gap: 24px;                /* Space between video and image */
    margin: 20px 0;
    width: 100%;
    max-width: 800px;         /* Adjust as needed */
}

iframe {
    width: 800px;            
    height: 250px;            
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.craft-image {
    width: 200px;             /* Smaller image */
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

@media (max-width: 855px) {
    .about-content span {
        font-size: 1em; /* Further adjust font size for very small screens */
    }

    .about-content {
        margin-left: 10px; /* Shift the entire content to the left */
    }

    .video-item {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the content vertically */
        width: 100%; /* Ensure full width */
        max-width: 400px; /* Remove maximum width constraint */
    }

    iframe {
        width: 100%; /* Ensure full width on smaller screens */
        height: auto; /* Maintain the aspect ratio */
    }

    .craft-image {
        width: 100%; /* Ensure full width on smaller screens */
        max-width: 200px; /* Remove maximum width constraint */
    }
}

@media (max-width: 475px) {
    .video-item {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center the content vertically */
        width: 80%; /* Ensure full width */
        max-width: 400px; /* Remove maximum width constraint */
    }

    iframe {
        width: 100%; /* Ensure full width on smaller screens */
        height: auto; /* Maintain the aspect ratio */
    }

    .craft-image {
        width: 100%; /* Ensure full width on smaller screens */
        max-width: 200px; /* Remove maximum width constraint */
    }

}


.email-link {
    color: #555; /* Set the color for the email link */
    text-decoration: none; /* Remove underline */
    font-size: 1em; /* Adjust font size as needed */
    display: flex;
    align-items: center;
    gap: 5px; /* Add space between the icon and the text */
}

@media (max-width: 390px) {    
    .animation-wrapper span {
        font-size: 0.7em; /* Further adjust font size for very small screens */
    }

    .about-text {
        text-align: center; /* Center the text */
        max-width: 40%; /* Reduce the width for smaller screens */
        margin-left: -10px; /* Shift the text slightly to the left */
    }

    .about-content span {
        font-size: 1em; /* Further adjust font size for very small screens */
    }

    .about-content {
        margin-left: -10px; /* Shift the entire content to the left */
    }
}

.email-link i {
    font-size: 1.2em; /* Adjust icon size as needed */
}

.email-link:hover {
    text-decoration: underline; /* Add underline on hover */
}