:root {
    --text-color: #ffffff;
    --primary-color: #e30613;
    --primary-color-hover: #f40515;
    --secondary-color: #0f766e;
    --dark-color: #19151b;
    --light-color: #f7f9fc;
    --rare-color: #2563eb;

    --surface-color: #ffffff;
    --border-color: #dbe2ea;
    --focus-ring: rgba(37, 99, 235, 0.12);

    --h1-size: 3.2rem;
    --h3-size: 2rem;
    --small-font-size: 1.4rem;
    --p-size: 1.8rem;

    --side-padding: 1.2rem;
    --block-padding: 6rem;
    --text-letter-spacing: 0.5px;
    --btn-letter-spacing: 0.6px;
    --max-width: 95%;

    --radius-sm: 1.2rem;
    --radius-md: 1.8rem;
    --radius-pill: 2.5rem;

    --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.12);

    --input-height: 5.2rem;
    --transition-default: 0.2s ease;

    --nunito: nunito, "Gill Sans", sans-serif;
    --montserrat: montserrat, "Gill Sans", sans-serif;
}

html {
    font-size: 10px;
}

* {
    box-sizing: border-box;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--surface-color);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: "nunito";
    src:
        url(/font/Montserrat-SemiBold.woff2) format("woff2"),
        url(/font/Montserrat-SemiBold.woff) format("woff");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "montserrat";
    src:
        url(/font/Montserrat-Light.woff2) format("woff2"),
        url(/font/Montserrat-Light.woff) format("woff");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "montserrat";
    src:
        url(/font/Montserrat-Regular.woff2) format("woff2"),
        url(/font/Montserrat-Regular.woff) format("woff");
    font-weight: 400;
    font-display: swap;
}

h1,
h3 {
    font-family: nunito, "Gill Sans", sans-serif;
    font-weight: 500;
    font-size: var(--h1-size);
    text-transform: capitalize;
    color: var(--dark-color);
}

h3 {
    font-weight: 300;
    font-size: var(--h3-size);
    letter-spacing: var(--text-letter-spacing);
}
p,
label,
li,
input,
select,
textarea,
strong,
span {
    font-family: montserrat, "Gill Sans", sans-serif;
    font-weight: 400;
    font-size: var(--p-size);
    letter-spacing: var(--text-letter-spacing);
    color: var(--dark-color);
}
li {
    font-weight: 300;
}

label {
    font-size: var(--small-font-size);
}

@media screen and (min-width: 530px) and (max-width: 890px) {
    :root {
        --max-width: 700px;
    }
}

@media screen and (min-width: 891px) {
    :root {
        --max-width: 1160px;
    }
}