@charset 'utf-8';
/*
Theme Name: hello-elementor Child Theme
Theme URI: 
Description: hello-elementor Child Theme - Multipurpose and Multiskin Responsive Wordpress theme
Author: hello-elementor Child Theme
Author URI:  
Template: hello-elementor
Version: 1.0
License: GNU General Public License
License URI: license.txt
Tags: flexible-header, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
Text Domain: hello-elementor-child-theme
*/


.wpcf7 form.sent .wpcf7-response-output {
    background: #00D06C;
    border: none;
    font-family: Karla !important;
    font-style: normal;
    font-weight: normal !important;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: 0.003em;
    padding: 7px 11px;
    margin: 36px 0 0 0;
    max-width: 508px;
    color: #000000 !important;
}

div.elementor-message{
	background-color: #ffffff;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
}

div.elementor-message-success{
	background-color: #1fc51f;
    color: white;
}

/* ============================================================
   CSS FOR THE ELEMENTOR HEADER (matching the header.html reference)
   Paste into: Elementor → Site Settings → Custom CSS
   OR into Advanced → Custom CSS of the header template (needs Pro).

   Structure this was written for (from your markup):
   .header-main-wrap        — outer container (section)
     .header-content-wrap    — inner row = the "pill"
       .logo-wrap             — logo "EK | LONGEVITY"
       .header-menu            — nav-menu widget
       .header-btn              — "lens" button

   TIP: for the sticky effect, enable in header-main-wrap settings
   Advanced → Motion Effects → Sticky: Top
   Elementor will add the .elementor-sticky--active class on scroll —
   used below to strengthen the shadow (equivalent of is-stuck).
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root{
  --ek-ink: #42464D;
  --ek-ink-muted: #6E747C;
  --ek-aqua: #8FD8D8;
  --ek-aqua-soft: #B4E6E6;
  --ek-white: #FFFFFF;
  --ek-border: rgba(66,70,77,0.18);
  --ek-radius-pill: 100px;
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* apply the font to the whole header — Elementor's global fonts are
   often set with high specificity, so it's applied on every text
   element below too, not just inherited from the wrapper */
html body .header-main-wrap .header-content-wrap div, html body .header-main-wrap .header-content-wrap div a, html body .header-main-wrap .header-content-wrap div span {
    font-family: var(--font-sans) !important;
}

/* ---------- Outer wrapper ---------- */
.header-main-wrap {
    background-color: transparent !important;
    padding-top: 32px;
    padding-bottom: 32px;
    position: fixed !important;
}

/* ---------- The "pill" — the header bar itself ---------- */
.header-content-wrap {
    background-color: var(--ek-white) !important;
    border-radius: var(--ek-radius-pill) !important;
    width: 100% !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
    min-height: 80px !important;
    padding: 0 15px !important;
    box-shadow: 0 10px 34px rgba(66,70,77,0.13);
    transition: box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
    box-sizing: border-box;
}

/* the outer container/inner wrapper Elementor generates must not force
   the pill to full viewport width — reset them to just center the pill */
.header-main-wrap > .e-con-inner{
  max-width: none !important;
  width: 100% !important;
}

/* stronger shadow once the header is "stuck" (Elementor Sticky effect) */
.elementor-sticky--active.header-main-wrap .header-content-wrap,
.header-main-wrap.elementor-sticky--active .header-content-wrap{
  box-shadow: 0 14px 44px rgba(66,70,77,0.22);
}

/* ---------- Logo block ---------- */
.logo-wrap{
  align-items: center;
  gap: 10px;
  margin-left: 15px;
  flex: 0 0 auto;
}

/* "EK" */
.logo-wrap .elementor-element-1693c37 .elementor-heading-title{
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ek-ink);
  line-height: 1;
}

/* turn the spacer widget into a vertical divider line */
.logo-wrap .elementor-element-5c4b557{
  width: 1px !important;
  height: 22px !important;
}
.logo-wrap .elementor-element-5c4b557 .elementor-spacer-inner{
  width: 1px;
  height: 22px;
  background-color: var(--ek-border);
}

/* "Longevity" */
.logo-wrap .elementor-element-1098bdc .elementor-heading-title{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ek-ink-muted);
  line-height: 1;
}

