/* ======================================== */
/* RESPONSIVE DESIGN */
/* ======================================== */
/* 1rem = 1em = 16px  */

/* Target: Smaller Desktops / Large Tablets (Below 1200px) */
/* Adjustments: Reduce gaps, slightly smaller fonts if needed */
@media (max-width: 75em) {
  .nav-header .logo-section .nav--blockquote {
    font-size: 1.4rem; /* Slightly smaller quote */
  }

  .nav-header {
    gap: 0;
    padding: 1rem 2.4rem;
  }

  .nav--blockquote {
    font-size: 1.2rem;
  }
  .hero--section .operations__content .operation--info h6 {
    font-size: 4rem;
  }
  .hero--section .operations__content .operation--info p {
    font-size: 1.8rem;
    margin-bottom: 2.4rem;
  }

  .about {
    text-align: center;
    margin-bottom: 0;
    font-size: 2.8rem; /* Slightly smaller */
  }

  .reference-grid {
    gap: 3.2rem; /* Reduce gap */
    grid-template-columns: repeat(2, 300px);
    justify-content: center;
  }

  .leh--section .leh--heading h1 {
    font-size: 3.6rem;
  }

  /* Measurement Section & Gallery Section */
  .measurement--section,
  .gallery--section {
    padding: 4.8rem 6.4rem;
  }

  .measurement--section .measurement--heading,
  .gallery--section h1 {
    font-size: 3rem;
  }

  .grid-footer {
    gap: 4.8rem; /* Reduce gap */
  }

  .alert p {
    font-size: 1.2rem;
    padding: 0 1rem;
  }

  /* General font size reduction for html root can be useful */
  html {
    /* font-size: 56.25%; */ /* Example: 9px base instead of 10px */
    /* Uncomment and adjust if needed for overall scaling */
  }
}

/* Target: Tablets (Below 944px) */
/* Adjustments: 4-cols -> 2-cols, Header might stack, Hero content stacks */
@media (max-width: 59em) {
  /* Make 4-column grids into 2-column grids */
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 6.4rem; /* Add row gap as items stack vertically */
  }

  /* Make 2-column grids into 1-column grids */
  .grid--2-cols {
    grid-template-columns: 1fr;
  }

  /* Header adjustments */
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Center header items */
    padding: 1rem 2.4rem;
    gap: 0rem;
  }
  .nav-header .logo-section {
    /* Stack logo and quote if needed, or just adjust alignment */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    text-align: center;
  }
  .nav-header .logo-section .nav--blockquote {
    /* OR adjust font size drastically */
    font-size: 0.9rem;
    /* margin-top: 0.5rem;*/
  }

  .nav-header .logo-section .book-logo {
    font-size: 2.4rem;
  }

  .nav-header .logo-section .logo-link {
    font-size: 2.4rem;
  }

  /* Hero Section */
  .hero--section .operations__tab-container {
    /* Allow tabs to wrap if needed */
    flex-wrap: wrap;
    justify-content: center; /* Center tabs */
    gap: 0.8rem;
  }

  .hero--section .operations__content .operation--info {
    order: 2; /* Put text below image */
    text-align: center;
  }
  .hero--section .operations__content .operations--img--1,
  .hero--section .operations__content .operations--img--3,
  .hero--section .operations__content .operations--img--4 {
    order: 1; /* Put image above text */
    height: 600px; /* Adjust image height if needed */
  }

  .welcome--user {
    text-align: left;
    font-size: 3rem;
    padding: 4.8rem 6.4rem 0;
  }

  /* About Text */
  /* .about {
    font-size: 2rem;
    padding: 0 3.2rem; 
  } */

  /* Reference Section */
  .reference-grid {
    gap: 4.8rem; /* Adjust gap */
    padding: 0 6.4rem;
  }

  /* LEH Section */
  .leh--section .leh--info {
    padding: 3.2rem; /* Add padding */
  }

  .leh--section {
    padding: 4.8rem 6.4rem; /* Add padding */
  }

  .leh--section .leh--heading .leh--title {
    font-size: 1.4rem;
  }
  .leh--section .leh--heading h1 {
    font-size: 2.4rem;
  }

  .leh--section .leh--info .leh--description {
    font-size: 1.6rem;
  }

  /* Measurement Section */
  .measurement--section,
  .gallery--section {
    padding: 4.8rem 6.4rem;
  }

  .idw--img,
  .cmtd--img {
    height: 400px;
  }

  .measurement--section .measurement--container {
    text-align: center;
  }
  /* Ensure images are above text */
  .measurement--section .idw--img {
    order: 1;
  }
  .measurement--section .measurement--container:nth-child(2) {
    order: 2;
  } /* IDW Text */
  .measurement--section .measurement--container:nth-child(3) {
    order: 4;
  } /* CMTD Text */
  .measurement--section .cmtd--img {
    order: 3;
  }

  .about {
    padding: 2rem 6.4rem;
  }

  /* Resources Section */
  .resources--section {
    padding: 4.8rem 6.4rem; /* Add padding */
  }
  .resource--container {
    gap: 4.8rem; /* Adjust gap */
  }
  .resource {
    padding: 3.2rem; /* Adjust padding */
  }

  /* Footer */
  .grid-footer {
    padding: 6.4rem 4.8rem; /* Adjust padding */
    row-gap: 4.8rem;
  }
  .copyright--section {
    gap: 2.4rem;
    padding: 2.4rem 6.4rem;
  }

  .webpage-brief-col {
    order: 1;
  }

  .webpage-brief-col:nth-child(2) {
    order: 2;
  }

  .webpage-brief-col:nth-child(4) {
    order: 3;
  }

  .webpage-brief-col:nth-child(3) {
    order: 3;
  }

  .gallery--section,
  .gallery--title {
    margin-top: 0;
    margin-bottom: 0;
  }

  .view--all {
    margin-top: 1.2rem;
    padding-bottom: 4rem;
  }

  .carousel-item {
    height: 100%;
  }
}

