/* for very large laptop */
@media screen and (width: 160rem) {
   .container {
      padding-inline: 18.75rem;
   }

   .header-section {
      margin-top: 3.75rem;
      gap: 3.125rem;
   }

   .header-section img {
      width: 62.5rem;
   }

   .header-left h1 {
      font-size: 4.5rem;
   }

   .header-left p {
      font-size: 1.7rem;
      font-weight: 300;
      width: fit-content;
      text-align: left;
   }

   .cta-btn {
      width: 15.5625rem;
      height: 4.5125rem;

      font-size: 1.7rem;
      font-weight: 400;
   }
}

/* for large Laptop */
@media screen and (max-width: 90rem) {
   .nav-links ul {
      gap: 3rem;
   }

   .header-section {
      margin-top: 3.75rem;
      gap: 3.125rem;
   }

   .header-section img {
      width: 37.5rem;
   }

   .header-left h1 {
      font-size: 3.5rem;
   }

   .header-left p {
      font-size: 1.2rem;
      font-weight: 300;
      width: fit-content;
   }

   .cta-btn {
      width: 10.5625rem;
      height: 2.8125rem;

      font-size: 1.1rem;
   }

   .features-section {
      height: fit-content;
      padding-bottom: 5rem;
   }
}

/* bug fix in feature-section for particular display widths */
@media screen and (min-width: 64.125rem) and (max-width: 87.6875rem) {
   .contentbox {
      gap: 0.125rem;
   }

   .box {
      width: 20%;
      padding: 0.75rem;
      margin-top: 2rem;
   }

   .box lord-icon {
      width: 6.25rem;
   }

   .box p {
      font-size: 0.875rem;
      text-align: center;
   }
}

/* for medium laptop or big tablets */
@media screen and (max-width: 64rem) {
   .nav-toggle {
      display: block;
      z-index: 100;

      position: relative;
      right: 3%;

      /* Hiding tap effect in mobile browsers */
      -webkit-tap-highlight-color: transparent;
   }

   .project-logo {
      transform: translateY(-0.25rem);
   }

   /* hamburger menu */
   .nav-links {
      position: absolute;
      top: 0%;
      right: -100%;

      z-index: 10;

      width: 100%;
      height: 100vh;

      /* to allow scroll when needed */
      overflow-y: auto;

      padding-block: 6.3rem;

      background-color: rgba(0, 0, 0, 0.9);

      transition: all 0.2s linear;
   }

   .nav-links.active {
      right: 0%;
   }

   .nav-links ul {
      flex-direction: column;

      gap: 3rem;

      font-size: 1.5rem;
   }

   /* USER ACCOUNT menu */

   .nav-links ul li:nth-child(6) {
      transform: translateX(0.75rem);

      /* in-clickable */
      pointer-events: none;
   }

   /* Low Opacity of Account tab ONLY */
   .nav-links ul li:nth-child(6) a.hover-link,
   img.hover-link {
      opacity: 0.6;
   }

   .dropdown-menu {
      display: block;

      transform: translateX(-1rem);

      margin-top: 0.6rem;

      /* these effects aren't required here */
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: none;
      animation: none;
   }

   .dropdown-menu ul li a {

      /* allowing the user click here */
      pointer-events: all;

      width: 110% !important;

      padding: 1rem;

      margin-inline: 0;
      margin-bottom: 1rem;

      font-size: 1.3rem;

      border: 0.0625rem solid white;
      border-radius: 0.625rem;
   }

   .dropdown-menu ul li {
      margin-block: 0;
   }

   .dropdown-menu img {
      width: 1.25rem;
   }

   /* NEXT SECTIONS */
   .header-section {
      justify-content: center;
      margin-top: 0;
      gap: 0;
   }

   .main-nav {
      padding-top: 1.2rem;
      padding-bottom: 1.5875rem;
   }

   .header-right {
      display: none;
   }

   .header-left {
      margin-top: 9.375rem;
      margin-bottom: 4.375rem;
      background-image: url(./assets/astronaut\ bg\ image.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: right;
   }

   .header-left h1 {
      width: min-content;
   }

   .header-left p {
      width: 60%;
      font-size: 1.1rem;
      text-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.35);
      text-align: left;
      font-weight: 350;
      padding-right: 2.8125rem;
   }

   .cta-btn {
      width: 10.5625rem;
      height: 2.8125rem;

      font-size: 1.1rem;

      border-radius: 0.3125rem;
   }

   .icons {
      column-gap: 6rem;
   }

   .features-section {
      height: fit-content;
      padding-bottom: 5rem;
   }

   .service {
      gap: 5rem;
   }

   .s3-icon {
      width: 15.625rem !important;
      height: 15.625rem !important;
   }

   .content p {
      font-size: 1.1rem;
      width: 17rem;
   }

   .content a {
      height: 2.4rem;
      width: 8.8rem;

      font-size: 1.15rem;

      margin-top: 2.5rem;
      margin-left: 48%;
   }

   footer {
      height: 4rem;
   }

   footer a {
      margin-block: 1.3rem;
   }

   .links {
      justify-content: space-between;
   }
}

