/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    font-family: "Instrument Sans", sans-serif;
    color: #65408c;
    font-weight: 400;
    font-size: 18px;
    background-color: #dfd7f0;
}

.font-footer {
    font-size: 13px;
}

.img-logo-footer {
    max-width: 185px;
    height: auto;
}

.site-container {
    background: url(../img/site-background.png) top;
    background-repeat: repeat-x;
}

.site-header {
    padding-top: 30px;
    .navbar{
        justify-content: end;
        .nav-item{
            padding-inline: 10px;
            &.nav-redes{
                display: flex;
            }

        }

.nav-link {
    color: white;
    font-size: 14px;
    font-weight: 600;
}

}
}

.site-home {
    margin-top: 50px;
    padding-bottom: 50px;
}

.site-content {
    margin-top: 50px;
    padding-bottom: 50px;
}

.text-como-funciona {
    font-size: 16px;
    font-weight: 400;
}

.btn-primary {
    background: #65408c;
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    padding: 10px;
    border-radius: 8px;
    border: none;

    &.icon{
        margin-left: 10px;
        border-radius: 50%;
        width: 39px;
        height: 39px;
        font-size: 19px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &:hover,
    &:focus,
    &:active,{
        background: black;
    }
}

.slogan {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    div

{
    border: 1px solid #65408c;
    padding: 10px 20px;
    width: fit-content;
}

}

.slogan-mobile {
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    div

{
    font-size: 18px;
    font-weight: 600;
}

}

.mt-section {
    margin-top: 120px;
}

p {
    margin-bottom: 20px;
}

.title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 32px;
}

.offcanvas-80 {
    width: 80vw !important;
}

.form-control {
    border-radius: 8px;
    border: 1px solid #65408c;
    color: #65408c;
    padding: 10px;
    font-size: 16px;
    font-weight: 400;
    background-color: #ece6f5;
    &::placeholder {
        color: #65408c;
        opacity: 0.7;
    }
    &:focus {
        border-color: #ece6f5;
        background-color: #ece6f5;
        box-shadow: none;
    }
}

/* para mobile*/
@media (max-width: 768px) {
    .container-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .title {
        font-size: 24px;
    }
    body {
        font-size: 16px;
    }
    .img-fluid {
        max-width: 80%;
        &.img-fluid-mobile{
            max-width: 100%;
        }
    }
    .site-container {
        background: url(../img/site-background-mobile.png) top;
        background-repeat: repeat-x;
    }
    .mt-section {
        margin-top: 60px;
    }
    .site-home {
        padding-bottom: 0;
    }
    .nav-redes {
        margin-top: 14px;
    }
    .btn-primary {
        &.icon{
        margin-left: 0;
        margin-right: 20px;
        }
    }
    .img-logo-footer {
        max-width: 149px;
        height: auto;
    }
    .nav-desktop {
        display: none;
    }
}

@media (max-width: 1023px) {
    .nav-mobile {
        position: fixed;
        right: 0;
        width: fit-content;
    }
}