* {
    font-family: Roboto;
}


/* ===========================
   Reset + imagens responsivas
=========================== */

* {
    box-sizing: border-box;
}


/* Espaço padrão para todos os botões do site */

button,
.btn,
#botao {
    margin-top: 25px;
    /* afasta da imagem ou do elemento acima */
    margin-bottom: 25px;
    /* afasta do que vier abaixo */
}

.container-fluid {
    background: #B68441;
    padding-top: 20px;
    padding-bottom: 20px;
}

.banner img,
.banner2 img,
.banner3 img,
.mservico img {
    max-width: 100%;
    height: auto;
    display: block;
}

#navbarNav {
    angle: 0 deg;
    opacity: 1;
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: #31231B;
}

.btn {
    background: #31231B;
    color: #FFFFFF;
    font-family: Roboto;
}

.btn:hover {
    color: #FFFFFF;
}

.texto {
    font-family: Gill Sans Ultra Bold;
    font-weight: 400;
    font-style: Regular;
    font-size: 89px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    width: 663;
    height: 549;
    angle: 0 deg;
    opacity: 1;
}

#texto {
    width: 84;
    height: 23;
    angle: 0 deg;
    opacity: 1;
    top: 852px;
    left: 325px;
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    margin-right: 100px;
}

.banner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../lib/img/Padrão_Fundo.png") no-repeat center/cover;
    opacity: 0.03;
    /* só a imagem fica transparente */
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
    /* garante que o conteúdo fica por cima */
    color: #000;
    /* podes ajustar cor para melhor contraste */
}

#botao {
    background: #B68441;
    padding: 15px 40px;
    border-radius: 28.5px;
    color: #fff;
    text-decoration: none;
    /* tira o sublinhado */
    font-size: 18px;
    display: inline-block;
    cursor: pointer;
    transition: 0.3s;
}

#botao:hover {
    background: #B68441;
    /* cor mais escura ao passar o rato */
}


/* centraliza o botão dentro do banner */

.banner-content {
    display: flex;
    justify-content: center;
    /* centro horizontal */
    align-items: center;
    /* centro vertical (se quiseres) */
    height: 100%;
}

.custom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* duas colunas */
    grid-template-rows: auto auto;
    /* duas linhas */
    gap: 15px;
}

.custom-grid img {
    width: 100%;
    object-fit: cover;
    border-radius: 40px;
}


/* alturas diferentes por imagem */

.custom-grid .img1 {
    height: 421px;
}

.custom-grid .img2 {
    height: 350px;
}

.custom-grid .img3 {
    height: 200px;
}

.custom-grid .img4 {
    height: 220px;
}

.banner2 {
    background: #D9D9D9;
}

.banner2 p {
    font-family: Roboto;
    font-weight: 600;
    font-style: SemiBold;
    font-size: 40px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #31231B
}

.identidade {
    width: 511;
    height: 344;
    angle: 0 deg;
    opacity: 1;
    border-radius: 40px;
}

.identidade2 h3 {
    width: 523;
    height: 45;
    angle: 0 deg;
    opacity: 1;
    top: 1935px;
    left: 656px;
}

.identidade2 p {
    font-family: Roboto;
    font-weight: 400;
    font-style: Regular;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: black;
    display: flex;
    justify-content: center;
    /* centro horizontal */
    align-items: center;
}

.banner3 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.banner3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../lib/img/degrade.png") no-repeat center/cover;
    z-index: 1;
    /* fica atrás do conteúdo */
}


/* garantir que os cards ficam por cima */

.banner3 .container {
    position: relative;
    z-index: 2;
}

.banner3 img {
    width: 50px;
    /* todas com largura fixa */
    height: auto;
    /* altura proporcional */
    display: block;
    /* transforma em bloco */
    margin: 0 auto;
    /* centraliza dentro do card */
}

.banner3 .custom-btn {
    color: white;
    text-decoration: none;
}

.banner3 .link {
    margin-top: 150px;
}

.banner4 {
    background: #A9A6A6;
}

