/* button hover effect */
/* green to blue */
.green-blue-btn {
    padding-right: 5px;
}

    .green-blue-btn button {
        position: relative;
        display: inline-block;
        overflow: hidden;
        background-color: transparent;
        font-size: 18px;
        font-weight: 500;
        text-transform: capitalize;
        border-radius: 0px;
        -webkit-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
        z-index: 2;
        border: none;
        color: #ffffff;
        padding: 10px 30px;
        border-radius: 5px;
    }

        .green-blue-btn button::before {
            position: absolute;
            top: 110px;
            left: -50px;
            right: -50px;
            height: 170px;
            content: "";
            background: #df014a;
            -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
            border-radius: 50%;
            transition-duration: 800ms;
            z-index: 1;
            color: #ffffff;
        }

        .green-blue-btn button::after {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0px;
            right: 0px;
            border-radius: 0px;
            background-color: #ffffff;
            opacity: 1;
            transform: scaleX(1);
            transition-duration: 800ms;
            z-index: -1;
            color: #00008b;
/*            color: #ffffff;*/

        }

        .green-blue-btn button::after {
            background-color: #df014a;
        }

        .green-blue-btn button::before {
            background-color: #00005a;
        }

        .green-blue-btn button:hover::before {
            top: 0%;
            left: -70px;
            right: -70px;
        }

        .green-blue-btn button:hover::after {
            transform: scaleX(0);
            transition-duration: 1500ms;
        }

    .green-blue-btn:hover .green-blue-btn button {
        color: #fff;
    }

    .green-blue-btn button .btn-text {
        position: relative;
        z-index: 1;
        color: #fff;
    }
/* green to blue */
/*  blue to green  */
.blue-green-btn button {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: transparent;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 0px;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
    z-index: 2;
    border: none;
    color: #ff0f7b;
    padding: 10px 30px;
    border-radius: 5px;
}

    .blue-green-btn button::before {
        position: absolute;
        top: 110px;
        left: -50px;
        right: -50px;
        height: 170px;
        content: "";
        background: #0e476b;
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
        border-radius: 50%;
        transition-duration: 800ms;
        z-index: 1;
        color: #ff0f7b;
    }

    .blue-green-btn button::after {
        content: "";
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        border-radius: 0px;
        background-color: #ffffff;
        opacity: 1;
        transform: scaleX(1);
        transition-duration: 800ms;
        z-index: -1;
        color: #4169e1;
    }

    .blue-green-btn button::after {
        background-color: #00005a;
    }

    .blue-green-btn button::before {
        background-color: #ff0f7b;
    }

    .blue-green-btn button:hover::before {
        top: 0%;
        left: -70px;
        right: -70px;
    }

    .blue-green-btn button:hover::after {
        transform: scaleX(0);
        transition-duration: 1500ms;
    }

.blue-green-btn:hover .blue-green-btn button {
    color: #fff;
}

.blue-green-btn button .btn-text {
    position: relative;
    z-index: 1;
    color: #fff;
}
/* blue to green  */

.offcanvas {
    transition: transform 1s ease-in-out;
}

/* Media Queries */
@media (max-width: 576px) {
    .sticky-reg-img-wrapper img {
        display: none;
    }

    .sticky-reg-modal-content {
        padding: 10px;
    }
}



.green-blue-btn button .btn-text,
.blue-green-btn button .btn-text {
    position: relative;
    z-index: 5;
    color: #fff;
}

.green-blue-btn button::before,
.blue-green-btn button::before {
    z-index: 1;
}

.green-blue-btn button::after,
.blue-green-btn button::after {
    z-index: 0;
}


.green-blue-btn button,
.blue-green-btn button {
    font-size: 16px;
    padding: 8px 20px;
    min-height: 44px;
}