/* ======================================== */
/* COMPLETE CSS FOR SIMPLIFIED PORTFOLIO    */
/* Version: Simple + Anim Placeholders      */
/* Includes Ed/Skills + Theme Toggle        */
/* Header Layout: Toggle/Logo Left (Edge)   */
/* Light Theme: Darker Lavender             */
/* ======================================== */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Poppins:wght@300;400;600&display=swap');

/* --- Root Variables (Dark Theme Default) --- */
:root {
    --color-primary: #1A1A2E;
    --color-secondary: #16213E;
    --color-accent1: #00FFFF; /* Teal */
    --color-accent2: #FF00FF; /* Pink */
    --color-text: #E0E0E0;
    --font-body: 'Poppins', sans-serif;
    --font-heading: 'Orbitron', sans-serif;
    --header-height: 70px;
}

/* ===== Base Styles ===== */
html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background-color: var(--color-primary);
    color: var(--color-text);
    font-family: var(--font-body);
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== Header Styles ===== */
#main-header {
    background-color: rgba(26, 26, 46, 0.8);
    backdrop-filter: blur(10px);
    position: fixed; top: 0; left: 0; width: 100%;
    height: var(--header-height); z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
#main-header.scrolled {
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#main-header .layout-container {
    padding-left: 15px; padding-right: 15px;
    max-width: none; width: 100%; margin: 0;
    box-sizing: border-box;
}
.header-nav {
    display: flex; justify-content: space-between; align-items: center;
    height: 100%; max-width: 1200px; margin: 0 auto;
}
.header-left { display: flex; align-items: center; gap: 15px; }
.header-right { display: flex; align-items: center; gap: 30px; }
.logo { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-text); text-decoration: none; font-weight: 600; transition: color 0.3s ease; }
.logo:hover { color: var(--color-accent1); }
.nav-links { display: flex; gap: 30px; }
.nav-links a { color: var(--color-text); text-decoration: none; font-size: 1rem; transition: color 0.3s ease; position: relative; padding: 5px 0; }
.nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-accent1); transition: width 0.3s ease; }
.nav-links a:hover { color: var(--color-accent1); }
.nav-links a:hover::after { width: 100%; }
.menu-toggle { display: none; background: none; border: none; color: var(--color-text); font-size: 1.5rem; cursor: pointer; }
.theme-toggle-button { background: none; border: 1px solid var(--color-text); color: var(--color-text); font-size: 1.1rem; cursor: pointer; padding: 5px 8px; border-radius: 5px; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; line-height: 1; }
.theme-toggle-button:hover { color: var(--color-accent1); border-color: var(--color-accent1); background-color: rgba(0, 255, 255, 0.1); }

/* --- Visual Side Navigation --- */
#visual-nav { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); z-index: 1000; }
#visual-nav ul { list-style: none; padding: 0; margin: 0; }
#visual-nav li a { display: block; width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; margin-bottom: 15px; transition: background-color 0.3s ease, transform 0.3s ease; text-indent: -9999px; }
#visual-nav li a:hover { background-color: var(--color-accent1); }
#visual-nav li a.active-nav { background-color: var(--color-accent1); transform: scale(1.3); }

