*
/* ===================================================
   HOME
=================================================== */

.home-body main,
.home-body header {

  position: relative;
  z-index: 1;

}

.home-hero {

  padding-top: 40px;
  padding-bottom: 48px;

  color: #FFFFFF;

}


/* Marca */

.home-brand {


  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 24px;

}



/* Título */

.home-title {

  max-width: 984px;
  margin: 0 auto;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;

  font-size: 40px;
  line-height: 110%;

  color: #FFFFFF;

  margin-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;

}


/* Subtítulo */

.home-subtitle {
  max-width: 984px;
  margin: 0 auto;


  font-family: 'Nunito Sans', sans-serif;
  font-weight: 400;

  font-size: 16px;
  line-height: 110%;

  color: #B2C7B5;
  padding-left: 16px;
  padding-right: 16px;

}

/* Hero Desktop */
.hero-image {
  display: none;
}

.hero-image img {
  width: 984px;
  height: auto;
}


/* Seção aplicações */

.home-apps {
  max-width: 984px;
  margin: 0 auto;
  padding-top: 8px;
  padding-bottom: 48px;
  padding-left: 16px;
  padding-right: 16px;
}


/* Label Aplicações */

.home-apps-label {

  display: block;

  font-size: 12px;
  color: #B2C7B5;

  margin-bottom: 0px;

}


/* Item */

.home-app-item {

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 0;

  text-decoration: none;

}
.home-app-item:hover {
    opacity: 0.8;
}

.home-app-left {

  display: flex;
  align-items: center;
  gap: 16px;

}


/* Nome do app */

.home-app-name {

  font-size: 20px;
  color: #FFFFFF;

}


/* Divider */

.home-divider {

  height: 1px;
  background-color: #FFFFFF;
  opacity: 0.1;

}

.home-body {
    
    background-color: #113431;
}

/* ===================================================
   HERO COM IMAGEM DE FUNDO
=================================================== */

.home-hero {
  position: relative;

  margin-left: -20px;
  margin-right: -20px;

  padding-left: 20px;
  padding-right: 20px;

  padding-top: 48px;
  padding-bottom: 258px;

  overflow: hidden;
}

.home-hero::before {

  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 296px;

  background-image: url("../img/seurui.png");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;

  z-index: 1;

}

.home-hero::after {

  content: "";

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 296px;

  background: linear-gradient(
    to bottom,
    rgba(17, 52, 49, 0) 0%,
    rgba(17, 52, 49, 0.6) 40%,
    rgba(17, 52, 49, 1) 100%
  );

  z-index: 2;

}

.home-hero > * {
  position: relative;
  z-index: 3;
}

.hero-image img {
  display: none;
  }

/* ===================================================
      MEDIA QUERIE DESKTOP
  =================================================== */

@media (min-width: 500px) {

    .home-body {

     background-image: url("../img/bg_index_desktop.png");
     background-position-y: 80px;

  }

  

  .header-home {
    background-color: #022119;
    padding-bottom: 8px;
    padding-top:2px;
    margin-bottom: 40px;
  }

  .hero-image {
  display: block;
  width: 100%;
  max-width: 984px;
  padding: 32px 16px 0 16px;
  margin:0 auto;
  }

  .hero-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .home-title {
    margin-top: 32px;
    font-size:99px;
    line-height:100%;
    text-transform: uppercase;
    
  }

  .home-body .site-header {

    background: none;

  }

  .home-body .home-hero::before,
  .home-body .home-hero::after {

    display: none;

  }


  /* ajustar hero para não precisar do espaço extra */

  .home-body .home-hero {

    padding-bottom: 24px;

  }

.home-hero {
  padding-top:0;
}

  .home-hero::before,
  .home-hero::after {
    height: 480px;
  }

  .home-hero {
    padding-bottom: 380px;
  }

 .home-body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 0;

    background: linear-gradient(
      135deg,
      rgba(15, 63, 56, 0.85) 0%,
      rgba(15, 63, 56, 0.65) 35%,
      rgba(15, 63, 56, 0.35) 60%,
      rgba(15, 63, 56, 0.15) 100%
    );
 }



}