/* ==========================================================================
   Global variables
   ========================================================================== */
:root {
    --accent-color: #00acd7; /* Accent color */
    --secondary-color: #121212; /* Dark background */
    --text-color: #e0e0e0; /* Light text color */
    --border-color: #383838; /* Subtle border color */
    --hover-color: #00b4bd; /* Slightly darker blue for hover effects */
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
body {
    margin: 0;
    font-family: 'Arial', sans-serif; /* Example: Using Arial, can be changed */
    background-color: var(--secondary-color); /* Dark background */
    color: #e0e0e0; /* Light text color for contrast */
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

html {
    scroll-behavior: smooth;
}

.wrapper {
    width: 100%;
    overflow-x: hidden; /* Ensure no horizontal scroll on wrapper */
}

a {
    color: var(--accent-color); /* Accent color for links */
    text-decoration: none;
}

a:hover {
    color: #ffffff;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
}

.section-title {
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 1rem;
    font-weight: 600;
}

.text-center {
    text-align: center;
}

.py-5 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-5 {
    margin-bottom: 3rem;
}

.mt-4 {
    margin-top: 1.5rem;
}

.mt-5 {
    margin-top: 3rem;
}

.ms-3 {
    margin-left: 1rem;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.rounded-circle {
    border-radius: 50% !important;
}

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1f1f1f, var(--secondary-color)); /* Subtle gradient */
    padding: 2rem;
    text-align: center;
}

.hero-content .name-title {
    font-size: 1.8rem; /* Smaller, letter-spaced title */
    letter-spacing: 0.3em;
    color: var(--accent-color); /* Accent color */
    margin-bottom: 1rem;
    font-weight: 300;
    text-transform: uppercase;
}

.hero-signature-image {
    max-width: 300px; /* Adjust as needed */
    height: auto;
    margin-bottom: 1.5rem;
    animation: fadeInScaleUp 0.5s ease-out 0.2s forwards;
    opacity: 0; /* Start hidden for animation */
    /* filter attribute will be applied by .filter-to-white if class is present in HTML */
}

@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

.hero-subtitle .highlighted-name {
    color: #ffffff; /* Brighter color for the name */
    font-weight: 700;
}

.hero-subtitle .hero-role {
    color: var(--accent-color); /* Accent color for the role */
    font-weight: 600;
}

.hero-cta-button {
    font-size: 1.1rem;
    padding: 0.8rem 2rem;
    background-color: var(--accent-color);
    color: var(--secondary-color); /* Dark text on light button */
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.hero-cta-button:hover {
    background-color: #00b4bd; /* Slightly darker blue for hover */
    color: var(--secondary-color);
    transform: translateY(-3px);
}

.hero-nav-buttons {
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    justify-content: center;
    gap: 0.5rem; /* Spacing between buttons */
}

.hero-nav-button {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    background-color: transparent;
    color: var(--accent-color); /* Accent color for text */
    border: 1px solid var(--accent-color); /* Accent color border */
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.hero-nav-button:hover {
    background-color: var(--accent-color);
    color: var(--secondary-color); /* Dark text on hover */
    transform: translateY(-2px);
}


/* ==========================================================================
   About Section
   ========================================================================== */
.about-section {
    background-color: #161616; /* Slightly lighter dark shade */
}

.profile-image {
    width: 200px; /* Adjust as needed */
    height: 200px;
    object-fit: cover;
    border: 5px solid var(--accent-color); /* Accent border */
}

.about-text-content {
    font-size: 1.1rem;
    color: #c0c0c0; /* Slightly lighter than default text for readability */
}

.about-text-content strong {
    color: #ffffff;
}

.about-text-content .text-unlv { color: #B10202; } /* Example color */
.about-text-content .text-csn { color: #004990; } /* Example color */
.about-text-content .text-vgk { color: #B4975A; } /* Example color */

.social-links-about .social-icon-link {
    margin-right: 15px;
}

.social-links-about .social-icon {
    width: 30px;
    height: 30px;
    /* filter: grayscale(100%) brightness(150%); */ /* Removed old filter */
    transition: filter 0.3s ease, transform 0.3s ease;
}

.social-links-about .social-icon:hover {
    filter: none; /* Remove .filter-to-white on hover to show original color */
    transform: scale(1.1);
}

.resume-button {
    padding: 0.6rem 1.2rem;
    border-color: var(--accent-color);
    color: var(--accent-color);
    font-weight: 500;
}

.resume-button:hover {
    background-color: var(--accent-color);
    color: var(--secondary-color);
}

/* ==========================================================================
   My Journey Section (Timeline)
   ========================================================================== */
.journey-section {
    background-color: var(--secondary-color);
}

.timeline {
    position: relative;
    max-width: 700px;
    margin: 0 auto;
}

.timeline::after {
    content: '';
    position: absolute;
    width: 3px;
    background-color: var(--accent-color);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1.5px; /* Center the 3px line */
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit; /* Should be transparent or match .journey-section */
    width: 50%;
}

.timeline-item:nth-child(odd) {
    left: 0;
    padding-left: 20px;
    padding-right: 50px;
}

.timeline-item:nth-child(even) {
    left: 50%;
    padding-left: 50px;
    padding-right: 20px;
}

.timeline-item::after { /* The circles on the timeline */
    content: '';
    position: absolute;
    width: 15px;   /* Total diameter of the circle element */
    height: 15px;
    background-color: var(--accent-color); /* THIS IS THE FILL COLOR - should match page/section bg */
    border: 3px solid var(--accent-color); /* Accent color border */
    top: 25px;
    border-radius: 50%;
    z-index: 1; /* Ensure circle is above the timeline line */
}

.timeline-item:nth-child(odd)::after {
    right: -9px; /* (Item padding-right 50px) - (timeline width 700px / 2 = 350px item width) ... this needs to be relative to line.
                      Line is at 50% of .timeline. Item edge is at 50% of .timeline.
                      So, to center a 15px circle (whose edge is used for positioning) over the line:
                      Its own center is 7.5px from its edge.
                      We want its center at the 50% mark. So edge is at 50% - 7.5px.
                      Position from right edge of item: -7.5px centers it.
                      The 3px border effectively makes the line 3px wide.
                      The circle's total width is 15px. Half of that is 7.5px.
                      The line is 3px wide. Half of that is 1.5px.
                      If line is at left:50%, margin-left:-1.5px, its center is exactly at 50%.
                      For odd items (left side), item's right edge is at 50%.
                      Circle's 'right' property positions its right outer edge.
                      We want circle's center at 50%. Circle outer radius is 7.5px.
                      So, right edge of circle should be 7.5px to the right of the 50% line.
                      right: -7.5px; (This means 7.5px from the right edge of the item, pushing its center to align with the item's right edge, which is the 50% line)
                   */
    right: -7.5px;
}

.timeline-item:nth-child(even)::after {
    /* For even items (right side), item's left edge is at 50%.
       Circle's 'left' property positions its left outer edge.
       We want circle's center at 50%.
       So, left edge of circle should be 7.5px to the left of the 50% line.
       left: -7.5px;
    */
    left: -7.5px;
}


.timeline-content {
    padding: 20px 30px;
    background-color: #1e1e1e;
    position: relative;
    border-radius: 15px; /* Increased for consistency */
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    border: 1px solid #383838; /* Same sleek border as project cards */
    transition: box-shadow 0.3s ease; /* Add transition for potential hover effect */
}

.timeline-content:hover {
    box-shadow: 0 5px 15px rgba(0, 205, 215, 0.2); /* Subtle accent shadow on hover */
}

.timeline-content h3 {
    color: var(--accent-color);
    margin-top: 0;
}

/* Responsive adjustments for timeline */
@media screen and (max-width: 768px) {
    .timeline::after { /* The line */
        left: 20px;
        margin-left: 0; /* Reset margin-left as we use absolute left now */
    }
    .timeline-item {
        width: 100%;
        padding-left: 50px;
        padding-right: 15px;
    }
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        left: 0; /* All items stack on the left */
    }

    /* Adjust circle position for mobile view */
    .timeline-item::after {
        /* Line is at 20px, line width is 3px, so line center is 20 + 1.5 = 21.5px
           Circle width is 15px, circle radius is 7.5px
           We want circle center at 21.5px.
           So circle's left edge should be 21.5px - 7.5px = 14px
        */
        left: 14px;
        right: auto; /* Clear the right property from desktop view */
    }
     .timeline-item:nth-child(even)::after { /* Ensure consistency for even items on mobile */
        left: 14px;
        right: auto; /* Clear the right property from desktop view */
    }
}


/* ==========================================================================
   Skills Section
   ========================================================================== */
.skills-section {
    background-color: #121212;
}

/* Container for all rows */
.skills-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Each row: label + icons side by side */
.skill-row {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}

/* Left label column */
.skill-label {
  flex-shrink: 0;
  width: 220px;             /* Increased from 180px */
  text-align: right;        /* Keeps it visually aligned right of its column */
  font-weight: 600;
  font-size: 1.1rem;
  color: #aaa;
  padding-top: 4px;         /* Optional: aligns vertically with first row item */
}

/* Item list: horizontal, wrapping as needed */
.skill-items {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Individual tool entries */
.skill-items li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #f0f0f0;
  min-width: 140px;
}

/* Icons */
.skill-items img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.skill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.skill-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: #f0f0f0;
  min-width: 140px;
}

.skill-category h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #a0a0a0;
  margin-bottom: 1rem;
}

.skill-category ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}


.skill-category li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  min-width: 140px;
  color: #f0f0f0;
}

.skill-category li:hover {
  transform: scale(1.05);
  transition: 0.2s ease-in-out;
}

.skill-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
}

