:root {
    /* Color Theme */
    --bs-primary: #41B9EA !important;
    --bs-primary-rgb: 65, 185, 234 !important;
    --bs-secondary: #6c757d !important;
    --bs-success: #198754 !important;
    --bs-info: #0dcaf0 !important;
    --bs-warning: #ffc107 !important;
    --bs-danger: #dc3545 !important;
    --bs-orange: #ff7d33 !important;
    --bs-green: #008B8B !important;
    --bs-sea-green: #44b6ae !important;
    --bs-brown: #754E1A !important;
    --bs-purple: #6e33ff !important;
    --bs-pink: #ff33c1 !important;
    --bs-navyBlue: #406BD1 !important;
    --bs-darkblue: #162535 !important;
    --bs-whatsapp: #25D366 !important;
    --bs-timy: #E77817 !important;
    --bs-zkt: #7AC143 !important;
    --bs-white: #fff !important;
    --bs-wwhite: #fff !important;
    --bs-black: #000 !important;
    --bg-dark: #1e1e1e !important;
    --bs-yellow: #af9d29 !important;
    --bs-cyanblue: #14bcdf !important;
    --bs-bg-light: #ececec !important;
    /* Light Colors */
    --bs-primary-light: #ACD8EB !important;
    --bs-secondary-light: #e2e3e5 !important;
    --bs-success-light: #d1e7dd !important;
    --bs-info-light: #CFF4FC !important;
    --bs-warning-light: #fff3cd !important;
    --bs-danger-light: #f8d7da !important;
    --bs-orange-light: #FFE5D6 !important;
    --bs-green-light: #CCE8E8 !important;
    --bs-sea-green-light: #b4f0ed !important;
    --bs-brown-light: #E3DCD1 !important;
    --bs-purple-light: #E2D6FF !important;
    --bs-pink-light: #FFD6F3 !important;
    --bs-navyBlue-light: #D9E1F6 !important;
    --bs-darkblue-light: #D0D3D7 !important;
    --bs-whatsapp-light: #D3F6E0 !important;
    --bs-timy-light: #FAE4D1 !important;
    --bs-zkt-light: #E4F3D9 !important;
    --bs-dark-light: #ececec !important;
    --bs-yellow-light: #f8ea8f !important;
    --bs-cyanblue-light: #d0f8fd !important;
    /* Others */
    /*    --bs-primary-rgb: 48, 158, 206 !important;*/
    --bs-primary-light: #eaf5fa !important;
    --bs-primary-border-subtle: var(--bs-primary) !important;
    --bs-link-color: var(--bs-dark) !important;
    --bs-link-hover-color: var(--bs-primary) !important;
    --bs-card-height: auto !important;
    --bs-hover-color: #F1F6FF !important;
    --bs-active-color: #F1F6FF !important;
    --bs-deactive-color: #FCEFF0 !important;
    --bs-sub-text-color: #808080 !important;
    --bs-card-color: #808080 !important;
    --bs-text-light: #CFCFCF !important;
    --bs-user-image: #C1E2F0 !important;
    /* Btn Primary */
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
    /* Font Sizes */
    --h1-fsize: 60px;
    --h2-fsize: 54px;
    --h3-fsize: 40px;
    --h4-fsize: 30px;
    --h5-fsize: 24px;
    --h6-fsize: 20px;
    --body-fsize: 16px;
    --caption-fsize: 14px;
    --small-fsize: 12px;
    --tiny-fsize: 10px;
    /* Font weight */
    --heavy-fweight: 700 !important;
    --bold-fweight: 600 !important;
    --medium-fweight: 400 !important;
    --regular-fweight: 300 !important;
    /* Font Family */
    --bs-body-font-family: "Cairo", sans-serif !important;
    /*  Gredient  */
    --bs-grdnt-primary: linear-gradient( -10deg, #162535 0%, #41b9ea 100%);
    --bs-grdnt-primary-light: linear-gradient( -10deg, rgba(22, 37, 53, 0.5) 0%, rgba(65, 185, 234, 0.5) 100%);
}

/* ============================== Basic Settings ============================== */
body {
    font-family: "Cairo", sans-serif !important;
/*    background-color: #f8f8f6;*/
}
@media (min-width: 1080px) {
    .offcanvas.offcanvas-bottom {
        max-width: 80% !important;
        right: 10% !important;
        left: 10% !important;
    }
}

@media (min-width: 1080px) {
    .offcanvas.offcanvas-bottom.small {
        max-width: 40% !important;
        right: 30% !important;
        left: 30% !important;
    }
}

p {
    margin-bottom: 0px !important;
}

.container {
    max-width: 1440px;
}
.fi {
    /*    margin-bottom: 0px !important;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
hr {
    width: 100%;
    border: none;
    border-top: 2px solid rgba(0, 0, 0, 0.175);
    opacity: 1;
    border-radius: 0.375rem;
}
.card {
    border-radius: 1rem;
}
.list-group {
    padding-right: 0;
    padding-left: 0;
}
/* ============================== Normal Bg Color ============================== */
.bg-primary {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
}

.bg-info {
    background-color: var(--bs-info) !important;
    color: var(--bs-white) !important;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
}

.bg-orange {
    background-color: var(--bs-orange) !important;
    color: var(--bs-white) !important;
}

.bg-green {
    background-color: var(--bs-green) !important;
    color: var(--bs-white) !important;
}

.bg-gray {
    background-color: #777 !important;
    color: var(--bs-white) !important;
}

.bg-sea-green {
    background-color: var(--bs-sea-green) !important;
    color: var(--bs-white) !important;
}

.bg-brown {
    background-color: var(--bs-brown) !important;
    color: var(--bs-white) !important;
}

.bg-maroon {
    background-color: #7a0603 !important;
    color: var(--bs-white) !important;
}

.bg-purple {
    background-color: var(--bs-purple) !important;
    color: var(--bs-white) !important;
}

.bg-yellow {
    background-color: var(--bs-yellow) !important;
    color: var(--bs-white) !important;
}

.bg-cyanblue {
    background-color: var(--bs-cyanblue) !important;
    color: var(--bs-white) !important;
}

.bg-pink {
    background-color: var(--bs-pink) !important;
    color: var(--bs-white) !important;
}

.bg-navyBlue {
    background-color: var(--bs-navyBlue) !important;
    color: var(--bs-white) !important;
}

.bg-darkblue {
    background-color: var(--bs-darkblue) !important;
    color: var(--bs-white) !important;
}

.bg-whatsapp {
    background-color: var(--bs-whatsapp) !important;
    color: var(--bs-white) !important;
}

.bg-timy {
    background-color: var(--bs-timy) !important;
    color: var(--bs-white) !important;
}

.bg-zkt {
    background-color: var(--bs-zkt) !important;
    color: var(--bs-white) !important;
}

.bg-dark {
    background-color: var(--bs-dark) !important;
    color: var(--bs-white) !important;
}

.bg-wwhite {
    --bs-bg-opacity: 1;
    background-color: var(--bs-wwhite) !important;
}

.bg-workspace {
    background-color: var(--bs-workspace-color) !important;
    color: #fff;
}

.bg-communication {
    background-color: var(--bs-communication-color) !important;
    color: #fff;
}

.bg-attendance {
    background-color: var(--bs-attendance-color) !important;
    color: #fff;
}

.bg-recruitment {
    background-color: var(--bs-recruitment-color) !important;
    color: #fff;
}

.bg-salary {
    background-color: var(--bs-salary-color) !important;
    color: #fff;
}

.bg-evaluation {
    background-color: var(--bs-evaluation-color) !important;
    color: #fff;
}

.bg-training {
    background-color: var(--bs-training-color) !important;
    color: #fff;
}

.bg-report {
    background-color: var(--bs-report-color) !important;
    color: #fff;
}

.bg-configuration {
    background-color: var(--bs-configuration-color) !important;
    color: #fff;
}

.bg-personnel {
    background-color: var(--bs-personnel-color) !important;
    color: #fff;
}

.bg-support {
    background-color: var(--bs-support-color) !important;
    color: #fff;
}

.bg-active {
    background: var(--bs-active-color);
}

.bg-deactive {
    background: var(--bs-deactive-color);
}

.bg-blur {
    background: rgba(138, 138, 138, 0.4) !important;
    backdrop-filter: blur(5px) !important;
}
.bg-grdnt-primary {
    background: var(--bs-grdnt-primary);
}
.bg-grdnt-primary-light {
    background: var(--bs-grdnt-primary-light);
}

/* ============================== Light Bg Colors ============================== */

.bg-primary-light {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
}

.bg-secondary-light {
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
}

.bg-success-light {
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
}

.bg-info-light {
    background-color: var(--bs-info-light) !important;
    color: #055e70 !important;
}

.bg-warning-light {
    background-color: var(--bs-warning-light) !important;
    color: var(--bs-warning) !important;
}

.bg-danger-light {
    background-color: var(--bs-danger-light) !important;
    color: var(--bs-danger) !important;
}

.bg-orange-light {
    background-color: var(--bs-orange-light) !important;
    color: var(--bs-orange) !important;
}

.bg-green-light {
    background-color: var(--bs-green-light) !important;
    color: var(--bs-green) !important;
}

.bg-brown-light {
    background-color: var(--bs-brown-light) !important;
    color: var(--bs-brown) !important;
}

.bg-sea-green-light {
    background-color: var(--bs-sea-green-light) !important;
    color: var(--bs-sea-green) !important;
}

.bg-maroon-light {
    background-color: #f3d3d2 !important;
    color: #7a0603 !important;
}

.bg-purple-light {
    background-color: var(--bs-purple-light) !important;
    color: var(--bs-purple) !important;
}

.bg-yellow-light {
    background-color: var(--bs-yellow-light) !important;
    color: var(--bs-yellow) !important;
}

.bg-cyanblue-light {
    background-color: var(--bs-cyanblue-light) !important;
    color: var(--bs-cyanblue) !important;
}

.bg-pink-light {
    background-color: var(--bs-pink-light) !important;
    color: var(--bs-pink) !important;
}

.bg-navyBlue-light {
    background-color: var(--bs-navyBlue-light) !important;
    color: var(--bs-navyBlue) !important;
}

.bg-darkblue-light {
    background-color: var(--bs-darkblue-light) !important;
    color: var(--bs-darkblue) !important;
}

.bg-whatsapp-light {
    background-color: var(--bs-whatsapp-light) !important;
    color: var(--bs-whatsapp) !important;
}

.bg-timy-light {
    background-color: var(--bs-timy-light) !important;
    color: var(--bs-timy) !important;
}

.bg-zkt-light {
    background-color: var(--bs-zkt-light) !important;
    color: var(--bs-zkt) !important;
}

.bg-dark-light {
    background-color: var(--bs-dark-light) !important;
    color: var(--bs-dark) !important;
}

.bg-active-color {
    background-color: var(--bs-primary-light) !important;
    /* color: var(--bs-dark) !important; */
}

.custom-hover:hover {
    background-color: var(--bs-hover-color) !important;
    /* color: var(--bs-dark) !important; */
}



.blr-bg-white {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(7px);
}
/* ============================== Normal Button ============================== */
.btn-primary {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-disabled-bg: var(--bs-primary) !important;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-secondary);
}

.btn-success {
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-success);
}