/* ---------- Nav menu (desktop) ---------- */
.header-menu.elementor-nav-menu--main{
  margin: 0 auto;
}
.header-menu .elementor-nav-menu{
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.header-menu .elementor-nav-menu > .menu-item > .elementor-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 19.2px;
  color: var(--ek-ink);
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(0.4,0,0.2,1);
}
.header-menu .elementor-nav-menu > .menu-item > .elementor-item:hover{
  color: var(--ek-aqua);
}

/* dropdown chevron next to items with a submenu —
   sized down and thinned out to match the slim reference arrow */
.header-menu .sub-arrow{
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
}
.header-menu .sub-arrow i{
  color: currentColor;
  font-size: 10px;
  opacity: 0.85;
}



/* desktop dropdown submenus */
.header-menu .elementor-nav-menu--dropdown{
  background-color: var(--ek-white);
  border-radius: 16px;
  box-shadow: 0 14px 44px rgba(66,70,77,0.18);
  padding: 8px;
  border: none;
  margin-top: 8px !important;
}
.header-menu .elementor-nav-menu--dropdown .elementor-sub-item{
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ek-ink);
}
.header-menu .elementor-nav-menu--dropdown .elementor-sub-item:hover{
  background-color: #E7F2F5;
  color: var(--ek-ink);
}

/* ---------- "Lens" button ---------- */
.header-btn .elementor-button, .eklongevity-form .elementor-button{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 50px;
  padding: 0 10px 0 24px !important;
  border-radius: var(--ek-radius-pill) !important;
  background-color: var(--ek-aqua) !important;
  color: var(--ek-ink) !important;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  border: none;
  transition: background-color 0.3s ease;
}
.header-btn .elementor-button:hover, .eklongevity-form .elementor-button:hover{
  background-color: var(--ek-aqua-soft) !important;
}

/* Arrow icon added via pure CSS (no Elementor Icon field needed) —
   the round white "puck" is drawn as a ::after pseudo-element with
   the reference SVG embedded as a data-URI background image */
.header-btn .elementor-button::after, .eklongevity-form .elementor-button::after{
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 15px;
  flex: 0 0 auto;
  background-color: var(--ek-white);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%20fill='none'%3E%3Cpath%20d='M%2012.972%203.604%20C%2011.517%205.059%208.811%205.004%207.295%203.489%20L%206.673%202.867%20L%205.48%204.06%20L%206.101%204.682%20C%207.204%205.785%208.702%206.355%2010.19%206.386%20L%202.828%2013.748%20L%204.071%2014.991%20L%2011.434%207.629%20C%2011.464%209.117%2012.035%2010.615%2013.137%2011.718%20L%2013.759%2012.339%20L%2014.952%2011.146%20L%2014.33%2010.524%20C%2012.815%209.008%2012.76%206.302%2014.215%204.847%20L%2014.811%204.251%20L%2013.568%203.008%20L%2012.972%203.604%20Z'%20fill='%2342464D'%20fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  display: inline-block;
  transition: transform 0.3s ease;
}
.header-btn .elementor-button:hover::after, .eklongevity-form .elementor-button:hover::after{
  transform: rotate(45deg);
}

/* If you'd rather add the icon through Elementor's own Icon field
   (Content → Icon → After) instead of the ::after above, these
   styles cover that path too — just delete the ::after rules above
   to avoid showing the arrow twice. */
.header-btn .elementor-button .elementor-button-icon, .eklongevity-form .elementor-button .elementor-button-icon{
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: var(--ek-white);
  display: grid;
  place-items: center;
  margin-inline-start: 0 !important;
  transition: transform 0.3s ease;
}
.header-btn .elementor-button:hover .elementor-button-icon, .eklongevity-form .elementor-button:hover .elementor-button-icon{
  transform: rotate(45deg);
}
.header-btn .elementor-button-icon i,
.header-btn .elementor-button-icon svg, .eklongevity-form .elementor-button-icon i, .eklongevity-form .elementor-button-icon svg{
  color: var(--ek-ink);
  fill: var(--ek-ink);
  width: 18px;
  height: 18px;
}

/* ---------- Mobile toggle (hamburger) ---------- */
.header-menu .elementor-menu-toggle{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ek-ink);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.header-menu .elementor-menu-toggle:hover{
  background-color: #E7F2F5;
}

