/* ========================================
   GLOBAL RESET AND BASE STYLES
   ======================================== */

/* Reset all default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main body styling with background and typography */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #000000; /* Pure black background */
    background-image: url('Background Pattern.svg'); /* SVG pattern overlay */
    background-repeat: no-repeat; /* Don't repeat the pattern */
    background-size: 3840px 2160px; /* Larger fixed size for better coverage */
    background-position: center; /* Center the background */
    min-height: 100vh; /* Full viewport height */
    color: #878787; /* Default text color */
    line-height: 1.6; /* Readable line spacing */
    position: relative; /* For absolute positioning context */
    padding-bottom: 80vh; /* Extra space for scrolling */
}

/* ========================================
   MAIN CONTAINER LAYOUT
   ======================================== */

/* Main container that holds all content */
.container {
    position: relative; /* Positioning context */
    width: 100%; /* Full width */
    min-height: 100vh; /* Full viewport height */
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    padding-top: 100px; /* Space from top before name appears */
}

/* ========================================
   HEADER SECTION (NAME)
   ======================================== */

/* Header container for the name */
.header {
    text-align: center; /* Center the name */
    margin-bottom: 30px; /* Space below header */
}

/* Styling for the main name "Nicholas Evgenidze" */
.name {
    color: #FFF; /* White text */
    text-align: center; /* Center alignment */
    font-family: Inter; /* Custom font */
    font-size: 70px; /* Large font size */
    font-style: normal; /* Normal font style */
    font-weight: 600; /* Bold weight */
    line-height: normal; /* Normal line height */
    letter-spacing: -2.5px; /* Tighter letter spacing */
}

/* Tagline styling (currently not used) */
.tagline {
    font-size: 1.25rem; /* Medium font size */
    color: rgba(255, 255, 255, 0.9); /* Semi-transparent white */
    font-weight: 300; /* Light weight */
    margin-bottom: 1rem; /* Space below tagline */
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */

/* Main content container */
.main {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center horizontally */
    gap: 30px; /* Space between sections */
}

/* ========================================
   BIO SECTION
   ======================================== */

/* Container for bio information */
.bio {
    text-align: center; /* Center alignment */
    margin-bottom: 0; /* No margin since gap handles spacing */
}

/* Bio SVG image styling */
.bio-svg {
    width: 800px; /* Much larger width */
    height: 50px; /* Match button height */
    margin: 0 auto; /* Center the image */
    object-fit: contain; /* Maintain aspect ratio within fixed dimensions */
}

/* Bio text styling (hidden by default on desktop) */
.bio-text {
    display: none; /* Hidden by default on desktop */
}

/* ========================================
   PROJECTS SECTION
   ======================================== */

/* Container for the entire projects section */
.projects-section {
    text-align: center; /* Center alignment */
    margin-bottom: 0; /* No margin since gap handles spacing */
}

/* "Projects" title styling */
.projects-title {
    color: #FFF; /* White text */
    text-align: center; /* Center alignment */
    font-family: Inter; /* Custom font */
    font-size: 45px; /* Large font size */
    font-style: normal; /* Normal font style */
    font-weight: 600; /* Bold weight */
    line-height: normal; /* Normal line height */
    letter-spacing: -1px; /* Tighter letter spacing */
    margin-bottom: 30px; /* Space below title */
}

/* Container for project items */
.projects-content {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack projects vertically */
    gap: 30px; /* Space between projects */
    max-width: 1200px; /* Maximum width */
    margin: 0 auto; /* Center horizontally */
    padding: 0 2rem; /* Horizontal padding */
}

/* Individual project item (text only) */
.project-item {
    display: flex; /* Flexbox layout */
    align-items: flex-start; /* Align to top */
    text-align: left; /* Left-align text */
}



/* Project text container */
.project-text-container {
    flex: 1; /* Take remaining space */
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack title and description vertically */
    gap: 0.5rem; /* Space between title and description */
    justify-content: flex-start; /* Align to top */
}

/* Project title styling */
.project-title {
    color: #FFF; /* White text */
    font-family: Inter; /* Custom font */
    font-size: 15px; /* Larger font size */
    font-weight: 600; /* Bold weight */
    line-height: normal; /* Normal line height */
    letter-spacing: -0.5px; /* Tighter letter spacing */
    margin: 0; /* Remove default margin */
    text-align: left; /* Left alignment */
}

/* Project title styling */
.project-title {
    color: #FFF; /* White text */
    font-family: Inter; /* Custom font */
    font-size: 15px; /* Larger font size */
    font-weight: 600; /* Bold weight */
    line-height: normal; /* Normal line height */
    letter-spacing: -0.5px; /* Tighter letter spacing */
    margin: 0; /* Remove default margin */
    text-align: left; /* Left alignment */
}

/* Project description text styling */
.project-description {
    font-family: Inter; /* Custom font */
    font-weight: 400; /* Medium weight */
    font-style: medium; /* Medium style */
    font-size: 15px; /* Small font size */
    line-height: 1.6; /* Readable line height */
    letter-spacing: -3%; /* Tighter letter spacing */
    color: #878787; /* Consistent gray color */
    text-align: justify; /* Justified text alignment */
    word-spacing: 0.5px; /* Slight word spacing */
    margin: 0; /* Remove default margin */
}

/* Additional text in project titles (links and status) */
.project-title a,
.project-title span {
    font-weight: 400; /* Same weight as description */
    color: #878787; /* Same color as description */
}

/* ========================================
   BUTTON SECTION
   ======================================== */

/* Container for both buttons */
.button-container {
    display: flex; /* Flexbox layout */
    gap: 2rem; /* Space between buttons */
    justify-content: center; /* Center buttons */
    align-items: center; /* Center vertically */
    margin-bottom: 150px; /* Space below buttons */
}

/* Base styling for both "Contact Me" and "Connect on LinkedIn" buttons */
.action-button {
    display: flex; /* Flexbox layout */
    justify-content: center; /* Center content */
    align-items: center; /* Center vertically */
    border-radius: 45px; /* Rounded corners */
    background: rgba(0, 0, 0, 0.1); /* Black transparent background */
    backdrop-filter: blur(5px); /* Light blur for glass effect */
    -webkit-backdrop-filter: blur(5px); /* For Safari browser compatibility */
    border: 0.5px solid rgba(255, 255, 255, 0.3); /* Thinner border */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1), /* Soft shadow for depth */
        inset 0 1px 0 rgba(0, 0, 0, 0.2), /* Black top inner highlight */
        inset 0 -1px 0 rgba(255, 255, 255, 0.1), /* Bottom inner shadow */
        inset 0 0 0px 0px rgba(255, 255, 255, 0); /* No additional inset */
    color: #ffffff; /* White text */
    text-align: center; /* Center text */
    font-family: Inter; /* Custom font */
    font-size: 15px; /* Medium font size */
    font-style: normal; /* Normal font style */
    font-weight: 400; /* Medium weight */
    line-height: normal; /* Normal line height */
    text-decoration: none; /* No underline */
    cursor: pointer; /* Pointer cursor */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth transition */
    white-space: nowrap; /* Keep text on one line */
    position: relative; /* For pseudo-elements */
    overflow: hidden; /* Hide overflow */
    transform: scale(1); /* Initial scale */
    width: 210px; /* Fixed width */
    height: 50px; /* Fixed height */
}

