/* Overlay background */
 .popup-overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.45);
     backdrop-filter: blur(5px);
     z-index: 1000;
     animation: fadeIn 0.4s ease forwards;
 }

 /* Popup box */
 .popup-box {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.9);
     background: #ffffff;
     border-radius: 18px;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
     text-align: center;
     width: 650px;
     /* increased width */
     max-width: 90%;
     /* responsive for smaller screens */
     padding: 0;
     opacity: 0;
     animation: popupIn 0.5s ease forwards;
 }

 /* Heading with separate background */
 .popup-box .popup-header {
     background: linear-gradient(42deg, #2f7274, #317276);
     color: #fff;
     padding: 20px;
     border-top-left-radius: 18px;
     border-top-right-radius: 18px;
     font-size: 18px;
     /* slightly larger heading */
     font-weight: 500;
 }

 /* Content */
 .popup-box .popup-content {
     padding: 25px 35px 25px;
     /* more horizontal padding for wider popup */
     color: #333;
     font-size: 16px;
     line-height: 1.6;
 }

 /* Close button */
 .close-btn {
     position: absolute;
     top: 10px;
     right: 14px;
     font-size: 20px;
     color: #fff;
     background: none;
     border: none;
     cursor: pointer;
     font-weight: bold;
     padding: 0px 8px !important;
     margin-top: 10px !important;
 }

 .close-btn:hover {
     color: #f0f0f0;
 }

 /* Action button */
 .popup-box button {
     background: #d39105;
     color: white;
     border: none;
     padding: 4px 17px;
     border-radius: 5px;
     cursor: pointer;
     font-weight: 600;
     font-size: 15px;
     transition: background 0.3s ease, transform 0.2s;
     margin-bottom: 15px;

 }

 .popup-box button:hover {
     transform: scale(1.05);
     background: #6a9d9f;
 }

 /* Animations */
 @keyframes popupIn {
     to {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }