/* Add your custom CSS here */
.section-selector-1 {
  background-color: var(--lime-400);
}

.section-selector-1.cols-2-half .col-2 h2 {
  font-family: "Saira Condensed", sans-serif;
  letter-spacing: 1px;
  font-size: calc(28px + (42 - 28) * ((100vw - 320px) / (1140 - 320)));
  margin-top: 32px;
  margin-bottom: 0;
}

.section-selector-1.cols-2-half .col-2 h2 {
  font-family: "Saira Condensed", sans-serif;
  letter-spacing: 1px;
  font-size: calc(28px + (42 - 28) * ((100vw - 320px) / (1140 - 320)));
  margin-top: 32px;
  margin-bottom: 0;
}

.section-selector-2 {
  font-family: "Playfair Display", serif;
}

.section-selector-3 {
  background-color: var(--trend-800);
}
.section-selector-3 .col-1 h2 {
  color: var(--sky-300);
}
.section-selector-3 .col-1 h3 {
  color: var(--slate-200);
}
.section-selector-3 .col-3 h3 {
  color: var(--sky-300);
}
.section-selector-3 .col-3 p {
  color: var(--slate-200);
}
.section-selector-3 .col-3 li {
  color: var(--slate-200);
}
.section-selector-3.theme-light .cols-background .col-3 {
  background-color: var(--trend-700);
}
.section-selector-3 div[class^="flex-cols-"] div[class^="col-"] figure.icon {
  color: var(--sky-300);
}

.section-selector-3 {
  background-image: linear-gradient(to top right, #0f172a, #1c2c51);
  font-family: "Inter", sans-serif;
}

.section-selector-3 .col-1 h2 {
  font-weight: 200;
}
.section-selector-3 .col-3 h3 {
  font-weight: 400;
}


.section-selector-3
  .flex-cols-3
  > .col-3
  > figure.icon.icon-small
  i[class^="la"] {
  font-size: 60px;
  margin-bottom: -24px !important;
}

.section-selector-3 .col-1 > h2 {
  font-size: calc(28px + (64 - 28) * ((100vw - 320px) / (1140 - 320)));
}

.section-selector-3 .cols-padding div[class^="col-"] figure.icon-left i {
  margin-left: 16px;
}
.section-selector-3 div[class^="col-"] figure.icon {
  margin-bottom: 20px;
}


.section-selector-4 {
  background-color: var(--green-200);
}
.section-selector-4 > h2 span.highlight {
  color: var(--gray-600);
}
.section-selector-4 {
  font-family: "Inter", sans-serif;
  background-color: #73c9b7;
}
.section-selector-4 > h2 span.highlight {
  color: var(--gray-700);
}

.section-selector-4.w-1140px h2 {
  font-size: calc(22px + (42 - 22) * ((100vw - 320px) / (1140 - 320)));
  color: black;
  line-height: 1.3;
  max-width: 30ch;
}
.section-selector-5 .col-1 h2 span.highlight {
  color: var(--red-600);
}

.section-selector-5 .flex-cols-4 > .col-4 > h3 {
  font-size: calc(18px + (56 - 18) * ((100vw - 768px) / (1920 - 768)));
}

.section-selector-5 {
  background-color: var(--slate-050);
  font-family: "Inter", sans-serif;
}

.section-selector-6 div[class^='flex-cols-'] div[class^='col-'] { background-color: var(--green-200) }

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(1) {
  background-color: var(--green-200);
}

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(2) {
  background-color: var(--blue-200);
}

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(3) {
  background-color: var(--red-300);
  
}
.section-selector-6.theme-light .flex-cols-3 .col-3 {
  background-color: var(--green-200)
}

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(1) {
  background-color: var(--green-200)
}

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(2) {
  background-color: var(--blue-200)
}

.section-selector-6.theme-light .flex-cols-3 .col-3:nth-child(3) {
  background-color: var(--red-300)
}