@media (max-width: 1024px) {
    #page-logo {
        height: 100px;
    }

    .tagline {
        font-size: 28px;
    }

    .flex-buttons {
        flex-direction: column;
        align-items: start;
    }

    form
    {
        padding: 0 16px;
    }

    .first-div {
        min-height: 500px;
    }

    .services-section {
        padding: 45px 15px;
    }

    .second-div {
        padding: 32px 32px;
    }

    .contact-container {
        flex-direction: column-reverse;
        /* gap: 32px; */
        align-items: center;
    }

    .contact-section {
        padding: 40px 40px;
    }

    .contact-heading {
        text-align: center;
        font-size: 1.75rem;
    }

    #email-form-container {
        width: 100% !important;
        padding: 10px;
    }

    .contact-text,
    .contact-image {
        flex: 1 1 100%;
        max-width: 100%;
        padding: 0;
        text-align: center;
    }



    .contact-para {
        margin: 0 auto 20px;
        padding: 0 12px;
    }

    .contact-img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .today-info,
    #weekly-hours-list li {
        justify-content: center;
    }
   .clinic-section,.body-padding{
    padding: 40px 40px;
   }
   .clinic-container {
        flex-direction: column;
        align-items: stretch; /* optional: make children take full width */
    }
    .clinic-text{
      max-width: 100%;
    }
    .para-content{
      margin-top: 20px;
      margin-left: 0;
    }
        .contact-us-section {
        padding: 00px;
    }
    .clinic-image{
      margin: 0 auto 30px auto;

    }
        .custom-flex-layout {
        flex-direction: column-reverse; /* Stack horizontally on medium+ screens */
        align-items: flex-start;
    }
    .custom-flex-layout2{
        flex-direction: column-reverse; /* Stack horizontally on medium+ screens */
        align-items: flex-start;
    }

    .custom-right-image {
        width: 100%; /* Give each section 50% width */
        margin:0 auto;
    }
    .s-50{
      width: 100%;
          text-align: center;

    }
    .full-center {
     padding: 1rem 1rem;
}
.timesheet-container{
  flex-direction: column;
}
.tagline {
    font-size: 36px;
}
.service-icon{
  max-width: 200px;
  max-height: 200px;
}
}
@media (max-width: 480px) {
  .body-padding,.clinic-section{
    padding: 20px 20px;
   }
  /* Further reduce logo height */
  #page-logo {
    height: 80px;
  }
.para-content{
  font-size: 14px;
}
  /* Smaller tagline font */
  .tagline {
    font-size: 20px;
     line-height: 1.4em;
  }

  /* Flex buttons stacked vertically, full width */
  .flex-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Remove side padding for tighter space */
  form{
    padding: 0 12px;
  }
.full-center {
  padding: 0.5rem 0.5rem;
}
  /* Reduce minimum height */
  .first-div {
    min-height: 400px;
  }

  /* Less padding on services */
  .services-section {
    padding: 30px 10px;
  }

  /* Reduce padding on second div */
  .second-div {
    padding: 20px;
  }

  /* Stack contact container vertically and center */
  .contact-container {
    flex-direction: column;
    align-items: center;
  }

  /* Less padding for contact section */
  .contact-section {
    padding: 25px 20px;
  }

  /* Contact heading smaller and centered */
  .contact-heading {
    font-size: 1.5rem;
    text-align: center;
  }

  /* Email form full width with minimal padding */
  #email-form-container {
    width: 100% !important;
    padding: 8px;
  }

  /* Contact text and image full width, no padding */
  .contact-text,
  .contact-image {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
    text-align: center;
  }

  /* Contact paragraph margin reduced */
  .contact-para {
    margin: 0 auto 15px;
    padding: 0 8px;
  }

  /* Images responsive */
  .contact-img {
    width: 100%;
    height: auto;
  }

  /* Center list items in weekly hours */
  .today-info,
  #weekly-hours-list li {
    justify-content: center;
  }
  .container-content {
    margin-left:35px;
  }
  .custom-button{
          padding: 15px 15px;
        font-size: 12px;
    
  }
#page-logo {
    height: 80px;
}
#pdf-canvas{
  max-width: 250px;
}
}
@media (min-width: 768px) {
    .vacancy-grid {
        grid-template-columns: repeat(3, 1fr);
    }


}@media (min-width: 640px) {
.service-card {
flex: 1 1 calc(50% - 40px);
max-width: calc(50% - 40px);
}
}

@media (min-width: 1024px) {
.service-card {
flex: 1 1 calc(25% - 40px);
max-width: calc(25% - 30px);
}
}
@media (min-width: 768px) {
    .vacancy-grid {
        grid-template-columns: repeat(3, 1fr);
    }


}
@media (max-width: 1023px) {
    .attachments {
        gap: 320px;
    }
}

/* Medium screens (768px and down - tablets) */
@media (max-width: 768px) {
    .attachments {
        gap: 370px;
    }
}

/* Small screens (480px and down - phones) */
@media (max-width: 480px) {
    .attachments {
        flex-direction: column;
        gap: 20px;
    }
}
@media (max-width: 768px) {
    .custom-input {
        padding: 18px 14px 14px 14px !important;
        font-size: 14px;
    }

    .custom-input::placeholder {
        font-size: 14px;
    }
}