/* Box sizing border-box para todos os elementos */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Removendo margens e preenchimentos padrão */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
  cursor: default;
  
	color: var(--cor-texto-secundario);
}

/* Estilos padrão para o body */
body {
  line-height: 1.5;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
}

/* Removendo decoração de lista */
ul,
ol {
  list-style: none;
}

/* Removendo decoração de link padrão */
a {
  text-decoration: none;
  color: inherit;
}

/* Removendo decoração de botões */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* Removendo decoração de input */
input,
textarea,
select,
button {
  font-family: inherit;
  font-size: inherit;
}

/* Estilos para imagens responsivas */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Removendo estilos padrão de elementos embutidos */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Removendo a aparência padrão do input */
input,
button,
textarea,
select {
  outline: none;
  appearance: none;
}

/* Removendo estilo de foco padrão */
:focus {
  outline: none;
}

/* Estilo para elementos ocultos */
[hidden] {
  display: none !important;
}

/* Estilo para cores padronizadas */
:root {
    --laranja:#FF7800;
    --cor-primaria: #333;
    --cor-secundaria: #fff;
    --cor-destaque: #ff5733;
    --cor-texto: #333;
    --cor-texto-secundario: #7A7A7A;
    --cor-fundo: #fff;
    --cor-fundo-secundario: #f2f2f2;
    --cor-borda: #ccc;

}


.top-bar {
    background-color: var(--cor-primaria);
    color: #fff;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10px 20px;
	height: 100%;

}
.flex {
	display: flex;
	align-items: center;
	gap: 10px;
    justify-content: space-between;
}
.btn-primario {
	display: block;
	background-color: var(--laranja);
    color: var(--cor-secundaria);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
.btn-primario:hover {
    background-color: var(--cor-destaque);
}

/* Estilo BARRA SUPERIOR */
.address,
.opening-hours {
    display: flex;
    align-items: center;
	font-size: 14px;
}

.address i,
.opening-hours i {
    color: var(--laranja);
	margin-right: 5px;
}

.opening-hours {
    margin-left: 20px;
}

.opening-hours i {
    margin-right: 5px;
}
.social-icons a {
    color: var(--laranja);
    font-size: 24px;
    margin-left: 10px;
}

.social-icons a:hover {
    color: var(--cor-fundo);
}

/* Estilos para a barra do menu */
.menu-bar {
    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
    /*height: 100px;*/
    overflow: hidden;
    z-index: 1000;
}
.menu-bar.fixed {
    position: fixed;
	width: 100%;
    top: -56px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.logo img {
    max-height: 80px; /* Altura máxima do logotipo */
}
.menu-mobile {
	display: none;
	flex-direction: column;
	left: 0;
	width: 100%;
	padding: 20px;
}

.menu-mobile li {
	font-size: 18px;
	border-bottom: solid 1px var(--cor-borda);
}
.menu-mobile li:last-child {
	border-bottom: none;
}
.menu-mobile li a {
	padding: 10px 0;
	display: block;
}
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    display: inline-block;
    margin-right: 20px;
}

.menu li:last-child {
    margin-right: 0;
}
.menu li:hover a {
    color: var(--laranja);
}

.menu a {
    color: var(--cor-primaria);
    text-decoration: none;
	font-size: 18px;
}

.action-button button {
    background-color: var(--cor-destaque);
    color: var(--cor-secundaria);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.action-button button:hover {
    background-color: #cc4c00; /* Cor escura 10% */
}
.menu-toggle {
    display: none;
    color: var(--cor-primaria);
    font-size: 24px;
    cursor: pointer;
	margin: 10px;
}


header{
	background-image: url(../img/banner.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
	width: 100%;
	height: 500px;
	display: block;
	align-items: center;
}

header .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
header .container h1 {
	width: 60%;
    font-size: 45px;
	font-weight: 500;
    color: var(--cor-secundaria);
    margin-bottom: 20px;
	line-height: 60px;
}

header .container p {
	width: 100%;
    font-size: 27px;
    line-height: 1.5;
    color: var(--cor-secundaria);
    margin-bottom: 20px;
}
header .container a {
	
	border-radius: 8px;
	padding: 10px 20px;
	background-color: var(--cor-primaria);
	color: var(--cor-secundaria);
}
header .container a:hover {
	color: var(--cor-destaque);
}
section {
	padding: 100px 0px;
}

#sobre .text-sobre,
#sobre .img-sobre {
	width: 50%;
}
#sobre .title,
.contato .title {
	text-align: left;
}
.title{
	padding-bottom: 30px;
	text-align: center;
}
.title h2 {
	font-size: 47px;
	font-weight:600;
	color: var(--cor-primaria);
	line-height: 1;
}
.title span {
	font-size: 18px;
	color: var(--cor-texto-secundario);
}
.servicos-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

.servico-card {
	display: flex;
	align-items: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border: solid 1px var(--cor-borda);
}
.servico-card:hover {
	border-color: var(--cor-destaque);
}

.servico-title {
    font-size: 18px;
	width: 100%;
    font-weight: 500;
	text-align: center;
    color: var(--cor-primaria);
}

.contato, .formulario {
	width: 50%;
}
.contato ul {
	padding-bottom: 20px;
}
.contato ul li i {
	font-size: 18px;
	padding-right: 5px;
	color: var(--cor-primaria);
}
.contato .mapa {
	width: 100%;
	height: 250px;
	background-color: var(--cor-fundo-secundario);
}

.contato .mapa iframe {
	width: 100%;
	height: 100%;
}
form {
	width: 100%;
	padding: 0 10px;
}
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: var(--cor-primaria);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #333;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--cor-destaque);
    outline: none;
}
.success-message {
    margin-top: 20px;
    padding: 15px;
    background-color: #4caf50;
    color: white;
    text-align: center;
    border-radius: 4px;
}


.logo-slider {
    width: 85%;
    margin: 0 auto;
}

.logo-slider img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.slick-dots {
	display: none !important;
}
.slick-dotted.slick-slider {
	margin-bottom: 0!important;
}



.divisor {
    width: 100px;
    height: 2px;
    background-color: var(--laranja); /* Cor do separador, você pode mudar conforme necessário */
    margin: 0px auto; /* Centraliza horizontalmente e adiciona margem vertical */
}



/* Estilos para dispositivos móveis */
@media screen and (max-width: 768px) {
	
    .menu {
        display: none;
        
    }
	.address,
	.opening-hours	{
		font-size: 13px;
	}
	.btn-primario {
		display: none;
	}

    .menu-toggle {
        display: block;
    }
	
	.container {
		padding: 20px!important;
	}
	header .container h1 {
		width: 100%;
	}
	#contato .flex {
		flex-wrap: wrap;
		gap: 30px;
	}
	.contato, .formulario {
		width: 100%;
	}
	
	#contato .btn-primario {
		display: block;
	}
}



