@media screen and (max-width:1450px) {
    .banner-section img {
        width: 100%;
        height: 366px;
        object-fit: cover !important
    }

    .card.appointment-card {
        border-radius: 23px;
        box-shadow: 0 5px 6.800000190734863px 0 #00000069;
        position: relative;
        top: -13px;
        right: -147px;
        margin: auto 37px
    }

    .overviewImg img {
        width: 100%;
        height: 395px;
        border-radius: 50%;
        object-fit: contain
    }

    .faqs-section .card {
        border-radius: 0;
        border-bottom: 1px solid var(--light-blue);
        border-top: 0;
        border-left: 0;
        border-right: 0
    }

    section.faqs-section .card-header {
        padding: 0;
        border: none;
        background: var(--theme-color);
        border-radius: 0
    }

    section.hero-section .owl-nav button {
        position: absolute;
        left: 10px;
        top: 30% !important
    }
}

@media screen and (max-width:1366px) {
    section.hero-section .owl-nav button {
        position: absolute;
        left: 10px;
        top: 30% !important
    }

    .side-ribbon {
        top: 70% !important;
        padding: 5px
    }

    .navbar-brand img {
        max-width: 60%;
        height: auto;
        object-fit: contain;
        margin-left: 56px
    }

    .sliderContent h1 {
        font: 700 26.5px/46.4px Poppins, sans-serif;
        text-align: left;
        color: var(--white)
    }

    .banner-list ul li {
        font: 500 17.66px/36.99px Poppins, sans-serif;
        gap: 8px
    }

    .banner-list ul li span.ellipse-icon {
        width: 12px;
        height: 21px
    }

    a.white-btn,
    a.white-btn:hover {
        width: 157.55px;
        height: 40px;
        border-radius: 36px;
        font: 700 23.71px/38.57px Poppins, sans-serif
    }

    .card.appointment-card {
        width: 330px;
        top: -13px;
        right: 0 !important;
        margin: auto 37px
    }

    .card.appointment-card .card-body {
        padding: 25px 0 !important
    }

    .bannerEnquiryHeading h3 {
        font: 700 27px/20.55px Poppins, sans-serif;
        text-align: center
    }

    .theme-btn,
    .theme-btn:hover {
        font: 700 20px/36px Poppins, sans-serif
    }

    .sectionHeading h3 {
        font: 700 31px/54px Poppins, sans-serif
    }

    .about-second-content p,
    ul.unorderList {
        font: 400 17.5px/30px Poppins, sans-serif;
        text-align: justify
    }

    .overviewImg img {
        width: 100%;
        height: 480px
    }

    .portfolio-title h2 {
        font: 700 35px/50px Poppins, sans-serif
    }

    .portfolio-title p {
        font: 700 22px/32px Poppins, sans-serif
    }

    .custom-img img {
        width: 122.6px;
        height: 122.6px;
        object-fit: contain
    }

    .custom-card-content {
        font: 600 18.17px/22.2px Poppins, sans-serif
    }

    ul.button-list li a,
    ul.button-list li a:hover {
        display: block;
        padding: 8px 10px;
        font: 700 22px/32.42px Poppins, sans-serif;
        width: 250px;
        height: 50px
    }

    ul.button-list {
        gap: 25px
    }

    section.mainBanner {
        position: relative;
        margin-top: 30px
    }

    .overviewImg {
        right: 0;
        top: 0 !important
    }

    .inrBanner1 h3 {
        font-weight: 800;
        font-size: 28px !important;
        text-transform: uppercase;
        color: #fff;
        position: relative;
        z-index: 1;
        margin-bottom: 20px
    }
}

@media screen and (min-width:1366px) {
    .container {
        max-width: 1250px
    }

}

@media screen and (max-width:1200px) {
    .inrBanner1 h3 {
        font-weight: 800;
        font-size: 28px !important;
        text-transform: uppercase;
        color: #fff;
        position: relative;
        z-index: 1;
        margin-bottom: 20px
    }

    .card.appointment-card {
        top: -13px;
        right: 85px;
        width: 330px
    }

    .overviewImg img {
        width: 100%;
        height: 250px;
        object-fit: contain
    }

    .overviewImg {
        right: 0;
        top: -229px
    }
}

