/* ================================
   RESPONSIVE LAYOUT OVERRIDES
================================ */

/* ---------- Extra Large Monitors (1920px+) ---------- */
@media (min-width: 1920px) {
  .nav.left {
    left: 12%;
  }
  
  .nav.right {
    right: 12%;
  }
  
  .star img {
    width: 80px;
    height: 80px;
  }

  .star span {
    font-size: 16px;
  }
  
  /* Expand circular positioning for very large screens */
  .nav.left .star:nth-child(1) {
    top: -420px;
    left: 250px;
  }
  
  .nav.left .star:nth-child(2) {
    top: -170px;
    left: 100px;
  }
  
  .nav.left .star:nth-child(3) {
    top: 100px;
    left: 100px;
  }
  
  .nav.left .star:nth-child(4) {
    top: 340px;
    left: 270px;
  }
  
  .nav.right .star:nth-child(1) {
    top: -420px;
    right: 200px;
  }
  
  .nav.right .star:nth-child(2) {
    top: -170px;
    right: 90px;
  }
  
  .nav.right .star:nth-child(3) {
    top: 100px;
    right: 100px;
  }
  
  .nav.right .star:nth-child(4) {
    top: 340px;
    right: 220px;
  }
  
    .qrew-brand {
    bottom: 2vh;
  }

  .qrew-brand img {
    width: 220px;
  }
}

/* ---------- Large Monitors (1600px - 1919px) ---------- */
@media (min-width: 1600px) and (max-width: 1919px) {
  .nav.left {
    left: 10%;
  }
  
  .nav.right {
    right: 10%;
  }
  
  .star img {
    width: 75px;
    height: 75px;
  }

  .star span {
    font-size: 15px;
  }
  
  .nav.left .star:nth-child(1) {
    top: -380px;
    left: 260px;
  }
  
  .nav.left .star:nth-child(2) {
    top: -220px;
    left: 170px;
  }
  
  .nav.left .star:nth-child(3) {
    top: 10px;
    left: 130px;
  }
  
  .nav.left .star:nth-child(4) {
    top: 300px;
    left: 280px;
  }
  
  .nav.right .star:nth-child(1) {
    top: -380px;
    right: 210px;
  }
  
  .nav.right .star:nth-child(2) {
    top: -220px;
    right: 150px;
  }
  
  .nav.right .star:nth-child(3) {
    top: 10px;
    right: 130px;
  }
  
  .nav.right .star:nth-child(4) {
    top: 300px;
    right: 230px;
  }
  
   .qrew-brand {
    bottom: 2vh;
  }

  .qrew-brand img {
    width: 200px;
  }
}

/* ---------- Standard Desktop (1400px - 1599px) ---------- */
@media (min-width: 1400px) and (max-width: 1599px) {

  /* Uses default styles from style.css */
}


/* ---------- Small Desktop & Large Laptops (1200px - 1399px) ---------- */
@media (max-width: 1399px) {
  .nav.left {
    left: 6%;
  }
  
  .nav.right {
    right: 6%;
  }
  
  /* Adjust circular positioning for smaller screens */
  .nav.left .star:nth-child(1) {
    top: -300px;
    left: 230px;
  }
  
  .nav.left .star:nth-child(2) {
    top: -150px;
    left: 140px;
  }
  
  .nav.left .star:nth-child(3) {
    top: 40px;
    left: 120px;
  }
  
  .nav.left .star:nth-child(4) {
    top: 220px;
    left: 240px;
  }
  
  .nav.right .star:nth-child(1) {
    top: -300px;
    right: 180px;
  }
  
  .nav.right .star:nth-child(2) {
    top: -150px;
    right: 120px;
  }
  
  .nav.right .star:nth-child(3) {
    top: 40px;
    right: 120px;
  }
  
  .nav.right .star:nth-child(4) {
    top: 220px;
    right: 200px;
  }
   .qrew-brand {
    bottom: 4vh;
  }

  .qrew-brand img {
    width: 150px;
  }
}

/* ---------- Laptops (1000px - 1199px) ---------- */
@media (max-width: 1199px) {
  .nav.left {
    left: 4%;
  }
  
  .nav.right {
    right: 4%;
  }

  .star img {
    width: 60px;
    height: 60px;
  }

  .star span {
    font-size: 13px;
  }
  
  /* Tighten circular positioning */
  .nav.left .star:nth-child(1) {
    top: -220px;
    left: 180px;
  }
  
  .nav.left .star:nth-child(2) {
    top: -100px;
    left: 130px;
  }
  
  .nav.left .star:nth-child(3) {
    top: 50px;
    left: 120px;
  }
  
  .nav.left .star:nth-child(4) {
    top: 190px;
    left: 210px;
  }
  
  .nav.right .star:nth-child(1) {
    top: -220px;
    right: 130px;
  }
  
  .nav.right .star:nth-child(2) {
    top: -100px;
    right: 120px;
  }
  
  .nav.right .star:nth-child(3) {
    top: 50px;
    right: 120px;
  }
  
  .nav.right .star:nth-child(4) {
    top: 190px;
    right: 180px;
  }

   .qrew-brand {
    bottom: 8vh;
  }

  .qrew-brand img {
    width: 100px;
  }
}

