/* Global Styles */

body {
    font-family: 'Jost', 'Roboto', 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: black;
    background: white;
    margin: 0;
    padding: 0;
}



h1, h2, h3, h4, h5, h6 {
    font-weight: 500; /* Adjust the value to your desired lightness */
}

b {
    font-weight: 600;
}

/* Bold text */
strong  {
    font-weight: 600;
}

.italic {
    font-style: italic;
}



/* case study mock-containers */
/* reset in responsive mode */
.extra-margin-top   {
    margin-top: 80px;
}

.extra-margin-top-one   {
    margin-top: 20px;
}


/* Responsive Web Design Framework*/

/* 6 COLUMNS */

/* Base styles */
.container {
    display: grid;
    gap: 12px;
    width: 90%;
    max-width: 1250px;
    margin: auto;
    padding: 50px 0;
    
}

.item {
    padding: 0 40px;
    
}



/* Dynamic column layout based on item count */
.container:has(.item:nth-child(6)) {
    grid-template-columns: repeat(6, 1fr);
}

.container:has(.item:nth-child(5)):not(:has(.item:nth-child(6))) {
    grid-template-columns: repeat(5, 1fr);
}

.container:has(.item:nth-child(4)):not(:has(.item:nth-child(5))) {
    grid-template-columns: repeat(4, 1fr);
}

.container:has(.item:nth-child(3)):not(:has(.item:nth-child(4))) {
    grid-template-columns: repeat(3, 1fr);
}

.container:has(.item:nth-child(2)):not(:has(.item:nth-child(3))) {
    grid-template-columns: repeat(2, 1fr);
}

.container:has(.item:nth-child(1)):not(:has(.item:nth-child(2))) {
    grid-template-columns: repeat(1, 1fr);
}



/* Dynamic layout via JS-assigned classes */
.container.cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.container.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.container.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.container.cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.container.cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.container.cols-6 {
    grid-template-columns: repeat(6, 1fr);
}





/* Responsive GLOBAL - MOBILE */

@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(1, 1fr) !important;
        
        
    }
    
    .item   {
        padding: 20px 10px;
    }
}



/* Responsive SPECIFIC */
/* About Page Top half */

