/* =========================
   NAVBAR
========================= */

.navbar {
  background-color: rgb(0, 0, 0) !important;
}

#mainNav {
  background: transparent;
  transition: 0.4s;
  padding: 20px 0;
}

#mainNav.navbar-shrink {
  background: #111 !important;
  padding: 10px 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
}

.nav-link{
  
  transition: 0.3s;
}

.nav-link:hover {
  color: orange !important;
}

.active {
  color: orange !important;
}

.fa-bars{
  color: #ffffff !important;
    border: 2px solid #ffffff; /* Contorno branco */
    border-radius: 6px;        /* Cantos arredondados */
    padding: 10px 20px;
}

/* =========================
   HEADER / LOGO
========================= */

.header {
  background-color: rgb(141, 140, 140);
}

.logo-navbar {
  height: 60px;
  width: auto;
  transition: 0.3s;
}

#mainNav.navbar-shrink .logo-navbar {
  height: 40px;
}

@media (max-width: 991px) {
  .logo-navbar {
    height: 36px;
  }

  #mainNav.navbar-shrink .logo-navbar {
    height: 30px;
  }
}

/* =========================
   HERO / CARROSSEL
========================= */

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.carousel,
.carousel-inner,
.carousel-item {
    height: 100vh;
}

.hero-img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
}

picture {
  display: block;
  width: 100%;
  height: 100%;
}

picture img {
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
    .hero-img {
        object-position: 70% center;
    }
}

/* =========================
   TEXTO DO CARROSSEL
========================= */

.hero-overlay{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    z-index:10;
}

.hero-overlay .container{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    height:100%;
}

.slider-contant{
    width:500px;
    margin-right:50px;
    margin-top:100px;
    color:#fff;
}

.slider-contant h3{
    font-size:50px;
    font-weight:800;
    color:#fff;

    /* Borda/Sombra */
    text-shadow:
        2px 2px 0 rgba(0,0,0,.9),
        4px 4px 12px rgba(0,0,0,.6);
}

.slider-contant h3 span{
    color:#ff9c07;

    text-shadow:
        2px 2px 0 rgba(0,0,0,.9),
        4px 4px 12px rgba(0,0,0,.6);
}

.slider-contant p{
    font-size:18px;
    margin-bottom:40px;
    color:#fff;

    text-shadow:
        1px 1px 0 rgba(0,0,0,.9),
        2px 2px 8px rgba(0,0,0,.7);
}

.slider-contant .btn{
    background:#2b80d9;
    border:none;
    border-radius:8px;
    padding:15px 30px;
    font-size:20px;
    font-weight:500;
    transition:.3s;
}

.slider-contant .btn:hover{
    background:#ee8e10d3;
}

/* =========================
   BOTÕES
========================= */

.btn-warning {
  background-color: rgb(240, 171, 42) !important;
}

.btn-warning:hover {
  background-color: rgb(255, 187, 59);
}

/* =========================
   MISSÃO BAR / TEXTO DINÂMICO
========================= */

.missao-bar {
  background: #0d5ef5;
  color: #fff;
  padding: 12px 0;
}

.missao-bar .container {
  display: block;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
}

#digitando {
  min-width: 420px;
}

.cursor {
  animation: piscar 0.8s infinite;
}

.digitando::after {
  content: "|";
  animation: piscar 0.8s infinite;
  margin-left: 2px;
  color: #fff;
}


/* =========================
   FOOTER
========================= */

.footer-modern {
  background: #111;
}

.footer-links {
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #cfcfcf;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #f0ab2a;
}


/* =========================
   SOCIAL ICON (FOOTER)
   (VERSÃO PADRÃO + LIMPA)
========================= */

.social-icon {
  width: 55px;
  height: 55px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #222;
  color: #fff;

  font-size: 22px;
  transition: 0.3s;
}

.social-icon:hover {
  background: #f0ab2a;
  color: #000;
  transform: translateY(-4px);
}


.imagem-contato {
    height: 100%;
}

.imagem-contato img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}