.container {
    max-width: 1290px;
}

.modal-backdrop.show {    opacity: 0.8!important;}

#sombra { width: 100%;
    height: 750px;
    position: absolute;
    top: 0;
    background: url(images/sombra.svg) no-repeat;
    z-index: 99;
    background-size: cover; }
      


.topo-vaga { width:100%; position:relative; display:block; float:left; background: rgb(28,30,38); margin-top: -90px;
background: linear-gradient(138deg, rgba(28,30,38,1) 0%, rgba(46,46,57,1) 100%); height:750px; }

#element1 { position:absolute; left:0; top:30%; z-index:9999; }


.topo-vaga h1 {  font-size: 64px;  background: linear-gradient(175deg, rgb(255 255 255) 60%, rgba(227, 227, 247, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; padding: 185px  0 0 0;    width: 60%;
 }

.bold {
  font-weight: bold;
}

.light {
  font-weight: 600; clear: both;
} 



.topo-vaga .users { width:100%; position:relative; display:block; float:left;  }
.topo-vaga .users figure { width: 32px; height: 32px; border:2px solid blue; border-radius:50px; display:block; position:relative; float:left; margin-left:-8px; background:#fff; }

.topo-vaga .users figure:nth-child(1) { margin-left:0; } 

.topo-vaga .users p { float:left; color: #fff; padding: 8px;  display: block; position: relative; font-size: 14px; font-weight: bold; text-align: left;}



.card-info {width: 160px; margin-top: 64px; background: rgb(40,43,52);float: left; display: block; position: relative; margin-right: 8px;  transition: 0.3s;
background: linear-gradient(176deg, rgba(40,43,52,1) 0%, rgba(40,43,52,0) 100%); padding:20px; border-radius:8px; }

.card-info:hover {background: #1f2129;}
.card-info:hover h5 {color:#007CFF; }

.card-info figure { width: 40px;  height: 40px; padding-top: 7px; text-align: left;  border-radius:50px; display:block; position:relative; float:left; ; }
.card-info figure svg {     width: 28px;
    height: 28px;}

.card-info p {font-size: 14px; font-weight: 600; color: #6B879D; text-align: left; width:100%; float: left; display: block; padding: 0;margin: 0;}
.card-info h5 {font-size: 16px; transition: 0.3s; font-weight: bold;  color: #fff; text-align: left;width:100%; float: left; display: block;padding: 0;margin: 0;}

.linha { width: 100%;height: 2px;position: relative; display: block; float: left;
  background: linear-gradient(-45deg, #0073ff, #ff0057,#00baae);
  background-size: 400% 400%;
  animation: gradient-anim 4s ease infinite;
 
}

@keyframes gradient-anim {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}



.dados-vaga { background:#24262E;width: 100%; height: 1000px;position: relative; display: block; float: left; }


.btn-candidatar {
  width: 100%;
  height: 100px;
  transition:  0.3s; /* Mudei de 'transition: 0.3s;' para 'transition: background 0.3s;' */
  margin-top: 65px;
  position: relative;
  display: block;
  float: left;
  background: linear-gradient(90deg, rgba(0, 124, 255, 1) 0%, rgba(0, 191, 166, 1) 100%);
  padding: 35px 20px;
  border-radius: 4px; z-index: 99999999;
}

.btn-candidatar:hover {
  background: linear-gradient(90deg, rgba(0, 191, 166, 1) 0%, rgba(0, 124, 255, 1) 100%);
}



.btn-candidatar figure { width:32px; height:32px; float: left; border: 2px solid #fff; border-radius: 50px; position:relative; display:block; float:left; }



.btn-candidatar p {font-size: 16px; font-weight: bold; padding: 5px 10px; color: #fff;float: left;}
.btn-candidatar svg { float:right; width:24px; height:24px; display:block; position:relative; margin:5px; color:#fff; }



.candidatou {width: 100%;
  height: 100px;
  transition:  0.3s; /* Mudei de 'transition: 0.3s;' para 'transition: background 0.3s;' */
  margin-top: 65px;
  position: relative; background: red;
  display: block;
  float: left;
 
  padding: 35px 20px;
  border-radius: 4px; z-index: 99999999;}

  .candidatou figure { width:32px; height:32px; float: left; border: 2px solid #fff; border-radius: 50px; position:relative; display:block; float:left; }



.candidatou p {font-size: 16px; font-weight: bold; padding: 5px 10px; color: #fff;float: left;}

.card-status {
  width: 100%;
  margin-top: 32px;
  position: relative;
  display: block;
  float: left;
  padding: 32px 24px;
  z-index: 99999; 
  border-radius: 4px;
  background: #1F2127;    box-shadow: -100px 100px 100px 1px #0f11138a; }

.card-status::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%; 
  height: 2px;
  background: linear-gradient(to right, rgb(0 187 172), #1F2127);border-radius: 4px; }

.card-status::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;  
  height: 100%;
  background: linear-gradient(to top, rgba(0, 124, 255, 1), #1f2127);border-radius: 4px; 
}




.card-status figure { width: 32px;
    height: 32px;
    position: relative;
    display: block;
    float: left;
    margin: 8px 0;
    margin-right: 16px; }
.card-status figure svg {     width: 100%;
    height: auto;
    position: relative;
    float: left;
    display: block; }

.card-status p {font-size: 16px; font-weight: bold; padding: 10px; color: #fff;}


.card-status .info { width:100%; position:relative; display:block; background:#23252D; padding:15px; border-left:2px solid #00FFDE; border-radius:4px; }
.card-status .info figure { width:32px; height:32px; position:relative; display:block; float:left; margin-top:0; margin-right:16px; }
.card-status .info figure svg { color:#00FFDE; }
.card-status .info p {font-size: 16px; font-weight: bold; padding: 8px; color: #fff; margin: 0;}

.publi {     width: 100%;
    position: relative;
    display: block;
    float: left;
    border-radius: 4px;
    height: 260px;
    background: #1a1c1f;
    z-index: 9999999999999;
    margin-top: 32px;}



.dados-empresa { background: #24262E; width: 100%; height:auto; position:relative; display:block; float:left; padding-top:64px; }
.dados-empresa figure { width:32px; height:32px; padding: 5px 0; position:relative; display:block; float:left; margin-top:0; margin-right:16px; }
.dados-empresa figure img { width:100%; }
.dados-empresa a {
    margin: 50px 0px 0 10px;
    display: block;
    float: left;
    position: relative;
}

.dados-empresa figure svg {width:32px; height:32px;}
.dados-empresa p {font-size: 14px; font-weight: 600;  color: #6B879D; margin: 0;}
.dados-empresa h1 {font-size: 16px; font-weight: bold; color: #fff;margin: 0;}


.dados-empresa h2 {font-size: 16px; font-weight: 400; line-height: 30px; color: #B1C3D0;margin: 0; width: 100%; margin-top: 32px;}



.dados-empresa .btn-entrar {height: 66px; margin-top: 32px; overflow: hidden; padding: 0px; border: 1px solid #6B879D; border-radius: 4px; transition: 0.3s; position:relative; display:block; float:left; margin-right: 16px; z-index:  
999999999999999;}
.dados-empresa .btn-entrar figure { width:60px; height: 65px; margin-right:0; padding:18px 20px;  background: #007CFF; position:relative; display:block; float:right; margin-top:0;     margin: 0 !important; }
.dados-empresa .btn-entrar figure svg {color: #fff;    width: auto;
    height: auto;}
.dados-empresa .btn-entrar p {font-size: 16px; font-weight: bold;  color: #fff; padding: 15px;  margin: 5px 10px; float:left; }


.dados-empresa .btn-entrar:hover {background: #007CFF;border: 1px solid #007CFF;}
.dados-empresa .btn-entrar:hover figure{ background:#0e6fd5; }


.divider { width:100%; margin-top: 128px; height: 4px; background: #2D303F;  position: relative; display: block; float: left;}


/* ------- RESPONSABILIDADES ---------------------------------- */

.dados-responsabilidades { background: #24262E; width: 100%; height:auto; position:relative; display:block; float:left; padding:128px 0; }
.dados-responsabilidades figure {  padding: 5px 0; position:relative; display:block; float:left; margin-top:0; margin-right:16px; }
.dados-responsabilidades figure img {       box-shadow: 100px 100px 100px 1px #131a21;
    border-radius: 10px;}
    .dados-responsabilidades h1 {font-size: 24px;
    font-weight: 600;
    background: linear-gradient(175deg, rgb(255 255 255) 20%, rgba(227, 227, 247, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; 
    margin: 0;
    padding: 15px;
    clear: initial;
    width: auto;
    float: left;
    display: block; margin-top: 10%;}

    .dados-responsabilidades h1 b {font-weight: bold;}

    .dados-responsabilidades span {    width: 64px;
    height: 64px;
    padding: 5px 0;
    position: relative;
    display: block;margin-top: 11%;
    float: left;}
.dados-responsabilidades p { width: 100%; font-size: 16px; font-weight: 600; line-height: 30px; display:block; float:left; color: #6B879D; margin: 0; margin-top: 48px;}


/* ------- requisitos ---------------------------------- */


.dados-requisitos { background:#1C1E26; width: 100%; height:auto; position:relative; display:block; float:left; padding:128px 0; }
.dados-requisitos figure {  padding: 5px 0; position:relative; display:block; float:left; margin-top:0; margin-right:16px; }

.dados-requisitos span {    width: 64px;
    height: 64px;
    padding: 5px 0;
    position: relative;
    display: block;margin-top: 10%;
    float: left;}

    .dados-requisitos h1 {font-size: 24px;
    font-weight: 400;
    background: linear-gradient(175deg, rgb(255 255 255) 20%, rgba(227, 227, 247, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; 
    margin: 0;
    padding: 15px;
    clear: initial;
    width: auto;
    float: left; 
    display: block; margin-top: 9%;}


    .dados-requisitos h1 b {font-weight: bold;}

  .dados-requisitos p {width: 100%;font-size: 16px; font-weight: 600; line-height: 30px; display:block; float:left; color: #6B879D; margin: 0; margin-top: 48px;}



/* ------- beneficios ---------------------------------- */

.dados-beneficios { background: rgb(26,28,33);
background: linear-gradient(90deg, rgba(26,28,33,1) 0%, rgba(26,28,33,1) 50%, rgba(6,59,139,1) 50%, rgba(6,59,139,1) 74%, rgba(0,102,255,1) 74%, rgba(0,102,255,1) 100%);width: 100%;     padding: 10px 0; position:relative; display:block; float:left; padding: 0; }



.dados-beneficios figure {  padding: 5px 0; position:relative; display:block; float:left; margin-top:0; margin-right:16px; }
.dados-beneficios figure img {       box-shadow: 100px 100px 100px 1px #131a21;
    border-radius: 10px;}
    .dados-beneficios h1 {font-size: 32px;
    font-weight: 600;
    background: linear-gradient(175deg, rgb(255 255 255) 20%, rgba(227, 227, 247, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; 
    margin: 0;
    padding: 15px;
    clear: initial;
    width: auto;
    float: left;
    display: block;}

     .dados-beneficios h1 b { font-weight:bold; }

    .dados-beneficios span {    width: 64px;
    height: 64px;
    padding: 20px 0;
    position: relative;
    display: block;margin-top: 0;
    float: left;}


.dados-beneficios p {font-size: 16px; font-weight: 600; line-height: 30px; display:block; float:left; color: #6B879D; margin: 0; margin-top: 48px;}


.dados-beneficios-2 {width: 100%; margin:0;  padding: 150px; position: relative; display: block; float: left; background: #1A1C21;}


.card-beneficio {width: 100%; text-align: center; margin:0;  padding: 20px; position: relative; display: block; border-radius: 8px; float: left; background: rgb(36,39,49);
background: linear-gradient(180deg, rgba(36,39,49,0.4206057422969187) 0%, rgba(0,102,255,0) 100%);}

.dados-beneficios-2 .card-beneficio figure {  padding: 0; position:relative; display:inline-block;  margin:0;  }


    .dados-beneficios-2 p {font-size: 16px;
    font-weight: 600;
   color: #fff;
    margin: 0;
    padding: 15px;
    clear: initial;text-align: center;
    width: 100%;
    float: left;
    display: block;}



.vaga-footer {width: 100%; margin:0;  padding: 0 0 150px 0; position: relative; display: block; float: left; background: #1A1C21;}
.vaga-footer img { width:100%;  height: 500px;}




.card-candidatar {background: rgb(70,74,95); height: 500px; width: 100%; border-radius: 16px; padding: 50px;
background: linear-gradient(98deg, rgba(70,74,95,1) 0%, rgba(37,40,49,1) 100%);}


.card-candidatar figure {     display: block;
    float: left;
    position: relative;
    width: 100px;
    box-shadow: -20px 20px 100px 1px #020202;
    border-radius: 100px; }
.card-candidatar figure img {width: 100%; height: 100%}


    .vaga-footer h1 {font-size: 32px;
    font-weight: bold;
    background: linear-gradient(175deg, rgb(255 255 255) 20%, rgba(227, 227, 247, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; 
    margin: 0;
    padding: 20px 20px 0 20px; 
    clear: initial;
       width: 78%;
    float: left;
    display: block;}

     .vaga-footer h1 b { font-weight:600; }
     .vaga-footer p {font-size: 24px;
    font-weight: 600;
   color: #a9b0b4;
    margin: 0;
    padding: 0 20px;
    clear: initial;text-align: left;
    
    float: left;
    display: block;}


    .vaga-footer .btn-candidatar  p{    font-size: 16px;
    font-weight: bold;
    padding: 5px 10px;
    color: #fff;
    float: left;
    width: auto;}

    .vaga-footer .btn-candidatar figure{ width:32px; }



    /* MODAL --------------------*/

    .modal {    top: 120px;    z-index: 9999999999;}
    .modal-backdrop {    z-index: 999999999;}

    .modal-dialog {
      max-width: 600px !important;
  }

    .modal-content {    background: #282836;
      border: 2px solid #282836;}

      .modal-body {    padding: 2rem!important;}

      .modal-content figure { width: 100%; text-align: center; margin: 0;}
      .modal-content figure img{ width: 100%;}

      .form-group {margin: 10px 0!important;}
      .form-vaga {width: 100%; position: relative; display: block; float: left;}

      .form-vaga .row { width: 100%;}
      .form-vaga figure { width: 64px; float: left; display: block; position: relative;padding: 10px;
        border: 2px solid #32374c; border-radius: 4px; }

        figure#banner {
          border-radius: 8px;
          overflow: hidden;
          background: #1c1c25;
          height:200px;
          padding: 30px; margin-bottom: 32px;
      }

      .form-vaga h1 {    color: #fff;
        float: left;
        padding: 16px;
        display: block;
        position: relative;
        font-size: 24px; }

    

      .form-vaga p { color: #6f6d85; font-size: 14px; margin: 0; padding: 0; width:  100%; float: left; display: block;
        font-weight: 500;  white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Exibe três pontos (...) para indicar texto truncado */ }

        .form-vaga h3 { color: #fff; width: 100%; font-size: 14px; margin: 0; padding: 0; float: left; display: block;
          font-weight: 500; /* Ou qualquer outro valor que você desejar */
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; /* Exibe três pontos (...) para indicar texto truncado */ }

      label {    color: #6f6d85;font-size: 14px;float: left; display: block;
        font-weight: 500;}

      input {
        padding: 20px 10px!important;
        background: #1b1b27!important;
        border-radius: 4px!important;
        border: 1px solid #1b1b27!important;
        color: #fff!important; border: 1px solid #1b1b27;
        transition: 0.3s;
    }   

    input:hover {border: 1px solid #007bff !important; }

    input:focus {background: #13131a27!important; text-decoration: none!important;    outline: none;
      border: 1px solid #00e09d !important;}


 

    #formCandidatura button.btn.btn-primary { padding: 20px 10px!important;
      background: #0076ff!important; width: 100%;
      border-radius: 4px!important; position: relative;
      border: none!important; font-weight: bold;
      color: #fff!important; border-bottom: 4px solid #2d51a5 !important;
      transition: 0.3s; margin-top: 32px; }

      #formCandidatura button.btn.btn-primary:hover { color: #fff!important; background: #1d976d!important; border-bottom: 4px solid #64e696!important;   }



      #formCandidatura button.close {    padding: 25px 10px !important;
        background: #1c1c25 !important;
        width: 100%;
        border-radius: 4px !important;
        position: relative;
        border: none !important;
        font-weight: bold;
        border-bottom: 4px solid #282836 !important;
        transition: 0.3s;
        margin-top: 16px;
        line-height: 0!important;}

        #formCandidatura button.close span {margin: 0; padding: 0; color: #ddd; font-size: 12px; font-weight: 400!important;}
  


          #modalContinuacao h1 {     font-size: 18px;
            font-weight: 500;
            text-align: center;}

            #modalContinuacao h1 b {color: #64e696;}


            #modalContinuacao .close {
              color: #dce5ed;
              opacity: 1;
              font-weight: 500;
              font-size: 13px;
              letter-spacing: 0px;
              text-shadow: none;
              border: 1px solid #6b879d; transition: 0.3s;
              padding: 5px 10px;
              border-radius: 4px;    position: absolute;
              right: 40px;
          }

          #modalContinuacao .close:hover {background: #6b879d; color: #fff!important;}

        .compartilhar {padding: 20px 10px !important;
          background: #0076ff !important;
          width: 48%;
          border-radius: 4px !important;
          position: relative;
          margin-right: 2%;
          border: none !important;
          font-weight: bold;
          color: #fff !important;
          border-bottom: 4px solid #2d51a5 !important;
          transition: 0.3s;
          margin-top: 32px;
          float: left;}

          .compartilhar:hover {    background: #0b60bb !important;
            border-bottom: 4px solid #007bff !important; }

          .compartilhar figure { width: 32px; position: relative; display: block; float: left;}
          .compartilhar p {    position: relative;
            display: block;
            float: left;
            padding: 0 10px;
            width: auto;
            font-size: 14px;
            margin: 0;}



            
        .btn-modal {padding: 20px 10px !important;
          background: #3a4654 !important;
          width: 48%;
          border-radius: 4px !important;
          position: relative;
          margin-right: 2%;
          border: none !important;
          font-weight: bold;
          color: #fff !important;
          border-bottom: 4px solid #495663 !important;
          transition: 0.3s;
          margin-top: 32px;
          float: left;}

          .btn-modal:hover { background: #1b2229!important; border-bottom: 4px solid #3a4857!important; }

          .btn-modal figure { width: 32px; position: relative; display: block; float: left;}
          .btn-modal p {    position: relative;
            display: block;
            float: left;
            padding: 0 10px;
            width: auto;
            font-size: 14px;
            margin: 0;}



/* ------------------------------- MEDIA QUERYS ------------------------------------------*/


/*  ----------------------------- Estilos para telas menores que 768 pixels -------------------------------------------------------- */


 @media only screen and (max-width: 767px) {




#element1 {display: none;}

.topo-vaga {height: auto; padding-bottom: 50px;}
.topo-vaga .btn-candidatar {display: none;}

.card-info {background: linear-gradient(176deg, rgba(40, 43, 52, 1) 0%, rgb(27 29 33 / 18%) 100%);}
.card-status { display:none; }
.publi {display: none;}

  .topo-vaga h1 { width: 100%;
    font-size: 40px;}

    .card-info {
    width: 45%;    margin: 5% 2%; }

     .dados-empresa { padding:50px 20px;  overflow: hidden;}
    .dados-empresa h1 {margin: 0; margin-bottom: 10%;}
    .dados-empresa h2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px; }

    .dados-empresa a { display:none; }

    .dados-responsabilidades, .dados-requisitos {     padding: 48px 20px; }


    .dados-responsabilidades figure {
    padding: 20px; }

    .dados-responsabilidades figure img {
    box-shadow: 100px 100px 100px 1px #131a21;
    border-radius: 10px;
    width: 100%;
}


  .dados-requisitos figure {  padding: 20px;}

  .dados-requisitos figure img {
    box-shadow: 100px 100px 100px 1px #131a21;
    border-radius: 10px;
    width: 100%;
} 

.dados-beneficios { background: rgb(26,28,33);
background: linear-gradient(90deg, rgba(26,28,33,1) 0%, rgba(26,28,33,1) 90%, rgba(6,59,139,1) 90%, rgba(6,59,139,1) 74%, rgba(0,102,255,1) 74%, rgba(0,102,255,1) 100%);width: 100%;     padding: 10px 0; position:relative; display:block; float:left; padding: 0; }


.dados-beneficios h1 {
    font-size: 22px;     padding: 28px 10px;}



.dados-beneficios-2 {padding: 50px 20px}

.card-candidatar {
  padding: 50px 20px; margin-top: 32px;    height: auto;
    float: left; margin-bottom: 32px;
}
.vaga-footer h1 {width: 100%; font-size: 20px;}
.vaga-footer p {
    font-size: 18px;}

    .vaga-footer img {
    width: 100%;
    height: auto;
}


 }
/* ---------------------------------------------------*/