@use '../utils' as *;

/*----------------------------------------*/
/*  2.3 Buttons
/*----------------------------------------*/

.th-primary-btn{
    display: inline-block;
    transition: .3s;   
    & .th-icon{
        background: var(--primary-color);
        height: 56px;
        width: 56px;
        line-height: 56px;
        text-align: center;
        border-radius: 56px;
        display: inline-block;
        transition: .3s;
    }
    & .th-text{
        padding: 16px 32px;
        background: var(--primary-color);
        display: inline-block;
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        transition: .3s;
        border-radius: 56px;
        margin-left: -6px;
        color: var(--black-color);
        @media #{$lg}{
            font-size: 14px;
            padding: 16px 28px;
        }
        @media #{$md}{
            font-size: 15px;
        }
    }
    &:hover{
        transform: translateY(-3px);
        transition: .3s;   
        & .th-icon{
            background: var(--white-color);
            transition: .3s;     
        }
        & .th-text{
            background: var(--white-color);
            transition: .3s;
        }
    }
    &-secondary{
        & .th-icon{
            background: transparent;
            border: 1px solid var(--primary-color);
            & img{
                transition: .3s;
            }
        }
        & .th-text{
            background: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        &:hover{
            & .th-icon{
                background: var(--white-color);
                border: 1px solid var(--black-color);
                & img{
                    filter: brightness(0);
                    transition: .3s;
                }
            }
            & .th-text{
                border: 1px solid var(--black-color);
                color: var(--black-color);
            }
        }
    }
    &-secondary2{
        & .th-icon{
            background: var(--primary-color);
            border: 1px solid var(--primary-color);
            & img{
                filter: brightness(0);
                transition: .3s;
            }
        }
        & .th-text{
            background: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        &:hover{
            & .th-icon{
                background: var(--white-color);
                border: 1px solid var(--black-color);
                & img{
                    filter: brightness(0);
                    transition: .3s;
                }
            }
            & .th-text{
                border: 1px solid var(--black-color);
                color: var(--black-color);
            }
        }
    }
    &-secondary22{
        & .th-icon{
            background: var(--primary-color-2);
            border: 1px solid var(--primary-color-2);
            & img{
                filter: brightness(0) invert(1);
                transition: .3s;
            }
        }
        & .th-text{
            background: transparent;
            border: 1px solid var(--primary-color-2);
            color: var(--secondary-color);
        }
        &:hover{
            & .th-icon{
                background: var(--white-color);
                border: 1px solid var(--black-color);
                & img{
                    filter: brightness(0);
                    transition: .3s;
                }
            }
            & .th-text{
                border: 1px solid var(--black-color);
                color: var(--black-color);
            }
        }
    }
    &-secondary3{
        & .th-icon{
            background: var(--primary-color);
            border: 1px solid var(--primary-color);
            & img{
                filter: brightness(0);
                transition: .3s;
            }
        }
        & .th-text{
            background: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
        }
        &:hover{
            & .th-icon{
                background: var(--white-color);
                border: 1px solid var(--black-color);
                & img{
                    filter: brightness(0);
                    transition: .3s;
                }
            }
            & .th-text{
                background: var(--black-bg-1);
                border: 1px solid var(--black-color);
                color: var(--primary-color);
            }
        }
    }
    &-secondary4{
        & .th-icon{
            background: var(--primary-color);
            border: 1px solid var(--black-bg);
            & img{
                filter: brightness(0);
                transition: .3s;
            }
        }
        & .th-text{
            background: var(--black-bg);
            border: 1px solid var(--black-bg);
            color: var(--white-color);
        }
        &:hover{
            & .th-icon{
                background: var(--white-color);
                border: 1px solid var(--black-color);
                & img{
                    filter: brightness(0);
                    transition: .3s;
                }
            }
            & .th-text{
                background: var(--black-bg-1);
                border: 1px solid var(--black-color);
                color: var(--primary-color);
            }
        }
    }

    &-secondary-3{
        & .th-icon{
            background: transparent;
            border: 1px solid var(--primary-color-3);
            & img{
                transition: .3s;
            }
        }
        & .th-text{
            background: transparent;
            border: 1px solid var(--primary-color-3);
            color: var(--secondary-color);
        }
        &:hover{
            transform: translateY(-3px);
            & .th-icon{
                background: var(--white-color);
                border: 1px solid var(--black-color);
                & img{
                    filter: brightness(0);
                    transition: .3s;
                }
            }
            & .th-text{
                border: 1px solid var(--black-color);
                color: var(--black-color);
            }
        }
    }


    &-2{
        text-transform: uppercase;
        & .th-icon{
            background: var(--primary-color-2);
            & img{
                transition: .3s;
            }
        }
        & .th-text{
            background: var(--primary-color-2);
             color: var(--secondary-color);
        }
        &:hover{
            & .th-icon{
                & img{
                    filter: brightness(0);
                    transition: .3s;
                }
            }
            & .th-text{
                color: var(--black-bg);
            }
        }
    }
    &-3{
        & .th-icon{
            background: var(--primary-color-3);
            & img{
                transition: .3s;
            }
        }
         & .th-text{
            background: var(--primary-color-3);
            color: #fff;
            text-transform: uppercase;
            @media #{$md}{
                font-size: 15px;
            }
        }
        &:hover{
        transform: translateY(-3px);
        transition: .3s;   
        & .th-icon{
            background: var(--white-color);
            transition: .3s;  
            & img{
                filter: brightness(0);
                transition: .3s;
            }
        }
        & .th-text{
            background: var(--white-color);
            transition: .3s;
            color: var(--black-bg);
        }
    }
    }
}

