@media (max-width: 59em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* Hide navigation */
    /* Allows NO transitions at all */
    /* display: none; */

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  /* .main-nav-list {
  flex-direction: column;
  gap: 4.8rem;
} */

  .sticky .header.nav-open {
    height: 100vh;
    width: 100vw;
  }

  /* neuronzix logo */
  /* .Neuron_zi {
    margin-top: 9rem;
  } */

  .svg_c {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;
  }

  .main-list {
    display: flex;
    flex-direction: column;
  }

  .homepage {
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    gap: 50rem;
  }
  .btn {
    font-size: 3rem;
    display: block;
    font-weight: 600;
  }

  .brand-title {
    font-size: 2rem;
  }
}

@media (max-width: 73em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }

  /* MOBILE NAVIGATION */
  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /* Hide navigation */
    /* Allows NO transitions at all */
    /* display: none; */

    /* 1) Hide it visually */
    opacity: 0;

    /* 2) Make it unaccessible to mouse and keyboard */
    pointer-events: none;

    /* 3) Hide it from screen readers */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  /* .main-nav-list {
  flex-direction: column;
  gap: 4.8rem;
} */

  .sticky .header.nav-open {
    height: 100vh;
    width: 100vw;
  }

  /* neuronzix logo */
  /* .Neuron_zi {
    margin-top: 9rem;
  } */

  .svg_c {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4rem;
  }

  .main-list {
    display: flex;
    flex-direction: column;
  }

  .homepage {
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    gap: 100rem;
  }
  .btn {
    font-size: 3rem;
    display: block;
    font-weight: 600;
  }
}

/* gap correction  */

@media (max-width: 73em) {
  .homepage {
    display: flex;
    gap: 100rem;
  }
}
@media (max-width: 72em) {
  .homepage {
    display: flex;
    gap: 97rem;
  }
}
@media (max-width: 71em) {
  .homepage {
    display: flex;
    gap: 96rem;
  }
}
@media (max-width: 70em) {
  .homepage {
    display: flex;
    gap: 94rem;
  }
}
@media (max-width: 69em) {
  .homepage {
    display: flex;
    gap: 92rem;
  }
}
@media (max-width: 68em) {
  .homepage {
    display: flex;
    gap: 90rem;
  }
}
@media (max-width: 67em) {
  .homepage {
    display: flex;
    gap: 88rem;
  }
}
@media (max-width: 66em) {
  .homepage {
    display: flex;
    gap: 86rem;
  }
}
@media (max-width: 65em) {
  .homepage {
    display: flex;
    gap: 84rem;
  }
}
@media (max-width: 64em) {
  .homepage {
    display: flex;
    gap: 82rem;
  }
}
@media (max-width: 63em) {
  .homepage {
    display: flex;
    gap: 80rem;
  }
}
@media (max-width: 62em) {
  .homepage {
    display: flex;
    gap: 78rem;
  }
}
@media (max-width: 61em) {
  .homepage {
    display: flex;
    gap: 76rem;
  }
}
@media (max-width: 60em) {
  .homepage {
    display: flex;
    gap: 74rem;
  }

  .plan--complete:after {
    display: none;
  }
}
@media (max-width: 59em) {
  .homepage {
    display: flex;
    gap: 72rem;
  }
}
@media (max-width: 58em) {
  .homepage {
    display: flex;
    gap: 70rem;
  }
}
@media (max-width: 57em) {
  .homepage {
    display: flex;
    gap: 68rem;
  }
}
@media (max-width: 56em) {
  .homepage {
    display: flex;
    gap: 66rem;
  }
}
@media (max-width: 55em) {
  .homepage {
    display: flex;
    gap: 64rem;
  }
}
@media (max-width: 54em) {
  .homepage {
    display: flex;
    gap: 62rem;
  }
}
@media (max-width: 53em) {
  .homepage {
    display: flex;
    gap: 50rem;
  }
}
@media (max-width: 52em) {
  .homepage {
    display: flex;
    gap: 55rem;
  }
}
@media (max-width: 51em) {
  .homepage {
    display: flex;
    gap: 55rem;
  }
}
@media (max-width: 50em) {
  .homepage {
    display: flex;
    gap: 52rem;
  }
}
@media (max-width: 49em) {
  .homepage {
    display: flex;
    gap: 50rem;
  }
}
@media (max-width: 48em) {
  .homepage {
    display: flex;
    gap: 48rem;
  }
}
@media (max-width: 47em) {
  .homepage {
    display: flex;
    gap: 46rem;
  }
}
@media (max-width: 46em) {
  .homepage {
    display: flex;
    gap: 43rem;
  }
}

@media (max-width: 44em) {
  .homepage {
    display: flex;
    gap: 40rem;
  }
}

@media (max-width: 42em) {
  .homepage {
    display: flex;
    gap: 37rem;
  }
}

@media (max-width: 40em) {
  .homepage {
    display: grid;
    align-items: center;
    /* justify-content: space-between; */
    grid-template-columns: 3fr 1fr;
  }

  .main-nav {
    margin-left: auto;
  }
}

@media (max-width: 38em) {
  .homepage {
    display: flex;
    gap: 28rem;
  }
}

@media (max-width: 36em) {
  .homepage {
    display: flex;
    gap: 24rem;
  }
}

@media (max-width: 34em) {
  .homepage {
    display: flex;
    gap: 22rem;
  }
}
@media (max-width: 33em) {
  .homepage {
    display: flex;
    gap: 19rem;
  }
}
/* @media (max-width: 34em) {
  .homepage {
    display: flex;
    gap: 22rem;
  }
} */

