body {
      font-family: 'Roboto', sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }

    .navbar {
      background-color: #002f6c;
      padding: 10px 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .navbar-brand img {
      height: 50px;
    }

    .navbar-nav .nav-link {
      color: white !important;
      font-weight: bold;
      margin-right: 15px;
    }

    .navbar-nav .nav-link:hover {
      color: #f47835 !important;
    }

    .btn-primary {
      background-color: #f47835;
      border: none;
      padding: 10px 25px;
      border-radius: 30px;
    }

    .btn-primary:hover {
      background-color: #d8682b;
    }

    .carousel-inner {
      height: 50vh;
    }

    .carousel-image {
      object-fit: cover;
      height: 100%;
      width: 100%;
    }

    .modern-card {
      background: #fff;
      border-radius: 15px;
      padding: 25px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      transition: transform .3s;
    }

    .modern-card:hover {
      transform: translateY(-5px);
    }

    footer {
      background-color: #002f6c;
      color: #fff;
      padding: 40px 0;
      margin-top: 50px;
    }

    .text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, .8);
    }

    .timeline {
      position: relative;
      padding-left: 20px;
      border-left: 3px solid #dee2e6;
    }

    .timeline-item {
      position: relative;
    }

    .timeline-item::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 15px;
      width: 16px;
      height: 16px;
      background: #fff;
      border: 3px solid #0d6efd;
      border-radius: 50%;
      z-index: 1;
    }


    .footer-bg {
      background-image: url('{% static "assets/dist/img/footer-bg1.jpg" %}');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      position: relative;
      color: white;
    }

    .footer-bg .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      /* Transparência de 50% */
      z-index: 1;
    }

    .footer-bg .container {
      position: relative;
      z-index: 2;
      /* Garante que o conteúdo fique na frente do overlay */
    }


    /* Transparência aplicada */
    .footer-bg::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      /* Preta com 50% de opacidade */
      z-index: 1;
    }

    .footer-content {
      position: relative;
      z-index: 2;
      /* Garante que o conteúdo fique acima da camada de transparência */
    }