/* ==========================================
   FONT IMPORTS AND DECLARATIONS
   ========================================== */
/* Google Fonts - Imported from CDN for reliable delivery and browser caching */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* Local font declarations - For fallback if Google Fonts fail to load */
/* Each @font-face block defines a font variation that's stored locally */
/* font-display: swap = Show fallback font until custom font loads */
/* unicode-range = Only load this font for these specific Unicode characters (optimization) */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/fonts/c9a5bc6a7c948fb0-s.p.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../assets/fonts/931105f8d96e7f26-s.p.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../assets/fonts/7b9ca6a1d31c5662-s.p.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../assets/fonts/07a54048a9278940-s.p.woff2) format("woff2");
    unicode-range: U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff, U+fffd;
}

/* ==========================================
   GLOBAL RESET
   ========================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ==========================================
   CSS VARIABLES (CUSTOM PROPERTIES)
   ========================================== */
/* :root targets the highest-level element in the DOM (like html) */
/* Variables allow for easy theme changes across the entire site */
:root {
    /* Font stacks - Primary fonts with fallback options if the first choice isn't available */
    --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-merriweather: 'Merriweather', Georgia, 'Times New Roman', Times, serif;
    --font-outfit: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* Color scheme - Centralized color management */
    --primary-color: #0288D1;
    --secondary-color: #FFC629;
    --text-color: #E6E6E6;
    --bg-color: #0B0D0E;
    --card-bg: #181A1B;
    --card-hover: #1F2123;
}

/* ==========================================
   BASIC ELEMENT STYLING
   ========================================== */
/* Base body styles - Sets the foundation for the entire page */
body {
    font-family: var(--font-outfit);
    /* Uses the CSS variable defined above */
    background: var(--bg-color);
    /* Dark background color */
    color: #D2D4D5;
    /* Light text color for contrast on dark backgrounds */
    margin: 0;
    /* Removes default browser margin */
    line-height: 1.55;
    /* Space between lines of text - improves readability */
    font-size: 1rem;
    /* Base font size (1rem = 16px in most browsers) */
    -webkit-font-smoothing: antialiased;
    /* Makes fonts look smoother on WebKit browsers */
    -moz-osx-font-smoothing: grayscale;
    /* Makes fonts look smoother on Firefox */
}

/* HTML element - The root of the document */
html {
    scroll-behavior: smooth;
    /* Makes page scrolling smoother when clicking on anchor links */
    -webkit-print-color-scheme: dark;
    /* Print in dark mode on Chrome/Safari */
    color-scheme: dark;
    /* Tells browsers this is a dark-themed site */
}

/* Common typography styling */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-outfit);
    line-height: 1.3;
}

p {
    line-height: 1.6;
}

a {
    text-decoration: none;
    font-weight: 500;
}

button {
    font-weight: 500;
}

/* ==========================================
   NAVIGATION BAR
   ========================================== */
/* Fixed position navbar that stays at the top of screen while scrolling */
.navbar {
    position: fixed;
    /* Keeps the navbar at the top of the viewport */
    top: 0;
    width: 100%;
    background-color: rgba(11, 13, 14, 0.8);
    /* Semi-transparent background */
    backdrop-filter: blur(10px);
    /* Creates a frosted glass effect */
    z-index: 1000;
    /* Ensures navbar stays on top of other elements */
    padding: 15px 0;
    transition: all 0.3s ease;
    /* Smooth animation for any property changes */
    font-family: var(--font-outfit);
}

/* Container to center and size the navbar content */
.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* Website title/logo in the navbar */
.navbar-logo {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--font-outfit);
}

/* Container for the navigation links */
.navbar-links {
    display: flex;
    /* Creates a horizontal row of elements */
    gap: 25px;
    /* Space between each navigation link */
}

/* Individual navigation links */
.navbar-link {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
    position: relative;
    font-family: var(--font-outfit);
}

/* Creates an animated underline effect on hover */
.navbar-link:after {
    content: '';
    /* Required for pseudo-elements */
    position: absolute;
    /* Position relative to the link */
    width: 0;
    /* Start with no width */
    height: 2px;
    /* Height of the underline */
    bottom: -5px;
    /* Position below the text */
    left: 0;
    background-color: var(--secondary-color);
    /* Yellow underline */
    transition: width 0.3s;
    /* Animate width changes */
}

/* When hovering over a link, expand the underline to full width */
.navbar-link:hover:after {
    width: 100%;
}

/* ==========================================
   HAMBURGER MENU
   ========================================== */
/* Hamburger button */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 19px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1100;
    flex-shrink: 0;
    position: relative;
}

/* The three lines of the hamburger */
.hamburger-bar {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

/* Animate hamburger to X when open */
.hamburger.open .hamburger-bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}

