/* APP CSS*/

/* * {
    box-shadow: inset 0px 0px 4px rgb(0, 0, 0);
} */



/* Definição da fonte e cores*/

@font-face {
    font-family: 'TimesTen';
    src: url('/assets/fonts/TimesTen-Bold.woff2') format('woff2'),
        url('/assets/fonts/TimesTen-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: 'Times Ten Bold', serif;
}

/* Estilos para o Header (Revisado) */

/* Top Bar */
.top-bar {
    border-bottom: 1px solid #e9ecef;
    /* Linha sutil abaixo da barra superior */
    color: rgb(14, 59, 45);
}

.top-bar-link {
    font-size: 0.9rem;
    color: rgb(14, 59, 45);
    /* Cor padrão para links da top bar */
    transition: color 0.3s ease-in-out;
}

.top-bar-link:hover {
    color: rgb(14, 59, 45) !important;
    /* Cor no hover para os links de contato */
}

.top-bar-link i {
    color: rgb(14, 59, 45) !important;
    /* Garante que os ícones tenham a cor da marca */
}

.social-icon-header {
    font-size: 1.1rem;
    /* Tamanho dos ícones sociais na top bar */
    color: rgb(14, 59, 45);
    /* Cor padrão dos ícones sociais na top bar */
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: inline-block;
    /* Para transform */
}

.social-icon-header:hover {
    color: rgb(175, 229, 89) !important;
    /* Cor no hover para os ícones sociais */
    transform: scale(1.1);
}


/* Main Navigation Bar */
.main-nav-bar {
    background-color: rgb(14, 59, 45) !important;
    /* Cor de fundo da navegação principal */
}

.main-nav-bar .navbar-brand {
    color: white;
    /* Cor do logo */
    font-weight: bold;
}

.main-nav-bar .navbar-brand:hover {
    color: whitesmoke;
}

.main-nav-bar .nav-link {
    color: white;
    /* Cor dos links de navegação */
    font-size: 1rem;
    /* Tamanho da fonte dos links */
    padding: 0.5rem 1rem;
    /* Padding dos links */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.main-nav-bar .nav-link:hover {
    color: rgb(175, 229, 89);
    background-color: rgb(24, 101, 77);
    /* Cor de fundo no hover */
    text-decoration: none;
    /* Remover sublinhado no hover se estiver sendo aplicado */
}

.main-nav-bar .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
    /* Cor da borda do toggler */
}

.main-nav-bar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    /* Ícone do hambúrguer branco */
}

/* Ajustes para mobile */
@media (max-width: 991.98px) {

    /* Para telas menores que lg (onde a nav bar colapsa) */
    .main-nav-bar .navbar-nav {
        margin-top: 1rem;
        /* Espaço entre o toggler e os links colapsados */
        margin-left: 0 !important;
        /* Garante que os links não sejam empurrados para a direita */
    }

    .main-nav-bar .nav-item {
        text-align: center;
        /* Centraliza os itens de menu no modo colapsado */
        width: 100%;
        /* Ocupa a largura total */
    }

    .main-nav-bar .nav-link {
        padding: 0.8rem 1rem;
        /* Mais padding para itens colapsados */
    }
}




/* 


@font-face {
    font-family: 'Times Ten Bold';
    src: url('/fonts/times-ten-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

body {
    font-family: 'Times Ten Bold', serif;
}

.navagation_menu {
    background-color: rgb(14, 59, 45) !important;
}

.media-header {
    color: rgb(14, 59, 45) !important;
}

.nav-item {
    transition: 0.4s ease-in-out;
}

.nav-item:hover {
    text-decoration: underline;
    color: rgb(255, 255, 255);
    background-color: rgb(24, 101, 77);

} */

/* Estilo para a imagem de fundo principal */
.landscape-img {
    width: 100%;
    height: 90vh;
    /* Altura responsiva: 60% da altura da viewport. Ajuste conforme necessário. */
    object-fit: cover;
    /* Garante que a imagem cubra a área sem distorcer */
    display: block;
    /* Remove possível espaço extra abaixo da imagem */
}