/* Target: Large Mobile / Small Tablets (Below 700px) */
/* Adjustments: Most grids -> 1-col, Header stacks, Footer stacks */
@media (max-width: 43.75em) {
  /* Make remaining 2-column grids into 1-column */

  /* Further reduce gaps */
  .reference-grid,
  .resource--container,
  .grid-footer {
    gap: 3.2rem;
    row-gap: 4.8rem;
  }

  /* Header */
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Center header items */
    padding: 1rem 2.4rem;
    gap: 0rem;
  }
  .nav-header .logo-section .book-logo {
    font-size: 2.4rem;
  }

  .nav-header .logo-section .logo-link {
    font-size: 2.4rem;
  }

  /* Hero Section */

  .hero--section .operations__tab-container {
    gap: 0.5rem;
  }
  .hero--section .operations__tab-container .btn--tabs {
    padding: 1rem 1.2rem;
    font-size: 1.2rem;
  }

  .hero--section .operations__content .operation--info h6 {
    font-size: 2.2rem;
  }
  .hero--section .operations__content .operation--info p {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
  }
  .hero--section .operations__content .btn--primary {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }

  .hero--section .operations__content .operation--info {
    order: 2; /* Put text below image */
    text-align: center;
  }
  .hero--section .operations__content .operations--img--1,
  .hero--section .operations__content .operations--img--3,
  .hero--section .operations__content .operations--img--4 {
    order: 1; /* Put image above text */
    height: 550px; /* Adjust image height if needed */
  }

  .welcome--user {
    text-align: left;
    font-size: 2.4rem;
    padding: 4.8rem 2.6rem 0;
  }

  /* About Text */
  .about {
    font-size: 1.8rem;
    line-height: 1.6;
    padding: 2rem 1.6rem;
  }

  .reference {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }

  .reference-grid {
    gap: 4.8rem;
    padding: 0 6.4rem;
    row-gap: 3.2rem;
  }

  .reference-img {
    height: 100px;
  }
  .reference--book-1::after {
    top: -78%;
    right: -20%;
    text-align: center;
    font-size: 1rem;
    padding: 0.5rem 1.7rem;
  }

  /* LEH Section */
  .leh--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }

  .leh--section .leh--heading .leh--title {
    font-size: 1.4rem;
  }
  .leh--section .leh--info {
    padding: 1.6rem;
  }
  .leh--section .leh--info .leh--description {
    font-size: 1.6rem;
  }
  .leh--section .leh--heading h1 {
    font-size: 3rem;
  }

  /* Measurement Section */
  .measurement--section,
  .gallery--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }

  .measurement--section .measurement--heading {
    font-size: 2.4rem;
  }
  .measurement--section .idw--img,
  .measurement--section .cmtd--img {
    height: 30rem; /* Adjust image height */
  }

  .measurement--section .measurement--container {
    text-align: center;
  }
  /* Ensure images are above text */
  .measurement--section .idw--img {
    order: 1;
  }
  .measurement--section .measurement--container:nth-child(2) {
    order: 2;
  } /* IDW Text */
  .measurement--section .measurement--container:nth-child(3) {
    order: 4;
  } /* CMTD Text */
  .measurement--section .cmtd--img {
    order: 3;
  }

  /* Resources Section */
  .resources--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }
  .resource--heading {
    font-size: 3rem;
  }
  .resource h4 {
    font-size: 1.8rem;
  }

  /* Footer */
  .grid-footer {
    padding: 4.8rem 3.2rem; /* Adjust padding */
    text-align: center; /* Center footer columns */
  }
  .grid-footer div {
    justify-self: center; /* Center content within columns */
  }
  .grid-footer ul {
    justify-content: center; /* Center social icons if needed */
  }
  .rwd--extra--on--footer {
    padding-top: 2rem;
  }
  .copyright--section .copyright-box {
    text-align: center;
    border-top: 1px solid var(--slb-grey-5);
    padding-top: 2rem; /* Add top border */
    display: block;
  }
  .copyright--section .extras--on--footer {
    justify-content: center; /* Center footer links */
  }

  .copyright--section {
    flex-direction: column-reverse;
  }

  .webpage-brief-col {
    border-bottom: 1px solid var(--slb-grey-1);
  }

  .footer--logo {
    justify-content: center;
  }

  .webpage-brief-col {
    border-bottom: none;
    order: 1;
  }

  .extras--on--footer a:link,
  .extras--on--footer a:visited {
    font-weight: 400;
    font-size: 1.1rem;
  }

  .alert p {
    font-size: 1.1rem;
    padding: 0 1rem;
  }
}

