/* ================= ROLES ================= */
            /* ================= GLOBAL CAREER TEXT ================= */


            .career-roles {
                margin-top:0px;
                background:red;
            }
            .career-roles h2 {
                font-size: 36px;
                font-weight: 600;
                color: #3e4649;
            }

            .career-roles p {
                font-size: 15px;
                color: #555;
                margin-top: 6px;
            }

            /* ================= ROLE CARDS ================= */
            .career-roles {
                padding: 80px 0;
                background: #f4f8fb;
            }

            .role-card {
                background: #ffffff;
                border-radius: 20px;
                padding: 30px;
                height: 100%;
                box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
                transition: transform .3s ease, box-shadow .3s ease;
            }

            .role-card:hover {
                transform: translateY(-6px);
                box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
            }

            .role-card h4 {
                font-size: 20px;
                font-weight: 600;
                color: #3e4649;
                margin-bottom: 8px;
            }

            .role-desc {
                font-size: 14px;
                color: #425e66;
                line-height: 1.6;
                margin-bottom: 14px;
            }

            /* ================= ROLE META ================= */
            .role-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin-bottom: 16px;
            }

            .role-meta span {
                background: #e6f4ec;
                color: #1b6f4a;
                padding: 6px 14px;
                border-radius: 20px;
                font-size: 13px;
                font-weight: 500;
            }

            /* ================= ROLE DETAILS ================= */
            .role-points {
                padding-left: 18px;
                margin-bottom: 18px;
            }

            .role-points li {
                font-size: 14px;
                color: #3b5560;
                margin-bottom: 6px;
            }

            /* ================= APPLY BUTTON ================= */
            .apply-btn {
                display: inline-block;
                margin-top: auto;
                color: #62b400;
                font-weight: 600;
                text-decoration: none;
                transition: color .3s ease;
            }

          

            /* ================= MOBILE ================= */
            @media (max-width: 768px) {
                .career-roles {
                    padding: 50px 0;
                }
                  .career-roles h2 {
                font-size: 30px;
                font-weight: 600;
                color: #3e4649;
            }

                .role-card {
                    padding: 24px;
                }
            }

            /* ================= APPLY MODAL ================= */
            .apply-modal {
                background: #0f3f46;
                /* dark teal */
                border-radius: 22px;
                padding: 28px;
                color: #ffffff;
            }

            /* Modal title */
            .apply-modal .modal-title {
                font-size: 20px;
                font-weight: 700;
                text-align: center;
                width: 100%;
                color: #ffffff;
            }

            /* Close button */
            .apply-modal .btn-close {
                filter: invert(1);
                opacity: 0.8;
            }

            /* ================= FORM CONTROLS ================= */

            .apply-modal .form-control,
            .apply-modal select,
            .apply-modal textarea {
                background: #ffffff;
                border: none;
                border-radius: 10px;
                padding: 14px 16px;
                font-size: 14px;
                 color: #000000; 
            }

            .apply-modal .form-control::placeholder,
            .apply-modal textarea::placeholder {
              color: #8a8a8a;
                font-size: 14px;
            }

            .apply-modal .form-control:focus,
            .apply-modal select:focus,
            .apply-modal textarea:focus {
                outline: none;
                box-shadow: none;
                border: 2px solid #8fc24b;
            }

            /* ================= TWO COLUMN INPUT ================= */

            .apply-modal .row .col-6 .form-control {
                width: 100%;
            }

            /* ================= FILE UPLOAD ================= */

            .apply-modal input[type="file"] {
                background: #ffffff;
                border-radius: 10px;
                padding: 10px;
                font-size: 13px;
            }

            /* ================= SUBMIT BUTTON ================= */

            .apply-modal .submit-btn {
                margin-top: 12px;
                width: 100%;
                background: transparent;
                border: 2px solid #8fc24b;
                color: #fff;
                font-weight: 600;
                padding: 14px;
                border-radius: 12px;
                transition: all 0.3s ease;
            }
            
.apply-modal .submit-btn:hover {
  background: #99BD25 !important;
  color: #fff;
  text-decoration: none;
  border: 2px solid #99BD25;
}

/* CLICK / ACTIVE */
.apply-modal .submit-btn:active,
.apply-modal .submit-btn:focus {
   background: #99BD25 !important;
  color: #000;
  outline: none;
  box-shadow: none;
  border: 2px solid #99BD25 !important;
}


            /* ================= MODAL SIZE ================= */

            .modal-dialog {
                max-width: 520px;
            }

            /* ================= MOBILE ================= */

            @media (max-width: 576px) {
                .apply-modal {
                    padding: 22px;
                }

                .modal-dialog {
                    margin: 16px;
                }
            }

            /* Bootstrap modal backdrop */
            .modal-backdrop {
                z-index: 1050 !important;
            }

            /* Modal itself */
            .modal {
                z-index: 1060 !important;
            }

            /* Header must stay below modal */
            .site-header {
                z-index: 1000 !important;
            }