/* Import a cleaner, more modern prestigious font (EB Garamond) */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;600&display=swap');

:root {
    --accent-pink: #D67B92;   /* Used sparingly for elegance */
    --paper-white: #FFFFFF;   /* Clean, modern slate */
    --ink-black: #1A1A1B;     /* High-authority text */
    --soft-gray: #F5F5F7;     /* Modern subtle backgrounds */
    
    --font-serif: 'EB Garamond', serif;
    --font-sans: 'Inter', sans-serif;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* Height of your navbar */
}
body {
    font-family: var(--font-sans);
    background-color: var(--paper-white);
    color: var(--ink-black);
    line-height: 1.7;
}

/* Headings: EB Garamond is the peak of academic elegance */
h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 400; /* Lighter weight = more sophisticated */
    letter-spacing: -0.02em;
    color: var(--ink-black);
}

.logo {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.nav-links li {
    display: inline-block;
    margin: 0px 20px;
}

.nav-links a {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    color: var(--ink-black);
}
/* --- Sticky Navbar Base --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 90px; /* Tall and elegant at the start */
    z-index: 1000;
    background: transparent; /* Starts transparent over the hero */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8%;
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    box-sizing: border-box;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    color: #FFFFFF; /* White links to look good over hero images */
    transition: color 0.3s ease;
}

.mobile-nav-toggle {
    display: none;
}


.logo {
    color: #FFFFFF;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    letter-spacing: 2px;
}

/* --- SCROLLED STATE (The "Following" Bar) --- */
.navbar.scrolled {
    height: 70px; /* Shrinks slightly */
    background: rgba(255, 255, 255, 0.95); /* Becomes solid white/frosted */
    backdrop-filter: blur(10px); /* Modern frosted glass effect */
    box-shadow: 0 2px 20px rgba(0,0,0,0.05);
    padding: 0 5%;
}

.navbar.scrolled .logo,
.navbar.scrolled .nav-links a {
    color: var(--ink-black); /* Text turns dark when background turns white */
}

.nav-links a:hover {
    color: var(--accent-pink);
}

/* Language Switch Styling */
.lang-switch a {
    font-weight: 600;
    border: 1px solid var(--soft-gray);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

.navbar.scrolled .lang-switch a {
    border-color: var(--ink-black);
}

.lang-switch a:hover {
    background-color: var(--accent-pink);
    color: var(--paper-white) !important;
    border-color: var(--accent-pink);
}

.lang-switch i {
    font-size: 0.8rem;
}

#jp {
    font-size: 15px;
}

#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: 1px solid var(--soft-gray);
    outline: none;
    background-color: var(--paper-white);
    color: var(--ink-black);
    cursor: pointer;
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
    opacity: 0; /* Hidden by default */
    visibility: hidden;
}

#backToTop:hover {
    background-color: var(--accent-pink);
    color: var(--paper-white);
    border-color: var(--accent-pink);
    transform: translateY(-5px);
}

/* Class to show the button via JS */
#backToTop.show {
    opacity: 1;
    visibility: visible;
}

/* Hero: Focus on typography and space, not big blocks of color */
.hero {
    padding: 12rem 5%;
    background-color: var(--paper-white);
    text-align: center;
}

.hero-content {
    /* Ensure the content block itself is a column flexbox */
    display: flex;
    flex-direction: column; 
    align-items: center;    
    justify-content: center;
    
    width: 100%;
    max-width: 900px;
    /* Remove any implicit margins that might push it off-center */
    margin: 0; 
}

.hero-carousel {
    position: relative;
    height: 80vh; /* Takes up 80% of the screen height */
    overflow: hidden;
}

.carousel-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Adjust height based on your nav area */
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%);
    z-index: 5;
    pointer-events: none;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    
    /* This centers the .hero-content within the slide */
    display: flex;
    align-items: center;    /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    text-align: center;
    padding: 0 10%;
    box-sizing: border-box; /* Ensures padding doesn't break width */

    background-size: cover; /* This zooms to fill the screen */
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--paper-white);
}

.slide h1 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.slide p {
    font-size: 1.25rem;
    max-width: 650px;
    margin-bottom: 2.5rem;
}

.slide.active {
    opacity: 1;
    z-index: 1;
}

/* Specific Slide Backgrounds */
.slide-1 {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
    url('/images/facility.png');
}