/* Target: Mobile (Below 550px) */
/* Adjustments: Fine-tune fonts, padding, margins */
@media (max-width: 34em) {
  html {
    /* font-size: 50%; */ /* Example: 8px base */
    /* Uncomment and adjust if needed for smallest screens */
  }

  /* Header */
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Center header items */
    padding: 1rem 2.4rem;
    gap: 0rem;
  }
  .nav-header .logo-section .book-logo {
    font-size: 2.4rem;
  }
  .nav-header .logo-section .logo-link {
    font-size: 2rem;
  }

  /* Hero Section */
  .hero--section .operations__tab-container {
    gap: 0.5rem;
  }
  .hero--section .operations__tab-container .btn--tabs {
    padding: 1rem 1.2rem;
    font-size: 1.2rem;
  }

  .hero--section .operations__content .operation--info h6 {
    font-size: 2.2rem;
  }
  .hero--section .operations__content .operation--info p {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
  }
  .hero--section .operations__content .btn--primary {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }

  .hero--section .operations__content .operation--info {
    order: 2; /* Put text below image */
    text-align: center;
  }
  .hero--section .operations__content .operations--img--1,
  .hero--section .operations__content .operations--img--3,
  .hero--section .operations__content .operations--img--4 {
    order: 1;
    height: 250px;
  }

  .welcome--user {
    text-align: left;
    font-size: 2.4rem;
    padding: 4.8rem 1.6rem 0;
  }

  /* About Text */
  .about {
    font-size: 1.6rem;
    padding: 2rem 1.6rem;
  }

  /* Reference Section */
  .reference-section .main--title {
    font-size: 2rem;
  }
  .reference-grid {
    gap: 4.8rem;
    padding: 0 6.4rem;
    row-gap: 3.2rem;
  }
  .reference .reference-title {
    font-size: 1.6rem;
  }

  /* LEH Section */
  .leh--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }

  .leh--section .leh--heading .leh--title {
    font-size: 1.4rem;
  }
  .leh--section .leh--heading h1 {
    font-size: 2.4rem;
  }
  .leh--section .leh--info {
    padding: 1.6rem;
  }
  .leh--section .leh--info .leh--description {
    font-size: 1.6rem;
  }

  /* Measurement Section */
  .measurement--section,
  .gallery--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }
  .measurement--section .measurement--heading {
    font-size: 2rem;
  }
  .measurement--section p {
    font-size: 1.4rem;
  }

  /* Measurement Section */
  .measurement--section .measurement--container {
    text-align: center;
  }
  /* Ensure images are above text */
  .measurement--section .idw--img {
    order: 1;
  }
  .measurement--section .measurement--container:nth-child(2) {
    order: 2;
  } /* IDW Text */
  .measurement--section .measurement--container:nth-child(3) {
    order: 4;
  } /* CMTD Text */
  .measurement--section .cmtd--img {
    order: 3;
  }

  /* Refererence Section */
  .reference {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  .reference-img {
    height: 100px;
  }
  .reference--book-1::after {
    top: -79%;
    right: -20%;
    text-align: center;
    font-size: 0.8rem;
    padding: 0.5rem 1.7rem;
  }

  /* Resources Section */
  .resources--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }
  .resource--heading {
    font-size: 2.4rem;
  }
  .resource {
    padding: 2.4rem;
  }
  .resource .resource--title {
    font-size: 1.2rem;
  }
  .resource h4 {
    font-size: 1.6rem;
  }
  .resource .view--bg {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }

  /* Footer */
  .grid-footer {
    padding: 3.2rem 1.6rem; /* Adjust padding */
    gap: 2.4rem;
    row-gap: 3.2rem;
  }
  .grid-footer h3 {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .grid-footer li a {
    font-size: 1.4rem;
  }

  .copyright--section {
    flex-direction: column-reverse;
  }
  .copyright--section .copyright {
    font-size: 1.2rem;
  }

  .copyright--section .extras--on--footer a,
  .copyright--section .extras--on--footer .my-social--link {
    font-size: 2rem; /* Adjust icon/link size */
  }

  .footer--logo {
    justify-content: center;
  }

  .webpage-brief-col {
    border-bottom: none;
    order: 1;
  }

  .extras--on--footer a:link,
  .extras--on--footer a:visited {
    font-weight: 400;
    font-size: 1.1rem;
  }
}

