:root {
    /**
    @font family declaration
    */
    --tp-ff-body: 'Syne', sans-serif;
    --tp-ff-heading: 'Syne', sans-serif;
    --tp-ff-p: 'Syne', sans-serif;
    --tp-ff-syne: 'Syne', sans-serif;
    --tp-ff-gallery: 'gallery_modernregular', sans-serif;
    --tp-ff-shoulders: 'Big Shoulders Display', cursive;
    --tp-ff-marcellus: 'Marcellus', sans-serif;
    --tp-ff-aladin: 'Aladin', system-ui;
    --tp-ff-fontawesome: "Font Awesome 6 Pro";
    /**
    @color declaration
    */
    --tp-common-white: #F5F7F5;
    --tp-common-white-solid: #fff;
    --tp-common-black: #1E1E1E;
    --tp-common-black-2: #1E1E1E;
    --tp-common-black-3: #141414;
    --tp-common-dark: #121212;
    --tp-common-orange: #EB5939;
    --tp-common-red: #ff0203;
    --tp-grey-1: #080606;
    --tp-grey-2: #F4F4F4;
    --tp-grey-3: #5D5D63;
    --tp-grey-4: #F7F7F7;
    --tp-text-body: #5D5D63;
    --tp-theme-1: #336EF9;
    --tp-border-1: #EAEAEB;
  }

.j-text-main{
    color: var(--tp-common-red);
}

/* From Uiverse.io by Mike11jr */ 
.spinner {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 
 .dot1, .dot2, .dot3 {
  width: 15px;
  height: 15px;
  border: double;
  border-color: white;
  border-radius: 50%;
  margin: 10px;
 }
 
 .dot1 {
  animation: jump765 1.6s -0.32s linear infinite;
  background: var(--tp-common-red);
 }
 
 .dot2 {
  animation: jump765 1.6s -0.16s linear infinite;
  background: var(--tp-common-red);
 }
 
 .dot3 {
  animation: jump765 1.6s linear infinite;
  background: var(--tp-common-red);
 }
 
 @keyframes jump765 {
  0%, 80%, 100% {
   -webkit-transform: scale(0);
   transform: scale(0);
  }
 
  40% {
   -webkit-transform: scale(2.0);
   transform: scale(2.0);
  }
 }
 

 .grid {
  min-height: 500px;
  transition: min-height 0.4s ease-in-out;
}

.tp-pagination-wrapper {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tp-page-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #ddd;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
}

.tp-page-btn.active,
.tp-page-btn:hover {
  background-color: #000;
  color: #fff;
  border-color: #000;
}

.tp-project-5-2-area {
  /* Add styles for the filter buttons */
  .portfolio-filter.masonary-menu {
    background-color: var(--tp-common-red); /* Set your desired background color */

    border: 1px solid var(--tp-common-red);
    border-radius: 50px;

  }
  .portfolio-filter.masonary-menu button {
    width: 180px; /* Adjust this value as needed */
    text-align: center;
    /* Add other styling like padding, margin, border if needed */
    padding: 10px 20px;
    margin: 5px;
    color: var(--tp-common-white);

    display: inline-block; /* Ensure buttons behave like blocks for width */
  }

  .portfolio-filter.masonary-menu button.active {
    background-color: var(--tp-common-white); /* Example active state background */
    color: var(--tp-common-red);
    border-color: var(--tp-common-red);
    border-radius: 50px;
  }
}

.tp-text{
  color: var(--tp-common-white);
  text-decoration: underline;
  font-weight: 700;
}

.tp-title{
  color: var(--tp-common-white);
  font-weight: 700;
}


.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin: 0 -80px 0 0;
}

/* cube */
.cube {
  position: relative;
  width: 1px;
  height: 1px;
  margin: 0 80px 0 0;
  transform-style: preserve-3d;
}
.wall {
  width: 80px;
  height: 80px;
  position: absolute;
  left: calc(-80px / 2);
  top: calc(-80px / 2);
  text-align: center;
  line-height: 100px;
  border: solid 1px #ff0203;
}
.front {
  transform: translateZ(calc(80px / 2));
}
.back {
  transform: translateZ(calc(-80px / 2)) rotateY(180deg);
}
.right {
  transform: translateX(calc(80px / 2)) rotateY(90deg);
}
.left {
  transform: translateX(calc(-80px / 2)) rotateY(-90deg);
}
.top {
  transform: translateY(calc(-80px / 2)) rotateX(90deg);
}
.bottom {
  transform: translateY(calc(80px / 2)) rotateX(-90deg);
}

