.cloud-back-button-container button{
    font-family: "Ubuntu",  sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    color: #C9CAD8;
    padding: 9px 17px;
    border: 1px solid #C9CAD8;
    border-radius: 41px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    cursor: pointer;
    outline: none;
    transition: 0.5s;
}
.cloud-back-button-container button:hover{
    background: #F92CB1;
    color: #fff;
    border-color: transparent;
}

.near-shore-page-container{
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-bottom: 80px;
}
.near-shore-page-hero-section{
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: flex-start;
    gap: 40px;
    color: #FFFFFF;
}
.near-shore-page-hero-left{
    display: flex;
    flex-direction: column;
    /*justify-content: space-evenly;*/
    height: 100%;
    gap: 50px;
}
.near-shore-page-hero-left-wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.near-shore-page-hero-title{
    font-family: "Oxygen",  sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 109.00000000000001%;
    letter-spacing: 0;
    text-transform: capitalize;
}
.near-shore-page-subtitle{
    font-family: "Host Grotesk",  sans-serif;
    font-weight: 300;
    font-size: 27px;
    line-height: 118%;
    letter-spacing: 0;
    text-transform: capitalize;
}
.near-shore-page-hero-logo{
    max-width: 474px;
}
.near-shore-page-primary-btn-container{
    display: flex;
    align-items: flex-start;
}
.near-shore-page-primary-btn{
    padding: 19px 46px;
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: #FFFFFF;
    background: #8969F6;
    outline: none!important;
    border: none;
    cursor: pointer;
    border-radius: 41px;
    transition: 0.5s;
}
.near-shore-page-primary-btn:hover {
    background: #F92CB1;
}
.near-shore-page-hero-right{
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
}
.near-shore-page-hero-right::after{
    content: "";
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../assets/img-opt/near-shore/coding-iillustration.svg");
    z-index: 2;
}

