@media screen and (max-width: 768px) {
  .btn:not(.btn-hover-alt, .link-btn) {
    display: none;
  }

  .nav-drawer-flex {
    & .MuiListItemText-primary {
      margin-bottom: -30px;
    }

    & .MuiTypography-h2 {
      font-size: 3rem;
      margin-top: 3rem;
    }

    & .drawer-social-media {
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
    }
  }

  .hero-container {
    padding: 0 5px;
    height: 40vh;
  }

  .hero-container .hero-text {
    width: 70%;
    font-size: 1.5rem;
    letter-spacing: 1.5px;
    text-align: center;
    margin-top: 5rem;
  }

  .client-section .client-section-text {
    width: 100%;
  }

  .client-section .client-title {
    font-size: 2rem;
  }

  .client-list {
    grid-template-columns: repeat(4, 1fr); /* 4 items per row */
    justify-items: center;
    gap: 5px;
  }

  .client-list .client-item {
    width: 80px;
  }

  /* .numbers-list .numbers-item */
  .numbers-list .numbers-item {
    justify-content: space-between;
    gap: 0;
  }

  /* .people-section */
  .people-section {
    flex-direction: column;

    & .team-info-container {
      display: none;
    }

    & .people-list {
      margin: 0;
    }

    & .people-item {
      padding: 10px 0;
      margin: 10px;

      & h5 {
        font-size: 1.5rem;
      }

      & p {
        font-size: 0.6rem;
      }
    }
  }

  .service-item {
    flex-direction: column !important;
  }

  .desktop-teamPhoto {
    display: none;
  }

  .mobile-teamPhoto {
    display: block;
  }

  .slick-slide div {
    padding: 10px;
  }

  .slick-slide > div {
    padding: 0;
    padding: 0 15px 0 15px;
    height: 100%;
  }

  .testimonial-card .testimonial-comment {
    font-size: 16px;
  }

  .iftar-form .locationCapture {
    flex-direction: column;
    gap: 10px;
  }

  .iftar-form .locationCapture button {
    width: 99%;
    font-size: 12px;
  }

  .event-page .event-title {
    font-size: 3rem;
  }

  .event-page .event-location,
  .event-page .event-date {
    font-size: 16px;
  }

  .event-page .event-info-container {
    gap: 50px;
    flex-direction: column;
  }

  .gff-teaser-container {
    background-image: url("/assets/gff-mobile.webp");
  }

  .gff-teaser-text {
    font-size: 4.5rem !important;
  }
  .content__img {
    max-width: 50vw;
    border-width: 2.5px;
  }

  .content__img-inner {
    top: -8px;
    left: -8px;
  }
  .services-section {
    flex-direction: column;
    padding: 0 20px;
    height: auto;
    margin: 10rem 0 5rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .video-column,
  .text-column {
    width: 80%;
    margin: 0 auto;
  }

  .section-block {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    width: 100%;
    background-color: transparent;
  }

  .section-block h2 {
    font-size: 2.5rem;
  }

  .section-block ul {
    font-size: 1.6rem;
  }
  .gallery-grid-event {
    grid-template-columns: repeat(1, 1fr); /* Tablets */
  }
  .gallery-item-event img {
    height: 250px;
  }
  .insights-grid {
    grid-template-columns: 1fr;
  }
  .reel-container {
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
    margin-bottom: -1px;
    margin-top: 5rem;
  }
  .thumbnail-container {
    margin-top: 3rem;
    grid-template-columns: repeat(3, 1fr);
  }

  /* Grid becomes single column */
  .gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 20px; /* spacing between items */
    width: 80%;
    margin: auto;
    padding: 0px 0px;
  }

  /* Each item fills width, maintains aspect ratio */
  .grid-item {
    width: 100%;
    height: auto; /* remove desktop height */
    aspect-ratio: 4 / 5; /* vertical space reserved */
  }

  /* Optional: taller “hero” items */
  .item-1,
  .item-3,
  .item-6 {
    aspect-ratio: 3 / 4; /* taller for featured works */
  }

  /* Images and videos inside each item fill container */
  .grid-item img,
  .grid-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Adjust overlay text for mobile */
  .title-overlay {
    font-size: 1rem;
    padding: 6px 10px;
  }
}

/* Extra small (like phones <480px) */
@media (max-width: 480px) {
  .gallery-grid {
    padding: 0 10px;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .reel-container {
    flex-direction: row;
    gap: 40px;
    padding: 10px;
    max-width: 100%;
  }

  .iphone-wrapper {
    width: 260px;
    height: 500px;
  }

  .thumbnail-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    min-height: 120px;
  }

  .thumbnail-item {
    width: 70px;
    height: 100px;
  }
  /* Grid becomes single column */
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(1fr);
    gap: 20px; /* spacing between items */
  }

  /* Each item fills width, maintains aspect ratio */
  .grid-item {
    width: 100%;
    height: auto; /* remove desktop height */
    aspect-ratio: 4 / 5; /* vertical space reserved */
  }
  .item-1,
  .item-2,
  .item-3,
  .item-4,
  .item-5,
  .item-6,
  .item-7,
  .item-8,
  .item-9,
  .item-10,
  .item-11 {
    height: 100% !important;
  }

  /* Adjust overlay text for mobile */
  .title-overlay {
    font-size: 1rem;
    padding: 6px 10px;
  }
}

/* Tablet layout: row direction but smaller scale */
@media (max-width: 1024px) and (min-width: 768px) {
  .reel-container {
    flex-direction: row; /* stay in row */
    gap: 40px; /* reduce big gap */
    max-width: 100%; /* allow full width */
    padding: 10px;
  }

  .iphone-wrapper {
    transform: scale(0.7) !important; /* shrink overall size */
    transform-origin: center; /* keep it centered */
  }

  .thumbnail-container {
    grid-template-columns: repeat(4, 1fr); /* tighten thumbnails */
    gap: 10px;
  }

  .thumbnail-item {
    width: 60px;
    height: 80px;
  }
}
@media (max-width: 820px) {
  .iphone-wrapper {
    transform: scale(0.7);
  }
}
/* ===== Tablet (landscape & portrait) ===== */
@media (max-width: 1024px) and (min-width: 768px) {
  .reel-container {
    flex-direction: row;
    gap: 40px;
    max-width: 100%;
    padding: 10px;
  }

  .iphone-wrapper {
    width: 260px;
    height: 500px;
  }

  .thumbnail-container {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .thumbnail-item {
    width: 80px;
    height: 120px;
  }
}

@media (max-width: 767px) {
  .reel-container {
    flex-direction: column;
    gap: 20px;
    padding: 10px;
    max-width: 100%;
    margin-top: 4rem;
  }

  .iphone-wrapper {
    width: 300px;
    height: 560px;
  }

  .thumbnail-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    min-height: 100px;
  }

  .thumbnail-item {
    width: 60px;
    height: 80px;
  }
}