.landscape {
    position: absolute;
    top: 50%;
    /* Centraliza verticalmente na imagem */
    left: 50%;
    /* Centraliza horizontalmente na imagem */
    transform: translate(-50%, -50%);
    /* Ajuste fino para centralização perfeita */
    width: 85%;
    /* Largura do contêiner do texto */
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    /* Fundo semi-transparente para o texto */
    padding: 1.5rem;
    /* Espaçamento interno */
    box-sizing: border-box;
    /* Garante que padding não adicione à largura total */
}

.landscape h1 {
    color: white;
    /* Cor do texto */
    /* Tamanho de fonte fluido: começa em 2rem e aumenta um pouco em telas maiores */
    font-size: calc(1rem + 1.5vw);
    /* Mais responsivo e legível */
    line-height: 1.2;
    margin: 0;
    /* Remove margem padrão do h1 */
}

/* Media query para telas menores (ex: mobile) */
@media (max-width: 767.98px) {

    /* Usando breakpoint do Bootstrap (sm) */
    .landscape {
        width: 95%;
        /* Ocupa mais largura em mobile */
        padding: 1rem;
        /* Reduz o padding */
        top: 50%;
        /* Mantém a centralização */
    }

    .landscape h1 {
        font-size: calc(0.7rem + 1vw);
        /* Ajusta para ser menor, mas ainda legível */
    }

    .landscape-img {
        height: 40vh;
        /* Pode ser menor em mobile para economizar espaço vertical */
    }
}

/* Você pode adicionar mais breakpoints se quiser controle mais granular, ex: */
/* @media (max-width: 575.98px) { */
/* .landscape h1 {
        font-size: calc(1rem + 0.8vw);
    } */
/* } */


/* Estilos para a seção de texto ao lado do carrossel/imagem */
.plain_text {
    /* O padding será controlado pelas classes p- do Bootstrap no HTML (p-4 p-md-5) */

    /* Tamanho de fonte fluido para o texto principal (h6) */
    font-size: calc(1rem + 0.3vw);
    line-height: 1.6;
    /* Melhor espaçamento entre linhas */
    text-align: left;
    /* Alinhamento padrão para desktop */

}

/* Estilo para o h3 dentro de plain_text (Título "Madeira X") */
.plain_text h3 {
    font-size: calc(1.3rem + 0.5vw);
    /* Tamanho fluido para o título */
    line-height: 1.2;
    margin-bottom: 0.8rem;
    /* Espaço abaixo do título */
    color: rgb(14, 59, 45);
    /* Cor que você usa para outros títulos */
}

/* Estilo para o h6 dentro de plain_text (Parágrafo descritivo) */
.plain_text h6 {
    font-size: calc(1rem + 0.1vw);
    /* Tamanho fluido para o parágrafo */
    line-height: 1.5;
    color: rgb(14, 59, 45);
    /* Uma cor mais escura para melhor contraste */
    font-weight: normal;
    /* Garante que não fique muito negrito */
    margin-top: 0;
    /* Remove margem superior padrão do h6 */
}

/* Media Queries para ajuste responsivo */

/* Para telas menores que 'lg' (desktop) - 991.98px */
@media (max-width: 991.98px) {

    .plain_text h3,
    .plain_text h6 {
        text-align: center;
        /* Centraliza o texto quando as colunas empilham */
    }
}

/* Para telas menores que 'md' (a partir de mobile) - 767.98px */
@media (max-width: 767.98px) {
    .plain_text h3 {
        font-size: 1.6rem;
        /* Tamanho fixo para h3 em mobile para garantir legibilidade */
    }

    .plain_text h6 {
        font-size: 0.95rem;
        /* Tamanho fixo para h6 em mobile */
    }

    /* Opcional: para mobile, coloca a imagem ANTES do texto */
    /* Se preferir o texto antes da imagem em mobile, remova esta linha. */
    .carousel-item .row.align-items-center.g-0 {
        flex-direction: column-reverse;
    }
}

/* Para telas muito pequenas (sm) - 575.98px */
@media (max-width: 575.98px) {
    .plain_text h3 {
        font-size: 1.4rem;
    }

    .plain_text h6 {
        font-size: 0.85rem;
    }
}











.background {
    background-color: rgb(14, 59, 45) !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgb(14, 59, 45) !important;
    opacity: 0.5;

}

