html {
    scroll-behavior: smooth;
}

.body-section {
    margin-top: 20px;
    font-family: 'Poppins', sans-serif;
}




.rectangle-container-alt {
    position: relative;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 82px;
    text-align: center;
    font-size: 25px;
}

.benefitscontainer {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    margin-top: -20px;
}

    .benefitscontainer p,
    .current-openings p {
        font-size: 20px;
        font-family: 'Poppins', sans-serif;
        color: #a39f9f;
        letter-spacing: 0.01em;
        line-height: 1.5;
        margin: 0 auto 50px;
    }

.current-openings {
    margin: 1.5em 0;
}

    .current-openings p {
        width: 70%;
    }

.benefitscontainer ul {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.benefitscontainer li {
    width: 20%;
    margin-bottom: 50px;
    list-style: none;
}

.benefitscontainer .img-grid {
    width: 35%;
    border-radius: 10px;
}

.benefitscontainer h3 {
    font-size: 18px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    color: #a39f9f;
    margin: 15px 0 20px;
    text-transform: capitalize;
    letter-spacing: 0.05em;
    line-height: 1.25;
}

.benefitscontainer li h3 {
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.benefitscontainer li p {
    font-family: 'Montserrat', sans-serif;
}

.benefitscontainer span {
    font-size: 0.75rem;
}

.button-job {
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1;
    cursor: pointer;
    background-color: #A9C74B;
    border: none;
    color: white;
    padding: 20px 40px;
    text-decoration: none;
    transition: all .2s ease-in;
}

    .button-job:hover {
        background: #93AD41;
    }

.variable-width button {
    display: none !important;
}

.variable-width img {
    margin: 0 15px;
}

.overall-carousel {
    overflow: hidden;
}

.ribbons-total {
    display: flex;
    justify-content: center;
    margin-bottom: -1.4em;
}

aside {
    position: relative;
    line-height: 40px;
}

    aside.ribbons,
    aside.grey-ribbon {
        width: 18em;
        margin: 0 auto;
        text-align: center;
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .05em;
        z-index: 200;
    }

    aside.ribbons {
        background-color: #e57177;
        margin-right: 2em;
    }

    aside.grey-ribbon {
        background-color: grey;
        margin-left: 2em;
    }

.ribbons a,
.grey-ribbon a {
    cursor: pointer;
}

.ribbons:before,
.grey-ribbon:before,
.ribbons:after,
.grey-ribbon:after {
    content: '';
    position: absolute;
    border-style: solid;
}

.ribbons:before {
    border-width: 20px 0 20px 10px;
    border-color: #e57177 transparent;
    left: -10px;
}

.ribbons:after {
    border-width: 20px 10px 20px 0;
    border-color: #e57177 transparent;
    right: -10px;
}

.grey-ribbon:before {
    border-width: 20px 0 20px 10px;
    border-color: grey transparent;
    left: -10px;
}

.grey-ribbon:after {
    border-width: 20px 10px 20px 0;
    border-color: grey transparent;
    right: -10px;
}

#whr_embed_hook {
    width: 75%;
    margin: auto;
}

.whr-info {
    display: flex;
    justify-content: space-between;
    width: 50%;
    flex-wrap: wrap;
    margin-right: 2.5em;
}

    .whr-info span {
        display: none;
    }

.whr-item {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 2em;
}

.whr-title {
    font-size: 20px;
    margin-bottom: 5px;
}

    .whr-title a {
        color: #e57177;
    }

.whr-location,
.whr-date {
    font-size: 16px;
    margin-bottom: 5px;
}

.job-labels {
    display: flex;
    justify-content: space-between;
    margin: 2em auto;
    width: 75%;
}

.whr-dept,
.department {
    display: none;
}

.location {
    padding-left: 3em;
}

.btn {
    font-family: 'Poppins', sans-serif;
    background-color: transparent;
    border: 2px solid #000;
    display: inline-block;
    padding: 8px 20px;
    min-width: 125px;
    font-weight: bold;
    line-height: 1.42;
    text-align: center;
    cursor: pointer;
    transition: 0.75s;
    border-radius: 2px;
}

    .btn:hover {
        color: #fff;
        box-shadow: inset 960px 0 0 0 black;
    }

.modal-checkbox {
    display: none;
}

[data-tooltip][tabindex="0"] {
    display: inline-block;
    position: relative;
    color: #1c1d1d;
    cursor: text;
}

    [data-tooltip][tabindex="0"]::after {
        display: none;
        position: absolute;
        bottom: 110%;
        left: 50%;
        padding: 2px 6px;
        transform: translate(-50%, 100%);
        border: 1px solid #fff;
        border-radius: 2px;
        background-color: #fff;
        white-space: nowrap;
        pointer-events: none;
        content: attr(data-tooltip);
    }

    [data-tooltip][tabindex="0"]:focus::after,
    [data-tooltip][tabindex="0"]:hover::after {
        display: block;
    }


.close-icon {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    overflow: hidden;
}

    .close-icon::before,
    .close-icon::after {
        content: '';
        position: absolute;
        height: 3px;
        width: 100%;
        top: 50%;
        left: 0;
        margin-top: -1px;
        background: #fff;
    }

    .close-icon::before {
        transform: rotate(45deg);
    }

    .close-icon::after {
        transform: rotate(-45deg);
    }

.main-title-block {
    margin-top: 150px;
    margin-bottom:25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.main-title {
    margin: auto;
    font-size: 45px;
    font-weight: 600;
    text-shadow: 0 0 2px #ffffff1a, 0 0 4px #ffffff4d, 0 0 8px #fff6, 0 0 136px #76b72f47;
    letter-spacing: -2px;
    color: #fff;
    background: linear-gradient(135deg, #fff, #76b72fcc, #436f14cc, #83e517cc, #cdedab, #fff);
    background-size: 200% 200%;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 4s ease-in-out infinite;
}

    .main-title::before {
        content: "";
        width: auto;
        height: 0px;
        box-shadow: -2px 14px 20px 1px #ffffff4d;
        display: flex;
    }

.submit-resume {
    top: -55px;
}

.learn-more {
    position: absolute;
    width: 215px;
    font-size: 17px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    padding: 15px 20px;
    color: #eee;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease-out;
}

    .learn-more:hover {
        transform: translateY(-3px);
    }

    .learn-more::before {
        --border-size: 3px;
        --border-angle: 0turn;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50px;
        border: 3px solid transparent;
        background: linear-gradient(to left, #fff, var(--color-prgreen)) border-box;
        background-image: conic-gradient(from var(--border-angle), #fff 10%, var(--color-prgreen) 50%, #fff);
        background-repeat: no-repeat;
        animation: bg-spin 3s ease-in-out infinite;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
    }

.careerSubtitle {
    padding: 30px 10% 20px;
    color: #a39f9f;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

    .careerSubtitle p {
        margin: 0 auto;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-size: 1.4rem;
        line-height: 1.6;
        font-weight: 600;
        max-width: 650px;
    }

/*Contact Form*/

.grid-section {
    max-width: 1200px;
    margin: 3rem auto 4rem;
    padding: 0 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #222;
}

.headercontent{
    margin-top: -20px;
}

.headercontent p {
    font-size: 1.3rem;
    font-weight: 600;
    color: #817b7b;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}


.text-success,
.text-danger {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding: 12px 15px;
    border-radius: 8px;
}

.text-success {
    background: #1f3f2f;
    color: #6aff6a;
    border: 1px solid #6aff6a;
}

.text-danger {
    background: #3f1f1f;
    color: #ff6a6a;
    border: 1px solid #ff6a6a;
}

.sec2contactform {
    box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    padding: 35px 40px;
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
    background-color: #1a1a1a;
    color: #e0e0e0;
}

.sec2contactform h2 {
     color: var(--color-prgreen);
     font-size: 24px;
     text-align: center;
     margin-bottom: 25px;
 }

.sec2contactform input{
      padding: 18px;
      border: none;
      background-color: #2c2c2c;
      color: #ffffff;
      border-radius: 8px;
      margin: 10px 0;
      width: 100%;
}



.sec2contactform textarea {
    padding: 18px;
    border: none;
    background-color: #2c2c2c;
    color: #bbb;
    border-radius: 8px;
    width: 100%;
    margin: 10px 0;
}

.sec2contactform button[type="submit"] {
       padding: 15px 20px;
       border: 0;
       background: #ffffff;
       color: #1c1d1b;
       font-size: 14px;
       text-transform: uppercase;
       cursor: pointer;
       border-radius: 20px;
       font-family: "Poppins", sans-serif;
       opacity: 0.9;
       transition: all 0.2s ease-in-out;
       margin-top: 5px;
    }

.sec2contactform button[type="submit"]:hover {
     box-shadow: var(--color-prgreen);
     background: var(--color-prgreen);
     color: #fff;
}

.rectangle-container-alt {
    position: relative;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 82px;
    text-align: center;
    font-size: var(--font-size-6xl);
}

.grey-icon {
    filter: grayscale(100%) brightness(100%) invert(100%);
    opacity: 0.9;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.benefitscontainer{
    margin-top: -60px;
}

.join-team-section{
    margin-top: -140px;
    padding-top: 80px;
}

.col2 {
    flex: 1 1 calc(50% - 1rem);
    min-width: 200px;
    box-sizing: border-box;
}

.file-input {
    display: none;
}

.drop-zone {
    position: relative;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #aaa;
    cursor: pointer;
    background-color: #2c2c2c;
    transition: background 0.2s, border-color 0.2s;
}

.drop-zone.dragover {
    background: #2b2b2b;
    border-color: #888;
 }

.file-info {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    background: #1f1f1f;
    color: #fff;
    border: 1px solid #444;
    border-radius: 8px;
    height: 3rem;
    font-size: 0.9rem;
}

#fileClear {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #bbb;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.drop-zone:hover {
    background: #262626;
}

#fileClear:hover {
    color: #fff;
}

.drop-zone, .file-info{
    max-width: 390px;
}

.submit-btn {
    margin-right: auto;
    flex: 0 0 auto; 
    display: block;
    padding: 20px 20px;
    margin-top: 20px;
}

.file-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 10px 0;
}

.drop-zone{
    min-height: 80px;
}

.upload-img {
    filter: grayscale(100%) brightness(100%) invert(100%);
    width: 55px;
    height: auto; 
    margin-bottom: 0.2rem; 
    flex-shrink: 0; 
}

.sub-title{
    font-size: 40px;
}

#FormCoders > .clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.clearfix input:focus,
.clearfix textarea:focus {
    border-color: white;
    background-color: #333;
    outline: none;
    box-shadow: 0 0 2px 0.5px white;
}

#FormCoders > .clearfix > .clearfix {
    float: left;
    width: calc(50% - 0.5rem);
    margin-right: 1rem;
    box-sizing: border-box;
}

#FormCoders > .clearfix > .clearfix:nth-child(2n) {
    margin-right: 0;
}

#FormCoders .clearfix > .clearfix input,
#FormCoders .clearfix > .clearfix textarea {
    width: 100%;
    box-sizing: border-box;
}

.validation {
    font-size: 13px;
    font-weight: 600;
    color: red;
    margin-top: 0px;
    margin-bottom: 5px;
}

.sec2contactform input::placeholder,
.sec2contactform textarea::placeholder,
.sec2contactform p{
    font-size: 14px;
    font-weight: 550;
    color: #bbb;
}

textarea#Message::-webkit-input-placeholder {
    font-size: 14px;
    font-weight: 600;
    color: #bbb;
    font-family: "Poppins", sans-serif;
}


.clearfix input:focus,
.clearfix textarea:focus {
    border-color: white;
    background-color: #333;
    outline: none;
    box-shadow: 0 0 2px 0.5px white;
}

@media only screen and (max-width: 1140px){
  .benefitscontainer{
      width: 90%;
  }

  .benefitscontainer ul {
       margin-left: -60px;
   }

   .benefitscontainer {

       margin-top: -40px;
   }

   .benefitscontainer p{
        font-size: 17px;
   }

    
    .benefitscontainer .img-grid {
        width: 30%;
        border-radius: 10px;
    }

    .benefitscontainer h3 {
        font-size: 16px;
    }

  
}

@media only screen and (max-width: 940px){
    .sec2contactform {
        max-width: 700px;
    }

}

@media only screen and (max-width: 800px) {
    .sec2contactform {
        max-width: 500px;
    }

    .benefitsTitle {
       text-align: center;
    }
}


@media only screen and (max-width: 764px) {
    .benefitsTitle .sub-title {
        font-size: 30px;
        margin-bottom: 1rem;
    }

    .benefitscontainer ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        gap: 2rem; 
        margin: 0 auto; 
        margin-left: -20px;
        margin-left: -40px;
    }

    .benefitscontainer li {
        width: 50%;
        max-width: 200px;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: -30px;
    }


    .benefitscontainer .img-grid {
        width: 45%;
        border-radius: 10px;
    }

    .benefitscontainer li h3 {
        font-size: 18px;
       
    }

    .benefitscontainer li p {
        font-size: 15px;
        margin-top: -10px;
    }

    .join-team-section{
        margin-top: -50px;
    }
}

