/*******************************************************/
/******************  ## Common Classes *****************/
/*******************************************************/
.page-wrapper
    position: relative
    z-index: 9
    width: 100%
    margin: 0 auto
    overflow: hidden
    min-width: 300px
    
.container
    +res-ab(xl)
        max-width: $container
        padding-left: $gutter/2
        padding-right: $gutter/2
        &.container-1440
            max-width: 1470px
        
.container-fluid
    +res-ab(sm)
        +gapLR(padding, 25px)
    +res-ab(xxl)
        +gapLR(padding, 70px)
      
.col-small
    +res-bl(xs)
        flex: 0 0 100%
        max-width: 100%
.row
    --bs-gutter-x: 30px
    
.no-gap
    --bs-gutter-x: 0
    
@for $i from 1 through 10
    .gap-#{10 * $i}
        +res-ab(xxl)
            --bs-gutter-x: #{10px * $i}
        
.row-cols-xl-7
    > *
        +res-ab(xl)
            width: 14.2857%
            flex: 0 0 auto
    
/** Section Title style **/
.section-title
    margin-top: -7px
    position: relative
    .sub-title
        font-size: 20px
        font-weight: 500
        display: inline-block
        color: $secondary-color
    h2
        +res-bl(md)
            font-size: 35px
        +res-bl(ms)
            font-size: 30px
            line-height: 1.3
    h3
        +res-bl(ms)
            font-size: 25px
    .bg-text
        font-size: 16vw
        @extend %heading
        +abs-middle()
        z-index: -1
        opacity: 0.05
        top: 65%
    &.text-center
        .bg-text
            color: white
   
/** Button style **/
.theme-btn,
a.theme-btn
    z-index: 1
    cursor: pointer
    overflow: hidden
    transition: 0.5s
    font-weight: 700
    text-align: center
    padding: 12px 30px
    align-items: center
    position: relative
    display: inline-flex
    color: $heading-color
    justify-content: center
    text-transform: capitalize
    background: $secondary-color
    i
        transition: 0.5s
        margin-left: 10px
    &:after
        content: ''
        +size(calc(100% + 5px))
        z-index: -1
        left: 50%
        top: 50%
        transition: 0.75s
        position: absolute
        background: $primary-color
        transform: translate(-50%, -50%) scale(1)
    &:hover
        color: white
        &:after
            border-radius: 50%
            transform: translate(-50%, -50%) scale(0)
        i
            margin-left: 13px;
            margin-right: -3px
    &.style-two
        color: white
        background: $primary-color
        &:after
            background: $secondary-color
        &:hover
            color: $heading-color
    &.style-three
        color: white
        background: $secondary-color
        &:after
            background: $heading-color
    &.style-four
        color: $heading-color
        background: transparent
        border: 1px solid $border-color
        &:not(:hover)
            &:after
                background: transparent
    +res-bl(sm)
        padding: 9px 25px

/* Details Btn */
.details-btn
    font-size: 22px
    +circle(white, 70px)
    display: inline-block
    color: $primary-color
    +res-bl(ms)
        +size(45px)
        font-size: 16px
        line-height: 45px

/* Read More */
.read-more
    font-weight: 500
    align-items: center
    display: inline-flex
    text-decoration: underline
    text-transform: capitalize
    i
        float: right
        font-weight: 400
        margin-left: 7px
        transition: 0.5s
    &:hover
        color: $secondary-color
        text-decoration: underline
        i
            margin-left: 10px
      
/* List style One */
.list-style-one
    li
        display: flex
        font-weight: 500
        color: $heading-color
        &:not(:last-child)
            margin-bottom: 8px
        &:before
            flex: none
            +size(20px)
            font-size: 11px
            margin-top: 6px
            content: "\f00c"
            font-weight: 600
            line-height: 16px
            border: 2px solid
            text-align: center
            margin-right: 12px
            border-radius: 50%
            color: $secondary-color
            font-family: 'Font Awesome 5 Pro'
        
