/*
**************************************************************
******************** section.caseStudy ********************
**************************************************************
*/

section.caseStudy {}

.caseStudy_container {}

.caseStudy_content {}

/* ********************************************************* */

section.caseStudy .title {
    font-family: 'GothamCond';
    font-weight: 500;
    color: var(--firstColor);

    margin-bottom: 1.50rem;
    font-size: 3.00rem;
}

section.caseStudy .subTitle {
    font-family: 'Gotham';
    font-weight: 500;
    color: var(--secondColor);
    margin-top: 2.00rem;
    margin-bottom: 1.00rem;

    font-size: 1.50rem;
}

/* ********************************************************* */

section.caseStudy p,
section.caseStudy ul {
    line-height: 150%;
}

section.caseStudy p {
    padding: 0.5rem 0;
}

section.caseStudy ul {
    margin-top: 0;
}

section.caseStudy ul li {
    padding: 0.2rem 0;
}


section.caseStudy .columnsGrid2221 .column:nth-of-type(2) {
    background-color: var(--white);
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    padding: 2rem;
    height: fit-content;
}

section.caseStudy .columnsGrid2221 .column:nth-of-type(2) .subTitle {
    margin-top: 1.00rem;
}



section.caseStudy .clientInfo {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0;
    font-size: 0.85rem;
    text-align: right;
    margin-bottom: 1rem;
}

section.caseStudy .clientInfo img {
    width: 11rem;
    /*border: 11px solid white;*/
    border-radius: 100%;

    margin-top: -7rem;
}



@media (min-width: 1551px) {}

@media (min-width: 1151px) and (max-width: 1550px) {}

@media (min-width: 668px) and (max-width: 1150px) {
    section.caseStudy .columnsGrid2221 .column:nth-of-type(2) .subTitle {
        margin-top: 0;
    }

    section.caseStudy .clientInfo img {
        max-width: 10rem;
        margin-top: 0;
    }

    section.caseStudy .clientInfo {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
        text-align: center;
        gap: 1rem;
    }

    section.caseStudy .clientInfo img {
        order: 1;
    }

    section.caseStudy .clientInfo div {
        order: 2;
    }
}

@media (max-width: 667px) {
    section.caseStudy .columnsGrid2221 .column:nth-of-type(2) {
        padding: 1.5rem;
    }

    section.caseStudy .columnsGrid2221 .column:nth-of-type(2) .subTitle {
        margin-top: 0;
        text-align: center;
    }

    section.caseStudy .clientInfo img {
        max-width: 10rem;
        margin-top: 0;
    }

    section.caseStudy .clientInfo {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-items: center;
        text-align: center;
        gap: 1rem;
    }

    section.caseStudy .clientInfo img {
        order: 1;
    }

    section.caseStudy .clientInfo div {
        order: 2;
    }
}

/*
**************************************************************
******************** section.caseStudy ********************
**************************************************************
*/














/*
**************************************************************
****************** section.keypoints (HOME) ******************
**************************************************************
*/

section.keypoints {
    background-color: var(--firstColor);
}
section.keypoints .container {

}
/* section.keypoints .container .content { */
section.keypoints .content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}

/* ********************************************************* */

section.keypoints .title {
    font-family: 'GothamCond';
    font-weight: 500;
    color: var(--white);
    text-align: center;
    
    margin-bottom: 0.50rem;
    font-size: 1.50rem;
}
section.keypoints .subTitle {
    font-family: 'GothamCond';
    font-weight: 500;
    color: var(--white);
    text-align: center;

    font-size: 2.30rem;
}
section.keypoints .shortDescription {
    padding: 2.50rem 0;
    text-align: center;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    color: var(--white);
}

/* ********************************************************* */

.kp_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
}
.kp {
    background: var(--white);
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
    width: 100%;
    box-sizing: border-box;
    padding: 1.0rem;

    min-height: 9rem;
    border-radius: 0.5rem;
    font-size: 0.90rem;
    
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1rem;
    align-items: center;

    text-align: center;
}

section.keypoints .content .col2 {
    display: flex;
    justify-content: center;
}
section.keypoints .content .col2 img {
    width: 100%;
}

/* ********************************************************* */

