.elementor-15651 .elementor-element.elementor-element-e5b71f6{--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-ae97a14 *//* ===== FedFlix Courses – Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Inter+Tight:wght@700;800&display=swap');

/* Base override for Elementor inside this section */
.section.courses * {
  box-sizing: border-box !important;
}

/* Section + container */
.section.courses {
  background: #0d0d14 !important;
  position: relative !important;
  padding: 6rem 0 !important;
  overflow: hidden !important;
}

.section.courses > .container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 1.5rem !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Background effects */
.courses-noise {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.04 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E") !important;
}

.courses-scanlines {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0.03 !important;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.02) 3px,
    rgba(255,255,255,0.02) 4px
  ) !important;
}

.courses-glow {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.courses-glow-1 {
  top: 25% !important;
  left: 25% !important;
  width: 500px !important;
  height: 500px !important;
  background: rgba(123,103,168,0.08) !important;
  filter: blur(180px) !important;
}

.courses-glow-2 {
  bottom: 25% !important;
  right: 25% !important;
  width: 400px !important;
  height: 400px !important;
  background: rgba(215,46,93,0.06) !important;
  filter: blur(160px) !important;
}

.courses-glow-3 {
  top: 50% !important;
  right: 33% !important;
  width: 300px !important;
  height: 300px !important;
  background: rgba(255,121,19,0.05) !important;
  filter: blur(140px) !important;
}

/* Header */
.courses-header {
  max-width: 42rem !important;
  margin-bottom: 3rem !important;
  animation: courses-fade-in 0.7s ease-out forwards !important;
}

.section.courses .courses-label {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: #d72e5d !important;
  margin-bottom: 1.25rem !important;
}

.section.courses .courses-title {
  display: inline-block !important;
  font-family: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(2.25rem, 6vw, 3.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  margin: 0 0 1.25rem !important;
}

.section.courses .courses-title-flix {
  background: linear-gradient(to right, #d72e5d, #ff7913) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.courses-subtitle {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #9ca3af !important;
  font-size: 1.125rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.25rem !important;
}

/* Grid */
.courses-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
}

/* Card shell */
.course-card {
  position: relative !important;
  background: #18181f !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
  transition: box-shadow 0.5s, transform 0.5s !important;
  height: 100% !important;
  transform: none !important;
  animation: courses-fade-in 0.7s ease-out forwards !important;
}

.course-card:nth-child(2) {
  animation-delay: 0.12s !important;
}

.course-card:nth-child(3) {
  animation-delay: 0.24s !important;
}

.section.courses .course-card:hover {
  box-shadow: 0 25px 50px rgba(0,0,0,0.4) !important;
  transform: translateY(-4px) !important;
}

/* Make the whole card clickable and handle flex layout */
.course-card-link {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
}

/* Screen area */
.course-screen {
  position: relative !important;
  height: 10rem !important;
  background: #0a0a0f !important;
  overflow: hidden !important;
  cursor: pointer !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
}

.course-scanlines {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.07 !important;
  pointer-events: none !important;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.03) 2px,
    rgba(255,255,255,0.03) 4px
  ) !important;
}

.course-glow {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.15 !important;
}

