.gray_sub_title{
    color:black;
}

/* BANNER SLIDE STYLE */

/* General adjustments for the banner on larger screens */
.banner_slide {
    position: relative;
    width: 100%;
    height: 60em; /* Original height for larger screens */
    overflow: hidden;
    margin-top: 10em;
}

/* General slideshow and slide styling */
.slideshow {
    display: flex;
    transition: transform 0.5s ease;
}

.slide_1, .slide_2, .slide_3, .slide_4 {
    min-width: 100%;
    height: 60em; /* Original height */
    display: flex;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Background images for each slide */
.slide_1 {
    background-image: url(/imagens/banners/banner_galpao.jpg);
}

.slide_2 {
    background-image: url(/imagens/banners/banner_produtos.jpg);
}

.slide_3 {
    background-image: url(/imagens/banners/banner_func.jpg);
}

.slide_4 {
    background-image: url(/imagens/banners/banner_metz_antigo.jpg);
}

/* Text styling */
.banner-text {
    width: 30%; /* Fixed width for larger screens */
    padding: 2em;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    word-wrap: break-word; /* Prevent text from overflowing */
}

/* Banner text for slide 2 (right aligned) */
.slide_2 .banner-text, .slide_4 .banner-text  {
    margin-left: auto; /* Push the banner-text to the right */
    justify-content: flex-start; /* Align text inside the box to the left */
}

/* Paragraph styling */
.banner-text p {
    font-size: 4em;
    margin: 0;
    text-align: center;
}

/* Slideshow Dots */
.slideshow-dots {
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8em;
}

.btn_dot_slide {
    width: 2.5em;
    height: 0.8em;
    background-color: lightgray;
    cursor: pointer;
}

.btn_dot_slide.active {
    background-color: darkgray;
}


/* Media query for screens with max-width of 1024px */
@media (max-width: 1024px) {
    /* Reduce height for smaller screens */
    .banner_slide, .slide_1, .slide_2, .slide_3, .slide_4 {
        height: 40em; /* Adjust height for 1024px screens */
    }

    .banner-text {
        width: 40%;
        font-size: .8em; /* Reduce font size */
    }
}

/* Media query for screens with max-width of 768px */
@media (max-width: 768px) {
    /* Further reduce height */

    .banner_slide, .slide_1, .slide_2, .slide_3, .slide_4 {
        height: 30em; /* Smaller height for mobile */
    }

    .banner-text {
        width: 30%; /* Take up more width on smaller screens */
        font-size: .5em; /* Further reduce text size */
        padding: 1em; /* Reduce padding */
        text-align: center;
    }

    /* Adjust text alignment and wrapping */
    .banner-text p {
        text-align: center; /* Keep the text centered */
        word-wrap: break-word; /* Ensure text wraps within the container */
    }

    .btn_dot_slide {
        width: 1.8em;
        height: 0.6em; /* Reduce size of dots */
    }
    
    .gray_sub_title{
        font-size: 1.8em;
    }
}

/* QUEM SOMOS  */

.container_quem_somos {
    max-width: 60%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 7em;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    transition: background-color 0.3s ease; /* Smooth color transition */
}

.div_qs_text {
    width: 65%;
    text-align: left;
    flex: 1 1 60%; /* Ensure the text block takes 60% of available space */
}

.container_quem_somos img {
    width: 25em;
    aspect-ratio: 1/1; /* Maintain a square ratio */
    border-radius: 50%; /* Make the image circular */
    flex: 1 1 30%; /* Allow image to take 30% of available space */
    max-width: 100%; /* Prevent image from exceeding container width */
    object-fit: cover; /* Ensure the image fills the circular shape */
}

.container_quem_somos p {
    font-size: 1.6em;
    color: #332222;
    line-height: 1.6;
}

.container_quem_somos .btn_light_red {
    margin: 1em auto 0;
    text-align: center;
}

.container_quem_somos:hover {
    background-color: #faf7f1; 
}

.container_quem_somos .btn_light_red:hover ~ .container_quem_somos {
    background-color: #faf7f1; /* Adjusted behavior */
}

/* New rules for responsive behavior */

@media (max-width: 1024px) {
    .container_quem_somos img {
        width: 30em; /* Reduce image size for smaller screens */
        aspect-ratio: 1/1; /* Maintain the 1:1 ratio */
        margin-top: 2em;
        margin-bottom: 2em; /* Add space between image and the link */
    }    

    .div_qs_text {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .container_quem_somos {
        flex-direction: column; /* Stack elements on smaller screens */
        padding: 3em;
        max-width: 95%;
    }

    .div_qs_text {
        width: 100%; /* Full width for text on smaller screens */
        text-align: center;
    }

    .container_quem_somos img {
        width: 15em; /* Reduce image size for smaller screens */
        aspect-ratio: 1/1; /* Maintain the 1:1 ratio */
        margin-top: 2em;
        margin-bottom: 2em; /* Add space between image and the link */
    }

    /* Add space between image and the a link (button) */
    .container_quem_somos .btn_light_red {
        margin-top: 2em; /* Add more space above the link when stacked */
    }
}

/* NOSSOS PRODUTOS */

.container_prod {
    width: 100%;
    padding: 0;
    margin: 0;
    margin-top: 12em;
    background-color: white;
    padding-bottom: 1em; 
    background-image: url(/imagens/background/background_prod_section.jpg);
    background-size: cover; /* Makes the image cover the entire div */
    background-attachment: fixed; /* Makes the image scroll with the page */
    background-position: center; /* Centers the image within the div */
    background-repeat: no-repeat; /* Prevents the image from repeating */ 
}

.div_prod_header {
    width: 100%;
    height: 60em; /* Height of the header */
    /* background-image: url(/imagens/novo/imagm_produtos.jpg); */
    background-size: cover; /* Cover the entire header space */
    background-position: center;
    display: flex; /* To center the content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: relative;
}

/* For the white background (prod_title) */
.prod_title {
    background-color: rgba(255, 255, 255, 0.95); /* Adjust opacity if needed */
    padding: 4em; /* Adjust padding for smaller white box */
    border-radius: 0.5em; /* Optional: add a slight rounding to the corners */
    width: 60%; /* Use width for better responsiveness */
    max-width: 80%; /* Allow more space on smaller screens */
    margin: 0 auto; 
    text-align: center;
    overflow: hidden; /* Prevent overflow */
}

/* More separation between h2 and p */
.prod_title h2 {
    margin-bottom: 0.5em; 
}

.prod_title p {
    font-size: 1.6em;
    color: #332222;
    line-height: 1.6;
}

/* Media query for 1024px */
@media (max-width: 1024px) {
    .div_prod_header {
        height: 50em; /* Adjust height for smaller screens */
    }
    
    .prod_title {
        padding: 3em; /* Adjust padding for better fit */
        width: 70%; /* Increase width for smaller screens */
    }

    .prod_title p {
        font-size: 1.5em; /* Slightly smaller font size */
    }
}

/* Media query for 768px */
@media (max-width: 768px) {
    .div_prod_header {
        height: 45em; /* Further adjust height for very small screens */
    }
    
    .prod_title {
        padding: 2em; /* Further reduce padding */
        width: 80%; /* Make it wider on small screens */
    }

    .prod_title p {
        font-size: 1.4em; /* Smaller font size */
    }
}

.container_prod h3{
    text-align: center;
    margin-top: 2em;
}

.container_prod hr{
    color: #ADADAD;
    width: 90%;
    margin: 2em auto;
    text-align: center;
}

.container_prod_content{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.95);
    margin: 0 10em 0 10em;
    border-radius: 1em;
    margin-bottom: 15em;
}

/* CARDS PRODUCAO */

.div_prod_cot {
    width: 70%; /* Set the width of the container */
    height: auto; /* Let the height adapt to content */
    display: flex; /* Use flexbox for card layout */
    justify-content: space-between; /* Evenly space the cards */
    flex-wrap: wrap; /* Allow wrapping for smaller screens */
    margin: 0 auto; /* Center the container */
    gap: 1em; /* Consistent gap between cards */
}

.cot_card_materiais,
.cot_card_banhos,
.cot_card_processos {
    background-size: cover; /* Cover the entire card */
    background-position: center; /* Center the background */
    color: white; /* White text color */
    text-shadow: var(--text_shadow_default);
    background-color: rgba(0, 0, 0, 0.9); /* Darken background on hover */
    border-radius: 1em; /* Rounded corners */
    flex: 1 1 30%; /* Ensure equal width with some flexibility */
    margin: 0 0; /* Remove horizontal margin */
    padding: 2em; /* Padding inside cards */
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Smooth transitions for hover effect */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/* Adjust card-specific backgrounds */
.cot_card_materiais {
    background-image: url(/imagens/cards/card_materiais_n.png);
}

.cot_card_banhos {
    background-image: url(/imagens/cards/card_banhos.jpg);
}

.cot_card_processos {
    background-image: url(/imagens/cards/card_processos_n.png); 
}

/* List styles */
.big_card_white_text {
    background-color: rgba(0, 0, 0, 0.4);
    font-size: 3em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    font-weight: 500;
}

.list_card_cot {
    background-color: rgba(0, 0, 0, 0.4);
    list-style-type: disc; /* Use disc bullets */
    padding-left: 5em; /* Space for the bullet */
    margin-top: 2em;
}

.list_item_cot {
    color: white; /* Ensure list items are white */
    text-shadow: var(--text_shadow_default);
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: 0.5em;
}

/* Responsive adjustments */
@media (max-width: 1024px) {

    .cot_card_materiais,
    .cot_card_banhos,
    .cot_card_processos {
        flex: 1 1 45%; /* Cards take up more width on medium screens */
    }
    
    .container_prod_content{
        margin: 0 5em 0 5em;
    }
}

@media (max-width: 768px) {

    .cot_card_materiais,
    .cot_card_banhos,
    .cot_card_processos {
        flex: 1 1 100%; /* Full width for each card on small screens */
        margin-bottom: 1em; /* Add spacing between stacked cards */
    }
    
        .container_prod_content{
        margin: 0 1em 0 1em;
    }
}


/* CARDS LINHA DE PRODUTOS */

.slideshow_container {
    position: relative;
    width: 80%;
    margin: auto;
    overflow: hidden;
    height: 35em;
    border-radius: 1em;
}

.slideshow_item {
    position: absolute;
    border-radius: 1em;
    top: 0;
    left: 100%; /* Todos os slides começam fora da tela */
    width: 100%;
    opacity: 0;
    padding: 20px;
    background-color: white;
    transition: transform 0.8s ease, opacity 0.8s ease; /* Adiciona a transição suave */
    text-decoration: none;
}

.slideshow_item.active {
    transform: translateX(0); /* Slide atual visível */
    opacity: 1;
    left: 0;
}

.slideshow_item_content{
    display: flex;
    padding: 1em;
    height: 25em;
    text-decoration: none;
    justify-content: space-evenly;
}

.card_white_descr{
    text-align: center;
    align-self: center;
    font-size: 1.5em;
    color: #333;
    padding: 3em;
    letter-spacing: .1em;
}

.slideshow_prev, .slideshow_next {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #333;
    cursor: pointer;
    user-select: none;
}

.slideshow_prev:hover, 
.slideshow_next:hover {
    color: #888888;
}

.slideshow_prev {
    left: 10px;
}

.slideshow_next {
    right: 10px;
}

.card_white_text{
    text-align: center;
    font-size: 2.5em;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-weight: 400;
    color: #b4b4b4;
}

.slideshow_dots {
    text-align: center;
    position: absolute;
    bottom: 1px;
    width: 100%;
}

.slideshow_dots span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 5px;
    background-color: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slideshow_dots span.active {
    background-color: #333;
}


.btn_light_red{
    margin: 2em;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .div_prod_linha {
        width: 90%; /* Allow the container to stretch more on smaller screens */
    }

    .prod_card_persianas,
    .prod_card_esquadrias,
    .prod_card_domesticos {
        flex: 1 1 45%; /* Cards take up more width on medium screens */
        min-height: 18em; /* Adjust minimum height for smaller screens */
    }
    
    .card_white_descr{
        display: none;
    }
    
}

@media (max-width: 768px) {
    .div_prod_linha {
        flex-direction: column; /* Stack the cards vertically on small screens */
    }

    .prod_card_persianas,
    .prod_card_esquadrias,
    .prod_card_domesticos {
        flex: 1 1 100%; /* Full width for each card on small screens */
        margin-bottom: 1em; /* Add spacing between stacked cards */
        min-height: 15em; /* Reduce minimum height on small screens */
    }
    
    
    
}

.div_prod_linha + .btn_light_red {
    display: block;
    text-align: center;
    margin: 3em auto; /* Center and add space above */
}

/* ENDERECO */
.container_endereco {
    width: 100%; /* Full width of the page */
    background-color: white; /* White background */
    display: flex; /* Align items side by side */
    height: 65em; /* Keep the height consistent */
    padding: 5em;
    box-sizing: border-box; /* Include padding in width/height */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
}

.div_ender_text {
    flex-basis: 35%; /* Occupy 35% of the container's width */
    padding: 3em; /* Adjust padding for better spacing */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align text to the top */
    position: relative; /* For pseudo-element positioning */
    background-color: #E7E7E7;
    border-bottom: 5px solid #B4B4B4; /* Change border to bottom */
    height: 100%; /* Ensure it takes up the full height */
    box-sizing: border-box; /* Include padding and borders in width/height */
    margin: 0; /* Reset margin for consistent centering */
}

/* Ensure the text is on top of the background */
.div_ender_text p {
    position: relative; /* Position relative to the parent for z-index to work */
    z-index: 1; /* Make sure the text is above the background */
    margin-top: 1em; /* Fixed margin from the top */
    font-size: 2em; /* Adjust font size for better readability */
    font-weight: 600;
    padding-left: 1em; /* Add space from the left */
    padding-right: 1em; /* Add space from the right */
    box-sizing: border-box;
    text-align: center;
}

/* Image */
.div_ender_text img {
    flex: 1; /* Take the remaining height */
    width: 100%; /* Make the image width 100% of its container */
    max-height: 80%; /* Adjust maximum height to fit better */
    object-fit: cover; /* Make sure the image covers the div */
    opacity: 0.3; /* Set opacity */
    margin: auto; /* Remove default margin */
}
    
/* Map iframe */
iframe {
    flex-basis: 65%; /* Occupy the remaining 65% of the container's width */
    width: 100%; /* Make iframe width 100% */
    height: 100%; /* Make the iframe height match the div_ender_text */
}

/* Media query for 1024px */
@media (max-width: 1024px) {
    .container_endereco {
        flex-direction: column; /* Stack items vertically */
        height: auto; /* Allow height to adjust */
        align-items: center; /* Center items vertically in the column */
    }

    .div_ender_text {
        flex-basis: auto; /* Allow to take full width */
        height: auto; /* Allow height to adjust */
        align-items: center; /* Center text and image inside */
    }

    .div_ender_text img {
        height: 20em; /* Set a fixed height for the image */
        width: 20em; /* Keep aspect ratio */
    }

    iframe {
        flex-basis: auto; /* Allow to take full width */
        height: 40em; /* Set a fixed height for the iframe */
        width: 100%; /* Ensure iframe covers full width */
    }
}

/* Media query for 768px */
@media (max-width: 768px) {
    .div_ender_text p{
        font-size: 1.5em;
    }
    
    .div_ender_text img {
        height: 10em; /* Adjust image height */
        width: 10em; /* Keep aspect ratio */
    }

    iframe {
        height: 35em; /* Adjust iframe height */
        width: 100%; /* Ensure iframe covers full width */
    }
}