/* ============================================
   BASE PAGE STYLES
   ============================================ */
body {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, sans-serif;
  overflow: hidden;
}

/* ============================================
   BANNER CONTAINER
   ============================================ */
.container {
  display: inline-block;
  width: 1280px;
  height: 720px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(72, 49, 189, 1) 0%, rgba(191, 17, 104, 1) 100%);
}


/* ============================================
   GLOW EFFECT — CUSTOMIZABLE VARIABLES
   Change these values to adjust color, speed and
   delay of the rotating glow without touching the
   rest of the code.
   ============================================ */

/* ============================================
   CARD IMAGE

/* Outer wrapper: only handles position and size.
   overflow:visible so the soft ambient glow can
   bleed outward beyond the card. */
#card {
    transform: translateY(300px);
  display: block;
  overflow: visible;
  position: absolute;
  bottom: -6px;
  left: 30px;
  z-index: 2;
 border: 6px solid #ffffff00;
  border-radius: 22px 22px 0px 0px; 
  background: linear-gradient(#13121900, #13121900) padding-box, linear-gradient(
        var(--angle),
        #da83ef00,
        #eed0f5
      ) border-box;
  animation: 3s rotate linear infinite;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card-content {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0px 0px;
  width: 100%;
  height: 100%;
}

/* The actual image, filling its clipped container */
.cardimg {
  display: block;
  width: 100%;
  height: 100%;
}


/* ============================================
   LOGO
   ============================================ */
.logoimg {
  transform: scale(0.05);
  display: block;
  opacity: 0;
  width: 319px;
}

#logo {
  overflow: visible;
  position: absolute;
  top: 458px;
  left: 938px;
  z-index: 20;
}

/* ============================================
   BOOKMARK
   ============================================ */
.bookmarkimg {
  transform: translateX(100px);
  display: block;
  opacity: 0;
}

#bookmark {
  overflow: hidden;
  position: absolute;
  top: 343px;
  right: 0px;
  z-index: 19;
}

/* ============================================
   TT (title/tag) ELEMENT
   ============================================ */
.ttimg {
  transform: scale(0.65) translateY(50px);
  display: block;
  opacity: 0;
}

#tt {
  overflow: hidden;
  position: absolute;
  top: 140px;
  left: 0px;
  z-index: 21;
}

/* ============================================
   CTA (call to action)
   ============================================ */
.ctaimg {
  transform: scale(0.05);
  display: block;
  opacity: 0;
}

#cta {
  position: absolute;
  top: 576px;
  left: 992px;
  z-index: 75;
  transform-origin: center;
}

/* ============================================
   PRICE
   ============================================ */
.priceimg {
  transform: translateY(200px);
  display: block;
}

#price {
  overflow: hidden;
  position: absolute;
  top: 116px;
  left: 973px;
  z-index: 15;
  transform-origin: center;
}

/* ============================================
   SIDE COPY
   ============================================ */
#side-copy {
  overflow: hidden;
  position: absolute;
  bottom: 20px;
  right: 15px;
  z-index: 14;
}

/* ============================================
   BOTTOM COPY
   ============================================ */
#bottom-copy {
  overflow: hidden;
  position: absolute;
  top: 670px;
  left: 938px;
  z-index: 20;
}

/* ============================================
   BACKGROUND IMAGE
   ============================================ */
#bg {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
}