.elementor-kit-7{--e-global-color-primary:#563869;--e-global-color-secondary:#4E4E4E;--e-global-color-text:#4E4E4E;--e-global-color-accent:#9166AC;--e-global-color-a73819f:#9066AA;--e-global-color-a59e717:#FFFFFF;--e-global-color-e41cb75:#000000;--e-global-color-dbe93b8:#6B4682;--e-global-color-778d82c:#CA845A;--e-global-color-97c90e0:#FED9C0;--e-global-color-888f323:#E6E6E7;--e-global-color-39cc09c:#E33629;--e-global-typography-primary-font-family:"Varela Round";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Varela Round";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Varela Round";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Varela Round";--e-global-typography-accent-font-weight:400;--e-global-typography-99d3b34-font-family:"Varela Round";--e-global-typography-99d3b34-font-size:18px;--e-global-typography-99d3b34-font-weight:400;--e-global-typography-99d3b34-line-height:1.3em;--e-global-typography-733fd8c-font-family:"Varela Round";--e-global-typography-733fd8c-font-size:35px;--e-global-typography-733fd8c-font-weight:400;background-color:#FDFFF5;font-size:16px;line-height:1.3em;}.elementor-kit-7 button,.elementor-kit-7 input[type="button"],.elementor-kit-7 input[type="submit"],.elementor-kit-7 .elementor-button{background-color:var( --e-global-color-accent );font-size:18px;line-height:1em;color:var( --e-global-color-a59e717 );border-radius:999px 999px 999px 999px;padding:16px 16px 16px 16px;}.elementor-kit-7 button:hover,.elementor-kit-7 button:focus,.elementor-kit-7 input[type="button"]:hover,.elementor-kit-7 input[type="button"]:focus,.elementor-kit-7 input[type="submit"]:hover,.elementor-kit-7 input[type="submit"]:focus,.elementor-kit-7 .elementor-button:hover,.elementor-kit-7 .elementor-button:focus{background-color:var( --e-global-color-a59e717 );color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-primary );border-radius:999px 999px 999px 999px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 h1{font-size:64px;line-height:1em;}.elementor-kit-7 h2{font-size:35px;line-height:1em;}.elementor-kit-7 h3{font-size:30px;line-height:1em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1561px;}.e-con{--container-max-width:1561px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.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-kit-7 h1{font-size:54px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-7{--e-global-typography-733fd8c-font-size:30px;}.elementor-kit-7 h1{font-size:35px;}.elementor-kit-7 h2{font-size:30px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */p:last-child{
    margin-bottom: 0;
}

/* 1. הגדרות הכפתור - חל רק איפה שהוספת את המחלקה ripple-effect */
.ripple-effect .elementor-button {
  /* הגדרות עיצוב בסיסיות */
  border: none;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  
  /* פינות עגולות מלאות */
  border-radius: 999px;

  /* חובה לאפקט: */
  position: relative;
  overflow: hidden;
  z-index: 1;
  transform: translateZ(0); /* תיקון לספארי */
  
  /* הערה: אם אתה רוצה שהצבע יוגדר באלמנטור, תמחק את השורה הבאה. אם אתה רוצה לכפות צבע ספציפי מכאן, תשאיר אותה: */
  background-color: blueviolet; 
}

/* 2. יצירת אלמנט האפקט */
.ripple-effect .elementor-button:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.2); /* צבע הגל - לבן שקוף */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: -1;
}

/* 3. הפעלת האנימציה במעבר עכבר */
.ripple-effect .elementor-button:hover:after {
  animation: ripple_401 1s ease-out;
}

/* 4. הגדרת האנימציה */
@keyframes ripple_401 {
  0% {
    width: 5px;
    height: 5px;
    opacity: 1;
  }

  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}









.my-hover-btn .elementor-button {
  position: relative;
  overflow: hidden; 
  transition: all 0.3s ease;
  z-index: 1;
}

.my-hover-btn .elementor-button .elementor-button-text {
  position: relative;
  z-index: 2;
}

.my-hover-btn .elementor-button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  

  background: #fff; 
  
  transform: scaleX(0);
  transform-origin: left; 
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  z-index: 0; 
}
.my-hover-btn .elementor-button:hover::before {
  transform: scaleX(1);
}









/* ================================================= */
/* כפתור סלייד: .my-slide (עם רקע e4dbea)            */
/* ================================================= */

/* --- 1. הגדרות בסיס --- */
.my-slide .elementor-button .elementor-button-content-wrapper {
    display: flex;
    align-items: center;
    flex-direction: row-reverse !important;
    position: relative;
    border-radius: 50px;
    overflow: hidden;

    /* תיקון חיתוך (Masking) */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    
    /* הגדרת צבעים דינמית (לפי אלמנטור) */
    color: inherit; 
    background: transparent;
    z-index: 1;
    padding: 0px 8px 0px 0px; 
}

/* הגדרת האייקון שיקבל את צבע הטקסט */
.my-slide .elementor-button .elementor-button-icon svg {
    width: 38px;
    height: 38px;
    fill: currentColor; /* לוקח את הצבע מהגדרות אלמנטור */
}

/* העיגול שיוצר את האפקט */
.my-slide .elementor-button .elementor-button-content-wrapper::before {
    content: "";
    position: absolute;
    
    /* --- כאן התיקון: הגדלנו משמעותית את העיגול --- */
    width: 1200px;  /* היה 500px */
    height: 1200px; /* היה 500px */
    
    border-radius: 50%;
    will-change: transform;
    
    /* צבע הרקע של האפקט */
    background: #e4dbea; 
    
    z-index: -1;
    top: 50%;
    left: 50%;
    
    /* בגלל שהגדלנו את העיגול, שינינו מעט את נקודת ההתחלה כדי שלא יראו אותו בטעות */
    transform: translate(100%, -50%);
}

/* --- 2. מחשב בלבד --- */
@media (hover: hover) {
    .my-slide .elementor-button .elementor-button-content-wrapper,
    .my-slide .elementor-button .elementor-button-icon svg,
    .my-slide .elementor-button .elementor-button-content-wrapper::before {
        transition: all 0.5s ease-out; /* הארכנו מעט את הזמן בגלל הגודל */
    }

    .my-slide .elementor-button:hover .elementor-button-content-wrapper::before {
        transform: translate(-50%, -50%);
    }
}

/* --- 3. נייד בלבד --- */
@media (hover: none) {
    
    /* יציאה */
    .my-slide .elementor-button .elementor-button-content-wrapper,
    .my-slide .elementor-button .elementor-button-icon svg,
    .my-slide .elementor-button .elementor-button-content-wrapper::before {
        transition-property: transform, color, fill;
        transition-duration: 0.5s;
        transition-delay: 0.5s; 
    }

    /* כניסה */
    .my-slide .elementor-button:active .elementor-button-content-wrapper::before {
        transform: translate(-50%, -50%);
        transition-delay: 0s;
        transition-duration: 0s;
    }
    
    .my-slide .elementor-button:active .elementor-button-content-wrapper {
        transition-delay: 0s;
        transition-duration: 0s;
    }
    
    .my-slide .elementor-button:active .elementor-button-icon svg {
        transition-delay: 0s;
        transition-duration: 0s;
    }
}/* End custom CSS */