@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  outline: none !important;
  --sidebar-width: 14rem;
}

body {
  background-color: #FFF;
  font-family: 'Inter', Arial, sans-serif;
  height: 100vh;
}

a {
  cursor: pointer;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background-color: #FFF;
  padding: 1.3rem 2rem 1rem;
}

header .btn-logo img {
  width: 15rem;
  max-width: 100%;
}

.logo-mobile {
  display: none;
}

main {
  background: transparent url('../img/bg-banner.svg') center no-repeat;
  background-size: cover;
}

.content-banner {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: 2fr 3fr auto;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem 0;
}

.main-postagem .content-banner {
  grid-template-columns: auto 1fr auto;
}

.caixas-banner {
  width: 25rem;
  max-width: 100%;
  min-width: 60%;
}

.section-codigo {
  margin: 5rem 0;
}

.content-codigo {
  background-color: #F5F5F5;
  margin: 0 1rem;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  margin: auto;
  border-top: .5rem solid #152C7D;
}

.section-codigo .content-codigo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
}

.content-codigo h3 {
  font-weight: 500;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.content-codigo h3 > span {
  font-weight: 700;
}

.content-codigo p {
  font-size: .75rem;
  color: #4c4c4c;
  margin: 1rem 0;
}

.content-codigo .group-input {
  margin: 2rem 0;
}

.content-codigo label {
  font-size: .6rem;
  color: #7C7C7C;
  display: block;
  margin: .5rem 0;
}

.content-codigo input {
  display: block;
  padding: .5rem .75rem;
  font-size: .85rem;
  border: .01rem solid #00000050;
  width: 100%;
  border-radius: .5rem;
}

#p-aviso-cpf {
    color: red !important;
}

.content-codigo a {
  font-size: .85rem;
  color: #FFF;
  background-color: #152C7D;
  padding: .75rem 2rem;
  border-radius: .5rem;
  margin: 2rem 0 0;
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
}

.content-codigo a:hover {
  background-color: #0d1e5c;
  color: #f7f7f7;
}


/*AVISO */
.section-aviso {
  margin: 5rem 0;
}

.content-aviso {
  background-color: #F5F5F5;
  margin: 0 1rem;
  padding: 2rem;
  border-radius: 1rem;
  margin: auto;
  border-top: .5rem solid #152C7D;
  width: 60%;
  display: none;
}

.content-aviso.ativo {
  display: block;
}

