/*========= RESPONSIVE CSS ===============*/

@media (max-width:920px) {
    nav .navbar {
        max-width: 100%;
        padding: 0 25px;
    }

    nav .navbar .logo a {
        font-size: 27px;
    }

    nav .navbar .links li {
        padding: 0 10px;
        white-space: nowrap;
    }

    nav .navbar .links li a {
        font-size: 15px;
    }

    .box,
    .box-detail {
        padding: 20px;
    }

    section#about .about {
        flex-direction: column;
    }

    section#services .service .service-content {
        flex-direction: column;
        gap: 30px;
    }

    section#prices {
        border-top-left-radius: 150px;
    }

    section#prices .price .price-content .price-detail {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }

    section#contact {
        border-top-right-radius: 150px;
    }

    section#contact .contact .contact-form .contact-form-email,
    section#contact .contact .contact-form .contact-form-mobile {
        grid-column: span 2;
    }

    section#contact-form-detail {
        border-top-right-radius: 150px;
    }

    section#contact-form-detail .contact .contact-form .contact-form-email,
    section#contact-form-detail .contact .contact-form .contact-form-mobile {
        grid-column: span 2;
    }

    section#reservation-form-detail .contact .contact-form .contact-form-name,
    section#reservation-form-detail .contact .contact-form .contact-form-email,
    section#reservation-form-detail .contact .contact-form .contact-form-mobile,
    section#reservation-form-detail .contact .contact-form .contact-form-address {
        grid-column: span 2;
    }

    section#recruitment-info {
        border-top-left-radius: 150px;
    }

    section#recruitment-info .info .info-form {
        gap: 0px;
    }

    section#recruitment-info .info .info-content {
        width: 100%;
        flex-direction: column;
    }

    section#recruitment-application-form {
        border-top-right-radius: 150px;
    }

    section#recruitment-application-form .application .application-form {
        gap: 0px;
    }

    section#recruitment-application-form .application .application-content {
        width: 100%;
    }

    section#recruitment-application-form .application .application-form>div,
    section#recruitment-application-form .application .application-form>input,
    section#recruitment-application-form .application .application-form>textarea {
        margin-bottom: 15px;
    }

    section#recruitment-application-form .application .application-form .application-file {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 15px;
    }

    section#recruitment-application-form .application .application-form .application-file p {
        margin-left: unset;
    }

    section#recruitment-application-form .application .application-form #detail-application-form-position,
    section#recruitment-application-form .application .application-form .detail-application-form-position,
    section#recruitment-application-form .application .application-form #detail-application-form-name,
    section#recruitment-application-form .application .application-form #name,
    section#recruitment-application-form .application .application-form #detail-application-form-gender,
    section#recruitment-application-form .application .application-form .detail-application-form-gender,
    section#recruitment-application-form .application .application-form #detail-application-form-age,
    section#recruitment-application-form .application .application-form #age,
    section#recruitment-application-form .application .application-form #detail-application-form-address,
    section#recruitment-application-form .application .application-form #address,
    section#recruitment-application-form .application .application-form #detail-application-form-mobile,
    section#recruitment-application-form .application .application-form #mobile,
    section#recruitment-application-form .application .application-form #detail-application-form-email,
    section#recruitment-application-form .application .application-form #email,
    section#recruitment-application-form .application .application-form #detail-application-form-career,
    section#recruitment-application-form .application .application-form #career,
    section#recruitment-application-form .application .application-form #detail-application-form-job-aspirations,
    section#recruitment-application-form .application .application-form #job-aspirations,
    section#recruitment-application-form .application .application-form #detail-application-form-attactment,
    section#recruitment-application-form .application .application-form .application-file,
    section#recruitment-application-form .application .application-form #detail-application-form-other-info,
    section#recruitment-application-form .application .application-form #other-info {
        grid-column: span 2;
    }

    section#recruitment-application-form .application .application-form label:has(.required) {
        display: flex;
        justify-content: flex-start;
        gap: 10px;
    }

    section#recruitment-application-form .application .application-form .application-radio-btn-group {
        gap: 10px 15px;
    }

    section#detail-contact-faq {
        border-top-right-radius: 150px;
    }

    section#detail-recruitment-faq {
        border-top-right-radius: 150px;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content {
        grid-template-areas:
            "main-info"
            "main-img"
            "sub-info"
            "sub-img";
        justify-items: center;
        gap: 20px;
        padding-top: 20px;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-main-logo {
        width: 50vw;
        height: 50vw;
        transform: rotate(0deg);
        margin-bottom: 50px;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-main-logo img {
        width: 70vw;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-img-item {
        width: 50vw;
        height: 80vw;
        transform: rotate(0deg);
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-img-item img {
        width: 70vw;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-main-info,
    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-sub-info {
        gap: 10px;
    }

    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content {
        grid-template-areas:
            "info"
            "staff"
            "img";
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding-top: 20px;
    }

    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content .business-info-img {
        width: 50vw;
        height: 50vw;
        transform: rotate(0deg);
        margin-top: 50px;
    }

    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content .business-info-img img {
        width: 70vw;
    }

    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content .business-info-content,
    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content .business-info-staff {
        gap: 10px;
    }

    section#detail-staff-info .detail-staff-info .detail-staff-info-content {
        grid-template-columns: 1fr;
    }

    section#detail-meals-service .detail-meals-service .detail-meals-service-content {
        grid-template-areas:
            "img-1"
            "info-1"
            "img-2"
            "info-2";
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding-top: 20px;
    }

    section#detail-bathing-dressing-grooming-service .detail-bathing-dressing-grooming-service .detail-bathing-dressing-grooming-service-content {
        grid-template-areas:
            "img-1"
            "info-1"
            "img-2"
            "info-2";
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding-top: 20px;
    }

    section#detail-toileting-service .detail-toileting-service .detail-toileting-service-content {
        grid-template-areas:
            "img-1"
            "info-1"
            "img-2"
            "info-2";
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding-top: 20px;
    }

    section#detail-transfer-mobility-service .detail-transfer-mobility-service .detail-transfer-mobility-service-content {
        justify-items: center;
        gap: 20px;
        padding-top: 20px;
    }

    section#detail-companion-shopping-assistance-service .detail-companion-shopping-assistance-service .detail-companion-shopping-assistance-service-content {
        grid-template-areas:
            "img-1"
            "info-1"
            "img-2"
            "info-2";
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding-top: 20px;
    }

    section#detail-household-chores-service .detail-household-chores-service .detail-household-chores-service-content {
        grid-template-areas:
            "img-1"
            "info-1"
            "info-2"
            "img-2";
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        padding-top: 20px;
    }

    #footer .footer-bottom .copyright {
        font-size: 12px;
    }
}

