/* (1) ===============================
   MacBook Pro 15" (1728 × 958)
   Fix: nav pill width/centering + footer hairline
================================== */
@media (max-width: 1728px) and (max-height: 958px) {
  :root {
    --nav-w: 32.5%;
    --h-ai: 340vh;
    --h-dsa: 290vh;
    --h-feature: 145vh;
    --h-prj: 300vh;
  }

  /* .section-feature {
    height: 145vh;
  }
  .ai-section {
    height: 340vh;
  }
  .dsa-section {
    height: 290vh;
  }
  .projects-section {
    height: 310vh;
  } */
}

/* (2) ===========================================================
   MacBook PRO 14": 1512 × 982  @2x
============================================================ */
@media (max-width: 1512px) and (max-height: 982px) {
  :root {
    --nav-w: 37%;
    --h-feature: 125vh;
    --h-ai: 300vh;
    --h-dsa: 255vh;
    --h-prj: 280vh;
  }

  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 30rem;
  }

  .heading-tertiary {
    top: 14%;
    right: 11%;
  }

  .heading-tertiary-two {
    top: 14%;
    right: 6.5%;
  }

  .quote-box {
    margin-left: 8rem;
    margin-right: -1rem;
  }

  .quote-two {
    margin-left: 6rem;
  }

  .quote-icon {
    margin-top: -6%;
    margin-left: 1rem;
    float: right;
  }

  .fa-solid {
    font-weight: 500;
    color: var(--base-text);
    font-size: 5rem;
  }

  .footer__item-clock {
    padding: 6px 16px;
    width: 13rem;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 20rem;
    margin-left: 17rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 30rem;
  }

  .about-box {
    margin-top: 35%;
    margin-left: -2rem;
  }

  /* EXPERIENCE */

  .exp-box-one {
    width: 30rem;
    transform: translateX(58rem);
  }
  .exp-box-two {
    width: 40rem;
    transform: translateX(40rem);
  }
  .exp-box-three {
    width: 45rem;
    transform: translateX(26rem);
  }
  .exp-box-four {
    width: 30rem;
    transform: translateX(16rem);
  }
  .exp-box-five {
    width: 22rem;
    transform: translateX(6rem);
  }

  .story-box {
    width: 50%;
  }

  /* HOBBIES */

  .hobbies {
    padding-top: 6rem;
    /* padding-bottom: 6rem; */
  }

  .numb-text {
    font-size: 1.1rem;
  }

  .about-box-text,
  .story-box-text {
    font-size: 1.2rem;
  }

  .notes-box-text {
    padding-top: 2.5rem;
    font-size: 1.1rem;
    width: 32%;
  }

  .abt-img-box-one img {
    margin-left: 0;
  }

  .abt-img-box-two img {
    margin-left: 0;
  }

  .dsa-img {
    height: 40rem;
    width: auto;
  }

  .dsa-head {
    font-size: 2rem;
  }

  .dsa-box-para {
    font-size: 1.2rem;
  }

  .prj-gallery {
    padding-left: 10%;
    padding-bottom: 5rem;
    padding-top: 0;
  }

  .prj-img {
    height: 32rem;
  }

  .prj-grid {
    gap: 3rem;
    align-items: center;
    text-align: center;
    width: 75rem;
  }
}

