:root {
  --black: #000000;
  --black-tranp: #000000c6;
  --gray: #000000aa;
  --gray-light: #e5e5e5;
  --gray-light-light: #ededed;
  --gray-light-light-transp: #ededed79;
  --gray-light-light-transp2: #edededb6;
  --gray-light-medium: #8b8b8b;
  --gray-medium: #585858;
  --gray-medium-dark: #373737;
  --gray-dark: #000000bd;
  --blue-dark: #00377f;
  --blue-light1: #549eff;
  --blue-light2: #45aeff;
  --white: #ffffff;
  --white-transp: #ffffff8d;
  --white-transp2: #ffffff3f;
  --blue: #0b80c5;
  --pink: #ed1e79;
  --blue-water: #44939e;
  --blue-soft: #e6eff8;
  --green: #28f40b;
  --yellow: #ffff00;
  --transp: #ffffff00;
}

.btn-blue {
  background-color: var(--blue);
  color: var(--white);
  font-weight: 500;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5); /* azul */
}

.focus\:border-blue-500:focus {
  border-color: rgb(59 130 246); /* azul */
}

.hover\:border-gray-400:hover {
  border-color: rgb(156 163 175); /* cinza */
}
input:focus {
  outline: none;
  border-color: #3b82f6; /* azul-500 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); /* ring azul */
}
input:hover {
  border-color: #9ca3af; /* cinza-400 */
}

/* banner */
.banner-01 {
  height: 470px;
  background-image: url(../img/banner.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.banner-01 main {
  width: 623px;
  max-width: 100%;
}
.banner-01 main h1 {
  color: white;
  font-size: 48px;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: 0.3px;
}
.banner-01 main p {
  color: white;
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  margin: 16px 0px;
}
@media (max-width: 768px) {
  .banner-01 {
    height: 500px;
  }

  .banner-01 main h1 {
    font-size: 32px;
  }

  .banner-01 main p {
    font-size: 14px;
  }

  #session5 > div > div:nth-child(1) button {
    margin: 0 auto;
  }
}