:root {
    --color-1: #0c3f51;
    --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: #017c8e;
    --color-3: #007687;
    --color-4: #56b993;
    --color-5: #c8ecde;

    /* --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-5 {background: var(--color-5);}


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

.btn-warning {
    background: linear-gradient(to bottom, var(--color-2), var(--color-6) );
}


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

/* 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: 1200px) and (max-width: 1400px) {.nav-link {font-size: 0.9rem; padding: 15px 8px !important;}}

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

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

.swiper-button-prev, .swiper-button-next  {width: 34px !important;}
.autoplay-progress{position:absolute;right:16px;bottom:16px;z-index:10;width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-weight:bold;color:#fff}
.autoplay-progress svg{--progress:0;position:absolute;left:0;top:0;z-index:10;width:100%;height:100%;stroke-width:4px;stroke:#fff;fill:none;stroke-dashoffset:calc(125.6px*(1 - var(--progress)));stroke-dasharray:125.6;transform:rotate(-90deg)}
@media (max-width: 768px) {.autoplay-progress {right: 50px;}}

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

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

/* Internas */

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


.main-title {background: url(../img/bg-titulo.webp) no-repeat 20% 0 / cover; padding: 20px 0; margin-bottom: 45px; color: #fff;}
@media (min-width: 1200px) {.main-title { padding: 30px 0px 25px; margin-bottom: 55px;} }
.main-title h2 {margin-bottom: 0; font-weight: bold; text-transform: uppercase;}

.marcas {height: 130px; display: flex; align-items: center; justify-content: center;}
.marcas img {max-width: 90%; max-height: 90%;}

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

.marcash {
    border-radius: 10px;
    background: #fff;
    height: 100px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 25px;
}

 .marcash img{
    display: block;
    margin: 0 auto;
    max-width: 80%;
    max-height: 90%;
    vertical-align: middle;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.image-hover {
    position: relative;
    width: 300px; /* ajuste conforme necessário */
    height: 200px;
    overflow: hidden;
}

.image-hover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

/* imagem hover começa invisível */
.image-hover .img-hover {
    opacity: 0;
}

/* ao passar o mouse */
.image-hover:hover .img-hover {
    opacity: 1;
}

.image-hover:hover .img-normal {
    opacity: 0;
}
.image-hover {
    position: relative;
    width: 100%; 
    height: 175px;
    overflow: hidden;
}

.image-hover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

/* imagem hover começa invisível */
.image-hover .img-hover {
    opacity: 0;
}

/* ao passar o mouse */
.image-hover:hover .img-hover {
    opacity: 1;
}

.image-hover:hover .img-normal {
    opacity: 0;
}