/* (3) ===============================
   MacBook Pro 15" (1440 × 932)
   Fix: nav pill width/centering + footer hairline
================================== */
@media (max-width: 1440px) and (max-height: 932px) {
  :root {
    --nav-w: 39%;
    --h-feature: 135vh;
    --h-ai: 310vh;
    --h-dsa: 265vh;
    --h-prj: 295vh;
  }
  /* ---------- SECTION RULES / LINES BETWEEN AREAS ---------- */
  /* Use any that apply in your codebase */
  hr.section-rule,
  .section-line,
  .rule,
  .divider {
    height: 1px;
    border: 0;
    background: var(--base-border);
    opacity: 0.55;
    width: min(1200px, 92%);
    margin: 2.25rem auto;
  }

  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 30rem;
  }

  /* ---------- FOOTER ---------- */

  .quote-box {
    margin-left: 6rem;
    margin-right: -1rem;
  }

  .quote,
  .quote-two {
    font-size: 3.3rem;
  }

  .quote {
    margin-left: 3rem;
  }

  .quote-two {
    margin-left: 8rem;
  }

  .quote-icon {
    margin-top: -6%;
    margin-left: 1rem;
    float: right;
  }

  .fa-solid {
    font-weight: 500;
    color: var(--base-text);
    font-size: 5rem;
  }

  .footer__item-clock {
    padding: 6px 16px;
    width: 13rem;
  }

  .site-footer .footer-grid {
    gap: 1rem 2rem;
  }
  footer h4,
  .site-footer h4 {
    font-size: 1.05rem;
  }
  footer a,
  .site-footer a {
    font-size: 0.98rem;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 20rem;
    margin-left: 17rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 30rem;
  }

  .about-box {
    margin-top: 35%;
    margin-left: -2rem;
  }

  /* EXPERIENCE */

  .exp-box-one {
    width: 30rem;
    transform: translateX(52rem);
  }
  .exp-box-two {
    width: 40rem;
    transform: translateX(34rem);
  }
  .exp-box-three {
    width: 45rem;
    transform: translateX(22rem);
  }
  .exp-box-four {
    width: 30rem;
    transform: translateX(14rem);
  }
  .exp-box-five {
    width: 22rem;
    transform: translateX(6rem);
  }

  .story-box {
    width: 50%;
  }

  /* HOBBIES */

  .hobbies {
    padding-top: 6rem;
    /* padding-bottom: 6rem; */
  }

  .numb-text {
    font-size: 1.1rem;
  }

  .about-box {
    margin-left: 0;
  }

  .about-box-text,
  .story-box-text {
    font-size: 1.2rem;
  }

  .notes-box-text {
    padding-top: 2rem;
    font-size: 1.1rem;
    width: 32%;
  }

  .feature-box__text {
    padding: 1rem 1rem;
  }

  .heading-tertiary {
    top: 14%;
    right: 11%;
  }

  .heading-tertiary-two {
    top: 14%;
    right: 7%;
  }

  .heading-primary-sub-two {
    font-size: 1.1rem;
  }

  .ai-img {
    height: 22rem;
  }

  .con-img-box img {
    height: 12rem;
  }

  .dsa-img {
    height: 40rem;
    width: auto;
  }

  .dsa-head {
    font-size: 2rem;
  }

  .dsa-box-para {
    font-size: 1.2rem;
  }

  .prj-gallery {
    padding-left: 11%;
    padding-bottom: 5rem;
  }

  .prj-img {
    height: 30rem;
    width: 32rem;
  }

  .prj-grid {
    gap: 2rem;
    align-items: center;
    text-align: center;
    width: 70rem;
  }
}

/* (4) ===============================
   MacBook Pro 15" (1440 × 778)
   Fix: nav pill width/centering + footer hairline
================================== */
@media (max-width: 1440px) and (max-height: 778px) {
  :root {
    --nav-w: 39%;
    --h-feature: 155vh;
    --h-ai: 370vh;
    --h-dsa: 320vh;
    --h-prj: 350vh;
  }

  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 30rem;
  }

  .heading-tertiary {
    top: 14%;
    right: 11%;
  }

  .heading-tertiary-two {
    top: 14%;
    right: 6.5%;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 20rem;
    margin-left: 17rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 30rem;
  }

  .about-box {
    margin-top: 35%;
    margin-left: -2rem;
  }

  /* EXPERIENCE */

  .exp-box-one {
    width: 30rem;
    transform: translateX(52rem);
  }
  .exp-box-two {
    width: 40rem;
    transform: translateX(34rem);
  }
  .exp-box-three {
    width: 45rem;
    transform: translateX(22rem);
  }
  .exp-box-four {
    width: 30rem;
    transform: translateX(14rem);
  }
  .exp-box-five {
    width: 22rem;
    transform: translateX(6rem);
  }

  .story-box {
    width: 50%;
  }

  /* HOBBIES */

  .hobbies {
    padding-top: 6rem;
    /* padding-bottom: 6rem; */
  }

  .numb-text {
    font-size: 1.1rem;
  }

  #about-box {
    margin-left: 0rem;
  }

  .about-box-text,
  .story-box-text {
    font-size: 1.2rem;
  }

  .notes-box-text {
    padding-top: 2rem;
    font-size: 1.1rem;
    width: 32%;
  }

  .feature-box__text {
    padding: 1rem 1rem;
  }

  .heading-tertiary {
    top: 14%;
    right: 11%;
  }

  .heading-tertiary-two {
    top: 14%;
    right: 7%;
  }

  .ai-img {
    height: 22rem;
  }

  .con-img-box img {
    height: 12rem;
  }

  .dsa-img {
    height: 40rem;
    width: auto;
  }

  .dsa-head {
    font-size: 2rem;
  }

  .dsa-box-para {
    font-size: 1.2rem;
  }

  .prj-gallery {
    padding-left: 13%;
    padding-bottom: 6rem;
  }

  .prj-img {
    height: 30rem;
    width: 100%;
  }

  .prj-grid {
    gap: 3rem;
    align-items: center;
    text-align: center;
    width: 65rem;
  }
}

