/* Responsive Styles */

@media (max-width: 1024px) {
  .what-we-do-wrapper {
    height: auto;
  }

  .what-we-do-section {
    position: relative;
    top: auto;
    height: auto;
    opacity: 1 !important;
    transform: none !important;
    overflow: visible;
    padding: 4rem 0;
  }
  
  .what-we-do-section.active {
      transform: none !important;
  }
  .footer-links {
    grid-template-columns: repeat(4, 1fr);
}

.contact-column {
    grid-column: span 2;
}
}

@media (max-width: 968px) {
  .about-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-title {
    font-size: 2.5rem;
  }

  .about-subtitle {
    font-size: 1.3rem;
  }

  .about-text {
    font-size: 1rem;
  }
  .wwd-content {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2rem 5%;
  }

  .wwd-text h2 {
    font-size: 2.2rem;
  }

  .wwd-image {
    height: 350px;
  }
  .moments-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
}

.moments-info {
    text-align: left;
}

.moments-title {
    font-size: 2.5rem;
}

.gallery-item {
    flex: 0 0 350px;
    height: 250px;
}

.gallery-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
}

.gallery-nav.prev {
    left: 1rem;
}

.gallery-nav.next {
    right: 1rem;
}
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.articles-title {
    font-size: 2.5rem;
}

.article-content h3 {
    font-size: 1.15rem;
}
.footer-container {
    grid-template-columns: 1fr;
    gap: 3rem;
}

.footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 3rem;
}
}

@media (max-width: 768px) {
  header {
    padding: 1rem 3%;
  }

  .desktop-nav {
    display: none;
  }

  .desktop-cta {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .slide-content {
    left: 3%;
    max-width: 90%;
  }

  .slide-content h1 {
    font-size: 2rem;
  }

  .slide-content p {
    font-size: 1rem;
  }

  .slider-nav {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }

  .slider-nav.prev {
    left: 1rem;
  }

  .slider-nav.next {
    right: 1rem;
  }
  .about-section {
    padding: 3rem 3%;
  }
  .about-container {
    flex-direction: column-reverse;
    width: 100%;
  }
  .about-image {
    width: 100%;
  }
  .about-content {
    padding: .5rem 0;
    width: 100%;
  }
  .about-title {
    font-size: 2rem;
  }

  .about-subtitle {
    font-size: 1.1rem;
  }
  .wwd-text h2 {
    font-size: 1.8rem;
  }
  .about-video iframe{
width: 480px;
  }
  .wwd-image {
    height: 280px;
  }

  .wwd-items {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .moments-section {
    padding: 3rem 0;
}

.moments-title {
    font-size: 2rem;
}

.moments-info p {
    font-size: 1rem;
}

.gallery-item {
    flex: 0 0 280px;
    height: 200px;
}
.footer {
    padding-top: 3rem;
}

.footer-links {
    grid-template-columns: 1fr;
}

.footer-bottom-container {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

.contact-column {
    grid-column: span 1;
}
}

@media (max-width: 580px) {
  .logo-icon img {
    width: 5rem;
  }
  header {
    padding: 0.5rem 3%;
  }
  .mobile-menu {
    top: 60px;
  }
  .hero-slider{
    margin-top: 61px;
 }
  .about-image {
    width: 95%;
  }
  .about-text {
    font-size: .95rem;
    margin-bottom: 1rem;
    }
    .about-video iframe{
      width: 400px;
        }
    .work-image {
        height: 220px;
        padding: 15px;
      }
      .articles-grid {
        grid-template-columns: repeat(1, 1fr);
}
.what-we-do-section {
  padding: 2rem 0;
}
}

@media (max-width: 390px){
  .about-video iframe{
  width: 320px;
  height: 250px;
}
    .about-title {
        font-size: 1.5rem;
    }
    .work-content h3 {
        font-size: 1.1rem;
    }
}
@media (max-width: 340px){
  .about-video iframe{
    width: 100%;
  }
}