@media (min-width: 1904px) {
    .container {
        max-width: 1600px !important;
    }
    .bannerContent {
        margin-top: 50px;
    }
    .catImage img {
        max-width: 380px;
    }
    .catImage svg {
        height: 440px;
        width: 440px;
        top: -150px;
        left: 49%;
    }
    .homeLogo img {
        width: 82px;
    }
}
@media (max-width: 970px) {
    .navbar-toggler{
        display: block;
    }
    .primary_menu{
        display: none;
    }

    .paymentStep .choice__payment {
        padding: 0 4rem;
        margin: 0;
    }
    .checkoutFormDiv .payment__desc {
        padding: 0;
    }
    .payment__heading {
        font-size: 2rem;
    }
    .paymentStepChoice .background-box {
        height: 20%;
    }
    .card.choice__card.choice__card__left {
        margin-left: 2rem;
    }
    .card.choice__card.choice__card__right {
        margin-right: 2rem;
    }
}

@media (max-width: 1263px) {
    .bannerContent h1 {
        font-size: 34px;
        line-height: 40px;
        padding-left: 12px;
        border-left: 4px solid #26914a;
    }
    .bannerContent h2 {
        font-size: 20px;
    }
    .headingMainDiv h2 {
        font-size: 38px;
    }
    .joiningPlanipetsSec .joiningSubHeading {
        font-size: 22px;
    }
    .imageWithHeading a {
        font-size: 18px;
    }
    .petTagSingle h3 {
        font-size: 16px;
    }
    .headingMainDiv h3 {
        font-size: 25px;
    }
    .tags li {
        padding: 10px;
    }
    .tags li h3 {
        font-size: 13px;
    }
    .callToActionSec h2 {
        font-size: 26px;
    }
    .callToActionSec .customButton {
        font-size: 26px;
    }
    .singleAppointmentDiv h3 {
        font-size: 24px;
    }
    .getIntouchSteps h3 {
        font-size: 20px;
        line-height: 25px;
    }
    .footerMenu h4 {
        font-size: 18px;
    }
    .appointmentSection h2 {
        font-size: 22px;
    }
    .singleAppointment {
        margin-top: 20px;
    }
    .apoointmentDetail h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }
    .apoointmentDetail p {
        font-size: 14px;
        padding-left: 18px;
        margin-bottom: 5px !important;
    }
    .appointmentTyoe h5 {
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 6px;
    }
    .appointmentTyoe h6 {
        font-size: 14px;
        padding: 3px 12px;
    }
    .appointmentTyoe h6 .material-symbols-outlined {
        font-size: 18px;
    }
    .AppointmentButtonDiv .link {
        margin-right: 15px;
    }
    .dateDetail h6 {
        font-size: 15px;
        line-height: 18px;
    }
    .dateDetail h5 {
        font-size: 25px;
    }
    .pastAppointmentDiv h4 {
        font-size: 15px;
    }
    .pastAppointmentInnerDiv h5 {
        font-size: 17px;
    }
    .pastAppointmentInnerDiv p {
        font-size: 14px;
    }
    .pastAppointmentInnerDiv h6 {
        font-size: 15px;
    }
    .addAppointment {
        padding: 30px 20px;
    }
    .profetionalDetail h2 {
        font-size: 20px;
    }
    .profetionalDetail p {
        font-size: 15px;
    }
    .AppointmentButtonDiv .customButton {
        min-width: 20%;
        width: 43%;
        padding: 8px 8px;
        line-height: 18px;
    }
    

    .AppointmentButtonDiv.priceFromDiv h2 {
        font-size: 18px;
    }
    .storeDetailSec h1 {
        font-size: 20px;
    }
    .AppointmentButtonDiv.priceFromDiv{
        padding: 5px;
    }
    .storeDetailSec p {
        white-space: unset;
        font-size: 15px;
        line-height: 20px;
        text-align:left;
        margin-bottom: 10px !important;
    }
    .singleSearchList.shopNotAvailable .searchListContent .AppointmentButtonDiv{
        min-width: -webkit-fill-available;
        justify-content: right;
    }
    .storePayment li {
        margin-right: 6px;
        margin-bottom: 6px;
        padding: 4px 11px;
        font-size: 12px;
    }
    .storePayment li h3 {
        font-size: 12px;
    }
    .StoreDetailDiv .col-md-7 {
        padding-left: 0 !important;
    }
    .storeDetailSec h2 {
        font-size: 16px;
        margin: 0px 0 6px;
    }
    .staffMembers h3 {
        margin: 0px 0 2px;
        font-size: 16px;
        font-weight: 600;
    }
    .staffMembers p {
        font-size: 13px !important;
        line-height: 17px;
    }
    .customTable table tbody td {
        font-size: 14px;
    }
    .paymentStep .choice__payment .content{
        padding: 0;
    }
    .card.choice__card.choice__card__right {
        margin-right: 2rem;
    }
    .card.choice__card.choice__card__left {
        margin-left: 2rem;
    }
}
@media only screen and (min-width: 991px) and (max-width: 1263px) {
    .displayNoneLapTop {
        /* display: none !important; */
    }
    .timeSlotTableDiv .columnDiv {
        width: 29%;
    }
    .timeSlotTableDiv {
        padding: 0 !important;
    }
    .appointTabFix {
        width: calc(100% + 25px);
        margin-left: -9px;
    }

    .paymentStep .choice__payment {
        padding: 0 6rem;
        margin: 0;
    }
    
}

