.elementor-kit-5{--e-global-color-primary:#54595F;--e-global-color-secondary:#6B7179;--e-global-color-text:#2C2C2C;--e-global-color-accent:#F45E28;--e-global-color-53f4541:#FFFFFF;--e-global-color-8efda32:#000000;--e-global-color-d64fe01:#F78A63;--e-global-color-db53d70:#4E6B8B;--e-global-color-73eb60f:#3D3D3D;--e-global-color-affe880:#E3E3E3;--e-global-color-0e2659a:#D8D8D8;--e-global-color-5c4deff:#999999;--e-global-typography-primary-font-family:"Exo 2";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Exo";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Urbanist";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Urbanist";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 a{color:var( --e-global-color-accent );}.elementor-kit-5 a:hover{color:var( --e-global-color-d64fe01 );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{color:var( --e-global-color-53f4541 );background-color:var( --e-global-color-accent );border-radius:40px 40px 40px 40px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{color:var( --e-global-color-53f4541 );background-color:var( --e-global-color-d64fe01 );}.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);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.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 *//* Hide default WordPress page titles on Elementor pages */
.elementor-page h1.entry-title,
.elementor-page .entry-title,
.elementor-page .page-title {
  display: none !important;
}

/* Start Follo Button ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────*/
/* ── 1) Setup CSS vars on the wrapper ─────────────────────────────────────── */
/* ── Follo Button ────────────────────────────────────────────────────────── */
/* 1) Aspect ratio from viewBox: 56.273 / 44.8 ≈ 1.2569 */
  
/* ── Follo Button: inline-flex, no gaps ──────────────────────────────────── */
/* 1) Base button wrapper */
.follo-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  vertical-align: middle;
}

/* 2) Left end-cap */
.follo-btn-left {
  flex: 0 0 auto;
  height: 2.5em;            /* your default height */
  margin-right: -3px;       /* overlap center by 3px */
  fill: #F45E28;
  transition: fill 0.3s ease;
  z-index: 2;
}

/* 3) Center text panel */
.follo-btn-center {
  flex: 1 1 auto;           /* grows & shrinks around the text */
  display: flex;
  align-items: center;
  height: 2.5em;
  padding: 0 .2em 0 .5em;           /* adjust side padding as needed */
  background-color: #F45E28;
  color: #fff;
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.3s ease;
  z-index: 1;
}

/* 4) Right end-cap */
.follo-btn-right {
  flex: 0 0 auto;
  height: 2.5em;
  margin-left: -3px;        /* overlap center by 3px */
  fill: #F45E28;
  transition: fill 0.3s ease;
  z-index: 0;
}

/* 5) Hover states & pulse */
.follo-btn:hover .follo-btn-left,
.follo-btn:hover .follo-btn-right {
  fill: #F78A63;
}
.follo-btn:hover .follo-btn-center {
  background-color: #F78A63;
  cursor: pointer;
}
@keyframes pulse-right {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(2px); }
}
.follo-btn:hover .follo-btn-right {
  animation: pulse-right 1.2s ease-in-out infinite;
}

/* 6) Tablet (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .follo-btn-left,
  .follo-btn-center,
  .follo-btn-right {
    height: 2em;            /* scaled height */
  }
}

