.theme-yellow {
    --theme-color: #FF9D15;
    --theme-color2: #0052DA;
}

.theme-golden {
    --theme-color: #BA8756;
    --theme-color2: #161921;
    --smoke-color2: #F7F2ED;
}

.themeholy-btn {
    &.style6 {
        background-color: $white-color;
        color: $title-color;
        &:before,
        &:after {
            background-color: $theme-color;
        }
        &:hover {
            color: $white-color;
        }
    }
}

.btn-group-wrap {
    display: flex;
}

.box-text {
    margin-bottom: -0.5em;
}
.btn-group {
    display: inline-flex;
}

.container-full {
    max-width: 1920px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
    @include xs {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.bg-top-left {
    background-size: auto;
    background-position: top left;
}

.sub-title2 {
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    font-family: $title-font;
    color: $theme-color2;
    margin-bottom: 30px;
    text-transform: capitalize;
    line-height: 30px;
    background-color: $smoke-color2;
    border-radius: 99px;
    padding: 0 17px;
    &.bg-2 {
        background-color: #E5EFFF;
    }
    &.bg-3 {
        background-color: #2A2F3C;
        color: $theme-color;
    }
}

.slick-dots {
    li {
        margin-right: 20px;
    }
    button {
        width: 14px;
        height: 14px;
        &:before {
            width: 30px;
            height: 30px;
            margin: -15px 0 0 -15px;
            opacity: 0;
        }
    }
    .slick-active {
        button {
            &:before {
                opacity: 0.3;
            }
        }
    }
}

.dot-line {
    .slick-dots {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        &:before,
        &:after {
            content: '';
            height: 2px;
            width: 100px;
            background-color: $theme-color;
            @include xs {
                width: 80px;
            }
            @include vxs {
                width: 40px;
            }
        }
        &:before {
            margin-right: 25px;
        }
        &:after {
            margin-left: 25px;
        }
    }
}
