:root {
    --h1: 36px;
    --h2: 30px;
    --h3: 26px;
    --h4: 21px;
    --h5: 16px;
    --h6: 14px;
}
@media (max-width: 960px) {
    :root {
        --h1: 36px;
        --h2: 30px;
        --h3: 26px;
        --h4: 20px;
        --h5: 14px;
        --h6: 12px;
    }
}


/* WEIGHT */
.extralight { font-weight: 200; }
.light 	     { font-weight: 300; }
.regular 	 { font-weight: 400; }
.medium  	 { font-weight: 500; }
.semibold   { font-weight: 600; }
.bold		 { font-weight: 700; }
.extra-bold  { font-weight: 800; }
/* TRANSFORM */
.upper      { text-transform: uppercase;}
.capitalize { text-transform: capitalize;}
.through    { text-decoration: line-through;}
.center     { text-align: center; }
.underline  { text-decoration: underline;}
 
/* GLOBAL */
html, body, h1, h2, h3, h4, h5, h6, p, a, span,
label, input, div, button, form,::placeholder {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 400;
    font-size: var(--h5);
    letter-spacing: 0.5px;
    line-height: 1.25;
    color: black;
} 
/* h1, h2 .h1, .h2 {
    line-height: 1.25;
} */
input, textarea, select { font-family:inherit; outline: none;}
input:focus, textarea:focus, select:focus { border-color: var(--clr-1) !important;}
/* SIZES */
h1, .h1 { font-size: var(--h1); font-weight: 500;}
h2, .h2 { font-size: var(--h2); }
h3, .h3 { font-size: var(--h3); }
h4, .h4 { font-size: var(--h4); }
h5, .h5 { font-size: var(--h5); }
h6, .h6 { font-size: var(--h6); }

a {
    text-decoration: none;
    color: black;
    transition: all 0.2s ease-in-out;
}

a:hover {
    color: var(--clr-3);
}

span.slash {
    margin: 0 8px;
}
.heading1 {
    display: block;
    font-size: var(--h3);
    margin-bottom: 24px;
    text-align: center;
    margin: 48px 0;
}
.title1 {
    font-size: var(--h2);
    font-weight: 500;
    margin-bottom: 40px;
}

.title2 {
    position: relative;
    display: block;
    font-size: var(--h4);
    font-weight: 600;
    margin-bottom: 24px;
}
.subtitle {
    position: relative;
    display: block;
    margin-bottom: 16px;
    font-weight: 500;
}
.discount_price {
    text-decoration: line-through;
    color: var(--clr-2);
}

.helptext {
    display: block;
    margin-top: 8px;
    color: grey;
    font-size: var(--h6);
}