#card_01 {
    height: 100vh;

    background: linear-gradient(90deg, #043D3D, #024E4E);
    box-sizing: border-box;

    /* Set text at the bottom of container */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .title {
        margin-left: 10rem;
        margin-right: 10rem;
        padding-bottom: 2rem;

        font-family: 'Garamond';
        /* font-size: 100px; */
        font-size: 65px;
        font-weight: 300;
        /* line-height: 100px; */
        line-height: 75px;

        text-align: left;
        color: white;
    }

    @media only screen and (max-width: 700px) {
        .title {
            margin-left: 1rem;
            margin-right: 1rem;
            padding-bottom: 2rem;

            font-size: 40px;
            line-height: 50px;
        }
    }
}

#card_02 {

    margin: 3rem 7rem 3rem 7rem;
    margin-left: 10rem;
    margin-right: 10rem;
    position: relative;

    color: #000;

    .title {
        font-family: 'Garamond';
        font-size: 60px;
        font-weight: 300;
        line-height: 58.86px;
        text-align: left;

        padding-bottom: 2rem;
    }

    @media only screen and (max-width: 700px) {
        .title {
            font-size: 40px;
            line-height: 50px;
        }
    }

    .text {
        font-family: 'Graphik';
        font-size: 20px;
        font-weight: 300;
        line-height: 30px;
        letter-spacing: 0em;
        text-align: left;
    }

    .lista_servicios {
        list-style-type: none;

        font-family: 'Garamond';
        font-size: 55px;
        font-weight: 300;
        line-height: 54px;
        letter-spacing: 0em;
        text-align: left;

        color: #2B2B2B;

        padding-left: 0;
    }

    @media only screen and (max-width: 700px) {
        margin: 1rem 1rem 1rem 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

#card_03 {

    margin-left: 10rem;
    margin-right: 10rem;

    padding-bottom: 5rem;

    .title {
        font-family: 'Garamond';
        font-size: 60px;
        font-weight: 300;
        line-height: 58.86px;
        text-align: left;

        color: #BF4E30;
        margin-bottom: 2rem;
    }

    @media only screen and (max-width: 700px) {
        .title {
            font-size: 40px;
            line-height: 50px;
        }
    }

    .body {
        height: 200px;
        width: 100%;

        position: relative;

        .item {
            width: 48%;
            margin: 1%;

            .item__title {
                font-family: 'Graphik';
                text-align: left;
                font-size: 25px;
                font-weight: 600;
                line-height: 27.5px;

                padding-left: 2rem;
                padding-right: 2rem;
                padding-top: 2rem;
                padding-bottom: 2rem;
            }

            .item__text {
                font-family: 'Graphik';
                text-align: left;
                font-size: 18px;
                font-weight: 300;
                line-height: 19.8px;

                padding-left: 2rem;
                padding-right: 2rem;
                padding-bottom: 2rem;
            }

            &.col-01 {
                color: white;
                background-color: #BF4E30;

                position: absolute;
                right: 50%;
                /* height: 100px; */
            }

            &.col-02 {
                color: #3E3E3E;
                background-color: #E5DCD3;

                position: absolute;
                right: 50%;
                top: 100px;
                /* height: 340px; */
            }

            &.col-03 {
                background-color: #E5DCD3;
                color: #BF4E30;

                /* height: 340px; */
                position: absolute;
                left: 50%;
            }

            &.col-04 {
                background-color: #3E3E3E;
                color: #FFFFFF;

                position: absolute;
                left: 50%;
                top: 100px;
                /* height: 270px; */
            }
        }
    }

    @media only screen and (max-width: 700px) {
        margin-left: 1rem;
        margin-right: 1rem;

        padding-bottom: 2rem;

        .body {
            height: auto;
            width: auto;

            .item {
                width: 100%;

                &.col-01 {
                    color: white;
                    background-color: #BF4E30;

                    position: inherit;
                    right: auto;
                    height: auto;
                }

                &.col-02 {
                    color: #3E3E3E;
                    background-color: #E5DCD3;

                    position: inherit;
                    right: auto;
                    top: auto;
                    height: auto;
                }

                &.col-03 {
                    background-color: #E5DCD3;
                    color: #BF4E30;

                    position: inherit;
                    right: auto;
                    left: auto;
                    top: auto;
                    height: auto;
                }

                &.col-04 {
                    background-color: #3E3E3E;
                    color: #FFFFFF;

                    position: inherit;
                    right: auto;
                    left: auto;
                    top: auto;
                    height: auto;
                }
            }
        }
    }
}

#card_04 {

    margin-left: 10rem;
    margin-right: 10rem;
    
    @media only screen and (max-width: 700px) {
        margin-left: 1rem;
        margin-right: 1rem;

        padding-bottom: 2rem;
    }

    padding-bottom: 5rem;

    .sk_branding a.tutorial_link {
        display: none;
    }

    .title {
        font-family: 'Garamond';
        font-size: 60px;
        font-weight: 300;
        line-height: 58.86px;
        text-align: left;

        margin-bottom: 2rem;
    }

    @media only screen and (max-width: 700px) {
        .title {
            font-size: 40px;
            line-height: 50px;
        }
    }
}