.btn-info {
    background-color: var(--bs-info) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-info);
}

.btn-warning {
    background-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-warning-light) !important;
}

.btn-danger {
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-danger);
}

.btn-orange {
    background-color: var(--bs-orange) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-orange);
}

.btn-green {
    background-color: var(--bs-green) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-green);
}

.btn-brown {
    background-color: var(--bs-brown) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-brown);
}

.btn-purple {
    background-color: var(--bs-purple) !important;
    color: #fff !important;
    border-color: var(--bs-purple);
}

.btn-pink {
    background-color: var(--bs-pink) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-pink);
}

.btn-navyBlue {
    background-color: var(--bs-navyBlue) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-navyBlue);
}

.btn-darkblue {
    background-color: var(--bs-darkblue) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-darkblue);
}

.btn-whatsapp {
    background-color: var(--bs-whatsapp) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-whatsapp);
}

.btn-timy {
    background-color: var(--bs-timy) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-timy);
}

.btn-zkt {
    background-color: var(--bs-zkt) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-zkt);
}

.btn-dark {
    background-color: var(--bs-dark) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-dark);
}

html.dark-only .btn-close {
    --bs-btn-close-color: var(--bs-wwhite) !important;
    background-color: var(--bs-dark) !important;
}

.btn-side-menu {
    background: transparent !important;
    color: var(--bs-darkblue);
    border-color: var(--bs-darkblue);
    border: 0px solid;
    position: relative;
    border-radius: 0 0 50rem 50rem;
}
.btn-side-menu.active {
    background: var(--bs-darkblue) !important;
    color: var(--bs-wwhite);
    border-color: var(--bs-darkblue);
    pointer-events: none;
}
.btn-side-menu * {
    position: relative;
    z-index: 1;
}
.btn-side-menu div {
    z-index: 2 !important;    
}
.btn-side-menu:before {
    content: "";
    background-color: var(--bs-darkblue-light);
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0 !important;
    width: 0%;
    transition: ease 0.5s;
    border-radius: 0 50rem  50rem 0;
}