.hamburger.open .hamburger-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.open .hamburger-bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* Nav links dropdown panel (main page only - scoped to #navbar-links) */
#navbar-links {
    display: flex;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background-color: rgba(11, 13, 14, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    will-change: transform, opacity, backdrop-filter;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 0;
    padding: 8px 0;

    /* Animation: Slide down + Fade in */
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;

    z-index: 1050;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

#navbar-links.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Override navbar-link styles inside the dropdown panel */
#navbar-links .navbar-link {
    font-size: 0.95rem;
    padding: 12px 24px;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-color);
    white-space: nowrap;
    box-sizing: border-box;
}

#navbar-links .navbar-link:last-child {
    border-bottom: none;
}

/* Overlay - unused */
.nav-overlay {
    display: none;
}

/* ==========================================
   HERO SECTION (MAIN INTRO AREA)
   ========================================== */
/* Full-height intro section with your profile */
.hero-section {
    padding-top: 50px;
    /* Space between navbar and section content */
    min-height: 100vh;
    /* At least full viewport height */
    display: flex;
    /* Enables flexbox layout */
    align-items: center;
    /* Centers content vertically */
    justify-content: center;
    /* Centers content horizontally */
}

/* Container for profile content */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Profile picture container with circular shape */
.hero-image {
    position: relative;
    border-radius: 50%;
    /* Creates a circle */
    width: 180px;
    height: 180px;
    overflow: hidden;
    /* Hides anything outside the circle */
    margin-bottom: 30px;
    border: 4px solid var(--primary-color);
    /* Blue border around image */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(2, 136, 209, 0.3),
        0 0 60px rgba(2, 136, 209, 0.1);
    /* Enhanced shadow with blue glow */
    transition: all 0.3s ease;
    /* Animation for hover effect */
}

/* Add ambient glow effect around the profile image */
.hero-image::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: radial-gradient(circle at center,
            rgba(2, 136, 209, 0.15) 0%,
            rgba(2, 136, 209, 0.08) 30%,
            rgba(2, 136, 209, 0.03) 60%,
            transparent 100%);
    border-radius: 50%;
    z-index: -1;
    animation: ambientPulse 3s ease-in-out infinite alternate;
}

/* The actual profile image inside the container */
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Maintains aspect ratio while filling container */
    object-position: center;
    /* Centers the image */
    transform: scale(1);
    /* No scaling by default */
    border-radius: 50%;
    /* Ensures circular shape */
}

/* Slight grow effect when hovering over profile picture */
.hero-image:hover {
    transform: scale(1.08);
    /* Enlarges by 8% */
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(2, 136, 209, 0.4),
        0 0 80px rgba(2, 136, 209, 0.15);
    /* More intense glow on hover */
}

/* Enhanced ambient effect on hover */
.hero-image:hover::before {
    animation-duration: 1.5s;
    /* Faster pulse on hover */
    background: radial-gradient(circle at center,
            rgba(2, 136, 209, 0.25) 0%,
            rgba(2, 136, 209, 0.12) 30%,
            rgba(2, 136, 209, 0.05) 60%,
            transparent 100%);
    /* More intense ambient glow on hover */
}

/* Your name with gradient text effect */
.hero-title {
    margin: 0;
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, var(--text-color), var(--primary-color));
    /* Text gradient */
    -webkit-background-clip: text;
    /* Clips background to text shape */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Makes text transparent to show gradient */
    margin-bottom: 10px;
    font-family: var(--font-outfit);
}

/* Subtitle text below your name */
.hero-subtitle {
    font-size: 1.25rem;
    /* Reduced from 1.5rem to make subtitle smaller */
    color: var(--text-color);
    margin-bottom: 25px;
    max-width: 95%;
    font-family: var(--font-inter);
}

/* Hero actions container */
.hero-actions {
    margin-bottom: 3px;
    /* Reduced from 25px to 15px */
}

/* CV Download button styling */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Reduced from 12px */
    padding: 10px 20px;
    /* Reduced from 12px 24px */
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-outfit);
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Enhanced transition with custom easing */
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    /* Reduced from 1rem */
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    /* Initial shadow */
}

.btn-primary {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.btn-primary:hover {
    background: var(--card-hover);
    transform: translateY(-6px) scale(1.03);
    /* Enhanced elevation with subtle scale */
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(2, 136, 209, 0.15),
        0 0 40px rgba(2, 136, 209, 0.08);
    /* Multi-layered shadow with blue glow */
    border-color: rgba(2, 136, 209, 0.3);
}

.btn-primary:active {
    transform: translateY(-2px) scale(1.01);
    /* Reduced elevation when clicked */
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.2),
        0 0 15px rgba(2, 136, 209, 0.12);
    /* Reduced shadow for active state */
    transition: all 0.15s ease;
    /* Faster transition for active state */
}

/* Add a subtle shimmer effect on hover */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transition: left 0.6s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

/* ==========================================
   SOCIAL MEDIA LINKS
   ========================================== */
/* Container for social media items */
.social-links {
    display: flex;
    gap: 20px;
    /* Gap between each social-item-container */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens if needed */
    justify-content: center;
    /* Center items if they wrap */
}

/* Specific margins for social links in the hero section */
.hero-content .social-links {
    margin-top: 25px;
    margin-bottom: 0;
    /* Explicitly set if needed, though 0 is often default */
}

