@media (max-width: 1199px) {
    #profile .profile-box .img-box {
        padding: 0 0px;
    }

    #profile .profile-box .right-box .name-box {
        padding-bottom: 60px;
    }

    #profile .profile-box .center-box {
        padding-bottom: 70px;
    }

    #inform .inform-box .left-part .cent-loct .cap-box {
        width: 50%;
    }

    #social .social-box .multy-btn .btn-social {
        width: 100%;
    }

    .add-hours-modal .modal-dialog {
        max-width: 980px;
    }
}

@media (max-width: 1024px) {
    #park .park-box .panel-box ul li {
        flex-wrap: wrap;
    }

    #park .park-box .center-cont .row {
        flex-wrap: wrap;
    }

    #park .park-box .center-cont .row .col-6 {
        width: 100%;
    }

    #park .right-box .img-box {
        margin-top: 50px;
    }

    #list .list-box .colum-box {
        padding: 20px 40px;
    }

    #list .list-box .colum-box .right-box h4 {
        margin-right: 20px;
    }

    #list .list-box .colum-box .left-box ul li .btn {
        padding: 8px 60px;
    }

    #park.pro-park .park-box .heading {
        justify-content: space-between;
    }

    #inform .inform-box .left-part .cent-loct .cap-box {
        width: 100%;
    }

    #profile .profile-box .right-box .name-box {
        padding-bottom: 40px;
    }

    #profile .profile-box .center-box {
        padding-bottom: 40px;
    }

    #profile .profile-box .center-box .chat-card:not(:last-child) {
        margin-right: 30px;
    }

    #profile .profile-box .center-box .chat-card {
        margin-left: 10px;
    }

    #profile .profile-box .center-box .chat-card h4 {
        font-size: 16px;
        margin-left: 10px;
    }

    #profile .profile-box .center-box .chat-card img {
        max-width: 30px;
    }

    #profile .profile-box .tab-box .common-box span {
        margin-left: 10px;
        font-size: 14px;
    }

    #profile .profile-box .right-box {
        padding: 10px 10px 0px 10px;
    }

    #profile .profile-box .tab-box .common-box img {
        max-width: 26px;
    }

    #inform .inform-box .left-part .loct-box iframe {
        width: 300px;
        height: 300px;
    }

    .multy-box .multy-btn .row {
        flex-wrap: wrap;
    }

    .multy-box .multy-btn .row .col-3 {
        width: 33.33%;
    }

    #social .social-box .multy-btn .btn-social {
        font-size: 15px;
    }

    #social .social-box .icon-sec .app-box .row {
        flex-wrap: wrap;
    }

    #social .social-box .icon-sec .app-box .row .col-3 {
        width: 100%;
    }

    #social .social-box .icon-sec .app-box .app-btn {
        max-width: 80%;
        margin-bottom: 15px;
    }

    #social .social-box {
        padding: 0px 20px 60px;
    }

    #social .social-box .heading p {
        font-size: 15px;
    }

    .click-box .modal-dialog {
        max-width: 930px;
    }

    .add-hours-modal .modal-dialog {
        max-width: 900px;
    }

    .add-hours-modal .modal-body .pick-box {
        padding: 20px;
    }

}

