/*======= Advanced Tabs =======*/
.yanke-advanced-tab {
    display: flex;
    flex-direction: column;

    .tabs-btn {
        margin: 60px 0 0;
    }

    &.style-one {
        .advanced-tab-btns {
            justify-content: center;
            margin: -10px;

            li {
                padding: 10px;

                a {
                    position: relative;
                    padding: 25px 70px;
                    border: 2px solid #f3f3f3;
                    color: $secondary-color;
                    line-height: 1;
                    @include transition(0.3s);

                    @include respond-below(lg) {
                        padding: 25px 30px 25px 70px;
                        font-size: 12px;
                    }

                    .title {
                        text-transform: uppercase;
                        font-size: 24px;
                        letter-spacing: -1px;
                        font-weight: 700;
                        font-family: $raj;
                        display: block;
                        margin-bottom: 10px;
                        @include transition(0.3s);

                        @include respond-below(lg) {
                            font-size: 20px;
                        }
                    }

                    .nav-desc {
                        font-size: 14px;
                    }

                    .icon {
                        position: absolute;
                        left: 20px;
                        top: 25px;
                        color: $primary-color;
                        font-size: 30px;
                        @include transition(0.3s);

                        img {
                            max-width: 30px;
                        }
                    }

                    &::before {
                        position: absolute;
                        left: 50%;
                        top: -15px;
                        transform: translateX(-50%);
                        background-color: $secondary-color;
                        content: "";
                        width: 30px;
                        height: 15px;
                        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                        visibility: hidden;
                        opacity: 0;

                        @include respond-below(md) {
                            display: none;
                        }
                    }

                    &:hover,
                    &.active {
                        background-color: $secondary-color;
                        border-color: $secondary-color;

                        &,
                        .title {
                            color: $white;
                        }
                    }

                    &.active {
                        &:before {
                            opacity: 1;
                            visibility: visible;
                        }
                    }
                }
            }
        }
    }

    &.style-two {
        .advanced-tab-btns {
            justify-content: center;
            margin: -15px;
            position: relative;
            z-index: 2;

            li {
                padding: 15px;

                a {
                    background-color: $white;
                    border-radius: 5px;
                    text-align: center;
                    padding: 35px;
                    position: relative;
                    z-index: 1;
                    color: $secondary-color;

                    @include respond-below(lg) {
                        padding: 20px;
                    }

                    .title {
                        font-family: $raj;
                        font-size: 24px;
                        font-weight: 700;

                        @include respond-below(lg) {
                            font-size: 18px;
                        }
                    }

                    .nav-desc {
                        font-weight: 700;
                        font-size: 14px;
                    }

                    span {
                        display: block;

                        &.icon {
                            font-size: 70px;
                            line-height: 1;
                            margin-bottom: 20px;

                            @include respond-below(lg) {
                                font-size: 50px;
                            }

                            img {
                                max-width: 70px;

                                @include respond-below(lg) {
                                    max-width: 50px;
                                }
                            }
                        }
                    }

                    &::before {
                        content: "";
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        top: -20px;
                        background-color: $white;
                        height: 20px;
                        width: 40px;
                        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                        box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.06);
                        @include transition(0.3s);
                        visibility: hidden;
                        opacity: 0;
                        z-index: 2;
                    }

                    &.active {
                        filter: drop-shadow(0px 3px 16px rgba(0, 0, 0, 0.06));

                        &::before {
                            opacity: 1;
                            visibility: visible;
                        }
                    }
                }
            }
        }
    }

    &.button-top {
        flex-direction: column-reverse;

        .tabs-btn {
            margin: 0 0 50px;
        }

        &.style-one {
            li {
                a {
                    &::before {
                        top: auto;
                        bottom: -15px;
                        clip-path: polygon(100% 0, 0 0, 50% 100%);
                    }
                }
            }
        }

        &.style-two {
            li {
                a {
                    &::before {
                        top: auto;
                        bottom: -20px;
                        clip-path: polygon(100% 0, 0 0, 50% 100%);
                    }
                }
            }
        }
    }
}