@media only screen and (max-width: 640px) {
    .main-title-block {
        margin-top: 50px;

    }

    .main-title {
        font-weight: 600;
        font-size: 35px;
  
    }
      .careerSubtitle p{
            font-size: 1.3rem;
            max-width: 500px;
        }


    .joinTitle .sub-title {
        font-size: 30px;
    }

    .headercontent {
        margin-top: -20px;
    }

        .headercontent p {
            font-size: 1.3rem;
            max-width: 400px;
        }

    .sec2contactform {
        max-width: 450px;
    }

        .sec2contactform input::placeholder,
        .sec2contactform textarea::placeholder,
        .sec2contactform p {
            font-size: 12px;

        }

textarea#Message::-webkit-input-placeholder {
    font-size: 12px;

}


    .sec2contactform button[type="submit"] {
        padding: 10px 15px;
        font-size: 12px;
    }

}

@media only screen and (max-width: 560px) {
    .sec2contactform {
        max-width: 400px;
    }

        .sec2contactform input::placeholder,
        .sec2contactform textarea::placeholder,
        .sec2contactform p {
            font-size: 11px;
        }

    textarea#Message::-webkit-input-placeholder {
        font-size: 11px;
    }
}

@media only screen and (max-width: 515px) {
    .main-title {
        font-size: 30px;
    }

    .careerSubtitle p {
        font-size: 1.3rem;
        max-width: 450px;
    }

    .sec2contactform {
        width: 80%;
        max-width: 350px;
    }

 
    #FormCoders > .clearfix > .clearfix {
        float: none; 
        width: 100%; 
        margin-right: 0; 
        margin-bottom: 0rem; 
    }

    .sec2contactform input,
    .sec2contactform textarea {
        padding: 12px; 
    }

        .sec2contactform input::placeholder,
        .sec2contactform textarea::placeholder {
            font-size: 0.9rem;
        }
  

}