.course-glow-1a { background: radial-gradient(ellipse at center, #7b67a8, transparent 70%) !important; }
.course-glow-2a { background: radial-gradient(ellipse at center, #d72e5d, transparent 70%) !important; }
.course-glow-3a { background: radial-gradient(ellipse at center, #ff7913, transparent 70%) !important; }

.course-play-btn {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.course-play-circle {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.4 !important;
  transition: all 0.5s !important;
}

.course-play-circle-1 {
  background: rgba(123,103,168,0.2) !important;
  border: 2px solid rgba(123,103,168,0.4) !important;
}
.course-play-circle-2 {
  background: rgba(215,46,93,0.2) !important;
  border: 2px solid rgba(215,46,93,0.4) !important;
}
.course-play-circle-3 {
  background: rgba(255,121,19,0.2) !important;
  border: 2px solid rgba(255,121,19,0.4) !important;
}

.course-card:hover .course-play-circle {
  opacity: 0.9 !important;
  transform: scale(1.1) !important;
}

/* Channel label */
.course-channel {
  position: absolute !important;
  bottom: 0.75rem !important;
  right: 1rem !important;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  opacity: 0.3 !important;
}
.course-channel-1 { color: #7b67a8 !important; }
.course-channel-2 { color: #d72e5d !important; }
.course-channel-3 { color: #ff7913 !important; }

/* Tracking line */
.course-tracking-line {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  opacity: 0.25 !important;
}

.course-tracking-line-1 {
  top: 38% !important;
  background: linear-gradient(to right, transparent 10%, #7b67a8 30%, #7b67a8 70%, transparent 90%) !important;
}
.course-tracking-line-2 {
  top: 38% !important;
  background: linear-gradient(to right, transparent 10%, #d72e5d 30%, #d72e5d 70%, transparent 90%) !important;
}
.course-tracking-line-3 {
  top: 38% !important;
  background: linear-gradient(to right, transparent 10%, #ff7913 30%, #ff7913 70%, transparent 90%) !important;
}

/* Inner content */
.course-inner {
  padding: 1.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.course-name {
  font-family: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.3 !important;
  letter-spacing: -0.025em !important;
}

.course-desc {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: #9ca3af !important;
  line-height: 1.6 !important;
  margin-bottom: 1.25rem !important;
}

.course-duration {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 1rem !important;
}

/* Footer pinned to bottom */
.course-footer {
  padding-top: 1rem !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: auto !important;
}

.course-footer > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.course-pricing-label {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
}

.course-pricing-label-1 { color: #7b67a8 !important; }
.course-pricing-label-2 { color: #d72e5d !important; }
.course-pricing-label-3 { color: #ff7913 !important; }

.course-pricing-detail {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: #6b7280 !important;
  margin-top: 0.1rem !important;
}

/* Power button – nostalgic glow version */
.course-watch-btn {
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background-color: transparent !important;
  background-image: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.12), transparent 72%) !important;
  color: #9ca3af !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: box-shadow 0.3s, border-color 0.3s, background-image 0.3s, color 0.3s !important;
}

.course-watch-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}

/* Nostalgic glow on hover – per card */
.course-card:nth-child(1):hover .course-watch-btn {
  border-color: rgba(123,103,168,0.6) !important;
  color: #e5e7eb !important;
  box-shadow:
    0 0 0 1px rgba(123,103,168,0.4),
    0 0 18px rgba(123,103,168,0.6) !important;
  background-image: radial-gradient(circle at 30% 30%, rgba(123,103,168,0.3), transparent 65%) !important;
}

.course-card:nth-child(2):hover .course-watch-btn {
  border-color: rgba(215,46,93,0.6) !important;
  color: #f9fafb !important;
  box-shadow:
    0 0 0 1px rgba(215,46,93,0.4),
    0 0 18px rgba(215,46,93,0.6) !important;
  background-image: radial-gradient(circle at 30% 30%, rgba(215,46,93,0.3), transparent 65%) !important;
}

.course-card:nth-child(3):hover .course-watch-btn {
  border-color: rgba(255,121,19,0.7) !important;
  color: #f9fafb !important;
  box-shadow:
    0 0 0 1px rgba(255,121,19,0.5),
    0 0 18px rgba(255,121,19,0.6) !important;
  background-image: radial-gradient(circle at 30% 30%, rgba(255,121,19,0.35), transparent 65%) !important;
}

/* Simple fade-in keyframe */
@keyframes courses-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (min-width: 768px) {
  .section.courses {
    padding: 8rem 0 !important;
  }
  .courses-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
  }
}/* End custom CSS */