.elementor-17809 .elementor-element.elementor-element-9e7f339{--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-17809 .elementor-element.elementor-element-e450529{--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 30px;--row-gap:0px;--column-gap:30px;}.elementor-17809 .elementor-element.elementor-element-7dee729{--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-17809 .elementor-element.elementor-element-b47ad29{--grid-columns:3;}.elementor-17809 .elementor-element.elementor-element-b47ad29 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-17809 .elementor-element.elementor-element-b47ad29 .e-loop-item > .elementor-section, .elementor-17809 .elementor-element.elementor-element-b47ad29 .e-loop-item > .elementor-section > .elementor-container, .elementor-17809 .elementor-element.elementor-element-b47ad29 .e-loop-item > .e-con, .elementor-17809 .elementor-element.elementor-element-b47ad29 .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-17809 .elementor-element.elementor-element-15227b0{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-17809 .elementor-element.elementor-element-e260df3{text-align:center;}.elementor-17809 .elementor-element.elementor-element-e260df3 .elementor-heading-title{font-size:20px;font-weight:600;}.elementor-17809 .elementor-element.elementor-element-ff24a36{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-17809 .elementor-element.elementor-element-037b978{--grid-columns:1;--grid-row-gap:0px;--grid-column-gap:0px;}.elementor-17809 .elementor-element.elementor-element-037b978 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-17809 .elementor-element.elementor-element-037b978.elementor-element{--align-self:center;}.elementor-17809 .elementor-element.elementor-element-8bd30d2{--display:flex;}.elementor-17809 .elementor-element.elementor-element-48c764a{text-align:center;}.elementor-17809 .elementor-element.elementor-element-48c764a .elementor-heading-title{font-size:18px;font-weight:600;}.elementor-17809 .elementor-element.elementor-element-ff6cc46.elementor-element{--align-self:center;}.elementor-17809 .elementor-element.elementor-element-ff6cc46 .elementor-icon-list-icon i{color:#7B61FF;transition:color 0.3s;}.elementor-17809 .elementor-element.elementor-element-ff6cc46 .elementor-icon-list-icon svg{fill:#7B61FF;transition:fill 0.3s;}.elementor-17809 .elementor-element.elementor-element-ff6cc46{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-17809 .elementor-element.elementor-element-ff6cc46 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-17809 .elementor-element.elementor-element-ff6cc46 .elementor-icon-list-item > a{font-size:16px;font-weight:600;}.elementor-17809 .elementor-element.elementor-element-ff6cc46 .elementor-icon-list-text{transition:color 0.3s;}@media(min-width:768px){.elementor-17809 .elementor-element.elementor-element-7dee729{--width:70%;}.elementor-17809 .elementor-element.elementor-element-15227b0{--width:30%;}}@media(max-width:1024px){.elementor-17809 .elementor-element.elementor-element-b47ad29{--grid-columns:2;}.elementor-17809 .elementor-element.elementor-element-037b978{--grid-columns:2;}}@media(max-width:767px){.elementor-17809 .elementor-element.elementor-element-b47ad29{--grid-columns:1;}.elementor-17809 .elementor-element.elementor-element-037b978{--grid-columns:1;--grid-column-gap:0px;}}/* Start custom CSS for html, class: .elementor-element-b7e1325 *//* =========================================================
   MyOnlineTutor Blog Hero
   FINAL VIOLET VERSION
   Brand Palette:
   Primary:       #6134B7
   Bright Violet: #7A3EF2
   Deep Violet:   #452197
   Lavender:      #E9DDFB
   Dark Text:     #16191F
========================================================= */

.mot-blog-hero{
  position:relative !important;
  overflow:hidden !important;

  width:100vw !important;
  max-width:none !important;

  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  padding:36px 0 34px !important;
  min-height:620px !important;

  background-image:
    linear-gradient(
      90deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 48%,
      rgba(255,255,255,0) 100%
    ),
    url("https://myonlinetutor.com/wp-content/uploads/2026/06/Blog-Hero.png") !important;

  background-repeat:no-repeat !important;
  background-size:cover !important;
  background-position:right center !important;
}

/* Soft violet ambient glow */
.mot-blog-hero::after{
  content:"" !important;

  position:absolute !important;
  top:-180px !important;
  left:-180px !important;

  width:520px !important;
  height:520px !important;

  border-radius:50% !important;

  background:radial-gradient(
    circle,
    rgba(122,62,242,.14) 0%,
    rgba(97,52,183,.06) 42%,
    transparent 72%
  ) !important;

  filter:blur(12px) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* =========================================================
   INNER LAYOUT
========================================================= */

.mot-blog-hero-inner{
  width:100% !important;
  max-width:none !important;

  min-height:500px !important;

  margin:0 !important;

  padding-left:7vw !important;
  padding-right:4vw !important;

  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:44px !important;

  position:relative !important;
  z-index:2 !important;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.mot-blog-hero-content{
  flex:0 0 40% !important;
  max-width:560px !important;

  position:relative !important;
  z-index:5 !important;
}

/* =========================================================
   BADGE
========================================================= */

.mot-blog-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  padding:12px 18px !important;
  margin-bottom:20px !important;

  border:1px solid rgba(97,52,183,.12) !important;
  border-radius:999px !important;

  background:linear-gradient(
    90deg,
    rgba(233,221,251,.95) 0%,
    rgba(255,255,255,.96) 100%
  ) !important;

  color:#6134B7 !important;

  font-family:Inter, Arial, sans-serif !important;
  font-size:14px !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:.03em !important;
  text-transform:uppercase !important;

  box-shadow:
    0 14px 35px rgba(97,52,183,.11),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.mot-blog-badge::before{
  content:"📘" !important;
  font-size:15px !important;
}

/* =========================================================
   TITLE
========================================================= */

.mot-blog-title{
  margin:0 0 24px !important;

  font-family:Inter, Arial, sans-serif !important;
  font-size:58px !important;
  line-height:1.12 !important;
  font-weight:650 !important;
  letter-spacing:-2.3px !important;

  color:#16191F !important;

  text-wrap:balance !important;
}

.mot-blog-title span{
  font-weight:650 !important;

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

  -webkit-background-clip:text !important;
  background-clip:text !important;

  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.mot-blog-desc{
  max-width:670px !important;
  margin:0 !important;

  font-family:Inter, Arial, sans-serif !important;
  font-size:20px !important;
  line-height:1.72 !important;
  font-weight:400 !important;
  letter-spacing:-.2px !important;

  color:#6B6B6B !important;
}

/* =========================================================
   SEARCH
========================================================= */

.mot-blog-search{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;

  width:100% !important;
  max-width:500px !important;

  margin-top:28px !important;
}

.mot-blog-search input{
  flex:1 1 auto !important;

  width:auto !important;
  max-width:none !important;
  height:54px !important;

  padding:0 24px !important;

  border:1px solid rgba(97,52,183,.12) !important;
  border-radius:999px !important;
  outline:none !important;

  background:rgba(255,255,255,.90) !important;
  color:#16191F !important;

  font-family:Inter, Arial, sans-serif !important;
  font-size:15px !important;
  font-weight:400 !important;

  box-shadow:
    0 14px 34px rgba(69,33,151,.08),
    inset 0 1px 0 rgba(255,255,255,.92) !important;

  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease !important;
}

.mot-blog-search input::placeholder{
  color:#8A8793 !important;
  opacity:1 !important;
}

.mot-blog-search input:hover{
  border-color:rgba(97,52,183,.24) !important;
  background:#ffffff !important;
}

.mot-blog-search input:focus{
  border-color:rgba(97,52,183,.58) !important;
  background:#ffffff !important;

  box-shadow:
    0 0 0 4px rgba(97,52,183,.10),
    0 16px 36px rgba(69,33,151,.11) !important;
}

.mot-blog-search button{
  position:relative !important;
  overflow:hidden !important;

  flex:0 0 auto !important;

  height:54px !important;
  padding:0 34px !important;

  border:1px solid rgba(97,52,183,.88) !important;
  border-radius:999px !important;

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

  color:#ffffff !important;

  font-family:Inter, Arial, sans-serif !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1 !important;

  cursor:pointer !important;

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

  text-shadow:0 1px 1px rgba(0,0,0,.12) !important;

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease !important;
}

/* Premium light sweep */
.mot-blog-search button::before{
  content:"" !important;

  position:absolute !important;
  top:-45% !important;
  left:-85% !important;

  width:55% !important;
  height:190% !important;

  background:linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.14) 34%,
    rgba(255,255,255,.84) 50%,
    rgba(255,255,255,.14) 66%,
    transparent 100%
  ) !important;

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

.mot-blog-search button:hover{
  transform:translateY(-2px) !important;

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

  color:#ffffff !important;

  box-shadow:
    0 18px 42px rgba(97,52,183,.40),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

.mot-blog-search button:hover::before{
  left:130% !important;
}

.mot-blog-search button:focus-visible{
  outline:3px solid rgba(97,52,183,.24) !important;
  outline-offset:3px !important;
}

/* =========================================================
   BLOG TAGS
   Compact Premium Glass Style
========================================================= */

.mot-blog-tags{
  width:100% !important;
  max-width:500px !important;

  margin-top:18px !important;
  padding:8px !important;

  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;

  border:1px solid rgba(97,52,183,.15) !important;
  border-radius:20px !important;

  background:rgba(255,255,255,.72) !important;

  box-shadow:
    0 16px 38px rgba(69,33,151,.09),
    inset 0 1px 0 rgba(255,255,255,.92) !important;

  backdrop-filter:blur(18px) saturate(1.06) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.06) !important;
}

.mot-blog-tag{
  min-width:0 !important;
  min-height:46px !important;

  padding:8px 10px !important;

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

  border:1px solid transparent !important;
  border-radius:15px !important;

  background:rgba(233,221,251,.24) !important;

  text-decoration:none !important;

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;
}

.mot-blog-tag:hover{
  transform:translateY(-2px) !important;

  border-color:rgba(97,52,183,.12) !important;
  background:#ffffff !important;

  box-shadow:
    0 10px 24px rgba(97,52,183,.14),
    inset 0 1px 0 rgba(255,255,255,.90) !important;
}

.mot-blog-tag-icon{
  width:26px !important;
  height:26px !important;
  min-width:26px !important;

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

  border:1px solid rgba(97,52,183,.08) !important;
  border-radius:9px !important;

  background:radial-gradient(
    circle at 30% 20%,
    #ffffff 0%,
    #F7F3FF 46%,
    #E9DDFB 100%
  ) !important;

  color:#6134B7 !important;

  font-size:13px !important;
  line-height:1 !important;

  box-shadow:
    0 7px 14px rgba(97,52,183,.14),
    inset 0 1px 0 rgba(255,255,255,.96) !important;

  transition:
    transform .28s ease,
    box-shadow .28s ease !important;
}

.mot-blog-tag:hover .mot-blog-tag-icon{
  transform:translateY(-1px) scale(1.05) !important;

  box-shadow:
    0 10px 20px rgba(97,52,183,.20),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

.mot-blog-tag span:last-child{
  min-width:0 !important;

  color:#16191F !important;

  font-family:Inter, Arial, sans-serif !important;
  font-size:11.5px !important;
  line-height:1.15 !important;
  font-weight:750 !important;

  white-space:nowrap !important;
}

/* =========================================================
   LAPTOP
========================================================= */

@media(max-width:1366px){

  .mot-blog-hero{
    min-height:560px !important;
    background-position:60% center !important;
  }

  .mot-blog-hero-inner{
    padding-left:5vw !important;
    padding-right:3vw !important;
  }

  .mot-blog-hero-content{
    flex:0 0 46% !important;
    max-width:560px !important;
  }

  .mot-blog-title{
    font-size:50px !important;
    line-height:1.08 !important;
  }

  .mot-blog-desc{
    font-size:18px !important;
    line-height:1.6 !important;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1024px){

  .mot-blog-hero{
    min-height:auto !important;
    padding:70px 0 72px !important;
    background-position:center right !important;
  }

  .mot-blog-hero::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    background:linear-gradient(
      90deg,
      rgba(255,255,255,.96) 0%,
      rgba(248,244,255,.90) 52%,
      rgba(233,221,251,.56) 100%
    ) !important;

    z-index:1 !important;
    pointer-events:none !important;
  }

  .mot-blog-hero::after{
    z-index:1 !important;
  }

  .mot-blog-hero-inner{
    position:relative !important;
    z-index:2 !important;

    display:block !important;

    min-height:auto !important;

    padding-left:6vw !important;
    padding-right:6vw !important;
  }

  .mot-blog-hero-content{
    width:70% !important;
    max-width:620px !important;

    text-align:left !important;
  }

  .mot-blog-title{
    font-size:46px !important;
  }

  .mot-blog-search,
  .mot-blog-tags{
    max-width:520px !important;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .mot-blog-hero{
    min-height:auto !important;

    padding:52px 18px 58px !important;

    background-position:center bottom !important;
  }

  .mot-blog-hero::before{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.98) 0%,
      rgba(248,244,255,.94) 58%,
      rgba(233,221,251,.80) 100%
    ) !important;
  }

  .mot-blog-hero::after{
    top:-130px !important;
    left:-180px !important;

    width:420px !important;
    height:420px !important;

    opacity:.75 !important;
  }

  .mot-blog-hero-inner{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .mot-blog-hero-content{
    width:100% !important;
    max-width:100% !important;

    text-align:center !important;
  }

  .mot-blog-badge{
    padding:10px 15px !important;
    margin-bottom:18px !important;

    font-size:11px !important;
  }

  .mot-blog-title{
    margin-bottom:18px !important;

    font-size:38px !important;
    line-height:1.08 !important;
    letter-spacing:-1.4px !important;
  }

  .mot-blog-desc{
    max-width:340px !important;
    margin:0 auto !important;

    font-size:16px !important;
    line-height:1.65 !important;
  }

  .mot-blog-search{
    display:none !important;
  }

  .mot-blog-tags{
    max-width:340px !important;

    margin:18px auto 0 !important;

    grid-template-columns:1fr !important;

    border-radius:22px !important;
  }

  .mot-blog-tag{
    min-height:44px !important;
  }

  .mot-blog-tag span:last-child{
    font-size:12px !important;
  }

  .mot-blog-hero-image{
    display:none !important;
  }
}

/* =========================================================
   REDUCED MOTION / ACCESSIBILITY
========================================================= */

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

  .mot-blog-search input,
  .mot-blog-search button,
  .mot-blog-search button::before,
  .mot-blog-tag,
  .mot-blog-tag-icon{
    transition:none !important;
  }

  .mot-blog-search button:hover,
  .mot-blog-tag:hover,
  .mot-blog-tag:hover .mot-blog-tag-icon{
    transform:none !important;
  }
}/* End custom CSS */
/* Start custom CSS for loop-grid, class: .elementor-element-037b978 */@media (max-width: 767px){

  .elementor-loop-container,
  .elementor-loop-container .e-loop-item{
    justify-items:center !important;
    align-items:center !important;
    text-align:center !important;
  }

  .elementor-loop-container .e-loop-item .elementor-widget-image,
  .elementor-loop-container .e-loop-item img{
    margin-left:auto !important;
    margin-right:auto !important;
    display:block !important;
  }

  .elementor-loop-container .e-loop-item .elementor-heading-title,
  .elementor-loop-container .e-loop-item .elementor-widget-heading{
    text-align:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

}/* End custom CSS */
/* Start custom CSS for icon-list, class: .elementor-element-ff6cc46 */.mot-modern-categories .elementor-icon-list-items{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.mot-modern-categories .elementor-icon-list-item{
  transition:all .28s ease;
}

.mot-modern-categories .elementor-icon-list-item a{
  display:flex;
  align-items:center;
  justify-content:center;

  padding:14px 18px;

  background:#ffffff;
  border:1px solid #ececf3;

  border-radius:18px;

  color:#1f2937 !important;

  font-size:16px;
  font-weight:600;

  text-decoration:none !important;

  transition:all .28s ease;

  box-shadow:
    0 4px 14px rgba(20,20,43,.03);
}

/* hover */
.mot-modern-categories .elementor-icon-list-item a:hover{
  transform:translateY(-3px);

  border-color:#7b61ff;

  background:linear-gradient(
    135deg,
    rgba(123,97,255,.08),
    rgba(56,182,255,.06)
  );

  color:#7b61ff !important;

  box-shadow:
    0 14px 30px rgba(123,97,255,.12);
}
.elementor-17809 .elementor-element.elementor-element-ff6cc46{
  background:#fff;
  border:1px solid #ececf3;
  border-radius:30px;
  padding:32px;

  box-shadow:
    0 10px 35px rgba(20,20,43,.04);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e450529 */.mot-blog-card{
  position:relative;
  overflow:hidden;

  background:rgba(255,255,255,0.88);
  
  border:1px solid rgba(120,120,180,0.10);

  border-radius:28px;

  box-shadow:
    0 10px 35px rgba(31,41,55,0.05),
    0 2px 10px rgba(99,102,241,0.04);

  backdrop-filter:blur(10px);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}

/* soft glow */
.mot-blog-card::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.55),
      rgba(255,255,255,0.02)
    );

  pointer-events:none;
}

/* hover */
.mot-blog-card:hover{
  transform:translateY(-4px);

  border-color:rgba(124,58,237,0.16);

  box-shadow:
    0 18px 45px rgba(99,102,241,0.10),
    0 8px 18px rgba(0,0,0,0.06);
}/* End custom CSS */