body {
      font-family: "Constantia";
      margin: 0;
      padding: 0;
      display: flex;
      /* Adiciona display flex para dividir a página em duas partes */
      flex-direction: column;
      background: linear-gradient(111.5deg, rgb(187, 232, 255) 11.1%, rgb(4, 78, 116) 107.5%);


      /* Organiza os itens em uma coluna */
  }

  header {
      background-image: url('../images/banner.jpg');
      background-position-y: 8%;
      /* Center the image */
      background-repeat: no-repeat;
      /* Do not repeat the image */
      background-size: cover;
      /* Resize the background image to cover the entire container */
      color: #000;
      height: 400px;
      padding: 15px;
      text-align: center;
      font-style: italic;
      line-height: 2.5em; 
      display: flex;
      justify-content: space-between;
      border-bottom: 7px solid #383838;
      /* Adiciona uma borda inferior */
  }

  .boxed {
      max-width: 1200px;
      margin: auto;
      display: inline;
  }

  .chip {
      display: inline-block;
      padding: 0 25px;
      height: 300px;
      width: 1100px;
      margin-top: auto;
      font-size: 16px;
      line-height: 50px;
      border-radius: 5px;
      text-align: left;
      text-size-adjust: auto;
      line-height: normal;
      background-color: #f1f1f1;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
  }

  a:hover .fa-location-dot {
    color: #056388; /* ou qualquer outra cor que preferir */
  }

  /* On mouse-over, add a deeper shadow */
  .chip:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }

  .chip img {
      float: left;
      margin-top: 25px;
      margin-bottom: 25px;
      margin-left: 10px;
      margin-right: 25px;
      height: 250px;
      width: 300px;
      border-radius: 5px;
  }


  .logo img {
      height: 150px;
      margin-top: -70px;
  }

  .title {
      flex: 1;
      /* Ocupa o espaço restante */
      text-align: center;
      color: #000000;
  }

  /* Dropdown Button */
  .dropbtn {
      background-color: #ffffff;
      color: rgb(0, 0, 0);
      padding: 16px;
      font-size: 16px;
      border: 2px solid transparent;
      border-radius: 20px;
      border: none;
  }

  /* The container <div> - needed to position the dropdown content */
  .dropdown {
      position: relative;
      display: inline-block;
  }

  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
  }

  /* Links inside the dropdown */
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }

  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
      background-color: #979696;
  }

  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
      display: block;
      border: 2px solid transparent;
      border-radius: 20px;
  }

  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
      background-color: #f1f1f1;
      border-color: #676666;
  }

  nav {
      padding: 10px;
      text-align: center;
      flex: 1;
      /* Faz o nav ocupar o espaço restante */
      display: flex;
      /* Permite alinhar itens filhos */
      justify-content: flex-end;
      /* Alinha os itens à direita */
  }

  nav a {
      text-decoration: none;
      color: #000000;
      padding: 10px 20px;
      margin: 0 10px;
      border: 2px solid transparent;
      border-radius: 20px;
      transition: all 0.3s ease;
  }

  nav a:hover {
      background-color: #f1f1f1;
      color: #000000;
  }


  @import url(https://fonts.googleapis.com/css?family=Open+Sans);

  .search {
      width: 100%;
      margin-left: 675px;
      position: relative;
      display: flex;
      padding: 10px;
  }

  .searchTerm {
      width: 60%;
      border: 3px solid #000000;
      border-right: none;
      padding: 5px;
      height: 40px;
      border-radius: 5px 0 0 5px;
      outline: none;
      color: #f1f1f1;
  }

  .searchTerm:hover {
    color: #f1f1f1;
    border-color: #056388;
  }

  .searchTerm:focus {
      color: #000000;
  }

  .searchButton {
      width: 40px;
      height: auto;
      border: 1px solid #000000;
      background: #000000;
      text-align: center;
      color: #f1f1f1;
      border-radius: 0 5px 5px 0;
      cursor: pointer;
      font-size: 20px;
  }

  .searchButton:hover {
      background-color: #056388;
      color: #f1f1f1;
      border-color: #056388;
  }




  /*Resize the wrap to see the search bar change!*/
  .wrap {
      width: 60%;
      position: static;
      margin-top: 10px;
      top: 50%;
      left: 50%;
      transform: translate(auto, auto);
  }

  infoButton {
      background-color: #f1f1f1;
      padding: 10px;
      text-align: right;
      flex: 1;
      /* Faz o nav ocupar o espaço restante */
      display: flex;
      /* Permite alinhar itens filhos */
      justify-content: right;
      /* Alinha os itens à direita */
  }

  infoButton a {
      text-decoration: none;
      color: #000000;
      padding: 10px 20px;
      margin: 0 10px;
      border: 2px solid;
      border-radius: 5px;
      transition: all 0.3s ease;
  }

  infoButton a:hover {
      background-color: #056388;
      color: #f1f1f1;
      border-color: #056388;
  }

  nav1 {
      background-color: #ffffff;
      padding: 10px;
      text-align: center;
      flex: 1;
      /* Faz o nav ocupar o espaço restante */
      display: flex;
      /* Permite alinhar itens filhos */
      justify-content: center;
      /* Alinha os itens à direita */
  }

  nav1 a {
      text-decoration: none;
      color: #5acbf8;
      padding: 10px 20px;
      margin: 0 10px;
      border: 2px solid transparent;
      border-radius: 5px;
      transition: all 0.3s ease;
  }

  nav1 a:hover {
      background-color: #ffffff;
      color: #00527c;
      border-color: #00527c;
  }

  #social {
      display: flex;
      align-items: center;
      margin-left: 15px;
      margin-right: 15px;
  }

  #social a {
      text-decoration: none;
      color: #000000;
      margin-left: 15px;
  }

  #social a:hover {
      color: #000000;
      color: #676666;
  }

  section {
      display: flex;
      /* Organiza os itens em uma linha */
      justify-content: space-between;
      /* Distribui o espaço entre os itens */
      align-items: center;
      /* Centraliza verticalmente os itens */
      padding: 20px;
  }

  .slideshow-container {
      width: 50%;
      /* Define a largura do slideshow */
      max-width: 1000px;
      /* Limita a largura máxima */
      position: relative;
  }

  .info1 {
      width: 45%;
      /* Define a largura da informação */
      max-width: 600px;
      /* Limita a largura máxima */
      background-color: #ffffff;
      padding: 10px;
      text-align: center;
  }

  .info1 h2 {
      text-align: center;
      /* Centraliza o título */
  }

  .info1 p {
      text-align: justify;
      /* Justifica o texto */
  }

  .panel p {
      margin: 5px;
      padding: 0px;
  }


  /* Slideshow */
  .mySlides {
      display: none;
  }

  .mySlides img {
      border-radius: 5px;
  }

  /* Controles */
  .prev,
  .next {

      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: black;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
  }

  .next {
      right: 0;
      border-radius: 3px 0 0 3px;
  }

  .prev:hover,
  .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
  }

  /* Indicadores */
  .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
  }

  .active,
  .dot:hover {
      background-color: #717171;
  }

  /* Animação de desaparecimento */
  .fade {
      animation-name: fade;
      animation-duration: 1.5s;
  }

  @keyframes fade {
      from {
          opacity: .4
      }

      to {
          opacity: 1
      }
  }

  .accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
  }

  .accordion:after {
      content: '\02795';
      /* Unicode character for "plus" sign (+) */
      font-size: 13px;
      color: #777;
      float: right;
      margin-left: 5px;
  }

  .active:after {
      content: "\2796";
      /* Unicode character for "minus" sign (-) */
  }

  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active,
  .accordion:hover {
      background-color: #ccc;
  }


  .accordion1 {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      text-align: left;
      border: none;
      outline: none;
      transition: 0.4s;
  }

  .accordion1:after {
      content: '\02795';
      /* Unicode character for "plus" sign (+) */
      font-size: 13px;
      color: #777;
      float: right;
      margin-left: 5px;
  }

  .active:after {
      content: "\2796";
      /* Unicode character for "minus" sign (-) */
  }

  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active,
  .accordion1:hover {
      background-color: #ccc;
  }



  /* Style the accordion panel. Note: hidden by default */
  .panel {
      padding: 0 18px;
      background-color: white;
      display: none;
      overflow: hidden;
  }

  footer {
      background-color: #676666;
      color: #000000;
      text-align: center;
      padding: 20px;
  }

  @media screen and (max-width: 768px) {
      header {
          flex-direction: column;
          align-items: center;
      }

      .logo {
          margin: 10px 0;
      }

      nav {
          margin: 10px 0;
          justify-content: right;
          /* Centraliza os itens */
      }

      nav a {
          display: block;
          margin: 5px 0;
      }


      nav1 {
          margin: 10px 0;
          justify-content: right;
          /* Centraliza os itens */
      }

      nav1 a {
          display: block;
          margin: 5px 0;
      }

      footer {
          position: static;
      }

      .info1,
      .slideshow-container {
          width: 100%;
          /* Para telas menores, ambos ocupam toda a largura disponível */
      }

  }

  .center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 50%;
  }