.tabs {
    margin: 0 auto;
    box-shadow: var(--shadow-primary);
    overflow: hidden;
    align-items: center;
    background-color: var(--background-color);
    backdrop-filter: var(--background-blur);
    border-radius: var(--radius-pill);
    padding: var(--container-padding);
    width: 100%;
}

.tab-buttons {
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--radius-pill);
}

    .tab-buttons button {
        flex: 1;
        border: none;
        background: transparent;
        color: var(--color-primary);
        font-weight: bold;
        cursor: pointer;
        border-radius: var(--radius-pill);
        transition: var(--default-transition);
        font-size: var(--font-size-md);
        position: relative;
    }

        .tab-buttons button::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -2px;
            transform: translateX(-50%) scaleX(0);
            transform-origin: center;
            width: 100%;
            height: 2px;
            background-color: var(--color-primary);
            transition: transform 0.3s ease;
        }


        .tab-buttons button:hover::after {
            transform: translateX(-50%) scaleX(1);
        }

        .tab-buttons button.active {
            color: var(--color-primary-dark);
        }


            .tab-buttons button.active::after {
                transform: translateX(-50%) scaleX(1);
                background-color: var(--color-primary-dark);
            }



.tab-content {
    display: none;
    padding: 25px;
    animation: fade 0.3s ease-in-out;
}

    

    .tab-content.active {
        display: block;
    }

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.accordion {
    display: none;
}

.accordion-item {
    border-bottom: 1px solid #ddd;
}

.accordion-header {
    color: var(--color-primary);
    padding: 14px 16px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--default-transition);
}

    .accordion-header:hover {
        color: var(--color-primary-dark);
    }

.accordion-content {
    display: none;
    padding: 20px;
    transition: var(--default-transition);
}

    .accordion-content.active {
        display: block;
    }




@media (max-width: 992px) {

    .csr-container, .contact-container {
        gap: 40px;
        flex-direction: column;
    }


    iframe {
        width: 100%;
        height: 100%;
    }

    .section-content {
        gap: 100px;
    }

    .csr-container img {
        width: 100%;
    }

    .info-container {
        width: 100%;
    }
}


@media (max-width: 768px) {
    .tab-buttons {
        display: none;
    }

    .tab-content {
        display: none !important;
    }

    .accordion {
        display: block;
    }

    .csr-container {
        flex-direction: column;
        text-align: center;
    }

        .csr-container .image {
            text-align: center;
        }
}

@media (max-width: 578px) {
    .csr-container, .contact-container {
        gap: 30px;
    }

    .info {
        gap: 5px;
    }
}