.plain_text {
    color: rgb(14, 59, 45);
    text-align: justify;
}

.plain_text_services {
    text-align: center;
}

/* Estilos para as imagens redondas de tipos de madeira */
.rounded-circle {
    /* Define uma largura máxima para desktop para que não fiquem gigantes */
    max-width: 250px;
    /* Ou 300px, dependendo de como quer que fiquem no desktop */
    width: 100%;
    /* Garante que a imagem ocupe 100% da largura disponível em seu contêiner pai (col-md-4, col-lg-3) */
    height: auto;
    /* Mantém a proporção da imagem automaticamente */
    border-radius: 50%;
    /* Mantém o formato circular */
    object-fit: cover;
    /* Recorta a imagem para preencher o círculo */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    display: block;
    /* Remove possíveis espaços em branco abaixo da imagem */
    margin: 0 auto;
    /* Centraliza a imagem horizontalmente dentro do contêiner */
    aspect-ratio: 1 / 1;
    /* Força uma proporção 1:1, crucial para manter o círculo com 'object-fit' */
}

/* Media Query para ajustar o tamanho em telas menores (tablets e mobile) */
@media (max-width: 991.98px) {

    /* Para telas menores que 'lg' (desktop) */
    .rounded-circle {
        max-width: 200px;
        /* Reduz o tamanho máximo para tablets */
    }
}

@media (max-width: 767.98px) {

    /* Para telas menores que 'md' (a partir de mobile) */
    .rounded-circle {
        max-width: 150px;
        /* Reduz ainda mais para celulares */
        /* height: 150px; Se quiser um tamanho fixo em mobile, mas 'aspect-ratio' é melhor */
    }
}

@media (max-width: 575.98px) {

    /* Para telas muito pequenas (sm) */
    .rounded-circle {
        max-width: 100px;
        /* Pode reduzir ainda mais se necessário */
    }
}

.materials img:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}

.wood_name {
    color: rgb(14, 59, 45);
}



/* Estilos para a seção de carrossel de texto "CONHEÇA A MADEIRO" */

/* Estilos gerais para plain_text (se não tiver já no app.css e for genérico) */
/* Se você já tem .plain_text com font-size: calc(...), não repita estas linhas */
/* .plain_text {
    font-size: calc(1rem + 0.3vw); 
    line-height: 1.6; 
} */

.future_clients .plain_text h1 {
    color: rgb(175, 229, 89);
    /* Cor escura para contraste com fundo claro */
    /* Tamanho de fonte fluido para o título principal */
    font-size: calc(1rem + 1.5vw);
    /* Começa em 2rem, escala com viewport */
    line-height: 1.2;
    margin-bottom: 1rem;
}

.future_clients .plain_text h4 {
    color: rgb(175, 229, 89);
    /* Cor escura para o parágrafo */
    font-weight: normal;
    /* Tamanho de fonte fluido para o parágrafo */
    font-size: calc(0.9rem + 0.5vw);
    /* Começa em 1rem, escala com viewport */
    line-height: 1.6;
    margin-top: 0;
}

/* Media Queries para ajuste fino em telas menores */

@media (max-width: 767.98px) {

    /* Mobile */
    .future_clients .plain_text h1 {
        font-size: 1.8rem;
        /* Tamanho fixo menor para mobile */
    }

    .future_clients .plain_text h4 {
        font-size: 0.95rem;
        /* Tamanho fixo menor para mobile */
        line-height: 1.5;
    }
}

@media (max-width: 575.98px) {

    /* Mobile muito pequeno */
    .future_clients .plain_text h1 {
        font-size: 1.5rem;
    }

    .future_clients .plain_text h4 {
        font-size: 0.85rem;
    }
}

/* Opcional: Estilo para o fundo se quiser algo diferente do 'background' global */
.future_clients {
    background-color: #f8f9fa;
    /* Exemplo de um fundo claro, substitua se tiver cor específica */
}
































.galery_description {
    text-align: justify;
    color: rgb(14, 59, 45);
}





/* .card-img-top {
    height: 230px;
    /* Adjust as needed 
    object-fit: contain;
    /* Prevents distortion by cropping the image 
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
} */

