body {
  text-align: center;
  background: gray;
}

.card__container {
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  perspective: 1400px;
  transition: all 0.2s ease;
}
@media (min-width: 768px) {
  .open .card__container {
    transform: translate(0%, -50%);
  }
}

.card {
  max-width: 400px;
  max-height: 600px;
  width: 80vw;
  height: 120vw;
  transform-style: preserve-3d;
  transform: rotateX(65deg);
  transition: all 1s ease;
}
.open .card {
  transform: rotateX(0deg);
}
.card__panel {
  border: 1px solid black;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transition: all 1s ease;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  transform-origin: left;
  transform-style: preserve-3D;
  transform: rotate3d(0, 1, 0, 0deg);
}
.card__panel--front {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: #6288e6;
  z-index: 1;
}
.open .card__panel--front {
  transform: rotate3d(0, 1, 0, -170deg);
}
.card__panel--inside-left {
  background: #fff;
  z-index: 0;
}
.open .card__panel--inside-left {
  transform: rotate3d(0, 1, 0, -170deg);
}
.card__panel--inside-right {
  border-left: none;
  background: #fff;
  z-index: -1;
}

.main-class {
      min-height: 60vw;
    }

    .topbgdiv::before {
      content: "";
      background: url(toran.png) no-repeat;
      background-position: center center;
      background-size: contain;
      width: 48px;
      height: 271px;
      position: absolute;
      left: 5px;
      top: 0px;
      animation: Rotate 3s linear infinite;
      -webkit-animation: Rotate 10s linear infinite;
    }

    .toplighting::before {
      content: "";
      background: url(v2.gif) no-repeat;
      background-position: center center;
      background-size: contain;
      width: 32%;
      height: 67px;
      position: absolute;
      left: 25px;
      top: 0px;
      opacity: 0.9;
      background-position: top;
    }

    .toplighting::after {
      content: "";
      background: url(v2.gif) no-repeat;
      background-position: center center;
      background-size: contain;
      width: 32%;
      height: 67px;
      position: absolute;
      right: 25px;
      top: 0px;
      opacity: 0.9;
      background-position: top;
    }

    .topbgdiv::after {
      content: "";
      background: url(toran2.png) no-repeat;
      background-position: center center;
      background-size: contain;
      width: 52px;
      height: 272px;
      position: absolute;
      right: 5px;
      top: 0px;
      animation: Rotate2 3s linear infinite;
      -webkit-animation: Rotate2 10s linear infinite;
      z-index: -2;
    }

    .whitebg:before {
      content: "";
      background: url(166542112781085768.png) no-repeat;
      background-position: center center;
      background-size: contain;
      width: 100%;
      height: 97px;
      position: absolute;
      left: 0px;
      top: -40px;
    }

    @media (max-width: 540px) {
      .main-class {
        min-height: 180vw;
      }

      .toplighting::after {
        display: none;
      }

      .toplighting::before {
        width: 100%;
        left: 0px;
        height: 47px;
      }

      .card__panel--inside-right {
        display: block;
      }

      .open .card {
        transform: rotateX(0deg);
        width: 90vw;
        height: 130vw;
      }
    }

    @media (min-width: 768px) {
      .open .card__container {
        transform: translate(0%, -50%);
      }

      .card__container {
        top: 55%;
      }

      .main-class {
        min-height: 120vw;
      }
    }

    .card__panel--front {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      /* background: #e3ba70; */
      z-index: 1;
      box-shadow: 3px 4px white, 3px 4px olive;
      background: #795548;
      background-image: url(topbgback.png);
      background-size: contain;
      background-position: center;
      color: antiquewhite;
      border-bottom: 10px solid transparent;
      border-top: 10px solid transparent;
      border-image: url(border-image.png) 12 round;
    }

    .card__panel--inside-left {
      background: #795548;
      z-index: 0;
      background-image: url(topbgback.png);
      background-size: contain;
      background-position: center;
      border-bottom: 10px solid transparent;
      border-top: 10px solid transparent;
      border-image: url(border-image.png) 12 round;
    }

    .card__panel--inside-right {
      border-left: none;
      background: #fff;
      z-index: -1;
      border-bottom: 10px solid transparent;
      border-top: 10px solid transparent;
      border-image: url(border-image.png) 12 round;
    }

    @keyframes Rotate {
      0% {
        transform: rotate(-6deg);
        left: 40px;
      }

      50% {
        transform: rotate(6deg);
        left: 0px;
      }

      100% {
        transform: rotate(-6deg);
        left: 40px;
      }
    }

    @-webkit-keyframes Rotate {
      0% {
        transform: rotate(-6deg);
        left: 40px;
      }

      50% {
        transform: rotate(6deg);
        left: 0px;
      }

      100% {
        transform: rotate(-6deg);
        left: 40px;
      }
    }

    @keyframes Rotate2 {
      0% {
        transform: rotate(6deg);
        right: 40px;
      }

      50% {
        transform: rotate(-6deg);
        right: 20px;
      }

      100% {
        transform: rotate(6deg);
        right: 40px;
      }
    }

    @-webkit-keyframes Rotate2 {
      0% {
        transform: rotate(6deg);
        right: 40px;
      }

      50% {
        transform: rotate(-6deg);
        right: 20px;
      }

      100% {
        transform: rotate(6deg);
        right: 40px;
      }
    }

    .rainbow {
      background-image: -webkit-gradient(linear,
          left top,
          right top,
          color-stop(0, #f22),
          color-stop(0.15, #f2f),
          color-stop(0.3, #22f),
          color-stop(0.45, #2ff),
          color-stop(0.6, #2f2),
          color-stop(0.75, #2f2),
          color-stop(0.9, #ff2),
          color-stop(1, #f22));
      background-image: gradient(linear,
          left top,
          right top,
          color-stop(0, #f22),
          color-stop(0.15, #f2f),
          color-stop(0.3, #22f),
          color-stop(0.45, #2ff),
          color-stop(0.6, #2f2),
          color-stop(0.75, #2f2),
          color-stop(0.9, #ff2),
          color-stop(1, #f22));
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      animation: animatedBackground 5s linear infinite;
      -moz-animation: animatedBackground 5s linear infinite;
      -webkit-animation: animatedBackground 5s linear infinite;
      -ms-animation: animatedBackground 5s linear infinite;
      -o-animation: animatedBackground 5s linear infinite;
      font-weight: 700;
    }

    .rainbow2 {
      background-image: -webkit-gradient(linear,
          left top,
          right top,
          color-stop(0, #ff9800),
          color-stop(0.15, #ffbf00),
          color-stop(0.3, #ff9800),
          color-stop(0.45, #ff0057),
          color-stop(0.6, #ffc107),
          color-stop(0.75, #ffc107),
          color-stop(0.9, #ff9800),
          color-stop(1, #ff9800));
      background-image: gradient(linear,
          left top,
          right top,
          color-stop(0, #ff9800),
          color-stop(0.15, #ffbf00),
          color-stop(0.3, #ff9800),
          color-stop(0.45, #ffeb3b),
          color-stop(0.6, #ffc107),
          color-stop(0.75, #ffc107),
          color-stop(0.9, #ff9800),
          color-stop(1, #ff9800));
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      animation: animatedBackground 5s linear infinite;
      -moz-animation: animatedBackground 5s linear infinite;
      -webkit-animation: animatedBackground 5s linear infinite;
      -ms-animation: animatedBackground 5s linear infinite;
      -o-animation: animatedBackground 5s linear infinite;
      font-weight: 700;
    }

    /* Animation rainbow background */
    @keyframes animatedBackground {
      0% {
        background-position: 0;
      }

      100% {
        background-position: 500px;
      }
    }

    @-moz-keyframes animatedBackground {
      0% {
        background-position: 0;
      }

      100% {
        background-position: 500px;
      }
    }

    @-webkit-keyframes animatedBackground {
      0% {
        background-position: 0;
      }

      100% {
        background-position: 500px;
      }
    }

    @-ms-keyframes animatedBackground {
      0% {
        background-position: 0;
      }

      100% {
        background-position: 500px;
      }
    }

    @-o-keyframes animatedBackground {
      0% {
        background-position: 0;
      }

      100% {
        background-position: 500px;
      }
    }

    .h1 {
      color: #ffe7ca;
    }

    #name {
      animation: name 4s infinite;
      text-transform: capitalize;
      margin-bottom: 5px;
      padding: 0 10px;
      font-family: "Teko", sans-serif;
    }

    @keyframes name {
      0% {
        color: red;
      }

      20% {
        color: #9c27b0;
      }

      40% {
        color: #ff0081;
      }

      60% {
        color: orange;
      }

      80% {
        color: cyan;
      }

      100% {
        color: #f45bf4;
      }
    }

    p {
      margin-top: 0.7em;
      margin-bottom: 0px;
      font-size: 0.7rem;
      font-weight: 600;
    }

    .go-to-whatsapp {
      display: block;
      left: 0px;
      bottom: 5px;
      border-radius: 10px;
      box-sizing: border-box;
      padding: 15px;
      background: #34af23;
      color: #ffffff;
      font-size: 20px;
      text-align: center;
      text-decoration: none;
      width: 65%;
      margin-left: 17%;
      /* margin-right: 30px; */
      box-shadow: 0 4px 12px 0 rgb(0 0 0 / 30%);
      animation: footer infinite linear 1s;
      /* -webkit-transform: translate3d(30%,0,0); */
      /* transform: translate3d(30%,0,0); */
      position: fixed;
      z-index: 1;
    }

    .open .card p {
      margin-top: 0.7em;
      margin-bottom: 0px;
      font-size: 1.12rem;
      font-weight: 600;
      padding-left: 5px;
    padding-right: 5px;
    }
    .open .card #loading {
      width: 15% !important;
      bottom: 5px !important;
    }
    .diwalibg:before {
    content: "";
    background: url(166542112781085768.png) no-repeat;
    /* background-position: center center; */
    /* background-size: contain; */
    background-image: url(HappyDiwali.png);
    background-size: contain;
    background-position: top center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: -28px;
    /* opacity: 0.5; */
    /*filter: alpha(opacity=50);*/
    transform: rotate3d(0,1,0,-180deg);
}
.diwalibg-right:before {
    content: "";
    background: url(166542112781085768.png) no-repeat;
    /* background-position: center center; */
    /* background-size: contain; */
    background-image: url(HappyDiwaliDiya.png);
    background-size: contain;
    background-position: top center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: -28px;
     opacity: 0.1; 
     z-index: -1;
    /*filter: alpha(opacity=50);*/
    /*transform: rotate3d(0,1,0,-180deg);*/
}
.diwalibg-front:before {
    content: "";
    background: url(166542112781085768.png) no-repeat;
    /* background-position: center center; */
    /* background-size: contain; */
    background-image: url(HappyDiwaliDiya.png);
    background-size: contain;
    background-position: top center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: -26px;
     z-index: -1;
    /*transform: rotate3d(0,1,0,-180deg);*/
}
#loading {
		-webkit-animation: rotation-star 60s infinite linear;
		animation: rotation-star 60s infinite linear;
}

@-webkit-keyframes rotation-star {
		from {
				-webkit-transform: rotate(0deg);
				 transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
				 transform: rotate(359deg);
		}
}

@-keyframes rotation-star{
    from {
         -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
    }
    to {
         -webkit-transform: rotate(359deg);
          transform: rotate(359deg);
    }
}