.btn-side-menu:hover:before {
    width: 100%;
}
/* ============================== light Buttons ============================== */
.btn-primary-light {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary-light);
}

.btn-secondary-light {
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-dark) !important;
    border-color: var(--bs-secondary-light);
}

.btn-success-light {
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
    border-color: var(--bs-success-light);
}

.btn-info-light {
    background-color: var(--bs-info-light) !important;
    color: var(--bs-info) !important;
    border-color: var(--bs-info-light);
}

.btn-warning-light {
    background-color: var(--bs-warning-light) !important;
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning-light);
}

.btn-danger-light {
    background-color: var(--bs-danger-light) !important;
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger-light);
}

.btn-orange-light {
    background-color: var(--bs-orange-light) !important;
    color: var(--bs-orange) !important;
    border-color: var(--bs-orange-light);
}

.btn-green-light {
    background-color: var(--bs-green-light) !important;
    color: var(--bs-green) !important;
    border-color: var(--bs-green-light);
}

.btn-brown-light {
    background-color: var(--bs-brown-light) !important;
    color: var(--bs-brown) !important;
    border-color: var(--bs-brown-light);
}

.btn-purple-light {
    background-color: var(--bs-purple-light) !important;
    color: var(--bs-purple) !important;
    border-color: var(--bs-purple-light);
}

.btn-pink-light {
    background-color: var(--bs-pink-light) !important;
    color: var(--bs-pink) !important;
    border-color: var(--bs-pink-light);
}

.btn-navyBlue-light {
    background-color: var(--bs-navyBlue-light) !important;
    color: var(--bs-navyBlue) !important;
    border-color: var(--bs-navyBlue-light);
}

.btn-darkblue-light {
    background-color: var(--bs-darkblue-light) !important;
    color: var(--bs-darkblue) !important;
    border-color: var(--bs-darkblue-light);
}

.btn-whatsapp-light {
    background-color: var(--bs-whatsapp-light) !important;
    color: var(--bs-whatsapp) !important;
    border-color: var(--bs-whatsapp-light);
}

.btn-timy-light {
    background-color: var(--bs-timy-light) !important;
    color: var(--bs-timy) !important;
    border-color: var(--bs-timy-light);
}

.btn-zkt-light {
    background-color: var(--bs-zkt-light) !important;
    color: var(--bs-zkt) !important;
    border-color: var(--bs-zkt-light);
}

.btn-dark-light {
    background-color: var(--bs-dark-light) !important;
    color: var(--bs-dark) !important;
    border-color: var(--bs-dark-light);
}
/* ============================== Normal Button:Hover ============================== */
.btn-primary:hover {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary-light) !important;
}

.btn-secondary:hover {
    background-color: var(--bs-secondary-light) !important;
    color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary-light);
}

.btn-success:hover {
    background-color: var(--bs-success-light) !important;
    color: var(--bs-success) !important;
    border-color: var(--bs-success-light);
}

.btn-info:hover {
    background-color: var(--bs-info-light) !important;
    color: var(--bs-info) !important;
    border-color: var(--bs-info-light);
}

.btn-warning:hover {
    background-color: var(--bs-warning-light) !important;
    color: var(--bs-warning) !important;
    border-color: #aa8928;
}

.btn-danger:hover {
    background-color: var(--bs-danger-light) !important;
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger-light);
}

.btn-orange:hover {
    background-color: var(--bs-orange-light) !important;
    color: var(--bs-orange) !important;
    border-color: var(--bs-orange-light);
}

.btn-green:hover {
    background-color: var(--bs-green-light) !important;
    color: var(--bs-green) !important;
    border-color: var(--bs-green-light);
}

.btn-brown:hover {
    background-color: var(--bs-brown-light) !important;
    color: var(--bs-brown) !important;
    border-color: var(--bs-brown-light);
}

.btn-purple:hover {
    background-color: var(--bs-purple-light) !important;
    color: var(--bs-purple) !important;
    border-color: var(--bs-purple-light);
}

.btn-pink:hover {
    background-color: var(--bs-pink-light) !important;
    color: var(--bs-pink) !important;
    border-color: var(--bs-pink-light);
}

.btn-navyBlue:hover {
    background-color: var(--bs-navyBlue-light) !important;
    color: var(--bs-navyBlue) !important;
    border-color: var(--bs-navyBlue-light);
}

.btn-darkblue:hover {
    background-color: var(--bs-darkblue-light) !important;
    color: var(--bs-darkblue) !important;
    border-color: var(--bs-darkblue-light);
}

.btn-whatsapp:hover {
    background-color: var(--bs-whatsapp-light) !important;
    color: var(--bs-whatsapp) !important;
    border-color: var(--bs-whatsapp-light);
}

