/* ============================================================
   CAREER / GO PRO SECTION
   Light background · single-accent stat variant
   ============================================================ */

/* ---------- Ambient glows ---------- */
.career-section {
   position: relative;
   overflow: hidden;
}

.career-section::before,
.career-section::after {
   content: "";
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   pointer-events: none;
   filter: blur(80px);
   z-index: 0;
}

.career-section::before {
   top: -150px;
   right: -150px;
   background: radial-gradient(circle, rgba(250, 199, 117, 0.18) 0%, transparent 70%);
}

.career-section::after {
   bottom: -150px;
   left: -150px;
   background: radial-gradient(circle, rgba(93, 202, 165, 0.10) 0%, transparent 70%);
}

/* ---------- Layout ---------- */
.career-section .career-wrapper {
   position: relative;
   display: grid !important;
   grid-template-columns: 1.05fr 1fr;
   gap: 80px;
   align-items: center;
   z-index: 2;
}

/* ---------- Left content ---------- */
.career-content {
   position: relative;
   z-index: 2;
}

/* Title override — left aligned (overrides bee-section-title centering) */
.career-title .elementor-heading-title {
   text-align: left;
   margin: 0 0 22px;
}

.career-desc {
   color: #475569;
   font-size: 16px;
   line-height: 1.7;
   margin: 0 0 14px;
   max-width: 520px;
}

/* Second paragraph — slightly lighter (uses same class, last-of-type) */
.career-content>.e-paragraph-base+.e-paragraph-base {
   margin: 18px 0 !important;
}

/* ---------- Stats (single-accent variant) ---------- */
.career-section .career-stats {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-bottom: 36px;
   max-width: 520px;
   display:none !important;
}

.career-section .career-stat-item {
   background: #fff;
   border: 1px solid rgba(15, 23, 42, 0.06);
   padding: 18px 16px !important;
   border-radius: 14px;
   position: relative;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
   transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.career-stat-item:hover {
   transform: translateY(-4px);
   border-color: rgba(239, 159, 39, 0.25);
   box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

/* Top accent bar — animates on hover */
.career-section .career-stat-item::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--bee-gold-dark);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.5s ease;
}

.career-stat-item:hover::before {
   transform: scaleX(1);
}

/* Stat value (h3 inside) */
.career-stat-item .elementor-heading-title {
   font-size: 26px;
   font-weight: 700;
   margin: 0 0 4px;
   color: var(--bee-dark-deep) !important;
   letter-spacing: -0.5px;
   line-height: 1;
}

/* Stat label (paragraph inside) */
.career-stat-item .e-paragraph-base {
   font-size: 11px;
   color: #64748b;
   line-height: 1.3;
   letter-spacing: 0.3px;
   text-transform: uppercase;
   margin: 0;
}

/* ---------- Right visual ---------- */
.career-visual {
   position: relative;
   perspective: 1200px;
}

/* Glow halo behind image */
.career-visual::before {
   content: "";
   position: absolute;
   inset: -20px;
   background: linear-gradient(135deg, rgba(250, 199, 117, 0.4), rgba(93, 202, 165, 0.2));
   border-radius: 32px;
   filter: blur(50px);
   opacity: 0.5;
   z-index: 0;
   animation: careerGlowPulse 6s ease-in-out infinite;
}

@keyframes careerGlowPulse {

   0%,
   100% {
      opacity: 0.5;
      transform: scale(1);
   }

   50% {
      opacity: 0.7;
      transform: scale(1.05);
   }
}

.career-section .career-image {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 30px 70px rgba(15, 23, 42, 0.15);
   border: 1px solid rgba(15, 23, 42, 0.06);
   z-index: 1;
   aspect-ratio: 1 / 1;
}

.career-section .career-image img {
   width: 100%;
   height: 100% !important;
   object-fit: cover;
   transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.career-section .career-image:hover img {
   transform: scale(1.06);
}

/* ---------- Floating PADI card (bottom-left) ---------- */
.career-section .career-float-card {
   position: absolute;
   bottom: 30px;
   left: -50px;
   padding: 16px 18px !important;
   display: flex !important;
   align-items: center;
   gap: 14px;
   width: 240px;
   backdrop-filter: blur(2px);
   background: rgba(2, 16, 31, 0.8);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
   z-index: 3;
}

/* PADI logo block */
.career-section .career-float-padi-logo {
   width: 90px;
   flex-shrink: 0;
}

.career-section .career-float-padi-logo img {
   width: 100%;
   height: auto;
   border-radius: 10px;
   object-fit: contain;
   background: rgba(255, 255, 255, 0.06);
   padding: 6px;
   display: block;
}

/* Text block inside the floating card */
.career-section .career-float-tag {
   display: flex !important;
   flex-direction: column;
   gap: 4px;
   padding: 0 !important;
}

/* Small eyebrow — "PADI Certified" (h2 in markup, but styled tiny) */
.career-section .career-float-tag>div:first-child .elementor-heading-title {
   font-size: 10px;
   color: var(--bee-gold);
   letter-spacing: 1.2px;
   font-weight: 700;
   margin: 0;
   text-transform: uppercase;
   line-height: 1;
}

/* Big title — "Become a certified pro" (span heading) */
.career-section .career-float-tag>div:last-child .elementor-heading-title {
   font-size: 15px;
   color: #fff;
   font-weight: 600;
   line-height: 1.3;
   text-transform: none;
   letter-spacing: 0;
   margin: 0;
   display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
   .career-section .career-wrapper {
      gap: 50px;
   }

   .career-section .career-float-card {
      left: -20px;
   }
}

@media (max-width: 900px) {
   .career-section .career-wrapper {
      grid-template-columns: 1fr;
      gap: 60px;
   }

   .career-section .career-image {
      aspect-ratio: 16 / 12;
      max-height: 500px;
   }

   .career-section .career-float-card {
      left: 20px;
      bottom: 20px;
   }
}

@media (max-width: 600px) {
   .career-section .career-stats {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
   }

   .career-section .career-stat-item {
      padding: 14px 10px;
   }

   .career-section .career-stat-item .elementor-heading-title {
      font-size: 20px;
   }

   .career-section .career-float-card {
      min-width: auto;
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 12px 14px;
   }

   .career-section .career-float-padi-logo {
      width: 70px;
   }
}