/* (5) ===========================================================
   MacBook AIR 13" (M1/M2): 1280 × 832  @2x
============================================================ */
@media (max-width: 1280px) and (max-height: 832px) {
  :root {
    --nav-w: 43%;
    --h-feature: 130vh;
    --h-ai: 350vh;
    --h-dsa: 300vh;
    --h-prj: 328vh;
  }

  /* Passion */
  .heading-primary-sub-two {
    font-size: 1.1rem;
  }

  .feature-box,
  .feature-box-two,
  .feature-box-three,
  .feature-box-four {
    height: 26rem;
  }

  /* ---------- FOOTER ---------- */

  .quote-box {
    margin-left: 5rem;
    margin-right: -1rem;
  }

  .quote {
    margin-left: 0rem;
  }

  .quote-two {
    margin-left: 4rem;
  }

  .quote-icon {
    margin-top: -6%;
    margin-left: 1rem;
    float: right;
  }

  .fa-solid {
    font-weight: 500;
    color: var(--base-text);
    font-size: 5rem;
  }

  .meaning {
    font-size: 1.1rem;
  }

  .footer__item-clock {
    padding: 6px 16px;
    width: 13rem;
  }

  .site-footer .footer-grid {
    gap: 1rem 2rem;
  }
  footer h4,
  .site-footer h4 {
    font-size: 1.05rem;
  }
  footer a,
  .site-footer a {
    font-size: 0.98rem;
  }

  /* ---------- ABOUT ---------- */

  .img-about-box {
    margin-top: 18rem;
    margin-left: 12rem;
    height: 30rem;
    width: 22rem;
  }

  .img-about-box img {
    width: auto;
    height: 30rem;
  }

  .about-box {
    margin-top: 36%;
    margin-left: -2rem;
  }

  /* EXPERIENCE */

  .exp-box-one {
    width: 28rem;
    transform: translateX(47rem);
  }
  .exp-box-two {
    width: 36rem;
    transform: translateX(32rem);
  }
  .exp-box-three {
    width: 40rem;
    transform: translateX(20rem);
  }
  .exp-box-four {
    width: 28rem;
    transform: translateX(12rem);
  }
  .exp-box-five {
    width: 22rem;
    transform: translateX(4rem);
  }

  .experience-role {
    font-size: 1.1rem;
  }

  .experience-meta {
    font-size: 0.9rem;
  }

  /* Duration badge (top-right inside the pill) */
  .dur {
    font-size: 1.3rem;
  }

  .story-box {
    width: 54%;
  }

  .about-box-text,
  .story-box-text {
    font-size: 1rem;
  }

  .notes-box-text {
    padding-top: 2.5rem;
    font-size: 1rem;
    width: 32%;
  }

  /* HOBBIES */

  .hobbies {
    padding-top: 6rem;
    /* padding-bottom: 6rem; */
  }

  .numb-text {
    font-size: 1rem;
  }

  .about-box-text,
  .story-box-text {
    font-size: 1.2rem;
  }

  .notes-box-text {
    padding-top: 1.8rem;
    font-size: 1rem;
    width: 32%;
  }

  .dsa-text-box {
    max-width: 70ch;
  }

  .abt-img-box-one img {
    margin-left: 0;
  }

  .abt-img-box-two img {
    margin-left: 0;
  }

  .abt-img-box-one img,
  .abt-img-box-two img {
    height: 24rem;
    border-radius: 20px;
  }

  .about-img {
    padding-top: 10rem;
    height: 40rem;
  }

  .con-img {
    height: 10rem;
  }

  .dsa-img {
    height: 35rem;
    width: auto;
  }

  .dsa-head {
    font-size: 2rem;
  }

  .dsa-box-para {
    font-size: 1.2rem;
  }

  .prj-gallery {
    padding-left: 11%;
    padding-bottom: 8rem;
  }

  .prj-img {
    height: 28rem;
  }

  .prj-grid {
    gap: 3rem;
    align-items: center;
    text-align: center;
    width: 62rem;
  }
}