.top--banner{

    background-image: url("../img/hr-practice/hr-practice-bg.png");

}

.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;

}



.max-w-400{

    max-width: 400px;

    width: 100%;

}



.max-w-390 {

    max-width: 390px;

}



.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;

    overflow: hidden;

}



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

    position: absolute;

    top:-155px;

    right: 0;

    max-width: 330px;

    width: 100%;

    opacity: 0.14;

}



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

    width: 100%;

}



.hr--practice--section {

    background: rgba(237, 255, 230, 1);

}



/*.hr--grid-photos {*/

/*    display: grid;*/

/*    grid-template-columns: 1fr 1fr;*/

/*    grid-template-rows: 260px 260px;*/

/*    gap: 15px;*/

/*}*/



.hr--grid-photos img {

    width: 100%;

    /*object-fit: cover;*/

    /*object-position: center;*/

}



/*.hr--grid-photos img:nth-child(1) {*/

/*    grid-column: 1 / 3;*/

/*}*/



.hr--culture--development {

    background: rgba(246, 246, 246, 1);

}



.hr--learning--development .bg--icon--place {

    position: absolute;

    bottom: -40px;

    right: 0px;

    max-width: 309px;

    width: 100%;

    opacity: 0.14;

}



.hr--learning--development {

    position: relative;

    overflow: hidden;

}



.hr--learning--development .bg--icon--place img {

    width: 100%;

}





.our--approach--bg{

    background-image: url("../img/hr-practice/our-edge.png");

    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;

    opacity: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);

}

.our--approach .center--heading {

    max-width: 460px;

}



.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);

}





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

    width: 45px;

    height: 45px;

}



@media(max-width:768px){

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

        top: 20px;

    }

    .recruitment--container {

        flex-direction: column;

    }



    .recruitment--container .recruitment--right {

        padding-left: 0px;

    }



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

        padding: 15px;

    }



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

        font-size: 16px;

    }

    .hr--grid-photos {

        grid-template-rows: 160px 160px;

    }

    .our--approach--list {

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

    }



    .our--approach--bg {

        padding-right: 15px;

        padding-left: 15px;

    }

    .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;

    }

}