/* for tablets */
@media screen and (max-width: 48rem) {
   .nav-toggle {
      right: 4%;
   }

   .container {
      padding-inline: 3.125rem;
   }

   .header-left {
      margin-top: 9.375rem;
      margin-bottom: 3.75rem;
   }

   .header-left h1 {
      width: fit-content;
      font-size: 2.9rem;
      margin-bottom: 0.625rem;
   }

   .header-left p {
      width: 60%;
      font-size: 0.9rem;
      text-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.35);
      text-align: left;
      font-weight: 300;
      margin-bottom: 0.9375rem;
      padding-right: 0rem;
   }

   .cta-btn {
      width: fit-content;
      height: 2.3rem;

      font-size: 0.9875rem;
      font-weight: 400;
   }

   .features-section {
      padding-bottom: 3.75rem;
   }

   .features-section h2 {
      padding-top: 2.5rem;
   }

   .contentbox {
      gap: 0.625rem;
   }

   .box {
      width: 15.1875rem;
      height: 15.4375rem;
   }

   .box lord-icon {
      width: 7rem;
      height: 7rem;
   }

   .box p {
      font-size: 0.8rem;
   }

   .about-section h2 {
      margin-bottom: 0;
   }

   .icons {
      column-gap: 3rem;
   }

   .icon-width {
      width: 4.0625rem;
      margin-left: 20%;
   }

   .services-section h2 {
      padding-block: 2rem;
      font-size: 1.5rem;
   }

   .service {
      width: 100%;
      height: 22rem;

      padding-inline: 2rem;
   }

   .s3-icon {
      width: 13.75rem !important;
      height: 13.75rem !important;
   }

   .content p {
      font-size: 1rem;
      width: 17rem;
      font-weight: 400;
   }

   .subheading {
      margin-bottom: 3rem;
      margin-top: 0.9375rem;
   }

   .content a {
      height: 2rem;
      width: 8rem;

      font-size: 1rem;
      margin-left: 52.5%;
   }

   footer a {
      font-size: 1rem;
      margin-block: 1.3rem;
   }

   .subfooter a {
      font-size: 1rem;
   }

   .subfooter lord-icon {
      width: 2rem;
      height: 2rem;
   }

   /* fix position */
   .signout-btn {
      transform: translateX(-0.375rem) translateY(0.625rem);
   }

   /* Project Copyright at last */
   .ack {
      padding-inline: 1.25rem;
   }

   .ack p {
      font-size: 0.875rem;
   }

   .ack a {
      font-size: 0.875rem;
      font-weight: 400;
   }
}

/* for large Mobiles */
@media screen and (max-width: 26.875rem) {
   .nav-toggle {
      right: 7%;
   }

   .project-logo {
      transform: translateY(-0.125rem);
   }

   .container {
      padding-inline: 1.875rem;
   }

   /* nav bar */
   .main-nav {
      padding-top: 1.2rem;
      padding-bottom: 1.5875rem;

      border-bottom-left-radius: 1.5625rem;
      border-bottom-right-radius: 1.5625rem;
   }

   /* hero section */
   .for-mobile {
      display: block;
   }

   .intro-text {
      display: none;
   }

   .intro-text-in-mobile {
      display: block;
   }

   .for-mobile img {
      z-index: -1;

      width: 100%;

      position: absolute;
      left: 50%;
      top: 10%;
      transform: translate(-50%, 0);

      border-bottom-left-radius: 6%;
      border-bottom-right-radius: 6%;
   }

   .header-section {
      animation: entry 0.7s ease-in forwards;
   }

   .header-right {
      display: none;
   }

   .header-left {
      margin-top: 28.875rem;
      margin-bottom: 1.875rem;
      background: none;
   }

   .header-left h1 {
      width: 100%;
      text-align: center;
      font-size: 3rem;
      line-height: 3.3rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      animation: none;
   }

   .header-left p {
      width: 100%;
      padding-inline: 2.5rem;
      font-size: 1rem;
      text-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.35);
      text-align: center;
      font-weight: 300;
      margin-bottom: 1.1875rem;
      animation: none;
   }

   .cta-btn {
      width: fit-content;
      padding-inline: 1.25rem;

      font-size: 1.1rem;
      font-weight: 400;

      position: relative;
      left: 50%;
      transform: translate(-50%, 0);
   }

   .cta-btn.signup-btn {
      animation: none;
   }

   /* features section */
   .features-section {
      padding-bottom: 3.125rem;
   }

   .features-section h2 {
      font-size: 1.3rem;
   }

   .box {
      width: 80%;
   }

   .box p {
      font-size: 0.85rem;
      text-align: center;
   }

   /* about section */
   .about-section {
      padding-bottom: 0.3125rem;
   }

   .about-section h2 {
      font-size: 1.3rem;
      padding-top: 2.5rem;
   }

   .icons {
      row-gap: 0;
      column-gap: 0;

      padding: 1.5rem 0;
   }

   .icon-width {
      width: 3.125rem;
      margin-left: 27%;
   }

   .item12 {
      width: 3rem;
      margin-left: 1.72rem;
   }

   /* service section */
   .services-section {
      background-color: var(--secondary-bg-color);
      max-width: 100%;
      height: auto;
      padding-bottom: 5rem;
   }

   .s3-icon {
      width: 12.5rem !important;
      height: 12.5rem !important;

      transform: translateY(1rem);
   }

   .services-section h2 {
      font-size: 1.3rem;
      padding-bottom: 0.9375rem;
   }

   .cards {
      gap: 1.25rem;
   }

   .service {
      flex-direction: column;
      gap: 0;

      background-image: url(./assets/Rectangle\ 3.svg);

      height: 27rem;
   }

   .subheading {
      text-align: center !important;
      margin-bottom: 1.2rem;
      margin-top: 1rem;
   }

   .content {
      align-items: center;
      justify-content: center;
   }

   .content p {
      font-size: 0.8rem;
      text-align: center;
      line-height: 1.5;
   }

   .content a {
      height: 16%;
      width: 43%;

      padding-block: 0.75rem;
      padding-inline: 0;

      font-size: 0.85rem;
      font-weight: 400;

      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
      margin-left: 0;
      margin-right: 57%;
   }

   /* footer section */
   footer {
      height: auto;
      padding-block: 1.25rem;
   }

   .links {
      flex-direction: column;
   }

   footer a {
      margin: 0.9375rem;
   }
}

