/* ===================== FONTS ===================== */

* {
    font-family: "greycliff-cf", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-semibold {
    font-weight: 500 !important;
}

.font-bold {
    font-weight: 600 !important;
}

/* ===================== COLORS ===================== */

.color-main {
    color: #c1191c;
}

.bg-main {
    background-color: #c1191c;
}

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

.button-main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: #c1191c;
    color: #fff;
    border: none;
    padding: 5px 20px;
    border-radius: 25px;
    border: 1px #ffffff solid;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-main svg path {
    stroke: #ffffff;
}

.button-main:hover {
    background-color: #ffffff;
    color: #c1191c;
}

.button-main:hover svg path {
    stroke: #c1191c;
}

.button-white {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background-color: #ffffff;
    color: #c1191c;
    border: none;
    padding: 5px 20px;
    border-radius: 25px;
    border: 1px #c1191c solid;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button-white svg path {
    fill: #c1191c;
}

.button-white:hover {
    background-color: #c1191c;
    color: #ffffff;
}

.button-white:hover svg path {
    fill: #ffffff;
}

/* ===================== LINK ===================== */

.link-underline {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: #3a3a3a;
    text-decoration: none;
    background-image: linear-gradient(#c1191c, #c1191c);
    background-size: 0% 1px;
    background-position-y: 100%;
    background-position-x: 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s ease-in-out;
}

.link-underline:hover {
    background-size: 100% 1px;
    background-position-x: 0%;
    color: #c1191c;
}

.link-underline-white {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: #ffffff;
    transition: opacity 0.2s ease-in-out;
}

.link-underline-white:hover {
    opacity: 0.5;
}