/* Small devices (≥576px) */
@media (max-width: 768px) {
  .prime__grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: auto;
    gap: 15px;
  }

  .div2 img.icon {
    width: 25px;
  }

  .div4 img.deep__seak {
    width: 80%;
  }

  /* PrimeOS 3.0 */
  .div3 {
    grid-column: 1 / span 10; /* 100% */
    grid-row: 1;
    min-height: 150px;
  }

  /* Row 2 – Contextual (60%) + Global (40%) */
  .div6 {
    grid-column: 1 / span 6; /* 60% */
    grid-row: 2;
  }
  .div5 {
    grid-column: 7 / span 4; /* 40% */
    grid-row: 2;
  }

  /* Row 3 – AI Summary + Real-time Collaboration */
  .div1 {
    grid-column: 1 / span 5; /* 50% */
    grid-row: 3;
  }
  .div7 {
    grid-column: 6 / span 5; /* 50% */
    grid-row: 3;
  }

  /* Row 4 – Chat Assistant + Gemini Live */
  .div8 {
    grid-column: 1 / span 5; /* 50% */
    grid-row: 4;
  }
  .div2 {
    grid-column: 6 / span 5; /* 50% */
    grid-row: 4;
  }

  /* Row 5 – Deep Research & Canvas (Full Width) */
  .div4 {
    grid-column: 1 / span 10; /* 100% */
    grid-row: 5;
  }

  .gemini__live__text {
    font-size: 1.5rem;
  }

  .text__italic {
    font-style: italic;
  }
}

/* Large devices (≥992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .vertical__spacing {
    padding: 180px 0px 110px 0px;
  }
  .smarter__then__ever {
    font-size: 1.5rem;
  }
  .primeos__heading {
    font-size: 5rem;
  }

  .font__bold__mob i {
    font-weight: 100;
  }

  .primeos__lines {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  .primeos__img {
    width: 80%;
    transform: translateX(0%);
  }

  .glow__box {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 100px;
    filter: blur(100px);
  }

  .black__gradience {
    z-index: 3;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    height: 30%;
    width: 90%;
  }

  .features__imgs img:nth-child(1) {
    width: 135px;
  }

  .features__imgs img:nth-child(2) {
    width: 235px;
  }

  .features__imgs img:nth-child(3) {
    width: 85px;
  }
  .features__imgs img:nth-child(4) {
    width: 55px;
  }
  .features__imgs img:nth-child(5) {
    width: 135px;
  }

  .design__subheading {
    font-size: 1.5rem;
    font-weight: 300;
  }

  .cyan__spray__heading {
    font-size: 3rem;
    font-weight: 600;
  }

  .cyan__spray__heading > div > img {
    bottom: 0;
    left: 0;
    width: 120%;
    height: auto;
    z-index: 0;
  }

  .neopc__bg {
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    max-height: fit-content;
    height: auto;
  }

  .waves__img {
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
  }

  .triangle__container {
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .android__img {
    width: 70%;
  }

  .prime__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 20px;
    max-height: 590px;
  }

  .div1 {
    grid-row: span 3 / span 3;
  }

  .div2 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
  }

  .div3 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 3;
  }

  .div4 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 5;
  }

  .div5 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 1;
  }

  .div6 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 3;
  }

  .div7 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 5;
  }

  .div8 {
    grid-row: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 4;
  }

  .div2 img.icon {
    width: 40px;
  }

  .div4 img.deep__seak {
    width: 70%;
  }

  .gemini__live__text {
    font-size: 2.5rem;
  }

  .fs__mob {
    font-size: 2.5rem;
  }

  .fs4__mob {
    font-size: 1.7rem;
  }

  .laptop__screen__content {
    width: 25%;
    top: 8%;
    right: 5%;
    z-index: 1;
  }

  .laptop__screen__content .switch__heading,
  .laptop__screen__content div > span {
    font-size: 3vw;
    font-weight: 500;
    line-height: 3.5vw;
  }

  .keymapping__vid {
    width: 80%;
    aspect-ratio: 16/9;
  }

  .coffee__guy {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .coffee__text {
    font-size: 3vw;
    line-height: 3vw;
  }

  .glass__morphism .glass__img {
    width: 150px;
  }

  .icon__img__div img {
    width: 70%;
  }
}

/* Extra large devices (≥1200px) */
@media (min-width: 1200px) {
  .overflow__hidden__mob {
    overflow: initial !important;
  }

  .vertical__spacing {
    padding: 180px 0px 110px 0px;
  }
  .smarter__then__ever {
    font-size: 1.5rem;
  }
  .primeos__heading {
    font-size: 5rem;
  }

  .font__bold__mob i {
    font-weight: 100;
  }

  .primeos__lines {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
  }

  .primeos__img {
    width: 80%;
    transform: translateX(0%);
  }

  .glow__box {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65%;
    height: 25vh;
    filter: blur(100px);
  }

  .black__gradience {
    z-index: 3;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    height: 30%;
    width: 90%;
  }

  .features__imgs img:nth-child(1) {
    width: 135px;
  }

  .features__imgs img:nth-child(2) {
    width: 235px;
  }

  .features__imgs img:nth-child(3) {
    width: 85px;
  }
  .features__imgs img:nth-child(4) {
    width: 55px;
  }
  .features__imgs img:nth-child(5) {
    width: 135px;
  }

  .design__subheading {
    font-size: 1.5rem;
    font-weight: 300;
  }

  .cyan__spray__heading {
    font-size: 3rem;
    font-weight: 600;
  }

  .cyan__spray__heading > div > img {
    bottom: 0;
    left: 0;
    width: 120%;
    height: auto;
    z-index: 0;
  }

  .neopc__bg {
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    max-height: 630px;
    height: auto;
  }

  .waves__img {
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
  }

  .triangle__container {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .android__img {
    width: 70%;
  }

  .prime__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 20px;
    max-height: 590px;
  }

  .div1 {
    grid-row: span 3 / span 3;
  }

  .div2 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
  }

  .div3 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 3;
  }

  .div4 {
    grid-column: span 3 / span 3;
    grid-row: span 2 / span 2;
    grid-column-start: 2;
    grid-row-start: 5;
  }

  .div5 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 1;
  }

  .div6 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 3;
  }

  .div7 {
    grid-row: span 2 / span 2;
    grid-column-start: 5;
    grid-row-start: 5;
  }

  .div8 {
    grid-row: span 3 / span 3;
    grid-column-start: 1;
    grid-row-start: 4;
  }

  .div2 img.icon {
    width: 40px;
  }

  .div4 img.deep__seak {
    width: 50%;
  }

  .gemini__live__text {
    font-size: 2.5rem;
  }

  .fs__mob {
    font-size: 2.5rem;
  }

  .fs4__mob {
    font-size: 1.5rem;
  }

  .laptop__screen__content {
    width: 25%;
    top: 25%;
    right: 5%;
    z-index: 1;
  }

  .laptop__screen__content .switch__heading,
  .laptop__screen__content div > span {
    font-size: 3vw;
    font-weight: 500;
    line-height: 3.5vw;
  }

  .keymapping__vid {
    width: 80%;
    aspect-ratio: 16/9;
  }

  .coffee__guy {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  .coffee__text {
    font-size: 3vw;
    line-height: 3vw;
  }

  .glass__morphism .glass__img {
    width: 150px;
  }

  .icon__img__div img {
    width: 70%;
  }
}