
#website-v3 h1 {
    font-size: 60px;
    line-height: 1.2;
    margin: 0;
    color: #FFFFFF;
}

#website-v3 h2 {
    font-size: 36px;
    line-height: 1.2;
}

.marginbottom40 {
    margin-bottom: 40px !important;
}

#website-v3 h3 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 10px;
}

#website-v3 p {
    font-size: 16px;
    line-height: 1.7;
    font-weight: 600;
}

#website-v3 .header-title {
    color: #222222 !important;
}

#website-v3 .banner-content p {
    font-size: 22px;
    line-height: 0.5;
}

#website-v3 .banner {
    background: linear-gradient(180deg, #007991 0%, #006E91 100%);
    padding: 100px 0 100px 200px;
}

#website-v3 .banner-content {
    margin: 0 auto;
    color: #FFFFFF;
    text-align: left;
}

#website-v3 .banner-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 60%;
}

#website-v3 .banner-nav p {
    font-size: 16px;
}

#website-v3 button.solid {
    width: auto;
    font-size: 16px;
    font-weight: bold;
    line-height: 17.58px;
    background: rgb(200, 250, 0);
    color: #000000;
    border: 2px solid rgb(200, 250, 0) !important;
    padding:20px 30px 20px 30px !important;
    text-transform: capitalize;
}

#website-v3 button.solid:hover {
    background: rgb(172 213 7);
    border: 2px solid rgb(172 213 7) !important;
}

#website-v3 button.border {
    width: auto;
    font-size: 16px;
    font-weight: bold;
    line-height: 17.58px;
    background-color: transparent;
    color: rgb(200, 250, 0);
    border: 2px solid rgb(200, 250, 0) !important;
    padding: 20px 30px 20px 30px !important;
    text-transform: capitalize;
}

#website-v3 button.border:hover { 
    background: rgb(172 213 7);
    border: 2px solid rgb(172 213 7) !important;
}

#website-v3 a.border-bluegreen {
    width: auto;
    font-size: 16px;
    font-weight: bold;
    line-height: 17.58px;
    background-color: transparent;
    color: #007991;
    border: 2px solid #007991;
    border-radius: 4px;
    padding: 20px 30px 20px 30px !important;
    text-transform: capitalize;
}

#website-v3 a.border-bluegreen:hover { 
    background: #007991 !important;
    border: #007991 !important;
    color: #FFFFFF !important;
    border-radius: 4px;
}

a:hover {
    background: none !important;
}

#website-v3 .two-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
}

#website-v3 .three-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 50px 0;
    grid-gap: 30px;
}

#website-v3 .card {
    padding: 30px 40px;
    border-radius: 10px;
}

#website-v3 .green-container {
    background: #79f9ab;
}

#website-v3 .grey-container {
    background: #f7f7f7;
}

#website-v3 .blue-green-container {
    background: linear-gradient(180deg, #007991 0%, #006E91 100%);
}

#website-v3 .contact-us h1 {
    font-size: 36px;
    color: #FFFFFF;
    margin-top: 0;
}

#website-v3 .contact-us p {
    font-size: 20px;
    color: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #007b8e;
}

#website-v3 form {
    display: flex;
    flex-direction: column;
}

#website-v3 .form-row {
    display: flex;
    justify-content: space-between;
}

#website-v3 .form-group {
    display: flex;
    flex-direction: column;
    width: 48%;
}

#website-v3 .form-group.full-width {
    width: 100%;
}

#website-v3 label {
    margin-bottom: 8px;
    font-size: 14px;
}

#website-v3 input[type="text"],
#website-v3 input[type="email"],
#website-v3 input[type="tel"],
#website-v3 textarea {
    padding: 10px;
    border: 2px solid #b0c9e08a !important;
    border-radius: 5px !important;
    font-size: 14px;
    width: 100%;
    background-color: #FFFFFF;
}

#website-v3 textarea {
    resize: vertical;
    height: 80px;
}

#website-v3 .checkbox-group {
    display: flex;
    align-items: center;
}

#website-v3 .checkbox-group input {
    margin-right: 10px;
}

#website-v3 label[for="terms"] {
    font-weight: normal !important;
    font-family: 'Lato-Regular';
    font-size: 12px !important;
    font-weight: 600 !important;

}

#website-v3 label[for="terms"] span{
    font-weight: normal !important;
    font-family: 'Lato-Bold';
    font-size: 12px !important;   
    font-weight: 600 !important;
}

#website-v3 .expertise .title {
    color: #222222;
    font-family: 'Lato-Bold' !important;
    font-size: 20px !important;
}

