/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 12 2026 | 14:16:11 */
/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {

    /* ---- Font Family ---- */
    --font-family:                  'Hanken Grotesk', sans-serif;
	--font-family-body:                  	'Open Sans', sans-serif;

    /* ---- Font Sizes ---- */
    --font-size-h1:                 clamp(2.625rem, 1.25rem + 3.667vw, 4rem);
    --font-size-h2:                 clamp(2rem, 1.5rem + 1.333vw, 2.5rem);
    --font-size-h3:                 clamp(1.75rem, 1.5rem + 0.667vw, 2rem);
    --font-size-h4:                 clamp(1.375rem, 1.25rem + 0.333vw, 1.5rem);
    --font-size-h5:                 clamp(1.125rem, 1rem + 0.333vw, 1.25rem);
    --font-size-h6:                 1rem;
    --font-size-tagline:            clamp(1.25rem, 1rem + 0.667vw, 1.5rem);
    --font-size-body-large:         clamp(1.063rem, 1rem + 0.167vw, 1.125rem);
    --font-size-body:               1rem;
    --font-size-small:              0.875rem;
    --font-size-caption:            0.75rem;
    --font-size-card:               clamp(1.25rem, 1.125rem + 0.333vw, 1.375rem);

    /* ---- Font Weights ---- */
    --font-weight-regular:          400;
    --font-weight-semibold:         600;
    --font-weight-bold:             700;

    /* ---- Line Height & Letter Spacing ---- */
    --line-height-default:          1.5;
    --letter-spacing-tight:         -0.003em;
    --letter-spacing-normal:        0;

    /* ---- Brand Colours ---- */
    --brand-primary:                #937CD8;
    --brand-primary-dark:           #3B375A;
    --brand-pomelo:                 #E5A6AC;
    --brand-sage:                   #4C7562;
    --brand-peach:                  #EFA77F;
    --brand-peach-dark:             #6D4B32;

    /* ---- UI Colours ---- */
    --color-white:                  #FFFFFF;
    --color-black:                  #000000;
	--color-text-title:             #3B375A;
    --color-text:                   #000000;
    --color-text-light:             #7F7D7A;
    --color-background:             #FFFFFF;
    --color-background-alt:         #F0F0EA;
    --color-background-peach:       #F8E7D2;
    --color-background-primary:     #F5F3FF
    --color-border:                 #D8D8D8;

    /* ---- Status Colours ---- */
    --color-success:                #4C7562;
    --color-warning:                #EFA77F;
    --color-error:                  #DC2626;
    --color-info:                   #937CD8;

    /* ---- Gradients ---- */
    --gradient-primary:             linear-gradient(360deg, #937CD8 49.52%, #D5C8E8 100%);
    --gradient-primary-light:       linear-gradient(360deg, #937CD8 0%, #F2F2EF 100%);
    --gradient-pomelo:              linear-gradient(270deg, #E5A6AC 0%, #F4E6E9 100%);
    --gradient-peach:               linear-gradient(270deg, #EFA77F 0%, #F5E7D4 100%);
    --gradient-sage:                linear-gradient(270deg, #4C7562 0%, #E4EEDA 100%);

    /* ---- Spacing ---- */
    --section-large:                clamp(4rem, 2rem + 5.333vw, 6rem);
    --section-small:                clamp(2rem, 1rem + 2.667vw, 3rem);
	--content-gap:                  clamp(1.5rem, 1rem + 1.333vw, 2rem);
    --card-padding:                 clamp(1.5rem, 1rem + 1.333vw, 2rem);
    --column-gutter:                clamp(1.5rem, 1rem + 1.333vw, 2rem);

    /* ---- Layout ---- */
    --container-standard:           1340px;
    --container-narrow:             900px;
    --container-blog:               760px;
    --container-sidebar:            320px;
    --grid-gap:                     clamp(1.5rem, 1rem + 1.333vw, 2rem);

    /* ---- Border Radius ---- */
    --radius-button:                24px;
    --radius-card:                  10px;
    --radius-image:                 16px;

    /* ---- Button Padding ---- */
    --btn-padding:                  10px 20px;
}

/* ============================================
   BASE TYPOGRAPHY
   ============================================ */

h1 {
    font-family: var(--font-family);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-title);
}

h2 {
    font-family: var(--font-family);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-title);
}

h3 {
    font-family: var(--font-family);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text);
}

h4 {
    font-family: var(--font-family);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text);
}

h5 {
    font-family: var(--font-family);
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text);
}

h6 {
    font-family: var(--font-family);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text);
}

p {
    font-family: var(--font-family-body);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
    color: var(--color-text);
}

small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-default);
    color: var(--color-text-light);
}

/* ---- Utility Classes ---- */

.text-tagline {
	font-family: var(--font-family-body);
    font-size: var(--font-size-tagline);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
	color: var(--color-text-title);
}

.text-body-large {
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
	color: var(--color-text);
}

.text-caption {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-default);
    color: var(--color-text-light);
}

.text-card {
    font-size: var(--font-size-card);
    line-height: var(--line-height-default);
}

/* ============================================
   Backgrounds 
   ============================================ */

.background-primary-ripple{
    background-image: url(https://www.explorecosmo.com/wp-content/uploads/2025/12/cosmo-cnt-hm-1.webp) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.background-primary{
    background: var(--color-background-primary) !important;
}

/* ============================================
   BASE BUTTONS
   ============================================ */

/* Primary */
a.btn-primary,
.btn-primary .wpcf7-submit{
    background-color: var(--brand-primary-dark);
    color: var(--color-white);
    border: 1px solid var(--brand-primary-dark);
    border-radius: var(--radius-button);
    padding: var(--btn-padding);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-default);
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

a.btn-primary:hover,
.btn-primary .wpcf7-submit:hover{
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
}

/* ============================================
   Sizing
   ============================================ */
.section-lg{
	padding-top: var(--section-large) !important;
	padding-bottom: var(--section-large) !important;
}
.section-sm{
	padding-top: var(--section-small) !important;
	padding-bottom: var(--section-small) !important;
}
.content-gap{
	padding-bottom: var(--content-gap) !important;
}
.pad-16{
	padding-bottom: 1rem;
}
.card-pad{
	padding: var(--card-padding) !important;
}


/* ============================================
   Custom Styles
   ============================================ */
.section-flex {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--grid-gap);
}
.section-container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 50%;
}
.section-container h1 span{
    color: var(--brand-primary);
}
.register-school-form{
	border: 1px solid #937CD8;
	box-shadow: 0px 1px 2px 0px #0000000D;
	background: var(--color-background);
	border-radius: 24px;
}
.section-flex-75{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 75%;
}
.section-flex-25{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 25%;
}