/* Container for each icon button and its text */
.social-item-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Space between icon button and text */
    width: 70px;
    /* Width of the container to allow text centering */
}

/* Individual social media icon buttons (general style) */
.social-link {
    display: flex;
    align-items: center;
    /* Vertically centers icon */
    justify-content: center;
    /* Horizontally centers icon */
    width: 75px;
    /* Fixed width - This is a general style, overridden below for hero */
    height: 75px;
    /* Fixed height, same as width - This is a general style */
    border-radius: 8px;
    /* General border-radius */
    background: var(--card-bg);
    color: var(--text-color);
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
}

/* Specific style for social links in the Hero (About) section to make them circular */
.hero-content .social-link {
    width: 48px;
    /* Standard icon button width */
    height: 48px;
    /* Standard icon button height */
    border-radius: 50%;
    /* Makes it circular */
}

.social-link i {
    font-size: 1.2rem;
    /* Adjusted icon size for the button */
    line-height: 1;
    /* Ensure consistent vertical alignment */
}

/* Text below the icon button */
.social-link-text {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-color);
    font-family: var(--font-inter);
    line-height: 1.2;
    text-align: center;
}

/* Hover effect for social links */
.social-link:hover {
    transform: translateY(-5px);
    background: var(--primary-color);
    color: white;
}

/* ==========================================
   SECTION TITLES
   ========================================== */
/* Common styling for all section titles */
.section-title {
    position: relative;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
    color: var(--text-color);
    font-family: var(--font-outfit);
}

/* Decorative underline below section titles */
.section-title:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    /* Centers the line */
    width: 70px;
    height: 3px;
    background: var(--secondary-color);
    /* Yellow underline */
}

/* ==========================================
   SKILLS SECTION
   ========================================== */
/* Container for skill items */
.skills-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Allows horizontal scrolling */
    gap: 20px;
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 60px;
    padding: 15px 5vw;
    box-sizing: border-box;
    /* Hide scrollbar for WebKit browsers but keep functionality */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

/* Ensures the right-side padding works correctly in all browsers when scrolling */
.skills-container::after {
    content: "";
    flex: 0 0 auto;
    width: 1px;
}

.skills-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

/* Individual skill card */
.skill-item {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 15px;
    min-width: 120px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* Stack icon and text vertically */
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

/* Add hover effect for the entire skill item */
.skill-item:hover {
    transform: translateY(-8px);
    /* Float up effect */
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
    /* Enhanced shadow */
    background: var(--card-hover);
    /* Change background */
    border-color: var(--primary-color);
    /* Highlight border with main color */
}

/* Skill icons */
.skill-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

/* Skill name text */
.skill-name {
    color: var(--text-color);
    font-weight: 600;
    font-family: var(--font-outfit);
    font-size: 0.9rem;
    margin-top: 5px;
}

/* ==========================================
   CUSTOM SKILL ICONS
   ========================================== */
/* Flutter logo sizing */
.flutter-icon {
    width: 2.2rem;
    height: 2.2rem;
    /* margin-bottom: 12px; */
}

/* Custom Flutter SVG icon (Font Awesome doesn't have Flutter) */
.custom-flutter-icon {
    display: inline-block;
    font-size: 2.2rem;
    /* SVG embedded as a data URL */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 317' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M157.666 0L0 157.667l48.8 48.8L255.268.001 157.666 0z' fill='%2347c5fb'/%3E%3Cpath d='M156.567 145.397L72.15 229.815l48.984 49.716 48.71-48.71 85.425-85.426-48.983-48.8-49.72 48.802z' fill='%2347c5fb'/%3E%3Cpath d='M121.133 279.531l37.082 37.082h97.52l-85.425-85.427-49.177 48.345z' fill='%2300569e'/%3E%3Cpath d='M71.6 230.364l48.8-48.802-48.8-48.8-48.8 48.8 48.8 48.802z' fill='%2300b5f8'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 2.2rem;
    height: 2.2rem;
    /* margin-bottom: 12px; */
}

/* Custom Firebase SVG icon */
.custom-firebase-icon {
    /* Similar approach to the Flutter icon */
    display: inline-block;
    font-size: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M19.62 11.558l-3.203 2.98-2.972-5.995 1.538-3.448c.4-.7 1.024-.692 1.414 0z' fill='%23ffa000'/%3E%3Cpath d='M13.445 8.543l2.972 5.995-11.97 11.135z' fill='%23f57f17'/%3E%3Cpath d='M23.123 7.003c.572-.55 1.164-.362 1.315.417l3.116 18.105-10.328 6.2c-.36.2-1.32.286-1.32.286s-.874-.104-1.207-.3L4.447 25.673z' fill='%23ffca28'/%3E%3Cpath d='M13.445 8.543l-8.997 17.13L8.455.638c.142-.78.873-.976 1.31-.348z' fill='%23ffa000'/%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 2.2rem;
    height: 2.2rem;
    /* margin-bottom: 12px; */
}

/* Specific colors for each technology icon */
.firebase-icon {
    color: #FFCA28;
}

/* Firebase yellow */
.python-icon {
    color: #3776AB;
}

/* Python blue */
.sqlite-icon {
    color: #003B57;
}

/* SQLite dark blue */
.linux-icon {
    color: #FCC624;
    /* Linux yellow */
    margin-top: 5px;
    /* Add space above icon to align with others */
    font-size: 2.2rem;
    /* Ensure consistent size */
}

.cloudflare-icon {
    color: #F38020;
}

/* Cloudflare orange */
.fastapi-icon {
    color: #009688;
}

/* FastAPI teal */
.docker-icon {
    color: #2496ED;
}

/* Docker blue */
.oci-icon {
    color: #F80000;
}

/* Oracle red */

/* Scale up icons on hover */
.skill-item:hover .skill-icon {
    transform: scale(1.15);
    /* Enlarges by 15% */
}

/* Same hover effect for Firebase icon */
.skill-item:hover .custom-firebase-icon {
    transform: scale(1.15);
}

/* ==========================================
   PROJECTS SECTION
   ========================================== */
/* Grid layout for project cards */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    /* Responsive grid */
    gap: 30px;
    margin-top: 40px;
    padding: 0 20px;
}

