/* Apply Button inside right box */
.btn-elite-apply {
          background: #ffffff;
          color: #003366;
          border: none;
          padding: 10px 20px;
          border-radius: 6px;
          font-weight: 700;
          font-size: 0.9rem;
          transition: 0.3s;
          text-transform: uppercase;
}

.btn-elite-apply:hover {
          background: #4da6ff;
          color: #fff;
          transform: scale(1.05);
}




 /* Hero Section Background */
 .careers-hero {
           /* background: linear-gradient(135deg, #0052D4 0%, #4364F7 50%, #6FB1FC 100%);
            min-height: 450px; */
           /* background: linear-gradient(300deg, #2d3238 0%, #030510 50%, #0063d1 100%); */
           /* background: linear-gradient(300deg, #435c7a 0%, #001588e6 50%, #285281 100%); */
           background: #001327;
           /* Adjust based on preference */
           display: flex;
           align-items: center;
           overflow: hidden;
 }

 /* Typography & Spacing */
 .l-spacing {
           letter-spacing: 1px;
           font-size: 0.75rem;
 }

 .bg-dark-blue {
           background-color: rgba(0, 0, 50, 0.3);
 }

 .hero-content .display-4 {
           line-height: 1.1;
 }

 /* Pill Styling (Glassmorphism) */
 .pill-outline {
           border: 1px solid rgba(255, 255, 255, 0.4);
           color: #fff;
           padding: 6px 18px;
           border-radius: 50px;
           font-size: 0.85rem;
           text-transform: uppercase;
           background: rgba(255, 255, 255, 0.1);
           backdrop-filter: blur(5px);
           transition: all 0.3s ease;
 }

 .pill-outline:hover {
           background: rgba(255, 255, 255, 0.2);
           transform: translateY(-2px);
 }

 /* Image Animation */
 .floating-animation {
           animation: float 6s ease-in-out infinite;
           max-height: 400px;
 }

 @keyframes float {
           0% {
                     transform: translateY(0px);
           }

           50% {
                     transform: translateY(-15px);
           }

           100% {
                     transform: translateY(0px);
           }
 }

 /* Reducing extra spaces on smaller screens */
 @media (max-width: 991px) {
           .careers-hero {
                     padding: 40px 0;
           }

           .hero-content {
                     text-align: center;
                     margin-bottom: 30px;
           }

           .hero-content .pe-lg-5 {
                     padding-right: 0 !important;
           }

           .d-flex {
                     justify-content: center;
           }
 }

 /* --- Global Reset for Spacing --- */
 .job-container-elite {
           display: flex;
           flex-direction: column;
           gap: 40px;
           /* Precise space between different job cards */
           padding: 20px 0;
 }

 /* --- The Main Elite Card Structure --- */
 .job-card-base {
           display: flex;
           /* Forces sidebar to match height of content */
           background: #ffffff;
           border-radius: 28px;
           border: 1px solid #eef2f6;
           box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
           overflow: hidden;
           /* Rounds the sidebar corners */
           transition: all 0.4s ease;
           flex-wrap: wrap;
           /* Supports mobile wrapping */
 }

 .job-card-base:hover {
           transform: translateY(-8px);
           box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12);
 }

 /* --- Left Information Side --- */
 .left-info {
           flex: 1;
           /* Automatically takes remaining width */
           padding: 35px 50px;
           min-width: 320px;
 }

 .job-title-elite {
           font-size: 1.8rem;
           font-weight: 800;
           color: #0f172a;
           margin: 0;
 }

 .hiring-badge {
           background: #f0fdf4;
           color: #166534;
           padding: 5px 14px;
           border-radius: 50px;
           font-size: 0.75rem;
           font-weight: 700;
           display: inline-flex;
           align-items: center;
           gap: 8px;
           border: 1px solid #dcfce7;
           margin-left: 15px;
 }

 .dot-green {
           width: 8px;
           height: 8px;
           background: #22c55e;
           border-radius: 50%;
           animation: pulse-dot 2s infinite;
 }

 /* --- Features/Points Grid --- */
 .points-container {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: 25px;
           margin-top: 30px;
 }

 .point-item {
           display: flex;
           gap: 15px;
           align-items: flex-start;
 }

 .point-icon {
           min-width: 44px;
           height: 44px;
           background: #f8fafc;
           border: 1px solid #e2e8f0;
           border-radius: 12px;
           display: flex;
           align-items: center;
           justify-content: center;
           color: #0052D4;
           font-size: 1.2rem;
           flex-shrink: 0;
 }

 .point-item p {
           font-size: 0.92rem;
           color: #475569;
           margin: 0;
           line-height: 1.6;
 }

 /* --- Right Action Sidebar (Dark) --- */
 .right-action {
           width: 320px;
           /* Fixed width for Elite feel */
           background: #0f172a;
           /* Deep charcoal/navy */
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           text-align: center;
           padding: 40px;
           color: #ffffff;
 }

 .apply-btn-white {
           background: #ffffff;
           color: #0f172a;
           border: none;
           padding: 14px 40px;
           border-radius: 12px;
           font-weight: 700;
           transition: 0.3s ease;
           cursor: pointer;
 }

 .apply-btn-white:hover {
           background: #0052D4;
           color: #fff;
           transform: scale(1.05);
 }

 /* --- Footer Meta Tags --- */
 .footer-tags {
           display: flex;
           gap: 15px;
           margin-top: 40px;
           flex-wrap: wrap;
 }

 .tag-pill {
           font-size: 0.82rem;
           font-weight: 600;
           color: #64748b;
           display: flex;
           align-items: center;
           gap: 6px;
           background: #f8fafc;
           padding: 6px 12px;
           border-radius: 8px;
           border: 1px solid #e2e8f0;
 }

 /* --- Animations --- */
 @keyframes pulse-dot {
           0% {
                     transform: scale(0.95);
                     box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
           }

           70% {
                     transform: scale(1);
                     box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
           }

           100% {
                     transform: scale(0.95);
                     box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
           }
 }

 /* --- Mobile Responsiveness --- */
 @media (max-width: 991px) {
           .right-action {
                     width: 100%;
                     border-radius: 0 0 28px 28px;
           }

           .left-info {
                     padding: 30px;
           }

           .hiring-badge {
                     margin-left: 0;
                     margin-top: 10px;
           }
 }

 .modal-backdrop.show {

           z-index: 2;
 }

 /* Styling for the new close icon */
 .modal-header button:hover {
           opacity: 1 !important;
           transform: rotate(90deg);
 }

 /* Ensure the modal content stays on top of the gray layer */
 .modal-backdrop {
           z-index: 1040 !important;
 }

 .modal {
           z-index: 1050 !important;
 }

 /* Fix for the gray box issue in your screenshot */
 .btn-close {
           filter: none !important;
           background-image: none !important;
 }

 /* Modal Styling */
 .elite-modal-content {
           border-radius: 24px !important;
           border: none !important;
           overflow: hidden;
           box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2) !important;
 }

 .elite-modal-header {
           background: #0f172a !important;
           /* Deep Tech Charcoal */
           padding: 30px !important;
           border: none !important;
           position: relative;
 }

 .elite-modal-header .header-text h2 {
           color: #ffffff !important;
           font-weight: 800 !important;
           letter-spacing: -0.5px;
 }

 .elite-modal-header .header-text p {
           color: rgba(255, 255, 255, 0.6);
           font-size: 0.85rem;
 }

 /* Fix for the Close Button */
 .elite-close-btn {
           background: rgba(255, 255, 255, 0.1) !important;
           border: none;
           color: white !important;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           position: absolute;
           right: 20px;
           top: 25px;
           transition: 0.3s;
 }

 .elite-close-btn:hover {
           background: #ef4444 !important;
           /* Red on hover */
           transform: rotate(90deg);
 }

 /* Input Fields */
 .elite-input-group label {
           font-size: 0.8rem;
           font-weight: 700;
           color: #475569;
           text-transform: uppercase;
           letter-spacing: 0.5px;
           margin-bottom: 8px;
 }

 .elite-input {
           background: #f8fafc !important;
           border: 1px solid #e2e8f0 !important;
           border-radius: 12px !important;
           padding: 12px 16px !important;
           font-size: 0.95rem !important;
           transition: 0.3s !important;
 }

 .elite-input:focus {
           border-color: #0052D4 !important;
           box-shadow: 0 0 0 4px rgba(0, 82, 212, 0.1) !important;
           background: #ffffff !important;
 }

 /* Submit Button */
 .btn-elite-submit {
           background: #0052D4;
           color: white;
           border: none;
           width: 100%;
           padding: 16px;
           border-radius: 14px;
           font-weight: 700;
           font-size: 1rem;
           transition: 0.3s;
           box-shadow: 0 10px 20px rgba(0, 82, 212, 0.2);
 }

 .btn-elite-submit:hover {
           background: #0f172a;
           transform: translateY(-2px);
           box-shadow: 0 15px 30px rgba(15, 23, 42, 0.3);
 }

 /* Fix for background layering */
 .modal-backdrop {
           background-color: #0f172a !important;
           opacity: 0.7 !important;
 }

 /* Fix for the Modal Backdrop Z-Index */
 .modal-backdrop {
           z-index: 1040 !important;
 }

 .modal {
           z-index: 1055 !important;
 }

 /* Elite Modal Styling */
 .elite-modal-content {
           border-radius: 24px !important;
           border: none !important;
           box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3) !important;
 }

 .elite-modal-header {
           background: #0f172a !important;
           padding: 30px !important;
           border: none !important;
           position: relative;
 }

 /* FIX: This replaces the gray box with a clean white X */
 .elite-close-btn {
           background: rgba(255, 255, 255, 0.1) !important;
           border: none;
           color: white !important;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           position: absolute;
           right: 20px;
           top: 25px;
           cursor: pointer;
           transition: 0.3s;
 }

 .elite-close-btn:hover {
           background: #ef4444 !important;
           transform: rotate(90deg);
 }

 /* Fix for the extra gray layer/background issue */
 .modal-backdrop {
           z-index: 1040 !important;
           background-color: #0f172a !important;
           /* Matches Elite header */
           opacity: 0.5 !important;
 }

 .modal {
           z-index: 1055 !important;
 }

 /* Fix for standard Bootstrap close button conflict */
 .btn-close {
           display: none !important;
           /* Hides the broken gray box from previous screenshot */
 }

 @media (min-width: 768px) {
           .p-md-5 {
                     padding: 0rem !important;
           }
 }