/* Secondary Navigation */
.secondary-nav {
    padding: 0;
    border-block: 1px solid var(--black5);
    background: var(--black);
    position: sticky;
    top: 2.9rem;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;

    .seondStickytabs {
        overflow: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 25px;
        padding: 12px 0;
    }

    .seondStickytabs .list.active {
        background: linear-gradient(92deg,
                #39b6d8 7.6%,
                #f7d344 53.43%,
                #e38330 99.26%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .seondStickytabs .list {
        padding: 10px 0;

        display: flex;
        gap: 8px;
        align-items: center;
        position: relative;
        font-size: 14px;
        font-family: "go-medium";
        color: var(--grey10);
        min-width: max-content;
        cursor: pointer;
    }

    .seondStickytabs .list img {
        opacity: 0;
        transition: 0.4s ease-in-out;
        max-width: 18px;
    }

    .seondStickytabs .list.active img {
        opacity: 1;
    }
}

.masterImage {
    width: 100%;
    position: relative;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
}

#totop {
    position: relative;
    top: -70px;
}

/* Secondary Navigation end */

.tabPane {
    display: none;

    &.active {
        display: block;
    }
}

.faqtabs li{
cursor: pointer;
}



/* //hoverArrow */
.arrowWrap {
    position: relative;
    width: 22px;
    height: 22px;
    overflow: hidden;

    /* Initial positions */
    .arrow1 {
        transform: translate(0%, 0%);
        z-index: 2;
    }

    .arrow2 {
        transform: translate(-100%, 100%);
        z-index: 1;
    }




}

/* On hover - Diagonal movement */
.btn:hover .arrow1 {
    transform: translate(100%, -100%);
}

.btn:hover .arrow2 {
    transform: translate(0%, 0%);
}

/* //hoverArrow end*/



/* buttons */
.components {
    padding: 120px 0;
    background: var(--grey);
}

.buttonsWrap {
    display: flex;
    gap: 30px;
    align-items: center;
    border: 1px solid #d4d4d4;
    padding: 15px 0;
    flex-direction: column;
}

.btnClose {
    border-radius: 54px;
    background: #FADFE1;
    padding: 14px 24px;
    font: 16px 'go-medium';
    line-height: 150% !important;
    color: #DF2935;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}


/* Buttons */
.btnWhite {
    border-radius: 54px;
    background: white;
    padding: 14px 24px;
    font: 16px 'go-medium';
    line-height: 150% !important;
    color: #090909;
    border: 1px solid #d4d4d4;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}

.arrowWrap {
    position: relative;
    width: 22px;
    height: 22px;
    overflow: hidden;
}


/* Initial positions */
.arrow1 {
    transform: translate(0%, 0%);
    z-index: 2;
}

.arrow2 {
    transform: translate(-100%, 100%);
    z-index: 1;
}

/* On hover - Diagonal movement */
.btnWhite:hover .arrow1 {
    transform: translate(100%, -100%);
}

.btnWhite:hover .arrow2 {
    transform: translate(0%, 0%);
}

.btnBlack:hover .arrow1 {
    transform: translate(100%, -100%);
}

.btnBlack:hover .arrow2 {
    transform: translate(0%, 0%);
}

.btnWhite:hover .arrowDownload {
    transform: translateY(2px);
}

.arrowDownload {
    transition: transform 0.3s ease;
}


.arrowWrapper {
    position: relative;
    width: 20px;
    height: 20px;
    overflow: hidden;
}

.arrow {
    position: absolute;
    top: 0;
    left: 0;
    /* ✅ left side since icon is before text */
    width: 100%;
    height: 100%;
    transition: transform 0.25s ease-in-out;
}

.arrowMain {
    transform: translate(0%, 0%);
    z-index: 2;
}

.arrowClone {
    transform: translate(100%, 100%);
    /* 👈 start from bottom-right */
    z-index: 1;
}

.btnBlack:hover .arrowMain {
    transform: translate(-100%, -100%);
    /* 👈 go to top-left */
}

.btnBlack:hover .arrowClone {
    transform: translate(0%, 0%);
    /* 👈 come in diagonally from bottom-right */
}

.btnWhite.btnLink {
    color: white;
    border: none;
    background: transparent;

    svg path {
        fill: white;
    }
}

.btnBlack.btnLink {
    color: #090909;
    border: none;
    background: transparent;

    svg path {
        fill: #090909;
    }
}


.btnWhite.outline {
    background: transparent;
    border: 1px solid white;
    color: white;

    svg path {
        fill: white;
    }
}

.btnBlack.outline {
    background: transparent;
    border: 1px solid #090909;
    color: #090909;

    svg path {
        fill: #090909;
    }
}

.btnWhite.blurBg {
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(2.5px);
    border: 1px solid white;
    color: white;

    svg path {
        fill: white;
    }
}

.btnBlack.blurBg {
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(2.5px);
    border: 1px solid #090909;
    color: #090909;

    svg path {
        fill: #090909;
    }
}

.btnWhite.borderGradient {
    border: 1px solid transparent;
    background: linear-gradient(var(--white) 0 0) padding-box,
        linear-gradient(119deg, #39b6d8 -2.47%, #f7d344 47.29%, #e38330 112.78%) border-box;
    backdrop-filter: blur(2.5px);
    color: #090909;

    svg path {
        color: #090909;
    }
}


.btnBlack.borderGradient {
    border: 1px solid transparent;
    background: linear-gradient(var(--black) 0 0) padding-box,
        linear-gradient(119deg, #39b6d8 -2.47%, #f7d344 47.29%, #e38330 112.78%) border-box;
    backdrop-filter: blur(2.5px);
    color: white;
    
    svg path {
        fill: white;
    }
}

.btnBlack {
    border-radius: 54px;
    background: #090909;
    padding: 14px 24px;
    font: 16px 'go-medium';
    line-height: 150% !important;
    color: white;
    border: 1px solid #262626;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.btnWhite.btnMd {
    padding: 12px 22px;
    font: 14px 'go-medium';

    svg{
        max-width: 20px;
        max-height: 20px;
    }
}

.btnWhite.btnSm {
    padding: 10px 20px;
    font: 12px 'go-medium';

    svg, img{
        max-width: 18px;
    }
}

.btnBlack.btnMd {
    padding: 12px 22px;
    font: 14px 'go-medium';

       svg{
        max-width: 20px;
        max-height: 20px;
    }
}

.btnBlack.btnSm {
    padding: 10px 20px;
    font: 12px 'go-medium';

    svg, img{
        max-width: 18px;
    }
}


/* Buttons end */



/* responsive */


@media (max-width: 767px) {
    .btnWhite.btnMdMob {
        padding: 12px 22px;
        font: 14px 'go-medium';
    }

    .btnWhite.btnSmMob {
        padding: 10px 20px;
        font: 14px 'go-medium';
    }

    .btnBlack.btnMdMob {
        padding: 12px 22px;
        font: 14px 'go-medium';
    }

    .btnBlack.btnSmMob {
        padding: 10px 20px;
        font: 14px 'go-medium';
    }

    .btnWhite.btnMdMobFont {
        padding: 12px 22px;
        font: 12px 'go-medium';
    }

    .btnWhite.btnSmMobFont {
        padding: 10px 20px;
        font: 12px 'go-medium';
    }

    .btnBlack.btndMobFont {
        padding: 12px 22px;
        font: 12px 'go-medium';
    }

    .btnBlack.btnSmMobFont {
        padding: 10px 20px;
        font: 12px 'go-medium';
    }
    .secondary-nav .seondStickytabs{
        justify-content: flex-start;
    }

}
/* buttons end */