/* 7) Mobile (<768px) */
@media (max-width: 767px) {
  .follo-btn {
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  .follo-btn-left,
  .follo-btn-center,
  .follo-btn-right {
    height: 2em;
  }
  /* center the text inside the full-width button */
  .follo-btn-center {
    justify-content: center !important;
    text-align: center !important;
    /* optional: equal left/right padding */
    padding: 0 1em !important;
  }
}
/*) End Follo Button ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────*/

/* Start mobile menu container nudge left off screen ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────*/

@media (max-width: 767px) {

.jet-mobile-menu--left-side.jet-nav-wrap .jet-nav.m-layout-mobile, .jet-mobile-menu--right-side.jet-nav-wrap .jet-nav.m-layout-mobile {
    margin-left: -20px;
}
}
/* SEnd mobile menu container nudge left off screen ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────*/




/* Start Glassmorphism utility — lighter, subtler frost with frosted border ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────*/
.glass-back.bright{
  /* 1) Background tint & opacity */
  background-color: rgba(240, 240, 240, 0.8);
}
  .glass-back {
  /* 1) Background tint & opacity */
  background-color: rgba(230, 230, 230, 0.4);

  /* 2) Blur strength */
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* 3) Frosted border */
  border: 1px solid rgba(0, 0, 0, 0.05);

  /* 4) Corners & shadow */
  border-radius: 50px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);

  /* 5) Stacking context */
  position: relative;
  z-index: 1;
}
.glass-back.glass-square {
     /* 4) Corners & shadow */
  border-radius: 0px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* Base QuoteTail extension */
.glass-back.quote-tail {
  position: relative; /* Needed for the tail positioning */
}

/* The tail itself */
.glass-back.quote-tail::after {
  content: "";
  position: absolute;
  bottom: -32px;   /* distance below the container */
  right: 40px;     /* adjust how far in from the right edge */
  width: 34px;
  height: 32px;

  /* Match GlassBack background */
  background-color: rgba(230, 230, 230, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  /* Rounded ramp shape */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 0px;
  transform: rotate(0deg) skewX(20deg);

  /* Subtle border to match frosted border */
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: none; /* so it blends smoothly into the container */
}

/* 0) Allow drop-downs to overflow their parent */
.elementor-nav-menu {
  overflow: visible !important;
}


/* End Glassmorphism utility  ───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────*/

/* Start marquee container & track (updated to remove grayscale) ─────────────────────────────────────────────────────────────*/

/* ===== Marquee Container ===== */
.logo-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 20px;
  animation: marquee-scroll 30s linear infinite;
}

/* === Logo item sizing (unchanged, clamp for fluid width) === */
.logo-track .logo-item {
  /* fluid wrapper width: never smaller than 200px, ideal 18vw, never larger than 400px */
  flex: 0 0 clamp(200px, 18vw, 400px);
  max-width: clamp(200px, 18vw, 400px);

  display: block;
  box-sizing: border-box;
  text-align: center;
  align-self: center;
}

/* Images: full color at all times, no grayscale; keep center "pop" via transform */
.logo-track .logo-item img {
  width: 100%;
  height: auto;
  max-height: clamp(40px, 6.5vw, 80px);
  object-fit: contain;

  /* REMOVE grayscale & dimming */
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;

  /* Keep the base scale and smooth transform */
  transform: scale(0.8);
  transform-origin: center center;
  transition: transform 0.8s ease;
  display: inline-block;
}

/* Active (center) logo: enlarge only; no filter changes needed */
.logo-track .logo-item.active img {
  transform: scale(1.1) !important;
  z-index: 10 !important;
}

/* Keyframes (unchanged) */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-66.666%); }
}

/* End marquee container ───────────────────────────────────────────────────────────────────────────────────────────────────*/





/* ── Start Download‐app footer container ───────────────────────────────────────────────── ───────────────────────────────────────────────── ───────────────────────────────────────────────── */
#download-app {
  position: relative;
  height: 370px;
  overflow: visible;
}

/* ── Gray background bar (full-width) ─────────────────────────────────────── */
#download-app .gray-bg-bar {
  position: absolute;
  bottom: -70%;       /* hide below container */
  left: 0;
  width: 100%;
  height: 50%;
  background: #272727;
  transition: bottom 0.6s ease-out;
  z-index: 1;
}

/* ── Buttons-Phone wrapper (flex row) ────────────────────────────────────── */
#download-app .buttons-phone {
  display: flex;
  justify-content: center;     /* horizontal centering */
  align-items: flex-end;       /* align children on their bottom edges */
  gap: 1.5rem;                 /* spacing between items */
  position: relative;
  height: 100%;
  z-index: 4;
}

