/* Button Hover */
.btn {
    display: flex;
    white-space: nowrap;
    text-decoration: none;
    width: max-content;
    padding: 1.25rem 3.75rem;
    border-radius: 2rem;
    cursor: pointer;
    color: #000;
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 0;
    transition: all 300ms ease-in-out;
}

.btn:after {
    content: '';
    position: absolute;
    border-radius: 2rem;
    width: 100%;
    transform: scaleX(0);
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: #20C997;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
    z-index: -1;
}

.btn:hover{
    color: #fff;
    border: none;
}
.btn:hover:after{
    transform: scaleX(1);
    transform-origin: bottom left;
}

.btn_filled {
    color: #fff;
    position: relative;
    display: block;
    overflow: hidden;
    width: max-content;
    z-index: 0;
    border: none;
    transition: all 300ms ease-in-out;
    border: 1px solid #FEDB00;
}

.btn_filled:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: #20C997;
    transform-origin: bottom left;
    transition: transform 400ms ease-out;
    z-index: -1;
}

.btn_filled:hover{
    color: #000;
    border: 1px solid #000;
}
.btn_filled:hover:after{
    transform: scaleX(0);
    transform-origin: bottom right;
}


/* Header button */
.header_cta{
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 1.25rem;
    border: 1px solid #fff;
    border-radius: 2rem;
    padding: .5rem 1.25rem;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    transition: all 200ms ease-in-out;
    transform-origin: top left;
    position: relative;
}

.header_cta:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: #20C997;
    border-radius: 2rem;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
    z-index: -1;
}

.header_cta:hover{
    color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.header_cta:hover:after{
    transform: scaleX(1);
    transform-origin: bottom left;
}


/* Let's Talk Button */
#lets_talk_btn{
    color: #fff;
    border: 1px solid #000;
    position: relative;
    display: block;
    overflow: hidden;
    width: max-content;
    z-index: 0;
    border: none;
    transition: all 300ms ease-in-out;
}

#lets_talk_btn:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: #20C997;
    transform-origin: bottom left;
    transition: transform 400ms ease-out;
    z-index: -1;
}

#lets_talk_btn:hover{
    /* color: #000; */
    border: 1px solid #fff;
}
#lets_talk_btn:hover:after{
    transform: scaleX(0);
    transform-origin: bottom right;
}


.cta_yellow {
    margin-inline: auto;
    color: #000;
    position: relative;
    display: block;
    overflow: hidden;
    width: max-content;
    z-index: 0;
    border: none;
    transition: all 300ms ease-in-out;
    border: 1px solid #20C997;
}

.cta_yellow:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: #FEDB00;
    transform-origin: bottom left;
    transition: transform 400ms ease-out;
    z-index: -1;
}

.cta_yellow:hover{
    border: 1px solid #FEDB00;
    color: #000;
}
.cta_yellow:hover:after{
    transform: scaleX(0);
    transform-origin: bottom right;
}


/* Proposal Screen Button */
#proposal_btn {
    display: flex;
    color: #000;
    background-color: transparent;
    position: relative;
    display: block;
    overflow: hidden;
    width: max-content;
    z-index: 0;
    border: none;
    transition: all 300ms ease-in-out;
    border: 1px solid #000;
}

#proposal_btn:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(1);
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: #FEDB00;
    transform-origin: bottom left;
    transition: transform 400ms ease-out;
    z-index: -1;
}

#proposal_btn:hover{
    border: 1px solid #FEDB00;
    color: #FFF;
}
#proposal_btn:hover:after{
    transform: scaleX(0);
    transform-origin: bottom right;
}

#meet_form_btn:after{
    background-color: transparent;
}
#meet_form_btn{
    display: flex;
    align-items: center;
    white-space: nowrap;
    border: 2px solid #FEDB00;
    border-radius: 2rem;
    overflow: hidden;
    color: #000;
    text-decoration: none;
    transition: all 200ms ease-in-out;
    transform-origin: top left;
    position: relative;
    margin-bottom: 1rem;
}


#meet_form_btn:after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 100%;
    bottom: 0;
    left: 0;
    background-color: #FEDB00;
    border-radius: 2rem;
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
    z-index: -1;
}

#meet_form_btn:hover{
    /* color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2); */
}
#meet_form_btn:hover:after{
    transform: scaleX(1);
    transform-origin: bottom left;
}