.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================
   MYRALUXE - custom CSS (approximation of the original look)
   Paste in: Elementor > Site Settings > Custom CSS
   or Appearance > Customize > Additional CSS
   Colours/fonts come from the kit's Global Kit Styles.
   ========================================================== */

:root{
  --mx-primary:#F7E3D7;
  --mx-secondary:#EFE0D8;
  --mx-text:#575757;
  --mx-accent:#EDD9CE;
  --mx-cream:#FFF6E3;
  --mx-blush:#EBDDD6;
  --mx-dark:#2F2521;
  --mx-border:#E8E8EB;
  --mx-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
body{
  font-family:'Afacad',sans-serif;
  color:var(--mx-text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto}
::selection{background:var(--mx-primary);color:var(--mx-dark)}

/* ---------- headings: PP Fragment, tight, centred sections ---------- */
h1,h2,h3,h4,
.elementor-heading-title{
  font-family:'PP Fragment',serif;
  font-weight:400;
  line-height:1.15;
  letter-spacing:-.01em;
}
/* small uppercase kickers ("ADVANCED AESTHETIC CARE", "ABOUT US" ...) */
.elementor-widget-heading h6.elementor-heading-title,
.elementor-widget-heading .elementor-size-small{
  font-family:'Afacad',sans-serif;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:13px;
}
/* script words ("with", "Luxury") */
.elementor span[style*="Writeline"]{
  font-family:'Writeline',cursive !important;
  font-weight:400;
  line-height:1;
}
@media(max-width:1024px){
  .elementor span[style*="Writeline"][style*="120px"]{font-size:80px !important}
}
@media(max-width:767px){
  .elementor span[style*="Writeline"][style*="120px"]{font-size:52px !important}
}

/* ---------- buttons ---------- */
.elementor-button{
  font-family:'Afacad',sans-serif;
  text-transform:uppercase;
  letter-spacing:1.5px;
  border-radius:0;
  transition:background-color .35s var(--mx-ease),color .35s var(--mx-ease),
             border-color .35s var(--mx-ease),transform .35s var(--mx-ease);
}
.elementor-button:hover{transform:translateY(-2px)}

/* ---------- links ---------- */
.elementor a{transition:color .3s var(--mx-ease),opacity .3s var(--mx-ease)}

/* ---------- image hover (treatment cards, gallery, team) ---------- */
.elementor-widget-image,
.elementor-widget-image-box .elementor-image-box-img{overflow:hidden}
.elementor-widget-image img,
.elementor-widget-image-box img{
  transition:transform .8s var(--mx-ease);
  will-change:transform;
}
.elementor-widget-image:hover img,
.elementor-widget-image-box:hover img{transform:scale(1.05)}

/* ---------- counters ---------- */
.elementor-counter-number-wrapper{
  font-family:'PP Fragment',serif;
  font-weight:400;
}
.elementor-counter-title{
  font-family:'Afacad',sans-serif;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:14px;
}

/* ---------- accordion / FAQ ---------- */
.elementor-accordion .elementor-accordion-item{border-color:var(--mx-border)}
.elementor-accordion .elementor-tab-title{
  font-family:'PP Fragment',serif;
  transition:color .3s var(--mx-ease);
}
.elementor-accordion .elementor-tab-title:hover{color:var(--mx-dark)}

/* ---------- forms (booking form / Contact Form 7) ---------- */
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 input[type=date],.wpcf7 select,.wpcf7 textarea{
  width:100%;
  font-family:'Afacad',sans-serif;
  font-size:16px;
  background:transparent;
  border:1px solid var(--mx-border);
  border-radius:0;
  padding:14px 16px;
  color:var(--mx-dark);
  transition:border-color .3s var(--mx-ease),background .3s var(--mx-ease);
}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:none;
  border-color:var(--mx-dark);
  background:rgba(255,255,255,.04);
}
.wpcf7 input[type=submit]{
  font-family:'Afacad',sans-serif;
  text-transform:uppercase;
  letter-spacing:1.5px;
  background:var(--mx-primary);
  color:var(--mx-dark);
  border:0;border-radius:0;
  padding:16px 34px;
  cursor:pointer;
  transition:background .3s var(--mx-ease),transform .3s var(--mx-ease);
}
.wpcf7 input[type=submit]:hover{background:var(--mx-accent);transform:translateY(-2px)}

/* ---------- sticky / transparent header (if you build your own) ----------
   Give your header container the CSS class:  mx-header                    */
.mx-header{
  position:fixed;top:0;left:0;right:0;z-index:999;
  transition:background .4s var(--mx-ease),box-shadow .4s var(--mx-ease),padding .4s var(--mx-ease);
}
.mx-header.is-scrolled{
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 2px 20px rgba(0,0,0,.18);
}

/* ---------- scroll-reveal (pure CSS, modern browsers) ----------
   Uses animation-timeline: view(); older browsers simply show content.   */
@keyframes mx-reveal{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:none}
}
@supports (animation-timeline:view()){
  .elementor-widget-heading,
  .elementor-widget-text-editor,
  .elementor-widget-image,
  .elementor-widget-image-box,
  .elementor-widget-counter,
  .elementor-widget-icon-list{
    animation:mx-reveal linear both;
    animation-timeline:view();
    animation-range:entry 0% entry 35%;
  }
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ---------- misc ---------- */
.elementor-widget-divider .elementor-divider-separator{border-color:var(--mx-border)}
.elementor-widget-image-carousel .swiper-slide img{width:100%;object-fit:cover}
@media(max-width:767px){
  .elementor-widget-heading h1.elementor-heading-title{line-height:1.05}
}/* End custom CSS */