.job-banner {
  width: 100%;
  height: auto;
  max-height:1300px;
}
.hero-wrapper{
  display: flex;
  flex-direction: column;
}
.title-hero{
  position: relative;
  top: 100px;
}
.title-hero > h4{
  font-size:22px;
  font-weight:bold;
  text-transform: uppercase;
  color: #001330;
  letter-spacing: 2px;
}
.title-hero > h2{
  font-size:110px;
  font-weight:bold;
  text-transform: uppercase;
  color: #0066ff;
}



.hero-content{
  display: flex;
  align-items:flex-end;
  gap: 50px;
}
.left-col, .right-col{
  display: flex;
  flex-direction: column;
  flex: 1 1 0; 
  min-width: 0;
}

/* LEFT */
.left-col{
  align-items:flex-end;
}
.img-department{
  position:relative;
  top:100px;
  z-index:10;
}

.img-arrow{
  height: auto;
  max-width: 250px;
  z-index:90
}
/* RIGHT */
.right-col{
  gap:20px;
   overflow-wrap: anywhere;
}
.main-job-info{
  display:flex;
  flex-direction: column;
}
.main-job-info>h1{
  color:#0066ff;
  letter-spacing: 3px;
  font-size: 47px;
  padding-top: 40px;
}
.job-details{
  display:flex;
  gap:15px;
  align-items:center;
}
.detail-text{
  text-transform: capitalize;
}
/*Big Tablets*/
@media (max-width: 1200px) {
  
  .title-hero{
  padding: 0 3%;
  top: 90px; 
  }
  .title-hero > h4{
  font-size:18px;
  letter-spacing: 2px;
}
.title-hero > h2{
  font-size:70px;
}
  .main-job-info>h1{
  font-size: 36px;
  }
}

/* SMALL TABLET*/
@media (max-width: 1024px) {
  .hero-content{
  flex-direction: column;
  }
  .hero-content{
  display: flex;
  align-items:flex-start;
  gap: 50px;
}
  .img-arrow{
  display:none;
  }
  .title-hero{
  top: 50px; 
  }
}
@media (max-width: 600px) {
  .right-col{
    padding-top: 30px;
}
  .title-hero>h2 {
        font-size: 45px;
    }
}
}