/* start.css */

@charset "UTF-8";

body {
    display: flex;
    flex-direction: column;
    background-image: url('/assets/images/background.png');
    background-repeat: repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: auto;
}

.start-panel-image {}

.start-title {
    font-family: 'Marker', sans-serif;
    font-weight: normal;
    color: black;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    line-height: 3.2rem;
    font-size: 3.2rem;
    text-align: center;
}

.start-subtitle {
    font-family: 'Segoe', sans-serif;
    font-weight: bold;
    color: #005aa3;
    margin: 0.5rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    line-height: 2rem;
    font-size: 2rem;
    text-align: center;
}

.start-panel-description {
    font-family: 'Comic', sans-serif;
    font-weight: normal;
    color: #555555;
    text-align: justify;
}

.start-panel-description strong {
    color: #00a20b;
    font-weight: 500;
}

.information-diference-section {
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0.5rem 0rem;
    background-color: #b3b3b340;
    display: flex;
    flex-direction: column;
}

.information-diference-body {
    margin: -1rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0.5rem 0rem;
    display: flex;
    flex-direction: column;
    justify-self: center;
}

.information-diference-diferences {
    margin: -3rem 0rem 3rem 0rem;
    padding: 0rem 0rem 0em 0rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.start-modules-section {
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
}

.start-arrows {
    margin: 2rem 0rem 2rem 0rem;
    padding: 0.5rem 0rem 0.5rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.start-body {
    width: 100%;
    margin: 1rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}

.start-arrow-left {
    height: 4rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    transform: rotate(0deg);
}

.start-arrow-right {
    height: 4rem;
    margin: 0rem 0rem 0rem 0.5rem;
    padding: 0rem 0rem 0rem 0rem;
    transform: rotate(0deg);
}


@media only screen and (min-device-width: 640px) {

    html, body {
        overflow-x: hidden;
    }
        
    body {
        width: 100%;
        height: 100%;
        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;
    }

    .start-panel-image {
        width: calc(100% - 8rem);
        margin: -5rem 0rem -4rem 8rem;
        padding: 0rem 0rem 0rem 0rem;
    }

    .start-panel-description {
        margin: 1.5rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;
        line-height: 1.4rem;
        font-size: 1.4rem;
    }
}

@media only screen and (max-device-width: 640px) {

    html,
        body {
            overflow-x: hidden;
        }

    body {
        width: 100%;
        height: 100%;
        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;
    }

    .start-panel-image {
        width: 100%;
        margin: -2.5rem -10rem -8rem 0rem;
        padding: 0rem 0rem 0rem 0rem;
    }

    .start-panel-description {
        margin: 0rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;
        line-height: 1.3rem;
        font-size: 1.3rem;
    }

    .slider-phone {
        margin: 8rem 0rem 0rem 0rem;
        padding: 0rem 0rem 0rem 0rem;
    }
}