/* Individual project card */
.project-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    /* Clips content to rounded corners */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    /* Indicates card is clickable */
}

/* Hover effect for project cards */
.project-card:hover {
    transform: translateY(-10px);
    /* Float up effect */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    /* Enhanced shadow */
}

/* Header section of project cards with title and GitHub link */
.project-header {
    padding: 20px;
    padding-bottom: 10px;
    /* Reduce bottom padding to decrease space between title and description */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Project title styling */
.project-title {
    font-size: 1.3rem;
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-outfit);
}

/* GitHub button styling */
.mantine-hmby9c {
    background: transparent !important;
    /* Forces transparency */
    border: 1px solid #292C32;
    padding: 4px;
    border-radius: 8px;
    color: var(--text-color);
    transition: all 0.2s ease;
}

/* Hover effect for GitHub button */
.mantine-hmby9c:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    /* Semi-transparent white */
    transform: translateY(-2px);
    /* Slight lift */
}

/* Project description text */
.project-desc {
    padding: 0 20px;
    padding-top: 5px;
    /* Reduce top padding to bring description closer to title */
    margin-top: 0;
    /* Remove top margin if any */
    color: #8F96A3;
    font-size: 0.9rem;
    margin-bottom: 20px;
    font-family: var(--font-inter);
}

/* Container for project tags */
.project-tags {
    display: flex;
    flex-wrap: wrap;
    /* Allows tags to wrap to new lines */
    gap: 8px;
    padding: 0 20px 20px;
}

