/*********************
START: WORTH
*********************/
.worth {
    margin-block-end: var(--space-section);
}

.worth h2 {
    font-weight: 700;
    line-height: var(--line-height130);
    margin-block-end: 2.5rem
}

.worth--content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

ul.worth--items {
    width: 57%;
    display: grid;
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
}

ul.worth--items li {
    padding: 1.875rem;
    border-radius: var(--border-radius25);
    background-color: #F7F5EB;
}

ul.worth--items li img {
    width: 50px;
    height: 50px;
}

ul.worth--items li h3 {
    font-weight: 700;
    line-height: var(--line-height160);
    margin-block: 1.25rem 1rem;
}

ul.worth--items li p {
    font-weight: 400;
    line-height: var(--line-height160);
}

.worth--img {
    width: 40%;
}

.worth--img img {
    width: 100%;
}

/*********************
END: WORTH
*********************/

/*********************
START: WHY
*********************/
.why {
    margin-block-end: var(--space-section);
}

/* why--img */
.why--img {
    height: 500px;
    position: relative;
}

.why--img::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to top, rgba(28, 44, 91, 0.9), rgba(28, 44, 91, 0.7), rgba(28, 44, 91, 0.9));
}

.why--img img {
    width: 100%;
    height: 100%;
}

.why--content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

/* why--text */
.why--text {
    margin-block-start: 3.75rem;
    width: 45%;
    margin-inline-start: auto;
}

.why--text h4 {
    font-weight: 700;
    margin-block-end: 1.5rem
}

.why--text p {
    font-weight: 400;
    line-height: var(--line-height160);
}

/* why--box */
.why--box {
    position: absolute;
    width: 50%;
    padding: 3.125rem;
    border-radius: var(--border-radius25);
    background-color: var(--baseLight-color);
    border: 1px solid rgba(28, 44, 91, 0.2);
}

.why--box h5 {
    line-height: var(--line-height160);
    font-weight: 600;
    margin-block-end: 2rem;
    color: var(--primary-color);
}

.why--box ul li {
    position: relative;
    border-radius: 12px;
    padding: 1rem 2.5rem;
    background-color: var(--box-color);
    border: 1px solid rgba(28, 44, 91, 0.2);
}

.why--box ul li::before {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    top: 1.25rem;
    right: 1.15rem;
    background-repeat: no-repeat;
    background-image: url("../img/icons/checked.svg");
}

.why--box ul li:not(:last-child) {
    margin-block-end: 1rem;
}

.why--box ul li h6 {
    font-weight: 600;
    line-height: var(--line-height140);
    color: var(--text-color);
    margin-block-end: 0.75rem;
}

.why--box ul li p {
    font-weight: 400;
    line-height: var(--line-height140);
    color: var(--text-color);
}

/*********************
END: WHY
*********************/

/*********************
START: VISUAL NARRATIVE
*********************/
.visualNarrative {
    margin-block-end: var(--space-section);

}

.visualNarrative h4 {
    font-weight: 700;
    line-height: var(--line-height140);
    margin-block-end: 2.5rem;
}

.visualNarrative .swiper {
    width: 100%;
    height: 100%;
}

.visualNarrative .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    align-items: center;
    justify-content: space-between;
}

.visualNarrative .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.visualNarrative .swiper-slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 500 / 360;
    border-radius: var(--border-radius25);
}

/*********************
END: VISUAL NARRATIVE
*********************/

/*********************
START: WORK BENEFITS
*********************/
.workBenefits {
    margin-block-end: var(--space-section);
}

.workBenefits--content {
    width: 80%;
    margin-inline: auto;
}

.workBenefits h3 {
    font-weight: 700;
    margin-block-end: 2.5rem;
    line-height: var(--line-height140);
}

.workBenefits ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.workBenefits ul li {
    padding: 2rem;
    position: relative;
    background-color: var(--box-color-2);
    border-radius: var(--border-radius25);
    margin: 10px;
    flex-basis: calc(33.33% - 20px);
}

.workBenefits ul li h6 {
    font-weight: 700;
    margin-block-end: 1.875rem;
    margin-inline-end: 7rem;
}

.workBenefits ul li p {
    font-weight: 400;
    line-height: var(--line-height180);
}

.workBenefits ul li .icon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.9rem;
    background-color: var(--baseLight-color);
    border-bottom-right-radius: var(--border-radius20);
}

.workBenefits ul li .icon img {
    width: 50px;
    height: auto;
}

.workBenefits ul li .icon .curved-corner-topRight,
.workBenefits ul li .icon .curved-corner-bottomLeft {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: absolute;
}

.workBenefits ul li .icon .curved-corner-topRight {
    top: 0;
    right: -50px;
}

