/* ============================================================
   CTS Group — Hiring Landing Page
   Utility-first system (Bootstrap 5 → project utilities → CSS)
   ============================================================ */

:root {
    --dc-1942C3: #1942C3; /* primary blue */
    --dc-143AA8: #143AA8; /* blue dark */
    --dc-2EE6A6: #2EE6A6; /* accent green */
    --dc-22C55E: #22C55E; /* whatsapp green */
    --dc-1EB257: #1EB257; /* whatsapp hover */
    --dc-B4BAEE: #B4BAEE; /* muted lavender text */
    --dc-F1F4FF: #F1F4FF; /* light hover */
    --dc-FFFFFF: #FFFFFF; /* white */
    --dc-25D366 :#25D366 ;
    --dc-FFFFFF1A: #FFFFFF1A; /* white 10% (tag fill) */
    --dc-EEEFFC: #EEEFFC; /* light lavender (modal option row) */
    --dc-919191: #919191; /* muted grey */
    --dc-F4F5FE :#F4F5FE;
    --dc-0A1240: #0A1240; /* near-black navy heading */
    --dc-E3E6EF: #E3E6EF; /* input border */
    --dc-5E5E5E: #5E5E5E; /* muted grey text */
}
/* ---------- Base ---------- */
body {
    font-family: "Overused Grotesk", system-ui;
}

/* ============================================================
   Utility classes
   ============================================================ */

/* ---- Font size ---- */
.fs-10px { font-size: 10px; }
.fs-12px { font-size: 12px; }
.fs-14px { font-size: 14px; }
.fs-15px { font-size: 15px; }
.fs-16px { font-size: 16px; }
.fs-18px { font-size: 18px; }
.fs-20px { font-size: 20px; }
.fs-24px { font-size: 24px; }
.fs-24px-18px { font-size: 24px; }

.fs-32px { font-size: 32px; }
.fs-40px-32px { font-size: 40px; }
.fs-16px-12px { font-size: 16px; }

/* ---- Font weight ---- */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* ---- Border radius ---- */
.rounded-8px { border-radius: 8px; }
.rounded-12px { border-radius: 12px; }
.rounded-16px { border-radius: 16px; }

/* ---- Letter spacing ---- */
.ls-1px { letter-spacing: 1px; }
.ls-3px { letter-spacing: 3px; }
/* ---- Padding (x = left/right, y = top/bottom) ---- */
.px-32px { padding-left: 32px; padding-right: 32px; }
.px-32px-24px { padding-left: 32px; padding-right: 32px; }
.py-18px-14px { padding-top: 18px; padding-bottom: 18px; }
.py-12px { padding-top: 12px; padding-bottom: 12px; }
.py-32px { padding-top: 32px; padding-bottom: 32px; }

/* ---- Gap (58px desktop → 30px on small screens) ---- */
.row-gap-58px-30px { row-gap: 58px; }
.row-gap-12px { row-gap: 12px; }
.row-gap-32px { row-gap: 32px; }



/* ---- Font family ---- */
.dc-font-inter { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* ---- Text colors ---- */
.dc-text-1942C3 { color: var(--dc-1942C3); }
.dc-text-2EE6A6 { color: var(--dc-2EE6A6); }
.dc-text-B4BAEE { color: var(--dc-B4BAEE); }
.dc-text-FFFFFF { color: var(--dc-FFFFFF); }
.dc-text-919191 { color: var(--dc-919191); }
.dc-text-0A1240 { color: var(--dc-0A1240); }
.dc-text-5E5E5E { color: var(--dc-5E5E5E); }

/* ---- Background colors ---- */
.dc-bg-1942C3 { background-color: var(--dc-1942C3); }
.dc-bg-22C55E { background-color: var(--dc-22C55E); }
.dc-bg-FFFFFF { background-color: var(--dc-FFFFFF); }
.dc-bg-FFFFFF1A { background-color: var(--dc-FFFFFF1A); }
.dc-bg-EEEFFC { background-color: var(--dc-EEEFFC); }
/* ============================================================
   Component styles (only what utilities can't express)
   ============================================================ */
   .line-hight-normal{
    line-height: normal;
   }

/* ---- Background ---- */


.hero-bg {
    background: linear-gradient(0deg, #1942C3, #1942C3)
}

.bg-imge{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url("../img/bak.png");
}

/* ---- Logos ---- */
.brand-logo {
    width: 392px;
    height: auto;
}

.partner-logo {
    width: 174px;
}

.whatsapp-icon {
    width: 28px;
    height: 28px;
}
.box-24px{
    height: 24px;
    width: 24px;
    min-width: 24px;
    border-radius: 100%;
    background-color: var(--dc-F4F5FE);
    color: var(--dc-143AA8);

}

.h-30px-24px{
    height: 30px;
}
.max-h-52px{
    max-height: 52px;
    min-height: 52px;
}
.max-w-650px{
    max-width: 650px !important;
}
.max-w-770px{
    max-width: 770px !important;
}
.h-100vh{
    height: 100vh;
}
/* ---- Buttons ---- */
/* White button — "Apply via Website" */
.btn-FFFFFF {
    --bs-btn-color: var(--dc-1942C3) !important;
    --bs-btn-bg: var(--dc-FFFFFF);
    --bs-btn-border-color: var(--dc-FFFFFF);
    --bs-btn-hover-color: var(--dc-143AA8);
    --bs-btn-hover-bg: var(--dc-F1F4FF);
    --bs-btn-hover-border-color: var(--dc-F1F4FF);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--dc-143AA8);
    --bs-btn-active-bg: var(--dc-F1F4FF);
    --bs-btn-active-border-color: var(--dc-F1F4FF);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--dc-1942C3);
    --bs-btn-disabled-bg: var(--dc-FFFFFF);
    --bs-btn-disabled-border-color: var(--dc-FFFFFF);
}