/* Keeps Singular columns for profile info in a vertical stack  */
@media (max-width: 1024px) {
  .about-page .gradient-banner-profile .container,
  .about-page .banner-profile .container {
    grid-template-columns: repeat(1, 1fr) !important;
    justify-items: center; /* Centers grid items horizontally */
  }

  .about-page .gradient-banner-profile .item,
  .about-page .banner-profile .item {
    padding: 20px 10px;
  }

  .about-page .round-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .about-page .round-container img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Narrows margins for med screens to enhances readability */
@media (min-width: 769px) and (max-width: 1024px) {
  .about-page .round-container img {
    width: 65%;
    max-width: 65%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .about-page .container .item h1,
  .about-page .container .item p,
  .about-page .container .item ul {
    width: 65%;
    margin-left: auto;
    margin-right: auto;
  }
}












/* MAIN STYLES */

/* HOME PAGE */

/* Navbar background image (HOME PAGE ONLY) */
.navbar-bg-image-home {
  position: relative;
  background-image: url('../assets/Images/Grid_background_1920x500.png'); /* Your background image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 85vh;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

/* Navbar background image (ALL OTHER PAGES) */
.navbar-bg-image    {
    background-image: url('../assets/Images/Grid_background_nav_height.png'); /* Your background image */
    background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  max-width: 1920px;
  margin: 0 auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Navbar content (limits the width and aligns items at the top) */
.navbar-content {
  max-width: 1350px; /* Ensures that the content is constrained to this max width */
  width: 100%; /* Makes the container take up full width within the max-width */
  margin: 0 auto; /* Centers the content horizontally */
  position: relative; /* Establishes a positioning context for absolute elements */
  display: flex;
  justify-content: space-between; /* Aligns the title to the left and links to the right */
  padding: 20px; /* Optional: add padding inside the navbar */
}

/* SITE TITLE (LEFT) */
.site-title {
  margin-top:-5px;
    margin-left: 30px;

}

/* NAV LINKS (RIGHT) */
.nav-links {
  list-style-type: none;
  padding: 10px 0;
    
  margin: 0;
    margin-top: 30px;
    margin-right:30px; /* provides space  */
  display: flex; /* Makes the links horizontal */
  justify-content: flex-end; /* Aligns the links to the right */
  z-index: 1; /* Ensures links are visible above the background */
}

.nav-links li {
  display: inline-block;
  margin: 0 10px; /* Adds space between the nav items */
}

/* NAV LINKS */
.nav-links a {
  text-decoration: none;
  font-size: 21px;
  color: black;
  padding: 10px 20px;
  position: relative; /* Required for the ::after pseudo-element */
  transition: color 0.3s ease;
}

/* ACTIVE LINK - Wider Dash Underline (Centered) */
.nav-links a.active {
  font-weight: bold;
  color: black;
}

.nav-links a.active::after {
  content: "—"; /* Wider dash (em dash) */
  position: absolute;
  bottom: -30px; /* 30px space between the link and the dash */
  left: 50%; /* Center the dash */
  transform: translateX(-50%); /* Offset the dash to truly center */
  font-size: 40px; /* Dash size */
  color:  black; 
  transition: all 0.3s ease;
}

/* HOVER EFFECT - Wider Dash Underline (Centered) */
.nav-links a:not(.active):hover {
  color: gray;
}

.nav-links a:not(.active):hover::after {
  content: "—"; /* Wider dash (em dash) */
  position: absolute;
  bottom: -30px; /* 30px space between the link and the dash */
  left: 50%; /* Center the dash */
  transform: translateX(-50%); /* Offset the dash to truly center */
  font-size: 40px; /* Dash size */
  color: gray;
  transition: all 0.3s ease;
}



/* Text Box Inside Grid background (Sits on Image) 
Desktop Only */
.top-text-box {
  display: block;
  margin:0 auto;
  text-align: center;
  width: 80%;
  max-width: 1250px;
  padding: 120px 0;
}

.top-text-box h1 {
  font-size: 36px;
  color: black;
  margin: 0;
}




.top-text-box p {
  font-size: 24px;
  color: black;
  margin-top: 0;
}


/* Text Box Outside Grid background (Sits beneath Image) 
Mobile Only - Activates at 768px (see media query) */

.mobile-top-text-box {
    display:none;
    text-align: center;
    max-width:768px;
    padding:40px 30px;
    
}

.mobile-top-text-box h1 {
  font-size: 36px;
  color: black;
  margin: 0;
}

.mobile-top-text-box p {
  font-size: 24px;
  color: black;
  margin-top: 0;
}


/* CTA - Explore Portfolio */
  .cta-container-explore {
        margin-top:-80px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Push content to the bottom */
        align-items: center;
        padding:20px 40px;
        position: relative;
        z-index: 99; /* Makes button sit on top of the below layer and its opacity properties  */
    }

    .cta-button-explore {
        background-color: #F2BFDC;
        background-image: linear-gradient(147deg, #F2BFDC 0%, #2b0016 74%);
        color: white;
        font-size: 36px;
        font-weight: bold;
        padding: 30px 60px;
        border: none;
        border-radius: 90px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }

    .cta-button-explore:hover {
        background-color: #0d4023;
        transform: scale(1.05);
    }




/*NEW Section */

/* Background container */
.background-pixel-underlay {
    margin-top:-72px; /* brings section flush with the last. slight gap */
    position: relative;
    background-image: url('../assets/Images/Grid_background_1920x500.png');
    max-width: 1920px;
    height: auto;
    box-sizing: border-box; /* includes padding in width */
    
}

/* Gradient banner overlay */
.gradient-banner-black-white {
    background-color: #166D3B;
    background-image: linear-gradient(147deg, #000000 0%, #FFFFFF 74%);
    opacity: 0.8;
    width: 100%;
    height: auto;
    padding: 0;
    box-sizing: border-box;
}

/* Case study container: confines phone + title inside background */
.case-study-container {
    display: flex;
    flex-direction: column;       /* stack phone above title */
    justify-content: center;
    align-items: center;
    gap: 2rem;                    /* spacing between phone and title */
    width: 100%;
    max-width: 100%;               /* cannot exceed parent width */
    height: auto;
    box-sizing: border-box;
    padding: 5rem;                /* inner spacing inside container */
}

.homepage-iphone-frame-small {
    width: 50vw;                   /* responsive width relative to viewport */
    max-width: 210px;
    min-width: 150px;
    aspect-ratio: 375 / 812;

    background: #d4d4d4;
    border-radius: 30px;
    border: 4px solid black;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

    opacity: 0;
    backface-visibility: hidden;
    transform-style: preserve-3d;

    /* Remove absolute/offset */
    position: relative;   
    margin: 2rem auto;       /* centers horizontally, adds vertical spacing */
    transform: none;         

    /* Animation */
    animation: slideBounceTiltShadow 1.8s cubic-bezier(0.25,0.1,0.25,1) forwards;
    transform: translateY(200px) rotate(0deg) scale(0.9);
    transition: none;
}



.homepage-iphone-frame-small.animate {
  animation: slideTiltIn 1.8s cubic-bezier(0.25,0.1,0.25,1) forwards;
}

@keyframes slideTiltIn {
  0% {
    opacity: 0;
    transform: translateY(200px) rotate(0deg) scale(0.9);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  }
  40% {
    opacity: 1;
    transform: translateY(-20px) rotate(-5deg) scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  }
  60% {
    transform: translateY(10px) rotate(5deg) scale(0.97);
    box-shadow: 0 8px 22px rgba(0,0,0,0.33);
  }
  80% {
    transform: translateY(-5px) rotate(-2deg) scale(1.02);
    box-shadow: 0 9px 24px rgba(0,0,0,0.34);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  }
}



/* Base: always visible on touch devices */
.case-title {
    text-align: center;
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.case-title-header {
    margin: 0;
    font-style: italic;
    font-size: clamp(1.5rem, 2vw, 3rem);
    letter-spacing: 8px;
    text-transform: uppercase;
    color: black;
}


.gradient-banner    {
    margin:80px 0;
    padding: 60px 0;
    background-color:  #166D3B;
    background-image: linear-gradient(147deg,  #166D3B 0%, #000000 74%);
    color:white;
        max-width: 1920px;
        
}
   


.back-to-top {
    position: fixed;
    bottom: 5vw; /* Responsive spacing from bottom */
    right: 5vw; /* Responsive spacing from right */
    background-color: #2d3436;
    background-image: linear-gradient(315deg, #2d3436 0%, #d3d3d3 74%);
    color: black;
    font-size: 24px;
    width: 60px;
    height: 60px;
    padding: 0;
    padding-bottom: 5px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: none;
    z-index: 1000;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.back-to-top:hover {
    color: #FF5A3D;
    border: solid 2px #FF5A3D;
    background: white;
    opacity: 1;
}

/* Show the button when scrolling */
.back-to-top.visible {
    display: block;
    opacity: 1;
}

/* Footer */
footer {
    text-align: center;
    padding: 1rem;
    border-top: 3px solid black;
}

/* FOOTER NAV LINKS */
.footer-nav {
  display: flex;
  flex-direction: column; /* Stack links vertically */
  align-items: center;
  margin-top: 20px;
}

.footer-nav a {
  text-decoration: none;
  font-size: 21px;
  color: black;
  padding: 30px 0; /* Vertical padding for spacing between links */
  position: relative; /* Required for the ::after pseudo-element */
  transition: color 0.3s ease;
}

/* ACTIVE LINK - Single Dash Underline (Centered) in Footer */
.footer-nav a.active {
  font-weight: bold;
  color: black;
}

.footer-nav a.active::after {
  content: "—"; /* Wider dash (em dash) */
  position: absolute;
  bottom: -15px; /* Space between the link and the dash */
  left: 50%; /* Center the dash */
  transform: translateX(-50%); /* Offset the dash to truly center */
  font-size: 40px; /* Dash size */
  color:  black;
  transition: all 0.3s ease;
}

/* HOVER EFFECT - Single Dash Underline (Centered) in Footer */
.footer-nav a:not(.active):hover {
  color: gray;
}

.footer-nav a:not(.active):hover::after {
  content: "—"; /* Wider dash (em dash) */
  position: absolute;
  bottom: -15px; /* Space between the link and the dash */
  left: 50%; /* Center the dash */
  transform: translateX(-50%); /* Offset the dash to truly center */
  font-size: 40px; /* Dash size */
  color: gray;
  transition: all 0.3s ease;
}


/* Footer Social Media Links */

.fa {
  padding: 20px;
  font-size: 60px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 40px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
    
}
.fa-instagram {
  background: #125688;
  color: white;
   
}

/* Footer Copyright Text */
footer p {
    font-size: 16px; /* Smaller font size */
    color: #000000; /* Light gray color for the text */
    margin-top: 40px; /* Slight margin to separate from links */
}


 


 
/* HOME PAGE */
/* MEDIA QUERIES */



/* RESPONSIVE MODE - 480px */

@media (max-width: 480px) {
    .back-to-top {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 6vw;
        right: 6vw;
    }
}



/* RESPONSIVE MODE - 768px */

@media (max-width: 768px) {
    
    /* Navbar background image adjusts */
    .navbar-bg-image-home {
    max-height:400px;
    }



    .navbar-bg-image    {
    background-image: url('../assets/Images/Grid_background_1920x500.png'); /* Your background image */
        background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
        height:auto;
    }




    .navbar-content {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    justify-content: flex-start; /* Align items at the top */
    text-align: center; /* Center text horizontally */
    }

    /* Center site title */
    .site-title {

        margin-top:20px;
      margin-left:-30px;
    }

    /* Change the nav links to stack below the site title */
    .nav-links {
    display: block; /* Stack links vertically */
    text-align: center; /* Align links to the center */

    }

    .nav-links li {
    display: block; /* Make each link take up the full width */
    padding: 30px 0; /* Add vertical margin between links */
    }

    /* Floating Psuedo boxes hidden */ 
    .top-text-box {
        display:none;
    }

    .mobile-top-text-box    {
        display:block;
    }


    .cta-button-explore {
                margin-top: 60px;
                font-size: 24px;
            }

}



/* Mock Device (Home Page) */

/* Responsive adjustments at different breakpoints */
@media (max-width: 1024px) {
    .homepage-iphone-frame-small {
        width: 40vw;
        max-width: 180px;
    }
}

@media (max-width: 768px) {
    .homepage-iphone-frame-small {
        width: 50vw;
        max-width: 160px;
    }
    
    .case-title-header {
        font-size: clamp(1.2rem, 3vw, 2rem);
    }
}

@media (max-width: 480px) {
    .homepage-iphone-frame-small {
        width: 70vw;
        max-width: 150px;
    }
    
    .case-title {
        padding: 1rem 1rem;
    }
    
    .case-title-header {
        font-size: clamp(1rem, 4vw, 1.5rem);
    }
    
    
}

/* Optional tweak for very small devices */
@media (max-width: 400px) {
    .homepage-iphone-frame-small {
        width: 70vw;
        max-width: 180px;
        margin: 1.5rem auto;
    }
}

/* HOME PAGE */
/* MEDIA QUERIES */

/* ENDS */


    

    /* CASE STUDY PAGE(s) */

    /* Mobile Airline App */

    @media (max-width: 480px) {
      .fade-div {
        padding-top: 4px;
        padding-bottom: 4px;
        margin-top: -12px;
        margin-bottom: -12px;
      }
    }


    @media (max-width: 768px) {

    .fade-div   {
        text-align: center;
    }
        
    .numbers-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center;
    gap: 40px; /* 👈 Increase this value for more space */
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .number-item {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
      padding: 20px 0;
  }

  .circle {
    margin: 0 auto;
  }

  .label {
    text-align: center;
  }

  .line {
    display: block;
    width: 2px;
    height: 30px;
    background-color: black;
    margin: 0 auto;
  }
        
        
    .phase-title h1 {
    display: flex;
    justify-content: center;
    align-items: center; /* optional for vertical centering if needed */
    padding: 40px 0;
    flex-direction: column;
    letter-spacing:3px;
     word-break: break-word;
    text-align: center;
    max-width: 100%;
    overflow-wrap: break-word;
    }
        
    .phase-title h2, 
    .phase-title p, 
    .phase-title span {
        max-width: 100%;
        white-space: normal;
    }

    
    /* Removes float properties and centers text */
    .float-right {
    float: none !important;
    text-align: center !important;
  }

    .bottom-border {
        margin-bottom:80px;
    }

    .gradient-banner-airline    {
         margin:80px 0;
    }

    .center-content {
        width:100%;

    }

}

/* RESPONSIVE MODE - 1024px */


@media (max-width: 1024px) {
  .fade-div {
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 24px; /* Optional spacing between stacked items */
  }
    
    
   .numbers-container {
    padding-left: 20px;
    padding-right: 20px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 20px; /* row-gap: 30px, column-gap: 20px */
  }

  .line {
    display: none; /* Hide connecting lines */
  }

  .number-item {
    margin: 0; /* Reset margin so gap controls spacing */
  }
    
}





/* MEDIA RULES END */









/* NEW PAGE */

/* Case Study - Mobile Airline App */

 /* Default Hero Container Layout (Desktop) */
.hero-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 100vw;
    height: auto;
    min-height: 50vh; /* Ensures sufficient height */
    box-sizing: border-box;
}

/* Left Column (70%) */
.left {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
    box-sizing: border-box;
}

/* Right Column (30%) */
.right {
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    
    padding-left: 5vw; /* Centers device */
    box-sizing: border-box;
}



.hero-container .left h1    {
    font-size:60px;
    font-weight:400;
    text-align: left;  /* Left-align the heading */
      width: 100%;       /* Ensure heading takes full width */
}

.hero-container .left p {
     text-align: left;  /* Left justify the paragraph */
    
    width:100%;
}



.list   {
    padding: 10px 30px; 
    
}

.list li    {
    padding:10px 5px;
}



/* MOCKUP Mobile Device */

 /* Main device frame with aspect ratio maintained */
.iphone-frame-small {
    width: 40vw; /* Adjusts width relative to the viewport */
    max-width: 210px; /* Updated max-width */
    height:auto;
    aspect-ratio: 375 / 812; /* Maintain aspect ratio for iPhone 13 Mini */
    background: #d4d4d4;
    border-radius: 30px;
    border: 4px solid black;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Notch fixed at the top of the frame with transparency on sides */
.notch-small {
    width: 40%;
    height: 4%;
    background-color: rgba(34, 34, 34);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}



/* Wrapper to center the mockup */
.mockup-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;         /* ✅ remove 90vh cap */
    padding: 1rem;
    box-sizing: border-box;
}


/* MOCKUP Mobile Device */

/* Main device frame with aspect ratio maintained */
.iphone-frame {
    aspect-ratio: 280 / 610;   /* ✅ keep proportions */
    width: 100%;
    max-width: 220px;          /* ✅ desktop constraint */
    max-height: 90vh;          /* ✅ ensures full fit in landscape */
    background: white;
    border-radius: 40px;
    border: 10px solid black;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* Notch fixed at the top of the frame */
.notch {
    width: 45%;
    height: 4%;
    background-color: rgba(34, 34, 34);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.screen-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    width: 100%;
    position: relative;
    z-index: 1;
}

.screen-content img {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
}




/* Hide scrollbar in WebKit browsers */
.screen-content::-webkit-scrollbar {
    display: none;
}



/* work around for tall UI screens */
/* image does not sit flush with device */
.ui-adapt   {
    border-radius: 30px;
}

.no-scroll  {
    overflow:hidden;
    
}


/* Side buttons */
.side-buttons {
    position: absolute;
    left: -15px;
    top: 10%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.volume-up, .volume-down {
    width: 3px;
    height: 25px;
    background-color: #222;
    border-radius: 2px;
}

.power-button {
    position: absolute;
    right: -15px;
    top: 40%;
    width: 3px;
    height: 30px;
    background-color: #222;
    border-radius: 2px;
}



/* .gradient-banner is for single column heading sections 
of unique case studies and are design specific according to color palette. 
They commence when a turn is made in the UX story 
E.g, Research, Analysis, Design, Etc */

/* Banner from css generator, Eggradients and is titled Amazon 
with tweaks to the color palette using #16aae9 */
 


.gradient-banner-airline    {
    margin:80px auto;
    padding: 60px 0;
    max-width: 1920px;
    background-color:  #16aae9;
    background-image: linear-gradient(147deg,  #16aae9 0%, #000000 74%);
    color:white;
        
        
}


.center-content {
    text-align: left;
    width:50%;
    margin: 0 auto;
    
}

.center-content h1  {
    font-size: 48px;
}



.fade-div {
    padding:20px 0;
  opacity: 0; /* Initially invisible */
  transform: translateY(40px); /* Start off slightly below */
  transition: opacity 1s ease, transform 1s ease;
}

/* Class to trigger fade-in and slide up */
.fade-div.visible {
     padding: 20px 0;
  opacity: 1; /* Fade in */
  transform: translateY(0); /* Slide into place */
}

.fade-div h1    {
    letter-spacing: 6px;
}




.background-wrapper {
    background-image: url("../assets/Images/Grid_background_768_420px.png");
    background-repeat: repeat;
    padding: 30px 0; 
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin:40px auto;
    max-width: 1920px;
}


 /* Projects page */
.background-wrapper-underlay {
    
    background-image: url("../assets/Images/Grid_background_768_420px.png");
    background-repeat: repeat;
    /* Optional: Add padding if needed around the container */
    padding: 80px 0; 
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    margin:0 auto;
    max-width: 1920px;
}


.document-border{
    background-color: white; /* or any solid color */
    position: relative;
    z-index: 1;
    margin:0 auto;
    width:90%;
    border: solid 2px #ebebeb;
    box-shadow: 5px 5px 16px 12px rgba(0, 0, 0, 0.1);
}


.phase-title    {
    
    
    width: 90%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    letter-spacing: 6px;
}



.phase-title h1 {
    padding:0 40px;
}




.mock-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    max-width: 600px;
    
}
.mock-container img {
    
    max-width:100%;
    max-height:100%;
    border: 1px solid black;
}

.video-container    {
    width:100%;
    max-width:500px;
    margin:20px auto;
    justify-content: center;
    align-items: center;
}

.video-container video {
    width:100%;
    max-width:500px;
    border: 1px solid black;
}



.caption-text   {
    font-size:16px;
    font-style: italic;
    text-align: center;
    color: #808080;
}


.bottom-border  {
    border-bottom: solid 1px black;
    padding-bottom:80px;
}


/* Used for titles that right position text */
.float-right    {
    text-align: right;
    
}


/* CONTENTS LINK 1-5
/* Container layout */
.numbers-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  flex-wrap: nowrap;
  flex-direction: row;
}

.number-item {
  text-align: center;
  opacity: 0;
  transform: translateX(-100px);
  transition: transform 0.7s ease, opacity 0.7s ease; /* ← faster */
}


/* Slide-in triggered */
.number-item.slide-in {
  opacity: 1;
  transform: translateX(0);
}

/* Delays for staggered animation */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }


/* Circle styling */
.circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid #000;
  border-radius: 50%;
  font-size: 21px;
  font-weight: 400;
  margin: 0 10px;
  text-decoration: none;
  color: black;
}
.circle:hover {
  background-color: #f0f0f0;
}

/* Label under the circle */
.label {
  font-size: 21px;
  margin-top: 20px;
  text-align: center;
}

/* Line between items */
.line {
  height: 1px;
  background-color: black;
  flex-grow: 1;
  align-self: center;
  margin-top: -50px;
}

/* Anchor scroll offset for fixed header */
#section1, #section2, #section3, #section4, #section5 {
  scroll-margin-top: 120px;
}

/* Optional: disable smooth scroll on mobile if jumpy */
@media (max-width: 768px) {
  html {
    scroll-behavior: auto;
  }
}



.full-width-img   {
         width:100%;
        height: auto;
        max-width:1600px;
}

/* Iconography */

.icon-text {
  display: flex;
  align-items: center; /* Vertically center the icon with the text block */
 padding-left:10px;
  margin-bottom: 1em;
    
}



/* Icon */
  .icon-text i {
  font-size: 1.2em; /* Optional: resize icon to better match text size */
  flex-shrink: 0;
      padding-right:0.3em;
}



/* Icon Colours */
.icon-green {
   color: green; 
}

.icon-red {
   color: red; 
}

.icon-orange    {
    color: #FF5A3D;
}

.icon-blue  {
    color: #5C8FFF;
}


  .icon-text b {
    display: block;
    margin-bottom: 4px;
  }

  .icon-text p {
    margin: 0;
    padding-left: 20px; /* Slight indent for paragraph */
  }


/* FIGMA Embed*/
.figma-embed-wrapper {
    position:relative;
 background-color: white; /* or any color you want */
  width: 100%;
  overflow-x: auto;
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

/* This wrapper scales the iframe */
.figma-embed {
  width: 1920px;
  height: 700px;
  border: none;
  background-color: transparent;
  transform-origin: top center;
  transform: scale(1);
}







/* FIGMA logo */
.figma-embed-wrapper {
  position: relative;
  background-color: white;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

/* Animated Logo on top of embed */
.figma-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999; /* must be higher than iframe */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  transition: opacity 0.5s ease;
  opacity: 1;
}

/* Figma embed starts hidden, fades in */
.figma-embed {
  width: 1920px;
  height: 700px;
  border: none;
  background-color: transparent;
  transform-origin: top center;
  transform: scale(1);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

/* Animated flip */
.figma-logo img {
  
  height: auto;
  opacity: 0.6;
  animation: flipPause 2.5s ease-in-out infinite;
  transform-style: preserve-3d;
  backface-visibility: visible;
}

/* Flip animation */
@keyframes flipPause {
  0% { transform: rotateY(0deg); }
  40% { transform: rotateY(180deg); }
  60% { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}

/* Fade effects */
.fade-out {
  opacity: 0;
  pointer-events: none;
}
.fade-in {
  opacity: 1;
}




/* CTA Prototype */
  .cta-container-prototype {
        margin-bottom:80px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Push content to the bottom */
        align-items: center;
        padding:20px 40px;  
        position: relative;
    }

    .cta-button-prototype {
       
        background-color: #F2BFDC;
        background-image: linear-gradient(147deg, #F2BFDC 0%, #2b0016 74%);
        color: white;
        font-size: 36px;
        font-weight: bold;
        padding: 30px 60px;
        border: none;
        border-radius: 90px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }

    .cta-button-prototype:hover {
        background-color: #0d4023;
        transform: scale(1.05);
    }


/* Creates a centered and shorter width for single column content */
.med-width  {
    margin:0 auto;
    max-width: 60%;
    
}




/* MEDIA QUERIES */

@media (max-width: 400px) {
    .iphone-frame {
        width: min(70vw, 180px);
         margin:0 auto;
    }
    
       
}


@media (max-width: 768px) {
    
    .hero-container .left h1{
        font-size: 48px; /* Adjust heading size for mobile */
    }
    
    
    .left {
        align-items: flex-start; /* Ensures content aligns left */
        padding: 20px 5px;       /* 20px top/bottom, 5px left/right */
        text-align: left;        /* Ensure text itself aligns left */
    }



    .iphone-frame {
        width: min(50vw, 220px);
         margin:0 auto;
    }

    /* Contents Banner Section */
     .gradient-banner-airline .center-content {
        width: 90%;              /* Allow full width on small screens */
        padding: 20px;        /* Apply 20px padding */
        box-sizing: border-box;  /* Ensure padding doesn't overflow */
    }

    .gradient-banner-airline h1,
    .gradient-banner-airline h2,
    .gradient-banner-airline p {
        text-align: left;         /* Keep text left-aligned */
    }

   .container.med-width,
  .phase-title.med-width {
    width: 90%;
    max-width: none;
  }
    
    
    
  
}



/* Responsive - Collapse the 70/30 (Two column) Hero Container to Single Column */

@media (max-width: 992px) {
    .hero-container {
        flex-direction: column;
        min-height: auto; /* Allow container to expand naturally */
    }

    .left, .right {
        width: 100%; /* Both sections take full width */
        padding: 30px 0px; /* Maintain spacing */
    }

    .right  {
        padding-left:0; /* resets padding from desktop */
        align-items: center;
        justify-content: center;
    }

    
    .hero-container .left p
    {
        margin-top:0;
    }

    .iphone-frame-small {
        margin-top: 80px;
    }
}



/* General Styles for both slideshows */
@media (max-width: 1024px) {
 .slideshow-wrapper {
    position: relative;
    width: 100%;
    height: auto;        /* ✅ don’t hard lock to 100vh */
    min-height: 100vh;   /* still fill the screen when possible */
    overflow: visible;   /* ✅ allow device to shrink instead of crop */
    display: flex;
    align-items: center;
    justify-content: center;
  }
    
  /* Container for all slides, now using 100% width */
  .slideshow-wrapper .container {
    display: flex;
    flex-direction: row;
    width: 100%;  /* Use 100% for container width */
    height: 100%;
    transition: transform 0.5s ease-in-out;
    padding: 0;
    margin: 0;
  }

  /* Each individual slide (mockup) */
  .slideshow-wrapper .container > .item {
    flex: 0 0 100%; /* Each slide takes 100% of the width */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Full height of container */
    box-sizing: border-box; /* Prevent any padding overflow */
    padding: 0; /* No padding */
  }

  /* Controls styling */
  .slideshow-controls {
    position: absolute !important;  /* keep them floating */
    bottom: 80px;                   /* fixed distance from bottom */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 10;
    gap: 16px;
  }

  .slideshow-button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #000000;
    cursor: pointer;
  }

  .slideshow-button.active {
    background-color: #d4d4d4;
  }
}


/* Optional: landscape tweaks */
@media (max-width: 1024px) and (orientation: landscape) {
  .slideshow-controls {
    bottom: 80px;    /* adjust if needed for smaller height */
    position: absolute !important;  /* prevent relative override */
  }
}





/* MEDIA RULES END */





/* ABOUT PAGE */

/* .gradient-banner-profile differs from other gradients by having zero (0)
margins for top and bottom */ 

.gradient-banner-profile    {
     margin:0 auto;
    background-color: #0d4023;
    background-image: linear-gradient(147deg, #166d3b 0%, #000000 74%);
    color:white;
        max-width: 1920px;
        
}

.banner-profile {
    margin:0 auto;
    color:black;
        max-width: 1920px;
    
}



.round-container img    {
    border-radius: 75%;
    width:100%;
    min-width:450px;
    max-width: 500px;
    margin-top:80px;
    border: 1px solid black;
}




.bg-img {
    position: relative;
    max-width: 1920px;
    padding-top: 40px;
    margin: 0px auto;
    background-image: url("../assets/Images/Grid_background_768_420px.png");
    background-repeat: repeat;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}


.bg-img, .caption-text   {
        padding-bottom: 20px;
}

.icon-list li   {
    padding:10px 0;
}


/* CTA Connect */
  .cta-container-connect {
        
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Push content to the bottom */
        align-items: center;
        padding:20px 40px;
        position: relative;
    }

    .cta-button-connect {
       
        background-color: #F2BFDC;
        background-image: linear-gradient(147deg, #F2BFDC 0%, #2b0016 74%);
        color: white;
        font-size: 36px;
        font-weight: bold;
        padding: 30px 60px;
        border: none;
        border-radius: 90px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }

    .cta-button-connect:hover {
        background-color: #0d4023;
        transform: scale(1.05);
    }

 /* Responsive adjustments */
    @media (max-width: 768px) {
        .cta-button-connect {
            font-size: 24px;

        }

        .padding-top    {
            padding-top: 50px;
        }

        .round-container img {
            min-width: 0;
            width: 100%;
            max-width: 300px;
            margin: 0px auto 0;
            display: block;
          }

        .gradient-banner-profile .item,
          .banner-profile .item {
            width: 100%;
            box-sizing: border-box;
            overflow-wrap: break-word;
          }

          .icon-list span {
            display: inline-block;
            max-width: 100%;
            word-wrap: break-word;
          }

          .icon-list {
            padding-left: 0;
          }

          .icon-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 10px;
          }

}


/* Responsive adjustments */

    @media (max-width: 1024px) {
        .round-container img {
            min-width: 0;
            width: 100%;
            max-width: 450px;
            margin: 0px auto 0;
            display: block;
          }
}





/* CONTACT PAGE */

.short-width    {
    margin:0 auto;
    padding: 20px;
    max-width: 700px;
}

.contact-form   {
    width:100%;
    max-width:450px;
    margin:0 auto;
}

/* Tally forms CODE */
/* Start */


iframe  {
    padding-top:20px; 
    width:100%; 
    height:403px; 
    border:none;
    
}

/* Ends */

.contact-image  {
    display: flex;
  justify-content: center;
  align-items: center;
}


.contact-image img    {
    max-width: 400px;
    
    height: auto; /* Keeps the aspect ratio */
    object-fit: cover; /* Ensures the image covers the area */
    
}






.cta-button-email {
       margin-top: 5px;
        width: 100%; /* Ensure the button is 100% width of the form */
        max-width: 400px; /* Ensure the button matches the form's max-width */
        box-sizing: border-box; /* Ensures padding/borders are included in the width calculation */
        background-color: #53f710;
        background: linear-gradient(147deg, #53f710 0%,   #184705 74%); /* Darker lime gradient */
        color: white;
        font-size: 24px;
        font-weight: bold;
        padding: 30px 60px;
        border: none;
        border-radius: 90px;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }

    .cta-button-email:hover {
        transform: scale(1.05);
    }

 /* Responsive adjustments */
        @media (max-width: 768px) {
            .cta-button-email {
                font-size: 20px;

            }
            
            .contact-image img    {
                min-width: 0;
                max-width: 450px;
            }
            
            .med-width {
            width: 90%;
            max-width: none;
          }
            
}



/* ICONS */  
/* FontAwesome */

i.fa-solid {
  font-size: 40px !important;
    
}

/* Style for the unordered list */
.icon-list {
  list-style-type: none;  /* Remove default bullets */
  padding: 0;
  margin: 0;
}

/* Style for each list item */
.icon-list li {
  display: flex;          /* Make the list items a flex container */
  align-items: center;    /* Vertically center the icons and text */
  gap: 10px;              /* Space between icon and text */
  margin-bottom: 10px;    /* Space between list items */
}

/* Style for the icons */
.icon-list i {
  font-size: 24px;        /* Adjust icon size */
  color: #FF5A3D;         /* Icon color */
}

/* Style for the text */
.icon-list span {
  padding-left:20px;       
}