
.color-primary{
    color:$accent-1;
}
.color-sec{
    color:$accent-2;
}
.color-white-1{
    color: $white-1; 
}
.color-black-1{
    color:$black-1
}
.color-black-2{
    color:$black-2
}
.color-gray-1{
    color:$gray-1
}
.color-gray-2{
    color:$gray-2
}
.color-gray-3{
    color:$gray-3
}


.bg-white{
    background-color: $white-1 !important;
}

.bg-black-1{
    background-color: $black-1;
}
.bg-black-2{
    background-color: $black-2;
}
.bg-gray-1{
    background-color: $gray-1;
}
.bg-gray-2{
    background-color: $gray-2;
}
.bg-gray-3{
    background-color: $gray-3;
}


.fs-xxl{
    font-size:$font-xxl;
    @include media-query(992px) {
        font-size: 80px;
    }
    @include media-query(492px) {
        font-size: 60px;
    }
}
.fs-xl{
    font-size:$font-xl;
    @include media-query(992px) {
        font-size: 60px;
    }
    @include media-query(492px) {
        font-size: 40px;
    }
}
.fs-lg{
    font-size:$font-lg;
    @include media-query(992px) {
        font-size: 60px;
    }
    @include media-query(492px) {
        font-size: 40px;
    }
}
.fs-heading{
    font-size:$font-heading;
    @include media-query(492px) {
        font-size: 37px;
    }
}
.fs-heading-2{
    font-size:$font-heading-2;
    @include media-query(492px) {
        font-size: 26px;
    }
}
.fs-medium{
    font-size:$font-medium;
    @include media-query(1200px) {
        font-size: 24px;
    }
    @include media-query(492px) {
        font-size: 18px;
    }
}
.fs-subheading{
    font-size:$font-subheading;
    @include media-query(492px) {
        font-size: 16px;
    }
}
.fs-body{
    font-size:$font-body;
}
.fs-body-2{
    font-size:$font-body-2;
}
.fs-body-3{
    font-size:$font-body-3;
}
.fw-3{
    font-weight: 300;
}
.fw-4{
    font-weight: 400;
}
.fw-5{
    font-weight: 500;
}
.fw-7{
    font-weight: 700;
}
.fw-9{
    font-weight: 900;
}
.lh-200{
    line-height: 200%;
}
.lh-170{
    line-height: 170%;
}
.lh-160{
    line-height: 160%;
}
.lh-150{
    line-height: 150%;
}
.lh-140{
    line-height: 140%;
}
.lh-120{
    line-height: 120%;
}
.lh-110{
    line-height: 110%;
}
.ls-1{
    letter-spacing: -0.01em;
}
.ls-2{
    letter-spacing: -0.02em;
}
.ls-3{
    letter-spacing: 0.03em;
}
.ls-4{
    letter-spacing: 0.04em;
}
.ls-5{
    letter-spacing: 0.05em;
}
.box-shadow{
    box-shadow: $box-shadow;
}
.text-shadow{
    text-shadow: $text-shadow;
}
.box-bg{
    background: linear-gradient(152.44deg, rgba(255, 255, 255, 0.3) -1.03%, rgba(255, 255, 255, 0) 51.17%, rgba(255, 255, 255, 0.3) 102.09%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid $gray-3;
    &.p-32{
        padding: 32px;
        @include media-query(992px) {
            padding: 24px;
        }
        @include media-query(492px) {
            padding: 20px;
        }
    }
    &.p-24{
        padding: 24px;
        @include media-query(767px) {
            padding: 20px;
        }
        @include media-query(492px) {
            padding: 16px;
        }
    }
    &.p-8{
        padding: 8px;
    }
}
.hover-animation{
    transition: $transition;
    &:hover{
        transform: translateY(-10px);
    }
}
// Vertical Center Line
.vertical-line{
    position: relative;
    &::before{
        content: '';
        position: absolute;
        left: calc(50% - 1px );
        width: 1px;
        height: 100%;
        background: $accent-2;
        z-index: 10;
        @include media-query(1199px) {
            opacity: 0.20;
        }
    }
}
// Search Bar
.has-search{
    position: relative;
    button{
        border: 0;
        background: transparent;
    }
    .form-control {
        padding-right: 50px;
    }
    .search {
        position: absolute;
        right: 13px;
        z-index: 2;
        display: block;
        font-weight: 700;
        font-size: 21px;
        line-height: 130%;
        padding-top: 13px;
        text-align: center;
        color: $black-1;
    }
}
.dark{
    .color-black-1{
        color: $white-1;
    }
    .color-white-1{
        color: $gray-3; 
    }
    .color-gray-2{
        color:$gray-3
    }
    .color-gray-1{
        color:$gray-2
    }
    .bg-dark-2{
        background-color: $white-1;
    }
    .bg-white-1{
        background-color: $black-1 !important;
    }
    .bg-black-2{
        background-color: $gray-1;
    }
    .bg-gray-3{
        background-color: $black-1
    }

    .box-bg{
        background: linear-gradient(152.44deg, rgb(200 197 197 / 30%) -1.03%, rgb(169 168 168 / 0%) 51.17%, rgb(175 168 168 / 30%) 102.09%);
        border-color:$gray-1;
    }
}