/* ULTRA WIDE DESKTOP 1600px+ */
@media (min-width: 1600px) {
  	.intro-text,
  	.text-overlay {
  	width: 50ch;
	max-width: 55%;
    font-size: clamp(1.2rem, 2vw, 1.8rem); 
  }
}

/* SMALL LAPTOPS 992 – 1200px */
@media (min-width: 992px) and (max-width: 1200px) {
  	.intro-text,
  	.text-overlay {
    font-size: clamp(1.2rem, 2vw, 1.8rem);
	width: 50ch;	
    max-width: 65%;
  	}
    .hamburger-btn {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* TABLETS 577 – 768px */
@media (min-width: 577px) and (max-width: 768px) {
  .intro-text,
  .text-overlay {
    width: 55ch;
    max-width: 85%;
    font-size: clamp(1.4rem, 3vw, 1.8rem);
  }
  .pill-btn {
    font-size: 1.1rem;
    padding: 0.6rem 1.2rem;
	z-index: 9999;
  }

  .hamburger-btn {
    width: 2.4rem;
    height: 2.4rem;
	z-index: 9999;  
  }

  .slide-indicator {
    font-size: 1.1rem;
	}
  
  .slide {
	background-size: cover;
    background-position: center;
	aspect-ratio: 4/3;
    }
}	


/* MOBILE PHONES 0 – 576px */
@media (max-width: 576px) {
  .intro-text,
  .text-overlay {
    width: 55ch;
    max-width: 85%;
    font-size: clamp(1.3rem, 4vw, 1.8rem);
    position: absolute;
    margin: auto;
    text-align: center;
    transform: translate(-50%, -70%);
  }
  .intro-text {
    opacity: 1;
    animation: mobileIntroFade 0.6s ease forwards;
	pointer-events: none;  
  }

  .slide-indicator {
    font-size: 1rem;
    max-width: 90vw;
    white-space: normal;
    text-align: center;
    top: calc(4rem + env(safe-area-inset-top));
  }

  .pill-btn {
    font-size: 1rem;
    padding: 0.5rem 0.8rem;
    max-width: 85vw;
    white-space: normal;
    top: calc(0.8rem + env(safe-area-inset-top));
  }

  .hamburger-btn {
    width: 2.2rem;
    height: 2.2rem;
  }

  .footer {
    font-size: 1rem;
    line-height: 1.4rem;
    text-wrap: balance;
  }

  .nav-prev,
  .nav-next {
    display: none;
  }
}

/* MOBILE PHONES <360px */
@media (max-width: 359px) {
  .intro-text,
  .text-overlay {
    width: 50ch;
	max-width: 80%;   
    font-size: clamp(1.2rem, 3vw, 1.5rem);
  }
  .pill-btn {
    font-size: 1rem;
    padding: 0.45rem 0.7rem;
  }
  .hamburger-btn {
    width: 2rem;
    height: 2rem;
  }
  .footer {
    font-size: 0.9rem;
    line-height: 1.3rem;
  }
}