button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: none !important;
    padding: var(--grid__smallest);
}
  
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
textarea[type=textarea] {
    -webkit-appearance: none !important;
    border-radius: var(--radius-small) !important;
    padding: var(--grid__smallest) !important;
}

body .dark input, body .dark textarea {
    color: var(--main-dark) !important;
    background-color: var(--main-lightest) !important;
    border: 1px solid var(--main-dark) !important;
    border-color: var(--main-dark) !important;
}

::placeholder,
input::placeholder,
textarea::placeholder {
    -webkit-appearance: none !important;
    font-size: var(--font-size__small) !important;
    color: var(--main-dark) !important;
    opacity: 0.75 !important;
}

select {
    border: 1px solid var(--brand-color-main) !important;
}

button[type=submit],
button[type=button] {
    padding: var(--grid__smallest);
    border-radius: var(--radius-small);
    letter-spacing: 0.5px;
}

button[type=submit] {
    background: var(--brand-color-sec) !important;
}

button[type=submit] > * {
    color: var(--main-light) !important;
}

button[type=submit]:hover {
    color: var(--brand-color-main);
}

/*=== BUTTONS ===*/

.button-general {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    gap: var(--grid__x-small);
    z-index: 1;
    padding: calc(var(--grid__x-small) * 0.5) var(--grid__x-small) !important;
    
    text-align: center;
    font-size: var(--font-size__regular);

}

.button-general:hover {
    cursor: pointer;
}

.cta1 {
    background-color: var(--brand-color-sec);
    color: var(--main-light) !important;
    border-radius: 200px 90px 150px 120px / 180px 90px 180px 90px;
    /*border-radius: 200px 120px 170px 120px;*/
    font-weight: var(--font-weight__medium) !important;
    transition: border-radius .6s cubic-bezier(.4, 0, .2, 1);
}

.cta1.dark {
    background-color: var(--main-dark);
    color: var(--main-light) !important;
}

.cta1:hover {
    border-radius: 90px 200px 120px 150px / 90px 180px 90px 180px;
}

.cta2 {
    background-color: transparent;
    color: var(--brand-color-sec) !important;
    border-radius: 200px 90px 150px 120px / 180px 90px 180px 90px;
    transition: border-radius .6s cubic-bezier(.4, 0, .2, 1);
    border: 2px solid var(--brand-color-sec);
    font-weight: var(--font-weight__medium);
}

.cta2:hover {
    border-radius: 90px 200px 120px 150px / 90px 180px 90px 180px;
}

.cta3 {
    position: relative;
    background-color: transparent;
    color: var(--brand-color-sec) !important;
    font-weight: var(--font-weight__medium);
}

.cta3::before {
    content: '';
    position: absolute;
    background-color: var(--brand-color-sec);
    height: 4px;
    width: calc(100% - var(--grid__small));
    transform: rotate(1deg);
    border-radius: 150px;
    top: 90%;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.cta3:hover::before {
    transform: rotate(-1deg);
}

.cta4 {
    background-color:var(--main-light);
    color: var(--main-dark) !important;
    border-radius: 200px 90px 150px 120px / 180px 90px 180px 90px;
    /*border-radius: 200px 120px 170px 120px;*/
    font-weight: var(--font-weight__medium);
    transition: border-radius .6s cubic-bezier(.4, 0, .2, 1);
}

.cta4:hover {
    border-radius: 90px 200px 120px 150px / 90px 180px 90px 180px;
}