/* WhatsApp button — "Apply via Whatsapp" */
.btn-25D366 {
    --bs-btn-color: var(--dc-FFFFFF) !important;
    --bs-btn-bg: var(--dc-25D366);
    --bs-btn-border-color: var(--dc-25D366);
    --bs-btn-hover-color: var(--dc-FFFFFF);
    --bs-btn-hover-bg: var(--dc-1EB257);
    --bs-btn-hover-border-color: var(--dc-1EB257);
    --bs-btn-focus-shadow-rgb: 37, 211, 102;
    --bs-btn-active-color: var(--dc-FFFFFF);
    --bs-btn-active-bg: var(--dc-1EB257);
    --bs-btn-active-border-color: var(--dc-1EB257);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--dc-FFFFFF);
    --bs-btn-disabled-bg: var(--dc-25D366);
    --bs-btn-disabled-border-color: var(--dc-25D366);
}

.role-box{
    background-color: var(--dc-FFFFFF1A);
    border: 1px solid var(--dc-B4BAEE);
    color: white;
    cursor: pointer;
    transition: 0.5s;
    line-height: normal;
}

.cursor-pointer{
    cursor: pointer;
}
/* ---- Modal role options ---- */
.role-option {
    background-color: var(--dc-F4F5FE);
    color: var(--dc-1942C3);
    border: 1px solid transparent;
    transition: 0.3s;
}
.role-option:hover {
  border-color: var(--dc-B4BAEE);
}
.role-option .role-arrow {
    line-height: normal;
}

/* ---- Success (application submitted) ---- */
.success-icon {
    width: 64px;
    height: 64px;
    border-radius: 100%;
    background-color: #20BB5A;
    color: var(--dc-FFFFFF);
    box-shadow: 0 0 0 8px rgba(37, 211, 102, 0.15);
}

/* ---- Application page ---- */
.apply-bg {
    background: linear-gradient(0deg, #1942C3, #1942C3),
        linear-gradient(112.16deg, rgba(25, 66, 195, 0.2) 0%, rgba(0, 10, 73, 0.2) 100%);
}

.apply-logo {
    width: 132px;
    height: auto;
}

/* Form fields */
.dc-field {
    border: 1px solid var(--dc-E3E6EF);
    border-radius: 8px;
    min-height: 54px;
    padding: 12px 16px;
    font-size: 16px;
    color: var(--dc-0A1240);
    box-shadow: none;
}
.dc-field::placeholder { color: var(--dc-919191); }
.dc-field:focus {
    border-color: var(--dc-1942C3);
    box-shadow: none;
    outline: none;
    background: #1942c321 !important;
}

/* Upload CV drop zone */
.upload-box {
    border: 1.5px dashed var(--dc-1942C3);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}
.upload-box:hover { background-color: #013eff26; }
.upload-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--dc-EEEFFC);
    color: var(--dc-1942C3);
}

