.footer-form-container {
   background-color: #333;
   color: white;
   padding: 20px;
   max-width: 470px;
}

.footer-form-container h2 {
   color: #28a7c7;
   margin-bottom: 15px;
   font-size: 24px;
}

.page-form-container{
   border-radius: 4px;
   background-color: var(--azul-intermediario);
   color: var(--cinza-75);
   padding: 20px;
   max-width: 470px;
}

.page-form-container h2 {
   color: white;
   margin-bottom: 15px;
   font-size: 24px;
   margin-top: 0 !important;
}

.page-form-container .form-group-label {
   color: var(--cinza-75);
}

.page-form-container button {
   background-color: var(--amarelo-dourado1);
   color: black;
}

.page-form-container button:hover {
   background-color: var(--laranja-escuro);
   color: black;
}

.form-group {
   margin-bottom: 15px;
}

.form-group label {
   color: white !important;
   text-align: left;
   display: block;
   margin-bottom: 5px;
   font-size: 14px;
}

.form-group input,
.form-group textarea {
   width: 100%;
   padding: 10px;
   border: none;
   border-radius: 4px;
   background-color: white;
   font-size: 14px;
   font-family: inherit;
   color: black;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
   color: #999;
}

.form-group textarea {
   resize: vertical;
   min-height: 80px;
}

.btn-submit {
   background-color: #28a7c7;
   color: white;
   border: none;
   border-radius: 4px;
   padding: 10px 30px;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s;
}

.btn-submit:hover {
   background-color: #1d8ba8;
}

.message {
   padding: 10px;
   margin-bottom: 15px;
   border-radius: 4px;
}

.message.success {
   background-color: rgba(76, 175, 80, 0.3);
   color: #4CAF50;
}

.message.error {
   background-color: rgba(244, 67, 54, 0.3);
   color: #F44336;
}

/* Loading spinner */
.spinner {
   width: 20px;
   height: 20px;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   border-top-color: white;
   animation: spin 1s ease-in-out infinite;
   display: inline-block;
   margin-left: 10px;
   vertical-align: middle;
}


.top {
   width: 100%;
   height: 60px
}
.top ul li a {
   color: white;
   text-decoration: none;
}
.top ul li a:hover {
   color: var(--azul-destaque);
   text-decoration: none;
}
.bottom {
   width: 100%;
   height: 60px;
   display: flex; /* Alinha os elementos pela base */
   flex-direction: column;
   justify-content: flex-end;
   margin-top: auto; /* Empurra o elemento para a parte inferior */
}

/* Estilos para o campo de upload */
.file-upload-container {
   position: relative;
   display: inline-block;
   width: 100%;
   margin-top: 10px;
}

.file-upload-input {
   position: absolute;
   opacity: 0;
   width: 100%;
   height: 100%;
   cursor: pointer;
}

.file-upload-label {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   padding: 12px;
   border: 2px dashed #ccc;
   border-radius: 8px;
   background-color: #f8f9fa;
   color: #666;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s ease;
   text-align: center;
}

.file-upload-label:hover {
   border-color: var(--azul-destaque);
   background-color: #e3f2fd;
   color: var(--azul-destaque);
}

.file-upload-label.file-selected {
   border-color: #28a745;
   background-color: #d4edda;
   color: #155724;
}

.file-upload-icon {
   margin-right: 8px;
   font-size: 16px;
}

.file-info {
   margin-top: 5px;
   font-size: 12px;
   color: #999;
}

.file-name {
   margin-top: 5px;
   font-size: 12px;
   color: #28a745;
   font-weight: 500;
}

.file-error {
   margin-top: 5px;
   font-size: 12px;
   color: #dc3545;
}


@keyframes spin {
   to { transform: rotate(360deg); }
}

/* Animação de fade-in e fade-out para a mensagem */
@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}

@keyframes fadeOut {
   from { opacity: 1; }
   to { opacity: 0; }
}

.fade-in {
   animation: fadeIn 0.3s forwards;
}

.fade-out {
   animation: fadeOut 1s forwards;
}

/* Input com erro */
.input-error {
   border: 1px solid #F44336 !important;
}

.inferiror-footer {
   background-color: #333;
   color: white;
   padding-left: 30px;
   padding-right: 30px;
   padding-top: 30px;
   padding-bottom: 15px;
}