.slide-2 {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
    url('/images/world-garden.jpg');
}

.slide-3 {
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), 
    url('images/classroom.jpg');
}

/* Optional: If 'contain' makes it too small, use a percentage */
/* background-size: 60% auto; */

/* Ensure images cover the whole area and stay centered */
.slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* ... existing flex and transition properties ... */
}

/* Adjust Text Color for better contrast on photos */
.slide h1, .slide p {
    color: #FFFFFF; /* White text usually looks better over photos */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

.slide.slide-2 h1, .slide.slide-2 p {
    color: #ffffff; /* If slide 2 is a very light photo, keep dark text */
}

/* Arrows */
.prev, .next {
    /* Changed color: var(--dark-pink) to var(--accent-pink) to match your :root */
    color: var(--accent-pink); 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 1.5rem 1rem;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s;
    border-radius: 4px;
}

.prev:hover, .next:hover {
    background: var(--accent-pink);
    color: white;
}

.prev { left: 20px; }
.next { right: 20px; }

.carousel-dots {
    position: absolute;
    bottom: 30px; /* Positions them near the bottom of the hero */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 15;
}

.dot {
    width: 30px;
    height: 10px;
    background-color: rgba(214, 123, 146, 0.3); /* Transparent version of your pink */
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.4s ease;
    border: 1px solid transparent;
}

.dot.active {
    background-color: var(--accent-pink);
    transform: scale(1.2); /* Makes the active dot slightly larger */
    box-shadow: 0 0 10px rgba(214, 123, 146, 0.4);
}

.dot:hover {
    background-color: var(--accent-pink);
    opacity: 0.7;
}

/* Ensure the button hover we made earlier still works here */
.btn-primary:hover {
    background-color: #A65166;
}

/* Buttons: Minimalist and sharp */
.btn-primary {
    padding: 1rem 3rem;
    background-color: var(--accent-pink);
    color: var(--paper-white);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background-color: #A65166; 
}

/* Service Cards: No shadows, just thin hairlines */
.service-card {
    border: 1px solid #E1E1E1;
    padding: 4rem 2rem;
    background: transparent;
    transition: border-color 0.4s ease;
}

.service-card:hover {
    border-color: var(--accent-pink);
    transform: none; /* No "bouncy" effects for prestige sites */
}

.welcome-section {
    padding: 8rem 10%;
    background-color: var(--soft-gray);
    text-align: center; /* Centers the intro text */
}

.welcome-intro {
    max-width: 800px;
    margin: 0 auto 5rem auto;
}

.welcome-intro h2 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
}

.welcome-intro .lead {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: #555;
    font-style: italic;
}

/* The 3-Box Grid */
.hanja-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 2rem;
}

.hanja-box {
    background: var(--paper-white);
    padding: 3rem 2rem;
    border: 1px solid var(--light-pink);
    border-top: 4px solid var(--accent-pink); /* Strong top accent line */
    transition: all 0.4s ease;
    text-align: left; /* Text inside boxes looks better left-aligned */
}

.hanja-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(214, 123, 146, 0.1);
}

.hanja {
    display: block;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    color: var(--accent-pink);
    margin-bottom: 1rem;
}

.hanja-box h3 {
    font-family: var(--font-sans);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--ink-black);
}

.hanja-definition {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .hanja-grid {
        grid-template-columns: 1fr; /* Stack boxes on small screens */
        gap: 2rem;
    }
    
    .welcome-section {
        padding: 5rem 5%;
    }
}

.history-section {
    padding: 10rem 10%;
    background-color: var(--paper-white);
}

.timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

/* The Vertical Spine */
.timeline::after {
    content: '';
    position: absolute;
    width: 1px;
    background-color: var(--light-pink);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8rem;
    position: relative;
}

/* Staggered Layout Logic */
.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-img, .timeline-content {
    width: 45%; /* Keeps them from hitting the center line */
}

.timeline-img img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 15px 15px 0px var(--soft-gray); /* Sophisticated offset shadow */
}