@media (min-width: 1551px) {
    section.keypoints .content .col2 img {
        margin-bottom: -7rem;
    }
}
@media (min-width: 1151px) and (max-width: 1550px) {
    section.keypoints .content {
        grid-template-columns: 2fr 1fr;
    }
    .kp_list {
        grid-template-columns: 1fr 1fr 1fr;
    }
    section.keypoints .content .col2 {
        align-items: end;
    }
    section.keypoints .content .col2 img {
        margin-bottom: -5rem;
    }
}
@media (min-width: 668px) and (max-width: 1150px) {
    section.keypoints .content {
        grid-template-columns: 1fr 1fr;
    }
    .kp_list {
        grid-template-columns: 1fr 1fr;
    }
    section.keypoints .content .col2 {
        align-items: center;
    }
    section.keypoints .content .col2 img {
        margin-bottom: -7rem;
    }
}
@media (max-width: 667px) {
    section.keypoints .content {
        grid-template-columns: 1fr;
    }
    .kp_list {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .kp {
        border-radius: 0.5rem;
        font-size: 0.85rem;
    }
    section.keypoints .content .col2 img {
        margin-top: 1rem;
        max-width: 20rem;
    }
}

@media (max-width: 337px) {
    .kp_list {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/*
**************************************************************
****************** section.keypoints (HOME) ******************
**************************************************************
*/




/*
***************************************************************
****************** section.casesStudy (HOME) ******************
***************************************************************
*/

section.casesStudy {

}

section.casesStudy .container {

}
section.casesStudy .content {
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
}

/* ********************************************************* */

section.casesStudy .title {
    font-family: 'GothamCond';
    font-weight: 500;
    color: var(--secondColor);
    text-align: center;
    
    margin-bottom: 0.50rem;
    font-size: 1.50rem;
}
section.casesStudy .subTitle {
    font-family: 'GothamCond';
    font-weight: 500;
    color: var(--firstColor);
    text-align: center;

    font-size: 2.30rem;
}

/* ********************************************************* */

section.casesStudy .content .apps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: fit-content;
    margin: 0 auto;

    position: relative;
}
section.casesStudy .content .apps > div {
    position: relative;
}




section.casesStudy .content .apps picture img {
    width: 100%;
    max-width: 30rem;
}
section.casesStudy .content .apps .app_1 picture img {
    border-radius: 1rem 0 0 1rem;
}
section.casesStudy .content .apps .app_2 picture img {
    border-radius: 0 1rem 1rem 0;
}




section.casesStudy .content .apps .AppStore_GooglePlay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    width: fit-content;

    position: absolute;
    left: 50%;
    /*top: 50%;*/
    top: 10%;
    transform: translate(-50%, -50%);
}
section.casesStudy .content .apps .AppStore_GooglePlay a img {
    height: 3rem;
}
section.casesStudy .content .apps .AppStore_GooglePlay a {
    opacity: 0.75;
}
section.casesStudy .content .apps .AppStore_GooglePlay a:hover {
    opacity: 1.0;
    /*
    box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.75);
    */
    filter: drop-shadow(0 0.5rem 1.5rem rgba(255, 255, 255, 1.0));
}





section.casesStudy .content .apps .videoApp {
    position: absolute;
    z-index: 1;
    opacity: 0;
    pointer-events: none;

    /*
    height: calc(100% - 2.2rem);
    height: 100%;
    */
    height: 100%;
    width: 100%;
    /*
    max-width: 61rem;
    */
}
section.casesStudy .content .apps .videoApp video {
    height: inherit;
    width: 100%;
    box-sizing: border-box;

    /*
    opacity: 0.5;
    */

    /*
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(0.2rem);
    */
    background: #cccccc;
    border-radius: 1rem;
    border: 0.3rem solid var(--firstColor);
}

section.casesStudy .content .apps .watchVideo {
    margin-top: 1.00rem !important;
    margin-bottom: 1.50rem !important;
}





@media (min-width: 1551px) {
}
@media (min-width: 1151px) and (max-width: 950px) {
}
@media (min-width: 668px) and (max-width: 949px) {
    section.casesStudy .content .apps .AppStore_GooglePlay a img {
        height: 5.0vw;
        max-height: 4.1rem;
    }
}
@media (max-width: 667px) {
    section.casesStudy .content .apps {
        gap: 0.25rem;
    }
    section.casesStudy .content .apps .watchVideo {
        margin-bottom: 0.80rem !important;
    }
    
    section.casesStudy .content .apps .AppStore_GooglePlay {
        grid-template-columns: 1fr;
        gap: 1vw;
        top: 11vw;
    }
    section.casesStudy .content .apps .AppStore_GooglePlay a {
        opacity: 1.0;
    }
    section.casesStudy .content .apps .AppStore_GooglePlay a img {
        height: auto;
        width: 22vw;
    }
}


@media (max-width: 397px) {
    section.casesStudy .content .apps .videoApp .close {
        right: 0.5rem;
        width: 0.5rem;
        height: 0.5rem;
    }
}

/*
***************************************************************
****************** section.casesStudy (HOME) ******************
***************************************************************
*/





/*
**************************************************************
**************** section.descriptions (HOME) *****************
**************************************************************
*/

section.descriptions {

}
section.descriptions .container {

}
/*section.descriptions .container .content {*/
section.descriptions .content {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 5rem;
}

/* ********************************************************* */

section.descriptions .title {
    font-family: 'GothamCond';
    font-weight: 500;
    color: var(--secondColor);
    text-align: center;
    
    margin-bottom: 0.50rem;

    font-size: 1.50rem;
}
section.descriptions .subTitle {
    font-family: 'GothamCond';
    font-weight: 500;
    color: var(--firstColor);
    text-align: center;

    font-size: 2.30rem;

    margin-bottom: 2.00rem;
}

/* ********************************************************* */

section.descriptions .content .col1 picture,
section.descriptions .content .col1 picture img {
    width: 100%;
    max-width: 25rem;
    height: 25rem;
}
section.descriptions .content .col1 picture img {
    /*
    box-shadow: -0.5rem 0.5rem 0 1rem var(--secondColor);
    box-shadow: -0.5rem 0.5rem 0 1rem rgba(35, 173, 197, 1.00);
    */
    box-shadow: -0.5rem 0.5rem 0 1rem rgba(35, 173, 197, 0.50);
    
    border-radius: 100%;
    margin-top: -4rem;

    position: absolute;

    object-fit: cover;
}

section.keypoints .content .col2 {
    display: flex;
    justify-content: center;
}

.descriptions_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5rem;
}
.descriptions_list .description {
    line-height: 150%;
}

