.elementor-17521 .elementor-element.elementor-element-66025ef{--display:flex;--min-height:650px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-66025ef:not(.elementor-motion-effects-element-type-background), .elementor-17521 .elementor-element.elementor-element-66025ef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://myonlinetutor.ae/wp-content/uploads/2026/09/How-it-work.ae_.png");background-position:center left;background-repeat:no-repeat;background-size:cover;}.elementor-17521 .elementor-element.elementor-element-e53d5e2{--display:flex;--justify-content:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:50px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-17521 .elementor-element.elementor-element-e53d5e2.e-con{--flex-grow:1;--flex-shrink:0;}.elementor-17521 .elementor-element.elementor-element-295b0a5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-ad6aa74 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-17521 .elementor-element.elementor-element-a75be59{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-17521 .elementor-element.elementor-element-4908ba1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-17521 .elementor-element.elementor-element-22e6ba8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-17521 .elementor-element.elementor-element-d9db6ee{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-6cb21c2 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-6cb21c2 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-17521 .elementor-element.elementor-element-6cb21c2{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-17521 .elementor-element.elementor-element-6cb21c2 .elementor-icon-list-text{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-60b2975{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-766ce10{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-17521 .elementor-element.elementor-element-c2d2077{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-f26efe3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-add99cc .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-add99cc .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-17521 .elementor-element.elementor-element-add99cc{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-17521 .elementor-element.elementor-element-add99cc .elementor-icon-list-text{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-44a9b02{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-17521 .elementor-element.elementor-element-c40a7cf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-2f77e26 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-2f77e26 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-17521 .elementor-element.elementor-element-2f77e26{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-17521 .elementor-element.elementor-element-2f77e26 .elementor-icon-list-text{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-8b6e74a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-7fdbcb5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-17521 .elementor-element.elementor-element-0aa47ca{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-4504068{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-16865b4 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-16865b4 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-17521 .elementor-element.elementor-element-16865b4{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-17521 .elementor-element.elementor-element-16865b4 .elementor-icon-list-text{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-a6d9782{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-17521 .elementor-element.elementor-element-22b6e5b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-235445e .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-235445e .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-17521 .elementor-element.elementor-element-235445e{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-17521 .elementor-element.elementor-element-235445e .elementor-icon-list-text{transition:color 0.3s;}.elementor-17521 .elementor-element.elementor-element-6497fbb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-17521 .elementor-element.elementor-element-3bc9b97{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:767px){.elementor-17521 .elementor-element.elementor-element-e53d5e2{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17521 .elementor-element.elementor-element-cdc1f84{text-align:center;}.elementor-17521 .elementor-element.elementor-element-5dbbea4{text-align:center;}.elementor-17521 .elementor-element.elementor-element-37a7554{text-align:center;}}@media(min-width:768px){.elementor-17521 .elementor-element.elementor-element-e53d5e2{--width:40%;}}/* Start custom CSS for text-editor, class: .elementor-element-cdc1f84 *//* =========================================================
   MOT — PREMIUM INTERACTIVE BADGE
   Modern Glass / Lift / Glow / Shine
   ========================================================= */

.mot-how-badge {
    position: relative;
    isolation: isolate;

    width: fit-content;
    max-width: 100%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 15px;

    border-radius: 999px;

    color: #35245f;

    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.86) 0%,
            rgba(249,246,255,.72) 48%,
            rgba(241,233,255,.68) 100%
        );

    border: 1px solid rgba(115, 72, 225, .16);

    box-shadow:
        0 6px 18px rgba(69, 33, 151, .08),
        inset 0 1px 0 rgba(255,255,255,.95);

    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);

    cursor: default;

    overflow: hidden;

    transform: translateY(0) scale(1);

    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}


/* Elementor paragraph reset */
.mot-how-badge p {
    margin: 0 !important;
    padding: 0 !important;

    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}


/* ---------------------------------------------------------
   SOFT GLOW UNDER BADGE
   --------------------------------------------------------- */

.mot-how-badge::before {
    content: "";

    position: absolute;

    left: 16%;
    right: 16%;
    bottom: -12px;

    height: 18px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(111, 61, 255, .28) 0%,
            rgba(111, 61, 255, .08) 45%,
            transparent 72%
        );

    filter: blur(10px);

    opacity: .28;

    transform: scale(.85);

    transition:
        opacity .35s ease,
        transform .35s ease;

    z-index: -1;
}


