/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #e5e7eb;
    background: 
        /* Circuit board pattern overlay */
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.01) 0%, transparent 50%),
        /* Base dark gradient */
        linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 25%, #0a0a0a 50%, #1a1a1a 75%, #0a0a0a 100%);
    background-attachment: fixed;
    background-size: 100% 100%;
    min-height: 100vh;
    position: relative;
}

/* Circuit board pattern overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* Main circuit traces - horizontal and vertical */
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        /* Diagonal circuit lines */
        linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(-45deg, transparent 0%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        /* Circuit nodes and connection points */
        radial-gradient(circle at 10% 15%, rgba(255, 255, 255, 0.15) 0%, transparent 3px),
        radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.12) 0%, transparent 2px),
        radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 2px),
        radial-gradient(circle at 60% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 2px),
        radial-gradient(circle at 80% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 2px),
        radial-gradient(circle at 90% 60%, rgba(255, 255, 255, 0.12) 0%, transparent 2px),
        radial-gradient(circle at 15% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 2px),
        radial-gradient(circle at 35% 85%, rgba(255, 255, 255, 0.1) 0%, transparent 2px),
        radial-gradient(circle at 55% 75%, rgba(255, 255, 255, 0.09) 0%, transparent 2px),
        radial-gradient(circle at 75% 90%, rgba(255, 255, 255, 0.11) 0%, transparent 2px),
        /* Geometric shapes - squares and rectangles */
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 2px, transparent 2px, transparent 4px, rgba(255, 255, 255, 0.08) 4px, transparent 4px),
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.08) 2px, transparent 2px, transparent 4px, rgba(255, 255, 255, 0.08) 4px, transparent 4px),
        /* Hexagonal patterns */
        linear-gradient(60deg, transparent 0%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(-60deg, transparent 0%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        /* Triangular patterns */
        linear-gradient(30deg, transparent 0%, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(-30deg, transparent 0%, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 
        40px 40px,
        40px 40px,
        80px 80px,
        80px 80px,
        120px 120px,
        150px 150px,
        180px 180px,
        200px 200px,
        220px 220px,
        250px 250px,
        280px 280px,
        300px 300px,
        320px 320px,
        350px 350px,
        380px 380px,
        400px 400px,
        420px 420px,
        450px 450px,
        480px 480px,
        500px 500px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

/* Additional circuit symbols and patterns */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        /* P symbols */
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 2px, rgba(255, 255, 255, 0.1) 2px, transparent 2px, transparent 3px, rgba(255, 255, 255, 0.1) 3px, transparent 3px),
        /* Hash symbols */
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 2px, rgba(255, 255, 255, 0.08) 2px, transparent 2px, transparent 3px, rgba(255, 255, 255, 0.08) 3px, transparent 3px),
        /* X marks */
        linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(-45deg, transparent 0%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        /* Theta symbols */
        radial-gradient(circle at 50% 50%, transparent 0%, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 2px, rgba(255, 255, 255, 0.05) 2px, transparent 2px),
        /* Arrow patterns */
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 2px, rgba(255, 255, 255, 0.04) 2px, transparent 2px),
        /* Gear/cogwheel patterns */
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.03) 1px, transparent 1px, transparent 2px, rgba(255, 255, 255, 0.03) 2px, transparent 2px),
        /* WiFi/signal patterns */
        linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(-45deg, transparent 0%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        /* Static noise/dots */
        radial-gradient(circle at 5% 5%, rgba(255, 255, 255, 0.1) 0%, transparent 0.5px),
        radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.08) 0%, transparent 0.3px),
        radial-gradient(circle at 25% 45%, rgba(255, 255, 255, 0.06) 0%, transparent 0.4px),
        radial-gradient(circle at 35% 65%, rgba(255, 255, 255, 0.07) 0%, transparent 0.2px),
        radial-gradient(circle at 45% 85%, rgba(255, 255, 255, 0.05) 0%, transparent 0.3px),
        radial-gradient(circle at 55% 15%, rgba(255, 255, 255, 0.09) 0%, transparent 0.4px),
        radial-gradient(circle at 65% 35%, rgba(255, 255, 255, 0.08) 0%, transparent 0.3px),
        radial-gradient(circle at 75% 55%, rgba(255, 255, 255, 0.06) 0%, transparent 0.2px),
        radial-gradient(circle at 85% 75%, rgba(255, 255, 255, 0.07) 0%, transparent 0.3px),
        radial-gradient(circle at 95% 95%, rgba(255, 255, 255, 0.05) 0%, transparent 0.4px);
    background-size: 
        60px 20px,
        20px 60px,
        40px 40px,
        40px 40px,
        80px 80px,
        100px 100px,
        120px 120px,
        140px 140px,
        160px 160px,
        180px 180px,
        200px 200px,
        220px 220px,
        240px 240px,
        260px 260px,
        280px 280px,
        300px 300px,
        320px 320px,
        340px 340px,
        360px 360px,
        380px 380px,
        400px 400px,
        420px 420px,
        440px 440px,
        460px 460px,
        480px 480px,
        500px 500px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-logo a {
    display: none;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    color: #f8fafc;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 6px;
}

