:root {
    --primary-color: #058283;
    --secondary-color: #00a6a6;
    --tertiary-color: #21333e;
    --quaternary-color: #21333ef7;
    --white-bg-color: #fff;
    --light-bg-color: #f1f1f1;
    --dark-bg-color: #111117;
    --white-text-color: #fff;
    --light-text-color: #8f93a5;
    --dark-text-color: #606d75;
    --success-color: #007a4d;
    --warning-color: #ff9800;
    --danger-color: #e34f4f;
    --primary-font: 'Inter', sans-serif;
    --secondary-font: 'Montserrat', sans-serif
}

.buttons {
    position: relative;
    z-index: 2
}

.button, .button:visited, .button:active, input[type=submit], input[type=submit]:visited, input[type=submit]:active {
    width: fit-content;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    padding: 10px 25px;
    border-radius: 100px;
    border: 2px solid;
    border-color: var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    font-family: var(--secondary-font);
    font-weight: 500;
    line-height: 1.2;
    height: fit-content;
    -webkit-transition: all .4s ease-out 0s;
    -o-transition: all .4s ease-out 0s;
    -moz-transition: all .4s ease-out 0s;
    transition: all .4s ease-out 0s
}

.button:hover, .button:focus {
    border-color: var(--secondary-color);
    color: var(--white-text-color)
}

.primary-button, .primary-button:visited, .primary-button:active, input[type=submit]:visited, input[type=submit]:active {
    position: relative;
    z-index: 2;
    padding: 10px 25px;
    background-color: var(--primary-color);
    border-radius: 100px;
    border: 2px solid;
    border-color: var(--primary-color);
    color: var(--white-text-color);
    font-weight: 500;
    line-height: 1.2;
    height: fit-content;
    -webkit-transition: all .4s ease-out 0s;
    -o-transition: all .4s ease-out 0s;
    -moz-transition: all .4s ease-out 0s;
    transition: all .4s ease-out 0s
}

.primary-button:hover, .primary-button:focus, input[type=submit]:hover, input[type=submit]:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white-text-color)
}

.primary-button:before {
    content: '';
    position: absolute;
    left: 50%;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 100px 0 0 100px;
    background-color: rgba(255, 255, 255, .15);
    -webkit-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;
    -moz-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s
}

.primary-button:after {
    content: '';
    position: absolute;
    right: 50%;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 0 100px 100px 0;
    background-color: rgba(255, 255, 255, .15);
    -webkit-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;
    -moz-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s
}

.primary-button:hover:before {
    width: calc(50% - 5px);
    height: 100%;
    left: 5px
}

.primary-button:hover:after {
    width: calc(50% - 5px);
    height: 100%;
    right: 5px
}

.secondary-button, .secondary-button:visited, .secondary-button:active {
    position: relative;
    z-index: 2;
    padding: 10px 25px;
    background-color: transparent !important;
    border-radius: 100px;
    border: 2px solid;
    border-color: var(--primary-color);
    color: var(--white-text-color);
    font-family: var(--secondary-font);
    font-weight: 500;
    line-height: 1.2;
    height: fit-content;
    -webkit-transition: all .4s ease-out 0s;
    -o-transition: all .4s ease-out 0s;
    -moz-transition: all .4s ease-out 0s;
    transition: all .4s ease-out 0s
}

.secondary-button:hover, .secondary-button:focus {
    border-color: var(--secondary-color);
    background-color: transparent !important;
    color: var(--white-text-color)
}

.secondary-button:before {
    content: '';
    position: absolute;
    left: 50%;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 100px 0 0 100px;
    background-color: rgba(0, 0, 0, .15);
    -webkit-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;
    -moz-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s
}

.secondary-button:after {
    content: '';
    position: absolute;
    right: 50%;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: 0 100px 100px 0;
    background-color: rgba(0, 0, 0, .15);
    -webkit-transition: all .2s ease-out 0s;
    -o-transition: all .2s ease-out 0s;
    -moz-transition: all .2s ease-out 0s;
    transition: all .2s ease-out 0s
}

.secondary-button:hover:before {
    width: 50%;
    height: 100%;
    left: 0
}

.secondary-button:hover:after {
    width: 50%;
    height: 100%;
    right: 0
}

@-webkit-keyframes pulse-icon {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--pulse-color);
        background-color: var(--pulse-color)
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
        background-color: rgba(204, 169, 44, 0)
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
        background-color: rgba(204, 169, 44, 0)
    }
}

@keyframes pulse-icon {
    0% {
        -moz-box-shadow: 0 0 0 0 var(--pulse-color);
        box-shadow: 0 0 0 0 var(--pulse-color);
        background-color: var(--pulse-color)
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
        box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
        background-color: rgba(204, 169, 44, 0)
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
        box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
        background-color: rgba(204, 169, 44, 0)
    }
}