@media only screen and (max-width:1025px) {
    .banner-section img {
        width: 100%;
        height: 370px;
        object-fit: contain !important
    }

    .sliderContent h1 {
        font: 700 22.8px/46.4px Poppins, sans-serif;
        text-align: left;
        color: var(--white)
    }

    .card.appointment-card {
        top: -13px;
        right: 128px;
        width: 330px
    }

    .overviewImg {
        right: 0;
        top: 0
    }

    .overviewImg img {
        width: 100%;
        height: 450px;
        object-fit: contain
    }
}

@media only screen and (max-width:991px) {

    body,
    html {
        overflow-x: hidden
    }

    .footerBx .footerLogo {
        width: 100% !important
    }

    a.navbar-brand {
        width: 100%
    }

    section.mainBanner {
        margin-top: 0 !important
    }

    body {
        padding-top: 65px
    }

    ul.navbar-nav.ml-auto.mr-5 {
        margin-right: 0 !important;
        display: grid;
        justify-content: center
    }

    nav#mainNav .nav-item>a {
        padding: 10px 0;
        width: 250px
    }

    nav#mainNav .nav-item {
        padding: 0
    }

    nav#mainNav .nav-item>i {
        top: 10px;
        padding: 5px 8px;
        background: #43306c;
        color: #fff;
        right: 0
    }

    .dropMenuWrp {
        opacity: 1;
        width: 100%;
        left: 0;
        display: none;
        padding: 10px;
        position: relative;
        min-width: 100%;
        border-radius: 0 0 3px 3px;
        background: rgb(255 255 255);
        box-shadow: none;
        opacity: 0;
        top: 20px;
        z-index: 0;
        transition: none;
        visibility: hidden
    }

    .dropMenuWrp.active {
        display: block
    }

    .dropdown-items {
        list-style-type: none;
        margin: 0;
        padding: 0
    }

    .dropMenu:hover .dropMenuWrp {
        opacity: 1;
        top: 100%;
        z-index: 0;
        transition: none;
        visibility: visible
    }

    .navbar-toggler {
        padding: .25rem .75rem;
        font-size: 1.25rem;
        line-height: 1;
        background-color: transparent;
        border-radius: .25rem;
        margin: 12px 0;
        border: none !important
    }

    .sliderContent {
        position: absolute;
        left: 56% !important;
        top: 51%;
        transform: translate(-50%, -50%);
        text-align: center;
        transition: .4s;
        width: 100%
    }

    .card.appointment-card {
        top: -3px;
        right: 103px;
        width: 296px
    }

    .sliderContent h1 {
        font: 700 16.8px/28.4px Poppins, sans-serif;
        text-align: left;
        color: var(--white)
    }

    .banner-list ul li {
        font: 500 14.66px/31.99px Poppins, sans-serif;
        gap: 8px
    }

    .mobile {
        display: block !important
    }

    .desktop {
        display: none !important
    }

    .banner-list ul li span.ellipse-icon {
        width: 10px !important;
        height: 35px !important
    }

    .bannerEnquiryHeading h3 {
        font: 700 24px/10.55px Poppins, sans-serif;
        text-align: center
    }

    .about-second-content p,
    ul.unorderList {
        font: 400 14.5px/26px Poppins, sans-serif;
        text-align: justify
    }

    .overviewImg img {
        width: 100%;
        height: 197px !important;
        object-fit: contain
    }

    .custom-card-content {
        font: 600 15.17px/22.2px Poppins, sans-serif
    }

    .slider-container .col-lg-5 {
        display: none
    }

    .slider-container {
        width: auto
    }

    .doctor-info h3,
    .portfolio-title h2 {
        font: 700 27px/1.2 Poppins, sans-serif
    }

    .doctor-info h6 {
        font: 500 16px/21.7px Poppins, sans-serif;
        color: var(--theme-black-color);
        margin-bottom: 0
    }

    ul.button-list li a,
    ul.button-list li a:hover {
        display: block;
        padding: 8px 10px;
        font: 700 19px/36px Poppins, sans-serif;
        width: 215px;
        height: 50px
    }

    .faq-image img {
        width: 100%;
        height: 250px;
        border-radius: 49px;
        object-fit: cover
    }

    .banner-section img {
        height: 615px !important
    }
}