.workBenefits ul li .icon .curved-corner-bottomLeft {
    bottom: -50px;
    left: 0;
}

.workBenefits ul li .icon .curved-corner-topRight::before,
.workBenefits ul li .icon .curved-corner-bottomLeft::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    top: 0;
    right: 0;
    box-shadow: -25px -25px 0 0 var(--baseLight-color);
}

/*********************
END: WORK BENEFITS
*********************/

/*********************
START: JOB OPPORTUNITIES
*********************/
.jobOpportunities {
    padding-block-start: 120px;
    background-color: #F7F5EB;
    margin-block-end: var(--space-section);
}

.jobOpportunities h2 {
    font-weight: bold;
    line-height: var(--line-height130);
}

.jobOpportunities--form {
    margin-block: 2.5rem 3.75rem;
	width: 100%;
	display: flex;
    align-items: center;
/*     flex-wrap: wrap; */
    row-gap: 1rem;
    column-gap: 1rem;
}

.jobOpportunities--form .input--group{
	width: 50%;
}

.jobOpportunities--form .category-dropdown{
	width: 23%;
	padding-inline: 2.5rem 2rem;
}

.jobOpportunities--form .input--group, 
.jobOpportunities--form .category-dropdown{
	position: relative;
	height: 40px;
	display: flex;
	align-items: center;
}

.jobOpportunities--form .input--group input, 
.jobOpportunities--form .category-dropdown select{
	width:100%;
	border: none;
	height: 93%;
	font-family: var(--font-family);
	color: #5C5C5C;
}

.jobOpportunities--form .input--group input{
	margin-inline-start: 1.75rem;
}

.jobOpportunities--form .input--group:before{
	position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    top: 50%;
    right: 16px;
    transform: translatey(-50%);
    background-image: url(../img/icons/search.svg);
    background-repeat: no-repeat;
}

.jobOpportunities--form .category-dropdown select:focus{
	outline: none;
}

.jobOpportunities--form .input--group input::placeholder, 
.jobOpportunities--form .category-dropdown select::placeholder{
	color: #5C5C5C;
}

.jobOpportunities--form .category-dropdown select{
	-moz-appearance:none;
    -webkit-appearance:none; 
    appearance:none;
}

.jobOpportunities--form .input--group, 
.jobOpportunities--form .category-dropdown{
	border: none;
	border-radius: var(--border-radius60);
	background-color: var(--baseLight-color);
	border: 1px solid rgba(92, 92, 92, 0.5);
	padding-inline: 0.75rem;
}

.jobOpportunities--form .category-dropdown:after{
	position: absolute;
	content: "";
	width: 12px;
	height: 7px;
	top: 50%;
	left: 16px;
	transform: translatey(-50%);
	background-image: url("../img/icons/chevron-down-gray.svg");
	background-repeat: no-repeat;
}

.jobOpportunities--position h5 {
    font-weight: 600;
    margin-block-end: 1.5rem;
}

.jobOpportunities--position ul {
    display: flex;
    flex-wrap: wrap;
    margin-block-end: 3.75rem;
    justify-content: space-between;
}

