*{
    margin: 0;
    padding: 0;
    font-family: 'Space Grotesk', sans-serif;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    background: #fff;
    color: #141414;
}

#header{
    position: sticky;
    top: 0;               /* Tells the browser to stick the element at the 0px mark */
    z-index: 100;         /* Ensures the navbar floats above your images and text */
    height: 80px;
    background: #ffffff;
    border-bottom: 0.1rem solid;
    border-color: #141414;
}

.container{
    margin: 20px 5% 120px;
}



nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.logo a{
    color: #141414;
    text-decoration: none;
    font-size: 24px;
    font-weight: bold;
}

nav ul li{
    display: inline-block;
    list-style: none;
    margin: 20px 15px;
}

nav ul li a{
    font-size: 18px;
    font-weight: 500;
    color: #141414;
    text-decoration: none;
    position: relative;
}

nav ul li a::after {
    content:"";
    width: 100%;
    height: 4px;
    position: absolute;
    background: #141414;
    left: 0;
    bottom: -4px;

    /* 2. Hide the line by collapsing its width to 0 */
    transform: scaleX(0);
    transform-origin: center; /* Starts expanding from left to right */
    transition: transform 0.3s ease;
}
nav ul li a:hover::after {
  transform: scaleX(1); /* Expands back to full 100% width */
}

.hamburger {
    display: none; 
}


.header-text{
    margin: 10% 0px 80px;
    justify-content: center; /* Centers horizontally along main axis */
    align-items: center;     /* Centers vertically along cross axis */
    text-align: center;
    height: 100%;
}

.header-text h1{
    color: #141414;
    padding: 0px 0px 20px;
    font-size: 56px;
    font-weight: bold;
}

.header-text .desc-1{
    color: #141414;
    font-size: 20px;
    font-weight: 500;
}

.header-text .desc-2{
    color: #141414;
    font-size: 18px;
    font-weight: 300;
}

.separator {
    border: none;              /* Clears default browser styling */
    height: 1px;               /* Thin, minimalist hairline */
    background-color: #141414; /* Soft border color */
    margin: 24px auto;            /* Breathing room above and below */
  
    justify-content: center; /* Centers horizontally along main axis */
    align-items: center;     /* Centers vertically along cross axis */
    text-align: center;
    width: 80%;               /* Or set to something like 60px for a short accent bar */
}

.arrow-down{
    margin: 9% auto 0;
    width: 40px;
    height: 40px;
}

    /* -------    about me on homepage    ---------   */

.about-anchor-home{
    height: 20px;
}


.section-title{
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: 30px;
    color: #141414;
    margin: 5% 5% 40px;
    gap: 12px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.section-title::before{
    content:"";
    display: inline-block;
    width: 8px;
    height: 1.1em;
    background-color: #141414;
    border-radius: 1px;
}

.img-text-about-home{
    margin: 20px 5% 8%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 7rem;
}

.column-left img{
    width: 500px;
    height: auto;
    object-fit: cover;
}

.column-right{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.column-right p{
    text-align: justify;
    color: #141414;
    font-size: 18px;
    letter-spacing: 0.5px;

}

.resume-section {
  display: flex;
  gap: 4rem;          /* Space between the menu and the content */
  max-width: 900px;   /* Prevents it from stretching too far */
  margin: 4rem auto;  /* Centers the section on the page */
}

/* Left Navigation Column */
.resume-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 200px;
}

.tab-btn {
  background: transparent;
  border: none;
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  padding-bottom: 4px;
  width: fit-content;   /* Ensures the underline only spans the text width */
  font-family: inherit;
}

/* The active underline state */
.tab-btn.active {
  border-bottom: 3px solid #000;
}

/* Right Content Column */


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

/* Hide all tabs by default, only show the active one */
.tab-content {
  display: none; 
}
.tab-content.active {
  display: block; 
}

/* Typography spacing for the text inside the tabs */
.resume-item {
  margin-bottom: 2rem;
}
.resume-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}
.resume-details {
  margin: 0;
  line-height: 1.6;
}

#skills .resume-item ul li{
    display: inline-block;
}

/* -------    ux projects on homepage    ---------   */
.ux-home{
    margin-bottom: 80px;
}

.projectcontainer{
    margin: 5% 5% 2%;
    display: flex;
    align-items: flex-start;
    column-gap: 150px;
}

.traumalog-logo{
    max-width: 400px;
    height: auto;
}

.marionsollbach-logo{
    max-width: 200px;
    height: auto;
}

.uxproject1-home{
    width: 50%;
    justify-content: center; /* Centers horizontally along main axis */
    align-items: center;     /* Centers vertically along cross axis */
    text-align: center;
}

.uxproject2-home{
    width: 50%;
    justify-content: center; /* Centers horizontally along main axis */
    align-items: center;     /* Centers vertically along cross axis */
    text-align: center;
}

.ux div p{
    padding: 10px 0px;
    text-align: justify;
}


.uxproject1-home h2{
    padding: 39px 0px;
}

.uxproject2-home h2{
    padding: 30px 0px;
}

.ux-home .btn{
    display: block;
    width: fit-content;      /* Keeps the button exactly the size of its text + padding */
    margin: 48px auto 40px;     /* 48px top space, auto left/right to center it */
}

/* -------    video projects on homepage    ---------   */

.videoprod-home{
    margin-bottom: 80px;
}

.videoproject1-home{
    width: 50%;
    justify-content: center; /* Centers horizontally along main axis */
    align-items: center;     /* Centers vertically along cross axis */
    text-align: center;
}