/* animation */

/*first*/
.flex:nth-of-type(4) .cube:nth-of-type(1) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s forwards infinite; /* Added infinite */
}

/*sec*/
.flex:nth-of-type(3) .cube:nth-of-type(1) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(4) .cube:nth-of-type(2) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s forwards infinite; /* Added infinite */
}

/*third*/
.flex:nth-of-type(2) .cube:nth-of-type(1) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(3) .cube:nth-of-type(2) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(4) .cube:nth-of-type(3) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards infinite; /* Added infinite */
}

/*forth*/
.flex:nth-of-type(1) .cube:nth-of-type(1) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(2) .cube:nth-of-type(2) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(3) .cube:nth-of-type(3) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(4) .cube:nth-of-type(4) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.8s forwards infinite; /* Added infinite */
}

/*five*/
.flex:nth-of-type(1) .cube:nth-of-type(2) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(2) .cube:nth-of-type(3) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(3) .cube:nth-of-type(4) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.9s forwards infinite; /* Added infinite */
}

/*six*/
.flex:nth-of-type(1) .cube:nth-of-type(3) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards infinite; /* Added infinite */
}
.flex:nth-of-type(2) .cube:nth-of-type(4) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1s forwards infinite; /* Added infinite */
}

/*seven*/
.flex:nth-of-type(1) .cube:nth-of-type(4) {
  animation: rotation 3s cubic-bezier(0.215, 0.61, 0.355, 1) 1.1s forwards infinite; /* Added infinite */
}

@keyframes rotation {
  100% {
    transform: rotateX(270deg) rotateY(270deg);
  }
}

.wall {
  animation: color 2s linear 1.5s forwards infinite; /* Added infinite */
}

@keyframes color {
  100% {
    background-color: #ff0203;
  }
}


.polyhedron,
.polyhedron *,
.polyhedron *:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
}

.polyhedron--rhombic-dodecahedron {
    transform: rotateY(-45deg) rotateX(15deg);
    animation: rot 5s linear infinite;
}

