/* Wat leuk dat je onze code bekijkt!
We waarderen het als je onze code niet kopieert, laten we het netjes houden, toch? Heb je een bug gevonden? Stuur ons dan een e-mail naar info@ReluxHost.pro */


.promotion-popup {
    display: flex;
    justify-content: flex-end; 
    position: fixed;
    bottom: 50px;
    right: 20px; 
    z-index: 1000; 
  }
  
  .promotion-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 5px solid #FFA500; 
    position: relative;
  }
  
  
  .close-popup {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 24px;
    color: #FFA500; 
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    padding: 5px;
  }
  
  .copy-code-btn {
    background-color: #11724;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 20px;
    cursor: pointer;
    font-weight: bold;
  }
  
  .promo-section .single-promo-card{
    height:239px !important;
   }

   /* ANDERE BULLSHIT van promotie gedeelde */
  
       :root {
         --popup-background: rgba(0, 0, 0, 0.5);
         --promotion-card-background: #181b24;
         --fade-in-duration: 0.5s;
       }

       body.popup-open {
         overflow: hidden;
       }

       .promotion-popup {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         display: none;
         align-items: center;
         justify-content: center;
         z-index: 1000;
         background-color: var(--popup-background);
         backdrop-filter: blur(10px);
         animation: fadeIn var(--fade-in-duration) ease-out;
       }

       .promotion-card {
         font-family: "Roboto", sans-serif;
         position: relative;
         background-color: var(--promotion-card-background);
         padding: 25px;
         border-radius: 8px;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
         text-align: center;
         color: white;
         overflow: hidden;
         backdrop-filter: blur(10px);
         animation: slideIn var(--fade-in-duration) ease-out,
           borderPulse 2s infinite alternate;
       }

       @keyframes borderPulse {
         0% {
           border-color: #034564;
         }
         100% {
           border-color: #034564;
         }
       }

       @keyframes fadeIn {
         from {
           opacity: 0;
         }
         to {
           opacity: 1;
         }
       }

       @keyframes slideIn {
         from {
           opacity: 0;
           transform: translateY(-50%);
         }
         to {
           opacity: 1;
           transform: translateY(0);
         }
       }

       .close-btn {
         position: absolute;
         top: 15px;
         right: 15px;
         cursor: pointer;
         background-color: #034564;
         border-radius: 50%;
         width: 30px;
         height: 30px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: #153462;
         font-weight: bold;
         animation: fadeIn 1s ease-out;
       }

       .shop-now-btn {
         background-color: #034564;
         color: #153462;
         padding: 12px 25px;
         border: none;
         border-radius: 25px;
         margin-top: 20px;
         cursor: pointer;
         font-weight: bold;
         transition: background-color 0.3s ease;
         animation: pulse 1s infinite alternate;
       }

       @keyframes pulse {
         0% {
           transform: scale(1);
         }
         100% {
           transform: scale(1.05);
         }
       }

       .promotion-card h2 {
         margin: 0 0 10px;
         font-weight: 700;
         animation: fadeInDown 1s ease-out;
       }

       @keyframes fadeInDown {
         from {
           opacity: 0;
           transform: translateY(-20px);
         }
         to {
           opacity: 1;
           transform: translateY(0);
         }
       }

       .promotion-card p {
         margin: 0 0 20px;
         font-weight: 400;
         animation: fadeInUp 1s ease-out;
       }

       @keyframes fadeInUp {
         from {
           opacity: 0;
           transform: translateY(20px);
         }
         to {
           opacity: 1;
           transform: translateY(0);
         }
       }

       .close-btn,
       .shop-now-btn {
         transition: transform 0.5s ease;
       }

       .close-btn:hover,
       .shop-now-btn:hover {
         transform: scale(1.1);
       }

       .banner-confirm {
         display: none;
         position: sticky;
         top: 0;
         z-index: 999;
         background-color: #034564;
         color: white;
         padding: 10px 20px;
         font-family: "Roboto", sans-serif;
         display: flex;
         align-items: center;
         justify-content: space-between;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
       }

       .banner-confirm button {
         padding: 10px 20px;
         background-color: white;
         color: #034564;
         border: 2px solid white;
         border-radius: 5px;
         cursor: pointer;
         font-weight: bold;
         transition: all 0.3s ease;
       }

       .banner-confirm button:hover {
         background-color: #034564;
         color: white;
         border-color: #034564;
       }

       @keyframes slideDown {
         from {
           transform: translateY(-100%);
         }
         to {
           transform: translateY(0);
         }
       }

       .strong-text-promo {
         color: #034564;
       }

       @keyframes fadeOut {
         from {
           opacity: 1;
         }
         to {
           opacity: 0;
         }
       }