.btn-timy:hover {
    background-color: var(--bs-timy-light) !important;
    color: var(--bs-timy) !important;
    border-color: var(--bs-timy-light);
}

.btn-zkt:hover {
    background-color: var(--bs-zkt-light) !important;
    color: var(--bs-zkt) !important;
    border-color: var(--bs-zkt-light);
}

.btn-dark:hover {
    background-color: var(--bs-dark-light) !important;
    color: var(--bs-dark) !important;
    border-color: var(--bs-dark-light);
}

.btn-selected-delete {
    background-color: transparent !important;
    color: var(--bs-danger);
}

.btn-select-all {
    background-color: transparent !important;
    color: var(--bs-primary);
}
.btn-transparent {
    border: 1px solid var(--bs-secondary-light);

}
.btn-transparent:hover, .btn-transparent:active, .btn-transparent:focus-visible, .btn-transparent.show {
    background-color: var(--bs-secondary-light) !important;
    border: 1px solid var(--bs-secondary-light);
}
.btn-transparent.dropdown-toggle::after {
    content: "";
    display: none;
}

.floating-button {
    transition: all ease 1s !important;
}

    .floating-button:hover {
        margin-right: 0px !important;
    }


.ellapse-btn {
    /*  display: flex !important;*/
    align-items: center !important;
    gap: .5rem !important;
    overflow: hidden;
    padding: .25rem !important;
    position: relative;
}

.ellapse-btn-icon {
    margin: .25rem !important;
}

.ellapse-btn-text {
    position: absolute;
    margin-right: -100px;
    opacity: 0;
    transform: translateX(120px);
    transition: all ease 1s;
    visibility: hidden;
}

.ellapse-btn:hover .ellapse-btn-text {
    position: relative;
    margin-right: 8px;
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

.btn-tab-pill {
    background-color: transparent;
    color: var(--bs-darkblue);
    border-radius: 5000px;
    border-color: transparent;
}
.btn-tab-pill.active, .btn-tab-pill:hover, .btn-tab-pill:focus-visible, .btn-tab-pill:first-child:active, .btn-tab-pill:not(.btn-check) + .btn-tab-pill:active {
    background-color: var(--bs-darkblue);
    color: var(--bs-wwhite);
    border-color: var(--bs-darkblue);
}

/* ============================== Light Button:Hover ============================== */
.btn-primary-light:hover {
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-primary);
}

.btn-secondary-light:hover {
    background-color: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-secondary);
}

.btn-success-light:hover {
    background-color: var(--bs-success) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-success);
}

.btn-info-light:hover {
    background-color: var(--bs-info) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-info);
}

.btn-warning-light:hover {
    background-color: var(--bs-warning) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-warning);
}

.btn-danger-light:hover {
    background-color: var(--bs-danger) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-danger);
}

.btn-orange-light:hover {
    background-color: var(--bs-orange) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-orange);
}

.btn-green-light:hover {
    background-color: var(--bs-green) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-green);
}

.btn-brown-light:hover {
    background-color: var(--bs-brown) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-brown);
}

.btn-purple-light:hover {
    background-color: var(--bs-purple) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-purple);
}

.btn-pink-light:hover {
    background-color: var(--bs-pink) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-pink);
}

.btn-navyBlue-light:hover {
    background-color: var(--bs-navyBlue) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-navyBlue);
}

.btn-darkblue-light:hover {
    background-color: var(--bs-darkblue) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-darkblue);
}

.btn-whatsapp-light:hover {
    background-color: var(--bs-whatsapp) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-whatsapp);
}

.btn-timy-light:hover {
    background-color: var(--bs-timy) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-timy);
}

.btn-zkt-light:hover {
    background-color: var(--bs-zkt) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-zkt);
}

.btn-dark-light:hover {
    background-color: var(--bs-dark) !important;
    color: var(--bs-white) !important;
    border-color: var(--bs-dark);
}

/* ============================== Animated Button ============================== */
.ai-select {
    background-color: rgba(255,255,255,0.5);
    border-radius: 50rem;
}
.ai-input:focus-visible {
      border: 0;
      outline: 0;
}
.ai-input {
    border: 0;
    border-radius: 50rem;
    background: transparent !important;
    width: 100%;
    margin-bottom: 10px;
}
.ai-btn {
    text-align: center;
    color: rgba(255,255,255,0.9);
    background: linear-gradient(-45deg, #2979FF, #7B2CFF, #00E5FF, #FF4081);
    background-size: 600%;
    -webkit-animation: anime 16s linear infinite;
    animation: anime 16s linear infinite;
    font-weight: var(--bold-fweight);
    border: 0 !important;
    /*    outline: 2px solid rgba(22, 37, 53, .5);*/
    padding: 8px;
    overflow: hidden;
}
.ai-btn .ai-btn-text {
    margin-right: -90px;
    font-size: 10px;
    transition: ease 1s;
}
.ai-btn:hover .ai-btn-text {
    margin-right: 0px;
/*    font-size: 10px;*/
}

@-webkit-keyframes anime {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes anime {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ============================== Outline Button ============================== */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-primary) !important;
    --bs-btn-hover-border-color: var(--bs-primary) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-primary) !important;
    --bs-btn-active-border-color: var(--bs-primary) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary) !important;
    --bs-gradient: none;
}

.btn-outline-orange {
    --bs-btn-color: var(--bs-orange) !important;
    --bs-btn-border-color: var(--bs-orange) !important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-orange) !important;
    --bs-btn-hover-border-color: var(--bs-orange) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-orange) !important;
    --bs-btn-active-border-color: var(--bs-orange) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-orange) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-orange) !important;
    --bs-gradient: none;
}

.btn-outline-green {
    --bs-btn-color: var(--bs-green) !important;
    --bs-btn-border-color: var(--bs-green) !important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-green) !important;
    --bs-btn-hover-border-color: var(--bs-green) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-green) !important;
    --bs-btn-active-border-color: var(--bs-green) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-green) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-green) !important;
    --bs-gradient: none;
}

