:root {
    --color-1: #ca8781;
    --color-1-light-30: color-mix(in srgb, var(--color-1) 80%, white 20%);
    --color-1-dark-10: color-mix(in srgb, var(--color-1) 90%, black 10%);
    --color-1-dark-20: color-mix(in srgb, var(--color-1) 80%, black 20%);
    --color-1-dark-30: color-mix(in srgb, var(--color-1) 70%, black 30%);
    --color-2: #ea6665;
    --color-3: #77895b;
    --color-3-dark-10: color-mix(in srgb, var(--color-3) 90%, black 10%);
    --color-3-light-30: color-mix(in srgb, var(--color-3) 80%, white 20%);
    --color-4: #7e8c6b;

    /* --color-4: #001024;  
    --color-5: #edd75b;
    --color-6: #d58836;
    --color-7: #d3d7eb; */

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

body { font-family: "Rubik", sans-serif; font-weight: 400;}
h1, h2, h3, h4, h5, h6 {font-family: "Zilla Slab", serif;}

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

.position-sticky-mobile {position: sticky; top: 0; z-index: 1020;}
@media (min-width: 992px) { .position-sticky-mobile { position: static; }}


.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-10 {background: var(--color-1-dark-10);}
.bg-1-dark-20 {background: var(--color-1-dark-20);}
.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-10 {background: var(--color-3-dark-10);}
.bg-4 {background: var(--color-4);}
.bg-4-dark-20 {background: var(--color-4-dark-20);}

.bg-7 {background: var(--color-7);}


.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;}

.btn-secondary {
    --bs-btn-bg: var(--color-3);
    --bs-btn-border-color: var(--color-3);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --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-outline-secondary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--color-3) ;
    --bs-btn-color: var(--color-3) ;
    --bs-btn-hover-bg: color-mix(in srgb, black 30%, var(--color-3) 70%);
    --bs-btn-hover-border-color: var(--color-3) ;
}

.btn-primary {
    --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%);
}

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

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

.btn-secondary-2 {
    --bs-btn-bg: var(--color-2);
    --bs-btn-border-color: var(--color-2);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --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-warning {
    background: linear-gradient(to bottom, var(--color-2), var(--color-6) );
}

.form-control,
.form-check-input {border: var(--bs-border-width) solid #afafaf;}

.btn-icon {height: var(--bs-btn-size); width: var(--bs-btn-size);}
.btn-icon-small {height: var(--bs-btn-size-small); width: var(--bs-btn-size-small);}
.z-100 {z-index: 100;}
.mw-75 {max-width: 75%;}
.mh-75 {max-height: 75%;}
.filter-invert {filter: brightness(0) invert(1);}

.position-arrow {position: absolute; top: 50%; transform: translateY(-50%);}
@media (max-width: 768px) {.position-arrow {top: auto !important; bottom: 30px; transform: none;}}

#privacy-policy {z-index: 1000;}
.card-politica {width: 250px;} @media (min-width: 780px) {.card-politica {width: 300px;}}

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

.page-item:first-child .page-link,
.page-item:last-child .page-link {border-radius: 0;}

/* Navegação */
.navbar .nav-link {font-weight: 500;  font-size: 1.2rem; text-transform: uppercase; border-bottom: 1px solid #eee;}
.nav-item .dropdown-menu {display: block; border-width: 0;}
.nav-item .dropdown-item {border-bottom: 1px solid #eee;}

@media (min-width: 1200px) {
    .navbar .nav-link {color: #fff; font-size: 1rem; font-weight: 400; display: block; position: relative; border: 0px;}
    .navbar .nav-link.active, .navbar .nav-link:focus, .navbar .nav-link:hover, .nav-item:hover .navbar .nav-link { color: #fff !important; border-radius: 5px 5px 0 0;}
    .navbar .nav-link.active:before, .navbar .nav-link:focus:before, .navbar .nav-link:hover:before, .nav-item:hover .navbar .nav-link:before {content: ""; position: absolute; left: 8px; bottom: 4px; right: 8px; height: 2px; background: #fff;}

    .nav-item .dropdown-menu {display: none; border-width: 1px;}
    .nav-item:hover .dropdown-menu {display: block;}
    .nav-item .dropdown-item {border-bottom: 0;}

    /* .nav-item .dropdown-menu {background: var(--color-1);}
    .nav-item .dropdown-item {color: #fff;} */
    /* .nav-item .dropdown-item:hover {background: color-mix(in srgb, var(--color-1) 50%, black 50%);} */
    .nav-item .dropdown-item:hover,
    .nav-item .dropdown-item:active,
    .nav-item .dropdown-item:focus {background: #fafafa; color: var(--color-2);}
}

@media (min-width: 1200px) and (max-width: 1400px) {.navbar .nav-link {font-size: 0.9rem; padding: 15px 8px !important;}}

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

/* Swiper */
.swiper-button-prev:after, .swiper-button-next:after  {content: none !important;}

.swiper-button-prev, .swiper-button-next  {width: 34px !important;}


/* Banners */
.bg-image-1 {background: url(../img/bg-image-1.webp) no-repeat 50% 0 / cover;}
@media (max-width: 1000px) {.bg-image-1 {background: var(--color-3-dark-10);}} 

.bg-image-2 {background: url(../img/bg-image-2.webp) no-repeat 50% 0 / cover;}
/* @media (max-width: 1000px) {.bg-image-2 {background: var(--color-3);}} */

.bg-image-3 {background: url(../img/bg-image-3.webp) no-repeat 50% 0 / cover;}
@media (max-width: 1000px) {.bg-image-3 {background: var(--color-3-dark-10);}}

/* Internas */
/* Topos */
.topo {height: 200px; background-position: 50% 50%; background-size: cover; position: relative;}
.topo:before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: linear-gradient(to bottom,  rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 50%, transparent);}
.topo--1 {background-image: url(../img/topo-1.webp);}
.topo--2 {background-image: url(../img/topo-2.webp);}
.topo--3 {background-image: url(../img/topo-3.webp);}
.topo--4 {background-image: url(../img/topo-4.webp);}
.topo--5 {background-image: url(../img/topo-5.webp);}
.topo--6 {background-image: url(../img/topo-6.webp);}
.topo--7 {background-image: url(../img/topo-7.webp);}
.topo--8 {background-image: url(../img/topo-8.webp);}
@media (min-width: 1200px) {.topo {height: 240px;}}

.main-title {padding: 20px 0 0; margin-bottom: 35px; position: relative;}
.main-title h2:before {content: ""; position: absolute; left: 0; bottom: 10px; right: 0; height: 1px; background: var(--color-2);} 
.main-title h2:after {content: ""; position: absolute; left: 0; bottom: 4px; right: 60%; height: 4px; background: var(--color-1); border-radius: 5px;} 
.main-title h2 {margin-bottom: 0; color: var(--color-3); font-weight: 600; position: relative; padding-bottom: 20px;}
@media (min-width: 1200px) {.main-title {margin-bottom: 40px;}}

/* 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);}