#website-v3 .expertise img {
    width: 45px;
}

#website-v3 .contact-us img {
    width: 250px;
}

#website-v3 .contact-us-grid{
    display: grid;
    grid-template-rows: 0fr 2fr 2fr;
}

#website-v3  .icon-two-grid {
    display: grid;
    grid-template-columns: .2fr 1fr;
    margin-bottom: 35px;
}

#website-v3 .icon-two-grid img {
    width: 80px;
}

#website-v3 .two-grid h3 {
    margin-top: 0 !important;
}

.term-grid {
    display: grid;
    grid-template-columns: .08fr 1fr;
}

.marginbottom0 {
    margin-bottom: 0;
}

.for-talents-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 16px !important;
    font-weight: bold;
    color: #FFFFFF;
}

.for-talents-nav a.active {
    border-bottom: 2px solid #FFFFFF;
}

.for-talents-nav .left-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 35px !important;
}

#sub-nav-account-portal .left-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 0 !important;
}

#sub-nav-account-portal a {
    color: #000000 !important;
    font-weight: 600;
}

#sub-nav-account-portal a:hover {
    color: #000000;
    border-bottom: 2px solid #000000 !important;
}

/***** MEDIA QUERIES ******/

@media (max-width: 767px) {
    .header-cons {
        grid-gap: 0;
    }
    #website-v3 .expertise .card {
        display: grid;
        grid-template-rows: 60px 40px auto;
    }

    .two-grid img {
        width: 40px !important;
    }


    #level-up-with-rd {
        padding: 60px 20px !important;
    }

    #career-growth-and-development .card {
        margin-bottom: 30px;
        padding: 20px;
    }

    #career-growth-and-development img {
        width: 200px;
        margin: 0 auto;
    }


    #career-growth-and-development .grid{
        text-align: center;
        display: grid;
        grid-template-rows: .9fr 1fr 2fr;
        padding-right: 0;
        padding-left: 0;
    }

    #career-growth-and-development .container,
    #in-demand-it-jobs .container {
        padding: 20px;
    }

    .for-talents-nav-xs {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        grid-column-gap: 35px;
        overflow-x: scroll;
        white-space: nowrap; 
    }

    .for-talents-nav-xs::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Opera */
    }

    #website-v3 button.border {
        width: 100%;
        font-size: 18px;
        font-weight: bold;
        line-height: 17.58px;
        background-color: transparent !important;
        color: rgb(200, 250, 0);
        border: 2px solid rgb(200, 250, 0) !important;
        padding: 24px 15px 24px 15px !important;
        text-transform: capitalize;
    }

    #website-v3 .card {
        padding: 30px;
        border-radius: 10px;
    }

    #website-v3 button.solid {
        width: 100%;
        font-size: 18px;
        font-weight: bold;
        line-height: 17.58px;
        background: rgb(200, 250, 0);
        color: #000000;
        border: 2px solid rgb(200, 250, 0) !important;
        padding: 24px 15px 24px 15px !important;
        text-transform: capitalize;
    }

    #website-v3 .contact-us img {
        width: 200px;
        margin: 0 auto;
    }

    #website-v3 .contact-us-grid{
        display: grid;
        grid-template-rows: 0fr 1fr 1.7fr;
        text-align: center;
        padding-right: 0;
        padding-left: 0;
    }

    #website-v3 .banner-nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        grid-gap: 15px;
    }

    #website-v3 .banner-content p {
        font-weight: normal !important;
        font-size: 18px;
        line-height: 25px;
    }

    #website-v3 .container {
        padding: 40px 20px;
    }

    #website-v3 h1 {
        font-size: 40px;
        line-height: 50px;
        margin-bottom: 20px;
    }
    #website-v3 .two-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 50px;
    }

    #website-v3 .three-grid {
        display: grid;
        grid-template-columns: 1fr;
        margin: 35px 0;
        grid-gap: 25px;
    }

    #website-v3 .form-container {
        background-color: #FFFFFF;
        border-radius: 15px;
        width: auto;
        padding: 30px 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    #website-v3 .form-group {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #website-v3 .form-row {
        display: block;
        justify-content: space-between;
        margin-bottom: 0;
    }

}

@media (min-width: 768px) and (max-width: 1284px) {
    .banner-two-grid {
        display: grid;
        justify-content: space-between;
        padding: 35px 0 !important;
        grid-template-columns: 65% 35%;
        align-items: center;
    }
}

@media (min-width: 1285px) {
    .banner-two-grid {
        display: grid;
        justify-content: space-between;
        padding: 50px 0 0 0 !important;
        grid-template-columns: 63% 40%;
        align-items: center;
    }
}

