/* style.css */

/* Global Styles & Resets */
*, *::before, *::after { /* Universal box-sizing */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* New Color Palette: Modern & Sophisticated */
    --color-dark-blue: #1B3C53;   /* Deep, primary dark for headings, main text, backgrounds */
    --color-medium-blue: #456882; /* Muted mid-tone blue for body text, secondary elements */
    --color-light-taupe: #D2C1B6; /* Soft, warm light brown/gray for backgrounds, subtle accents */
    --color-creamy-white: #F9F3E;  /* Very light, warm off-white for main backgrounds, cards */

    /* Shadows (adjusted to complement the new palette, using a darker base for more contrast) */
    --shadow-sm: rgba(0, 0, 0, 0.06);
    --shadow-md: rgba(0, 0, 0, 0.12);
    --shadow-lg: rgba(0, 0, 0, 0.18);

    /* Transitions */
    --transition-fast: 0.2s ease-out; /* Faster for some interactions */
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6; /* Slightly reduced for tighter, more formal look */
    background-color: var(--color-creamy-white); /* Main background */
    color: var(--color-medium-blue); /* Body text */
    overflow-x: hidden; /* Prevent horizontal scroll */
    scroll-behavior: smooth; /* Smooth scrolling to sections */
    -webkit-font-smoothing: antialiased; /* Better font rendering */
    text-rendering: optimizeLegibility;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px; /* Slightly adjusted padding */
}

h1, h2, h3 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-dark-blue); /* Headings */
}

h1 {
    font-size: clamp(3em, 8vw, 4.5em); /* Responsive font size */
    margin-bottom: 0.2em;
}

h2 {
    font-size: clamp(2em, 5vw, 3em);
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

/* Section Title Underline SVG Animation */
.section-title-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}

.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.section-title h2 {
    margin-bottom: 0;
}

.section-title .title-underline {
    width: 100px;
    height: 4px;
}

.section-title .title-underline path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    stroke: var(--color-medium-blue); /* Accent for underline, adjusted from original accent */
    stroke-width: 4;
    fill: none;
    animation: drawUnderline 1.5s ease-out forwards;
    animation-play-state: paused;
}

@keyframes drawUnderline {
    to {
        stroke-dashoffset: 0;
    }
}

p {
    margin-bottom: 1.25rem; /* Consistent spacing */
    color: var(--color-medium-blue); /* Body text */
    font-size: 1.05em; /* Slightly larger body text */
}

a {
    text-decoration: none;
    color: var(--color-dark-blue); /* Default link color */
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--color-medium-blue); /* Link hover color */
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 30px; /* Refined padding */
    border-radius: 8px;
    font-weight: 600;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 10px var(--shadow-sm);
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); /* Subtle shimmer */
    transition: all var(--transition-normal);
    z-index: -1;
}

.btn:hover::before {
    left: 100%;
}

.primary-btn {
    background-color: var(--color-dark-blue); /* Primary button background */
    color: white;
    border-color: var(--color-dark-blue); /* Primary button border */
}

.primary-btn:hover {
    color: white;
 
}

.secondary-btn {
    background-color: var(--color-creamy-white); /* Secondary button background */
    color: var(--color-dark-blue); /* Secondary button text */
    border-color: var(--color-light-taupe); /* Secondary button border */
}

.secondary-btn:hover {
    background-color: var(--color-light-taupe); /* Secondary button hover background */
    color: var(--color-dark-blue); /* Secondary button hover text */
    border-color: var(--color-light-taupe); /* Secondary button hover border */
    transform: translateY(-3px) scale(1.02); /* Subtle lift and slight scale */
    box-shadow: 0 8px 18px var(--shadow-md); /* Deeper shadow on hover */
}

/* Card Styling */
.card {
    background-color: var(--color-creamy-white); /* Card background */
    border-radius: 10px;
    box-shadow: 0 5px 15px var(--shadow-sm); /* Slightly softer initial shadow */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    overflow: hidden;
    border: 1px solid var(--color-light-taupe); /* Card border */
    position: relative;
}

.card:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 15px 30px var(--shadow-lg); /* Even deeper, more impactful shadow */
}