@media only screen and (min-width: 768px) and (max-width: 963px) {
    .card.choice__card.choice__card__right {
        margin-right: 0;
    }

    .card.choice__card.choice__card__left {
        margin-left: 0;
    }

    .paymentStepChoice .background-box {
        height: 25%;
    }
}

@media (max-width: 768px) {
    .paymentStepChoice .background-box {
        height: 20%;
    }
    .card.choice__card.choice__card__right {
        margin-right: 0;
    }
    .card.choice__card.choice__card__left {
        margin-left: 0;
    }
    .selectScheduleMainDiv {
        display: inline-block;
    }
    .selectScheduleMainDiv .leftSideDoctorInfo {
        width: 100%;
        padding-right: 0;
    }
    .selectTimeMainDiv{
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}

@media only screen and (min-width: 300px) and (max-width: 400px) {
    .displayNoneLapTop {
        /* display: none !important; */
    }
    .timeSlotTableDiv .columnDiv {
        width: 28%;
    }
    .timeSlotTableDiv {
        padding: 0 !important;
    }
}
@media (max-width: 959px) {
    .fewClickTag {
        font-size: 15px;
    }
    .bannerContent h1 {
        font-size: 32px;
        line-height: 40px;
    }
    .bannerContent h2 {
        font-size: 18px;
    }
    .headingMainDiv h2 {
        font-size: 32px;
    }
    .joiningPlanipetsSec .joiningSubHeading {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 5px;
    }
    .petTagSingle h3 {
        font-size: 15px;
        line-height: 1.4;
    }
    .bookAppointmentSec,
    .joiningPlanipetsSec,
    .petTagSection,
    .getInTouchSec {
        padding: 40px 0;
    } 
    .callToActionSec {
        padding: 50px 0;
    }
    .singleAppointmentDiv {
        padding: 30px 15px;
        border-radius: 30px;
    }
    .singleAppointmentDiv img {
        max-width: 60px;
    }
    .singleAppointmentDiv img {
        max-width: 55px;
    }
    .singleAppointmentDiv h3 {
        font-size: 20px;
    }
    .headingMainDiv h3 {
        font-size: 22px;
    }
    .getIntouchSteps h3 {
        font-size: 18px;
        line-height: 22px;
    }
    .footerMenu ul li a {
        font-size: 15px;
    }
    .footerAbout p {
        font-size: 15px;
    }
    .loginRegisterInnerDiv {
        flex-wrap: wrap;
    }
    .leftPannel {
        width: 100%;
        padding: 25px 15px;
    }
    .rightPannel {
        width: 100%;
    }
    .leftPannelContent p {
        margin: 15px 0 !important;
    }
    .leftPannelContent h2 {
        padding-bottom: 10px;
    }
    .myAccountSec {
        padding: 30px 0;
    }
    .searchDiv .form-control {
        padding: 13.5px 15px;
        font-size: 10.5px;
    }
}
@media (max-width: 991px) {
    .appointmentSection .col-lg-4 h2 {
        margin-top: 40px;
    }
    .hideMapResponsive {
        display: none !important;
    }
    .filterDiv .customInputDesign .form-control {
        font-size: 14px;
        padding: 8px 12px;
    }
    .filterDiv .customInputDesign {
        width: calc(100% / 4 - 6px);
        margin-right: 6px;
        margin-bottom: 6px;
    }
    .clearFilterBtn {
        width: 40px;
        height: 40px;
    }
    .hourAndDestination .AppointmentButtonDiv .customButton {
        width: 100%;
        padding: 15px 20px;
        font-size: 17px;
        line-height: 20px;
    }
    .stepss {
        margin-left: -10px;
    }
    .stepss .dot {
        margin-bottom: -21px;
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
    a.customButton.bookApntmntBtn {
        bottom: 10px;
    }
    .footerDiv {
        padding: 30px 0 40px;
    }
    .searchDiv {
        padding: 15px 15px;
        margin: 0 -5px;
        width: calc(100% + 10px);
    }
    .clearSearchIcon {
        top: -3px;
        right: -10px;
    }
    .clearSearchIcon img {
        width: 25px;
        height: 25px;
    }
    .typed-text {
        width: 100%;
        display: inline-block;
    }
    .typed-text + span {
        display: none !important;
    }

}
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    .catImage img {
        max-width: 200px;
    }
    .catImage svg {
        height: 240px;
        width: 240px;
        top: -70px;
    }
    .bannerContent {
        text-align: center;
    }
    .bannerContent h1 {
        font-size: 30px;
        line-height: 38px;
        border: none;
        padding: 0;
    }
    .searchDiv {
        padding: 12px 10px;
    }
    .bannerDiv {
        padding-bottom: 53px;
        margin-bottom: 63px;
    }
    .petTagSingle {
        padding-bottom: 10px;
    }
    .petTagSingle img {
        max-width: 100px;
    }
    .headingMainDiv {
        text-align: center;
    }
    .callToActionSec h2 {
        font-size: 26px;
    }
    .singleAppointmentDiv p,
    .singleAppointmentDiv {
        text-align: center;
    }
    .getInTouchSec .marTop100 {
        margin-top: 0px !important;
    }
    .row.marTop100 .col-md-4 {
        margin-top: 40px;
    }
    .getIntouchSteps {
        text-align: center;
    }
    .getInIcon {
        left: 50%;
        transform: translateX(-50%);
    }
    .getIntouchSteps:hover .getInIcon {
        transform: translateX(-50%) rotate(360deg);
    }
    .actionBUtton .customButton {
        padding: 15px 30px;
        font-size: 17px;
        float: left;
    }
    .footerMenu h4 {
        font-size: 16px;
    }
    .footerAbout {
        padding-bottom: 20px;
    }
    .searchDiv {
        flex-wrap: wrap;
    }
    .searchOptions {
        z-index: 2;
    }
    .searchDiv .form-group.width60 {
        margin-bottom: 15px !important;
        width: 100%;
    }
    .searchDiv .form-control {
        font-size: 15px;
    }
    .width40 {
        width: calc(100% - 121px);
    }
    .singleAppointmentDiv {
        box-shadow: 3px 5.196px 15px 0px rgb(0 0 0 / 4%);
    }
    .petTagSingle h3 {
        padding: 0 20px;
    }
    .headingMainDiv h3 {
        font-size: 20px;
    }
    .footerAbout img {
        max-width: 100px;
    }
    .loginRegisterInnerDiv {
        width: 100%;
        margin: 0;
    }
    .leftPannelContent h2 {
        font-size: 28px;
    }
    .leftPannelContent p {
        font-size: 15px;
    }
    .rightPannel h2 {
        font-size: 25px;
        margin-bottom: 18px;
    }
    .leftPannelContent {
        padding: 5px 0;
    }
    .rightPannel {
        padding: 30px 15px;
    }
    .singleAppointment {
        flex-wrap: wrap;
    }
    .appointmentImage {
        width: 100%;
        margin: 0 0 10px ;
    }
    .appointmentImage .placeholderImage {
        max-height: 200px;
    }
    .appointmentContent {
        width: 100%;
    }
    .appointmentSection {
        padding: 30px 0;
    }
    .appointmentSection .col-lg-4 h2 {
        margin-top: 20px;
    }
    .myAccountInnerDiv h2 {
        font-size: 20px;
        padding: 20px 18px 20px;
    }
    .editableDiv {
        flex-wrap: wrap;
    }
    .editableDiv label {
        font-size: 18px;
        min-width: 100%;
        font-weight: 600;
    }
    .editableDiv .editBtn {
        top: 27px;
    }
    .profileImage {
        margin-top: 0;
    }
    .profileImage img {
        min-height: 100px;
    }
    .accountBtnDiv .customButton {
        margin-right: 6px;
        min-width: 100px;
        font-size: 14px;
        padding: 10px 16px;
    }
    .editableDiv p {
        font-size: 16px;
        line-height: 18px;
    }
    .filterDiv {
        flex-wrap: wrap;
    }
    .filterDiv .customInputDesign {
        width: calc(100% / 2 - 6px);
    }
    .filterDiv .customInputDesign:nth-child(2) {
        margin-right: 0px;
    }
    .singleSearchList {
        flex-wrap: wrap;
    }
    .searchListImage {
        margin-right: 0 !important;
        width: 100%;
        margin-bottom: 15px;
    }
    .searchListContent {
        width: 100%;
    }
    .searchListingSec {
        padding: 30px 0;
    }
    .hourAndDestination .storeMap {
        min-height: 200px;
    }
    .StoreDetailDiv .col-md-7 {
        padding-left: 15px !important;
    }
    .storeDetailSec {
        padding: 30px 0;
    }
    .galeryPrevBtn {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 17px;
        right: 52px;
    }
    .galeryNextBtn {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 17px;
    }
    .customAccordian .tags {
        padding: 0 15px !important;
    }
    .customAccordian ul.tags li {
        padding: 5px 15px;
    }
    .galleryCarousel h2 {
        padding-right: 65px !important;
    }
    .catImage {
        display: none;
    }
    .rightButtonDiv {
        margin-left: 5px;
    }
    .rightButtonDiv .customButton {
        font-size: 14px;
        padding: 10px 16px;
    }
    .clearFilterBtn {
        position: absolute;
        top: -5px;
        right: 5px;
        width: 32px;
        height: 32px;
        border-radius: 35px;
    }
    .generateOtp a {
        position: relative;
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }
    .appointmentContent {
        padding-bottom: 125px;
    }
    .searchListContent .AppointmentButtonDiv,
    .singleSearchList .searchListContent {
        flex-wrap: wrap;
        justify-content: center;
    }
    .AppointmentButtonDiv.priceFromDiv h2 {
        margin-bottom: 5px;
    }
    .singleSearchList.shopNotAvailable .searchListContent .profetionalDetail {
        padding-left: 0px;
        width: 100%;
    }
    .singleSearchList .searchListContent .AppointmentButtonDiv {
        width: 100% !important;
    }
    .singleSearchList .searchListContent .AppointmentButtonDiv a {
        width: 100% !important;
    }
    .StoreDetailDiv.notAvailableStorDetail {
        padding: 15px;
    }
    .StoreDetailDiv.notAvailableStorDetail {
        flex-wrap: wrap;
    }
    .bookingDetailsNotAvailable p {
        padding-left: 0px;
    }
    .StoreDetailDiv.notAvailableStorDetail .aboutStore {
        width: 100%;
    }
    .bookingDetailsNotAvailable {
        width: 100%;
    }
    .customFormNotAvailabl {
        padding: 15px;
    }
    .v-stepper--alt-labels .v-stepper__step {
        flex-basis: 105px;
    }
    .theme--light.v-stepper .v-stepper__header .v-divider {
        opacity: 0;
    }

    .paymentStep .card__1 .card__2 {
        margin: 5px 3rem;
    }
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .col-md-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .paymentStep .choice__payment {
        height: auto !important;
    }
    .checkoutFormDiv h2 {
        font-size: 22px;
    }
}
@media (max-width: 575px) {
    .nameFormGroup {
        margin: 0!important;
        min-width: 100%;
        flex-wrap: wrap;
    }
    .nameFormGroup .width50 {
        min-width: 100%;
        margin: 0px !important;
        margin-bottom: 10px !important;
    }
    .homeLogo img {
        max-width: 45px;
    }
    .rightButtonDiv .customButton {
        margin-left: 4px;
        font-size: 11px;
        padding: 9px 13px;
        border-radius: 5px;
    }
    .rightSideTop > div {
        margin-left: 5px;
    }
    .bannerContent h1 {
        font-size: 23px;
        line-height: 26px;
    }
    .headingMainDiv h2 {
        font-size: 25px;
    }
    .tags li img {
        max-width: 15px;
    }
    .tags li {
        padding: 10px;
    }
    .tags li h3 {
        font-size: 15px;
        font-weight: 600;
    }
    
    .callToActionSec h2 {
        font-size: 20px;
    }
    .callToActionSec .customButton {
        font-size: 20px;
    }
    .callToActionSec {
        padding: 40px 0;
    }
    .footerDiv p,
    .footerDiv {
        text-align: center;
    }
    .AppointmentButtonDiv .link {
        margin-right: 12px;
        font-size: 12px;
    }
    .AppointmentButtonDiv .link i {
        display: none;
    }

    .profSpecialties li {
        font-size: 15px;
        align-items: flex-start;
        line-height: 16px;
    }
    .profSpecialties li img {
        width: 15px;
        margin-top: 1px;
    }
    .globalRatingInfo {
        width: 75px;
    }
    .globalRatingInfo h3 {
        font-size: 20px;
    }
    .globalRatingInfo p {
        font-size: 10px;
        line-height: 12px;
    }
    .globalRatingInfo h3 span .material-symbols-outlined {
        font-size: 10px;
    }
    .AppointmentButtonDiv .customButton {
        width: 41%;
        padding: 5px 8px 7px;
        line-height: 13px;
        font-size: 12px;
    }
    .AppointmentButtonDiv.priceFromDiv h2 {
        font-size: 16px;
    }
    .profetionalLogo {
        width: 46px;
        height: 46px;
    }
    .profetionalDetail {
        padding-left: 55px;
    }
    .nonAvailableShops{
        padding-left: 0px !important;
    }
    .signleStaffMemeber .row,
    .theyWantDiv .row,
    .StoreDetailDiv .row {
        max-width: 100%;
        margin: 0px;
    }
    .StoreDetailDiv .row .col-md-5 {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 0px;
    }
    .StoreDetailDiv .row .col-md-7 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .theyWantDiv .col-md-12,
    .theyWantDiv .col-md-6 {
        padding: 0px;
    }
    .storeDetailImage {
        margin-top: 15px !important;
        height: auto;
    }
    .customAccordian .v-expansion-panel-content__wrap {
        padding: 0px !important;
    }
    .staffMembers .storeDetailImage {
        margin: 0px !important;
    }
    .signleStaffMemeber .col-md-5,
    .signleStaffMemeber .col-md-7 {
        padding: 0px 15px;
    }
    .customAccordian button {
        font-size: 16px;
        font-weight: 700;
    }
    .storeDetailSec h2 {
        font-size: 15px;
        line-height: 17px;
        font-weight: 700;
    }
    .accountDetail {
        padding: 15px 15px 15px 15px;
    }
    .searchDiv .form-control {
        font-size: 10px;
        padding: 13px 10px;
    }
    .tags li img {
        margin-right: 5px;
    }
    .tags li h3 {
        font-size: 13px;
    }
    .languageDropDown .mainLanguage span {
        display: none;
    }
    .rightSideTop .languageDropDown {
        margin-left: 0px;
    }
    .languageDropDown .mainLanguage img {
        width: 22px;
        margin-right: 5px;
        margin-left: 5px;
    }
    .languageDropDown .dropdown-menu {
        min-width: 120px !important;
    }
    .innerIdelPopup h3 {
        font-size: 17px;
    }
    .innerIdelPopup p {
        font-size: 14px;
    }
    span.warningIcon {
        width: 70px;
        height: 70px;
        font-size: 22px;
        margin-bottom: 10px;
    }
    .innerIdelPopup .v-card {
        padding: 35px 10px;
    }
    .searchDiv .customButton {
        padding: 9px 11px;
    }
    .establishmentTypeTag {
        margin-left: 4px;
        margin-top: 6px;
    }
}

@media (max-width: 435px) {
    .payment__heading {
        font-size: 1.2rem;
    }
    
    .paymentStep .choice__payment {
        height: auto !important;
        padding: 0 1rem;
    }
}

@media (max-width: 350px) {
    .filterDiv .customInputDesign .form-control {
        font-size: 13px;
        padding: 8px 8px;
    }
    .searchDiv .form-control {
        font-size: 9px;
        padding: 15px 9px;
    }
    .rightButtonDiv .customButton {
        font-size: 10px;
        padding: 8px 11px;
        border-radius: 5px;
    }
    .languageDropDown .dropdown-menu {
        min-width: 53px !important;
    }
    .languageDropDown .open span {
        display: none;
    }
    .paymentStep .card__1 .card__2 {
        margin: 5px 1rem;
    }
    .paymentStep .card__1 .card__2 .content {
        font-size: 12px;
    }
    .radio-switch__label {
        font-size: 10px;
    }
    .radio-switch__item {
        height: 35px;
    }
    .singleDoctorDiv {
        padding: 5px;
    }
    .calanderDivView {
        padding: 0;
    }

}


.responsive-container {
    display: flex;
    flex-direction: row;
    align-items: center;  
    text-align: center; 
}

.responsive-img {
    max-width: 100%;
    height: auto;
    width: 10%; 
    max-height: 300px;
}

.responsive-heading {
    font-size: 1rem;
    margin: 0.5rem 0;
}

@media (max-width: 768px) {
    .responsive-heading {
        font-size: 1.2rem;
    }
}