@charset "utf-8";
/*--
	Color styles
--*/

.virtual-offices-list {
    margin-left: 5px; /* ✅ Shifts entire column block to the right */
    display: flex;
    flex-wrap: wrap;
}

/* ✅ Rows (Adds gap while maintaining alignment) */
.virtual-offices-list .row {
    justify-content: flex-start;
    gap: .5px; /* ✅ Ensures uniform gap between columns */
    margin-bottom: 0; /* ❌ Removes row spacing */
}

/* ✅ Individual Office Item (Keeps gaps between columns) */
.virtual-office-item {
    padding: 0;
    box-sizing: border-box;
}

/* ✅ Link Styling */
.virtual-office-link {
    color: #4faefc;
    text-decoration: none;
    display: block;
    text-align: left;
    padding: 5px;
    transition: all 0.3s ease-in-out;
}

.virtual-office-link:hover {
    color: #ffcc00;
    text-decoration: underline;
}

/* 🔹 Set Number of Columns */

/* 🔹 Large Screens (Desktops ≥ 1200px) - 5 Columns */
@media (min-width: 1200px) {
    .virtual-office-item {
        flex: 0 0 calc(100% / 5); /* 5 columns */
        max-width: calc(100% / 5);
    }
}


/* 🔹 Small Tablets (Between 601px and 768px) - 3 Columns */
@media (max-width: 1199px) and (min-width: 841px) {
    .virtual-office-item {
        flex: 0 0 calc(100% / 4); /* 3 columns */
        max-width: calc(100% / 4);
    }
}

/* 🔹 Large Phones (Between 481px and 600px) - 3 Columns */
@media (max-width: 840px) and (min-width: 581px) {
    .virtual-office-item {
        flex: 0 0 calc(100% / 3); /* 3 columns */
        max-width: calc(100% / 3);
    }
}

/* 🔹 Small Phones (Between 321px and 480px) - 2 Column */
@media (max-width: 580px) and (min-width: 400px) {
    .virtual-office-item {
        flex: 0 0 calc(100% / 2); /* 2 columns */
        max-width: calc(100% / 2);
    }
}

/* 🔹 Extra Small Phones (≤320px) - 1 Column */
@media (max-width: 399px) {
    .virtual-office-item {
        flex: 0 0 100%; /* 1 column */
        max-width: 100%;
    }
}