body {
    cursor: none !important;
  }
  
  /* Optionally, add the CSS @viewport rule for extra support */
  @-ms-viewport {
    width: device-width;
  }
  @viewport {
    width: device-width;
    initial-scale: 1;
  }
  
  @media screen and (min-width: 769px) {
    #navbar {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 750px;
      height: 55px;
      z-index: 10;
    }
  
    #navbar .logo {
      position: absolute;
      z-index: 11;
      margin-top: 6px;
      padding-bottom: 2px;
      transition: transform 0.3s ease-in-out;
      transform-origin: center center;
    }
  
    #navbar .logo:hover {
      transform: scale(1.1);
    }
  
    .navbar-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(240, 149, 63, 0.10);
      border-radius: 27.59px;
      border: 1px solid black;
      backdrop-filter: blur(5.21px);
    }
  
    .nav-item {
      position: absolute;
      color: black;
      font-size: 24px;
      font-family:
        "SF Pro Text",
        "SF Pro Display",
        -apple-system,
        system-ui,
        sans-serif;
      font-weight: 100;
      word-wrap: break-word;
      border-bottom: none !important;
      padding-bottom: 2px;
    }
  
    .nav-item::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      height: 1px;
      width: 0;
      background-color: black;
      transition: width 0.3s ease-in-out;
    }
  
    .nav-item:hover::after {
      width: 100%;
    }
    
     html, body {
      cursor: none !important;
    }
    
    .custom-cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      background-color: #F0953F;
      border-radius: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
      transition:
        width 0.2s ease,
        height 0.2s ease,
        background-color 0.2s ease,
        border-radius 0.2s ease;
      z-index: 9999;
    }
    
    .custom-cursor.cursor-hover {
      width: 50px !important;
      height: 50px !important;
      background-color: rgba(240, 149, 63, 0.5) !important; /* 50% opacity on hover */
      border-radius: 50% !important;
    }
    
    .custom-cursor.cursor-text-hover {
      width: 2px !important;
      background-color: rgba(240, 149, 63,) !important; /* vertical line at 50% opacity */
      border: none !important;
      border-radius: 0 !important;
    }
  }
  @media screen and (max-width: 768px) {
    /* 2) NAVBAR */
    #navbar {
      position: fixed !important;
      top: 20px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      width: 340px !important;
      height: 55px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      backdrop-filter: blur(5px) !important;
      border-radius: 27px !important;
      border: 1px solid black !important;
      z-index: 1000 !important;
    }
  
    #navbar > div {
      display: flex !important;
      align-items: center !important;
      justify-content: space-around !important;
      width: 100% !important;
      padding: 0 10px !important;
    }
  
    #navbar .logo {
      position: relative !important;
      width: 32px !important;
      height: 22px !important;
      top: 0.05em !important;
      left: 0 !important;
      margin-right: 0 !important;
    }
  
    #navbar .nav-item {
      position: relative !important;
      left: auto !important;
      top: auto !important;
      margin: 0 !important;
      font-size: 14px !important;
      font-weight: 300 !important;
    }
  }
  
  
  /* Reset default margins, paddings, and set box-sizing */
  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
    
  /* Body settings: black background, Rajdhani font, prevent horizontal scrolling */
  body {
      background-color: #282D30;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    overflow-x: hidden;
  }
    
  /* Black square: occupies 100% width, fixed height of 800px (per your current code), starts at the very top */
  .black-square {
      background-color: #282D30;
      width: 100%;
      height: 800px;
      position: relative;
      overflow: visible; /* Allow the image to extend beyond if needed */
  }
    
  /* Cover title: placed 350px from the top of the black section; centered horizontally */
  .cover-title {
      margin-top: 350px;
      text-align: center;
      color: white;
      font-size: 60px;
      font-weight: 700;
      word-wrap: break-word;
  }
    /* scroll-down arrow image, 50px below the title, centered at 50% width */
  .scroll-down-image {
    display: block;
    margin: 100px auto 0;
    width: 50%;
    max-width: 100px; /* optional cap if you don’t want it too large */
  }
  
  /* Cover image: placed 521px below the title, fixed dimensions, centered horizontally */
  .cover-image {
      display: block;
      margin: 150px auto 0 auto;
      width: 1024px;
      height: 484.25px;
  }
    
  /* Grey square: full width, fixed height of 4549px */
  .grey-square {
      background-color: #E9E9E9;
      width: 100%;
      height: 4650px;
  }
    
  /* Context Section styling */
  .context-section {
      width: 664px;              /* Fixed width as specified */
      height: 141px;             /* Fixed height as specified */
      margin: 50px auto 0 auto;   /* 50px spacing from the element above; auto centers horizontally */
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
  }
    
  .context-title {
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
      width: 100%;
  }
    
  .context-text {
      text-align: center;
      color: black;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 300;
      word-wrap: break-word;
      width: 100%;
  }
  /* ---------- Design Process Section Styles ---------- */
  
  /* 1) Container: centered with vertical padding */
  .design-process-section {
    width: 80%;
    max-width: 800px;     /* optional cap */
    margin: 0 auto;
    padding: 50px 0;
    font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;
  }
  
  /* 2) Section title: centered, 24px semi-bold */
  .design-process-title {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  /* 3) Label spans (“Type:”, “Role:”, etc.): semi-bold */
  .design-process-section .label {
    font-weight: 600;
  }
  
  /* 4) Value spans (everything after the label): regular */
  .design-process-section .value {
    font-weight: 400;
  }
  
  /* 5) Meta lines (project-type, my-role, industry, duration):
        – fixed width so they all align on the left edge
        – 16px regular text
        – line-height for spacing
        – 1rem gap below each
        – left-aligned content inside a centered block
  */
  .design-process-section
    .project-type,
  .design-process-section
    .my-role,
  .design-process-section
    .industry,
  .design-process-section
    .duration {
    font-size: 16px;
    line-height: 1.5;
    width: 500px;
    margin: 0 auto 1rem;
    text-align: center;
  }
  
    
  /* Common styling for the new Introduction, Problem, and Goal sections */
  .section-title {
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
      width: 100%;
  }
    
  .section-text {
      text-align: center;
      color: black;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      width: 100%;
  }
  
  
  
  /* Problem Section */
  .problem-section {
      width: 664px;
      height: 121px;
      margin: 0px auto 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }
    
  /* Goal Section */
  .goal-section {
      width: 664px;
      height: 101px;
      margin: 50px auto 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }
  .contextual-inquiry-section {
      width: 664px;              /* Fixed width as specified */
      height: 101px;             /* Fixed height as specified */
      margin: 50px auto 0 auto;   /* Adjust vertical spacing as needed; auto centers horizontally */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
  }
  
  .contextual-inquiry-title {
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
      width: 100%;
  }
  
  .contextual-inquiry-text {
      text-align: center;
      color: black;
      font-size: 16px;
      font-family: Rajdhani, sans-serif;
      font-weight: 500;
      word-wrap: break-word;
      width: 100%;
  }
  /* User Types Section */
  .user-types-section {
      width: 826px;               /* Fixed width */
      height: 277px;              /* Fixed height */
      margin: 50px auto 0;        /* Centers the section horizontally */
      display: flex;
      gap: 150px;                  /* 50px gap between each user box */
      justify-content: center;    /* Center the boxes as a group */
      align-items: center;
  }
  
  /* Primary Users Box */
  .primary-box {
      width: 200px;
      height: 200px;
      position: relative;
  }
  .primary-bg {
      width: 200px;
      height: 200px;
      background: #EE984B;
      border: 1px solid black;
      position: absolute;
      top: 0;
      left: 0;
  }
  .primary-overlay {
      width: 200px;
      height: 200px;
      background: white;
      border: 1px solid black;
      position: absolute;
      top: 31px;
      left: 53px;
  }
  .primary-text {
      position: absolute;
      top: 50px; /* Adjust as needed */
      left: 53px;
      width: 200px;
      text-align: center;
      color: black;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;}
  
  /* Secondary Users Box */
  .secondary-box {
      width: 253px;  /* Container width from your inline code */
      height: 231px; /* Container height from your inline code */
      position: relative;
  }
  .secondary-bg {
      width: 200px;
      height: 200px;
      background: black;
      border: 1px solid black;
      position: absolute;
      top: 0;
      left: 0;
  }
  .secondary-overlay {
      width: 200px;
      height: 200px;
      background: white;
      border: 1px solid black;
      position: absolute;
      top: 31px;
      left: 53px;
  }
  .secondary-text {
      position: absolute;
      top: 54px; /* Adjust as needed */
      left: 53px;
      width: 200px;
      text-align: center;
      color: black;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;}
  
  /* Excluded Users Box */
  .excluded-box {
      width: 253px;  /* Container width from your inline code */
      height: 256px; /* Container height from your inline code */
      position: relative;
  }
  .excluded-bg {
      width: 200px;
      height: 200px;
      background: #D9D9D9;
      border: 1px solid black;
      position: absolute;
      top: 0;
      left: 0;
  }
  .excluded-overlay {
      width: 200px;
      height: 200px;
      background: white;
      border: 1px solid black;
      position: absolute;
      top: 31px;
      left: 53px;
  }
  .excluded-text {
      position: absolute;
      top: 56px; /* Adjust as needed */
      left: 53px;
      width: 200px;
      text-align: center;
      color: black;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;}
  
  /* Common typography for user type texts */
  .user-header {
      font-size: 24px;
      font-weight: 600;
      word-wrap: break-word;
  }
  .user-subtitle {
      font-size: 20px;
      font-weight: 500;
      word-wrap: break-word;
      display: block;
      margin-top: 10px;
  }
  /* Maps Section */
  .maps-section {
      width: 1086.5px;         /* Fixed width */
      height: 512px;           /* Fixed height */
      margin: 50px auto 0;     /* 50px spacing above; centers the section horizontally */
      position: relative;      /* Establishes a positioning context for inner absolute elements */
      opacity: 1;              /* Visible */
    }
    
    .maps-inner {
      width: 883px;
      height: 486px;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .maps-title {
      width: 664px;
      position: absolute;
      top: 0;
      left: 219px;
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
    }
    
    .maps-img {
      width: 500.07px;
      height: 419px;
      position: absolute;
      top: 67px;
      left: 0px;
      border-radius: 22.77px;
    }
    
    .maps-img-2 {
      width: 447.50px;
      height: 464px;
      position: absolute;
      top: 48px;
      left: 639px;
    }
  /* Findings Section Container */
  .findings-section {
      width: 1086.5px;           /* Fixed width */
      margin: 50px auto 0;       /* 50px spacing above; centers horizontally */
    }
    
    /* Findings Text Block */
    .findings-text-block {
      width: 664px;
      margin: 0 auto 20px auto;  /* Centered with 20px spacing below */
      text-align: center;
    }
    
    .findings-title {
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
    }
    
    .findings-description {
      color: black;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;
      font-weight: 500;
      word-wrap: break-word;
    }
    
    /* Findings Icons Container */
    .findings-icons {
      width: 778px;             /* Fixed width as provided */
      margin: 0 auto;           /* Center the container horizontally */
      display: flex;
      justify-content: space-evenly;  /* Evenly space the icon boxes */
      align-items: center;
    }
    
    /* Each Icon Box */
    .icon-box {
      display: flex;
      flex-direction: column;   /* Stack emoji above text */
      align-items: center;
    }
    
    /* Icon Emoji: placed above the text with a 10px gap */
    .icon-emoji {
      font-size: 130px;
      color: black;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      margin-bottom: 10px;      /* 10px gap between emoji and label */
    }
    
    /* Icon Label */
    .icon-label {
      font-size: 16px;
      color: black;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      text-align: center;
      word-wrap: break-word;
    }
  /* Takeaway Section */
  .takeaway-section {
      width: 664px;                /* Fixed width */
      height: 141px;               /* Fixed height */
      margin: 50px auto 0;         /* 50px top margin; centered horizontally */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;                 /* 10px gap between elements */
    }
    
    .takeaway-title {
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
      width: 100%;
    }
    
    .takeaway-text {
      text-align: center;
      color: black;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 300;
      word-wrap: break-word;
      width: 100%;
    }
    .hmw-statement-section {
      width: 274px;              /* Fixed width */
      height: 121px;             /* Fixed height */
      margin: 50px auto 0;       /* 50px spacing above; centers the section horizontally */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0px;                 /* No gap between the two items (as specified) */
    }
    
    .hmw-statement-title {
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      width: 100%;
    }
    
    .hmw-statement-text {
      text-align: center;
      color: black;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 300;
      word-wrap: break-word;
      width: 100%;
    }
    .our-approach-section {
      width: 664px;              /* Fixed width consistent with other sections */
      /* Set a top margin of 50px to match spacing between sections */
      margin: 50px auto 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;               /* 10px gap between the title and text */
      /* Height is not fixed here; it will grow to contain its content */
    }
    
    .our-approach-title {
      width: 100%;
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
    }
    
    .our-approach-text {
      width: 100%;
      text-align: left;         /* Left-align the paragraph text */
      color: black;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      line-height: 1.5;
      /* Optional: add some margin-top if needed */
    }
    
    .our-approach-bullets {
      margin: 10px 0 0 20px;    /* Add a left indent for the bullets and some top margin */
      padding: 0;
      list-style-type: disc;    /* Standard bullet points */
    }
    
    .our-approach-bullets li {
      margin-bottom: 5px;       /* Small spacing between bullet items */
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      color: black;
      word-wrap: break-word;
    }
    .lowfi-prototype-section {
      width: 664px;               /* Fixed width */
      height: 141px;              /* Fixed height as specified */
      margin: 50px auto 0;        /* 50px spacing above; centers horizontally */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;                  /* 10px gap between title and text */
    }
    
    .lowfi-prototype-section .section-title {
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
      width: 100%;
    }
    
    .lowfi-prototype-section .section-text {
      text-align: center;
      color: black;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      width: 100%;
    }
    .lowfi-proto-image-section {
      width: 1110px;             /* Fixed width */
      height: 796.73px;          /* Fixed height */
      margin: 50px auto 0;       /* 50px spacing above; centers the section horizontally */
      opacity: 1;                /* Set to 1 so the image is visible */
    }
    
    .lowfi-proto-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;         /* Ensures the image fills the container */
    }
    .final-section {
      width: 664px;              /* Fixed width */
      height: 141px;             /* Fixed height */
      margin: 50px auto 0;       /* 50px spacing above; centered horizontally */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;                 /* 10px gap between the title and the text */
    }
    
    .final-section .section-title {
      width: 100%;
      text-align: center;
      color: black;
      font-size: 24px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 600;
      word-wrap: break-word;
    }
    
    .final-section .section-text {
      width: 100%;
      text-align: center;
      color: black;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
    }
    .getstarted-section {
      width: 958px;           /* Fixed width */
      height: 355.56px;       /* Fixed height */
      margin: 50px auto 0;     /* 50px spacing above; centers the section horizontally */
      position: relative;     /* Establishes positioning context for children */
      opacity: 1;             /* Ensure the section is visible */
  }
    
  .getstarted-img {
      width: 500px;
      height: 355.56px;
      position: absolute;
      top: 0;
      left: 0;
  }
    
  .getstarted-text {
      width: 301px;
      position: absolute;
      top: 123px;
      left: 657px;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;       /* Changed to medium */
      word-wrap: break-word;
      text-align: center;
  }
    
  .step1-section {
      width: 962px;           /* Fixed width */
      height: 355.56px;       /* Fixed height */
      margin: 50px auto 0;    /* 50px spacing above and centered horizontally */
      position: relative;     /* Establishes positioning context for children */
      opacity: 1;             /* Visible */
  }
    
  .step1-img {
      width: 500px;
      height: 355.56px;
      position: absolute;
      top: 0;
      left: 462px;
  }
    
  .step1-text {
      width: 301px;
      position: absolute;
      top: 103px;
      left: 0;
      text-align: right;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;       /* Changed to medium */
      word-wrap: break-word;
  }
    
  .step2-section {
      width: 958px;           /* Fixed width */
      height: 355.56px;       /* Fixed height */
      margin: 50px auto 0;    /* 50px spacing above; centers horizontally */
      position: relative;     /* Establishes positioning context for absolute children */
      opacity: 1;             /* Visible */
  }
    
  .step2-img {
      width: 500px;
      height: 355.56px;
      position: absolute;
      top: 0;
      left: 0;
  }
    
  .step2-text {
      width: 301px;
      position: absolute;
      top: 103px;
      left: 657px;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;       /* Changed to medium */
      word-wrap: break-word;
      text-align: right;
  }
  .step3-section {
      width: 962px;              /* Fixed width */
      height: 355.56px;          /* Fixed height */
      margin: 50px auto 0;       /* 50px top margin; centers the section horizontally */
      position: relative;        /* Establishes positioning context for absolute children */
      opacity: 1;                /* Set to 1 so the section is visible */
    }
    
    .step3-img {
      width: 500px;
      height: 355.56px;
      position: absolute;
      top: 0;
      left: 462px;
    }
    
    .step3-text {
      width: 301px;
      position: absolute;
      top: 103px;
      left: 0;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      text-align: right;
    }
    .step4-section {
      width: 958px;              /* Fixed width */
      height: 355.56px;          /* Fixed height */
      margin: 50px auto 0;       /* 50px top margin; centers the section horizontally */
      position: relative;        /* Establishes positioning context for children */
      opacity: 1;                /* Set to 1 so the section is visible */
    }
    
    .step4-img {
      width: 500px;
      height: 355.56px;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .step4-text {
      width: 301px;
      position: absolute;
      top: 107.89px;
      left: 657px;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      text-align: right;
    }
    .step5-section {
      width: 962px;             /* Fixed width */
      height: 355.56px;         /* Fixed height */
      margin: 50px auto 0;       /* 50px top margin; centers the section horizontally */
      position: relative;        /* Establishes positioning context for children */
      opacity: 1;                /* Section is visible */
    }
    
    .step5-img {
      width: 500px;
      height: 355.56px;
      position: absolute;
      top: 0;
      left: 462px;
    }
    
    .step5-text {
      width: 301px;
      position: absolute;
      top: 98px;
      left: 0;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      text-align: right;
    }
    .step6-9-section {
      width: 1147px;              /* Fixed width */
      height: 1712.59px;          /* Fixed height */
      margin: 50px auto 0;        /* 50px top margin; centers the container horizontally */
      position: relative;         /* Establishes positioning context for absolutely positioned children */
      /* (If you want it visible, ensure opacity: 1; or remove the opacity property) */
      opacity: 1;
    }
    
    /* Step 6 Image */
    .step6-img {
      width: 500px;
      height: 355.56px;
      position: absolute;
      top: 0px;
      left: 0px;  /* Changed from 462px to 0px to match the Step 4 image */
    }  
    
    /* Step 7 Image */
    .step7-img {
      width: 500px;
      height: 355.56px;
      position: absolute;
      top: 456px;
      left: 647px;
    }
    
    /* Step 8 Image */
    .step8-img {
      width: 500px;
      height: 355.06px;
      position: absolute;
      top: 912px;
      left: 0px;
    }
    
    /* Step 9 Image */
    .step9-img {
      width: 500px;
      height: 355.59px;
      position: absolute;
      top: 1357px;
      left: 647px;
    }
    
    /* Step 6 Text */
    .step6-text {
      width: 301px;
      position: absolute;
      top: 108px;
      left: 657px;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      text-align: right;
    }
    
    /* Step 8 Text */
    .step8-text {
      width: 301px;
      position: absolute;
      top: 1014px;
      left: 657px;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
      text-align: right;
    }
    
    /* Step 7 Text */
    .step7-text {
      width: 301px;
      position: absolute;
      top: 554px;
      left: 185px;
      text-align: right;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
    }
    
    /* Step 9 Text */
    .step9-text {
      width: 301px;
      position: absolute;
      top: 1480px;
      left: 185px;
      text-align: right;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
    }
    .iron-recs-section {
      width: 1050px;           /* Fixed width */
      height: 545.56px;         /* Fixed height */
      margin: 50px auto 0;      /* 50px spacing above; centers the section horizontally */
      position: relative;       /* Establishes positioning context for absolute children */
      opacity: 1;               /* Visible */
    }
    
    .iron-recs-images {
      width: 1050px;
      height: 355.56px;
      position: relative;
    }
    
    .iron-recs-img {
      position: absolute;
      width: 500px;
      height: 355.56px;
      top: 0;
    }
    
    /* First image positioned on the left */
    .iron-recs-img:first-of-type {
      left: 0;
    }
    
    /* Second image positioned with a 50px gap */
    .iron-recs-img:last-of-type {
      left: 550px;
    }
    
    .iron-recs-text {
      width: 339px;
      position: absolute;
      top: 405.56px;
      left: 355px;  /* (1050px - 339px) / 2 = 355.5, approximately */
      text-align: center;
      color: white;
      font-size: 16px;
      font-family:
      "SF Pro Text",
      "SF Pro Display",
      -apple-system,
      system-ui,
      sans-serif;    font-weight: 500;
      word-wrap: break-word;
    }
    .styleguide-section {
      width: 1316px;           /* Fixed width */
      height: 653.59px;         /* Fixed height */
      margin: 50px auto 0;      /* 50px spacing above; centers the section horizontally */
      position: relative;       /* Establishes positioning context */
      opacity: 1;               /* Set to 1 so the section is visible */
    }
    
    .styleguide-img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;        /* Ensures the image covers the container */
    }
  
    
    .div-block-405 {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 85%;
    }
    
    .text-block-105 {
      font-size: 40px;
      font-weight: 400;
      font-family: 'Rajdhani', sans-serif;
      margin-bottom: 10px;
      color: white;
    }
    
    .text-block-106 {
      font-size: 36px;
      font-weight: 300;
      font-family: 'Rajdhani', sans-serif;
      color: white;
    }
    
    .image-145 {
      width: 80px;
      height: auto;
      margin-left: 30px;
    }
    /* --- Scroll Effect for User Types Section --- */
  
  /* 
     This class is added to the overlay+text container 
     so we can animate it via JavaScript. 
  */
  .scroll-animate {
      /* Start them slightly up and left so they appear more "inclined" */
      transform: translate(-40px, -40px);
    
      /* Some smoothing if desired (JS is overriding transform on scroll) */
      transition: transform 0.1s ease-out;
    }
    @media (pointer: coarse) {
      .custom-cursor {
        display: none !important;
      }
      body, * {
        cursor: default !important;
      }
    }
  
  /* Fade-in effect for the page */
  body {
    opacity: 0;
    transition: opacity 1.5s ease-in;
  }
  body.loaded {
    opacity: 1;
  }
  /* Responsive adjustments for phone screens */
  @media (max-width: 480px) {
    /* Adjust the black square to let content flow naturally */
    .black-square {
      height: auto;
      padding: 0px 0;
    }
    
    /* Smaller cover title: reduced top margin and font size */
    .cover-title {
      margin-top: 250px;
      font-size: 64px;
      padding: 0 20px;
    }
    /* Scale down the cover image: use percentage width and auto height */
    .cover-image {
      width: 80%;
      height: auto;
      padding-top: 250px;
      margin: 50px auto 0;
    }
    /* For sections that were fixed width, use a percentage width and auto height */
    .context-section,
    .design-process-section,
    .intro-section,
    .problem-section,
    .goal-section,
    .contextual-inquiry-section,
    .user-types-section,
    .maps-section,
    .findings-section,
    .takeaway-section,
    .hmw-statement-section,
    .our-approach-section,
    .lowfi-prototype-section,
    .lowfi-proto-image-section,
    .final-section,
    .getstarted-section,
    .step1-section,
    .step2-section,
    .step3-section,
    .step4-section,
    .step5-section,
    .step6-9-section,
    .iron-recs-section,
    .styleguide-section {
      width: 90%;
      margin: 20px auto;
      height: auto;
    }
    /* Change design columns to stack vertically */
    .design-columns {
      flex-direction: column;
      gap: 20px;
      padding-left: 0;
    }
  
  }
  @media (max-width: 480px) {
    /* Make context through contextual inquiry sections responsive */
    .context-section,
    .design-process-section,
    .intro-section,
    .problem-section,
    .goal-section,
    .contextual-inquiry-section {
      height: 80%;
      width: 80%;
      margin: 60px auto;
      height: auto;
      padding: 10px; /* optional extra spacing within sections */
    }
    
    /* Adjust typography for headings and body text in these sections */
    .context-title,
    .section-title,
    .design-process-title,
    .contextual-inquiry-title {
      font-size: 70px; /* reduce heading size for small screens */
      padding: 0 10px; /* ensure some horizontal padding */
    }
    .section-text
    .context-text,
    .contextual-inquiry-text {
      font-size: 50px; /* reduce body text size */
      padding: 0 10px;
    }
    .context-text {
      font-size: 50px;
    }
    .section-text {
      font-size: 50px;
    }
    .design-column-title {
      font-size: 60px; /* reduce column title size */
      padding: 0 10px; /* ensure some horizontal padding */
    }
    .design-column-text {
      font-size: 50px; /* reduce column text size */
      padding: 0 10px; /* ensure some horizontal padding */
    }
    
  }
  @media (max-width: 480px) {
    .grey-background {
      height: 13000px !important;
    }
  }
  @media (max-width: 480px) {
    .user-types-section {
      gap: 200px;
    }
    /* Increase sizes of the boxes */
    .primary-overlay {
      width: 300px;    /* Increased from 200px */
      height: 300px;
    }
    .secondary-overlay {
      width: 300px;    /* Increased from 200px */
      height: 300px;
    }
    .excluded-overlay {
      width: 300px;    /* Increased from approx. 253px */
      height: 300px;   /* Increased from approx. 256px */
    }
    .primary-bg {
      width: 300px;    /* Increased from 200px */
      height: 300px;
    }
    
    .secondary-bg {
      width: 300px;    /* Increased from approx. 253px */
      height: 300px;   /* Increased from approx. 231px */
    }
    
    .excluded-bg {
      width: 300px;    /* Increased from approx. 253px */
      height: 300px;   /* Increased from approx. 256px */
    }
    
    .user-header {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2.8em; /* Adjust as needed */
      padding-left: 90px;
    }
    
    .user-subtitle {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2.4em;
      padding-left: 90px;
      padding-bottom: 30px; /* Adjust as needed */
      margin-top: -20px; /* Moves the subtitle upward; adjust this value as needed */
    }
    
    .maps-title {
      padding-top: 150px;
      font-size: 70px;
      width: 100%;
      text-align: center;
    }
  .maps-img{
    width: 60%;    /* Increase the width to make images larger */
    height: auto;   /* Maintain the aspect ratio */
    padding-top: 200px;
  }
  .maps-img-2 {
    padding-top: 450px;
    width: 50%;    /* Increase the width to make images larger */
    height: auto;   /* Maintain the aspect ratio */
    padding-top: 220px; 
    padding-left: 80px;/* Keeps your top padding as specified */
  }
  }
  /* Responsive adjustment for smaller screens */
  @media (max-width: 480px) {
    .findings-section {
      padding-top: 950px; /* Adjust as needed */
      overflow-x: auto;   /* Allow horizontal scrolling if needed */
    }
    .findings-title {
      font-size: 70px;
    }
    .findings-description {
      width: 1000px;
      font-size: 50px;
      margin: 20px -160px;
    }
  }
  @media (max-width: 480px) {
    /* Ensure the icons container is a flex container with centered items */
    .findings-icons {
      justify-content: center;
      gap: 70px; /* Adjust gap between icon boxes as needed */
    }
    
    /* Style each icon box to stack its content vertically and center them */
    .findings-icons .icon-box {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    /* Increase the emoji size and add spacing below */
    .findings-icons .icon-emoji {
      font-size: 200px;  /* Adjust as needed */
      margin-bottom: 10px;  /* Space between emoji and label */
    }
    
    /* Increase the label size and center the text */
    .findings-icons .icon-label {
      font-size: 50px;  /* Adjust as needed */
      text-align: center;
    }
  }
  /* Responsive adjustment for smaller screens */
  @media (max-width: 480px) {
    .takeaway-section {
      padding-top: 100px; /* Adjust as needed */
    }
    .takeaway-title {
      font-size: 70px;
    }
    .takeaway-text {
      font-size: 50px;
      padding: 0 10px;
  
    }
  }
  /* Responsive adjustment for smaller screens */
  @media (max-width: 480px) {
    .hmw-statement-section {
      padding-top: 50px; /* Adjust as needed */
    }
    .hmw-statement-title {
      font-size: 70px;
    }
    .hmw-statement-text {
      font-size: 50px;
      padding: 0 200px;
  
    }
  }
  /* Responsive adjustment for smaller screens */
  @media (max-width: 480px) {
    .our-approach-section {
      padding-top: 50px; /* Adjust as needed */
    }
    .our-approach-title {
      font-size: 70px;
    }
    .our-approach-text {
      font-size: 50px;
      padding: 0 200px;
  
    }
    .our-approach-bullets li {
      font-size: 50px;
    }
  }
  /* Responsive adjustment for smaller screens */
  @media (max-width: 480px) {
    .lowfi-prototype-section{
      font-size: 70px;
      padding-top: 50px; /* Adjust as needed */
    }
    .lowfi-prototype-section .section-title {
      font-size: 70px;
    }
    .lowfi-prototype-section .section-text{
      font-size: 50px;
    }
    .lowfi-proto-image {
      width: 100%;
      height: auto;
      padding-top: 50px;
    }
  }
  /* Responsive adjustment for smaller screens */
  @media (max-width: 480px) {
    .final-section {
      padding-top: 50px; /* Adjust as needed */
    }
    .final-section .section-title{
      font-size: 70px;
    }
    .final-section .section-text{
      font-size: 50px;
    }
  }
  @media (max-width: 480px) {
    /* Hide original multi-section layout */
    .original-sections {
      display: none !important;
    }
    
    /* Show the phone-only alternative layout */
    .phone-alt-layout {
      display: block !important;
      margin-top: 200px !important;  /* Extra top spacing */
    }
    
    /* Center the image and reduce its size */
    .phone-alt-layout img {
      display: block !important;
      margin: 0 auto !important;
      width: 80% !important;        /* Force a smaller image width */
      height: auto !important;       /* Force a smaller image height */
    }
    .styleguide-section {
      padding-top: 100px !important;
    }
  }
  @media (max-width: 480px) {
    .nextprojectwrapper {
      width: 90%;
      margin: 50px auto; /* Centers the wrapper and adds vertical spacing */
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px; /* Adjust gap as needed */
    }
    
    .nextprojectholder {
      width: 100%;
      display: flex;
      flex-direction: row;  /* Arrange text and arrow side by side */
      align-items: center;
      justify-content: center; /* Center content horizontally */
      padding: 20px;
      text-align: center;
    }
    
    /* Container for the text blocks and arrow */
    .div-block-405 {
      display: flex;
      flex-direction: row;   /* Place text and arrow on the same line */
      align-items: center;
      margin-top: 40px;
      gap: 20px;             /* Adjust gap between text and arrow */
      width: auto;           /* Let the container size based on its content */
    }
    
    .text-block-105 {
      font-size: 70px;  /* Adjust heading size for smaller screens */
    }
    
    .text-block-106 {
      font-size: 60px;  /* Adjust subheading size for smaller screens */
    }
    
    .image-145 {
      width: 80px;      /* Adjust arrow image size */
      height: auto;
      margin-left: 20px; /* Space between text and arrow */
    }
  }
  @media (max-width: 480px) {
    .footer-section {
      width: 100%;
      padding: 20px;
    }
    
    .footer-content {
      gap: 15px;
    }
    
    .footer-title {
      font-size: 150px;      /* Adjust the heading size for small screens */
    }
    
    .footer-links {
      padding: 0;
      list-style: none;
      margin: 0;
    }
    
    .footer-links li {
      margin-bottom: 60px;
    }
    
    .contact-link {
      font-size: 90px;    /* Adjust the font size for better readability */
    }
    
    .footer-hr {
      width: 100%;
      border-top: 5px solid white; /* Increase the border thickness */
    }
    
    .footer-copyright {
      font-size: 60px;
      margin-top: 10px;
    }
  }
  /* When the screen is 480px or narrower, scale the entire page out */
  @media only screen and (max-width: 480px) {
    /* Adjust these numbers as needed based on your design width */
    #wrapper {
      transform: scale(.3);
      transform-origin: top left;
      /* Set the width of the container to match your design width.
         This prevents the wrapper from shrinking further. */
      width: 1400px;
    }
  }
  
  /* --- Force SF Pro everywhere --- */
  body, * {
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, system-ui, sans-serif !important;
  }
  
  /* --- All titles: semibold (600) --- */
  .context-title,
  .section-title,
  .design-process-title,
  .contextual-inquiry-title,
  .design-column-title,
  .findings-title,
  .takeaway-title,
  .hmw-statement-title,
  .our-approach-title,
  .lowfi-prototype-section .section-title,
  .final-section .section-title,
  .text-block-105,
  .text-block-106,
  .footer-title,
  .maps-title,
  .user-header {
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, system-ui, sans-serif !important;
    font-weight: 600 !important;
  }
  
  /* --- All other text: regular (400) --- */
  .context-text,
  .section-text,
  .design-column-text,
  .contextual-inquiry-text,
  .user-subtitle,
  .findings-description,
  .icon-label,
  .takeaway-text,
  .hmw-statement-text,
  .our-approach-text,
  .our-approach-bullets li,
  .lowfi-prototype-section .section-text,
  .final-section .section-text,
  .getstarted-text,
  .step1-text,
  .step2-text,
  .step3-text,
  .step4-text,
  .step5-text,
  .step6-text,
  .step7-text,
  .step8-text,
  .step9-text,
  .iron-recs-text,
  .footer-links li,
  .contact-link,
  .footer-copyright {
    font-family: "SF Pro Text", "SF Pro Display", -apple-system, system-ui, sans-serif !important;
    font-weight: 400 !important;
  }
  @media only screen and (max-width: 1024px) {
    .label,
    .value {
      font-size: 50px; /* adjust as needed */
    }
  }
  @media only screen and (max-width: 480px) {
    .scroll-down-image {
      display: none !important;
    }
  }
  @media only screen and (max-width: 480px) {
    #content-wrapper {
      margin-top: 400px; /* You can increase or decrease this value as needed */
    }
  }
  .getstarted-text {
    color: black;
  }
  /* ==============================
     FOOTER STYLES (100px below VIEW TAKOMO)
     ============================== */
     footer {
      position: relative;
      width: 80%;
      margin: 100px auto 40px;  /* 100px above, auto sides, 40px below */
      padding-top: 30px;
    }
    
    footer::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background-color: black;
    }
    
    .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
    }
    
    .footer-content p {
      margin: 0;
      font-size: 16px;
      font-weight: 100;
      font-family:
        "SF Pro Text",
        "SF Pro Display",
        -apple-system,
        system-ui,
        sans-serif;
      color: black;
    }
    
    .footer-content a {
      color: black;
      text-decoration: none;
    }
    
    .footer-content a:hover {
      text-decoration: underline;
    }
    
    .footer-logo {
      width: 32px;
      height: auto;
    }
    /* Smooth enlarge on hover for the LinkedIn logo in the footer */
  .footer-logo {
    width: 32px;               /* your existing size */
    height: auto;
    transition: transform 0.3s ease-in-out;
    transform-origin: center;
  }
  
  .footer-logo:hover {
    transform: scale(1.2);     /* adjust scale factor as desired */
  }