.top--banner{

    background-image: url("../img/recruitment/recruitment-banner.webp");

}

.hr--image {

    position: relative;

}



.hr--image .content--hr--calture {

    position: absolute;

    bottom: 30px;

    background: #00000024;

    width: 100%;

    max-width: 90%;

    left: 50%;

    transform: translateX(-50%);

    backdrop-filter: blur(20px);

    border: 1px solid #6b6b6b;

    border-radius: 20px;

    color: var(--white);

    padding: 22px 25px;

}



.hr--image .content--hr--calture p {

    margin-bottom: 0;

    font-size: 18px;

}



.highlights--content {

    background: #E5FFDA;

    padding: 25px;

    font-weight: 500;

    font-style: italic;

    border-left: 4px solid var(--primary);

}



.highlights--content p {

    margin-bottom: 0;

}



.recruitment--container {

    display: flex;

    gap: 15px;

}



.recruitment--container .recruitment--left {

    max-width: 450px;

    width: 100%;

}



.recruitment--container .recruitment--right {

    flex: 1;

    padding-left: 65px;

}

.hr--container {

    position: relative;

}



.hr--container .bg--icon--place {

    position: absolute;

    bottom: -180px;

    right: 0;

    max-width: 370px;

    width: 100%;

    opacity: 0.14;

}



.hr--container .bg--icon--place img {

    width: 100%;

}

.counter--items--list {

    display: flex;

    gap: 20px;

}



.counter--items--list .counter--item {

    text-align: center;

    padding: 10px 0px;

}



.counter--items--list .counter--item h2 {

    color: var(--primary);

    font-weight: 600;

}



.counter--items--list .counter--item p {

    color: var(--black);

    font-weight: 500;

}



.our--approach--bg{

    background-image: url("../img/recruitment/approach-bg.webp");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: top center;

    position: relative;

}



.our--approach--bg:before {

    content: '';

    width: 100%;

    height: 100%;

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 11.52%, rgba(148, 148, 148, 0.8) 100%);

    position: absolute;

    left: 0;

    top: 0;

}





.our--approach--bg .center--heading .dual--heading span {

    color: var(--white);

}



.our--approach--container{

	position: relative;

}



.our--approach--list {

      display: grid;

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

    justify-content: center;

    position: relative;

    max-width: 1180px;

    margin: 0 auto;

    backdrop-filter: blur(5px);

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

    border-radius: 25px;

    overflow: hidden;



}



.our--approach--list .card-approach {

  color: var(--white);

  padding: 25px;

  position: relative;

  z-index: 2;

}

.our--approach--list .card-approach:not(:last-child) {

    border-right: 1px solid rgba(255, 255, 255, 0.3);

}



.our--approach--list .card-approach .approach--item--icon {

    width: 48px;

    height: 48px;

    margin-bottom: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 1);

    border-radius: 10px;

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

    backdrop-filter: blur(7.800000190734863px);

}



.our--approach--list .card-approach .approach--item--icon img {

    width: 24px;

    height: 24px;

    object-fit: contain;

    object-position: center;

}



.our--approach--list .card-approach .approach--item--content h3 {

    font-size: 20px;

    font-family: Montserrat;

}



.our--approach--list .card-approach .approach--item--content p {

    font-size: 14px;

}

.our--approach--container .magic-card-area {

   position: absolute;

    top: 0;

    left: 0;

    z-index: 1;

    pointer-events: none;



    background: rgba(104, 181, 73, 1);

    backdrop-filter: blur(10px);

}



.how--we-work{

    background-image: url("../img/services/how-we-work-bg.webp");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: top center;

}

.how--we-work .center--heading .dual--heading span {

    color: var(--white);

}



.roles--specialise--list {

  display: grid;

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

  row-gap: 50px;

}



.roles--specialise--list .roles--specialise--item {

  padding: 0px 35px;

}



.roles--specialise--list .roles--specialise--item:not(:nth-child(3)):not(:nth-child(6)) {

  border-right: 1px solid #d4d4d4;

}



.roles--specialise--list .roles--specialise--item img {

  width: 48px;

  margin-bottom: 20px;

}



.roles--specialise--list .roles--specialise--item h3 {

  color: var(--black);

  font-size: 20px;

  font-family: Montserrat;

  

}

.roles--specialise--list .roles--specialise--item:nth-child(1),

.roles--specialise--list .roles--specialise--item:nth-child(4) {

  padding-left: 0;

}



.how--we-work .icon--heading img {

    width: 45px;

    height: 45px;

}



@media(max-width: 991px) {

  .recruitment--container {

        flex-direction: column;

    }



    .recruitment--container .recruitment--right {

        padding-left: 0px;

    }



    .counter--items--list {

        flex-direction: column;

        row-gap: 10px;

    }



    .counter--items--list .counter--item p {

        margin-bottom: 0px;

    }



    .hr--container .bg--icon--place {

        max-width: 250px;

        bottom: -50px;

    }



    .our--approach--bg {

        padding-right: 15px;

        padding-left: 15px;

    }



    .our--approach--list {

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

    }

    .roles--specialise--list {

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

        row-gap: 20px;

    }

}



@media(max-width:768px){

    .our--approach--list {

        display: flex;

        flex-direction: column;

    }

    .roles--specialise--list {

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

        row-gap: 20px;

    }



    .roles--specialise--list .roles--specialise--item {

        padding: 0px;

        border-right: 0px !important;

    }



    .roles--specialise--list .roles--specialise--item:not(:last-child) {

        border-bottom: 1px solid #d4d4d4;

    }

    .our--approach--list .card-approach:not(:last-child) {

        border-bottom: 1px solid rgba(255, 255, 255, 0.3);

    }



    .our--approach--list .card-approach {

        border-right: 0px !important;

    }

}