h2 {
    font-family: var(--font-display);
    font-size: 2rem; /* Matches global h2 styles */
    font-weight: 500;
    line-height: 1.2;
    color: var(--black-color);
    text-align: left;
}
p {
    font-weight: 400;
    line-height: 1.625rem;
    color: var(--text-color);
    text-align: left;
    margin-bottom: 1rem;
}
ul {
    list-style: disc;
    margin-left: 1.5rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625rem;
    color: var(--text-color);
}
li {
    margin-bottom: 0.5rem;
}
/*==========Project Change Watcher Styles ==========*/
/*1- Header */
.header {
    border-bottom: 1px solid #0000001F
}

/* 2- Hero */
 .change-watcher-hero {
    margin-top: 80px;
    width: 100%;
    height: auto;
    padding: 120px 142px 44px 152px;
    background-color: var(--white-color);
 }
 .change-watcher-hero .container {
    display: flex;
    align-items: center;
    gap: 2rem;
  }
  .change-watcher-hero .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    flex: 1 0 0;
  }
  .change-watcher-hero .heading-overline .overline {
    color: var(--primary-color, #6366f1);
    font-family: var(--font-display, "SF Pro Display");
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    letter-spacing: 0.0625rem;
    text-transform: uppercase;
  }
  
  .change-watcher-hero .heading-overline .heading {
    color: var(--Neutral-900, #111827);
    font-family: "SF Pro";
    font-size: 3.25rem;
    font-weight: 760;
    line-height: 3.5rem;
    letter-spacing: -0.065rem;
  }
  
  .change-watcher-hero .supporting-text {
    color: #374151;
    font-family: "SF Pro Text";
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.75rem;
  }
  
  .change-watcher-hero .actions {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .change-watcher-hero .change-watcher-cta-button,
  .change-watcher-hero .button2 {
    display: flex;
    padding: 0.875rem 1.25rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    text-align: center;
    font-family: "Inter", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.125rem;
    box-shadow: 0px 2px 6px rgba(16, 24, 40, 0.06);
    text-decoration: none;
  }
  
  .change-watcher-hero .change-watcher-cta-button {
    background: var(--primary-color, #6366f1);
    color: var(--Generic-White, #FFF);
    border: 1px solid var(--primary-color, #6366f1);
  }
  
  .change-watcher-hero .change-watcher-cta-button:hover {
    background: #4b51e0;
  }
  
  .change-watcher-hero .button2 {
    background: var(--Primary-50, #3487FA);
    color: var(#ffffff);
    border: 1px solid var(--Primary-100, #E0E7FF);
    padding: 11px 16px;
  }
  
  .change-watcher-hero .button2:hover {
    background: #3d7bf0;
  }
  
  .change-watcher-hero .hero-image img {
    height: 20.40rem;
    flex: 1 0 0;
    border-radius: 3.125rem;
    object-fit: cover;
    background: lightgray;
  }

/* 3- Main */
  main {
    width: 100%;
    max-width: 1288px;
    margin: 12px auto 12px auto;
    padding: 0 152px;
    background-color: var(--white-color);

}


  /* Section 1: Project Details: Background, Challeng, Solution */

  .change-watcher-details-section {
    margin-top: 12px;
  }
  .project-details-and-image {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    max-width: 1288px;;
}
.project-details {
    max-width: 905px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.section-title {
    text-align: left;
    margin-bottom: 0.5rem;
}

.project-details ul {
    list-style: disc;
    margin-left: 1.5rem;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.625rem;
    color: var(--text-color);
}
.image-container {
    padding-top: 50px;
    padding-bottom: 24px;

}

.image-container img {
    top: 140px;
    position: sticky;
    border-radius: 0.5rem; /* Matches global border-radius 8px */
}

/* Section 2: Overall Process */
.overall-process {
    max-width: 1288px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border: 1px solid #0000001F;
    border-radius: 0.5rem;
}
  .process-image {
    width: 100%;
    height: auto;
    max-width: 1240px;
    border-radius: 0.5rem;
    object-fit: cover;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

    /* Section 3: Design Process */
.change-watcher-overall-process {
    margin: 12px 0;
    padding: 24px;
    border:1px solid #0000001F;
    border-radius: 0.5rem;
    max-width: 1288px;
}
.change-watcher-overall-process-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.change-watcher-research,
.change-watcher-ideation,
.change-watcher-solution-development,
.change-watcher-prototyping,
.change-watcher-user-testing {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid #0000001F;
    padding: 1rem;
    border-radius: 0.5rem;
}
.change-watcher-user-testing {
    flex-direction: row;
   
}
.change-watcher-user-testing div {
 width: 50%;
}
.change-watcher-research-images,
.change-watcher-ideation-images,
.change-watcher-solution-development-images,
.change-watcher-prototyping-images {
    display: flex;
    gap: 1rem;
    justify-content:flex-start;
    height: auto;
}
.change-watcher-research-images img,
.change-watcher-ideation-images img,
.change-watcher-prototyping-images img,
.change-watcher-solution-development-images img,
.change-watcher-user-testing img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
    object-fit: cover;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.impact-future-potential {
    padding-top: 24px;
}
.impact, 
.future-potential {
    padding: 1rem;
}
.explore-change-watcher-prototype {
    margin-top: 2rem;
    text-align: center;
}
.explore-change-watcher-prototype iframe {
    width: 100%;
    height: 750px;
    border-radius: 0.5rem;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
/* button */
.explore-change-watcher-prototype a.explore-prototype {
    background-color: #3487FA;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    width: 40%;
}  
.explore-change-watcher-prototype a.explore-prototype:hover {
    background: #3d7bf0;
  } 

 /* ======================================
 Change Watcher Responsive Design
====================================== */
@media (max-width: 1106px) {
    main {
        padding: 0 24px;
    }
    .change-watcher-hero .actions {
        flex-direction: column;
        width: 100%;
    }
    .change-watcher-hero .change-watcher-cta-button {
        width: 100%;
    }
}
@media (max-width: 908px) {
    .change-watcher-hero .hero-image {
        display: none;
    }
}
@media (max-width: 740px) {
    .change-watcher-hero {
        padding: 44px;
    }
    .change-watcher-hero .actions {
        flex-direction: row;
        width: 100%;
    }
    .change-watcher-hero .change-watcher-cta-button {
        width: 100%;
    }
    .explore-change-watcher-prototype iframe {
        width: 100%;
        height: 580px;
    }
}
@media (max-width: 700px) {
    .project-details-and-image {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 24px;
        padding: 24px;
        max-width: 1288px;;
    }
    .image-container {
        padding: 12px;
    }
    .image-container img {
        border: 1px solid #0000001F;
        border-radius: 0.5rem; /* Matches global border-radius 8px */
    }
    .explore-change-watcher-prototype iframe {
        width: 100%;
        height: 540px;
    }
}
@media (max-width: 582px) {
    .change-watcher-hero .actions {
        flex-direction: column;
        width: 100%;
    }
    .change-watcher-hero .change-watcher-cta-button {
        width: 100%;
    }
    .explore-change-watcher-prototype iframe {
        width: 100%;
        height: 460px;
    }
    .explore-change-watcher-prototype a.explore-prototype {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
}
@media (max-width:500px) {
    .change-watcher-user-testing {
        flex-direction: column;
    }
    .change-watcher-user-testing div {
        width: 100%;
}

@media (max-width:440px) {
    .explore-change-watcher-prototype iframe {
        width: 100%;
        height: 360px;
    }
    .explore-change-watcher-prototype a.explore-prototype {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
}