/* ================================================================
   aliHossain Academy — Elementor section tweaks.

   Small fixes for Elementor-built pages (Home, About, Contact).
   Enqueued late (inc/enqueue.php) so it prints after Elementor's own
   stylesheets and wins equal-specificity ties with them.

   Mobile breakpoint is 768px to match Elementor's own mobile switch
   (the theme files use 760px).
   ================================================================ */

/* ---- Course button: arrow straightens on hover (Home, About, Contact) ---- */
.ah-course-btn svg {
  transform: translateX(0) rotate(-45deg);
  transition: transform 0.5s ease;
}
.ah-course-btn:hover svg {
  transform: translateX(8px) rotate(0deg);
}

/* ---- Course info row: inline items with dividers (Home) ---- */
.ah-course-info-list ul {
  display: flex;
  gap: 20px;
}
.ah-course-info-list span.elementor-icon-list-text {
  margin-top: -5px;
}
.ah-course-info-list .elementor-icon-list-item {
  border-left: 1px solid var(--muted);
  padding-left: 20px;
}
.ah-course-info-list .elementor-icon-list-item:first-child {
  border-left: 0px solid;
  padding-left: 0px;
}
.ah-course-info-list .elementor-icon-list-item b {
  color: var(--text-2);
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .ah-course-info-list ul {
    display: block;
    gap: 0px;
  }
  .ah-course-info-list .elementor-icon-list-item {
    border-left: 0px solid var(--muted);
    padding-left: 0px;
    margin-bottom: 10px;
  }
}

/* ---- Highlighted hero title hugs its text (About, Contact) ---- */
.ah-hero-highlighted-title .elementor-widget-container {
  display: inline-block;
}

/* ---- Channel counters: 4-up stat cards (About) ---- */
#channelDetail {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
}
#channelDetail .cards,
.ah-about-info-list ul li {
  background-color: var(--e-global-color-f6d6b63);
  padding: 20px;
  border: 1px solid var(--e-global-color-f8f90f0);
  border-radius: 25px 25px 25px 25px;
}
#channelDetail .cards i {
  color: var(--violet-l);
  font-size: 35px;
  margin-bottom: 10px;
}
#channelDetail .cards h4 {
  font-size: 35px;
  line-height: 1em;
  font-weight: bold;
}
#channelDetail .cards .name {
  font-size: 13px;
}
@media screen and (max-width: 768px) {
  #channelDetail {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- About info pills (About) ---- */
.ah-about-info-list ul {
  display: block;
}
.ah-about-info-list ul li.elementor-icon-list-item {
  display: inline-flex;
  padding: 10px 20px;
  flex-wrap: wrap;
  margin-right: 15px;
  margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .ah-about-info-list ul li.elementor-icon-list-item {
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
  }
}

/* ---- Quote box + timeline icons (About, Contact) ---- */
.ah-quote-about,
.ah-timeline-card svg {
  background: #A78BFA25;
}
.ah-timeline-card svg {
  width: 60px;
  height: 60px;
  padding: 15px;
  border-radius: 10px;
}
.ah-timeline-card .elementor-icon-box-description {
  margin-top: -5px;
}