:root {
  --sky-navy: #062746;
  --sky-blue: #155f9d;
  --sky-azure: #4fb1dd;
  --sky-cyan: #84d7f4;
  --sky-text: #102a43;
  --sky-muted: #64748b;
  --sky-card: rgba(255,255,255,.85);
  --sky-line: rgba(6,39,70,.08);
}

/* =========================
   PAGE
========================= */

.careers-page{
  overflow:hidden;
  position:relative;

  background:
    linear-gradient(rgba(78,165,219,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78,165,219,.08) 1px, transparent 1px),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #dff1fb 50%,
      #ffffff 100%
    );

  background-size:
    42px 42px,
    42px 42px,
    auto;
}

/* =========================
   HERO
========================= */

.career-hero{
  position:relative;
  overflow:hidden;

  padding:
    clamp(10px,10vw,160px)
    20px
    clamp(80px,8vw,120px);

  text-align:center;
}

.career-hero::before{
  content:"";

  position:absolute;
  inset:0;

  /* background:
    radial-gradient(
      circle at 20% 20%,
      rgba(78,165,219,.15),
      transparent 35%
    ),

    radial-gradient(
      circle at 80% 70%,
      rgba(17,104,210,.10),
      transparent 35%
    ); */

  pointer-events:none;
}

.career-tag{
  display:inline-block;
  padding:10px 18px;

  border-radius:999px;

  background:rgba(21,95,157,.08);

  color:var(--sky-blue);

  font-size:.85rem;
  font-weight:00;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.career-hero h1{
  margin-top:24px;

  

  font-weight:700;
  font-size:clamp(2.5rem,6vw,4.2rem);
  line-height:1.15;
  letter-spacing:-1px;
  color:var(--sky-navy);

  
}

.career-hero h1 span{
  color:var(--sky-blue);
}

.career-hero p{
  
  margin:24px auto;


    font-size:1rem;
  line-height:1.8;
  max-width:700px;
  color:var(--sky-muted);
}

.career-hero-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
}

/* =========================
   BUTTONS
========================= */

.career-btn-primary,
.career-btn-secondary{
  padding:14px 32px;

  border-radius:999px;

  font-weight:700;

  text-decoration:none;

  transition:.35s ease;
}

.career-btn-primary{
  background:linear-gradient(
  135deg,
  var(--sky-blue),
  var(--sky-azure));

  color:#fff;

  box-shadow:
  0 12px 30px rgba(21,95,157,.25);
}

.career-btn-primary:hover{
  transform:translateY(-4px);
}

.career-btn-secondary{
  border:2px solid var(--sky-blue);
  color:var(--sky-blue);
}

.career-btn-secondary:hover{
  background:var(--sky-blue);
  color:#fff;
}

/* =========================
   FLOATING ICONS
========================= */

.career-floating-icons i{
  position:absolute;

  font-size:60px;

  opacity:.08;

  color:var(--sky-blue);

  animation:float 8s ease-in-out infinite;
}

.career-floating-icons i:nth-child(1){
  left:8%;
  top:20%;
}

.career-floating-icons i:nth-child(2){
  right:12%;
  top:22%;
}

.career-floating-icons i:nth-child(3){
  left:15%;
  bottom:15%;
}

.career-floating-icons i:nth-child(4){
  right:10%;
  bottom:20%;
}

@keyframes float{
  0%,100%{
    transform:translateY(0);
  }

  50%{
    transform:translateY(-20px);
  }
}

/* =========================
   SECTION
========================= */

.career-section,
.career-benefits,
.career-process,
.career-life{
  padding:85px 20px;
}

.section-heading{
  text-align:center;
  max-width:850px;
  margin:0 auto 70px;
}

.section-heading span{
  color:rgb(78,165,219);
  font-weight:700;
  letter-spacing:3px;
  text-transform:uppercase;
}

.section-heading h2{
  font-size:clamp(1.9rem,4vw,2.8rem);
  letter-spacing:-0.5px;
  font-weight:800;
  color:rgb(27,57,93);
}

.section-heading p{
   font-size:.98rem;
  line-height:1.8;
  color:#64748b;
}

/* =========================
   BENEFITS GRID
========================= */
.benefit-image{
  width:72px;
  height:72px;

  object-fit:contain;

  margin-bottom:20px;

  transition:.35s ease;
}