.nav-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #ffffff;
    transition: width 0.3s ease;
    border-radius: 1px;
}

.nav-link:hover::after {
    width: 80%;
}

.nav-link.active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
}

.nav-link.active::after {
    width: 80%;
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.hamburger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.bar {
    width: 25px;
    height: 3px;
    background: #f8fafc;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.hamburger.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: white;
    padding-top: 80px;
    position: relative;
    overflow: hidden;
}

.hero-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.highlight {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.hero-subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: #cbd5e1;
}

.hero-description {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    color: #94a3b8;
    max-width: 500px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-placeholder {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.7);
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
    position: relative;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: #ffffff;
    color: #0a0a0a;
    border-color: #ffffff;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

.btn-primary:hover {
    background: #f0f0f0;
    border-color: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.btn-secondary {
    background: transparent;
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-2px);
}

.btn-small {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn-outline {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.btn-outline:hover {
    background: #ffffff;
    color: #0a0a0a;
}

/* Section Styles */
section {
    padding: 5rem 0;
    position: relative;
    background: transparent;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: #f1f5f9;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ffffff, #cbd5e1, #ffffff);
    border-radius: 2px;
}

/* About Section */
.about {
    background: transparent;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.about-text p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    color: #cbd5e1;
    line-height: 1.8;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.stat {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.stat h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.stat p {
    color: #94a3b8;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* Skills Section */
.skills {
    background: transparent;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.skill-category {
    background: rgba(0, 0, 0, 0.4);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.skill-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

.skill-category h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: #f1f5f9;
    position: relative;
    z-index: 1;
}

.skill-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.skill-item:hover {
    background: #ffffff;
    color: #0a0a0a;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

/* Projects Section */
.projects {
    background: transparent;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.project-card {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        linear-gradient(-45deg, transparent 0%, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-image {
    height: 200px;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.project-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.project-image .image-placeholder {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #0a0a0a;
    border: 2px solid rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

.project-content {
    padding: 1.5rem;
    position: relative;
    z-index: 1;
}

.project-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #f1f5f9;
}

.project-content p {
    color: #94a3b8;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.project-tech span {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.project-links {
    display: flex;
    gap: 1rem;
}

/* Contact Section */
.contact {
    background: transparent;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.contact-info h3 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #f1f5f9;
}

.contact-info p {
    color: #94a3b8;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.contact-details {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: #cbd5e1;
}

.contact-item i {
    color: #ffffff;
    width: 20px;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-link:hover {
    background: #ffffff;
    color: #0a0a0a;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
}

/* Contact Form */
.contact-form {
    background: rgba(0, 0, 0, 0.4);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
        linear-gradient(0deg, transparent 0%, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 25px 25px;
    pointer-events: none;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
    background: rgba(0, 0, 0, 0.4);
    color: #e5e7eb;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #64748b;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background: transparent;
    color: #64748b;
    text-align: center;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #ffffff 50%, transparent 100%);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: rgba(0, 0, 0, 0.98);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.5);
        padding: 2rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(15px);
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-link {
        padding: 1rem 2rem;
        margin: 0.5rem 0;
        border-radius: 8px;
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    .nav-link:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }
    
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .about-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 200px;
        text-align: center;
    }
}

/* Skill Icons */
.skill-item i {
    font-size: 1rem;
    color: #ffffff;
    opacity: 0.8;
}

.skill-item:hover i {
    color: #0a0a0a;
    opacity: 1;
    transform: scale(1.1);
}

/* Specific skill colors */
.skill-item:nth-child(1) {
    border-left: 3px solid #22c55e;
}

.skill-item:nth-child(2) {
    border-left: 3px solid #3b82f6;
}

.skill-item:nth-child(3) {
    border-left: 3px solid #f59e0b;
}

.skill-item:nth-child(4) {
    border-left: 3px solid #ef4444;
}

.skill-item:nth-child(5) {
    border-left: 3px solid #8b5cf6;
}

.skill-item:nth-child(6) {
    border-left: 3px solid #06b6d4;
}

/* Project Image Styling */
.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}