/* ======= Variables ======= */
/* :root {
  --brand-primary: #17375E;
  --brand-secondary: #E67E22;
  --brand-tertiary: #FFC000;
  --neutral-dark: #2F3437;
  --neutral-light: #fff;
  --neutral-light-alt: #F3F5F7;
  --btn-gradient: linear-gradient(90deg, #E67E22 0%, #FFC000 50%, #E67E22 100%);
} */

/* ======= Main Btn ======= */
.c-mainbtn{
    background-image: var(--btn-gradient);
    background-size: 200% 100%;
    background-position: 100%;

    transition: scale 0.25s ease, background-position 0.35s ease !important;
}

.c-mainbtn p{
    color: var(--neutral-light)
}

.c-mainbtn:hover{
    background-position: 0%;
    scale: 0.95;
}

/* ======= Arrowbtn ======= */
.c-arrowbtn{
    width: auto !important;

}

.c-arrowbtn__iconcontainer{
    width: auto !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;

    background-image: var(--btn-gradient);
    background-size: 200% 100%;
    background-position: 100%;

    transition: background-position 0.35s ease, transform 0.25s ease !important;
}

.c-arrowbtn:hover .c-arrowbtn__iconcontainer{
    transform: translateX(8px) !important;
    background-position: 0%;
}

/* ======= Arrowbtn alt ======= */

.c-arrowbtn--alt .c-arrowbtn__iconcontainer{
    width: auto !important;
    padding: 4px !important;

    background-image: none;

    transition: transform 0.25s ease !important;
}

.c-arrowbtn__textcontainer::after{
    content: '';
    width: 100%;
    height: 2px;

    position: absolute;
    left: 0;
    bottom: 2px;

    background-image: var(--btn-gradient);
    background-size: 200% 100%;
}