/* --- Navbar --- */
#navbar {
    background-color: rgba(249, 243, 239, 0.98); /* creamy-white with transparency */
    padding: 20px 0;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0 2px 15px var(--shadow-sm);
    backdrop-filter: blur(8px); /* Slightly less blur for faster rendering */
    transition: all var(--transition-normal);
}

#navbar.scrolled {
    padding: 15px 0;
    box-shadow: 0 4px 20px var(--shadow-md);
}

#navbar nav {
    display: flex;
    justify-content: center;
    gap: 35px; /* Slightly reduced gap for more links */
}

#navbar nav .nav-link {
    color: var(--color-dark-blue); /* Nav link color */
    font-weight: 500;
    padding: 10px 15px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.04em; /* Subtle letter spacing */
    font-size: 0.98em; /* Slightly smaller for compactness */
}

#navbar nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 3px;
    background-color: var(--color-medium-blue); /* Nav link underline color */
    transition: all var(--transition-fast); /* Faster transition for underline */
    transform: translateX(-50%);
}

#navbar nav .nav-link:hover::before,
#navbar nav .nav-link.active::before {
    width: 75%; /* More refined underline width */
}

#navbar nav .nav-link:hover,
#navbar nav .nav-link.active {
    color: var(--color-medium-blue); /* Nav link hover/active color */
}

/* --- Hero Section (Home) --- */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    color: var(--color-medium-blue); /* Hero text color */
    text-align: left;
    padding-top: 100px;
    background: linear-gradient(135deg, var(--color-light-taupe) 0%, var(--color-creamy-white) 100%); /* Lighter, more subtle gradient with new colors */
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: transparent;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    padding: 60px; /* Slightly reduced padding */
    background-color: rgba(249, 243, 239, 0.95); /* creamy-white with transparency */
    border-radius: 15px;
    box-shadow: 0 10px 40px var(--shadow-md);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-light-taupe); /* Border for hero content */
}

.profile-text {
    flex: 1;
    padding-right: 40px; /* Reduced padding */
}

.greeting {
    font-size: 1.2em;
    font-weight: 500;
    color: var(--color-medium-blue); /* Greeting text color */
    margin-bottom: 12px;
}

.name-heading {
    font-size: clamp(3.5em, 8vw, 4em); /* Adjusted clamp values */
    color: var(--color-dark-blue); /* Name heading color */
    margin-bottom: 20px;
}

.typewriter {
    font-size: clamp(1.8em, 4vw, 2.2em);
    font-weight: 600;
    color: var(--color-medium-blue); /* Typewriter text color */
    min-height: 1.5em; /* Ensure consistent height */
    margin-bottom: 25px;
}

.tagline {
    font-size: 1.1em;
    color: var(--color-medium-blue); /* Tagline text color */
    margin-top: 0;
    max-width: 550px;
}

.profile-actions {
    margin-top: 35px; /* Slightly reduced margin */
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.social-links {
    margin-top: 40px; /* Adjusted margin */
    margin-bottom: 0;
}

.social-links a {
    color: var(--color-medium-blue); /* Social link icon color */
    font-size: 2.2em; /* Slightly smaller icons */
    margin-right: 20px;
    transition: transform var(--transition-normal), color var(--transition-normal);
}

.social-links a:hover {
    color: var(--color-dark-blue); /* Social link icon hover color */
    transform: translateY(-5px) scale(1.15); /* More pronounced lift and scale */
}

.profile-image {
    flex: 0 0 280px; /* Slightly smaller image */
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--color-medium-blue); /* Thinner border for profile image */
    box-shadow: 0 6px 20px var(--shadow-md);
    position: relative;
    z-index: 5;
    background-color: var(--color-creamy-white); /* Profile image background */
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.profile-image:hover img {
    transform: scale(1.05); /* Slightly more zoom */
}

/* --- General Section Styling --- */
.section {
    padding: 90px 0; /* Refined vertical padding */
    background-color: var(--color-creamy-white); /* Section background */
    margin-bottom: 25px; /* Refined margin between sections */
    border-radius: 10px;
    box-shadow: 0 6px 15px var(--shadow-sm);
    border: 1px solid var(--color-light-taupe); /* Section border */
}

/* --- About Me Section --- */
.about-content {
    max-width: 750px; /* Constrain width for readability */
    margin: 0 auto;
    text-align: center;
}

/* --- Skills Section Styling --- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Adjusted min-width for more columns on wider screens */
    gap: 25px; /* Reduced gap */
    margin-top: 50px;
    justify-content: center;
}

