/* Vertical tabs styling */
.nav-tabs-vertical {
    gap: 10px;
    flex-direction: column;
}

.nav-tabs-vertical .nav-item {
    border-bottom: 1px solid var(--primary-color);
    border-radius: 8px;       
}

.nav-tabs-vertical .nav-link {
    border-radius: 8px;
    color: var(--gray-700) !important;
    padding: var(--space-3) var(--space-4) !important;
}

.nav-tabs-vertical .nav-link:hover,
.nav-tabs-vertical .nav-link.active {
    background-color: var(--primary-color);
    color: var(--white) !important;   
}

.nav-tabs-vertical .nav-link span {
    display: block;
}


/* Content styling */
.why-choose .tab-content {
    padding-left: var(--space-4);
}

/* Transition styles */
.content-container {
    transition: all 0.3s ease;
}

.why-choose .accordion-item {
    color: var(--gray-900);
    background-color: var(--white);
    border-color: var(--gray-300);
}

.why-choose .accordion-button {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.why-choose .accordion-button:not(.collapsed) {
    color: var(--primary-color);
    background-color: var(--gray-50);
    box-shadow: unset;
}

.why-choose .accordion-button:focus {
    border-color: unset;
    box-shadow: unset;
}

/* Desktop layout adjustments */

@media (max-width: 1199px) {
    .vertical-tabs-content img {
        width: 100%;
        height: auto;
    }
}

@media (min-width: 992px) {
    .desktop-tabs-container {
        display: flex;
        justify-content: space-between;
    }
}

@media (min-width: 1200px) {
    .vertical-tabs-nav {
        width: 100%;
        max-width: 300px;
    }
    
    .vertical-tabs-content {
        width: 100%;
        max-width: 900px;
    }
}