.application-wrapper { margin: 50px 0;
}
.application-title {
color: red;
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.application-description {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.7px;
color: #333;
margin-bottom: 20px;
}
.application-email {
color: #35B9E9;
font-weight: bold;
text-decoration: none;
}
.cv-form-link {
display: inline-block;
margin-top: 10px; 
color: #35B9E9;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}
.opportunities-list {
display: flex;
flex-direction: column;
margin-top: 20px;
}
.opportunities-list li {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--txt-color);
padding: 26px 34px;
margin-bottom: 20px;
}
.opportunities-list li .job-title {
font-size: 32px;
font-weight: 800;
line-height: 1.5;
letter-spacing: -0.5px;
text-align: left;
min-width: 300px;
width: 26%;
word-break: break-all;
}
.opportunities-list li .job-info {
width: 17%;
}
.opportunities-list li .job-info h4 {
font-size: 16px;
font-weight: 600;
line-height: 1.7;
letter-spacing: -0.2px;
text-align: left;
}
.opportunities-list li .job-info span,
.job-intro .job-number{
font-size: 18px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.7px;
text-align: left;
}
.opportunities-list li .job-info .amount {
font-size: 24px;
font-weight: 600;
line-height: 32px;
letter-spacing: -0.3px;
text-align: left;
}
.opportunities-list li .apply-btn {
padding: 14px 46px 14px 20px;
font-size: 18px;
line-height: 1.2;
letter-spacing: -0.5px;
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.opportunities-list li .apply-btn::after {
position: absolute;
content: "";
background: url(//www.maharpolaris.com/wp-content/themes/maharpolaris/assets/img/ico_arrow_right.svg) no-repeat;
right: 9px;
top: 49%;
transform: translateY(-20%);
width: 25px;
height: 25px;
}
.application-process {
margin: 62px 0;
display: flex;
justify-content: space-between;
}
.application-process .left-blk {
margin-top: 59px;
}
.application-process .right-blk {
margin-left: 50px;
}
.application-process .left-blk .process-content {
margin-top: 46px;
width: 534px;
}
.application-process .process-content .step::before {
content: "";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 0%;
background-color: var(--txt-color2);
transition: height 0.5s ease;
}
.application-process .process-content .step.active::before {
height: 100%;
}
.application-process .process-content .step {
padding: 10px 13px;
cursor: pointer;
margin-bottom: 20px;
position: relative;
}
.application-process .process-content .step h3::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
background: url(//www.maharpolaris.com/wp-content/themes/maharpolaris/assets/img/ico_bigdownarr.svg) no-repeat center / cover;
width: 25px;
height: 17px;
}
.application-process .process-content .step.active h3::after {
rotate: -180deg;
top: 10%;
}
.application-process .step h3 {
font-size: 24px;
font-weight: 800;
line-height: 1.5;
position: relative;
}
.application-process .process-content .step p {
display: none;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
letter-spacing: -0.7px;
padding: 24px 106px 20px 42px;
text-align: left;
}
.application-process .process-content .step.step.active p {
display: block;
} @media only screen and (min-width:768px) and (max-width:1280px) {
.opportunities-list {
margin-top: 1.563vw;
}
.opportunities-list li {
padding: 2.031vw 2.656vw;
margin-bottom: 1.563vw;
}
.opportunities-list li .job-title {
font-size: 2.5vw;
letter-spacing: -0.039vw;
min-width: 23.438vw;
}
.opportunities-list li .job-info h4 {
font-size: 1.25vw;
letter-spacing: -0.016vw;
}
.opportunities-list li .job-info span,
.job-intro .job-number{
font-size: 1.406vw;
letter-spacing: -0.055vw;
}
.opportunities-list li .job-info .amount {
font-size: 1.875vw;
line-height: 2.5vw;
}
.opportunities-list li .apply-btn {
padding: 1.094vw 3.594vw 1.094vw 1.563vw;
font-size: 1.406vw;
letter-spacing: -0.039vw;
border-radius: 0.391vw;
}
.opportunities-list li .apply-btn::after {
right: 0.703vw;
top: 48%;
width: 1.953vw;
height: 1.953vw;
}
.application-process {
margin-top: 12.188vw;
}
.application-process .left-blk {
margin-top: 5.078vw;
}
.application-process .right-blk {
margin-left: 3.906vw;
}
.application-process .left-blk .process-content {
margin-top: 4.141vw;
width: 41.719vw;
}
.application-process .process-content .step.active::before {
width: 0.313vw;
}
.application-process .process-content .step {
padding: 0.781vw 1.016vw;
margin-bottom: 1.563vw;
}
.application-process .process-content .step::after {
right: 1.172vw;
width: 1.953vw;
height: 1.328vw;
}
.application-process .step h3 {
font-size: 1.875vw;
}
.application-process .process-content .step p {
font-size: 1.25vw;
letter-spacing: -0.055vw;
padding: 1.875vw 8.281vw 1.563vw 3.281vw;
}
} @media all and (max-width:767.9px) {
.opportunities-list {
margin-top: 5.333vw;
}
.opportunities-list li {
flex-direction: column;
align-items: flex-start;
padding: 6.933vw 9.067vw;
margin-bottom: 5.333vw;
}
.opportunities-list li .job-title {
font-size: 4.8vw;
letter-spacing: -0.133vw;
min-width: unset;
width: 100%;
}
.opportunities-list li .job-info {
margin: 2.667vw 0;
width: 100%;
}
.opportunities-list li .job-info h4 {
font-size: 3.733vw;
letter-spacing: -0.053vw;
}
.opportunities-list li .job-info span,
.job-intro .job-number{
font-size: 4.267vw;
letter-spacing: -0.187vw;
}
.opportunities-list li .job-info .amount {
font-size: 4.8vw;
line-height: 8.533vw;
letter-spacing: -0.08vw;
}
.opportunities-list li .apply-btn {
padding: 2.667vw 6.333vw;
font-size: 3.733vw;
letter-spacing: -0.133vw;
border-radius: 1.333vw;
}
.opportunities-list li .apply-btn::after {
right: -2.4vw;
top: 53%;
transform: translateY(-28%);
width: 6.667vw;
height: 6.667vw;
}
.application-process {
margin-top: 13.333vw;
flex-direction: column-reverse;
}
.application-process .left-blk {
margin-top: 17.333vw;
}
.application-process .right-blk {
margin-left: 0vw;
}
.application-process .left-blk .process-content {
margin-top: 14.133vw;
width: 100%;
}
.application-process .process-content .step.active::before {
width: 1.067vw;
}
.application-process .process-content .step {
padding: 2.667vw 3.467vw;
margin-bottom: 5.333vw;
}
.application-process .process-content .step::after {
width: 4.667vw;
height: 2.667vw;
right: 10.667vw;
}
.application-process .step h3 {
font-size: 5.333vw;
}
.application-process .process-content .step p {
font-size: 3.2vw;
letter-spacing: -0.187vw;
padding: 5.333vw 6.667vw;
}
}