.skill-category {
    padding: 25px; /* Reduced padding */
    background-color: var(--color-light-taupe); /* Skill category background */
    border-radius: 10px;
    box-shadow: 0 3px 10px var(--shadow-sm); /* Softer shadow */
    border: 1px solid var(--color-light-taupe); /* Skill category border */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.skill-category:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 12px 25px var(--shadow-md); /* Deeper shadow */
}

.skill-category h3 {
    color: var(--color-dark-blue); /* Skill category heading color */
    font-size: 1.2em;
    margin-bottom: 18px;
    text-align: center; /* Centered for consistency */
}

.skill-category ul {
    list-style: none;
    padding: 0;
    text-align: left;
    font-size: 0.98em;
    color: var(--color-dark-blue); /* Skill list text color */
}

.skill-category ul li {
    margin-bottom: 8px;
    padding-left: 20px; /* Indent for bullet */
    position: relative;
}

.skill-category ul li::before {
    content: '\2022';
    color: var(--color-dark-blue); /* Bullet color */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
    top: 0;
}

/* --- Education Section - Clean Card Style --- */
.education-timeline {
    max-width: 900px; /* Slightly narrower */
    margin: 50px auto; /* Adjusted margin */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Adjusted min-width */
    gap: 25px;
}

.timeline-content {
    padding: 30px; /* Reduced padding */
    border-radius: 10px;
    background-color: var(--color-creamy-white); /* Timeline content background */
    box-shadow: 0 3px 10px var(--shadow-sm);
    border: 1px solid var(--color-light-taupe); /* Timeline content border */
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
}

.timeline-content:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 12px 25px var(--shadow-md); /* Deeper shadow */
}

.timeline-content h3 {
    color: var(--color-dark-blue); /* Timeline heading color */
    margin-bottom: 8px;
    font-size: 1.3em;
}

.timeline-content .institution, .timeline-content .dates {
    font-size: 0.95em;
    color: var(--color-medium-blue); /* Institution/Dates text color */
    margin-bottom: 12px;
}

.timeline-content .achievements {
    list-style-type: disc;
    padding-left: 25px;
    color: var(--color-medium-blue); /* Achievements text color */
    font-size: 1em;
}

/* --- Certifications Section - Grid with Subtle Lift --- */
.certification-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Adjusted min-width */
    gap: 30px;
    margin-top: 50px;
    justify-content: center;
}

.cert-card {
    padding: 30px;
    text-align: center;
    background-color: var(--color-creamy-white); /* Cert card background */
    border: 1px solid var(--color-light-taupe); /* Cert card border */
    border-radius: 10px;
    box-shadow: 0 3px 10px var(--shadow-sm);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.cert-card:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 12px 25px var(--shadow-md); /* Deeper shadow */
    border-color: var(--color-medium-blue); /* Highlight border on hover */
}

.cert-card h3 {
    color: var(--color-dark-blue); /* Cert card heading color */
    font-size: 1.15em;
    margin-bottom: 10px;
}

.cert-card p {
    font-size: 0.9em;
    color: var(--color-medium-blue); /* Cert card text color */
    margin-bottom: 20px;
}

.cert-card .btn {
    margin-top: auto;
    padding: 9px 18px; /* Smaller button for certs */
    font-size: 0.85em;
}

/* --- Project Section - Clean Grid Cards --- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Adjusted min-width */
    gap: 35px;
    margin-top: 50px;
}

.project-card-new {
    background-color: var(--color-creamy-white); /* Project card background */
    border-radius: 10px;
    box-shadow: 0 4px 15px var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--color-light-taupe); /* Project card border */
}

.project-card-new:hover {
    transform: translateY(-8px); /* More pronounced lift */
    box-shadow: 0 15px 30px var(--shadow-lg); /* Even deeper, more impactful shadow */
}

.project-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 58%; /* Slightly adjusted aspect ratio */
    overflow: hidden;
}

