/* Paleta de Cores Atualizada:
   - Destaque: #4BA97A (Verde da Miely Casarin)
*/

html,
body {
    font-family: 'Quicksand', sans-serif;
    background-color: #fcfcfc;
}

.left {
    padding: 7%;
}

/* Garante que o texto principal seja escuro, mas não preto chapado */
.name {
    color: #333333;
}

/* Coluna da Imagem */
.right {
    background-image: url('mi.webp');
    background-position: center;
    background-size: cover;
    height: 400px;
    position: relative;
    width: 100%;
}

@media (min-width: 769px) {
    .right {
        height: 100vh;
        position: fixed;
        right: 0;
        width: 50%;
    }
}

/* Linha de separação - COR ATUALIZADA PARA O VERDE */
.hr {
    /* Usando o verde fornecido: rgba(75, 169, 122, 1) -> #4BA97A */
    background-color: #4BA97A;
    border: none;
    content: '';
    height: 2px;
    margin-bottom: 2rem;
    margin-top: 2rem;
    transform-origin: center left;
    width: 4.5rem;
}

/* Estilização da nova Seção de Contato */
.content.mt-5 p.is-size-6 {
    margin-bottom: 0.5rem;
}

.content.mt-5 .icon {
    margin-right: 0.5rem;
    /* Ícones na cor de destaque VERDE */
    color: #4BA97A;
}

/* Estilização dos Links (telefone) */
.content.mt-5 a {
    color: #555555;
    text-decoration: none;
    transition: color 0.3s;
}

.content.mt-5 a:hover {
    /* Destaque ao passar o mouse com o VERDE */
    color: #4BA97A;
}


/* Animações (mantidas) */
.name,
.hr,
.job,
.description {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0, 0.5, 0, 1);
    animation-fill-mode: both;
}

.job,
.text {
    animation-name: slideUp;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.button,
.content.mt-5 {
    animation-name: slideUp;
    animation-duration: 500ms;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1.5);
    animation-fill-mode: both;
}

/* Keyframes */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fillUp {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* Animation triggers */
.name {
    animation-name: slideDown;
}

.job,
.text {
    animation-name: slideUp;
}

.hr {
    animation-name: fillUp;
}

.buttons,
.content.mt-5 {
    animation-name: slideUp;
}


/* Delays Ajustados */
.name {
    animation-delay: 100ms;
}

.job {
    animation-delay: 200ms;
}

.hr {
    animation-delay: 300ms;
}

.text:nth-child(1) {
    animation-delay: 450ms;
}

.text:nth-child(2) {
    animation-delay: 550ms;
}

.text:nth-child(3) {
    animation-delay: 650ms;
}

.buttons {
    animation-delay: 900ms;
}

.content.mt-5 {
    animation-delay: 1.1s;
}

em {
    color: #4BA97A;
}