@charset "UTF-8";
/* CSS Document */

/* Navbar Section */
.navbar img,
.navbar .nav-item,
.navbar .btn-outside-popup,
.navbar-toggler {
    opacity: 1;
    animation: none !important;
}

/* Breadcrumb Section */
.breadcrumb {
    margin: 0;
    padding: var(--space-xxs) 0 0 var(--space-xl);
    background-color: var(--color-secondary-bg);
}

.breadcrumb-item a {
    color: var(--color-primary-text);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

.breadcrumb-item.active {
    color: var(--color-primary-text);
    text-decoration: underline;
    font-weight: bold;
}

.breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-primary-text);
}

@media screen and (max-width: 1199.98px) {

    .breadcrumb {
        padding-left: var(--space-l);
    }
}

@media screen and (max-width: 767.98px) {

    .breadcrumb {
        padding-left: var(--space-s);
        padding-right: var(--space-s);
    }
}

/* Company Philosophy Section */
.philosophy-section {
    margin-top: var(--space-s);
    margin-bottom: var(--space-xl);
}

.philosophy-content {
    width: 100%;
    height: 100%;
    border-radius: var(--border-secondary-radius);
    background: var(--color-primary-bg);
    padding: var(--space-s);
}

.philosophy-content .bento {
    width: 100%;
    height: 720px;
}

.philosophy-content .bento .pyramid-cubes {
    flex: 4 4 0;
}

.philosophy-content .bento .pyramid-content {
    flex: 6 6 0;
    gap: var(--space-s);
}

/* Cubes Section */
@keyframes spinCube {
    0% {
        transform: rotateX(-20deg) rotateY(-35deg) translateY(0px);
    }
    25% {
        transform: rotateX(-20deg) rotateY(55deg) translateY(-15px);
    }
    50% {
        transform: rotateX(-20deg) rotateY(145deg) translateY(0px);
    }
    75% {
        transform: rotateX(-20deg) rotateY(235deg) translateY(-15px);
    }
    100% {
        transform: rotateX(-20deg) rotateY(325deg) translateY(0px);
    }
}

@keyframes cubeGround {
    0% {
        transform: rotateX(-90deg) translateZ(40px);
    }
    25% {
        transform: rotateX(-90deg) translateZ(55px);
    }
    50% {
        transform: rotateX(-90deg) translateZ(40px);
    }
    75% {
        transform: rotateX(-90deg) translateZ(55px);
    }
    100% {
        transform: rotateX(-90deg) translateZ(40px);
    }
}

@keyframes cubeGroundSmall {
    0% {
        transform: rotateX(-90deg) translateZ(25px);
    }
    25% {
        transform: rotateX(-90deg) translateZ(40px);
    }
    50% {
        transform: rotateX(-90deg) translateZ(25px);
    }
    75% {
        transform: rotateX(-90deg) translateZ(40px);
    }
    100% {
        transform: rotateX(-90deg) translateZ(25px);
    }
}


@keyframes shadowCube {
    0% {
        box-shadow: 0 0 0 var(--color-shadows);
    }
    25% {
        box-shadow: 0 15px 15px var(--color-shadows);
    }
    50% {
        box-shadow: 0 0 0 var(--color-shadows);
    }
    75% {
        box-shadow: 0 15px 15px var(--color-shadows);
    }
    100% {
        box-shadow: 0 0 0 var(--color-shadows);
    }
}

@keyframes shadowGround {
    0% {
        box-shadow: 0 0 60px #3F3F3F;
    }
    25% {
        box-shadow: 0 0 75px #3F3F3F;
    }
    50% {
        box-shadow: 0 0 60px #3F3F3F;
    }
    75% {
        box-shadow: 0 0 75px #3F3F3F;
    }
    100% {
        box-shadow: 0 0 60px #3F3F3F;
    }
}
  
/* Purpose Block */
.scene-purpose {
    position: relative;
    transform-style: preserve-3d;
}

.scene-purpose .cube-purpose {
    position: relative;
    width: 400px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-35deg);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    animation: spinCube 7s infinite linear;
}