/* RESPONSIVE STYLES FOR FOOTER */
@media screen and (max-width: 768px) {
   .footer-form-container,
   .page-form-container {
      max-width: 100%;
      margin: 0 auto;
      padding: 15px;
   }
   
   .footer-form-container h2,
   .page-form-container h2 {
      font-size: 20px;
      text-align: center;
   }
   
   .form-group {
      margin-bottom: 12px;
   }
   
   .form-group label {
      font-size: 13px;
      text-align: left;
   }
   
   .form-group input,
   .form-group textarea {
      padding: 8px;
      font-size: 13px;
   }
   
   .form-group textarea {
      min-height: 60px;
   }
   
   .btn-submit {
      width: 100%;
      padding: 12px 20px;
      font-size: 14px;
      margin-top: 10px;
   }
   
   .message {
      padding: 8px;
      margin-bottom: 12px;
      font-size: 13px;
   }
   
   .spinner {
      width: 16px;
      height: 16px;
      border-width: 2px;
   }
   
   .inferiror-footer {
      padding: 20px 15px;
   }
}

@media screen and (max-width: 480px) {
   .footer-form-container,
   .page-form-container {
      padding: 10px;
   }
   
   .footer-form-container h2,
   .page-form-container h2 {
      font-size: 18px;
   }
   
   .form-group {
      margin-bottom: 10px;
   }
   
   .form-group label {
      font-size: 12px;
   }
   
   .form-group input,
   .form-group textarea {
      padding: 6px;
      font-size: 12px;
   }
   
   .btn-submit {
      padding: 10px 15px;
      font-size: 13px;
   }
   
   .message {
      padding: 6px;
      font-size: 12px;
   }
   
   .spinner {
      width: 14px;
      height: 14px;
   }
   
   .inferiror-footer {
      padding: 15px 10px;
   }
}


/* Correção para Footer - Sobreposição Mobile */
@media screen and (max-width: 768px) {
   .rodape {
      background-color: var(--fundo-rodape);
      width: 100%;
      overflow: hidden;
      margin-left: 0px;
      margin-right: 0px;
      padding: 30px 5% 25px 5%;
   }
   
   .rodape > div {
      display: flex !important;
      flex-direction: column !important;
      gap: 40px !important;
      justify-content: flex-start !important;
   }
   
   .rodape .col {
      width: 100% !important;
      order: initial;
   }
   
   /* Primeira coluna - Links Úteis */
   .rodape .col:first-child {
      order: 1;
   }
   
   .rodape .col:first-child .top {
      width: 100%;
      height: auto !important;
      margin-bottom: 20px;
   }
   
   .rodape .col:first-child .top h1 {
      text-align: center;
      margin-bottom: 15px;
   }
   
   .rodape .col:first-child .top ul {
      margin-top: 10px;
   }
   
   .rodape .col:first-child .top ul li {
      text-align: center;
      margin-bottom: 8px;
      font-size: 1.1rem;
   }
   
   /* Informações da empresa no final da primeira coluna */
   .rodape .col:first-child .bottom {
      width: 100%;
      height: auto !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      align-items: center !important;
      margin-top: 25px !important;
      padding-top: 20px;
      border-top: 1px solid #555;
   }
   
   .rodape .col:first-child .bottom p {
      color: white !important;
      text-align: center !important;
      margin-bottom: 5px !important;
      font-size: 14px;
   }
   
   /* Segunda coluna - Trabalhe Conosco */
   .rodape .col:nth-child(2) {
      order: 2;
   }
   
   .rodape .col:nth-child(2) h1 {
      text-align: center;
      margin-bottom: 20px;
   }
   
   /* Terceira coluna - Contatos */
   .rodape .col:last-child {
      order: 3;
   }
   
   .rodape .col:last-child h1 {
      text-align: center;
      margin-bottom: 20px;
   }
   
   .rodape .col:last-child > div p {
      text-align: center !important;
      color: white !important;
      font-size: 16px !important;
      font-weight: 500 !important;
      margin-top: 15px !important;
   }
   
   .social-icons-footer {
      justify-content: center !important;
      margin: 20px 0 !important;
   }
   
   .rodape .col:last-child > div p:last-child {
      color: white !important;
      font-size: 2rem !important;
      font-weight: 600 !important;
      margin-top: 25px !important;
      text-align: center !important;
   }
}

@media screen and (max-width: 480px) {
   .rodape {
      padding: 20px 3% 20px 3%;
   }
   
   .rodape > div {
      gap: 30px !important;
   }
   
   .rodape h1 {
      font-size: 1.3rem !important;
   }
   
   .rodape ul li {
      font-size: 1rem !important;
   }
   
   .rodape .col:first-child .bottom p {
      font-size: 13px !important;
   }
   
   .rodape .col:last-child > div p:last-child {
      font-size: 1.8rem !important;
   }
}