/* Target: Small Mobile (Below 480px) */
/* Adapted from 29em styles */
@media (max-width: 30em) {
  html {
    /* font-size: 50%; */ /* Example: 8px base */
    /* Consider uncommenting/adjusting if needed for very small screens */
  }

  /* Header */
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Center header items */
    padding: 1rem 2.4rem;
    gap: 0rem;
  }
  .nav-header .logo-section .book-logo {
    font-size: 2rem;
  }
  .nav-header .logo-section .logo-link {
    font-size: 2.5rem;
  }

  .nav--blockquote {
    display: none; /* Keep hidden */
  }

  /* .nav--extras a:link,
    .nav--extras a:visited {
      font-size: 2rem;
    } */

  /* Hero Section */
  .hero--section .operations__tab-container {
    gap: 0.5rem;
  }
  .hero--section .operations__tab-container .btn--tabs {
    padding: 1rem 1.2rem;
    font-size: 1.2rem;
  }

  .hero--section .operations__content .operation--info h6 {
    font-size: 2.2rem;
  }
  .hero--section .operations__content .operation--info p {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
  }
  .hero--section .operations__content .btn--primary {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }

  .hero--section .operations__content .operation--info {
    order: 2; /* Put text below image */
    text-align: center;
  }
  .hero--section .operations__content .operations--img--1,
  .hero--section .operations__content .operations--img--3,
  .hero--section .operations__content .operations--img--4 {
    order: 1;
    height: 250px;
  }

  .welcome--user {
    text-align: left;
    font-size: 2.2rem;
    padding: 4.8rem 1.6rem 0;
    color: var(--slb-white);
  }

  /* About Text */
  .about {
    font-size: 1rem;
    padding: 1rem 1.6rem;
    text-wrap: balance;
  }

  /* Reference Section */
  .reference--section {
    background-color: var(--slb-aqua-blue);
    padding-bottom: 8rem;
  }
  .reference {
    display: flex;
    align-items: center;
    color: var(--slb-white);
    padding-top: 1rem;
    box-shadow: none;
  }

  .reference-section .main--title {
    font-size: 2rem; /* Keep size from 29em */
  }
  .reference-grid {
    padding: 0 1.6rem; /* Keep padding from 29em */
    gap: 2.4rem; /* Keep gap from 29em */
    row-gap: 3.2rem; /* Keep row-gap from 29em */
    /* --- ADJUSTED for 350px --- */
    width: auto; /* Changed from fixed 400px to prevent overflow */
    /* height: 300px; */ /* Removed fixed height */
  }
  .reference .reference-title {
    font-size: 1.6rem; /* Keep size from 29em */
  }

  .reference-img {
    display: none; /* Keep hidden as per 29em */
    /* width: 100%; */ /* Not needed if display: none */
    /* height: 100%; */ /* Not needed if display: none */
  }

  .reference-link:link,
  .reference-link:visited {
    color: var(--slb-white);
  }
  .reference-link:hover,
  .reference-link:active {
    text-decoration: none;
  }

  .reference:hover p,
  .reference:focus p {
    color: var(--slb-aqua-blue);
  }

  .reference-grid {
    padding: 0 2.4rem;
    gap: 2.4rem;
    width: auto;
  }

  .reference-content {
    padding: 0;
  }

  .reference--book-1::after {
    top: -39%;
    right: -31%;
    text-align: center;
    font-size: 0.6rem;
    padding: 0.5rem 1.7rem; /* Keep padding from 29em */
  }

  /* LEH Section */
  .leh--section {
    padding: 4.8rem 2.4rem; /* Keep padding from 29em */
  }

  .leh--section .leh--heading .leh--title {
    font-size: 1.4rem; /* Keep size from 29em */
  }
  .leh--section .leh--heading h1 {
    font-size: 2.4rem; /* Keep size from 29em */
  }
  .leh--section .leh--info {
    padding: 1.6rem; /* Keep padding from 29em */
  }
  .leh--section .leh--info .leh--description {
    font-size: 1.6rem; /* Keep size from 29em */
  }

  .leh--img {
    background-size: 420px;
  }

  /* Measurement Section */
  .measurement--section,
  .gallery--section {
    padding: 4.8rem 2.4rem; /* Keep padding from 29em */
  }
  .measurement--section .measurement--heading {
    font-size: 2rem; /* Keep size from 29em */
  }
  .measurement--section p {
    font-size: 1.4rem; /* Keep size from 29em */
  }

  .measurement--section .measurement--container {
    text-align: center; /* Keep alignment from 29em */
  }
  /* Ensure images are above text */
  .measurement--section .idw--img {
    order: 1;
  }
  .measurement--section .measurement--container:nth-child(2) {
    order: 2;
  } /* IDW Text */
  .measurement--section .measurement--container:nth-child(3) {
    order: 4;
  } /* CMTD Text */
  .measurement--section .cmtd--img {
    order: 3;
  }

  .measurement--container {
    padding: 4rem 1.6rem; /* Keep padding from 29em */
  }

  .grid--4-cols {
    grid-template-columns: 1fr;
  }

  /* Resources Section */
  .resources--section {
    padding: 4.8rem 2.4rem; /* Keep padding from 29em */
  }
  .resource--heading {
    font-size: 2.4rem; /* Keep size from 29em */
  }
  .resource {
    padding: 2.4rem; /* Keep padding from 29em */
  }
  .resource .resource--title {
    font-size: 1.2rem; /* Keep size from 29em */
  }
  .resource h4 {
    font-size: 1.6rem; /* Keep size from 29em */
  }
  .resource .view--bg {
    font-size: 1.4rem; /* Keep size from 29em */
    padding: 0.8rem 1.6rem; /* Keep padding from 29em */
  }

  /* Footer */
  .grid-footer {
    padding: 3.2rem 1.6rem; /* Keep padding from 29em */
    gap: 2.4rem; /* Keep gap from 29em */
    row-gap: 3.2rem; /* Keep row-gap from 29em */
  }
  .grid-footer h3 {
    font-size: 1.6rem; /* Keep size from 29em */
    margin-bottom: 1.6rem; /* Keep margin from 29em */
  }
  .grid-footer li a {
    font-size: 1.4rem; /* Keep size from 29em */
  }

  .copyright--section {
    flex-direction: column-reverse; /* Keep direction from 29em */
  }
  .copyright--section .copyright {
    font-size: 1.2rem; /* Keep size from 29em */
  }

  .copyright--section .extras--on--footer a,
  .copyright--section .extras--on--footer .my-social--link {
    font-size: 2rem; /* Keep size from 29em */
  }

  .footer--logo {
    justify-content: center; /* Keep alignment from 29em */
  }

  .webpage-brief-col {
    border-bottom: none; /* Keep border from 29em */
    order: 1; /* Keep order from 29em */
  }

  .social-links {
    gap: 1rem;
  }

  .extras--on--footer a:link,
  .extras--on--footer a:visited {
    font-weight: 400;
    font-size: 1.1rem;
  }

  .alert p {
    font-size: 1rem;
    padding: 0 0.8rem;
  }
}