.card-img-top {
    height: 230px;
    object-fit: contain;
    /* Mantido conforme o seu código CSS atual */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    /* Adiciona um cursor de mão para indicar que é clicável */
    /* Se quiser um efeito de zoom suave ao clicar na imagem da galeria,
       pode adicionar aqui também: transition: transform 0.3s ease; */
}

/* Garante que a imagem dentro do modal se ajuste e seja responsiva */
.modal-body img {
    max-width: 50%;
    height: auto;
    display: block;
    /* Remove espaçamento indesejado */
    margin: 0 auto;
    /* Centraliza a imagem no modal */
}










/* .ourwork .card img:hover {
    transition: background-color 0.3s ease;
} */

.ourwork p {
    text-align: justify;
}


/* Estilos para a seção "Qualidade e Excelência" */

/* Fundo da seção, se não estiver definido globalmente por .contactus */
.contactus {
    background-color: rgb(14, 59, 45);
    /* Cor de fundo para toda a seção contactus */
    color: white;
    /* Cor padrão do texto para esta seção */
}


/* Título "Qualidade e Excelência" */
.qualityexcelence h2 {
    color: #ffff;
    /* Cor do título */
    font-size: calc(1rem + 1vw);
    /* Tamanho de fonte fluido */
    line-height: 1.2;
    text-align: justify;
}

/* Parágrafos dentro de "Qualidade e Excelência" */
.qualityexcelence .paragraphs p {
    font-size: calc(0.9rem + 0.2vw);
    /* Tamanho de fonte fluido para parágrafos */
    line-height: 1.5;
    margin-bottom: 1rem;
    /* Espaço entre parágrafos */
    color: #e0e0e0;
    /* Tom de branco para o texto no fundo escuro */
    text-align: justify;
}

/* Ajustes para a seção get_quote (Contacte já) se precisar de algo diferente do global */
.get_quote h1 {
    color: rgb(14, 59, 45);
    /* Cor mais escura para o h1 da seção de cotação */
    font-size: calc(1rem + 1vw);
    /* Tamanho de fonte fluido para o h1 */

    margin-bottom: 0.8rem;
}

.get_quote h5 {
    color: rgb(14, 59, 45);
    /* Cor mais escura para o h5 da seção de cotação */
    font-size: calc(0.9rem + 0.2vw);
    /* Tamanho de fonte fluido para o h5 */
    line-height: 1.5;
}

