/* Adding variables */
@import url("../../css/variables.css");

.tabs-selector__main-container {
    width: var(--width);
    padding: var(--padding);
    margin: 0 auto;
}

.tabs-selector__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--l-spacing);
    align-items: center;
    width: var(--full);
    padding: var(--xl-spacing) 0;
    margin: 0 auto;
}

.tabs-selector__inner-container h2 {
    font-size: var(--h2);
    font-weight: var(--extralight);
    line-height: var(--lh-2);
}

.tabs-selector__icon-tabs-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    column-gap: var(--l-spacing);
    padding: var(--s-spacing) var(--xl-spacing) var(--m-spacing);
    background: white;
    box-shadow: 4px 4px 10px 2px rgba(0, 0, 0, 0.1)
}

.tabs-selector__single-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--s-spacing) / 2);
}

.tabs-selector__single-tab img {
    width: auto;
    max-width: 65px;
    height: auto;
    max-height: 65px;
}

.tabs-selector__single-tab h3 {
    font-size: var(--blocknav);
    font-weight: var(--regular);
    text-align: center;
    color: black;
    transition: font-weight 0.4s ease;
}

.tabs-selector__single-tab:hover h3,
.tabs-selector__single-tab.active h3 {
    font-weight: var(--semibold);
}

.tabs-selector__content-container {
    display: flex;
    flex-direction: column;
    width: var(--full);
    padding: 0;
    margin: 0;
}   

.tab-single__inner-container {
    display: flex;
    flex-direction: column;
    gap: var(--xxl-spacing);
}

.tab-inner__content-container {
    display: flex;
    gap: calc(var(--xxl-spacing) * 2);
    justify-content: space-between;
    align-items: center;
}

.single-tab-selector__image-container {
    display: flex;
    width: 51%;
}

.single-tab-selector__image-container img {
    width: auto;
    max-width: 100%;
    height: auto;
}

.single-tab-selector__content-container {
    display: flex;
    flex-direction: column;
    gap: var(--m-spacing);
    align-items: flex-start;
    width: 49%;
}

.single-tab-selector__content-container h3 {
    font-size: var(--h4);
    font-weight: var(--extralight);
    line-height: var(--lh-n);
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {

}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {
    .tabs-selector__icon-tabs-container {
        flex-wrap: wrap;
        row-gap: var(--l-spacing);
        column-gap: var(--m-spacing);
        padding: var(--s-spacing) var(--m-spacing) var(--m-spacing);
    }

    .tabs-selector__single-tab {
        width: calc((100% - var(--xxxl-spacing)) / 3);
    }

    .tab-inner__content-container {
        flex-direction: column-reverse;
        gap: var(--l-spacing);
    }

    .single-tab-selector__image-container,
    .single-tab-selector__content-container {
        width: var(--full);
    }
}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .tabs-selector__single-tab {
        width: calc((100% - var(--xl-spacing)) / 2);
    }
}