/* Individual project tag pill */
.project-tag {
    background: #212328;
    color: var(--text-color);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* ==========================================
   CARD INTERACTION STYLING
   ========================================== */
/* Makes entire card clickable */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.card-link:hover {
    text-decoration: none;
}

/* Ensures GitHub button works independently of card click */
.github-link {
    position: relative;
    z-index: 2;
    /* Higher z-index keeps it above the card layer */
}

/* ==========================================
   CONTACT SECTION
   ========================================== */
/* Contact section background and spacing */
.contact-section {
    background: rgba(24, 26, 27, 0.5);
    margin-top: 60px;
    padding: 40px 0 1px 0;
    text-align: center;
}

/* Contact section paragraph */
.contact-section p {
    font-family: var(--font-inter);
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Contact button/link */
.contact-section a {
    font-family: var(--font-outfit);
    display: inline-block;
    padding: 12px 25px;
    font-size: 1rem;
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Hover effect for contact button */
.contact-section a:hover {
    background: var(--card-hover);
    transform: translateY(-2px);
    /* Slight lift */
}

/* Container for all contact items */
.contact-items-container {
    display: flex;
    flex-direction: column;
    /* Stack email item and social-contact-group vertically */
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

/* Specific styling for social links in contact section */
.contact-items-container .social-links {
    gap: 15px;
    /* Increased from 20px to 30px for more spacing */
    margin-top: 20px;
    /* Increased from 10px to 20px */
}

.contact-items-container .social-item-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: auto;
    /* Changed from 70px to auto to accommodate text inside buttons */
    margin: 0 10px;
    /* Increased from 5px to 10px for more horizontal margin */
}

.contact-items-container .social-link {
    display: flex;
    flex-direction: column;
    /* Stack icon and text vertically */
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 40px;
    /* Fixed width */
    height: 50px;
    /* Fixed height, same as width */
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    border: 2px solid transparent;
}

.contact-items-container .social-link i {
    font-size: 1.2rem;
    line-height: 1;
    /* Ensure consistent vertical alignment */
    color: var(--primary-color);
    /* Make icons blue */
}

.contact-items-container .social-link-text {
    font-size: 0.9rem;
    /* Increased from 0.7rem for better readability inside button */
    font-weight: 500;
    color: var(--text-color);
    font-family: var(--font-inter);
    line-height: 1.2;
    text-align: center;
    margin: 0;
    /* Remove any default margins */
}

.contact-items-container .social-link:hover {
    transform: translateY(-2px);
    /* Reduced from -5px for subtler effect */
    border-color: var(--primary-color);
    /* Only border glows blue */
    box-shadow: 0 4px 15px rgba(2, 136, 209, 0.3);
    /* Blue glow around border */
}

/* Individual contact item styling */
.contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    padding: 10px 20px;
    border-radius: 8px;
    /* margin: 0 auto; Removed as parent handles centering */
    max-width: fit-content;
    /* Ensures items are only as wide as their content */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-2px);
    /* Reduced lift from -3px */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: var(--primary-color);
}

.contact-icon {
    /* Renamed from .email-icon */
    color: var(--primary-color);
    font-size: 1rem;
    /* Reduced from 1.2rem */
    margin-right: 10px;
    /* Reduced from 12px */
}

.contact-link {
    /* Renamed from .email-link */
    color: var(--text-color);
    font-family: var(--font-outfit);
    font-weight: 500;
    font-size: 0.95rem;
    /* Default desktop font size */
    text-decoration: none;
    transition: color 0.2s;
    display: inline;
    /* Default for desktop: original text shown inline */
    line-height: normal;
    /* Default for desktop */
}

/* Pseudo-elements: hidden by default (desktop) */
.contact-link::before,
.contact-link::after {
    display: none;
    content: "";
    /* Important to reset content if it was set elsewhere */
}

/* Small screens (mobile) */
@media (max-width: 768px) {
    /* navbar-links mobile display is handled by the hamburger CSS */

    .hero-title {
        font-size: 2.5rem;
        /* Smaller title on mobile */
        margin-bottom: 5px;
    }

    .hero-subtitle {
        font-size: 1rem;
        /* Smaller subtitle on mobile */
        margin-bottom: 20px;
    }

    .social-links {
        gap: 15px;
        /* Slightly smaller gap between items on mobile */
    }

    .social-item-container {
        gap: 6px;
        /* Smaller gap between icon and text on mobile */
        width: 65px;
        /* Adjust container width if needed */
    }

    .social-link {
        width: 42px;
        /* Smaller circular button for mobile */
        height: 42px;
        /* Smaller circular button for mobile */
    }

    .social-link i {
        font-size: 1.1rem;
        /* Smaller icon for mobile */
    }

    .social-link-text {
        font-size: 0.65rem;
        /* Adjust text size for mobile */
    }

    .projects-grid {
        grid-template-columns: 1fr;
        /* Single column layout on mobile */
        padding: 0 15px;
    }

    .hero-content {
        padding: 0 15px;
    }

    .hero-section {
        padding-top: 0px;
        /* Increased from 0px to provide proper space below navbar */
        min-height: 100vh;
        /* Ensure full viewport height */
    }

    /* Fix contact section spacing on mobile */
    .contact-section {
        padding: 20px 0 20px 0;
        /* Increased bottom padding */
        margin-top: 20px;
        /* Reduced top margin */
    }

    .contact-section .section-title {
        margin-bottom: 20px;
        /* Reduced margin */
    }

    .contact-section p {
        margin-bottom: 20px;
        /* Reduced margin */
        font-size: 0.95rem;
        /* Slightly smaller text */
        padding: 0 20px;
        /* Add horizontal padding */
    }

    /* Ensure email container has enough space */
    .contact-items-container .contact-item {
        /* Adjusted selector for specificity */
        margin-bottom: 0;
        padding: 10px 16px;
        font-size: 0.9rem;
        /* Font size for the item container */
        flex-wrap: nowrap;
        justify-content: flex-start;
        max-width: 95%;
        width: auto;
        gap: 8px;
    }

    .contact-link {
        /* Layout for pseudo-elements on mobile */
        display: flex;
        flex-direction: column;
        flex: 1;
        word-break: break-word;
        /* font-size, line-height, color are not set here directly;
           they are controlled by .original-email-text or pseudo-elements */
    }

    /* Hide the original email text span on mobile */
    .contact-link .original-email-text {
        display: none;
    }

    /* Show and style pseudo-elements for mobile */
    .contact-link::before {
        display: block;
        /* Make visible */
        content: "mohamed.ayman.khodeir";
        font-size: 0.9rem;
        line-height: 1.4;
        font-family: var(--font-outfit);
        font-weight: 500;
        color: var(--text-color);
    }

    .contact-link::after {
        display: block;
        /* Make visible */
        content: "@gmail.com";
        font-size: 0.9rem;
        line-height: 1.4;
        font-family: var(--font-outfit);
        font-weight: 500;
        color: var(--text-color);
    }
}

/* Desktop styles - ensure correct state */
@media (min-width: 769px) {
    .contact-link {
        display: inline;
        /* Ensure original text flows inline */
        font-size: 0.95rem;
        /* Restore desktop font size */
        line-height: normal;
        /* Restore normal line height */
        color: var(--text-color);
        /* Restore text color */
        /* Reset flex properties if they were set for mobile */
        flex-direction: initial;
        flex: initial;
    }

    /* Ensure original email text span is visible on desktop */
    .contact-link .original-email-text {
        display: inline;
        /* Or 'initial' if specific display isn't needed */
    }

    /* Ensure pseudo-elements are hidden on desktop */
    .contact-link::before,
    .contact-link::after {
        display: none;
        content: "";
    }
}

/* Medium screens (tablets) */
@media (min-width: 768px) {
    .projects-grid {
        padding: 0 30px;
        /* More padding on tablets */
    }
}

/* Medium screens (tablets) */
@media (min-width: 768px) {
    .projects-grid {
        padding: 0 30px;
        /* More padding on tablets */
    }
}

/* Large screens (desktops) */
@media (min-width: 1200px) {
    .projects-grid {
        padding: 0 50px;
        /* Even more padding on desktops */
    }
}

/* Specific breakpoint for skills section */
@media (min-width: 62em) {

    /* 62em = 992px */
    .mantine-34r987 {
        padding-top: 0.5rem;
        padding-bottom: 60px;
    }
}

/* Section titles - adjust for skills section specifically */
#skills .section-title:first-child {
    margin-top: 0;
    /* Remove top margin from the skills section title */
    padding-top: 10px;
    /* Add minimal padding */
}

