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

.section-selector-1 .col-text h2 {
    font-family: 'Saira Condensed', sans-serif;
    letter-spacing: 1px;
}
.section-selector-2 .cols-shadows .col-3 { box-shadow: rgba(207,216,220,0.9) 14px 14px 14px 0 }
.section-selector-3.theme-dark { 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.theme-dark .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-4 { background-color: var(--green-200) }
.section-selector-4 > h2 span.highlight { color: var(--gray-600) }


.section-selector-4 { font-family: 'Inter', sans-serif; }

.section-selector-4 h2 { font-size: var(--font-size-xxl); }

.section-selector-5.theme-light { background-color: var(--slate-050) }
.section-selector-5 .col-1 h2 span.highlight { color: var(--red-600) }


.section-selector-5.theme-light { font-family: 'Inter', sans-serif }

.section-selector-5 .col-1 h2 { font-size: var(--font-size-xxl); }
    
.section-selector-5 .flex-cols-4 > .col-4 > h3 { font-size: var(--font-size-xl); }


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

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

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