/* Scroll Transition States */
/* Scroll Transition States */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    /* Increase duration to 1.2s for a more 'prestigious' slower fade */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.timeline::after {
    content: '';
    position: absolute;
    width: 1px; /* Hairline thin */
    background-color: #E1E1E1; /* Light gray */
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* The Sleek Dash Points */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* Creating the Dash */
    width: 20px;       /* Width of the dash */
    height: 1px;       /* Match the thickness of the spine */
    background-color: var(--ink-black); /* Dark slate/gray for the dash */
    
    z-index: 2;
}

.timeline-footer {
    display: flex;
    justify-content: center;
    margin-top: 5rem; /* Space between the last timeline item and the button */
    padding-bottom: 2rem;
}
.timeline-footer::before {
    content: '';
    position: absolute;
    top: -2.5rem;
    width: 50px;
    height: 1px;
    background-color: var(--light-pink);
}
.program-section {
    padding: 8rem 10%;
    background-color: var(--soft-gray);
}

/* Responsive: Switch to one column on smaller screens */
@media (max-width: 992px) {
    .monthly-grid {
        grid-template-columns: 1fr;
        row-gap: 3rem;
    }
}

.faq-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* Space between button and subtext */
}
.program-details-section {
    padding: 10rem 10%;
    background-color: var(--paper-white);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.detail-header {
    margin-bottom: 1.5rem;
}

.detail-number {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent-pink);
    margin-bottom: 0.5rem;
}

.detail-item h3 {
    font-size: 1.7rem;
    letter-spacing: -0.01em;
}

.detail-item p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
}

.detail-item a {
    text-decoration: none;
    color: var(--accent-pink)
}
.detail-item {
    border-top: 1px solid var(--ink-black);
    padding-top: 2rem;
    display: flex; /* New: enables flex alignment */
    flex-direction: column; /* Stack children vertically */
    height: 100%; /* Ensure all cards in a row have the same height */
}

.detail-item p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 2rem;
    flex-grow: 1; /* New: pushes everything below it to the bottom */
}

.detail-img {
    width: 100%;
    height: 220px; /* Fixed height for consistency */
    overflow: hidden;
    border: 1px solid var(--soft-gray);
    margin-top: auto; /* New: ensures it sticks to the bottom */
}

.detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Prevents image stretching */
}

.detail-caption {
    color: #999;
    font-family: var(--font-serif);
    font-style: italic;
}

.detail-item:hover .detail-img img {
    transform: scale(1.08);
    filter: grayscale(0%);
}

/* Responsive Stack */
@media (max-width: 992px) {
    .details-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}
.transition-section {
    padding: 8rem 10%;
    background-color: var(--soft-gray); /* Slight contrast from the white program section */
}

.transition-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 5rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.transition-info h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
}

.support-list {
    list-style: none;
    padding: 0;
    margin-top: 2rem;
}

.support-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #555;
}

.support-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-pink);
    font-weight: bold;
}
/* School Image Styling */
.school-img-container {
    width: 100%;
    height: 300px;
    overflow: hidden;
    border: 1px solid #E1E1E1;
    border-bottom: none; /* Merges the image with the card below */
}

.school-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1);
}

/* Subtle zoom effect when hovering over the school section */
.school-highlight:hover .school-img-container img {
    transform: scale(1.05);
}

/* Adjust the School Card to connect with the image */
.school-card {
    background: var(--paper-white);
    padding: 3.5rem;
    border: 1px solid #E1E1E1;
    /* Remove the top border if you want the "merged" look */
    /* border-top: none; */ 
}

.highlight-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-pink);
    margin-bottom: 1rem;
}

.school-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

.school-tags {
    display: flex;
    gap: 10px;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.school-tags span {
    font-family: var(--font-sans);
    font-size: 0.65rem;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid var(--soft-gray);
    letter-spacing: 1px;
    color: #888;
}

/* Responsive Logic */
@media (max-width: 992px) {
    .transition-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}
.cta-subtext {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: #666;
    max-width: 400px;
    line-height: 1.4;
}
.testimonials-section {
    padding: 8rem 10%;
    background-color: var(--paper-white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.testimonial-card {
    padding: 3rem 2rem;
    border: 1px solid var(--soft-gray);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s ease;
}

.testimonial-card:hover {
    border-color: var(--accent-pink);
}

.quote-icon {
    font-family: var(--font-serif);
    font-size: 4rem;
    color: var(--accent-pink);
    line-height: 1;
    margin-bottom: -1rem;
    opacity: 0.3;
}

.testimonial-text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--ink-black);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-img {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* Makes the image a perfect circle */
    object-fit: cover;
    border: 2px solid var(--soft-gray);
}

.author-name {
    display: block;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.author-class {
    font-size: 0.8rem;
    color: #888;
}

/* Responsive: Stack on mobile */
@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
footer {
    padding: 5rem 5%;
    border-top: 1px solid var(--soft-gray);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
}

.faq-section {
    padding: 10rem 10% 5rem 10%;
    background-color: var(--paper-white);
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-category h3 {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-pink);
    margin: 4rem 0 2rem 0;
    border-bottom: 1px solid var(--soft-gray);
    padding-bottom: 10px;
}

.faq-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--soft-gray);
    padding-bottom: 1.5rem;
}

.faq-question h4 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--ink-black);
    margin-bottom: 1rem;
    cursor: default;
}

