/*=====>=====>=====>*** Banner Section CSS Start Here ***<=====<=====<=====*/
.site-banner {
    --bottom-space: clamp(60px, 3.5vw + 40px, 124px);
    padding-top: var(--sec-space);
    padding-bottom: calc(100px + var(--bottom-space));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.site-banner::before {
    content: '';
    position: absolute;
    bottom: -1px;
    height: var(--bottom-space);
    width: 100%;
    background-image: url(../images/hero-bottom-img.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.site-banner .banner-row {
    --gap: 75px;
}

.banner-row .banner-content-column {
    flex: 1;
    width: 100%;
    padding-right: clamp(5px, 4vw, var(--gap));
    align-self: center;
}

.banner-row .banner-img-col {
    width: 38.388%;
    padding-left: clamp(5px, 4vw, var(--gap));
    height: auto;
    display: flex;
    align-items: center;
}

.banner-content-column .banner-sub-title {
    line-height: 1.632;
    display: block;
    text-transform: uppercase;
}

.banner-content-column .banner-inner-data {
    margin: 12px 0 60px;
    --title-stroke-height: 90px;
}

.banner-content-column .banner-inner-data p {
    color: var(--color-accent-purple);
    margin-top: 24px;
    line-height: 1.579;
    width: 83%;
}

/* Responsive */
@media (max-width:1399px) {
    .site-banner {
        padding-bottom: calc(80px + var(--bottom-space));
    }

    .banner-content-column .banner-inner-data {
        margin: 10px 0 50px;
        --title-stroke-height: 70px;
    }

    .banner-content-column .banner-inner-data p {
        margin-top: 20px;
        width: 100%;
    }

}

@media (max-width:991px) {
    .site-banner {
        padding-bottom: calc(60px + var(--bottom-space));
    }

    .site-banner .banner-row {
        --gap: 10px;
    }


    .banner-content-column .banner-inner-data {
        margin: 10px 0 40px;
        --title-stroke-height: 50px;
    }

    .banner-content-column .banner-inner-data p {
        margin-top: 16px;
    }
}

@media (max-width:767px) {
    .site-banner .banner-row {
        --gap: 0;
        grid-row-gap: 30px;
    }

    .banner-row .banner-img-col {
        width: 100%;
    }
}

@media (max-width:575px) {
    .site-banner {
        padding-bottom: calc(50px + var(--bottom-space));
    }

    .site-banner::before{
        --bottom-space:40px;
    }

    .banner-content-column .banner-inner-data {
        margin: 10px 0 30px;
    }
}

/*=====>=====>=====>*** Banner Section CSS End Here ***<=====<=====<=====*/
/*=====>=====>=====>*** Whats You Niche Section CSS Start Here ***<=====<=====<=====*/
.your-niche-sec.sec-top-space {
    padding-top: calc(var(--sec-space) / 2);
}

.your-niche-inner p,
.equal-opportunity-inner p {
    margin-top:var(--space-40);
}

/*=====>=====>=====>*** Whats You Niche Section CSS End Here ***<=====<=====<=====*/
/*=====>=====>=====>*** Job Opportunities Section CSS Start Here ***<=====<=====<=====*/
.job-opportunities-sec{
    scroll-margin-top:50px;    
}

.job-opportunities-sec .job-opportunities-head {
    grid-gap:12px;
}

.job-opportunities-head .job-opportunities-title {
    flex: auto;
}

.job-opportunities-title p {
    font-size: var(--fs-20);
    font-weight: 500;
    margin-top: 12px;
    line-height: 1.55;
}

.job-opportunities-head .view-all-btn{
    line-height: 1.55;
    padding-inline:clamp(20px, 2.5vw, 24px);
}

.job-wrapper .opportunities-listing {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 24px;
}

.job-wrapper #load-more {
    text-transform: uppercase;
}

.opportunities-listing .job-card.full-card {
    padding: 30px;
}

.opportunities-listing .job-card {
    background-color: #FFFFFF12;
    border: 1px solid #FFFFFF66;
    box-shadow: 0px 2px 20px 0px #B3B3B31A inset;
    --card-space: 24px;
    padding-top: var(--card-space);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
}

.opportunities-listing .job-card:not(.full-card) :where(.job-card-head, .job-card-body) {
    padding-inline: var(--card-space);
}

.opportunities-listing .job-card .job-card-foot {
    padding: var(--card-space);
    border-top: 1px solid rgb(255, 255, 255, 20%);
    margin-top: auto;
    grid-gap: 16px;
}

.opportunities-listing .job-card .job-card-head {
    grid-gap: 16px;
}

.job-card .job-card-head :where(.job-categories, .job-location) {
    border: 1px solid #FFFFFF4D;
    border-radius: 50px;
    padding: 6px 18px;
    color:var(--color-white);
    line-height:1.375;
}

.job-card .job-card-head .job-location {
    background-image: url(../images/location-icons.svg);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center left 18px;
    padding-left: 40px;
}

.opportunities-listing .job-card:not(.full-card) .job-card-body {
    margin: 22px 0 26px;
}

.job-card .job-card-body .job-desc {
    color:var(--color-white);
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-card .job-card-body .job-desc:empty{
    display: none;
}

.job-card .job-card-foot .btn {
    font-size: var(--fs-16);
    padding-bottom: 10px;
    line-height: 1.5;
    border: 1px solid var(--color-white);
}

.job-card .job-card-foot .btn.btn-white:hover {
    border-color: var(--color-primary);
}

/* Full Card Extra CSS */
.job-card.full-card .job-card-body {
    margin-top: 20px;
    grid-column-gap: clamp(10px, calc(5vw), 95px);
}

.job-card.full-card .job-card-body .job-card-content {
    width: 100%;
    flex: 1;
    align-self: center;
}

.job-card.full-card .job-card-body .job-card-btns {
    grid-gap: 15px;
}

.job-card.full-card .job-card-body .job-card-btns .btn {
    --fs-18: var(--fs-17);
    line-height: 1.353;
}

@media (max-width:1649px) {
    .opportunities-listing .job-card.full-card {
        padding: 25px;
    }

    .opportunities-listing .job-card {
        --card-space: 20px;
    }

    .job-wrapper .opportunities-listing {
        grid-gap: 20px;
    }

    .job-wrapper :where(.job-categories, .job-location, .job-desc, .filter-btn, .job-card-foot .btn) {
        --fs-16: 15px;
    }
}


@media (max-width:1199px) {

    .opportunities-listing .job-card .job-card-head,
    .opportunities-listing .job-card .job-card-foot {
        grid-gap: 12px;
    }

    .job-wrapper :where(.job-categories, .job-location, .job-desc, .filter-btn, .job-card-foot .btn) {
        --fs-16: 14px;
    }

    .job-card .job-card-head :where(.job-categories, .job-location) {
        padding: 5px 12px;
    }

    .job-card .job-card-head .job-location {
        background-size: 12px;
        background-position: center left 12px;
        padding-left: 32px;
    }
}

@media (max-width:991px) {

    .opportunities-listing .job-card .job-card-head,
    .opportunities-listing .job-card .job-card-foot {
        grid-gap: 10px 8px;
    }

    .job-wrapper .opportunities-listing {
        grid-gap: 15px;
    }

    .opportunities-listing .job-card.full-card {
        padding: 20px 15px;
    }

    .opportunities-listing .job-card:not(.full-card) :where(.job-card-head, .job-card-body),
    .opportunities-listing .job-card .job-card-foot {
        padding-inline: calc(var(--card-space) - 5px);
    }

    .opportunities-listing .job-card:not(.full-card) .job-card-body {
        margin: 16px 0 20px;
    }

    .job-card.full-card .job-card-body .job-card-btns {
        grid-gap: 10px;
    }
}

@media (max-width:767px) {
    .job-wrapper .opportunities-listing {
        grid-template-columns: 1fr;
    }

    .job-card.full-card .job-card-body .job-card-btns {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width:420px) {
    .job-wrapper :where(.job-categories, .job-location, .filter-btn) {
        --fs-16: 12px;
    }
}

/*=====>=====>=====>*** Job Opportunities Section CSS End Here ***<=====<=====<=====*/
/*=====>=====>=====>*** Benefits Section CSS Start Here ***<=====<=====<=====*/
.benefits-row .benefit-col {
    width: 33.3%;
    min-height: 156px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    --inner-space: 30px;
    padding: var(--inner-space);
}

.benefits-row .benefit-col:not(:nth-child(3n + 3)) {
    border-right: 1px solid #0000001F;
}

.benefits-row .benefit-col:nth-child(n+4) {
    border-top: 1px solid #0000001F;
}

.benefits-row .benefit-col img {
    display: block;
    max-width: 54px;
    height: 54px;
    object-fit: contain;
    margin-inline: auto;
}

.benefits-row .benefit-col .benefit-title {
    margin-top: 10px;
    line-height: 1.55;
    width: 82%;
    margin-inline: auto;
}

/* Counter CSS */
.benefits-sec .benefit-counter-box {
    padding: calc(var(--space-60) / 2 + 6px) var(--space-60);
    border-radius: 24px;
}

.benefit-counter-box .benefit-counter-col {
    width: 25%;
    min-height: 102px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    --inner-space: 30px;
    padding: var(--inner-space);
}

.benefit-counter-box .benefit-counter-col:not(:last-child) {
    border-right: 1px solid rgb(255 255 255 / 50%);
}

.benefit-counter-col .counter-number {
    font-size: calc(var(--fs-34) - 2px);
    line-height: 1.5625;
}

.benefit-counter-col .counter-title {
    line-height: 1.55;
    margin-top: 2px;
}

@media (max-width:1199px) {
    .benefits-row .benefit-col {
        min-height: 120px;
    }

    .benefits-row .benefit-col,
    .benefit-counter-box .benefit-counter-col {
        --inner-space: 15px;
    }

    .benefits-row .benefit-col img {
        max-width: 45px;
        height: 45px;
    }
}

@media (max-width:767px) {

    .benefits-row .benefit-col,
    .benefit-counter-box .benefit-counter-col {
        width: 50%;
    }

    .benefits-sec .benefit-counter-box {
        padding-inline: calc(var(--space-60) / 2);
    }

    .benefits-row .benefit-col:not(:nth-child(3n + 3)) {
        border-right: none;
    }

    .benefits-row .benefit-col:not(:nth-child(2n + 2)) {
        border-right: 1px solid #0000001F;
    }

    .benefits-row .benefit-col:nth-child(n+3) {
        border-top: 1px solid #0000001F;
    }

    .benefit-counter-box .benefit-counter-col:nth-child(even) {
        border-right: 0;
    }

    .benefit-counter-box .benefit-counter-col:nth-child(n+3) {
        border-top: 1px solid rgb(255 255 255 / 50%);
    }

    .benefits-row .benefit-col .benefit-title {
        width: 100%;
    }
}

@media (max-width:400px) {

    .benefits-row .benefit-col,
    .benefit-counter-box .benefit-counter-col {
        min-height: 80px;
        --inner-space: 5px;
        padding-block: calc(var(--inner-space) * 2.5);
    }

    .benefits-row .benefit-col .benefit-title {
        --fs-20: 15px;
    }

    .benefits-row .benefit-col img {
        max-width: 40px;
        height: 40px;
    }
}

/*=====>=====>=====>*** Benefits Section CSS End Here ***<=====<=====<=====*/
/*=====>=====>=====>*** Companies Review Section CSS Start Here ***<=====<=====<=====*/
.clients-review-sec .clients-review-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 24px;
    max-width: min(1072px, 90%);
}

.clients-review-row .client-review-col {
    box-shadow: 0px 2px 10px 0px #76767640;
    border-radius: 12px;
    padding: 25px 20px;
    flex-direction: column;
}

.client-review-col .review-company-logo {
    max-height: 55px;
    max-width: 120px;
    object-fit: contain;
}

.client-review-col .company-name {
    margin-top: 12px;
    line-height: 1.579;
}

.client-review-col .rating-value {
    font-size: calc(var(--fs-25) - 1px);
    margin-top: 12px;
    line-height: 1.5834;
}

.client-review-col .review-rating {
    width: fit-content;
    margin-top: 8px;
}

.review-rating .rating-star {
    grid-gap: 4px;
}

.review-rating .rating-star img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.review-rating .rating-star.overflow-rating {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    z-index: 1;
    flex-wrap: nowrap;
    width: calc(var(--rating) + 2px);
}

.clients-review-sec .review-bottom-data {
    font-size: calc(var(--fs-20) + 2px);
    line-height: 1.591;
}

@media (max-width:1199px){
    .clients-review-sec .clients-review-row {
        grid-gap: 20px;
    }

    .clients-review-row .client-review-col {
        padding: 20px 10px;
    }
}
@media (max-width:991px){
    .clients-review-sec .clients-review-row {
        grid-gap: 15px;
        max-width: 100%;
    }

    .review-rating .rating-star img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .client-review-col .company-name,
    .client-review-col .rating-value{
        margin-top: 8px;
    }

    .client-review-col .review-rating {
        margin-top: 5px;
    }

    .client-review-col .review-company-logo {
        max-height: 45px;
        max-width: 100px;
    }
}

@media (max-width:767px){
    .clients-review-sec .clients-review-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width:400px){
    .clients-review-sec .clients-review-row {
        grid-gap: 10px;
    }
}

/*=====>=====>=====>*** Companies Review Section CSS End Here ***<=====<=====<=====*/
/*=====>=====>=====>*** About Andovar Section CSS Start Here ***<=====<=====<=====*/
.about-andovar-sec .about-andovar-row {
    --gap: 75px;
}

.about-andovar-row .about-andovar-content {
    flex: 1;
    width: 100%;
    padding-right: var(--gap);
}

.about-andovar-row .about-andovar-img {
    padding-left: var(--gap);
    width: 41.8%;
}

.about-andovar-row .about-andovar-img img {
    width: 100%;
    object-fit: contain;
}

.about-andovar-row .about-andovar-content p {
    margin-top: var(--space-40);
}

@media (max-width:1399px){
    .about-andovar-sec .about-andovar-row {
        --gap: 36px;
    }
}

@media (max-width:991px){
    .about-andovar-sec .about-andovar-row {
        --gap: 12px;
    }
}

@media (max-width:767px){
    .about-andovar-sec .about-andovar-row {
        --gap: 0;
        grid-row-gap: 30px;
    }

    .about-andovar-row .about-andovar-img {
        padding-left: var(--gap);
        width: 100%;
    }
}
/*=====>=====>=====>*** About Andovar Section CSS End Here ***<=====<=====<=====*/
/*=====>=====>=====>*** No Page Found Page CSS Start Here ***<=====<=====<=====*/
.error404  .site-main-data {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.page-not-found-sec .page-not-found-inner {
    max-width: 750px;
    margin-inline: auto;
    box-shadow: 0px 3px 15px 0px #4A4A4A33;
    border-radius: 16px;
    padding: clamp(30px, 4vw, 50px) clamp(15px, 4vw, 40px);
    background-color: var(--color-white);
}

.page-not-found-inner .no-page-found-title {
    font-size: calc(var(--fs-48) * 2 + 14px);
    line-height: 1;
    color: var(--color-secondary);
}

.page-not-found-inner h2 {
    margin: 12px 0 20px;
    line-height: 1.2;
}

.page-not-found-inner p{
    list-style: 1.55;
}

@media (max-width:1399px){
   .page-not-found-inner h2 {
        margin: 10px 0 16px;
    }

    .page-not-found-inner p{
        --fs-20: 18px;
    }
 
}
/*=====>=====>=====>*** No Page Found Page CSS End Here ***<=====<=====<=====*/