* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
ul , li {
    list-style: none;
}
a {
    text-decoration: none;
}
.tabs-content-container {
    * {
        font-family: 'Montserrat', sans-serif;
    }
    h2 {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 50px;
        @media (max-width: 700px) {
            font-size: 25px;
        }
        @media (max-width: 500px) {
            font-size: 20px;
        }
    }
    .tabs-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
        border-bottom: 1px solid #ddd;
        .outer-tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            list-style: none;
            @media (max-width: 900px) {
                flex-wrap: nowrap;
                overflow: hidden;
                overflow-x: auto;
            }
            .outer-tab {
                padding: 0 0 20px;
                margin: 0 16px;
                color: #aaa;
                cursor: pointer;
                border-bottom: 2px solid transparent;
                &:hover {
                    color: #000;
                }
                &.active {
                    border-bottom: 2px solid #000;
                }
                @media (max-width: 900px) {
                    white-space: nowrap;
                }
            }
        }
        .outer-tab-content {
            display: flex;
            opacity: 0;
            display: none;
            &.active {
                display: flex;
                opacity: 1;
            }
            @media (max-width: 900px) {
                flex-direction: column;
            }
            .inner-tabs {
                display: flex;
                flex-direction: column;
                width: 300px;
                margin-top: 20px;
                @media (max-width: 900px) {
                    width: 100%;
                }
                .inner-tab {
                    border-bottom: 1px solid #ddd;
                    background-color: #f8f8f8;
                    padding: 20px 16px;
                    line-height: 120%;
                    @media (max-width: 900px) {
                        text-align: left;
                    }
                }
            }
            .inner-tab-content {
                display: none;
                flex: 1;
                &.active {
                    display: block;
                }
                .content {
                    margin: 0;
                    max-width: 100%;
                    width: 100%;
                }
                .image {
                    height: 250px;

                    margin-bottom: 30px;
                    @media (max-width: 650px) {
                        height: 200px;
                    }
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                        object-position: left;
                    }
                }
            }
        }
    }

    .accordion {
        border-top: 1px solid #ccc;
        .accordion-header {
            padding: 15px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            span {
                &:first-child {
                    font-size: 16px;
                    font-weight: 500;
                    @media (max-width: 700px) {
                        font-size: 16px;
                    }
                }
            }
        }
        .accordion-content {
            padding: 0 15px;
            max-height: 0;
            overflow: hidden;
            transition: 0.5s ease;
            opacity: 0;
            &.active {
                padding: 15px;
                max-height: 1000px;
                transition:  0.5s ease;
                opacity: 1;
            }
            ul {
                display: flex;
                flex-direction: column;
                gap: 5px;
                li {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    &::before {
                        content: "";
                        width: 4px;
                        height: 4px;
                        background-color: #272727;
                        border-radius: 50px;
                        flex-shrink: 0;
                        display: block;
                    }
                }
            }
        }
    }

    .icon::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        font-size: 18px;
        display: block;
        transition: 0.5s ease;
    }

    .accordion-header.active .icon::after {
        transform: rotate(-180deg);
        transition: 0.5s ease;
    }
}