/* styles.css */
/*========================================================================
  MAIN STYLES IMPORT FILE
========================================================================*/

/* Import global variables */
@import url("base/variables.css");

/*========================================================================
  SPECIFIC ROLE CLASSES
========================================================================*/
/* Title */
.title {
  color: var(--Grayscale-900, #121111);
  text-align: center;
  font-family: var(--font-poppins);
  font-size: var(--fs-large-title);
  font-style: normal;
  font-weight: var(--fw-semibold);
}

/* Page Subtitle */
.sub-title {
  color: var(--Grayscale-800, #242424);
  text-align: center;
  font-family: var(--font-roboto);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-regular);
}
/* Section Subtitle */
.section-sub-title {
  color: var(--Grayscale-800, #242424);
  font-family: var(--font-roboto);
  font-size: var(--fs-headline);
  font-weight: var(--fw-regular);
}

/* Section Heading */
.section-heading {
  color: var(--Marian-900);
  font-family: var(--font-poppins);
  font-size: var(--fs-title-2);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
}

.hidden{
  display: none;
}

/* Add consistent padding to main elements */
@media (max-width: 768px) {
  .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}