/* Mobile Styles */
@media screen and (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: flex !important;
  }
  
  .call-to-action-container {
    padding: 12px 16px;
    justify-content: unset;
  }

  .call-to-action {
    column-gap: unset;
  }

  .call-to-action-text {
    max-width: 172px;
    font-size: 16px;
    font-weight: 700;
  }

  .call-to-action-image-container {
    max-width: 192px;
  }

  .header-right {
    display: none;
  }

  header {
    padding: 8px 16px;
  }

  .header-logo {
    max-width: 54px;
  }

  .header-left {
    column-gap: 12px;
  }

  .header-text-title {
    font-size: 14px;
    font-weight: 700;
  }

  .header-text-subtitle {
    font-size: 10px;
    font-weight: 400;
  }

  .navigation {
    display: none;
  }

  .service-info-n-contact-button {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
    width: fit-content;
  }

  .service-info-n-contact-button-line {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 12px;
  }

  .service-info-n-contact-button-icon {
    max-width: 16px;
  }

  .service-info-n-contact-button-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .service-info-n-contact-button-line-icon {
    max-width: 16px;
  }

  .service-info-n-contact-button-line-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .service-info-n-contact-button-wrapper {
    margin-top: 0;
    width: fit-content;
  }

  .service-info-n-contact-button-line-wrapper {
    margin-top: 0;
    width: fit-content;
  }

  /* Hero banner */
  .hero-banner {
    background-image: url('../images/service-herobanner-bg-mb.png');
    height: 160px;
    padding: 18px 16px;
  }

  .hero-banner__title-container {
    margin-top: 24px;
  }

  .hero-banner__ai-group-logo-container {
    display: none;
  }

  .hero-banner__title {
    font-size: 32px;
    font-weight: 900;
    flex: 1;
  }

  /* Service section */
  .service-section {
    padding: 32px 16px 0 16px;
  }

  .service-section-title {
    font-size: 32px;
    font-weight: 900;
  }

  .service-section-content {
    margin-top: 16px;
    grid-template-columns: repeat(1, 1fr);
    row-gap: 16px;
  }

  .service-card {
    padding: 24px 16px;
    column-gap: 24px;
    flex-direction: column;
    height: unset;
    row-gap: 15px;
  }

  .service-card-title {
    font-size: 24px;
    font-weight: 900;
  }

  .service-card-description {
    font-size: 16px;
    font-weight: 500;
  }

  .service-card-text {
    margin-top: 12px;
    font-size: 14px;
    font-weight: 400;
  }

  .service-card-image {
    max-width: unset;
  }

  .service-card-image__caret-icon {
    max-width: 24px;
    height: 24px;
  }

  #service-card-1 {
    order: 1;
  }

  #service-card-2 {
    order: 2;
  }

  #service-card-3 {
    order: 4;
  }

  #service-card-4 {
    order: 3;
  }

  /* Service Info and Contact Section */
  .service-info-n-contact {
    padding: 40px 16px;
  }

  .service-info-n-contact-container {
    border-radius: 24px;
    background-image: url('../images/service-info-n-contact-bg-mobile.webp');
    height: 494px;
  }

  .service-info-n-contact-section {
    padding: 0px;
  }

  .service-info-n-contact-phone {
    padding: 12px 16px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .service-info-n-contact-phone-icon {
    max-width: 24px;
  }

  .service-info-n-contact-phone-number {
    font-size: 24px;
    font-weight: 900;
  }

  .service-info-n-contact-header {
    font-size: 32px;
    font-weight: 900;
  }

  .service-info-n-contact-location {
    font-size: 20px;
    font-weight: 700;
  }

  .service-info-n-contact-wrapper {
    padding: 0 16px;
  }

  .service-info-n-contact-subheader {
    font-size: 16px;
    font-weight: 500;
    margin-top: 12px;
    max-width: 168px;
  }

  .service-and-contact-info-button-container {
    flex-direction: column;
    margin-top: 12px;
    row-gap: 12px;
  }

  /* Footer */
  footer {
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
  }

  .footer-top-container {
    flex-direction: column;
  }
  
  .footer-top-wrapper {
    padding: 40px 16px 32px 16px;
  }

  .footer-logo-text {
    font-size: 24px;
    font-weight: 900;
  }

  .footer-location {
    font-size: 20px;
    font-weight: 700;
  }

  .footer-address {
    margin-top: 16px;
  }

  .footer-address-icon {
    max-width: 20px;
  }

  .footer-address-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-address-info {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
  }

  .footer-phone-icon {
    max-width: 20px;
  }

  .footer-phone-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-phone-label {
    font-size: 14px;
    font-weight: 400;
  }

  .footer-phone-info {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
  }

  .footer-hours-icon {
    max-width: 20px;
  }

  .footer-hours-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .footer-hours-label {
    font-size: 14px;
    font-weight: 400;
  }

  .footer-hours-info {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
  }

  .footer-links-container {
    margin-top: 24px;
  }

  .footer-link {
    font-size: 16px;
    font-weight: 500;
  }

  .footer-bottom-wrapper {
    padding: 24px 16px;
  }

  .footer-bottom-container {
    row-gap: 6px;
  }

  .footer-bottom-header {
    font-size: 16px;
    font-weight: 700;
  }

  .footer-bottom-link {
    font-size: 14px;
    font-weight: 400;
  }
}