@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
    font-family: "Nunito Sans", sans-serif;
  /* font-family: 'Open Sans', sans-serif; */
  font-weight: 400; /* Regular */
}

header {
  /* background-color: white; Changed from #18272f to white */
  padding: 10px;
}

/* If you're restructuring your nav, modify or remove these styles */
header nav {
  /* Adjust based on new layout */
}

header a {
  color: black; /* Changed from white to black */
  text-decoration: none;
}


.spacer-100px {
  height: 100px; /* 3/4 inch gap (was 108px) */
/* background-color: lemonchiffon; */
}

.spacer-50px {
	height: 50px;
}





/* ----------------------------------------- TEXT SELECTION COLOR CHANGE ----------------------- */
::selection {
    background-color: #ff5053; /* Bright red background */
    color: white; /* White text color */
}

/* For browser compatibility, especially older versions */
::-moz-selection {
    background-color: #ff5053; /* Bright red background */
    color: white; /* White text color */
}









/* ----------------------------------------- NAV BAR ----------------------------------------- */
#nav-section {
    position: static;
    width: 100%;
    height: calc(36vh + 60px); /* 36% of the viewport height + height of nav-container */
   /* background-color: rgba(240, 255, 240, 0.5); /* Honeydew with 50% opacity */
    z-index: 1000;
    padding: 0 36px; /* Padding similar to original #portfolio */
    display: flex;
    align-items: flex-end; /* Align container to bottom of section */
}

.nav-container {
    margin: 0 auto;
    max-width: 1400px;
    width: 100%;
    height: 60px; /* Fixed height as in the original */
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Align items to the bottom */
    /* padding-bottom: 6px; /* Added padding to lift elements from bottom edge */
    font-family: 'Nunito Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 400;
}

.nav-svg {
    width: 250px; /* Fixed width */
    height: auto; /* Maintain aspect ratio */
    align-self: flex-end; /* Aligns the SVG to the bottom */
    margin-top: -20px; /* Adjust as needed to let SVG extend above the top */
    margin-bottom: 7px; /* Lift the SVG 4px above the bottom */
}

.nav-right {
    display: flex;
    align-items: flex-end;
}

nav {
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px; /* Move up the nav links */
}

nav a {
    color: black;
    text-decoration: none;
    margin-left: 40px;
    position: relative;
}

nav a:hover::after {
    content: '';
    display: block;
    height: 2.5px;
    background-color: #00b4ff;
    width: 100%;
    position: absolute;
    bottom: -4px;
    left: 0;
}



/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    #nav-section {
        height: auto;
        padding-top: 59vh; /* Use full 36vh for top padding */
        position: relative;
    }

    .nav-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Align items to the top */
        height: auto;
        position: relative;
        padding-top: 10px; /* Small padding at the top */
    }

    .nav-svg {
        position: absolute;
        bottom: calc(100% + 10px); /* Position logo above nav-container */
        left: 50%;
        transform: translateX(-50%);
        width: 225px; /* SVG width */
    }

    .nav-right {
        padding-top: 10px; /* Space between logo and nav links */
        width: 100%;
        text-align: center;
    }

    .nav-right nav {
        display: inline-block;
        margin: 0 auto;
    }

    .nav-right nav a {
        margin: 0 15px;
        display: inline-block;
        position: relative;
    }

    .nav-right nav a::after {
        content: '';
        display: block;
        height: 1.5px;
        background-color: #c74182;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: -5px;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .nav-right nav a:active::after, 
    .nav-right nav a:focus::after {
        opacity: 1;
    }
}






/*.main-content {

 /* padding-top: 100vh;
/*}










/* Portfolio Section Styles */
#portfolio {
    text-align: center;
	padding: 0 36px; /* Maintain left and right padding */
    padding-left: 36px;
    padding-right: 36px;
    padding-bottom: 120px;
    margin-bottom: 200px; /* Default for desktop */
/* 	background: #C0B6F2; /* Lavender */
/* 	margin-top: 20px; /* Space after the nav container */
}

.portfolio-container {
	    padding-top: 10px;
    max-width: 1400px; /* Max width set to 1400px */
    margin: 0 auto; /* Center the container */
    /* padding: 10px 0;  Maintain existing top and bottom padding */
    width: 100%; /* Initial width is full */
}

/* Portfolio Grid */
.portfolio-grid {
    margin: 0 auto; /* Ensure it's centered within the container */
    column-count: 3; /* Maintain the existing column count */
    column-gap: 10px; /* Maintain the existing column gap */
    max-width: 100%; /* Ensure it doesn't exceed the container's width */
}

.portfolio-link {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Ensures text inside the link inherits the parent color */
    display: block; /* Makes the link a block element, covering the entire portfolio item */
}

