h1, h2 {
    padding:40px 0px;
    font-size: 80px;
    font-weight:700;
}

.pill-box {
    width:250px;
    position: relative;
    z-index: 2;
}

.fix-60 > div {
    flex-basis:31%;
    position:relative;
    border-radius:20px;
}

.fix-60 > div::after {
    content: '';
    position:absolute;
    bottom:15px;
    right:15px;
    width:40px;
    height:40px;
    background-size: contain;
    background-repeat: no-repeat;
}

.fix-60 h4 {
    font-size:18px;
    font-weight:500;
    padding:20px;
    max-width:80%;
}

.fix-60 h4 strong {
    font-weight: 700;
}

.fix-60 img {
    height: 200px;
    width: 100%;
    margin-bottom: 40px;
}

.fix-1 {
    background:var(--black-to-grey-v);
}

.fix-1::after, .fix-5::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='154.7 92.0 372.2 372.2'%3E%3Cg%3E%3Ccircle cx='340.8' cy='278.1' opacity='.55' r='186.1' fill='%23a7c2df'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M442.6,278.9l-147.5,91.8c-7.2,7.2-19.6,2.1-19.6-8.1l-0.3-168.8c0-10.2,12.3-15.3,19.6-8.1l147.8,76.9 C447.1,267.2,447.1,274.4,442.6,278.9z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
}

.fix-2, .fix-6 {
    background-color:#737373;
}

.fix-2::after, .fix-4::after, .fix-6::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='154.7 92.0 372.2 372.2'%3E%3Cg%3E%3Ccircle cx='340.8' cy='278.1' opacity='.55' r='186.1' fill='%23000000'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M442.6,278.9l-147.5,91.8c-7.2,7.2-19.6,2.1-19.6-8.1l-0.3-168.8c0-10.2,12.3-15.3,19.6-8.1l147.8,76.9 C447.1,267.2,447.1,274.4,442.6,278.9z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
}

.fix-3 {
    background-color:#d9d9d9;
}

.fix-3::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='154.7 92.0 372.2 372.2'%3E%3Cg%3E%3Ccircle cx='340.8' cy='278.1' opacity='.55' r='186.1' fill='rgb(244, 112, 2)'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M442.6,278.9l-147.5,91.8c-7.2,7.2-19.6,2.1-19.6-8.1l-0.3-168.8c0-10.2,12.3-15.3,19.6-8.1l147.8,76.9 C447.1,267.2,447.1,274.4,442.6,278.9z' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
}

.fix-4 {
    background-color: #f47002;
}

.fix-5 {
    background-color: #000000;
}

.fix-1 h4, .fix-5 h4, .fix-6 h4 {
    color: var(--white);
}

.fix-2 img, .fix-3 img, .fix-4 img, .fix-5 img, .fix-6 img {
    opacity: 0.7;
}

.supp h3 {
    font-family: var(--font-body);
    font-size: 40px;
    font-weight: 600;
    line-height: 1em;
    text-align: center;
    max-width:500px;
}

.supp img {
    width: 70%;
}

/* Main wrapper for the two-column layout */
.support-wrapper {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 40px; /* Space between sidebar and content */
}

/* Left Sidebar */
.support-sidebar {
    flex: 0 0 25%; /* Takes up 25% of the width */
    width: 25%;
    position: sticky; /* The magic for the scrolling effect */
    top: 120px; /* Distance from the top before it sticks. Adjust as needed. */
}

.support-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.support-menu li a {
    display: block;
    color:var(--black);
    padding: 20px 0px 0px;
    text-decoration: none;
    font-family:var(--font-h);
    font-size: 16px;
}

.support-menu li a:hover {
    text-decoration:underline;
}

.support-menu li a.active {
    color: var(--grey);
}


/* Right Content Area */
.support-content {
    flex: 1; /* Takes up the remaining available space */
}

.support-content .breadc {
    font-family: var(--font-h);
    font-size: 16px;
    list-style-type:none;
    margin:10px 0px 0px;
    padding:0px;
}

.support-content .breadc li {
    display:inline;
    /*padding-right:5px;*/
}

.support-content .breadc li:not(:first-child)::before {
    content:'>';
    padding-right:5px;
}

.support-content h1 {
    font-family: var(--font-h);
    font-size: 36px;
    font-weight:400;
    padding:0;
}

