:root {
    --color-1: #720a25;
    --color-1-light-30: color-mix(in srgb, var(--color-1) 80%, white 20%);
    --color-1-dark-30: color-mix(in srgb, var(--color-1) 70%, black 30%);
    --color-2: #cb0e0e;
    --color-3: #ebebeb;

    /* --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: "Poppins", sans-serif; font-weight: 400;}

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

.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-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: white;
    --bs-btn-color: white;
    --bs-btn-hover-bg: color-mix(in srgb, black 30%, var(--color-1) 70%);
    --bs-btn-hover-border-color: white;
    border-radius: 0px;
}

.btn-secondary {
    --bs-btn-bg: var(--color-1);
    --bs-btn-border-color: var(--color-1);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --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%);
    font-weight: 500;
}

.btn-outline-secondary {
    --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-1) 70%);
    --bs-btn-hover-border-color: var(--color-1);
    border-radius: 0px;
}


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

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

.header {background: var(--color-1); position: relative;}
.header:before {content: ""; background: #fff; transform: skewX(160deg); position: absolute; top: 0; bottom: -20px; width: 100vw; left: -35%; }

@media (min-width: 0px) {.header:before {left: -46%;}}
@media (min-width: 321px) {.header:before {left: -40%;}}
@media (min-width: 424px) {.header:before {left: -36%;}}
@media (min-width: 768px) {.header:before {left: -50%;}}
@media (min-width: 1200px) {.header:before {left: -68%;}}
@media (min-width: 1400px) {.header:before {left: -64%;}}
@media (min-width: 1800px) {.header:before {left: -62%;}}
@media (min-width: 2000px) {.header:before {left: -60%;}}
@media (min-width: 2400px) {.header:before {left: -58%;}}
@media (min-width: 3000px) {.header:before {left: -57%;}}
@media (min-width: 3400px) {.header:before {left: -56%;}}

/* Navegação */
.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) {
    .nav-link {color: #fff; font-size: 1rem; font-weight: 400; display: block; position: relative; border: 0px;}
    .nav-link.active, .nav-link:focus, .nav-link:hover, .nav-item:hover .nav-link { color: #fff !important; border-radius: 5px 5px 0 0;}
    .nav-link.active:before, .nav-link:focus:before, .nav-link:hover:before, .nav-item:hover .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: 1400px) and (max-width: 1400px) {.nav-link {font-size: 0.9rem; padding: 15px 8px !important;}}

@media (max-width: 1400px) {.navbar-brand img {max-height: 66px;}}
@media (max-width: 768px) {.navbar-brand img {max-height: 56px;}}
@media (max-width: 425px) {.navbar-brand img {max-height: 44px;}}
@media (max-width: 400px) {.navbar-brand img {max-height: 40px;}}
@media (max-width: 320px) {.navbar-brand img {max-height: 30px;}}

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


/* Banners */
.bg-color-1 {background: linear-gradient(118deg, var(--color-3) 0%, var(--color-3) 55.9%, var(--color-1) 56%, var(--color-1) 100%);}
@media (max-width: 1200px) {.bg-color-1 {background: var(--color-3);}}

.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-1-dark-30);}}


/* Internas */

.bottom-1 {background: url(../img/bg-banner-rodape-1.webp) no-repeat 50% 0;}
.bottom-2 {background: url(../img/bg-banner-rodape-2.webp) no-repeat 50% 0;}
.bottom-3 {background: url(../img/bg-banner-rodape-3.webp) no-repeat 50% 0;}
.bottom {height: 430px;}


.main-title {background: linear-gradient(to right, #e5e5e5, #b6b6b6); padding: 50px 0px 15px; margin-bottom: 45px; position: relative;}
.main-title .container {position: relative; z-index: 3;}
@media (min-width: 1200px) {.main-title { padding: 50px 0px 15px; margin-bottom: 55px;} }
.main-title h2 {margin-bottom: 0; font-weight: bold; text-transform: uppercase; color: #000;}
.main-title:before {content: ""; position: absolute; left: 0; bottom: -5px; right: 0; height: 2px; background: var(--color-1);}
.main-title:after {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: url(../img/bg-titulo.webp) no-repeat center center; z-index: 0;}

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