.tabs-wrapper{
    width:100%;
    margin:auto;
    background:var(--grey-light);
    /*border:1px solid var(--grey);*/
}

/* Tabs Nav */

.tabs-nav{
    display:flex;
    overflow-x:auto;
    white-space:nowrap;
    border-bottom:1px solid var(--grey);
    background:var(--white);
    scrollbar-width:none;
}

.tabs-nav::-webkit-scrollbar{
    display:none;
}

.tabs-nav button{
    border:none;
    background:none;
    padding:18px 24px;
    cursor:pointer;
    font-size:15px;
    color:var(--primary-color);
    transition:.3s;
    position:relative;
    flex-shrink:0;
}

.tabs-nav button:hover{
    color:var(--secondary-color);
}

.tabs-nav button.active{
    color:var(--primary-color);
    background:var(--grey-light);
   
}
.tabs-nav button.active:hover{
    color:var(--secondary-color);
}
.tabs-nav button.active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    height:2px;
    background:var(--primary-color);
}

/* Tab Content */

.tab-content{
    display:none;
    padding:35px 30px;
    animation:fadeIn .4s ease;
}

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

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Typography */

.tab-content h2{
   	font-size:24px;
	line-height:24px;
 
    margin-bottom:15px;
    
}
.description-text{
}
.description-tex h3{
   	font-size:18px;
	line-height:20px;
 
    margin-bottom:15px;
    
}


.description-text strong{
    color:var(--secondary-color);
}
.description-text p{
	margin:5px 0;
	line-height:normal;
	padding:10px;
	background-color:var(--white);
}
.colors{
    margin-top:20px;
}

/* Tablet */

@media(max-width:768px){

    body{
        padding:15px;
    }

    .tab-content{
        padding:25px 20px;
    }

    .tab-content h2{
        font-size:26px;
        margin-bottom:20px;
    }

    .description-text{
        font-size:15px;
        line-height:1.8;
    }

    .tabs-nav button{
        padding:16px 18px;
        font-size:14px;
    }

}

/* Mobile */

@media(max-width:480px){

    .tab-content{
        padding:15px 10px;
    }

    .tab-content h2{
        font-size:20px;
    }

    .description-text{
        font-size:14px;
    }

    .tabs-nav button{
        padding:10px 10px;
        font-size:11px;
    }

}