/* List style Two */
.list-style-two
    li
        &:not(:last-child)
            margin-bottom: 8px
        a
            position: relative
            &:before
                content: "\f101"
                position: absolute
                left: 0
                opacity: 0
                transition: 0.5s
                font-family: "Font Awesome 5 Pro"
            &:hover
                padding-left: 20px
                text-decoration: underline
                &:before
                    opacity: 1
            
/* List style Three */
.list-style-three
    li
        &:not(:last-child)
            margin-bottom: 4px
        &:before
            content: "\f101"
            margin-right: 10px
            font-family: 'Font Awesome 5 Pro'
        
/** Social Link One **/
.social-style-one
    flex-wrap: wrap
    display: inline-flex
    +gapLR(margin, -10px)
    a
        +gapLR(margin, 10px)
        
/** Social Link Two **/
.social-style-two
    flex-wrap: wrap
    display: inline-flex
    +gapLR(margin, -5px)
    a
        +gapLR(margin, 5px)
        color: $secondary-color
        +circle($lighter-color, 40px)
        &:hover
            color: white
            background: $secondary-color
        
/** Social Link Three **/
.social-style-three
    flex-wrap: wrap
    display: inline-flex
    +gapLR(margin, -7.5px)
    a
        +gapLR(margin, 7.5px)
        &:hover
            color: $secondary-color
        
/** Tab Style One **/
.tab-style-one
    border-bottom: 1px solid $border-color
    .nav-link
        font-size: 18px
        border-radius: 0
        @extend %heading
        +gapLR(padding, 0)
        margin-bottom: -1px
        background: transparent
        border-bottom: 2px solid transparent
        +res-ab(xl)
            padding-bottom: 25px
        +res-bl(sm)
            font-size: 16px
        &.active
            color: $secondary-color
            border-bottom-color: $secondary-color
    .nav-item
        &:not(:last-child)
            margin-right: 40px
            +res-bl(md)
                margin-right: 20px
        
