%pr {
    position: relative;
}
%pa {
    position: absolute;
    content : '';
}
%flex {
    display: flex;
    flex-wrap: wrap;
}
%center {
    top: 50%;
    left: 50%;
    @include transform(translate(-50% , -50%));
    position: absolute;
    content: "";
}
%fluid {
    top: 50%;
    left: 50%;
    @include transform(translate(-50% , -50%));
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
}
//Padding Top and Bottom
.padding-top {
    padding-top: 90px;
}
.padding-bottom {
    padding-bottom: 90px;
}
.padding-top-2 {
    padding-top: 45px;
}
.padding-bottom-2 {
    padding-bottom: 45px;
}
.pt-80 {
    padding-top: 80px;
}
.pb-80 {
    padding-bottom: 80px;
}
@include breakpoint(lg) {
    .padding-top {
        padding-top: 150px;
    }
    .padding-bottom {
        padding-bottom: 150px;
    }
    .padding-top-2 {
        padding-top: 75px;
    }
    .padding-bottom-2 {
        padding-bottom: 75px;
    }
}
/*Section Header*/

.mb-30-none {
    margin-bottom: -30px !important;
}
.mb-40-none {
    margin-bottom: -40px !important;
}
.mb-40 {
    margin-bottom: 40px;
}
.tab-item {
    display: none;
    &.active {
        display: block;
    }
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
}
.tab-menu {
    li {
        cursor: pointer;
    }
}
body {
    *::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #F5F5F5;
    }
    *::-webkit-scrollbar {
        width: 6px;
        height: 4px;
        background-color: #000;
    }
    *::-webkit-scrollbar-button {
        background-color: #000;
    }
    *::-webkit-scrollbar-thumb {
        background-color: #000000;
    }
}
*::selection {
    background-color: $theme-color;
    color: $theme-one;
}
.mt-10 {
    margin-top: 10px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-50 {
    margin-top: 50px;
}
.mb-10 {
    margin-bottom: 10px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb--20 {
    margin-bottom: -20px;
}
.mb--50 {
    margin-bottom: -50px;
}
.mb-50 {
    margin-bottom: 50px;
}
.pt-10 {
    padding-top: 10px;
}
.pt-20 {
    padding-top: 20px;
}
.pt-50 {
    padding-top: 50px;
}
.pb-10 {
    padding-bottom: 10px;
}
.pb-20 {
    padding-bottom: 20px;
}
.pb-50 {
    padding-bottom: 50px;
}

.c-thumb {
    overflow: hidden;
    a {
        display: block;
    }
    img {
        width: 100%;
        @include transition($transition);
    }
}
.light-color {
    * {
        color: $white-color;
    }
}
.mw-lg-100 {
    @include breakpoint(lg) {
        max-width: 100%;
    }
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0 ,0 ,0, .7);
    z-index: 99;
    display: none;
    &.active {
        display: block;
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn;
        -moz-animation-name: fadeIn;
        animation-duration: .3s;
        -webkit-animation-duration: .3s;
        -moz-animation-duration: .3s;
    }
}
.bg-overlay {
    position: relative;
    overflow: hidden;
    &::after {
        @extend %center;
        background: rgba($color:$title-color, $alpha:.831);
        width: 101%;
        height: 101%;
    }
    .container, .container-fluid {
        position: relative;
        z-index: 1;
    }
}

.bg-theme-one {
    background: $theme-one;
}
.section-bg {
    background: $section-bg;
}
.body-bg {
    background: $body-bg;
}
/*Section Header Starts Here*/
.section-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 40px;
    .title {
        text-transform: capitalize;
        margin-bottom: 25px;
    }
    p {
        line-height: 1.5;
    }
    &.margin-olpo {
        margin-bottom: 30px;
    }
    @include breakpoint(sm) {
        margin-bottom: 50px;
        &.margin-olpo {
            margin-bottom: 35px;
        }
    }
    @include breakpoint(md) {
        margin-bottom: 65px;
        .title {
            margin-bottom: 32px;
        }
        p {
            font-size: 20px;
        }
        &.margin-olpo {
            margin-bottom: 40px;
        }
    }
    &.left-style {
        margin-left: 0;
        text-align: left;
    }
}
.clippy-section {
    position: relative;
    &::before {
        display: none;
    }
    @include breakpoint(lg) {
        padding-top: 270px;
        &::before {
            display: block;
            position: absolute;
            content: "";
            width: 100%;
            height: 270px;
            left: 0;
            top: 0;
            clip-path: polygon(0 0, 100% 50%, 100% 0);
            -webkit-clip-path: polygon(0 0, 100% 50%, 100% 0);
            background: $body-bg;
        }
    }
    &.section-bg {
        .clippy-section {
            &::before {
                background: $section-bg;
            }
        }
    }
}
.load-more {
    margin-top: 20px;
    @include breakpoint(md) {
        margin-top: 55px;
    }
    text-align: center;
}
.rtl {
    direction: rtl;
}
.container {
    @include breakpoint(xxl) {
        max-width: 1310px;
    }
}
.nulla-list {
    margin-bottom: 33px;
    li {
        position: relative;
        padding: 0;
        padding-left: 30px;
        margin-bottom: 12px;
        &::before {
            position: absolute;
            content: "\f101";
            top: 0;
            left: 0;
            font-weight: 600;
            font-family: "Font Awesome 5 Free";
        }
        &:last-child {
            margin-bottom: -8px;
        }
    }
    &:last-child {
        margin-bottom: 0;
    }
}

.top-shape {
    position: relative;
    overflow: hidden;
    @include breakpoint(xl) {
        padding-top: 300px;
        &::before {
            position: absolute;
            content: "";
            bottom: calc(100% - 150px);
            left: 50%;
            height: 300px;
            width: 100%;
            @include transform(translateX(-50%));
            background: $section-bg;
            @include border-radius(50%);
        }
    }
    &.section-bg {
        &::before {
            background: $body-bg;
        }
    }
}
.top-shape-2 {
    position: relative;
    overflow: hidden;
    @include breakpoint(xl) {
        padding-top: 300px;
        &::before {
            position: absolute;
            content: "";
            bottom: calc(100% - 150px);
            left: 50%;
            height: 150px;
            width: 100%;
            @include transform(translateX(-50%));
            background: $body-bg;
            @include border-radius(100%);
        }
    }
}
.social-icons {
    @extend %flex;
    margin: -3px;
    li {
        padding: 3px;
        a {
            width: 44px;
            height: 44px;
            background: #535e7b;
            @include border-radius(50%);
            color: $white-color;
            text-align: center;
            line-height: 44px;
            &.facebook {
                background: $facebook;
            }
            &.twitter {
                background: $twitter;
            }
            &.linkedin {
                background: $linkedin;
            }
            &.google {
                background: $google;
            }
            &.behance {
                background: $behance;
            }
            &.instagram {
                background: $instagram;
            }
            &.vimeo {
                background: $vimeo;
            }
            &.pinterest {
                background: $pinterest;
            }
            &.star {
                background: $star;
            }
            &:hover {
                color: $white-color;
                background: $theme-color;
            }
        }
    }
}