/* --- Global Styles --- */
:root {
    --dark-bg: #0F172A;        /* Deep Navy from Modern Dark palette */
    --cyan-accent: #06B6D4;    /* Electric Cyan accent */
    --text-main: #F8FAFC;      /* Off-white text */
    --glass-bg: rgba(255, 255, 255, 0.03);
}

body {
    background-color: var(--dark-bg);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-x: hidden;
}

/* --- Navbar Styling --- */

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background-color:#0F172A; /  Match your BG exactly */
    z-index: 1000;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    box-sizing: border-box;
}

/* This is the class the JS will toggle */
.nav-hidden {
    transform: translateY(-100%); 
}

/* This adds the shadow only when you are NOT at the very top */
.nav-scrolled {
    background-color: rgba(10, 25, 47, 0.85) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px -10px rgba(2, 12, 27, 0.7);
    height: 70px; /* Slight shrink for that 'handy' feel */
}

.nav-logo {
    width: auto;
    display: block;
    margin-right: auto;
    height: 65px;
}
.logo-container{
    display: flex;
    align-items: center;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    transition: 0.3s;
    opacity: 0.8;
}

.nav-links a:hover {
    opacity: 1;
    color: var(--cyan-accent);
}

.nav-cta {
    border: 1px solid var(--cyan-accent);
    padding: 0.6rem 1.4rem;
    border-radius: 50px;
    color: var(--cyan-accent) !important;
    opacity: 1 !important;
}

/* Base Navigation Item Styling */
.nav-links li {
    list-style: none;
}

.nav-item {
    text-decoration: none;
    color: var(--text-main);
    padding: 8px 16px; /* Space for the glass box */
    border-radius: 8px; /* Rounded corners for the glass box */
    transition: all 0.3s ease; /* Smooth transition */
    display: inline-block;
    position: relative;
    font-weight: 500;
}

/* THE GLASS BOX HOVER EFFECT */
.nav-item:hover {
    background: rgba(255, 255, 255, 0.08); /* Faint white background */
    backdrop-filter: blur(8px); /* The "Frosted Glass" effect */
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15); /* Thin glass border */
    color: var(--cyan-accent); /* Text turns cyan on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Soft depth */
    transform: translateY(-2px); /* Slight float up */
}

/* Adjusting the CTA so it stays distinct */
.nav-cta:hover {
    background: var(--cyan-accent);
    color: #fff !important;
    border: 1px solid var(--cyan-accent);
}

/* --- Hero Section Layout --- */
.hero-container {
    height: 85vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 120px;
}

.hero-name {
    font-size: clamp(3rem, 10vw, 5.5rem); /* Responsive sizing */
    margin: 0;
    font-weight: 800;
    letter-spacing: -2px;
}

.handwritten {
  position: absolute;
  font-family: 'Fira Code', 'Roboto Mono', monospace ; /* Use a script font */ 
  color: #3498db; /* Your blue color */
  font-size: 1.5rem;
  padding-top: 10px;
  /* Positioning it above the name */
  top: 80px; 
  left: 265px;
  /* Slight rotation makes it look more natural */
  transform: rotate(0deg); 
  z-index: 1;
  
}

.hero-tagline {
    font-size: 1.2rem;
    opacity: 0.7;
    margin-bottom: 2.5rem;
    font-weight: 300;
    font-family: 'fira Code', 'Roboto Mono', monospace ;
}

.highlight { 
    color: var(--cyan-accent); 
    font-weight: 600;
}

/* --- The Code Window (Glassmorphism) --- */
.code-window {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    max-width: 420px;
    height: 170px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.window-header { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 1.2rem; 
}

.dot { width: 12px; height: 12px; border-radius: 50%; }
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }

