/* CSS para o site Extintécnica Extintores */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #333;
    line-height: 1.6;
}

header {
    background-color: #ffff;
    color: white;
    padding: 20px 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

header nav ul {
    list-style: none;
    display: flex
;
    gap: 111px;
    padding: 0;
    margin: 0;
}
.portfolio .box:hover .content {
    padding: 3%;
}
header nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.btn:hover {
    background-color: #3e4095 !important;
}

.hero {
    background: url(../images/banner.jpg) no-repeat center center / cover;
    height: 90vh;
    background-size: 92% 101%;
    display: flex
;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 19px;
}

.textobanner.col-md-6 {
    float: right;
    margin-top: 15%;
}

.textobanner {
    background: #00000070;
    padding: 1%;
    border-radius: 17px;
    border: solid #3e4095 1px;
    margin-right: 4%;
}

.hero h1 {
    text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px #d13337;
    font-size: 2.3rem;
    margin-bottom: 10px;
    color: #d13337;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

p.txtban {
    font-size: 1.2rem;
    text-align: justify;
    margin: 0;
}

.imgquemsomos img {
    width: 87%;
    padding: 5px;
    background: #3e4095;
    border-radius: 34px;
}

p.titulobanner {
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #d13d4f;
    text-align: center;
    margin-bottom: 20px;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black, 1px -1px 2px black, -1px 1px 2px #d13337;
}

.inspccert img {
    width: 100%;
}

section.inspecao-content.col-md-12 {
    display: flex;
    flex-wrap: wrap;
}

section.inspecao-content.col-md-12 {
    display: flex;
    padding: 0 3%;
    flex-wrap: wrap;
}

.inspentxt.col-md-9 {
    margin-top: 2%;
}

.avcb p {
    background: #eeeeee;
    padding: 2%;
    border-radius: 11px;
}

.avcb h3,
.clcb h3 {
    color: #3e4095;
}

.avcb p,
.clcb p {
    background: #eeeeee;
    padding: 2%;
    font-size: 20px;
    color: #b20f0f;
    border-radius: 11px;
    text-align: justify;
}

.hero .btn {
    background-color: #E74C3C;
    color: white;
    padding: 10px 20px;
    float: right;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

section#quem-somos {
    margin: 1% 0;
}

h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #5B2C6F;
}

.equipamentos-list,
.servicos-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.equipamento,
.servico {
    flex: 1 1 calc(20% - 20px);
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.equipamento img,
.servico img {
    width: 100px;
    margin-bottom: 10px;
}

.equipamento:hover,
.servico:hover {
    transform: scale(1.05);
}

footer {
    color: white;
    padding: 20px 0;
}

footer a {
    color: #E74C3C;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}

/* TOPO */
.logo img {
    width: 80%;
}

nav.menu a {
    color: #d13337;
    font-size: 19px;
}

section#quem-somos {
    display: flex;
    justify-content: center;
}

.txtquemsomos {
    background: #3e4095;
    height: fit-content;
    border-radius: 5% 0% 0% 5%;
    padding: 8%;
}

.txtquemsomos h2, .txtquemsomos p {
    color: white;
    text-align: justify;
}

.areaquemsomos.col-md-4 {
    display: flex;
    align-items: center;
}

.txtquemsomos h2 {
    padding-bottom: 7%;
    font-size: 2.5rem;
    font-weight: 700;
}

.imgequip img {
    width: auto;
    height: 171px;
    padding: 8%;
}

.equipamentos-list {
    background: #3e4095;
    padding: 0 12%;
}

.imgequip {
    background: white;
    border-radius: 243px;
}

.equipamento p {
    color: white;
    font-size: 1.3rem;
    font-weight: 500;
}

.tituloequipamento {
    color: #d13337;
    text-align: center;
}

.insp.container-fluid {
    margin: 0;
    padding: 0;
}

.imginspc img {
    width: 100%;
}

/* Seção portfolio */
.portfolio {
    padding: 2rem 0;
    text-align: center;
}

.portfolio .heading {
    font-size: 2.8rem;
    margin-bottom: 2rem;
    color: #d13337;
    font-weight: 700;
}

/* Ajustes do slider */
.portfolio .slick-slider {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 47px;
}

.portfolio .slick-slide {
    display: flex;
    justify-content: center;
}

/* Box de cada slide */
.portfolio .box {
    width: 100%;
    max-width: 27rem;
    height: 29rem;
    border-radius: .5rem;
    overflow: hidden;
    position: relative;
    box-shadow: var(--box-shadow);
    background: var(--light-color);
    margin: 0 10px;
    text-align: center;
}

.portfolio .box img {
    height: 87%;
    width: 100%;
    transition: transform 0.3s ease;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.portfolio .box:hover img {
    transform: scale(1.1);
}

/* Texto no canto superior direito */
.portfolio .box span {
    position: absolute;
    top: 75%;
    right: 0rem;
    height: 124px;
    align-content: center;
    font-weight: bold;
    font-size: 1.5rem;
    color: #d13337;
    background: rgb(238 238 238);
    padding: 0.5rem 1rem;
    border-radius: 0.3rem;
}

/* Conteúdo interno */
.portfolio .box .content {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 6rem;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
}

.portfolio .box .content h3 {
    font-size: 1.5rem;
    color: var(--black);
}

.portfolio .box .content p {
    font-size: 1.2rem;
    color: var(--light-color);
    text-align: center;
}

/* Efeitos hover */
.portfolio .box:hover .content {
    top: 0;
    background: #ffffffa6;
    color: #c70b11;
    opacity: 1;
}

.portfolio .box::before {
    height: 100%;
    width: 100%;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    clip-path: circle(0%);
    transition: clip-path 0.3s ease;
}

.portfolio .box:hover::before {
    clip-path: circle(100%);
}

/* Customização do Slick Slider */
.slick-prev, .slick-next {
    color: var(--black);
    font-size: 2rem;
    z-index: 1;
}

.slick-prev::before, .slick-next::before {
    color: var(--black);
    font-size: 2rem;
}

.slick-dots li button:before {
    color: var(--black);
    font-size: 1rem;
}

.slick-dots li.slick-active button:before {
    color: var(--primary-color);
}

/* footer */

footer#contato2 {
    display: flex
;
    flex-wrap: wrap;
}
iframe {
    width: 100%;
    padding-right: 3%;
}
.contato {
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #b71c1c;
    font-weight: 600;
}

.contato div {
    display: flex;
    align-items: center;
}

.contato div i {
    font-size: 20px;
    color: #1a237e; /* Azul */
    margin-right: 10px;
}

.contato a {
    text-decoration: none;
    color: #b71c1c;
}

.contato a:hover {
    text-decoration: underline;
}
.informacoes h2 {
    color: #3e4095;
    font-weight: 700;
    padding-bottom: 3%;
}
.informacoes {
    padding-left: 9%;
}
section.direitosreservados {
    text-align: center;
    border-top: 1px solid #3e4095;
    padding: 1%;
}
section.direitosreservados h2 {
    font-size: 17px;
    color: #3e4095;
}
/* Resetando margens e paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Fonte e estilo do body */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    overflow-x: hidden;
}

/* Estilo para o título principal */
h1 {
    font-size: 2.5em;
    text-align: center;
    margin-top: 50px;
    color: #333;
    transition: transform 0.3s ease-in-out;
}

h1:hover {
    transform: scale(1.1);
}

/* Efeito de fade nas seções */
section {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out;
    margin: 20px;
    transform: translateY(30px); /* Inicialmente um pouco abaixo */
}

/* Efeito de animação de fade ao entrar na tela */
section.visible {
    opacity: 1;
    transform: translateY(0); /* Movimento para o topo */
}

/* Estilo para botões */
button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s, transform 0.3s ease;
    border-radius: 5px;
}