.benefit-card{
  text-align:center;
}

.benefit-card:hover .benefit-image{
  transform:
    translateY(-5px)
    scale(1.08);
}
.benefit-card h3,
.job-card h3,
.culture-card h3{
  font-size:1.2rem;
}

.benefit-card p,
.job-card p,
.culture-card p{
  font-size:.95rem;
  line-height:1.8;
}
.benefit-grid{
  max-width:1200px;
  margin:auto;

  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(260px,1fr));

  gap:25px;
}

.benefit-card{

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  text-align:center;

  min-height:320px;

  padding:32px 24px;

  background:#fff;

  border-radius:24px;

  border:1px solid rgba(27,57,93,.08);

  box-shadow:
    0 8px 25px rgba(0,0,0,.05);

  transition:all .35s ease;
}
.benefit-image{

  width:72px;
  height:72px;

  object-fit:contain;

  margin-bottom:20px;

  transition:.35s ease;
}
@media (max-width:992px){

  .benefit-grid{

    grid-template-columns:
      repeat(2,1fr);
  }

  .benefit-card{

    min-height:300px;
  }
}

@media (max-width:768px){

  .benefit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }

  .benefit-card{

    min-height:260px;

    padding:20px 16px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    text-align:center;
  }

  .benefit-image{
    width:55px;
    height:55px;
  }

  .benefit-card h3{
    font-size:.95rem;
    margin-bottom:10px;
  }

  .benefit-card p{
    font-size:.82rem;
    line-height:1.55;
  }
}

.benefit-card:hover .benefit-image{

  transform:
    scale(1.08);
}
.benefit-card:hover{

  transform:
    translateY(-10px);

  border-color:
    rgb(78,165,219);

  box-shadow:
    0 20px 40px rgba(17,104,210,.12);
}

.benefit-card:hover{

  transform:
    translateY(-12px);

  border-color:
    rgb(78,165,219);

  box-shadow:
    0 25px 50px rgba(27,57,93,.15);
}

.benefit-card i{
  font-size:34px;
  color:var(--sky-blue);
}

.benefit-card h3{
  margin-top:18px;
  color:var(--sky-navy);
}

.benefit-card p{
  color:var(--sky-muted);
}

/* =========================
   BENEFITS LIST
========================= */

.benefits-list{
  max-width:1000px;
  margin:auto;

  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));

  gap:20px;
}

.benefit-item{
  display:flex;
  align-items:center;

  gap:14px;

  padding:18px 22px;

  background:#fff;

  border-radius:18px;

  border:1px solid rgba(27,57,93,.08);

  box-shadow:
    0 6px 18px rgba(0,0,0,.04);

  font-size:.95rem;
  font-weight:600;

  color:rgb(27,57,93);

  transition:.3s ease;
}

.benefit-item:hover{
  transform:translateY(-4px);

  border-color:rgb(78,165,219);

  box-shadow:
    0 15px 30px rgba(17,104,210,.12);
}

.benefit-icon{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      rgba(17,104,210,.08),
      rgba(78,165,219,.15)
    );

  font-size:1.3rem;

  flex-shrink:0;
}

.benefit-item i{
  color:#20c997;
}

/* =========================
   JOBS
========================= */

.jobs-grid{
  max-width:1200px;
  margin:auto;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));

  gap:25px;
}

.job-card{
  position:relative;
  overflow:hidden;

  background:#fff;

  border-radius:24px;

  padding:35px;

  border:1px solid rgba(27,57,93,.08);

  box-shadow:
    0 8px 25px rgba(0,0,0,.05);

  transition:all .35s ease;
}

.job-card::before{
  content:"";

  position:absolute;

  left:0;
  top:0;

  width:100%;
  height:5px;

  background:
    linear-gradient(
      90deg,
      rgb(17,104,210),
      rgb(78,165,219)
    );
}

.job-card:hover{

  transform:
    translateY(-12px);

  box-shadow:
    0 25px 50px rgba(17,104,210,.15);
}

.job-card h3{
  color:var(--sky-navy);
}

.job-card p{
  color:var(--sky-muted);
}

.job-card span{
  display:inline-block;

  margin:10px 0 20px;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(21,95,157,.08);

  color:var(--sky-blue);
}