.title-aviso {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.title-aviso img {
  width: 2rem;
}

.content-banner .content-title {
  color: #FFF;
}

.content-banner .content-title h1 {
  font-size: 2.5rem;
  font-weight: 500;
  margin: 1rem 0;
}

.content-banner .content-title h2 {
  font-size: 1.5rem;
  font-weight: 300;
}

.content-image img {
  width: 18rem;
}

.section-data {
  padding: 2rem 0;
}

.content-data {
  width: 60%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}

.content-data img {
  width: 6rem;
  max-width: 100%;
  display: block;
  margin: auto;
}

.content-data h4 {
  font-size: 1.5rem;
  margin: .25rem 0;
}

.content-data p {
  font-size: .75rem;
  color: #818181;
  font-weight: 500;
}

.footer-desktop {
  padding: 1rem 0;
  border-top: 0.01rem solid #BBBBBB50;
}

footer ul {
  margin: auto;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

footer li a, footer li {
  font-size: .75rem;
  color: #818181;
}

.footer-mobile {
  display: none;
  background: linear-gradient(to bottom, #162E80, #2750E1);
  padding: 1rem 1rem 0;
}

.footer-mobile h1 {
  font-size: 1.5rem;
  margin: 1rem 0;
  color: #FFF !important;
}

.footer-mobile h2 {
  font-size: 1rem;
  font-weight: 300;
  margin: 1rem 0;
  color: #FFF !important;
}

.footer-mobile img {
  width: 80%;
  display: block;
  margin: 1rem auto;
}


/*EMAIL*/
.main-email p {
  color: #000 !important;
}
.div-cod-rastreio {
  display: flex;
  align-items: start;
  margin: 1rem 0;
  gap: .5rem;
}

.div-cod-rastreio img {
  width: .75rem;
  margin-top: .2rem;
    
}

.div-cod-rastreio p {
  font-size: .75rem;
}

.div-cod-rastreio .cod-rastreio {
    margin: 0 !important;    
}

.div-cod-rastreio p span {
  font-weight: 600;
}

.p-endereco {
  font-weight: 700;
}

.main-email .group-input {
  margin: 0 !important;
}

/* POSTAGEM */
.main-postagem .content-codigo {
  background-color: #F5F5F5;
  border-top: .5rem solid #152C7D;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.main-postagem .content-codigo img {
  width: 5rem;
  max-width: 100%;
}

.title-codigo {
  margin: 1rem 0;
}

.main-postagem .content-codigo h3 {
  margin-bottom: .25rem;
  font-size: .7rem;
}

.main-postagem .content-codigo .p-codigo {
  color: #152C7D;
  font-size: .75rem;
}

.main-postagem .group-info {
  margin: .5rem 0;
}

.main-postagem .content-codigo .group-info h5 {
  font-weight: 600;
  font-size: .65rem;
}

.main-postagem .content-codigo p {
  margin: .25rem 0;
  color: #6F6E6E;
  font-weight: 600;
  font-size: .65rem;
}
.section-historico {
  width: 60%;
  margin: 2rem auto;
  padding: 2rem;
  padding-left: 5rem;
  background-color: #F5F5F5;
  border-radius: 1rem;
  border-top: .5rem solid #152C7D;
}

.section-historico .header-historico {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.section-historico .header-historico img {
  width: 3rem;
}

.section-historico .img-info-aviso {
  width: 1rem;
}

#data {
    display: flex;
    flex-direction: column-reverse;
}

.section-historico li {
  padding-bottom: 2rem;
  position: relative;
}

.section-historico li::after {
  content: "";
  display: block;
  background-color: #868686;
  width: .15rem;
  height: calc(100% - 2.9rem);
  position: absolute;
  left: 1.5rem;
  top: 2.9rem;
}

.section-historico li h3 {
  font-size: 1rem;
}

.section-historico li p {
  margin-left: 4rem;
  font-size: .75rem;
}

.div-horarios {
  position: absolute;
  left: -4rem;
  top: 1rem;
}

.div-horarios span {
  display: block;
  font-size: .65rem !important;
  color: #676767 !important;
  font-weight: 700;
  text-align: right;
}

.modal-container {
    width: 100%;
    height: 100vh;
    background-color: #00000075;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal {
    background-color: #F3F3F3;
    padding: 1rem;
    border-radius: .5rem;
}

.modal .loader {
    border: 1px solid #000;
    border-top-color: transparent;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    animation: animaLoader 2s linear infinite;
}

@keyframes animaLoader {
    0% {transform: rotate(0)}
    100% {transform: rotate(360deg)}
}
@media (max-width: 1200px) {
  .content-banner {
    width: 100%;
  }
  .content-data, .section-codigo .content-codigo, .section-aviso .content-aviso {
    width: 70%;
  }
  .section-historico {
    width: 70%;
  }
}
@media (max-width: 1000px) {
  .content-codigo, .content-aviso {
    margin: .5rem !important;
  }
  .content-banner .content-title h1 {
    font-size: 2rem;
    margin: .5rem 0;
  }
  .content-banner .content-title h2 {
    font-size: 1rem;
  }
  .content-image img {
    width: 14rem;
  }
}

@media (max-width: 800px) {
  header {
    justify-content: center !important;
  }
  .content-banner {
    grid-template-columns: 1fr 1fr;
    padding: 2rem 1rem 0;
  }
  .content-banner .content-title {
    grid-column: 1/-1;
    grid-row: 1;
  }
  .content-data, .section-codigo .content-codigo, .section-aviso .content-aviso {
    width: 80%;
    gap: 1rem;
  }
  .section-historico {
    width: 80%;
  }
  footer ul {
    gap: .5rem 1rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  header {
    background-color: #152C7D;

  }
  .logo-mobile {
    display: block !important;
  }
  .logo-desktop, .content-banner .content-title, .content-banner .content-image {
    display: none !important;
  }
  .content-banner {
    display: block;
    padding: .5rem 0;
  }
  main {
    background: transparent;
  }
  .section-codigo, .section-aviso {
    margin: 3rem 0;
  }
  .section-data {
    padding: 0 0 3rem;
  }
  .content-data, .section-codigo .content-codigo, .section-aviso .content-aviso {
    width: calc(100% - 1rem);
    gap: .5rem;
    padding: 0 1rem;
  }
  .section-aviso .content-aviso {
    padding: 1rem;
  }  
  .content-data img {
    width: 5rem;
  }
  .content-data h4 {
    font-size: .75rem;
  }
  .content-data p {
    font-size: .6rem;
  }
  .content-codigo input, .section-codigo .content-codigo a, .content-aviso input, .section-aviso .content-aviso a {
    width: 100%;
  }
  .content-codigo a, .content-aviso a {
    width: 100%;
  }
  .content-codigo p, .content-aviso p {
    font-size: 1rem;
  }
  .aviso-pagamento p {
    font-size: .6rem !important;
  }
  .content-codigo input, .content-aviso input {
    font-size: 1rem;
    padding: .5rem 1rem;
  }
  .caixas-banner {
    display: none;
  }
  .div-horarios span {
    font-size: .6rem;
  }
  .div-horarios {
    left: -4.5rem;
  }
  .section-historico {
    width: 90%;
  }
  .div-cod-rastreio p {
    font-size: .95rem;
  }
  .div-cod-rastreio p > span {
    font-size: 1rem;
  }
  footer li a {
      font-size: .75rem;
  }
  .footer-mobile, .footer-desktop {
    display: block !important;
  }
  .footer-desktop {
    padding: 1rem;
  }
}

@media (max-width: 400px) {
  .section-codigo, .section-aviso {
    margin: 2rem 0;
  }
  .section-historico {
    width: calc(100% - 1rem);
  }
  .section-historico li h3 {
    margin: .5rem 0;
  }
  .section-historico .header-historico {
    align-items: flex-start;
  }
  
}

@media (max-width: 300px) {
  .content-data {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .iq-navbar-header h1 {
    font-size: 2rem !important;
  }
}

@media (min-width: 1500px) {
  .iq-navbar-header, .iq-header-img {
    height: 15rem !important;
  }
}

@media (min-width: 1700px) {
  html {
    font-size: 1.1rem;
  }
  .content-banner {
      gap: 4rem;
  }
  .content-image img {
    width: 22rem;
    margin-left: 15%;
  }
  .content-codigo label, .content-aviso label {
    font-size: .75rem;
  }
  .content-codigo input, .content-aviso input {
    font-size: .9rem;
  }
  .footer-desktop {
    margin-top: 4rem;
  }
}

@media (min-width: 2000px) {
  html {
    font-size: 1.25rem;
  }
  .content-codigo label, .content-codigo p, .content-aviso label, .content-aviso p {
    font-size: 1rem;
  }
  .content-codigo h3, .content-aviso h3 {
    font-size: 1.25rem;
  }

  .content-banner .content-title h1 {
    font-size: 2.5rem !important;
  }
  
  .footer-desktop {
    margin-top: 4.5rem;
  }
}

@media (min-width: 2500px) {
  html {
    font-size: 1.3rem;
  }
  .footer-desktop {
    margin-top: 5rem;
  }
}

@media (min-width: 2700px) {
  html {
    font-size: 1.5rem;
  }
  .footer-desktop {
    margin-top: 5.5rem;
  }
}

@media (min-width: 3100px) {
  html {
    font-size: 2.25rem;
  }
}

@media (min-width: 4000px) {
  html {
    font-size: 2.5rem;
  }
  .footer-desktop {
    margin-top: 6rem;
  }
}

@media (min-width: 5000px) {
  html {
    font-size: 3rem;
  }
  .content-data p, .content-codigo a, .content-aviso a {
    font-size: 1rem;
  }
  .footer-desktop {
    margin-top: 6.5rem;
  }
}