/* Apple & Google buttons */
.buttons-phone .apple-btn,
.buttons-phone .google-btn {
  transform: scale(1);
  transition: transform 0.4s ease-out 0.3s;
  z-index: 2;
}

/* Phone image, now relative and inline with the buttons */
.buttons-phone .phone-btn {
  position: relative;
  transform: translateY(100%);   /* start pushed entirely below the row */
  transition: transform 0.6s ease-out;
  z-index: 4;
}

/* ── Logo‐Menus sits above gray-bar but below buttons-phone ─────────────── */
.logo-menus-container{
  position: relative;
  z-index: 10;
}

/* ── ACTIVE STATE ───────────────────────────────────────────────────────── */
#download-app.active .gray-bg-bar {
  bottom: 0;
}

#download-app.active .buttons-phone .phone-btn {
  transform: translateY(30%);   /* rise so 25% pops above the bar */
}

#download-app.active .buttons-phone .apple-btn,
#download-app.active .buttons-phone .google-btn {
  transform: scale(1.1);
  margin-bottom: -180px;
}
/* ── Shift only the Apple button 40px to the right ───────────────────────── */
#download-app .buttons-phone .apple-btn {
  margin-right: 40px;
}
/* ── Button transition timings ────────────────────────────────────────────── */
/* Apple button: wait for the phone (0.6s), then animate over 0.4s */
#download-app .buttons-phone .apple-btn {
  transition: transform 0.4s ease-out 0.6s,
              margin-bottom 0.4s ease-out 0.6s;
}

/* Google button: wait a bit longer (0.8s), then animate over 0.4s */
#download-app .buttons-phone .google-btn {
  transition: transform 0.4s ease-out 0.8s,
              margin-bottom 0.4s ease-out 0.8s;
}

/* On active, they use the same transform/margin rules you already set */
#download-app.active .buttons-phone .apple-btn {
  transform: scale(1.1);
  margin-bottom: -180px;
}

#download-app.active .buttons-phone .google-btn {
  transform: scale(1.1);
  margin-bottom: -180px;
}
/* ── Buttons: entry & exit purely via transform (no opacity) ────────────── */
#download-app .buttons-phone .apple-btn,
#download-app .buttons-phone .google-btn {
  /* start off-screen & tiny */
  transform: translateY(100%) scale(0);
  /* slide duration matches phone/gray-bar */
  transition: transform 0.6s ease-out;
  transform-origin: center center;
}

/* Apple: zoom in after 0.6s once active */
#download-app.active .buttons-phone .apple-btn {
  transform: translateY(0) scale(1.1);
  transition-delay: 0.6s;
}

