.cube-container{
    width:100%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8em;
    padding-bottom: 8em;
}

@media (max-width: 992px) {
    .cube-container{
        
        padding-top: 5em;
    padding-bottom: 5em;
    }
}

.cube{
    width:26vh;
    height: 26vh;
    position: relative;
    transform-style: preserve-3d;
    animation: cube-rotate infinite 50s linear; 
    animation-play-state: paused;
    transform: rotateZ(-30deg) rotateY(30deg) rotateX(45deg); 
    /* Isometric view */
}

.cube:not(:hover){
    animation-play-state: running;
}

 
  .side {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      transition: transform 1.2s;
  }
  
  .cube:hover .side {
      animation: none; /* Oprim animația la hover */
  }
  
  /* .cube .side{
    transition: drop-shadow 1.2s;
  } */
/* .side:hover{
    background-color: rgba(0,255,0,0.05);
} */


.front{
    background-size: contain;
    transform:translateZ(13vh);
    background-image: url("../images/logos/logo-parts/SVG/EN.svg");
}

.left{
    transform:rotateY(-90deg) translateZ(13vh);
    background-image: url("../images/logos/logo-parts/SVG/ID.svg");
    /* background-image: url("logo-parts/ID.svg"); */
}

.back{
    
    /* background-image: url("logo-parts/EN.svg"); */
    transform:rotateY(180deg) translateZ(13vh);
}

.right{
    
    transform:rotateY(90deg) translateZ(13vh);
}

.top{
    
    transform:rotateX(90deg) translateZ(13vh);
    /* background-image: url("logo-parts/3D.svg"); */
}

/*.back, .right, .top{
   
backdrop-filter: blur( 4.5px );
-webkit-backdrop-filter: blur( 4.5px );
 border: 1px inset white;
 background: rgba( 31, 42, 106, 0.15 );

}*/

.bottom{
    background-image: url("../images/logos/logo-parts/SVG/3D.svg");
    transform:rotateX(-90deg) translateZ(13vh);
}

.cube:hover .front{
    transform:translateZ(14vh);
}
.cube:hover .left{
    transform:rotateY(-90deg) translateZ(14vh);
}

.cube:hover .back{
    transform:rotateY(180deg) translateZ(14vh);
}

.cube:hover .right{
    transform:rotateY(90deg) translateZ(14vh);
}

.cube:hover .top{
    transform:rotateX(90deg) translateZ(14vh);
}

.cube:hover .bottom{
    transform:rotateX(-90deg) translateZ(14vh);
}


/* @keyframes cube-rotate{
    from{
        transform: rotate3d(1,1,1,0deg);
    }

    to{
        transform: rotate3d(1,-1,1,360deg);
    }
} */

 @keyframes cube-rotate {
    0% {
        transform: rotateZ(-30deg) rotateY(30deg) rotateX(45deg); 
    }
    14% {
        transform: rotateZ(-15deg) rotateY(15deg) rotateX(60deg); 
    }
    28% {
        transform: rotateZ(-30deg) rotateY(30deg) rotateX(45deg); 
    }
    42% {
        transform: rotateZ(-45deg) rotateY(45deg) rotateX(30deg); 
    }
    56% {
        transform: rotateZ(-30deg) rotateY(30deg) rotateX(45deg); 
    }
    70% {
        transform: rotateZ(-45deg) rotateY(45deg) rotateX(30deg); 
    }
    100% {
        transform: rotateZ(-30deg) rotateY(30deg) rotateX(45deg); 
    }
} 




/* HOME CUBE */
@keyframes idleDropShadow {
    0% {
      filter: drop-shadow(16px 16px 20px rgba(0, 11, 76, 0.01));
    }
    50% {
      filter: drop-shadow(35px  35px  35px rgba(0, 11, 76, 1));
    }
    100% {
      filter: drop-shadow(16px 16px 20px rgba(0, 11, 76, 0.01));
    }
  }

#home-cube .side{
    animation: idleDropShadow  infinite 4s linear; 
}


#home-cube>.side {
    filter: drop-shadow(25px  5px  25px rgba(0, 11, 76, 0.5));
}



a#doc-link.hovered h2, a#doc-link:hover h2 {
    filter: drop-shadow(25px  5px  25px rgb(0, 11, 76)); 
    font-size: 3em;
    transition: drop-shadow 0.7s ease-in-out, font-size 0.7s ease-in-out;
}
#doc-link:hover .side, #doc-link:hover .left, #doc-link:hover .front,  #doc-link:hover .left {
    filter: drop-shadow(25px  5px  25px rgb(0, 11, 76)); 
    transition: transform 0.7s ease-in-out, drop-shadow 0.7s ease-in-out;
}
/* 
#doc-link h2 {
    position: absolute;

} */