/* ********************************************************* */

@media (min-width: 1551px) {
}
@media (min-width: 1151px) and (max-width: 1550px) {
    section.descriptions .content .col1 picture,
    section.descriptions .content .col1 picture img {
        max-width: 32vw;
        height: 32vw;
    }
    section.descriptions .content .col1 picture img {
        margin-top: -2.5rem;
        margin-left: -6vw;
    }
    .descriptions_list {
        gap: 3rem;
    }
}
@media (min-width: 668px) and (max-width: 1150px) {
    section.descriptions .content {
        grid-template-columns: 1fr 2.5fr;
    }
    section.descriptions .content .col1 picture,
    section.descriptions .content .col1 picture img {
        max-width: 46vw;
        height: 46vw;
    }
    section.descriptions .content .col1 picture img {
        margin-top: 0;
        margin-left: -15vw;
    }
    .descriptions_list {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
@media (max-width: 667px) {
    section.descriptions .content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    section.descriptions .content .col1 picture,
    section.descriptions .content .col1 picture img {
        max-width: 85vw;
        height: 85vw;
    }
    section.descriptions .content .col1 picture img {
        position: relative;
        margin-top: 0;
    }
    .descriptions_list {
        grid-template-columns: 1fr;
        gap: 3rem;
        order: 1;
    }
    section.descriptions .content .col1 {
        display: flex;
        justify-content: center;
        
        order: 2;
    }
    section.descriptions .content .col2 {
        order: 1;
    }
}

/*
**************************************************************
**************** section.descriptions (HOME) *****************
**************************************************************
*/






/*
**************************************************************
******************** section.testimonials ********************
**************************************************************
*/

section.testimonials {

}
.testimonials_container {

}
.testimonials_content {
}

/* ********************************************************* */

.testimonial {
    margin: 1rem;
    
    display: grid;
    /*grid-template-columns: 1fr;*/
    grid-template-rows: 1fr auto auto auto;
    gap: 0.5rem;

    background: var(--white);
    /* offset-x | offset-y | blur-radius | spread-radius | color */
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.10);
    border-radius: 1rem;
    padding: 2.0rem;
    box-sizing: border-box;

    line-height: 150%;
}


.testimonial_text {
    font-style: italic;
    font-size: 1.15rem;
    padding-bottom: 1rem;
}
.testimonial_contact {
    font-weight: bold;
    font-size: 1.25rem;
    color: var(--secondColor);
}
.testimonial_jobTitle {
    font-style: italic;
    color: grey;
}
.testimonial_logo {
    display: flex;
    justify-content: center;
}
.testimonial_logo img {
    width: 100%;
    max-width: 15rem;
}


@media (min-width: 1551px) {
}
@media (min-width: 1151px) and (max-width: 1550px) {
}
@media (min-width: 668px) and (max-width: 1150px) {
}
@media (max-width: 667px) {
}

/*
**************************************************************
******************** section.testimonials ********************
**************************************************************
*/