/**
 * COMPLETE SOLUTION - Header + Template Fix
 */

/* Ensure header stays on top */
.elementor-element-1c3143f {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #ffffff !important;
}

/* Push template content below header */
.elementor-188 {
    padding-top: 10px !important;
    position: relative;
    z-index: 1 !important;
}

/* Sticky header state */
.elementor-sticky--active {
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}











/* ===========================================
   COMPLETE CSS FOR PMI UGANDA REGISTRATION PAGE
   ===========================================
   This stylesheet enhances the WordPress block for "How to Register" with PMI branding.
   Key features: PMI color palette (Aqua #00B4D8, Tangerine #F28C38, Violet #7B2CBF),
   card-based layouts for symmetry, hover effects, gradients, and responsive design.
   Paste into Appearance > Customize > Additional CSS.
   =========================================== */

/* ===========================================
   REGISTRATION CONTAINER STYLES
   =========================================== */
.registration-container {
  max-width: 1200px; /* Limits width for readability on large screens */
  margin: 0 auto; /* Centers the container */
  padding: 40px 20px; /* Vertical padding for breathing room, horizontal for edges */
  font-family: 'Arial', sans-serif; /* Clean, professional font stack */
  line-height: 1.6; /* Improves readability */
  color: #333; /* Dark gray text for contrast */
  background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%); /* Subtle aqua-to-violet gradient for energy */
  border-radius: 20px; /* Rounded corners for modern feel */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Soft drop shadow for depth */
}

/* ===========================================
   TITLE AND INTRO STYLES
   =========================================== */
.registration-title {
  text-align: center; /* Centers the title */
  font-size: 2.5em; /* Large, impactful size */
  color: #000000; /* Black for strong PMI-brand contrast */
  margin-bottom: 10px; /* Tight spacing below */
  position: relative; /* Allows icon positioning */
}

.title-icon {
  font-size: 0.8em; /* Smaller icon relative to title */
  margin-right: 10px; /* Space from text */
  animation: bounce 2s infinite; /* Subtle bounce for engagement */
}

/* Keyframe animation for title icon bounce effect */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); } /* Start and end positions */
  40% { transform: translateY(-10px); } /* Peak up */
  60% { transform: translateY(-5px); } /* Slight down for realism */
}

.intro-text {
  text-align: center; /* Centers for flow */
  font-size: 1.2em; /* Slightly larger for emphasis */
  color: #7f8c8d; /* Muted gray for secondary text */
  margin-bottom: 20px; /* Space before buttons */
  font-style: italic; /* Italic for inspirational tone */
}

/* ===========================================
   AUTH BUTTONS STYLES
   =========================================== */
.auth-buttons {
  display: flex; /* Flexbox for horizontal layout */
  justify-content: center; /* Centers buttons */
  gap: 15px; /* Space between buttons */
  margin-bottom: 40px; /* Space below for sections */
  flex-wrap: wrap; /* Wraps on small screens */
}

