/* Theme Name: Hello Elementor Child Theme URI: https://github.com/elementor/hello-theme-child/ Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team Author: Elementor Team Author URI: https://elementor.com/ Template: hello-elementor Version: 2.0.0 Text Domain: hello-elementor-child License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready */ /* Add your custom styles here */ .elementor-kit-11 { --e-global-color-primary: #ffffff !important; --e-global-color-secondary: #B8C7D9 !important; --e-global-color-text: #D5DFEA !important; --e-global-color-accent: #2187F5 !important; --e-global-color-d5efdc6: #002060 !important; --e-global-color-5046f92: #2187F5 !important; --e-global-color-a4982e1: #47C0FF !important; --e-global-color-fe452c7: #66BFFF !important; --e-global-color-9938a3b: #A9D9FF !important; --e-global-color-e8bc4af: #EAF6FF !important; --e-global-color-dd29169: #162235 !important; --e-global-color-5e8d0a4: #CE1515 !important; --e-global-color-fbb0daf: #E5B313 !important; --e-global-color-5b6dbbf: #002060 !important; --e-global-color-3dba653: #299E47 !important; --e-global-color-6e54641: #05070D !important; --e-global-color-32e1c9d: #0B1220 !important; --e-global-color-66b8c86: #02010100 !important; } form.metform-form-content .mf-error-message { margin-top: 8px; } .elementskit-navbar-nav-default .elementskit-submenu-panel>li>a { border-radius: 25px; } li#menu-item-82.d-none { display: none !important; } .elementor-453 .elementor-element.elementor-element-700bc93e, .elementor-457 .elementor-element.elementor-element-78aeded0, .elementor-477 .elementor-element.elementor-element-5f6a987b,.elementor-481 .elementor-element.elementor-element-9d9f4f5,.elementor-488 .elementor-element.elementor-element-4933ed76,.elementor-495 .elementor-element.elementor-element-203ecd0,.elementor-499 .elementor-element.elementor-element-19cacd5, .elementor-element.elementor-element-493dd55a.e-flex.e-con-boxed.e-con.e-parent.e-lazyloaded { display: none; } @media (max-width: 1024px) { svg.elementskit-submenu-indicator.ekit-svg-icon.icon-down-arrow1 { height: 34px !important; width: 34px !important; padding: 10px !important; } .elementor-66 .elementor-element.elementor-element-345adf15 button.elementskit-menu-hamburger svg.ekit-menu-icon path { fill: #fff !important; } .elementor-66 .elementor-element.elementor-element-345adf15 button.elementskit-menu-hamburger { display: flex; align-items: center; justify-content: center; } .elementor-66 .elementor-element.elementor-element-345adf15 button.elementskit-menu-hamburger svg.ekit-menu-icon { width: 24px !important; height: 24px !important; } } @media (max-width: 767px) { .elementor-kit-11 { --e-global-typography-06f2e36-font-size: 20px; --e-global-typography-745cbd3-font-size: 18px; } } /* ========================================================================= HOMEPAGE PREMIUM ANIMATIONS & EFFECTS — Custom CSS Companion to: elementor-300-enhanced.json WHERE TO ADD THIS: Option A (recommended, if you have Elementor Pro): Edit the imported page in Elementor -> Page Settings (gear icon, bottom-left) -> Advanced -> Custom CSS -> paste everything below. This scopes the CSS to this page only. Option B (no Elementor Pro / site-wide via theme): WordPress Admin -> Appearance -> Customize -> Additional CSS -> paste everything below. It is already scoped with "body.home" so it will only affect the site's front page (the page set as your static homepage in Settings -> Reading). If this template is NOT set as the WordPress "front page", replace every "body.home" below with the specific page-id class Elementor prints on , e.g. "body.page-id-123". Every selector below only touches elements that already exist in the page (matched by Elementor's own data-id attributes or default widget classes), so nothing in the JSON needs to change for these effects to work. ========================================================================= */ /* ------------------------------------------------------------------------- 0. Respect reduced motion — accessibility first. Elementor already disables its native entrance animations automatically when this is set; this block extends the same courtesy to everything custom added below. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.home * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } body.home .eh-hero::before, body.home .eh-hero::after { animation: none !important; } } /* Smooth in-page scrolling (safe, no layout shift) */ body.home { scroll-behavior: smooth; } /* ========================================================================= 1. HERO SECTION — subtle animated gradient + floating decorative shapes Targets the hero's outer container by its Elementor element id (data-id="52245a92"), so no JSON class edits were needed. ========================================================================= */ body.home .elementor-element[data-id="52245a92"] { position: relative; overflow: hidden; isolation: isolate; } /* Soft moving gradient wash behind the hero content */ body.home .elementor-element[data-id="52245a92"]::before { content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none; background: linear-gradient(120deg, rgba(120, 120, 255, 0.06) 0%, rgba(120, 200, 255, 0.05) 35%, rgba(255, 255, 255, 0) 60%); background-size: 200% 200%; animation: ehGradientDrift 18s ease-in-out infinite; will-change: background-position; } /* Two soft floating blurred orbs for gentle depth (color-neutral, brand-safe) */ body.home .elementor-element[data-id="52245a92"]::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: -60px; right: 8%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(120,140,255,0.10), rgba(120,140,255,0) 70%); filter: blur(2px); animation: ehFloatY 9s ease-in-out infinite; } /* Keep hero content above the decorative layers */ body.home .elementor-element[data-id="52245a92"] > .e-con-inner, body.home .elementor-element[data-id="52245a92"] > div { position: relative; z-index: 1; } @keyframes ehGradientDrift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes ehFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(22px); } } /* ========================================================================= 2. CARDS — icon-box widgets (used across the services / features / grid sections). Hover: gentle lift, soft shadow, border tint, icon scale. Uses Elementor's own default widget markup — no JSON edits required. ========================================================================= */ body.home .elementor-widget-icon-box { transition: transform 0.35s ease, box-shadow 0.35s ease; border-radius: 8px; will-change: transform; } body.home .elementor-widget-icon-box:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(20, 20, 43, 0.22); } body.home .elementor-widget-icon-box .elementor-icon-box-icon, body.home .elementor-widget-icon-box .elementor-icon-box-icon i, body.home .elementor-widget-icon-box .elementor-icon-box-icon svg { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } body.home .elementor-widget-icon-box:hover .elementor-icon-box-icon { transform: scale(1.12) rotate(-4deg); } /* Card containers that are NOT icon-box widgets but function as cards (pricing/plan cards in the "why choose us" grid, and the two comparison cards + CTA card in the process section). Targeted precisely by their Elementor element ids so no unrelated container is affected. */ body.home .elementor-element[data-id="47f7dd7d"], body.home .elementor-element[data-id="9fec7d0"], body.home .elementor-element[data-id="531642a8"], body.home .elementor-element[data-id="4eca7ef9"], body.home .elementor-element[data-id="27b9002f"], body.home .elementor-element[data-id="3a5c499c"], body.home .elementor-element[data-id="1a9c4915"] { transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease; will-change: transform; } body.home .elementor-element[data-id="47f7dd7d"]:hover, body.home .elementor-element[data-id="9fec7d0"]:hover, body.home .elementor-element[data-id="531642a8"]:hover, body.home .elementor-element[data-id="4eca7ef9"]:hover, body.home .elementor-element[data-id="27b9002f"]:hover, body.home .elementor-element[data-id="3a5c499c"]:hover, body.home .elementor-element[data-id="1a9c4915"]:hover { transform: translateY(-6px); box-shadow: 0 20px 45px -20px rgba(20, 20, 43, 0.25); } /* ========================================================================= 3. IMAGES — subtle zoom-on-hover reveal, no layout shift or distortion. overflow:hidden on the widget wrapper prevents the zoomed image from spilling outside its box, so responsiveness is unaffected. ========================================================================= */ body.home .elementor-widget-image .elementor-image, body.home .elementor-widget-image { overflow: hidden; border-radius: inherit; } body.home .elementor-widget-image img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; transform: scale(1); } body.home .elementor-widget-image:hover img { transform: scale(1.06); } /* ========================================================================= 4. BUTTONS — polish on top of the existing native "shrink" hover animation already applied in the JSON. Adds a soft glow and lets any trailing icon nudge to the right on hover. ========================================================================= */ body.home .elementor-button { transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease; } body.home .elementor-button:hover { box-shadow: 0 10px 28px -12px rgba(20, 20, 43, 0.35); } body.home .elementor-button .elementor-button-icon, body.home .elementor-button .elementor-align-icon-right, body.home .elementor-button i { transition: transform 0.3s ease; } body.home .elementor-button:hover .elementor-align-icon-right, body.home .elementor-button:hover i { transform: translateX(4px); } /* ========================================================================= 5. STAT COUNTERS — a soft one-time pop as the number lands, layered on top of Elementor's built-in count-up behavior (no JS needed/added). ========================================================================= */ body.home .elementor-widget-counter .elementor-counter-number-wrapper { transition: transform 0.3s ease; } /* ========================================================================= 6. Nested tab panels — smooth cross-fade when a visitor switches tabs, complementing the entrance animations already set on their contents. ========================================================================= */ body.home .e-n-tabs-content > .e-con { transition: opacity 0.35s ease; } .awsm-selectric-items li, .awsm-selectric-items ul, .awsm-selectric .label { font-size: 15px; } .awsm-filter-item-search .awsm-job-form-control { outline: 0 none !important; } .awsm-grid-item .awsm-job-item { background: #fff; border-radius: 10px; } .awsm-grid-left-col .awsm-job-post-title { font-size: 24px !important; color: var(--e-global-color-32e1c9d) !important; font-weight: 400; } .awsm-job-more-container { margin-top: 15px; } .awsm-job-more-container .awsm-job-more { color: #2082eb !important; } .awsm-job-specification-wrapper { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; } .awsm-job-specification-item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; color: #5f6b7a; font-size: 14px; font-weight: 400; line-height: 1.5; } /* Icons */ .awsm-job-specification-item > i { width: 18px; min-width: 18px; color: #3158e8; font-size: 15px; text-align: center; } /* Category */ .awsm-job-specification-job-category .awsm-job-specification-term { color: #435066; font-size: 14px; font-weight: 500; } /* Location row */ .awsm-job-specification-job-location { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } /* Location badges */ .awsm-job-specification-job-location .awsm-job-specification-term { display: inline-block; padding: 5px 10px; background: #f3f5f8; border-radius: 5px; color: #596579; font-size: 12px; font-weight: 500; line-height: 1.3; } /* ========================================================= AWsm JOB SINGLE PAGE ONLY Does NOT affect [awsmjobs] listing page ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-container { padding-top: 175px; } /* ========================================================= MAIN SINGLE JOB CONTAINER ========================================================= */ .awsm-job-main.awsm-job-single-content { width: 100%; } .awsm-job-main.awsm-job-single-content .awsm-job-container { max-width: 1200px; width: 100%; margin: 0 auto; } /* ========================================================= JOB TITLE ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-jobs-single-title { margin: 0 0 30px !important; color: #ffffff !important; font-size: 42px !important; } /* ========================================================= CONTENT + APPLICATION FORM ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-single-wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr); gap: 60px; align-items: start; } /* ========================================================= JOB CONTENT ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-content { min-width: 0; } /* Main content text */ .awsm-job-main.awsm-job-single-content .awsm-job-entry-content { color: #d4d8df; font-size: 16px; line-height: 1.8; } /* Paragraph */ .awsm-job-main.awsm-job-single-content .awsm-job-entry-content p { margin: 0 0 24px; } /* Strong headings */ .awsm-job-main.awsm-job-single-content .awsm-job-entry-content p strong { color: #ffffff; font-weight: 600; } /* ========================================================= CONTENT HEADINGS Since current content uses

========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-entry-content p strong:first-child { color: #ffffff; } /* ========================================================= LIST ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-entry-content ul { margin: 0 0 30px; padding-left: 22px; } .awsm-job-main.awsm-job-single-content .awsm-job-entry-content li { margin-bottom: 10px; color: #d4d8df; font-size: 15px; line-height: 1.7; } .awsm-job-main.awsm-job-single-content .awsm-job-entry-content li::marker { color: #3158e8; } /* ========================================================= JOB SPECIFICATIONS ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-specifications-container { margin-top: 40px; padding: 25px 0; border-top: 1px solid rgba(255,255,255,0.12); border-bottom: 1px solid rgba(255,255,255,0.12); } .awsm-job-main.awsm-job-single-content .awsm-job-specification-wrapper { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; } /* Specification row */ .awsm-job-main.awsm-job-single-content .awsm-job-specification-item { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: #d1d6df; font-size: 14px; line-height: 1.5; } /* Icons */ .awsm-job-main.awsm-job-single-content .awsm-job-specification-item > i { width: 20px; min-width: 20px; color: #3158e8; font-size: 15px; text-align: center; } /* Labels */ .awsm-job-main.awsm-job-single-content .awsm-job-specification-label { color: #ffffff; font-weight: 600; } /* Values */ .awsm-job-main.awsm-job-single-content .awsm-job-specification-term { color: #bfc6d1; font-weight: 400; } /* Location badges */ .awsm-job-main.awsm-job-single-content .awsm-job-specification-job-location .awsm-job-specification-term { padding: 5px 10px; background: rgba(255,255,255,0.07); border-radius: 5px; color: #d5d9e0; font-size: 12px; font-weight: 500; } /* ========================================================= APPLICATION FORM ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-form { width: 100%; } .awsm-job-main.awsm-job-single-content .awsm-job-form-inner { padding: 30px; background: #ffffff; border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.15); } /* Form heading */ .awsm-job-main.awsm-job-single-content .awsm-job-form-inner h2 { margin: 0 0 28px !important; color: #172b4d !important; font-size: 24px !important; line-height: 1.3 !important; font-weight: 700 !important; } /* ========================================================= FORM GROUP ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-form-group { margin-bottom: 20px; } /* Labels */ .awsm-job-main.awsm-job-single-content .awsm-job-form-group > label { display: block; margin-bottom: 8px; color: #344054; font-size: 14px; line-height: 1.4; font-weight: 600; } /* Required */ .awsm-job-main.awsm-job-single-content .awsm-job-form-error { color: #e53935; } /* ========================================================= INPUTS ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-form-control { width: 100% !important; min-height: 48px; padding: 12px 14px !important; background: #ffffff !important; border: 1px solid #d9dee7 !important; border-radius: 6px !important; color: #263449 !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.4; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; transition: border-color .2s ease, box-shadow .2s ease; } /* Focus */ .awsm-job-main.awsm-job-single-content .awsm-job-form-control:focus { border-color: #3158e8 !important; box-shadow: 0 0 0 3px rgba(49,88,232,0.10) !important; } /* Textarea */ .awsm-job-main.awsm-job-single-content textarea.awsm-job-form-control { min-height: 120px; resize: vertical; } /* ========================================================= FILE UPLOAD ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-form-file-control { padding: 10px !important; cursor: pointer; } .awsm-job-main.awsm-job-single-content .awsm-job-form-group small { display: block; margin-top: 7px; color: #7b8492; font-size: 12px; } /* ========================================================= PRIVACY CHECKBOX ========================================================= */ .awsm-job-main.awsm-job-single-content .awsm-job-inline-group { display: flex; align-items: flex-start; gap: 9px; } .awsm-job-main.awsm-job-single-content .awsm-job-inline-group input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 auto; } .awsm-job-main.awsm-job-single-content .awsm-job-inline-group label { margin: 0; color: #667085; font-size: 12px; font-weight: 400; line-height: 1.5; } /* ========================================================= SUBMIT BUTTON ========================================================= */ .awsm-job-main.awsm-job-single-content #awsm-application-submit-btn { width: 100%; min-height: 50px; padding: 13px 24px; background: #3158e8; border: 1px solid #3158e8; border-radius: 6px; color: #ffffff; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: all .25s ease; } .awsm-job-main.awsm-job-single-content #awsm-application-submit-btn:hover { background: #2446c7; border-color: #2446c7; transform: translateY(-1px); } /* ========================================================= RESPONSIVE - TABLET ========================================================= */ @media (max-width: 1024px) { .awsm-job-main.awsm-job-single-content .awsm-job-container { width: 90%; } .awsm-job-main.awsm-job-single-content .awsm-job-single-wrap { grid-template-columns: 1fr; gap: 45px; } .awsm-job-main.awsm-job-single-content .awsm-job-form { max-width: 650px; } } /* ========================================================= RESPONSIVE - MOBILE ========================================================= */ @media (max-width: 767px) { .awsm-job-main.awsm-job-single-content .awsm-job-container { width: calc(100% - 30px); } .awsm-job-main.awsm-job-single-content .awsm-jobs-single-title { margin-bottom: 30px !important; font-size: 32px !important; } .awsm-job-main.awsm-job-single-content .awsm-job-entry-content { font-size: 15px; line-height: 1.7; } .awsm-job-main.awsm-job-single-content .awsm-job-entry-content li { font-size: 14px; } .awsm-job-main.awsm-job-single-content .awsm-job-form-inner { padding: 22px; } .awsm-job-main.awsm-job-single-content .awsm-job-form-inner h2 { font-size: 22px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .awsm-job-main.awsm-job-single-content .awsm-jobs-single-title { font-size: 28px !important; } .awsm-job-main.awsm-job-single-content .awsm-job-specification-item { align-items: flex-start; } } div.awsm-job-form-error { display: none !important; } .awsm-job-main.awsm-job-single-content .awsm-job-form-control.awsm-job-form-error { border-color: #e53935 !important; } .awsm-job-main.awsm-job-single-content .awsm-job-specification-label strong { font-weight: 600; } .single-post .ekit-heading .ekit-heading--title, .single-post .ekit-heading .ekit-heading--title span { color: #fff !important; }