﻿/* =========================
JOB HERO SECTION
========================= */

.job-hero{
  position:relative;

  width:100%;
  min-height:280px;

  display:flex;
  align-items:center;

  padding:150px 20px 50px;

  background:
  linear-gradient(
    90deg,
    rgba(3,18,32,0.88) 0%,
    rgba(3,18,32,0.72) 45%,
    rgba(3,18,32,0.35) 100%
  ),
  url('https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1600');

  background-size:cover;
  background-position:center;

  overflow:hidden;
}

/* CONTENT */

.menu-toggle{
    display:none;
}
.job-hero-content{
  position:relative;

  z-index:2;

  max-width:1200px;
  width:100%;

  margin:auto;
}

/* TAG */

.hero-tag{
  display:inline-block;

  background:rgba(255,255,255,0.08);

  color:#d4af37;

  padding:7px 14px;

  border-radius:30px;

  font-size:11px;
  letter-spacing:1px;
  font-weight:600;
}

/* HEADING */

.job-hero-content h1{
  margin-top:16px;

  max-width:600px;

  font-size:42px;
  line-height:1.1;

  color:#fff;

  font-family:'Playfair Display', serif;
}

.job-hero-content h1 span{
  color:#d4af37;
}

/* TEXT */

.job-hero-content p{
  margin-top:15px;

  max-width:520px;

  font-size:15px;
  line-height:1.7;

  color:#dbe7f2;
}

/* BUTTONS */

.hero-buttons{
  margin-top:25px;

  display:flex;
  gap:12px;

  flex-wrap:wrap;
}

/* BUTTON */

.hero-buttons .btn{
  padding:12px 24px;

  border-radius:8px;

  text-decoration:none;

  font-size:13px;
  font-weight:600;

  transition:0.3s;
}

/* PRIMARY */

.btn.primary{
  background:#d4af37;
  color:#111;
}

/* SECONDARY */

.btn.secondary{
  border:1px solid rgba(255,255,255,0.4);
  color:#fff;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:991px){

  .job-hero{
    min-height:240px;

    padding:60px 16px 40px;
  }
@media(max-width:991px){

  .menu-toggle{
    display:block;
  }

}
  .job-hero-content{
    text-align:center;
  }

  .job-hero-content h1{
    font-size:34px;

    margin:auto;
    margin-top:15px;
  }

  .job-hero-content p{
    margin:auto;
    margin-top:15px;
  }

  .hero-buttons{
    justify-content:center;
  }

}

@media(max-width:600px){

  .job-hero{

    min-height:320px;

    padding:120px 15px 45px;

    background-position:center center;
  }
  .menu-toggle{
    display:block;
  }
  .job-hero-content{
    text-align:center;
  }

  .hero-tag{
    font-size:10px;
    padding:6px 12px;
  }

  .job-hero-content h1{

    font-size:24px;

    line-height:1.25;

    max-width:100%;
  }

  .job-hero-content p{

    margin-top:14px;

    font-size:14px;

    line-height:1.7;

    max-width:100%;
  }

  .hero-buttons{

    margin-top:22px;

    flex-direction:column;

    align-items:center;

    gap:12px;
  }

  .hero-buttons .btn{

    width:100%;

    max-width:280px;

    text-align:center;

    padding:12px 20px;

    font-size:14px;
  }

}




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

.employees{
  padding:80px 20px;
  background:#f8fbff;
}

/* CONTAINER */

.employees-container{
  max-width:1200px;
  margin:auto;
}

/* HEADER */

.section-header{
  text-align:center;
  margin-bottom:50px;
}

.section-header span{
  font-size:12px;
  letter-spacing:1px;
  color:#d4af37;
  font-weight:600;
}

.section-header h2{
  margin-top:12px;

  font-size:38px;

  color:#0a2a43;

  font-family:'Playfair Display', serif;
}

.section-header p{
  margin-top:12px;

  font-size:15px;

  color:#6b7280;
}