@media (max-width: 991px) {

    section {
        padding-top: 80px ;
    }

    #status .status-box .heading h4 {
        font-size: 26px;
    }

    #status .status-box .heading h4 .round {
        margin-right: 40px;
    }

    #status .status-box .icon-box ul li a i {
        font-size: 26px;
    }

    #status .status-box .heading {
        padding-bottom: 40px;
    }

    #status .status-box .icon-box {
        padding: 40px 0;
    }

    #locatin .locatin-box .top-space {
        padding-top: 60px;
    }

    #locatin .locatin-box {
        padding: 0 20px 80px;
    }

    #locatin .locatin-box .box-box iframe {
        border-radius: 30px;
        height: 300px;
        width: 500px;
        margin-right:auto;
    }

    footer .footer-box .logo-box a img {
        max-width: 270px;
    }

    footer {
        padding-top: 60px;
    }

    #profile .profile-box .row {
        flex-wrap: wrap;
    }

    #profile .profile-box .row .col-5,
    #profile .profile-box .row .col-7 {
        width: 100%;
    }

    #profile .profile-box .img-box img {
        margin: 0 auto;
    }

    #profile .profile-box .right-box {
        padding: 30px 40px 0px 40px;
    }

    #profile .profile-box .center-box .chat-card {
        margin-left: 0px;
    }

    .click-box .modal-dialog {
        max-width: 730px;
    }

    .click-box .modal-content {
        padding: 10px 20px;
    }

    .click-box .modal-body .end-box {
        margin: 30px 0 10px;
    }

    .click-box .modal-body .end-box .data-box .detail p {
        font-size: 15px;
    }

    .click-box .modal-body .end-box .data-box {
        padding: 30px 10px;
    }

    .click-box .modal-body .menu-box ul {
        padding: 10px 30px;
    }

    .click-box .modal-body .menu-box ul li p {
        font-size: 14px;
        font-family: 'Museo-300';
    }

    .click-box .modal-body .top-btn-box ul {
        margin: 30px 50px;
    }

    .click-box .modal-body .top-btn-box ul li .btn-top {
        font-size: 14px;
    }

    .click-box .modal-body .menu-box ul li p img {
        max-width: 15px;
    }

    .click-box .modal-footer a {
        font-size: 14px;
    }

    .add-hours-modal .modal-dialog {
        max-width: 700px;
    }

    .add-hours-modal .modal-body .right-side label {
        margin-left: 34px;
    }

    .add-hours-modal .btn-add-hour {
        font-size: 20px;
        padding: 8px 30px;
    }

    .add-hours-modal .modal-header h5,
    .add-hours-modal .modal-body .enter-text label {
        font-size: 22px;
    }

}