/* Skill Modal Styles */
/* Skill Modal Overlay */
.skill-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
    animation: modalFadeIn 0.3s ease;
}

.skill-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.skill-modal-content {
    background: var(--card-bg);
    border-radius: 20px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: modalSlideUp 0.3s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Scrollbar for Skill Modal */
.skill-modal-content::-webkit-scrollbar {
    width: 4px;
}

.skill-modal-content::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 4px;
}

.skill-modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.skill-modal-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

/* Modal Header */
.skill-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 30px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.skill-modal-title-section {
    display: flex;
    align-items: center;
    gap: 20px;
}



.skill-modal-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    font-family: var(--font-outfit);
}

.skill-modal-category {
    color: #8F96A3;
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    font-family: var(--font-inter);
}

.skill-modal-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.skill-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

/* Header actions group: Learn More icon + Close button */
.skill-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.skill-learn-more-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-color);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.skill-learn-more-btn:hover {
    background: rgba(2, 136, 209, 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Modal Body */
.skill-modal-body {
    padding: 30px;
}

.skill-section {
    margin-bottom: 30px;
}

.skill-section:last-child {
    margin-bottom: 0;
}

.skill-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 15px 0;
    font-family: var(--font-outfit);
}

.skill-description {
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    font-family: var(--font-inter);
}

.skill-experience {
    color: #8F96A3;
    line-height: 1.6;
    margin: 0;
    font-family: var(--font-inter);
}

/* Proficiency Bar */
.skill-proficiency {
    display: flex;
    align-items: center;
    gap: 15px;
}

.proficiency-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.proficiency-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.8s ease;
}

.proficiency-text {
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: var(--font-outfit);
    min-width: 120px;
    text-align: right;
}

/* Projects Grid */
.skill-projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/* Styling for the link wrapping the project item */
.skill-project-item-link {
    text-decoration: none;
    /* Remove default link underline */
    color: inherit;
    /* Inherit text color from parent */
    display: block;
    /* Make the link a block element to fill its grid cell */
}

.skill-project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.skill-project-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    /* Add upward translation */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Add subtle shadow */
}

.skill-project-item i {
    color: var(--secondary-color);
    font-size: 0.8rem;
}

/* Capabilities List */
.skill-capabilities-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}

.skill-capabilities-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    color: var(--text-color);
    font-family: var(--font-inter);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.skill-capabilities-list li:hover {
    background: rgba(255, 255, 255, 0.06);
}