@media only screen and (max-width: 499px){
    .sec2contactform {
        width: 80%;
        max-width: 300px;
    }

    .joinTitle .sub-title {
        font-size: 25px;
    }

    .headercontent p {
        font-size: 1.2rem;
        max-width: 400px;
    }

    .main-title {
        font-size: 25px;
    }

    .careerSubtitle p {
        font-size: 1.2rem;
        max-width: 400px;
    }

}

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


    .benefitsTitle .sub-title {
        font-size: 22px;
        margin-bottom: 2rem;
    }

    .benefitscontainer li {
        width: 50%;
        max-width: 150px;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: -30px;
    }


    .benefitscontainer .img-grid {
        width: 25%;
    }

    .benefitscontainer li h3 {
        font-size: 16px;
    }

    .benefitscontainer li p {
        font-size: 14px;
        margin-top: -10px;
    }
}

@media only screen and (max-width: 450px) {
    .headercontent p {
        font-size: 1.1rem;
        max-width: 300px;
    }

    .learn-more {
        padding: 10px 10px;
        width: 170px;
        font-size: 14px;
    }

}


    @media only screen and (max-width: 400px) {
        .sec2contactform {
            width: 70%;
            max-width: 280px;
        }

        .main-title {
            font-size: 20px;
        }

        .careerSubtitle p {
            font-size: 1rem;
            max-width: 300px;
        }

       

        .joinTitle .sub-title {
            font-size: 20px;
        }

        .headercontent p {
            font-size: 1rem;
            max-width: 270px;
        }

    }