@media only screen and (max-width: 1024px) {
  /* Hide desktop nav */
  .desktop-nav {
    display: none;
  }

  .hero-container {
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
  }

  .hero-image-slices {
    order: -1;
    margin-bottom: 20px;
  }
  .hero-text-column {
    order: 2;
    align-items: left; /* center the text in the flex container */
    text-align: left;
  }

  .slice1.only-image {
    align-items: center;
  }

  .main-subtitle {
    font-size: 1.6rem;
  }

  /* Show hamburger on mobile */
  .hamburger {
    display: block;
    width: 30px;
    height: 24px;
    cursor: pointer;
  }
  /* Hide CTA on mobile */
  .cta {
    display: none;
  }

  .quote-info {
    text-align: center;
    justify-content: center;
  }

  .cta-content .text-side h2 {
    font-size: 28px;
  }

  /* Switch portfolio card layout to vertical stacking */
  .portfolio-card {
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  /* The image container becomes the first item and takes full width */
  .portfolio-card-image {
    order: 1;
    width: 100%;
  }
  .portfolio-card-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Move the text content under the image */
  .portfolio-card-content {
    order: 2;
    width: 100%;
    text-align: center;
  }
  .portfolio-card-content h2 {
    font-size: 1.8rem;    /* Increase the title size */
    text-align: center; /* Ensure centered title */
    margin-bottom: 15px;
  }
  .portfolio-card-content p {
    margin-top: 20px;
  }

  .common-hero h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2.5rem;
  }
}

