@charset "UTF-8";

/* Contact Us Page Specific Styles */

/* Desktop/Mobile responsive display classes */
.pc-object {
    display: grid !important; /* Maintain grid layout on desktop */
}

.mo-object {
    display: none !important;
}

/* Better strategy: Adjust grid layout and add proper spacing */
.contactUs .customerService .service-con {
    width: 90rem; /* Increase overall container width further */
    grid-template-columns: 1.4fr 26.6rem; /* Make left column 40% bigger (1.4fr vs 1fr) */
    gap: 4rem; /* Maintain gap between left and right columns */
}

/* Remove the problematic width override */
.contactUs .customerService .service-con .left-con {
    /* Remove width: 120% that caused overlap */
    max-width: none;
}

/* Ensure content has more breathing room */
.contactUs .customerService .service-con .left-con ul {
    padding-right: 2rem; /* Add padding to prevent content from getting too close */
}

/* Make li content display in single line */
.contactUs .customerService .service-con .left-con ul li {
    white-space: nowrap; /* Prevent text wrapping */
}

.contactUs .customerService .service-con .left-con ul li button,
.contactUs .customerService .service-con .left-con ul li a {
    white-space: nowrap; /* Prevent button/link text from wrapping */
    overflow: hidden; /* Hide overflow if text is too long */
    text-overflow: ellipsis; /* Add ... if text is cut off */
}

/* Ensure proper responsiveness */
@media screen and (max-width: 1000px) {
    /* Switch display for mobile */
    .pc-object {
        display: none !important;
    }
    
    .mo-object {
        display: block !important;
    }
    
    .contactUs .customerService .service-con {
        width: 100%; /* Reset container width on mobile */
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 2rem; /* Reduce gap on mobile */
    }
    
    .contactUs .customerService .service-con .left-con ul {
        padding-right: 0; /* Remove padding on mobile */
    }
    
    /* Hide empty li on mobile */
    .contactUs .customerService .service-con .left-con ul li:empty {
        display: none;
    }
    
    /* Left align content for li elements on mobile */
    .contactUs .customerService .service-con .left-con ul li {
        text-align: left;
        justify-content: flex-start;
        white-space: normal; /* Allow text wrapping on mobile for better readability */
        margin-bottom: 2.5rem; /* Add vertical spacing between mobile list items */
    }
    
    .contactUs .customerService .service-con .left-con ul li button,
    .contactUs .customerService .service-con .left-con ul li a {
        text-align: left;
        justify-content: flex-start;
        white-space: normal; /* Allow text wrapping on mobile */
        overflow: visible; /* Show full text on mobile */
        text-overflow: initial; /* Remove ellipsis on mobile */
    }
    
    /* Ensure the entire left-con container is left-aligned */
    .contactUs .customerService .service-con .left-con {
        text-align: left;
    }
    
    .contactUs .customerService .service-con .left-con ul {
        text-align: left;
        align-items: flex-start;
        margin-left: 0!important; /* Override mobile.css margin-left: 6rem */
    }
}