/* Custom CSS for the PDK */
:root {
    /* Font size */
    --H1-font-size: clamp(1.5625rem, -2.8499rem + 8.982vw, 3.4375rem);
    --H2-font-size: clamp(1.25rem, -0.6279rem + 3.8226vw, 2.8125rem);
    --H3-font-size: clamp(1.125rem, -0.9341rem + 4.1916vw, 2rem);
    --H4-font-size: clamp(1rem, -0.2754rem + 7.8125vw, 1.875rem);

    /* Colors */
    --Blue-Main: #14A7E0;
    --Blue-Dark-1: #0A5371;
    --Blue-Dark-2: #0F7DA9;
    --Blue-Light-1: #31B8ED;
    --Blue-Light-2: #C7ECFA;

    --Orange-Main: #E45825;
    --Orange-Dark-1: #FF4800;
    --Orange-Dark-2: #FF5400;
    --Orange-Light-1: #E97449;
    --Orange-Light-2: #F8D5C9;

    --White: #FFFFFF;
    --Black: #000000;
    --Gray-Light: #F3F3F3;
    --Gray-Medium: #D9D9D9;
}

/* Button */
a.ct-link-button { 
    border: unset;
    transition: all 0.3s ease;
}

/* Button -- Primary */
a.button--primary {
    background-color: var(--Orange-Main);
    color: var(--White);
    border-radius: 10px;
    padding: 16px 32px;
}
a.button--primary:hover { background-color: var(--Orange-Light-1); }

/* Button -- Secondary */
a.button--secondary {
    background-color: var(--White);
    color: var(--Orange-Main);
    border-radius: 10px;
    padding: 16px 32px;
}
a.button--secondary:hover { color: var(--Orange-Light-1); }

/* Button -- Download */
a.button--download {
    color: var(--Black);
    font-weight: 600;
}

/* Button -- Tertiary */
a.button--tertiary {
    background-color: var(--Blue-Main);
    color: var(--White);
    border-radius: 10px;
    padding: 16px 32px;
}
a.button--tertiary:hover { background-color: var(--Blue-Light-1); }

/* Lineair background */
.lineair-background { position: relative; overflow: hidden; background-color: var(--White); }
.lineair-background::before {
    content: "";
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 80%;
    left: -50%;
    top: 0px;
    background: linear-gradient(180deg, #42DDFF 0%, rgba(17, 112, 255, 0.46) 100%);
    opacity: 0.38;
    filter: blur(100px);
}
.lineair-background::after {
    content: "";
    z-index: 0;
    position: absolute;
    width: 50%;
    height: 50%;
    bottom: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(255, 122, 0, 0) 0%, var(--Orange-Main) 100%);
    opacity: 0.38;
    filter: blur(100px);
}

/* Box shadow */
.box-shadow { box-shadow: 0px 4px 5.3px 4px rgba(0, 0, 0, 0.25); }