.job-card a{
  text-decoration:none;

  color:#fff;

  background:var(--sky-blue);

  padding:12px 24px;

  border-radius:999px;

  display:inline-block;
}

/* =========================
   PROCESS
========================= */

/* =========================
   HIRING PROCESS
========================= */

.process-grid {
  max-width: 1300px;
  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;

  gap: 30px;

  position: relative;
}

.process-step {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  flex: 1;
  min-width: 180px;
  max-width: 220px;
}

/* Circle */

.process-step div {
  width: 80px;
  height: 80px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgb(17,104,210),
      rgb(78,165,219)
    );

  box-shadow:
    0 15px 35px rgba(17,104,210,.25);

  transition: all .35s ease;

  position: relative;
  z-index: 2;
}

.process-step:hover div {
  transform: translateY(-6px) scale(1.05);
}

/* Arrow Between Steps */

.process-step:not(:last-child)::after {
  content: "➜";

  position: absolute;

  top: 28px;
  right: -25px;

  font-size: 28px;
  font-weight: 700;

  color: rgb(78,165,219);

  z-index: 1;
}

/* Heading */

.process-step h3 {
  margin-top: 18px;

  
  font-weight: 700;
    font-size:.95rem;
  line-height:1.5;
  color: rgb(27,57,93);

  line-height: 1.4;
}

/* Optional description */

.process-step p {
  margin-top: 8px;

  font-size: .9rem;

  color: #64748b;
}

/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

  .process-grid {
    display: grid;

    grid-template-columns:
      repeat(2,1fr);

    gap: 40px;
  }

  .process-step {
    max-width: 100%;
  }

  .process-step::after {
    display: none;
  }

  .process-step div {
    width: 72px;
    height: 72px;

    font-size: 1.1rem;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .process-grid {

    grid-template-columns: 1fr;

    gap: 25px;
  }

  .process-step {

    flex-direction: row;
    align-items: center;

    text-align: left;

    gap: 18px;

    background: white;

    border-radius: 18px;

    padding: 16px;

    border: 1px solid rgba(27,57,93,.08);

    box-shadow:
      0 8px 20px rgba(0,0,0,.05);
  }

  .process-step::after {
    display: none;
  }

  .process-step div {

    width: 60px;
    height: 60px;

    min-width: 60px;

    font-size: 1rem;
  }

  .process-step h3 {

    margin-top: 0;

    font-size: 1rem;
  }
}

/* =========================
   CULTURE
========================= */

/* =========================
   LIFE AT SKY IT
========================= */

.culture-grid{

  max-width:1200px;
  margin:auto;

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

  gap:28px;
}

.culture-card{

  position:relative;
  overflow:hidden;

  padding:36px 30px;

  border-radius:28px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(244,250,255,.98)
    );

  border:1px solid rgba(78,165,219,.12);

  box-shadow:
    0 12px 30px rgba(27,57,93,.06);

  text-align:center;

  transition:all .4s ease;
}

.culture-card:hover{

  transform:
    translateY(-12px);

  border-color:
    rgba(78,165,219,.35);

  box-shadow:
    0 25px 50px rgba(17,104,210,.15);
}

/* Top Accent Line */

.culture-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:5px;

  background:
    linear-gradient(
      90deg,
      rgb(17,104,210),
      rgb(78,165,219)
    );
}

/* Icon */

.culture-icon{

  width:80px;
  height:80px;

  margin:0 auto 24px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:22px;

  font-size:2rem;

  background:
    linear-gradient(
      135deg,
      rgba(17,104,210,.08),
      rgba(78,165,219,.18)
    );

  transition:.35s ease;
}

.culture-card:hover .culture-icon{

  transform:
    rotate(-6deg)
    scale(1.08);
}

/* Heading */

.culture-card h3{

  font-size:1.35rem;
  font-weight:800;

  color:rgb(27,57,93);

  margin-bottom:14px;
}

/* Description */

.culture-card p{

  font-size:.95rem;
  line-height:1.8;

  color:#64748b;

  margin:0;
}

/* =========================
   CTA
========================= */

/* ===================================
   PREMIUM CTA SECTION
=================================== */
.career-cta h2{
  font-size:clamp(1.5rem,3vw,2.3rem);
  line-height:1.25;
}

