/* Start Banner Section */
.banner {
    background-image: url(../../img/testimonial/banner-bg.webp);
    background-size: cover;
}

.banner .banner-container .breadcrumb li a {
    color: var(--black) !important;
}

.banner .breadcrumb li:first-child a {
    width: 18px;
    height: 18px;
}

/* End Banner Section */

/* Start Experience Section */
.experience .experience-content .graph-content {
    box-shadow: var(--lightShadow);
    border-radius: 15px;
    background-image: url(../../img/career/graph.webp);
    background-size: 225px 196px;
    background-position: right 14px center;
    background-repeat: no-repeat;
    padding: 1.2rem 1rem 5rem;
}

.experience .experience-content .experience-detail::before {
    content: '';
    background-image: url(../../img/career/experience.webp);
    background-size: 100% 100%;
    width: 142px;
    height: 142px;
    margin-bottom: 12px;
}

.experience .experience-content .graph-content h3,
.experience .experience-content .graph-content p {
    width: 165px;
}

.experience .experience-content .graph-content b {
    width: calc(100% - 80%);
    color: #17345B;

}

.experience .experience-info ul li {
    box-shadow: var(--lightShadow);
    border-radius: 8px;
    padding-left: 2.5rem !important;
    width: 47%;
}

.experience .experience-info ul li::before {
    content: '';
    background-image: url(../../img/career/white-tick.svg);
    background-size: 8px 8px;
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--darkBlue);
    position: absolute;
    border-radius: 50px;
    left: 15px;
    top: 20px;
}

/* End Experience Section */

/* Start Query Section */

.query {
    background-color: rgba(13, 38, 101, 0.9);
}

.query .query-detail {
    border: 1px solid rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.1);

}

.query .form {
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.1);
}

.query form .red-star {
    width: 8px;
    height: 8px;
}


.query form .input-fields input,
.query form .input-fields textarea {
    outline: none;
    border: 1px solid var(--darkGreyColor);
    padding: 10px;
    background-image: linear-gradient(180deg,
            var(--lightGreyColor) 0%,
            var(--white) 100%);
    resize: none;
}


.query form .mobile .mob {
    border: 1px solid var(--darkGreyColor);
    background-image: linear-gradient(180deg,
            var(--lightGreyColor) 0%,
            var(--white) 100%);
}

.query .form .input-error .mob,
.query .form .input-error input {
    border: 1px solid var(--red);
}

.query form .mobile .mob .phonecode-field {
    outline: 0;
    width: 100%;
}

.query form .mobile .mob .phonecode-field span,
.query form .mobile .mob .phonecode-field .country-code {
    color: var(--grey);
}

.query form .mobile .mob .phonecode-field span {
    border-left: 1px solid var(--darkGreyColor);
    min-width: 45px;
}

.query form .mobile .mob .phonecode-field .country-code {
    width: 50px;
    border: none;
    outline: 0;
    background-color: transparent;
}

.query form .mobile .mob .phonecode-field .country-code option {
    color: var(--grey);
}


.query .form ::-webkit-input-placeholder {
    color: var(--grey);
    font-size: 14px;
}

.query .form :-ms-input-placeholder {
    color: var(--grey);
    font-size: 14px;
}

.query .form :-moz-placeholder {
    color: var(--grey);
    font-size: 14px;
}

.query form .mobile .mob .phonecode-field input {
    border: none;
    background: transparent;
    box-shadow: none;
}

.query form .mobile .mob .phonecode-field .hidden-field {
    z-index: -1;
    width: 0;
    height: 0;
    pointer-events: none;
    overflow: hidden;
}

.query form .mobile .mob .phonecode-field .hidden-field input {
    border: none;
    padding: 0;
}

.query form .input-fields .input-item p {
    width: fit-content;
}

.query form .input-fields .form-select {
    color: var(--grey);
    font-size: 14px;
    padding: 10px;
    background: url(../../img/career/down-arrow.svg), linear-gradient(180deg,
            var(--lightGreyColor) 0%,
            var(--white) 100%);
    background-size: 13px 10px, 100% 100%;
    background-repeat: no-repeat;
    background-position: center right 15px, center;
    font-weight: 500;
}

.query form .input-fields .form-select:focus {
    border: 1px solid var(--darkGreyColor);
    box-shadow: none;
}

.query form .input-fields .form-select option {
    color: var(--black);
}

.query form .form-consent input {
    margin-top: 5px;
    margin-right: 10px;
}

.query .form .consent-error {
    display: none;
}

.query .form .consent-error p {
    color: var(--red);
}

.query form .checkbox-list .checkbox-item input[type="checkbox"] {

    margin-right: 7px;
}


.query .form input[type="checkbox"] {
    border: 1px solid #E7E7E7;
    min-width: 12px;
    height: 12px;

}

.query .buttons .btn-blue {
    min-width: 120px;
}

.query .query-detail ul li::before {
    content: '';
    background-image: url(../../img/career/white-tick.svg);
    background-size: 8px 6px;
    background-repeat: no-repeat;
    background-position: center;
    height: 17px;
    width: 17px;
    border-radius: 50%;
    background-color: #F4F5F93D;
    display: flex;
    margin-right: 10px;
}