@media (max-width: 26em) {
  .homepage {
    display: flex;
    gap: 4em;
  }

  .header_first p {
    width: 40rem;
  }
  .section-hero {
    margin-bottom: 4.2rem;
  }
}

/* samsang fold */
@media (max-width: 23em) {
  .homepage {
    display: flex;
    gap: 0.8rem;
  }
  .header_first p {
    width: 40rem;
  }
  .section-hero {
    padding-bottom: 4.8rem;
    height: 100%;
  }

  .learn {
    margin-right: 2rem;
  }
}

/* iphone 14 pro max */
@media (max-width: 27em) {
  .homepage {
    display: flex;
    gap: 8.2rem;
  }
  .header_first p {
    width: 40rem;
  }
  .section-hero {
    margin-bottom: 4.2rem;
  }
}

/* i phome 12 pro */
@media (max-width: 25em) {
  .homepage {
    display: flex;
    gap: 2.6rem;
  }
  .learn {
    margin-right: 2rem;
  }
  .section-hero {
    padding-bottom: 4.8rem;
    height: 100%;
  }
}
/* how it */

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
  .ggrid {
    grid-template-columns: 1fr;
  }
  .img-box:nth-child(2) {
    grid-row: 1;
  }

  .img-box:nth-child(6) {
    grid-row: 5;
  }

  .img-box {
    transform: translateY(2.4rem);
  }
}

/*  */

@media (max-width: 34em) {
  .How-it-works {
    padding: 4.8rem 2.4rem;
    text-align: center;
  }

  .subhead {
    font-size: 1.8rem;
    margin-bottom: 7.6rem;
  }

  .ggrid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .para-1 {
    width: 100%;
    margin-bottom: 3.2rem;
    font-size: 1.6rem;
  }

  .img_chages {
    width: 70%;
  }

  .SNO {
    font-size: 6rem;
  }

  .head-3 {
    font-size: 2.4rem;
    margin-bottom: 1.6rem;
  }

  .img-box {
    transform: translateY(0);
    padding: 1.6rem 0;
  }

  .img-box:nth-child(2) {
    grid-row: 1;
  }

  .img-box:nth-child(6) {
    grid-row: 5;
  }

  .img-box::before,
  .img-box::after {
    content: "";
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .img-box::before {
    width: 65%;
    padding-bottom: 65%;
    background-color: #f3f0ff;
    z-index: -2;
  }

  .img-box::after {
    width: 55%;
    padding-bottom: 55%;
    background-color: #e5dbff;
    z-index: -1;
  }

  /* section card */
  .grid {
    grid-template-columns: 1fr;
  }

  .Section-Testimonial {
    grid-template-columns: 1fr;
  }

  /* login in 34 rem */
  /* 1. Card center + proper top space */
  .login_page {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* upar se thoda gap de */
    padding: 3rem 1rem;
    box-sizing: border-box;
  }

  /* 2. Box ko size control kar ke bada aur fit banaya */
  .container-box {
    width: 52rem;
    padding: 2rem;
    box-sizing: border-box;
    flex-direction: column;
    display: flex;
    gap: 1.25rem;
    height: 46rem;
  }

  /* 3. Heading / paragraph readability */
  .headingg {
    font-size: 1.9rem;
    margin: 0;
    text-align: center;
  }

  .description {
    max-width: 60ch;
    font-size: 1.8rem;
    line-height: 1.4;
    margin: 0 auto 1rem;
    padding: 0;
    padding-top: 2rem !important;
  }

  /* 4. Form vertical, compact but comfortable */
  .cubeForm {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    width: 100%;
  }

  .cubeForm label {
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  /* 5. Inputs slightly adjusted */
  .login {
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }

  /* 6. Button full width */
  .btnn {
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
    border-radius: 6px;
    margin-top: 0.5rem;
    transform: none;
  }

  /* 7. Mobile fallback: sidebar hata de agar space khinch raha */
  @media (max-width: 800px) {
    .sidebar {
      display: none;
    }
  }

  .cubeForm label {
    font-size: 2rem;
  }

  .logo {
    width: 14rem;
    height: 14rem;
  }
}

@media (max-width: 58em) {
  /* Section padding mobile-friendly */
  .section-pricing {
    padding: 4rem 2rem;
  }

  /* Grid: 1 column mobile */
  .pgrid {
    display: grid;
    grid-template-columns: 1fr;
    margin-left: 0;
    gap: 2rem;
  }

  /* Plan width adjust */
  .plan-princing {
    width: 100%;
    margin: 0 auto;
  }

  /* Hide the "best value" ribbon */
  .plan--complete:after {
    display: none;
  }

  /* Font-size adjustments for smaller screens */
  .phead {
    font-size: 3rem;
    margin-bottom: 4rem;
  }

  .pri {
    font-size: 2rem;
  }

  .plan-price {
    font-size: 3.5rem;
  }

  .plan-name {
    font-size: 2rem;
  }

  .feature-text {
    width: 100%;
  }

  /* Feature spacing adjustments */
  .feature {
    gap: 1.5rem;
  }

  .llist {
    margin-left: 1rem;
    gap: 1.5rem;
  }

  .crid {
    flex-direction: column;
    gap: 2rem;
    padding-left: 0;
  }

  .bttn {
    padding: 1.4rem 1.6rem;
    font-size: 1.6rem;
  }
}