/* Google: zoom in after 0.8s once active */
#download-app.active .buttons-phone .google-btn {
  transform: translateY(0) scale(1.1);
  transition-delay: 0.8s;
}
/* ── Buttons during exit: slide down but keep zoom ───────────────────────── */
#download-app.exiting .buttons-phone .apple-btn,
#download-app.exiting .buttons-phone .google-btn {
  transform: translateY(250%) scale(1.1);
  /* no delay, same 0.6s easing as phone & gray-bar */
  transition: transform 0.6s ease-out 0s;
}
/* ── Delay gray-bar & phone exit slightly so buttons slide first ───────── */
#download-app.exiting .gray-bg-bar,
#download-app.exiting .buttons-phone .phone-btn {
  /* match your slide duration (0.6s), but wait 0.2s before starting */
  transition-delay: 0.2s;
  transform: translateY(200%);
}
/* ── Mobile overrides (≤ 767px): disable animations + mobile layout tweaks ── */
@media (max-width: 767px) {
  /* A) Turn off all Download-App animations */
  #download-app .gray-bg-bar,
  #download-app .buttons-phone .phone-btn,
  #download-app .buttons-phone .apple-btn,
  #download-app .buttons-phone .google-btn {
    transition: none !important;
    transform: none !important;
  }
  #download-app.active .gray-bg-bar,
  #download-app.active .buttons-phone .phone-btn,
  #download-app.active .buttons-phone .apple-btn,
  #download-app.active .buttons-phone .google-btn {
    bottom: auto !important;
    opacity: 1 !important;
  }

  /* B) On mobile: taller gray-bar */
  #download-app .gray-bg-bar {
    height: 100% !important;
    bottom: -30% !important;
  }

  /* ── Buttons-Phone wrapper: side-by-side row on mobile ─────────── */
  #download-app .buttons-phone {
    flex-direction: row !important;      /* row instead of column */
    justify-content: center !important;
    flex-wrap: wrap;                     /* wrap if it needs to */
    gap: 1rem !important;
  }

  /* Ensure the phone stays beneath both buttons */
  #download-app .buttons-phone .apple-btn,
  #download-app .buttons-phone .google-btn {
    order: 1;
    bottom: -30% !important;
  }
  #download-app .buttons-phone .apple-btn {
  margin-right: 0px;
}
  #download-app .buttons-phone .phone-btn {
    order: 2;
    width: 100%;    /* make phone span full width if you like */
    bottom: -30% !important;
  }
}
/* ── Tablet tweaks (768px–1024px) ───────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* 1) Slightly taller download-app container if needed */
  #download-app {
    height: 150px; /* e.g. raise from 370px → 420px */
  }

  /* 2) Gray bar covers more of the container on tablet */
  #download-app .gray-bg-bar {
    bottom: -60%;       /* hide exactly 60% of its own height */
    height: 80%;        /* cover bottom 60% when active */
  }
  #download-app.active .gray-bg-bar {
    bottom: 0;          /* standard reveal */
  }

  #download-app .buttons-phone {
   overflow: visible !important; /* makes sure top of phone is not cut off */
  }

  /* 3) Phone start & end positions */
  #download-app .buttons-phone .phone-btn {
    transform: translateY(120%);     /* start fully below by 120% of its height */
  }
  #download-app.active .buttons-phone .phone-btn {
    transform: translateY( -5% );    /* lift so only 5% pokes above the bar */
  }

  /* 4) Nudge the App Store & Play buttons vertically if too high */
  #download-app .buttons-phone .apple-btn,
  #download-app .buttons-phone .google-btn {
    margin-bottom: -30px;            /* pull them 30px lower */
  }
  #download-app.active .buttons-phone .apple-btn,
  #download-app.active .buttons-phone .google-btn {
    /* keep your zoom-in still */
    transform: scale(1.1);
    margin-bottom: -20px;
  }
  #download-app .buttons-phone .apple-btn {
  margin-right: 0px;
}
}
/* End Download‐app footer container ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── Start custom alert css ───────────────────────────────────────────────── ───────────────────────────────────────────────── ───────────────────────────────────────────────── */


/* Apply only on screens <= 767px */
/* Apply only on screens <= 767px */
@media (max-width: 767px) {
  /* Let flex items shrink so ellipsis can occur */
  .jet-listing-dynamic-field__inline-wrap,
  .jet-listing-dynamic-field__content {
    min-width: 0 !important;
    overflow: hidden !important; /* prevents parent from clipping awkwardly */
  }

  /* Ellipsis on the actual text node (the span) */
  .jet-listing-dynamic-field__content > .alert-title {
    display: block !important;         /* block is simplest */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;        /* fill container, trim when needed */
    /* If it still won't trigger, swap to a hard width: */
    /* width: 40ch !important; */
  }
}

/* ── End custom alert css ───────────────────────────────────────────────── ───────────────────────────────────────────────── ───────────────────────────────────────────────── *//* End custom CSS */