.near-shore-page-banner-section{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.near-shore-page-banner-right{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.near-shore-page-banner-left{


}
.near-shore-page-banner-image{
    border-radius: 20px;
}
.near-shore-page-banner-title{
    font-family: "Oxygen",  sans-serif;
    font-weight: 700;
    font-size: 35px;
    line-height: 128%;
    letter-spacing: 0;
    margin: 0;
}
.near-shore-page-banner-text{
    font-family: "Oxygen", sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 128%;
    letter-spacing: 0;
    color: #FFFFFF;
}
.near-shore-page-secondary-btn-container{
    display: flex;
    justify-content: flex-start;
}
.near-shore-page-secondary-btn{
    padding: 19px 58px;
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 19px;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
    vertical-align: middle;
    color: #FFFFFF;
    background: #8969F6;
    outline: none!important;
    border: none;
    cursor: pointer;
    border-radius: 41px;
    transition: 0.5s;
}
.near-shore-page-secondary-btn:hover {
    background: #F92CB1;
}


.near-shore-page-benefits-section{
    display: flex;
    background: #211E24;
    border: 2.5px solid #66666680;
    border-radius: 10px;
    padding: 40px 40px 60px;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
.near-shore-page-benefits-section::after{
    content: "";
    background-image: url("../../assets/img-opt/near-shore/pink-circle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 6%;
    width: 330px;   /* or any size */
    height: 330px;
    z-index: 2;
}

.near-shore-page-benefits-left{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.near-shore-page-benefits-title{
    font-family: "Oxygen",  sans-serif;
    font-weight: 700;
    font-size: 33px;
    line-height: 128%;
    letter-spacing: 0;
}
.near-shore-page-benefits-list{
    font-family: "Oxygen",  sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 163%;
    letter-spacing: 0;
    color: #FFFFFF;
    padding-right: 20%;
    z-index: 10;
    position: relative;
}
.near-shore-page-benefits-right{
    background:
            url("../../assets/img-opt/course-detail/career-prospects.png") no-repeat right center,
            linear-gradient(
                    150deg,               /* ← the diagonal angle */
                    transparent 58%,      /* where diagonal begins */
                    #F8EBFE 58%
            );
    background-size: contain, cover;
    position: absolute;
    bottom: -10%;
    right: 0;
    z-index: 3;
    height: 353px;
    width: 418px;
}


.near-shore-page-banner-image{
    height: 430px;
    width: 640px;
}

/*.near-shore-page-team-header{*/
/*    background:*/
/*            linear-gradient(180deg, #000000 -0.84%, rgba(0, 0, 0, 0.1) 19.77%, rgba(0, 0, 0, 0) 33.72%, rgba(0, 0, 0, 0.1) 75.89%, #000000 100.3%),*/
/*            url("../img-opt/near-shore/our-nearshore-team.jpg") no-repeat center 35%;*/
/*    background-size: cover;*/
/*    height: 80vh;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: space-between;*/
/*    margin-bottom: 80px;*/
/*}*/
.near-shore-page-team-header {
    background:
            linear-gradient(180deg,
            #000000 0%,
            rgba(0, 0, 0, 0.8) 10%,
            rgba(0, 0, 0, 0) 50%,
            rgba(0, 0, 0, 0.8) 90%,
            #000000 100%),
            url("../../assets/img-opt/near-shore/our-nearshore-team.jpg") no-repeat center 35%;
    background-size: cover;
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 80px;
}



.near-shore-page-team-title{
    font-family: "Host Grotesk",  sans-serif;
    font-weight: 600;
    font-style: Italic;
    font-size: 50px;
    line-height: 97%;
    letter-spacing: 0;
    text-align: center;
}
.near-shore-page-team-description{
    font-family: "Host Grotesk",  sans-serif;
    font-weight: 500;
    font-size: 31px;
    line-height: 115.99999999999999%;
    letter-spacing: 0;
    text-align: center;
    color: #FFFFFF;
    max-width: 942px;
}

.near-shore-page-team-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    /*margin: 20px 0;*/
}

.near-shore-page-customer-values{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.near-shore-page-customer-values-title{
    font-family: "Oxygen",  sans-serif;
    font-weight: 700;
    font-size: 33px;
    line-height: 128%;
    letter-spacing: 0;
    margin: 0;
}
.near-shore-page-values-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}
.near-shore-page-value-card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 516px;
    width: 100%;
    border-radius: 6px;
    background: #F8EBFE;
    overflow: hidden;
}
.near-shore-page-value-one, .near-shore-page-value-two, .near-shore-page-value-three{
    position: relative;
    z-index: 0;
    width: 100%;
    height: 338px;
    overflow: hidden;
}
.near-shore-page-value-one::after, .near-shore-page-value-two::after, .near-shore-page-value-three::after{
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 6px;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 379px;
    z-index: 2;

}
.near-shore-page-value-two::after{
    background-image: url("../../assets/img-opt/near-shore/agile-approach.png");
}
.near-shore-page-value-one::after{
    background-position: left;
    background-image: url("../../assets/img-opt/near-shore/transparent-communication.png");
}

.near-shore-page-value-three::after{
    background-image: url("../../assets/img-opt/near-shore/cost-efficiency.png");
}

.near-shore-page-value-text{
    padding: 30px 20px;
}

.near-shore-page-value-title{
    font-family: "Oxygen",  sans-serif;
    font-weight: 700;
    font-size: 31px;
    line-height: 128%;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #161616;
}

.near-shore-page-value-subtext{
    font-family: "Oxygen",  sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 109.00000000000001%;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #161616;
}

.near-shore-page-portfolio-section{
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: center;
    gap: 20px;
    background: #211E24;
    border: 2.5px solid #66666680;
    border-radius: 10px;
    padding: 48px 20px;
}
.near-shore-page-portfolio-text{
    display: flex;
    flex-direction: column;
}
.near-shore-page-portfolio-title{
    font-family: "Host Grotesk",  sans-serif;
    font-weight: 400;
    font-size: 31px;
    line-height: 128%;
    letter-spacing: 0;
    text-transform: capitalize;
    color: #FFFFFF;

}
.near-shore-page-portfolio-subtext{
    font-family: "Host Grotesk", sans-serif;
    font-weight: 400;
    font-size: 25px;
    line-height: 128%;
    letter-spacing: 0;
    color: #FFFFFF;
}

.near-shore-page-portfolio-btn{
    gap: 10px;
    padding: 14px 32px;
    border-radius: 41px;
    border: 1px solid  #FFFFFF;
    display: flex;
    align-items: center;
    background: transparent;
    color: #fff;
    font-family: "Ubuntu", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0;
    vertical-align: middle;
    cursor: pointer;
    outline: none!important;
    transition: 0.8s all;
}
.near-shore-page-portfolio-btn:hover{
    background: #F92CB1;
}
.near-shore-page-get-started{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;

}
.near-shore-page-get-started-title{
    font-family: "Oxygen", sans-serif;
    font-weight: 700;
    font-size: 33px;
    line-height: 128%;
    letter-spacing: 0;
    color: #FFFFFF;
}
.near-shore-page-get-started-text{
    font-family: "Oxygen", sans-serif;
    font-weight: 400;
    font-size: 23px;
    line-height: 128%;
    letter-spacing: 0;
    color: #FFFFFF;
}
.near-shore-page-get-started-text span{
    font-weight: 700;
}



@media (max-width: 1024px) {
    .near-shore-page-banner-image{
        height: 368px;
        width: 500px;
    }
}

@media (max-width: 768px) {
    .near-shore-page-values-grid{
        grid-template-columns: 1fr 1fr;
    }
    .near-shore-page-values-grid > :nth-child(3) {
        grid-column: 1 / -1; /* span both columns */
        width: 100%;          /* make it take the full width of the container */
        max-width: 335px;     /* optional: match the width of top elements if they have a fixed width */
        justify-self: center; /* center it if you use max-width */
    }
    .near-shore-page-hero-right{
        display: none;
    }
    .near-shore-page-banner-section{
        display: flex;
        flex-direction: column;
    }

    .near-shore-page-banner-image{
        height: 268px;
        width: 400px;
    }
    .near-shore-page-benefits-section::after {
        display: none;
    }
    .near-shore-page-benefits-right{
        display: none;
    }
    .

}

@media (max-width: 480px) {
    .cloud-back-button-container{
        padding-top: 80px;
    }
    .near-shore-page-hero-logo{
        max-width: 300px;
    }
    .near-shore-page-values-grid{
        display: flex;
        flex-direction: column;
    }
    .near-shore-page-values-grid > :nth-child(3) {
        grid-column: 1 / -1; /* span both columns */
        width: 100%;          /* make it take the full width of the container */
        max-width: 100%;     /* optional: match the width of top elements if they have a fixed width */
        justify-self: center; /* center it if you use max-width */
    }
    .near-shore-page-value-card{
        height: 120px;
    }
    .near-shore-page-value-one, .near-shore-page-value-two, .near-shore-page-value-three{
        display: none;
    }
    .near-shore-page-portfolio-section{
        display: flex;
        flex-direction: column;
    }
    .near-shore-page-portfolio-button-container{
        display: flex;
        justify-content: flex-start;
    }
    .near-shore-page-banner-image{
        max-width: 100%;
    }
    .near-shore-page-benefits-section{
        padding: 20px;
    }
}



/* === 1024px breakpoint === */
@media (max-width: 1024px) {
    .near-shore-page-hero-title { font-size: 36px; }        /* from 40px */
    .near-shore-page-subtitle { font-size: 24px; }          /* from 27px */
    .near-shore-page-banner-title { font-size: 31px; }      /* from 35px */
    .near-shore-page-banner-text { font-size: 19px; }       /* from 21px */
    .near-shore-page-benefits-title { font-size: 30px; }     /* from 33px */
    .near-shore-page-benefits-list { font-size: 17px; }      /* from 19px */
    .near-shore-page-team-title { font-size: 45px; }         /* from 50px */
    .near-shore-page-team-description { font-size: 28px; }   /* from 31px */
    .near-shore-page-value-title { font-size: 28px; }        /* from 31px */
    .near-shore-page-value-subtext { font-size: 22px; }      /* from 24px */
    .near-shore-page-portfolio-title { font-size: 28px; }    /* from 31px */
    .near-shore-page-portfolio-subtext { font-size: 23px; }  /* from 25px */
    .near-shore-page-portfolio-btn { font-size: 16px; }       /* from 17px */
    .near-shore-page-get-started-title { font-size: 30px; }  /* from 33px */
    .near-shore-page-get-started-text { font-size: 21px; }   /* from 23px */
}

/* === 768px breakpoint === */
@media (max-width: 768px) {
    .near-shore-page-hero-title { font-size: 32px; }
    .near-shore-page-subtitle { font-size: 22px; }
    .near-shore-page-banner-title { font-size: 28px; }
    .near-shore-page-banner-text { font-size: 17px; }
    .near-shore-page-benefits-title { font-size: 26px; }
    .near-shore-page-benefits-list { font-size: 16px; }
    .near-shore-page-team-title { font-size: 40px; }
    .near-shore-page-team-description { font-size: 25px; }
    .near-shore-page-value-title { font-size: 25px; }
    .near-shore-page-value-subtext { font-size: 19px; }
    .near-shore-page-portfolio-title { font-size: 25px; }
    .near-shore-page-portfolio-subtext { font-size: 20px; }
    .near-shore-page-portfolio-btn { font-size: 15px; }
    .near-shore-page-get-started-title { font-size: 26px; }
    .near-shore-page-get-started-text { font-size: 18px; }
}

/* === 480px breakpoint === */
@media (max-width: 480px) {
    .near-shore-page-hero-title { font-size: 28px; }
    .near-shore-page-subtitle { font-size: 19px; }
    .near-shore-page-banner-title { font-size: 24px; }
    .near-shore-page-banner-text { font-size: 15px; }
    .near-shore-page-benefits-title { font-size: 23px; }
    .near-shore-page-benefits-list { font-size: 14px; }
    .near-shore-page-team-title { font-size: 35px; }
    .near-shore-page-team-description { font-size: 22px; }
    .near-shore-page-value-title { font-size: 22px; }
    .near-shore-page-value-subtext { font-size: 17px; }
    .near-shore-page-portfolio-title { font-size: 22px; }
    .near-shore-page-portfolio-subtext { font-size: 18px; }
    .near-shore-page-portfolio-btn { font-size: 14px; }
    .near-shore-page-get-started-title { font-size: 24px; }
    .near-shore-page-get-started-text { font-size: 16px; }
}

/* === Very small mobile (<480px) === */
@media (max-width: 380px) {
    .near-shore-page-hero-title { font-size: 24px; }
    .near-shore-page-subtitle { font-size: 17px; }
    .near-shore-page-banner-title { font-size: 21px; }
    .near-shore-page-banner-text { font-size: 14px; }
    .near-shore-page-benefits-title { font-size: 20px; }
    .near-shore-page-benefits-list { font-size: 13px; }
    .near-shore-page-team-title { font-size: 30px; }
    .near-shore-page-team-description { font-size: 19px; }
    .near-shore-page-value-title { font-size: 19px; }
    .near-shore-page-value-subtext { font-size: 16px; }
    .near-shore-page-portfolio-title { font-size: 19px; }
    .near-shore-page-portfolio-subtext { font-size: 16px; }
    .near-shore-page-portfolio-btn { font-size: 12px; }
    .near-shore-page-get-started-title { font-size: 20px; }
    .near-shore-page-get-started-text { font-size: 14px; }
}