.btn-outline-brown {
    --bs-btn-color: var(--bs-brown) !important;
    --bs-btn-border-color: var(--bs-brown) !important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-brown) !important;
    --bs-btn-hover-border-color: var(--bs-brown) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-brown) !important;
    --bs-btn-active-border-color: var(--bs-brown) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-brown) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-brown) !important;
    --bs-gradient: none;
}

.btn-outline-purple {
    --bs-btn-color: var(--bs-purple) !important;
    --bs-btn-border-color: var(--bs-purple) !important;
    --bs-btn-hover-color: var(--bs-purple) !important;
    --bs-btn-hover-bg: var(--bs-purple) !important;
    --bs-btn-hover-border-color: var(--bs-purple) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-purple) !important;
    --bs-btn-active-border-color: var(--bs-purple) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-purple) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-purple) !important;
    --bs-gradient: none;
}

.btn-outline-pink {
    --bs-btn-color: var(--bs-pink) !important;
    --bs-btn-border-color: var(--bs-pink) !important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-pink) !important;
    --bs-btn-hover-border-color: var(--bs-pink) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-pink) !important;
    --bs-btn-active-border-color: var(--bs-pink) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-pink) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-pink) !important;
    --bs-gradient: none;
}

.btn-outline-navyBlue {
    --bs-btn-color: var(--bs-navyBlue) !important;
    --bs-btn-border-color: var(--bs-navyBlue) !important;
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-navyBlue) !important;
    --bs-btn-hover-border-color: var(--bs-navyBlue) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-navyBlue) !important;
    --bs-btn-active-border-color: var(--bs-navyBlue) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-navyBlue) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-navyBlue) !important;
    --bs-gradient: none;
}

button.border-dashed-primary {
    border: 1px dashed var(--bs-primary) !important;
}

/* ============================== Font Style ============================== */

/* Font Sizes */
.f-10 {
    font-size: 10px;
}

.f-12 {
    font-size: 12px;
}

.f-14 {
    font-size: 14px;
}

.f-16 {
    font-size: 16px;
}

.f-18 {
    font-size: 18px;
}

.f-20 {
    font-size: 20px;
}

.f-22 {
    font-size: 22px;
}

.f-24 {
    font-size: 24px;
}

.f-26 {
    font-size: 26px;
}

.f-28 {
    font-size: 28px;
}

.f-30 {
    font-size: 30px;
}

.f-32 {
    font-size: 32px;
}

.f-34 {
    font-size: 34px;
}

.f-36 {
    font-size: 36px;
}

.f-38 {
    font-size: 38px;
}

.f-40 {
    font-size: 40px;
}

.f-42 {
    font-size: 42px;
}

.f-44 {
    font-size: 44px;
}

.f-46 {
    font-size: 46px;
}

.f-48 {
    font-size: 48px;
}

.f-50 {
    font-size: 50px;
}

.f-52 {
    font-size: 52px;
}

.f-54 {
    font-size: 54px;
}

.f-56 {
    font-size: 56px;
}

.f-58 {
    font-size: 58px;
}

.f-60 {
    font-size: 60px;
}

.f-62 {
    font-size: 62px;
}

.f-64 {
    font-size: 64px;
}

.f-66 {
    font-size: 66px;
}

.f-68 {
    font-size: 68px;
}

.f-70 {
    font-size: 70px;
}

.f-72 {
    font-size: 72px;
}

.f-74 {
    font-size: 74px;
}

.f-76 {
    font-size: 76px;
}

.f-78 {
    font-size: 78px;
}

.f-80 {
    font-size: 80px;
}

.f-82 {
    font-size: 82px;
}

.f-84 {
    font-size: 84px;
}

.f-86 {
    font-size: 86px;
}

.f-88 {
    font-size: 88px;
}

.f-90 {
    font-size: 90px;
}

.f-92 {
    font-size: 92px;
}

.f-94 {
    font-size: 94px;
}

.f-96 {
    font-size: 96px;
}

.f-98 {
    font-size: 98px;
}

.f-100 {
    font-size: 100px;
}

/* Heading 1 */
.h1-heavy {
    font-size: var(--h1-fsize);
    font-weight: var(--heavy-fweight);
}

.h1-bold {
    font-size: var(--h1-fsize);
    font-weight: var(--bold-fweight);
}

.h1-medium {
    font-size: var(--h1-fsize);
    font-weight: var(--medium-fweight);
}

.h1-regular {
    font-size: var(--h1-fsize);
    font-weight: var(--regular-fweight);
}

/* Heading 2 */
.h2-heavy {
    font-size: var(--h2-fsize);
    font-weight: var(--heavy-fweight);
}

.h2-bold {
    font-size: var(--h2-fsize);
    font-weight: var(--bold-fweight);
}

.h2-medium {
    font-size: var(--h2-fsize);
    font-weight: var(--medium-fweight);
}

.h2-regular {
    font-size: var(--h2-fsize);
    font-weight: var(--regular-fweight);
}

/* Heading 3 */
.h3-heavy {
    font-size: var(--h3-fsize);
    font-weight: var(--heavy-fweight);
}

.h3-bold {
    font-size: var(--h3-fsize);
    font-weight: var(--bold-fweight);
}

.h3-medium {
    font-size: var(--h3-fsize);
    font-weight: var(--medium-fweight);
}

.h3-regular {
    font-size: var(--h3-fsize);
    font-weight: var(--regular-fweight);
}

/* Heading 4 */
.h4-heavy {
    font-size: var(--h4-fsize);
    font-weight: var(--heavy-fweight);
}

.h4-bold {
    font-size: var(--h4-fsize);
    font-weight: var(--bold-fweight);
}

.h4-medium {
    font-size: var(--h4-fsize);
    font-weight: var(--medium-fweight);
}

.h4-regular {
    font-size: var(--h4-fsize);
    font-weight: var(--regular-fweight);
}

/* Heading 5 */
.h5-heavy {
    font-size: var(--h5-fsize);
    font-weight: var(--heavy-fweight);
}

.h5-bold {
    font-size: var(--h5-fsize);
    font-weight: var(--bold-fweight);
}

.h5-medium {
    font-size: var(--h5-fsize);
    font-weight: var(--medium-fweight);
}