/* Sweeping light effect on button */
.action-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen */
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1), /* Subtle light highlight */
        transparent
    );
    transition: left 0.6s ease; /* Smooth animation */
}

/* Glass surface overlay */
.action-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.05) 0%, /* Very subtle top highlight */
        transparent 10%, /* Middle transparent */
        rgba(0, 0, 0, 0.05) 100% /* Black bottom */
    );
    border-radius: 45px; /* Match button radius */
    pointer-events: none; /* Don't interfere with clicks */
}

/* Animate light sweep on hover */
.action-button:hover::before {
    left: 100%; /* Move light across button */
}

/* Enhanced glass effect on hover */
.action-button:hover {
    background: rgba(0, 0, 0, 0.15); /* More black transparent on hover */
    border: 0.5px solid rgba(255, 255, 255, 0.4); /* Brighter border on hover */
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15), /* Subtle shadow increase */
        inset 0 1px 0 rgba(0, 0, 0, 0.3), /* Brighter black top highlight */
        inset 0 -1px 0 rgba(255, 255, 255, 0.15), /* Brighter bottom shadow */
        inset 0 0 0px 0px rgba(255, 255, 255, 0); /* No additional inset */
    transform: translateY(-2px) scale(1.005); /* Subtle lift and minimal scale */
}

/* Active state for click feedback */
.action-button:active {
    transform: translateY(-1px) scale(0.995); /* Subtle press down effect */
    transition: all 0.1s ease; /* Quick press animation */
}

/* ========================================
   BUTTON SPECIFIC STYLING
   ======================================== */

/* "Contact Me" button padding */
.contact-btn {
    /* Remove padding - use fixed width/height instead */
}