/* GRID */

.employees-grid{
  display:grid;

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

  gap:22px;
}

/* CARD */

.employee-card{
  background:#fff;

  border-radius:14px;

  overflow:hidden;

  box-shadow:0 10px 30px rgba(0,0,0,0.06);

  transition:0.3s;
}

.employee-card:hover{
  transform:translateY(-6px);
}

/* IMAGE */

.employee-card img{
  width:100%;

  height:220px;

  object-fit:cover;
}

/* CONTENT */

.employee-content{
  padding:18px;
}

.employee-content h4{
  font-size:18px;

  color:#0a2a43;

  margin-bottom:8px;
}

.employee-content p{
  font-size:13px;

  line-height:1.6;

  color:#6b7280;
}

/* =========================
RESPONSIVE
========================= */

/* TABLET */

@media(max-width:991px){

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

}

/* MOBILE */

@media(max-width:600px){

  .employees{
    padding:60px 15px;
  }

  .section-header{
    margin-bottom:35px;
  }

  .section-header h2{
    font-size:28px;
  }

  .section-header p{
    font-size:14px;
  }

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

    gap:15px;
  }

  .employee-card{
    border-radius:10px;
  }

  .employee-card img{
    height:140px;
  }

  .employee-content{
    padding:14px;
  }

  .employee-content h4{
    font-size:15px;

    margin-bottom:6px;
  }

  .employee-content p{
    font-size:12px;

    line-height:1.5;
  }

}


    /* =========================
WHY CHOOSE US
========================= */

.why-choose{
  padding:30px 20px;
  background:#fff;
}

/* CONTAINER */

.why-container{
  max-width:1200px;
  margin:auto;
}

/* SECTION HEADER */

.why-choose .section-header{
  text-align:center;
  margin-bottom:40px;
}

.why-choose .section-header span{
  font-size:11px;
  letter-spacing:1px;
  color:#d4af37;
  font-weight:600;
}

.why-choose .section-header h2{
  margin-top:10px;

  font-size:34px;

  color:#0a2a43;

  font-family:'Playfair Display', serif;

  line-height:1.2;
}

.why-choose .section-header p{
  margin-top:10px;

  font-size:14px;

  color:#6b7280;

  line-height:1.7;

  max-width:620px;

  margin-left:auto;
  margin-right:auto;
}

/* GRID */

.why-grid{
  display:grid;

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

  gap:20px;
}

/* BOX */

.why-box{
  background:#f8fbff;

  padding:28px 22px;

  border-radius:12px;

  text-align:center;

  transition:0.3s;

  border:1px solid #edf2f7;
}

.why-box:hover{
  transform:translateY(-5px);

  box-shadow:0 12px 30px rgba(0,0,0,0.06);
}

/* ICON */

.why-icon{
  width:60px;
  height:60px;

  margin:auto;
  margin-bottom:16px;

  border-radius:50%;

  background:#0a3d62;

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

.why-icon i{
  font-size:24px;
  color:#fff;
}

/* TITLE */

.why-box h4{
  font-size:17px;

  color:#0a2a43;

  margin-bottom:8px;

  line-height:1.3;
}

/* TEXT */

.why-box p{
  font-size:13px;

  line-height:1.6;

  color:#6b7280;

  margin:0;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:991px){

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

}

@media(max-width:600px){

  .why-choose{
    padding:50px 15px;
  }

  .why-choose .section-header{
    margin-bottom:30px;
  }

  .why-choose .section-header h2{
    font-size:28px;
  }

  .why-choose .section-header p{
    font-size:13px;
  }

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

    gap:14px;
  }

  .why-box{
    padding:22px 15px;
  }

  .why-icon{
    width:52px;
    height:52px;

    margin-bottom:14px;
  }

  .why-icon i{
    font-size:20px;
  }

  .why-box h4{
    font-size:14px;

    margin-bottom:6px;
  }

  .why-box p{
    font-size:12px;

    line-height:1.5;
  }

}

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

