body.popup-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

.popup-overlay * {
     box-sizing: border-box;
 }

 /* Popup Overlay - Fullscreen */
 .popup-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
       background: rgba(255, 255, 255, 0.1); 
  backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     animation: fadeIn 0.5s ease-out;
 }

 /* Popup Container */
 .popup-container {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px);
     border-radius: 25px;
     padding: 4rem 3rem;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
     text-align: center;
     max-width: 500px;
     width: 60%;
     animation: slideIn 0.7s ease-out;
     position: relative;
     overflow: hidden;
 }

 .popup-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
     pointer-events: none;
 }

 /* Title */
 .popup-title {
     font-size: 3rem;
     color: #0a345c;
     margin-bottom: 1rem;
     font-weight: 800;
     text-shadow: 0 2px 10px rgba(10, 52, 92, 0.2);
 }

 .popup-subtitle {
     font-size: 1.3rem;
     color: #666;
     margin-bottom: 3.5rem;
     line-height: 1.6;
 }

 /* Options Container */
 .options-container {
     display: flex;
     flex-direction: column;
     gap: 2rem;
 }

 /* Option Button */
 .option-btn {
     background: #0a345c;
     color: white;
     border: none;
     padding: 1rem 1.5rem;
     border-radius: 20px;
     font-size: 1.4rem;
     font-weight: 700;
     cursor: pointer;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(10, 52, 92, 0.3);
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .option-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: left 0.6s;
 }

 .option-btn:hover::before {
     left: 100%;
 }

 .option-btn:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 20px 40px rgba(10, 52, 92, 0.4);
     background: linear-gradient(135deg, #0a345c 0%, #0d4270 100%);
 }

 .option-btn:active {
     transform: translateY(-2px) scale(1.01);
 }

 

 .btn-text {
     display: block;
     font-size: 1.2rem;
 }

 /* Only style your sections when they need to be shown/hidden */
 #jobseeker-form-section.show-section {
     display: block !important;
 }

 #company-form-section.show-section {
     display: block !important;
 }

 /* Animations */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: scale(0.7) translateY(100px);
     }

     to {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }

 @keyframes popupFadeOut {
     from {
         opacity: 1;
         transform: scale(1);
     }

     to {
         opacity: 0;
         transform: scale(0.9);
     }
 }

 .popup-closing {
     animation: popupFadeOut 0.3s ease-in forwards;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .popup-container {
         padding: 3rem 2rem;
         margin: 1rem;
     }

     .popup-title {
         font-size: 2.5rem;
     }

     .popup-subtitle {
         font-size: 1.1rem;
     }

     .option-btn {
         padding: 1.5rem 2rem;
         font-size: 1.2rem;
     }

 }

 @media (max-width: 480px) {
     .popup-title {
         font-size: 2rem;
     }

     .options-container {
         gap: 1.5rem;
     }
 }

 /* Floating particles effect */
 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(255, 255, 255, 0.8);
     border-radius: 50%;
     animation: float 6s infinite ease-in-out;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
         opacity: 1;
     }

     50% {
         transform: translateY(-20px) rotate(180deg);
         opacity: 0.8;
     }
 }