/* ------------------------------------------ */
/* 768px and below (Mobile & Small Tablets)   */
/* ------------------------------------------ */
@media only screen and (max-width: 768px) {

  /* Increase rotating text & container a bit */
  .diagonal-text-container {
    width: 400px;
    height: 60px;
  }
  .diagonal-word {
    font-size: 3.0rem;
  }

  .diagonal-word-services {
    font-size: 3.0rem;
  }
  .hero-rotating-title h1 {
    font-size: 2.4rem;
    margin-bottom: 15px;
  }
  .main-subtitle {
    font-size: 1.6rem;
  }

  .hero-description {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 450px; /* narrower for smaller screens */
    margin: 0 auto 25px auto;
  }

  /* Buttons side by side, centered */
  .hero-buttons {
    justify-content: center;
  }

  @keyframes diag3DWords {
    /* 0%:  top-right, behind, smaller, partially transparent */
    0% {
      transform: translate3d(100px, -50px, -50px)
      scale(0.7)
      rotateY(-30deg);
      opacity: 0.3;
    }
    /* 10%: front & center, full size, fully opaque */
    10% {
      transform: translate3d(0, 20px, 0)
      scale(1)
      rotateY(0deg);
      opacity: 1;
    }
    /* 30%: stay center, fully visible */
    30% {
      transform: translate3d(0, 10px, 0)
      scale(1)
      rotateY(0deg);
      opacity: 1;
    }
    /* 40%: exit diagonally bottom-left, fade out a bit */
    40% {
      transform: translate3d(-200px, 50px, -100px)
      scale(0.7)
      rotateY(25deg);
      opacity: 0;
    }
    /* 100%: remain hidden off bottom-left */
    100% {
      transform: translate3d(-200px, 50px, -100px)
      scale(0.7)
      rotateY(25deg);
      opacity: 0;
    }
  }

  .project-container {
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
  }

  .iphone-wrapper {
    margin-bottom: 30px;
    justify-content: center;
    max-width: 99%;
  }

  .hover-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  }

  .quote-container {
    flex-direction: column;
    gap: 20px;
  }

  .quote-info,
  .quote-form-container {
    flex: 1 1 auto;
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ------------------------------------------ */
/* 480px and below (Mobile Phones)           */
/* ------------------------------------------ */
@media only screen and (max-width: 480px) {
  /* Even bigger rotating text for small screens if you prefer */
  .diagonal-text-container {
    width: 360px;
    height: 48px;
  }

  .diagonal-word-services {
    font-size: 2.5rem;
  }

  .hero-rotating-title h1 {
    font-size: 1.6rem;
  }
  .main-subtitle {
    font-size: 1.2rem;
    margin-top: 3px;;
  }
  .hero-description {
    font-size: 1.2rem;
    line-height: 1.5;
    max-width: 400px;
    margin: 20px auto 40px auto;
  }

  /* Keep buttons side by side if possible; if they overflow, they’ll naturally wrap. */
  .hero-buttons {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
  }

  .hero-image-slices {
    width: 100%;
    max-width: 100%;
    height: 270px;
  }

  .slice {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  @keyframes diag3DWords {
    /* 0%:  top-right, behind, smaller, partially transparent */
    0% {
      transform: translate3d(100px, -50px, -50px)
      scale(0.7)
      rotateY(-30deg);
      opacity: 0.3;
    }
    /* 10%: front & center, full size, fully opaque */
    10% {
      transform: translate3d(0, 0px, 0)
      scale(1)
      rotateY(0deg);
      opacity: 1;
    }
    /* 30%: stay center, fully visible */
    30% {
      transform: translate3d(0, -10px, 0)
      scale(1)
      rotateY(0deg);
      opacity: 1;
    }
    /* 40%: exit diagonally bottom-left, fade out a bit */
    40% {
      transform: translate3d(-200px, 50px, -100px)
      scale(0.7)
      rotateY(25deg);
      opacity: 0;
    }
    /* 100%: remain hidden off bottom-left */
    100% {
      transform: translate3d(-200px, 50px, -100px)
      scale(0.7)
      rotateY(25deg);
      opacity: 0;
    }
  }

  .expertise-header h2,
  .hover-info-section h2 {
    font-size: 30px;
  }

  .expertise-subtext,
  .hover-info-section p.section-subtitle {
    font-size: 16px;
  }

  .scrolling-logo-section h2 {
    font-size: 30px;
  }

  .about-content {
    flex-direction: column !important;
    text-align: left;
  }

  .text-side,
  .image-side {
    width: 100%;
  }

  .text-side h2 {
    font-size: 28px;
    margin-bottom: 25px;
    text-align: center;
  }
  .text-side p {
    font-size: 16px;
    line-height: 1.5;
  }

  .text-side ul {
    margin-left: 10px;
    margin-bottom: 25px;
  }

  .image-side {
    text-align: center;
  }
  .image-side img {
    max-width: 60%;
  }

  /* CTA container stacks vertically on small phones */
  .cta-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cta-content .text-side h2 {
    font-size: 28px;
    margin-bottom: 15px;
    text-align: center;
  }

  .cta-content .text-side p {
    font-size: 16px;
    line-height: 1.5;
  }

  .cta-content .text-side,
  .cta-content .image-side {
    width: 100%;
  }

  /* Center the button */
  .cta-content .text-side .btn {
    margin: 0 auto;
  }

  .cta-content .image-side img {
    display: none;
  }
/*
  .common-hero h1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.0rem;
  }

  .common-hero p {
    font-size: 0.9rem;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
  } */
}

@media only screen and (max-width: 420px) and (min-width: 380px) {
  .hero-image-slices {
    width: 100%;
    max-width: 100%;
    height: 260px;
  }

  .slice {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
}

/* ------------------------------------------ */
/*    For very narrow screens (~max 380px)    */
/* ------------------------------------------ */
@media only screen and (max-width: 380px) {
  .diagonal-text-container {
    width: 220px;
    height: 44px;
  }
  .diagonal-word {
    font-size: 2.0rem;
  }

  .diagonal-word-services {
    font-size: 2.0rem;
  }
  .hero-rotating-title h1 {
    margin-bottom: 10px;
    text-align: left;
  }
  .main-subtitle {
    display: block;
    font-size: 1.0rem;
    text-align: left;
    margin-top: 4px;
  }

  .hero-description {
    font-size: 0.9rem;
    line-height: 1.4;
    max-width: 320px;
    margin: 0px auto 30px auto;
    text-align: left;
  }

  .hero-image-slices {
    width: 100%;
    max-width: 100%;
    height: 235px;
  }

  .slice {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }

  @keyframes diag3DWords {
    /* 0%:  top-right, behind, smaller, partially transparent */
    0% {
      transform: translate3d(100px, -50px, -50px)
      scale(0.7)
      rotateY(-30deg);
      opacity: 0.3;
    }
    /* 10%: front & center, full size, fully opaque */
    10% {
      transform: translate3d(0, 15px, 0)
      scale(1)
      rotateY(0deg);
      opacity: 1;
    }
    /* 30%: stay center, fully visible */
    30% {
      transform: translate3d(0, 5px, 0)
      scale(1)
      rotateY(0deg);
      opacity: 1;
    }
    /* 40%: exit diagonally bottom-left, fade out a bit */
    40% {
      transform: translate3d(-200px, 50px, -100px)
      scale(0.7)
      rotateY(25deg);
      opacity: 0;
    }
    /* 100%: remain hidden off bottom-left */
    100% {
      transform: translate3d(-200px, 50px, -100px)
      scale(0.7)
      rotateY(25deg);
      opacity: 0;
    }
  }
}

@media only screen and (max-width: 350px) {
  .hero-image-slices {
    width: 100%;
    max-width: 100%;
    height: 220px;
  }

  .slice {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
}