/* ===== Main Content & Sections ===== */
.layout-container { max-width: 1200px; margin: 0 auto; padding: 0 30px; }
#page-container { padding-top: var(--header-height); }
.page-section { min-height: 80vh; display: flex; align-items: center; padding: 80px 0; position: relative; overflow: hidden; transition: background-color 0.3s ease; }
h1 { font-size: 3.5rem; margin-bottom: 1rem; color: var(--color-accent1); font-family: var(--font-heading); line-height: 1.2; transition: color 0.3s ease; }
h2 { font-size: 2.5rem; margin-bottom: 2rem; color: var(--color-accent1); font-family: var(--font-heading); line-height: 1.3; transition: color 0.3s ease; }
h1:hover, h2:hover { color: var(--color-accent2); }
h3 { font-size: 1.5rem; color: var(--color-text); font-family: var(--font-heading); margin-bottom: 0.5rem; margin-top: 0; transition: color 0.3s ease; }
p { margin-bottom: 1rem; line-height: 1.7; transition: color 0.3s ease; }
a { color: var(--color-accent2); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--color-accent1); }
.asymmetrical-layout, .asymmetrical-layout-alt { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.asymmetrical-layout > .text-content { flex: 1.5; min-width: 300px; }
.asymmetrical-layout > .visual-content { flex: 1; min-width: 250px; display: flex; justify-content: center; align-items: center; }
.asymmetrical-layout-alt > .text-content { flex: 1; min-width: 300px; order: 2; }
.asymmetrical-layout-alt > .visual-content { flex: 1.5; min-width: 250px; order: 1; display: flex; justify-content: center; align-items: center; }
.visual-content img { max-width: 100%; height: auto; display: block; border-radius: 10px; }

/* ===== Home Section CSS Animation ===== */
.home-visual-placeholder.css-animation-container { position: relative; width: 100%; min-height: 300px; overflow: hidden; border-radius: 10px; }
.css-shape { position: absolute; border-radius: 50%; background: linear-gradient(45deg, var(--color-accent1), var(--color-accent2)); opacity: 0.3; animation: float 15s infinite ease-in-out; transition: background 0.3s ease, opacity 0.3s ease;}
.css-shape.shape-1 { width: 150px; height: 150px; top: 10%; left: 15%; animation-delay: 0s; }
.css-shape.shape-2 { width: 80px; height: 80px; top: 30%; left: 60%; animation-delay: 3s; border-radius: 10%; }
.css-shape.shape-3 { width: 120px; height: 120px; top: 60%; left: 30%; animation-delay: 6s; }
.css-shape.shape-4 { width: 50px; height: 50px; top: 75%; left: 70%; animation-delay: 9s; background: var(--color-accent1); }
@keyframes float { 0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.3; } 50% { transform: translate(20px, -30px) scale(1.1) rotate(180deg); opacity: 0.6; } 100% { transform: translate(0, 0) scale(1) rotate(360deg); opacity: 0.3; } }