/* Syntax Highlighting */
.code-content { 
    font-family: 'Fira Code', monospace; 
    font-size: 0.95rem; 
    line-height: 1.6;
}
.k { color: #C678DD; } /* Purple - Keyword */
.v { color: #E06C75; } /* Red - Variable */
.p { color: #61AFEF; } /* Blue - Property */
.s { color: #98C379; } /* Green - String */

/* --- Social Icons (Catchy & Interactive) --- */
.social-icons {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    gap: 2.5rem;
}

.social-link {
    font-size: 1.8rem; /* Larger for better visibility */
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.social-link:hover {
    color: var(--cyan-accent);
    transform: translateY(-8px) scale(1.1); /* Bounce effect */
    text-shadow: 0 0 15px rgba(6, 182, 212, 0.6); /* Glow effect */
}

.scroll-indicator {
  position: relative;
  top: 15px;
}


/* About Section Styling */
.about-section {
    padding: 70px 10%;
    background-color: var(--dark-bg);
}

.about-header {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
}

.section-header{
    margin: 0 !important;
    padding-bottom: 5px !important;
    display: flex;
    align-items: center;
}

.section-header h2 {
    margin: 0 !important;
    padding: 0 !important;
}

.about-text p:first-child{
    margin-top: 0 !important;
}

.section-number {
    color: var(--cyan-accent);
    font-family: 'Fira Code', monospace;
    margin-right: 10px;
    font-size: 1.5rem;
    margin-top: 0% ;
}

.about-header h2 {
    font-size: 2rem;
    white-space: nowrap;
}

.header-line {
    height: 1px;
    width: 300px;
    background: rgba(255, 255, 255, 0.1);
    margin-left: 20px;
}

.about-content {
    display: grid !important;
    grid-template-columns: 3fr 2fr;
    gap: 20px !important;
    margin-top: 30px !important; /* gap between the header and the content*/
    
}

.about-text p {
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 20px;
    margin-top: 20px;
}

/*.skills-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 200px));
    list-style: none;
    padding: 0;
}

.skills-list li::before {
    content: "▹";
    color: var(--cyan-accent);
    margin-right: 10px;
}

/*.glass-overlay{
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 20px;
    margin-top: 0px;
}

/* FLOATING SCROLL ANIMATION CSS */
.reveal {
    position: relative;
    transform: translateY(100px); /* Starts 100px lower */
    opacity: 0; /* Starts invisible */
    transition: 0.5s all ease; /* Smooth 1-second transition */
}

.reveal.active {
    transform: translateY(0); /* Moves to original position */
    opacity: 1; /* Fades in */
}

/*resume*/

.resume-cta {
    text-align: center;
    padding: 100px 0;
    background-color: var(--dark-bg);
}

.resume-btn {
    display: inline-block;
    padding: 15px 35px;
    border: 2px solid var(--cyan-accent);
    color: var(--cyan-accent);
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
    margin-bottom: 0 !important;
}

.resume-btn i {
    margin-right: 10px;
}

.resume-btn:hover {
    background-color: var(--cyan-accent);
    color: var(--dark-bg);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
    transform: translateY(-3px);
}

.reveal {
    position: relative;
    transform: translateY(100px); /* Starts 100px lower */
    opacity: 0; /* Starts invisible */
    transition: 1s all ease; /* Smooth 1-second transition */
}

.reveal.active {
    transform: translateY(0); /* Moves to original position */
    opacity: 1; /* Fades in */
}

/*experience section*/

.experience-section {
    padding: 100px 10%;
    background-color: var(--dark-bg);
}

.exp-wrapper {
    display: flex;
    gap: 60px;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 30px !important; 
}

.exp-visual {
    flex: 1;
}

.visual-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.visual-container img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.visual-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(6, 182, 212, 0.8); /* Cyan overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    opacity: 0;
    transition: 0.3s ease;
}

.visual-container:hover .visual-overlay { opacity: 1; }
.visual-container:hover img { transform: scale(1.05); }

.visual-overlay i {
    font-size: 2rem;
    color: white;
}

.exp-details {
    flex: 1.5;
}

.exp-info h3 {
    font-size: 1.8rem;
    margin: 0;
}

.exp-meta {
    color: #94a3b8;
    margin: 10px 0 25px;
}

.exp-meta strong { color: var(--cyan-accent); }

.exp-bullets {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.exp-bullets li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: #cbd5e1;
}

.exp-bullets li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--cyan-accent);
}


@media (max-width: 992px) {
    .exp-wrapper {
        flex-direction: column;
        padding: 20px;
    }
    
    .exp-visual {
        width: 100%;
        margin-bottom: 30px;
    }
}

.reveal {
    position: relative;
    transform: translateY(100px); /* Starts 100px lower */
    opacity: 0; /* Starts invisible */
    transition: 1s all ease; /* Smooth 1-second transition */
}

.reveal.active {
    transform: translateY(0); /* Moves to original position */
    opacity: 1; /* Fades in */
}

/*projects section*/

.projects-section {
    padding: 0px 10% 20px;
    background-color: var(--dark-bg);
    /*padding-top: 40px !important;*/
}

.projects-section.reveal {
    transition: 1s all ease;
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}

.project-card {
    display: flex;
    align-items: stretch;
    margin-bottom: 120px;
    position: relative;
}
.project-card.reveal {
    transition: 1s all ease;
}

.project-card.reverse {
    flex-direction: row-reverse;
}

.project-content {
    flex: 1;
    z-index: 2;
    align-items: stretch;
    gap: 20px;
    grid-template-columns: 2fr 3fr;
    margin-top: 30px !important;
}

.project-card.reverse .project-content {
    text-align: left;
}

.project-overline {
    color: var(--cyan-accent);
    font-family: 'Fira Code', monospace;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.project-title {
    font-size: 1.8rem;
    margin-bottom: 25px;
}

.project-description {
    background: rgba(17, 24, 39, 0.9); /* Dark overlay */
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    color: #94a3b8;
    line-height: 1.6;
}

.project-tech-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 25px 0 10px;
    gap: 15px;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--cyan-accent);
}

.project-links {
    font-size: 1rem;
    display: flex;
    gap: 20px;
}

.project-icons {
    margin-top: 1.5rem;
    display: flex;
    justify-content: first baseline;
    gap: 2.5rem;
}

.project-links {
    font-size: 1.5rem; /* Larger for better visibility */
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-block;
}

.project-links:hover {
    color: var(--cyan-accent);
    transform: translateY(-8px) scale(1.1); /* Bounce effect */
    text-shadow: 0 0 15px rgba(6, 182, 212, 0.6); /* Glow effect */
}
.project-image {
    flex: 1;
    background: transparent !important; /* Tint effect */
    filter: none !important;
    border-radius: 8px;
    overflow: hidden;
    height: 300px;
    opacity: 1.5;
    display: flex;
}

.project-image:hover img {
    transform: scale(1.05);
    filter: none !important;
    opacity: 1 !important;
}

.project-image img {
    border-radius: 8px;
    width: 95%;
    height: 100%;
    object-fit: cover;
    transition: 0.1s ease-in-out;
    filter: grayscale(0%) contrast(1);
}

/*skills section*/

.skills-section {
    padding: 30px 10%;
    background-color: var(--dark-bg);
    margin-bottom: 0% !important;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    margin-top: 50px;
    
}

.skill-card {
    background: #ffff; /* Solid white as per the reference */
    padding: 30px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.skill-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.skill-card img {
    width: 45px;
    height: 45px;
    margin-bottom: 15px;
    object-fit: contain;
}

.skill-card span {
    color: #1a1a1a; /* Dark text for contrast on white cards */
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
}

/* Ensure the floating animation applies to the whole grid */
.skills-section.reveal {
    transition: 1s all ease;
}

/* contact me section*/

.contact-section .numbered-heading {
    display: flex;
    flex-direction: column; /* Stack the line on top of the text */
    align-items: center;    /* Center both the line and the text */
    gap: 50px;              /* Space between the line and the text */
}

.contact-section .numbered-heading::before {
    content: "";
    display: block;
    width: 500px;           /* Adjust the width of the line here */
    height: 1px;
    background-color: #767e7c; /* Your signature cyan/green accent color */
    margin-bottom: 20px;
}

.contact-section {
    padding: 60px 10% 40px !important;
    background-color: #6d28d9; /* The bold purple from your reference */
    color: white;
    display: flex;
    flex-direction: column;
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: flex-start;
}

.contact-info h2 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 800;
}

.contact-info p {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 30px;
}

.contact-email a {
    color: white;
    font-weight: bold;
    text-decoration: underline;
}

/* Form Styling */
/* 1. Reset the background and center everything */
.contact-section {
    background-color: transparent; /* Allows your main site background to show through */
    max-width: 600px;             /* Constrains width so text looks like a block */
    margin: 100px auto; 
    margin-top: 5px;         /* Centers the entire section and adds vertical space */
    text-align: center;          /* Centers the text content */
    display: flex;
    flex-direction: column;
    align-items: center;         /* Centers the button horizontally */
}

/* 2. Style the numbered heading to match Section 03/04 */
.contact-section h2.numbered-heading {
    display: flex;
    align-items: center;
    justify-content: center;     /* Centers the number and text together */
    color: var(--cyan-accent);   /* Use your theme's accent color */
    font-family: 'SF Mono', monospace;
    font-size: clamp(40px, 5vm, 5px);
    margin-bottom: 20px;
    font-size: 18px;
}

/* 3. Style the "Get In Touch" title */
.contact-section h3.title, .contact-title {
    font-size: clamp(60px, 8vw, 8px) !important;
    font-weight: 700 !important; /* Responsive sizing */
    color: #ccd6f6;                 /* Lightest slate color */
    margin: 10px 0 20px;
    line-height: 1.1;
}

/* 4. Style the description paragraph */
.contact-section, .contact-description {
    color: #868a99;                 /* Slate gray color */
    line-height: 1.5;
    margin-bottom: 50px;
    font-size: 18px;
    font-display: block;
    max-width: 900px;
}

/* 5. Fix the "Say Hello" button (No more screen-wide button!) */
.contact-cta {
    text-align: center;
    padding: 40px 0;
    background-color: var(--dark-bg);
}

.contact-btn {
    display: inline-block;
    padding: 15px 35px;
    border: 2px solid var(--cyan-accent);
    color: var(--cyan-accent);
    text-decoration: none;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-family: 'Inter', sans-serif;
}

.contact-btn i {
    margin-right: 10px;
}

.contact-btn:hover {
    background-color: var(--cyan-accent);
    color: var(--dark-bg);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
    transform: translateY(-3px);
}

.reveal {
    position: relative;
    transform: translateY(100px); /* Starts 100px lower */
    opacity: 0; /* Starts invisible */
    transition: 1s all ease; /* Smooth 1-second transition */
}

.reveal.active {
    transform: translateY(0); /* Moves to original position */
    opacity: 1; /* Fades in */
}


.footer {
    margin-top: 20px !important;
    opacity: 0.6;
    font-size: 0.9rem;
}

/* --- CONSOLIDATED MOBILE OVERRIDE --- */

@media screen and (max-width: 768px) {
    /* Force every container to stay inside the screen */
    * {
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* Fix the specific "Skinny" look and right-side gap */
    .about-section, .experience-section, .projects-section, .skills-section {
        padding: 40px 20px !important; 
        width: 100% !important;
        overflow: hidden; 
    }

    /* Fix the Hero Name which is likely pushing the width out */
    .hero-name {
        font-size: 2.2rem !important;
        word-wrap: break-word;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    /* 1. Fix Header Overlap & Alignment */
    nav {
        flex-direction: row;
        justify-content: space-between;
        height: 70px;
        padding: 0 20px;
    }

    .nav-links {
        display: none; /* Hidden by default */
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background-color: var(--dark-bg);
        flex-direction: column;
        padding: 40px 0;
        gap: 20px;
        border-bottom: 2px solid var(--cyan-accent);
        z-index: 999;
    }

    /* Shows the menu when JS toggles it */
    .nav-links.active {
        display: flex;
    }

    .menu-toggle {
        display: block; /* Shows the hamburger bars */
    }

    /* 2. Fix Hero Section Spacing (Prevents overlapping logo) */
    .hero-container {
        height: auto;
        padding: 120px 20px 60px;
        display: flex;
        flex-direction: column;
    }

    .handwritten {
        position: relative; /* Removes absolute positioning so it doesn't float over the logo */
        top: 0;
        left: 0;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .hero-name {
        font-size: 2.5rem !important; /* Forces a readable size */
        letter-spacing: -1px;
    }

    /* 3. Fix the "Skill Stack" Column Issue */
    .skills-grid { 
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Forces 2 columns */
        gap: 15px;
        margin-top: 30px;
    }

    .skill-card {
        width: 100% !important;
        padding: 20px 10px;
        background: rgba(255, 255, 255, 0.05); /* Professional dark look */
    }

    .skill-card span {
        color: white; /* Contrast for dark background */
    }

    /* 4. Fix Project Card Stacking */
    .project-card, .project-card.reverse {
        flex-direction: column !important;
        margin-bottom: 60px;
    }

    .project-image {
        width: 100%;
        height: 200px;
        margin-bottom: 20px;
    }

    .project-description {
        padding: 15px;
        font-size: 0.9rem;
    }

    .project-tech-list {
        flex-wrap: wrap; /* Prevents text from flying off screen */
        gap: 10px;
    }
}

/* Extra tight fix for very small phones */
@media screen and (max-width: 480px) {
    section {
        padding: 60px 20px !important;
    }

    .code-window {
        width: 100%;
        font-size: 11px;
        padding: 1rem;
    }
}

/* Animation for the hamburger bars turning into an X */
#mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media screen and (max-width: 768px) {
    /* Force sections to use the full width of the phone */
    section, .about-section, .experience-section, .projects-section, .skills-section {
        padding: 60px 5% !important; /* Reduce side margins from 10% to 5% */
        width: 100% !important;
        box-sizing: border-box; /* Ensures padding doesn't push width over 100% */
    }

    .about-content, .exp-wrapper, .project-card {
        display: flex !important;
        flex-direction: column !important; /* Stack everything vertically */
        width: 100% !important;
    }
    
    /* Fix the Skill Cards taking up full width */
    .skills-grid {
        width: 100% !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
/* The container for the three lines */
/* Media Query: Show the bars only on mobile */


@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block;
    z-index: 1001; 
    padding: 10px;
    }
    
    .nav-links {
        display: none; /* Hide the full links initially on mobile */
    }
    .bar {
    width: 25px;
    height: 3px;
    background-color: var(--cyan-accent);
    display: block;
    margin: 5px 0;
    transition: 0.3s;
}
}