/*
 * Type Scale with Base: 16px, Ratio: 1.25
 * Generated with TypeScale Generator
 */

body {
    font-family: 'Poppins', sans-serif;
    /*background: linear-gradient(135deg, #ffffff 30%, #dddddd 100%);*/
    background: linear-gradient(135deg, #ffffff 30%, rgb(60, 0, 163, 0.23) 100%);
    background-repeat: repeat;
    background-attachment: fixed;
}

:root {
    --base-font-size: 16px;
    --scale-ratio: 1.25;
    --font-family: Poppins, sans-serif;
    --h1-size: 49px;
    --h1-line-height: 110%;
    --h1-letter-spacing: -2%;
    --h2-size: 39px;
    --h2-line-height: 110%;
    --h2-letter-spacing: -2%;
    --h3-size: 31px;
    --h3-line-height: 130%;
    --h3-letter-spacing: -1.5%;
    --h4-size: 25px;
    --h4-line-height: 130%;
    --h4-letter-spacing: -1.5%;
    --h5-size: 20px;
    --h5-line-height: 150%;
    --h5-letter-spacing: -0.5%;
    --h6-size: 18px;
    --h6-line-height: 150%;
    --h6-letter-spacing: 0%;
    --body-lg-size: 17px;
    --body-lg-line-height: 150%;
    --body-lg-letter-spacing: 0.5%;
    --body-size: 16px;
    --body-line-height: 150%;
    --body-letter-spacing: 0.5%;
    --link-size: 15px;
    --link-line-height: 150%;
    --link-letter-spacing: 0.5%;
    --caption-size: 14px;
    --caption-line-height: 160%;
    --caption-letter-spacing: 0.5%;
    --primary-color: #3c00a3;
    --primary-color-accent: #4400b8;
    --secondary-color: #f7931e;
    --secondary-color-accent: #f9a046;
}



.h1 {
    font-size: var(--h1-size);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
}

.h2 {
    font-size: var(--h2-size);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
}

.h3 {
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
}

.h4 {
    font-size: var(--h4-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
}

.h5 {
    font-size: var(--h5-size);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
}

.h6 {
    font-size: var(--h6-size);
    line-height: var(--h6-line-height);
    letter-spacing: var(--h6-letter-spacing);
}

.body-lg {
    font-size: var(--body-lg-size);
    line-height: var(--body-lg-line-height);
    letter-spacing: var(--body-lg-letter-spacing);
}

.body {
    font-size: var(--body-size);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
}

.link {
    font-size: var(--link-size);
    line-height: var(--link-line-height);
    letter-spacing: var(--link-letter-spacing);
}

.caption {
    font-size: var(--caption-size);
    line-height: var(--caption-line-height);
    letter-spacing: var(--caption-letter-spacing);
}


/* Global typography styles for all text elements */
* {
    font-family: var(--font-family);
    color: inherit;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-color-accent); /* Slightly darker shade for hover effect */
    transform: translateY(-2px);
}

.btn-primary:active {
    background-color: var(--primary-color-accent); /* Even darker shade for active state */
    transform: translateY(0);
}


.btn-outline-primary {
    background-color: transparent;
    color: var(--primary-color);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: bold;
    border: 2px solid var(--primary-color);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color-accent); /* Same green as btn-hero */
    color: #ffffff; /* White text */
    transform: translateY(-2px);
}

.btn-outline-primary:active {
    background-color: var(--primary-color-accent); /* Darker shade for active state */
    border-color: var(--primary-color-accent);
    transform: translateY(0);
}

.text-primary {
    color: var(--primary-color) !important;
}

.bg-hazy {
    background: #ececec;
}

.bg-brand {
    background: var(--primary-color) !important;
    color: white !important;
}

.text-brand {
    color: var(--primary-color) !important;
}

.bg-brand-outline {
    border:2px solid var(--primary-color) !important;
    background: transparent !important;
    color: var(--primary-color) !important;
}