/* Target: Small Mobile (Below 464px) */
@media (max-width: 29em) {
  html {
    /* font-size: 50%; */ /* Example: 8px base */
    /* Uncomment and adjust if needed for smallest screens */
  }

  /* Header */
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Center header items */
    padding: 1rem 2.4rem;
    gap: 0rem;
  }
  .nav-header .logo-section .book-logo {
    font-size: 2rem;
  }
  .nav-header .logo-section .logo-link {
    font-size: 2.5rem;
  }

  .nav--blockquote {
    display: none;
  }

  /* .nav--extras a:link,
  .nav--extras a:visited {
    font-size: 2rem;
  } */

  /* Hero Section */
  .hero--section .operations__tab-container {
    gap: 0.5rem;
  }
  .hero--section .operations__tab-container .btn--tabs {
    padding: 1rem 1.2rem;
    font-size: 1.2rem;
  }

  .hero--section .operations__content .operation--info h6 {
    font-size: 2.2rem;
  }
  .hero--section .operations__content .operation--info p {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
  }
  .hero--section .operations__content .btn--primary {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }

  .hero--section .operations__content .operation--info {
    order: 2; /* Put text below image */
    text-align: center;
  }
  .hero--section .operations__content .operations--img--1,
  .hero--section .operations__content .operations--img--3,
  .hero--section .operations__content .operations--img--4 {
    order: 1;
    height: 250px;
  }

  /* About Text */
  .about {
    font-size: 1rem;
    padding: 1rem 1.6rem;
    text-wrap: balance;
  }

  /* Reference Section */

  .reference {
    display: flex;
    align-items: center;
  }

  .reference-section .main--title {
    font-size: 2rem;
  }
  .reference-grid {
    padding: 0 2.4rem; /* Add padding to container */
  }
  .reference .reference-title {
    font-size: 1.6rem;
  }

  .reference-img {
    display: none;
    width: 100%;
    height: 100%;
  }

  /* LEH Section */
  .leh--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }

  .leh--section .leh--heading .leh--title {
    font-size: 1.4rem;
  }
  .leh--section .leh--heading h1 {
    font-size: 2.4rem;
  }
  .leh--section .leh--info {
    padding: 1.6rem;
  }
  .leh--section .leh--info .leh--description {
    font-size: 1.6rem;
  }

  .leh--img {
    background-size: 500px;
  }

  /* Measurement Section */
  .measurement--section,
  .gallery--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }
  .measurement--section .measurement--heading,
  .gallery--section h1 {
    font-size: 2rem;
  }
  .measurement--section p {
    font-size: 1.4rem;
  }

  /* Measurement Section */
  .measurement--section .measurement--container {
    text-align: center;
  }
  /* Ensure images are above text */
  .measurement--section .idw--img {
    order: 1;
  }
  .measurement--section .measurement--container:nth-child(2) {
    order: 2;
  } /* IDW Text */
  .measurement--section .measurement--container:nth-child(3) {
    order: 4;
  } /* CMTD Text */
  .measurement--section .cmtd--img {
    order: 3;
  }

  .measurement--container {
    padding: 4rem 1.6rem;
  }

  /* Refererence Section */
  .reference {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }
  .reference-img {
    height: 100px;
  }

  .reference--book-1::after {
    top: -55%;
    right: -43%;
    text-align: center;
    font-size: 0.5rem;
    padding: 0.5rem 1.7rem;
  }

  /* Resources Section */
  .resources--section {
    padding: 4.8rem 2.4rem; /* Add padding */
  }
  .resource--heading {
    font-size: 2.4rem;
  }
  .resource {
    padding: 2.4rem;
  }
  .resource .resource--title {
    font-size: 1.2rem;
  }
  .resource h4 {
    font-size: 1.6rem;
  }
  .resource .view--bg {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }

  /* Footer */
  .grid-footer {
    padding: 3.2rem 1.6rem; /* Adjust padding */
    gap: 2.4rem;
    row-gap: 3.2rem;
  }
  .grid-footer h3 {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
  }
  .grid-footer li a {
    font-size: 1.4rem;
  }

  .copyright--section {
    flex-direction: column-reverse;
  }
  .copyright--section .copyright {
    font-size: 1.2rem;
  }

  .copyright--section .extras--on--footer a,
  .copyright--section .extras--on--footer .my-social--link {
    font-size: 2rem; /* Adjust icon/link size */
  }

  .footer--logo {
    justify-content: center;
  }

  .webpage-brief-col {
    border-bottom: none;
    order: 1;
  }

  .extras--on--footer a:link,
  .extras--on--footer a:visited {
    font-weight: 400;
    font-size: 1.1rem;
  }
}

