/* Base Mobile Styles */
.faq-section {
    background-color: var(--color-bg);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0px 0px 100px 0px; /* Mobile padding */
}

.faq-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-content-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 1200px;
    width: 100%;
    flex-direction: column; /* Mobile: stack */
    gap: 20px; /* Mobile gap */
}

.faq-accordion-container {
    flex: 1;
    width: 100%; /* Ensure it takes full width in column layout */
}

.contact-block-container {
    flex: 0 0 auto; /* Adjust flex properties for column layout */
    width: 100%; /* Full width on mobile */
    position: static; /* Mobile: not sticky */
    top: auto;
    height: auto;
    overflow-y: visible; /* Mobile: visible overflow */
}

.contact-block-container::-webkit-scrollbar { /* Keep scrollbar hidden if still desired, though overflow is visible */
    width: 0px;
    background: transparent;
}

.faq-title {
    color: var(--color-white);
    font-family: 'Trap', sans-serif;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 20px; /* Mobile margin, was 0px, adjusted for some spacing */
    text-align: center;

}

.accordion {
    width: 100%;
    max-width: 800px; /* This max-width might be fine for mobile too */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.accordion-item,
.accordion-item.bg-dark,
.accordion-item.bg-light {
    background-color: transparent !important;
    border: none !important;
    margin-bottom: 10px;
    width: 100%;
    display: block;
    min-width: 100%;
    cursor: pointer;
}

.accordion-header {
    margin: 0 !important;
    
}

.accordion-button,
.accordion-button.bg-dark,
.accordion-button.bg-light {
    background-color: transparent !important;
    color: var(--color-white) !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 16px; /* Mobile font size */
    font-weight: 300;
    padding: 15px 0; /* Mobile padding */
    border-radius: 10px !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
    border: none !important;
    min-height: 60px; /* Mobile min height */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
}

.accordion-button:not(.collapsed),
.accordion-button:not(.collapsed).bg-dark,
.accordion-button:not(.collapsed).bg-light {
    background-color: transparent !important;
    color: var(--color-white) !important;
    box-shadow: none !important;
    border: none !important;
}

.accordion-button::after {
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    transform: rotate(-180deg);
}

.accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

.accordion-collapse {
    background-color: transparent !important;
    width: 100% !important;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-collapse.show {
    max-height: 500px; /* Adjust based on content */
    transition: max-height 0.3s ease-in;
}

.accordion-collapse.collapse {
    max-height: 0;
}

.accordion-body {
    background-color: transparent !important;
    color: var(--color-white);
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 300;
    font-size: 14px; /* Mobile font size */
    line-height: 140%;
    width: 100%;
    padding: 0 !important; 
    align-self: stretch;
    flex: none;
    order: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    opacity: 0.8;
    min-height: 60px; /* Mobile min height */
    box-sizing: border-box;
}

.accordion-divider {
    width: 100% !important;
    height: 1px !important;
    background: var(--color-white-50) !important;
    flex: none !important;
    order: 1 !important;
    align-self: stretch !important;
    flex-grow: 0 !important;
    margin: 10px 0 !important;
}

/* Contact Block Styles (Base/Mobile) */
.contact-block {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    gap: 20px;
    background: var(--color-purple);
    border-radius: 10px;
    width: 100%;
}

.contact-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 10px;
    /* width: 189px; Removed fixed width */
    height: 50px;
}

.contact-image {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    background: url('../images/Founder_IMG.avif');
    background-size: cover;
    border: 1px solid var(--color-black-10);
    border-radius: 50%;
}

.contact-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    /* width: 129px; Removed fixed width */
    height: 43px;
}

.contact-info h3 {
    /* width: 119px; Removed fixed width */
    height: 25px;
    font-family: 'DM Sans';
    font-weight: 600;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-black);
    margin: -2px 0px;
}

.contact-info p {
    /* width: 129px; Removed fixed width */
    height: 20px;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    color: var(--color-black);
    opacity: 0.8;
}

.contact-block h2 {
    width: 100%;
    font-family: 'DM Sans';
    font-weight: 700;
    font-size: 36px; /* This is quite large for mobile, consider adjusting */
    text-align: left;
    line-height: 100%;
    color: var(--color-black);
    margin: 0;
}

.contact-note {
    width: 100%;
    font-family: 'DM Sans';
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    color: var(--color-black);
    opacity: 0.8;

}

/* Tablet and Desktop Styles */
@media (min-width: 769px) { /* Using 769px to be distinct from max-width: 768px */
    .faq-section {
        padding: 0; /* Reset mobile padding */
    }

    .faq-content-row {
        flex-direction: row; /* Desktop: side-by-side */
        gap: 40px; /* Desktop gap */
    }

    .contact-block-container {
        flex: 0 0 380px; /* Desktop fixed width */
        position: sticky; /* Desktop: sticky */
        top: 100px;
        height: 100%; /* Or max-height related to viewport */
        overflow-y: auto; /* Desktop: custom scroll */
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }

    .faq-title {
        font-size: 36px; /* Desktop font size */
        margin-bottom: 40px; /* Desktop margin */
    }

    .accordion-button {
        font-size: 18px; /* Desktop font size */
        padding: 25px 0px; /* Desktop padding */
        min-height: 70px; /* Desktop min height */
    }
    
    .accordion-body {
        font-size: 18px; /* Desktop font size */
        padding-top: 16px !important; /* Desktop padding */
        padding-bottom: 24px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
        min-height: 70px; /* Desktop min height */
    }
}