.jobOpportunities--position ul li {
    margin: 16px;
    flex-basis: calc(50% - 32px);
    padding: 2.5rem;
    position: relative;
    min-height: 150px;
    border-radius: var(--border-radius25);
    background-color: var(--baseLight-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.jobOpportunities--position ul li .icon {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.9rem;
    background-color: #F7F5EB;
    border-bottom-right-radius: var(--border-radius20);
}

.jobOpportunities--position ul li .icon img {
    width: 50px;
    height: auto;
}

.jobOpportunities--position ul li .icon .curved-corner-topRight,
.jobOpportunities--position ul li .icon .curved-corner-bottomLeft {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: absolute;
}

.jobOpportunities--position ul li .icon .curved-corner-topRight {
    top: 0;
    right: -50px;
}

.jobOpportunities--position ul li .icon .curved-corner-bottomLeft {
    bottom: -50px;
    left: 0;
}

.jobOpportunities--position ul li .icon .curved-corner-topRight::before,
.jobOpportunities--position ul li .icon .curved-corner-bottomLeft::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    top: 0;
    right: 0;
    box-shadow: -25px -25px 0 0 #F7F5EB;
}

.jobOpportunities--position ul li h6 {
    font-weight: 700;
    margin-block-end: 0.75rem;
    line-height: var(--line-height160);
    margin-inline-end: 4rem;
}

.jobOpportunities--position ul li p {
    font-weight: 400;
    line-height: var(--line-height150);
}

/*********************
END: JOB OPPORTUNITIES
*********************/

/*********************
START: MEDIA
*********************/
@media screen and (min-width: 1440px) {

    .worth h2,
    .why--text h4,
    .visualNarrative h4,
    .workBenefits h3,
    .jobOpportunities h2 {
        font-size: 50px;
    }

    ul.worth--items li h3,
    .why--text p,
    .jobOpportunities--position ul li h6 {
        font-size: 22px;
    }

    .why--box h5,
    .jobOpportunities--position h5 {
        font-size: 26px;
    }

    .why--box ul li h6 {
        font-size: var(--text-xl);
    }

    .workBenefits ul li p,
    .jobOpportunities--position ul li p {
        font-size: var(--text-lg);
    }
}

@media screen and (min-width: 1320px) and (max-width: 1439px) {

    .worth h2,
    .why--text h4,
    .visualNarrative h4,
    .workBenefits h3,
    .jobOpportunities h2 {
        font-size: var(--text-4xl);
    }

    ul.worth--items li h3,
    .why--text p,
    .jobOpportunities--position ul li h6 {
        font-size: var(--text-xl);
    }

    .why--box h5,
    .jobOpportunities--position h5 {
        font-size: var(--text-2xl);
    }

    .why--box ul li h6 {
        font-size: var(--text-lg);
    }
}

@media screen and (max-width: 1319px) {

    .worth h2,
    .why--text h4,
    .visualNarrative h4,
    .workBenefits h3,
    .jobOpportunities h2 {
        font-size: var(--text-4xl);
    }

    ul.worth--items li h3,
    .why--text p,
    .jobOpportunities--position ul li h6 {
        font-size: var(--text-xl);
    }

    .why--box h5,
    .jobOpportunities--position h5 {
        font-size: var(--text-2xl);
    }

    .why--box ul li h6 {
        font-size: var(--text-lg);
    }

    .workBenefits ul li h6 {
        margin-inline-end: 6rem
    }
}

@media screen and (max-width: 1200px) {
    .why--box {
        padding: 3rem;
    }

    .workBenefits--content {
        width: 90%;
    }

    .workBenefits ul li h6 {
        margin-inline-end: 5rem
    }

    .jobOpportunities--position ul li {
        margin: 12px;
        flex-basis: calc(50% - 24px);
    }
}

@media screen and (max-width: 992px) {
    .worth--content {
        flex-direction: column-reverse;
    }

    ul.worth--items {
        width: 100%;
        margin-block-start: 2rem;
    }

    .worth--img {
        width: 60%;
    }

    .why--box {
        padding: 2rem;
    }

    .workBenefits--content {
        width: 100%;
    }

    .workBenefits ul li h6 {
        margin-inline-end: 4rem
    }

    .workBenefits ul li {
        flex-basis: calc(50% - 20px);
    }

    .jobOpportunities--position ul li {
        margin: 8px;
        flex-basis: calc(50% - 16px);
    }
	
	.jobOpportunities--form .input--group {
		width: 40%;
	}
	
	.jobOpportunities--form .category-dropdown {
	 	width: 28%;
	}
}

@media screen and (max-width: 768px) {
    .worth--img {
        width: 70%;
    }

    .why--content {
        flex-direction: column;
        margin-block-start: 250px;
    }

    .why--box {
        width: 100%;
        position: relative;
    }

    .why--text {
        width: 100%;
    }

    .why--img {
        position: absolute;
    }

    .workBenefits ul li {
        margin: 8px;
        flex-basis: calc(50% - 16px);
    }

    .jobOpportunities--position ul li h6 {
        font-size: var(--text-lg);
    }

    .jobOpportunities--position ul li {
        flex-basis: calc(100% - 16px);
    }
	
	.jobOpportunities--form{
		flex-wrap: wrap;
		column-gap: 0;
		justify-content: space-between;
	}
	
	.jobOpportunities--form .input--group {
		width: 100%;
	}
	
	.jobOpportunities--form .category-dropdown {
	 	width: 49%;
	}
}

@media screen and (max-width: 576px) {

    .worth h2,
    .why--text h4,
    .visualNarrative h4,
    .workBenefits h3,
    .jobOpportunities h2 {
        font-size: var(--text-3xl);
    }

    ul.worth--items {
        grid-template-columns: repeat(1, 1fr);
    }

    .worth--img {
        width: 80%;
    }

    .workBenefits ul li {
        flex-basis: calc(100% - 20px);
    }

    .jobOpportunities--position h5 {
        font-size: var(--text-xl);
    }
}

@media screen and (max-width: 425px) {

    .worth h2,
    .why--text h4,
    .visualNarrative h4,
    .workBenefits h3,
    .jobOpportunities h2 {
        font-size: var(--text-2xl);
    }

    .worth--img {
        width: 100%;
    }
	
	.jobOpportunities--form .category-dropdown {
	 	width: 100%;
	}
}

@media screen and (max-width: 375px) {}

/*********************
END: MEDIA
*********************/