/* "Connect on LinkedIn" button padding */
.linkedin-btn {
    /* Remove padding - use fixed width/height instead */
}

/* LinkedIn icon styling (currently not used) */
.button-icon {
    width: 16.07px; /* Icon width */
    height: 14px; /* Icon height */
    flex-shrink: 0; /* Don't shrink the icon */
}

/* ========================================
   FOOTER SECTION (CURRENTLY REMOVED)
   ======================================== */

/* Footer container (currently not used) */
.footer {
    position: absolute; /* Absolute positioning */
    bottom: 2rem; /* Distance from bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Center adjustment */
    text-align: center; /* Center text */
}

/* Footer text styling (currently not used) */
.footer-text {
    color: rgba(255, 255, 255, 0.7); /* Semi-transparent white */
    font-size: 0.875rem; /* Small font size */
    font-weight: 300; /* Light weight */
}

/* ========================================
   RESPONSIVE DESIGN - TABLET
   ======================================== */

/* Styles for screens smaller than 768px (tablets) */
@media (max-width: 768px) {
    /* Remove background for tablets */
    body {
        background-image: none; /* Remove background image */
        background-color: #000000; /* Keep black background */
        padding-bottom: 20vh; /* Less extra scrolling for tablets */
    }
    
    /* Smaller name on tablets */
    .name {
        font-size: 60px; /* Reduced font size */
        letter-spacing: -2px; /* Adjusted letter spacing */
    }
    
    /* Reduce header margin on tablets */
    .header {
        margin-bottom: 15px; /* 2px more spacing on tablets */
    }
    
    /* Smaller tagline on tablets */
    .tagline {
        font-size: 1.1rem; /* Reduced font size */
    }
    
    /* Hide bio SVG for tablets */
    .bio-svg {
        display: none; /* Hide SVG on tablets */
    }
    
    /* Show bio text for tablets */
    .bio-text {
        display: block; /* Show text on tablets */
        color: #878787; /* Gray text */
        text-align: center; /* Center alignment */
        font-family: Inter; /* Custom font */
        font-size: 13px; /* Same size as project descriptions */
        font-style: normal; /* Normal font style */
        font-weight: 400; /* Same weight as project descriptions */
        line-height: normal; /* Normal line height */
        letter-spacing: -0.5px; /* Tighter letter spacing */
        margin: 0 auto; /* Center horizontally */
        margin-bottom: 10px; /* Back to original spacing */
    }
    
    
    /* Keep buttons consistent size on tablets */
    .action-button {
        width: 210px; /* Fixed width */
        height: 50px; /* Fixed height */
        font-size: 13px; /* Same size as project descriptions */
    }
    
    /* Adjust project layout for tablets */
    .project-item {
        flex-direction: row; /* Keep horizontal layout */
        text-align: left; /* Keep left alignment */
        align-items: flex-start; /* Align to top */
    }
    
    .project-text-container {
        justify-content: flex-start; /* Align to top */
    }
    

    
    .project-title {
        font-size: 13px; /* Same size as description for tablets */
        font-weight: 400; /* Same weight as description */
    }
    
    .project-description {
        font-size: 13px; /* Better readable text for tablets */
        text-align: justify; /* Keep justified text */
    }
    
    /* Adjust main content spacing for tablets */
    .main {
        gap: 8px; /* Equal spacing between sections on tablets */
    }
    
    /* Adjust projects content */
    .projects-content {
        padding: 0 1rem; /* Less padding */
        gap: 25px; /* Space between projects */
    }
    
    /* Adjust projects title */
    .projects-title {
        font-size: 35px; /* Smaller title */
        letter-spacing: -0.5px;
        margin-bottom: 20px; /* Smaller spacing */
    }
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE
   ======================================== */

/* Styles for screens smaller than 500px (mobile phones) */
@media (max-width: 500px) {
    /* Remove background for mobile */
    body {
        background-image: none; /* Remove background image */
        background-color: #000000; /* Keep black background */
        padding-bottom: 10vh; /* Less extra scrolling for mobile */
    }
    
    /* Container adjustments for mobile */
    .container {
        padding-top: 70px; /* Add some space from top on mobile */
        padding-left: 15px; /* Side padding */
        padding-right: 15px; /* Side padding */
    }
    
    
    /* Much smaller name on mobile */
    .name {
        font-size: 36px; /* Much smaller font size */
        letter-spacing: -1px; /* Adjusted letter spacing */
        line-height: 1.1; /* Tighter line height */
    }
    
    /* Reduce header margin on mobile */
    .header {
        margin-bottom: 15px; /* 2px more spacing on mobile */
    }
    
    /* Smaller tagline on mobile */
    .tagline {
        font-size: 0.9rem; /* Smaller font size */
    }
    
    /* Adjust main content spacing */
    .main {
        gap: 8px; /* Equal spacing between sections on mobile */
    }
    
    /* Hide bio SVG on mobile */
    .bio-svg {
        display: none; /* Hide SVG on mobile */
    }
    
    /* Add bio text for mobile */
    .bio-text {
        display: block; /* Show text on mobile */
        color: #878787; /* Gray text */
        text-align: center; /* Center alignment */
        font-family: Inter; /* Custom font */
        font-size: 12px; /* Same size as project descriptions */
        font-style: normal; /* Normal font style */
        font-weight: 400; /* Same weight as project descriptions */
        line-height: normal; /* Normal line height */
        letter-spacing: -0.5px; /* Tighter letter spacing */
        margin: 0 auto; /* Center horizontally */
        margin-bottom: 10px; /* Back to original spacing */
    }
    
    /* Adjust projects section for mobile */
    .projects-section {
        margin-bottom: 8px; /* Very small bottom margin */
    }
    
    /* Smaller projects title on mobile */
    .projects-title {
        font-size: 28px; /* Much smaller title */
        letter-spacing: -0.5px;
        margin-bottom: 20px; /* Smaller spacing */
    }
    
    /* Stack projects vertically on mobile for better layout */
    .project-item {
        flex-direction: column; /* Stack vertically on mobile */
        text-align: center; /* Center alignment on mobile */
        align-items: center; /* Center horizontally */
    }
    
    .project-text-container {
        justify-content: flex-start; /* Align to top on mobile */
        text-align: center; /* Center text on mobile */
    }
    
    .project-description {
        font-size: 12px; /* Better readable text for mobile */
        text-align: left; /* Normal paragraph format on mobile */
        line-height: 1.5; /* Better line height */
        word-spacing: 0.3px; /* Less word spacing */
    }
    
    .project-title {
        font-size: 12px; /* Same size as description for mobile */
        font-weight: 600; /* Same weight as description */
        text-align: left; /* Left align title on mobile */
    }
    
    /* Adjust projects content for mobile */
    .projects-content {
        padding: 0; /* No padding on mobile */
        gap: 20px; /* Increased space between projects for better readability */
    }

        /* Adjust button container for mobile */
    .button-container {
        gap: 1rem; /* Make the space between buttons smaller */
        margin-bottom: 60px; /* Smaller gap between buttons and projects */
    }

    /* Make buttons smaller on mobile */
    .action-button {
        width: 160px; /* Better width for mobile */
        height: 40px; /* Smaller height to match bio SVG */
        font-size: 12px; /* Same size as project descriptions */
    }
}

/* ========================================
   RESPONSIVE DESIGN - SMALL MOBILE
   ======================================== */

/* Styles for very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
    /* Remove background for very small mobile */
    body {
        background-image: none; /* Remove background image */
        background-color: #000000; /* Keep black background */
        padding-bottom: 5vh; /* Minimal extra scrolling for small mobile */
    }
    
    .container {
        padding-top: 50px; /* Add some space from top on small mobile */
        padding-left: 10px; /* Less side padding */
        padding-right: 10px; /* Less side padding */
    }
    
    .name {
        font-size: 32px; /* Even smaller font */
    }
    
    .header {
        margin-bottom: 15px; /* 2px more spacing on small mobile */
    }
    
    .bio-svg {
        display: none; /* Hide SVG on small mobile */
    }
    
    .bio-text {
        display: block; /* Show text on small mobile */
        font-size: 11px; /* Same size as project descriptions on small mobile */
        margin-bottom: 10px; /* Back to original spacing */
    }
    
    .projects-title {
        font-size: 24px; /* Even smaller title */
    }
    
    .project-text-container {
        justify-content: flex-start; /* Align to top on small mobile */
        text-align: center; /* Center text on small mobile */
    }
    
    .project-description {
        font-size: 11px; /* Better readable text for small mobile */
    }
    
    .project-title {
        font-size: 11px; /* Same size as description for small mobile */
        font-weight: 600; /* Same weight as description */
    }
    
    /* Keep buttons consistent size on small mobile */
    .action-button {
        width: 140px; /* Better width for small mobile */
        height: 35px; /* Smaller height to match bio SVG */
        font-size: 11px; /* Same size as project descriptions on small mobile */
    }
}