.skill-capabilities-list li i {
    color: var(--secondary-color);
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Modal Footer */
.skill-modal-footer {
    padding: 20px 30px 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.skill-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: var(--font-outfit);
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.skill-action-btn.primary {
    background: var(--primary-color);
    color: white;
}

.skill-action-btn.primary:hover {
    background: #0277BD;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(2, 136, 209, 0.3);
}

.skill-action-btn.secondary {
    background: transparent;
    color: var(--text-color);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.skill-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-color);
}

/* Enhanced skill item hover effect */
.skill-item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.skill-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(2, 136, 209, 0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.skill-item:hover::before {
    transform: translateX(100%);
}

/* ==========================================
   ANIMATIONS AND SCROLL EFFECTS
   ========================================== */
/* Base animation styles for elements that fade in on scroll */
.animate {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
    animation-play-state: paused;
    /* Will be set to running by JavaScript */
}

/* Staggered animation delays for sequential elements */
.animate.delay-1 {
    animation-delay: 0.2s;
}

.animate.delay-2 {
    animation-delay: 0.4s;
}

.animate.delay-3 {
    animation-delay: 0.6s;
}

/* Keyframe for fade in from bottom animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Alternative fade in animation for variety */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Scale animation for special elements */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide in from left animation */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide in from right animation */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Hero section specific animations */
.hero-image.animate {
    animation: scaleIn 1s ease forwards;
}

.hero-title.animate {
    animation: fadeInUp 1s ease forwards;
}

.hero-subtitle.animate {
    animation: fadeInUp 0.8s ease forwards;
}

.social-links.animate {
    animation: fadeInUp 0.8s ease forwards;
}

/* Skills section animations */
.skills-container.animate {
    animation: fadeInUp 0.8s ease forwards;
}

.skill-item {
    transition: all 0.3s ease;
}

/* Projects section animations */
.projects-grid.animate {
    animation: fadeInUp 0.8s ease forwards;
}

/* Contact section animations */
.contact-section.animate {
    animation: fadeInUp 0.8s ease forwards;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .animate {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .animate.delay-1,
    .animate.delay-2,
    .animate.delay-3 {
        animation-delay: 0s;
    }
}

/* ==========================================
   CUSTOM SCROLLBAR STYLES
   ========================================== */
/* For Webkit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 10px;
    /* Width of the entire scrollbar */
    height: 10px;
    /* Height of the scrollbar (for horizontal scrollbars) */
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
    /* Background of the scrollbar track */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--text-color);
    /* Color of the scrollbar thumb - changed to text-color (white/light grey) */
    border-radius: 5px;
    /* Roundness of the scrollbar thumb */
    border: 2px solid var(--bg-color);
    /* Creates padding around thumb */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #f0f0f0;
    /* Lighter shade for hover - very light grey */
}

/* For Firefox */
/* Note: Firefox scrollbar styling is more limited */
/* For basic color changes, you can use: */
/*
html {
    scrollbar-width: thin; 
    scrollbar-color: var(--primary-color) var(--bg-color); 
}
*/
/* However, for more detailed styling like border-radius on the thumb,
   WebKit-specific pseudo-elements are more effective.
   The above Firefox properties are commented out to maintain consistency
   with the more detailed WebKit styling. If Firefox-specific styling is
   desired, these can be uncommented and adjusted.
*/

/* Copy email button styling (remains specific to email if button only exists there) */
.copy-email-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 0.85rem;
    /* Reduced from 0.9rem */
    padding: 4px;
    /* Reduced from 5px */
    margin-left: 8px;
    /* Reduced from 10px */
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.2s ease;
    border-radius: 4px;
}

.copy-email-btn i {
    /* New rule */
    color: inherit;
    /* Ensure icon inherits color from the button */
}

.copy-email-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
}

.copy-email-btn:active {
    transform: scale(0.95);
}

.copy-email-btn.copied {
    color: #4CAF50;
    /* This makes the button text (if any) green */
    opacity: 1;
}

.copy-email-btn.copied i {
    /* New rule for the icon in copied state */
    color: var(--secondary-color);
    /* Yellow for the checkmark icon */
}

.footer-copyright {
    text-align: center;
    color: #8F96A3;
    /* A slightly muted color for subtlety */
    font-size: 0.9em;
    padding-top: 10px;
    /* Adds space above it */
    margin-top: 40px;
    /* Adds more space if needed */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    /* A subtle line for separation */
    max-width: 800px;
    /* Optional: keeps the width controlled */
    margin-left: auto;
    margin-right: auto;
}

/* End of CSS file */

/* ==========================================
   COMPACT CAREER SECTION (Experience + Education)
   ========================================== */
.career-section {
    padding: 0 20px 60px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* Projects section — matches spacing of all other sections */
.projects-section {
    padding: 0 0 60px;
}

.career-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    /* Aligned with standard gaps */
    width: 100%;
}

.career-column {
    display: flex;
    flex-direction: column;
}

.section-title-small {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-color);
    font-family: var(--font-outfit);
    /* Removed the side bar accent for a simpler look */
}

/* Compact Card Styles - Integrated Look */
.compact-card-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.compact-card {
    background: transparent;
    /* Seamless blend */
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    /* Minimalist indicator */
    padding: 10px 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transition: all 0.2s ease;
}

.compact-card:hover {
    background: rgba(255, 255, 255, 0.02);
    /* Very subtle hover */
    border-left-color: var(--secondary-color);
}

.compact-icon-container {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    /* Slightly squarer to match site buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    font-size: 1rem;
    flex-shrink: 0;
}

.compact-title {
    font-size: 1.1rem;
    margin: 0 0 2px 0;
    color: var(--text-color);
    font-family: var(--font-outfit);
    font-weight: 600;
}

.compact-meta {
    font-size: 0.85rem;
    color: #8F96A3;
    margin-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.compact-org {
    color: var(--secondary-color);
    font-weight: 500;
}

.compact-date {
    opacity: 0.7;
}

.compact-desc {
    font-size: 0.9rem;
    color: #D2D4D5;
    margin: 0;
    line-height: 1.5;
}

/* Education Highlight - subtle difference */
.education-highlight .compact-icon-container {
    color: var(--secondary-color);
}

/* Mini Certs - Simple list look */
.certs-mini-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 5px;
}