.banner4 .logo {
    width: 392px;
    height: 84px;
}

.icone {
    background: #D9D9D9;
}

.sobrebanner {
    position: relative;
    /* Garante que o ::before fique preso só dentro da seção */
    z-index: 0;
    /* fica atrás do menu */
}

.sobrebanner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../lib/img/degrade.png") no-repeat center/cover;
    z-index: -1;
    /* fica atrás do conteúdo da seção */
}

.icone img {
    height: 25px;
    width: 25px;
    ;
    /* mantém à esquerda */
}

.sobreconteudo {
    color: #fff;
}

.sobre {
    width: 215;
    height: 56;
    top: 538px;
    left: 258px;
    angle: 0 deg;
    opacity: 1;
}

.sobreconteudo1 {
    display: flex;
    justify-content: flex-start;
    /* mantém à esquerda */
    align-items: flex-start;
    /* força alinhamento pelo topo */
    padding-top: 250px;
    padding-left: 200px;
    /* empurra a frase para baixo */
}

.sobreconteudo1 .sobre {
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    margin-top: 200px;
    /* aumenta este valor até descer como queres */
}

.sobreconteudo1 .sobre {
    font-size: 32px;
    /* aumenta o tamanho */
    font-weight: 500;
    /* deixa mais forte */
    color: #fff;
    /* ajusta a cor (ex.: branco como na tua imagem) */
    margin: 0;
}

.sobreconteudo2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: justify;
    /* o texto continua justificado */
}

.p,
.s,
.t {
    display: block;
    /* cada span funciona como parágrafo */
    margin-bottom: 15px;
    /* espaço entre eles */
    text-align: justify;
    /* justifica o texto */
}

.sobreconteudo2 img {
    display: block;
    margin: 0 auto 20px;
    /* centraliza e dá espaço embaixo */
    max-width: 100%;
    /* evita que estoure a largura */
    height: auto;
}

.m {
    background: #D9D9D9;
}

.nav-tabs .nav-link.active {
    color: #B68441 !important;
    font-weight: bold;
    border-color: transparent transparent#B68441;
}

.tab-pane {
    padding: 20px 0;
    color: #222;
}

.servicobanner {
    position: relative;
    z-index: 0;
    height: 900px;
    /* ou auto, ou 100vh */
}

.servicobanner::before {
    content: "";
    position: absolute;
    inset: 0;
    /* ocupa toda a secção */
    background: url("../lib/img/trabalharem.jpg") no-repeat center/cover;
    z-index: -1;
}

.servico {
    font-size: 50px;
    margin-top: 350px;
}

.mservico {
    background: #D9D9D9;
}

.mservico h2 {
    color: #31231B;
    font-size: 48px;
    text-align: center;
    /* centraliza em vez de margin-left */
}

.mservico p {
    font-size: 20px;
    text-align: center;
    /* centraliza o texto */
    max-width: 800px;
    margin: 0 auto;
    /* limita largura e centraliza */
}

.servicobanner button {
    margin-top: 20px;
    /* afasta o botão da imagem */
    padding: 12px 24px;
    /* aumenta o espaço dentro do botão */
    border-radius: 8px;
    /* opcional, para dar cantos arredondados */
}

.contatobanner {
    position: relative;
    z-index: 0;
    height: 400px;
    /* ou auto, ou 100vh */
}

.contatobanner::before {
    content: "";
    position: absolute;
    inset: 0;
    /* ocupa toda a secção */
    background: #31231B;
    z-index: -1;
}

.mcontato {
    background: #D9D9D9;
}


/* .mcontato .col-sm-3 {
    padding-left: 20px;
    padding-right: 20px;
}

.mcontato .card {
    margin-bottom: 20px;
} */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    /* controla espaçamento entre cards */
    align-items: start;
    justify-items: center;
    width: 100%;
    padding: 1rem 0;
}

.custom-card {
    background: #D9D9D9;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    padding: 1.25rem;
    width: 100%;
    max-width: 360px;
    /* controla largura máxima do cartão */
    box-sizing: border-box;
}

