@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&family=Ubuntu+Sans:wght@300;400;600&display=swap');

/* General Styles */
body {
    font-family: 'Ubuntu Sans', sans-serif;
    line-height: 1.6;
}

main {
    /* padding: 60px 5%; */
    max-width: 1200px;
    margin: auto;
}

/* 1) Add padding to all sections for better readability */

  /* 2) Force Chuck’s images into a two-column layout */
   .Chuck {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 5vh;
  } 
  
  .Chuck .image-container {
    flex: 1 1 calc(50% - 1rem);  
}
  .Chuck .image-container img {
    max-width: 30vw;
    height: auto;
  } 
.Chuckdiv{
    max-width: 40vw;

}
/* Hero Section */
.hero {
    display: block;
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    margin-bottom: 10vh;
}

/* Airplane Kit Container */
.aircontainer {
    max-width: 100%;
    text-align: center;
}

.aircontainer h2 {
    font-size: 24px;
    color: #666;
    text-align: left;
}
.aircontainer .p1{
    height: 60vh;
    padding-top: 20vh;
    padding-bottom: 20vh;
}

.p1{
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.aircontainer p {
    font-size: 18px;
    margin-bottom: 1.5em;
}

.lowfi img{
    max-width: 30vw;
}

/* Typography */
h2 {
    font-size: 22px;
    color: #444;
    margin: 30px 0;
    text-align: center;
}

em {
    font-weight: 600;
    font-style: italic;
    font-size: 48px;
}

.prototypes {
    
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10vh;
}
.Champ {
    padding-bottom: 10vh;
}
.Chuck {
    padding-bottom: 10vh;
}
.Cody {
    padding-bottom: 10vh;
}
.Casper {
    padding-bottom: 10vh;
}
.image-container {
    position: relative;
    overflow: hidden;
}

.lowfi img {
    width: 70vw; /* Large image */
    max-width: 1000px; /* Prevents excessive stretching on big screens */
}

.midfi img, .highfi img {
    width: 35vw; /* Smaller images */
    max-width: 500px;
}

.image-container img {
    display: block;
    height: auto;
}

.image-container .hover-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease-in-out;
}

.image-container:hover .hover-text {
    opacity: 1; /* Show text on hover */
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .prototypes {
        flex-direction: column;
        align-items: center;
    }

    .lowfi img, .midfi img, .highfi img {
        width: 90vw; /* Full width on small screens */
    }
}


/* Style for User Testing Section */
.user-testing-section {
    text-align: center;
    margin-bottom: 10vh;
    padding-top: 10vh;
}

.user-testing-section h2 {
    font-size: 22px;
    color: #444;
    margin-bottom: 20px;
    text-align: center;
}

/* User Testing Images Layout */
.user-testing-images {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

/* First image (Large - 70vw) */
.user-testing-images .first {
    width: 70vw;
    max-width: 1000px;
}

/* Other two images (Small - 35vw each) */
.user-testing-images .small {
    width: 35vw;
    max-width: 500px;
}

/* Ensure images scale properly */
.user-testing-images img {
    display: block;
    height: auto;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .user-testing-images {
        flex-direction: column;
        align-items: center;
    }

    .user-testing-images .first, 
    .user-testing-images .small {
        width: 90vw; /* Full width on small screens */
    }
}

/* Center the section and apply styles */
.i3 {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10vh;
    max-width: 100%;
    padding-top: 10vh;
    padding-bottom: 10vh;
}

/* Ensure the image is responsive */
.i3 img {
    width: 70vw;
    max-width: 1000px;
    display: block;
    height: auto;
}

/* Text overlay - initially hidden */
.i3 .hover-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
    opacity: 0; /* Hide text by default */
    transition: opacity 0.3s ease-in-out;
}

/* Show text on hover */
.i3:hover .hover-text {
    opacity: 1;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .i3 img {
        width: 90vw;
    }
}
.p4{
    padding-top: 10vh;
    padding-bottom: 30vh;
    ;
}
.p4 p{
    font-size: 24px;
}
/* Emotional Journey Map - Horizontal Scroll */
.emotionaljourneymap {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 20px 0;
    padding-top: 10vh;
    padding-bottom: 10vh;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}

/* Individual Images */
.emotionaljourneymap img {
    width: 25vw; /* Each image takes 25% of the viewport width */
    max-width: 400px;
    height: auto;
    flex: 0 0 auto;
    scroll-snap-align: center;
    border-radius: 10px;
}

/* Hide Scrollbar */
.emotionaljourneymap::-webkit-scrollbar {
    display: none;
}

/* Buttons for Navigation */
.scroll-buttons {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.scroll-buttons button {
    background-color: grey;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}

.scroll-buttons button:hover {
    background-color: darkgrey;
}

/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
    .emotionaljourneymap img {
        width: 80vw; /* Make images larger on small screens */
    }
}

/* Sliding Image Gallery */
.i4, .plane {
    display: flex;
    overflow-x: auto; /* Enables horizontal scrolling */
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 20px 0;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
    position: relative;
}

/* Individual Image Containers */
.i4 .image-container, .plane .image-container {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: center;
    width: 25vw; /* Each image takes 25% of viewport width */
    max-width: 400px;
}

/* Ensure images are responsive */
.i4 img, .plane img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Text overlay - hidden by default */
.i4 .hover-text, .plane .hover-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
    opacity: 0; /* Hidden initially */
    transition: opacity 0.3s ease-in-out;
}

/* Show text on hover */
.i4 .image-container:hover .hover-text,
.plane .image-container:hover .hover-text {
    opacity: 1;
}

/* Hide Scrollbar */
.i4::-webkit-scrollbar, .plane::-webkit-scrollbar {
    display: none;
}

#gallery-i4{
    padding-top: 5vh;
    padding-bottom: 20vh;
}
/* Navigation Buttons */
.scroll-buttons {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}

.scroll-buttons button {
    background-color: grey;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}
.kairu-link {
    text-decoration: underline;
    font-weight: bold;
    color: #666;
}

.kairu-link:hover {
    color:#444; /* Darker shade on hover */
}
.scroll-buttons button:hover {
    background-color: darkgrey;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
    .i4 .image-container, .plane .image-container {
        width: 80vw; /* Make images larger on small screens */
    }
}

/* Scrolling Section */
.outerg {
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10vh;
    display: flex;
    gap: 10px;
}

.innerg {
    width: 350px;
    height: auto;
    display: inline-block;
    background-color: white;
}

.innerg img {
    width: 100%;
    height: auto;
}

/* Insights Box */
.testinsights {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 3%;
    margin: 20px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Button */
button#myBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: grey;
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    display: none;
}

button#myBtn:hover {
    background-color: darkgrey;
}

/* Mobile Optimization */
@media screen and (max-width: 768px) {
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 20px;
    }

    .i1 img, .usertesting img {
        max-width: 100%;
    }

    .i3 {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-auto-rows: auto;
    }

    .innerg {
        width: 280px;
    }

    .innerg img {
        width: 100%;
        height: auto;
    }

    .aircontainer h2 {
        font-size: 20px;
    }
}
/* 1) Cancel any rotation on the wide ideation images (line 78) */
#gallery-i4 .image-container img {
    transform: none !important;
    object-fit: contain;
  }
  
  /* 2) Center the problem image in that section (line 162) */
  .image-container {
    text-align: center;    /* center everything inside */
  }
  .image-container img {
    display: inline-block; /* shrink‐wrap image so it can center */
    margin: 0;             
  }