@media (max-width:820px) {
    nav {
        /* position: relative; */
    }

    .navbar .bx-menu {
        display: block;
    }

    nav .navbar .nav-links {
        position: fixed;
        top: 0;
        left: -100%;
        display: block;
        max-width: 270px;
        width: 100%;
        background: var(--background-color);
        line-height: 40px;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        transition: all 0.5s ease;
        z-index: 1000;
        overflow: auto;
    }

    .navbar .nav-links .sidebar-logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .sidebar-logo .logo-name {
        font-size: 25px;
        color: #fff;
    }

    .sidebar-logo i,
    .navbar .bx-menu {
        font-size: 25px;
        color: var(--main-color);
    }

    nav .navbar .links {
        display: block;
        margin-top: 20px;
    }

    nav .navbar .links li .arrow {
        line-height: 40px;
    }

    nav .navbar .links li {
        display: block;
    }

    nav .navbar .links li .sub-menu {
        position: relative;
        top: 0;
        box-shadow: none;
        display: none;
    }

    nav .navbar .links li .sub-menu li {
        border-bottom: none;

    }

    /* .navbar .links li .sub-menu .more-sub-menu {
        display: none;
        position: relative;
        left: 0;
    }

    .navbar .links li .sub-menu .more-sub-menu li {
        display: flex;
        align-items: center;
        justify-content: space-between;
    } */

    .links li:hover .home-arrow,
    .links li:hover .service-arrow,
    .links li:hover .price-arrow,
    .links li:hover .contact-arrow,
    .links li:hover .recruitment-arrow,
    .links li:hover .announcements-arrow {
        transform: rotate(0deg);
    }

    /* .navbar .links li .sub-menu .more-sub-menu {
        display: none;
    }

    .navbar .links li .sub-menu .more span {
        background: red;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .links li .sub-menu .more:hover .more-sub-menu {
        display: none;
    } */

    nav .navbar .links li:hover .home-sub-menu,
    nav .navbar .links li:hover .service-sub-menu,
    nav .navbar .links li:hover .price-sub-menu,
    nav .navbar .links li:hover .contact-sub-menu,
    nav .navbar .links li:hover .recruitment-sub-menu,
    nav .navbar .links li:hover .announcements-sub-menu {
        display: none;
    }

    .navbar .nav-links.show1 .links .home-sub-menu,
    .navbar .nav-links.show2 .links .service-sub-menu,
    .navbar .nav-links.show3 .links .price-sub-menu,
    .navbar .nav-links.show4 .links .contact-sub-menu,
    .navbar .nav-links.show5 .links .recruitment-sub-menu,
    .navbar .nav-links.show6 .links .announcements-sub-menu {
        /* .navbar .nav-links.show2 .links .more .more-sub-menu { */
        display: block;
    }

    .navbar .nav-links.show1 .links .home-arrow,
    .navbar .nav-links.show2 .links .service-arrow,
    .navbar .nav-links.show3 .links .price-arrow,
    .navbar .nav-links.show4 .links .contact-arrow,
    .navbar .nav-links.show5 .links .recruitment-arrow,
    .navbar .nav-links.show6 .links .announcements-arrow {
        transform: rotate(180deg);
    }

    /* .navbar .nav-links.show7 .links .more-arrow {
        transform: rotate(90deg);
    } */

    section#about .about {
        padding: 30px 15px;
        gap: 15px;
    }

    section#about .about .about-logo svg {
        height: 150px;
    }

    section#about .about .about-info .about-info-txt {
        font-size: 16px;
        line-height: 32px;
    }

    section#services .service {
        padding: 0;
    }

    section#prices {
        border-top-left-radius: 100px;
    }

    section#prices .price {
        padding: 0;
    }

    section#prices .price .price-content {
        flex-direction: column;
        gap: 30px;
    }

    section#prices .price .price-content .price-detail {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
    }

    section#contact {
        border-top-right-radius: 100px;
    }

    section#contact .contact {
        padding: 0;
    }

    section#contact .contact .contact-content {
        flex-direction: column;
    }

    section#contact-form-detail {
        border-top-right-radius: 100px;
    }

    section#contact-form-detail .contact {
        padding: 0;
    }

    section#contact-form-detail .contact .contact-content {
        flex-direction: column;
    }

    section#contact-form-detail .contact .contact-form {
        gap: 15px;
    }

    section#contact-form-detail .contact .contact-form .contact-contact-way .contact-checkbox-group {
        gap: 10px 15px;
    }

    section#reservation-form-detail {
        border-top-right-radius: 100px;
    }

    section#reservation-form-detail .contact {
        padding: 0;
    }

    section#reservation-form-detail .contact .contact-content {
        flex-direction: column;
    }

    section#reservation-form-detail .contact .contact-form {
        gap: 15px;
    }

    section#reservation-form-detail .contact .contact-form .contact-desired-services .contact-checkbox-group {
        gap: 10px 15px;
    }

    section#reservation-form-detail .contact .contact-form .contact-language-support .contact-radio-btn-group {
        gap: 10px 15px;
    }

    section#reservation-form-detail .contact .contact-form .contact-plan-selected .contact-checkbox-group {
        gap: 10px 15px;
    }

    section#reservation-form-detail .contact .contact-form .contact-payment-method .contact-radio-btn-group {
        gap: 10px 15px;
    }

    section#reservation-form-detail .contact .contact-form .contact-family-structure .contact-radio-btn-group {
        gap: 10px 15px;
    }

    section#reservation-form-detail .contact .contact-form .contact-form-desired-date .contact-date-time-picker {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    section#recruitment-info {
        border-top-left-radius: 100px;
    }

    section#recruitment-info .info {
        padding: 0;
    }

    section#recruitment-application-form {
        border-top-right-radius: 100px;
    }

    section#recruitment-application-form .application {
        padding: 0;
    }

    section#detail-contact-faq {
        border-top-right-radius: 100px;
    }

    section#detail-contact-faq .contact-faq {
        padding: 0;
    }

    section#detail-recruitment-faq {
        border-top-right-radius: 100px;
    }

    section#detail-recruitment-faq .recruitment-faq {
        padding: 0;
    }

    section#detail-company-overview .detail-company-overview {
        padding: 0;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content {
        padding-top: 20px;
        margin-bottom: 30px;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-main-logo {
        width: 70vw;
        height: 70vw;
        transform: rotate(0deg);
        margin-bottom: 50px;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-main-logo img {
        width: 90vw;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-img-item {
        width: 70vw;
        height: 100vw;
        transform: rotate(0deg);
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-img-item img {
        width: 90vw;
    }

    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-main-info,
    section#detail-company-overview .detail-company-overview .detail-company-overview-content .overview-sub-info {
        line-height: 25px;
        font-size: 16px;
        letter-spacing: 0.5px;
        gap: 10px;
    }

    section#detail-company-business-info .detail-company-business-info {
        padding: 0;
    }

    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content {
        padding-top: 20px;
        margin-bottom: 30px;
    }

    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content .business-info-img {
        width: 70vw;
        height: 70vw;
        transform: rotate(0deg);
        margin-top: 50px;
    }

    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content .business-info-img img {
        width: 90vw;
    }

    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content .business-info-content,
    section#detail-company-business-info .detail-company-business-info .detail-company-business-info-content .business-info-staff {
        line-height: 25px;
        font-size: 16px;
        letter-spacing: 0.5px;
        gap: 20px;
        text-indent: 20px;
    }

    section#detail-staff-info .detail-staff-info {
        padding: 0;
    }

    section#detail-meals-service .detail-meals-service {
        padding: 0;
    }

    section#detail-meals-service .detail-meals-service .detail-meals-service-content .meals-service-info-1,
    section#detail-meals-service .detail-meals-service .detail-meals-service-content .meals-service-info-2 {
        line-height: 25px;
        font-size: 16px;
        letter-spacing: 0.5px;
        gap: 10px;
        text-indent: 20px;
    }

    section#detail-bathing-dressing-grooming-service .detail-bathing-dressing-grooming-service {
        padding: 0;
    }

    section#detail-bathing-dressing-grooming-service .detail-bathing-dressing-grooming-service .detail-bathing-dressing-grooming-service-content .bathing-dressing-grooming-service-info-1,
    section#detail-bathing-dressing-grooming-service .detail-bathing-dressing-grooming-service .detail-bathing-dressing-grooming-service-content .bathing-dressing-grooming-service-info-2 {
        line-height: 25px;
        font-size: 16px;
        letter-spacing: 0.5px;
        gap: 10px;
        text-indent: 20px;
    }

    section#detail-toileting-service .detail-toileting-service {
        padding: 0;
    }

    section#detail-toileting-service .detail-toileting-service .detail-toileting-service-content .toileting-service-info-1,
    section#detail-toileting-service .detail-toileting-service .detail-toileting-service-content .toileting-service-info-2 {
        line-height: 25px;
        font-size: 16px;
        letter-spacing: 0.5px;
        gap: 10px;
        text-indent: 20px;
    }

    section#detail-transfer-mobility-service .detail-transfer-mobility-service {
        padding: 0;
    }

    section#detail-transfer-mobility-service .detail-transfer-mobility-service .detail-transfer-mobility-service-content .transfer-mobility-service-info-1,
    section#detail-transfer-mobility-service .detail-transfer-mobility-service .detail-transfer-mobility-service-content .transfer-mobility-service-info-2 {
        line-height: 25px;
        font-size: 16px;
        letter-spacing: 0.5px;
        gap: 10px;
        text-indent: 20px;
    }

    section#detail-companion-shopping-assistance-service .detail-companion-shopping-assistance-service {
        padding: 0;
    }

    section#detail-companion-shopping-assistance-service .detail-companion-shopping-assistance-service .detail-companion-shopping-assistance-service-content .companion-shopping-assistance-service-info-1,
    section#detail-companion-shopping-assistance-service .detail-companion-shopping-assistance-service .detail-companion-shopping-assistance-service-content .companion-shopping-assistance-service-info-2 {
        line-height: 25px;
        font-size: 16px;
        letter-spacing: 0.5px;
        gap: 10px;
        text-indent: 20px;
    }

    section#detail-household-chores-service .detail-household-chores-service {
        padding: 0;
    }

    section#detail-household-chores-service .detail-household-chores-service .detail-household-chores-service-content .household-chores-service-info-1,
    section#detail-household-chores-service .detail-household-chores-service .detail-household-chores-service-content .household-chores-service-info-2 {
        line-height: 25px;
        font-size: 16px;
        letter-spacing: 0.5px;
        gap: 10px;
        text-indent: 20px;
    }

    section.sub-page {
        min-height: calc(100vh - 96px);
    }

    #footer {
        border-top-left-radius: unset;
    }

    #footer .footer-top {
        display: none;
    }
}

/* @media (max-width:370px) {
    nav .navbar .nav-links {
        max-width: 100%;
    }
} */