/* ===== About Section Simple SVG CSS Animation ===== */
.about-svg-simple { max-width: 100%; height: auto; max-height: 300px; display: block; margin: 0 auto; }
.about-svg-simple .svg-bg-circle { animation: pulse-fade 5s infinite ease-in-out; transition: fill 0.3s ease; fill: rgba(22, 33, 62, 0.3); }
.about-svg-simple .svg-gear { transform-origin: center center; animation: rotate 15s linear infinite; stroke: url(#gradSimple); }
.about-svg-simple .svg-center-dot { animation: pulse-scale 3s infinite ease-in-out; transform-origin: center center; transition: fill 0.3s ease; fill: var(--color-accent1); }
@keyframes pulse-fade { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

/* ===== Education Section Styles ===== */
.education-section { background-color: var(--color-primary); transition: background-color 0.3s ease; }
.education-section h2 { text-align: center; margin-bottom: 3rem; }
.education-list { max-width: 800px; margin: 0 auto; }
.education-item { background-color: var(--color-secondary); padding: 25px 30px; border-radius: 8px; margin-bottom: 25px; border-left: 4px solid var(--color-accent2); text-align: left; transition: background-color 0.3s ease, border-color 0.3s ease; }
.education-item h3 { color: var(--color-text); font-size: 1.4rem; margin-top: 0; margin-bottom: 0.5rem; transition: color 0.3s ease;}
.education-item .university { font-style: italic; color: rgba(224, 224, 224, 0.8); margin-bottom: 0.3rem; font-weight: 600; transition: color 0.3s ease; }
.education-item .dates { font-size: 0.9rem; color: rgba(0, 255, 255, 0.7); margin-bottom: 0; transition: color 0.3s ease; }

/* ===== Skills Section Styles ===== */
.skills-section { background-color: var(--color-secondary); border-top: 1px solid rgba(0, 255, 255, 0.1); border-bottom: 1px solid rgba(0, 255, 255, 0.1); transition: background-color 0.3s ease, border-color 0.3s ease; }
.skills-section h2 { text-align: center; margin-bottom: 3rem; }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; }
.skill-category { background-color: rgba(26, 26, 46, 0.5); padding: 25px; border-radius: 8px; border: 1px solid rgba(0, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
.skill-category:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 255, 255, 0.1); }
.skill-category h3 { color: var(--color-accent2); margin-top: 0; margin-bottom: 1.5rem; font-size: 1.3rem; border-bottom: 1px solid rgba(255, 0, 255, 0.2); padding-bottom: 0.5rem; text-align: center; transition: color 0.3s ease, border-color 0.3s ease; }
.skill-category ul { list-style: none; padding: 0; margin: 0; }
.skill-category li { margin-bottom: 1rem; display: flex; align-items: center; font-size: 1rem; color: var(--color-text); transition: color 0.3s ease; }
.skill-category li:last-child { margin-bottom: 0; }
.skill-icon { color: var(--color-accent1); margin-right: 12px; width: 20px; text-align: center; flex-shrink: 0; transition: color 0.3s ease; }

/* ===== PROJECTS SECTION (Styles kept for when uncommented) ===== */
#projects .layout-container { margin-bottom: 40px; }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.project-card { background-color: var(--color-secondary); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
.project-image { width: 100%; height: 200px; display: flex; justify-content: center; align-items: center; background-color: var(--color-secondary); border-top-left-radius: 8px; border-top-right-radius: 8px; transition: background-color 0.3s ease; }
.project-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-info { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; }
.project-info h3 { margin-top: 0; margin-bottom: 0.5rem; }
.project-info p { font-size: 0.9rem; flex-grow: 1; margin-bottom: 1rem; }
.project-tags { margin-bottom: 1rem; }
.project-tags span { display: inline-block; background-color: rgba(0, 255, 255, 0.2); color: var(--color-accent1); padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; margin-right: 5px; margin-bottom: 5px; transition: background-color 0.3s ease, color 0.3s ease; }
.project-link { color: var(--color-accent2); text-decoration: none; font-size: 0.9rem; margin-right: 15px; transition: color 0.3s ease; }
.project-link:hover { color: var(--color-accent1); text-decoration: underline; }
.project-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); }
.css-placeholder { width: 80%; height: 80%; display: flex; justify-content: space-around; align-items: center; overflow: hidden; }
.css-placeholder-shape { background: linear-gradient(45deg, var(--color-accent1), var(--color-accent2)); border-radius: 50%; width: 15px; height: 15px; animation: css-placeholder-anim 1.5s infinite ease-in-out; transition: background 0.3s ease; }
.css-placeholder-shape.shape1 { animation-delay: 0s; }
.css-placeholder-shape.shape2 { animation-delay: 0.2s; }
.css-placeholder-shape.shape3 { animation-delay: 0.4s; }
@keyframes css-placeholder-anim { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } }

