.elementor-12924 .elementor-element.elementor-element-3b6212f5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-7bda645e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12924 .elementor-element.elementor-element-67b5b1d9 .breadcrumb{margin:10px 0px 10px 0px;}.elementor-12924 .elementor-element.elementor-element-770ab337{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:45px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-3a6c3b49{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--border-radius:11px 11px 11px 11px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-3a6c3b49:not(.elementor-motion-effects-element-type-background), .elementor-12924 .elementor-element.elementor-element-3a6c3b49 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}.elementor-12924 .elementor-element.elementor-element-461da24b{--display:flex;--border-radius:10px 10px 10px 10px;--margin-top:0px;--margin-bottom:0px;--margin-left:25px;--margin-right:0px;--padding-top:26px;--padding-bottom:26px;--padding-left:26px;--padding-right:26px;}.elementor-12924 .elementor-element.elementor-element-461da24b:not(.elementor-motion-effects-element-type-background), .elementor-12924 .elementor-element.elementor-element-461da24b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-12924 .elementor-element.elementor-element-abdc918{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-12924 .elementor-element.elementor-element-10d0667f{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:10px 10px 10px 10px;--margin-top:-12px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-10d0667f:not(.elementor-motion-effects-element-type-background), .elementor-12924 .elementor-element.elementor-element-10d0667f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E4B600;}.elementor-12924 .elementor-element.elementor-element-341b31c5{width:var( --container-widget-width, 56% );max-width:56%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 025px 0px 025px;--container-widget-width:56%;--container-widget-flex-grow:0;text-align:center;font-family:"Roboto", Sans-serif;font-size:1.2em;font-weight:500;line-height:1.4em;letter-spacing:0.2px;color:var( --e-global-color-9751488 );}.elementor-12924 .elementor-element.elementor-element-37fab2d9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-221d0533{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-fa5fc95 > .elementor-widget-container{margin:10px 0px 0px 0px;}.elementor-12924 .elementor-element.elementor-element-403ad134{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-39da7043{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-6942920c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12924 .elementor-element.elementor-element-48bebb1c .breadcrumb{margin:10px 0px 10px 0px;}@media(max-width:1024px){.elementor-12924 .elementor-element.elementor-element-67b5b1d9 .breadcrumb{margin:0px 0px 0px 0px;}.elementor-12924 .elementor-element.elementor-element-770ab337{--flex-wrap:wrap;--padding-top:0px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-12924 .elementor-element.elementor-element-3a6c3b49{--padding-top:15px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-12924 .elementor-element.elementor-element-48bebb1c .breadcrumb{margin:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-12924 .elementor-element.elementor-element-10d0667f{--margin-top:30px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;}.elementor-12924 .elementor-element.elementor-element-341b31c5{width:initial;max-width:initial;padding:0px 010px 0px 10px;}.elementor-12924 .elementor-element.elementor-element-341b31c5.elementor-element{--align-self:center;}.elementor-12924 .elementor-element.elementor-element-37fab2d9{--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-12924 .elementor-element.elementor-element-fa5fc95 > .elementor-widget-container{margin:8px 0px 0px 0px;}.elementor-12924 .elementor-element.elementor-element-403ad134{--justify-content:flex-start;}}@media(min-width:768px){.elementor-12924 .elementor-element.elementor-element-7bda645e{--width:100%;}.elementor-12924 .elementor-element.elementor-element-3a6c3b49{--width:25%;}.elementor-12924 .elementor-element.elementor-element-461da24b{--width:90%;}.elementor-12924 .elementor-element.elementor-element-abdc918{--width:75%;}.elementor-12924 .elementor-element.elementor-element-6942920c{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-12924 .elementor-element.elementor-element-3a6c3b49{--width:100%;}.elementor-12924 .elementor-element.elementor-element-abdc918{--width:100%;}}/* Start custom CSS for apus_element_job_search_form, class: .elementor-element-15f62817 */.select2-results__option, .select2-selection__choice{ text-transform:capitalize!important; } #umair_jobs .col-lg-1 { width: 100%!important; } #jobsfilter label,#jobsfilter select, #jobsfilter span{ color:#000000ad!important; font-weight: 600!important; } #jobsfilter .heading-label{ color:#000000!important; font-weight: 600!important; } #jobsfilter .circle-check label:before { border: 1px solid #7070705d; } #jobsfilter .circle-check [type="checkbox"]:checked + label:before { background-color: #dc3545; border-color:#dc3545; background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-461da24b *//* * ============================================================ * SEO INTERACTION — JOB FILTER SIDEBAR / SIMPLE BORDER V1 * * Paste this in the Custom CSS of the element that contains * the complete Jobs filter sidebar. * * It changes ONLY the outer surface. * No fields, checkboxes, selects or filter behavior are changed. * ============================================================ */ .elementor-12924 .elementor-element.elementor-element-461da24b { background: #FFFFFF !important; border: 1.5px solid #17201E !important; border-radius: 20px !important; box-shadow: 0 6px 20px rgba(23, 32, 30, .055) !important; } /* Slightly softer corners/shadow on smaller screens */ @media (max-width: 991px) { .elementor-12924 .elementor-element.elementor-element-461da24b { border-radius: 16px !important; box-shadow: 0 4px 14px rgba(23, 32, 30, .045) !important; } }/* End custom CSS */ /* Start custom CSS for apus_element_job_search_form, class: .elementor-element-6cc5e8aa */.select2-results__option, .select2-selection__choice{ text-transform:capitalize!important; } #umair_jobs .col-lg-1 { width: 100%!important; } #jobsfilter label,#jobsfilter select, #jobsfilter span{ color:#000000ad!important; font-weight: 600!important; } #jobsfilter .heading-label{ color:#000000!important; font-weight: 600!important; } #jobsfilter .circle-check label:before { border: 1px solid #7070705d; } #jobsfilter .circle-check [type="checkbox"]:checked + label:before { background-color: #dc3545; border-color:#dc3545; background-repeat: no-repeat; background-position: 50% 50%; background-size: 10px; }/* End custom CSS */ /* Start custom CSS for apus_element_job_archive_listing_items, class: .elementor-element-207a1736 *//* * ============================================================ * SEO INTERACTION — JOB CARDS / MODERN V2 BRAND * * Replace the CURRENT #uzair_jobs_search Jobs card CSS * with this complete block. * * IMPORTANT: * No desktop card width/height/padding is changed. * Existing mobile sizing rules are preserved. * ============================================================ */ /* ============================================================ JOB CARD ============================================================ */ #uzair_jobs_search .job-item { position: relative !important; border: 1.5px solid rgba(0, 79, 76, .24) !important; border-radius: 15px !important; background: #FFFFFF !important; box-shadow: 0 5px 18px rgba(0, 79, 76, .035); transition: transform .20s ease, border-color .20s ease, box-shadow .20s ease; } @media (hover: hover) and (pointer: fine) { #uzair_jobs_search .job-item:hover { transform: translateY(-2px) !important; border-color: rgba(0, 79, 76, .52) !important; box-shadow: 0 14px 32px rgba(0, 79, 76, .085), 0 3px 9px rgba(0, 79, 76, .025); } } /* ============================================================ TITLE ============================================================ */ #uzair_jobs_search h2 a, #uzair_jobs_search .job-title a { color: #004F4C !important; font-family: inherit !important; font-size: 1em !important; font-weight: 650 !important; line-height: 1.3 !important; text-decoration: none !important; transition: color .18s ease; } @media (hover: hover) and (pointer: fine) { #uzair_jobs_search h2 a:hover, #uzair_jobs_search .job-title a:hover { color: #FF5316 !important; } } /* ============================================================ EMPLOYER ============================================================ */ #uzair_jobs_search .employer-title a { color: #354542 !important; font-family: inherit !important; font-size: .9em !important; font-weight: 550 !important; text-decoration: none !important; } @media (hover: hover) and (pointer: fine) { #uzair_jobs_search .employer-title a:hover { color: #004F4C !important; } } /* ============================================================ META PILLS — SAME SIZE, MORE BRAND COLOR ============================================================ */ #uzair_jobs_search .job-salary, #uzair_jobs_search .category-job a, #uzair_jobs_search .job-type a, #uzair_jobs_search .job-location { padding: 10px 20px !important; border: 1px solid transparent !important; border-radius: 80px !important; font-family: inherit !important; font-weight: 650 !important; } /* SALARY — brand green */ #uzair_jobs_search .job-salary { background: #EAF5F2 !important; border-color: rgba(0, 79, 76, .14) !important; color: #004F4C !important; } /* CATEGORY — coral */ #uzair_jobs_search .category-job a { background: #FFF0E9 !important; border-color: rgba(255, 83, 22, .18) !important; color: #B63B10 !important; } /* JOB TYPE — yellow */ #uzair_jobs_search .job-type a { background: #FFF5CC !important; border-color: rgba(228, 182, 0, .24) !important; color: #735B00 !important; } /* LOCATION — green + yellow brand wash */ #uzair_jobs_search .job-location { background: #F3F5DD !important; border-color: rgba(0, 79, 76, .12) !important; color: #004F4C !important; } #uzair_jobs_search .job-location a { color: #004F4C !important; } /* Remove visual divider remnants between pills */ #uzair_jobs_search .job-item .job-meta li:after, #uzair_jobs_search .job-item .divider, #uzair_jobs_search .job-item .sep { display: none !important; } /* ============================================================ FAVORITE ============================================================ */ #uzair_jobs_search .flaticon-like { color: #FF5316 !important; background-color: #FFF6D9 !important; border-color: rgba(255, 83, 22, .18) !important; transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; } @media (hover: hover) and (pointer: fine) { #uzair_jobs_search .flaticon-like:hover { transform: scale(1.04); color: #FFFFFF !important; background-color: #FF5316 !important; border-color: #FF5316 !important; } } /* ============================================================ THEME / ACTION BUTTONS Keep existing spacing. ============================================================ */ #uzair_jobs_search .btn-theme-rgba10 { margin-top: 16px !important; padding: 12px 28px !important; border: 1px solid #004F4C !important; border-radius: 12px !important; background: #004F4C !important; color: #FFFFFF !important; font-family: inherit !important; font-weight: 700 !important; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease; } @media (hover: hover) and (pointer: fine) { #uzair_jobs_search .btn-theme-rgba10:hover, #uzair_jobs_search .btn-theme-rgba10:focus { transform: translateY(-1px) !important; border-color: #E4B600 !important; background: #E4B600 !important; color: #004F4C !important; } } /* ============================================================ MOBILE Preserve your existing dimensions/layout. ============================================================ */ @media (max-width: 767px) { #uzair_jobs_search .project-item, #uzair_jobs_search .job-item { padding: 18px !important; margin-bottom: 16px !important; } /* Filter + theme buttons — full width */ #uzair_jobs_search .btn-filter, #uzair_jobs_search .filter-toggle, #uzair_jobs_search .btn-theme-rgba10 { margin: 12px 0 20px 0 !important; padding: 10px 20px !important; width: 100% !important; display: block !important; text-align: center !important; } /* JOB PILLS — preserve your current mobile stacking */ #uzair_jobs_search .job-salary, #uzair_jobs_search .category-job, #uzair_jobs_search .job-type, #uzair_jobs_search .job-location { display: block !important; width: fit-content !important; margin: 0 0 10px 0 !important; float: none !important; } #uzair_jobs_search .category-job a, #uzair_jobs_search .job-type a, #uzair_jobs_search .job-location a { display: block !important; width: fit-content !important; } } /* ============================================================ ACCESSIBILITY ============================================================ */ @media (prefers-reduced-motion: reduce) { #uzair_jobs_search .job-item, #uzair_jobs_search .flaticon-like, #uzair_jobs_search .btn-theme-rgba10 { transition: none !important; } #uzair_jobs_search .job-item:hover, #uzair_jobs_search .flaticon-like:hover, #uzair_jobs_search .btn-theme-rgba10:hover { transform: none !important; } } /* * ============================================================ * SEO INTERACTION — JOB PREMIUM BADGES V1.1 — FULL FEATURED WASH * * FEATURED + URGENT visual treatment. * * Add this AFTER the current Jobs card CSS. * * NO PHP REQUIRED: * Freeio already adds article classes: * .is-featured * .is-urgent * * Works in: * #uzair_jobs_search -> Jobs listings * #umairjob-item -> Jobs cards on Home * * Does NOT change card dimensions, paddings or layout structure. * ============================================================ */ /* ============================================================ FEATURED CARD — premium yellow treatment ============================================================ */ #uzair_jobs_search article.is-featured .job-item, #umairjob-item article.is-featured .job-item { border-color: #E4B600 !important; /* Premium yellow wash across the WHOLE card */ background: linear-gradient( 110deg, #FFFDF3 0%, #FFF9DE 52%, #FFF3BF 100% ) !important; box-shadow: 0 8px 24px rgba(228, 182, 0, .10), 0 3px 10px rgba(0, 79, 76, .035) !important; } /* Stronger premium hover, without changing size */ @media (hover: hover) and (pointer: fine) { #uzair_jobs_search article.is-featured .job-item:hover, #umairjob-item article.is-featured .job-item:hover { border-color: #C9A000 !important; background: linear-gradient( 110deg, #FFFBEA 0%, #FFF5CF 52%, #FFEFA9 100% ) !important; box-shadow: 0 14px 34px rgba(228, 182, 0, .16), 0 4px 12px rgba(0, 79, 76, .045) !important; } } /* ============================================================ FEATURED BADGE Transform Freeio's existing green tick into a premium badge. ============================================================ */ #uzair_jobs_search span.featured, #umairjob-item span.featured { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: 25px !important; margin-left: 8px !important; padding: 0 9px !important; border: 1px solid rgba(0, 79, 76, .16) !important; border-radius: 999px !important; background: #E4B600 !important; color: #004F4C !important; font-family: inherit !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .055em !important; white-space: nowrap !important; box-shadow: 0 3px 9px rgba(228, 182, 0, .14) !important; vertical-align: middle !important; } /* Hide Freeio's original tick icon */ #uzair_jobs_search span.featured i, #umairjob-item span.featured i { display: none !important; } /* Replace it with the premium text badge */ #uzair_jobs_search span.featured::before, #umairjob-item span.featured::before { content: "★ FEATURED"; display: block; } /* ============================================================ URGENT CARD — orange treatment ============================================================ */ #uzair_jobs_search article.is-urgent:not(.is-featured) .job-item, #umairjob-item article.is-urgent:not(.is-featured) .job-item { border-color: rgba(255, 83, 22, .62) !important; background: linear-gradient( 110deg, #FFFFFF 0%, #FFFFFF 78%, rgba(255, 83, 22, .055) 100% ) !important; box-shadow: 0 8px 24px rgba(255, 83, 22, .075), 0 3px 10px rgba(0, 79, 76, .025) !important; } @media (hover: hover) and (pointer: fine) { #uzair_jobs_search article.is-urgent:not(.is-featured) .job-item:hover, #umairjob-item article.is-urgent:not(.is-featured) .job-item:hover { border-color: #FF5316 !important; box-shadow: 0 14px 32px rgba(255, 83, 22, .12), 0 4px 12px rgba(0, 79, 76, .035) !important; } } /* ============================================================ URGENT BADGE Freeio already gives the article .is-urgent, even though this list template does not print the Urgent label. ============================================================ */ #uzair_jobs_search article.is-urgent .job-information-right > .d-flex:first-child::after, #umairjob-item article.is-urgent .job-information-right > .d-flex:first-child::after { content: "URGENT"; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 25px !important; margin-left: 8px !important; padding: 0 9px !important; border: 1px solid #FF5316 !important; border-radius: 999px !important; background: #FF5316 !important; color: #FFFFFF !important; font-family: inherit !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .055em !important; white-space: nowrap !important; box-shadow: 0 3px 9px rgba(255, 83, 22, .14) !important; } /* ============================================================ FEATURED + URGENT Yellow premium identity + subtle orange left accent. ============================================================ */ #uzair_jobs_search article.is-featured.is-urgent .job-item, #umairjob-item article.is-featured.is-urgent .job-item { border-color: #E4B600 !important; box-shadow: inset 4px 0 0 #FF5316, 0 9px 26px rgba(228, 182, 0, .12), 0 3px 10px rgba(0, 79, 76, .035) !important; } @media (hover: hover) and (pointer: fine) { #uzair_jobs_search article.is-featured.is-urgent .job-item:hover, #umairjob-item article.is-featured.is-urgent .job-item:hover { box-shadow: inset 4px 0 0 #FF5316, 0 15px 36px rgba(228, 182, 0, .17), 0 4px 12px rgba(0, 79, 76, .04) !important; } } /* ============================================================ MOBILE Only badge scale is reduced slightly. Card dimensions remain untouched. ============================================================ */ @media (max-width: 767px) { #uzair_jobs_search span.featured, #umairjob-item span.featured, #uzair_jobs_search article.is-urgent .job-information-right > .d-flex:first-child::after, #umairjob-item article.is-urgent .job-information-right > .d-flex:first-child::after { height: 22px !important; margin-left: 6px !important; padding: 0 7px !important; font-size: 8px !important; letter-spacing: .04em !important; } } /* ============================================================ ACCESSIBILITY ============================================================ */ @media (prefers-reduced-motion: reduce) { #uzair_jobs_search article.is-featured .job-item, #uzair_jobs_search article.is-urgent .job-item, #umairjob-item article.is-featured .job-item, #umairjob-item article.is-urgent .job-item { transition: none !important; } }/* End custom CSS */