@media only screen and (max-width:767px) {
    .package-image {
        width: 100% !important;
        height: auto !important;
    }
    .specialist-link {
        font-size: 13px !important;
       font-weight: normal;

    }

    .hero-section h2,
    section.ourExperiencedSec img {
        margin-bottom: 20px
    }

    .banner-section img,
    .hospital-main-image img {
        height: 100% !important
    }

    .clearmedi-section {
        padding: 30px 0 !important
    }

    .cal-body__day,
    .cal-head__day {
        width: 46px !important
    }

    .appointmentBtn.desktop,
    .desktop,
    .mbNone {
        display: none !important
    }

    .hero-section {
        padding: 20px;
        margin-top: 15px !important;
        margin-bottom: 30px
    }

    #myMenu {
        background: #ebe6DDCC;
        padding: 5px !important
    }

    .formBanner {
        display: contents !important
    }

    .aboutUs h3,
    .clearmedi-hospitals h1,
    .blog-section h1,
    .career-section h3,
    .clearmedi-section h3,
    .doctor-profile-section h3,
    .excellence-section h2,
    .faq-section h2,
    .morgan-section h3,
    .testimonial-section h2 {
        font-size: 25px !important
    }

    .formBanner .form-select {
        margin: 10px 0
    }

    .hospital-section .upper-half {
        height: 60%;
        width: 100% !important
    }

    .testimonial-box img {
        padding: 18px;
        width: 115px !important;
        height: 115px;
        border-radius: 50%;
        object-fit: cover
    }

    #mobileForm,
    .department-tabs,
    .mobile {
        display: block !important
    }

    .awards-section h1,
    .career-section .details,
    .team-section h1,
    .upcoming-events-card h5 {
        font-size: 28px !important
    }

    .related-post-details .blog-user {
        color: grey;
        margin-left: 20px !important
    }

    .doctor-profile-blue-card h5 {
        font-size: 23.86px !important
    }

    .hospital-section h1 {
        font-size: 25px !important;
        line-height: 40px !important
    }

    .inrBanner1 h3 {
        font-size: 24px !important;
        width: 80%
    }

    .m-mt-20 {
        margin-top: 20px
    }

    .hospital-section .owl-nav {
        float: none !important;
        position: relative;
        top: -240px !important;
        right: auto !important;
        gap: 10px;
        display: flex;
        z-index: 9999;
        justify-content: space-between
    }

    .awards-section .upper-half,
    .slider-container {
        width: 100% !important
    }

    .appointment-section {
        padding: 70px 12px 50px !important;
        margin-top: 165px !important;
        background-size: cover !important
    }

    .bannerEnquiryHeading h3 {
        font: 700 22px/35.55px Poppins, sans-serif !important
    }

    .hospital-section p {
        line-height: 28px !important
    }

    .hero-section h1 {
        font-size: 35px !important
    }

    nav#mainNav {
        background: 0 0;
        padding: 15px 0 !important
    }

    .bannerPara {
        font-size: 14px !important;
        font-weight: 700;
        max-width: 150px !important
    }

    .hero-section h2 {
        font-weight: 900 !important;
        font-size: 20px !important;
        filter: drop-shadow(0px 4px 4px 0px #00000040);
        color: #0f589d !important;
        max-width: 150px !important
    }

    .themeColor {
        margin-left: 5px
    }

    .card.appointment-card {
        top: 21px !important;
        margin: auto 37px
    }

    .sliderContent h2 {
        font-size: 17px
    }

    .sliderContent h4 {
        font-size: 17px !important
    }

    .sliderContent a {
        font-size: 14px;
        padding: 2px 20px
    }

    .sectionHeading {
        text-align: center;
        width: 100%
    }

    a.navbar-brand {
        width: 70%
    }

    .navbar-brand img {
        margin: 0;
        width: 100%;
        max-width: 100% !important;
        margin-left: 0 !important
    }

    ul.navbar-nav.ml-auto.mr-5 {
        margin-right: 0 !important;
        display: grid;
        justify-content: center
    }

    nav#mainNav .nav-item>a,
    nav#mainNav .nav-item>a:hover {
        padding: 10px 23px;
        display: flex;
        gap: 7px;
        width: 250px;
        justify-content: center;
        align-items: center
    }

    nav#mainNav .nav-item {
        padding: 0;
        margin-bottom: 10px
    }

    .aboutUs {
        padding: 40px 12px;
        background: #f8f8f8
    }

    .about-second-content p,
    ul.unorderList {
        font: 400 16.5px/30px Poppins, sans-serif !important;
        text-align: justify
    }

    ul.unorderList {
        text-align: start !important
    }

    .overviewImg {
        position: relative;
        right: 0;
        top: 0 !important
    }

    .slider {
        height: 300px
    }

    .sliderContent {
        left: 0 !important;
        top: 230px !important;
        padding: 10px;
        transform: translate(0, -50%) !important
    }

    .slider-container .col-lg-5 {
        display: none
    }

    .doctor-info h3,
    .portfolio-title h2,
    .sectionHeading h3 {
        font: 700 24.2px/32px Poppins, sans-serif !important;
        margin-bottom: 17px
    }

    .portfolio-title p {
        font: 700 18px/28px Poppins, sans-serif
    }

    .custom-card-content {
        font: 600 16px/22.2px Poppins, sans-serif;
        padding: 0
    }

    .customCard {
        text-align: center;
        margin-bottom: 10px
    }

    .customCard:last-child,
    .customCard:nth-child(3) {
        margin-bottom: 0
    }

    .doctor-info h6 {
        font: 500 18px/28px Poppins, sans-serif
    }

    ul.button-list {
        display: grid !important;
        grid-gap: 10px;
        padding-left: 0
    }

    .faq-image img {
        width: 100% !important;
        height: 250px !important;
        object-fit: cover !important
    }

    div#accordion {
        padding-left: 0 !important
    }

    .copyRight {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 92px !important;
        align-items: flex-start !important;
        padding: 5px
    }

    .appointmentBtn,
    .stickyBtn {
        display: block;
        position: fixed;
        padding: 7px 20px;
        color: #fff;
        outline: 0;
        box-shadow: none;
        z-index: 1;
        cursor: pointer;
        background: var(--light-blue)
    }

    .copyRight p {
        text-align: center;
        font: 600 14px/20.79px Poppins, sans-serif !important;
        margin: 20px
    }

    .stickyBtn {
        right: -55px;
        top: 50%;
        transform: rotate(-90deg);
        border: none;
        border-radius: 10px 10px 0 0
    }

    .appointmentBtn {
        left: 0;
        top: auto !important;
        width: 100% !important;
        bottom: 0 !important;
        transform: rotate(0) !important;
        border: none;
        border-radius: 10px 10px 0 0;
        transition: .2s linear .1s
    }

    .modal-dialog {
        top: 106px
    }

    #bookAppointment .close {
        position: absolute;
        right: 0;
        top: -25px;
        background: var(--light-blue);
        color: var(--theme-black-color);
        text-shadow: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        opacity: unset;
        z-index: 99
    }

    .modal-body {
        padding: 3rem 6px 2rem
    }

    .modal-content {
        width: 90% !important;
        left: 17px
    }

    .banner-list ul li {
        font: 500 16.66px/31.99px Poppins, sans-serif;
        gap: 8px
    }

    .sliderContent h1 {
        font: 700 18.8px/28.4px Poppins, sans-serif;
        text-align: left;
        color: var(--white)
    }

    section.mainBanner {
        position: relative;
        margin-top: 46px !important
    }

    section.faqs-section {
        padding: 45px 18px !important
    }
}

