/* NORMAL ORANGE BUTTON*/
.cta-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ff5100;
    color: white;
    padding: 0.8em 1.4em;
    border-radius: 3em;
    text-decoration: none;
    font-size: 1em;
    width: fit-content;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    border: none;
}

.cta-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 85%; /* Aligns with the icon */
    width: 0%;
    height: 150%;
    background: white;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease;
    z-index: 0;
    border-radius: 3em; /* Keeps rounded shape */
}

.cta-button:hover::before {
    width: 200%; /* Expands from the icon */
}

.cta-button:hover {
    color: #ff5100;
}

.cta-text,
.cta-icon {
    position: relative;
    z-index: 2; /* Keeps text and icon visible above expanding background */
    margin-left: 0.8em;
    font-weight: 400;
}

.cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: #ff5100;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    font-size: 1em;
}

.header-dark .cta-button {
    color: white;
}



/*INVERSE ORANGE*/
.inverse-orange {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    color: #ff5100;
    padding: 0.6em 1em;
    border-radius: 3em;
    text-decoration: none;
    font-size: 1em;
    width: fit-content;
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    font-weight: lighter;
    border: #ff5100 1px solid;
}

.inverse-orange::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 85%; /* Aligns with the icon */
    width: 0%;
    height: 150%;
    background: #ff5100;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease;
    z-index: 0;
    border-radius: 3em; /* Keeps rounded shape */
}

.inverse-orange:hover::before {
    width: 200%; /* Expands from the icon */
}

.inverse-orange:hover {
    color: white;
    border: white 1px solid;
}

.inverse-cta-text,
.inverse-cta-icon {
    position: relative;
    z-index: 2; /* Keeps text and icon visible above expanding background */
    margin-left: 0.8em;
    font-weight: 400;
}

.inverse-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff5100;
    color: white;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    font-size: 1em;
}

.footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8em ;
    border-bottom: white solid 1px;
}

.footer-cta h2 {
    margin: 0;
    max-width: 45%;
}



/*BLUE*/

.cta-button.blue {
    background-color: #6D95AE;
    color: white;
    transition: color 0.4s ease;
}

.cta-button.blue::before {
    background: white;
}

.cta-button.blue:hover {
    color: #6D95AE;
}

.cta-button.blue:hover::before {
    width: 200%;
}

.cta-button.blue .cta-icon {
    background-color: white;
    color: #6D95AE;
}

.inverse-blue {
    background-color: white;
    color: #6D95AE;
    border: #6D95AE 1px solid;
}

.inverse-blue::before {
    background: #6D95AE;
}

.inverse-blue:hover {
    color: white;
    border: white 1px solid;
}

.inverse-blue:hover::before {
    width: 200%;
}

.inverse-blue .inverse-cta-icon {
    background-color: #6D95AE;
    color: white;
}