/* For mobile devices between 376px and 576px */
@media (min-width: 319px) and (max-width: 576px) {
  .container {
    width: 90%;
  }
  /* *HEADER START */
  header {
    padding: 30px 0;
  }
  .logo {
    font-size: 1.5rem;
  }
  .header-menu {
    display: none;
  }
  .header-toggler {
    display: block;
  }
  /* *HEADER END */

  /* *HERO START */
  .hero-contents h1 {
    font-size: 2rem;
    width: 100%;
  }
  /* *HERO END */

  /* *FEATURES START */
  .feature {
    padding: 40px 0 80px;
  }
  .feature-container {
    flex-direction: column-reverse;
    gap: 50px;
  }
  .feature-image-grid {
    grid-template-columns: 1fr;
  }
  .feature-contents h2 {
    font-size: 2rem;
  }
  /* ?FEATURE DETAILS */
  .feature-detail-container {
    flex-direction: column-reverse;
    align-items: center;
    gap: 100px;
  }
  .experience-box {
    position: absolute;
    left: 25%;
    bottom: -8%;
  }
  /* ?FEATURE DETAILS */
  .feature-details-title h2 {
    font-size: 2rem;
    width: 100%;
  }
  .feature-detail-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
  }
  .feature-details-box {
    width: 100%;
  }
  .detail {
    padding: 20px 15px;
  }
  .experience-box {
    position: absolute;
    left: 25%;
    bottom: -8%;

    padding: 26px 22px 25px;
    width: 200px;
  }
  .experience-box h4 {
    font-size: 2rem;
  }
  /* *FEATURES END */

  /* *FACTS START */
  .facts-title {
    width: 100%;
  }
  .facts-boxes {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
    padding: 40px 30px 100px;
  }
  .facts-box {
    padding: 25px 15px;
  }
  /* *FACTS END */

    /* *SPONSORS START */
    .sponsors-title {
    width: 100%;
  }
  .sponsors-title h2 {
    font-size: 2.5rem;
  }
  .sponsors-images {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
    .sponsors-images img {
      width: 100%;
    }
  /* *SPONSORS END */

  /* *FOOTER START */
  .footer-copywrite P {
    font-size: rem;
  }
  /* *FOOTER END */
}

/* For tablets between 577px and 768px */
@media (min-width: 577px) and (max-width: 768px) {
  .container {
    width: 90%;
  }

  /* *HEADER START */
  header {
    padding: 30px 0;
  }
  .logo {
    font-size: 2rem;
  }
  .header-menu {
    display: none;
  }
  .header-toggler {
    display: block;
  }
  /* *HEADER END */

  /* *HERO START */
  .hero-contents h1 {
    width: 90%;
  }
  /* *HERO END */

  /* *FEATURES START */
  .feature {
    padding: 60px 40px 100px;
  }
  .feature-container {
    flex-direction: column-reverse;
  }
  .feature-image-grid {
    grid-template-columns: repeat(2, 2fr);
  }
  .feature-contents h2 {
    font-size: 2rem;
  }
  /* ?FEATURE DETAILS */
  .feature-details-title h2 {
    font-size: 2.2rem;
  }
  .feature-detail-container {
    flex-direction: column-reverse;
    align-items: center;
    gap: 100px;
  }
  .experience-box {
    position: absolute;
    left: 25%;
    bottom: -8%;

    padding: 36px 32px 35px;
    width: 200px;
  }
  .experience-box h4 {
    font-size: 2rem;
  }
  /* *FEATURES END */

  /* *FACTS START */
  .facts-boxes {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 40px 30px 120px;
  }
  .facts-box {
    padding: 15px 5px;
  }
  .facts-box h3 {
    font-size: 2rem;
  }
  .facts-box p {
    font-size: 1rem;
  }
  /* *FACTS END */
}

/* For tablets and small desktops between 769px and 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  /* *HEADER START */
  .logo {
    font-size: 2rem;
  }
  .header-menu ul {
    gap: 40px;
  }
  .header-toggler {
    display: none;
  }
  /* *HEADER END */

  /* *FEATURES START */
  .feature {
    padding: 60px 40px 100px;
  }
  .feature-container {
    flex-direction: column-reverse;
  }
  .feature-image-grid {
    grid-template-columns: repeat(2, 2fr);
  }
  .feature-contents {
    text-align: center;
  }
  .feature-contents h2 {
    font-size: 2rem;
  }
  /* ?FEATURE DETAILS */
  .feature-detail-container {
    flex-direction: column-reverse;
    align-items: center;
    gap: 100px;
  }
  .experience-box {
    position: absolute;
    left: 25%;
    bottom: -8%;
  }
  /* *FEATURES END */

  /* *FACTS START */
  .facts-boxes {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 40px 30px 120px;
  }
  .facts-box {
    padding: 15px 5px;
  }
  /* .facts-box h3 {
    font-size: 2rem;
   }
  .facts-box p {
    font-size: 1rem;
  } */
  /* *FACTS END */

  /* *SPONSORS START */
  .sponsors-title {
    width: 70%;
  }
  .sponsors-title h2 {
    font-size: 2.5rem;
  }
  .sponsors-images {
    grid-template-columns: repeat(5, 1fr);
    gap: 40px;
  }
    .sponsors-images img {
      width: 100%;
    }
  /* *SPONSORS END */
}

/* For desktops between 1025px and 1280px */
@media (min-width: 1024px) and (max-width: 1280px) {
  /* *FEATURES START */
  .feature {
    padding: 60px 40px 100px;
  }
  .feature-container {
    flex-direction: column-reverse;
  }
  .feature-image-grid {
    grid-template-columns: repeat(2, 2fr);
  }
  .feature-contents {
    text-align: center;
  }
  .feature-contents h2 {
    font-size: 2rem;
  }
  /* ?FEATURE DETAILS */
  .feature-detail-container {
    flex-direction: column-reverse;
    align-items: center;
    gap: 50px;
  }
  .experience-box {
    position: absolute;
    left: 70%;
    bottom: -8%;
  }
  /* *FEATURES END */

  /* *FACTS START */
  .facts-boxes {
    gap: 30px;
    padding: 60px 30px 140px;
  }
  .facts-box {
    padding: 15px 5px;
  }
  .facts-box h3 {
    font-size: 2rem;
  }
  .facts-box p {
    font-size: 1rem;
  }
  /* *FACTS END */

  /* *SPONSORS START */
  .sponsors-images {
    gap: 30px;
  }
  /* *SPONSORS END */
}

/* For larger desktops between 1281px and 1536px */
@media (min-width: 1281px) and (max-width: 1536px) {
  /* *FEATURES START */
  /* ?FEATURE DESCRIPTION */
  .feature {
    padding: 60px 40px 100px;
  }
  .feature-container {
    flex-direction: row;
  }
  .feature-image-grid {
    grid-template-columns: repeat(2, 2fr);
  }
  .feature-contents {
    width: 50%;
  }
  /* ?FEATURE DETAILS */
  /* *FEATURES END */

  /* *FACTS START */
  .facts-boxes {
    gap: 50px;
    padding: 80px 50px 160px;
  }
  .facts-box {
    padding: 15px 5px;
  }
  /* *FACTS END */

  /* *SPONSORS START */
  .sponsors-images {
    gap: 80px;
  }
  /* *SPONSORS END */
}

/* For extra-large desktops above 1536px */
@media (min-width: 1536px) {
}