.th-footer-social2{
    & a{
        height: 48px;
        width: 48px;
        background: var(--black-bg);
        line-height: 48px;
        text-align: center;
        border-radius: 50px;
        display: inline-block;
        color: var(--secondary-color);
        transition: .3s;
        &:hover{
            background: var(--primary-color-2);
            transition: .3s;
            color: var(--secondary-color);
        }
    }
}

.th-footer-social2 {
    writing-mode: vertical-rl;
    @media #{$md,$xs}{
        writing-mode: inherit;
        text-align: center;
    }
}

.th-primary-btn.th-primary-btn-2.th-footer-btn-vertical-2 {
    writing-mode: sideways-lr;
    float: right;
    @media #{$md,$xs}{
        writing-mode: inherit;
        text-align: center;
        float: inherit;
        display: block;
        margin-bottom: 60px;
    }
}

.th-primary-btn.th-primary-btn-2.th-footer-btn-vertical-2 .th-text {
    padding: 32px 16px;
    @media #{$md,$xs}{
        padding: 16px 32px;
        text-align: center;
    }
}



.mtop-78 {
    margin-top: 78px;
}

.th-footer-btn-wrap {
    padding-bottom: 48px;
    display: flex;
    justify-content: center;
    gap: 24px;
    @media #{$lg}{
        padding-bottom: 40px;
    }
    @media #{$md,$xs}{
        padding-bottom: 30px;
    }
    @media #{$xs}{
        flex-direction: column;
    }
}

.th-skill-btn {
    position: absolute;
    top: 70%;
    right: 0;
    left: 0;
    margin: 0 auto;
    text-align: center;
    transform: translateY(-50%);
    transition: .3s;
    opacity: 0;
    visibility: hidden;
}

.th-skill-wrap:hover{
    .th-skill-btn {
        top: 50%;
        transition: .3s;
        opacity: 1;
        visibility: visible;
    }
}

.th-skil-btn-2{
    text-align: right;
    @media #{$md,$xs}{
        text-align: start;
    }
}

.th-banner-btn-wrap{
    display: flex;
    gap: 24px;
    @media #{$xs}{
        flex-direction: column;
        align-items: center;
    }
}


.th-btn-blog2{
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--primary-color-2);
    transition: .3s;
    padding: 16px 24px;
    background: #121212;
    border-radius: 88px;
    display: inline-block;
    & span{
        margin-left: 8px;
        & img{
            transition: .3s;
        }
    }
    &:hover{
        transition: .3s;
        background: var(--primary-color-2);
        color: var(--secondary-color);
        & span{
            & img{
                filter: brightness(0) invert(1);
                transition: .3s;
            }
        }
    }
}