.support-content h2 {
    font-size:28px;
    font-weight:400;
    padding:0;
}

.support-content h3, .support-content h4, .support-content h5, .support-content h6 {
    font-family: var(--font-h);
    font-size: 22px;
    font-weight:400;
    padding:10px 0px 0px;
}

.support-content p, .support-content li {
    font-family: var(--font-h);
    font-size: 14px;
    font-weight:400;
}
.support-content p {
    margin-bottom:10px;
}
.support-q strong {
    font-size:16px;
}

aside .pill-box {
    background-color:var(--black);
}

aside .pill-box .pill:not(.active) {
    color:var(--white);
}

.supp-tp {
    border:solid 1px #d9d9d9;
    border-radius:15px;
}

.supp-tp .tp-svg {
    width:153.62px;
    height:37.15px;
}

.supp-tp .star-svg {
    width:159.25px;
    height:29.83px;
}

.tp-name {
    border-radius:50rem;
    padding:20px;
    background-color:#33691e;
    width:50px;
    height:50px;
    color:var(--white);
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top:50px;
}

.tp-name span {
    position:relative;
    top:-5px;
}

.tp-text {
    margin-top:10px;
    color:#126849;
    font-size:20px;
    font-weight:600;
    text-align:left;
}

.tp-btn {
    margin-top: 90px;
    margin-bottom: 10px;
    text-align: right;
}

.supp-img {
    border-radius:15px;
    overflow:hidden;
    position:relative;
    min-height:400px;
}

.supp-img img {
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}

.supp-img h5 {
    background:var(--grey-to-black);
    font-size:26px;
    font-weight:500;
    z-index:2;
    text-align:left;
}

.supp-img-btn {
    text-align: right;
    margin-bottom: 10px;
}

@media (max-width:1099.98px) {
    h1, h2 {
        font-size: 60px;
    }

    .fix-60 > div {
        flex-basis: 48%;
    }
}

@media (max-width: 991.98px) {
    .support-sidebar {
        display: none; /* Hide the sidebar */
    }

    .support-content {
        flex: 0 0 100%; /* Make the content area take up the full width */
        width: 100%;
    }
}

@media (max-width:575.98px) {
    h1, h2 {
        font-size:48px;
    }

    .fix-60 > div {
        flex-basis: 100%;
    }

    .quick-hdr h4 {
        font-size:18px;
    }

    .faq-q {
        font-size:14px;
    }

    .fix-60 h4 {
        font-size:16px;
    }

    .supp h3 {
        font-size:32px;
    }

    .supp-tp .tp-svg {
        width: 102.41px;
        height: 24.77px;
    }

    .supp-tp .star-svg {
        width: 106.17px;
        height: 19.89px;
    }

    .supp-img h5 {
        font-size: 22px;
    }
}

/* ===== Dropdown Styles ===== */

.category-dropdown-wrapper {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
}

.dropdown-arrow {
    margin-left: 6px;
    font-size: 11px;
    transition: transform 0.3s ease;
    color: #fff;
}

.category-dropdown-wrapper.active1 .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Box */
.subcategory-dropdown-menu {
    position: absolute;
    top: 120%;
    left: 0;
    min-width: 240px;
    background: #000;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: none;
    z-index: 999;
    text-align: left;
}

/* Show dropdown */
.category-dropdown-wrapper.active1 .subcategory-dropdown-menu {
    display: block;
    animation: fadeDropdown 0.2s ease-in-out;
}

/* Animation */
@keyframes fadeDropdown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown Items */
.subcategory-dropdown-menu a {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease;
    background-color: #000;
    z-index:1000;
}

/* Hover */
.subcategory-dropdown-menu a:hover {
    color: var(--green);
}

/* Active Item */
.active1-subcategory {
    background: #eaf4ff;
    color: #007bff !important;
    font-weight: 600;
}

/* Divider */
.subcategory-dropdown-menu a + a {
    border-top: 1px solid #f1f1f1;
}

.no-questions {
    padding-top:20px;
}

.truncate {
    white-space: nowrap; /* Keep text on a single line */
    overflow: hidden; /* Hide text that spills out */
    text-overflow: ellipsis; /* Add the "..." */
    width: 120px;
}