.follow-block {
    text-align: center;
    padding: 1.25rem;
}


/* ===========================
   Tablets (até 992px)
=========================== */

@media (max-width: 992px) {
    /* Navbar */
    #navbarNav {
        font-size: 18px;
        text-align: center;
    }
    /* Texto principal */
    .texto {
        font-size: 48px;
        text-align: center;
        width: 100%;
        height: auto;
    }
    #texto {
        font-size: 18px;
        margin: 20px auto;
        text-align: center;
    }
    /* Botão */
    #botao {
        font-size: 16px;
        padding: 12px 25px;
    }
    /* Grid */
    .custom-grid {
        grid-template-columns: 1fr;
        /* 1 coluna */
    }
    /* Serviços */
    .servico {
        margin-top: 150px;
        font-size: 40px;
        text-align: center;
    }
    .mservico h2 {
        font-size: 36px;
    }
    .mservico p {
        font-size: 18px;
        padding: 0 20px;
    }
    /* Sobre */
    .sobreconteudo1 {
        padding: 100px 40px 40px;
        text-align: center;
    }
    .sobreconteudo1 .sobre {
        margin-top: 50px;
        font-size: 28px;
    }
    .sobreconteudo2 {
        padding: 0 20px;
    }
    /* Banner */
    .banner,
    .banner3,
    .servicobanner {
        height: auto;
        padding: 60px 20px;
    }
    .banner4 .logo {
        width: 250px;
        height: auto;
    }
}


/* ===========================
   Smartphones grandes (até 768px)
=========================== */

@media (max-width: 768px) {
    #navbarNav {
        font-size: 16px;
    }
    .texto {
        font-size: 36px;
    }
    #botao {
        font-size: 16px;
        padding: 12px 22px;
    }
    .servico {
        margin-top: 100px;
        font-size: 32px;
    }
    .mservico h2 {
        font-size: 28px;
    }
    .mservico p {
        font-size: 16px;
    }
    .sobreconteudo1 {
        padding: 60px 20px;
    }
    .sobreconteudo1 .sobre {
        font-size: 24px;
    }
    .sobreconteudo2 p {
        font-size: 16px;
    }
    .banner-content {
        flex-direction: column;
        gap: 20px;
    }
}

.mcontato.card {
    margin: 15px;
}


/* ===========================
   Smartphones pequenos (até 480px)
=========================== */

@media (max-width: 480px) {
    #navbarNav {
        font-size: 14px;
    }
    .texto {
        font-size: 24px;
    }
    #botao {
        font-size: 14px;
        padding: 10px 18px;
    }
    .custom-grid img {
        border-radius: 15px;
    }
    .mservico h2 {
        font-size: 22px;
    }
    .mservico p {
        font-size: 14px;
    }
    .sobreconteudo1 {
        padding: 40px 15px;
    }
    .sobreconteudo1 .sobre {
        font-size: 20px;
    }
    .sobreconteudo2 p {
        font-size: 14px;
    }
    .banner4 .logo {
        width: 180px;
    }
}


/* Tablets */

@media (max-width: 992px) {
    .contatobanner h2 {
        font-size: 50px;
    }
    .contatobanner p {
        font-size: 18px;
    }
}


/* Smartphones grandes */

@media (max-width: 768px) {
    .contatobanner h2 {
        font-size: 36px;
    }
    .contatobanner p {
        font-size: 16px;
    }
}


/* Smartphones pequenos */

@media (max-width: 480px) {
    .contatobanner h2 {
        font-size: 28px;
    }
    .contatobanner p {
        font-size: 14px;
    }
}


/* Tablets (médios) */

@media (min-width: 768px) and (max-width: 991px) {
    .cards-container {
        gap: 20px;
        /* mais espaço entre os cards */
    }
}


/* Desktop (grandes) */

@media (min-width: 992px) {
    .cards-container {
        gap: 30px;
        /* ainda mais espaço */
    }
}

@media (min-width: 768px) {
    .mcontato.card {
        margin: 20px;
        /* aumenta o espaço lateral e vertical */
    }
}