:root {
    --color-1: #161e49;
    --color-1-dark-30: color-mix(in srgb, var(--color-1) 70%, black 30%);
    --color-2: #d1aa67;
    --color-3: #06194b;
    --color-4: #10173c;
    --color-5: #aa8747;

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

body {font-family: "Poppins", sans-serif; font-weight: 400;}
main {overflow-x: hidden;}

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


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

.color-1 {color: var(--color-1);}
.color-2 {color: var(--color-2);}
.color-3 {color: var(--color-3);}
.color-4 {color: var(--color-4);}
.color-5 {color: 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-5 {fill: var(--color-5);}
.fill-white {fill: white;}

.hero-overlay {  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)
  );}
.svg-shadow {filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.6));}


.btn-color1 {
    --bs-btn-bg: var(--color-1);
    --bs-btn-border-color: var(--color-1);
    --bs-btn-color: white;
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: color-mix(in srgb, white 10%, var(--color-1) 90%);
    --bs-btn-hover-border-color: color-mix(in srgb, white 10%, var(--color-1) 90%);
    --bs-btn-active-bg: color-mix(in srgb, white 10%, var(--color-1) 90%);
    --bs-btn-active-border-color: color-mix(in srgb, white 10%, var(--color-1) 90%);
}

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

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

.btn-color2 {
    --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%);
    --bs-btn-active-bg: color-mix(in srgb, black 30%, var(--color-2) 70%);
    --bs-btn-active-border-color: color-mix(in srgb, black 30%, var(--color-2) 70%);
}

.btn-outline-light {fill: currentColor;}

.btn-icone {height: var(--bs-btn-size); width: var(--bs-btn-size);}
.z-100 {z-index: 100;}
.filter-inverted {filter: brightness(0) invert(1);}
.big-size {font-size: 5rem;}

.bg-gradient-top {background: linear-gradient(to bottom,  rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 75%, transparent);}

.rotate-on-hover {display: inline-block; transition: transform 0.4s ease;transform-origin: center center;}
.rotate-on-hover:hover {transform: rotate(180deg);}

article:has(.hover-shadow) {transition: all .5s;}
article:hover:has(.hover-shadow) {box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);}

.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 */
.header:before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transition: background-color .5s ease;}
.header.scrolled:before {background-color: color-mix(in srgb, black 20%, var(--color-1) 80%);}

.header .border-white {transition:  all .5s ease;}
.header.scrolled .border-white {border-color: var(--color-1) !important;}

.nav-link {font-weight: 400;  font-size: 1.2rem;}

@media (min-width: 1200px) {
    .nav-link {font-size: .9rem;}
    .nav-link, .nav-link:focus, .nav-link:hover, .nav-link.active {color: #fff !important; position: relative;}

    .navbar .nav-link::before {content: ""; position: absolute; left: 8px; bottom: 0px; width: 0; height: 1px; background: linear-gradient(to right, transparent, var(--color-2), transparent); transition: width 0.3s ease;}
    .navbar .nav-link.active, .navbar .nav-link:hover {color: var(--color-1); fill: var(--color-1);}
    .navbar .nav-link:hover::before,
    .navbar .nav-link.active::before {width: calc(100% - 16px);}
    
}

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

.swiper-button-next, .swiper-button-prev {color: #fff !important; height: 34px !important; width: 34px !important; border-radius: 50%; /*border: 1px solid #fff;*/}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 21px !important;}
.swiper-pagination-bullet {background-color: var(--color-1) !important;}
.swiper-pagination-bullet-active {background-color: var(--color-1) !important;}

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

.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:var(--color-2);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;}}
.card-politica {width: 250px;} @media (min-width: 780px) {.card-politica {width: 300px;}}

.mySwiper2 .swiper{
    overflow: visible;
    perspective:1200px;

}

.mySwiper2 .swiper-slide{
    transition:transform .45s;

}

.mySwiper2 .card-slide{

    transition:
        transform .45s ease,
        opacity .45s ease,
        filter .45s ease;

    transform-style:preserve-3d;

    border-radius:24px;

    /* box-shadow:
        0 30px 70px rgba(0,0,0,.18); */

    backface-visibility:hidden;

}

.mySwiper2 .swiper-slide h3 {opacity: 0; transition: opacity .5;}

.mySwiper2 .swiper-slide.swiper-slide-active h3 {opacity: 1;}

/* Bg Banner Contato */
.bg-image-1 {background: url(../img/bg-image-1.webp) no-repeat 50% 0 / cover;}
@media (max-width: 1000px) {.bg-image-1 {background: #fff;}}

/* Bg Form Contato */
.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-1);}}

/* Bg Rodape */
.bg-image-4 {background: url(../img/bg-image-4.webp) no-repeat 50% 0 / cover;}
@media (max-width: 768px) {.bg-image-4 {background: var(--color-1);}}

/* Topos */
.main-title {padding: 25px 0px 5px; margin-bottom: 45px; color: var(--color-1); position: relative;}
.main-title h2 {position: relative; font-weight: bold; margin-bottom: 0;}
.main-title h2:before {content: ""; background: var(--color-2); border-radius: 6px; position: absolute; left: 0; bottom: -10px; right: 40%; height: 2px;}
.main-title h2:after {content: ""; background: var(--color-2); border-radius: 6px; position: absolute; left: 0; bottom: -12px; right: 30%; height: 1px;}
@media (min-width: 768px) {.main-title:before {right: 40%;}}

@media (min-width: 1200px) {
  .main-title:before {right: 60%;}
  .main-title { padding: 30px 0px 0px; margin-bottom: 55px;} 
  /* .main-title h2 {font-size: calc(2.5rem * 0.7);}  */

}

/* Banner Footer */
.banner-footer {position: relative;}
.banner-footer:before {content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0;background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%); 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);}

.arrow-down {animation: moveUpDown 1.5s ease-in-out infinite;}
@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Animação Paises Mapa */
.tv-rotator {
  height: 60px;
  width: 200px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--color-2);
  display: flex;
  align-items: center;
  justify-content: center;

}

.viewport {
  position: relative;
  height: 60px;
  width: 100%;
}

.item {
  position: absolute;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition:
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 450ms ease;
}

.item.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.item.exit-up {
  opacity: 0;
  transform: translateY(-25px) scale(1.02);
}
/* Animação Paises Mapa */

/* Animação Cidades Mapa*/
.breaking-news {
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 50px;
}

.ticker {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 60s linear infinite;
}

.ticker-content {
  white-space: nowrap;
  padding-right: 0px; /* espaço entre repetições */
  font-size: 18px;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
/* Animação Cidades Mapa */