.elementor-336 .elementor-element.elementor-element-e32868e{--display:flex;--min-height:372px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-around;--align-items:center;}.elementor-336 .elementor-element.elementor-element-e32868e:not(.elementor-motion-effects-element-type-background), .elementor-336 .elementor-element.elementor-element-e32868e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#02010100;background-image:url("https://i0.wp.com/aktospace.com/wp-content/uploads/2023/11/amore.png?fit=1366%2C768&ssl=1");background-position:bottom center;background-repeat:no-repeat;background-size:cover;}#elementor-popup-modal-336 .dialog-widget-content{animation-duration:1.2s;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-336{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-336 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-336 .dialog-close-button{display:flex;}/* Start custom CSS for html, class: .elementor-element-7d0708e */.cardpopup {
  /* Add any required styles for card */
}

.cardpopip-container {
  position: relative;
  background-color: black;
  width: 300px; /* default width */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-content {
  transition: all 0.3s ease; /* default state */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  justify-content: start;
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate3d(0, 0, 0); /* default state */
}

.cardpopip-container:hover .card-content {
  transition-duration: 1s;
  transform: translate3d(0, -5rem, 0); /* on hover state */
}

.card-thank-you {
  font-size: 1.25rem; /* default font-size */
  font-weight: 600;
  color: #6b7280;
  font-family: serif;
}

.card-message {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  font-size: 0.625rem; /* default font-size */
  color: #4b5563;
}

.card-signature {
  font-family: sans-serif;
  font-size: 0.625rem;
  color: #4b5563;
  padding-top: 1.25rem;
}

.seal-button {
  background-color: #f43f5e;
  color: #7f1d1d;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 9999px;
  position: relative;
  z-index: 10;
  font-size: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border: 4px solid #991b1b;
  clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);
  transition: all 1s ease;
}

.cardpopip-container:hover .seal-button {
  opacity: 0;
  transform: scale(0) rotate(180deg);
}

.overlay {
  transition: all 0.7s ease;
  position: absolute;
  width: 100%;
  height: 100%;
}

.tp {
  background-color: #1f2937;
  clip-path: polygon(50% 50%, 100% 0, 0 0);
}

.lft {
  background-color: #111827;
  clip-path: polygon(50% 50%, 0 0, 0 100%);
}

.rgt {
  background-color: #1f2937;
  clip-path: polygon(50% 50%, 100% 0, 100% 100%);
}

.btm {
  background-color: #111827;
  clip-path: polygon(50% 50%, 100% 100%, 0 100%);
}

.cardpopip-container:hover .tp {
  transition-duration: 0.1s;
  clip-path: polygon(50% 0%, 100% 0, 0 0);
}

/* Responsive design for small screens */
@media screen and (min-width: 640px) {
  .cardpopip-container {
    width: 350px; /* increased width */
  }
  
  .card-thank-you {
    font-size: 2rem; /* increased font-size */
  }
  
  .card-message {
    font-size: 0.75rem; /* increased font-size */
  }
  
  .card-signature {
    font-size: 0.75rem; /* increased font-size */
  }
}/* End custom CSS */