@keyframes rot {
    to {
        transform: rotateY(315deg) rotateX(15deg);
    }
}
.piece:nth-child(1) {
    transform: rotate(0rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(5.65685em);
    animation: ani1 5s linear infinite alternate;
}

.piece:nth-child(1) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(1) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(183deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(1) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(144deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(1) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(299deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(1) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(124deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani1 {

    0%,
    20% {
        transform: rotate(0rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(0rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(0rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(0rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

 .piece:nth-child(2) {
    transform: rotate(0rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(5.65685em);
    animation: ani2 5s linear infinite alternate;
}

.piece:nth-child(2) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(2) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(206deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(2) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(61deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(2) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(314deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(2) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(306deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani2 {

    0%,
    20% {
        transform: rotate(0rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(0rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(0rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(0rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(3) {
    transform: rotate(0rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(5.65685em);
    animation: ani3 5s linear infinite alternate;
}

.piece:nth-child(3) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(3) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(308deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(3) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(161deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(3) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(165deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(3) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(285deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani3 {

    0%,
    20% {
        transform: rotate(0rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(0rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(0rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(0rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(4) {
    transform: rotate(0rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(5.65685em);
    animation: ani4 5s linear infinite alternate;
}

.piece:nth-child(4) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(4) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(24deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(4) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(5deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(4) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(256deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(4) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(31deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani4 {

    0%,
    20% {
        transform: rotate(0rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(0rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(0rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(0rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(5) {
    transform: rotate(0rad) rotate(0rad) translateY(5.65685em);
    animation: ani5 5s linear infinite alternate;
}

.piece:nth-child(5) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(5) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(190deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(5) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(190deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(5) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(169deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(5) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(213deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani5 {

    0%,
    20% {
        transform: rotate(0rad) rotate(0rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(0rad) rotate(0rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(0rad) rotate(0rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(0rad) rotate(0rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(6) {
    transform: rotate(0rad) rotate(1.5708rad) translateY(5.65685em);
    animation: ani6 5s linear infinite alternate;
}

.piece:nth-child(6) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(6) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(215deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(6) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(41deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(6) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(11deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(6) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(84deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani6 {

    0%,
    20% {
        transform: rotate(0rad) rotate(1.5708rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(0rad) rotate(1.5708rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(0rad) rotate(1.5708rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(0rad) rotate(1.5708rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(7) {
    transform: rotate(3.14159rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(5.65685em);
    animation: ani7 5s linear infinite alternate;
}

.piece:nth-child(7) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(7) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(54deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(7) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(144deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(7) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(161deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(7) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(237deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani7 {

    0%,
    20% {
        transform: rotate(3.14159rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(3.14159rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(3.14159rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(3.14159rad) rotateY(3.75707rad) rotateX(1.0472rad) rotateY(3.75707rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(8) {
    transform: rotate(3.14159rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(5.65685em);
    animation: ani8 5s linear infinite alternate;
}

.piece:nth-child(8) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(8) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(303deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(8) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(326deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(8) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(108deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(8) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(353deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani8 {

    0%,
    20% {
        transform: rotate(3.14159rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(3.14159rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(3.14159rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(3.14159rad) rotateY(2.52611rad) rotateX(1.0472rad) rotateY(2.52611rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(9) {
    transform: rotate(3.14159rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(5.65685em);
    animation: ani9 5s linear infinite alternate;
}

.piece:nth-child(9) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(9) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(192deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(9) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(116deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(9) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(221deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(9) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(308deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani9 {

    0%,
    20% {
        transform: rotate(3.14159rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(3.14159rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(3.14159rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(3.14159rad) rotateY(0.61548rad) rotateX(1.0472rad) rotateY(0.61548rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(10) {
    transform: rotate(3.14159rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(5.65685em);
    animation: ani10 5s linear infinite alternate;
}

.piece:nth-child(10) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(10) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(187deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(10) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(347deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(10) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(49deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(10) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(270deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani10 {

    0%,
    20% {
        transform: rotate(3.14159rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(3.14159rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(3.14159rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(3.14159rad) rotateY(-0.61548rad) rotateX(1.0472rad) rotateY(-0.61548rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(11) {
    transform: rotate(3.14159rad) rotate(0rad) translateY(5.65685em);
    animation: ani11 5s linear infinite alternate;
}

.piece:nth-child(11) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(11) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(148deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(11) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(317deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(11) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(160deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(11) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(12deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani11 {

    0%,
    20% {
        transform: rotate(3.14159rad) rotate(0rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(3.14159rad) rotate(0rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(3.14159rad) rotate(0rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(3.14159rad) rotate(0rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.piece:nth-child(12) {
    transform: rotate(3.14159rad) rotate(1.5708rad) translateY(5.65685em);
    animation: ani12 5s linear infinite alternate;
}

.piece:nth-child(12) .face--base-rhombus {
    background: linear-gradient(-45deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.8), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(12) .face--lateral-triangle:nth-child(1):before {
    background: linear-gradient(106deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(12) .face--lateral-triangle:nth-child(2):before {
    background: linear-gradient(93deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(12) .face--lateral-triangle:nth-child(3):before {
    background: linear-gradient(148deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

.piece:nth-child(12) .face--lateral-triangle:nth-child(4):before {
    background: linear-gradient(142deg, rgba(255, 2, 3, 0.3), rgba(255, 2, 3, 0.3));
}

@keyframes ani12 {

    0%,
    20% {
        transform: rotate(3.14159rad) rotate(1.5708rad) translateY(5.65685em);
    }

    40% {
        transform: rotate(3.14159rad) rotate(1.5708rad) translateY(11.31371em);
    }

    60% {
        transform: rotate(3.14159rad) rotate(1.5708rad) translateY(11.31371em) rotateX(3.14159rad);
    }

    80%,
    100% {
        transform: rotate(3.14159rad) rotate(1.5708rad) translateY(11.31371em) rotateX(3.14159rad) translateY(5.65685em);
    }
}

.face {
    margin: -3.4641em;
    width: 6.9282em;
    height: 6.9282em;
}

.face--lateral-triangle {
    overflow: hidden;
    transform-origin: 50% 100%;
}

.face--lateral-triangle:nth-child(1) {
    box-shadow: inset 0.0625em -0.125em rgba(245, 242, 234, 0.7);
    transform: translateY(-3.4641em) rotateY(0.61548rad) translateZ(3.26599em) translateX(1.1547em) rotateX(0.5236rad) skewX(-0.33984rad) scaleY(0.94281);
}

.face--lateral-triangle:nth-child(1):before {
    margin: -4em;
    width: 8em;
    height: 8em;
    transform: scaleY(1.06066) skewX(0.33984rad) rotate(-0.61548rad) translateX(-50%);
    box-shadow: inset -0.0625em 0 rgba(245, 242, 234, 0.7);
    background: rgba(255, 2, 3, 0.2);
    content: '';
}

.face--lateral-triangle:nth-child(2) {
    box-shadow: inset -0.0625em -0.125em rgba(245, 242, 234, 0.7);
    transform: translateY(-3.4641em) rotateY(-0.61548rad) translateZ(3.26599em) translateX(-1.1547em) rotateX(0.5236rad) skewX(0.33984rad) scaleY(0.94281);
}

.face--lateral-triangle:nth-child(2):before {
    margin: -4em;
    width: 8em;
    height: 8em;
    transform: scaleY(1.06066) skewX(-0.33984rad) rotate(0.61548rad) translateX(50%);
    box-shadow: inset 0.0625em 0 rgba(245, 242, 234, 0.7);
    background: rgba(255, 2, 3, 0.2);
    content: '';
}

.face--lateral-triangle:nth-child(3) {
    box-shadow: inset 0.0625em -0.125em rgba(245, 242, 234, 0.7);
    transform: translateY(-3.4641em) rotateY(3.75707rad) translateZ(3.26599em) translateX(1.1547em) rotateX(0.5236rad) skewX(-0.33984rad) scaleY(0.94281);
}

.face--lateral-triangle:nth-child(3):before {
    margin: -4em;
    width: 8em;
    height: 8em;
    transform: scaleY(1.06066) skewX(0.33984rad) rotate(-0.61548rad) translateX(-50%);
    box-shadow: inset -0.0625em 0 rgba(245, 242, 234, 0.7);
    background: rgba(255, 2, 3, 0.2);
    content: '';
}

.face--lateral-triangle:nth-child(4) {
    box-shadow: inset -0.0625em -0.125em rgba(245, 242, 234, 0.7);
    transform: translateY(-3.4641em) rotateY(2.52611rad) translateZ(3.26599em) translateX(-1.1547em) rotateX(0.5236rad) skewX(0.33984rad) scaleY(0.94281);
}

.face--lateral-triangle:nth-child(4):before {
    margin: -4em;
    width: 8em;
    height: 8em;
    transform: scaleY(1.06066) skewX(-0.33984rad) rotate(0.61548rad) translateX(50%);
    box-shadow: inset 0.0625em 0 rgba(245, 242, 234, 0.7);
    background: rgba(255, 2, 3, 0.2);
    content: '';
}

.face--base-rhombus {
    transform: rotateX(-1.5708rad) rotate(-0.61548rad) skewX(0.33984rad) scaleY(0.94281);
    box-shadow: inset 0 0 0 0.0625em rgba(245, 242, 234, 0.7);
    background: rgba(255, 2, 3, 0.2);
}
/* Center the navigation menu */
.tp-main-menu-content {
  text-align: center;
}

.tp-main-menu-content > ul {
  display: flex;
  justify-content: center;
  padding-left: 0;
}

.tp-header-4-menu > nav > ul > li:last-child {
  margin-right: 0;
}

/* Mobile menu alignment - left align on small screens */
@media (max-width: 767px) {
  .tp-main-menu-content {
    text-align: center;
  }
  
  .tp-main-menu-content > ul {
    justify-content: flex-start;
  }
}

.j-bg-image{
  background-image: url(/assets/img/jaffa/jaffa-bg-cover.webp);
  padding: 50px 0px 20px 0px;
}

.glass-card {

  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 20px 10px rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
}

.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3),
    transparent,
    rgba(255, 255, 255, 0.3)
  );
}


.glass-red {

  background: rgba(255, 0, 0, 0.7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 20px;
  border: 1px solid rgba(255, 0, 0, 0.7);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 0, 0, 0.1),
    inset 0 -1px 0 rgba(255, 0, 0, 0.1),
    inset 0 0 20px 10px rgba(255, 0, 0, 1);
  position: relative;
  overflow: hidden;
}

.glass-red::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 0, 0.2),
    transparent
  );
}

.glass-red::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 0, 0, 0.3),
    transparent,
    rgba(255, 0, 0, 0.3)
  );
}