#wave-box {
  min-height: 100px;
}

.c-primary {
    color: #47337b
}

main {
  margin: 0;
  padding: 0;
  color: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

main>div {
  display: inline-block;
  width: 3px;
  height: 60px;
  margin: 0 6px;
  background: currentColor;
  transform: scaleY(.5);
  opacity: .25;
}

main.error {
  color: #f7451d;
  min-width: 20em;
  max-width: 30em;
  margin: 0 auto;
  white-space: pre-line;
}

.instructions {
    margin-top: 40px !important;
}

@media (max-width: 1099px) {
    #tutorial-text {
        display: none !important;
    }

    #wave-box {
      min-height: 0;
    }

}

@media (max-width: 991px) {
  .instructions {
      margin-top: -10px !important;
  }


}

@media only screen and (min-width: 769px) and (max-width: 1299px) {
    main>div {
        margin: 0 4px;
    }


}

#switch-modes {
    margin: -40px 0 10px 10px;
    padding: 0;
}

.status_show {
    display: block;
}

.status_hide  {
    display: none;
}



 .auth-toggle {
        display: flex;
        margin-bottom: 20px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 4px;
    }

    .toggle-btn {
        flex: 1;
        text-align: center;
        padding: 10px;
        border: none;
        background: transparent;
        color: white;
        cursor: pointer;
        border-radius: 6px;
        transition: background-color 0.3s;
    }

    .toggle-btn.active {
        background: rgba(255, 255, 255, 0.2);
        font-weight: 600;
    }

    .banner_section {
        flex: 1;
        display: flex;
        padding-top: 89px;
        flex-direction: column;
        height: 100vh;
        align-items: center;
        justify-content: center;
    }

    .slider-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        aspect-ratio: 4 / 3;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .slider-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

    .context-box {
        background-color: #f4f4f4;
        color: #000;
        padding: 20px;
        position: absolute;
        bottom: 0;
        right: 0;
        max-width: 300px;
        border-radius: 20px 0 0 0;
    }

    .tabs {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 10px 20px;
        background-color: #121216;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }
    .clinic_banner {
        /* height: auto; */
        /* max-height: 300px; */
        border-radius: 10px;
        max-width: 100%;
        min-width: 100%;
        /* object-fit: fill; */
    }

    .tab {
        display: flex;
        align-items: center;
        gap: 8px;
        background-color: transparent;
        color: #ffffffcc;
        padding: 10px 18px;
        border-radius: 10px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    .tab.active {
        background-color: #f8e8d2;
        color: #000;
        font-weight: 600;
    }
    @media (max-width: 768px) {
        .banner_section {
            height: auto;
        }
        .slider-container {
            max-width: 100%;
            /* Let height grow with content so CTA never gets clipped */
            aspect-ratio: auto;
            height: auto;
            overflow: visible;
        }
        .tabs {
        display: none
        }
    }