.career-cta p{
  font-size:.95rem;
  line-height:1.8;
}
.career-cta {

  position: relative;
  overflow: hidden;

  max-width: 1200px;

  margin: 100px auto;

  padding: 90px 40px;

  border-radius: 32px;

  text-align: center;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.95),
      rgba(232,244,252,.95)
    );

  border: 1px solid rgba(78,165,219,.15);

  box-shadow:
    0 20px 50px rgba(27,57,93,.08);

  backdrop-filter: blur(20px);
}

/* Floating Glow */

.career-cta::before {

  content: "";

  position: absolute;

  width: 350px;
  height: 350px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(78,165,219,.18),
      transparent 70%
    );

  top: -150px;
  right: -100px;
}

.career-cta::after {

  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(17,104,210,.10),
      transparent 70%
    );

  bottom: -120px;
  left: -100px;
}

/* Heading */

.career-cta h2 {

  position: relative;
  z-index: 2;

   font-size: clamp(1.6rem,4vw,2.6rem);

  font-weight: 800;

  line-height: 1.15;

  color: rgb(27,57,93);
 letter-spacing: -0.5px;
  margin-bottom: 20px;
}

/* Paragraph */

.career-cta p {

  position: relative;
  z-index: 2;

  max-width: 760px;

  margin: 0 auto 35px;

  font-size: 1rem;
  line-height: 1.8;
  max-width: 650px;

   color: #64748b;
  font-weight: 400;
}

/* Button */

.career-cta a {

  position: relative;
  z-index: 2;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  min-width: 220px;

  height: 58px;

  padding: 0 32px;

  border-radius: 999px;

  text-decoration: none;

  font-size: 1rem;
  font-weight: 700;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      rgb(17,104,210),
      rgb(78,165,219)
    );

  box-shadow:
    0 15px 35px rgba(17,104,210,.25);

  transition: all .35s ease;
}

.career-cta a:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 25px 45px rgba(17,104,210,.30);
}

/* ===================================
   TABLET
=================================== */

@media (max-width: 991px){

  .career-cta{

    margin:80px 20px;

    padding:70px 30px;
  }

  .career-cta h2{

    font-size:2.4rem;
     letter-spacing: -0.5px;
  }
}

/* ===================================
   MOBILE
=================================== */

@media (max-width:768px){
  .career-hero h1{
  font-size:2rem;
}

.career-hero p{
  font-size:.95rem;
}

.section-heading h2{
  font-size:1.75rem;
}

.section-heading p{
  font-size:.9rem;
}

.benefit-card,
.job-card,
.culture-card{
  padding:22px;
}

.benefit-card h3,
.job-card h3,
.culture-card h3{
  font-size:1.05rem;
}

.benefit-card p,
.job-card p,
.culture-card p{
  font-size:.9rem;
}
  .career-cta{

    margin:60px 16px;

    padding:50px 24px;

    border-radius:24px;
  }

  .career-cta h2{

 font-size:1.5rem;
  line-height:1.35;
   letter-spacing: -0.5px;
  }

  .career-cta p{

    font-size:.88rem;

    line-height:1.7;
  }

  .career-cta a{

    width:100%;

    min-width:unset;

    height:54px;
  }

  .career-cta::before,
  .career-cta::after{

    display:none;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width:1200px){

  .jobs-grid{
    grid-template-columns:
    repeat(2,1fr);
  }
}

@media (max-width:992px){

  .jobs-grid,
  .benefit-grid,
  .culture-grid{
    grid-template-columns:
    repeat(2,1fr);
  }
}

@media (max-width:768px){

  .jobs-grid,
  .benefit-grid,
  .culture-grid,
  .benefits-list{
    grid-template-columns:1fr;
  }

  .career-hero{
    padding:20px 60px;
  }

  .career-hero h1{
    font-size:2.6rem;
  }

  .career-btn-primary,
  .career-btn-secondary{
    width:100%;
  }

  .career-hero-actions{
    flex-direction:column;
  }

  .process-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:480px){

  .career-hero h1{
    font-size:2rem;
  }

  .section-heading h2{
    font-size:2rem;
  }

  .job-card,
  .benefit-card,
  .culture-card{
    padding:24px;
  }
}