* {
      box-sizing: border-box;
    }

    /*body {*/
    /*  background-color: #f0f4f8;*/
    /*  margin: 0;*/
    /*  font-family: 'Raleway', sans-serif;*/
    /*}*/

    /*.container {*/
    /*  width: 100%;*/
    /*  max-width: 800px;*/
    /*  margin: 50px auto;*/
    /*  padding: 20px;*/
    /*  background-color: #fff;*/
    /*  border-radius: 10px;*/
    /*  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
    /*}*/
label {
     color: #2e2f32;
     font-size: .875rem;line-height: 1.25rem;    font-weight: 700;
}
    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #0a9a73;
    }

    h5 {
      text-align: center;
      margin-top: 5px;
      color: #2e2f32;
    }

    p {
      margin-bottom: 10px;
      color: #6b7280;
      text-align: center;
    }

    input, select {
      width: 100%;
      padding: 10px;
      margin-top: 0px;
      margin-bottom: 17px;
      font-size: 14px;
      border: 1px solid #2e2f32;
      border-radius: 5px;
    }

    input.invalid {
      background-color: #ffdddd;
    }

    button {
      background-color: #0a9a73;
      color: white;
      /*padding: 12px 20px;*/
      padding: 4px 27px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      margin: 10px 5px;
    }

    button:hover {
      background-color: #4ea58b;
    }

    #prevBtn {
      background-color: #9ca3af;
    }

    .step {
      height: 15px;
      width: 15px;
      margin: 0 5px;
      background-color: #d1d5db;
      border-radius: 50%;
      display: inline-block;
      opacity: 0.5;
    }

    .step.active {
      opacity: 1;
    }

    .step.finish {
      background-color: #1d4ed8;
    }

    .tab {
      display: none;
    }

    .checkbox-group {
      /*display: flex;*/
      /*flex-wrap: wrap;*/
      /*gap: 15px;*/
    }

    .checkbox-group div {
      /*flex: 1 1 calc(50% - 10px);*/
      /*display: flex;*/
      /*align-items: center;*/
    }

    input[type="checkbox"] {
      margin-right: 5px;
      transform: scale(1.2);
      accent-color: #1d4ed8;
    }

    .birthdate-row {
      display: flex;
      gap: 10px;
    }

    .learn-more {
      display: flex;
      align-items: center;
      background-color: #e0f2fe;
      border-radius: 8px;
      padding: 10px;
      margin-top: 20px;
    }

    .learn-more img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }

    .learn-more p {
      margin: 0;
      font-size: 14px;
      color: #1e3a8a;
    }

    .learn-more a {
      color: #2563eb;
      text-decoration: none;
      font-weight: 500;
    }

    .learn-more a:hover {
      text-decoration: underline;
    }
    .calendar-container {
  margin: 20px 0;
}

.week-nav {
  /*display: flex;*/
  justify-content: space-between;
  margin-bottom: 10px;
}

.days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.day {
  /*background-color: #e0e0e0;*/
  border:1px solid black;
  padding: 15px;
  border-radius: 4px;
  text-align: center;
}

.day h3 {
  margin-bottom: 10px;
}

.day button {
  display: block;
  /*width: 100%;*/
  margin-top: 5px;
  padding: 10px;
  background-color: #4ea58b;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.day button:hover {
  background-color: #004494;
}

.continue-btn {
  margin-top: 20px;
  background-color: #28a745;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
  
  
    .address-container {
      display: none; /* Initially hidden */
      margin-top: 15px;
    }
 
    iframe {
      width: 900px !important; /* Responsive iframe */
      height: 500px;
      border: 0;
    }
      @media (max-width: 375px) {
      h1 {
        font-size: 20px;
      }

      .learn-more img {
        width: 25px;
        height: 25px;
      }
      .checkbox-group div {
        gap: 10px;
      }
    }

    @media (max-width: 320px) {
      p {
        font-size: 14px;
      }

      .checkbox-group div {
        gap: 10px;
      }
    }
    @media (max-width: 425px) {
      .checkbox-group div {
        width: 100%; /* Full width on small screens */
        justify-content: start;
        gap: 20px;
      }



.card {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px;
}

.icon {
    margin-right: 20px;
}

.icon img {
    width: 20px;
    height: 20px;
}

.text h2 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.text p {
    color: #666;
    font-size: 14px;
}


.time-btn {
    transition: background-color 0.3s ease;
    cursor: pointer;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px 0;
}

.time-btn:hover {
    background-color: #f0f0f0;
}

    }  
    #formStep2 {
    padding: 20px;
    font-family: Arial, sans-serif;
}
#formStep21 {
    /*padding: 20px;*/
    font-family: Arial, sans-serif;
}


    .checkbox-group {
        display: flex;
        flex-direction: column;
        /*gap: 10px;*/
    }

    .c {
        display: flex;
        align-items: center;
        gap: 10px; /* Space between checkbox and label */
    }

    .c input[type="checkbox"] {
           width: 14px;
    height: 14px;
    }

    .c label {
        font-size: 16px;
    }

    /* Optional: style for buttons */
    button {
        padding: 10px 20px;
        margin-top: 20px;
        font-size: 16px;
        cursor: pointer;
    }


