/* ================= GLOBAL RESETS & BACKGROUND ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    scroll-behavior: smooth; /* Enables smooth scrolling for nav links */
}

body {
    background-color: #fdfdfd;
    color: #333;
    line-height: 1.6;
    /* Draws the tech-style engineering grid background without an image */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 60px 60px; 
    background-attachment: fixed; /* Keeps the grid locked while you scroll text over it */
}

/* ================= ANIMATED BACKGROUND LAYER ================= */
#animated-bg {
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    z-index: -1; /* Puts icons behind all other content */
    pointer-events: none; /* Crucial: stops icons from blocking clicks on text/links */
    overflow: hidden; /* Hides icons as they float off-screen to avoid scrollbars */
}

.floating-icon {
    position: absolute;
    opacity: 0; 
    animation: floatAndFade 10s linear forwards; /* Calls the floating and fading keyframes */
}

@keyframes floatAndFade {
    0%   { opacity: 0; transform: translateY(20px) scale(0.8); }
    20%  { opacity: 0.15; transform: translateY(0px) scale(1); } /* Fades in to a subtle 15% watermark visibility */
    80%  { opacity: 0.15; transform: translateY(-40px) scale(1); } /* Floats upwards slowly */
    100% { opacity: 0; transform: translateY(-60px) scale(0.8); } /* Fades out completely before disappearing */
}

/* ================= NAVIGATION ================= */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed; /* Fixes navigation to the top of the screen */
    width: 100%;
    z-index: 1000; /* Keeps nav above all other elements */
}

.logo img {
    height: 40px; /* Adjust this to change logo size */
    width: auto;  
    display: block; 
}

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

.nav-links a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover { color: #007bff; } /* Hover effect to a bright blue */

/* Styles the CV button with a solid blue background */
.nav-cv-link {
    background: #007bff;
    color: white !important;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background 0.3s;
}
.nav-cv-link:hover { background: #0056b3; } /* Darkens on hover */

/* ================= REUSABLE SECTION LAYOUTS ================= */
.section-container {
    padding: 100px 10%;
    background: transparent; /* Lets the background wires grid show through */
}

/* Semi-transparent class for visual breaks with frosted glass effect */
.bg-light {
    background-color: rgba(249, 249, 249, 0.7); 
    backdrop-filter: blur(4px); 
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #222;
}

/* ================= HERO SECTION ================= */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background: transparent; 
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
}

/* Typing text animation will use this span */
.typing-text { color: #d93025; font-weight: bold; }

/* ================= ABOUT GRID ================= */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Deep drop shadow for a premium feel */
}

/* ================= SKILLS GRID ================= */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.skill-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid transparent; /* Hidden border for smooth hover transition */
}

.skill-card:hover {
    transform: translateY(-5px); /* Hop effect on hover */
    border-color: #007bff; /* Shows blue border on hover */
    box-shadow: 0 10px 25px rgba(0, 123, 255, 0.15); /* Changes to a soft blue glow shadow on hover */
}

/* Logos inside skill cards from Devicon library */
.skill-icons {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* ================= SMOOTH SLIDING PROJECTS CAROUSEL ================= */
.carousel-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Acts like a window to hide the slides that are left/right of center */
.carousel-viewport {
    width: 100%;
    overflow: hidden; 
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.carousel-track {
    display: flex;
    flex-wrap: nowrap; /* CRITICAL: Forces slides into a single horizontal row */
    transition: transform 0.5s ease-in-out; 
    width: 100%;
}

.project-slide {
    flex: 0 0 100%; /* CRITICAL: Stops the browser from squishing them, forces 100% width */
    min-width: 100%;
    box-sizing: border-box;
}

.project-card {
    background: white;
    width: 100%;
}

/* Real images/GIFs inside project cards are set to cover the 200px box perfectly */
.project-img {
    width: 100%;
    height: 200px;
    object-fit: cover; 
    border-bottom: 3px solid #f0f0f0;
}

.project-info { padding: 20px; }

/* Little technical stack tags */
.project-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 10px 0 15px 0;
}

.project-tags span {
    background: #e9ecef;
    color: #495057;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
}

/* View Code button links directly to GitHub */
.github-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    color: #24292e;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95rem;
    transition: color 0.3s;
}