.project-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out; /* Faster zoom */
}

.project-card-new:hover .project-image-wrapper img {
    transform: scale(1.1); /* More aggressive zoom */
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 60, 83, 0.9); /* dark-blue with transparency */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Reduced gap */
    opacity: 0;
    transition: opacity 0.3s ease; /* Faster transition */
}

.project-card-new:hover .image-overlay {
    opacity: 1;
}

.overlay-btn {
    background-color: var(--color-medium-blue); /* Overlay button background */
    color: var(--color-creamy-white); /* Overlay button text */
    padding: 10px 25px; /* Reduced padding */
    border-radius: 6px;
    font-weight: 600;
    font-size: 1em;
    transition: background-color var(--transition-normal), transform var(--transition-normal);
    border: 1px solid var(--color-medium-blue);
}

.overlay-btn:hover {
    background-color: var(--color-dark-blue); /* Overlay button hover background */
    border-color: var(--color-dark-blue);
    transform: scale(1.05); /* Slightly more pronounced scale */
}

.project-info {
    padding: 25px; /* Reduced padding */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.project-info h3 {
    color: var(--color-dark-blue); /* Project info heading color */
    margin-bottom: 10px;
    font-size: 1.3em;
}

.project-info p {
    font-size: 1em;
    color: var(--color-medium-blue); /* Project info text color */
    margin-bottom: 10px;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Spacing between tags */
    margin-top: 10px;
}

.project-tech span {
    background-color: var(--color-light-taupe); /* Tech tag background */
    color: var(--color-dark-blue); /* Tech tag text */
    padding: 5px 12px;
    border-radius: 5px;
    font-size: 0.85em;
    font-weight: 500;
    white-space: nowrap; /* Prevent tags from breaking */
}

/* --- Contact Section --- */
#contact .container {
    max-width: 700px; /* Slightly narrower form container */
}

.contact-intro {
    font-size: 1.05em;
    color: var(--color-medium-blue); /* Contact intro text color */
    margin-bottom: 40px; /* Reduced margin */
    text-align: center;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

#contact-form {
    margin: 40px auto; /* Adjusted margin */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Reduced gap */
    padding: 40px; /* Reduced padding */
    background-color: var(--color-creamy-white); /* Contact form background */
    border-radius: 12px;
    box-shadow: 0 8px 25px var(--shadow-md);
    border: 1px solid var(--color-light-taupe); /* Contact form border */
}

.form-group {
    position: relative;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 14px 18px; /* Reduced padding */
    border: 1px solid var(--color-light-taupe); /* Input border */
    border-radius: 6px;
    font-size: 1em;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
    background-color: var(--color-creamy-white); /* Input background */
    color: var(--color-dark-blue); /* Input text color */
}

#contact-form input:focus,
#contact-form textarea:focus {
    border-color: var(--color-medium-blue); /* Input focus border */
    outline: none;
    box-shadow: 0 0 0 3px rgba(69, 104, 130, 0.2); /* Thinner focus ring (based on medium-blue) */
    background-color: var(--color-creamy-white); /* Input focus background */
}

#contact-form textarea {
    resize: vertical;
    min-height: 140px; /* Slightly shorter textarea */
}

.submit-btn {
    align-self: flex-start;
    padding: 12px 30px; /* Reduced padding */
    font-size: 1em;
    margin-top: 20px; /* Reduced margin */
}

.email-address {
    margin-top: 30px;
    font-size: 0.95em;
    color: var(--color-medium-blue); /* Email address text color */
    font-weight: 400;
    text-align: center;
}

.email-address a {
    color: var(--color-dark-blue); /* Email link color */
    text-decoration: underline;
    font-weight: 500;
}

.email-address a:hover {
    color: var(--color-medium-blue); /* Email link hover color */
}

/* Contact Social Links */
.contact-social-links {
    margin-top: 30px;
    text-align: center;
}

.contact-social-links a {
    color: var(--color-medium-blue); /* Contact social link icon color */
    font-size: 2em; /* Slightly smaller */
    margin: 0 12px;
    transition: transform var(--transition-normal), color var(--transition-normal);
}