.mini-cert-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-decoration: none;
    /* For anchor tags */
    transition: all 0.2s ease;
}

.mini-cert-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.mini-cert-card i {
    color: var(--secondary-color);
    font-size: 0.9rem;
}

.mini-cert-title {
    font-size: 0.9rem;
    color: var(--text-color);
    font-weight: 500;
}

.mini-cert-issuer {
    font-size: 0.8rem;
    color: #8F96A3;
    margin-left: auto;
    /* Push to right */
}

/* ==========================================
   INTEGRATED ACHIEVEMENTS BANNERS
   ========================================== */
/* Integrated Achievements Banners */
.achievements-section {
    padding: 0 20px 60px;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.achievements-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.achievement-banner {
    /* Using the standard card background from style.css reference */
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.achievement-banner:hover {
    border-top-color: rgba(255, 255, 255, 0.1);
    border-right-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    /* border-left-color remains as defined by specific classes */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


.banner-content {
    flex-grow: 1;
}

.banner-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.banner-title {
    font-size: 1.2rem;
    margin: 0;
    color: var(--text-color);
    font-family: var(--font-outfit);
    font-weight: 600;
}

.banner-badge {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(41, 182, 246, 0.2);
    color: #29B6F6;
}

.banner-badge.silver {
    background: rgba(255, 198, 41, 0.2);
    color: #FFC629;
}

.banner-desc {
    margin: 5px 0 0 0;
    font-size: 0.95rem;
    color: #8F96A3;
    line-height: 1.5;
}

.banner-desc strong {
    color: #fff;
    font-weight: 600;
}

/* Specific Banner Themes */
.nasa-banner {
    border-left: none;
}

.digitopia-banner {
    border-left: none;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .career-grid {
        grid-template-columns: 1fr;
        /* Stack sooner */
    }
}

@media (max-width: 600px) {

    /* Increase side padding to reduce width/provide breathing room */
    .career-section,
    .achievements-section {
        padding-left: 30px;
        padding-right: 30px;
    }

    .achievements-banners {
        grid-template-columns: 1fr;
    }

    .achievement-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .banner-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .mini-cert-issuer {
        margin-left: 0;
        margin-top: 4px;
        /* Stack slightly */
    }
}

/* ==========================================
   GENERIC MODAL STYLES (Achievements, etc)
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    /* Flex when active */
    opacity: 1;
}

.modal-content {
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

/* Scrollbar inside achievement modals — thin and subtle */
.modal-content::-webkit-scrollbar {
    width: 4px;
}

.modal-content::-webkit-scrollbar-track {
    background: var(--card-bg);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.modal-close:hover {
    opacity: 1;
}

.modal-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-title-group {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

#modal-title {
    font-size: 1.5rem;
    margin: 0;
    color: white;
    font-family: var(--font-outfit);
}

.modal-badge {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--secondary-color);
    display: inline-block;
    border: 1px solid rgba(var(--secondary-rgb), 0.3);
    box-shadow: 0 0 15px rgba(var(--secondary-rgb), 0.2);
    margin-top: 5px;
}

.modal-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 20px 0 10px 0;
    font-family: var(--font-outfit);
}

.modal-body p {
    color: #D2D4D5;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 0.95rem;
}


.modal-actions {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

.modal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.modal-btn:hover {
    background: #0277BD;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(2, 136, 209, 0.3);
}

/* Premium Achievement Highlight */
.achievement-highlight-box {
    background: linear-gradient(90deg, rgba(255, 198, 41, 0.08), rgba(255, 198, 41, 0.02));
    border-left: 4px solid var(--secondary-color);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
    animation: fadeIn 0.5s ease;
}

.achievement-highlight-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    pointer-events: none;
}

.highlight-icon {
    font-size: 1.5rem;
    color: var(--secondary-color);
    filter: drop-shadow(0 0 8px rgba(255, 198, 41, 0.3));
}

#modal-award-text {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--font-outfit);
    line-height: 1.4;
    letter-spacing: 0.3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Date styling for banners and modals */
.banner-date {
    font-size: 0.85rem;
    color: #8F96A3;
    /* Muted text color */
    margin-left: auto;
    /* Push to the right */
    font-weight: 500;
    opacity: 0.8;
}

.modal-date {
    font-size: 0.9rem;
    color: #8F96A3;
    margin-left: auto;
    font-weight: 500;
}

/* Mobile Modal Adjustments */
@media (max-width: 600px) {
    .modal-content {
        max-height: 80vh;
        /* Reduced height for mobile */
        padding: 20px;
        width: 95%;
    }

    .modal-header {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .achievement-highlight-box {
        padding: 12px 15px;
        margin-bottom: 20px;
    }
}

.modal-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-right: 10px;
    /* Space between buttons */
    cursor: pointer;
}

.modal-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.4);
}