/* Common heading styles from BaseLayoutElement.styles */
/* Layout Heading Title and Description Styles */

.layout-heading-title h1,
.layout-heading-title h2,
.layout-heading-title h3,
.layout-heading-title h4,
.layout-heading-title h5,
.layout-heading-title h6,
.layout-heading-description h1,
.layout-heading-description h2,
.layout-heading-description h3,
.layout-heading-description h4,
.layout-heading-description h5,
.layout-heading-description h6 {
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin: 0;
}


.layout-heading-title.animate,
.layout-heading-title.animate h1,
.layout-heading-title.animate h2,
.layout-heading-title.animate h3,
.layout-heading-title.animate h4,
.layout-heading-title.animate h5,
.layout-heading-title.animate h6,
.layout-heading-description.animate h1,
.layout-heading-description.animate h2,
.layout-heading-description.animate h3,
.layout-heading-description.animate h4,
.layout-heading-description.animate h5,
.layout-heading-description.animate h6 {
  transform: translateY(0);
  opacity: calc(var(--general-title-opacity, 100) / 100);
}

.layout-heading-title  {
  font-size: 5rem;
  margin-bottom: 2.5rem;
}

.layout-heading-description p {
  margin-top: 0;
  margin-bottom: 0;
}

.layout-heading-button-group {
  display: flex;
  gap: 18px;
  margin-top: 2rem;
}

.layout-heading-button-group.button-align-left {
  justify-content: flex-start;
}

.layout-heading-button-group.button-align-center {
  justify-content: center;
}

.layout-heading-button-group.button-align-right {
  justify-content: flex-end;
}

.layout-heading-button {
  border-radius: 4px;
  padding: 14px 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 160%;
  letter-spacing: -0.18px;
  text-transform: capitalize;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.layout-heading-button.button-1 {
  background: var(--button1-background, #685dff);
  color: var(--button1-text, #ffffff);
  border: 1px solid var(--button1-border, transparent);
}

.layout-heading-button.button-1:hover {
  background: var(--button1-hover, rgb(72, 60, 250));
  color: var(--button1-text-hover, #ffffff);
  border-color: var(--button1-border-hover, var(--button1-border, transparent));
}

.layout-heading-button.button-2 {
  background: var(--button2-background, #685dff);
  color: var(--button2-text, #ffffff);
  border: 1px solid var(--button2-border, transparent);
}

.layout-heading-button.button-2:hover {
  background: var(--button2-hover, rgb(72, 60, 250));
  color: var(--button2-text-hover, #ffffff);
  border-color: var(--button2-border-hover, var(--button2-border, transparent));
}

.layout-heading-button.button-3 {
  background: var(--button3-background, #685dff);
  color: var(--button3-text, #ffffff);
  border: 1px solid var(--button3-border, transparent);
}

.layout-heading-button.button-3:hover {
  background: var(--button3-hover, rgb(72, 60, 250));
  color: var(--button3-text-hover, #ffffff);
  border-color: var(--button3-border-hover, var(--button3-border, transparent));
}
@media screen and (max-width: 1024px) {
  .layout-heading-title  {
    font-size: 4rem;
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .layout-heading-title  {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }
}