/* ---------------------------------------------------------
   SHINE EFFECT
   --------------------------------------------------------- */

.mot-how-badge::after {
    content: "";

    position: absolute;

    top: -45%;
    left: -45%;

    width: 32%;
    height: 190%;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.15) 35%,
            rgba(255,255,255,.95) 50%,
            rgba(255,255,255,.15) 65%,
            transparent 100%
        );

    transform: rotate(14deg);

    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   HOVER — MAIN EFFECT
   ========================================================= */

.mot-how-badge:hover {
    transform:
        translateY(-7px)
        scale(1.035);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96) 0%,
            rgba(247,241,255,.90) 50%,
            rgba(236,225,255,.86) 100%
        );

    border-color:
        rgba(111, 61, 255, .34);

    box-shadow:
        0 12px 28px rgba(69, 33, 151, .15),
        0 24px 50px rgba(112, 63, 255, .12),
        inset 0 1px 0 rgba(255,255,255,1);
}


/* Glow gets stronger */
.mot-how-badge:hover::before {
    opacity: .72;

    transform:
        scale(1.15)
        translateY(4px);
}


/* Shine sweeps across */
.mot-how-badge:hover::after {
    opacity: 1;

    animation:
        motBadgeShine .75s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


/* ---------------------------------------------------------
   SHINE ANIMATION
   --------------------------------------------------------- */

@keyframes motBadgeShine {

    0% {
        left: -45%;
    }

    100% {
        left: 125%;
    }
}


/* ---------------------------------------------------------
   OPTIONAL tiny entrance motion
   --------------------------------------------------------- */

@keyframes motBadgeEnter {

    0% {
        opacity: 0;
        transform:
            translateY(8px)
            scale(.96);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


.mot-how-badge {
    animation:
        motBadgeEnter .75s
        cubic-bezier(.16,1,.3,1)
        .25s both;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .mot-how-badge {
        padding: 7px 12px;

        font-size: 12px;
    }

}


/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .mot-how-badge,
    .mot-how-badge::after {
        animation: none !important;
    }

    .mot-how-badge:hover {
        transform: none;
    }
}/* End custom CSS */
/* Start custom CSS for heading, class: .elementor-element-5dbbea4 */.elementor-17521 .elementor-element.elementor-element-5dbbea4 .elementor-heading-title{
  margin:0 !important;

  font-family:Inter, Arial, sans-serif !important;
  font-size:clamp(42px,4vw,58px) !important;
  line-height:1.02 !important;
  font-weight:720 !important;
  letter-spacing:-1.8px !important;

  color:#222222 !important;
  text-wrap:balance !important;
}

.elementor-17521 .elementor-element.elementor-element-5dbbea4 .elementor-heading-title span{
  background:linear-gradient(
    90deg,
    #4B22A8 0%,
    #6134B7 25%,
    #7A3EF2 48%,
    #B58A9A 72%,
    #B8A05A 100%
  ) !important;

  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-ad6aa74 */.elementor-17521 .elementor-element.elementor-element-ad6aa74 .elementor-button-icon{
    color:#fff !important;
    fill:#fff !important;
}

.elementor-17521 .elementor-element.elementor-element-ad6aa74 .elementor-button-icon svg{
    fill:#fff !important;
}

.elementor-17521 .elementor-element.elementor-element-ad6aa74 .elementor-button-icon i{
    color:#fff !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-295b0a5 */.elementor-17521 .elementor-element.elementor-element-295b0a5 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-widget-button {
  width: auto !important;
}

.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 56px;
  padding: 0 34px !important;
  border-radius: 14px !important;

  background: linear-gradient(135deg, #6134B7 0%, #452197 100%) !important;
  border: 1px solid rgba(97,52,183,.88) !important;

  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  text-decoration: none !important;

  box-shadow:
    0 16px 34px rgba(97,52,183,.30),
    inset 0 1px 0 rgba(255,255,255,.38) !important;

  text-shadow: 0 1px 1px rgba(0,0,0,.14);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button::before {
  content: "";
  position: absolute;
  top: -45%;
  left: -85%;
  width: 55%;
  height: 190%;
  z-index: 1;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.88) 50%,
    rgba(255,255,255,.18) 65%,
    transparent 100%
  );

  transform: skewX(-22deg);
  transition: left .65s ease;
  pointer-events: none;
}

.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button:hover::before {
  left: 130%;
}

.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button-content-wrapper,
.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button-text,
.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button-icon {
  position: relative;
  z-index: 2;
}

.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #7A3EF2 0%, #6134B7 100%) !important;
  box-shadow:
    0 20px 42px rgba(97,52,183,.42),
    inset 0 1px 0 rgba(255,255,255,.50) !important;
  color: #ffffff !important;
}

.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button-icon {
  transition: transform .25s ease;
}

.elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button:hover .elementor-button-icon {
  transform: translateX(4px);
}

@media (max-width: 767px) {
  .elementor-17521 .elementor-element.elementor-element-295b0a5 {
    width: 100% !important;
    flex-direction: column !important;
    gap: 12px;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-widget-button {
    width: 100% !important;
    max-width: 300px !important;
  }

  .elementor-17521 .elementor-element.elementor-element-295b0a5 .elementor-button {
    width: 100% !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-a75be59 *//* RESET broken timeline lines */
.mot-timeline-wrap::before,
.mot-timeline-wrap::after,
.mot-how-step::before,
.mot-how-step::after {
  display: none !important;
  content: none !important;
}

/* Main page */
.mot-how-page {
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 40px 24px 60px !important;
  overflow: visible !important;
}

.mot-how-header {
  text-align: center !important;
  margin-bottom: 55px !important;
}

.mot-timeline-wrap {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Step rows */
.mot-how-step {
  position: relative !important;
  max-width: 980px !important;
  margin: 0 auto 54px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
  gap: 46px !important;
  overflow: visible !important;
}

/* Text and image above everything */
.mot-step-text,
.mot-step-image {
  position: relative !important;
  z-index: 2 !important;
}

.mot-step-text {
  max-width: 420px !important;
}

.mot-step-text h2,
.mot-step-text .elementor-heading-title {
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  color: #061957 !important;
  margin-bottom: 12px !important;
}

.mot-step-text p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #34465c !important;
}

.mot-step-image img,
.mot-step-image .mot-step-img {
  width: 100% !important;
  max-width: 430px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 50px rgba(15, 35, 75, .08) !important;
}

/* Blue number */
.mot-step-badge {
  position: absolute !important;
  left: -58px !important;
  top: 18px !important;

  width: 48px !important;
  height: 48px !important;
  padding: 3px !important;

  border-radius: 50% !important;

  /* Golden outer ring */
  background: linear-gradient(
    135deg,
    #D8C28A 0%,
    #B8A05A 48%,
    #F2DE9C 100%
  ) !important;

  color: #ffffff !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 18px !important;
  font-weight: 800 !important;

  z-index: 5 !important;

  box-shadow:
    0 10px 24px rgba(184, 160, 90, 0.30),
    0 0 0 4px rgba(216, 194, 138, 0.14) !important;
}

/* Violet inner circle */
.mot-step-badge::after {
  content: "" !important;
  position: absolute !important;
  inset: 3px !important;
  border-radius: 50% !important;

  background: linear-gradient(
    135deg,
    #7A3EF2 0%,
    #6134B7 100%
  ) !important;

  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.26),
    inset 0 -3px 7px rgba(45, 20, 110, 0.22) !important;

  z-index: -1 !important;
}

/* CTA */
.mot-how-cta {
  max-width: 980px !important;
  margin: 20px auto 0 !important;
  padding: 22px 28px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #f4f8ff 0%, #ffffff 100%) !important;
  border: 1px solid #dbe8ff !important;
  box-shadow: 0 18px 45px rgba(15,35,75,.06) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .mot-how-step {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    margin-bottom: 44px !important;
  }

  .mot-step-badge {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin-bottom: 12px !important;
  }

  .mot-step-text,
  .mot-step-image img,
  .mot-step-image .mot-step-img {
    max-width: 100% !important;
  }
}
.mot-how-step {
  padding: 34px !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 28px 80px rgba(15, 35, 75, 0.08) !important;
  border: 1px solid rgba(220, 232, 255, 0.9) !important;
}

.mot-how-step::before {
  content: "" !important;
  position: absolute !important;
  inset: -30px !important;
  background: radial-gradient(circle, rgba(23, 105, 255, 0.12), transparent 60%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.mot-step-image img,
.mot-step-image .mot-step-img {
  transform: translateY(-6px) !important;
  box-shadow: 0 32px 90px rgba(23, 105, 255, 0.14) !important;
}

.mot-step-badge {
  transform: translateY(-8px) !important;
}
.mot-how-step {
  opacity: 1 !important;
  transform: none !important;
  transition: transform .45s ease, box-shadow .45s ease !important;
}

.mot-how-step:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 38px 100px rgba(15, 35, 75, 0.13) !important;
}

.mot-how-page {
  padding: 25px 24px 20px !important;
}

.mot-how-header {
  margin-bottom: 32px !important;
}

.mot-how-step {
  margin: 0 auto 28px !important;
  padding: 26px !important;
  gap: 32px !important;
}

.mot-how-step::before {
  inset: -14px !important;
}

.mot-how-step:last-child {
  margin-bottom: 18px !important;
}

.mot-cta-box {
  margin-top: 20px !important;
}


.mot-how-step:hover .mot-step-badge {
  transform: translateY(-11px) scale(1.06) !important;

  box-shadow:
    0 16px 34px rgba(184, 160, 90, 0.38),
    0 0 0 6px rgba(216, 194, 138, 0.16),
    inset 0 1px 2px rgba(255, 255, 255, 0.30) !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-626d747 */.mot-cta-box {
  max-width: 1180px;
  min-height: 360px;
  margin: 60px auto;
  padding: 54px 74px;
  border-radius: 18px;

  background-image:
    url("https://myonlinetutor.ae/wp-content/uploads/2026/09/Ready-to-start.ae-.png");

  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 30px;

  overflow: hidden;
  position: relative;
  isolation: isolate;

  box-shadow: 0 24px 55px rgba(69, 33, 151, .22);
}

/* متن و دکمه‌ها روی بک‌گراند */
.mot-cta-content,
.mot-cta-actions {
  position: relative;
  z-index: 2;
}

.mot-cta-content h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.14;
  font-weight: 760;
  letter-spacing: -0.8px;
}

.mot-cta-content p {
  margin: 0;
  color: rgba(255,255,255,.88);
  font-size: 17px;
  line-height: 1.7;
}

.mot-cta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}

.mot-cta-btn {
  min-width: 185px;
  min-height: 58px;
  padding: 0 28px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 700;
  transition: all .25s ease;
  position: relative;
  z-index: 3;
}

.mot-cta-primary {
  background: linear-gradient(135deg, #FFF1C7 0%, #F3DFA2 48%, #D8B96A 100%);
  color: #3F1D8A !important;
  box-shadow: 0 14px 30px rgba(45, 22, 96, .22);
}

.mot-cta-secondary {
  background: rgba(255,255,255,.08);
  color: #fff !important;
  border: 1.5px solid rgba(216,194,138,.65);
}

.mot-cta-btn:hover {
  transform: translateY(-4px) scale(1.02);
}

.mot-cta-primary:hover {
  background: linear-gradient(135deg, #FFF6D8 0%, #F6E3AA 50%, #DDBF72 100%);
  box-shadow: 0 18px 38px rgba(45, 22, 96, .28);
}

.mot-cta-secondary:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(216,194,138,.95);
}

/* Mobile */
@media (max-width: 767px) {
  .mot-cta-box {
    min-height: 460px;
    margin: 40px 16px;
    padding: 36px 24px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;

    background-image:
      linear-gradient(180deg, rgba(69,33,151,.82) 0%, rgba(69,33,151,.52) 55%, rgba(69,33,151,.20) 100%),
      url("https://myonlinetutor.com/wp-content/uploads/2026/06/Footer-How-it-work.png");

    background-position: center center;
  }

  .mot-cta-actions {
    width: 100%;
    gap: 14px;
  }

  .mot-cta-btn {
    width: 100%;
  }

  .mot-cta-content h2 {
    font-size: 30px;
  }

  .mot-cta-content p br,
  .mot-cta-content h2 br {
    display: none;
  }
}/* End custom CSS */