@media (max-width: 767px) {
    section {
        padding-top: 60px;
    }

    #status .status-box {
        padding: 0 ;
    }

    #status .status-box .heading h4 {
        font-size: 22px;
    }

    #status .status-box .heading h4 .round {
        margin-right: 20px;
        height: 50px;
        width: 48px;
    }

    #status .status-box .icon-box ul li a {
        padding: 5px 20px;
    }

    #status .status-box .icon-box ul li a i {
        font-size: 24px;
    }

    #status .status-box .text-box {
        padding: 50px 30px 0 30px;
    }

    #park .park-box .center-cont {
        padding-bottom: 50px;
    }

    #park .park-box .discript {
        padding: 0 0px;
    }

    #park .park-box .left-box {
        padding: 0 0px;
    }

    #locatin .locatin-box {
        padding: 0px 20px 60px 20px;
    }

    #locatin .locatin-box .box-box iframe {
        height: 280px;
        width: 450px;
    }

    footer .footer-box .logo-box a img {
        max-width: 240px;
    }

    #list .list-box .colum-box {
        flex-wrap: wrap;
    }

    #list .list-box .colum-box .right-box {
        flex-wrap: wrap;
    }

    #list .list-box .colum-box .right-box p {
        margin: 15px 0 40px 0;
    }

    #list .list-box .colum-box .left-box {
        width: 100%;
    }

    #list .list-box .search-box {
        flex-wrap: wrap;
    }

    #list .list-box .search-box .search-btn {
        width: 100%;
    }

    #list .list-box .search-box .search-btn input {
        width: 100%;
    }

    #list .list-box .search-box .search-btn i {
        left: 4%;
    }

    #list .list-box .search-box .number-list {
        padding-bottom: 30px;
        width: 100%;
        justify-content: end;
    }

    #profile .profile-box .right-box {
        padding: 30px 0px 0px 0px;
    }

    #inform .inform-box .row {
        flex-wrap: wrap;
    }

    #inform .inform-box .row .col-5,
    #inform .inform-box .row .col-7 {
        width: 100%;
    }

    .multy-box .multy-btn .row .col-3 {
        width: 50%;
    }

    #inform .inform-box .left-part .cent-loct .cap-box {
        width: 40%;
    }

    #inform .inform-box .left-part .heading p {
        padding-bottom: 20px;
        margin-top: 30px;
    }

    #social .social-box .heading p {
        font-size: 14px;
    }

    #social .social-box {
        padding: 0px 20px 50px;
    }

    .click-box .modal-body .top-btn-box ul {
        flex-wrap: wrap;
    }

    .click-box .modal-body .top-btn-box ul li {
        width: 100%;
    }

    .click-box .modal-dialog {
        max-width: 520px;
    }

    .click-box .modal-body .top-btn-box ul li .btn-top {
        font-size: 14px;
        margin-bottom: 15px;
    }

    .click-box .modal-header h5 {
        margin-right: 40px;
        font-size: 18px;
    }

    .click-box .modal-header img {
        /* max-width: 50px; */
    }

    .click-box .modal-body .menu-box ul {
        flex-wrap: wrap;
        padding: 0px 0px;
        height: 100%;
    }

    .click-box .modal-body .menu-box ul li {
        width: 100%;
        margin: 0;
        border-bottom: 2px solid var(--white-color);
        height: 100px;
    }

    .click-box .modal-body .end-box .data-box {
        flex-wrap: wrap;
        padding: 0px 0px;
        border-radius: 0;
        height: 100%;
    }

    .click-box .modal-body .end-box .data-box .detail {
        width: 100%;
        margin: 0px 0px;
        justify-content: start;
        height: 100px;
        align-items: center;
    }

    .mobile {
        display: block;
    }

    .main-box1 {
        display: flex;
    }

    .click-box .modal-body .end-box {
        margin: 0px 10px 10px 0px;
        width: 60%;
    }

    .click-box .modal-body .end-box .data-box .detail .btn-new {
        font-size: 14px;
        border-radius: 10px;
        width: 40%;
        margin-left: 10px;
        min-height: 30px;
        height: 40px;
    }

    .click-box .modal-body .end-box .data-box .detail:not(:last-child) {
        border-bottom: 2px solid var(--white-color);
    }

    .click-box .modal-body .end-box .data-box .detail p {
        padding: 20px 10px;
        font-size: 13px;
    }

    .click-box .modal-body .menu-box ul li p {
        padding: 30px 10px;
    }

    .menu-box {
        margin-bottom: 10px;
        width: 40%;
    }

    #fill-box .fill-box-one {
        padding: 0 0px 50px;
    }

    #fill-box .fill-box-one .add-new-loc .loct-box iframe {
        height: 350px;
    }

    #fill-box .fill-box-one .colum-box .search-btn {
        margin-bottom: 15px;
    }

    #fill-box .fill-box-one .add-btn {
        margin-top: 20px;
    }

    #fill-box .fill-box-one .colum-box {
        padding: 20px 30px;
    }

    .service-completion-box .total-work .work-box p {
        font-size: 14px;
        padding: 10px 20px;
    }

    .service-completion-box .top-btn-box ul li .btn-top {
        width: 100% !important;
        max-width: 100% !important;
    }

    .service-completion-box .top-btn-box ul {
        margin: 20px 20px !important;
    }

    .service-completion-box .modal-header img {
        max-width: 30px !important;
    }

    #park .park-box .panel-box ul li p {
        width: 170px;
    }

    .add-hours-modal .modal-dialog {
        max-width: 540px;
    }

    .add-hours-modal .modal-body .enter-text {
        padding: 10px 20px;
    }

    .add-hours-modal .modal-footer {
        padding: 15px;
    }

    .add-hours-modal .modal-body .right-side input, .add-hours-modal .modal-body .left-side input {
        max-width: 90%;
        padding: 15px 20px;
    }

    .add-hours-modal .modal-header {
        padding: 15px 20px;
    }

    .add-hours-modal .modal-body .pick-box {
        padding: 15px 15px 20px;
    }

    .add-hours-modal .btn-add-hour:first-child {
        margin-right: 30px;
    }

    .add-hours-modal .btn-add-hour {
        font-size: 18px;
        padding: 8px 30px;
    }

    .view-msg {
        max-width: 350px;
        transform: translateX(-50%);
    }

    .btn-new-del,
    .btn-new-acp {
        margin-left: 10px !important;
    }

    .break-class {
        margin-left: 20px !important;
    }

    .rightBox {
        width: 75%;
    }

    .mobileCategory {
        justify-content: space-between !important;
    }
}