@media (min-width: 576px) {

    #click-me{
        min-height:80vh;
    }

    #home-cube.cube{
        width:50vw;
        height: 50vw;
    }

    
    #home-cube>.front{
        background-size: contain;
        transform:translateZ(25vw);
        background-image: url("../images/logos/logo-parts/SVG/EN.svg");
    }
    
    #home-cube>.left{
        transform:rotateY(-90deg) translateZ(25vw);
        background-image: url("../images/logos/logo-parts/SVG/ID.svg");
        /* background-image: url("logo-parts/ID.svg"); */
    }
    
    #home-cube>.bottom{
        background-image: url("../images/logos/logo-parts/SVG/3D.svg");
        transform:rotateX(-90deg) translateZ(25vw);
    }

    #doc-link.hovered .front, #doc-link:hover .front {
        transform: translateZ(27vw);
    }
    
    #doc-link.hovered .left, #doc-link:hover .left {
        transform: rotateY(-90deg) translateZ(27vw);
    }
    
    #doc-link.hovered .bottom, #doc-link:hover .bottom {
        transform: rotateX(-90deg) translateZ(27vw);
    }

    #doc-link h2{
        padding-top: 2em;
    }
  }

  #click-me{
    padding-top: 8em;
  }
  
  @media (min-width: 768px) {
    #click-me{
        min-height:80vh;
    }
    #home-cube.cube{
        width:50vw;
        height: 50vw;
    }

    #doc-link h2{
        padding-top: 2em;
    }
    
    #home-cube>.front{
        background-size: contain;
        transform:translateZ(25vw);
        background-image: url("../images/logos/logo-parts/SVG/EN.svg");
    }
    
    #home-cube>.left{
        transform:rotateY(-90deg) translateZ(25vw);
        background-image: url("../images/logos/logo-parts/SVG/ID.svg");
        /* background-image: url("logo-parts/ID.svg"); */
    }
    
    #home-cube>.bottom{
        background-image: url("../images/logos/logo-parts/SVG/3D.svg");
        transform:rotateX(-90deg) translateZ(25vw);
    }

    #doc-link.hovered .front, #doc-link:hover .front {
        transform: translateZ(27vw);
    }
    
    #doc-link.hovered .left, #doc-link:hover .left {
        transform: rotateY(-90deg) translateZ(27vw);
    }
    
    #doc-link.hovered .bottom, #doc-link:hover .bottom {
        transform: rotateX(-90deg) translateZ(27vw);
    }
  }

  .modal-1-buttons {
    background-color: black;
  }

  @media (max-width: 992px) {

    .modal-1-buttons {
        background-color: transparent;
      }

    }
  
  @media (min-width: 992px) {
    #click-me{
        min-height:90vh;
    }

    #doc-link h2{
        padding-top: 0;
    }
    
#home-cube.cube{
    width:32vh;
    height: 32vh;
}

    #home-cube>.front{
        background-size: contain;
        transform:translateZ(16vh);
        background-image: url("../images/logos/logo-parts/SVG/EN.svg");
    }
    
    #home-cube>.left{
        transform:rotateY(-90deg) translateZ(16vh);
        background-image: url("../images/logos/logo-parts/SVG/ID.svg");
        /* background-image: url("logo-parts/ID.svg"); */
    }
    
    #home-cube>.bottom{
        background-image: url("../images/logos/logo-parts/SVG/3D.svg");
        transform:rotateX(-90deg) translateZ(16vh);
    }
    

    #doc-link.hovered .front, #doc-link:hover .front {
        transform: translateZ(18vh);
    }
    
    #doc-link.hovered .left, #doc-link:hover .left {
        transform: rotateY(-90deg) translateZ(18vh);
    }
    
    #doc-link.hovered .bottom, #doc-link:hover .bottom {
        transform: rotateX(-90deg) translateZ(18vh);
    }
    
    
  }
  
  @media (min-width: 1200px) {
    #click-me{
        min-height:90vh;
    }
    
#home-cube.cube{
    width:32vh;
    height: 32vh;
}

#doc-link h2{
    padding-top: 0;
}

    #home-cube>.front{
        background-size: contain;
        transform:translateZ(16vh);
        background-image: url("../images/logos/logo-parts/SVG/EN.svg");
    }
    
    #home-cube>.left{
        transform:rotateY(-90deg) translateZ(16vh);
        background-image: url("../images/logos/logo-parts/SVG/ID.svg");
        /* background-image: url("logo-parts/ID.svg"); */
    }
    
    #home-cube>.bottom{
        background-image: url("../images/logos/logo-parts/SVG/3D.svg");
        transform:rotateX(-90deg) translateZ(16vh);
    }
    

    #doc-link.hovered .front, #doc-link:hover .front {
        transform: translateZ(18vh);
    }
    
    #doc-link.hovered .left, #doc-link:hover .left {
        transform: rotateY(-90deg) translateZ(18vh);
    }
    
    #doc-link.hovered .bottom, #doc-link:hover .bottom {
        transform: rotateX(-90deg) translateZ(18vh);
    }
    
    
}