@media (max-width: 768px) {
    
 #hover-card {
    max-width: none;            /* let left/right padding define width */
    width: auto;
  }
  .header-logo {

    gap: 0px;
  }
  .first{
    font-size: var(--size-lg)
  }

  .logo-oded {
    height: 45px;
  }
  
  .header-desc {
   
    right: 1.2rem;
}

.footer-logo {
    height: 45px;
}
  
  .work-grid {
      gap: 2rem;
  }
  
  .contact-h1{
    font-size: 20px; 
    font-weight: bold;
}

.work-item {
  flex-direction: column;
  gap: 0rem;
}

  #hamburger {
    width: 68px;
    height: 68px;
  }

  .footer-svg-top {
    top: -7px;
  }

  .footer-content p {
    font-size: 14px;

  }

  .steps-container {
    display: flex;
    flex-direction: column;
  }

  .card {
    gap: 8rem;
    padding-inline: 10px;

  }

  .card p {
    font-size: var(--size-xs);
  }
  
  .slick-dots {
    bottom: -50px;
  }
  
  .service-heading h1 {

  font-size: 2rem;
  font-weight: 600;
  padding-inline:0px;
}

  section {
    margin-bottom: var(--spacing-lg);

    margin-inline: 1rem;
  }


  header {
    height: 4rem;
  }

  .header-desc {
    font-size: 10px;
  }

  #hero-text span {
    font-size: var(--size-xl);

  }

  #hero-text {
    line-height: 40%;
  }
  
   #hero-section {
    padding:0px;
    /*line-height: 0px;*/
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: flex-start;
     height: auto;
    max-width: auto;
      width: 83%;
    margin: auto;
}
 
  .site-header {
    width: auto !important;
    flex-direction: column;
  }

  .footer-logo a h1 {
    font-size: 30px;
    letter-spacing: -7px;
  }

  .work-service {

    font-size: 10px;
  }

  .work-page {
    padding: 0px;
    padding-left: 0px;

  }
  .work-client .client-name {
           font-size: 42px;
        text-align: end;
        font-weight: semibold;
  }

  .contact-button {
    font-size: 15px;
  }

  .hover-card .card-content p {
    font-size: 12px;
    /* Reduce font size */
  }

  .new-badge {
    font-size: 6px;
  left: 11rem;
  }
  
  body {
  min-height: 0 !important;
    }


  }
  
  @media (max-width: 768px), (pointer: coarse){
  #hover-card{
    position: fixed;                     /* ignore page flow */
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom) + 12px);
    top: auto;                           /* ensure we're not using 'top' */
    transform: translateX(-50%);         /* centered */
    width: min(92vw, 420px);
    max-height: fit-content;                    /* keep it compact */
    padding: 14px;
    border-radius: 16px;
  }

  /* tighter type on mobile */
  .hover-card .card-content p{
    font-size: clamp(12px, 3.5vw, 16px);
    line-height: 1.4;
  }

  /* image scales within sheet */
  #card-image{
    max-height: 24vh;
    border-radius: 10px;
  }
}