/* ================================================ */
/* Media query for Responsive Designs */
/* ================================================ */

@media screen and (min-width: 3840px) {
  .haleon-logo {
    width: 380px;
    /* height: 50px; */
  }

  .flo-arrow-down {
    width: 100px;
    height: 100px;
  }

  .content-boxes {
    font-size: 4.2rem;
  }

  /* ============================================ */
  /* Screen 1 =================================== */
  /* ============================================ */
  .flo-s1 .flo-footer .flo-text {
    font-size: 3.2rem;
    line-height: 4.8rem;
  }

  .flo-s1 .animated-text {
    height: 20rem;
  }

  .flo-s1 .flo-s1-challenge-btn {
    margin-top: -4rem;
  }

  /* ============================================ */
  /* Screen 4 =================================== */
  /* ============================================ */

  .flo-s4 .flo-card {
    padding: 4rem 6rem;
  }

  .flo-s4 ul li {
    margin-bottom: 3rem;
  }

  .flo-s4 .flo-text {
    font-size: 4.3rem;
  }

  .flo-s4 .flo-card .flo-card-block-1 .flo-card-icon {
    width: 10rem;
    height: 10rem;
  }

  .flo-s4 .flo-li-nums {
    width: 6.2rem;
    height: 6.2rem;
  }

  /* ============================================ */
  /* Screen 5 =================================== */
  /* ============================================ */

  .flo-s5 .flo-heading2 {
    margin-bottom: 5rem;
  }
  .flo-s5 .flo-subtitle2 {
    font-size: 6rem;
    margin-bottom: 0;
  }

  .flo-s5 .flo-footer .flo-footer-content .block1,
  .flo-s5 .flo-footer .flo-footer-content .block2,
  .flo-s6 .flo-footer .flo-footer-content .flo-footer-content2 .block1,
  .flo-s6 .flo-footer .flo-footer-content .flo-footer-content2 .block2,
  .flo-s8 .flo-footer .flo-footer-content .block1,
  .flo-s8 .flo-footer .flo-footer-content .block2 {
    font-size: 4rem;
  }

  /* ============================================ */
  /* Screen 6 =================================== */
  /* ============================================ */

  .flo-s6 .flo-chip-group .flo-chip {
    font-size: 3.5rem;
  }

  .flo-s6 .flo-selectedArea-card,
  .flo-s6 .flo-card {
    font-size: 3.8rem;
  }

  .flo-s6 .flo-selectedArea-card .flo-btn {
    font-size: 4rem;
  }

  .flo-s6 .flo-chip-group {
    margin-bottom: var(--space-md);
  }

  /* ============================================ */
  /* Screen 8 =================================== */
  /* ============================================ */

  .flo-s8 .tv-safe-area {
    padding-top: 8rem;
  }

  .flo-s8 .flo-s8-container {
    padding: 8rem 6rem 10rem 6rem;
  }

  .flo-s8 .flo-heading2 {
    margin-bottom: 8rem;
  }

  .flo-s8 .flo-s8-content {
    gap: 10rem;
  }

  .flo-s8 .flo-content-boxes {
    font-size: 4.2rem;
  }

  /* ============================================ */
  /* Screen 10 =================================== */
  /* ============================================ */

  .flo-s10 .flo-content-boxes {
    font-size: 3.8rem;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .flo-references .flo-safe-area {
    padding: var(--safe-y, 16px) var(--safe-x, 16px);
  }

  .flo_references_scroll {
    padding-right: 6px;
    padding-bottom: 80px;
  }

  .flo_references_scroll::-webkit-scrollbar {
    width: 4px;
  }

  .flo_references_close {
    width: 44px;
    height: 44px;
  }
}