:root {
    --color-1: #ff3037;
    --color-1-dark-30: color-mix(in srgb, var(--color-1) 70%, black 30%);
    --color-2: #1982c4;
    --color-2-dark-20: color-mix(in srgb, var(--color-2) 80%, black 20%);
    --color-2-dark-30: color-mix(in srgb, var(--color-2) 70%, black 30%);
    --color-3: #8ac926;
    --color-3-dark-20: color-mix(in srgb, var(--color-3) 80%, black 20%);
    --color-4: #ffca3a;  
    --color-4-dark-20: color-mix(in srgb, var(--color-4) 80%, black 20%);  

    --bs-btn-size: 2.3rem;
}

body {font-family: "Montserrat", sans-serif;}

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

.color-1 {color: var(--color-1);}
.color-2 {color: var(--color-2);}
.color-3 {color: var(--color-3);}
.color-4 {color: var(--color-4);}

.bg-1 {background: var(--color-1);}
.bg-1-dark-30 {background: var(--color-1-dark-30);}
.bg-2 {background: var(--color-2);}
.bg-2-dark-20 {background: var(--color-2-dark-20);}
.bg-2-dark-30 {background: var(--color-2-dark-30);}
.bg-3 {background: var(--color-3);}
.bg-3-dark-20 {background: var(--color-3-dark-20);}
.bg-4 {background: var(--color-4);}
.bg-4-dark-20 {background: var(--color-4-dark-20);}

.fill-1 {fill: var(--color-1);}
.fill-2 {fill: var(--color-2);}
.fill-3 {fill: var(--color-3);}
.fill-4 {fill: var(--color-4);}
.fill-white {fill: #fff;}

.brightness-invert {filter: brightness(0) invert(1);}

.btn-success {
    --bs-btn-bg: var(--color-3);
    --bs-btn-border-color: var(--color-3);
    --bs-btn-hover-bg: color-mix(in srgb, black 20%, var(--color-3) 80%);
    --bs-btn-hover-border-color: color-mix(in srgb, black 20%, var(--color-3) 80%);
}

.btn-primary {
    --bs-btn-bg: var(--color-2);
    --bs-btn-border-color: var(--color-2);
    --bs-btn-hover-bg: color-mix(in srgb, black 20%, var(--color-2) 80%);
    --bs-btn-hover-border-color: color-mix(in srgb, black 20%, var(--color-2) 80%);
}

.btn-primary-dark-20 {
    --bs-btn-bg: color-mix(in srgb, black 20%, var(--color-2) 80%);
    --bs-btn-border-color: color-mix(in srgb, black 20%, var(--color-2) 80%);
    --bs-btn-hover-bg: color-mix(in srgb, black 30%, var(--color-2) 70%);
    --bs-btn-hover-border-color: color-mix(in srgb, black 30%, var(--color-2) 70%);
}

.btn-outline-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: white;
    --bs-btn-color: white;
    --bs-btn-hover-bg: color-mix(in srgb, black 30%, var(--color-2) 70%);
    --bs-btn-hover-border-color: white;
}

.btn-danger {
    --bs-btn-bg: var(--color-1);
    --bs-btn-border-color: var(--color-1);
    --bs-btn-hover-bg: color-mix(in srgb, black 20%, var(--color-1) 80%);
    --bs-btn-hover-border-color: color-mix(in srgb, black 20%, var(--color-1) 80%);
}

.border-primary {border-color: var(--color-2) !important;}

.btn-icone {height: var(--bs-btn-size); width: var(--bs-btn-size);}
.z-100 {z-index: 100;}

.pagination {
    --bs-pagination-color: var(--color-2);
    --bs-pagination-border-color: var(--color-2);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--color-2);
    --bs-pagination-hover-border-color: var(--color-2);
    --bs-pagination-focus-color: #fff;
    --bs-pagination-focus-bg: var(--color-2);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--color-2);
    --bs-pagination-active-border-color: var(--color-2);
    --bs-pagination-disabled-color: #aaa;
    --bs-pagination-disabled-bg: var(--color-2);
    --bs-pagination-disabled-border-color: var(--color-2);
}

/* Navegação */
.nav-link {font-weight: 500; text-transform: uppercase; font-size: .9rem; position: relative;}

@media (min-width: 1200px) {
    .navbar-nav .nav-link, .navbar-nav .nav-link.active {color: white;}
    .nav-link:hover:before, .nav-link.active:before {content: ""; position: absolute; height: 2px; border-radius: 2px; background: white; bottom: 4px; left: 8px; right: 8px;}
    .nav-item:hover .dropdown-menu {display: block;}
}

@media (max-width: 768px) {
    .navbar-brand img {max-height: 50px;}
}

/* Top */
.top {height: 100px; background: url(../img/top.webp) no-repeat 50% bottom / cover;}
@media (min-width: 998px) {.top {height: 180px;}}

.main-title {padding: 1.5rem 0 1rem; border-bottom: 4px solid var(--color-3); margin-bottom: 2.7rem;}

/* Banner Rodape */
.bg-image-1 {background: url(../img/bg-image-1.webp) no-repeat 50% 0 / cover;}

@media (min-width: 1000px) {
    .bg-image-footer {min-height: 500px;}
}

@media (max-width: 1000px) {
    .bg-image-footer {background: var(--color-1) !important;}
}


/* animacoes */
.zoom-container {overflow: hidden;}
.zoom-image {object-fit: cover; width: 100%; height: 100%; transition: transform 0.4s ease;}
.zoom-container:hover .zoom-image {transform: scale(1.1);}

.zoom-button,
.zoom-shadow-button {cursor: pointer;transition: transform 0.2s ease;}
.zoom-button:hover {transform: scale(1.1);}
.zoom-shadow-button:hover {transform: scale(1.1);box-shadow: 0 8px 16px rgba(0,0,0,0.2);}