/* base layout */
.home-benefits-row {
  display: flex;
  gap: 16px;
  flex-wrap: nowrap;         /* force items to stay in one row */
}

/* cards */
.home-benefit-card {
  flex: 0 0 50%;             /* each card takes half the width */
  min-width: 0;              /* allow shrinking on small screens */
}

/* optional: small text & padding for very small screens */
@media (max-width: 480px) {
  .home-benefit-card {
    padding: 14px 10px;
  }

  .home-benefit-text {
    font-size: 12px;
  }
}

/* Base container */
.bg-eclipse-left,
.bg-eclipse-right {
  position: relative;
  overflow: hidden; /* hides the unwanted half */
}

/* Pseudo element */
.bg-eclipse-left::before,
.bg-eclipse-right::before {
  content: "";
  position: absolute;
  top: 0;
  width: 600px;        /* controls circle size */
  height: 600px;       /* must be equal to width */
  background-image: url('https://enaiblex.com/wp-content/uploads/2025/12/Ellipse-13-1.png');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* LEFT HALF (top-left) */
.bg-eclipse-left::before {
  left: -300px;        /* hide left half */
}

/* RIGHT HALF (top-right) */
.bg-eclipse-right::before {
  right: -300px;       /* hide right half */
}

/* Keep content above */
.bg-eclipse-left > *,
.bg-eclipse-right > * {
  position: relative;
  z-index: 1;
}


/* Remove underline from all Elementor buttons */
.elementor-button,
.elementor-button span {
  text-decoration: none !important;
}


.achievements-section {
    position: relative;
    overflow: visible;
    padding: 40px 20px; /* restore some padding for layout */
    background: #ffffff;
    min-height: auto; /* ensure enough height */
}

.achievements-section {
    position: relative;
    overflow: hidden;
}

/* Half-moon background on left center */
.achievements-section::before {
    content: "";
    position: absolute;
    top: 50%;                   /* vertical center */
    left: -400px;               /* shift partially left */
  transform: translateY(-50%);
    width: 600px;               /* control size */
    height: 500px;
    background-image: url('https://enaiblex.com/wp-content/uploads/2025/12/Ellipse-13-1.png');
    background-repeat: no-repeat;
    background-size: cover;     /* fill container */
    background-position: center center;
    opacity: 0.6;               /* lighter, subtle */
    z-index: 0;
    pointer-events: none;
}

/* Ensure content stays above the background */
.achievements-section > * {
    position: relative;
    z-index: 1;
}

/* Base container */
.bg-eclipse-top-left,
.bg-eclipse-top-right {
  position: relative;
  overflow: hidden; /* hides the unwanted part */
}

/* Shared pseudo-element */
.bg-eclipse-top-left::before,
.bg-eclipse-top-right::before {
  content: "";
  position: absolute;
  width: 600px;        /* circle size */
  height: 600px;       /* must equal width */
  background-image: url('https://enaiblex.com/wp-content/uploads/2025/12/Ellipse-13-1.png');
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

/* ===== INLINE HIDDEN TEXT (CLICKABLE BOLD WORDS) ===== */

.inline-toggle {
  display: inline;
}

.toggle-head {
  cursor: pointer;
}

.toggle-body {
  display: none;
}

.inline-toggle.active .toggle-body {
  display: inline;
}

/* ============================================
   FOOTER STYLES
   Add this to Appearance → Customize → Additional CSS
   ============================================ */

.site-footer {
    background: linear-gradient(90deg, #0a0a0f 0%, #1a1a2e 100%);
    padding: 60px 40px 40px;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-footer button:hover {
    background: #2a2a3e !important;
    border-color: #3d3d5e !important;
    transform: translateY(-2px);
}

.site-footer a:hover {
    background: #2a2a3e !important;
    border-color: #3d3d5e !important;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 20px 30px;
    }
}

/*------------------- page background -----------*/
.page-wrapper {
    max-width: 348px;
    margin: 0 auto;
    position: relative;
  
    /*R  L R L R L R L R */
    background-image:
      url("https://enaiblex.com/wp-content/uploads/2025/12/Ellipse-10.png"),
      url("https://enaiblex.com/wp-content/uploads/2025/12/Ellipse-13-1.png"),
      url("https://enaiblex.com/wp-content/uploads/2025/12/Ellipse-10.png"),
			url("https://enaiblex.com/wp-content/uploads/2025/12/Ellipse-13-1.png"),
			url("https://enaiblex.com/wp-content/uploads/2025/12/Ellipse-10.png");
  
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  
    background-position:
      right -90px  top -180px,
      left  -160px top  440px,
      right -90px  top  860px,
	    left  -160px top  1600px,
			right -90px  top  1980px; 
  
    background-size:
      220px auto,
      260px auto,
      220px auto,
	    260px auto,
			220px auto;
  }
  
  .page-wrapper img,
  .page-wrapper div {
    max-width: 100%;
    box-sizing: border-box;
  }


/* Hide the empty content area in your resource grid */
.category-resources .entry-content,
.category-resources .post-content {
    display: none !important;
}


/* 1. Reset the grid container */
.wpr-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    gap: 30px; /* This creates the gap between rows and columns */
    justify-content: center;
}

/* 2. Style the individual grid items */
.wpr-grid-item {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: calc(33.33% - 20px) !important; /* Adjust based on your columns */
    display: flex !important;
    margin-bottom: 20px; /* Fallback gap for older browsers */
}

/* 3. The Inner Card (The white box) */
.wpr-grid-item-inner {
    height: 100% !important;
    width: 100%;
	background-color: #ffffff !important; /* Ensures the card isn't transparent */
    border: 1px solid #e0e0e0 !important;
    display: flex;
    flex-direction: column;
    padding-bottom: 20px; /* Creates space at the very bottom of the card */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Optional: makes cards pop */
}

/* 4. Add vertical spacing between elements inside the card */
.wpr-grid-item-below-content {
    padding: 20px !important; /* Space inside the card around the text */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 5. Space between Title and Excerpt */
.wpr-grid-item-title {
    margin-bottom: 15px !important;
}