.header {
  background-color: #7c8ba3 !important;
  color: #fff;
  padding: 15px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Para sobrepor outros elementos */
}



.container_texto{
  padding: 20px !important;
}

.btn-primary {

    background-color: #3c4a5c !important;
    border-color: #3c4a5c !important;
}

.features{
  border-radius: 15px !important;

}

.features-box {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4) !important;
  border-radius: 15px !important;
}

.color-panel {

  border-radius: 15px !important;
  background-color: #fffbfb8c  !important;
  border-color: #fffbfb8c  !important;
}

.color_fonte{
    
  color: #1c1b5e  !important;
  /* color: #FFA500 !important; */
  /* FF69B4 */
}

.color_fonte_texto{
    
  color: #03082a   !important;
  /* color: #FFA500 !important; */
  /* FF69B4 */
}

.color1{
  color: #d2bfb1 !important;
  font-size: 18px !important;
}

@media (max-width: 768px) {
  .img_page {
    width: 80px !important; /* Define a largura máxima como 100% do contêiner pai */
    height: 80px !important; /* Mantém a proporção da imagem */
  }

  .h3-p {
    text-align: justify;
    font-size: 1.15rem !important; /* Tamanho do texto semelhante ao h3 do Bootstrap */
    /* Adicione outros estilos conforme necessário para combinar com o h3 do Bootstrap */
    line-height: 2x !important;
  }


  .h2-p {
    text-align: justify;
    font-size: 1.05rem !important; /* Tamanho do texto semelhante ao h3 do Bootstrap */
    /* Adicione outros estilos conforme necessário para combinar com o h3 do Bootstrap */
    line-height: 2x !important;
  }
}


.img_page{
    width: 288px ;
    height: 288px ;
}
.h3-p {
  text-align: justify;
  font-size: 1.75rem; /* Tamanho do texto semelhante ao h3 do Bootstrap */
  /* Adicione outros estilos conforme necessário para combinar com o h3 do Bootstrap */
  line-height: 3x;
}

.h2-p {
  text-align: justify;
  font-size: 1.35rem; /* Tamanho do texto semelhante ao h3 do Bootstrap */
  /* Adicione outros estilos conforme necessário para combinar com o h3 do Bootstrap */
  line-height: 3x;
}

.btn-outline-primary {
    color: #1c1b5e !important;
    border-color: #1c1b5e !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #1c1b5e !important;
    border-color: #1c1b5e !important;
}

.color_rosa_escuro{
    
    color: #bb9684 !important;
    /* color: #FFA500 !important; */
    /* FF69B4 */
}
.color1{
    color: #d2bfb1 !important;
    font-size: 18px !important;
}

.color_rosa{
    color: #d2bfb1 !important;
}

.color2{
    color: #725440 !important;
}

.color3{
    color: #ac9c94 !important;
}

.color4{
    color: #3c4c63 !important;
    line-height: 1.6 !important;
}

.btn-whats {
    background-color: #1c1b5e  !important;
    border-color: #1c1b5e  !important;
    color: #FFFFFF !important;
    font-size: 20px !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;; /* Adicionando uma transição suave */
}

.btn-whats:hover {
    background-color: #FFFFFF !important;; /* Nova cor ao passar o mouse */
    border-color: #FFFFFF !important;
    color: #1c1b5e !important;/* Nova cor do texto ao passar o mouse */
}


.btn-whats-green {
  background-color: #04c02c  !important;
  border-color: #04c02c  !important;
  color: #FFFFFF !important;
  font-size: 20px !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;; /* Adicionando uma transição suave */
}

.btn-whats-green:hover {
  background-color: #FFFFFF !important;; /* Nova cor ao passar o mouse */
  border-color: #FFFFFF !important;
  color: #04c02c !important;/* Nova cor do texto ao passar o mouse */
}

.bg-home {
  padding: 100px 0px 180px 0px !important;
}

#modal-contact .modal-dialog {
  height: 400px; /* Defina a altura desejada */
  /* Ou use outras unidades, como porcentagem, rem, etc. */
}

