@import url("style.css");

/* reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: var(--cor-plano-de-fundo);
}

/* container 1*/
.hero__container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 60px;
    min-height: 80vh; /* Adicionado para garantir respiro vertical no hero */
}

/* títulos e textos  */
.hero__content {
    width: 45%;
}

.hero__title {
    margin-top: 40px;
    color: var(--cor-azul-escuro);
}

.hero__title, .hero__title--highlight {
    line-height: 120%;
    font-size: 50px;
}

.hero__title--highlight { 
    color: var(--cor-ciano-2); 
    display: block;
}

.hero__description {
    font-size: 20px;
    color: var(--cor-azul-escuro);
    margin-top: 20px;
}

.hero__subtitle {
    color: var(--cor-azul);
    font-size: 30px;
    padding-top: 15px;
}

/* imagens */
.hero__mockup {
    display: block; 
    width: 600px;
    height: auto;
    object-fit: contain;
}

/* container 2 */
.features__container {
    display: flex;
    justify-content: space-around;
    background-color: white;
    margin: 30px 5% 50px 5%; 
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* horizontal, vertical, desfoque*/
}

.features__card {
    text-align: center;
    width: 22%;
    display: flex; /* Adicionado para alinhar ícone, título e texto verticalmente */
    flex-direction: column;
    align-items: center;
}

.features__card-title {
    font-size: 22px;
    color: var(--cor-azul);
    margin-bottom: 10px;
    margin-top: 15px; /* Adicionado para separar o título do ícone acima */
}

.features__card-text {
    font-size: 16px;
    color: var(--cor-azul-escuro);
    border-right: 1px solid #6666662c;
    padding: 10px 20px; /* Simplificado o padding */
    width: 100%; /* Garante que o texto ocupe o card todo */
}

.features__card:last-child .features__card-text {
    border-right: none;
}


/*footer*/
.footer__copyright {
    color: var(--cor-azul-escuro);
    text-align: center;
    padding: 20px 0; /* Adicionado padding para o copyright não colar no fundo */
}