.bar1,
.bar2,
.bar3 {
    background-color: var(--blue);
}
.navbar-on .bar1 {
    background-color: var(--blue);
  }
  
  .navbar-on .bar3 {
    background-color: var(--blue);
  }


/* HERO */
.hero {
    text-align: center;
    width:60%;
    margin: auto;
    margin-top: 90px;
}
/* END OF HERO */

/* SECTORS */
.sectors-image {
    /* background-image: url('/assets/images/index-hero-temp.png'); */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/employers_1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70vh;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 0 20px;
}
.sectors-image-candidate {
    /* background-image: url('/assets/images/index-hero-temp.png'); */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/assets/images/candidates_1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70vh;
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    padding: 0 20px;
}
/* SECTORS IMAGE */




/* EMPLOYER SERVIES */
.employer-services {
    color: var(--blue);
    padding: 0;
}
.employer-services .row {
    --bs-gutter-x: 0rem;
}
.image-side img {
    width: 90%;
    height: auto;
    display: block;
}
.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.service-list li {
    padding: 12px 0;
    border-top: 1px solid var(--gold);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.service-list li h6 {
    margin-bottom: 0;
}
.service-list li:last-child {
    border-bottom: 1px solid var(--gold);
}
/* END OF EMPLOYER SERVICES*/


input.form-control, textarea.form-control
{
    /* font-family: Berthold Akzidenz Grotesk BE Light !important; */
    border-bottom: 1px var(--gold) solid !important;
}



/*
	•	Targets: Mobile phones and small tablets in portrait
	•	Examples: iPhone SE, iPhone 13/14, Galaxy phones, smaller Androids, small tablets
*/
@media (max-width: 767px) {
    .top-bar {
        padding-left: 10px !important;
    }
    .primary-logo {
        padding-left: 0 !important;
    }
    .primary-logo img {
        transform: scale(0.8); /* Shrinks to 80% of its original size */
        transform-origin: top left; /* Optional: controls where it scales from */
        padding-left: 0 !important;
    }
    footer > div {
        flex-direction: column;
    }
    .image-side img {
        width: 100%;
    }
    .content-side {
        padding:40px 30px;
    }
   .hero {
        width: 100%;
        text-align: left;
   }
}

/* Tablets (portrait) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .hero {
        padding: 30px 10px;
   }
}
  
/* Tablets (landscape) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .hero {
        padding: 50px 10px;
   }
}

/* iPad Pro-specific styling */
@media (min-width: 834px) and (max-width: 1366px) and (orientation: portrait) {
    .hero {
        padding: 100px 0px;
   }
   .quote h4 {
    width:100%;
}
}

/* iPad Pro-specific styling */
@media (min-width: 834px) and (max-width: 1366px) and (orientation: landscape) {
    .hero {
        padding: 100px 0px;
   }
   .quote h4 {
        width:100%;
    }
}

/* Small desktops */
@media (min-width: 1025px) and (max-width: 1439px) {

}

/* Large desktops */
@media (min-width: 1440px) {

}

/* Ultra-wide monitors */
@media (min-width: 1920px) {
/* Optional refinements here */
}

@media (min-width: 2560px) {
    .hero {
        padding: 200px 0px;
   }
   .quote h4 {
        width:100%;
    }
}