/* Makaryo Core: design-system utility classes. Colors come from Elementor Global Colors. */
:root{
  --mk-forest:var(--e-global-color-primary,#26453A);
  --mk-mint:var(--e-global-color-secondary,#E8F1ED);
  --mk-lime:var(--e-global-color-accent,#D6E46B);
  --mk-ink:var(--e-global-color-mkink,#1C1F1E);
  --mk-body:var(--e-global-color-text,#3E4A45);
  --mk-muted:var(--e-global-color-mkmuted,#5E6964);
  --mk-line:var(--e-global-color-mkline,#C9D5D0);
  --mk-white:var(--e-global-color-mkwhite,#FFFFFF);
}

/* Wide-screen scaling. The design is drawn on a 1440 frame with a 1200 content column (83% of the width).
   Above 1440 the content of any boxed container with the class mk-scale grows in proportion,
   so layouts keep the Figma proportions instead of floating in a fixed 1200px column. */
:root{--mk-zoom:1}
@media (min-width:1500px){:root{--mk-zoom:1.04}}
@media (min-width:1600px){:root{--mk-zoom:1.11}}
@media (min-width:1700px){:root{--mk-zoom:1.18}}
@media (min-width:1800px){:root{--mk-zoom:1.25}}
@media (min-width:1900px){:root{--mk-zoom:1.32}}
@media (min-width:2100px){:root{--mk-zoom:1.45}}
@media (min-width:2400px){:root{--mk-zoom:1.6}}
.e-con.mk-scale > .e-con-inner{zoom:var(--mk-zoom)}

/* Lime brush under highlighted words: wrap words in <span class="mk-hl"> inside a Heading */
.mk-hl{
  /* Hand-painted stroke: five overlapping slanted dashes rising left to right, plus dry-brush flecks */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 46' preserveAspectRatio='none'%3E%3Cpath fill='%23D6E46B' d='M0 39 L45 35 L38 19 L20 21 L10 22 L4 25Z M35 43 L101 32 L94 13 L69 18 L52 6 L41 9Z M97 46 L213 31 L206 12 L159 19 L128 5 L108 8Z M209 28 L277 22 L270 8 L225 13 L217 11 L212 14Z M270 43 L405 28 L398 9 L300 21 L285 2 L275 5Z M409 39 L512 29 L505 11 L431 19 L420 10 L413 13Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% .55em;
  background-position:0 calc(100% - .02em);
  /* the stroke starts a little before the first highlighted letter, as in the design */
  margin-left:-.3em;
  padding-left:.3em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding-right:.03em;
}

/* Ring in the card colour: makes overlapping images and buttons look cut out of the image below */
.mk-ring{box-shadow:0 0 0 12px var(--mk-mint)}
.mk-ring-sm{box-shadow:0 0 0 8px var(--mk-mint)}

/* Overlapping avatar row: add to the container that holds the Image widgets */
.mk-avatars > .elementor-widget + .elementor-widget{margin-left:-14px}
.mk-avatars img{border:3px solid var(--mk-lime);border-radius:999px;display:block}

/* Highlighted figure in running text, e.g. <span class="mk-peri">1000+ Company</span> */
.mk-peri{color:var(--e-global-color-mkperitx,#4A66C4);font-weight:600}

/* Hand-drawn swash under a text block (add to a Text Editor widget) */
.mk-curve{padding-bottom:22px;background:right 6px bottom 0/150px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 18' fill='none' stroke='%235E6964' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M2 9 C40 4 90 3 148 8'/%3E%3Cpath d='M86 5 C80 9 80 15 86 14 C91 13 90 7 84 6'/%3E%3C/svg%3E")}

/* Hero media cluster: a fixed-size composition that scales as one piece on small screens */
.mk-hero-media{flex:0 0 auto}
@media (max-width:1024px){.mk-hero-media{margin-inline:auto}}
@media (max-width:767px){.mk-hero-media{zoom:.56}}
@media (max-width:400px){.mk-hero-media{zoom:.5}}

/* Header navigation (Ultimate Addons Navigation Menu widget, CSS class mk-nav) */
.mk-nav .hfe-nav-menu > li > a.hfe-menu-item{border-radius:999px}
.mk-nav .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item,
.mk-nav .hfe-nav-menu > li.current-menu-ancestor > a.hfe-menu-item{background:rgba(255,255,255,.12)}
.mk-nav .sub-menu{border-radius:16px;overflow:hidden;padding:8px 0}
.mk-nav .hfe-nav-menu-icon svg{fill:currentColor}

/* Header wrapper: keep the collapsed mobile menu from widening the page */
.elementor .e-con.mk-header{overflow-x:clip}

/* Vertical hairline between header links */
.mk-vline{border-left:1px solid rgba(255,255,255,.22)}

/* Job search form ([makaryo_job_search]) */
.mk-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mk-search{display:flex;align-items:center;background:var(--mk-white);border-radius:999px;padding:12px 12px 12px 28px;min-height:92px;max-width:800px;box-sizing:border-box;font-family:Manrope,sans-serif}
.mk-search__field{position:relative;display:flex;align-items:center;flex:1 1 0;min-width:0;padding:0 20px 0 0}
.mk-search__field + .mk-search__field{border-left:1px solid rgba(28,31,30,.45);padding-left:28px}
.mk-search__field::before{content:"";flex:0 0 20px;height:20px;margin-right:12px;background:center/contain no-repeat}
.mk-search__field--location::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1F1E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.mk-search__field--category::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1F1E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 12h18'/%3E%3C/svg%3E")}
.mk-search select{appearance:none;-webkit-appearance:none;width:100%;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1F1E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0 center/18px no-repeat;padding:8px 30px 8px 0;font:400 18px/1.3 Manrope,sans-serif;color:var(--mk-ink);cursor:pointer;border-radius:8px}
.mk-search select:focus-visible{outline:2px solid var(--mk-forest);outline-offset:4px}
/* Let a widget extend past its column (e.g. the hero search bar running under the image) */
.elementor.elementor .e-con > .elementor-widget.mk-overflow{max-width:none}
@media (max-width:1024px){.elementor.elementor .e-con > .elementor-widget.mk-overflow{max-width:100%}}
form.mk-search button.mk-search__btn,form.mk-search button.mk-search__btn:focus{text-transform:none;box-shadow:none}
form.mk-search button.mk-search__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;margin-left:8px;padding:5px 5px 5px 16px;border:1px solid var(--mk-ink);border-radius:999px;background:var(--mk-white);color:var(--mk-ink);font:400 18px/1 Manrope,sans-serif;cursor:pointer;transition:background-color .2s,color .2s}
form.mk-search button.mk-search__btn:hover,form.mk-search button.mk-search__btn:focus-visible{background:var(--mk-forest);color:var(--mk-lime);outline:none}
.mk-search__icon{width:34px;height:34px;border-radius:999px;background:var(--mk-forest) center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D6E46B' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E")}
form.mk-search button.mk-search__btn:hover .mk-search__icon,form.mk-search button.mk-search__btn:focus-visible .mk-search__icon{background-color:var(--mk-lime);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326453A' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E")}
.mk-popular{margin:20px 0 0 28px;font:400 13px/1.5 Manrope,sans-serif;color:var(--mk-muted)}
.mk-popular strong{color:var(--mk-ink);font-weight:600}
.mk-popular a{color:var(--mk-muted);text-decoration:none}
.mk-popular a:hover,.mk-popular a:focus-visible{color:var(--mk-forest);text-decoration:underline}
@media (max-width:767px){
  .mk-search{flex-direction:column;align-items:stretch;border-radius:28px;padding:12px 18px 18px;min-height:0}
  .mk-search__field{padding:12px 0;border-bottom:1px solid var(--mk-line)}
  .mk-search__field + .mk-search__field{border-left:0;padding-left:0}
  form.mk-search button.mk-search__btn{margin:14px 0 0;justify-content:space-between}
  .mk-popular{margin-left:4px}
}