/* Native radio/checkbox — blue accent color */
.input-radio {
    accent-color: var(--dc-1942C3);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Solid blue button */
.btn-1942C3 {
    --bs-btn-color: var(--dc-FFFFFF);
    --bs-btn-bg: var(--dc-1942C3);
    --bs-btn-border-color: var(--dc-1942C3);
    --bs-btn-hover-color: var(--dc-FFFFFF);
    --bs-btn-hover-bg: #143aa89c;
    --bs-btn-hover-border-color: var(--dc-143AA8);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--dc-FFFFFF);
    --bs-btn-active-bg: var(--dc-143AA8);
    --bs-btn-active-border-color: var(--dc-143AA8);
    --bs-btn-disabled-color: var(--dc-FFFFFF);
    --bs-btn-disabled-bg: var(--dc-1942C3);
    --bs-btn-disabled-border-color: var(--dc-1942C3);
}

/* Outline blue button */
.btn-outline-1942C3 {
    --bs-btn-color: var(--dc-1942C3);
    --bs-btn-bg: var(--dc-FFFFFF);
    --bs-btn-border-color: var(--dc-1942C3);
    --bs-btn-hover-color: var(--dc-FFFFFF);
    --bs-btn-hover-bg: var(--dc-1942C3);
    --bs-btn-hover-border-color: var(--dc-1942C3);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--dc-FFFFFF);
    --bs-btn-active-bg: var(--dc-1942C3);
    --bs-btn-active-border-color: var(--dc-1942C3);
}
.input-radio{
    width: 20px;
}

.input-radio[type="radio"]:checked , .input-radio {
    background-color: var(--dc-FFFFFF);
    border-color: var(--dc-1942C3);
    background-image: radial-gradient(var(--dc-1942C3) 0, var(--dc-1942C3) 42%, transparent 46%);
}
.input-radiot:focus {
    border-color: var(--dc-1942C3);
    box-shadow: none;
}

/* ---- Divider ---- */
.hero-divider {
    width: 48px;
    border: 0;
    border-top: 2px solid var(--dc-B4BAEE);
    opacity: 1;
}
@media (max-width: 768px) {
    .row-gap-58px-30px { row-gap: 30px; }
    .fs-40px-32px { font-size: 32px; }
    .fs-16px-12px { font-size: 12px; }
    .fs-24px-18px { font-size: 18px; }
    .py-18px-14px { padding-top: 14px; padding-bottom: 14px; }
    .px-32px-24px { padding-left: 24px; padding-right: 24px; }


    .brand-logo {
        width: 240px;
        height: auto;
    }

    .after-md-w-100{
        width: 100% !important;
    }
    .h-30px-24px{
        height: 24px;
    }
    .partner-logo {
        width: 162px;
    }
}

/* Start : css for the input tel */
.phone-input .iti.iti--allow-dropdown {
    width: 100%;
}
.phone-input  .iti--inline-dropdown .iti__dropdown-content {
    box-shadow: unset;
    border-color: #EAEAEA;
}
.phone-input  .iti__search-input{
    padding: 12px;
    border-color: #EAEAEA;
}
.phone-input .iti__search-input:focus-visible{
    border-color: #36008d;
}
.phone-input .iti__country.iti__highlight {
    background-color: #5897fb;
    color: white !important;
}
.phone-input .iti__dial-code{
    color: black;
}
.phone-input  .iti__country.iti__highlight .iti__dial-code{
    color: white !important;
}
/* End : css for the input tel */

/* Start Toaster */
:root {
    --gt-bg-85C3FE: #0083ff;
    --gt-bg-Accent-Rose: #f61841;
    --gt-bg-Accent-Yellow: #ffd500;
}
#toast-container {
    padding: 0 12px;
}
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning {
    background-image: unset !important;
}
.toast-top-center {
    top: 15px !important;
    display: flex !important;
    flex-direction: column;
}
.toast {
    padding: 12px 34px !important;
    overflow: hidden !important;
    border-radius: 0px !important;
    border: 0px !important;
    font-size: 16px;
    font-weight: 600;
}
#toast-container > div {
    width: auto !important;
    opacity: 1;
    box-shadow: unset !important;
}
.toast-message {
    text-align: center !important;
}
.toast-error {
    background-color: var(--gt-bg-Accent-Rose) !important;
}
.toast-error .toast-message {
    color: var(--gt-text-002539) !important;
}
.toast-success {
    background-color: var(--gt-bg-85C3FE) !important;
}
.toast-success .toast-message {
    color: var(--gt-text-002539) !important;
}
.toast-warning {
    background-color: var(--gt-bg-Accent-Yellow) !important;
}
.toast-warning .toast-message {
    color: var(--gt-text-002539) !important;
}
/* End Toaster */