/* Button styling */
button {
    margin-top: 20px;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
   
}
@media (max-width: 768px) {
    input[type="checkbox"] {
        margin-right: -320px;
        transform: scale(1.2);
        accent-color: #1d4ed8;
    }
}
@media (max-width: 425px) {
    input[type="checkbox"] {
        margin-right: -304px;
        transform: scale(1.2);
        accent-color: #1d4ed8;
    }
}
@media (max-width: 375px) {
    input[type="checkbox"] {
        margin-right: -280px;
        transform: scale(1.2);
        accent-color: #1d4ed8;
    }
}
@media only screen and (max-width: 320px) {
    input[type="checkbox"] {
        margin-right: 5px;
        transform: scale(1.2);
        accent-color: #1d4ed8;
    }
}


 /*Medi*/
 @media (max-width: 768) {
    #table-headers {
        /* Your styles for mobile screens go here */
      
        padding: 8px;    /* Example: Adjust padding */
        display: block;  /* Example: Stack headers vertically */
        text-align: center; 
        width: 18%;
        font-size: 12px;/* Example: Center align text */
    }
    #time-slots {
        /* Add your styles here */
        display: block; /* Example: change display */
        font-size: 15px; /* Example: adjust font size */
        padding: 10px; /* Example: add padding */
        width: 16%;
        /* Add other styles as needed */
    }
      .time-btn {
                width: 43px;
        font-size: 11px;
    }
}
@media (max-width: 425px) {
    #table-headers {
        /* Your styles for mobile screens go here */
      
        padding: 8px;    /* Example: Adjust padding */
        display: block;  /* Example: Stack headers vertically */
        text-align: center; 
        width: 16%;
        font-size: 10px;/* Example: Center align text */
    }
    #time-slots {
        /* Add your styles here */
        display: block; /* Example: change display */
        font-size: 14px; /* Example: adjust font size */
        padding: 10px; /* Example: add padding */
        width: 14%;
        /* Add other styles as needed */
    }
      .time-btn {
                width: 40px;
        font-size: 9px;
    }
}
@media (max-width: 320px) {
    #table-headers {
        /* Your styles for mobile screens go here */
      
        padding: 8px;    /* Example: Adjust padding */
        display: block;  /* Example: Stack headers vertically */
        text-align: center; 
        width: 14%;
        font-size: 9px;/* Example: Center align text */
    }
    #time-slots {
        /* Add your styles here */
        display: block; /* Example: change display */
        font-size: 14px; /* Example: adjust font size */
        padding: 10px; /* Example: add padding */
        width: 14%;
        /* Add other styles as needed */
    }
      .time-btn {
                width: 36px;
        font-size: 8px;
    }
}
 .error-message {
            color: red;
            font-size: 0.875rem; /* Adjust font size */
            margin-top: 5px; /* Add spacing between the input and error message */
            display: block; /* Ensures the message appears on a new line */
        }
        .invalid {
        border-color: red; /* Highlight invalid input fields with a red border */
    }
    
    
     .scheduler {
            display: flex;
            width: 100%;
            max-width: 1200px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .calendar-section,
        .slots-section {
            padding: 20px;
            flex: 1;
        }

        .calendar-section {
            border-right: 1px solid #ddd;
        }

        .calendar {
            text-align: center;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .day,
        .date {
            padding: 10px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }

        .day {
            font-weight: bold;
        }

        .date {
            background: #f9f9f9;
        }

        .date:hover {
            background: #e0e0e0;
        }

        .date.selected {
            background: #4caf50;
            color: #fff;
        }

        .date.disabled {
            background: #ddd;
            color: #999;
            pointer-events: none;
            cursor: not-allowed;
        }

        .slots-section {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h2 {
            margin-bottom: 20px;
        }

        .slot-button {
            margin: 5px;
            padding: 10px 20px;
            background-color: #2196f3;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: block;
            width: 100%;
            text-align: center;
        }

        .slot-button:hover {
            background-color: #1e88e5;
        }

        .slot-button.selected {
            background-color: #4caf50;
        }