/* ===============================
   1. GLOBAL & RESET
================================ */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #1a1a1a;
  overflow-x: hidden;
}

/* ===============================
   2. HERO + SLIDER (LOCKED VISIBILITY)
================================ */
.careers-hero {
  position: relative;
  width: 100% !important;
  height: 85vh !important;
  min-height: 600px !important;
  background: #000;
  overflow: hidden;
}

/* FORCE images to show on all resolutions */
.careers-hero .hero-slider,
.careers-hero .hero-slider div {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.careers-hero .hero-slider div {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  opacity: 0;
  transform: scale(1.1);
  animation: careersHero 21s ease-in-out infinite;
}

/* Image Assignments - Updated for Linux/Hostinger paths */
.careers-hero .hero-slider div:nth-child(1) { 
    background-image: url('../images/careers-roneemedia-1.jpg'); 
    animation-delay: 0s; 
}
.careers-hero .hero-slider div:nth-child(2) { 
    background-image: url('../images/careers-roneemedia-2.jpg'); 
    animation-delay: 6s; 
}
.careers-hero .hero-slider div:nth-child(3) { 
    background-image: url('../images/careers-roneemedia-3.jpg'); 
    animation-delay: 12s; 
}
.careers-hero .hero-slider div:nth-child(4) { 
    background-image: url('../images/careers-roneemedia-4.jpg'); 
    animation-delay: 18s; 
}



@keyframes careersHero {
  0% { opacity: 0; transform: scale(1.1); }
  8% { opacity: 1; }
  28% { opacity: 1; }
  36% { opacity: 0; transform: scale(1); }
  100% { opacity: 0; }
}

.careers-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(25, 22, 96, 0.85) 100%);
  z-index: 2;
}

.careers-hero .hero-center {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 0 24px;
}

.hero-content {
  max-width: 820px;
}

.hero-content h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.1;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  opacity: 0.95;
}

/* ===============================
   3. SECTIONS & GRIDS
================================ */
.careers-section { padding: 120px 0; }
.careers-section.light { background: #f8fbff; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

.section-title {
  font-size: 3rem;
  font-weight: 800;
  color: #191660;
  margin-bottom: 50px;
}

/* ICON CARDS */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.icon-card {
  background: #ffffff;
  padding: 50px 30px;
  border-radius: 24px;
  border: 1px solid #edf2f7;
  transition: 0.4s ease;
}

.icon-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(25, 22, 96, 0.08);
}

.icon-card img {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
}

/* JOB CARDS */
.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.job-card {
  background: #fff;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid #edf2f7;
  transition: 0.3s ease;
  text-align: left;
}

.job-card:hover {
  box-shadow: 0 15px 35px rgba(0,0,0,0.05);
}

.job-card h3 {
  font-size: 1.6rem;
  color: #191660;
  margin-bottom: 10px;
}

.job-card span {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #7ed0fb;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.job-card p {
  color: #4a5568;
  margin-bottom: 20px;
}

.apply-btn {
  display: inline-block;
  color: #191660;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid #7ed0fb;
  transition: 0.3s;
}

.apply-btn:hover { color: #7ed0fb; border-color: #191660; }

/* ===============================
   4. CTA SECTION
================================ */
.careers-cta {
  padding: 120px 0;
  background: #191660;
  color: #fff;
  
}

.email-resume-btn {
  display: inline-block;
  background: #7ed0fb;
  color: #191660;
  padding: 20px 50px;
  border-radius: 100px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 30px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(126, 208, 251, 0.35);
}

.email-resume-btn:hover {
  background: #fff;
  transform: scale(1.05);
}

/* ===============================
   5. MOBILE FIXES
================================ */
@media (max-width: 768px) {
  .careers-hero { height: 700px !important; }
  
  /* Critical Image persistence for mobile */
  .careers-hero .hero-slider div {
    display: block !important;
    visibility: visible !important;
    opacity: 1; /* Fallback */
  }

  .section-title { font-size: 2.2rem; }
  .careers-section { padding: 80px 0; }
  .icon-card { padding: 40px 20px; }
  .job-card { text-align: center; }
}

@media (max-width: 480px) {
  .hero-content h1 { font-size: 2.2rem; }
  .email-resume-btn { width: 100%; padding: 18px 20px; }
}

/* =========================================
   6. RESPONSIVE CTA & BUTTON
   ========================================= */

@media (max-width: 768px) {
  .careers-cta {
    padding: 80px 20px; /* Reduced padding for mobile */
  }

  .careers-cta h2 {
    font-size: 2.2rem; /* Scaled down heading */
  }

  .email-resume-btn {
    width: 100%; /* Full width for easier tapping */
    max-width: 340px; /* Prevents button from getting too huge */
    padding: 16px 20px; /* Comfortable mobile padding */
    font-size: 16px;
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .careers-cta h2 {
    font-size: 1.8rem; /* Further scaling for small phones */
  }

  .email-resume-btn {
    font-size: 15px;
    padding: 14px 15px;
  }
}