.portfolio-item {
    display: inline-block;
    break-inside: avoid; /* Prevents breaking items across columns */
    margin-bottom: 5px; /* Spacing between items */
    position: relative;/* Ensures child absolute positioning is relative to this container */
    overflow: hidden; /* Ensure the gradient doesn't spill outside the thumbnail */
    cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
    border-radius: 12px; /* Rounded corners for the container */
    will-change: transform;
}

/* TEXT SETTINGS */
.portfolio-item .client-name {
    opacity: 0; /* Initially hidden */
    transform: translateY(0); /* Start at the final desktop position */
    position: absolute;
    bottom: 35px; /* Desktop position */
    transition: opacity 0.4s ease, bottom 0.6s ease; /* Animate both opacity and position */
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 600; /* Light */
    line-height: 20px;
    left: 10px; /* Space from the left edge */
    right: 10px; /* Space from the right edge */
    width: calc(100% - 20px); /* Adjust width to account for left and right space */
    text-align: center;
    color: white;
    z-index: 3; /* Ensure it's above the gradient */
    padding: 0 10px; /* Padding on both sides to prevent text from touching the edges */
    word-wrap: break-word; /* Ensure long words don't overflow */
}

.portfolio-item .project-subtitle {
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 300; /* Light */
    position: absolute;
    top: calc(100% - 39px); /* Positioned just below the client-name, Adjust this value as needed */
    left: 10px;
    right: 10px;
    width: calc(100% - 20px);
    text-align: center;
    color: white;
    opacity: 0; /* Initially hidden */
    transition: opacity .4s, top .6s; /* Smooth transition for opacity and position */
    z-index: 3;
    padding: 0 10px;
    word-wrap: break-word;
}


.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border-radius: 12px;
    z-index: 2;
    transition: background 0.35s ease;
}

.portfolio-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* This gradient will now be the ONLY overlay effect */
    background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent 60%);
    transition: opacity 0.35s;
    opacity: 0;
    z-index: 1;
    border-radius: 12px;
    pointer-events: none;
}

/* 
   We have now removed the .portfolio-item:hover::before rule that was causing the unwanted dimming.
   The text and image hover effects below are still correct. 
*/

.portfolio-item:hover::after {
    opacity: 1; /* Show gradient on hover */
}

.portfolio-item:hover .client-name {
    opacity: 1; /* Show text on hover */
    bottom: 70px; /* End position changed to 70px */
}

.portfolio-item:hover .project-subtitle {
    opacity: 1; /* Show text on hover */
    top: calc(100% - 64px); /* Final position */
}

.portfolio-item:hover img {
    transform: scale(1.05); /* Enlarge image by 5% on hover */
}

.portfolio-item img {
    width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
    transition: transform 0.35s ease; /* Smooth transition for scaling */
    border-radius: 12px; /* Rounded corners for desktop */
    transform-origin: center center;
}

/* Adjust the media queries as well */
@media screen and (max-width: 2732px) {
    #portfolio {
        padding-left: 36px; /* Left padding */
        padding-right: 36px; /* Right padding */
        margin-bottom: 100px; /* Reduced spacing for mobile */
    }

    .portfolio-grid {
        max-width: 100%;
    }

    .portfolio-item .client-name {
        font-size: 18px; /* Adjusted font size for slightly smaller screens */
    }
}

@media screen and (max-width: 768px) {
    #portfolio {
        padding-left: 36px; /* Left padding */
        padding-right: 36px; /* Right padding */
    }

    .portfolio-grid {
        column-count: 1; /* Single column for smaller screens */
    }

    .portfolio-item .client-name {
        font-size: 18px; /* Smaller text for smaller screens */
    }

    .full-width-image {
        background-image: url('Images/bio-mobile.jpg');
        height: 697px; /* Set the height for the mobile image */
    }

    .portfolio-item::before,
    .portfolio-item::after,
    .portfolio-item img {
        border-radius: 16px; /* Rounded corners for mobile */
    }

    .portfolio-item::after {
        opacity: 0; /* Initially hidden */
        background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
        height: 50%;
        top: auto; /* Reset top positioning */
        bottom: 0; /* Align to bottom */
        transition: opacity .5s ease-in-out; /* Smooth transition for gradient */
        border-radius: 16px; /* Rounded corners for the gradient overlay on mobile */
    }


    .portfolio-item .client-name {
        opacity: 0; /* Initially hidden */
        transform: translateY(20px); /* Start slightly below the intended position */
        transition: opacity 0.75s ease-out, transform 0.75s ease-out; /* Smooth transition for mobile */
        bottom: 36px !important; /* Force mobile position, overriding desktop */
        left: 10px;
        right: 10px;
        width: calc(100% - 20px);
        text-align: center;
        color: white;
        font-weight: 400;
        line-height: 1.1;
        font-size: 20px;
        z-index: 3;
        padding: 0 10px;
        text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);
    }

    .portfolio-item.animate .client-name {
        opacity: 1; /* Fade in text on scroll */
        transform: translateY(0); /* Move text to its final position */
        transition: opacity 1s ease-out, transform 0.75s ease-out; /* Match the transition timing for smoothness */
        bottom: 36px; /* Ensure the final mobile position is maintained */
    }

    .portfolio-item.animate::after {
        opacity: 1; /* Fade in gradient */
    }

    .portfolio-item img {
        transition: transform 1.75s ease; /* Apply the slower transition timing for scaling on mobile */
    }

    .portfolio-item.animate img {
        transform: scale(1.15); /* Slightly increase scale of the image */
        transition: transform 1.75s ease; /* Smooth transition for scaling */
    }

    .portfolio-item .project-subtitle {
        display: none; /* Hide project subtitle */
    }
}

