/* =========================================================
   STAR AMBULANCE SERVICE
   RESPONSIVE STYLESHEET
========================================================= */


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   1200px and below
========================================================= */

@media (max-width: 1199.98px) {

    .container {
        max-width: 960px;
    }

    /* Header */

    .main-header .nav-link {
        font-size: 12px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .header-call a {
        padding: 9px 13px;
    }


    /* Hero */

    .hero-content h1 {
        font-size: 54px;
    }

    .hero-image {
        padding: 10px;
    }

    .hero-image img {
        height: 360px;
    }


    /* Services */

    .service-image {
        height: 200px;
    }

}


/* =========================================================
   TABLET
   991px and below
========================================================= */

@media (max-width: 991.98px) {

    .container {
        max-width: 720px;
    }


    /* =====================================================
       EMERGENCY TOP BAR
    ===================================================== */

    .emergency-topbar {
        min-height: 38px;
        font-size: 11px;
    }

    .emergency-message {
        justify-content: center;
    }

    .emergency-contact {
        display: none;
    }


    /* =====================================================
       HEADER / NAVIGATION
    ===================================================== */

    .main-header .navbar {
        min-height: 74px;
    }

    .brand-logo {
        width: 275px;
    }

    .navbar-toggler {
        border: 1px solid var(--border);

        padding: 7px 9px;

        border-radius: 6px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-collapse {
        margin-top: 12px;

        padding: 10px 0 15px;

        border-top: 1px solid #edf0f5;
    }

    .main-header .navbar-nav {
        align-items: flex-start !important;
    }

    .main-header .nav-link {
        width: 100%;

        padding: 9px 0 !important;

        font-size: 13px;
    }

    .main-header .nav-link.active::after {
        display: none;
    }

    .header-call {
        margin-left: 0 !important;

        margin-top: 10px;
    }

    .header-call a {
        width: fit-content;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-section {
        min-height: auto;
    }

    .hero-content {
        padding: 65px 0 25px;
    }

    .hero-content h1 {
        font-size: 50px;

        max-width: 650px;
    }

    .hero-content > p {
        max-width: 620px;
    }

    .hero-image {
        padding: 20px 0 55px;
    }

    .hero-image img {
        height: 330px;

        max-width: 650px;

        margin: 0 auto;
    }

    .hero-highlights {
        margin-top: 25px;

        gap: 25px;
    }


    /* =====================================================
       COMMON SECTION
    ===================================================== */

    .section-padding {
        padding: 65px 0;
    }

    .section-heading h2 {
        font-size: 32px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-content,
    .quick-contact {
        padding: 30px;
    }

    .about-content h2 {
        font-size: 31px;
    }

    .contact-heading {
        margin: -30px -30px 25px;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    .service-image {
        height: 210px;
    }

    .service-content {
        min-height: 205px;
    }


    /* =====================================================
       WHY CHOOSE
    ===================================================== */

    .why-choose-section {
        padding: 50px 0;
    }

    .why-item {
        min-height: 120px;
    }

    .why-item:nth-child(2n) {
        border-right: 0;
    }


    /* =====================================================
       MEDICAL SUPPORT
    ===================================================== */

    .support-card {
        padding: 22px;
    }


    /* =====================================================
       EMERGENCY CTA
    ===================================================== */

    .emergency-cta {
        padding: 35px 0;
    }

    .cta-content {
        margin-bottom: 5px;
    }

    .cta-button {
        height: 100%;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .site-footer {
        padding-top: 50px;
    }

}


/* =========================================================
   MOBILE
   767px and below
========================================================= */

@media (max-width: 767.98px) {

    .container {
        max-width: 540px;
    }


    /* =====================================================
       TOP BAR
    ===================================================== */

    .emergency-topbar {
        min-height: 36px;

        text-align: center;

        padding: 8px 0;
    }

    .emergency-message {
        font-size: 10px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .main-header .navbar {
        min-height: 68px;
    }

    .brand-logo {
        width: 240px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-content {
        padding: 50px 0 20px;
    }

    .hero-label {
        font-size: 15px;
    }

    .hero-content h1 {
        font-size: 43px;

        line-height: 1.05;
    }

    .hero-content > p {
        font-size: 14px;

        line-height: 1.7;
    }

    .hero-buttons {
        gap: 8px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-highlights {
        justify-content: space-between;

        gap: 8px;

        margin-top: 25px;
    }

    .highlight-item {
        flex: 1;

        gap: 7px;

        padding-right: 8px;
    }

    .highlight-item > i {
        font-size: 21px;
    }

    .highlight-item strong {
        font-size: 11px;
    }

    .highlight-item span {
        font-size: 9px;
    }

    .hero-image {
        padding: 10px 0 45px;
    }

    .hero-image img {
        height: 280px;
    }


    /* =====================================================
       SECTION
    ===================================================== */

    .section-padding {
        padding: 55px 0;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading h2 {
        font-size: 28px;
    }

    .section-heading p {
        font-size: 12px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-content,
    .quick-contact {
        padding: 25px;
    }

    .about-content h2 {
        font-size: 28px;
    }

    .about-content p {
        font-size: 13px;
    }

    .about-highlights {
        grid-template-columns: repeat(2, 1fr);

        row-gap: 22px;
    }

    .contact-heading {
        margin: -25px -25px 23px;

        font-size: 19px;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    .service-image {
        height: 220px;
    }

    .service-content {
        min-height: 200px;

        padding: 20px;
    }

    .service-content h3 {
        font-size: 20px;
    }


    /* =====================================================
       WHY CHOOSE
    ===================================================== */

    .why-choose-section {
        padding: 50px 0;
    }

    .why-item {
        min-height: 115px;

        padding: 12px 8px;

        border-right: 1px solid rgba(255, 255, 255, 0.18);
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }

    .why-item:nth-child(2n) {
        border-right: 0;
    }

    .why-item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .why-item i {
        font-size: 27px;
    }

    .why-item strong {
        font-size: 11px;
    }

    .why-item span {
        font-size: 9px;
    }


    /* =====================================================
       MEDICAL SUPPORT
    ===================================================== */

    .support-card {
        padding: 22px;
    }


    /* =====================================================
       EMERGENCY CTA
    ===================================================== */

    .emergency-cta {
        padding: 32px 0;
    }

    .cta-content {
        text-align: center;

        margin-bottom: 10px;
    }

    .cta-content span {
        font-size: 20px;
    }

    .cta-content h2 {
        font-size: 19px;
    }

    .cta-button {
        justify-content: center;
    }


    /* =====================================================
       COVERAGE
    ===================================================== */

    .coverage-list {
        gap: 8px;
    }

    .coverage-list span {
        font-size: 11px;

        padding: 9px 13px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .site-footer {
        padding-top: 45px;
    }

    .footer-brand img {
        width: 175px;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

}


/* =========================================================
   SMALL MOBILE
   575px and below
========================================================= */

@media (max-width: 575.98px) {

    .container {
        width: 100%;

        padding-left: 18px;
        padding-right: 18px;
    }


    /* =====================================================
       TOP BAR
    ===================================================== */

    .emergency-topbar {
        font-size: 9px;
    }

    .emergency-message i {
        font-size: 12px;
    }


    /* =====================================================
       HEADER
    ===================================================== */

    .brand-logo {
        width: 245px;
    }


    /* =====================================================
       HERO
    ===================================================== */

    .hero-content {
        padding: 42px 0 15px;
    }

    .hero-label {
        font-size: 13px;
    }

    .hero-content h1 {
        font-size: 37px;

        margin-bottom: 16px;
    }

    .hero-content > p {
        font-size: 13px;
    }

    .hero-buttons .btn {
        min-height: 46px;

        font-size: 12px;
    }

    .hero-highlights {
        gap: 4px;
    }

    .highlight-item {
        padding-right: 5px;

        gap: 5px;
    }

    .highlight-item > i {
        font-size: 18px;
    }

    .highlight-item strong {
        font-size: 10px;
    }

    .highlight-item span {
        font-size: 8px;
    }

    .hero-image img {
        height: 230px;

        border-radius: 10px;
    }


    /* =====================================================
       COMMON
    ===================================================== */

    .section-padding {
        padding: 48px 0;
    }

    .section-heading h2 {
        font-size: 25px;
    }

    .section-subtitle {
        font-size: 11px;

        letter-spacing: 1px;
    }


    /* =====================================================
       ABOUT
    ===================================================== */

    .about-content,
    .quick-contact {
        padding: 22px;
    }

    .about-content h2 {
        font-size: 26px;
    }

    .about-content p {
        font-size: 12px;
    }

    .about-highlights {
        gap: 18px 8px;
    }

    .about-highlight i {
        font-size: 23px;
    }

    .about-highlight strong {
        font-size: 11px;
    }

    .about-highlight span {
        font-size: 9px;
    }

    .about-location {
        align-items: flex-start;

        font-size: 11px;
    }

    .about-location i {
        font-size: 23px;
    }

    .contact-heading {
        margin: -22px -22px 20px;

        padding: 13px 16px;

        font-size: 17px;
    }

    .quick-contact .form-control,
    .quick-contact .form-select {
        min-height: 44px;

        font-size: 12px;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    .service-image {
        height: 195px;
    }

    .service-content {
        min-height: 190px;

        padding: 18px;
    }

    .service-content h3 {
        font-size: 18px;
    }

    .service-content p {
        font-size: 11px;
    }

    .service-btn {
        padding: 9px 18px;

        font-size: 11px;
    }


    /* =====================================================
       WHY CHOOSE
    ===================================================== */

    .why-item {
        min-height: 105px;
    }

    .why-item i {
        font-size: 24px;
    }


    /* =====================================================
       SUPPORT
    ===================================================== */

    .support-card {
        padding: 20px;
    }

    .support-card i {
        font-size: 32px;
    }

    .support-card h3 {
        font-size: 17px;
    }

    .support-card p {
        font-size: 11px;
    }


    /* =====================================================
       CTA
    ===================================================== */

    .cta-content span {
        font-size: 18px;
    }

    .cta-content h2 {
        font-size: 17px;
    }

    .cta-button {
        padding: 11px 16px;
    }

    .cta-button > i {
        font-size: 25px;
    }

    .cta-button span {
        font-size: 11px;
    }

    .cta-button strong {
        font-size: 17px;
    }


    /* =====================================================
       COVERAGE
    ===================================================== */

    .coverage-list span {
        font-size: 10px;

        padding: 8px 11px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .site-footer h4 {
        font-size: 14px;
    }

    .site-footer a,
    .site-footer p {
        font-size: 10px;
    }

    .footer-bottom {
        font-size: 9px;
    }

}


/* =========================================================
   EXTRA SMALL DEVICES
   400px and below
========================================================= */

@media (max-width: 400px) {

    .hero-content h1 {
        font-size: 33px;
    }

    .hero-highlights {
        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 5px;
    }

    .highlight-item {
        justify-content: center;

        border-right: 0;

        padding-right: 0;

        text-align: center;
    }

    .highlight-item > i {
        display: none;
    }

    .about-content h2 {
        font-size: 24px;
    }

    .section-heading h2 {
        font-size: 23px;
    }

}

/* =========================================================
   HERO SLIDER RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.52) 50%,
                rgba(0, 0, 0, 0.28) 100%
            );
    }

}


@media (max-width: 767.98px) {

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.70) 0%,
                rgba(0, 0, 0, 0.52) 45%,
                rgba(0, 0, 0, 0.32) 100%
            );
    }

}


@media (max-width: 575.98px) {

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.55) 45%,
                rgba(0, 0, 0, 0.35) 100%
            );
    }

}

    .hero-content {
        padding: 70px 0 90px;
    }

    .hero-content h1 {
        font-size: 50px;
    }

    .hero-slider-dots {
        bottom: 20px;
    }




@media (max-width: 767.98px) {

  @media (max-width: 991.98px) {

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.52) 50%,
                rgba(0, 0, 0, 0.28) 100%
            );
    }

}


@media (max-width: 767.98px) {

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.70) 0%,
                rgba(0, 0, 0, 0.52) 45%,
                rgba(0, 0, 0, 0.32) 100%
            );
    }

}


@media (max-width: 575.98px) {

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.72) 0%,
                rgba(0, 0, 0, 0.55) 45%,
                rgba(0, 0, 0, 0.35) 100%
            );
    }

}

    .hero-content {
        padding: 55px 0 90px;
    }

    .hero-content h1 {
        font-size: 43px;
    }

    .hero-content > p {
        font-size: 14px;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-highlights {
        gap: 10px;

        justify-content: space-between;
    }

    .highlight-item {
        padding-right: 10px;

        gap: 6px;
    }

}


@media (max-width: 575.98px) {

    .hero-section {
        min-height: 650px;
    }

    .hero-content {
        padding: 48px 0 95px;
    }

    .hero-label {
        font-size: 13px;
    }

    .hero-content h1 {
        font-size: 37px;
    }

    .hero-content > p {
        font-size: 13px;
    }

    .hero-highlights {
        gap: 5px;
    }

    .highlight-item {
        flex: 1;

        justify-content: center;

        text-align: center;

        border-right: 0;

        padding-right: 0;
    }

    .highlight-item > i {
        display: none;
    }

    .highlight-item strong {
        font-size: 10px;
    }

    .highlight-item span {
        font-size: 9px;
    }

    .hero-slider-dots {
        bottom: 18px;
    }

}

/* =========================================================
   SERVICE DETAILS - RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .service-detail-main-image {
        height: 480px;
    }

    .service-enquiry-card {
        padding: 26px;
    }

}


@media (max-width: 991px) {

    .service-detail-main .row {
        --bs-gutter-y: 35px;
    }

    .service-detail-main-image {
        height: 450px;
    }

    .service-enquiry-card {
        position: static;
    }

}


@media (max-width: 767px) {

    .service-detail-main-image {
        height: 390px;
    }

    .service-detail-content h2 {
        font-size: 31px;
    }

    .service-enquiry-card {
        padding: 24px;
    }

    .service-feature-card {
        padding: 18px;
    }

}


@media (max-width: 575px) {

    .service-detail-main-image {
        height: 300px;
    }

    .service-detail-content h2 {
        font-size: 28px;
    }

    .service-enquiry-card {
        padding: 20px;
    }

    .service-feature-card {
        padding: 16px;
    }

    .service-feature-card span {
        font-size: 13px;
    }

    .service-highlight-card {
        padding: 24px 18px;
    }

}
/* =========================================================
   MEDICAL SUPPORT PAGE - RESPONSIVE
========================================================= */

@media (max-width: 1199px) {

    .medical-support-image img {
        height: 480px;
    }

}


@media (max-width: 991px) {

    .medical-support-intro .row {
        --bs-gutter-y: 35px;
    }

    .medical-support-image img {
        height: 450px;
    }

    .medical-support-page-card {
        padding: 25px;
    }

}


@media (max-width: 767px) {

    .medical-support-image img {
        height: 400px;
    }

    .medical-support-page-card {
        padding: 22px;
    }

    .medical-support-card-content h3 {
        font-size: 20px;
    }

}


@media (max-width: 575px) {

    .medical-support-image img {
        height: 320px;
    }

    .medical-support-actions {
        flex-direction: column;
    }

    .medical-support-actions .btn {
        width: 100%;
    }

    .medical-support-page-card {
        flex-direction: column;
        padding: 20px;
    }

    .medical-support-card-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    .medical-process-card {
        padding: 25px 18px;
    }

}
/* =========================================================
   STAR AMBULANCE - COVERAGE PAGE RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .coverage-intro-section .row {
        --bs-gutter-y: 35px;
    }

    .coverage-page-grid {
        gap: 12px;
    }

    .coverage-page-item {
        min-height: 78px;
    }

}


@media (max-width: 767.98px) {

    .coverage-intro-content {
        max-width: 100%;
    }

    .coverage-intro-action {
        gap: 10px;
    }

    .coverage-intro-action .btn {
        width: 100%;
        justify-content: center;
    }

    .coverage-page-grid {
        grid-template-columns: 1fr;
    }

    .coverage-help-actions .btn {
        width: 100%;
    }

}


@media (max-width: 575.98px) {

    .coverage-intro-point {
        font-size: 14px;
    }

    .coverage-page-item strong {
        font-size: 14px;
    }

    .coverage-page-item span {
        font-size: 10px;
    }

    .coverage-page-item-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

}
/* =========================================================
   CONTACT PAGE - RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    .contact-info-list {
        margin-top: 24px;
    }

    .contact-form-card {
        margin-top: 5px;
    }

}


@media (max-width: 767.98px) {

    .contact-main-section {
        padding-top: 55px;
        padding-bottom: 55px;
    }

    .contact-input input,
    .contact-input select {
        height: 47px;
    }

    .contact-input textarea {
        min-height: 115px;
    }

    .contact-emergency-strip {
        padding: 30px 0;
    }

}


@media (max-width: 575.98px) {

    .contact-info-card {
        gap: 11px;
    }

    .contact-info-arrow {
        display: none;
    }

    .contact-availability-box {
        padding: 14px;
    }

    .contact-page-form .row {
        --bs-gutter-x: 12px;
    }

}
/* =========================================================
   END OF RESPONSIVE.CSS
========================================================= */