.scene-purpose .cube-purpose .cube-face {
    position: absolute;
    width: 130px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-secondary-text);
    border: 3px solid green;
}
  
.scene-purpose .cube-purpose .cube-side {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 3px solid green;
}
 
.scene-purpose .cube-purpose .front {
    background: linear-gradient(to bottom, #4CA223, #60CC2C);
    transform: translateZ(40px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-purpose .cube-purpose .back {
    background: linear-gradient(to bottom, #4CA223, #60CC2C);
    transform: translateZ(-40px) rotateY(180deg);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-purpose .cube-purpose .left {
    background: linear-gradient(to bottom, #4CA223, #60CC2C);
    transform: rotateY(-90deg) translateZ(65px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-purpose .cube-purpose .right {
    background: linear-gradient(to bottom, #4CA223, #60CC2C);
    transform: rotateY(90deg) translateZ(65px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-purpose .cube-purpose .top {
    background-color: #4CA223;
    transform: rotateX(90deg) translateZ(40px);
    cursor: pointer;
}
 
.scene-purpose .cube-purpose .bottom {
    background: linear-gradient(to bottom, #4CA223, #60CC2C);
    transform: rotateX(-90deg) translateZ(40px);
    cursor: pointer;
}

.scene-purpose .cube-purpose .ground {
    border: none !important;
    background-color: #3F3F3F;
    animation: cubeGround 7s infinite linear, shadowGround 7s infinite linear;
}

/* Vision Block */
.scene-vision {
    position: relative;
    transform-style: preserve-3d;
}

.scene-vision .cube-vision {
    position: relative;
    width: 400px;
    height: 225px;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-35deg);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    animation: spinCube 7s infinite linear;
}
 
.scene-vision .cube-vision .cube-face {
    position: absolute;
    width: 200px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--color-primary);
    color: var(--color-secondary-text);
}
 
.scene-vision .cube-vision .cube-side {
    position: absolute;
    width: 120px;
    height: 80px;
    border: 3px solid var(--color-primary);
}
 
.scene-vision .cube-vision .cube-cover {
    position: absolute;
    width: 200px;
    height: 120px;
    border: 3px solid var(--color-primary);
}
 
.scene-vision .cube-vision .front {
    background: linear-gradient(to bottom, #278CCF, #4CA3DD);
    transform: translateZ(60px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-vision .cube-vision .back {
    background: linear-gradient(to bottom, #278CCF, #4CA3DD);
    transform: translateZ(-60px) rotateY(180deg);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-vision .cube-vision .left {
    background: linear-gradient(to bottom, #278CCF, #4CA3DD);
    transform: rotateY(-90deg) translateZ(100px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-vision .cube-vision .right {
    background: linear-gradient(to bottom, #278CCF, #4CA3DD);
    transform: rotateY(90deg) translateZ(100px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-vision .cube-vision .top {
    background-color: #278CCF;
    transform: rotateX(90deg) translateZ(40px);
    cursor: pointer;
}
 
.scene-vision .cube-vision .bottom {
    background: linear-gradient(to bottom, #278CCF, #4CA3DD);
    transform: rotateX(-90deg) translateZ(40px);
    cursor: pointer;
}

.scene-vision .cube-vision .ground {
    border: none !important;
    background-color: #3F3F3F;
    animation: cubeGround 7s infinite linear, shadowGround 7s infinite linear;
}

/* Values Block */
.scene-values {
    position: relative;
    transform-style: preserve-3d;
}
 
.scene-values .cube-values {
    position: relative;
    width: 400px;
    height: 275px;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-35deg);
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    -webkit-user-select: none;
    animation: spinCube 7s infinite linear;
}
 
.scene-values .cube-values .cube-face {
    position: absolute;
    width: 260px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid blue;
    color: var(--color-secondary-text);
}
 
.scene-values .cube-values .cube-side {
    position: absolute;
    width: 160px;
    height: 80px;
    border: 3px solid blue;
}

.scene-values .cube-values .cube-cover {
    position: absolute;
    width: 260px;
    height: 160px;
    border: 3px solid blue;
}
 
.scene-values .cube-values .front {
    background: linear-gradient(to bottom, #003288, #0045BB);
    transform: translateZ(80px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-values .cube-values .back {
    background: linear-gradient(to bottom, #003288, #0045BB);
    transform: translateZ(-80px) rotateY(180deg);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-values .cube-values .left {
    background: linear-gradient(to bottom, #003288, #0045BB);
    transform: rotateY(-90deg) translateZ(130px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-values .cube-values .right {
    background: linear-gradient(to bottom, #003288, #0045BB);
    transform: rotateY(90deg) translateZ(130px);
    animation: shadowCube 7s infinite linear;
    cursor: pointer;
}
 
.scene-values .cube-values .top {
    background-color: var(--color-secondary);
    transform: rotateX(90deg) translateZ(40px);
    cursor: pointer;
}
 
.scene-values .cube-values .bottom {
    background: linear-gradient(to bottom, #003288, #0045BB);
    transform: rotateX(-90deg) translateZ(40px);
    cursor: pointer;
}

.scene-values .cube-values .ground {
    border: none !important;
    background-color: #3F3F3F;
    animation: cubeGround 7s infinite linear, shadowGround 7s infinite linear;
}

/* Philosophy Content */
.philosophy-content .pyramid-content .inner-row:nth-of-type(1) {
    flex: 6 6 0;
    border-radius: var(--border-secondary-radius);
    background: linear-gradient(to bottom right, #4CA223, #60CC2C);
    box-shadow: var(--shadow-primary) var(--shadow-primary) var(--shadow-secondary) var(--color-shadows);
    color: var(--color-secondary-text);
    transition: 0.3s ease-in-out;
}

.philosophy-content .pyramid-content .inner-row:nth-of-type(1).hovered {
    transform: scale(1.03);
    box-shadow: var(--shadow-secondary) var(--shadow-secondary) var(--shadow-tertiary) var(--color-shadows);
}

.philosophy-content .pyramid-content .inner-row:nth-of-type(2) {
    flex: 1 1 0;
    border-radius: var(--border-secondary-radius);
    background: linear-gradient(to bottom right, #007CCF, #039AFF);
    box-shadow: var(--shadow-primary) var(--shadow-primary) var(--shadow-secondary) var(--color-shadows);
    color: var(--color-secondary-text);
    transition: 0.3s ease-in-out;
}

.philosophy-content .pyramid-content .inner-row:nth-of-type(2).hovered {
    transform: scale(1.03);
    box-shadow: var(--shadow-secondary) var(--shadow-secondary) var(--shadow-tertiary) var(--color-shadows);
}

.philosophy-content .pyramid-content .inner-row:nth-of-type(3) {
    flex: 3 3 0;
    gap: var(--space-s);
}

.philosophy-content .pyramid-content .inner-row:nth-of-type(3) .inner-col {
    flex: 1 1 0;
    border-radius: var(--border-secondary-radius);
    background: linear-gradient(to bottom right, #003288, #0045BB);
    box-shadow: var(--shadow-primary) var(--shadow-primary) var(--shadow-secondary) var(--color-shadows);
    color: var(--color-secondary-text);
    transition: 0.3s ease-in-out;
}

.philosophy-content .pyramid-content .inner-row:nth-of-type(3) .inner-col.hovered {
    transform: scale(1.03);
    box-shadow: var(--shadow-secondary) var(--shadow-secondary) var(--shadow-tertiary) var(--color-shadows);
}

@media screen and (max-width: 1199.98px) {
    
    .philosophy-section {
        padding: 0 var(--space-l);
    }
}

@media screen and (max-width: 991.98px) {
    
    .philosophy-content .bento {
        height: 1200px;
        flex-direction: column;
    }

    .scene-purpose .cube-purpose {
        width: 400px;
        height: 100px;
        margin-top: var(--space-s);
    }

    .scene-values .cube-values {
        height: 150px;
        margin-bottom: var(--space-l);
    }
}

@media screen and (max-width: 767.98px) {
    
    .philosophy-section {
        padding: 0 var(--space-s);
    }

    .philosophy-content .bento {
        height: 1300px;
    }
}

@media screen and (max-width: 575.98px) {
    
    .philosophy-content .bento {
        height: 1600px;
    }

    .philosophy-content .pyramid-content .inner-row:nth-of-type(3) {
        flex-direction: column;
    }

    .philosophy-content .bento .pyramid-cubes {
        flex: 3 3 0;
    }
    
    .philosophy-content .bento .pyramid-content {
        flex: 7 7 0;
        gap: var(--space-s);
    }
    
    /* Purpose Block */
    .scene-purpose .cube-purpose {
        width: 300px;
        height: 150px;
    }

    .scene-purpose .cube-purpose .cube-face {
        width: 100px;
        height: 50px;
    }
      
    .scene-purpose .cube-purpose .cube-side {
        width: 50px;
        height: 50px;
    }
     
    .scene-purpose .cube-purpose .front {
        transform: translateZ(25px);
    }
     
    .scene-purpose .cube-purpose .back {
        transform: translateZ(-25px) rotateY(180deg);
    }
     
    .scene-purpose .cube-purpose .left {
        transform: rotateY(-90deg) translateZ(50px);
    }
     
    .scene-purpose .cube-purpose .right {
        transform: rotateY(90deg) translateZ(50px);
    }
     
    .scene-purpose .cube-purpose .top {
        transform: rotateX(90deg) translateZ(25px);
    }
     
    .scene-purpose .cube-purpose .bottom {
        transform: rotateX(-90deg) translateZ(25px);
    }
    
    .scene-purpose .cube-purpose .ground {
        animation: cubeGroundSmall 7s infinite linear, shadowGround 7s infinite linear;
    }

    /* Vision Block */
    .scene-vision .cube-vision {
        width: 300px;
        height: 125px;
    }
     
    .scene-vision .cube-vision .cube-face {
        width: 170px;
        height: 50px;
    }
     
    .scene-vision .cube-vision .cube-side {
        width: 90px;
        height: 50px;
    }
     
    .scene-vision .cube-vision .cube-cover {
        width: 170px;
        height: 90px;
    }
     
    .scene-vision .cube-vision .front {
        transform: translateZ(45px);
    }
     
    .scene-vision .cube-vision .back {
        transform: translateZ(-45px) rotateY(180deg);
    }
     
    .scene-vision .cube-vision .left {
        transform: rotateY(-90deg) translateZ(85px);
    }
     
    .scene-vision .cube-vision .right {
        transform: rotateY(90deg) translateZ(85px);
    }
     
    .scene-vision .cube-vision .top {
        transform: rotateX(90deg) translateZ(25px);
    }
     
    .scene-vision .cube-vision .bottom {
        transform: rotateX(-90deg) translateZ(25px);
    }
    
    .scene-vision .cube-vision .ground {
        animation: cubeGroundSmall 7s infinite linear, shadowGround 7s infinite linear;
    }

    /* Values Block */
    .scene-values .cube-values {
        width: 300px;
        height: 250px;
    }
    
    .scene-values .cube-values .cube-face {
        width: 230px;
        height: 70px;
    }
    
    .scene-values .cube-values .cube-side {
        width: 130px;
        height: 70px;
    }

    .scene-values .cube-values .cube-cover {
        width: 230px;
        height: 130px;
    }
    
    .scene-values .cube-values .front {
        transform: translateZ(65px);
    }
    
    .scene-values .cube-values .back {
        transform: translateZ(-65px) rotateY(180deg);
    }
    
    .scene-values .cube-values .left {
        transform: rotateY(-90deg) translateZ(115px);
    }
    
    .scene-values .cube-values .right {
        transform: rotateY(90deg) translateZ(115px);
    }
    
    .scene-values .cube-values .top {
        transform: rotateX(90deg) translateZ(35px);
    }
    
    .scene-values .cube-values .bottom {
        transform: rotateX(-90deg) translateZ(35px);
    }

    .scene-values .cube-values .ground {
        animation: cubeGroundSmall 7s infinite linear, shadowGround 7s infinite linear;
    }
}

@media screen and (max-width: 429.98px) {
    
    .philosophy-content .bento {
        height: 1900px;
    }
}