@media (min-width: 768px) and (max-width: 1079px) {
    #website-v3 .green-container .two-grid {
        grid-gap: 75px !important;
        margin: 0 auto !important; 
    }

    #website-v3 .expertise .card {
        display: grid;
        grid-template-rows: 70px 40px auto;
    }

    #website-v3 .card { 
        padding: 60px 35px !important;
    }

    #website-v3 .container {
        padding: 80px 0 !important;
    }

    #website-v3 .form-container {
        background-color: #FFFFFF;
        border-radius: 15px;
        width: auto;
        padding: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .three-grid .card {
        display: grid;
        grid-template-rows: 70px 70px 100 !important;
    }
    #website-v3 .banner-content {
        padding: 90px 20px !important;
    }
}

@media (min-width: 1080px) {
     #website-v3 .container {
        padding: 80px 60px;
    }

    #website-v3 .form-container {
        background-color: #FFFFFF;
        border-radius: 15px;
        width: 500px;
        padding: 40px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    #website-v3 .banner-content {
        padding: 45px 0 130px 0 !important;
    }
}

@media (min-width: 768px) {
    .header-cons {
        grid-gap: 65px;
    }

    #website-v3 .card { 
        padding: 40px 35px !important;
    }

    #website-v3 .expertise .card {
        display: grid;
        grid-template-rows: 0.6fr .4fr 1fr;
    }

    .two-grid img {
        width: 55px !important;
    }

    #website-v3 .green-container .two-grid {
        grid-gap: 75px !important;
        margin: 0 70px; 
    }

    #career-growth-and-development .card {
        margin-bottom: 30px;
        padding: 25px 35px;
    }

    #career-growth-and-development img {
        width: 250px;
    }

    #career-growth-and-development .grid{
        display: grid;
        grid-template-rows: .7fr 2fr 2fr;
        padding-right: 0;
        padding-left: 0;
    }

    #career-growth-and-development .container,
    #in-demand-it-jobs .container {
        padding: 80px 60px;
    }

    .for-talents-nav-xs {
        display: none;
    }

    #website-v3 .hidden-desktop {
        display: none;
    }
}

.for-talents-nav a {
    position: relative;
    padding-bottom: 10px;
    width: max-content;
}

.for-talents-nav a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Start from the center */
    width: 0;
    height: 2px;
    background-color: #FFFFFF;
    transition: width 0.4s ease, left 0.4s ease; /* Animate both width and left */
}

.for-talents-nav a:hover::before {
    width: 100%; /* Expand the line to full width */
    left: 0; /* Move the starting point to the left */
}

.card-text h3 {
    font-size: 20px;
    font-height: 1.5;
}

.card-dets{
    font-weight: 600 !important;
    font-size: 16px !important;
    font-height: 1.2 !important;
}

.rolegroup-con .card-title {
    font-size: 18px !important;
}

.rolegroup-con .jobrole-con {
    font-size: 16px;
    margin: 0;
    font-weight: 600 !important;
    line-height: 1.5;
}

.jobrole-con a:hover {
    text-decoration: underline !important;
}

#sub-nav-account-portal .active, .for-talents-nav .active {
    border-bottom: 2px solid #FFFFFF;
}

#level-up-with-rd h1 {
    font-size: 55px;
    font-weight: bold;
    color: #FFFFFF !important;
}

#level-up-with-rd p {
    color: #FFFFFF !important;
    font-size: 20px !important;
}

section#career-growth-and-development  {
    background-color: #FAFAFA !important;
    margin: 0;
    width: -webkit-fill-available;
}

#career-growth-and-development a {
    text-decoration: underline !important;
    font-weight: bold;
}

.three-grid img {
    width: 55px;
}

.three-grid .card-text {
    padding-top: 10px;
}

.header-cons img {
    width: 65%;
}

.three-grid .card-dets {
    margin-bottom: 10px !important;
}

.fs18 {
    font-size: 18px;
}

.fs32 {
    font-size: 32px;
}

html {
  scroll-behavior: smooth;
}

#contact-us .success-notif-container {
    color: #222222;
    padding: 15px 20px;
    text-align: center;
    margin-top: 0 !important;
    border-radius: 4px;
    width: fit-content;
    font-weight: bold;
    font-size: 14px;
    margin: 0 auto 50px auto;
}

#contact-us .success-notif {
    margin-top: 0;
}

.margintop20 {
    margin-top: 20px !important;
}

.inquiry-link p:hover {
    text-decoration: underline !important;
    cursor: pointer;
    color: rgb(200, 250, 0) !important;
}
