@font-face {
  font-family: "Rosario";
  src: url("../fonts/Rosario-Regular.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #f4f5ff;
  font-family: "Rosario", sans-serif;
  font-size: 16px;
  line-height: 1.7;
}

.active {
  border-bottom: 2px solid #38b2ac; /* Teal-300 color */
}

#mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 50;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#mobile-menu.open {
  display: flex;
}

#mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#mobile-menu li {
  margin: 1rem 0;
}

#mobile-menu a {
  font-size: 1.5rem;
  color: white;
  text-decoration: none;
}

.telegram {
  fill: #0088cc;
}
.whatsapp {
  fill: #25d366;
}
.viber {
  fill: #7360f2;
}
.facebook {
  fill: #1877f2;
}
.x {
  fill: #1da1f2;
}
.mail {
  fill: #d44638;
}

/* SEO-friendly typography for homepage content */
.seo-typography {
  color: #111827;
}

.seo-typography p,
.seo-typography li {
  font-size: 1.0625rem; /* 17px on mobile */
  line-height: 1.9;
}

.seo-typography h1 {
  font-weight: 800;
  line-height: 1.25;
  font-size: 2.125rem; /* 34px on mobile */
}

.seo-typography h2 {
  font-weight: 700;
  line-height: 1.3;
  font-size: 1.75rem; /* 28px on mobile */
}

.seo-typography h3 {
  font-weight: 700;
  line-height: 1.35;
  font-size: 1.375rem; /* 22px on mobile */
}

@media (min-width: 1024px) {
  .seo-typography p,
  .seo-typography li {
    font-size: 1.125rem; /* 18px */
  }
  .seo-typography h1 {
    font-size: 2.5rem; /* 40px */
  }
  .seo-typography h2 {
    font-size: 2rem; /* 32px */
  }
  .seo-typography h3 {
    font-size: 1.5rem; /* 24px */
  }
}