.tab-buttons ul{
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
list-style: none;
padding: 0px;
margin:0px;
justify-content: space-between;
}
.tab-buttons li a{
font-size: 1rem;
font-weight: 300;
text-align: left;
color: #A6A6A6;
text-wrap: nowrap;
display: flex;
position: relative;
align-items: center;
cursor: pointer;
transition: color .5s ease-in-out;
}
.tab-content.active{
order:1;
opacity: 1;
}
.tab-buttons li a.active{
color:#3D3D3D;
font-weight: 600;
}
.tab-buttons li a::after{
content: "";
background-color: var(--blue);
max-width: 0px;
height: 1px;
display: inline-block;
text-wrap: nowrap;
width: 100%;
transition: opacity .5s ease;
position: absolute;
left: calc(100% + 1rem );
transition: all .5s ease-in-out;
}
.tab-buttons li a.active::after{
max-width: 75px;
}
.tab-contents{
position: relative;
display: flex;
overflow: hidden;
flex-direction: row;
flex-wrap: nowrap;
}
.tab-content{
order:2;
opacity: 0;
transition: .4s opacity .4s ease;
flex: 0 0 100%;
padding: 4rem 0px;
}
.tab-content .tab-image-list{
display: grid;
grid-template-columns: repeat(6, minmax(0,1fr));
gap: 4rem;
}
.tab-content .tab-image-list .img-item {
text-align: center;
}
.tab-content .tab-image-list .img-item img{
margin:auto;
width: 100%;
height: auto;
}
.tab-contents a.tab-button{
display: none;
}
.nv-btn{    background: 0 0;
color: inherit;
border: none;
padding: 0 !important;
font: inherit;}
.nv-btn .explore-group {
justify-content: center;
}
.controls{    text-align: center;}
.nv-btn .explore-group #arrow-left{   width: 42px;
height: 20px;
position: absolute;
left: -21px;}
@media only screen and (max-width:1200px){
.tab-buttons li a{
font-size: 1.25rem
}
.tab-buttons li a.active::after{
max-width: 50px;
}
}
@media only screen and (max-width:1100px){
.tab-buttons li a{
font-size: 1rem
}
.tab-buttons li a.active::after{
max-width: 50px;
}
}
@media only screen and (max-width:781px){
.tab-buttons,.controls{
display: none !important;
}
.tab-contents{
flex-direction: column;
}
.tab-contents a.tab-button{
display: flex;
justify-content: space-between;
align-items: center;
background: var(--white) ;
color: var(--black) ;
transition: all .5s ease-in-out;
padding: 1rem;
}
.tab-contents a.tab-button.active{
background: var(--blue) !important;
color: var(--white) !important;
}
.tab-content .tab-image-list{
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap:1rem;
}
.tab-contents a.tab-button.active::after, .tab-contents a.tab-button::after {
content: url(https://www.surinauto.com/wp-content/uploads/2023/09/arrow-white.webp);
}
.tab-content{
order: unset;
opacity: 0;
max-height: 0;
overflow: visible;
padding: 0px;
transition: all .5s ease-in-out;
background: var(--bggrey);
margin-bottom: 5px;
z-index: -1;
}
.tab-content.active{
order: unset;
opacity: 1;
padding: 1rem 0px;
max-height: 500px;
z-index: 1;
}
.tab-content .tab-image-list img{
max-width: 100%;
height: auto;
}
}