/* ===== SEÇÃO MISSÃO E VISÃO ===== */
/* Container principal que agrupa os dois cards */
.mission-vision {
    display: flex;              /* Layout flexível */
    flex-direction: row;        /* Cards lado a lado */
    justify-content: center;    /* Centraliza os cards */
    align-items: center;        /* Alinha verticalmente */
    height: 600px;              /* Altura fixa */
    padding: 50px 20px 20px 20px;  /* Preenchimento */
}

/* ===== IMAGENS DOS CARDS ===== */
/* Imagem da visão */
.vision-image img  {
    width: 40px;                /* Tamanho da imagem */
    height: auto;               /* Altura automática */
}

/* Imagem da missão */
.mission-image img  {
    width: 40px;                /* Tamanho da imagem */
    height: auto;               /* Altura automática */
}

/* ===== LINHA VISUAL ENTRE MISSÃO E VISÃO ===== */
/* Linha horizontal que separa visualmente os cards */
.line-vision-mission{
    width: 10px;                /* Largura da linha */
    height: 1px;                /* Espessura da linha */
    background-color: #317901;  /* Cor verde */
    margin: 0;                  /* Sem margem */
    border: none;               /* Sem borda */
}

/* ===== CONTAINER DA MISSÃO ===== */
/* Agrupa o ícone e texto da missão */
.mission {
    display: flex;              /* Layout flexível */
    flex-direction: row;        /* Elementos lado a lado */
    align-items: center;        /* Alinha verticalmente */
    gap: 10px;                  /* Espaço entre ícone e texto */
    margin: 20px 0 15px 0;      /* Margens */
    width: 100%;                /* Ocupar toda a largura */
}

/* ===== CONTAINER DA VISÃO ===== */
/* Agrupa o ícone e texto da visão */
.vision {
    display: flex;              /* Layout flexível */
    flex-direction: row;        /* Elementos lado a lado */
    align-items: center;        /* Alinha verticalmente */
    gap: 10px;                  /* Espaço entre ícone e texto */
    margin: 20px 0 15px 0;      /* Margens */
    width: 100%;                /* Ocupar toda a largura */
}

/* ===== TEXTO DESTACADO NA VISÃO ===== */
/* Cor especial para texto na seção de visão */
.text-span-vision{
    color: #1e8549;             /* Verde mais claro */
}

/* ===== RÓTULO DA MISSÃO ===== */
/* Texto pequeno identificando a missão */
.mission span{
    font-size: 0.8rem;          /* Fonte pequena */
}

/* ===== CARD DE MISSÃO ===== */
/* Card branco com a missão da empresa */
.card-missao {
    display: flex;              /* Layout flexível */
    flex-direction: column;     /* Conteúdo empilhado */
    justify-content: flex-start; /* Alinha ao topo */
    background-color: #ffffff;  /* Fundo branco */
    gap: 0;                     /* Sem espaço entre elementos */
    color: #000;                /* Texto em preto */
    border-radius: 16px;        /* Cantos arredondados */
    width: 600px;               /* Largura do card */
    height: 400px;              /* Altura do card */
    padding: 40px;              /* Preenchimento interno */
    box-sizing: border-box;     /* Inclui padding na dimensão */
    border-end-end-radius: 0;   /* Canto inferior direito angular */
    border-start-end-radius: 0; /* Canto superior direito angular */
    text-align: left;           /* Texto alinhado à esquerda */
    align-items: flex-start;    /* Elementos alinhados à esquerda */
}

/* ===== CARD DE VISÃO ===== */
/* Card escuro com a visão da empresa */
.card-vision {
    display: flex;              /* Layout flexível */
    flex-direction: column;     /* Conteúdo empilhado */
    justify-content: flex-start; /* Alinha ao topo */
    background-color: #0e2200;  /* Fundo escuro */
    color: #f7f9fa;             /* Texto claro */
    border-radius: 16px;        /* Cantos arredondados */
    width: 600px;               /* Largura do card */
    height: 400px;              /* Altura do card */
    padding: 40px;              /* Preenchimento interno */
    box-sizing: border-box;     /* Inclui padding na dimensão */
    border-start-start-radius: 0;  /* Canto superior esquerdo angular */
    border-end-start-radius: 0;    /* Canto inferior esquerdo angular */
    text-align: left;           /* Texto alinhado à esquerda */
    align-items: flex-start;    /* Elementos alinhados à esquerda */
}

/* ===== CONTAINER DA IMAGEM DA MISSÃO ===== */
/* Fundo redondo verde claro para o ícone da missão */
.mission-image{
    display: flex;              /* Layout flexível */
    background-color: #e9f2ec;  /* Fundo verde bem claro */
    width: 70px;                /* Tamanho da caixa */
    height: 70px;               /* Tamanho quadrado */
    border-radius: 20%;         /* Cantos bem arredondados */
    align-items: center;        /* Centraliza verticalmente */
    justify-content: center;    /* Centraliza horizontalmente */
    margin-bottom: 15px;        /* Espaço inferior */
}

/* ===== TÍTULO DA MISSÃO ===== */
/* Container para o título no card de missão */
.title-mission {
    width: 100%;                /* Ocupar toda a largura */
    margin: 12px 0 15px 0;      /* Margens */
}

/* Texto do título da missão */
.title-mission h1 {
    margin: 0;                  /* Sem margem */
    font-size: 2.2rem;          /* Tamanho grande */
    line-height: 1.1;           /* Altura de linha */
    font-weight: 700;           /* Negrito (peso 700) */
}

