/* ################################
    What We Do Custom StyleSheet
################################### */

/* ======== What We Do Content Container ======== */
    /* Why We Do What We Do Block */
    .introduction-block,
    .what-we-do-1-block,
    .what-we-do-2-block{ 
        padding-left: 1rem; 
        padding-right: 1rem; 
    }

    .what-we-do-slider-wrapper {
        width: 100%;
        margin: auto;
        display: flex;
    }
    .what-we-do-slider-wrapper img { width: 100%; }

    /* Introduction and Overview Block */
    #introduction-title {
        font-size: 18px;
        text-align: center;
    }
    .introduction-detail-wrapper {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .introduction-detail-wrapper img {
        width: 7rem;
        margin-right: 1rem;
    }
    .introduction-detail-wrapper p { font-size: 12px; }

    /* What We Do 1 Block */
    .what-we-do-1-block { margin: auto; }
    .wwd-title {
        font-size: 18px;
        text-align: center;
    }
    .what-we-do-card-wrapper {
        display: flex;
        flex-flow: row wrap;
    }
    .what-we-do-card-1-wrapper{ margin: auto; }
    .what-we-do-card-2-wrapper {
        margin: auto;  
        display: flex; 
    }
    .wwd-card-1,
    .wwd-card-2 { padding: .5rem; }
    .wwd-card-1 {
        margin: 0 .1rem;
        display: flex;
        justify-content: center;
        flex-flow: column wrap;
        align-items: center;
        cursor: pointer;
        margin-top: 25px;
    }
    .wwd-card-1 span {
        position: absolute;
        color: rgba(255, 255, 255, 0);
    }
    .wwd-card-1:hover {
        border-radius: 5px;
        border-bottom: 3px solid #058248;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
    .wwd-card-1:hover span {
        color: black;
        position: unset;
    }

    .wwd-card-1 img { width: 2rem; }
    .wwd-card-title,
    .wwd-card-1 span {
        text-align: center;
    }
    .wwd-card-title,
    .wwd-card-2-title {
        font-size: 15px !important;
    }
    .wwd-card-1 span,
    .wwd-card-2 p {
        font-size: 12px;
    }
    
    /* What We Do 2 Block */
    .what-we-do-2-block { margin-bottom: 1.5rem !important; }
    .what-we-do-card-2-wrapper {
        width: 38.5rem;
        flex-flow: row wrap;
    }
    .wwd-card-2 {
        padding: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        cursor: pointer;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    }
    .wwd-card-2:hover {
        border-bottom: 3px solid #058248;
    }
    .what-we-do-2-block { margin: auto; }

/* ################
    Media Query
################### */
/* =====  Mobile View (!) Width ( 320px <-> 425px ) (!) ===== */
    /* @media only screen and ( min-width: 325px ) { }  */
    @media only screen and ( min-width: 425px ) {
    } 
    
    /* ===== Medium Laptop View (!) Width ( 768px <-> 1024px ) (!) ===== */
    @media only screen and ( min-width: 768px ) {
        .introduction-detail-wrapper{ text-align: left; }
        .what-we-do-card-1-wrapper{ 
            margin: auto;
            display: flex; 
        }
        .wwd-card-1 { margin: auto; }
        .wwd-card-1,
        .wwd-card-2 {
            width: 173px;
            height: 173px;
        }
        .introduction-detail-wrapper p,
        .wwd-card-title { font-size: 11px; }
        .wwd-card-2-title { font-size: 11px !important; }
        .wwd-card-1 span,
        .wwd-card-2 p { font-size: 9px; }
        .wwd-card-2 p { margin-bottom: 0; }
    }

    @media only screen and ( min-width: 912px ) {
        #introduction-title { font-size: 22px; }
        .introduction-detail-wrapper p { font-size: 12px; }
        .introduction-detail-wrapper img { width: 7.5rem; }
        .wwd-title { font-size: 22px; }
        .wwd-card-1, .wwd-card-2 {
            width: 189px;
            height: 189px;
        }
        .wwd-card-1 img { width: 2.5rem; }
        .wwd-card-title, .wwd-card-2-title { font-size: 13px !important; }
        .wwd-card-1 span, .wwd-card-2 p { font-size: 10px; }
        .what-we-do-card-2-wrapper { width: 41.5rem; }


    }
/* =====  Large Laptop View (!) Width ( 1024px <-> 1920px ) (!) ===== */
    @media only screen and ( min-width: 1024px ) {
        #introduction-title { font-size: 25px; }
        .introduction-detail-wrapper p { font-size: 14px; }
        .introduction-detail-wrapper img { width: 8rem; }
        .wwd-title { font-size: 25px; }
        .wwd-card-1, .wwd-card-2 {
            width: 237px;
            height: 237px;
        }
        .wwd-card-1 img { width: 3rem; }
        .wwd-card-title, 
        .wwd-card-2-title {
            font-size: 15px !important;
        }
        .wwd-card-1 span, 
        .wwd-card-2 p {
            font-size: 12px;
        }
        .what-we-do-card-2-wrapper { width: 50.5rem; }
    }

    @media only screen and ( min-width: 1200px ){
        #introduction-title,
        .wwd-title {
            font-size: 29px;
        }
        .introduction-detail-wrapper p { font-size: 15px; }
        .introduction-detail-wrapper img { width: 9rem; }
        .wwd-card-1, .wwd-card-2 {
            width: 264px;
            height: 264px;
        }
        .wwd-card-1 img { width: 2.6rem; }
        .wwd-card-title, 
        .wwd-card-2-title {
            font-size: 17px !important;
        }
        .wwd-card-1 span, 
        .wwd-card-2 p {
            font-size: 14px;
        }
        .what-we-do-card-2-wrapper { width: 55.5rem; }
    }

    @media only screen and ( min-width: 1280px ){
        #introduction-title,
        .wwd-title {
            font-size: 32px;
        }
        .introduction-detail-wrapper p { font-size: 17px; }
        .introduction-detail-wrapper img { width: 9.5rem; }
        .wwd-card-1, .wwd-card-2 {
            width: 290px;
            height: 290px;
        }
        .wwd-card-1 img { width: 3rem; }
        .wwd-card-title, 
        .wwd-card-2-title {
            font-size: 19px !important;
        }
        .wwd-card-1 span, 
        .wwd-card-2 p {
            font-size: 15px;
        }
        .what-we-do-card-2-wrapper { width: 60.4rem; }
        .what-we-do-2-block { margin-bottom: 2rem !important; }
    }

    @media only screen and ( min-width: 1366px ){
        #introduction-title, 
        .wwd-title {
            font-size: 34px;
        }
        .introduction-detail-wrapper img { width: 10rem; }
        .what-we-do-card-2-wrapper { width: 65.4rem; }
        .wwd-card-1, .wwd-card-2 {
            width: 316px;
            height: 316px;
        }
        /* .wwd-card-2 { padding-left: 1.5rem; } */
    }

    @media only screen and ( min-width: 1400px ){
        #introduction-title,
        .wwd-title {
            font-size: 34px;
        }
        .introduction-detail-wrapper p { font-size: 19px; }
        .introduction-detail-wrapper img { width: 11rem; }
        .wwd-card-1, .wwd-card-2 {
            width: 338px;
            height: 338px;
        }
        .wwd-card-1 img { width: 3.5rem; }
        .wwd-card-title, 
        .wwd-card-2-title {
            font-size: 22px !important;
        }
        .wwd-card-1 span, 
        .wwd-card-2 p {
            font-size: 17px;
        }
        .what-we-do-card-2-wrapper { width: 69.4rem; }
    }

    @media only screen and ( min-width: 1440px ){
        #introduction-title,
        .wwd-title {
            font-size: 35px;
        }
    }

    @media only screen and ( min-width: 1600px ){
        #introduction-title, .wwd-title { font-size: 39px; }
        .introduction-detail-wrapper p { font-size: 22px; }
        .introduction-detail-wrapper img { width: 14rem; }
        .wwd-card-1 img { width: 4rem; }
        .wwd-card-title, 
        .wwd-card-2-title {
            font-size: 24px !important;
        }
        .wwd-card-1 span, 
        .wwd-card-2 p {
            font-size: 20px;
        }
        .wwd-card-1, 
        .wwd-card-2 {
            width: 378px;
            height: 378px;
        }
        .what-we-do-card-2-wrapper { width: 77rem; }
        .what-we-do-2-block { margin-bottom: 2.5rem !important; }
    }

    @media only screen and ( min-width: 1680px ){
        #introduction-title, .wwd-title { font-size: 41px; }
        .introduction-detail-wrapper p { font-size: 24px; }
        .introduction-detail-wrapper img { width: 15rem; }
        .wwd-card-1 img { width: 4.5rem; }
        .wwd-card-title, 
        .wwd-card-2-title {
            font-size: 26px !important;
        }
        .wwd-card-1 span, 
        .wwd-card-2 p {
            font-size: 21px;
        }
        .wwd-card-1, 
        .wwd-card-2 {
            width: 410px;
            height: 410px;
        }
        .what-we-do-card-2-wrapper { width: 83rem; }
    }

    @media only screen and ( min-width: 1920px ){
        #introduction-title, .wwd-title { font-size: 47px; }
        .introduction-detail-wrapper p { font-size: 27px; }
        .introduction-detail-wrapper img { width: 16rem; }
        .wwd-card-1 img { width: 5rem; }
        .wwd-card-title, 
        .wwd-card-2-title {
            font-size: 29px !important;
        }
        .wwd-card-1 span, 
        .wwd-card-2 p {
            font-size: 23px;
        }
        .wwd-card-1, 
        .wwd-card-2 {
            width: 458px;
            height: 458px;
        }
        .what-we-do-card-2-wrapper { width: 92rem; }
        .what-we-do-2-block {
            margin-bottom: 3rem !important;
        }
    }