@media (max-width: 575px) {
    section {
        padding-top: 50px;
    }

    #status .status-box .text-box .text-part p {
        font-size: 15px;
    }

    #status .status-box .icon-box ul li a i {
        font-size: 20px;
    }

    #status .status-box .icon-box ul li a {
        padding: 5px 15px;
    }

    #park .park-box .heading h5 {
        font-size: 22px;
    }

    #park .park-box .panel-box {
        padding: 15px 40px;
    }

    #park .park-box .discript .disc-text p {
        font-size: 14px;
    }

    #locatin .locatin-box .box-box h5 {
        font-size: 22px;
        margin-bottom: 30px;
    }

    footer {
        padding-top: 50px;
    }

    #list .list-box .search-box .search-btn input {
        padding: 12px 8px 12px 40px;
    }

    #list .list-box {
        padding-bottom: 20px;
    }

    #list .list-box .heading {
        padding-bottom: 40px;
    }

    #status.service .status-box .text-box {
        padding: 10px 30px 20px 30px;
    }

    #park.pro-park .park-box .heading h5 {
        padding: 15px 20px;
        font-size: 15px;
    }

    #park.pro-park .park-box .heading img {
        max-width: 50px;
        margin-right: 20px;
    }

    #profile .profile-box .tab-box .common-box .btn {
        font-size: 14px;
    }

    #profile .profile-box .tab-box .common-box .btn img {
        width: 16px;
    }

    #profile .profile-box .tab-box .row {
        margin: 0 0px;
    }

    #inform .inform-box .heading p,
    #inform .inform-box .text-cont .left_cont h6,
    #inform .inform-box .text-cont .right-cont p {
        font-size: 15px;
    }

    #inform .inform-box .heading:not(:first-child) {
        margin-top: 50px;
    }

    #inform .inform-box {
        padding: 0 10px;
    }

    #inform .inform-box .left-part .cent-loct .cap-box {
        width: 100%;
        text-align: center;
    }

    #inform .inform-box .left-part .loct-box iframe {
        width: 280px;
        height: 250px;
        margin: 0 auto;
    }

    #social .social-box {
        padding: 0px 10px 40px;
    }

    #social .social-box .multy-btn .btn-social {
        font-size: 14px;
    }

    #profile .profile-box .tab-box .row .col-4 {
        width: 100%;
    }

    #profile .profile-box .tab-box .common-box {
        border-bottom: 1px solid var(--black-color);
        margin-bottom: 20px;
    }

    #profile .profile-box .tab-box .common-box.active {
        padding: 0;
        margin-bottom: 0;
    }

    .click-box .modal-header {
        padding: 10px;
    }

    .click-box .modal-content {
        padding: 10px 10px;
    }

    #fill-box .fill-box-one .soci-box-new .left-box span {
        margin-left: 35px;
        font-size: 18px;
    }

    #fill-box .fill-box-one .soci-box-new .left-box img {
        max-width: 40px;
    }

    #fill-box .fill-box-one .add-new-loc .loct-box iframe {
        height: 300px;
    }

    #fill-box .fill-box-one .soci-box-new .left-box span {
        margin-left: 35px;
        font-size: 18px;
    }

    #fill-box .fill-box-one .soci-box-new .left-box img {
        max-width: 40px;
    }

    #fill-box .fill-box-one .add-new-loc .loct-box iframe {
        height: 300px;
    }

    #fill-box .fill-box-one .add-new-loc .loct-box {
        padding: 50px 0 40px;
    }

    #profile.edit-profile .edit-text .intro-box {
        padding-bottom: 30px;
    }

    #fill-box .top-title p {
        font-size: 15px;
        margin-bottom: 30px;
    }

    #park .park-box .panel-box ul li p {
        width: 150px;
    }

    .add-hours-modal .modal-header h5, .add-hours-modal .modal-body .enter-text label {
        font-size: 20px;
    }

    .add-hours-modal .modal-dialog {
        max-width: 450px;
        margin: 0 auto;
    }

    .add-hours-modal .modal-body .right-side input, .add-hours-modal .modal-body .left-side input {
        max-width: 100%;
        padding: 12px 20px;
    }

    .add-hours-modal .modal-body .enter-text textarea {
        min-height: 120px;
    }

    .add-hours-modal .btn-add-hour {
        font-size: 16px;
    }

    .main-title {
        font-size: 18px !important;
    }

    .side-set {
        max-width: 380px !important;
    }

    .break-class {
        margin-left: 0px !important;
    }

    #status .status-box .icon-box ul {
        justify-content: center;
    }

    footer .footer-box .ft-icon ul {
        justify-content: center;
        margin-right: 0px;
    }

    footer .footer-box .logo-box a {
        display: flex;
        justify-content: center;
    }

    #status .status-box .heading h4 {
        font-size: 24px;
        max-width: 70%;
    }

    .rightBox {
        width: 73% !important;
    }
}

