/* About Section */
#about {
    text-align: center;
    padding: 50px 10%;
    max-width: 900px;
    margin: auto;
}

#about ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

#about ul li {
    font-size: 1.3em;
    font-weight: bold;
    margin: 10px 0;
}

#about ul li::before {
    content: "❖";
    color: #7b0202;
    font-size: 1.2em;
    margin-right: 8px;
}

/* About Container */
.about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    max-width: 700px;
    margin: auto;
    text-align: center;
}

/* Profile Picture */
.profile-pic {
    width: 200px;
    height: 200px;
    margin-bottom: -10px;
    border-radius: 50%;
    border: 3px solid #7b0202;
    box-shadow: 0px 0px 15px rgba(139, 0, 0, 0.7);
    transition: transform 0.3s ease-in-out;
}

.profile-pic:hover {
    transform: scale(1.05);
}

/* About Text */
.about-text {
    opacity: 0;
    animation: fadeIn 1s forwards;
    font-size: 1.2em;
    line-height: 1.7;
    max-width: 600px;
    color: white;
}

/* About Section */
#about {
    text-align: center;
    padding: 50px 10%;
    max-width: 900px;
    margin: auto;
}

#about ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

#about ul li {
    font-size: 1.3em;
    font-weight: bold;
    margin: 10px 0;
}

#about ul li::before {
    content: "❖"; /* Ornate bullet */
    color: #7b0202;
    font-size: 1.2em;
    margin-right: 8px;
}


/* Flexbox for Image & Text */
.about-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Stack image and text for better balance */
    gap: 20px;
    max-width: 700px; /* Widens text area slightly */
    margin: auto;
    text-align: center;
}

/* Profile Picture */
.profile-pic {
    width: 200px; /* Slightly larger for prominence */
    height: 200px;
    margin-bottom: -10px; /* Moves text slightly closer */
    border-radius: 50%;
    border: 3px solid #7b0202;
    box-shadow: 0px 0px 15px rgba(139, 0, 0, 0.7);
    transition: transform 0.3s ease-in-out;
}

.profile-pic:hover {
    transform: scale(1.05); /* Subtle hover effect */
}

/* About Text */
.about-text {
    opacity: 0;
    animation: fadeIn 1s forwards;
    font-size: 1.2em; /* Slightly larger */
    line-height: 1.7;
    max-width: 600px; 
    color:white;
}

/* Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}