/* Media Queries para ajuste fino em telas menores */
@media (max-width: 767.98px) {

    /* Mobile */
    .qualityexcelence h2 {
        font-size: 1.6rem;
    }

    .qualityexcelence .paragraphs p {
        font-size: 0.9rem;
    }

    .get_quote h1 {
        font-size: 1.8rem;
    }

    .get_quote h5 {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {

    /* Mobile muito pequeno */
    .qualityexcelence h2 {
        font-size: 1.4rem;
    }

    .qualityexcelence .paragraphs p {
        font-size: 0.85rem;
    }

    .get_quote h1 {
        font-size: 1.6rem;
    }

    .get_quote h5 {
        font-size: 0.85rem;
    }
}

.qualityexcelence a button {
    color: rgb(14, 59, 45) !important;
    background-color: rgb(175, 229, 89) !important;
}

















.get_quote {
    background-color: rgb(175, 229, 89) !important;
}

.get_quote h2 {
    color: black !important;
}


.right-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 73vh;
    padding: 20px;
}

.right-section button {
    background-color: rgb(14, 59, 45);
}

.right-section h1 {
    color: rgb(14, 59, 45);
}

.right-section h5 {
    color: rgb(14, 59, 45);
}




/* Estilos para a seção "Siga a Madeiro pelas redes sociais" */
.socialmedia {
    background-color: #f8f9fa;
    /* Um fundo claro para esta seção, se desejar */
    color: #333;
    /* Cor padrão para o texto */
}

.socialmedia h1 {
    color: rgb(14, 59, 45);
    /* Cor que você usa para outros títulos */
    font-weight: bold;
    font-size: calc(1.8rem + 1vw);
    /* Tamanho de fonte fluido */
    line-height: 1.2;
}

.socialmedia h6 {
    font-size: calc(0.95rem + 0.2vw);
    /* Tamanho de fonte fluido para o parágrafo */
    line-height: 1.6;
    color: #555;
    /* Cor um pouco mais escura para o parágrafo */
}

.socialmedia .social-icon {
    /* Estilo base para os ícones de redes sociais */
    font-size: 2.5rem;
    /* Tamanho dos ícones */
    color: rgb(14, 59, 45);
    /* Cor dos ícones */
    transition: transform 0.3s ease-in-out;
    /* Transição suave para hover */
    margin: 0 0.8rem;
    /* Espaçamento entre os ícones */
}

.socialmedia .social-icon:hover {
    transform: scale(1.1);
    /* Efeito de zoom ao passar o mouse */
    color: rgb(24, 101, 77);
    /* Cor mais clara no hover */
}

/* Media Queries para ajuste fino em telas menores */
@media (max-width: 767.98px) {

    /* Mobile */
    .socialmedia h1 {
        font-size: 1.6rem;
    }

    .socialmedia h6 {
        font-size: 0.9rem;
    }

    .socialmedia .social-icon {
        font-size: 2rem;
        /* Ícones um pouco menores em mobile */
        margin: 0 0.5rem;
        /* Menor espaçamento entre os ícones em mobile */
    }
}

@media (max-width: 575.98px) {

    /* Mobile muito pequeno */
    .socialmedia h1 {
        font-size: 1.4rem;
    }

    .socialmedia h6 {
        font-size: 0.85rem;
    }

    .socialmedia .social-icon {
        font-size: 1.8rem;
    }
}



















/* Estilos para o Footer */

footer {
    background-color: rgb(14, 59, 45) !important;
    /* Cor de fundo principal do footer */
    color: white;
    /* Cor padrão do texto no footer */
}

/* Títulos dos widgets no footer */
footer h4.widget-title {
    color: white;
    font-weight: bold;
    font-size: calc(1rem + 0.3vw);
    /* Tamanho de fonte fluido para títulos */
    position: relative;
    /* Necessário para a linha dupla */
    padding-bottom: 0.5rem;
    /* Espaço para a linha */
}

/* Linha dupla abaixo dos títulos dos widgets (double-down-line-left) */
footer h4.widget-title::before {
    content: '';
    position: absolute;
    left: 0;
    /* Alinha a linha à esquerda em desktop */
    bottom: 0;
    width: 30px;
    /* Largura da primeira linha */
    height: 3px;
    background-color: white;
    /* Cor da linha */
}

footer h4.widget-title::after {
    content: '';
    position: absolute;
    left: 35px;
    /* Posição da segunda linha */
    bottom: 0;
    width: 15px;
    /* Largura da segunda linha */
    height: 3px;
    background-color: white;
}

/* Ajuste para alinhar as linhas no centro em mobile */
@media (max-width: 767.98px) {

    footer h4.widget-title::before,
    footer h4.widget-title::after {
        left: 50%;
        /* Centraliza as linhas */
        transform: translateX(-50%);
        /* Garante centralização perfeita */
    }

    footer h4.widget-title::after {
        transform: translateX(calc(-50% + 25px));
        /* Ajusta a segunda linha com base na primeira */
    }
}


/* Parágrafo de descrição no footer */
footer p {
    font-size: calc(0.85rem + 0.1vw);
    /* Tamanho de fonte fluido */
    line-height: 1.6;
    color: #e0e0e0;
    /* Tom de branco para o texto */
}

/* Itens de lista (endereço, telefone, email) */
footer ul li {
    font-size: calc(0.9rem + 0.05vw);
    /* Tamanho de fonte fluido */
    color: #ffff;
}

/* Links do footer (Links Rápidos) */
footer .footer_link {
    font-size: calc(0.9rem + 0.05vw);
    transition: color 0.3s ease-in-out;
}

footer .footer_link:hover {
    color: rgb(175, 229, 89) !important;
    /* Cor de destaque no hover (amarelo dourado) */
}

/* Ícones de redes sociais no footer */
footer .social-icon-footer {
    font-size: 1.8rem;
    /* Tamanho dos ícones */
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out;
    display: inline-block;
    /* Para aplicar transform */
}

footer .social-icon-footer:hover {
    color: rgb(175, 229, 89) !important;
    /* Cor de destaque no hover */
    transform: scale(1.1);
    /* Efeito de zoom */
}

/* Texto de Copyright */
footer .copyright span {
    font-size: 0.8rem;
    color: #b0b0b0;
}

/* Media Queries para ajuste fino em telas menores */
@media (max-width: 767.98px) {

    /* Mobile */
    footer h4.widget-title {
        font-size: 1.2rem;
    }

    footer p,
    footer ul li,
    footer .footer_link {
        font-size: 0.85rem;
    }

    footer .social-icon-footer {
        font-size: 1.5rem;
        margin: 0 0.4rem;
        /* Reduz espaçamento entre ícones em mobile */
    }
}








/* --- About Page Styles (Renamed Classes) --- */

/* Hero Section */
.about-hero-section {
    /* No background-color here unless it was explicitly original */
    background-color: rgb(175, 229, 89);
}

.about-hero-section .about-hero-image {
    /* Maintain original image behavior (width 100%, object-fit: contain) */
    width: 100%;
    height: auto;
    /* Ensure aspect ratio is maintained */
    object-fit: contain;
}

.about-hero-section .about-hero-text {
    min-height: 250px;
    /* Minimum height for text section in mobile */
    /* No background-color here unless it was explicitly original */
    /* background-color: rgb(175, 229, 89); */
}

.about-hero-section .about-hero-text a button {
    background-color: rgb(14, 59, 45);
    color: #ffff;
}

@media (max-width: 767.98px) {

    /* Mobile */
    .about-hero-section .about-hero-text {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/* Page Title Section */
.about-page-title {
    background-color: rgb(14, 59, 45);
    color: rgb(175, 229, 89);
}

/* Main Content Section */
.about-main-content p {
    font-size: 1rem;
    line-height: 1.6;
    color: rgb(14, 59, 45);
    text-align: justify;
    /* Default text color */
}



.about-main-content p.fw-bold {
    margin-bottom: 0.5rem;
    /* Margem para parágrafos em negrito, como cabeçalhos de lista */
}

/* Títulos das Sub-seções (e.g., Quem Somos Nós?) */
.about-main-content .about-section-heading {
    color: rgb(14, 59, 45) !important;
}

/* Imagens da Galeria no About */
.about-main-content .about-gallery-item img {
    /* Maintain original image behavior (width 60%, object-fit: contain) */
    width: 75%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 991.98px) {

    /* For screens smaller than lg (where text/image columns stack) */
    .about-main-content .about-gallery-item {
        margin-bottom: 2rem;
        /* Spacing between stacked images */
    }

    .about-main-content .about-gallery-item:last-child {
        margin-bottom: 0;
        /* Remove margin from the last image to prevent extra space */
    }
}

/* Bottom Call to Action Section */
.bottom-cta-section {
    background-color: rgb(175, 229, 89);
}

.bottom-cta-section h3 {
    font-size: calc(1rem + 1vw);
    /* Fluid font size */
    color: rgb(14, 59, 45);
}

.bottom-cta-section a {
    background-color: rgb(14, 59, 45);
    color: #ffff;
    font-size: 1.1rem;
}

/* --- Double-Down-Line Styles (ensure these are consistent with your global app.css) --- */
/* You likely already have these from previous steps. Ensure they match exactly. */
.double-down-line-left {
    position: relative;
    padding-left: 50px;
    /* Adjust padding to make space for lines */
    /* Ensure no text-align here for default left alignment */
}

.double-down-line-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 3px;
    background-color: rgb(14, 59, 45) !important;
}

.double-down-line-left::after {
    content: '';
    position: absolute;
    left: 40px;
    /* Adjust based on first line width + desired gap */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 3px;
    background-color: rgb(14, 59, 45) !important;
}

/* Responsive adjustment for double-down-line-left (if parent is text-center) */
@media (max-width: 767.98px) {

    /* This media query ensures that if the parent col-12 has text-center,
       the lines are also centered. Adjust selector if your HTML differs. */
    .col-12.text-center .double-down-line-left {
        text-align: center;
        padding-left: 0;
        /* Remove fixed padding when centered */
    }

    .col-12.text-center .double-down-line-left::before,
    .col-12.text-center .double-down-line-left::after {
        left: 50%;
        transform: translate(-50%, -50%);
        /* Centralize both lines */
    }

    .col-12.text-center .double-down-line-left::after {
        left: calc(50% + 20px);
        /* Position second line relative to the first */
    }
}



/* --- Novas classes e ajustes ESPECÍFICOS para a seção de produtos --- */

.product-page-section {
    /* Corresponde à antiga .tipo_madeira */
    /* Você pode adicionar estilos específicos para a seção geral aqui, se necessário */
    background-color: transparent;
    /* Exemplo: mantém o fundo transparente */
}

.section-heading {
    /* Corresponde à antiga .plain_text_services para h1 e h3 */
    color: rgb(14, 59, 45);
    text-align: center;
}

.section-description {
    /* Corresponde à antiga .plain_text_services para h6 */
    color: rgb(14, 59, 45);
    text-align: justify;
    font-size: 1rem;
}



.product-image {
    /* SUBSTITUI E OTIMIZA a antiga .rounded-circle */
    width: 100%;
    /* Faz a imagem preencher a largura da sua coluna pai */
    max-width: 220px;
    /* Limita o tamanho máximo da imagem em telas maiores */
    height: auto;
    /* Garante que a altura se ajuste para manter a proporção */
    aspect-ratio: 1 / 1;
    /* Força a imagem a ser um quadrado, que combinada com border-radius: 50% resulta em um círculo perfeito */
    border-radius: 50%;
    /* Transforma a imagem em um círculo */
    object-fit: cover;
    /* Corta a imagem para preencher o espaço do círculo sem distorcer */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    display: block;
    /* Garante que 'margin: 0 auto;' funcione para centralizar a imagem */
    margin: 0 auto;
    /* Centraliza a imagem dentro da sua coluna */
}

.product-gallery .product-image:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease-in-out;
}

.product-item-title {
    /* Corresponde à antiga .wood_name */
    color: rgb(14, 59, 45);
    font-size: 1.3rem;
}

.product-item-description {
    /* Corresponde à antiga .galery_description */
    text-align: justify;
    color: rgb(14, 59, 45);
}

/* --- Fim das classes específicas para a seção de produtos --- */


/* --- Novas classes e ajustes ESPECÍFICOS para a seção de Contactos --- */

.contact-call-to-action-row {
    /* Corresponde à antiga .get_quote */
    background-color: rgb(175, 229, 89) !important;
}

.contact-banner-content {
    /* Corresponde à antiga .right-section */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 73vh;
    /* Pode ser ajustado para ser mais flexível em dispositivos móveis, por exemplo, usando min-height ou um padding responsivo */
    padding: 20px;
}

.contact-heading {
    /* Corresponde ao h1 dentro de .right-section */
    color: rgb(14, 59, 45);
}

.contact-subheading {
    /* Corresponde ao h5 dentro de .right-section */
    color: rgb(14, 59, 45);
    text-align: center;
}

.contact-button {
    /* Corresponde ao botão dentro de .right-section */
    background-color: rgb(14, 59, 45);
    color: white;
    /* Define a cor do texto para o botão */
    border-color: rgb(14, 59, 45);
    /* Define a cor da borda do botão */
}

/* Não há necessidade de estilos específicos para o iframe do mapa aqui,
   pois o Bootstrap 5 .ratio já o torna responsivo */



.talk-to-us-card {
    /* Corresponde à antiga .faleconosco */
    background-color: rgb(175, 229, 89);
    color: rgb(14, 59, 45);
    /* Define a cor do texto para toda a card */
    padding: 20px;
    /* Adicionado para melhor espaçamento interno */
}

.talk-to-us-heading {
    /* Corresponde ao h3 dentro de .faleconosco */
    color: rgb(14, 59, 45);
}

.talk-to-us-card ul li {
    /* Corresponde aos li dentro de .faleconosco */
    color: rgb(14, 59, 45);
}

/* .contact-address-info {
     Nova classe para envolver o texto das informações de contato (Endereço, Ligue-nos, Endereços eletrónicos)
     Pode ser usada para estilizar o texto dentro destas seções 
} */

/* --- Fim das classes específicas para a seção de Contactos --- */