.videoproject2-home{
    width: 50%;
    justify-content: center; /* Centers horizontally along main axis */
    align-items: center;     /* Centers vertically along cross axis */
    text-align: center;
}

.videoprod div p{
    padding: 10px 0px;
    text-align: justify;
}

.videoproject1-home h2{
    padding: 40px 0px;
}

.videoproject2-home h2{
    padding: 40px 0px;
}

.videoprod-home .btn{
    display: block;
    width: fit-content;      /* Keeps the button exactly the size of its text + padding */
    margin: 48px auto 40px;     /* 48px top space, auto left/right to center it */
}

/* -------    photo projects on homepage    ---------   */

.photo-home p{
    margin: 20px 5%;
}

.carousel-container{
    padding-left: 5%;  
    padding-right: 5%;
}

/* The track holding the images */
.carousel-track {

    display: flex;
    gap: 24px;                     /* The space between each photo */
    overflow-x: auto;              /* Allows horizontal scrolling */
    scroll-snap-type: x mandatory; /* Locks scrolling perfectly onto the images */
    scroll-behavior: smooth;       /* Makes the JS button clicks glide smoothly */
    padding-bottom: 16px;
  
    /* Hides the default scrollbar for a cleaner look */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar {
    display: none;
}

/* The individual photos */
.carousel-slide {
    flex: 0 0 auto;                 /* Takes up 85% width, leaving 15% for the peek */
    width: auto;
    height: 65vh;                  /* Locks the height to 65% of the browser window */
    object-fit: contain;             /* Crops the photo gracefully without squishing it */
    border-radius: 4px;            /* Minimalist slightly rounded corners */
    scroll-snap-align: start;      /* Snaps the left edge of the photo to the left edge of the screen */
}

/* Basic styling for the controls */
.carousel-controls {
    display: flex;
    gap: 16px;
    width: fit-content;
    margin: 16px auto 32px;
}

.nav-btn {
    background: transparent;
    border: 1px solid #111;
    padding: 8px 16px;
    cursor: pointer;
    font-family: inherit;
}

/* footer starts here */

.footer{
    height: auto;
    width: 100%;
    padding: 40px 5% 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7rem;
    background-color: #141414;
    color:#fff
}

.get-in-touch {
    max-width: 450px; /* Forces the text to wrap to the next line */
}

.information{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Make each item a flex row, center them vertically, and add a gap */
.information .email, 
.information .location, 
.information .social-media {
    display: flex;
    align-items: center;
    gap: 1.5rem; 
}

/* Remove default browser margins so the text stacks cleanly */
.email-text p, 
.location-text p {
    margin: 0; 
    line-height: 1.4;
}

/* Make the top text (Email / Location) bold to match the reference */
.email-text p:first-child,
.location-text p:first-child {
    font-weight: bold;
    margin-bottom: 4px; /* Tiny gap between title and description */
}

/* Shrink the icons to match the reference design */
.email img, 
.location img, 
.social-media img {
    width: 35px; 
    height: auto;
    padding: 0; /* Removes the 20px 10px padding you had earlier */
}


/* Specific spacing for the social media icons */
.information .social-media {
    gap: 2rem; 
}


/* ==========================================================================
   RESPONSIVE STYLES (Mobile & Small Tablets up to 768px)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* --- 1. Navbar & Hamburger Menu --- */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 21px;
        background: transparent;
        border: none;
        cursor: pointer;
    }
    .hamburger span {
        width: 100%;
        height: 3px;
        background: #141414;
        border-radius: 2px;
    }
    .menu {
        display: none; /* Hides the standard inline menu */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 80px; /* Pushes the dropdown directly below your 80px header */
        left: 0;
        background: #ffffff;
        padding: 20px 0;
        border-bottom: 0.1rem solid #141414;
    }
    .menu.active {
        display: flex; /* Displayed when JavaScript adds the 'active' class */
    }
    nav ul li {
        margin: 16px 5%;
        display: block;
    }

    /* --- Typography Scaling --- */
    .header-text h1 {
        font-size: 36px; /* Scaled down from 56px for mobile screens */
    }
    
    /* --- About Me Section --- */
    .img-text-about-home {
        flex-direction: column; /* Stacks the profile image above the text */
        gap: 2rem;
    }
    .column-left img {
        width: 100%;
        height: auto;
    }
    
    /* --- Resume / Tabs Section --- */
    .resume-section {
        flex-direction: column; /* Stacks tabs above the text content */
        gap: 2rem;
        margin: 2rem auto;
    }
    .resume-nav {
        flex-direction: row; /* Aligns tabs horizontally */
        overflow-x: auto;    /* Allows swiping through tabs on small screens */
        white-space: nowrap;
        padding-bottom: 8px;
    }
    .tab-btn {
        font-size: 1.1rem;
    }

    /* --- UX & Video Project Cards --- */
    .projectcontainer {
        flex-direction: column; /* Stacks the 50% split columns vertically */
        gap: 60px; /* Replaces the horizontal 150px column-gap */
    }
    .uxproject1-home, .uxproject2-home, 
    .videoproject1-home, .videoproject2-home {
        width: 100%; /* Forces elements to stretch to the full screen edge */
    }
    
    /* responsive video */
    .videoproject1-home iframe, 
    .videoproject2-home iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9; /* Overrides the hardcoded 420x315 dimensions */
    }
    
    /* images don't overflow */
    .traumalog-logo, .marionsollbach-logo {
        max-width: 100%;
    }

    /* --- footer --- */
    .footer {
        flex-direction: column;
        gap: 3rem;
        align-items: flex-start; /* Aligns text cleanly to the left */
        text-align: left;
    }
}