/*----------theme-button-csss-------*/

.application_button {
    display: inline-block;  
    padding: 0px 25px;
    border-radius: 10px 0px 10px 0px;
    background: var(--primary-color-one);
    color: #fff;
    border: 1px solid var(--primary-color-one);
    line-height: 56px;
    font-family: var(--creote-family-one);
    min-height: 56px;
    min-width: 160px;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;
    -ms-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    &:hover{
        background: #fff;
        color: var(--primary-color-one);
        border-radius: 0px 10px 0px 10px;
    }
}

.theme-btn{
    position: relative;
    font-family: var(--creote-family-one);
    
    /*----theme-btn one-----*/
    &.one{
        display: inline-block;  
        padding: 0px 25px;
        border-radius: 10px 0px 10px 0px;
        background: var(--primary-color-one);
        color: #fff;
        border: 1px solid var(--primary-color-one);
        line-height: 56px;
        min-height: 56px;
        min-width: 160px;
        font-weight: 600;
        font-size: 15px;
        text-align: center;
        transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        &:hover{
            background: #fff;
            color: var(--primary-color-one);
            border-radius: 0px 10px 0px 10px;
        }
    }
        /*----theme-btn two-----*/
    &.two{
        display: inline-block;  
        padding: 0px 25px;
        border-radius: 10px 0px 10px 0px;
        background:transparent;
        color: var(--primary-color-one);
        border: 1px solid var(--primary-color-one);
        line-height: 56px;
        min-height: 56px;
        min-width: 160px;
        text-align: center;
        transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        font-weight: 600;
        font-size: 15px;
        &:hover{
            background: var(--primary-color-one);
            color: #fff;
            border-radius: 0px 10px 0px 10px;
        }
    }

    &.three{
        display: inline-block;  
        padding: 0px 25px;
        border-radius: 30px;
        background:var(--primary-color-one);
        color: #fff;
        line-height: 56px;
        min-height: 56px;
        min-width: 160px;
        text-align: center;
        transition:all 0.5s ease;
        -moz-transition:all 0.5s ease;
        -ms-transition:all 0.5s ease;
        -o-transition:all 0.5s ease;
        overflow: hidden;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 500;
        z-index: 0;
        border: unset!important;
        &::before{
            position: absolute;
            content: '';
            width: 50%;
            height: 100%;
            left: -100%;
            top: 0;
            bottom: 0;
            transition:all 0.5s ease;
            -moz-transition:all 0.5s ease;
            -ms-transition:all 0.5s ease;
            -o-transition:all 0.5s ease;
            background: var(--primary-color-two);
            z-index: -1;
        }
        &::after{
            position: absolute;
            content: '';
            width: 50%;
            height: 100%;
            right: -100%;
            top: 0;
            bottom: 0;
            transition:all 0.5s ease;
            -moz-transition:all 0.5s ease;
            -ms-transition:all 0.5s ease;
            -o-transition:all 0.5s ease;
            background: var(--primary-color-two);
            z-index: -1;
        }
        &:hover{
            color: #fff;
         
            &::after{
                right: 0;
            }
            &::before{
                left: 0;
            }
        }
    }
    &.four{
        position: relative;
        display: inline-block;
        font-size: 12px;
        line-height: 22px;
        color: var(--heading-dark);
        text-transform: uppercase;
        background: none!important;
        font-family: var(--creote-family-one);
        font-weight: 600;
        i{
            position: relative;
            top: 2px;
            font-size: 18px;
            left: 5px;
            transition:all 0.5s ease;
            -moz-transition:all 0.5s ease;
            -ms-transition:all 0.5s ease;
            -o-transition:all 0.5s ease;
        }
        &:hover{
            color: var(--primary-color-one);
            background: none!important;
            i{
                left: 10px;
            }
        }
    }
    &.five{
        font-size: 12px;
        position: relative;
        text-align: center!important;
        color: #fff;
        background: var(--primary-color-one);
        display: inline-block;
        min-width: 180px;

        height: 56px;
        padding: 0px 18px;
        line-height: 60px!important;
        font-weight: 600;
        transition: all .5s ease;
        transition: all .6s ease-in-out;
        -moz-transition: all .6s ease-in-out;
        -ms-transition: all .6s ease-in-out;
        -o-transition: all .6s ease-in-out;
        text-transform: uppercase;
        border-radius: 5px;
        i{
            position: relative;
            top: 2px;
            font-size: 18px;
            left: 5px;
            transition:all 0.5s ease;
            -moz-transition:all 0.5s ease;
            -ms-transition:all 0.5s ease;
            -o-transition:all 0.5s ease;
        }
        &:hover{
            background: var(--primary-color-two);
            color: #fff;
            i{
                left: 10px;
            }
        }
    }
    &.color_white{
        color: #fff!important;
        border-color: #fff!important;
        background: transparent!important;
    }
    &.color_white_1{
        color: var(--heading-dark)!important;
        border-color: #fff!important;
        background: #fff!important;
    }
}

.theme_btn_all{
    position: relative;
    &.color_two {
        a{
            background: var(--primary-color-two);
            border-color: var(--primary-color-two);
            color: #fff;
            &:hover{
                background: #fff;
                color: var(--primary-color-one);
            }
            &.two{
                background: transparent;
                border-color: var(--primary-color-two);
                color: var(--primary-color-two);
                &:hover{
                    background: var(--primary-color-two);
                    color: #fff;
                }
            }
        }
    }
  
}