.hiring-process{
  padding:30px 20px;
  background:#f8fbff;
}

/* CONTAINER */

.process-container{
  max-width:1200px;
  margin:auto;
}

/* GRID */

.process-grid{
  margin-top:10px;

  display:grid;

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

  gap:20px;
}

/* BOX */

.process-box{
  position:relative;

  background:#fff;

  border-radius:14px;

  padding:30px 20px;

  text-align:center;

  border:1px solid #edf2f7;

  transition:0.3s;
}

.process-box:hover{
  transform:translateY(-5px);

  box-shadow:0 12px 30px rgba(0,0,0,0.06);
}

/* NUMBER */

.process-number{
  position:absolute;

  top:12px;
  right:12px;

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

  color:#d4af37;
}

/* ICON */

.process-icon{
  width:65px;
  height:65px;

  margin:auto;
  margin-bottom:18px;

  border-radius:50%;

  background:#0a3d62;

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

.process-icon i{
  font-size:24px;
  color:#fff;
}

/* TEXT */

.process-box h4{
  font-size:17px;

  color:#0a2a43;

  margin-bottom:8px;
}

.process-box p{
  font-size:13px;

  line-height:1.6;

  color:#6b7280;

  margin:0;
}

/* RESPONSIVE */

@media(max-width:991px){

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

}

@media(max-width:600px){

  .hiring-process{
    padding:30px 15px;
  }

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

    gap:14px;
  }

  .process-box{
    padding:24px 15px;
  }

  .process-icon{
    width:52px;
    height:52px;

    margin-bottom:14px;
  }

  .process-icon i{
    font-size:20px;
  }

  .process-box h4{
    font-size:14px;
  }

  .process-box p{
    font-size:12px;

    line-height:1.5;
  }
   .process-box:last-child{
    grid-column:1 / -1;
    max-width:220px;
    margin:auto;
  }

}


    /* =========================
JOB CTA SECTION
========================= */

.job-cta{
  padding:30px 10px;

  background:
  linear-gradient(
    135deg,
    rgba(7,28,44,0.96),
    rgba(10,61,98,0.94)
  ),
  url('https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80&w=1600');

  background-size:cover;
  background-position:center;

  text-align:center;

  color:#fff;
}

/* CONTAINER */

.job-cta-container{
  max-width:850px;
  margin:auto;
}

/* SMALL TITLE */

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

  font-size:12px;
  letter-spacing:1px;
  font-weight:600;

  color:#d4af37;
}

/* HEADING */

.job-cta h2{
  margin-top:14px;

  font-size:42px;

  line-height:1.2;

  font-family:'Playfair Display', serif;
}

/* TEXT */

.job-cta p{
  margin-top:16px;

  font-size:15px;

  line-height:1.8;

  color:#dbe7f2;

  max-width:650px;

  margin-left:auto;
  margin-right:auto;
}

/* BUTTONS */

.job-cta-buttons{
  margin-top:30px;

  display:flex;
  justify-content:center;

  gap:15px;

  flex-wrap:wrap;
}

/* BUTTON */

.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:14px 28px;

  border-radius:8px;

  text-decoration:none;

  font-size:14px;
  font-weight:600;

  transition:0.3s;
}

/* PRIMARY */

.cta-btn.primary{
  background:#d4af37;
  color:#111;
}

/* SECONDARY */

.cta-btn.secondary{
  border:1px solid rgba(255,255,255,0.35);
  color:#fff;
}

/* HOVER */

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

/* RESPONSIVE */

@media(max-width:600px){

  .job-cta{
    padding:55px 15px;
  }

  .job-cta h2{
    font-size:30px;
  }

  .job-cta p{
    font-size:14px;
    line-height:1.7;
  }

  .job-cta-buttons{
    flex-direction:column;
    align-items:center;
  }

  .cta-btn{
    width:100%;
    max-width:280px;
    justify-content:center;
  }

}