/* ==========================================================================
   Projects Section
   ========================================================================== */
.projects-section {
    background-color: var(--secondary-color);
}

.project-card {
    background-color: #1e1e1e;
    border-radius: 15px; /* Increased border-radius for more rounded corners */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Removed border-color from transition */
    height: 100%; /* Ensure cards in a row have same height */
    border: 1px solid #383838; /* Lighter, more subtle border */
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--accent-color); /* Accent shadow on hover */
    /* border-color: var(--accent-color); */ /* Removed accent color border on hover to keep it sleek */
}

.project-image-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.project-image-container img,
.project-image-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .project-card:hover { Duplicated rule, removing
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 205, 215, 0.3);
} */

.project-image-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* Maintain a responsive aspect ratio */
    height: auto;
    min-height: 180px; /* Optional: minimum height for small cards */
    max-height: 320px; /* Optional: maximum height for large cards */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-image, .project-image-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, might crop */
}
.placeholder-icon {
    width: 100%;
    height: 100%;
    object-fit: contain; /* For icons, contain might be better */
    padding: 20px; /* Add some padding around the icon */
    background-color: #2a2a2a; /* Background for the icon area */
}


.project-card-body {
    padding: 1.5rem;
    flex-grow: 1; /* Allows body to take remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes links to bottom */
}

