:root {
    --black: #000000;
    --gold: #bf8f00;
}

.display-items {
    cursor: pointer; /* Makes the element clickable */
    z-index: 10; /* Ensures it's on top of other elements if needed */
}

.items {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transition: max-height 1s ease, padding 1s ease, opacity 1s ease;
}

.items.show {
    max-height: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    opacity: 1;
}


/* Rotate the icon when the 'rotate' class is added */
.display-items i {
    transition: transform 1s ease; /* Smooth transition for rotation */
}
.display-items i.rotate {
    transform: rotate(-180deg); /* Rotates the icon 90 degrees */
}

.main-column-left, .main-column-right {
    gap: 30px !important;
}

@media (max-width: 768px) {
    .inner-row {
        display: flex;
    }
}