.popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.4s ease;
 }

 .popup-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 .popup {
     background: rgba(0, 0, 0, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     backdrop-filter: blur(20px);
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
     position: relative;
     width: 90vw;
     height: 90vh;
     max-width: 1200px;
     max-height: 800px;
     transform: scale(0.9);
     transition: all 0.4s ease;
     overflow: hidden;
 }

 .popup-overlay.active .popup {
     transform: scale(1);
 }

 .close-btn {
     position: absolute;
     top: 2rem;
     right: 2rem;
     /* background: rgba(255, 255, 255, 0.1); */
     background: transparent;
     border: none;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: white;
     font-size: 3rem;
     transition: all 0.3s ease;
     z-index: 10;
     padding: 0;
 }


 .popup-header-title {
     position: absolute;
     top: 2rem;
     left: 2rem;
     font-size: 3rem;
     font-weight: 900;
     color: white;
     z-index: 10;
 }

 .popup-content {
     padding: 80px 40px 40px;
     height: 100%;
     color: white;
     overflow-y: auto;
 }

 .popup-text {
     font-size: 1rem;
     line-height: 1.7;
     opacity: 0.9;
     text-align: justify;
     hyphens: auto;
 }

 @media (max-width: 768px) {
     .popup {
         width: 100vw;
         height: 100vh;
     }

     .popup-content {
         padding: 50px 20px 20px;
     }

     .popup-header-title {
         font-size: 2rem;
     }

     .popup-text {
         font-size: 1rem;

     }
 }