.wheel {
width: 830px;
height: 838px;
position: relative;
}
.slice {
transform: scale(0.9);
transform-origin: center;
transition: all 300ms ease;
}
.slice:hover {
transform: scale(1);
z-index: 1;
}
.slice-1 {
position: absolute;
width: 243px;
height: 277px;
background: url(https://tomorrowsoffice.com/wp-content/uploads/2025/10/slice-unified-communications-ucaas.png);
background-size: cover;
top: 110px;
left: 161px;
}
.slice-2 {
position: absolute;
width: 242px;
height: 276px;
background: url(https://tomorrowsoffice.com/wp-content/uploads/2025/10/slice-managed-it-and-cybersecurity-services.png);
background-size: cover;
left: 406px;
top: 111px;
}
.slice-3 {
position: absolute;
width: 263px;
height: 260px;
background: url(https://tomorrowsoffice.com/wp-content/uploads/2025/10/slice-ai-and-data-modernization.png);
background-size: cover;
right: 118px;
top: 232px;
}
.slice-4 {
position: absolute;
width: 278px;
height: 267px;
background: url(https://tomorrowsoffice.com/wp-content/uploads/2025/10/slice-business-applications.png);
background-size: cover;
right: 123px;
bottom: 132px;
}
.slice-5 {
position: absolute;
width: 266px;
height: 257px;
background: url(https://tomorrowsoffice.com/wp-content/uploads/2025/10/slice-workflow-automation.png);
background-size: cover;
left: 269px;
bottom: 106px;
}
.slice-6 {
position: absolute;
width: 279px;
height: 267px;
background: url(https://tomorrowsoffice.com/wp-content/uploads/2025/10/slice-managed-print.png);
background-size: cover;
left: 100px;
bottom: 133px;
}
.slice-7 {
position: absolute;
width: 269px;
height: 264px;
background: url(https://tomorrowsoffice.com/wp-content/uploads/2025/10/slice-document-management.png);
background-size: cover;
left: 94px;
top: 228px;
}
.wheel-bg {
position: absolute;
width: 830px;
height: 838px;
background: url(https://tomorrowsoffice.com/wp-content/uploads/2025/10/wheel-bg.png);
background-size: cover;
}
.slices {
position: absolute;
top: 6px;
left: 10px;
height: 100%;
width: 100%;
transform: scale(1.2);
}
#solution_wheel {
display: none !important;
}
@media (max-width: 1024px) {
.wheel {
transform: scale(0.6);
transform-origin: left;
}
}
@media (max-width: 728px) {
.wheel {
transform: scale(0.8);
}
}
@media (max-width: 425px) {
.wheel {
transform: scale(0.45);
margin-bottom: -220px !important;
margin-top: -260px;
}
}
@media (max-width: 425px) {
.wheel {
transform: scale(0.4);
}
}
@media (max-width: 320px) {
.wheel {
transform: scale(0.34);
margin-bottom: -260px !important;
}
}