@media screen and (max-width: 480px) {
    #portfolio {
        padding-left: 36px; /* Left padding */
        padding-right: 36px; /* Right padding */
    }

    .portfolio-grid {
        column-count: 1;
    }

    .portfolio-item .client-name {
        font-size: 18px; /* Even smaller text for very small screens */
    }
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@media screen and (max-width: 768px) {
  .portfolio-grid {
    display: flex;
    flex-direction: column;
  }

  /* --- Mobile Order --- */
  .portfolio-link:nth-child(1) { order: 1; }  /* T25 / SHAUN T */
  .portfolio-link:nth-child(2) { order: 8; }  /* PUBLISH ENEMIES */
  .portfolio-link:nth-child(3) { order: 5; }  /* BODi PREVIEWS */
  .portfolio-link:nth-child(4) { order: 13; }  /* SHAKEOLOGY */
  .portfolio-link:nth-child(5) { order: 12; }  /* GEN AI */
  .portfolio-link:nth-child(6) { order: 2; }  /* FLORIAN DONNERSMARCK */
  .portfolio-link:nth-child(7) { order: 4; }  /* CORE DE FORCE */
  .portfolio-link:nth-child(8) { order: 6; }  /* 20 UNDER 20 */
  .portfolio-link:nth-child(9) { order: 10; } /* 22 MINUTE HARD CORPS */
  .portfolio-link:nth-child(10) { order: 9; } /* SURE THING */
  .portfolio-link:nth-child(11) { order: 3; } /* Belle Vitale */
  .portfolio-link:nth-child(12) { order: 7; } /* SOCIAL MEDIA DESIGN TEAM */
 .portfolio-link:nth-child(13) { order: 11; } /* MOTION  */
  .portfolio-link:nth-child(14) { order: 14; } /* DOUBLE TIME */

}









/* Bio Photo Section Styles */

.full-width-image {
  background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 500px; /* For desktop */
  background-repeat: no-repeat;
  margin-bottom: 0; /* Remove any default bottom margin */
  display: block; /* Show this on desktop */
}

.mobile-full-width-image {
  display: none; /* Hidden on desktop, shown on mobile */
  width: 100%; /* Full width on mobile */
  height: auto; /* Maintain aspect ratio */
  margin-bottom: 0; /* Remove bottom margin */
}

/* Mobile-specific styles */
@media screen and (max-width: 768px) {
  .full-width-image {
    display: none; /* Hide the desktop background image */
  }

  .mobile-full-width-image {
    display: block; /* Display the image inline on mobile */
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
  }
}






/* Bio Text Section Styles */
#bio-text {
	margin-top: 100vh; /* Equal to the viewport height */
  text-align: left;
  padding: 0 36px;  /* PADDING THAT DOES LEFT & RIGHT MARGINS */
  margin-top: 20px; /* Space after previous content */
	padding-bottom: 30px; /* Adding bottom padding of about an inch */
  overflow: auto; /* Add a scrollbar if content overflows */
}


#bio-text .fixed-width-container {
  display: flex; /* Apply flexbox */
  justify-content: space-between; /* Space out children */
  align-items: flex-start; /* Align items to the top */
  width: 100%; /* Initial width is full */
  max-width: 960px; /* Stops scaling at 960px */
  margin: 0 auto; /* Center the container */
	margin-top: 10pt; /* Adjust top margin */
}

#bio-text .bio-text {
  max-width: 700px; /* Set maximum width */
  padding-right: 60px; /* Add padding to the right */
  margin: 0; /* Remove margin */
}

#bio-text .skills {
  max-width: 360px; /* Set maximum width for skills */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  text-align: left; /* Align text to the left */
}

