/* =============================================================================
   CUSTOM STYLES - ProCom Academy Education Demo
   ============================================================================= */

.custom-bg-color-grey-1 { background-color: #f4f4f4 !important; }
.custom-font-1 { font-family: Georgia, serif !important; }

/* =============================================================================
   HERO SECTION
   ============================================================================= */
.hero-section {
  min-height: 500px;
  background: linear-gradient(135deg, #f4f4f4 0%, #e8e8e8 100%);
}

.hero-section .owl-carousel,
.hero-section .owl-stage-outer,
.hero-section .owl-stage,
.hero-section .owl-item {
  height: 100%;
}

.hero-section .owl-slide {
  min-height: 500px;
  display: flex;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 10;
}

.hero-content h2 {
  line-height: 1.1;
}

/* =============================================================================
   MAIN CONTENT SPACING
   ============================================================================= */
.main {
  padding-top: 0;
}

/* Ensure sections have proper spacing */
.section {
  padding: 60px 0;
}

/* Fix for header not overlapping content when not transparent */
#header:not(.header-transparent) + .main {
  padding-top: 120px;
}

/* When header is transparent, content starts at top */
#header.header-transparent + .main {
  padding-top: 0;
}

/* =============================================================================
   REGISTRATION CARD
   ============================================================================= */
.registration-form .form-control {
  border: 1px solid var(--grey-300);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.registration-form .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(236, 79, 79, 0.1);
}

/* =============================================================================
   TESTIMONIAL CAROUSEL
   ============================================================================= */
.testimonial-carousel .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.testimonial-carousel .owl-nav button {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  background: transparent !important;
  color: var(--secondary) !important;
  font-size: 1.5rem;
}

.testimonial-carousel .owl-nav .owl-prev {
  margin-left: -50px;
}

.testimonial-carousel .owl-nav .owl-next {
  margin-right: -50px;
}

/* =============================================================================
   BLOG CARDS
   ============================================================================= */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

.card-img-top {
  transition: transform 0.3s ease;
}

.card:hover .card-img-top {
  transform: scale(1.05);
}

.card {
  overflow: hidden;
}

/* HERO SLIDER */
.custom-slider-el-1 { max-width: 30%; right: 12%; }
.custom-slider-el-2 { max-width: 30%; left: 12%; }
.custom-slider-text-block { max-width: 500px; }

.custom-slider-text-1 {
  font-size: 100px;
  text-transform: none;
  letter-spacing: 0.01em;
}

.custom-slider-text-1 em {
  display: inline-block;
  font-style: normal;
  color: transparent;
  font-size: 155px;
  transform: rotate(-15deg);
  position: relative;
  top: 37px;
  margin-right: 4px;
  -webkit-text-stroke: 2px var(--primary);
}

@media (max-width: 991px) {
  .custom-slider-text-1 { font-size: 40px; }
  .custom-slider-text-1 em { font-size: 45px; top: 5px; }
}

/* DECORATIVE ELEMENTS */
.custom-element { position: absolute; pointer-events: none; }
.custom-element.custom-element-pos-1 { top: 30%; left: -35%; }
.custom-element.custom-element-pos-2 { bottom: -15%; right: -35%; }

/* COUNTDOWN */
.custom-countdown-style-1 { background: var(--grey-100); border-radius: 8px; }
.custom-countdown-style-1 .number { color: var(--primary); }

@media (max-width: 767px) {
  .custom-course-detail .border-right,
  .custom-instructor-details .border-right { border: 0 !important; }
}