.elementor-kit-7{--e-global-color-primary:#00226A;--e-global-color-secondary:#0D9B77;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-8a40778:#0D9B77;--e-global-color-fba342d:#00226A;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a:hover{color:#0D9B77;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!-- 3D Rotating Cuboid - WordPress Ready -->
<style>
/* Cuboid container fixed top-right */
.cuboid-container {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 150px;
  height: 150px;
  perspective: 800px;
  z-index: 9999;
}

/* Cuboid rotation */
.cuboid {
  width: 150px;
  height: 150px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateXY 6s infinite linear;
}

/* Cuboid faces */
.face {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #fff;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.face:hover img {
  transform: scale(1.05);
}

/* Positions of faces */
.front  { transform: rotateY(0deg) translateZ(75px); }
.back   { transform: rotateY(180deg) translateZ(75px); }
.right  { transform: rotateY(90deg) translateZ(75px); }
.left   { transform: rotateY(-90deg) translateZ(75px); }
.top    { transform: rotateX(90deg) translateZ(75px); }
.bottom { transform: rotateX(-90deg) translateZ(75px); }

/* Rotation animation */
@keyframes rotateXY {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  25%  { transform: rotateX(20deg) rotateY(90deg); }
  50%  { transform: rotateX(40deg) rotateY(180deg); }
  75%  { transform: rotateX(20deg) rotateY(270deg); }
  100% { transform: rotateX(0deg) rotateY(360deg); }
}

/* Close button above cuboid */
.close-btn {
  position: absolute;
  top: -30px;
  right: 0px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  font-weight: bold;
  z-index: 10000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
</style>

<div class="cuboid-container" id="cuboidBox">
  <button class="close-btn" onclick="closeCuboid()">×</button>
  <div class="cuboid">
    <a href="https://example.com/front" target="_blank" class="face front">
      <img src="https://via.placeholder.com/150?text=Front" alt="Front Face">
    </a>
    <a href="https://example.com/back" target="_blank" class="face back">
      <img src="https://via.placeholder.com/150?text=Back" alt="Back Face">
    </a>
    <a href="https://example.com/right" target="_blank" class="face right">
      <img src="https://via.placeholder.com/150?text=Right" alt="Right Face">
    </a>
    <a href="https://example.com/left" target="_blank" class="face left">
      <img src="https://via.placeholder.com/150?text=Left" alt="Left Face">
    </a>
    <a href="https://example.com/top" target="_blank" class="face top">
      <img src="https://via.placeholder.com/150?text=Top" alt="Top Face">
    </a>
    <a href="https://example.com/bottom" target="_blank" class="face bottom">
      <img src="https://via.placeholder.com/150?text=Bottom" alt="Bottom Face">
    </a>
  </div>
</div>

<script>
function closeCuboid() {
  document.getElementById("cuboidBox").style.display = "none";
}
</script>/* End custom CSS */