#bio-text .skills ul {
  list-style-type: none; /* Removes bullets */
  font-weight: 400; /* Set the font weight */
  font-size: 11pt; /* Set the font size */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflowed content */
  text-overflow: ellipsis; /* Add ellipsis to overflowed content */
}


.bio-text p {
  font-size: 15pt; /* Set font size */
  line-height: 24pt; /* Set line height for paragraph spacing */
  margin-bottom: 12pt; /* Space after each paragraph */
}

.bio-text a {
    color: #313134; /* Matching the body text color */
    text-decoration: none;
    position: relative;
}

.bio-text a::after {
    content: '';
    display: block;
    height: 1.5px; /* Initial height */
    background-color: #00b4ff; /* Underline color matching the text */
    width: 100%;
    position: absolute;
    bottom: -3.5px; /* Initial bottom position */
    left: 0;
    transition: height 0.15s ease-in-out, bottom 0.15s ease-in-out; /* Adding transitions */
}

.bio-text a:hover::after {
    height: 3px; /* Final height on hover */
    bottom: -4.5px; /* Final bottom position on hover */
}


@media screen and (max-width: 768px) {
  #bio-text .fixed-width-container {
    flex-direction: column; /* Stack items vertically */
    padding-right: 0px; /* Add padding to the right */
  }

  #bio-text .bio-text {
    max-width: 100%; /* Full width on small screens */
    margin: 0; /* Remove margin */
    padding: 0 0 0 0; /* Add padding on the right */
  }

  #bio-text .skills {
    max-width: 100%; /* Full width on small screens */
    margin: 0; /* Remove margin */
    padding-top: 10px; /* Add padding on top */
    padding-left: 0; /* Ensure there's no left padding */
  }
}







/* Logo Grid Section */
#logo-grid-section {

  text-align: center; /* Center align text */
  padding: 20px 0; /* Top and bottom padding */
	padding-bottom: 80px; /* Adding bottom padding of about an inch */
}

/* New Content Container */
#logo-grid-section .content-container {
  background-color: white; /* White background for content */
  width: calc(100% - 72px); /* Adjust width for margin */
  margin: 0 auto; /* Center the container */
  padding: 36px; /* Padding inside the container */
  max-width: 960px; /* Maximum width set to 960px */
}

/* Logo Grid */
#logo-grid-section .logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 equal columns */
  grid-template-rows: auto auto; /* Rows adjust to content */
  grid-gap: 100px 100px; /* Increased vertical gap and horizontal gap between items */
}

/* Logo Grid Items */
#logo-grid-section .logo-grid-item {
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
}

#logo-grid-section .logo-grid-item img {
  transform: scale(2.8); /* Default image scale */
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
  #logo-grid-section .content-container {
    width: calc(100% - 72px); /* Adjusted width calculation for margins */
    padding: 18px; /* Reduced padding for a narrower container */
  }

  #logo-grid-section .logo-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
	    grid-gap: 80px 25px; /* Increased vertical gap and horizontal gap between items */
  }

  #logo-grid-section .logo-grid-item img {
    transform: scale(1.9); /* Adjusted scale for mobile */
  }
}



/* --- Easter Egg Link Styling --- */

.easter-egg-link,
.easter-egg-link:hover,
.easter-egg-link:focus,
.easter-egg-link:active,
.easter-egg-link:visited {
  /* Hides the default link underline */
  text-decoration: none;

  /* Prevents the browser's default blue link color */
  color: inherit; 
  
  /* Prevents the browser's focus outline (for keyboard navigation) */
  outline: none;

  /* This is the key: it keeps the cursor as a normal arrow instead of a pointer hand */
  cursor: default; 
}





/* - - - - - - - - - - - - - - - - - -   S C R O L L    A N I M A T I O N S   - - - - - - - - - - - - - - - - - -*/

	
/* Initial state - elements start hidden and shifted down */
.scroll-animate {
    opacity: 0.25;  /* Start faded */
    transform: translateY(16px);  /* Start shifted down */
    transition: opacity .75s cubic-bezier(0.1, 0, 0.8, 1), 
                transform 1s cubic-bezier(0.3, 0, .95, 1);
    will-change: opacity, transform;  /* Optimize performance */
}
	/*

First Control Point's x-coordinate (0.2): Affects the initial phase of the animation. Lower values slow the start; higher values make it faster.
First Control Point's y-coordinate (0): Typically ranges from 0 to 1. A value of 0 keeps the initial speed minimal (but not zero due to the influence of the second control point).
Second Control Point's x-coordinate (0.8): Influences how the animation proceeds towards completion. Values closer to 1 extend the acceleration phase.
Second Control Point's y-coordinate (1): Directly controls how the animation ends. */


/* Visible state - elements fade in and move up */
.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}