/* ===== CONTAINER DA IMAGEM DA VISÃO ===== */
/* Fundo redondo escuro para o ícone da visão */
.vision-image {
    display: flex;              /* Layout flexível */
    background-color: #23530b5d;  /* Fundo escuro (verde muito escuro) */
    width: 70px;                /* Tamanho da caixa */
    height: 70px;               /* Tamanho quadrado */
    border-radius: 20%;         /* Cantos bem arredondados */
    align-items: center;        /* Centraliza verticalmente */
    justify-content: center;    /* Centraliza horizontalmente */
    margin-bottom: 15px;        /* Espaço inferior */
}

/* ===== TÍTULO DA VISÃO ===== */
/* Container para o título no card de visão */
.vision-title {
    width: 100%;                /* Ocupar toda a largura */
    margin: 12px 0 15px 0;      /* Margens */
}

/* Texto do título da visão */
.vision-title h1 {
    margin: 0;                  /* Sem margem */
    font-size: 2.2rem;          /* Tamanho grande */
    line-height: 1.1;           /* Altura de linha */
    font-weight: 700;           /* Negrito (peso 700) */
    color: inherit;             /* Herda a cor do container */
}

/* ===== DESCRIÇÃO DA VISÃO ===== */
/* Texto da visão no card escuro */
.description-vision{
    color: #f7f9fa;             /* Cor clara */
    line-height: 1.8;           /* Altura de linha maior para legibilidade */
    margin: 0;                  /* Sem margem */
    width: 100%;                /* Ocupar toda a largura */
}

/* Parágrafo dentro da descrição da visão */
.description-vision p {
    margin: 0;                  /* Sem margem */
    color: #cecece;             /* Cor cinza */
}

/* ===== DESCRIÇÃO DA MISSÃO ===== */
/* Texto da missão no card branco */
.description-mission {
    color: #555;                /* Cinza escuro */
    line-height: 1.9;           /* Altura de linha para melhor legibilidade */
    margin: 0;                  /* Sem margem */
    width: 100%;                /* Ocupar toda a largura */
}

/* ===== RESPONSIVIDADE PARA TABLETS ===== */
@media (max-width: 1024px) {
    .mission-vision {
        flex-direction: column;  /* Cards empilhados verticalmente */
        gap: 30px;              /* Espaço entre cards */
        padding: 40px 20px;     /* Preenchimento reduzido */
    }

    .card-missao,
    .card-vision {
        width: 100%;            /* Ocupam toda a largura */
        max-width: 600px;       /* Mas com largura máxima */
        height: auto;           /* Altura automática */
        padding: 30px;          /* Preenchimento reduzido */
    }

    .title-mission h1,
    .vision-title h1 {
        font-size: 1.8rem;      /* Título menor */
    }

    .mission-image,
    .vision-image {
        width: 60px;            /* Ícones menores */
        height: 60px;
    }
}

/* ===== RESPONSIVIDADE PARA CELULARES MÉDIOS ===== */
@media (max-width: 768px) {
    .mission-vision {
        flex-direction: column;  /* Cards empilhados */
        gap: 20px;              /* Espaço reduzido */
        padding: 30px 15px;     /* Preenchimento reduzido */
    }

    .card-missao,
    .card-vision {
        width: 100%;            /* Ocupam toda a largura */
        height: auto;           /* Altura automática */
        padding: 25px;          /* Preenchimento reduzido */
        border-radius: 12px;    /* Cantos mais redondos */
    }

    /* Restaura os cantos arredondados para o card de missão */
    .card-missao {
        border-end-end-radius: 12px;    /* Canto inferior direito */
        border-start-end-radius: 12px;  /* Canto superior direito */
    }

    /* Restaura os cantos arredondados para o card de visão */
    .card-vision {
        border-start-start-radius: 12px;  /* Canto superior esquerdo */
        border-end-start-radius: 12px;    /* Canto inferior esquerdo */
    }

    .title-mission h1,
    .vision-title h1 {
        font-size: 1.5rem;      /* Título menor */
        line-height: 1.2;       /* Altura de linha */
    }

    .mission-image,
    .vision-image {
        width: 50px;            /* Ícones ainda menores */
        height: 50px;
        margin-bottom: 10px;    /* Espaço reduzido */
    }

    .mission-image img,
    .vision-image img {
        width: 30px;            /* Imagem dentro do ícone ainda menor */
    }

    .mission span,
    .vision span {
        font-size: 0.7rem;      /* Fonte bem pequena */
    }

    .description-mission,
    .description-vision {
        line-height: 1.5;       /* Altura de linha reduzida */
        font-size: 0.95rem;     /* Fonte menor */
    }

    .line-vision-mission {
        width: 20px;            /* Linha mais comprida */
    }
}

/* ===== RESPONSIVIDADE PARA CELULARES PEQUENOS ===== */
@media (max-width: 480px) {
    .mission-vision {
        gap: 15px;              /* Espaço pequeno entre cards */
        padding: 20px 10px;     /* Preenchimento muito reduzido */
    }

    .card-missao,
    .card-vision {
        padding: 20px;          /* Preenchimento pequeno */
        border-radius: 10px;    /* Cantos bem arredondados */
    }

    .title-mission h1,
    .vision-title h1 {
        font-size: 1.3rem;      /* Título bem pequeno */
    }

    .mission-image,
    .vision-image {
        width: 45px;            /* Ícones bem pequenos */
        height: 45px;
        margin-bottom: 8px;     /* Espaço pequeno */
    }

    .description-mission,
    .description-vision {
        font-size: 0.9rem;      /* Fonte bem pequena */
        line-height: 1.4;       /* Altura de linha compacta */
    }

    .mission span,
    .vision span {
        font-size: 0.65rem;     /* Fonte muito pequena */
    }
}