/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/events/event-why-attend/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.wp-block-event-why-attend-event-why-attend {
  background-color: #21759b;
  color: #fff;
  padding: 2px;
}

.why-attend--block {
  position: relative;
  padding-top: var(--spacing-9x);
  padding-bottom: var(--spacing-9x);
}
@media only screen and (max-width: 767px) {
  .why-attend--block {
    padding-top: var(--spacing-5x);
    padding-bottom: var(--spacing-5x);
  }
}
.why-attend--wrap {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .why-attend--wrap {
    display: block;
  }
}
.why-attend--img {
  width: 274px;
}
.why-attend--content {
  width: calc(100% - 274px);
  padding-left: var(--spacing-10x);
}
@media only screen and (max-width: 767px) {
  .why-attend--content {
    margin-top: var(--spacing-10x);
    width: 100%;
    padding-left: 0;
  }
}
.why-attend--content .creativepro-h2 {
  margin-top: 0;
  margin-bottom: var(--spacing-5x);
}
@media only screen and (max-width: 767px) {
  .why-attend--content .creativepro-h2 {
    font-size: 36px;
    font-weight: 800;
    line-height: 44px;
  }
}
.why-attend--content p {
  font-size: 30px;
  font-weight: var(--fw-normal);
  line-height: 38px;
  color: #B2CCFF;
  font-family: var(--paragraph-qaulion-font);
}
@media only screen and (max-width: 1199px) {
  .why-attend--content p {
    font-size: 24px;
    line-height: 1.3;
  }
}
@media only screen and (max-width: 1023px) {
  .why-attend--content p {
    font-size: 20px;
  }
}

/*# sourceMappingURL=style-index.css.map*/