.modal a.close-modal{
  top: 5px  !important;
    right: 5px  !important;
}
.bg-secondary {
    background-color: #3c4c63 !important;
    /* background-color: #ac9c94 !important; */

}

.home-first-img{
  z-index: 0 !important;
}

.icon_entrega {
  background-image: url('/images/icon_image/icon_entrega.png?v=3'); /* imagem inicial */
  background-size: cover; /* ajustar o tamanho da imagem */
  transition: background-image 0.3s ease; /* transição suave ao mudar de imagem */
}

.icon_entrega:hover {
  background-image: url('/images/icon_image/icon_entrega_2.png?v=3'); /* imagem ao passar o mouse por cima */
  /* outras propriedades de estilo se desejado */
}


.icon_quebrado {
  background-image: url('/images/icon_image/icon_quebrado.png?v=3'); /* imagem inicial */
  background-size: cover; /* ajustar o tamanho da imagem */
  transition: background-image 0.3s ease; /* transição suave ao mudar de imagem */
}

.icon_quebrado:hover {
  background-image: url('/images/icon_image/icon_quebrado_2.png?v=3'); /* imagem ao passar o mouse por cima */
  /* outras propriedades de estilo se desejado */
}


.icon_aviao {
    background-image: url('/images/icon_image/icon_aviao.png?v=3'); /* imagem inicial */
    background-size: cover; /* ajustar o tamanho da imagem */
    transition: background-image 0.3s ease; /* transição suave ao mudar de imagem */
  }
  
  .icon_aviao:hover {
    background-image: url('/images/icon_image/icon_aviao_2.png?v=3'); /* imagem ao passar o mouse por cima */
    /* outras propriedades de estilo se desejado */
  }

  .icon_over {
    background-image: url('/images/icon_image/over.png?v=3'); /* imagem inicial */
    background-size: cover; /* ajustar o tamanho da imagem */
    transition: background-image 0.3s ease; /* transição suave ao mudar de imagem */
  }
  
  .icon_over:hover {
    background-image: url('/images/icon_image/over_2.png?v=3'); /* imagem ao passar o mouse por cima */
    /* outras propriedades de estilo se desejado */
  }

  .icon_reembolso {
    background-image: url('/images/icon_image/reembolso.png?v=3'); /* imagem inicial */
    background-size: cover; /* ajustar o tamanho da imagem */
    transition: background-image 0.3s ease; /* transição suave ao mudar de imagem */
  }
  
  .icon_reembolso:hover {
    background-image: url('/images/icon_image/reembolso_2.png?v=3'); /* imagem ao passar o mouse por cima */
    /* outras propriedades de estilo se desejado */
  }

  .icon_problema {
    background-image: url('/images/icon_image/icon_problema.png'); /* imagem inicial */
    background-size: cover; /* ajustar o tamanho da imagem */
    transition: background-image 0.3s ease; /* transição suave ao mudar de imagem */
  }
  
  .icon_problema:hover {
    background-image: url('/images/icon_image/icon_problema_2.png'); /* imagem ao passar o mouse por cima */
    /* outras propriedades de estilo se desejado */
  }

  .icon_processo {
    background-image: url('/images/icon_image/icon_processo.png'); /* imagem inicial */
    background-size: cover; /* ajustar o tamanho da imagem */
    transition: background-image 0.3s ease; /* transição suave ao mudar de imagem */
  }
  
  .icon_processo:hover {
    background-image: url('/images/icon_image/icon_processo_2.png'); /* imagem ao passar o mouse por cima */
    /* outras propriedades de estilo se desejado */
  }

  
  .icon_recompensa {
    background-image: url('/images/icon_image/icon_recompensa.png'); /* imagem inicial */
    background-size: cover; /* ajustar o tamanho da imagem */
    transition: background-image 0.3s ease; /* transição suave ao mudar de imagem */
  }
  
  .icon_recompensa:hover {
    background-image: url('/images/icon_image/icon_recompensa_2.png'); /* imagem ao passar o mouse por cima */
    /* outras propriedades de estilo se desejado */
  }