@media (max-width: 479px) {

    section {
        padding-top: 40px;
    }

    #status .status-box .heading h4 {
        font-size: 20px;
    }

    #status .status-box .heading h4 .round {
        margin-right: 20px;
        height: 45px;
        width: 45px;
    }

    #park .park-box .panel-box ul li h6 {
        font-size: 14px;
        padding: 10px 15px;
    }

    #park .park-box .panel-box {
        padding: 15px 20px;
    }

    #locatin .locatin-box .box-box iframe {
        height: 200px;
        width: 340px;
    }

    footer .footer-box .logo-box a img {
        max-width: 220px;
    }

    #list .list-box .heading h5 {
        font-size: 22px;
    }

    #status.service .status-box .text-box .text-part:last-child p span {
        padding: 0 10px;
    }

    #status.service .status-box .text-box .text-part:last-child p img {
        max-width: 25px;
    }

    #status.service .status-box .text-box .text-part:last-child p {
        font-size: 14px;
    }

    #park.pro-park .park-box .heading img {
        max-width: 40px;
    }

    #park.pro-park .park-box .left-box {
        padding: 0 20px 0 20px;
    }

    .multy-box .multy-btn .row .col-3 {
        width: 100%;
    }

    .menu-box {
        /*        width: 30%;*/
    }

    .click-box .modal-body .end-box {
        width: 70%;
    }

    .click-box .modal-body .top-btn-box ul {
        margin: 10px 20px;
    }

    .click-box .modal-body .end-box .data-box .detail .btn-new {
        width: 50%;
    }

    #fill-box .fill-box-one .add-new-loc .loct-box iframe {
        height: 230px;
    }

    #fill-box .fill-box-one .soci-box-new .left-box span {
        margin-left: 25px;
        font-size: 16px;
    }

    #fill-box .fill-box-one .soci-box-new .right-box input {
        padding: 10px 10px;
    }

    #fill-box .fill-box-one .colum-box {
        padding: 10px 10px;
    }
    .service-completion-box .modal-header img {
        max-width: 20px !important;
    }
    #park .park-box .panel-box ul li p {
        width:150px;
    }

    .add-hours-modal .modal-dialog {
        max-width: 350px;
    }

    .add-hours-modal .modal-body .right-side input, .add-hours-modal .modal-body .left-side input {
        padding: 12px 20px;
        font-size: 15px;
    }

    .add-hours-modal .modal-body .right-side label {
        margin-left: 5px;
    }

    .add-hours-modal .btn-add-hour:first-child {
        margin-right: 20px;
    }

    .view-msg p {
        font-size: 13px;
    }

    .right-8 {
        right: 0.5rem !important;
    }

    .side-set {
        max-width: 350px !important;
    }

    .size-full-btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .space-xy-rmv {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .btm-xy-rmv {
        padding: 10px 20px !important;
    }

    .btm-xy-rmv > span {
        font-size: 13px !important;
    }

    .viewPostImgBox {
        gap: 20px !important;
    }
}

