* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      
      /* Basic styles for HTML and body */
      body, html {
        margin: 0 auto;
        padding: 0;
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        background-color: #0D0D0D;
        color: #f5f5f7;
        scroll-behavior: smooth; /* Smooth scrolling */
        min-height: 100vh; /* Full view height */
        max-width: 108.125rem; /* Restrict width */
        overflow-x: hidden; /* Prevent horizontal scrolling */
        overflow-y: auto; /* Enable vertical scroll */
      }
    

      #loader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(150, 150, 150, 0.1); /* Light semi-transparent background */
        backdrop-filter: blur(10px); /* Apply blur effect */
        z-index: 10000; /* Ensure loader is above everything else */
        display: flex; /* Use flex to enable centering */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        opacity: 1; /* Initially fully opaque */
        transition: opacity 0.5s ease-out; /* Smooth transition for fading out */
    }
      
      /* Hide the loader when the 'hidden' class is added */
      #loader.hidden {
          opacity: 0;
          pointer-events: none; /* Prevent interaction when hidden */
          transition: opacity 0.5s ease-out; /* Ensure smooth transition */
      }
      
      /* Optional: Prevent scrolling while loading */
      body.loading {
          overflow: hidden;
      }
      .easing-container {
        /* No specific styles needed for parent container */  
        }
        
        /* Children within Easing Container */
        .easing-container > * {
                transition: transform 1s ease-out, opacity 1s ease-out; /* Smooth transition */
                transform: translateY(25px); /* Initially positioned 10px down */
                opacity: 0; /* Initially hidden */
        }
        
        /* When element is in view, move up and show */
        .easing-container > *.visible {
                transform: translateY(0); /* Move to normal position */
                opacity: 1; /* Make fully visible */
        }
        /* Hide/show navbar on scroll */
        .hidden {
        top: -100px;
        }
        
      /* Loading GIF styling */
      .loading-gif {
        width: 250px; /* Adjust as needed for different devices */
        height: auto; /* Maintain aspect ratio */
      }
      

      /* Scroll Down Arrow Styling */
        .scroll-down-arrow {
        position: absolute;
        bottom: 2rem; /* Distance from the bottom of the landing page */
        left: 50%;
        transform: translateX(-50%);
        width: 80px; /* Size of the container */
        height: 80px; /* Size of the container */
        background-color: rgba(255, 255, 255, 0.9); /* Black circle background */
        border-radius: 50%; /* Makes the circle */
        cursor: pointer;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.6); /* Shadow for a lifted effect */
        display: flex;
        justify-content: center;
        align-items: center;
        animation: bounce 1.5s infinite; /* Add bounce animation */
        transition: opacity 0.5s ease-in-out; /* Smoothly fade in/out */
      }
      
      .scroll-down-arrow img {
        width: 60px; /* Adjust the size of the SVG inside the circle */
        height: auto;
      }
      /* Scroll Up Button Styling */
        .scroll-up-button {
        position: fixed;
        bottom: 2rem; /* Position from the bottom of the screen */
        right: 2rem; /* Position from the right of the screen */
        width: 90px; /* Size of the container */
        height: 90px; /* Size of the container */
        background-color: rgba(255, 255, 255, 0.9); /* Light circle background */
        border-radius: 50%; /* Makes the circle */
        cursor: pointer;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.6); /* Shadow for a lifted effect */
        display: none; /* Initially hidden */
        align-items: center;
        justify-content: center;
        z-index: 1000; /* Make sure it's above other elements */
        transition: opacity 0.5s ease; /* Smooth fade-in/out transition */
      }
      
      .scroll-up-button img {
        width: 70px; /* SVG size */
        height: auto;
      }
      
      /* Show scroll-up-button */
      .scroll-up-button.show {
        display: flex; /* Show the button */
        opacity: 1; /* Fully opaque */
      }
      
      /* Hide scroll-up-button */
      .scroll-up-button.hide {
        opacity: 0; /* Fully transparent */
        transition: opacity 0.5s ease; /* Smooth transition when hiding */
      }
      
      /* Back Button Styling */
        .back-button {
        position: fixed;
        top: 4rem; /* Position from the top of the screen */
        left: 2rem; /* Position from the left of the screen */
        width: 50px; /* Size of the container */
        height: 50px; /* Size of the container */
        background-color: rgb(220, 220, 220); /* Light circle background */
        border-radius: 50%; /* Makes the circle */
        cursor: pointer;
        /*box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.6); /* Shadow for a lifted effect */
        display: flex; /* To center the image inside */
        align-items: center;
        justify-content: center;
        z-index: 1000; /* Make sure it's above other elements */
        transition: opacity 0.5s ease; /* Smooth fade-in/out transition */
    }
    
    .back-button img {
        width: 50px; /* SVG size */
        height: auto;
    }
    
    /* Optional: Add hover effect */
    .back-button:hover {
        background-color: rgba(255, 255, 255, 1); /* Slightly stronger background on hover */
        transform: scale(1.05); /* Slight zoom on hover */
    }
    .b{
      color: #ffffff; 
      font-weight: bolder;   
      /* font-size: larger;  */
      text-shadow: 0px 0px 0.75px #D4FA86;  /*White shadow effect */
    }

      .highlight_apple {
        color: #D4FA86;
        font-weight: bold;
        font-size: 0.66rem;
        line-height: 1.25rem;
      }
      
      .highlight_apple:hover {
        color: #ffffff; /* Change to white on hover */
        font-size: 0.66rem;
        line-height: 1.25rem;
        font-weight: bold;
      }
      /* Subheading styling */
      .Subheading {
        color: #D4FA86;
        padding: 10vh 5vw 0vh 5vw;
        font-weight: 600;
      }
      
      /* Container for superimposed images */
      .image-container {
        position: relative;
        width: 100%;
        max-width: 108.125rem;
        height: 30rem;
        margin: 0 auto;
      }
      
      /* Opaque main image */
      .opaque-image,
      .png-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      
      .opaque-image {
        background: url('../images/wavy.png') no-repeat center;
        background-size: cover;
        z-index: 1;
      }
   
      .png-image {
        width: 120%;
        background: url('../images/scrolling-image.png');
        background-size: 120%;
        z-index: 2;
      }
 
      /* Landing Section */
      .landing-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 12% 10% 3%;
        max-width: 60rem;
        min-height: 70vh;
        height: auto;
        margin: 0 auto;
        text-align: center;
      }
      
      /* Headings Styling */
      h1, h2, h3 {
        color: #E4E4E4;
      }
      
      h1 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
      }
      
      h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
      }
      
      h3 {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        font-weight: 400;
      }
      
      /* Paragraph and Links Styling */
      p, a {
        color: #E4E4E4;
        font-size: 1.063rem;
        text-decoration: none;
      }
      
      /* About Me Section */
      .about-me {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      

      
      #dropdownMenu{
        display: none;
      }
      .about-columns {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 2.5rem;
        width: 100%;
        padding: 0 6.25rem;
      }
      .about-column {
        flex: 1;
        margin-bottom: 0rem;
        line-height: 1.56;


      }
      
      /* List Styling */
      ul {
        list-style-type: circle;
        padding-left: 2rem;
      }
      
      ul li {
        margin-bottom: 1rem;
      }
      
      
      /* Projects Section - 2x2 Grid Layout for Larger Screens */
      @media (min-width: 1001px) {
        /* Individual Project Styling */
        .projects {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 1.25rem;
          padding-left: 6.25rem;
          padding-right: 6.25rem;
          width: 100%;
          box-sizing: border-box;
        }
        .footnote {
          display: grid;
          font-size: 0.66rem;
          font-weight: 400;
          line-height: 1.25rem;
          text-align: center;
        }
        .hamburger {
          display: none; /* Hide hamburger on larger screens */
        }
      
        .grid-item {
          display: none; /* Ensure each grid item is treated as a block */
        }
      }
      
      .project {
        background-color: #0D0D0D;
        padding: 1.25rem;
        display: flex;
        flex-direction: column;
        align-items: left;
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
        overflow-x: hidden;
      }
      
      .project:hover {
        background-color: #333;
        z-index: 100;
        padding: 0.5rem;
        border-radius: 1.25rem;
        transform: scale(1);
        transition: transform 1.55s ease;
        box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1); /* Light shadow for 3D effect */
        border-bottom: 5px solid rgba(215, 250, 134, 0.5); /* Light border line at the bottom */
        border-right: 3px solid rgba(255, 255, 255, 0.3); /* Side border for extra depth */
      }
      
      .project-img {
        width: 100%;
        height: auto;
        border-radius: 1.25rem;
        padding-bottom: 1.56rem;
      }
      
      /* Project Name and Description */
      .project-name {
        color: #E4E4E4;
        font-weight: 500;
        line-height: 1.56rem;
        font-size: 1.063rem;
        padding-left: 0.5rem;
        text-align: left;
      }
      
      /* Project Description */
      .project-description {
        font-size: 0.66rem;
        font-weight: 400;
        padding-left: 0.5rem;
        line-height: 1.25rem;
      }
      
      /* Outcome Description */
      .outcome-description {
        font-size: 0.6rem;
        text-align: left;
        font-weight: 700;
        line-height: 1.25rem;
        padding-left: 0.5rem;
        padding-bottom: 0.5rem;
      }
      
      /* Footer Styling */
      .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 3rem 1rem;
        background-color: #0D0D0D;
        color: #f5f5f7;
      }
      
      .float-container {
        perspective: 1000px;
      }
      
      .float-image {
        width: 200px;
        height: auto;
        border-radius: 50%;
        transition: transform 0.5s ease, box-shadow 0.5s ease;
      }
      
      .float-image:hover {
        transform: rotateX(1deg) rotateY(-1deg) translateZ(30px);
        box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.6), 5px 5px 15px #D4FA86;
      }
      
      .footer-text {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
        margin-bottom: 2rem;
      }
      
      .social-links img {
        width: auto;
        height: 3rem;
        transition: filter 0.3s ease;
      }
      
      .social-links a {
        color: #f5f5f7;
        font-size: 1rem;
        text-decoration: none;
        transition: color 0.3s ease;
      }
      
      .social-links:hover img {
        /* Adjusting the filter to convert the SVG to green */
        filter: brightness(0) saturate(100%) invert(93%) sepia(1%) saturate(172%) hue-rotate(170deg) brightness(100%) contrast(88%);
        transition: filter 0.3s ease; /* Smooth transition for hover effect */
      }
      
      .social-links:hover a {
        color: #D4FA86; /* Change text to a specific green color on hover */
      }
      
      .social-links {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      .social-img {
        width: 50rem;
        height: 5rem;
      }
      
      
      /* Scroll Down Arrow */
      .scroll-down-arrow {
        position: absolute;
        bottom: 1.563rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 9rem;
        color: #ffffff;
        cursor: pointer;
        z-index: 1000;
        animation: bounce 1.5s infinite;
      }
                        
        
        /* Ensure the project content has relative positioning */
        .project-content {
        position: relative;
        z-index: 1; /* Ensure the container is above the background image */
        padding: 2rem;
         }
    
    /* Style for the background image */
     .underconstruction {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1; /* Send the image behind the text and video */
        opacity: 0.2; /* Optional: Set transparency for a subtle effect */
    }
        
    .project-title-container {
      position: relative;
      text-align: center;
      z-index: 1; /* Ensure it's above other elements */
      display: flex;
      flex-direction: column;
      justify-content: center; /* Center the text vertically */
      align-items: center;
      width: 100%;
      height: 70vh; /* Cover 60% of the screen height */
      overflow: hidden;
    }

    /* Triple Diamond Image as Background */

    .triple-diamond-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(100, 100, 100, 0.25), rgba(13, 13, 13, 1.5)),
                  url('../triplediamond.png') no-repeat center center;
      background-size: cover;
      z-index: 1;
    }
    /* Project Title Over the Image */
    .project-title {
      position: relative;
      z-index: 2; /* Ensure it's above the background image */
      width: 70%; /* Restrict text width to about 60% of the container */
      color: #fff; /* Adjust color for readability */
      padding: 1rem; /* Padding for better spacing */
      text-align: center; /* Center text */
      margin: 0 auto; /* Center horizontally */
    }


    .project-title h1 {
      font-size: 2.5rem; /* Adjust as needed */
    }

    .project-title p {
      font-size: 1.25rem; /* Adjust as needed */
    }/* CSS for prototype and details layout */

    .prototype-and-details {
      display: flex;
      flex-direction: row;
      gap: 3rem;
      margin:0 3rem;
      align-items: flex-start;
      position: relative;

    }

    .prototype-section {
      flex: 1 1 50%;
      max-width: 50%;
      transform: translate(0%, 0%);
      position: relative;
      align-self: flex-end;
      margin: 20px auto; /* Center the prototype between sections */
      display: flex;              /* Use flex to center the inner content */
      justify-content: center;    /* Horizontally center the content */
      align-items: center;        /* Vertically center the content */
      overflow: hidden;           /* Prevent content from overflowing */
      /* max-width: 100%;            Make sure content doesn’t exceed the container width */
      max-height: 100%;           /* Make sure content doesn’t exceed the container height */
      object-fit: contain; 
    }

    .details-section {
      flex: 1 1 50%;
      max-width: 50%;
      line-height: 1.56rem;
    }

    /* Ensure the video container takes the full height and width of its container */
    .desktop-video-container {
      position: relative;
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      margin: 0; /* Center the container */
      overflow: hidden;
      z-index: 2; /* Ensure it stays above other elements if necessary */
    }

    .desktop-video-container video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 1.25rem;
      border-color: #D4FA86;
      border: 5px;
      display: block;
    }

    /* Mobile Video Container */
    .mobile-video-container {
      position: relative;
      width: 280px;  /* iPhone 13 screen width */
      height: 502px; /* iPhone 13 screen height */
      max-width: 600px; /* Optional: Restrict the maximum width */
      margin: 0 auto; /* Center align the video */
      z-index: 2; /* Ensure it's above the background image */
    }

    /* Style the video to fill the container */
    .mobile-video-container video {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 0.5rem; /* Optional: Add rounded corners */
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* Optional: Add shadow for emphasis */
    }
       /* Mobile Video Container */
       .oneone-video-container {
        position: relative;
        width: 502px;  /* iPhone 13 screen width */
        height: 502px; /* iPhone 13 screen height */
        max-width: 600px; /* Optional: Restrict the maximum width */
        margin: 0 auto; /* Center align the video */
        z-index: 2; /* Ensure it's above the background image */
      }
  
      /* Style the video to fill the container */
      .oneone-video-container video {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0.5rem; /* Optional: Add rounded corners */
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* Optional: Add shadow for emphasis */
      }

    /* Styling for the text sections */
    .section {
      margin-bottom: 20px;
      flex-direction: center;
    }

    .section-title {
      font-size: 2em;
      margin-bottom: 10px;
      font-weight:Bold;
      color: #D4FA86;
    }

    .section-content {
      font-size: 1em;
      line-height: 1.6;
      text-align:start;
    }

    /* Responsive styling for smaller screens */
    @media (max-width: 1000px) {
      .prototype-and-details {
          flex-direction: column;
      }
      
      .prototype-section,
      .details-section {
          max-width: 100%;
      }
    }

    /* Spacing for better visual appeal */

    .details-section {
      padding: 0 ;
    }


    .prototype-section {

    }

      /* Bounce Animation */
      @keyframes bounce {
        0%, 100% {
          transform: translate(-50%, 0);
        }
        50% {
          transform: translate(-50%, -10px);
        }
      }