/* ========== background... ========== */

.background {
  overflow: hidden;
  /* position: relative; */
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}
.temp {
  background-color: #e5e5f7;
  opacity: 0.2;
  background-image: radial-gradient(#444cf7 1px, #e5e5f7 1px);
  background-size: 15px 15px;

  /* ========== temp ========== */
  font-size: 10em;
  width: 10em;
  /* height: 10em; */
  aspect-ratio: 1/1;
  border-radius: 50%;
  position: absolute;
  top: -5em;
  left: -5em;
  z-index: -1;
}
.line {
  background-color: #e5e5f7;
  opacity: 0.1;
  background: repeating-linear-gradient(-45deg, #444cf7, #444cf7 2px, #e5e5f7 2px, #e5e5f7 10px);

  /* ==========  ========== */
  font-size: 2em;
  content: "";
  width: 10em;
  height: 10em;
  background-color: peru;
  position: absolute;
  z-index: -1;
  right: 5em;
  top: 80vh;
  transform: rotate(60deg);
}
.bg-logo {
  position: absolute;
  opacity: 0.2;
  right: 0;
  top: 40vh;
  z-index: -1;
}
/* ========== background. ========== */

/* ========== header... ========== */
header {
  position: relative;
  text-align: center;
}
header .logo {
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-style: italic;
}
header .logo img {
  width: 3em;
  /* height: 4em; */
  aspect-ratio: 1/1;
}
header .logo .icon-logo-petulap {
  font-size: 4em;
}
header .logo h2 {
  font-size: 2em;
}
header .center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}
header .center i {
  font-size: 2em;
}
@media (max-width: 40rem) {
  header .logo {
    padding: 1em;
    font-size: 1.5em;
  }
  header .logo .center {
    flex: 1 1 auto;
  }
}

.description {
  font-style: italic;
  font-size: inherit;
}
.description h2 {
  font-size: 1.8em;
  /* font-size: 4vw; */
  /* font-weight: 800; */
  background: #121fcf;
  background: linear-gradient(to right, #2f2f2f 0%, #172ccc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  gap: 10vw;
  margin-bottom: 3em;
}
.whatsapp-number {
  display: flex;
  justify-content: center;
  gap: 2em;
  font-size: 2.5em;
  margin: 1em 0 2em;
}
.whatsapp-number a {
  /* color: #01a501; */
  color: #367cfe;
  text-decoration: none;
}
.whatsapp-number h3 {
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  gap: 0.5em;
  font-size: inherit;
}

.whatsapp-number .icon-whatsapp {
  /* color: #01a501; */
  /* color: inherit; */
  font-size: inherit;
}
@media (max-width: 40rem) {
  .whatsapp-number {
    font-size: 1.1em;
  }
}

.contact h4 {
  max-width: 30ch;
}
.social .icons {
  font-size: 2em;
  display: flex;
  gap: 1em;
  justify-content: center;
}
.social .icons a {
  font-size: 1.5em;
}
.ads {
  display: flex;
  justify-content: center;
  gap: 1em;
  /* max-width: 50ch; */
  margin: 3vh auto;
  background-color: #367cfe;
  color: white;
  padding: 3em 2em;
}
.ads aside {
  display: flex;
  text-align: left;
  gap: 1em;
  justify-content: center;
  align-items: center;
  /* max-width: 20ch; */
}
.ads i {
  font-size: 4em;
}
@media (max-width: 40rem) {
  .ads i {
    font-size: 3em;
    /* margin-right: 0.5em; */
  }
}

/* ========== header. ========== */