.elementor-11277 .elementor-element.elementor-element-9e50a48 > .elementor-container{min-height:635px;}#elementor-popup-modal-11277 .dialog-message{width:640px;height:auto;}#elementor-popup-modal-11277{justify-content:center;align-items:center;}#elementor-popup-modal-11277 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}/* Start custom CSS */<style>
  /* CSS for the promo code popup */
  .popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    padding: 30px;
    max-width: 400px;
    text-align: center;
    display: none; /* Initially hidden */
    animation: blink 1s infinite alternate; /* Added blinking animation */
  }

  @keyframes blink {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0.5;
    }
  }

  .popup-header {
    font-size: 32px; /* Increased font size for excitement */
    color: #ff4d4d; /* Red text */
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Added text shadow for excitement */
  }

  .promo-code img {
    max-width: 100%;
    margin-bottom: 20px;
  }

  .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #000; /* Black close button */
    cursor: pointer;
  }

  .promo-text {
    font-size: 28px; /* Increased font size for excitement */
    font-weight: bold;
    margin-bottom: 60px; /* Adjusted margin for better spacing */
    color: #333; /* Changed text color for better contrast */
    text-transform: uppercase; /* Added text transformation for excitement */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Added slight text shadow */
  }

  .promo-text2 {
    font-size: 20px; /* Reduced font size for better hierarchy */
    color: #666; /* Changed text color for better contrast */
    font-style: italic; /* Added italic style for excitement */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Added slight text shadow */
  }

  .promo-text3 {
    margin-bottom: 20px; /* Adjusted margin */
    color: #ff4d4d; /* Red text */
    font-weight: bold; /* Added bold style */
  }
</style>

<div id="popup" class="popup-container">
  <span class="close-btn" onclick="closePopup()">&times;</span>
  <div class="promo-code">
    <img src="images/promo.jpeg" alt="Promo Code" />
  </div>
  <p class="popup-header">🎉 Special Offer Inside! 🎉</p>
  <!-- Exciting text change -->
  <p class="promo-text">Use Code: <span style="color: #ff4d4d">WEB5</span></p>
  <p class="promo-text3">Use this promo code for 5% off your order.</p>
  <p class="promo-text2">Hurry! Grab this amazing discount now.</p>
  <!-- Exciting text change -->
</div>

<script>
  // JavaScript to handle the popup functionality
  document.addEventListener("DOMContentLoaded", function () {
    var popup = document.getElementById("popup");
    popup.style.display = "block"; // Show the popup

    setTimeout(function () {
      popup.style.display = "none"; // Hide the popup after 10 seconds (adjust as needed)
    }, 20000000);
  });

  function closePopup() {
    var popup = document.getElementById("popup");
    popup.style.display = "none"; // Hide the popup
  }
</script>/* End custom CSS */