body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(to left, #ffffff, #dddddd);
    margin: 0;
    padding: 0;
    animation: backgroundFade 5s ease-in-out infinite;
}

header {
    background-color: #db9d0e;
    color: white;
    padding: 0; /* Remove padding here for more precise centering */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px; /* Ensure the height is consistent */
    display: flex; /* Use flexbox for the header */
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    height: 80px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 100px; /* Add gap between items for spacing */
}

nav ul li {
    margin: 0; /* Remove margin here */
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
    font-size: 17px;
}

nav ul li a:hover {
    color: #add8e6;
}

/* Remaining CSS */
.about-section {
    margin: 60px 20px;
    text-align: center;
    animation: fadeIn 2s ease-in-out;
}

.profile-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 40px 0;
}

.profile-image {
    max-width: 250px;
    border-radius: 55%;
    margin: 0px 30px ;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.profile-image:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.profile-content {
    max-width: 700px;
    text-align: left;
    animation: slideIn 1.5s ease-in-out;
}
.nameaff{
    font-size: 3em;
    margin-bottom: 0;
}

.intro-text {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 20px;
    animation: textFadeIn 2s ease-in-out;
}

.project-text {
    font-size: 1em;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
    animation: textFadeIn 2s ease-in-out 0.5s;
}

.aspiration-text {
    font-size: 1em;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
    animation: textFadeIn 2s ease-in-out 1s;
}

.resume-button {
    background-color: #ff6347;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.resume-button:hover {
    background-color: #e55347;
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes slideIn {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}

@keyframes textFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}



@media (max-width: 768px) {
    .profile-container {
        flex-direction: column;
        text-align: center;
    }

    .profile-image {
        margin-bottom: 20px;
    }

    .profile-content {
        text-align: center;
    }
}
.about-section {
    border: 2px solid #aaa; /* Darker gray border for better visibility */
    padding: 20px; /* Slightly increased padding */
    margin: 20px;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow for better visibility */
}

.profile-image {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow for the image */
    border-radius: 50%; /* Keep the image rounded */
}