/* Mobile devices (320px - 480px) */
@media screen and (max-width: 480px) {
    .hero-content {
        flex-direction: column;
    }
    .hero-caption {
        align-items: center;
        text-align: center;
    }
    h1, .h1 {
        font-size: 2.25rem;
    }
    h2, .h2 {
        font-size: 1.45rem;
    }
    h3, .h3 {
        font-size: 1.40rem;
    }
    h4, .h4 {
        font-size: 1.25rem;
    }
    h5, .h5 {
        font-size: 1rem;
    }
    h6, .h6 {
        font-size: 12px;
    }
    p {
        font-size: .875rem;
    }
    .main-btn {
        font-size: .875rem;
    }
    .footer-menu li {
        font-size: .875rem;
    }
    .conditions-tabs {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    #conditions .section-header p {
        font-size: .875rem;
    }
    .condition-card {
        padding: 1.5rem 1.25rem;
    }
    .condition-card h3 {
        font-size: 1.25rem;
    }
    .facilities-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .facilities-info h2 {
        font-size: 1.75rem;
    }
    .facility-image-wrapper {
        max-width: 100%;
    }
    .travel-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .travel-left h2 {
        font-size: 1.75rem;
    }
    .travel-card {
        padding: 1.25rem;
    }
    .clinic-address-card {
        padding: 1.5rem;
    }
    .testimonial-card {
        padding: 1.5rem 1rem;
    }
    .testimonial-text {
        font-size: .9375rem;
    }
    .testimonial-author {
        font-size: 1rem;
    }
}

/* iPads and Tablets (481px - 768px) */
@media screen and (min-width: 481px) and (max-width: 768px) {
    .hero-content {
        flex-direction: column;
    }
    .hero-caption {
        align-items: center;
        text-align: center;
    }
    h1, .h1 {
        font-size: 2.25rem;
    }
    h2, .h2 {
        font-size: 1.45rem;
    }
    h3, .h3 {
        font-size: 1.40rem;
    }
    h4, .h4 {
        font-size: 1.25rem;
    }
    h5, .h5 {
        font-size: 1rem;
    }
    h6, .h6 {
        font-size: 12px;
    }
    p {
        font-size: .875rem;
    }
    .main-btn {
        font-size: .875rem;
    }
    .footer-menu li {
        font-size: .875rem;
    }
    .conditions-tabs {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .facilities-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .facilities-info h2 {
        font-size: 2rem;
    }
    .travel-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .travel-left h2 {
        font-size: 2rem;
    }
}

/* Small screens and laptops (769px - 991px) */
@media screen and (min-width: 769px) and (max-width: 991px) {
    .hero-content {
        flex-direction: column;
    }
    .hero-caption {
        align-items: center;
        text-align: center;
    }
    h1, .h1 {
        font-size: 2.25rem;
    }
    h2, .h2 {
        font-size: 1.45rem;
    }
    h3, .h3 {
        font-size: 1.40rem;
    }
    h4, .h4 {
        font-size: 1.25rem;
    }
    h5, .h5 {
        font-size: 1rem;
    }
    h6, .h6 {
        font-size: 12px;
    }
    p {
        font-size: .875rem;
    }
    .custom-header .navbar-nav .nav-link {
        font-size: .875rem;
    }
    .main-btn {
        font-size: .875rem;
    }
    .footer-menu li {
        font-size: .875rem;
    }
    .conditions-tabs {
        grid-template-columns: repeat(2, 1fr);
    }
    .facilities-grid {
        gap: 2.5rem;
    }
    .travel-grid {
        gap: 2.5rem;
    }
}

/* Desktops and large screens (992px - 1024px) */
@media screen and (min-width: 992px) and (max-width: 1024px) {
    h1, .h1 {
        font-size: 2.5rem;
    }
    h2, .h2 {
        font-size: 1.5rem;
    }
    h3, .h3 {
        font-size: 1.40rem;
    }
    h4, .h4 {
        font-size: 1.25rem;
    }
    h5, .h5 {
        font-size: 1rem;
    }
    h6, .h6 {
        font-size: 12px;
    }
    p {
        font-size: .875rem;
    }
    .main-btn {
        font-size: .875rem;
    }
    .footer-menu li {
        font-size: .875rem;
    }
}

/* Extra large screens (1025px - 1200px) */
@media screen and (min-width: 992px) and (max-width: 1200px) {
    h1, .h1 {
        font-size: 2.5rem;
    }
}