.faq-answer p {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.6;
}

/* Hover effect to make it feel interactive */
.faq-item:hover {
    border-color: var(--accent-pink);
}
/* --- FAQ Page Specifics --- */
.faq-page .navbar {
    background-color: var(--paper-white) !important;
    border-bottom: 1px solid var(--soft-gray);
    height: 70px; /* Start at the compact size on sub-pages */
}

/* Force dark text for visibility on white background */
.faq-page .navbar .logo,
.faq-page .navbar .nav-links a {
    color: var(--ink-black) !important;
}

/* Maintain the glass effect on scroll for the FAQ page */
.faq-page .navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
}

/* FAQ Content Layout */
.faq-section {
    padding: 10rem 10% 5rem 10%;
    background-color: var(--paper-white);
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.faq-category h3 {
    font-family: var(--font-sans);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-pink);
    margin: 4rem 0 2rem 0;
    border-bottom: 1px solid var(--soft-gray);
    padding-bottom: 10px;
}

.faq-item {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--soft-gray);
    padding-bottom: 1.5rem;
}

.contact-section {
    padding: 8rem 10%;
    background-color: var(--paper-white);
    border-top: 1px solid var(--soft-gray);
}

.contact-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 6rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Form Styling */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 1rem 0;
    border: none;
    border-bottom: 1px solid var(--soft-gray);
    font-family: var(--font-sans);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.form-group input:focus, 
.form-group textarea:focus {
    border-color: var(--accent-pink);
}

.btn-submit {
    align-self: flex-start;
    background: var(--ink-black);
    color: var(--paper-white);
    padding: 1rem 2.5rem;
    border: none;
    font-family: var(--font-sans);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.btn-submit:hover {
    background: var(--accent-pink);
    transform: translateY(-2px);
}

/* Info Styling */
.contact-info .info-item {
    margin-bottom: 3rem;
}

.contact-info h3 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-pink);
    margin-bottom: 1rem;
}

.contact-info p {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--ink-black);
}

.social-links {
    display: flex;
    gap: 20px;
}
.social-links a {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    text-decoration: none;
    color: var(--ink-black);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.social-links i {
    font-size: 1.1rem; /* Slightly larger than text for visibility */
    color: var(--ink-black);
    transition: color 0.3s ease;
}

.social-links a:hover, 
.social-links a:hover i {
    color: var(--accent-pink);
}

/* Responsive */
@media (max-width: 992px) {
    .contact-container {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}
@media (max-width: 768px) {
    .timeline-item, .timeline-item:nth-child(even) { 
        flex-direction: column; 
        align-items: flex-start;
        padding-left: 50px;
    }
    .timeline-img, .timeline-content { width: 100%; }
    .timeline-item::before { left: 20px; }

    .timeline::after {
        display: none !important;
    }
    /* Show the hamburger button */
    .mobile-nav-toggle {
        z-index: 2001; /* Keep button above the menu */
        position: relative;
        display: block;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--ink-black);
    }
    /* Position the nav links off-screen */
    .nav-links {
        z-index: 2000; 
        /* Glassmorphism effect for a prestigious feel */
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        position: fixed;
        top: 0;
        right: -100%; /* Hidden to the right */
        height: 100vh;
        width: 70%;
        background: var(--paper-white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: 0.4s ease;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    .nav-links a {
    color: var(--ink-black) !important; /* Keep text dark */
    }

    /* Slide in when active */
    .nav-links.active {
        right: 0;
    }
}