.btn-secondary {
  display: inline-block; /* Inline for button sizing */
  background: linear-gradient(135deg, #7B2CBF, #663399); /* Violet gradient for sign-in */
  color: white; /* White text for contrast */
  padding: 12px 25px; /* Comfortable padding */
  text-decoration: none; /* Removes underline */
  border-radius: 50px; /* Pill shape for modern look */
  font-weight: bold; /* Bold for emphasis */
  font-size: 1.1em; /* Readable size */
  transition: all 0.3s ease; /* Smooth hover transitions */
  box-shadow: 0 4px 12px rgba(123, 44, 191, 0.3); /* Violet shadow */
}

.btn-secondary:hover {
  transform: translateY(-2px); /* Slight lift on hover */
  box-shadow: 0 6px 20px rgba(123, 44, 191, 0.4); /* Deeper shadow */
  background: linear-gradient(135deg, #663399, #7B2CBF); /* Reversed gradient */
}

.btn-primary {
  display: inline-block; /* Inline for button sizing */
  background: linear-gradient(135deg, #00B4D8, #005EB8); /* Aqua to dark blue gradient */
  color: white; /* White text */
  padding: 12px 25px; /* Padding */
  text-decoration: none; /* No underline */
  border-radius: 50px; /* Rounded pill */
  font-weight: bold; /* Bold */
  font-size: 1.1em; /* Size */
  transition: all 0.3s ease; /* Transitions */
  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3); /* Aqua shadow */
}

.btn-primary:hover {
  transform: translateY(-2px); /* Lift */
  box-shadow: 0 6px 20px rgba(0, 180, 216, 0.4); /* Deeper shadow */
  background: linear-gradient(135deg, #005EB8, #00B4D8); /* Reversed gradient */
}

/* ===========================================
   BENEFITS SECTION STYLES
   =========================================== */
.benefits-section {
  background: linear-gradient(135deg, #f3e5f5 0%, #e8f5e8 100%); /* Light violet to green for warmth */
  padding: 40px; /* Ample padding */
  border-radius: 15px; /* Rounded */
  margin-bottom: 50px; /* Space below */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Shadow */
  text-align: center; /* Centered content */
}

.section-title {
  font-size: 2em; /* Large title */
  color: #000000; /* Black */
  margin-bottom: 10px; /* Tight margin */
}

.section-subtitle {
  color: #7f8c8d; /* Muted gray */
  margin-bottom: 30px; /* Space for grid */
  font-size: 1.1em; /* Slightly larger */
}

.benefits-grid {
  display: grid; /* Grid for responsive cards */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Auto-fit columns, min 250px for symmetry */
  gap: 25px; /* Even gaps */
  margin-bottom: 30px; /* Space for testimonial */
  justify-content: center; /* Centers grid for balance */
}

.benefit-card {
  background: white; /* White background */
  padding: 25px; /* Padding */
  border-radius: 12px; /* Rounded */
  transition: all 0.3s ease; /* Smooth hovers */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}

.benefit-card:hover {
  transform: translateY(-5px); /* Gentle lift */
  box-shadow: 0 10px 25px rgba(0, 180, 216, 0.2); /* Aqua-tinted shadow */
}

.benefit-icon {
  font-size: 3em; /* Large icon */
  margin-bottom: 15px; /* Space below */
  display: block; /* Block for centering */
}

.benefit-card h4 {
  color: #000000; /* Black */
  margin: 10px 0; /* Vertical margins */
  font-size: 1.3em; /* Heading size */
}

.benefit-card p {
  color: #555; /* Dark gray */
  margin: 0; /* No extra margin */
}

.testimonial {
  background: #fff; /* White bg */
  padding: 20px; /* Padding */
  border-left: 4px solid #00B4D8; /* Aqua accent border */
  font-style: italic; /* Italic quote */
  color: #2c3e50; /* Dark blue-gray */
  margin-top: 20px; /* Space above */
}

.testimonial cite {
  display: block; /* Block for new line */
  margin-top: 10px; /* Space above */
  font-weight: bold; /* Bold cite */
  color: #7B2CBF; /* Violet */
  font-style: normal; /* Normal for name */
}

/* ===========================================
   STEPS GRID STYLES
   =========================================== */
.steps-grid {
  display: grid; /* Grid layout */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Auto-fit, min 250px for 4-card symmetry on large screens */
  gap: 25px; /* Reduced gap for tighter fit */
  margin-bottom: 50px; /* Space below */
  justify-content: center; /* Centers for no empty right space */
}

.step-card {
  background: white; /* White bg */
  padding: 30px; /* Generous padding */
  border-radius: 15px; /* Rounded */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Shadow */
  text-align: center; /* Centered text */
  transition: all 0.3s ease; /* Hovers */
  position: relative; /* For pseudo-element */
  overflow: hidden; /* Hides overflow on hover */
}

.step-card::before {
  content: ''; /* Empty pseudo-element for top bar */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #00B4D8, #F28C38); /* Aqua to tangerine bar */
  transform: scaleX(0); /* Starts hidden */
  transition: transform 0.3s ease; /* Animates on hover */
}

.step-card:hover {
  transform: translateY(-10px); /* Lift on hover */
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Deeper shadow */
  background: linear-gradient(135deg, #fff 0%, #e3f2fd 100%); /* Subtle aqua tint */
}

.step-card:hover::before {
  transform: scaleX(1); /* Reveals bar on hover */
}

.step-number {
  position: absolute; /* Overlays card */
  top: -15px; /* Positions above card */
  left: 50%;
  transform: translateX(-50%); /* Centers */
  background: #00B4D8; /* Aqua bg */
  color: white; /* White text */
  width: 30px;
  height: 30px;
  border-radius: 50%; /* Circle */
  display: flex; /* Flex for centering */
  align-items: center;
  justify-content: center;
  font-weight: bold; /* Bold number */
  font-size: 1.1em; /* Size */
  box-shadow: 0 4px 10px rgba(0, 180, 216, 0.3); /* Aqua shadow */
}

.step-icon {
  font-size: 3em; /* Large emoji icon */
  margin-bottom: 15px; /* Space */
  display: block; /* Block centering */
}

.step-card h3 {
  margin: 15px 0; /* Vertical space */
  color: #000000; /* Black */
  font-size: 1.4em; /* Heading size */
}

.step-card p {
  margin: 0; /* Tight */
  color: #555; /* Gray */
}

.step-card a {
  color: #00B4D8; /* Aqua links */
  text-decoration: none; /* No underline */
  font-weight: bold; /* Bold */
}

.step-card a:hover {
  text-decoration: underline; /* Underline on hover */
}

/* ===========================================
   PRICING SECTION STYLES
   =========================================== */
.pricing-section {
  background: white; /* Clean white */
  padding: 40px; /* Padding */
  border-radius: 15px; /* Rounded */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Shadow */
  text-align: center; /* Centered */
}

.pricing-title {
  font-size: 2em; /* Large */
  color: #000000; /* Black */
  margin-bottom: 10px; /* Tight */
}

.pricing-subtitle {
  color: #7f8c8d; /* Muted */
  margin-bottom: 30px; /* Space for cards */
  font-size: 1.1em; /* Size */
  font-style: italic; /* Italic for persuasion */
}

/* ===========================================
   PRICING CARDS STYLES
   =========================================== */
.pricing-cards {
  display: grid; /* Grid */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Auto-fit, min 200px for 4-card balance */
  gap: 20px; /* Gaps */
  margin-bottom: 30px; /* Space below */
  justify-content: center; /* Centers to avoid right gaps */
}

.price-card {
  background: #f8f9fa; /* Light gray bg */
  padding: 25px; /* Padding */
  border-radius: 12px; /* Rounded */
  transition: all 0.3s ease; /* Hovers */
  border: 2px solid transparent; /* Hidden border initially */
}

.price-card:hover {
  transform: scale(1.05); /* Slight scale up */
  border-color: #00B4D8; /* Aqua border on hover */
  box-shadow: 0 5px 15px rgba(0, 180, 216, 0.2); /* Aqua shadow */
}

.price-icon {
  font-size: 2.5em; /* Icon size */
  margin-bottom: 10px; /* Space */
  display: block; /* Centering */
}

.price-card h4 {
  margin: 10px 0; /* Margins */
  color: #000000; /* Black */
}

.price {
  font-size: 1.8em; /* Large price */
  font-weight: bold; /* Bold */
  color: #F28C38; /* Tangerine for positivity */
}

.total-card {
  background: linear-gradient(135deg, #F28C38, #E67E22); /* Tangerine gradient for total */
  color: white; /* White text */
}

.total-card:hover {
  border-color: #F28C38; /* Tangerine border */
  box-shadow: 0 5px 15px rgba(242, 140, 56, 0.3); /* Matching shadow */
}

.total-card .price-icon,
.total-card h4,
.total-card .price {
  color: white; /* Overrides for total card */
}

.student-note {
  font-size: 1.1em; /* Size */
  color: #7B2CBF; /* Violet for highlight */
  font-weight: bold; /* Bold */
  margin: 20px 0; /* Vertical space */
}

/* ===========================================
   CTA BUTTON STYLES
   =========================================== */
.cta-button {
  margin-top: 30px; /* Space above */
}

.cta-button .btn-primary {
  padding: 15px 30px; /* Larger padding for main CTA */
  font-size: 1.2em; /* Bigger text */
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */
/* Mobile and tablet optimizations for symmetry and usability */
@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr; /* Single column */
    gap: 20px; /* Smaller gap */
  }
  
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr); /* Two columns on mobile */
  }
  
  .registration-title {
    font-size: 2em; /* Smaller title */
  }
  
  .auth-buttons {
    flex-direction: column; /* Stack buttons */
    align-items: center; /* Center */
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%; /* Full width */
    max-width: 250px; /* Cap width */
    text-align: center; /* Center text */
  }
  
  .benefits-grid {
    grid-template-columns: 1fr; /* Single column */
    gap: 20px; /* Smaller gap */
  }
}



/**
 * COMPLETE RESPONSIVE SOLUTION FOR CONTENT SECTION
 */

.container.single-content-inner {
    position: relative !important;
    z-index: 1 !important; /* Keep content below header (z-index: 9999) */
    margin-top: 120px !important; /* Default desktop spacing */
    
    /* Responsive adjustments */
    transition: margin-top 0.3s ease;
}

/* Tablet devices */
@media (max-width: 1024px) {
    .container.single-content-inner {
        margin-top: 100px !important;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .container.single-content-inner {
        margin-top: 80px !important;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .container.single-content-inner {
        margin-top: 70px !important;
    }
}