/* ===== Simplified Contact Section Styles ===== */
.contact-simple { min-height: auto; padding: 100px 0; text-align: center; background-color: var(--color-secondary); border-top: 2px solid var(--color-accent1); transition: background-color 0.3s ease, border-color 0.3s ease; }
.contact-simple-content { max-width: 700px; margin: 0 auto; }
.contact-simple h2 { font-size: 3rem; margin-bottom: 1rem; }
.contact-subtitle { font-size: 1.1rem; color: rgba(224, 224, 224, 0.8); margin-bottom: 3rem; transition: color 0.3s ease; }
.contact-methods { display: flex; flex-direction: column; align-items: center; gap: 2.5rem; margin-bottom: 3rem; }
.contact-method { /* Container */ }
.contact-icon { font-size: 2rem; color: var(--color-accent2); margin-bottom: 0.5rem; display: block; transition: color 0.3s ease; }
.contact-link { font-size: 1.2rem; color: var(--color-text); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.3s ease, border-color 0.3s ease; display: inline-block; margin-bottom: 0.3rem; }
.contact-link:hover { color: var(--color-accent1); border-bottom-color: var(--color-accent1); }
.contact-note { font-size: 0.8rem; color: rgba(224, 224, 224, 0.6); transition: color 0.3s ease; }
.social-links-contact { margin-top: 1rem; }
.social-links-contact p { font-size: 1rem; margin-bottom: 1rem; color: rgba(224, 224, 224, 0.8); transition: color 0.3s ease; }
.social-icon { color: var(--color-accent1); font-size: 2.2rem; margin: 0 15px; text-decoration: none; display: inline-block; transition: color 0.3s ease, transform 0.3s ease; }
.social-icon:hover { color: var(--color-accent2); transform: scale(1.15) translateY(-3px); }
.contact-method .resume-button { margin-top: 0.5rem; margin-left: 0; gap: 10px; }
.contact-location { margin-top: 4rem; font-size: 0.9rem; color: rgba(224, 224, 224, 0.6); transition: color 0.3s ease;}
.contact-location i { margin-right: 8px; }

/* --- Button Styles --- */
.cta-button { display: inline-block; background-color: var(--color-accent2); color: var(--color-primary); padding: 12px 25px; border: none; border-radius: 25px; font-family: var(--font-heading); text-decoration: none; font-size: 1rem; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease; margin-top: 1rem; }
.resume-button { background-color: transparent; border: 2px solid var(--color-accent1); color: var(--color-accent1); display: inline-flex; align-items: center; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;}
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 255, 255, 0.2); background-color: var(--color-accent1); color: var(--color-primary); }
.resume-button:hover { background-color: var(--color-accent1); color: var(--color-primary); box-shadow: 0 8px 15px rgba(0, 255, 255, 0.2); border-color: var(--color-accent1); }

/* --- FOOTER --- */
#main-footer { text-align: center; padding: 30px; margin-top: 60px; color: gray; font-size: 0.9rem; border-top: 1px solid var(--color-secondary); transition: color 0.3s ease, border-color 0.3s ease; }
.footer-social-links { margin-top: 15px; }
.footer-social-links .social-icon { font-size: 1.5rem; margin: 0 10px; }


/* ============================================= */
/* ===== Light Theme (Darker Lavender Theme) ===== */
/* ============================================= */
body.light-theme {
    /* New Darker Lavender Palette */
    --color-primary: #DCD6F7;     /* Darker Soft Lavender main background */
    --color-secondary: #E4DFF8;   /* Very Slightly Lighter Lavender (for cards) */
    --color-accent1: #8B5CF6;     /* Medium Purple (Interactive) */
    --color-accent1-heading: #A78BFA; /* Softer Purple (Headings) */
    --color-accent2: #4FD1C5;     /* Muted Teal (Secondary Accent) */
    --color-text: #374151;      /* Cool Dark Grey */
}

/* --- Update component colors for NEW light theme --- */

body.light-theme #main-header {
    /* Updated: Lavender Background */
    background-color: rgba(220, 214, 247, 0.85); /* Semi-transparent Primary Lavender */
    backdrop-filter: blur(10px);
    box-shadow: none;
}
body.light-theme #main-header.scrolled {
    background-color: rgba(220, 214, 247, 0.9);
    box-shadow: 0 2px 5px rgba(74, 74, 106, 0.1);
}

body.light-theme .logo,
body.light-theme .nav-links a,
body.light-theme .menu-toggle,
body.light-theme h3,
body.light-theme p,
body.light-theme .skill-category li,
body.light-theme .education-item .university,
body.light-theme .contact-link,
body.light-theme .contact-note,
body.light-theme .social-links-contact p,
body.light-theme .contact-location {
    color: var(--color-text);
}