/* mobile dropdown menu panel */
.header-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{
  background-color: var(--ek-white) !important;
  border-radius: 20px !important;
  box-shadow: 0 14px 44px rgba(66,70,77,0.22) !important;
  padding: 10px !important;
  margin-top: 10px !important;
}
.header-menu nav.elementor-nav-menu--dropdown .elementor-item,
.header-menu nav.elementor-nav-menu--dropdown .elementor-sub-item{
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ek-ink);
}
.header-menu nav.elementor-nav-menu--dropdown .elementor-item:hover,
.header-menu nav.elementor-nav-menu--dropdown .elementor-sub-item:hover{
  background-color: #E7F2F5;
}
/* same aqua quirk applied in the mobile menu */
.header-menu nav.elementor-nav-menu--dropdown > ul > .menu-item:nth-child(3) > .elementor-item{
  color: var(--ek-aqua) !important;
}

/* Social Icons — footer (EK Longevity) */
.elementor-element-b1cb4b0 .elementor-social-icons-wrapper{
  display: flex;
  gap: 10px;
}

.elementor-element-b1cb4b0 .elementor-icon.elementor-social-icon{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  display: grid;
  place-items: center;
  transition: background-color 0.3s cubic-bezier(0.4,0,0.2,1);
}

.elementor-element-b1cb4b0 .elementor-icon.elementor-social-icon:hover{
  background-color: rgba(255,255,255,0.2) !important;
  color: #FFFFFF !important;
}

.elementor-element-b1cb4b0 .elementor-icon.elementor-social-icon i{
  font-size: 15px;
  color: inherit;
}

/* ============================================================
   BLOG STYLES — adapted to EK Longevity brand
   Font: Figtree (was Public Sans / Urbanist)
   Accent: teal #0F7C7C / aqua #8FD8D8 (was black)
============================================================= */

/* blog */
.single-post-wrap p, .single-post-wrap li {
    font-family: 'Figtree', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #1A1A1A;
}
.single-post-wrap p {
    margin-bottom: 43px;
}
.single-post-wrap h2 {
    display: inline-block;
    font-family: 'Figtree', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 36px !important;
    line-height: 43px !important;
    color: #42464D;
    margin: 6px 0 25px;
}
.single-post-wrap h3 {
    display: inline-block;
    font-family: 'Figtree', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 28px !important;
    line-height: 34px !important;
    color: #42464D;
    margin: 6px 0 17px;
}
.single-post-wrap ol {
    padding-left: 16px;
}
.single-post-wrap ul {
    list-style: none;
    padding-left: 24px;
}
.single-post-wrap ul li {
    position: relative;
}
.single-post-content ul li:before {
    content: ".";
    position: absolute;
    left: -15px;
    top: -10px;
    font-size: 32px;
    color: #0F7C7C;
}

/* sidebar */
.blog-sidebar h5 {
    font-family: 'Figtree', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #42464D;
    margin-bottom: 25px;
}
.blog-sidebar ul {
    list-style: none;
    padding-left: 0;
}
.blog-sidebar li {
    margin-bottom: 17px;
}
.blog-sidebar a {
    font-family: 'Figtree', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #1A1A1A;
    transition: color 0.3s cubic-bezier(0.4,0,0.2,1);
}
.blog-sidebar a:hover {
    color: #0F7C7C !important;
    text-decoration: underline !important;
}
.current-cat a {
    color: #0F7C7C !important;
    text-decoration: underline !important;
}