.github-link:hover { color: #007bff; }

/* Standard Desktop styling for the previous/next arrows. Pushes them outside the main card area. */
.carousel-btn {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: #007bff;
    color: white;
    font-size: 24px;
    font-weight: bold;
    border: none;
    border-radius: 50%;
    transition: 0.3s ease;
    z-index: 10;
}

.carousel-btn:hover { background-color: #0056b3; }
.prev-btn { left: -60px; }
.next-btn { right: -60px; }

/* Nudging highlight that JS turns on when inactivity timer hits */
.highlight-pulse {
    animation: pulseGlow 1.5s infinite;
}

@keyframes pulseGlow {
    0% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
    50% { transform: translateY(-50%) scale(1.15); box-shadow: 0 0 15px 5px rgba(0, 123, 255, 0.4); background-color: #0056b3; }
    100% { transform: translateY(-50%) scale(1); box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

/* ================= CONTACT FORM ================= */
.contact-wrapper {
    max-width: 700px;
    margin: 0 auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group {
    display: flex;
    gap: 20px;
}

.input-group input { flex: 1; }

.contact-form input, 
.contact-form textarea {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s;
}

.contact-form input:focus, 
.contact-form textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}

.submit-btn {
    width: 100%;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
}

/* ================= FOOTER ================= */
footer {
    background-color: #222;
    color: white;
    padding: 30px 10%;
    text-align: center;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.social-links {
    display: flex;
    gap: 20px;
    font-size: 1.5rem;
}

.social-links a {
    color: white;
    transition: color 0.3s;
}

.social-links a:hover { color: #007bff; }

/* ================= REUSABLE BUTTON ================= */
.btn {
    display: inline-block;
    padding: 12px 30px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: background 0.3s;
}
.btn:hover { background-color: #0056b3; }


/* ================= MOBILE RESPONSIVENESS (CSS for Phones & Tablets) ================= */
@media (max-width: 768px) {
    /* 1. SECTION PADDING: Reduce empty space on the sides for small screens */
    .section-container {
        padding: 80px 5%;
    }

    /* 2. HERO TEXT: Shrink the giant desktop font sizes */
    .hero-content h1 { font-size: 2.2rem; }
    .hero-content h2 { font-size: 1.2rem; }

    /* 3. NAVIGATION: Hamburger Menu Icon Styling */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
        z-index: 1001; 
    }
    
    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: #333;
        transition: all 0.3s ease-in-out;
    }

    /* 4. NAVIGATION: Dropdown links when the hamburger is clicked */
    .nav-links {
        position: absolute;
        top: 70px; /* Positions links below the nav bar */
        left: -100%; /* Hides the menu off-screen to the left by default */
        flex-direction: column;
        background-color: rgba(255, 255, 255, 0.98);
        width: 100%;
        text-align: center;
        transition: 0.4s ease-in-out;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        padding: 20px 0;
        gap: 20px;
    }

    /* JavaScript will add this class to slide the menu into view */
    .nav-links.active {
        left: 0; 
    }

    /* 5. ABOUT SECTION: Stack text and image vertically instead of side-by-side */
    .about-grid {
        grid-template-columns: 1fr; 
        text-align: center;
    }

    /* ================= MAJOR FIX START ================= */
    /* 6. PROJECTS SLIDER ARROWS: Fix overlap with text.
       By setting top to 100px, they are centered vertically over the 200px image at the top of the card.
       They are usable but now completely clear all description and tag text below. */
    /* Fix overlap with text by moving buttons up onto the image */
    .carousel-btn {
        width: 40px; 
        height: 40px;
        font-size: 18px;
        top: 100px; /* Moves them vertically over the 200px image */
        transform: translateY(-50%);
    }
    /* Pushes them inwards from the far edges of the image for better usability on narrow screens */
    .prev-btn { left: 10px; }
    .next-btn { right: 10px; }
    /* ================= MAJOR FIX END ================= */

    /* 7. CONTACT FORM: Stack the name and email fields vertically */
    .input-group {
        flex-direction: column; 
    }
}