/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 768px) {
  /* Nav */
  .header__nav {
    display: none;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-header-navy);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
    gap: 32px;
    z-index: 999;
  }

  .header__nav.active {
    display: flex;
  }

  .header__nav a {
    font-size: 1.1rem;
  }

  .header__hamburger {
    display: flex;
  }

  .header__hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .header__hamburger.active span:nth-child(2) {
    opacity: 0;
  }

  .header__hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }

  /* Shared */
  .section-title-banner {
    padding: 25px 30px;
    border-width: 6px;
  }

  .section__dark-content {
    padding: 100px 5% 50px;
  }

  /* Hero */
  .hero {
    min-height: auto;
    padding: 50px 5%;
  }

  .hero__content {
    max-width: 100%;
  }

  .hero .btn {
    padding: 16px 30px;
    width: 100%;
  }

  /* Applications */
  .applications__cards {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .applications__card {
    max-width: 100%;
  }

  /* Products */
  .products__grid {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .products__item {
    max-width: 100%;
  }

  /* Blog */
  .blog__grid {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .blog__card {
    max-width: 100%;
  }

  /* Contact */
  .contact__wrapper::before {
    width: 100%;
  }

  .contact__form-container {
    margin-left: 5%;
    margin-right: 5%;
    padding: 50px 5%;
  }

  /* About */
  .about__tech {
    flex-direction: column;
  }

  .about__tech-img {
    max-width: 100%;
  }

  /* Article detail */
  .article {
    margin: 40px 5%;
  }

  /* Blog page */
  .blog-page {
    padding: 40px 5% 60px;
  }

  .blog-page__card {
    width: 100%;
  }

  /* Contact page */
  .contact-page {
    padding: 40px 5% 60px;
  }

  /* Find us */
  .find-us__content {
    flex-direction: column;
  }

  .find-us__map,
  .find-us__info {
    width: 100%;
  }

  .find-us__map iframe {
    min-height: 300px;
  }

  /* About brand */
  .about-brand__content {
    flex-direction: column;
    padding: 60px 5%;
  }

  .about-brand__text,
  .about-brand__video {
    width: 100%;
  }

  /* About vision */
  .about-vision {
    margin: 40px 5%;
  }

  .about-vision__tech {
    flex-direction: column;
  }

  .about-vision__video,
  .about-vision__tech-text {
    width: 100%;
  }

  /* Page hero (inner pages) */
  .page-hero {
    padding: 30px 5% 40px;
  }

  /* Application rows */
  .application-row,
  .application-row--reverse {
    flex-direction: column;
  }

  .application-row__text,
  .application-row__img {
    width: 100%;
  }

  .application-row__img {
    min-height: 250px;
  }

  .application-row__text {
    padding: 40px 5%;
  }

  /* Page hero image */
  .page-hero--image {
    min-height: 300px;
    padding: 40px 5%;
  }

  /* Detail rows */
  .detail-row,
  .detail-row--reverse {
    flex-direction: column;
  }

  .detail-row__img,
  .detail-row__text {
    width: 100%;
  }

  .detail-row__img {
    min-height: 250px;
  }

  .detail-row__text {
    padding: 30px 0;
  }

  /* Services */
  .services__row {
    flex-direction: column;
  }

  .services__img,
  .services__text {
    width: 100%;
  }

  .services__content {
    padding: 60px 5%;
  }

  /* Product rows */
  .product-row,
  .product-row--reverse {
    flex-direction: column;
  }

  .product-row__img,
  .product-row__text {
    width: 100%;
  }

  .product-rows {
    padding: 0 5%;
  }

  /* CTA section */
  .cta-section__wrapper::before {
    width: 100%;
  }

  .cta-section__content {
    margin-left: 5%;
    margin-right: 5%;
    padding: 40px 5%;
  }

}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .section__dark-content {
    padding: 100px 5% 60px;
  }

  .applications__cards {
    gap: 40px;
  }

  /* Product rows 50/50 on tablet */
  .product-row__img,
  .product-row__text {
    width: 50%;
  }

  /* Services 50/50 on tablet */
  .services__img,
  .services__text {
    width: 50%;
  }

  /* Blog 2 columns on tablet */
  .blog-page__card {
    width: calc((100% - clamp(30px, 3vw, 40px)) / 2);
  }
}