.contact-social-links a:hover {
    transform: translateY(-5px) scale(1.15); /* More pronounced lift and scale */
    color: var(--color-dark-blue); /* Contact social link icon hover color */
}


/* --- Footer --- */
footer {
    background-color: var(--color-dark-blue); /* Footer background */
    color: var(--color-creamy-white); /* Footer text color */
    text-align: center;
    padding: 25px 0; /* Reduced padding */
    margin-top: 50px;
    font-size: 0.9em;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.08);
}

.footer-social {
    margin-top: 20px;
}

.footer-social a {
    color: var(--color-light-taupe); /* Footer social link icon color */
    font-size: 1.6em; /* Slightly smaller */
    margin: 0 10px;
    transition: color var(--transition-normal), transform var(--transition-normal);
}

.footer-social a:hover {
    color: var(--color-creamy-white); /* Footer social link icon hover color */
    transform: translateY(-4px) scale(1.1); /* More pronounced lift and scale */
}

/* --- Responsiveness (Media Queries) --- */

@media (max-width: 992px) {
    .container {
        padding: 0 20px;
    }
    h1 { font-size: clamp(2.8em, 7vw, 3.8em); } /* Adjusted clamp for smaller screens */
    h2 { font-size: clamp(1.8em, 4.5vw, 2.5em); } /* Adjusted clamp for smaller screens */
    #navbar nav {
        gap: 25px;
    }
    .hero-content {
        flex-direction: column;
        text-align: center;
        padding: 50px;
    }
    .profile-text {
        padding-right: 0;
        margin-bottom: 30px; /* Space between text and image */
    }
    .profile-actions {
        justify-content: center;
    }
    .social-links {
        text-align: center;
    }
    .education-timeline {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #navbar nav {
        gap: 15px; /* Even smaller gap for more links */
        flex-wrap: wrap; /* Allow wrapping */
        justify-content: center;
    }
    .nav-link {
        font-size: 0.9em;
        padding: 8px 10px;
    }
    h1 { font-size: clamp(2.2em, 6vw, 3em); } /* Further adjusted clamp */
    h2 { font-size: clamp(1.6em, 4vw, 2.2em); margin-bottom: 35px;} /* Further adjusted clamp */
    .typewriter {
        font-size: clamp(1.4em, 3.5vw, 1.8em); /* Adjusted clamp */
    }
    .hero-section {
        padding-top: 70px; /* Adjust for potentially wrapped navbar */
    }
    .profile-image {
        width: 220px;
        height: 220px;
    }
    .social-links a {
        font-size: 1.8em;
        margin: 0 10px;
    }
    .section {
        padding: 70px 0;
    }
    .project-grid {
        grid-template-columns: 1fr; /* Stack cards on smaller screens */
    }
    .profile-actions .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    #contact-form {
        padding: 30px;
    }
    .skills-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 500px) {
    #navbar {
        display: none !important; /* Hides the navbar completely at 500px width */
    }
    .hero-section {
        padding-top: 40px; /* Reduce top padding if navbar is hidden */
    }
    .section {
        padding-top: 60px; /* Adjust padding for other sections */
    }
    .container {
        padding: 0 15px;
    }
    h1 { font-size: clamp(1.8em, 5vw, 2.5em); } /* Even smaller for very small screens */
    h2 { font-size: clamp(1.3em, 3.5vw, 1.8em); }
    .typewriter {
        font-size: clamp(1.1em, 3vw, 1.5em);
    }
    .profile-image {
        width: 160px;
        height: 160px;
    }
    .section-title .title-underline {
        width: 60px;
    }
    .btn {
        font-size: 0.85em;
        padding: 10px 18px;
    }
    .hero-content {
        padding: 25px 10px;
    }
    .profile-text {
        text-align: center;
    }
    .profile-actions {
        flex-direction: column;
        align-items: center;
    }
    .overlay-btn {
        padding: 8px 20px; /* Smaller overlay buttons */
        font-size: 0.9em;
    }
}

/* Original rule, adjusted to prevent conflict with the new 500px rule if it overlaps */
@media (max-width: 700px) and (max-height: 739px) {
    /* This rule will now primarily apply if height is constrained between 501px and 700px width */
    /* If the screen is <= 500px width, the general 500px rule for navbar takes precedence */
    
}