/* ========================== */
/* Fundo da página            */
/* ========================== */
body {
  margin: 0;
  padding: 0;
  background: url("bg.jpg") no-repeat center center fixed;
  background-color: #000;
  background-size: cover;
  font-family: Arial, sans-serif;
}

/* Container principal */
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
  padding: 0 70px 70px 20px; /* Margens 50px só para lados e rodapé */
  box-sizing: border-box;
}

/* ========================== */
/* Topo: Logo e Social        */
/* ========================== */
.topo {
  display: flex;
  justify-content: space-between; /* logo esquerda, social direita */
  align-items: center;
  padding: 0; /* Sem margens extras no topo */
}

.logo-img {
  width: 350px;
  height: auto;
}

.social {
  display: flex;
  margin-top: -230px;
  align-items: center;
  gap: 10px;
}

.social span {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}


/* ========================== */
/* Rodapé                     */
/* ========================== */
.rodape {
  display: flex;
  justify-content: flex-end; /* loader direita */
  align-items: center;
  margin-top: 50px; /* Margem de 50px entre conteúdo e rodapé */
}

/* ========================== */
/* Loader (rodapé direita)    */
/* ========================== */
#loader-wrapper {
  position: relative !important;
  background: transparent !important;
  width: 150px !important;
  height: 150px !important;
}

.loader {
  width: 150px;
  height: 150px;
  border: 1px #fff solid;
  position: relative !important;
  border-radius: 50%;
  margin: 0 auto !important;
}

.loader .loading {
  font-size: 10px;
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 14px;
  font-family: 'Century Gothic', sans-serif;
  font-style: italic;
  left: 0;
  top: 50%;
  margin-top: 20px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}

/* Circles */
.loader-circle-1 {
  width: 138px;
  height: 138px;
  left: 5px;
  top: 5px;
  border: 1px #fff solid;
  border-radius: 50%;
  position: absolute;
  border-right-color: transparent;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

.loader-circle-2 {
  width: 126px;
  height: 126px;
  left: 5px;
  top: 5px;
  border: 1px transparent solid;
  border-radius: 50%;
  position: absolute;
  border-right-color: #e81512;
  -webkit-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
}

/* Lines e Sublines */
.loader .line { width: 10px; height: 2px; background: #fff; position: absolute; }
.loader .line:nth-child(1){left: 16px; top: 50%; margin-top: -1px;}
.loader .line:nth-child(2){transform: rotate(45deg); left: 33px; top: 33px;}
.loader .line:nth-child(3){top: 16px; left: 50%; width: 2px; height: 10px;}
.loader .line:nth-child(4){transform: rotate(135deg); right: 33px; top: 33px;}
.loader .line:nth-child(5){right: 16px; top: 50%; margin-top: -1px;}
.loader .line:nth-child(6){transform: rotate(45deg); right: 33px; bottom: 33px; background: #e81512;}

.loader .subline{position: absolute; width: 3px; height: 2px; background: #fff;}
.loader .subline:nth-child(7){transform: rotate(22.5deg); left: 21px; top: 50px;}
.loader .subline:nth-child(8){transform: rotate(67.5deg); left: 50px; top: 21px;}
.loader .subline:nth-child(9){transform: rotate(112.5deg); right: 50px; top: 21px;}
.loader .subline:nth-child(10){transform: rotate(157.5deg); right: 21px; top: 50px;}
.loader .subline:nth-child(11){transform: rotate(22.5deg); right: 20px; bottom: 49px; background: #e81512;}

/* Needle */
.loader .needle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px #fff solid;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -8px 0 0 -8px;
  z-index: 1;
  -webkit-animation: pegIt 3s infinite ease-in-out;
  animation: pegIt 3s infinite ease-in-out;
}
.loader .needle:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3.5px 50px 3.5px 0;
  border-color: transparent #e81512 transparent transparent;
  position: absolute;
  right: 50%;
  top: 50%;
  margin: -3.5px 0 0 0;
  border-radius: 0 50% 50% 0;
}

/* Keyframes */
@keyframes pegIt {0%{transform:rotate(0deg);}16%{transform:rotate(75deg);}25%{transform:rotate(55deg);}30%{transform:rotate(90deg);}36%{transform:rotate(170deg);}42%{transform:rotate(150deg);}50%{transform:rotate(227deg);}100%{transform:rotate(0deg);}}
@-webkit-keyframes pegIt {0%{-webkit-transform:rotate(0deg);}16%{-webkit-transform:rotate(75deg);}25%{-webkit-transform:rotate(55deg);}30%{-webkit-transform:rotate(90deg);}36%{-webkit-transform:rotate(170deg);}42%{-webkit-transform:rotate(150deg);}50%{-webkit-transform:rotate(227deg);}100%{-webkit-transform:rotate(0deg);}}
@-webkit-keyframes spin {0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}
@keyframes spin {0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}