%flex { display: flex; flex-wrap: wrap; } %center { top: 50%; left: 50%; @include transform(translate(-50%, -50%)); position: absolute; content: ""; } .pt-80 { padding-top: 80px; } .pb-80 { padding-bottom: 80px; } .pt-100 { padding-top: 70px; } .pb-100 { padding-bottom: 70px; } .pt-50 { padding-top: 35px; } .pb-50 { padding-bottom: 35px; } @include breakpoint(lg) { .pt-100 { padding-top: 100px; } .pb-100 { padding-bottom: 100px; } .pt-50 { padding-top: 50px; } .pb-50 { padding-bottom: 50px; } } .overlayer { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 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: 0.3s; -webkit-animation-duration: 0.3s; -moz-animation-duration: 0.3s; } } .rtl { direction: rtl; } .ltr { direction: ltr; } .section-header { margin-bottom: 30px; position: relative; z-index: 1; &__subtitle { color: var(--base-clr); display: inline-block; text-transform: capitalize; margin: 0; display: inline-flex; align-items: flex-end; position: relative; &::after { display: inline; content: ""; background: var(--base-clr); height: 2px; width: 60px; @include border-radius(2px); left: 100%; bottom: 0; } margin-bottom: 20px; } &.text-lg-end { .section-header__subtitle { padding-right: 60px; &::after { left: calc(100% - 60px); } } } &__title { margin-bottom: 20px; } p { max-width: 630px; &:not(:last-child) { margin-bottom: 22px; } } &.text-center { max-width: 720px; margin-left: auto; margin-right: auto; .section-header__subtitle { justify-content: center; } p { max-width: 660px; margin-left: auto; margin-right: auto; } } &.text-white { color: $light-color; .section-header__title { color: $white; } } @include breakpoint(md) { margin-bottom: 40px; } @include breakpoint(lg) { margin-bottom: 50px; } } .pagination { display: flex; flex-wrap: wrap; justify-content: center; margin: -5px; margin-top: 30px; li { padding: 5px; a { width: 35px; height: 35px; line-height: 35px; text-align: center; @include border-radius(4px); background: var(--section-bg); color: var(--title-clr); border: 1px solid var(--border-clr); &:hover { border-color: var(--base-clr); } &.active { background: var(--base-clr); border-color: var(--base-clr); color: $white; } &.disabled { background: rgba(var(--base-rgb), 0.1); } } } } .owl-dots { display: flex; flex-wrap: wrap; margin: -3px; margin-top: 20px; justify-content: center; .owl-dot { width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; @include border-radius(50%); @include transition($transition); margin: 3px; &.active { @include border-radius(50%); border: 1px solid var(--base-clr); border-color: var(--base-clr); @include transform(scale(1.3)); } span { background: var(--base-clr); width: 5px; height: 5px; @include border-radius(50%); } } } .toTopBtn { position: fixed; bottom: -60px; right: 30px; width: 40px; line-height: 40px; display: block; text-align: center; color: var(--base-clr); @include border-radius(5px); @include transition($transition); cursor: pointer; z-index: 3; background: var(--title-clr); &.active { bottom: 30px; } } .loader { position: fixed; inset: 0; background: var(--section-bg); z-index: 99999; &::before { @extend %center; width: 46px; height: 46px; @include border-radius(50%); border: 4px solid var(--title-clr); border-left-color: var(--base-clr); border-right-color: var(--base-clr); animation: rotate 3s linear infinite; } } @keyframes rotate { 0% { @include transform(translate(-50%, -50%) rotate(0deg)); } 100% { @include transform(translate(-50%, -50%) rotate(720deg)); } }