@charset "UTF-8";

/* Variáveis */
:root {
	--cor1: #001f40;
	--cor2: #002e5f;
    --cor3: #00aeef;
    --cor4: #01264e;

    --cor5: #0092c9;
    --cor6: #074c95;
}

/* Base */
body {font-family: 'Montserrat', sans-serif; overflow-x: hidden; width: 100vw;}
@media (max-width: 1024px){main {width: 100vw; overflow-x: hidden;}}

/* Header */
.header__util {background: var(--cor1);}
.header {background: var(--cor2);position: sticky; top: 0; z-index: 1000; color: #fff;}

/* Navegação */
@media (max-width: 500px) {.navbar-brand img {height: 47px}}
.navbar-nav {--bs-nav-link-padding-y: 0rem;}

@media (min-width: 1200px) {
    .header {top: -34px}
    .header .nav-link {font-size: 1.05rem; line-height: 2; font-weight: 400; color: #fff; position: relative; margin: 0 10px;}

    .nav-link:focus, 
    .nav-link:hover,
    .navbar-nav .nav-link.active, 
    .navbar-nav .nav-link.show,
    .nav-item:hover .nav-link {color: #fff;}

    .navbar-nav .nav-link.active:before,
    .header .nav-link:hover:before {content: ""; position: absolute; background: var(--cor3); height: 2px; left: 8px; right: 8px; bottom: 0;}

    .navbar-nav .dropdown-menu {background: var(--cor1);}
    .navbar-nav .nav-item:hover .dropdown-menu {display: block;} 
    .navbar-nav .dropdown-item {color: var(--cor4);}
    .navbar-nav .dropdown-item:hover {background: var(--cor3); color: var(--cor4);}
}

@media (max-width: 1199px) {
    .header .nav-link,
    .navbar-nav .dropdown-item {padding: 6px 0; border-bottom: 1px solid #eee;}
    .navbar-nav .dropdown-menu {border: 0;}
    .navbar-nav .nav-link {font-size: 1.1rem}
}

/* Theme */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1278px;
    }
}

@media (max-width: 768px) {
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 3.5rem;
    }
}

.gx-6 {--bs-gutter-x: 6rem;}
.fs-7 {font-size: 2rem;}
@media (min-width: 1199px) {.fs-7 {font-size: 3.5rem;}}
.form-control,.form-check .form-check-input {--bs-border-color: #868789;}

/* Home */
.sobre,
.ambiental {background: var(--cor2);}
@media (min-width: 1024px) {
    .sobre {background: url(../images/bg1.webp) no-repeat 50% 0 / cover;}
    .ambiental {background: url(../images/bg2.webp) no-repeat 50% 0 / cover;}
}

/* Swiper */
.swiper-button-prev:after {content: "" !important;}
.swiper-button-next:after {content: "" !important;}
.swiper-button-next, .swiper-button-prev {width: 44px !important;}
.swiper1 .swiper-button-prev1 {left: 10%;}
.swiper1 .swiper-button-next1 {right: 10%;}
@media (max-width: 1024px) {
    .swiper1 .swiper-button-prev1,
    .swiper1 .swiper-button-next1 {bottom: 20px; top: auto;}
}

/* Footer */
.footer {background: var(--cor2);}
.footer__copy {background: var(--cor4);}

/* Botão Flutuante */
#whatsapp-float {position: fixed; bottom: 20px; right: 20px; background-color: #25d366; border-radius: 50%; cursor: pointer; z-index: 999; display: flex; align-items: center; justify-content: center;  height: 70px;  width: 70px;}
.notification-badge {position: absolute; top: 5px; right: 5px; background-color: red; color: white; font-size: 12px; border-radius: 50%; height: 16px; width: 16px; display: flex; align-items: center; justify-content: center;}

/* Janela de Chat */
#whatsapp-chat {position: fixed; bottom: 80px; right: 20px; width: 320px; background: white; border: 1px solid #fff; border-radius: 8px; display: none; flex-direction: column; z-index: 1000; box-shadow: 0 0 10px rgba(0,0,0,0.2); overflow: hidden;}
.chat-header {background: #00a884; color: white; padding: 10px; font-weight: bold; border-radius: 8px 8px 0 0;}
.chat-body {padding: 10px; background: #f0ebe3;}
.chat-body p {border-radius: 0 5px 5px 5px;}
#chat-message {width: 100%; height: 60px; margin-top: 10px; margin-bottom: 5px;}


/* Topos */
.topo {height: 150px; position: relative; overflow: hidden;}
.topo--1 {background: url(../images/topo-1.webp) no-repeat 50% 0 / cover;}
.topo--2 {background: url(../images/topo-2.webp) no-repeat 50% 0 / cover;}
.topo--3 {background: url(../images/topo-3.webp) no-repeat 50% 0 / cover;}
.topo--4 {background: url(../images/topo-4.webp) no-repeat 50% 0 / cover;}
@media (min-width: 992px) {.topo {height: 315px;}}
.topo:before {content: ""; position: absolute; top: 0; bottom: 0; right: -62px; width: 30%; background: url(../images/bg-topo.webp) no-repeat 0 bottom;}

/* Configuração basica internas */
.main-header {background: linear-gradient(to right, var(--cor5), var(--cor3)); color: #fff; position: relative; margin-bottom: 50px; }
.main-header:before {content: ""; position: absolute; left: 0; bottom: -6px; right: 0; height: 2px; background: linear-gradient(to right, var(--cor5), var(--cor3));}
.main-header:after {content: ""; position: absolute; top: 0; bottom: -8px; right: -32px; width: 30%; background: #fff; transform: skewX(-40deg);}


/* Utilitários */
.bg1 {background: var(--cor1);}
.bg2 {background: var(--cor2);}
.cor1 {color: var(--cor1);}
.cor2 {color: var(--cor2);}
.cor3 {color: var(--cor3);}
.shadow-1 {box-shadow: 5px 10px 15px rgba(0, 0, 0, .4);}
.filter-inverted {filter: brightness(0) invert(1);}