/* Container for the entire content */
div.terms-of-use-container,
div.privacy-policy-container {
    display: flex;
    justify-content: space-between;
    /* margin: 20px; */
}

/* Left section for "Jump to section" list */
div.terms-of-use-left-section,
div.privacy-policy-left-section {
    width: 25%;
    padding-right: 0;
}

/* Style for the "Jump to section" list */
div.terms-of-use-left-section ol,
div.privacy-policy-left-section ol {
    list-style-type: decimal;
    padding-left: 20px;
    border-top: none;
    margin-top: -7px;
}

div.terms-of-use-left-section ol li,
div.privacy-policy-left-section ol li {
    margin-bottom: 16px;
    opacity: 70%;
}

div.terms-of-use-left-section ol a,
div.terms-of-use-left-section ol a:visited,
div.privacy-policy-left-section ol a,
div.privacy-policy-left-section ol a:visited {
    color: rgba(32, 80, 255, 1);
    text-decoration: underline;
}

/* Right section for the content (Terms of Use text) */
div.terms-of-use-right-section,
div.privacy-policy-right-section {
    width: 100%;
    /* padding-left: 25px; */
    text-align: left;
    /* Default text alignment */
}

/* Title for the Terms of Use */
div.terms-of-use-left-section h1, div.privacy-policy-left-section h1 {
    font-size: 24px;
    margin-bottom: 32px;
    color: rgba(32, 32, 32, 1);
}

/* Content Paragraph Styling */
div.terms-of-use-right-section p, div.privacy-policy-right-section p {
    margin-bottom: 15px;
    color: rgba(32, 32, 32, 1);
    opacity: 70%;
}

/* Styling links inside content */
div.terms-of-use-right-section a, div.privacy-policy-right-section a {
    color: rgba(32, 32, 32, 1);
    text-decoration: underline;
}

div.terms-of-use-right-section a:hover , div.privacy-policy-right-section a:hover {
    text-decoration: underline;
}

/* Centered span text */
div.terms-of-use-right-section span , div.privacy-policy-right-section span {
    display: block;
    color: rgba(32, 32, 32, 1);
    margin-bottom: 32px;
    opacity: 40%;
    font-size: 16px;
}

/* Responsive layout for smaller screens */
@media (max-width: 768px) {
    div.terms-of-use-container, div.privacy-policy-container {
        flex-direction: column;
    }

    div.terms-of-use-left-section,
    div.terms-of-use-right-section, div.privacy-policy-left-section,
    div.privacy-policy-right-section {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }

    div.terms-of-use-left-section h1,
    div.terms-of-use-right-section h1 , div.privacy-policy-left-section h1,
    div.privacy-policy-right-section h1 {
        font-size: 24px;
    }

    /* New css */
    .terms-of-use-left-section, .privacy-policy-left-section {
        margin-bottom: 30px;
    }

    .terms-of-use-container, .privacy-policy-container {
        padding: 0 16px !important;
    }
}

div.terms-of-use-container, div.privacy-policy-container {
    display: flex;
    justify-content: space-between;
    /* margin: 20px; */
    width: 100%;
    max-width: 1440px;
    justify-self: center;
    align-self: center;
    padding: 0 40px;
    margin-bottom: 100px;
    gap: 32px;
}

.page-id-477 header#header-small, .page-id-500 header#header-small {
    margin-bottom: 40px;
}

.page-id-477, .page-id-500 {
    margin-bottom: 0;
}

/* ================================ TERMS OF USE – RESPONSIVE DROPDOWN No HTML change required ================================ */
/* Desktop default */
.terms-of-use-left-section ol, .privacy-policy-left-section ol {
    display: block;
}

/* ================================ Mobile / Tablet Dropdown ================================ */
@media (max-width: 1023px) {
    div.terms-of-use-left-section ol li, div.privacy-policy-left-section ol li {
        margin-bottom: 5px;
    }

    .terms-of-use-container, .privacy-policy-container {
        flex-direction: column;
        padding: 0 24px !important;
    }

    div.terms-of-use-left-section, div.privacy-policy-left-section {
        width: 100%;
        padding-right: 0;
    }

    div.terms-of-use-right-section, div.privacy-policy-right-section {
        padding-left: 0px;
        margin-top: 20px;
    }

    .terms-of-use-left-section, .privacy-policy-left-section {
        position: relative;
        width: 100%;
        z-index: 999;
    }

    /* Dropdown trigger */
    .terms-of-use-left-section h1 , .privacy-policy-left-section h1 {
        cursor: pointer;
        user-select: none;
        background: #fff;
        border: 1px solid #ddd;
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        /* z-index: 1000; */
        margin-bottom: 5px !important;
    }

    /* Arrow */
    .terms-of-use-left-section h1::after , .privacy-policy-left-section h1::after {
        content: "\25BC";
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    .terms-of-use-left-section.active h1::after , .privacy-policy-left-section.active h1::after {
        transform: rotate(180deg);
    }

    /* Dropdown list */
    .terms-of-use-left-section ol , .privacy-policy-left-section ol {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        border: 1px solid #ddd;
        padding: 10px 16px;
        margin: 0;
        max-height: 300px;
        overflow-y: auto;
        box-sizing: border-box;
        /* z-index: 9999; */
    }

    div.terms-of-use-container, div.privacy-policy-container {
        gap: 0px;
    }

    /* Show dropdown */
    .terms-of-use-left-section.active ol, .privacy-policy-left-section.active ol {
        display: block;
    }

    /* FIX: numbering cut issue (10,11,12) */
    .terms-of-use-left-section ol li, .privacy-policy-left-section ol li {
        list-style-position: inside;
        padding: 6px 0;
        margin: 0;
        line-height: 1.4;
    }

    .terms-of-use-left-section ol li::marker, .privacy-policy-left-section ol li::marker {
        font-weight: 600;
    }

    /* Links */
    .terms-of-use-left-section ol li a, .privacy-policy-left-section ol li a {
        display: inline;
    }

    .terms-of-use-left-section ol li a:hover , .privacy-policy-left-section ol li a:hover {
        text-decoration: underline;
    }

    div.terms-of-use-left-section ol li, div.privacy-policy-left-section ol li {
        /* margin-top: -11px; */
    }
}

div.terms-of-use-right-section h1, div.privacy-policy-right-section h1 {
    font-size: 28px;
    margin-bottom: 5px;
    color: rgba(32, 32, 32, 1);
}
.privacy-policy-right-section ul li {
    opacity: 70%;
}