.project-title {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.project-description {
    font-size: 0.95rem;
    color: #c0c0c0;
    margin-bottom: 1rem;
    flex-grow: 1; /* Allows description to take available space */
}

.project-tags {
    margin-bottom: 1rem;
}

.project-tags .tag {
    display: inline-block;
    background-color: #333333;
    color: var(--accent-color);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.project-links .btn {
    margin-right: 0.5rem;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.project-links .btn:hover {
    background-color: var(--accent-color);
    color: var(--secondary-color);
}

/* ==========================================================================
   Gallery Section
   ========================================================================== */
.gallery-section {
    background-color: #121212;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
    color: #ffffff;
    padding: 0.8rem;
    font-size: 0.9rem;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   Contact Section
   ========================================================================== */
.contact-section {
    background: linear-gradient(135deg, #1f1f1f, var(--secondary-color));
    color: #e0e0e0;
}

.contact-section .section-title {
    color: #ffffff;
}

.contact-email-link {
    font-size: 1.5rem;
    color: var(--accent-color);
    font-weight: 500;
    display: inline-block;
    margin-bottom: 1.5rem;
    transition: color 0.3s ease;
}

.contact-email-link:hover {
    color: #ffffff;
}

.social-links-contact .social-icon-link {
    margin: 0 10px;
}

.social-links-contact .social-icon {
    width: 35px; /* Slightly larger for contact section */
    height: 35px;
    /* filter: grayscale(100%) brightness(150%); */ /* Removed old filter */
    transition: filter 0.3s ease, transform 0.3s ease;
}

.social-links-contact .social-icon:hover {
    filter: none; /* Remove .filter-to-white on hover to show original color */
    transform: scale(1.15);
}

.signature-image {
    max-width: 150px; /* Adjust as needed */
    height: auto;
    /* Colorization is now handled by .filter-to-white if that class is applied to this element */
}

.filter-to-white {
    filter: grayscale(1) brightness(200%) invert(1); /* Converts to white, brightness(200%) can help if original is dark */
}

/* Cursor animation styles */
.cursor-animation {
    opacity: 1;
    animation: blink 0.7s infinite;
    color: var(--accent-color); /* Match accent color */
}
.cursor1-animation {
    opacity: 1;
    animation: blink 0.7s infinite;
    color: white; /* Match accent color */
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
    background-color: #0a0a0a; /* Even darker for footer */
    color: #a0a0a0; /* Muted text color */
    font-size: 0.9rem;
}

.quote-einstein {
    font-style: italic;
    color: #b0b0b0;
    font-family: 'Georgia', serif; /* Example different font for quote */
}

.copyright-text {
    color: #808080;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }

    .hero-content .name-title {
        font-size: 1.5rem;
        letter-spacing: 0.2em;
    }
    .hero-subtitle {
        font-size: 1.8rem;
    }

    .profile-image {
        width: 150px;
        height: 150px;
        margin-bottom: 1.5rem;
    }

    .about-section .row > div {
        text-align: center; /* Center content in about section on mobile */
    }
    .social-links-about {
        justify-content: center;
    }
    .resume-button {
        display: block;
        margin-top: 1rem;
        margin-left: auto;
        margin-right: auto;
        width: fit-content;
    }

    .skills-grid {
        grid-template-columns: 1fr; /* Stack skills categories */
    }

    .skill-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .skill-label {
        width: auto;
        text-align: left;
        margin-bottom: 0.5rem;
    }

    .projects-section .row > .col-md-6,
    .projects-section .row > .col-lg-4 {
        margin-bottom: 2rem; /* Add more space between project cards on mobile */
    }
}

@media (max-width: 576px) {
    .hero-subtitle {
        font-size: 1.5rem;
    }
    .hero-cta-button {
        font-size: 1rem;
        padding: 0.7rem 1.5rem;
    }
    .contact-email-link {
        font-size: 1.2rem;
    }
}

/* Optional: Add smooth transition for all elements */
/* * {
    transition: all 0.2s ease-in-out;
} */
/* Be cautious with the above, it can sometimes have unintended performance consequences or override specific transitions.
   It's often better to apply transitions only where needed.
   Removing it for now to be more specific.
*/