/* Estilos para dispositivos móveis */
@media screen and (max-width: 570px) {

	.opening-hours {
		display: none;
	}
	.address {
		font-size: 12px;
	}
	header .container {
		text-align: center;
		align-items: center;
	}
	header .container h1 {
		font-size: 40px;
        line-height: 1.3;
	}
	header .container p {
		font-size: 22px;
        line-height: 1.3;
	}
	.title h2 {
		font-size: 30px;
		line-height: 1.3;
	}
	.title span {
		font-size: 18px;
		color: var(--cor-texto-secundario);
	}
	#sobre .flex {
		flex-direction: column;
	}
	#sobre .title {
		text-align: center;
	}
	#sobre .title,
	.contato .title {
		text-align: center;
	}
	#sobre p {
		text-align: justify;
	}
	
	#sobre .text-sobre,
	#sobre .img-sobre {
		width: 100%;
	}
	.servicos-cards {
		gap: 15px;
	}
	.servico-card {
		padding: 10px;
	}
	
    .galeria {
        grid-template-columns: repeat(2, 1fr)!important; /* Força duas colunas em dispositivos móveis */
    }

	.card img {
		width: 100%;
		height: 150px!important; /* Defina a altura fixa desejada */
	}
}

/* Estilos para dispositivos móveis */
@media screen and (max-width: 375px) {

.address{
	display: none;
}
}




#portfolio,
#contato {
	background-color: #F9F9F9;
}
/*footer {
	min-height: 200px;
	border-top: solid 2px var(--cor-borda);
	padding-top: 30px
}*/
footer .rdp {
	background-color: var(--cor-primaria);
	bottom: 0;
	width: 100%;
	display: block;
	padding: 20px;
    text-align: center;
}



/* Estilos para a galeria */
        .galeria {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
        }

        .card {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            transition: transform 0.2s;
        }

        .card img {
            width: 100%;
            height: 250px; /* Defina a altura fixa desejada */
            object-fit: cover; /* Faz com que a imagem se comporte como background cover */
            cursor: pointer;
            border-radius: 8px;
        }

        .card:hover {
            transform: scale(1.05);
			background-color: var(--laranja);
			border-color: var(--laranja);
        }

        .card:hover p {
			color: #fff;
		}

        .card p {
            text-align: center;
            margin-top: 10px;
            font-size: 14px;
        }





.slick-prev {
	left: -40px;
}
.slick-next {
	right: -23px;
}
.slick-prev, .slick-next {
    z-index: 1!important;
    color: var(--cor-destaque);
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 36px;
    line-height: 1;
    opacity: 1;
    color: var(--cor-laranja);
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    color: var(--cor-laranja)!important;
    outline: none;
    background: transparent;
}



	
.sl-overlay {
	background-color: rgba(0, 0, 0, 1);
}
.sl-wrapper .sl-counter,
.sl-wrapper .sl-close,
.sl-navigation button {
	color: white!important;
} 



/* Estilo para a mensagem de sucesso */
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* Estilo para a mensagem de erro */
.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* Estilo adicional para o texto dos alertas */
.alert strong {
    font-weight: bold;
}

#foto {
	  position: relative; /* Garante que o conteúdo da section fique dentro dela */
  height: 500px; /* Defina a altura conforme necessário */
  background-image: url('../img/bg-rqs.webp'); /* Substitua 'caminho_para_sua_imagem.jpg' pelo caminho da sua imagem */
  background-size: cover;
  background-position: center 120px;
  background-attachment: fixed;
}
#foto::before {
  content: ""; /* Cria um elemento pseudo-elemento para o overlay */
  position: absolute; /* Posição absoluta em relação ao elemento pai (.background-section) */
  top: 0;
  left: 0;
  width: 100%; /* Cobrir toda a largura */
  height: 100%; /* Cobrir toda a altura */
  background-color: rgba(255, 120, 0, 0.5); /* Cor laranja com transparência (RGBA) */
}

/* Estilos para dispositivos móveis */
@media screen and (max-width: 1024px) {

	#foto {
		background-size: contain;
		height: 490px; /* Defina a altura conforme necessário */
		background-position: center 90px;
	}
}
@media screen and (max-width: 768px) {

	#foto {
	  height: 400px; /* Defina a altura conforme necessário */
	}
}
@media screen and (max-width: 425px) {

	#foto {
	  height: 200px; /* Defina a altura conforme necessário */
	}
}