/*** Preloader style ** */
.preloader
    position: fixed
    left: 0
    top: 0
    width: 100%
    height: 100%
    z-index: 9999999
    +flexcenter(center)
    background-color: #FFFFFF
    background-repeat: no-repeat
    background-position: center center
    .custom-loader
        width: 55px
        aspect-ratio: 1
        --c: conic-gradient(from -90deg, #30f0b6 90deg, #0000 0)
        background: var(--c), var(--c);
        background-size: 40% 40%
        animation: preloader 1s infinite alternate

@keyframes preloader
    0%,
    10%
        background-position: 0 0,0 calc(100%/3)
    50%
        background-position: 0 0,calc(100%/3) calc(100%/3)
    90%,
    100%
        background-position: 0 0,calc(100%/3) 0


/* Pagination */    
.pagination
    align-items: center
    +gapLR(margin, -5px)
    li
        margin: 10px 5px 0
        a,
        .page-link
            padding: 0
            +size(45px)
            box-shadow: none
            font-weight: 600
            line-height: 43px
            text-align: center
            border-radius: 50%
            color: $heading-color
            border: 2px solid $border-color
        &.disabled,
        &:last-child
            .page-link
                border-radius: 50%
        &.active,
        &:hover:not(.disabled)
            .page-link
                color: white
                background: $secondary-color
                border-color: $secondary-color
        
/* Rating */
.ratting
    line-height: 1
    align-items: center
    display: inline-flex
    i
        margin: 3px
        color: #f1b000
        font-size: 14px
                
/*** Slick Dots ***/
.slick-arrow
    +size(60px)
    font-size: 22px
    transition: 0.5s
    background: white
    border-radius: 50%
    color: $heading-color
    box-shadow: $box-shadow
    &:focus,
    &:hover
        background: $primary-color
    
.slider-arrow
    .slick-arrow
        border: 1px solid $border-color
        &:not(:last-child)
            margin-right: 5px
        &:focus,
        &:hover
            color: white
            background: $secondary-color
            border-color: $secondary-color
                
/*** Slick Dots ***/
.slick-dots
    flex-wrap: wrap
    margin-top: 20px
    +flexcenter(center)
    li
        position: relative
        cursor: pointer
        +size(10px)
        transition: 0.5s
        margin: 10px 5px 0
        border-radius: 50%
        background: transparent
        border: 2px solid $secondary-color
        button
            opacity: 0
        &.slick-active
            background: $secondary-color

/*** Scroll Top style ***/
.scroll-top
    position: fixed
    bottom: 25px
    right: 0
    +size(40px)
    z-index: 99
    color: white
    display: none
    font-size: 14px
    cursor: pointer
    line-height: 40px
    border-radius: 5px
    background: $primary-color
    animation: pulse 2s infinite
  
/* Text White */
.text-white
    *, a,
    .sub-title,
    .read-more,
    .list-style-one li,
    .list-style-one li:before,
    .counter-text-wrap .count-text,
    .hotline .content a:not(:hover)
        color: white
    .service-two-item
        .icon
            i
                color: $primary-color
        .content
            p
                opacity: 0.6
    .hotline > i
        background: white
    .hotline > i
        border-color: white
        
/* Wave Shapes */
.wave-shapes
    position: absolute
    z-index: -1
    top: 0
    left: -100px
    +size(calc(100% + 100px), 100%)
    .shape
        position: absolute
        bottom: 0
        left: 0
        width: 100%
        animation: leftRightOne 6s infinite
        &.two
            animation-delay: 3s
        
/*Project Filter*/
.filter-btns-one
    display: flex
    flex-wrap: wrap
    +gapLR(margin, -5px)
    li
        cursor: pointer
        transition: 0.5s
        font-weight: 500
        padding: 4px 20px
        border-radius: 5px
        margin: 0 5px 10px
        color: $heading-color
        +res-bl(xs)
            +gapLR(padding, 15px)
        &.current
            background: white
            color: $secondary-color
            text-decoration: underline
            box-shadow: 10px 0 60px rgba(195, 195, 195, 0.5)
            
.filter-btns-two
    display: flex
    flex-wrap: wrap
    font-weight: 500
    +gapLR(margin, -18px)
    +res-ab(md)
        font-size: 18px
    +res-bl(sm)
        +gapLR(margin, -8px)
    li
        cursor: pointer
        transition: 0.5s
        margin: 0 18px 10px
        border-bottom: 3px solid transparent
        +res-bl(sm)
            +gapLR(margin, 8px)
        &.current
            color: $primary-color
            border-color: $primary-color

/* Position */
.rel
    position: relative
    
@for $i from 0 through 5
    .z-#{0 + $i}
        z-index: 0 + $i
    
.overlay
    +overlay($heading-color, 0.75)
    
/* Backgruond Size */
.bgs-cover
    background-size: cover
    background-position: center
    
/* Color + Background */
.bgc-black
    background-color: #0f1425
.bgc-gray
    background-color: $heading-color
.bgc-primary
    background-color: $primary-color
.bgc-secondary
    background-color: $secondary-color
.bgc-lighter
    background-color: $lighter-color
.color-secondary
    color: $secondary-color
.bgc-black-with-lighting
    background: #1e1e22
    &:after,
    &:before
        position: absolute
        +size(450px)
        z-index: -1
        content: ''
        border-radius: 50%
        background: $secondary-color
        animation: zoomInOut 5s infinite
    &:after
        right: -8%
        top: -15%
        filter: blur(110px)
    &:before
        left: -10%
        top: 20%
        filter: blur(350px)
        animation-delay: 2.5s
    
/* Border Radius */
@for $i from 1 through 6
    .br-#{5 * $i}
        border-radius: 5px * $i