/* ---------- Tablets (768px - 999px) ---------- */
@media (max-width: 999px) {
  .nav.left {
    left: 3%;
  }
  
  .nav.right {
    right: 3%;
  }

  .star img {
    width: 55px;
    height: 55px;
  }

  .star span {
    font-size: 12px;
  }
  
  /* Further tighten circular positioning */
  .nav.left .star:nth-child(1) {
    top: -190px;
    left: 150px;
  }
  
  .nav.left .star:nth-child(2) {
    top: -70px;
    left: 100px;
  }
  
  .nav.left .star:nth-child(3) {
    top: 50px;
    left: 100px;
  }
  
  .nav.left .star:nth-child(4) {
    top: 160px;
    left: 180px;
  }
  
  .nav.right .star:nth-child(1) {
    top: -190px;
    right: 110px;
  }
  
  .nav.right .star:nth-child(2) {
    top: -70px;
    right: 90px;
  }
  
  .nav.right .star:nth-child(3) {
    top: 50px;
    right: 100px;
  }
  
  .nav.right .star:nth-child(4) {
    top: 160px;
    right: 145px;
  }
  
    .qrew-brand {
    bottom: 7vh;
  }

  .qrew-brand img {
    width: 100px;
  }
}

/* ---------- Small Tablets (680px - 767px) ---------- */
@media (max-width: 767px) {
  .nav.left {
    left: 2%;
  }
  
  .nav.right {
    right: 2%;
  }

  .star img {
    width: 50px;
    height: 50px;
  }

  .star span {
    font-size: 11px;
  }
  
  .nav.left .star:nth-child(1) {
    top: -180px;
    left: 90px;
  }
  
  .nav.left .star:nth-child(2) {
    top: -50px;
    left: 35px;
  }
  
  .nav.left .star:nth-child(3) {
    top: 60px;
    left: 40px;
  }
  
  .nav.left .star:nth-child(4) {
    top: 160px;
    left: 125px;
  }
  
  .nav.right .star:nth-child(1) {
    top: -180px;
    right: 50px;
  }
  
  .nav.right .star:nth-child(2) {
    top: -50px;
    right: 20px;
  }
  
  .nav.right .star:nth-child(3) {
    top: 60px;
    right: 40px;
  }
  
  .nav.right .star:nth-child(4) {
    top: 160px;
    right: 90px;
  }
  
   .qrew-brand {
    bottom: 8vh;
  }

  .qrew-brand img {
    width: 80px;
  }
}

/* ---------- Mobile Phones (480px - 679px) - TOP/BOTTOM LAYOUT ---------- */
@media (max-width: 679px) {
  body {
    overflow-y: auto;
  }

  /* Mobile-specific background */
  .background {
    background-image: url("https://mocksurl.com/assets/uploads/mocks/89-mobile_background_photoroom.png?919");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  /* Reposition nav containers for top/bottom layout */
  .nav.left,
  .nav.right {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    gap: 15px;
    width: 100%;
    padding: 0 20px;
  }
  
  .nav.left {
    top: 80px;
  }
  
  .nav.right {
    top: auto;
    bottom: 80px;
  }

  .star {
    position: static;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .star img {
    width: 50px;
    height: 50px;
  }

  .star span {
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: center;
  }

  /* Overlay panel */
  .panel {
    width: 92%;
    max-width: 92%;
    padding: 20px;
  }
  
  .panel h2 {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .social-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .social-btn {
    padding: 12px 14px;
    font-size: 13px;
  }

 
 .qrew-brand {
    bottom: 10vh;
  }

  .qrew-brand img {
    width: 90px;
    padding: 5px;
  }
}

/* ---------- Small Phones (400px - 479px) ---------- */
@media (max-width: 479px) {
  .background {
    background-image: url("https://mocksurl.com/assets/uploads/mocks/89-mobile_background_photoroom.png?919");
    background-size: contain;
  }
  
  .nav.left {
    top: 80px;
    gap: 8px;
  }
  
  .nav.right {
    bottom: 80px;
    gap: 8px;
  }

  .star img {
    width: 45px;
    height: 45px;
  }

  .star span {
    font-size: 9px;
  }
  
  .qrew-brand {
    bottom: 10vh;
  }
  
  .qrew-brand img {
    width: 80px;
  }
  
  .panel {
    padding: 16px;
  }
  
  .panel h2 {
    font-size: 18px;
  }
  
  .social-btn {
    padding: 10px 12px;
    font-size: 12px;
  }
}

/* ---------- Extra Small Phones (under 400px) ---------- */
@media (max-width: 399px) {
  .background {
    background-image: url("https://mocksurl.com/assets/uploads/mocks/89-mobile_background_photoroom.png?919");
    background-size: contain;
  }
  
  .nav.left {
    top: 80px;
    gap: 2px;
    padding: 0 10px;
  }
  
  .nav.right {
    bottom: 80px;
    gap: 2px;
    padding: 0 10px;
  }
  
  .star img {
    width: 40px;
    height: 40px;
  }

  .star span {
    font-size: 8px;
  }
  
 .qrew-brand {
    bottom: 10vh;
  }
  
  .qrew-brand img {
    width: 70px;
  }
}