@media screen and ( min-width: 1921px ) {
  header, main {
    max-width: 1920px;
    margin: 0 auto;
  }

  header {
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

@media screen and ( max-width: 1920px ) {
  html, body {
    overflow-x: hidden;
  }

}

@media (max-width: 1400px) { 
  
  h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  p {
    font-size: 1.5rem;
  }

  .accordion-header {
    font-size: 2rem;
  }

  .faq .accordion-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 1200px) {
  
  .video-bg {
    background: url(../img/bg-3.png) no-repeat 85px -50px / 30%;
  }

  section.padded,
  footer.padded  {
    padding-left: 10%;
    padding-right: 10%;
  }

  .logo-container {
    max-width: 140px;
  }
  
  .language-selector ul, .main-nav ul, #close-mobile-menu {
    font-size: 1.2rem;
  }

  #show-mobile-menu {
    font-size: 1.2rem;
  }

  .video-claim {
    font-size: 2rem;
  }

  .features img {
    width: 50px;
  }

  .not-included img {
    width: 20px;
  }

  .not-included .gap-4 {
    gap: 2rem;
  }
}

@media (max-width: 992px) {

  

  .main-nav {
    display: none;
  }

  #show-mobile-menu {
    display: block;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 2rem;
  }

  footer .logo-container {
    max-width: 100px;
    margin-bottom: 2rem;
  }

  .copyright {
    grid-column: 1;
    grid-row: 2;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    min-width: auto;
  }

  .legal {
    grid-column: 2;
    grid-row: 1 / 3; /* Span both rows */
    max-width: none;
  }
}

@media (max-width: 768px) {

  .header-row {
    padding-top: 1rem;
  }

  .language-selector {
    padding: 0.2rem 2rem;
  }

  .video-bg {
    background: url(../img/bg-3.png) no-repeat -10px -30px / 45%
  }
  
  .video-baby:not(.video-mobile) {
    display: none;
  }


  .video-baby.video-mobile {
    display: block;
  }

  
  h1 {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
  }

  h2 {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
  }

  p {
    font-size: 1.25rem;
  }

  .accordion-header {
    font-size: 1.6rem;
  }

  .faq .accordion-title {
    font-size: 1.25rem;
  }

  .btn button {
    cursor: pointer;
    display: inline-block;
    padding: 1.25rem 2rem;
    font-size: 1.25rem;
  }

  .header-row {
    padding-left: 5%;
  }

  
  .language-selector,
  .main-nav,
  #show-mobile-menu,
  #close-mobile-menu {
    padding-right: 5%;
  }

  .video-claim {
    bottom: 4rem;
    font-size: 1.6rem;
  }

  .benefit p {
    font-size: 1.25rem;
  }

  section.padded,
  footer.padded {
    padding-left: 5%;
    padding-right: 5%;
  }

  .ingredients > .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .motyl-2 {
    right: 90px;
  }

  .motyl-3 {
    right: 0px;
  }

  .faq {
    margin-top: 0px;
  }

  .partner.filler {
    display: block;
  }

  .partner {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    min-width: 200px;
  }

  .carousel-track {
    -webkit-animation: scroll-left 20s linear infinite;
            animation: scroll-left 20s linear infinite;
  }

  .carousel-wrapper::before {
    left: 0;
    background: -o-linear-gradient(left, var(--primary-color), transparent);
    background: -webkit-gradient(linear, left top, right top, from(var(--primary-color)), to(transparent));
    background: linear-gradient(to right, var(--primary-color), transparent);
  }

  .carousel-wrapper::after {
    right: 0;
    background: -o-linear-gradient(right, var(--primary-color), transparent);
    background: -webkit-gradient(linear, right top, left top, from(var(--primary-color)), to(transparent));
    background: linear-gradient(to left, var(--primary-color), transparent);
  }

  @-webkit-keyframes scroll-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
    }
  }
  @keyframes scroll-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
    }
    100% {
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
    }
  }

  .why-us > .flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .benefits {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4rem;
  }
}


@media (max-width: 576px) { 

  .about, .why-us, .contact, footer {
    padding-top: 4rem;
    padding-bottom: 4em;
  }

  .ingredients {
    padding: 7.5rem 5%;
  }

  .language-selector ul, .main-nav ul, #close-mobile-menu {
    font-size: 1rem;
  }

  #show-mobile-menu {
    font-size: 1rem;
  }

  #mobile-menu > div {
    padding-left: 5%;
  }
}

@media (max-width: 510px) {

  .logo-container {
    max-width: 80px;
  }

  .video-claim {
    left: 2rem;
    font-size: 1.2rem;
    bottom: 3rem;
  }

  .language-selector,
  .main-nav,
  #show-mobile-menu,
  #close-mobile-menu {
    padding-right: 5%;
  }

  .features img {
    width: 30px;
  }

  #mobile-menu .mobile-nav {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {

  .scroll {
    width: 1.5rem;
    bottom: -0.75rem;
  }

  .spotify {
    width: 2rem;
    height: 2rem;
  }
  
  .motyl-1 {
    width: 300px;
    height: auto;
  }

  .motyl-2 {
    width: 150px;
    height: auto;
    right: 0;
  }
  
  .motyl-3 {
    width: 100px;
    height: auto;
    top: 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1.5rem;
  }

  footer .logo-container {
    grid-column: 1;
    grid-row: 1;
    max-width: 100px;
    margin: 0 auto;
  }

  .copyright {
    grid-column: 1;
    grid-row: 2;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }

  .legal {
    grid-column: 1;
    grid-row: 3;
    text-align: center;
  }

  .social {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .copyright-links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.25rem;
  }
}


@media (max-width: 380px) {
  .video-claim {
    left: 2rem;
    font-size: 1rem;
    bottom: 2rem;
  }

  .spotify-player {
    width: 230px;
    right: -250px;
  }

  .spotify.open {
    right: 250px;
  }
  
  h1 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
  }

  h2 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
  }

  p {
    font-size: 1rem;
  }

  .accordion-header {
    font-size: 1.25rem;
  }

  .faq .accordion-title {
    font-size: 1.125rem;
  }

  .btn button {
    cursor: pointer;
    display: inline-block;
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }

  .header-row {
    padding-left: 5%;
  }

  .benefit p {
    font-size: 1rem;
  }

  .faq .accordion-title {
    margin-bottom: 0rem;
  }

  footer, footer p {
    font-size: 0.875rem;
  }

  .motyl-1 {
    width: 200px;
    height: auto;
  }

  .motyl-2 {
    width: 130px;
    height: auto;
    right: 40px;
  }
  
  .motyl-3 {
    width: 100px;
    height: auto;
    top: 30px;
  }
}

@media (max-width: 320px) { }}