/* for medium Mobiles */
@media screen and (max-width: 23.4375rem) {
   .nav-toggle {
      right: 8%;
   }

   .header-section {
      padding-bottom: 1.5625rem;
   }

   .header-left {
      margin-top: 25.625rem;
   }

   .header-left h1 {
      font-size: 2.5rem;
      line-height: 2.7rem;
      margin-bottom: 1rem;
   }

   .header-left p {
      font-size: 1.1rem;
      margin-bottom: 1.5rem;
   }

   .cta-btn {
      font-size: 0.875rem;
      width: fit-content;
      padding-inline: 1.25rem;
   }

   /* features section */
   .features-section h2 {
      font-size: 1.2rem;
   }

   .box {
      width: 100%;
   }

   /* about section */
   .about-section {
      padding-bottom: 0.3125rem;
   }

   .about-section h2 {
      font-size: 1.2rem;
   }

   .icons {
      grid-template-rows: 6.25rem 6.25rem 6.25rem 6.25rem;
      grid-template-columns: 6.25rem 6.25rem 6.25rem;
   }

   .item4 {
      grid-area: 4 / 1 / 4 / 2;
   }

   .item8 {
      grid-area: 4 / 2 / 4 / 3;
   }

   .item12 {
      grid-area: 4 / 3 / 4 / 4;
   }

   /* service section */
   .services-section {
      padding-bottom: 3.75rem;
   }

   .services-section h2 {
      font-size: 1.2rem;
   }

   /* Project Copyright at last */
   .ack {
      padding-inline: 0.625rem;
   }

   .ack p {
      font-size: 0.75rem;
   }

   .ack a {
      font-size: 0.75rem;
      font-weight: 400;
   }
}

/* for small Mobiles */
@media screen and (max-width: 20rem) {
   .nav-toggle {
      right: 9%;
   }

   .container {
      padding-inline: 1.25rem;
   }

   .header-section {
      padding-bottom: 1.5625rem;
   }

   .header-left {
      margin-top: 22.3125rem;
   }

   .header-left h1 {
      font-size: 2.2rem;
   }

   .header-left p {
      font-size: 0.9rem;
   }

   .cta-btn {
      font-size: 0.9rem;
      padding: 0;
      padding-inline: 1.25rem;
   }

   /* features section */
   .features-section h2 {
      font-size: 1rem;
   }

   .box {
      width: 85%;
   }

   .box p {
      font-size: 0.8rem;
   }

   /* about section */
   .about-section {
      padding-bottom: 0.3125rem;
   }

   .about-section h2 {
      font-size: 1rem;
   }

   /* service section */
   .services-section {
      padding-bottom: 3.75rem;
   }

   .services-section h2 {
      font-size: 1.1rem;
   }

   .service {
      width: 100%;
      padding-inline: 5%;
   }

   .content p {
      font-size: 0.75rem;
      width: 13rem;
   }

   .content a {
      height: 2rem;
      width: 60%;

      margin-left: 0;
      margin-right: 42.5%;
   }
}