/* Target: Small Mobile (Below 350px) */
/* Adapted from 29em styles */
@media (max-width: 22.5em) {
  html {
    /* font-size: 50%; */ /* Example: 8px base */
    /* Consider uncommenting/adjusting if needed for very small screens */
  }

  /* Header */
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Center header items */
    padding: 1rem 2.4rem;
    gap: 0rem;
  }
  .nav-header .logo-section .book-logo {
    font-size: 2rem;
  }
  .nav-header .logo-section .logo-link {
    font-size: 2.5rem;
  }

  .nav--blockquote {
    display: none; /* Keep hidden */
  }

  /* .nav--extras a:link,
    .nav--extras a:visited {
      font-size: 2rem;
    } */

  /* Hero Section */
  .hero--section .operations__tab-container {
    gap: 0.5rem;
  }
  .hero--section .operations__tab-container .btn--tabs {
    padding: 1rem 1.2rem;
    font-size: 1.2rem;
  }

  .hero--section .operations__content .operation--info h6 {
    font-size: 2.2rem;
  }
  .hero--section .operations__content .operation--info p {
    font-size: 1.8rem;
    margin-bottom: 1.6rem;
  }
  .hero--section .operations__content .btn--primary {
    font-size: 1.4rem;
    padding: 0.8rem 1.6rem;
  }

  .hero--section .operations__content .operation--info {
    order: 2; /* Put text below image */
    text-align: center;
  }
  .hero--section .operations__content .operations--img--1,
  .hero--section .operations__content .operations--img--3,
  .hero--section .operations__content .operations--img--4 {
    order: 1;
    height: 250px;
  }

  /* About Text */
  .about {
    font-size: 1rem;
    padding: 1rem 2.4rem;
    text-wrap: balance;
  }

  /* Reference Section */
  .reference {
    display: flex;
    align-items: center;
  }

  .reference-section .main--title {
    font-size: 2rem; /* Keep size from 29em */
  }

  .reference .reference-title {
    font-size: 1.6rem; /* Keep size from 29em */
  }

  .reference-img {
    display: none; /* Keep hidden as per 29em */
    /* width: 100%; */ /* Not needed if display: none */
    /* height: 100%; */ /* Not needed if display: none */
  }

  /* LEH Section */
  .leh--section {
    padding: 4.8rem 2.4rem; /* Keep padding from 29em */
  }

  .leh--section .leh--heading .leh--title {
    font-size: 1.4rem; /* Keep size from 29em */
  }
  .leh--section .leh--heading h1 {
    font-size: 2.4rem; /* Keep size from 29em */
  }
  .leh--section .leh--info {
    padding: 1.6rem; /* Keep padding from 29em */
  }
  .leh--section .leh--info .leh--description {
    font-size: 1.6rem; /* Keep size from 29em */
  }

  .leh--img {
    background-size: 420px;
  }

  /* Measurement Section */
  .measurement--section,
  .gallery--section {
    padding: 4.8rem 2.4rem; /* Keep padding from 29em */
  }
  .measurement--section .measurement--heading,
  .gallery--section h1 {
    font-size: 2rem; /* Keep size from 29em */
  }
  .measurement--section p {
    font-size: 1.4rem; /* Keep size from 29em */
  }

  .measurement--section .measurement--container {
    text-align: center; /* Keep alignment from 29em */
  }
  /* Ensure images are above text */
  .measurement--section .idw--img {
    order: 1;
  }
  .measurement--section .measurement--container:nth-child(2) {
    order: 2;
  } /* IDW Text */
  .measurement--section .measurement--container:nth-child(3) {
    order: 4;
  } /* CMTD Text */
  .measurement--section .cmtd--img {
    order: 3;
  }

  .measurement--container {
    padding: 4rem 2.4rem; /* Keep padding from 29em */
  }

  /* Reference Section (Pseudo-element) */
  .reference {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Keep shadow from 29em */
  }
  /* .reference-img height was already display: none */

  .reference--book-1::after {
    top: -53%;
    right: -42%;
    text-align: center;
    font-size: 0.5rem;
    padding: 0.5rem 1.7rem;
  }

  /* Resources Section */
  .resources--section {
    padding: 4.8rem 2.4rem; /* Keep padding from 29em */
  }
  .resource--heading {
    font-size: 2.4rem; /* Keep size from 29em */
  }
  .resource {
    padding: 2.4rem; /* Keep padding from 29em */
  }
  .resource .resource--title {
    font-size: 1.2rem; /* Keep size from 29em */
  }
  .resource h4 {
    font-size: 1.6rem; /* Keep size from 29em */
  }
  .resource .view--bg {
    font-size: 1.4rem; /* Keep size from 29em */
    padding: 0.8rem 2.4rem; /* Keep padding from 29em */
  }

  /* Footer */
  .grid-footer {
    padding: 3.2rem 2.4rem; /* Keep padding from 29em */
    gap: 2.4rem; /* Keep gap from 29em */
    row-gap: 3.2rem; /* Keep row-gap from 29em */
  }
  .grid-footer h3 {
    font-size: 1.6rem; /* Keep size from 29em */
    margin-bottom: 1.6rem; /* Keep margin from 29em */
  }
  .grid-footer li a {
    font-size: 1.4rem; /* Keep size from 29em */
  }

  .copyright--section {
    flex-direction: column-reverse; /* Keep direction from 29em */
  }
  .copyright--section .copyright {
    font-size: 1.2rem; /* Keep size from 29em */
  }

  .copyright--section .extras--on--footer a,
  .copyright--section .extras--on--footer .my-social--link {
    font-size: 2rem; /* Keep size from 29em */
  }

  .footer--logo {
    justify-content: center; /* Keep alignment from 29em */
  }

  .webpage-brief-col {
    border-bottom: none; /* Keep border from 29em */
    order: 1; /* Keep order from 29em */
  }

  .social-links {
    gap: 1rem;
  }

  .extras--on--footer a:link,
  .extras--on--footer a:visited {
    font-weight: 400;
    font-size: 1.1rem;
  }
}