@media (max-width: 375px) {

    #status .status-box .icon-box ul li:not(:last-child) {
        margin-right: 10px;
    }

    #status .status-box .heading {
        padding-bottom: 30px;
    }

    #park .park-box .top-panel p, #park .park-box .panel-box ul li p {
        font-size: 14px;
    }

    #park .park-box .panel-box ul li h6 {
        font-size: 13px;
        padding: 8px 12px;
    }

    #locatin .locatin-box .top-space {
        padding-top: 40px;
    }

    #locatin .locatin-box .box-box iframe {
        height: 200px;
        width: 290px;
    }

    #locatin .locatin-box {
        padding: 0px 0px 40px;
    }

    #list .list-box .colum-box {
        padding: 20px 20px;
    }

    #list .list-box .colum-box .right-box p {
        font-size: 15px;
    }

    #profile .profile-box .right-box .name-box h4 {
        font-size: 22px;
        margin-right: 20px;
    }

    #inform .inform-box .border-box {
        padding: 20px 0;
    }

    #social .social-box .icon-sec .app-box .app-btn {
        max-width: 100%;
    }

    .service-completion-box .total-work .work-box:first-child {
        margin: 40px 0 20px;
    }

    .add-hours-modal .modal-body .right-side label {
        padding-bottom: 10px;
    }

    .view-msg {
        max-width: 280px;
    }

    .main-title {
        font-size: 16px !important;
    }

    #fill-box .fill-box-one {
        padding: 0 0px 10px;
    }

    .side-set {
        max-width: 300px !important;
    }

    .right-8 {
        right: 0.3rem;
    }

    .new-bg-box {
        border-radius: 20px !important;
        padding: 15px 10px !important;
    }

    .flex.gap-2.new-wrap-box {
        flex-wrap: wrap;
        gap: 0px !important;
    }

    .btn-new-view {
        margin-top: 0 !important;
    }

    .spc-btm-none {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 350px) {
    .click-box .modal-body .end-box {
        width: 60%;
    }

    .btn-purple:hover, .btn-purple:active {
        font-size: 14px !important;
        padding: 14px 15px !important;
    }

    .btn-purple {
        margin: 0 5px !important;
    }

    .btn-sec-delete {
        font-size: 13px !important;
        padding: 14px 15px !important;
    }

    .add-hours-modal .modal-dialog {
        max-width: 300px;
    }

    .add-hours-modal .btn-add-hour {
        font-size: 14px;
        padding: 8px 20px;
    }

    .add-hours-modal .modal-body .right-side input, .add-hours-modal .modal-body .left-side input {
        padding: 12px 10px;
        font-size: 13px;
    }

    .add-hours-modal .modal-header h5, .add-hours-modal .modal-body .enter-text label {
        font-size: 18px;
    }

    #map {
        width: 280px !important;
        height: 300px !important;
    }

    .opacity-0 {
        display: none !important;
    }

    .main-title {
        font-size: 18px !important;
        padding-right: 30px;
    }
}