button:hover {
    background-color: #45a049;
    transform: scale(1.05);
}

/* Estilo de imagens */
img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    animation: slideIn 1s ease-out;
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Efeito de transição para links */
a {
    text-decoration: none;
    color: #1c1c1c;
    transition: color 0.3s ease-in-out;
}

a:hover {
    color: #4CAF50;
}

/* Animação de rolagem suave */
html {
    scroll-behavior: smooth;
}

/* Seções com efeitos */
.section {
    padding: 60px;
    text-align: center;
    background-color: #fff;
    margin-bottom: 30px;
    border-radius: 10px;
}

/* Adicionando sombra nos elementos */
.section:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Adicionando animação nos títulos de cada seção */
h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #333;
}
/* Estilo para o botão do WhatsApp fixo */
#whatsapp-btn {
    position: fixed;
    bottom: 19px;
    right: 20px;
    background-color: #25d366;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efeito de hover no botão do WhatsApp */
#whatsapp-btn:hover {
    background-color: #128c7e;
    transform: scale(1.1);
}

/* Estilo para o botão voltar ao topo */
#back-to-top {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: white;
    color: #3e4095;
    border: none;
    padding: 0px 15px;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efeito de hover no botão voltar ao topo */
#back-to-top:hover {
    background-color: #3e4095;
    transform: scale(1.1);
    color: white;
}
.portfolio .box:hover img {
    height: 100%;
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .informacoes {
        padding-left: 0;
    }
    .mapa.col-md-7 {
        width: 100%;
    }
    #whatsapp-btn {
        bottom: 15px;
        right: 15px;
        padding: 12px; 
        font-size: 20px;
    }

    #back-to-top {
        bottom: 15px;
        left: 15px;
        padding: 12px;
        font-size: 20px; 
    }
    nav.menu {
    display: none;
    }
    .hero {
    background: url(../images/banner.jpg) no-repeat center center / cover;
    height: 54vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 0;
    }
    .hero h1 {
    font-size: 2rem;
    }
    p.titulobanner {
    font-size: 1rem;
    }
    p.txtban {
    font-size: 1rem;
    text-align: justify;
    margin: 0;
    }
    section#quem-somos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    }
    .imgquemsomos img {
    width: 100%;
    margin-top: 2%;
    padding: 5px;
    background: #3e4095;
    border-radius: 34px;
    }
    .equipamentos-list, .servicos-list {
    flex-direction: column;
    }
    .portfolio .slick-slider {
    display: flex
;
    justify-content: center;
    gap: 20px;
    padding: 0px 0px;
}
.portfolio .box .content p {
    font-size: 1rem;
    color: var(--light-color);
    text-align: center;
}
.informacoes.col-md-5 {
    padding: 2%;
}
.textobanner.col-md-6 {
    float: right;
    margin-top: 0;
}
}
/* Estilo básico das setas */
.slick-prev, .slick-next {
    font-size: 20px; /* Tamanho da seta */
    color: white; /* Cor da seta */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
    border-radius: 50%; /* Tornar as setas circulares */
    padding: 10px;
    z-index: 1; /* Garante que as setas fiquem acima do conteúdo */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Seta da esquerda (prev) */
.slick-prev {
    left: 10px; /* Distância da esquerda */
}

/* Seta da direita (next) */
.slick-next {
    right: 10px; /* Distância da direita */
}

/* Efeito de hover nas setas */
.slick-prev:hover, .slick-next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Muda a cor de fundo quando passar o mouse */
    transform: scale(1.1); /* Aumenta um pouco o tamanho ao passar o mouse */
}

/* Adicionando as setas com CSS usando triângulos */
.slick-prev::before, .slick-next::before {
    content: ""; /* Remove qualquer conteúdo padrão */
    display: block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent; /* Triângulo para a seta */
    border-right: 5px solid transparent; /* Triângulo para a seta */
    border-top: 10px solid white; /* Cor da seta */
}

/* Seta da direita (next) - Ajusta a direção */
.slick-next::before {
    border-top: none; /* Remove a seta para cima */
    border-bottom: 10px solid white; /* Cria a seta para baixo */
}

/* Responsividade para dispositivos móveis */
@media (max-width: 768px) {
    .slick-prev, .slick-next {
        font-size: 16px; /* Ajusta o tamanho das setas para telas menores */
        padding: 8px;
    }
}
.slick-next:before, .slick-prev:before {
    color: #3e4095 !important;
    font-size: 32px !important;
}
.slick-prev {
    left: -12px !important;
}
.slick-next {
    right: 0 !important;
}