/* Paste ALL your responsive CSS here from style.css:
   - All @media (max-width: ...) blocks
   - All mobile/tablet specific styles
   - No need to keep any responsive code in style.css now */

/* Example:
@media (max-width: 900px) {
    .main-header,
    .boardsmedi-specialities-section,
    .boardsmedi-why-section,
    .boardsmedi-ecg-carousel-section {
        padding-left: 2px;
        padding-right: 2px;
    }
    ...
}
*/

/* Your responsive.css now contains ALL responsive styles for the site! */

/* Responsive for Boardsmedi sections */

/* Banner Section */
@media (max-width: 1100px) {
    .banner-bg {
        flex-direction: column-reverse;
        align-items: flex-start;
        padding: 28px 8px 18px 8px;
        gap: 18px;
    }

    .banner-content h1 {
        font-size: 1.3rem;
    }

    .banner-content p {
        font-size: 1rem;
    }

    .banner-img img,
    .banner-img svg {
        width: 100%;
        border-radius: 10px;
        height: auto;
        max-width: 100%;
    }
}

/* Specialities Section */
@media (max-width: 1100px) {

    .speciality-card {
        min-width: 0;
        max-width: 100%;
        padding: 18px 14px;
        border-radius: 32px;
        flex-direction: row;
        gap: 16px;
    }

    .speciality-icon-fa {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        font-size: 1.3rem;
    }

    .speciality-title {
        font-size: 1.1rem;
    }

    .speciality-count {
        font-size: 0.95rem;
    }

    .speciality-arrow {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

/* Why Choose Section */
@media (max-width: 900px) {
    .why-container {
        flex-direction: column;
        gap: 24px;
        padding: 0 12px 24px 12px;
    }

    .why-left,
    .why-right {
        min-width: 0;
        width: 100%;
    }

    .why-img-lg,
    .why-img-sm {
        width: 100%;
        border-radius: 10px;
        height: auto;
        max-width: 100%;
    }

    .why-img-sm-group {
        flex-direction: row;
        gap: 8px;
    }

    .why-feature-card {
        min-width: 140px;
        max-width: 100%;
        padding: 18px 10px;
        border-radius: 18px;
    }
}

/* ECG Carousel Section */
@media (max-width: 900px) {
    .container-ecg-carousel {
        padding: 18px 6px 12px 6px;
        border-radius: 14px;
    }

    .ecg-carousel-title {
        font-size: 1.3rem;
    }

    .ecg-carousel-subtitle {
        font-size: 1rem;
    }

    .ecg-carousel-arrow {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }

    .ecg-img-card,
    .ecg-img-card img {
        height: 110px;
        border-radius: 8px;
    }
}

/* Video Section Split */
@media (max-width: 1100px) {
    .boardsmedi-video-section.split {
        flex-direction: column;
        gap: 24px;
        padding: 24px 0 18px 0;
    }

    .video-content-left,
    .video-content-right {
        max-width: 100%;
        width: 100%;
        border-radius: 16px;
        padding: 24px 12px;
    }

    .boardsmedi-video {
        min-height: 160px;
        max-height: 220px;
        border-radius: 12px;
    }

    .video-content-left h3 {
        font-size: 1.2rem;
    }

    .video-content-left p {
        font-size: 1rem;
    }
}

/* CTA Section */
@media (max-width: 900px) {
    .cta-section {
        padding: 24px 8px 18px 8px;
        border-radius: 14px;
    }

    .cta-content h2 {
        font-size: 1.2rem;
    }

    .cta-content p {
        font-size: 1rem;
    }
}

/* Footer */
@media (max-width: 900px) {
    .footer-main {
        flex-direction: column;
        gap: 24px;
        padding: 0 12px 24px 12px;
    }

    .footer-brand img {
        width: 130px;
    }

    .footer-links,
    .footer-contact {
        min-width: 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        padding: 12px 8px;
    }
}

@media (max-width: 600px) {

    .main-header,
    .boardsmedi-specialities-section,
    .boardsmedi-why-section,
    .boardsmedi-ecg-carousel-section {
        padding-left: 2px;
        padding-right: 2px;
    }

    .specialities-header h2,
    .why-right h2,
    .ecg-carousel-title {
        font-size: 1.1rem;
    }

    .carousel-caption {
        padding: 18px 8px;
    }

    .boardsmedi-video-section,
    .cta-section {
        padding: 12px 2px;
    }

    #scrollToTopBtn {
        right: 12px;
        bottom: 12px;
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {
    .top-header {
        display: none;
    }

    .main-header {
        padding: 5px 5px;
    }

    .hamburger span {
        height: 3px;
        width: 26px;
        margin: 3px 0;
    }

    .header_Login {
        display: none;
    }

    .banner-img {
        width: 100%;
        flex: auto;
    }

    .banner-content h1 {
        margin-bottom: 7px;
        line-height: 35px;
        font-size: 22px !important;
    }

    .header_Logo img {
        height: 47px;
    }

    .banner-content h1 {
        font-size: 1.2rem;
    }

    .banner-content p {
        font-size: 0.95rem;
    }

    .speciality-title {
        font-size: 1rem;
    }

    .speciality-count {
        font-size: 0.9rem;
    }

    .why-feature-card {
        min-width: 120px;
        padding: 16px 8px;
    }

    .speciality-card {
        min-width: 0;
        max-width: 48%;
        padding: 10px 8px;
        border-radius: 10px;
        flex-direction: row;
        gap: 16px;
        height: auto;
        /* max-height: 300px!important; */
    }

    .specialities-list {
        gap: 12px;
    }

    .speciality-card {
        display: block;
    }

    .speciality-icon-fa {
        margin: 0 auto;
    }

    .speciality-count {
        font-size: 12px !important;
    }

    .why-img-lg,
    .why-img-sm {
        height: 220px;
    }

    .why-img-sm-group {
        justify-content: space-between !important;
        gap: 0px;
    }

    .why-img-sm-group img {
        width: 48%;
        height: 138px;
        justify-content: space-between;
    }

    .why-badge {
        font-weight: 700;
        padding: 3px 10px;
        border-radius: 3px;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .why-right p {
        font-size: 13px;
    }

    .why-right h2 {
        font-size: 19px;
    }

    .why-feature-desc {
        font-size: 12px;
    }

    .why-feature-icon {
        margin: 0 auto 6px auto;
    }

    .why-features {
        gap: 10px;
        margin-top: 0;
        padding: 0 7px;
    }

    .boardsmedi-ecg-carousel-section {
        border-radius: 0;
        margin: 0 auto 0 auto;
        max-width: 100%;
        padding: 4px 10px 9px 10px;
    }

    .video-content-left {
        flex: auto;
        max-width: 100%;
        background: #fff;
    }

    .footer-brand {
        flex: auto;
        min-width: 100%;
    }

    .loader-spinner {
        width: 50px;
        height: 50px;
    }

    .loader-text {
        font-size: 13px;
    }

    .boardsmedi-specialities-section,
    .boardsmedi-specialities-section,
    .boardsmedi-why-section,
    .video-content-left,
    .video-content-right,
    .boardsmedi-video-section,
    .ecg-banner-section,
    .ecg-banner-section,
    .ecg-banner-section,
    .boardsmedi-ecg-carousel-section,
    .cta-section,
    .boardsmedi-footer {
        border-radius: 0;
    }

    .boardsmedi-why-section {
        padding: 25px 0 32px 0;
    }
}