.h5-regular {
    font-size: var(--h5-fsize);
    font-weight: var(--regular-fweight);
}

/* Heading 6 */
.h6-heavy {
    font-size: var(--h6-fsize);
    font-weight: var(--heavy-fweight);
}

.h6-bold {
    font-size: var(--h6-fsize);
    font-weight: var(--bold-fweight);
}

.h6-medium {
    font-size: var(--h6-fsize);
    font-weight: var(--medium-fweight);
}

.h6-regular {
    font-size: var(--h6-fsize);
    font-weight: var(--regular-fweight);
}

/* body */
.body-text-heavy {
    font-size: var(--body-fsize);
    font-weight: var(--heavy-fweight);
}

.body-text-bold {
    font-size: var(--body-fsize);
    font-weight: var(--bold-fweight);
}

.body-text-medium {
    font-size: var(--body-fsize);
    font-weight: var(--medium-fweight);
}

.body-text-regular {
    font-size: var(--body-fsize);
    font-weight: var(--regular-fweight);
}

/* Caption */
.caption-text-heavy {
    font-size: var(--caption-fsize);
    font-weight: var(--heavy-fweight);
}

.caption-text-bold {
    font-size: var(--caption-fsize);
    font-weight: var(--bold-fweight);
}

.caption-text-medium {
    font-size: var(--caption-fsize);
    font-weight: var(--medium-fweight);
}

.caption-text-regular {
    font-size: var(--caption-fsize);
    font-weight: var(--regular-fweight);
}

/* Small */
.small-text-heavy {
    font-size: var(--small-fsize);
    font-weight: var(--heavy-fweight);
}

.small-text-bold {
    font-size: var(--small-fsize);
    font-weight: var(--bold-fweight);
}

.small-text-medium {
    font-size: var(--small-fsize);
    font-weight: var(--medium-fweight);
}

.small-text-regular {
    font-size: var(--small-fsize);
    font-weight: var(--regular-fweight);
}

/* Tiny */
.tiny-text-heavy {
    font-size: var(--tiny-fsize);
    font-weight: var(--heavy-fweight);
}

.tiny-text-bold {
    font-size: var(--tiny-fsize);
    font-weight: var(--bold-fweight);
}

.tiny-text-medium {
    font-size: var(--tiny-fsize);
    font-weight: var(--medium-fweight);
}

.tiny-text-regular {
    font-size: var(--tiny-fsize);
    font-weight: var(--regular-fweight);
}

/* text truncate after 2 lines */
.truncate-after-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Show only two lines */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================== Link Animation ============================== */
.custom-link {
    position: relative !important;
    border-radius: 0px !important;
    text-decoration: none;
    color: var(--text-dark);
}

.custom-link.active {
    border-radius: 0px !important;
}

.custom-link.active:before, .custom-link:hover:before {
    position: absolute;
    content: "";
    left: 0%;
    bottom: 0%;
    height: 4px;
    width: 100%;
    top: 36px !important;
    border-radius: 0.375rem 0.375rem 0rem 0rem !important;
    z-index: 0;
    background: var(--bs-primary);
}

.custom-link:before {
    position: absolute;
    content: "";
    left: 50%;
    bottom: 0%;
    height: 4px;
    width: 0%;
    top: 36px !important;
    border-radius: 0.375rem 0.375rem 0rem 0rem !important;
    z-index: 2;
    background: var(--bs-primary);
    transition: all ease .5s;
}



.placeholder {
    /* display: flex; */
    border-radius: 6px;
    animation: opacityy 3s infinite; /* Background color changes every 5 seconds */
}
/* Define the keyframes for background color change */
@keyframes opacityy {
    0% {
        opacity: 0.1;
    }

    25% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.1;
    }

    75% {
        opacity: 0.2;
    }

    100% {
        opacity: 0.1;
    }
}
.placeholder-input {
    /* display: flex; */
    border-radius: 6px;
    animation: opacityInput ease 2s infinite; /* Background color changes every 5 seconds */
/*    pointer-events: none;*/
    cursor: wait !important;
    background: var(--bs-secondary) !important;
}
/* Define the keyframes for background color change */
@keyframes opacityInput {
    0% {
        opacity: 0.1;
    }

    25% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.3;
    }

    75% {
        opacity: 0.2;
    }

    100% {
        opacity: 0.1;
    }
}
/* ============================== Card Style ============================== */

a {
    text-decoration: none !important;
}
a .pill-link {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    font-size: var(--caption-fsize);
    font-weight: var(--regular-fweight);
    padding: 6px 12px;
}
a:hover .pill-link, a:hover .pill-link-inner{
/*    background-color: var(--bs-primary-light);*/
    border-color: var(--bs-primary);
}
/* Card content */
a .pill-link .pill-link-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 1px;
    border-radius: .375rem;
}
.pill-link {
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
}

.pill-link.show {
    opacity: 1;
    transform: translateY(0);
}
.filterCheck {
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
}

.filterCheck.showing {
    opacity: 1;
    transform: translateY(0);
}
.card-animate {
    opacity: 0;
    transform: translateY(5px);
    transition: all 0.2s ease;
}

.card-animate.showing {
    opacity: 1;
    transform: translateY(0);
}
/* Animated border */
a:hover .pill-link::before {
    content: "";
    display: block;
    background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 0%, rgba(65, 185, 234, 0.75) 50%, rgba(255, 255, 255, 1) 100% );
    height: 300px;
    width: 100px;
    border-radius: 500px;
    transform: translate(0);
    position: absolute;
    animation: rotate 5s linear forwards infinite;
    z-index: 0;
    top: 50%;
    transform-origin: top center;
}