body.light-theme h1, body.light-theme h2 { color: var(--color-accent1-heading); }
body.light-theme h1:hover, body.light-theme h2:hover { color: var(--color-accent1); }
body.light-theme .nav-links a:hover { color: var(--color-accent1); }
body.light-theme .nav-links a::after { background-color: var(--color-accent1); }
body.light-theme #visual-nav li a { background-color: rgba(55, 65, 81, 0.4); }
body.light-theme #visual-nav li a:hover,
body.light-theme #visual-nav li a.active-nav { background-color: var(--color-accent1); }
body.light-theme .nav-links { background-color: rgba(220, 214, 247, 0.98); }
body.light-theme .nav-links a { border-bottom-color: rgba(139, 92, 246, 0.2); }

body.light-theme .skills-section { background-color: var(--color-primary); border-color: rgba(139, 92, 246, 0.1); }
body.light-theme .skill-category { background-color: var(--color-secondary); border-color: rgba(139, 92, 246, 0.15); }
body.light-theme .skill-category:hover { box-shadow: 0 6px 15px rgba(139, 92, 246, 0.08); }
body.light-theme .skill-category h3 { color: var(--color-accent1); border-bottom-color: rgba(139, 92, 246, 0.3); }
body.light-theme .skill-icon { color: var(--color-accent1); }

body.light-theme .education-section { background-color: var(--color-primary); }
body.light-theme .education-item { background-color: var(--color-secondary); border-left-color: var(--color-accent1); }
body.light-theme .education-item .dates { color: var(--color-accent1); }