.query .form input.input-error,
.query .form select.input-error,
.query .form textarea.input-error {
  border: 1px solid var(--red);
}


.query .form input.input-error::placeholder,
.query .form textarea.input-error::placeholder {
  color: var(--red);
}

/* End Query Section */


/* Start Grow Section */

.grow .grow-container p span {
    width: 50px;
    height: 50px;
    padding: 10px;
}

.grow .grow-container p b {
    width: calc(100% - 65px);
}

.grow .grow-container .grow-content p {
    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
    padding: 1.2rem 1.8rem;
}

/* End Grow Section */


/* Start Reason Section */
.reason .reason-list {
    border: 1px solid var(--darkGreyColor);
}

.reason .reason-item span {
    width: 50px;
    height: 50px;
    padding: 10px;
    animation: leftRight 3s linear infinite;
}

.reason .reason-item::before {
    content: "";
    border-top: 1px solid var(--darkGreyColor);
    width: calc(100% + 1px);
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: -1;
}

/* End Reason Section */

/* Start Profession Section */
.profession .profession-container {
    background-image: url(../../img/career/layer.webp), linear-gradient(180deg, #001C43 0%, #012557 100%);
    background-size: cover;
    padding: 2rem;
}

.profession .buttons {
    width: 125px;
    height: 125px;
    border: 1px solid rgba(255, 255, 255, 0.349);
    background-image: url(../../img/career/rounded-text.webp);
    background-size: 104px 101px;
    background-repeat: no-repeat;
    background-position: top 7px center;
}


.profession .buttons a {
    min-width: 43px;
    height: 43px;
    padding: 14px;
    background-image: linear-gradient(90deg, var(--primaryColor) 0%, var(--greenColor)100%);
}

.profession .buttons a img {
    filter: invert(1);
    transform: rotate(-45deg);
}

/* End Profession Section */

/* Start Career Section */
.career .career-content p {
    text-align: left !important;
}

.career .career-content ul li::before {
    content: "";
    background-image: url(../../img/onsite/element.svg);
    background-size: 100% 100%;
    height: 22px;
    min-width: 22px;
    margin: 0px 10px 0 0;
    animation: rotation 2s linear infinite;
}

.career .career-content ul {
    border-bottom: 1px solid var(--darkGreyColor);
    padding-bottom: 20px;
}

.career .client .client-list span {
    margin: 2rem 2rem 0 0;
    width: 45%;
}

.career .client .client-list span:nth-child(2n) {
    margin-right: 0;
}

.career .client .client-list span:last-child {
    margin-right: 0 !important;
}

.career .fact-list .fact-item span {
    min-width: 60px;
    height: 60px;
    padding: 14px;
}

.career .fact-list .fact-item .fact-content {
    width: calc(100% - 75px);
}

.career .fact-list .fact-item .fact-content strong {
    font-size: 22px;
}

.career .fact {
    box-shadow: var(--lightShadow);
    border-radius: 30px;
}

.career .fact-list .fact-item {
    border-bottom: 1px solid var(--darkGreyColor);
    padding: 1.8rem 0;
}

/* End Career Section */

/* Start Benefit Section  */
.benefit .benefit-list {
    counter-reset: section;
}

.benefit .benefit-item {
    margin-top: 2.5rem;
}

.benefit .benefit-item::before {
    content: "/  " counter(section, decimal-leading-zero) "  /";
    counter-increment: section;
    font-size: 14px;
    font-weight: 500;
    color: var(--grey);
    margin-bottom: 15px;
}

.benefit .benefit-item span {
    width: 50px;
    height: 50px;
    padding: 12px;
}

/* End Benefit Section  */

@media screen and (min-width: 768px) {

    /* Start Experience Section */
    .experience .experience-content .graph-content {
        width: 305px;
        background-size: auto;
        padding: 1.2rem 1rem 8rem;
    }

    .experience .experience-content .experience-detail {
        width: 50%;
    }

    .experience .experience-info ul li {
        margin-right: 1.5rem;
    }

    .experience .experience-info ul li:nth-of-type(2n) {
        margin-right: 0;
    }

    .experience .experience-info ul li:last-child {
        margin-right: 0 !important;
    }

    /* End Experience Section */

    /* Start Query Section */

    .query .query-content {
        width: 42%;
        position: sticky;
        top: 80px;
    }

    .query form {
        width: 53%;

    }

    /* End Query Section */



    /* Start Grow Section */

    .grow .grow-container .grow-list {
        width: 40%;
    }

    .grow .grow-container .grow-content {
        width: 55%;
    }

    .grow .grow-container p::before {
        content: '';
        border-top: 10px solid transparent;
        border-right: 12px solid var(--white);
        border-bottom: 10px solid transparent;
        position: absolute;
        left: -12px;
        top: 18px;
    }

    /* End Grow Section */

    /* Start Reason Section */
    .reason .reason-item {
        border-right: 1px solid var(--darkGreyColor);
    }

    .reason .reason-item:nth-of-type(2n),
    .reason .reason-item:last-child {
        border: none;
    }

    /* End Reason Section */

    /* Start Profession Section */
    .profession .heading {
        width: 72%;
    }

    /* End Profession Section *

    /* Start Career Section */
    .career .fact {
        width: 320px;
        padding: 1.8rem 1.5rem !important;
        position: sticky;
        top: 100px;
    }

    .career .career-content {
        width: 47%;
    }

    /* End Career Section */

    /* Start Benefit Section  */
    .benefit .benefit-item {
        width: 43%;
    }

    /* End Benefit Section  */
}


@media screen and (min-width: 1024px) {

    /* Start Banner Section */
    .banner .banner-container h1::after {
        content: "";
        background-image: url(../../img/testimonial/arrow.webp);
        background-size: 100% 100%;
        min-width: 85px;
        height: 82px;
        margin-left: 8rem;
    }

    /* End Banner Section */


    /* Start Grow Section */

    .grow .grow-container .heading {
        width: 27%;
    }

    .grow .grow-container .grow-head {
        width: 72%;
    }

    /* End Grow Section */


    /* Start Query Section */
    .query {
        background-image: url(../../img/career/query-bg.webp);
        background-size: cover;
    }

    .query .query-content {
        top: 145px;
    }

    /* End Query Section */

    /* Start Experience Section */
    .experience .experience-content .experience-detail {
        width: 31%;
    }

    /* End Experience Section */

    /* Start Career Section */

    .career .career-content {
        width: 60%;
    }

    .career .fact{
        position: static;
    }

    .career .fact-list .fact-item .fact-content strong {
        font-size: 25px;
    }

    .career .client .client-list span {
        width: 28%;
    }

    .career .client .client-list span {
        margin: 1rem 1rem 0 0;
    }

    .career .client .client-list span:nth-child(2n) {
        margin-right: 1rem;
    }

    .career .client .client-list span:nth-child(3n) {
        margin-right: 0;
    }

    /* End Career Section */

    /* Start Benefit Section  */
    .benefit .benefit-item {
        width: 31%;
    }

    /* End Benefit Section  */
}


@media screen and (min-width: 1366px) {

    /* Start Banner Section */
    .banner {
        background-size: 100% 100%;
    }

    .banner .banner-container h1 {
        font-size: 50px;
    }

    /* End Banner Section */

    /* Start Experience Section */
    .experience .container {
        width: 1283px !important;
        max-width: 1283px !important;
    }

    .experience .experience-content {
        width: 48%;
    }

    .experience .experience-info {
        width: 47%;
    }

    .experience .experience-content .experience-detail {
        width: 46%;
    }

    .experience .experience-info ul li:nth-of-type(2n) {
        margin-right: 0;
    }

    /* End Experience Section */


    /* Start Query Section */
    .query .query-content {
        width: 35%;
        position: static;

    }

    .query form {
        width: 60%;
        padding: 2.3rem !important;
    }

    .query form .input-fields {
        width: 48%;
    }

    .query form .job {
        width: 100%;
    }

    /* End Query Section */

    /* Start Grow Section */

    .grow .grow-container .heading::after {

        content: '';
        background-image: url(../../img/career/progress.webp);
        background-size: 100% 100%;
        width: 255px;
        height: 177px;
        margin-top: 20px;
    }

    .grow .grow-container .grow-list {
        width: 40%;
    }

    .grow .grow-container .grow-head {
        width: 64%;
    }

    .grow .grow-container .grow-content {
        width: 53%;
    }

    /* End Grow Section */


    /* Start Reason Section */
    .reason .reason-item:nth-of-type(2) {
        border-right: 1px solid var(--darkGreyColor);
    }

    /* End Reason Section */

    /* Start Profession Section  */
    .profession .heading h2 {
        font-size: 28px;
        line-height: 2 !important;
    }

    .profession .heading span {
        width: 174px;
        border: 1px solid rgba(255, 255, 255, 0.7);
    }

    .profession .heading span::after {
        content: "";
        background-image: url(../../img/career/girl.webp);
        width: 90px;
        height: 90px;
        position: absolute;
        right: -70%;
        top: -43px;
        animation: leftRight 3s linear infinite;
    }

    .profession .profession-container {
        background-size: 100% 100%;
        padding: 2.8rem 5rem;
    }

    /* End Profession Section  */

    /* Start Career Section */
    .career .career-container {
        background-image: url(../../img/career/delegate.webp);
        background-size: 320px 441px;
        background-repeat: no-repeat;
        background-position: top left 360px;
    }

    .career .career-content {
        width: 40%;
    }

    .career .client .client-list span {
        width: 30%;
    }

    /* End Career Section */

    /* Start Benefit Section  */
    .benefit .benefit-container {
        width: 90%;
    }

    .benefit .benefit-item {
        width: 28%;
    }

    /* End Benefit Section  */

}


@media screen and (min-width: 1500px) {

    /* Start Experience Section */
    .experience .container {
        width: 1200px !important;
        max-width: 1200px !important;
    }

    .experience .experience-content {
        width: 51%;
    }

    /* End Experience Section */
}