body {
      margin: 0;
      background: linear-gradient(135deg, #2c5364, #000, #2c5364);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
    }
    
    #myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
        filter: hue-rotate(-45deg);
}
    

/*
.text-wrapper {
  position: relative;
  display: inline-block;
}

.text-wrapper .text-outline {
  position: absolute;
  top: 0;
  left: 0;
  color: black;
  z-index: 0;
  opacity:0.2;


  text-shadow:
    -1px -1px 10px #000,
     1px -1px 10px #000,
    -1px  1px 10px #000,
     1px  1px 10px #000;
}

.linear-wipe {
  position: relative;
  z-index: 1;
  font-weight: bold;

  background: linear-gradient(to right, #000 20%, #fff 40%, #fff 60%, #000 80%);
  background-size: 200% auto;

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  animation: shine 3s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}
*/
/***********/
.embossed-wrapper {
  position: relative;
  display: inline-block;text-align:center;
  line-height: 1.2;
}

.text-shadow,.text-gradient{  font-size: 120px;}

.text-shadow {
  position: absolute;
  top: 0;
  left: 0;

  font-weight: bold;
  z-index: 0;
  color: transparent;

  /* 💥 Black embossed shadow */
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.6),
   -1px -1px 1px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.text-gradient {
  position: relative;
  z-index: 1;

  font-weight: bold;
  color: transparent;

  background: linear-gradient(
    90deg,
    #fbc91a 0%,
    #ffffff 25%,
    #fbc91a 50%,
    #ffffff 75%,
    #fbc91a 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shine 5s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}
/***********/
.scene {
      width: 300px;
      height: 300px;
      perspective: 1200px;
      position:absolute;
    }

    .cube-wrapper {
      width: 100%;
      height: 100%;
      transform: rotateX(-20deg) rotateY(-20deg);
      transform-style: preserve-3d;
    }

    .cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotateXYZ 16s ease-in-out infinite;
}

    .face {
    overflow:hidden;
      position: absolute;
      width: 300px;
      height: 300px;
      border-radius: 6px;
      backdrop-filter: blur(3px) contrast(110%) brightness(110%);
      -webkit-backdrop-filter: blur(3px) contrast(110%) brightness(110%);
      border: 1px solid rgba(255, 255, 255, 1);
      box-shadow:
        inset 0 0 25px rgba(255, 255, 255, 0.05),
        0 0 40px rgba(255, 255, 255, 0.08);
    }

    .face::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 300%;
      height: 300%;
      background: linear-gradient(
        120deg,
        transparent 40%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 60%
      );
      animation: shineMove 6s ease-in-out infinite;
    }

    /* Faces with distinct colors */
    .front {
      transform: translateZ(150px);
      background: linear-gradient(135deg, rgba(255, 240, 200, 0.2), rgba(255, 220, 180, 0.1));
      box-shadow: inset 0 0 20px rgba(255, 220, 180, 0.3), 0 0 40px rgba(255, 210, 150, 0.2);
    }

    .back {
      transform: rotateY(180deg) translateZ(150px);
      background: linear-gradient(135deg, rgba(180, 220, 255, 0.2), rgba(150, 200, 255, 0.1));
      box-shadow: inset 0 0 20px rgba(180, 200, 255, 0.2), 0 0 30px rgba(150, 180, 255, 0.1);
    }

    .right {
      transform: rotateY(90deg) translateZ(150px);
      background: linear-gradient(135deg, rgba(255, 240, 220, 0.2), rgba(255, 200, 150, 0.1));
      box-shadow: inset 0 0 20px rgba(255, 230, 180, 0.3), 0 0 35px rgba(255, 200, 150, 0.2);
    }

    .left {
      transform: rotateY(-90deg) translateZ(150px);
      background: linear-gradient(135deg, rgba(200, 240, 255, 0.15), rgba(180, 220, 250, 0.08));
      box-shadow: inset 0 0 15px rgba(180, 240, 255, 0.3), 0 0 30px rgba(180, 240, 255, 0.15);
    }

    .top {
      transform: rotateX(90deg) translateZ(150px);
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(230, 230, 255, 0.1));
      box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.1);
    }

    .bottom {
      transform: rotateX(-90deg) translateZ(150px);
      background: linear-gradient(135deg, rgba(180, 180, 180, 0.15), rgba(100, 100, 100, 0.05));
      box-shadow: inset 0 0 10px rgba(100, 100, 100, 0.3), 0 0 20px rgba(80, 80, 80, 0.1);
    }

    @keyframes rotateY {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }

    @keyframes shineMove {
      0% {
        transform: translate(-30%, -30%);
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        transform: translate(30%, 30%);
        opacity: 0;
      }
    }
    
    @keyframes rotateXYZ {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  25% {
    transform: rotateX(45deg) rotateY(90deg) rotateZ(0deg);
  }
  50% {
    transform: rotateX(90deg) rotateY(180deg) rotateZ(30deg);
  }
  75% {
    transform: rotateX(135deg) rotateY(270deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(180deg) rotateY(360deg) rotateZ(0deg);
  }
}
    
    
/******************/

.btnbutton{display: block;
    width: 100%;
    /*position: absolute;*/
    left: 0;
    right: 0;
    /*bottom: 20%;*/
    bottom: 0;
    /*margin: 0 auto;*/
    margin: 20px auto;
    position: relative;
    z-index: 1001;
    text-align: center;}
    .btnbutton span{cursor:pointer;display:inline-block;background:#c42126;color:#fff;text-decoration:none;padding:10px 40px;font-size:30px;border-radius:20px;font-weight:bold;margin:0 15px;}
    
    
/**********************/

    @media only screen and (max-width: 767px) {
  .text-shadow,.text-gradient{  font-size: 15vw;}
  
  .btnbutton span {
      font-size: 6vw;
  }
}

 @media only screen and (max-width: 420px) {
  .text-shadow,.text-gradient{  font-size: 15vw;}
}