@media only screen and (min-width:425px) and (max-width:425px) {
    .award-card {
        width: 75vw;
        flex: 0 0 75vw;
        aspect-ratio: 3/1.1;
        padding: 24px 16px;
        background-size: cover;
        border-radius: 20px
    }

    .award-card p {
        font-size: 12px;
        line-height: 1.3
    }

    .banner-section img {
        height: calc(100vh - 932px) !important
    }
}

#desktop-view-hero-cards {
    display: flex
}

@media (max-width:480px) {

    .hero-section,
    .hero-section-2 {
        background-image: url('../../panel/assets/images/banner/hero-banner-mobile.jpg') !important;
        margin-top: 10px !important
    }

    #desktop-view-hero-cards,
    .search_form_hero_banner {
        display: none !important
    }

    .hero-section-2 {
        background-position: initial
    }

    div#banner-height {
        min-height: 22vh !important
    }

    .mobile-nav {
        display: flex !important
    }

    .hero-section h1,
    .hero-section-2 h1 {
        font-size: 29px !important
    }

    .kbubble-container.kprimary-bg.kprimary-border {
        bottom: 113px !important
    }

    .kchannel-group {
        bottom: 60px !important;
        position: absolute !important
    }
}

@media (max-width:575.98px) {
    .award-card {
        align-items: center;
        width: 86vw;
        flex: 0 0 75vw;
        aspect-ratio: 3/1.1;
        padding: 24px 16px;
        margin-left: 10px;
        margin-top: 20px;
        background-size: cover;
        border-radius: 20px
    }

    .award-card p {
        font-size: 12px;
        line-height: 1.3
    }
}