.cube-3d-container {
    text-align: center;
    perspective: 1000px;
    margin: 20px auto;
}

.cube-3d-box {
    --cube-size: 150px; /* Основная переменная размера */
    --cube-half: calc(var(--cube-size) / 2); /* Половина размера для трансформаций */
    
    width: var(--cube-size);
    height: var(--cube-size);
    margin: 0 auto;
    perspective: 1000px;
}
.cube-3d-box:hover{
	cursor: not-allowed;
}
.cube-3d {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1.5s ease-in-out;
	will-change: transform; /* Подсказка для браузера для оптимизации анимации */
}

.cube-3d-side {
    --border-width: calc(var(--cube-size) * 0.01); /* Адаптивная граница */
    --border-radius: calc(var(--cube-size) * 0.04); /* Адаптивный радиус */
    
    position: absolute;
    width: var(--cube-size);
    height: var(--cube-size);
    /*background: rgba(255, 255, 255, 0.95);*/
	background-color: white;
    border: var(--border-width) solid #333;
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    backface-visibility: visible;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cube-3d-front {
    transform: translateZ(var(--cube-half));
}

.cube-3d-back {
    transform: rotateY(180deg) translateZ(var(--cube-half));
}

.cube-3d-right {
    transform: rotateY(90deg) translateZ(var(--cube-half));
}

.cube-3d-left {
    transform: rotateY(-90deg) translateZ(var(--cube-half));
}

.cube-3d-top {
    transform: rotateX(90deg) translateZ(var(--cube-half));
}

.cube-3d-bottom {
    transform: rotateX(-90deg) translateZ(var(--cube-half));
}

/* Примеры разных размеров кубиков */
.cube-3d-box.small {
    --cube-size: 150px;
}

.cube-3d-box.medium {
    --cube-size: 250px;
}

.cube-3d-box.large {
    --cube-size: 300px;
}

.cube-3d-box.xlarge {
    --cube-size: 400px;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .cube-3d-box {
        --cube-size: 150px;
    }
}

@media (max-width: 480px) {
    .cube-3d-box {
        --cube-size: 120px;
    }
}

.services-grid .row:not(:last-child) {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px solid #e9ecef; /* Светло-серая линия */
}
.cube-text{
	color: white;
	--font-size: calc(var(--cube-size) * 0.11); /* Адаптивный размер шрифта */
	opacity: 0.85;
	font-size: var(--font-size);
    font-weight: bold;
    /*color: #333;*/
	/*
	text-shadow: 
        2px 2px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000;
	*/
}