body{
    background-color: #ffffff;
    font-family: "Inter", serif;
}

header{
    background-color: #eab1f7;
    display: flex;
    align-items: flex-start;
    padding: 10px;
}

.portifolio{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-height: 900px;
    gap: 65px;
    background-color: rgb(237, 237, 237);
    color: #190f0f;
    font-size: 24px;
    letter-spacing: 5px;
    text-align: center;
    padding: 0 60px;
}

.bloco1{
    text-align: right;
    justify-content: center;
    margin-bottom: 60px;
    margin-top: 30px;
}

.descricao{
    text-align: right;
    justify-content: center;
    line-height: 1.5;
    margin-bottom: 60px;
    margin-top: 40px;
}

.porf-ft{
    display: flex;
    text-align: right;
    flex-direction: row;
    margin-top: 30px;
    gap: 70px;
}

/* Seleciona a imagem dentro do .port-ft */
.porf-ft img {
    width: 100%;        /* Largura fixa */
    height: 300px;       /* Altura fixa */
    object-fit: cover;   /* Recorta a imagem sem distorcer */
    border-radius: 8px;  /* Opcional — bordas arredondadas */
    margin-top: 30px;
    margin-bottom: 30px;
    gap: 60px;
}

.conheca{
    display: flex;
    flex-direction: row;
    max-width: 1200px;
    align-items: center;
    gap: -25px;
    margin: 0 auto;
    padding: 0px 60px;
}

