/* Course cards (homepage + Courses page): redesigned look for the theme's
   "services-style4" widget. Same images; markup untouched. */
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 {
  --mt-navy: 23, 31, 50;
  --mt-orange: #ff5421;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(var(--mt-navy), .35);
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
  margin-bottom: 10px;
  isolation: isolate;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -14px rgba(var(--mt-navy), .55);
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4::after { display: none !important; }

.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-part {
  position: relative;
  aspect-ratio: 4 / 3;
  text-align: left !important;
}

/* Photo fills the card and zooms slowly on hover */
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-icons,
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-icon { position: absolute !important; inset: 0; margin: 0; }
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-icon img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4:hover .services-icon img { transform: scale(1.1); }

/* Readable gradient: clear at the top, deep navy behind the text */
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-icon::after {
  display: block !important;
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--mt-navy), 0) 30%, rgba(var(--mt-navy), .55) 58%, rgba(var(--mt-navy), .94) 100%);
  transition: background-color .5s ease;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4:hover .services-icon::after { background-color: rgba(var(--mt-navy), .5); }

/* The theme prints the title three times; keep only the one in the text panel */
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-title4 { display: none !important; }

/* Text panel sits at the bottom of the card, always visible.
   (Doubled classes outrank Elementor's per-page "!important" panel background.) */
.elementor-widget .elementor-widget-container .rs-addon-services.rs-addon-services.services-style4.services-style4 .services-part .services-text {
  position: absolute !important;
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important;
  padding: 0 24px 22px !important;
  z-index: 2;
  text-align: left;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-title .title {
  position: relative;
  margin: 0 !important;
  padding-top: 14px;
  font-family: Rubik, sans-serif;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: .1px;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-title .title::before {
  display: block !important;
  content: "";
  position: absolute; left: 0; top: 0;
  width: 36px; height: 3px;
  border-radius: 3px;
  background: var(--mt-orange);
  transition: width .45s ease;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4:hover .services-text .services-title .title::before { width: 64px; }
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-title .title a {
  color: #fff !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .25);
}
/* Whole card is clickable via the title link */
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-title .title a::after {
  content: ""; position: absolute; inset: -2000px; z-index: 1;
}

/* Description + button slide up on hover */
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-txt,
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-btn-part {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height .5s ease, opacity .4s ease, transform .5s ease, margin .5s ease;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-txt {
  margin: 0 !important;
  font-size: 14.5px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgba(255, 255, 255, .88) !important;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4:hover .services-text .services-txt {
  max-height: 120px; opacity: 1; transform: none; margin-top: 10px !important;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4:hover .services-text .services-btn-part {
  max-height: 60px; opacity: 1; transform: none; margin-top: 14px;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-btn {
  position: relative; z-index: 2;
  display: inline-flex !important;
  align-items: center; gap: 8px;
  padding: 8px 18px !important;
  border-radius: 999px;
  background: var(--mt-orange);
  color: #fff !important;
  font-family: Rubik, sans-serif;
  font-size: 13px; font-weight: 500;
  letter-spacing: .4px; text-transform: uppercase;
  transition: background .3s ease, gap .3s ease;
}
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-btn:hover { background: #fff; color: rgb(var(--mt-navy)) !important; gap: 12px; }
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-btn i,
.elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-btn i::before { font-size: 12px !important; margin: 0 !important; color: inherit !important; }

/* Touch screens have no hover: always show the button, keep text short */
@media (hover: none) {
  .elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-btn-part { max-height: 60px; opacity: 1; transform: none; margin-top: 12px; }
}
@media (max-width: 767px) {
  .elementor-widget .elementor-widget-container .rs-addon-services.services-style4 { margin-bottom: 18px; }
  .elementor-widget .elementor-widget-container .rs-addon-services.services-style4 .services-text .services-title .title { font-size: 19px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-widget .elementor-widget-container .rs-addon-services.services-style4,
  .elementor-widget .elementor-widget-container .rs-addon-services.services-style4 * { transition: none !important; }
}

/* Some cards' Elementor containers have a coloured background that showed at the rounded corners */
.elementor-widget-rs-service-grid > .elementor-widget-container:has(> .services-style4) {
  border-radius: 16px;
  background: transparent !important;
}