/* pagination */
.blog-wrap .page-numbers.prev,
.blog-wrap .page-numbers.next {
    font-size: 0;
    width: 13px;
    height: 27px;
    position: relative;
    display: inline-block;
    top: -7px;
    background-color: #42464D;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.3s cubic-bezier(0.4,0,0.2,1);
}
.blog-wrap .page-numbers.prev {
    -webkit-mask-image: url(/wp-content/uploads/2026/09/navigation-left-i.svg);
    mask-image: url(/wp-content/uploads/2026/09/navigation-left-i.svg);
    display: none;
}
.blog-wrap .page-numbers.next {
    -webkit-mask-image: url(/wp-content/uploads/2026/09/navigation-right-i.svg);
    mask-image: url(/wp-content/uploads/2026/09/navigation-right-i.svg);
    left: -7px;
}
.blog-wrap .page-numbers.prev:hover,
.blog-wrap .page-numbers.next:hover {
    background-color: #42464D;
}
.page-numbers {
    position: relative;
    font-family: 'Figtree', sans-serif;
    color: #1A1A1A;
}
.page-numbers.current {
    font-weight: 700;
    color: #0F7C7C;
}
.page-numbers.current:after {
    content: "";
    width: 10px;
    height: 1px;
    position: absolute !important;
    bottom: -11px;
    border-bottom: 1px solid #0F7C7C;
    display: block;
    left: -1px;
}
.paged .blog-wrap .page-numbers.prev {
    display: inline-block;
    left: 4px;
}
.blog-wrap nav.elementor-pagination {
    margin-left: -18px;
}
.paged .blog-wrap nav.elementor-pagination {
    margin-left: 0;
}

/* nested lists */
.single-post-content ol li:before {
    display: none;
}
.single-post-content ol ul {
    list-style: lower-alpha;
    padding-left: 15px;
}
.single-post-wrap ul ul {
    padding-left: 18px;
}
.blog-sidebar li:last-child {
    margin-bottom: 0;
}
/* blog */


.elementor-widget-form input[type=date], .elementor-widget-form input[type=email], .elementor-widget-form input[type=number], .elementor-widget-form input[type=password], .elementor-widget-form input[type=search], .elementor-widget-form input[type=tel], .elementor-widget-form input[type=text], .elementor-widget-form input[type=url], .elementor-widget-form select, .elementor-widget-form textarea {
     min-height: 60px !important;
}





















































/* ---------- Responsive (≤1024px) ---------- */
@media (max-width: 1024px){
  .header-content-wrap{
    padding: 0 20px 0 20px !important;
  }
}

/* ---------- Responsive (≤1024px) ---------- */
@media (max-width: 1024px){
  .header-main-wrap{
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .header-content-wrap{
    min-height: 68px;
  }
  .logo-wrap{
    margin-left: 6px;
  }
  .logo-wrap .elementor-element-1693c37 .elementor-heading-title{
    font-size: 22px;
  }
  .logo-wrap .elementor-element-5c4b557{
    height: 18px !important;
  }
  .logo-wrap .elementor-element-1098bdc .elementor-heading-title{
    font-size: 10px;
  }

  /* show the button inside the mobile dropdown menu */
  .header-menu nav.elementor-nav-menu--dropdown ~ .header-btn,
  .header-menu .elementor-nav-menu--dropdown .header-btn{
    display: flex !important;
  }
	
.header-menu .elementor-nav-menu {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    list-style: none;
    flex-direction: column;
}	

.header-btn .elementor-button {
     gap: 5px;
    height: 40px;
    padding: 0 10px 0 10px !important;
    }	
	
	.header-menu .elementor-menu-toggle {
    width: auto;
    height: auto;
    font-size: 22px;
    padding: 0;
    background-color: transparent;
}
	
	.header-menu nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 20px 70px !important;
    margin: 55px 0 0 !important;
}
	
.header-menu .elementor-nav-menu {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    list-style: none;
    flex-direction: column;
    background-color: var(--ek-white) !important;
    border-radius: 20px !important;
    box-shadow: 0 14px 44px rgba(66, 70, 77, 0.22) !important;
    padding: 10px !important;
}
	
.header-menu .elementor-nav-menu li {
    width: 100%;
}	
	
.header-menu .elementor-menu-toggle:hover {
    background-color: transparent;
}	
	
.header-menu .elementor-nav-menu > .menu-item > .elementor-item {
     width: 100%;
	height: 50px;
}
	
.header-menu .elementor-nav-menu--dropdown {
    padding: 0;
    min-height: 50px;
}	
	
.highlighted {
    background-color: transparent !important;
}	
	
	
	.header-main-wrap {
     z-index: 9 !important;
}
	
	.blog-wrap .elementor-post {
    flex-direction: column-reverse !important;
}
	
	.blog-wrap .elementor-post  .elementor-post__thumbnail__link {
    margin: 0 0 24px !important;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
}