.blococonheca{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.descricaoconheca{
    text-align: left;
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 30px;
    font-size: 50px;
    letter-spacing: 5px;
}

.sobreconhece{
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 10px;
    font-size: 24px;
    width: 600px;
    word-break: break-word;
    white-space: normal;
    line-height: 1.6;
}

.imgconheca{
    flex: 1;
}

.imgconheca img {
    width: 70%;        /* Largura fixa */
    height: 400px;       /* Altura fixa */
    object-fit: cover;   /* Recorta a imagem sem distorcer */
    border-radius: 8px;  /* Opcional — bordas arredondadas */
    margin-top: 30px;
    margin-bottom: 30px;
}

.imgfundo img {
    width: 100%;        /* Largura fixa */
    height: 400px;       /* Altura fixa */
    object-fit: cover;   /* Recorta a imagem sem distorcer */
    border-radius: 8px;  /* Opcional — bordas arredondadas */
}

.experhabil{
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-height: 900px;
    gap: 65px;
    background-color: rgb(255, 255, 255);
    color: #190f0f;
    letter-spacing: 2px;
    text-align: left;
    padding: 20px 60px;
}


.exha, .haat{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.titex, .titha{
    text-align: center;
    font-size: 46px;
    line-height: 0.8;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 40px;
    letter-spacing: 5px;
}

.descrex, .descrha{
    display: flex;
    flex-direction: column;
    text-align: justify;
    gap: 10px;
    font-size: 20px;
    width: 500px;
    word-break: break-word;
    white-space: normal;
    padding-left: 15px;
    text-indent: -15px;
    margin-bottom: 30px;
}

.mmp{
    display: flex;
    justify-content: center;
    max-height: 900px;
    gap: 65px;
    background-color: rgb(162, 2, 255);
    color: #ffffff;
    letter-spacing: 2px;
    text-align: left;
    padding: 20px 60px;
}

.mmp{
    display: flex;
    text-align: center;
    font-size: 60px;
}

.mmpback{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    background-color: #ffffff;
    gap: 20px;
    padding: 0 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.imgmmp{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    margin-top: 30px;
}

.imgmmp img{
    width: 300px;
    height: 250px;
    object-fit: cover;
}

/* Título abaixo da imagem */
.titmmp {
    text-align: center;
    margin-top: 15px;
    font-size: 24px;
    letter-spacing: 3px;
}

.txtmmp {
    text-align: center;
    margin-top: 8px;
    font-size: 20px;
    margin-bottom: 30px;
}

.imgbanner img {
    width: 100%;        /* Largura fixa */
    height: 300px;       /* Altura fixa */
    object-fit: cover;   /* Recorta a imagem sem distorcer */
    border-radius: 8px;  /* Opcional — bordas arredondadas */
}

.txtbanner {
    text-align: center;
    margin-top: -280px;
    font-size: 50px;
    letter-spacing: 2px;
    word-break: break-word;
    color: #d002ff;
    white-space: normal;
    line-height: 1;
    margin-bottom: 25px;
    transform: scaleX(1.2);
    display: block;
}

/* Container principal */
.confortox1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    max-width: 1150px;
    margin: 0 auto;
    gap: 25px;          /* (1150 - 350 - 200 - 350) / 2 = 125px de gap */
}

/* Bloco 1 — Título, subtítulo e descrição */
.confortomini {
    display: flex;
    flex-direction: column;  /* Empilha em coluna */
    align-items: flex-start;
    width: 400px;
    margin-top: 50px;
    flex-shrink: 0;          /* Impede o bloco de encolher */
}

.titcm {
    font-size: 44px;
}

.subtitcm {
    font-size: 30px;
    margin-top: 190px;
}

.descrcm {
    font-size: 20px;
    margin-top: 90px;
}

/* Bloco 2 — Central */
.blfotoscm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 200px;
    height: 100px;
    flex-shrink: 0;
}

/* Container das 3 fotos empilhadas */
.blfotoscm {
    display: flex;
    flex-direction: column;  /* Empilha as fotos em coluna */
    align-items: center;
    margin-top: 30px;
    width: 200px;            /* Largura do bloco central */
    gap: 10px;               /* Espaço entre as fotos */
}

/* Todas as imagens com o mesmo tamanho */
.blfotoscm img {
    width: 200px;            /* Mesma largura do container */
    height: 250px;           /* Altura igual para as 3 */
    object-fit: cover;       /* Recorta sem distorcer */
}

/* Container da foto ampliada */
.blfotoampcm {
    width: 550px;
    height: 800px;
    flex-shrink: 0;
    margin-top: 39px;
}

/* Todas as imagens com o mesmo tamanho */
.blfotoampcm img {
    width: 650px;            /* Mesma largura do container */
    height: 770px;           /* Altura igual para as 3 */
    object-fit: cover;       /* Recorta sem distorcer */
}

.lili{
    display: flex;
    justify-content: right;
    max-height: 900px;
    gap: 65px;
    letter-spacing: 2px;
    text-align: left;
    padding: 10px 90px;
}

.lili{
    display: flex;
    text-align: center;
    font-size: 60px;
    color: #000000;
}

.imglili img{
    width: 100%;        /* Largura fixa */
    height: 400px;       /* Altura fixa */
    object-fit: cover;   /* Recorta a imagem sem distorcer */
}

.contlili{
    display: flex;
    justify-content: left;
    letter-spacing: 2px;
    padding: 10px 90px;
    max-height: 900px;
}

.lilicont{
    display: flex;
    text-align: left;
    font-size: 60px;
    color: #000000;
    transform: scaleX(1.4);
    margin-left: 200px;
    display: block;
}



















.btn-top {
    position: fixed;          /* Fica fixo na tela ao rolar */
    bottom: 30px;             /* Distância do fundo */
    right: 30px;              /* Distância da direita */
    z-index: 999;             /* Fica acima de todos os elementos */

    width: 45px;              /* Largura do botão */
    height: 45px;             /* Altura do botão */
    border-radius: 50%;       /* Deixa redondo */

    background-color: #000;   /* Cor de fundo */
    color: #fff;              /* Cor da seta */
    font-size: 18px;          /* Tamanho da seta */

    display: none;            /* Começa invisível */
    align-items: center;      /* Centraliza verticalmente */
    justify-content: center;  /* Centraliza horizontalmente */

    text-decoration: none;    /* Remove sublinhado */
    transition: all 0.3s;     /* Suaviza todas as transições */
    cursor: pointer;          /* Cursor de mão ao passar o mouse */
}

.btn-top:hover {
    background-color: #333;   /* Cor mais clara no hover */
    transform: scale(1.1);    /* Cresce levemente ao passar o mouse */
}