body.light-theme .css-shape { background: linear-gradient(45deg, var(--color-accent1), var(--color-accent2)); opacity: 0.5; }
body.light-theme .css-shape.shape-4 { background: var(--color-accent1); }
body.light-theme .about-svg-simple .svg-bg-circle { fill: rgba(55, 65, 81, 0.06); }
body.light-theme .about-svg-simple .svg-center-dot { fill: var(--color-accent2); }
body.light-theme .about-svg-simple .svg-gear { stroke: url(#gradSimple); }

body.light-theme .project-card { background-color: var(--color-secondary); border: 1px solid #DCD6F7; }
body.light-theme .project-image { background-color: #E4DFF8; }
body.light-theme .project-tags span { background-color: #CCFBF1; color: #115E59; }
body.light-theme .project-link { color: var(--color-accent1); }
body.light-theme .project-link:hover { color: #6D28D9; }
body.light-theme .css-placeholder { background-color: #E4DFF8; }
body.light-theme .css-placeholder-shape { background: linear-gradient(45deg, var(--color-accent1), var(--color-accent2)); }

body.light-theme .contact-simple { background-color: var(--color-primary); border-top-color: var(--color-accent1); }
body.light-theme .contact-simple h2 { color: var(--color-accent1-heading); }
body.light-theme .contact-subtitle { color: #4B5563; }
body.light-theme .contact-icon { color: var(--color-accent1); }
body.light-theme .contact-link { color: var(--color-text); }
body.light-theme .contact-link:hover { color: var(--color-accent1); border-bottom-color: var(--color-accent1); }
body.light-theme .contact-note { color: #6B7280; }
body.light-theme .social-links-contact p { color: #4B5563; }
body.light-theme .social-icon { color: var(--color-accent1); }
body.light-theme .social-icon:hover { color: var(--color-accent2); }
body.light-theme .contact-location { color: #6B7280; }

body.light-theme .cta-button { background-color: var(--color-accent1); color: #fff; }
body.light-theme .cta-button:hover { background-color: #6D28D9; color: #fff; }
body.light-theme .resume-button {
    border-color: var(--color-accent1);
    color: var(--color-text); /* Use dark text default */
    background-color: var(--color-secondary); /* Light lavender bg */
}
body.light-theme .resume-button:hover {
    background-color: var(--color-accent1);
    color: #fff; /* White text on hover */
    border-color: var(--color-accent1);
}

body.light-theme #main-footer { border-top-color: #DCD6F7; color: #4B5563;}
body.light-theme .footer-social-links .social-icon { color: var(--color-accent1); }
body.light-theme .footer-social-links .social-icon:hover { color: var(--color-accent2); }

body.light-theme .theme-toggle-button { color: var(--color-text); border-color: var(--color-text); }
body.light-theme .theme-toggle-button:hover { color: var(--color-accent1); border-color: var(--color-accent1); background-color: rgba(139, 92, 246, 0.05); }


/* ===== RESPONSIVE DESIGN ===== */
/* Medium Devices */
@media (max-width: 992px) {
    .layout-container { padding: 0 20px; }
    h1 { font-size: 3rem; } h2 { font-size: 2.2rem; }
    .asymmetrical-layout > .text-content, .asymmetrical-layout > .visual-content,
    .asymmetrical-layout-alt > .text-content, .asymmetrical-layout-alt > .visual-content {
        flex-basis: 100%; min-width: unset; text-align: center;
    }
     .asymmetrical-layout-alt > .text-content, .asymmetrical-layout-alt > .visual-content { order: unset; }
     .visual-content { margin-bottom: 30px; }
     .contact-simple h2 { font-size: 2.5rem; }
     .skills-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
/* Small Devices */
@media (max-width: 768px) {
    :root { --header-height: 60px; }
    h1 { font-size: 2.5rem; } h2 { font-size: 2rem; }
    /* Mobile Header Layout */
    .header-right .nav-links { display: none; }
    .menu-toggle { display: block; }
    /* Mobile Menu Dropdown Styling */
    .nav-links { position: absolute; top: var(--header-height); left: 0; width: 100%; background-color: rgba(26, 26, 46, 0.95); flex-direction: column; align-items: center; gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.5s ease-out; z-index: 999; display: flex; }
    body.light-theme .nav-links { background-color: rgba(220, 214, 247, 0.98); } /* Lavender mobile menu */
    .nav-links.active { max-height: 400px; }
    .nav-links a { padding: 15px 0; width: 100%; text-align: center; border-bottom: 1px solid rgba(0, 255, 255, 0.1); }
    body.light-theme .nav-links a { border-bottom-color: rgba(139, 92, 246, 0.2); }
    .nav-links a::after { display: none; }
    .nav-links a:last-child { border-bottom: none; }
     /* Mobile Header Item Order/Spacing */
     .header-nav { gap: 10px; }
     .theme-toggle-button { order: 1; margin-right: 0; font-size: 1rem; padding: 4px 6px;}
     .logo { order: 2; margin-right: auto; font-size: 1.3rem; }
     .menu-toggle { order: 3; margin-left: 0; }
    /* Other Mobile Styles */
    .projects-grid { grid-template-columns: 1fr; }
    .contact-simple { padding: 80px 0; }
    .contact-simple h2 { font-size: 2.2rem; }
    .social-icon { font-size: 2rem; }
    .css-shape { width: 80px; height: 80px; }
    .css-shape.shape-2 { width: 50px; height: 50px; }
    .css-shape.shape-4 { width: 30px; height: 30px; }
    .skills-grid { grid-template-columns: 1fr; }
    .education-item { padding: 20px; }
}
/* Extra Small Devices */
@media (max-width: 576px) {
    .layout-container { padding: 0 15px; }
    h1 { font-size: 2rem; } h2 { font-size: 1.8rem; }
    .cta-button, .resume-button { font-size: 0.9rem; padding: 10px 20px; width: 100%; text-align: center; }
    .resume-button { margin-left: 0; margin-top: 10px; }
    #visual-nav { display: none; }
    .contact-simple h2 { font-size: 2rem; }
    .contact-subtitle { font-size: 1rem; }
    .contact-link { font-size: 1.1rem; }
    .social-icon { font-size: 1.8rem; margin: 0 10px; }
    .education-item h3 { font-size: 1.2rem;}
    .header-nav { gap: 5px;}
     .theme-toggle-button { font-size: 0.9rem; padding: 3px 5px;}
     .menu-toggle { font-size: 1.3rem;}
}