/* Inner mask to create border effect */
a .pill-link::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #fff;
    z-index: 1;
}
@keyframes rotate {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

/* ============================== Enterance Animation ============================== */

.slide-in-fwd-center {
    -webkit-animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-fwd-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-fwd-bottom {
    0% {
        -webkit-transform: translateZ(-1400px) translateY(800px);
        transform: translateZ(-1400px) translateY(800px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-fwd-bottom {
    0% {
        -webkit-transform: translateZ(-1400px) translateY(800px);
        transform: translateZ(-1400px) translateY(800px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateZ(0) translateY(0);
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

/* ============================== Custom Hover ============================== */
.custom-hover:hover {
    background-color: var(--bs-hover-color) !important;
}    
/* ============================== Search Box ============================== */
    .search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    /* align-items: center; */
}

    .search-box input,
    .search-box select {
        padding: 10px;
        border: none;
        outline: none;
        flex: 1;
    }

    .search-box select {
        border: 1px solid #dee2e6;
        /* border-radius: 0px !important; */
    }

/* ============================== Job Listing ============================== */


.quick-tag {
    display: inline-block;
    font-size: var(--small-fsize);
    font-weight: var(--bold-fweight);
    color: var(--bs-sub-text-color);
    background: #f8f8f6;
    border: 1px solid #dee2e6;
    border-radius: 99px;
    padding: 3px 12px;
    transition: all .15s;
}

    .quick-tag:hover {
        color: var(--bs-primary);
        border-color: var(--bs-primary);
        background: var(--bs-primary-light);
    }

/* Sidebar filter card */
.filter-sidebar {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    overflow: hidden;
    position: sticky;
    top: 76px;
}

    .filter-sidebar .sidebar-hd {
        padding: 14px 18px;
        border-bottom: 1px solid #dee2e6;
    }

.filter-group {
    padding: 14px 18px;
    border-bottom: 1px solid #dee2e6;
}

    .filter-group:last-child {
        border-bottom: none;
    }

.filter-group-label {
    font-size: var(--tiny-fsize);
    font-weight: var(--heavy-fweight);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bs-sub-text-color);
    margin-bottom: 10px;
}

.filter-count {
    font-size: var(--tiny-fsize);
    color: var(--bs-sub-text-color);
    background: #f8f8f6;
    padding: 1px 8px;
    border-radius: 99px;
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-label {
    font-size: var(--caption-fsize);
    cursor: pointer;
    font-family: "Cairo", sans-serif;
}

.form-range::-webkit-slider-thumb {
    background: var(--bs-primary);
}

.form-range::-moz-range-thumb {
    background: var(--bs-primary);
}

/* Sort select */
.form-select {
    font-family: "Cairo", sans-serif;
    font-size: var(--caption-fsize);
    border-color: #dee2e6;
}

    .form-select:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px var(--bs-primary-light);
    }

/* View toggle buttons */
.btn-view {
    padding: 6px 11px;
    background: transparent;
    border: 1px solid #dee2e6;
    color: var(--bs-sub-text-color);
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

    .btn-view:first-child {
        border-radius: 6px 0 0 6px;
    }

    .btn-view:last-child {
        border-radius: 0 6px 6px 0;
        border-left: none;
    }

    .btn-view.active {
        background: var(--bs-darkblue);
        color: #fff;
        border-color: var(--bs-darkblue);
    }

    .btn-view i {
        font-size: 15px;
    }

/* Active filter chips */
.active-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 12px;
    background: var(--bs-primary-light);
    color: var(--bs-primary);
    border-radius: 99px;
    font-size: var(--small-fsize);
    font-weight: var(--bold-fweight);
}

.chip-remove {
    background: none;
    border: none;
    color: var(--bs-primary);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
}

/* Company logo circle */
.company-logo {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--heavy-fweight);
    font-size: 15px;
    color: #fff;
    flex-shrink: 0;
}

/* Job card */
.job-card {
    background: #fff;
    border: 1px solid #dee2e6 !important;
    border-radius: 1rem !important;
    padding: 20px;
    text-decoration: none !important;
    color: inherit;
    display: block;
    transition: border-color .2s, box-shadow .2s, transform .18s;
    position: relative;
    animation: cardIn .35s ease both;
}

@keyframes cardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.job-card:nth-child(1) {
    animation-delay: .04s
}

.job-card:nth-child(2) {
    animation-delay: .08s
}

.job-card:nth-child(3) {
    animation-delay: .12s
}

.job-card:nth-child(4) {
    animation-delay: .16s
}

.job-card:nth-child(5) {
    animation-delay: .20s
}

.job-card:nth-child(6) {
    animation-delay: .24s
}

.job-card:nth-child(7) {
    animation-delay: .28s
}

.job-card:hover {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px var(--bs-primary-light) !important;
    transform: translateY(-2px);
    color: inherit;
}

.job-card.featured {
    border-color: var(--bs-primary) !important;
}

/* Featured badge */
.featured-badge {
    position: absolute;
    top: -1px;
    right: 20px;
    background: var(--bs-secondary);
    color: #fff;
    font-size: var(--tiny-fsize);
    font-weight: var(--heavy-fweight);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 12px;
    border-radius: 0 0 8px 8px;
}
.job-grid.col-12 .job-card-footer {
    display: flex;
    align-items: center;
    justify-content: end;
}
.job-grid.col-xl-4.col-lg-6 .job-card-footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: end;
    flex-grow: 1;
}
.job-grid.col-xl-4.col-lg-6 .job-card-footer button{
    width: 100%;
    justify-content: center;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Grid View Css xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.gridContainer {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: masonry;
}

.gridItem {
    margin-bottom: 0 !important;
    display: grid;
    grid-template-rows: 1fr auto;
    margin-bottom: 10px;
    break-inside: avoid;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Dialog xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
dialog {
    padding: 20px;
    border: none;
    border-radius: 1rem;
    width: 50%;
    max-width: 100%;
    background-color: var(--bs-wwhite) !important;
}

    dialog::backdrop {
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(5px);
    }

.stop-scroll {
    height: 100vh;
    overflow-y: hidden;
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Offcanvs CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/* .offcanvas.offcanvas-start{
    right: 0px !important;
    left: auto !important;
    transform: translateX(100%) ;
  }     */
.offcanvas-backdrop {
    background-color: #ffffff17 !important;
    backdrop-filter: blur(4px);
    opacity: 1 !important;
}

.offcanvas.offcanvas-bottom {
    border-top: 0px !important;
    background-color: var(--bs-wwhite) !important;
    box-shadow: -4px 0px 33px 0px #00000034;
}

.bottom-canvas {
    min-height: 94vh;
    border-radius: 30px 30px 0px 0px;
}

.offcanvas-header .btn-close {
    margin: unset !important;
}

.bottom-canvas-footer {
    position: fixed;
    bottom: 0;
    width: 100% !important;
}

.bottom-canvas-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.bottom-canvas-footer {
    border-top: 1px solid var(--bs-border-color);
}

.end-canvas {
    min-width: 30%;
    border-radius: 30px 0px 0px 30px;
}

.end-canvas-footer {
    position: fixed;
    bottom: 0;
    width: 100% !important;
}

.end-canvas-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.end-canvas-footer {
    border-top: 1px solid var(--bs-border-color);
}

/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Symbol  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
.riyal-symbol {
    height: 16px;
    width: 16px;
    margin-bottom: 0px;
}

.riyal-symbol-sm {
    height: 14px;
    width: 14px;
    margin-bottom: 2px;
}

/* Card Hover */
a .card {
    transition: ease .5s;
}
a:hover .card {
    border-color: transparent;
    box-shadow: var(--bs-box-shadow) !important;
}
a:hover .card .title {
    color: var(--bs-primary);
}
/* Font Color */
.text-green {
    color: var(--bs-green) !important;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.text-navyBlue {
    color: var(--bs-navyBlue) !important;
}
.text-darkblue {
    color: var(--bs-darkblue) !important;
}

.text-pink {
    color: var(--bs-pink) !important;
}

.sub-text-light {
    color: var(--bs-text-light) !important;
}


/* Contact us Page */
/* Input group icon */
.input-icon-wrap {
    position: relative;
}

    .input-icon-wrap .form-control {
        padding-left: 40px;
    }

    .input-icon-wrap .input-icon {
        position: absolute;
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
        color: var(--bs-text-light);
        font-size: .95rem;
        pointer-events: none;
    }

/* Success state */
.form-success {
    display: none;
    text-align: center;
    padding: 40px 20px;
}

.success-circle {
    width: 72px;
    height: 72px;
    background: var(--bs-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--bs-primary);
    margin: 0 auto 16px;
}

/* Topic select pills */
.topic-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-pill {
    font-family: "Cairo", sans-serif;
    font-size: var(--small-fsize);
    font-weight: var(--bold-fweight);
    color: var(--bs-sub-text-color);
    background: #f8f8f6;
    border: 1px solid #dee2e6;
    border-radius: 99px;
    padding: 5px 14px;
    cursor: pointer;
    transition: all .15s;
}

.topic-pill:hover, .topic-pill.active {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
    background: var(--bs-primary-light);
}

/* Social button */
.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bs-primary-light);
    color: var(--bs-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background .2s, color .2s;
    border: none;
    cursor: pointer;
}

    .social-btn:hover {
        background: var(--bs-primary);
        color: #fff;
    }


/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Custom Scroll Bar  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.scrollable {
    /* height: 320px !important;  */
    overflow-y: scroll;
}

    .scrollable::-webkit-scrollbar {
        width: 4px; /* Width of the vertical scrollbar */
        height: 4px; /* Height of the horizontal scrollbar */
    }

    .scrollable::-webkit-scrollbar-track {
        background: var(--bs-primary-light); /* Light gray background */
        border-radius: 0.375rem; /* Rounded corners for track */
    }

    .scrollable::-webkit-scrollbar-thumb {
        background: var(--bs-primary); /* Dark gray color */
        border-radius: 0.375rem; /* Rounded corners for thumb */
        transition: all ease 5s;
    }

        .scrollable::-webkit-scrollbar-thumb:hover {
            background: var(--bs-secondary); /* Darker gray when hovered */
        }

    .scrollable::-webkit-scrollbar-corner {
        background: #f1f1f1;
    }
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Custom Scroll Bar  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.scrollable-sm {
    /* height: 320px !important;  */
    overflow-y: scroll;
}

    .scrollable-sm::-webkit-scrollbar {
        width: 1px; /* Width of the vertical scrollbar */
        height: 1px; /* Height of the horizontal scrollbar */
    }

    .scrollable-sm::-webkit-scrollbar-track {
        background: var(--bs-primary-light); /* Light gray background */
        border-radius: 0.375rem; /* Rounded corners for track */
    }

    .scrollable-sm::-webkit-scrollbar-thumb {
        background: var(--bs-primary); /* Dark gray color */
        border-radius: 0.375rem; /* Rounded corners for thumb */
        transition: all ease 5s;
    }

        .scrollable-sm::-webkit-scrollbar-thumb:hover {
            background: var(--bs-secondary); /* Darker gray when hovered */
        }

    .scrollable-sm::-webkit-scrollbar-corner {
        background: #f1f1f1;
    }


/* otp input design */


.otp-inputs {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 25px;
}

.otp-input {
    width: 60px;
    height: 60px;
    font-size: 22px;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    outline: none;
    transition: 0.2s;
}

.otp-input:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 3px rgba(13,110,253,0.15);
}
/*xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Rating Input CSS xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/

.rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    display: inline-flex;
}

.rating > input {
    display: none;
}

.rating > label {
    font-size: 2rem;
    color: #ccc;
    cursor: pointer;
    padding: 0 2px;
}

/* hover effect */
.rating > label:hover,
.rating > label:hover ~ label {
    color: #f5c518 !important;
}

/* selected */
.rating > input:checked + label,
.rating > input:checked + label ~ label {
    color: #f5c518 !important;
}
.rating > input:checked ~ label {
    color: #f5c518 !important;
}


/*Input Shimer*/
.shimmer {
    position: relative;
    overflow: hidden;
    background-color: #e9ecef !important;
    color: transparent !important;
    pointer-events: none;
}

    .shimmer::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        height: 100%;
        width: 150%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.6), transparent );
        animation: shimmer 1.2s infinite;
    }

@keyframes shimmer {
    100% {
        left: 100%;
    }
}


/* Bottom Nav */
.bottom-nav {
    display: none;
}