.main-image {
    width: 100%;
    height: auto;
    max-width: 500px;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap;
}

.gallery-item {
    flex: 1 1 150px; /* Ajusta o tamanho da miniatura */
    max-width: 150px; /* Limita o tamanho da imagem */
    margin: 5px;
}


.project-item {
    text-align: center;
    padding: 15px;
}

.project-item img {
    max-width: 100%;
    height: auto;
}

.project-title {
    font-size: 1.2em;
    margin-top: 10px;
}

@media only screen and (max-width: 600px) {
	.company-detail-skew:after {
		display: none !important;
        background-color: transparent !important;
        background-image: url()!important;
	}

	.company-status {
		padding-left: 0;
	}
}

/* CSS dinâmico começa aqui */
.company-detail-skew::after {
    border-right: 12px solid #1e1c1c;
    content: "";
    display: block;
    height: 115%;
    width: 1920px;
    position: absolute;
    right: 100%;
    top: -20px;
    z-index: 1;
    background-color: #ffbc13;
    background-image: url('https://construtorananinha.com.br/images/background/bg7.png');
    background-repeat: repeat;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    -ms-transform: skew(30deg);
    transform: skew(30deg);
}



/* Outros estilos dinâmicos */
.some-other-class {
    background-image: url('https://construtorananinha.com.br/images/other-background.png');
    color: #333;
    padding: 10px;
}

/*------------------------------------- 
	5. services
-------------------------------------*/
.bg-service-team {
	background-image: url(https://construtorananinha.com.br/images/our-services/crane-left.jpg);
	background-repeat: no-repeat;
	background-position: -200px bottom;
}

/*------------------------------------- 
	6. latest project
-------------------------------------*/

.latest-project-block {
	background-image: url(https://construtorananinha.com.br/images/main-page-pic/btn-wrap-bg-dark.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}

.meu-icone{
    fill: #FFBC13; /* Muda a cor do ícone */
    transition: fill 0.3s ease; /* Suaviza a transição da cor */
    width: 30px;
    height: 30px;
}

/* Aplica o efeito hover */
.meu-icone:hover {
    fill: #000; /* Cor ao passar o mouse */
}

.mfp-content img {
    max-width: 100%; /* Ajuste o tamanho máximo da imagem */
    height: auto; /* Mantenha a proporção */
    display: block;
    margin: 0 auto;
}

.mfp-content {
    max-width: 100%; /* Ajuste a largura máxima do modal */
    margin: 0 auto;
}

.icon_svg {
    width: 16px;
    height: 16px;
    fill: #3d474a; /* Aplica-se apenas a SVG embutido no HTML */ 
}

/* Ocultar em telas menores que 768px */
@media screen and (max-width: 768px) {
	.ocultar-em-celular {
		display: none;
	}
}

/* descer o botão do slide em telas menores que 768px */
@media screen and (max-width: 768px) {
	.tp-button_slide {
		margin-top: 25px !important;
	}
}