/*
 Theme Name: Shapro
 Theme URI: http://themewar.com/html/shapro/
 Author: themewar
 Author URI: https://themeforest.net/user/themewar/portfolio
 Description: Shapro - Multipurpose Landing Page HTML5 Responsive Templates
 Version: 1.0
 License:
 License URI:
 */
/*==================================
 [Table of contents]
 ===================================
 1. Home 01
 2. Home 02
 3. Home 03
 4. Home 04
 5. Home 05
 6. About Page
 7. Contact Page
 8. Portfolio Page
 9. Portfolio Details Page
 10. Service Page
 11. Service Details Page
 12. Shop Page
 13. Product Details
 14. Blog Page
 15. Blog Details Details
*/
/*------------------------------------------------------
/ 1. Home 01
/------------------------------------------------------*/
/*----   Header Topbar ------*/
.topbar-1 {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 9;
    background: #fff
    }
.single-info {
    position: relative;
    padding: 13px 0 0 0
    }
.single-info i {
    font-size: 16px;
    line-height: 24px;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    margin-right: 13px
    }
.single-info h5 {
    font-size: 16px;
    position: relative;
    display: inline-block;
    line-height: 24px;
    color: #131418;
    font-weight: 400;
    margin: 0 63px 0 0
    }
.single-info h5:after {
    position: absolute;
    content: "";
    right: -35px;
    top: -15px;
    width: 1px;
    height: 55px;
    background-color: #dcdcdc
    }
.single-info h5:last-child:after {
    display: none
    }
.single-info h5:last-child {
    margin-right: 0
    }
.single-info h5 a {
    color: #131418
    }
.single-info h5 a:hover {
    color: inherit
    }
.topbar-right {
    position: relative;
    margin: 0 0 0;
    text-align: right;
    padding: 0
    }
.topbar-right ul {
    display: inline-block;
    margin: 0 -5px 0 0;
    padding: 0
    }
.topbar-right ul li {
    display: inline-block;
    list-style: none
    }
.topbar-right ul li a {
    position: relative;
    border-left: 1px solid #dcdcdc;
    font-size: 16px;
    color: #131313;
    line-height: 52px;
    z-index: 1;
    padding: 0 16px;
    display: inline-block;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.topbar-right li a:after {
    content: "";
    position: absolute;
    left: auto;
    right: 0;
    bottom: -2px;
    height: 55px;
    z-index: -1;
    width: 0;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.topbar-right li a:hover:after {
    width: 100%;
    left: 0;
    right: auto
    }
.topbar-right li a:hover {
    color: #fff
    }
.topbar-right .shapro-btn-1 {
    height: 55px;
    padding: 22px 36px;
    font-size: 14px;
    font-weight: 600;
    font-family: "Jost", sans-serif;
    border-radius: 0
    }
.topbar-right .shapro-btn-1:after {
    border-radius: 0
    }
/*----  Main Header ------*/
.header-01 {
    position: absolute;
    left: 0;
    top: 55px;
    width: 100%;
    z-index: 9;
    background: transparent
    }
.logo-1 {
    position: relative;
    padding: 35px 0 29px
    }
.logo-1 img {
    height: 48px;
    width: auto
    }
.menuButton {
    display: none
    }
.menuButton a {
    background: #FFF;
    color: #051133;
    font-weight: 700;
    height: 45px;
    border-radius: 5px;
    width: 45px;
    line-height: 45px;
    display: inline-block;
    text-align: center;
    display: block;
    font-size: 20px;
    text-transform: uppercase;
    padding: 0 5px;
    margin-right: 10px;
    border: none
    }
.menuButton a:hover, .menuButton a.active {
    color: #364aeb
    }
.menu_1 {
    position: relative;
    display: flex;
    justify-content: flex-end
    }
.menu_1 ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    line-height: 0.8
    }
.menu_1 ul li {
    list-style: none;
    margin: 53px 47px 0 0;
    line-height: 0.8;
    padding-bottom: 45px;
    position: relative
    }
.menu_1 ul li a {
    font-size: 17px;
    font-weight: 700;
    font-family: "Jost", sans-serif;
    color: #fff;
    text-transform: capitalize;
    line-height: 0.8;
    position: relative
    }
.menu_1 > ul > li > a:after {
    content: "";
    position: absolute;
    left: auto;
    right: 0;
    bottom: -40px;
    height: 1px;
    width: 0;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.menu_1 > ul > li:hover > a:after {
    width: 100%;
    left: 0;
    right: auto
    }
.menu_1 > ul > li:hover > a {
    transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.menu_1 > ul > li ul {
    position: absolute;
    left: -30px;
    top: 100%;
    background: #333;
    width: 200px;
    z-index: 9;
    display: block;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    -webkit-transform: translate3d(0, 50px, 0, 0);
    -ms-transform: translate3d(0, 50px, 0);
    -o-transform: translate3d(0, 50px, 0, 0);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1)
    }
.menu_1 > ul > li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0, 0)
    }
.menu_1 > ul > li ul ul {
    left: calc(100% + 2px);
    top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    -webkit-transform: translate3d(0, 50px, 0, 0);
    -ms-transform: translate3d(0, 50px, 0);
    -o-transform: translate3d(0, 50px, 0, 0);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1)
    }
.menu_1 > ul > li ul li:hover > ul {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0, 0)
    }
.menu_1 > ul > li ul li {
    display: block;
    padding: 6px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    margin: 0;
    position: relative
    }
.menu_1 > ul > li ul li:last-child {
    border-bottom: none
    }
.menu_1 > ul > li ul li.menu-item-has-children:before {
    content: "...";
    position: absolute;
    right: 19px;
    top: 0;
    font-weight: 600;
    line-height: 30px;
    color: #fff;
    font-size: 24px;
    letter-spacing: 0
    }
.menu_1 > ul > li ul li a {
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 32px;
    display: block;
    color: #fff;
    font-weight: 500;
    position: relative
    }
.menu_1 > ul > li ul li:hover > a {
    color: #364aeb
    }
.menu_1 > ul > li ul li.menu-item-has-children:hover:before {
    color: #364aeb
    }
.access_btns {
    position: relative;
    display: flex;
    justify-content: flex-end;
    padding: 36px 0 24px 13px
    }
.access_btns a.src_btn, .access_btns a.cart {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    font-size: 16px;
    line-height: 54px;
    color: #fff;
    position: relative;
    z-index: 1;
    letter-spacing: 0
    }
.access_btns a.src_btn {
    margin-left: 16px;
    background: #fff;
    color: #131313
    }
.access_btns .cart_btn a.cart > span {
    width: 23px;
    height: 23px;
    background: #fff;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 800;
    line-height: 23px;
    color: #2b2b2b;
    letter-spacing: 0.7px;
    font-family: "Jost", sans-serif;
    display: block;
    position: absolute;
    right: -4px;
    top: -7px;
    text-align: center
    }
.access_btns a.src_btn:after, .access_btns a.cart:after {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    content: "";
    margin: auto;
    background: #fff;
    border-radius: 50%;
    z-index: -1;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.access_btns a.src_btn:after {
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.access_btns a.src_btn:hover:after, .access_btns a.cart:hover:after {
    width: 100%;
    height: 100%
    }
.access_btns .cart_btn:hover a.cart:after {
    width: 100%;
    height: 100%
    }
.access_btns .cart_btn:hover a.cart {
    color: #131313
    }
.access_btns a.src_btn:hover {
    color: #fff
    }
.mini_cart {
    position: absolute;
    width: 280px;
    background: #051133;
    top: 100%;
    right: 0;
    z-index: 9;
    padding: 30px;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    -webkit-transform: translate3d(0, 50px, 0, 0);
    -ms-transform: translate3d(0, 50px, 0);
    -o-transform: translate3d(0, 50px, 0, 0);
    -webkit-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    -moz-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    -o-transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1)
    }
.access_btns .cart_btn:hover .mini_cart, .access_btns_2 .cart_btn:hover .mini_cart {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0, 0)
    }
.mini_cart .mc_item {
    position: relative;
    padding-left: 74px;
    min-height: 60px;
    margin-bottom: 30px
    }
.mini_cart .mc_item:last-of-type, .mini_cart .mc_item:last-child {
    margin-bottom: 25px
    }
.mc_item a.remove_cart {
    position: absolute;
    width: 9px;
    height: 9px;
    right: 0;
    top: 0;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms
    }
.mc_item a.remove_cart:after {
    width: 9px;
    height: 1px;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    position: absolute;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms
    }
.mc_item a.remove_cart:before {
    width: 1px;
    height: 9px;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    background: #fff;
    position: absolute;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms
    }
.mc_item a.remove_cart:hover:after, .mc_item a.remove_cart:hover:before {
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.mc_item img {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 2px
    }
.mc_item h4 {
    color: #FFF;
    margin: 0 0 2px;
    padding-right: 25px
    }
.mc_item h4 a {
    color: #FFF;
    font-size: 14px;
    line-height: 20px;
    display: inline-block;
    margin-top: -4px
    }
.mc_item h4 a:hover {
    color: #364aeb
    }
.mc_item .product_price {
    color: #e00;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0
    }
.mini_cart .total_price {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 21px;
    color: #fff;
    text-align: left;
    font-weight: 600;
    width: 100%;
    border-bottom: 1px solid #35393d;
    padding: 0 0 9px
    }
.mini_cart .total_price .price {
    float: right
    }
.mini_cart .total_price .price span span {
    margin-right: 3px
    }
.cart_buttons {
    position: relative;
    padding: 20px 0 0
    }
.cart_buttons a {
    width: 100px;
    height: 30px;
    background: #FFF;
    border-radius: 3px;
    text-align: center;
    padding: 0 10px;
    font-size: 12px;
    color: #051133;
    position: relative;
    z-index: 2;
    font-weight: 500;
    float: left;
    line-height: 30px
    }
.cart_buttons a:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: 3px;
    z-index: -1;
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0)
    }
.cart_buttons a:hover:after {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1)
    }
.cart_buttons a:hover {
    color: #FFF
    }
.cart_buttons a:last-child {
    float: right;
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    color: #FFF
    }
.cart_buttons a:last-child:after {
    background: #fff
    }
.cart_buttons a:last-child:hover {
    color: #051133
    }
.popup_search_sec {
    position: absolute;
    left: 0;
    top: 0;
    right: 0
    }
.popup_search_overlay {
    position: fixed;
    left: 0;
    top: -100%;
    width: 100%;
    height: 100%;
    background: rgba(33, 37, 41, 0.6);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    cursor: url(../images/close.webp), auto;
    -webkit-transition: all 0.4s ease-in 0.8s;
    -o-transition: all 0.4s ease-in 0.8s;
    transition: all 0.4s ease-in 0.8s
    }
.popup_search_sec.active .popup_search_overlay {
    visibility: visible;
    -webkit-transition: all 0.8s ease-out 0s;
    -o-transition: all 0.8s ease-out 0s;
    transition: all 0.8s ease-out 0s;
    top: 0;
    opacity: 1
    }
.pop_search_background {
    background: #212529;
    width: 100%;
    height: 400px;
    top: -100%;
    z-index: 99;
    position: fixed;
    left: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all 0.6s cubic-bezier(0.9, 0.03, 0, 0.96) 0.7s;
    -o-transition: all 0.6s cubic-bezier(0.9, 0.03, 0, 0.96) 0.7s;
    transition: all 0.6s cubic-bezier(0.9, 0.03, 0, 0.96) 0.7s
    }
.popup_search_sec.active .pop_search_background {
    opacity: 1;
    visibility: visible;
    top: 0;
    -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.5s;
    -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.5s;
    transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.5s
    }
.middle_search {
    position: relative;
    top: 43%;
    transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -webkit-transform: translatey(-50%);
    position: relative;
    z-index: 2
    }
.popup_search_form {
    position: relative
    }
.popup_search_form:after {
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
    position: absolute;
    content: "";
    height: 1px;
    background: rgba(233, 236, 239, 0.1);
    width: 0;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: 0
    }
.popup_search_sec.active .popup_search_form:after {
    -webkit-animation-name: fadeInGo;
    animation-name: fadeInGo;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    visibility: visible;
    opacity: 1;
    width: 100%
    }
.popup_search_form:before {
    content: "";
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    height: 1px;
    width: 0;
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    -moz-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    -webkit-transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.popup_search_form.focused:before {
    width: 100%;
    left: 0;
    right: auto
    }
.popup_search_form input[type="search"] {
    width: 100%;
    height: 64px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 20px;
    line-height: 64px;
    color: #fff;
    font-weight: 500
    }
.popup_search_form input[type="search"]::-moz-placeholder {
    color: #fff;
    opacity: 1
    }
.popup_search_form input[type="search"]::-ms-input-placeholder {
    color: #fff;
    opacity: 1
    }
.popup_search_form input[type="search"]::-webkit-input-placeholder {
    color: #fff;
    opacity: 1
    }
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
        } 100% {
        opacity: 1;
        }
    }
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
        } 100% {
        opacity: 0;
        }
    }
@-webkit-keyframes fadeInGo {
    0% {
        opacity: 0.1;
        width: 0;
        } 100% {
        opacity: 1;
        width: 100%;
        }
    }
@-webkit-keyframes fadeOutGo {
    0% {
        opacity: 1;
        width: 100%;
        } 100% {
        opacity: 0;
        width: 0;
        }
    }
@-webkit-keyframes fadeOutGo2 {
    0% {
        opacity: 0.8;
        width: 100%;
        } 100% {
        opacity: 0.14;
        width: 0;
        }
    }
.popup_search_form button[type="submit"] {
    position: absolute;
    right: 0;
    bottom: 14px;
    border: none;
    outline: none;
    z-index: 2;
    font-size: 20px;
    line-height: 32px;
    margin: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms
    }
.popup_search_form button[type="submit"]:hover {
    color: #2c9c4c
    }
/*--- Banner Section ---*/
.banner-01 {
    position: relative;
    padding: 185px 0 120px;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center
    }
/*.banner-01:after{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: rgba(29, 29, 29, .80);
    clip-path: polygon(20% 0%, 80% 0%, 100% 0, 100% 100%, 97% 100%, 24% 95%, 0 93%, 0 1%);
}*/
.banner-01:after {
    position: absolute;
    left: 0;
    bottom: 11px;
    width: 85%;
    height: 45px;
    background: #1674f5;
    content: "";
    clip-path: polygon(65% 0, 138% 0, 100% 0, 100% -1%, 77% 20%, 0 100%, 0 13%, 0 0%);
    z-index: -1
    }
.banner-01 .container {
    position: relative;
    z-index: 2
    }
.banner-content-1 {
    position: relative;
    z-index: 3;
    padding: 150px 0 0
    }
.b-sub-head {
    display: inline-block;
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    font-size: 15px;
    line-height: 28px;
    color: #f0f0f0;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 7px 20px 5px;
    margin: 0 0 15px
    }
.banner-content-1 h2 {
    font-size: 70px;
    color: #fff;
    line-height: 75px;
    letter-spacing: -0.76px;
    margin-bottom: 12px
    }
.banner-content-1 p {
    font-size: 18px;
    line-height: 28px;
    color: #d9d9d9;
    margin-bottom: 47px
    }
.layer-thumb-1 {
    position: relative
    }
.layer-thumb-1 .popup-video {
    width: 120px;
    height: 120px;
    position: absolute;
    left: -20px;
    top: 180px;
    bottom: 0;
    margin: auto;
    z-index: 2;
    border: none;
    border-radius: 50%;
    font-size: 50px;
    color: #fff;
    letter-spacing: -9px;
    line-height: 120px;
    text-align: center;
    display: inline-block;
    animation: waveBtn 2.5s infinite;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.b-sub-head {
    animation-delay: 2s;
    animation-name: fadeInLeft
    }
.banner-content-1 h2 {
    animation-delay: 2.5s;
    animation-name: fadeInLeft
    }
.banner-content-1 p {
    animation-delay: 3s;
    animation-name: fadeInLeft
    }
.banner-content-1 .shapro-btn-1 {
    animation-delay: 4s;
    animation-name: fadeInLeft
    }
.layer-thumb-1 {
    animation-delay: 4s;
    animation-name: zoomIn
    }
/*--- Feature Section ---*/
.feaure-item-1 {
    position: relative;
    z-index: 1;
    padding: 40px 15px 56px;
    margin: 0 0 30px;
    border: 1px solid #e6e6e6;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.feaure-item-1 h4 {
    font-size: 24px;
    line-height: 30px;
    color: #333;
    margin-bottom: 28px
    }
.feaure-item-1 h4 a {
    color: inherit
    }
.feaure-item-1 i {
    display: block;
    font-size: 75px;
    line-height: 75px;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    -webkit-background-clip: text;
    color: transparent;
    margin-bottom: 28px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.feaure-item-1 p {
    font-size: 17px;
    color: #666;
    margin: 0;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.feaure-item-1:after {
    content: "";
    position: absolute;
    left: auto;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: -1;
    width: 0;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.feaure-item-1:hover {
    border-color: transparent
    }
.feaure-item-1:hover:after {
    width: 100%;
    left: 0;
    right: auto
    }
.feaure-item-1:hover * {
    color: #fff
    }
/*--- About Section ---*/
.video-slide {
    position: relative;
    margin-right: 30px;
    width: auto
    }
.ab-v-item {
    position: relative
    }
.ab-v-img-1 {
    position: relative;
    margin-left: 65px
    }
.ab-v-img-1 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px
    }
.ab-v-img-2 {
    position: relative;
    display: inline-block;
    margin: -270px 0 0
    }
.ab-v-img-2:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    opacity: 0.52;
    border-radius: 5px
    }
.ab-v-img-2 h4 {
    font-size: 12px;
    line-height: 32px;
    color: #fff;
    margin: 0 0 0;
    position: absolute;
    left: 0;
    bottom: 28%;
    right: 0;
    text-transform: uppercase;
    text-align: center;
    z-index: 2
    }
.ab-v-img-2 img {
    max-width: 100%;
    height: auto;
    border-radius: 5px
    }
.owl-carousel .owl-item img {
    width: auto
    }
.elementor img {
    border-radius: inherit;
    max-width: none
    }
.ab-v-item .popup-video {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    display: inline-block;
    animation: waveBtn 2.5s infinite;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.ab-v-item .popup-video:after {
    width: 0%;
    height: 0%;
    background-image: linear-gradient(to right, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: -1;
    content: "";
    border-radius: 50%;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.ab-v-item .popup-video:hover {
    color: #fff
    }
.ab-v-item .popup-video:hover:after {
    width: 100%;
    height: 100%
    }
.video-slide.owl-carousel .owl-dots {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    display: block
    }
.video-slide.owl-carousel .owl-dots button {
    display: block;
    width: 10px;
    height: 24px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    background: #f2ecfa;
    border-radius: 30px;
    border: none;
    outline: none;
    position: relative;
    margin: 0 0 5px
    }
.video-slide.owl-carousel .owl-dots button.active, .video-slide.owl-carousel .owl-dots button:hover {
    background: #8f49f9
    }
.video-slide.owl-carousel .owl-dots button.active {
    height: 100%;
    height: 53px
    }
.video-slide.owl-carousel .owl-dots span {
    display: none
    }
.ab-feaure {
    display: flex;
    justify-content: flex-start;
    position: relative;
    margin: 0 0 25px
    }
.ab-feaure h4 {
    position: relative;
    width: 60px;
    max-height: 60px;
    background: #f3f3f3;
    border-radius: 50%;
    text-align: center;
    font-size: 15px;
    line-height: 60px;
    color: #8f49f9;
    text-transform: uppercase;
    margin: 0 16px 0 0
    }
.ab-feaure h4:after {
    position: absolute;
    right: 5px;
    top: 0;
    width: 12px;
    height: 12px;
    background: #ff006c;
    border-radius: 50%;
    content: "";
    animation: halfBounce 2s infinite;
    animation-delay: 0.3s
    }
.af-2 h4:after {
    background: #e034ff
    }
.af-3 h4:after {
    background: #ffae00
    }
.ab-feaure h5 {
    font-size: 17px;
    color: #242425;
    line-height: 40px;
    margin: 10px 0 0
    }
/*---- Ads Section ----*/
.billing-ads {
    position: relative;
    margin-left: 30px
    }
.billing-ads img {
    max-width: 100%;
    height: auto;
    border-radius: 15px
    }
.list-area {
    position: relative;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    width: 336px;
    padding: 23px 34px 22px;
    border-radius: 15px;
    margin-top: -138px;
    float: right;
    margin-right: 38px;
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46)
    }
.list-area ul {
    margin: 0;
    padding: 0
    }
.list-area ul li {
    list-style: none;
    display: block;
    margin: 0 0 0;
    font-size: 18px;
    line-height: 35px;
    font-family: "Jost", sans-serif;
    color: #fff
    }
.list-area ul li i {
    margin-right: 15px;
    display: inline-block
    }
.bill-price {
    height: 50px;
    background: #282829;
    border-radius: 10px;
    padding: 0 17px;
    font-size: 23px;
    line-height: 50px;
    font-family: "Jost", sans-serif;
    font-weight: 800;
    color: #fff;
    display: inline-block;
    text-align: center;
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    position: absolute;
    right: 15px;
    top: -25px
    }
/*---- Feature section 2 ----*/
.feature-box {
    position: relative;
    padding-right: 40px
    }
.feature-box:before {
    position: absolute;
    right: -10px;
    top: -53px;
    background: url(../images/home1/shape-2.webp) no-repeat center center;
    width: 747px;
    height: 808px;
    content: "";
    animation: halfBounce2 4s infinite
    }
/*.feature-box:before{
    position: absolute;
    right: -11px;
    top: -50px;
    border: 2px solid #e5e6fa;
    border-radius: 50%;
    width: 750px;
    height: 750px;
    content: '';
}
.feature-box:after{
    position: absolute;
    right: 41px;
    top: 0px;
    border: 1px solid #e5e6fa;
    border-radius: 50%;
    width: 650px;
    height: 650px;
    content: '';
}
.f-inner-border{
    position: absolute;
    width: 530px;
    height: 530px;
    left: 0;
    top: 60px;
    border-radius: 50%;
    border: 1px solid #f4f4fd;
}
.f-inner-border:after{
    position: absolute;
    right: 70px;
    top: 70px;
    border: 1px solid #f4f4fd;
    border-radius: 50%;
    width: 410px;
    height: 410px;
    content: '';
}*/
.feaure-item-2 {
    position: relative;
    z-index: 3;
    background-image: linear-gradient(to left top, #ece1fd, #f0e9fe, #f4f0ff, #f9f8ff, #fff);
    padding: 40px 28px 55px;
    margin-bottom: 30px;
    border-radius: 15px;
    -webkit-box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 35px 0 rgba(0, 0, 0, 0.08)
    }
.fi-color-2 {
    background-image: linear-gradient(to left top, #d9d5fa, #e3dffb, #eceafd, #f6f4fe, #fff)
    }
.fi-color-3 {
    background-image: linear-gradient(to left top, #fde5fd, #fbecff, #faf3ff, #fcf9ff, #fff)
    }
.fi-color-4 {
    background-image: linear-gradient(to left top, #cefff1, #d6ffff, #e7fdff, #f7fdff, #fff)
    }
.feaure-item-2 i {
    width: 60px;
    height: 60px;
    font-size: 25px;
    line-height: 60px;
    color: #b587fb;
    display: inline-block;
    background: #f0e6ff;
    border-radius: 50%;
    text-align: center;
    margin-bottom: 19px
    }
.feaure-item-2:hover i {
    animation: bounceIn 1s linear infinite alternate;
    animation-duration: 2s
    }
.feaure-item-2 h4 {
    color: #282331;
    font-size: 26px;
    line-height: 25px;
    margin-bottom: 13px
    }
.feaure-item-2 h4 a {
    color: inherit
    }
.feaure-item-2 h4 a:hover {
    color: #364aeb
    }
.feaure-item-2 p {
    font-size: 15px;
    line-height: 23px;
    color: #282331;
    margin-bottom: 0
    }
/*--- Case Section ----*/
.case-item-1 {
    position: relative;
    overflow: hidden;
    margin: 0 0 9px
    }
.case-item-1 img {
    width: 100%;
    height: auto;
    border-radius: 20px
    }
.case-hover {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.34, 0.66, 0.79, 0.58), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: -webkit-transform 0.4s cubic-bezier(0.34, 0.66, 0.79, 0.58), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 0.4s cubic-bezier(0.34, 0.66, 0.79, 0.58), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0
    }
.cs-middle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -webkit-transform: translatey(-50%);
    width: 100%;
    text-align: center;
    padding: 0 15px;
    z-index: 2
    }
.case-item-1:hover .case-hover {
    opacity: 1
    }
.cs-middle .read-more {
    display: inline-block;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    width: 57px;
    height: 57px;
    border-radius: 50%;
    text-align: center;
    font-size: 21px;
    color: #fff;
    line-height: 57px;
    margin-bottom: 22px;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    opacity: 0;
    visibility: hidden;
    transition: all ease 1000ms;
    -moz-transition: all ease 1000ms;
    -webkit-transition: all ease 1000ms;
    -ms-transition: all ease 1000ms;
    -o-transition: all ease 1000ms
    }
.case-item-1:hover .cs-middle .read-more {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
    visibility: visible;
    opacity: 1
    }
.cs-middle h4 {
    font-size: 26px;
    line-height: 26px;
    color: #282331;
    margin-bottom: 13px;
    visibility: hidden;
    opacity: 0;
    transform: translatey(30px);
    -moz-transform: translatey(30px);
    -webkit-transform: translatey(30px);
    transition: all ease 800ms;
    -moz-transition: all ease 800ms;
    -webkit-transition: all ease 800ms;
    -ms-transition: all ease 800ms;
    -o-transition: all ease 800ms
    }
.case-item-1:hover .cs-middle h4 {
    transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    visibility: visible;
    opacity: 1
    }
.cs-middle h4 a {
    color: inherit
    }
.cs-middle h4 a:hover {
    color: #364aeb
    }
.cs-middle p {
    color: #282331;
    font-size: 20px;
    line-height: 0.8;
    font-weight: 300;
    font-family: "Jost", sans-serif;
    margin: 0;
    transform: translatey(30px);
    -moz-transform: translatey(30px);
    -webkit-transform: translatey(30px);
    opacity: 0;
    visibility: hidden;
    transition: all ease 1000ms;
    -moz-transition: all ease 1000ms;
    -webkit-transition: all ease 1000ms;
    -ms-transition: all ease 1000ms;
    -o-transition: all ease 1000ms
    }
.cs-middle p a {
    color: inherit
    }
.cs-middle p a:hover {
    color: #364aeb
    }
.case-item-1:hover .cs-middle p {
    transform: translatey(0);
    -moz-transform: translatey(0);
    -webkit-transform: translatey(0);
    visibility: visible;
    opacity: 1
    }
/*--- Skills Section ---*/
.circle-skill {
    position: relative;
    text-align: center;
    display: inline-block
    }
.sk-center p {
    font-size: 12px;
    line-height: 18px;
    color: #222d39;
    margin: 0;
    text-transform: uppercase
    }
/*--- Pricing Section ---*/
.toggle-pricing {
    position: relative;
    margin: 0 0 37px;
    padding: 0;
    display: flex;
    justify-content: center
    }
.toggle-pricing li {
    list-style: none;
    display: inline-block
    }
.toggle-pricing li a {
    display: inline-block;
    font-size: 16px;
    line-height: 20px;
    color: #424242;
    font-weight: 500
    }
.toggle-pricing .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 25px;
    vertical-align: middle;
    margin: 0 19px;
    border-radius: 30px
    }
.toggle-pricing .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 30px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    background: #0051e2
    }
.toggle-pricing .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 5px;
    -webkit-transform: translatex(3px);
    transform: translatex(3px);
    background-color: #fff;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    border-radius: 30px
    }
.toggle-pricing .switch.off .slider:before {
    -webkit-transform: translatex(35px);
    transform: translatex(35px)
    }
.pricing-item-1 {
    position: relative;
    background-image: linear-gradient(-45deg, #fde1f9, #fbe9fd, #faf1ff, #fbf8ff, #fff);
    margin-bottom: 30px;
    border-radius: 10px 10px 0 0
    }
.price-bg-2 {
    background-image: linear-gradient(-45deg, #fcf4d1, #fff1e0, #fff4f4, #fffaff, #fff)
    }
.price-bg-3 {
    background-image: linear-gradient(-45deg, #d4ceff, #dfdaff, #eae6ff, #f5f3ff, #fff)
    }
.price-thumb {
    position: relative;
    margin: 0 0 0
    }
.price-thumb img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0
    }
.price-detils {
    position: relative;
    font-family: "Jost", sans-serif;
    padding: 55px 30px 53px
    }
.p-sub {
    display: block;
    font-size: 15px;
    line-height: 0.8;
    color: #ee539b;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 9px
    }
.p-title {
    font-size: 31px;
    line-height: 35px;
    color: #3a1564;
    font-weight: 800;
    margin-bottom: 18px
    }
.price-detils p {
    font-size: 17px;
    line-height: 23px;
    color: #7a7a7a;
    margin-bottom: 28px
    }
.price-detils ul {
    margin: 0;
    padding: 29px 0 48px;
    border-top: 1px solid #e3e3e3
    }
.price-detils ul li {
    list-style: none;
    display: block;
    font-size: 19px;
    line-height: 40px;
    color: #666e82;
    font-weight: 500
    }
.price-detils ul li i {
    display: inline-block;
    font-size: 17px;
    line-height: 40px;
    color: #ee539b;
    margin-right: 14px
    }
.p-price {
    font-size: 70px;
    line-height: 51px;
    color: #3a1564;
    font-weight: 800;
    letter-spacing: -1.4px;
    display: flex;
    margin: 0 0 41px
    }
.p-price sup {
    font-size: 30px;
    top: 9px;
    left: 20px
    }
.p-price sup.currency {
    left: 0
    }
.p-price p {
    font-size: 30px;
    color: #3A1566;
    font-weight: 300;
    line-height: 0.8;
    margin: 29px 0 0 -34px
    }
.price-detils .shapro-btn-1 {
    font-family: "Jost", sans-serif;
    font-weight: 800;
    font-size: 14px;
    height: 55px;
    padding: 22px 29px
    }
/*--- Team Section ---*/
.team-item-1 {
    position: relative;
    overflow: hidden;
    margin: 0 0 2px
    }
.team-item-1 img {
    width: 100%;
    height: auto
    }
.team-detils {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    font-family: "Jost", sans-serif;
    top: 50%;
    transform: translatey(-50%);
    z-index: 3
    }
.team-item-1:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 151, 223, 0.6);
    width: 100%;
    height: 100%;
    content: "";
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.team-item-1:hover:after {
    visibility: visible;
    opacity: 1
    }
.team-detils .member-name {
    display: inline-block;
    font-size: 23px;
    line-height: 28px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 7px;
    visibility: hidden;
    opacity: 0;
    transform: translatex(-40px);
    transform: translatex(-40px);
    -moz-transform: translatex(-40px);
    transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out
    }
.team-detils .member-name:hover {
    color: #364aeb
    }
.team-detils p {
    font-size: 14px;
    margin: 0;
    color: #fff;
    line-height: 0.8;
    visibility: hidden;
    opacity: 0;
    transform: translatex(40px);
    transform: translatex(40px);
    -moz-transform: translatex(40px);
    transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out
    }
.team-item-1:hover .team-detils p {
    visibility: visible;
    opacity: 1;
    transform: translatex(0);
    transform: translatex(0);
    -moz-transform: translatex(0)
    }
.team-item-1:hover .team-detils .member-name {
    visibility: visible;
    opacity: 1;
    transform: translatex(0);
    transform: translatex(0);
    -moz-transform: translatex(0)
    }
.listing-item {
    position: relative;
    margin: 0;
    padding: 6px 0 31px
    }
.listing-item li {
    list-style: none;
    display: block;
    margin: 0 0 35px;
    color: #111c16;
    font-family: "Jost", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    padding-left: 65px;
    position: relative
    }
.listing-item li i {
    width: 44px;
    height: 43px;
    font-size: 16px;
    line-height: 43px;
    color: #fff;
    background: url(../images/list-bg.webp) no-repeat center center/cover;
    display: inline-block;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0
    }
/*---- Blog Section ----*/
.blog-item-1 {
    position: relative;
    margin-bottom: 50px
    }
.bi-thumb {
    position: relative
    }
.bi-thumb img {
    width: 100%;
    height: auto;
    border-radius: 15px
    }
.bi-thumb a {
    padding: 0 38px;
    height: 46px;
    border-radius: 30px;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    font-family: "Jost", sans-serif;
    font-size: 13px;
    line-height: 46px;
    text-align: center;
    margin: 0;
    color: #fff;
    letter-spacing: 0.97px;
    font-weight: 700;
    display: inline-block;
    position: absolute;
    left: 14px;
    bottom: 14px;
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46)
    }
.bi-thumb a i {
    font-size: 15px;
    font-weight: 400;
    margin-right: 7px;
    display: inline-block
    }
.bi-details {
    position: relative;
    padding: 31px 0 0
    }
.bi-details h3 {
    font-size: 40px;
    line-height: 46px;
    color: #0b0b0b;
    letter-spacing: 0.2px;
    margin: 0 0 8px
    }
.bi-details h3 a {
    color: inherit
    }
.bi-details h3 a:hover {
    color: #364aeb
    }
.bi-read-more {
    display: inline-block;
    text-transform: uppercase;
    color: #0b0b0b;
    line-height: 0.8;
    font-size: 14px;
    font-weight: 600;
    font-family: "Jost", sans-serif;
    letter-spacing: 0.07px;
    position: relative
    }
.bi-read-more i {
    display: inline-block;
    color: #364aeb;
    font-size: 18px;
    line-height: 0.8;
    letter-spacing: 1.2px;
    right: -27px;
    position: absolute
    }
.bi-read-more:after {
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    content: "";
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.bi-read-more:hover:after {
    width: 0%;
    left: auto;
    right: 0
    }
.bi-read-more:hover {
    color: #364aeb
    }
/*--- Contact Form ---*/
.contact-form-1 {
    position: relative;
    padding: 0 56px
    }
.input-form {
    position: relative
    }
.input-form input, .input-form textarea {
    width: 100%;
    height: 67px;
    background: #fff;
    border-radius: 50px;
    padding: 0 58px;
    border: none;
    outline: none;
    font-size: 15px;
    line-height: 67px;
    color: #898989;
    margin: 0 0 8px
    }
.input-form i {
    font-size: 14px;
    line-height: 67px;
    position: absolute;
    left: 33px;
    top: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.input-form textarea::-moz-placeholder, .input-form input::-moz-placeholder {
    color: #898989;
    opacity: 1
    }
.input-form textarea::-ms-input-placeholder, .input-form input::-ms-input-placeholder {
    color: #898989;
    opacity: 1
    }
.input-form textarea::-webkit-input-placeholder, .input-form input::-webkit-input-placeholder {
    color: #898989;
    opacity: 1
    }
.input-submit input[type="submit"] {
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    width: 100%;
    height: 64px;
    border-radius: 50px;
    text-align: center;
    font-size: 14px;
    color: #f0f0f0;
    line-height: 64px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    outline: none;
    margin-top: 22px;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.input-submit input[type="submit"]:hover {
    background-image: linear-gradient(to right, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
/*--- Footer ----*/
.footer-1 {
    position: relative;
    background: #151515;
    padding: 95px 0 0
    }
footer .widget {
    position: relative;
    margin-bottom: 80px
    }
footer .widget .widget-title {
    font-size: 30px;
    line-height: 34px;
    color: #fff;
    text-transform: capitalize;
    margin: 0 0 32px
    }
footer .widget .widget-title span {
    color: #3946ea
    }
.about-widget {
    position: relative;
    margin-right: -10px
    }
.about-widget img {
    max-width: 100%;
    height: auto;
    margin: 0 0 25px
    }
.about-widget p {
    color: #999;
    margin: 0 0 32px
    }
.ab-social {
    position: relative
    }
.ab-social a {
    display: inline-block;
    width: 34px;
    height: 34px;
    background: #3a5ba2;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    color: #fff;
    line-height: 34px;
    margin-right: 5px
    }
.ab-social a:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg)
    }
.ab-social a.fac {
    background: #3a5ba2
    }
.ab-social a.twi {
    background: #1ebef0
    }
.ab-social a.goo {
    background: #e1584b
    }
.ab-social a.pin {
    background: #c33c2d
    }
.single-tweet {
    position: relative;
    padding-left: 40px;
    margin: 0 0 30px
    }
.single-tweet i {
    font-size: 21px;
    color: #0081ff;
    line-height: 21px;
    position: absolute;
    left: 0;
    top: 2px
    }
.single-tweet p {
    color: #999;
    letter-spacing: 0;
    margin: 0 0 0
    }
.single-tweet p a {
    display: block;
    color: #8799a3
    }
.single-tweet p a:hover {
    color: #999
    }
.twitter-widget {
    margin-left: 12px
    }
.insta-snaps {
    position: relative
    }
.insta-snaps a {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 3px;
    margin-bottom: 7px
    }
.insta-snaps a:nth-child(3), .insta-snaps a:nth-child(6), .insta-snaps a:last-child {
    margin-right: 0
    }
.insta-snaps img {
    width: 100%;
    height: 100%;
    border-radius: 3px
    }
.insta-acc {
    display: inline-block;
    font-size: 16px;
    color: #9c26b0;
    line-height: 50px;
    font-weight: 500
    }
.insta-acc img {
    width: 22px;
    height: 22px;
    margin-top: -3px;
    margin-right: 12px
    }
.insta-acc:hover {
    color: #9c26b0
    }
.contact-info {
    position: relative
    }
.contact-info p {
    color: #999;
    font-weight: 700;
    margin: 0 0 26px
    }
.contact-info p span {
    font-weight: 400;
    color: #fff
    }
.contact-info p a {
    color: #8799a3;
    font-weight: 400
    }
.contact-info p a:hover {
    color: #fff
    }
.office-hour {
    position: relative;
    margin: -9px 0 0
    }
.office-hour h5 {
    font-size: 18px;
    line-height: 0.8;
    color: #fff;
    font-weight: 800;
    margin: 0 0 8px
    }
.office-hour p {
    color: #999;
    font-weight: 400;
    margin: 0
    }
.copyright {
    position: relative;
    border-top: 1px solid #252525;
    padding: 31px 0 40px
    }
.copyright p {
    font-size: 19px;
    color: #999;
    line-height: 28px;
    font-weight: 400;
    font-family: "Jost", sans-serif;
    margin: 0
    }
.copyright p a {
    color: #fff
    }
.copyright p a:hover {
    color: #999
    }
/*--- Back To Top ---*/
#back-to-top {
    font-size: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    border-radius: 50%;
    cursor: pointer;
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46)
    }
#back-to-top:hover i {
    animation-name: fadeInUp;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite
    }
/*--- Preloader ---*/
.preloader {
    width: 100%;
    position: fixed;
    height: 100%;
    background: #333;
    left: 0;
    top: 0;
    z-index: 99999
    }
.circle {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    top: 50%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%);
    border-radius: 50%;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.circle:after {
    content: "LOADING";
    position: absolute;
    top: 100px;
    width: 250px;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 5px;
    line-height: 30px;
    font-family: "Jost", sans-serif;
    -webkit-animation: fadeinout 0.5s ease-in-out alternate infinite;
    animation: fadeinout 0.5s ease-in-out alternate infinite
    }
.circle:before {
    content: "";
    position: absolute;
    top: 125px;
    left: -1px;
    width: 252px;
    height: 126px;
    background-color: #333
    }
.circle-inner {
    position: relative;
    top: 30px;
    left: 30px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background-color: #333;
    -webkit-animation: inneranim 0.5s ease-in-out alternate infinite;
    animation: inneranim 0.5s ease-in-out alternate infinite
    }
.circle-cutter {
    position: absolute;
    left: 0;
    top: 0;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    -webkit-transform-origin: top top;
    -webkit-animation: animrotate 1s ease-in-out alternate infinite;
    transform-origin: top top;
    animation: animrotate 1s ease-in-out alternate infinite
    }
.circle-cutter:after {
    content: "";
    position: absolute;
    top: 125px;
    left: -1px;
    width: 252px;
    height: 126px;
    background-color: #333
    }
@-webkit-keyframes inneranim {
    0% {
        top: 30px;
        left: 30px;
        width: 190px;
        height: 190px;
        } 100% {
        top: 3px;
        left: 3px;
        width: 244px;
        height: 244px;
        }
    }
@-webkit-keyframes animrotate {
    0% {
        -webkit-transform: rotate(160deg);
        } 100% {
        -webkit-transform: rotate(-160deg);
        }
    }
@-webkit-keyframes fadeinout {
    0% {
        opacity: 1;
        } 100% {
        opacity: 0;
        }
    }
/*------------------------------------------------------
/ 2. Home 02
/------------------------------------------------------*/
/*----   Header 2 ------*/
.header-02 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 5;
    padding: 0 14.5% 0 70px
    }
.header-02 .logo-1 {
    padding-top: 49px
    }
.header-02 .menu_1 > ul > li > a {
    color: #263238
    }
.header-02 .menu_1 > ul > li:hover > a {
    color: #2c9c4c;
    -webkit-text-fill-color: inherit;
    background: transparent
    }
.header-02 .menu_1 > ul > li ul li:hover > a {
    color: #2c9c4c
    }
.header-02 .menu_1 > ul > li ul li.menu-item-has-children:hover:before {
    color: #2c9c4c
    }
.header-02 .menu_1 > ul > li > a:after {
    display: none
    }
.header-02 .menu_1 > ul > li {
    margin-top: 66px
    }
.header-02 .access_btns {
    padding: 42px 0 0 6px
    }
.access_btns .shapro-btn-2 {
    display: inline-block;
    height: 55px;
    font-size: 14px;
    padding: 22px 34px
    }
/*---- Banner 02 ------*/
.banner-02 {
    position: relative;
    height: 100vh;
    padding: 145px 0 120px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: top right
    }
.banner-02:after {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../images/home2/map.webp) no-repeat top left
    }
.banner-content-2 {
    margin-left: -50px;
    padding-right: 140px;
    padding-top: 110px;
    position: relative
    }
.banner-content-2 > span {
    display: block;
    font-size: 22px;
    line-height: 30px;
    color: #2c9c4c;
    font-family: "Jost", sans-serif;
    margin: 0 0 7px
    }
.banner-content-2 h2 {
    font-size: 70px;
    line-height: 80px;
    letter-spacing: -1.4px;
    color: #263238;
    margin: 0 0 2px
    }
.banner-content-2 p {
    margin: 0 0 40px
    }
.banner-content-2 ul {
    margin: 0 0 56px;
    padding: 0
    }
.banner-content-2 ul li {
    list-style: none;
    display: block;
    margin: 0 0 39px;
    color: #111c16;
    font-family: "Jost", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    padding-left: 65px;
    position: relative
    }
.banner-content-2 ul li i {
    width: 44px;
    height: 43px;
    font-size: 16px;
    line-height: 43px;
    color: #fff;
    background: url(../images/list-bg2.webp) no-repeat center center/cover;
    display: inline-block;
    text-align: center;
    position: absolute;
    left: 0;
    top: -11px
    }
.banner-content-2 .shapro-btn-2 {
    font-size: 14px;
    height: 55px;
    padding: 22px 35.5px
    }
.banner-content-2 > span {
    animation-delay: 2s;
    animation-name: fadeInDown
    }
.banner-content-2 h2 {
    animation-delay: 2.5s;
    animation-name: fadeInDown
    }
.banner-content-2 p {
    animation-delay: 3s;
    animation-name: fadeInDown
    }
.banner-content-2 ul {
    animation-delay: 3.5s;
    animation-name: fadeInDown
    }
.banner-content-2 .shapro-btn-2 {
    animation-delay: 4s;
    animation-name: fadeInDown
    }
.layer-thumb {
    margin: 0 0 0
    }
.layer-thumb {
    animation-delay: 4s;
    animation-name: zoomIn
    }
.layer-thumb img {
    -webkit-animation: movebounce 3s linear infinite;
    animation: movebounce 3s linear infinite
    }
/*--- Featured Section ---*/
.feaure-item-3 {
    position: relative;
    padding: 37px 30px 55px;
    background: #fff;
    border-radius: 20px;
    margin: 0 0 30px;
    -webkit-box-shadow: 0 1px 59px 0 rgba(0, 0, 0, 0.11);
    -moz-box-shadow: 0 1px 59px 0 rgba(0, 0, 0, 0.11);
    box-shadow: 0 1px 59px 0 rgba(0, 0, 0, 0.11)
    }
.f-thumb img {
    max-width: 100%;
    min-height: auto
    }
.feaure-item-3:hover .f-thumb img {
    animation: zoomIn 0.1s linear alternate;
    animation-duration: 0.4s
    }
.feaure-item-3 h4 {
    font-size: 26px;
    line-height: 30px;
    color: #2e2e2e;
    margin: 0 0 14px
    }
.feaure-item-3 h4 a {
    color: inherit
    }
.feaure-item-3 h4 a:hover {
    color: #2c9c4c
    }
.feaure-item-3 p {
    font-size: 17px;
    line-height: 24px;
    color: #838383;
    margin: 0
    }
.count-box h5 .bar {
    display: block;
    height: 8px;
    width: 100%;
    border-radius: 50px;
    background-image: linear-gradient(to right, #ff43cb, #ff56a1, #ff7882, #ff9a74, #feb779)
    }
.cb-2 h5 .bar {
    background-image: linear-gradient(to right, #806dfa, #009eff, #00c1ff, #00dcf8, #6ef2e1)
    }
.cb-3 h5 .bar {
    background-image: linear-gradient(to right, #8865dd, #9c63dc, #ae62d9, #bf60d6, #cf5ed2)
    }
.feaure-item-4 {
    position: relative;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 42px 50px 39px;
    margin: 0 5px 50px
    }
.f-icon {
    position: absolute;
    left: -17px;
    top: -20px;
    background: #2c9c4c;
    width: 73px;
    height: 73px;
    border-radius: 50%;
    text-align: center;
    font-size: 25px;
    line-height: 73px;
    text-align: center;
    color: #fff
    }
.feaure-item-4:hover .f-icon i {
    animation: bounceIn 1s linear infinite alternate;
    animation-duration: 1s
    }
.feaure-item-4 h4 {
    font-size: 30px;
    line-height: 36px;
    color: #161616;
    margin: 0 0 6px
    }
.feaure-item-4 h4 a {
    color: inherit
    }
.feaure-item-4 h4 a:hover {
    color: #2c9c4c
    }
.feaure-item-4 p {
    font-size: 18px;
    line-height: 22px;
    color: #353535;
    font-family: "Jost", sans-serif;
    margin: 0
    }
/*--- Skills Section ---*/
.skill-item-2 {
    position: relative;
    position: relative
    }
.circle-skill-2 {
    margin: 0 0 0;
    position: relative
    }
.circle-skill-2 strong {
    position: absolute;
    left: 0;
    top: 42%;
    width: 100%;
    margin: auto;
    text-align: center;
    font-family: "Jost", sans-serif;
    font-size: 48px;
    line-height: 28px;
    color: #fff;
    font-weight: 500
    }
.sk-content p {
    font-size: 15px;
    line-height: 28px;
    color: #fff;
    font-family: "Jost", sans-serif;
    margin: 0
    }
.cs-in {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 9px;
    margin: auto;
    text-align: center
    }
/*--- Feature Project Section ---*/
.fp-item {
    position: relative;
    overflow: hidden;
    margin: 0 0 30px
    }
.fp-item img {
    width: 100%;
    height: auto;
    border-radius: 30px
    }
.botom-align {
    position: absolute;
    bottom: 0;
    left: 15px;
    overflow: hidden
    }
.botom-align img {
    max-width: 425px
    }
.slide_content {
    position: absolute;
    display: block;
    width: 340px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    padding: 16px 30px 17px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-transform: translatey(100%);
    -moz-transform: translatey(100%);
    transform: translatey(100%);
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
    -moz-transition: -moz-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
    transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1) 0.1s
    }
.fp-item:hover .slide_content {
    -webkit-transform: translatey(-31%);
    -moz-transform: translatey(-31%);
    transform: translatey(-31%);
    -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: -moz-transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
    transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1)
    }
.fp-item .project-content {
    opacity: 0;
    -webkit-transform: translatey(-200px);
    -moz-transform: translatey(-200px);
    transform: translatey(-200px);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }
.fp-item:hover .project-content {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    transform: translatey(0);
    -webkit-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
    -moz-transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
    transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s
    }
.project-content p {
    color: #2c9c4c;
    margin: 0 0 1px;
    font-size: 17px
    }
.project-content p a {
    color: inherit
    }
.project-content p a:hover {
    color: #222
    }
.project-content h3 {
    font-size: 24px;
    line-height: 32px;
    color: #222;
    margin: 0
    }
.project-content h3 a {
    color: inherit
    }
.project-content h3 a:hover {
    color: #2c9c4c
    }
.fp-item .slide_content {
    right: auto;
    left: 0;
    bottom: 30px;
    -webkit-transform: translatex(-100%);
    -moz-transform: translatex(-100%);
    transform: translatex(-100%)
    }
.fp-item:hover .slide_content {
    -webkit-transform: translatex(30px);
    -moz-transform: translatex(30px);
    transform: translatex(30px)
    }
.fp-item .project-content {
    text-align: left;
    -webkit-transform: translatex(-100%);
    -moz-transform: translatex(-100%);
    transform: translatex(-100%);
    -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
    }
.fp-item:hover .project-content {
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    transform: translatex(0);
    -webkit-transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
    -moz-transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
    transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s
    }
/*--- Skills Section ---*/
.professional-slide.owl-carousel {
    position: relative;
    overflow: hidden;
    margin: 0 0 0 40px
    }
.professional-slide.owl-carousel .p-item {
    position: relative
    }
.professional-slide.owl-carousel .p-item img {
    width: 100%;
    height: auto;
    border-radius: 25px
    }
.professional-slide.owl-carousel .owl-nav {
    text-align: center;
    margin: 35px 80px 0 0;
    padding: 0
    }
.professional-slide.owl-carousel .owl-nav button {
    width: 59px;
    height: 59px;
    background: #6270ff;
    border: none;
    outline: none;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 9px;
    padding: 0;
    font-size: 20px;
    line-height: 59px;
    color: #fff;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.professional-slide.owl-carousel .owl-nav button:after {
    background: #2c9c4c;
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto;
    width: 0%;
    height: 0%;
    border-radius: 50%;
    z-index: -1;
    content: "";
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.professional-slide.owl-carousel .owl-nav button:hover:after {
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: 100%
    }
.professional-slide.owl-carousel .owl-nav button:hover {
    color: #fff
    }
.singleSkill {
    position: relative;
    margin: 0 0 21px
    }
.singleSkill h5 {
    font-size: 15px;
    line-height: 0.9;
    font-weight: 500;
    color: #2e2e2e;
    margin: 0 0 17px
    }
.singleSkill .skillbar {
    width: 0%;
    height: 6px;
    position: relative;
    background: #6270ff;
    border-radius: 0;
    z-index: 3
    }
.singleSkill:after {
    width: 100%;
    height: 6px;
    background: #f8f8f8;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0
    }
.singleSkill .parcent {
    display: block;
    float: right;
    top: -36px;
    position: relative;
    font-size: 15px;
    font-family: "Jost", sans-serif;
    line-height: 0.8;
    color: #2e2e2e;
    font-weight: 500
    }
/*--- Pricing Table ----*/
.pricing-item-2 {
    position: relative;
    border-radius: 20px;
    border: 3px dashed #a3d39c;
    padding: 41px 45px 36px;
    margin-bottom: 30px
    }
.pricing-item-2 .price-thumb {
    min-height: 141px;
    margin-bottom: 22px
    }
.pricing-item-2 .price-thumb img {
    width: auto;
    max-width: 100%;
    border-radius: 0
    }
.pricing-item-2 h3 {
    font-size: 36px;
    line-height: 40px;
    color: #030303;
    margin: 0 0 19px
    }
.pricing-item-2 .p-price {
    font-size: 46px;
    line-height: 0.8;
    font-family: "Futura PT";
    color: #030303;
    font-weight: 700;
    letter-spacing: 0.92px;
    margin: 0 0 32px
    }
.pricing-item-2 .p-price .currency {
    font-size: 14px;
    top: 10px;
    font-family: "Futura PT";
    margin-right: 10px
    }
.pricing-item-2 .p-price sup {
    margin: 0;
    font-size: 18px;
    font-family: "Futura PT Demi";
    left: 3px;
    top: 6px
    }
.pricing-item-2 ul {
    margin: 0;
    padding: 0 0 23px
    }
.pricing-item-2 ul li {
    list-style: none;
    display: block;
    font-size: 17px;
    color: #0e0e0e;
    font-weight: 400;
    font-family: "Futura PT Book";
    line-height: 38px
    }
.pricing-item-2 ul li i {
    font-size: 15px;
    color: #48cb30;
    margin-right: 13px
    }
/*--- Listing Number ---*/
.listing-number {
    margin: 0 53px 0 0;
    padding: 0
    }
.listing-number li {
    list-style: none;
    display: block;
    text-align: right;
    float: right;
    font-family: "Jost", sans-serif;
    position: relative;
    padding-right: 70px;
    font-size: 18px;
    line-height: 18px;
    color: #263238;
    font-weight: 500;
    margin: 0 0 46px
    }
.listing-number li span {
    position: absolute;
    right: 0;
    top: -14px;
    width: 54px;
    height: 54px;
    background: #263238;
    color: #fff;
    display: block;
    border-radius: 15px;
    text-align: center;
    font-size: 18px;
    line-height: 54px;
    font-weight: 800
    }
/*--- Testimonial Section ---*/
.testimonial-slider.owl-carousel {
    position: relative
    }
.testimonila-item {
    position: relative;
    margin: 0 0 87px
    }
.quote p {
    position: relative;
    font-size: 24px;
    line-height: 40px;
    color: #fff;
    margin: 0
    }
.quote p:after {
    font-family: "Fredoka One", cursive;
    content: "\“";
    font-size: 400px;
    line-height: 0.8;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    display: block;
    color: rgba(120, 129, 140, 0.1)
    }
.quote:after {
    position: absolute;
    left: 82px;
    bottom: -42px;
    width: 72px;
    height: 44px;
    content: "";
    background: url(../images/home2/shape.webp) no-repeat left bottom
    }
.q-author {
    position: relative;
    margin-left: 165px;
    padding-top: 16px;
    padding-left: 100px
    }
.testimonial-slider.owl-carousel .q-author img {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0
    }
.q-author h5 {
    font-size: 25px;
    line-height: 22px;
    color: #393d72;
    margin: 0 0 10px
    }
.q-author span {
    display: block;
    font-size: 14px;
    line-height: 0.8;
    color: #858687;
    font-family: "Jost", sans-serif;
    font-weight: 700
    }
.testimonial-slider.owl-carousel .owl-dots {
    line-height: 0.8;
    position: relative;
    text-align: center
    }
.testimonial-slider.owl-carousel .owl-dots button {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    margin: 0 3px;
    outline: none;
    background: transparent;
    border: 2px solid rgba(57, 61, 114, 0.2);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.testimonial-slider.owl-carousel .owl-dots button.active, .testimonial-slider.owl-carousel .owl-dots button:hover {
    border-color: #393d72
    }
.testimonial-slider.owl-carousel .owl-dots button span {
    display: none
    }
.suppor-form {
    position: relative;
    background: url(../images/quote-bg2.webp) no-repeat center center/cover;
    z-index: 1;
    padding: 45px 45px 40px
    }
.suppor-form h2 {
    font-size: 40px;
    line-height: 42px;
    color: #14234b;
    letter-spacing: -0.8px;
    margin: 0 0 0
    }
.suppor-form p {
    font-size: 15px;
    line-height: 28px;
    color: #424242;
    font-weight: 500;
    margin: 0 0 22px
    }
.suppor-form .input-form input {
    height: 62px;
    border: 1px solid #ededed;
    border-radius: 50px;
    font-size: 13px;
    color: #424242;
    line-height: 62px;
    padding: 0 52px;
    margin-bottom: 22px;
    -webkit-box-shadow: 2px 4px 0 0 rgba(227, 227, 227, 0.75);
    -moz-box-shadow: 2px 4px 0 0 rgba(227, 227, 227, 0.75);
    box-shadow: 2px 4px 0 0 rgba(227, 227, 227, 0.75)
    }
.suppor-form .input-form i {
    left: 25px;
    line-height: 62px;
    font-size: 13px;
    color: #424242;
    -webkit-text-fill-color: inherit;
    background: transparent
    }
.suppor-form .input-form input::-moz-placeholder {
    color: #424242;
    opacity: 1
    }
.suppor-form .input-form input::-ms-input-placeholder {
    color: #424242;
    opacity: 1
    }
.suppor-form .input-form input::-webkit-input-placeholder {
    color: #424242;
    opacity: 1
    }
.payment-amount {
    position: relative;
    margin: 7px 0 33px
    }
.payment-amount p {
    font-size: 14px;
    line-height: 0.8;
    color: #424242;
    font-weight: 500;
    margin: 0 0 8px
    }
.payment-amount h1 {
    font-size: 40px;
    line-height: 42px;
    color: #14234b;
    letter-spacing: -0.8px;
    margin: 0 0 0
    }
.suppor-form input[type="submit"] {
    background: #14234b;
    width: 100%;
    height: 64px;
    border-radius: 50px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    line-height: 64px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    outline: none;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.suppor-form input[type="submit"]:hover {
    background: #2c9c4c
    }
/*--- Micro Service ---*/
.micro-service {
    position: relative;
    margin: 0 auto 29px
    }
.micro-service img {
    max-width: 100%;
    height: auto
    }
.ms-shape-1 {
    position: absolute;
    right: 14%;
    top: -22px;
    z-index: -1;
    animation: halfBounce 4s infinite;
    animation-delay: 1s
    }
.ms-shape-2 {
    position: absolute;
    left: 10%;
    bottom: 0;
    z-index: -1;
    animation: halfBounce 4s infinite;
    animation-delay: 2s
    }
/*---- Blog Section ----*/
.blog-item-2 {
    position: relative;
    min-height: 80px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 26px;
    margin-bottom: 27px
    }
.blog-item-2:last-of-type {
    border-bottom: none;
    margin-bottom: 14px
    }
.blog-item-2 .bi-thumb {
    z-index: 2;
    position: absolute;
    left: 0;
    top: 3px;
    margin: 0;
    padding: 0
    }
.blog-item-2 .bi-thumb img {
    width: 80px;
    height: 80px;
    border-radius: 0
    }
.blog-item-2 .bi-details {
    position: relative;
    padding: 0 0 0 105px
    }
.bi-details h5 {
    font-size: 20px;
    line-height: 24px;
    color: #23282d;
    margin-bottom: 11px
    }
.bi-details h5 a {
    color: inherit
    }
.bi-details h5 a:hover {
    color: #2c9c4c
    }
.bp-date {
    position: relative;
    display: inline-block;
    line-height: 24px;
    color: rgba(41, 55, 66, 0.5);
    font-size: 15px
    }
.bp-date i {
    display: inline-block;
    color: #14234b;
    margin-right: 8px
    }
.bp-date:hover {
    color: #14234b
    }
.singleFaq {
    position: relative;
    padding: 0;
    margin: 0 0 5px
    }
.singleFaq .card-header {
    position: relative;
    padding: 0;
    margin: 0;
    background: transparent;
    font-family: "Jost", sans-serif;
    border: none;
    border-radius: 0
    }
.singleFaq .card-header .btn {
    text-decoration: none;
    font-size: 22px;
    line-height: 28px;
    color: #1c1818;
    font-weight: 700;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    letter-spacing: -0.44px;
    padding: 17px 38px 20px;
    margin: 0;
    position: relative;
    background: #92e3a9;
    border-radius: 50px
    }
.singleFaq .card-header .btn.collapsed {
    background: #f5f5f5;
    color: #23282d
    }
.singleFaq .card-header .btn.collapsed:after {
    position: absolute;
    right: 25px;
    top: 0;
    line-height: 65px;
    font-family: "Font Awesome 5 Pro";
    content: "";
    font-size: 18px;
    color: #aaa;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.singleFaq .card-header .btn:after {
    content: "";
    color: #fff;
    position: absolute;
    right: 26px;
    top: 0;
    line-height: 65px;
    font-family: "Font Awesome 5 Pro";
    font-size: 18px;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.singleFaq .card-body {
    padding: 22px 22px 6px;
    font-size: 16px;
    color: #293742;
    line-height: 24px;
    margin: 0
    }
.singleFaq .card-body p {
    margin: 0 0 24px
    }
/*--- Contact Section ---*/
.shapro-maps {
    width: 100%;
    line-height: 0.8;
    overflow: hidden
    }
.shapro-maps iframe {
    border: none;
    width: 100%;
    height: 515px;
    display: block
    }
/*--- Footer Section ---*/
.footer-2 {
    position: relative;
    padding: 163px 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
    }
.about-widget-two {
    position: relative;
    text-align: center
    }
.about-widget-two img {
    max-width: 100%;
    height: auto
    }
.about-widget-two h2 {
    font-size: 50px;
    line-height: 54px;
    color: #fff;
    margin: 25px 0 37px
    }
.about-widget-two .ab-social a {
    width: 62px;
    height: 62px;
    background: transparent;
    border: 1px solid #92e3a9;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 2;
    line-height: 62px;
    color: #92e3a9;
    font-size: 20px;
    margin: 0 2px
    }
.about-widget-two .ab-social a:after {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    margin: auto;
    content: "";
    z-index: -1;
    background: #92e3a9;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.about-widget-two .ab-social a:hover {
    color: #fff;
    transform: none
    }
.about-widget-two .ab-social a:hover:after {
    width: 100%;
    height: 100%
    }
.playstore-btn {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 60px 0 0
    }
.playstore-btn a {
    height: 64px;
    min-width: 192px;
    background: #040707;
    border-radius: 3px;
    text-align: center;
    position: relative;
    display: inline-block;
    margin: 0 10px
    }
.playstore-btn a img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto
    }
.playstore-btn a:nth-child(2) {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1)
    }
.playstore-btn a:nth-child(2):hover {
    background: #040707;
    border-color: #040707
    }
.footer-2 .copyright {
    border: none;
    padding-top: 35px
    }
/*------------------------------------------------------
/ 3. Home 03
/------------------------------------------------------*/
/*--- Header  ---*/
.header-03 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 3
    }
.header-03 .shapro-btn-3 {
    height: 50px;
    text-transform: capitalize;
    font-weight: 500;
    padding: 18px 27px
    }
.header-03 .logo-1 {
    padding-top: 49px
    }
.header-03 .logo-1 img {
    height: 53px
    }
.header-03 .menu_1 > ul > li > a {
    color: #363636;
    font-size: 18px;
    font-weight: 500
    }
.header-03 .menu_1 > ul > li:hover > a {
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28)
    }
.header-03 .menu_1 > ul > li > a:after {
    display: none
    }
.header-03 .menu_1 > ul > li ul li.menu-item-has-children:hover:before, .header-03 .menu_1 > ul > li ul li:hover > a {
    color: #f22f3a
    }
.header-03 .menu_1 > ul > li {
    margin-top: 70px
    }
.header-03 .access_btns {
    padding-top: 50px
    }
/*--- Banner Section ---*/
.banner-03 {
    position: relative;
    height: 100vh;
    padding: 130px 0 120px;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: top center
    }
.banner-content-3 {
    padding-top: 145px;
    position: relative
    }
.banner-content-3 h2 {
    font-size: 70px;
    line-height: 76px;
    letter-spacing: -1.4px;
    color: #051133;
    margin: 0 0 19px
    }
.banner-content-3 p {
    color: #5a5a5a;
    line-height: 28px;
    margin: 0 0 32px
    }
.banner-content-3 ul {
    margin: 0 0 69px;
    padding: 0
    }
.banner-content-3 ul li {
    list-style: none;
    display: block;
    margin: 0 0 15px;
    color: #121b33;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    letter-spacing: 0.21px;
    font-size: 21px;
    line-height: 30px;
    padding-left: 42px;
    position: relative
    }
.banner-content-3 ul li i {
    font-size: 20px;
    line-height: 43px;
    color: #ff5f63;
    position: absolute;
    left: 0;
    top: -5px
    }
.banner-content-3 ul li span {
    display: block;
    font-size: 15px;
    line-height: 21px;
    color: #5a5a5a;
    font-weight: 400;
    font-family: "Roboto", sans-serif
    }
.btn-banner {
    position: relative;
    display: flex;
    justify-content: flex-start
    }
.btn-banner .popup-video {
    font-size: 20px;
    line-height: 28px;
    font-family: "Jost", sans-serif;
    display: inline-block;
    color: #333;
    font-weight: 600;
    margin-left: 40px
    }
.btn-banner .popup-video i {
    width: 50px;
    height: 50px;
    background: #2f2f2f;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
    color: #fff;
    line-height: 50px;
    margin-right: 10px;
    letter-spacing: -2px;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.btn-banner .popup-video:hover {
    color: #ff5f63
    }
.btn-banner .popup-video:hover i {
    background: #ff5f63
    }
.banner-content-3 h2 {
    animation-delay: 2s;
    animation-name: fadeInUp
    }
.banner-content-3 p {
    animation-delay: 2.5s;
    animation-name: fadeInUp
    }
.banner-content-3 ul {
    animation-delay: 3s;
    animation-name: fadeInUp
    }
.banner-content-3 .btn-banner {
    animation-delay: 3.5s;
    animation-name: fadeInUp
    }
/*--- Client Logo ---*/
.client-slider {
    position: relative;
    text-align: center
    }
.client-slider.owl-carousel a {
    display: inline-block;
    text-align: center
    }
.client-slider.owl-carousel a img {
    width: 140px;
    height: 52px
    }
.grayscale img {
    filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.grayscale a:hover img {
    filter: grayscale(0);
    -o-filter: grayscale(0);
    -webkit-filter: grayscale(0)
    }
/*--- Service Section ---*/
.service-item-1 {
    position: relative;
    padding: 49px 30px 46px;
    background: #fff;
    border-radius: 20px;
    margin: 0 0 30px;
    -webkit-box-shadow: 0 0 59px 0 rgba(196, 196, 196, 0.26);
    -moz-box-shadow: 0 0 59px 0 rgba(196, 196, 196, 0.26);
    box-shadow: 0 0 59px 0 rgba(196, 196, 196, 0.26)
    }
.si-icon {
    position: relative;
    background-image: linear-gradient(to left top, #cefff1, #d6ffff, #e7fdff, #f7fdff, #fff);
    width: 156px;
    height: 156px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin: 0 0 27px
    }
.si-icon i {
    font-size: 73px;
    line-height: 156px;
    color: #ff5f63;
    display: block
    }
.si-1 {
    background-image: linear-gradient(to left top, #d9d5fa, #e3dffb, #eceafd, #f6f4fe, #fff)
    }
.si-1 i {
    color: #4621ff
    }
.si-3 {
    background-image: linear-gradient(to left top, #fde5fd, #fbecff, #faf3ff, #fcf9ff, #fff)
    }
.si-3 i {
    color: #ffae00
    }
.si-4 {
    background-image: linear-gradient(to left top, #ece1fd, #f0e9fe, #f4f0ff, #f9f8ff, #fff)
    }
.si-4 i {
    color: #e034ff
    }
.si-5 {
    background-image: linear-gradient(to left top, #e3fde1, #dcfff8, #e7ffff, #f7feff, #fff)
    }
.si-5 i {
    color: #0095db
    }
.si-6 {
    background-image: linear-gradient(to left top, #fde1fb, #fae9ff, #faf1ff, #fbf8ff, #fff)
    }
.si-6 i {
    color: #f649e2
    }
.service-item-1:hover .si-icon i {
    animation: zoomIn 0.3s linear alternate;
    animation-duration: 0.5s
    }
.service-item-1 h4 {
    font-size: 25px;
    line-height: 37px;
    color: #222d39;
    margin: 0 0 10px
    }
.service-item-1 h4 a {
    color: inherit
    }
.service-item-1 h4 a:hover {
    color: #ff5f63
    }
.service-item-1 p {
    font-size: 17px;
    line-height: 24px;
    color: #838383;
    margin: 0
    }
.delivery-feature {
    position: relative;
    padding-right: 145px
    }
.delivery-feature img {
    width: 100%;
    height: auto
    }
.delivery-feature .listing-item {
    position: absolute;
    right: 12px;
    bottom: 40px;
    padding: 0
    }
.delivery-feature .listing-item li {
    /*    float: right;*/
    height: 80px;
    background: #fff;
    -webkit-box-shadow: 0 0 59px 0 rgba(196, 196, 196, 0.26);
    -moz-box-shadow: 0 0 59px 0 rgba(196, 196, 196, 0.26);
    box-shadow: 0 0 59px 0 rgba(196, 196, 196, 0.26);
    border-radius: 10px;
    font-size: 22px;
    color: #282331;
    font-family: "Jost", sans-serif;
    /*    display: inline-block;*/
    font-weight: 500;
    line-height: 0.8;
    padding-left: 72px;
    padding-top: 31px;
    padding-right: 36px;
    margin: 19px 0 0
    }
.delivery-feature .listing-item li i {
    width: auto;
    height: auto;
    background: transparent;
    left: 30px;
    font-size: 24px;
    line-height: 80px;
    color: #b587fb;
    -webkit-text-fill-color: inherit
    }
.delivery-feature .listing-item li.mid {
    margin-right: -59px
    }
.delivery-feature .listing-item li:last-of-type {
    margin-right: -10px
    }
.delivery-feature .listing-item li.mid i {
    color: #fec0fa
    }
.delivery-feature .listing-item li:last-child i {
    color: #a2fde4
    }
.feaure-item-5 {
    position: relative;
    padding-left: 88px;
    margin: 60px 0 0
    }
.feaure-item-5 i {
    position: absolute;
    left: 0;
    top: 2px;
    width: 70px;
    height: 70px;
    font-size: 40px;
    line-height: 70px;
    display: inline-block;
    background: #006cff;
    color: #fff;
    border-radius: 3px;
    text-align: center
    }
.feaure-item-5 h4 {
    font-size: 21px;
    color: #444;
    line-height: 27px;
    margin-bottom: 6px
    }
.feaure-item-5 p {
    font-size: 15px;
    line-height: 21px;
    color: #666;
    margin: 0
    }
/*--- Video Section ---*/
.video-banner {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    border-radius: 13px;
    min-height: 635px;
    -webkit-box-shadow: -1px 3px 73px 10px rgba(0, 0, 0, 0.04);
    -moz-box-shadow: -1px 3px 73px 10px rgba(0, 0, 0, 0.04);
    box-shadow: -1px 3px 73px 10px rgba(0, 0, 0, 0.04)
    }
.video-banner:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(1, 33, 147, 0.53);
    border-radius: 13px
    }
.video-banner .popup-video {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translatey(-50%);
    z-index: 2;
    display: inline-block
    }
.video-banner .popup-video i {
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28);
    height: 75px;
    width: 75px;
    border-radius: 50%;
    text-align: center;
    line-height: 75px;
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 30px
    }
.video-banner .popup-video:before {
    width: 112px;
    height: 112px;
    left: 0;
    right: 0;
    margin: auto;
    top: -18px;
    background: rgba(255, 255, 255, 0.28);
    position: absolute;
    content: "";
    z-index: 1;
    border-radius: 50%
    }
.video-banner .popup-video:after {
    width: 94px;
    height: 94px;
    left: 0;
    right: 0;
    margin: auto;
    top: -9.5px;
    background: rgba(255, 255, 255, 0.28);
    position: absolute;
    content: "";
    z-index: 1;
    border-radius: 50%;
    animation-fill-mode: both;
    animation: blinker 1.5s ease-in-out infinite;
    -webkit-animation: blinker 1.5s ease-in-out infinite;
    -moz-animation: blinker 1.5s ease-in-out infinite
    }
/*--- Skills ---*/
.skill-item-3 {
    position: relative;
    text-align: center
    }
.skill-item-3 strong {
    position: absolute;
    left: 0;
    top: 26%;
    width: 100%;
    margin: auto;
    text-align: center;
    font-family: "Jost", sans-serif;
    font-size: 20px;
    line-height: 32px;
    color: #7c7c7c;
    font-weight: 700
    }
.skill-item-3 h5 {
    font-size: 20px;
    line-height: 32px;
    color: #333;
    font-weight: 800;
    margin: 15px 0 0
    }
/*--- Pricing ---*/
.pricing-item-3 {
    position: relative;
    overflow: hidden;
    padding: 70px 55px 40px;
    background: -moz-linear-gradient(-97deg, rgb(230, 242, 252) 38%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(-97deg, rgb(230, 242, 252) 38%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(-97deg, rgb(230, 242, 252) 38%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(-97deg, rgb(230, 242, 252) 38%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(-187deg, rgb(230, 242, 252) 38%, rgba(255, 255, 255, 0) 100%)
    }
.pricing-item-3 .price-thumb {
    width: calc(100% + 110px);
    position: relative;
    left: -55px
    }
.pricing-item-3 .price-thumb img {
    border-radius: 0
    }
.pricing-item-3 h3 {
    font-size: 35px;
    line-height: 40px;
    color: #030303;
    margin: 0 0 19px
    }
.pricing-item-3 .p-price {
    font-size: 46px;
    line-height: 0.8;
    font-family: "Jost", sans-serif;
    color: #030303;
    font-weight: 700;
    letter-spacing: 0.92px;
    margin: 0 0 41px
    }
.pricing-item-3 .p-price .currency {
    font-size: 14px;
    top: 10px;
    margin-right: 10px
    }
.pricing-item-3 .p-price sup {
    margin: 0;
    font-size: 18px;
    left: 3px;
    top: 6px
    }
.pricing-item-3 ul {
    margin: 0;
    padding: 38px 0 28px
    }
.pricing-item-3 ul li {
    list-style: none;
    display: block;
    font-size: 17px;
    color: #0c0c0c;
    font-family: "Jost", sans-serif;
    line-height: 38px
    }
.pricing-item-3 ul li i {
    font-size: 15px;
    color: #68bafd;
    margin-right: 13px
    }
.pricing-item-3 p {
    font-size: 14px;
    color: #030303;
    font-family: "Jost", sans-serif;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.52px;
    margin: 0 0 11px
    }
.pricing-item-3 .shapro-btn-2 {
    height: 53px;
    background: #68bafd;
    font-size: 13px;
    padding: 21px 47px
    }
.pricing-item-3 .shapro-btn-2:after {
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28)
    }
.price-featured {
    position: absolute;
    right: -45px;
    top: 22px;
    height: 26px;
    text-align: center;
    color: #fff;
    font-family: "Jost", sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    line-height: 0.8;
    font-weight: 700;
    background: #68bafd;
    padding: 8px 70px;
    transform: rotate(45deg);
    -wepkit-transform: rotate(45deg);
    -mozi-transform: rotate(45deg)
    }
.pi-3-2 {
    background: -moz-linear-gradient(-97deg, rgb(237, 255, 234) 38%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(-97deg, rgb(237, 255, 234) 38%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(-97deg, rgb(237, 255, 234) 38%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(-97deg, rgb(237, 255, 234) 38%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(-187deg, rgb(237, 255, 234) 38%, rgba(255, 255, 255, 0) 100%)
    }
.pi-3-2 .price-featured {
    background: #48cb30
    }
.pi-3-2 ul li i {
    color: #48cb30
    }
.pi-3-2 .shapro-btn-2 {
    background: #48cb30
    }
.pi-3-3 {
    background: -moz-linear-gradient(-97deg, rgb(255, 246, 225) 38%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(-97deg, rgb(255, 246, 225) 38%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(-97deg, rgb(255, 246, 225) 38%, rgba(255, 255, 255, 0) 100%);
    background: -ms-linear-gradient(-97deg, rgb(255, 246, 225) 38%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(-187deg, rgb(255, 246, 225) 38%, rgba(255, 255, 255, 0) 100%)
    }
.pi-3-3 .price-featured {
    background: #f8ba28
    }
.pi-3-3 ul li i {
    color: #f8ba28
    }
.pi-3-3 .shapro-btn-2 {
    background: #f8ba28
    }
/*--- Service ---*/
.service-item-2 {
    position: relative;
    margin: 0 20px 95px;
    display: inline-flex
    }
.si-thumb {
    position: relative
    }
.si-thumb img {
    height: 201px;
    width: 225px
    }
.s-more:hover {
    color: #fff;
    -webkit-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5);
    -moz-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5);
    box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5)
    }
.si-details {
    position: relative;
    padding: 12px 0 0 30px
    }
.si-details h4 {
    font-size: 24px;
    line-height: 26px;
    color: #333;
    margin-bottom: 18px
    }
.si-details h4 a {
    color: inherit
    }
.si-details h4 a:hover {
    color: #ff5f63
    }
.si-details p {
    font-size: 17px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28);
    font-family: "Jost", sans-serif;
    margin-bottom: 16px
    }
.si-details p i {
    margin-right: 9px;
    position: relative;
    top: 1px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28)
    }
.si-details span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.8px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28);
    font-family: "Jost", sans-serif;
    margin-left: 24px
    }
/*--- Skills ---*/
.singleSkill-2 {
    position: relative;
    margin: 24px 0 0 56px
    }
.singleSkill-2 i {
    position: absolute;
    left: -56px;
    top: 3px;
    width: 46px;
    height: 46px;
    background: #ed324e;
    border-radius: 50%;
    text-align: center;
    display: block;
    font-size: 20px;
    color: #fff;
    line-height: 46px
    }
.singleSkill-2 h5 {
    font-size: 18px;
    line-height: 30px;
    font-weight: 500;
    color: #fff;
    margin: 0 0 4px
    }
.singleSkill-2 .skillbar {
    width: 0%;
    height: 13px;
    position: relative;
    background: #d10b4b;
    border-radius: 50px;
    z-index: 3
    }
.singleSkill-2:after {
    width: 100%;
    height: 13px;
    border-radius: 50px;
    background: #555149;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0
    }
.singleSkill-2 .parcent {
    display: block;
    float: right;
    margin-top: -39px;
    position: relative;
    font-size: 18px;
    font-family: "Jost", sans-serif;
    line-height: 0.8;
    color: #fff;
    font-weight: 500
    }
/*--- App Tab ---*/
.tab-title {
    display: block;
    position: relative;
    border: none;
    margin: 0 0 40px;
    padding: 0
    }
.tab-title li {
    list-style: none;
    display: inline-block;
    margin: 0 2px;
    padding: 0
    }
.tab-title li a {
    display: inline-block;
    font-size: 14px;
    color: #252525;
    line-height: 0.8;
    text-align: center;
    background: transparent;
    text-transform: uppercase;
    font-weight: 700;
    height: 40px;
    padding: 14px 30px;
    border-radius: 3px
    }
.tab-title li a.active, .tab-title li a:hover {
    color: #fff;
    background: #f22f3a;
    -webkit-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5);
    -moz-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5);
    box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5)
    }
.tab-content > .tab-pane {
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear;
    transform: scale(0.9, 0.9) translate(0)
    }
.tab-content > .tab-pane.show.active {
    transform: scale(1) translatey(0)
    }
.app-item-1 {
    position: relative;
    background: #e5f9f8;
    margin-bottom: 40px
    }
.ai-2 {
    background: #fcfaee
    }
.ai-3 {
    background: #ffeaed
    }
.ai-4 {
    background: #f3f2fc
    }
.ai-2 .ai-details ul li i {
    color: #e2d584
    }
.ai-3 .ai-details ul li i {
    color: #fcb1bc
    }
.ai-4 .ai-details ul li i {
    color: #b9b1ff
    }
.app-item-1 img {
    width: 100%;
    height: auto
    }
.ai-details {
    position: relative;
    padding: 43px 45px 29px
    }
.ai-details h3 {
    font-size: 36px;
    line-height: 39px;
    letter-spacing: -0.36px;
    margin: 0 0 15px
    }
.ai-details h3 a {
    color: inherit
    }
.ai-details h3 a:hover {
    color: #f22f3a
    }
.ai-details p {
    font-size: 16px;
    line-height: 24px;
    color: #333;
    margin: 0 0 20px
    }
.ai-details ul {
    margin: 0;
    padding: 0
    }
.ai-details ul li {
    list-style: none;
    display: block;
    font-size: 18px;
    line-height: 28px;
    color: #0c0c0c;
    letter-spacing: 0.72px;
    font-family: "Futura PT Book";
    margin: 0 0 1px
    }
.ai-details ul li i {
    display: inline-block;
    color: #5ee1da;
    margin-right: 16px
    }
/*--- Testimonial ---*/
.testimonial-slider-2 {
    position: relative;
    margin: 20px 0 0
    }
.testimonial-slider-2 .carousel-indicators {
    position: relative;
    z-index: 15;
    display: block;
    padding: 0;
    margin: 0 0 33px;
    list-style: none
    }
.testimonial-slider-2 .carousel-indicators li {
    list-style: none;
    width: 66px;
    height: 66px;
    margin: 0 10px 0 0;
    text-indent: 0;
    text-align: center;
    position: relative;
    cursor: pointer;
    background: transparent;
    background-clip: padding-box;
    border-top: none;
    border-radius: 50%;
    opacity: 1;
    border: 1px solid transparent;
    display: inline-block;
    float: left;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.testimonial-slider-2 .carousel-indicators li.active {
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28);
    -webkit-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.16);
    -moz-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.16);
    box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.16)
    }
.testimonial-slider-2 .carousel-indicators li img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.testimonial-details {
    position: relative;
    padding: 0 0 0
    }
.testimonial-details p {
    font-size: 28px;
    line-height: 35px;
    color: #282828;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-style: italic;
    margin: 0 0 24px
    }
.testimonial-details h5 {
    font-size: 24px;
    line-height: 28px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28);
    margin: 0 0 8px
    }
.testimonial-details span {
    display: block;
    font-size: 16px;
    line-height: 0.8;
    color: #20201c;
    margin: 0
    }
.review-tab-title {
    position: relative;
    display: block;
    border: none;
    margin: 0;
    padding: 0;
    width: 160px;
    z-index: 2
    }
.review-tab-title li {
    list-style: none;
    display: block;
    margin: 0 0
    }
.review-tab-title li a {
    display: inline-block;
    width: 100%;
    height: 50px;
    font-family: "Jost", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 50px;
    padding: 0 18px;
    color: #fff;
    background: #63b5b1;
    color: #fff;
    margin-bottom: 2px
    }
.review-tab-title li:first-child a {
    border-radius: 10px 0 0 0
    }
.review-tab-title li:last-child a {
    border-radius: 0 0 0 5px
    }
.review-tab-title li a.active {
    background: #fff;
    color: #8799a3;
    width: calc(100% + 6px)
    }
.review-tab-content {
    position: absolute;
    left: 15px;
    background: #fff;
    top: 0;
    border-radius: 0 10px 10px 10px;
    margin-left: 166px;
    padding: 46px 40px 30px;
    -webkit-box-shadow: 0 34px 90px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 34px 90px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 34px 90px 0 rgba(0, 0, 0, 0.1)
    }
.review-tab-content h4 {
    font-size: 28px;
    line-height: 34px;
    color: #252525;
    margin: 0 0 13px
    }
.review-tab-content p {
    font-size: 17px;
    line-height: 28px;
    color: #636363;
    margin: 0 0 34px
    }
.review-tab-content .shapro-btn-3 {
    -webkit-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5);
    -moz-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5);
    box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5)
    }
.review-tab-content .shapro-btn-3:hover {
    box-shadow: none
    }
.anim-right .active .video-tab-content, .anim-right .active .review-tab-content {
    -webkit-animation-name: fadeRight;
    animation-name: fadeRight;
    -webkit-animation-duration: 1.2s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
    }
.anim-right.tab-content > .tab-pane.show.active {
    transform: none
    }
.anim-right.tab-content > .tab-pane {
    transform: none
    }
@-webkit-keyframes fadeRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(20px, 0, 0);
        transform: translate3d(20px, 0, 0);
        } to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        }
    }
.client-log-section-2 .client-slider.owl-carousel a img {
    width: 131px;
    height: 68px
    }
/*--- Mailchimp  ---*/
.mailchimp-form {
    position: relative
    }
.mailchimp-form h4 {
    font-size: 34px;
    line-height: 28px;
    color: #262626;
    margin: 0 0 29px
    }
.mailchimp-form input[type="email"] {
    width: 380px;
    height: 50px;
    border: none;
    background: #f2f2f2;
    border-radius: 3px;
    outline: none;
    font-size: 13px;
    line-height: 50px;
    color: #494949;
    font-weight: 400;
    display: inline-block;
    padding: 0 24px
    }
.mailchimp-form input[type="email"]::-moz-placeholder {
    color: #494949;
    opacity: 1
    }
.mailchimp-form input[type="email"]::-ms-input-placeholder {
    color: #494949;
    opacity: 1
    }
.mailchimp-form input[type="email"]::-webkit-input-placeholder {
    color: #494949;
    opacity: 1
    }
.mailchimp-form input[type="submit"] {
    background-image: linear-gradient(to right, #eb3252, #ef2f49, #f32c3f, #f62b34, #f82c28);
    height: 50px;
    border-radius: 3px;
    font-family: "Jost", sans-serif;
    display: inline-block;
    float: right;
    text-align: center;
    font-size: 15px;
    color: #fff;
    line-height: 50px;
    padding: 0 29px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    outline: none;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.mailchimp-form input[type="submit"] {
    -webkit-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5);
    -moz-box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5);
    box-shadow: 0 10px 30px 0 rgba(242, 47, 58, 0.5)
    }
.mailchimp-form input[type="submit"]:hover {
    box-shadow: none
    }
.mailchimp-form p {
    font-size: 15px;
    line-height: 28px;
    color: #565656;
    font-weight: 300;
    margin: 10px 0 10px
    }
.social-links {
    position: relative
    }
.social-links a {
    display: inline-block;
    width: 45px;
    height: 45px;
    background: #3a5ba2;
    border-radius: 50%;
    text-align: center;
    font-size: 15px;
    color: #fff;
    line-height: 48px;
    margin-right: 5px
    }
.social-links a.vim {
    background: #1ab7ea
    }
.social-links a.fac {
    background: #3a5ba2
    }
.social-links a.twi {
    background: #55acee
    }
.social-links a.goo {
    background: #dd4b39
    }
.social-links p {
    display: inline-block;
    font-size: 18px;
    line-height: 28px;
    color: #535252;
    font-weight: 400;
    font-family: "Jost", sans-serif;
    margin: 0 0 0 9px
    }
.rss-content .sec-title {
    font-size: 34px;
    line-height: 28px;
    color: #262626;
    margin: 0 0 24px
    }
.rss-content .sec-desc {
    font-size: 16px;
    line-height: 28px;
    color: #525151;
    margin: 0 0 -24px
    }
.rss-content .sec-desc span {
    text-decoration: underline
    }
.rss-content .playstore-btn {
    justify-content: flex-start
    }
.rss-content .playstore-btn a:nth-child(2) {
    border-color: rgba(172, 172, 172, 0.2)
    }
.rss-content .playstore-btn a:nth-child(2):hover {
    background: transparent;
    border-color: #040707
    }
/*--- Footer ---*/
.footer-3 {
    position: relative;
    padding: 115px 0 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed
    }
.about-widget-three {
    position: relative
    }
.about-widget-three img {
    max-width: 100%;
    height: auto
    }
.about-widget-three > p {
    font-size: 16px;
    line-height: 28px;
    color: #999;
    font-weight: 300;
    margin: 30px 0 21px
    }
.ab-info {
    position: relative;
    margin: 0 0 21px
    }
.ab-info h5 {
    font-size: 14px;
    line-height: 0.8;
    color: #999;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 0 6px
    }
.ab-info p {
    font-size: 15px;
    color: #9fa4af;
    font-weight: 300;
    font-family: "Jost", sans-serif;
    margin: 0
    }
.ab-info-wrapper {
    display: inline-block;
    width: 100%
    }
.ab-info-wrapper .ab-info {
    width: 50%;
    float: left
    }
.about-widget-three .ab-social {
    margin: -13px 0 0
    }
.about-widget-three .ab-social a {
    background: transparent;
    width: auto;
    height: auto;
    font-size: 16px;
    color: #fff;
    margin-right: 24px
    }
.about-widget-three .ab-social a:hover {
    transform: none;
    color: #ff5f63
    }
.footer-3 .widget .widget-title {
    font-size: 20px;
    line-height: 32px;
    color: #7d7d7d;
    text-transform: uppercase;
    margin-bottom: 50px
    }
.single-tweet-2 {
    position: relative
    }
.st-user i {
    font-size: 16px;
    color: #fff;
    line-height: 19px;
    position: absolute;
    left: 0;
    top: 0
    }
.st-user h5 a {
    display: block;
    color: #999;
    text-transform: uppercase;
    font-size: 12px;
    margin: 1px 0 0
    }
.st-user h5 a:hover {
    color: #fff
    }
.single-tweet-2 p {
    font-size: 16px;
    line-height: 24px;
    color: #999;
    font-weight: 700;
    margin-bottom: 15px
    }
.single-tweet-2 p a {
    display: inline-block;
    color: inherit
    }
.single-tweet-2 span {
    display: block;
    font-weight: 700;
    font-family: "Jost", sans-serif;
    font-size: 13px;
    color: #999;
    line-height: 24px
    }
.opening-schedule {
    position: relative
    }
.opening-schedule p {
    font-size: 16px;
    line-height: 28px;
    color: #999;
    font-weight: 300;
    margin: 0 0 19px
    }
.open-time {
    display: inline-block;
    width: 100%;
    position: relative;
    font-size: 14px;
    line-height: 28px;
    color: #9fa4af;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    margin: 0 0 9px
    }
.open-time span {
    float: right
    }
.footer-3 .copyright {
    border: none;
    padding: 0 0 40px
    }
.footer-3 .copyright p {
    font-size: 17px;
    color: #999
    }
.footer-3 .copyright p a {
    color: inherit
    }
.footer-3 .copyright p a:hover {
    color: #ff5f63
    }
/*------------------------------------------------------
/ 4. Home 04
/------------------------------------------------------*/
/*--- Header  ---*/
.header-04 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 5;
    padding: 0 85px
    }
.header-04 .logo-1 {
    padding-top: 55px
    }
.header-04 .logo-1 img {
    height: 53px;
    width: auto
    }
.head-nav {
    display: flex;
    justify-content: flex-end;
    padding: 56px 0 0
    }
.head-nav h5 {
    font-size: 22px;
    line-height: 22px;
    color: #0aadeb;
    font-weight: 400;
    letter-spacing: -0.22px;
    margin: 0 12px 0 0;
    text-align: right;
    display: block
    }
.head-nav h5 span {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.2px;
    margin: 6px 0 0
    }
.head-nav .shapro-btn-4 {
    height: 50px;
    text-transform: initial;
    font-weight: 500;
    padding: 19px 18px
    }
.menu-btn span {
    display: block;
    width: 29px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    margin: 3px auto;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.menu-btn:hover {
    border-color: #0aadeb
    }
.menu-btn:hover span {
    background: #0aadeb
    }
/*------------------------------------------------------------
/ 13. Popup Menu
/-------------------------------------------------------------*/
body.menu_open {
    overflow: hidden
    }
.menu_pop_logo {
    z-index: 99;
    position: absolute;
    left: 0;
    top: 28px;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translatey(-90px);
    -moz-transform: translatey(-90px);
    -ms-transform: translatey(-90px);
    -o-transform: translatey(-90px);
    transform: translatey(-90px);
    -webkit-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -moz-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -ms-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -o-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95)
    }
.popup_menu.active .menu_pop_logo {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -ms-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0)
    }
.menu_pop_logo img {
    max-height: 100%;
    width: auto
    }
.popup_menu.active .menu-close {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -ms-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0)
    }
.menu-close:hover {
    color: #0aadeb;
    border-color: #0aadeb
    }
.popup_menu .menu_top {
    position: relative;
    width: 100%;
    z-index: 99
    }
.popup_menu {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: #051133;
    display: none
    }
.menu_middle {
    position: relative;
    top: 50%;
    transform: translatey(-50%);
    -moz-transform: translatey(-50%);
    -webkit-transform: translatey(-50%);
    position: relative;
    z-index: -1
    }
.popup_menu.active .menu_middle {
    z-index: 99
    }
.menu_popup {
    position: relative;
    text-align: center
    }
.menu_popup ul {
    margin: 0;
    padding: 0
    }
.menu_popup > ul {
    max-height: calc(100vh - 160px)
    }
.menu_popup ul li {
    list-style: none;
    margin: 23px 0;
    position: relative
    }
.menu_popup ul li a {
    color: #FFF;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 0.8;
    letter-spacing: 1px;
    font-weight: 500;
    font-family: "Jost", sans-serif;
    padding: 0 15px;
    position: relative;
    text-decoration: none;
    -webkit-text-decoration-skip: objects;
    transition: all 0.6s cubic-bezier(0.7, 0, 0.3, 1)
    }
.menu_popup ul li.active > a, .menu_popup ul li:hover > a {
    color: #0aadeb
    }
.menu_popup ul li.menu-item-has-children > a {
    position: relative
    }
.menu_popup ul li.menu-item-has-children > a::before {
    content: "";
    font-family: "Font Awesome 5 Pro";
    border: none;
    position: absolute;
    right: -7px;
    top: 0;
    color: #fff;
    font-size: 12px;
    line-height: 26px;
    color: rgba(132, 142, 156, 0.85);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.menu_popup ul li.menu-item-has-children.active > a:before, .menu_popup ul li.menu-item-has-children > a:hover:before {
    transform: rotate(-180deg);
    color: #0aadeb
    }
.menu_popup > ul > li {
    opacity: 0;
    -webkit-transition: translatey(80px);
    transform: translatey(80px)
    }
.menu_popup ul li ul.sub-menu {
    display: none;
    padding: 10px 0 0;
    transform: none;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none
    }
.menu_popup ul li .sub-menu li {
    margin: 9px 0;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms
    }
.menu_popup ul li ul.sub-menu li a {
    font-size: 15px;
    letter-spacing: 0.48px;
    font-weight: 400;
    text-transform: capitalize;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms
    }
.f_copy {
    position: relative
    }
.bottom_menu .f_copy {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translatey(90px);
    -moz-transform: translatey(90px);
    -ms-transform: translatey(90px);
    -o-transform: translatey(90px);
    transform: translatey(90px);
    -webkit-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -moz-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -ms-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -o-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95)
    }
.popup_menu.active .bottom_menu .f_copy {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -ms-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0)
    }
.f_copy p {
    font-size: 15px;
    line-height: 24px;
    color: #9fa4af;
    letter-spacing: 0.45px;
    font-weight: 300;
    margin: 0
    }
.f_copy p a {
    color: inherit
    }
.f_copy p a:hover {
    color: #0aadeb
    }
.foo_social {
    position: relative
    }
.bottom_menu .foo_social {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translatey(90px);
    -moz-transform: translatey(90px);
    -ms-transform: translatey(90px);
    -o-transform: translatey(90px);
    transform: translatey(90px);
    -webkit-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -moz-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -ms-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    -o-transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transition: all 1600ms cubic-bezier(0.445, 0.05, 0.55, 0.95)
    }
.popup_menu.active .bottom_menu .foo_social {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -ms-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0)
    }
.foo_social a {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    line-height: 0.8;
    color: #9fa4af;
    text-align: center;
    margin: 0 0 0 21px;
    transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    -webkit-transition: all ease 400ms
    }
.foo_social a:hover {
    color: #0aadeb
    }
.popup_menu.active .bottom_menu {
    z-index: 99
    }
/*--- Banner ---*/
.banner-04 {
    position: relative;
    height: 100vh;
    padding: 300px 0 120px;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center
    }
.banner-04:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0.9) 7%, rgba(255, 255, 255, 0) 66%);
    background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0.9) 7%, rgba(255, 255, 255, 0) 66%);
    background: -o-linear-gradient(180deg, rgba(0, 0, 0, 0.9) 7%, rgba(255, 255, 255, 0) 66%);
    background: -ms-linear-gradient(180deg, rgba(0, 0, 0, 0.9) 7%, rgba(255, 255, 255, 0) 66%);
    background: linear-gradient(270deg, rgba(0, 0, 0, 0.9) 7%, rgba(255, 255, 255, 0) 66%)
    }
.banner-content-4 {
    padding-right: 180px;
    padding-top: 0;
    position: relative;
    z-index: 3
    }
.banner-content-4 > span {
    display: block;
    font-size: 15px;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4.5px;
    color: #f0f0f0;
    margin: 0 0 10px
    }
.banner-content-4 h2 {
    font-size: 70px;
    line-height: 72px;
    letter-spacing: -0.7px;
    color: #fff;
    margin: 0 0 6px
    }
.banner-content-4 h2 span {
    color: #0aadeb
    }
.banner-content-4 p {
    color: #f0f0f0;
    margin: 0 0 15px
    }
.banner-content-4 ul {
    margin: 0 0 56px;
    padding: 0
    }
.banner-content-4 ul li {
    list-style: none;
    display: block;
    margin: 0 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-family: "Jost", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 36px;
    position: relative
    }
.banner-content-4 ul li i {
    color: rgba(10, 173, 235, 0.8);
    display: inline-block;
    margin-right: 20px
    }
.banner-content-4 .shapro-btn-4 {
    height: 50px;
    text-transform: initial;
    font-weight: 500;
    padding: 19px 41px
    }
.banner-content-4 > span {
    animation-delay: 2s;
    animation-name: fadeInRight
    }
.banner-content-4 h2 {
    animation-delay: 2.5s;
    animation-name: fadeInRight
    }
.banner-content-4 p {
    animation-delay: 3s;
    animation-name: fadeInRight
    }
.banner-content-4 ul {
    animation-delay: 3.5s;
    animation-name: fadeInRight
    }
.banner-content-4 .shapro-btn-4 {
    animation-delay: 4s;
    animation-name: fadeInRight
    }
/*--- Service Section ---*/
.service-item-3 {
    position: relative;
    margin: 0 0 40px
    }
.si-shape {
    position: absolute;
    right: 0;
    top: 25px
    }
.ser-number i {
    width: 29px;
    height: 29px;
    background: #dbf3ff;
    border-radius: 50%;
    font-size: 12px;
    color: #0e0d89;
    font-weight: 400;
    line-height: 29px;
    text-align: center;
    position: absolute;
    left: -5px;
    top: -12px
    }
.service-item-3 h4 {
    font-size: 24px;
    color: #000031;
    line-height: 30px;
    margin: 0 0 7px
    }
.service-item-3 h4 a {
    color: inherit
    }
.service-item-3 h4 a:hover {
    color: #0aadeb
    }
.service-item-3 p {
    font-size: 16px;
    line-height: 22px;
    color: #787878;
    margin: 0
    }
.sn-2 i {
    background: #fdcfd1
    }
.sn-3 i {
    background: #fff4d4
    }
.sn-4 i {
    background: #d2d5ff
    }
.service-item-3:hover .ser-number i {
    animation: bounceIn 1s linear infinite alternate;
    animation-duration: 1s
    }
/*--- About Section ---*/
.ab-list-feature {
    position: relative;
    margin: 71px 0 0
    }
.ab-list-feature img {
    max-width: 100%
    }
.ab-list-feature ul {
    max-width: 200px;
    position: absolute;
    right: -90px;
    top: 170px;
    margin: 0
    }
.ab-list-feature ul li {
    color: #0e0d89;
    margin-bottom: 75px;
    position: relative
    }
.ab-list-feature ul li:after {
    position: absolute;
    right: 26px;
    bottom: -48px;
    width: 2px;
    height: 27px;
    background: #e4e4e4;
    content: ""
    }
.ab-list-feature ul li span {
    background: #fff;
    color: #0e0d89;
    -webkit-box-shadow: 0 1px 27px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 27px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 27px 0 rgba(0, 0, 0, 0.1)
    }
.ab-list-feature ul li:nth-child(2) span {
    background: #caf0e9
    }
.ab-list-feature ul li:nth-child(3) span {
    background: #ffd046
    }
.ab-list-feature ul li:last-child:after {
    display: none
    }
/*--- Service Item ---*/
.service-item-4 {
    background-image: linear-gradient(to bottom, #fff8f6, #fffafa, #fffbfd, #fefdfe, #fff);
    padding: 34px 28px 25px;
    border-radius: 10px;
    margin-bottom: 30px
    }
.service-item-4 img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 32px 0 rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 1px 32px 0 rgba(0, 0, 0, 0.07);
    box-shadow: 0 1px 32px 0 rgba(0, 0, 0, 0.07)
    }
.si-4-details {
    position: relative;
    padding: 17px 0 0
    }
.si-4-details p {
    font-size: 16px;
    line-height: 28px;
    font-family: "Jost", sans-serif;
    color: #3f3f3f;
    margin: 0 0 0
    }
.si-4-details p a {
    color: inherit
    }
.si-4-details p a:hover {
    color: #0aadeb
    }
.si-4-details h4 {
    font-size: 25px;
    color: #1c1919;
    margin: 0
    }
.si-4-details h4 a {
    color: inherit
    }
.si-4-details h4 a:hover {
    color: #0aadeb
    }
/*--- Service From ---*/
.form-bg-img {
    position: absolute;
    right: 15px;
    top: 0
    }
.form-bg-img img {
    max-width: 100%;
    height: auto
    }
.services-form {
    margin-right: 165px;
    margin-top: 60px;
    position: relative;
    z-index: 2;
    background: #fff;
    border-radius: 3px;
    padding: 75px 30px 150px;
    -webkit-box-shadow: 0 1px 38px 0 rgba(0, 0, 0, 0.13);
    -moz-box-shadow: 0 1px 38px 0 rgba(0, 0, 0, 0.13);
    box-shadow: 0 1px 38px 0 rgba(0, 0, 0, 0.13)
    }
.services-form:after {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 122px;
    content: "";
    margin: auto;
    background: url(../images/home4/1.webp) no-repeat bottom center
    }
.services-form input, .services-form textarea {
    width: 100%;
    height: 67px;
    background: transparent;
    padding: 0 25px;
    border: 1px solid #f0f0f0;
    border-radius: 3px;
    outline: none;
    font-family: "Jost", sans-serif;
    font-size: 14px;
    line-height: 67px;
    color: #a2a2a2;
    margin: 0 0 12px
    }
.services-form textarea::-moz-placeholder, .services-form input::-moz-placeholder {
    color: #a2a2a2;
    opacity: 1
    }
.services-form textarea::-ms-input-placeholder, .services-form input::-ms-input-placeholder {
    color: #a2a2a2;
    opacity: 1
    }
.services-form textarea::-webkit-input-placeholder, .services-form input::-webkit-input-placeholder {
    color: #a2a2a2;
    opacity: 1
    }
/*--- Pricing Area ---*/
.plan-wrapper {
    position: relative;
    margin-left: -250px;
    display: block;
    border: none
    }
.plan-wrapper li {
    position: relative;
    min-height: 135px;
    margin-bottom: 22px;
    padding-left: 160px;
    padding-top: 35px
    }
.plan-wrapper li .pi-icon {
    padding: 28px 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 135px;
    height: 135px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
    display: inline-block
    }
.plan-wrapper li .pi-icon i {
    font-size: 33px;
    color: #687ded;
    line-height: 80px;
    width: 80px;
    height: 80px;
    background: #f0f5ff;
    border-radius: 50%;
    text-align: center;
    display: inline-block
    }
.plan-wrapper li .p-price {
    font-size: 22px;
    line-height: 30px;
    color: #fff;
    font-family: "Jost", sans-serif;
    font-weight: 700;
    letter-spacing: 0.44px;
    margin-bottom: -4px
    }
.plan-wrapper li .p-price sup.currency {
    font-size: 9px;
    margin-right: 2px
    }
.plan-wrapper li .p-price span {
    font-size: 12px;
    position: relative;
    top: -4px;
    left: 2px
    }
.plan-wrapper li h5 {
    font-size: 20px;
    line-height: 33px;
    color: #fff;
    letter-spacing: -0.4px;
    margin: 0
    }
.plan-price-wrapper {
    position: relative;
    background: #181818;
    margin-right: -140px
    }
.pricing-item-4 {
    position: relative;
    overflow: hidden;
    padding: 96px 85px 85px;
    background-image: linear-gradient(to bottom, #fcede9, #fdf1f2, #fdf6f9, #fdfbfd, #fff)
    }
.pricing-item-4 h3 {
    font-size: 35px;
    line-height: 40px;
    color: #030303;
    margin: 0 0 19px
    }
.pricing-item-4 .p-price {
    font-size: 46px;
    line-height: 0.8;
    font-family: "Futura PT";
    color: #030303;
    font-weight: 700;
    letter-spacing: 0.92px;
    margin: 0 0 32px
    }
.pricing-item-4 .p-price .currency {
    font-size: 14px;
    top: 10px;
    font-family: "Futura PT";
    margin-right: 10px
    }
.pricing-item-4 .p-price sup {
    margin: 0;
    font-size: 18px;
    left: 3px;
    font-family: "Futura PT Demi";
    top: 6px
    }
.pricing-item-4 ul {
    margin: 0;
    padding: 0 0 34px
    }
.pricing-item-4 ul li {
    list-style: none;
    display: block;
    font-size: 17px;
    color: #0b0b0b;
    font-family: "Futura PT Book";
    letter-spacing: 0.68px;
    line-height: 38px
    }
.pricing-item-4 ul li i {
    font-size: 15px;
    color: #48cb30;
    margin-right: 13px
    }
.pricing-item-4 p {
    font-size: 13px;
    color: #030303;
    display: inline-block;
    font-family: "Futura PT Book";
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.52px;
    height: 30px;
    background: #fceabf;
    margin: 0;
    padding: 2px 10px
    }
.plan-price-wrapper .col-lg-7 {
    padding: 120px 30px 30px 50px
    }
.plan-price-wrapper .col-lg-7 .sec-title {
    font-size: 50px;
    line-height: 57px;
    font-weight: 600;
    letter-spacing: -1px;
    margin-bottom: 22px
    }
.plan-price-wrapper .sec-desc {
    color: #e6e6e6;
    font-size: 17px;
    margin-bottom: 42px
    }
/*---- Testimonial Slider ----*/
.testimonial-slider-two {
    position: relative
    }
.testimonial-slider-two .slick-list.draggable {
    margin-left: -45px
    }
.testimonial-slider-two .slick-track {
    padding-left: 45px
    }
.ts-item {
    position: relative
    }
.ts-author-thumb {
    position: relative;
    margin-right: 25px
    }
.ts-author-thumb img {
    width: 100%;
    height: auto
    }
.quote-icon {
    width: 99px;
    height: 99px;
    background: #0aadeb;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    font-size: 100px;
    line-height: 100px;
    color: #fff;
    position: absolute;
    left: -45px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    padding: 23px 0
    }
.ts-author {
    position: relative;
    margin: 71px 0 0
    }
.ts-author h3 {
    font-size: 50px;
    line-height: 57px;
    color: #2e3d62;
    margin-bottom: 45px
    }
.ts-author p {
    font-size: 21px;
    color: #666e82;
    line-height: 46px;
    margin-bottom: 38px
    }
.ts-author span {
    display: block;
    font-size: 23px;
    font-weight: 800;
    color: #0aadeb;
    line-height: 0.9
    }
.testimonial-slider-two .slick-arrow {
    background: transparent;
    border: none;
    outline: none;
    display: inline-block;
    position: absolute;
    right: 0;
    bottom: 8px;
    color: #666e82;
    font-size: 24px;
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.testimonial-slider-two .slick-prev {
    right: 35px;
    z-index: 4
    }
.testimonial-slider-two .slick-arrow:hover {
    color: #0aadeb
    }
/*--- Team Section ---*/
.team-slider.owl-carousel {
    position: relative;
    margin: 60px 0 0
    }
.team-slider.owl-carousel .owl-dots {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0
    }
.team-slider.owl-carousel .owl-dots button {
    width: 13px;
    height: 13px;
    background: #6abe52;
    outline: none;
    border-radius: 50%;
    margin: 0 4px;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.team-slider.owl-carousel .owl-dots button:hover, .team-slider.owl-carousel .owl-dots button.active {
    background: #0aadeb
    }
.team-slider.owl-carousel .owl-dots button span {
    display: none
    }
.team-item-2 {
    position: relative;
    overflow: hidden;
    margin: 0 0 26px
    }
.team-slider.owl-carousel img {
    width: 100%;
    height: auto;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.team-item-2:hover img {
    -webkit-transform: scale(1.02) rotate(-1deg);
    -moz-transform: scale(1.02) rotate(-1deg);
    -ms-transform: scale(1.02) rotate(-1deg);
    -o-transform: scale(1.02) rotate(-1deg);
    transform: scale(1.02) rotate(-1deg)
    }
.team-item-2 .team-detils {
    visibility: hidden;
    opacity: 0;
    transform: none;
    top: auto;
    bottom: 0;
    transform: translatey(-40px);
    transform: translatey(-40px);
    -moz-transform: translatey(-40px);
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.team-item-2:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    visibility: hidden;
    opacity: 0;
    background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 1) 5%, rgba(255, 255, 255, 0) 45%);
    background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 5%, rgba(255, 255, 255, 0) 45%);
    background: -o-linear-gradient(90deg, rgba(0, 0, 0, 1) 5%, rgba(255, 255, 255, 0) 45%);
    background: -ms-linear-gradient(90deg, rgba(0, 0, 0, 1) 5%, rgba(255, 255, 255, 0) 45%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 5%, rgba(255, 255, 255, 0) 45%);
    width: 100%;
    height: 100%;
    content: "";
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.team-item-2:hover:after {
    visibility: visible;
    opacity: 1
    }
.team-item-2:hover .team-detils {
    transform: translatey(-26px);
    transform: translatey(-26px);
    -moz-transform: translatey(-26px);
    visibility: visible;
    opacity: 1
    }
.team-item-2 .team-detils p, .team-item-2 .team-detils .member-name {
    visibility: visible;
    opacity: 1;
    transform: none;
    display: block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.team-item-2 .team-detils .member-name:hover {
    color: #0aadeb
    }
/*--- Skills ---*/
.singleSkill-3 {
    position: relative;
    margin: 28px 70px 0 0
    }
.singleSkill-3 h5 {
    font-size: 14px;
    line-height: 34px;
    color: #252525;
    text-transform: uppercase;
    margin: 0 0 3px
    }
.singleSkill-3 .skillbar {
    width: 0%;
    height: 8px;
    position: relative;
    background-image: linear-gradient(to left, #5e00ff, #6d00ff, #7a00ff, #8500ff, #9000ff);
    border-radius: 30px 0 0 30px;
    z-index: 3
    }
.singleSkill-3:after {
    width: 100%;
    height: 8px;
    border-radius: 30px;
    background: #f3f4f6;
    content: "";
    position: absolute;
    left: 0;
    bottom: 0
    }
.singleSkill-3 .parcent {
    display: block;
    margin: 0;
    right: -70px;
    bottom: 0;
    position: absolute;
    font-size: 14px;
    font-family: "Jost", sans-serif;
    line-height: 0.8;
    color: #252525;
    font-weight: 700
    }
.singleSkill-3 .rounds {
    width: 25px;
    height: 25px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    z-index: 3;
    left: -5px;
    bottom: -7px;
    -webkit-box-shadow: 0 5px 20px 0 rgba(135, 153, 163, 0.35);
    -moz-box-shadow: 0 5px 20px 0 rgba(135, 153, 163, 0.35);
    box-shadow: 0 5px 20px 0 rgba(135, 153, 163, 0.35)
    }
.sk-3-c-2 .skillbar {
    background-image: linear-gradient(to left, #e91d62, #ed2459, #f12c4f, #f33645, #f43f3b)
    }
.sk-3-c-3 .skillbar {
    background-image: linear-gradient(to left, #39b54a, #53ba46, #68be43, #7bc241, #8dc63f)
    }
/*--- Story ---*/
.story-item-1 {
    position: relative;
    overflow: hidden;
    margin-bottom: 40px
    }
.story-item-1 img {
    width: 100%;
    height: auto;
    -webkit-box-shadow: 0 30px 160px 0 rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 30px 160px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 30px 160px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.story-item-1:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05)
    }
.story-content > span {
    display: block;
    font-size: 20px;
    line-height: 0.8;
    color: #8799a3;
    font-weight: 800;
    font-family: "Jost", sans-serif;
    margin: 0 0 12px
    }
.story-content h3 {
    font-size: 32px;
    line-height: 42px;
    color: #fff;
    font-weight: 800;
    margin: 0 0 12px
    }
.story-content p {
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    margin-bottom: 37px
    }
.story-content .shapro-btn-4 {
    height: 50px;
    font-size: 14px;
    font-weight: 700;
    padding: 19px 38px
    }
.righ-align .story-content {
    left: auto;
    right: 90px
    }
/*--- Client Logo ---*/
.client-slider-two {
    position: relative;
    text-align: center
    }
.client-slider-two.owl-carousel a {
    display: inline-block;
    text-align: center
    }
.client-slider-two.owl-carousel a img {
    width: 179px;
    height: 63px
    }
/*--- Faq ---*/
.faq-help {
    position: relative;
    overflow: hidden;
    margin-right: 10px
    }
.faq-help img {
    width: 100%;
    height: auto;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.faq-help:hover img {
    -webkit-transform: scale(1.02) rotate(-1deg);
    -moz-transform: scale(1.02) rotate(-1deg);
    -ms-transform: scale(1.02) rotate(-1deg);
    -o-transform: scale(1.02) rotate(-1deg);
    transform: scale(1.02) rotate(-1deg)
    }
.help-content {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 50px 58px
    }
.help-content p {
    display: inline-block;
    height: 33px;
    background: #0aadeb;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 33px;
    color: #fff;
    font-weight: 700;
    font-family: "Jost", sans-serif;
    letter-spacing: 3.2px;
    padding: 0 12px;
    margin: 0 0 15px
    }
.help-content h4 {
    font-size: 40px;
    line-height: 42px;
    color: #fff;
    margin-bottom: 39px
    }
.help-content .shapro-btn-4 {
    height: 50px;
    font-size: 14px;
    font-weight: 700;
    padding: 19px 20px
    }
.faq-area {
    position: relative;
    background: #effdff;
    margin-left: -40px;
    padding: 64px 40px 45px
    }
.faq-area .sub-color-3 {
    color: #0e1a21;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    margin-bottom: 9px
    }
.faq-area > h5 {
    font-size: 34px;
    line-height: 42px;
    color: #060606;
    margin: 0 0 28px
    }
.singleFaq-2 {
    position: relative;
    padding: 0;
    margin: 0 0 10px
    }
.singleFaq-2 .card-header {
    position: relative;
    padding: 0;
    margin: 0;
    background: transparent;
    font-family: "Jost", sans-serif;
    border: none;
    border-radius: 0
    }
.singleFaq-2 .card-header .btn {
    text-decoration: none;
    font-size: 22px;
    line-height: 28px;
    color: #fff;
    font-weight: 500;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    letter-spacing: 0;
    padding: 26px 20px 26px 85px;
    margin: 0;
    position: relative;
    background: #0aadeb;
    border-radius: 0
    }
.singleFaq-2 .card-header .btn.collapsed {
    background: #b8ecf4;
    color: #0a0a0a
    }
.singleFaq-2 .card-header .btn.collapsed:after {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 33px;
    height: 33px;
    background: #0aadeb;
    border-radius: 3px;
    line-height: 28px;
    font-family: "Jost", sans-serif;
    content: "+";
    font-size: 22px;
    color: #fff;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.singleFaq-2 .card-header .btn:after {
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 33px;
    height: 33px;
    background: #b8ecf4;
    border-radius: 3px;
    line-height: 28px;
    font-family: "Jost", sans-serif;
    content: "-";
    font-size: 22px;
    color: #0a0a0a;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.singleFaq-2 .card-body {
    padding: 11px 30px 45px;
    background: #0aadeb;
    font-size: 18px;
    color: #fff;
    line-height: 28px;
    margin: 0;
    border-top: 1px solid #fff
    }
.singleFaq-2 .card-body p {
    margin: 0
    }
/*--- Mailchimp  ---*/
.mailchimp-form-two {
    position: relative
    }
.mailchimp-form-two input[type="email"] {
    width: 100%;
    height: 75px;
    border: none;
    background: #fff;
    border-radius: 3px;
    outline: none;
    font-size: 16px;
    line-height: 75px;
    color: #b3b3b3;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    font-weight: 500;
    display: inline-block;
    padding: 0 40px
    }
.mailchimp-form-two input[type="email"]::-moz-placeholder {
    color: #b3b3b3;
    opacity: 1
    }
.mailchimp-form-two input[type="email"]::-ms-input-placeholder {
    color: #b3b3b3;
    opacity: 1
    }
.mailchimp-form-two input[type="email"]::-webkit-input-placeholder {
    color: #b3b3b3;
    opacity: 1
    }
.mailchimp-form-two input[type="submit"] {
    background: #f56772;
    height: 75px;
    border-radius: 0 3px 3px 0;
    font-family: "Jost", sans-serif;
    display: inline-block;
    float: right;
    text-align: center;
    font-size: 16px;
    color: #fff;
    line-height: 75px;
    padding: 0 29px;
    font-weight: 500;
    text-transform: uppercase;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    outline: none;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.mailchimp-form-two input[type="submit"]:hover {
    color: #fff;
    background: #0aadeb
    }
/*--- Footer ---*/
.footer-4 {
    position: relative;
    padding: 65px 0 0;
    background: #202020
    }
.footer-4 .about-widget p {
    font-size: 14px;
    line-height: 26px;
    color: #dfdfdf;
    letter-spacing: 0.28px;
    margin: -11px 0 0
    }
.footer-4 .widget .widget-title {
    font-size: 23px;
    line-height: 30px;
    letter-spacing: -0.46px;
    margin-bottom: 39px
    }
.recent-news h5 a {
    color: inherit
    }
.recent-news h5 a:hover {
    color: #0aadeb
    }
.recent-news p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 0.8;
    margin: 0
    }
.recent-news p i {
    color: #ee3364;
    font-size: 15px;
    line-height: 0.8;
    margin-right: 12px;
    position: relative;
    top: 2px
    }
.footer-4 .contact-info p {
    font-size: 15px;
    line-height: 28px;
    color: #fff;
    font-weight: 400
    }
.footer-4 .contact-info p a {
    color: #999;
    text-decoration: underline
    }
.footer-4 .contact-info p span {
    color: #999
    }
.footer-4 .single-tweet-2 p {
    font-size: 15px;
    line-height: 26px;
    color: #999;
    font-weight: 400;
    border-top: 1px solid #484848;
    margin: 0 0 0;
    padding: 10px 0 0
    }
.footer-4 .ab-social {
    margin: -6px 0 0
    }
.footer-4 .ab-social a {
    width: 37px;
    height: 37px;
    font-size: 14px;
    background: transparent;
    line-height: 39px
    }
.footer-4 .ab-social a:hover {
    background: #0aadeb;
    color: #fff;
    transform: none
    }
.footer-4 .widget {
    margin-bottom: 45px
    }
.copyright-4 {
    position: relative;
    background: #161616
    }
.copyright-4 .copyright {
    border: none;
    padding: 25px 0 22px
    }
.copyright-4 .copyright p a:hover {
    color: #0aadeb
    }
/*------------------------------------------------------
/ 5. Home 05
/------------------------------------------------------*/
/*---  Header ---*/
.header-05 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 5;
    padding-left: 100px;
    padding-right: 20%
    }
.header-05 .logo-1 {
    padding-top: 56px
    }
.header-05 .menu_1 > ul > li {
    margin-top: 72px
    }
.header-05 .menu_1 ul li a {
    font-weight: 500
    }
.header-05 .menu_1 > ul > li > a:after {
    display: none
    }
.header-05 .menu_1 > ul > li:hover > a {
    transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de)
    }
.header-05 .menu_1 > ul > li ul li:hover > a, .header-05 .menu_1 > ul > li ul li.menu-item-has-children:hover:before {
    color: #9250ee
    }
.header-05 .head-nav h5 {
    margin: 2px 30px 0 10px;
    font-size: 18px;
    letter-spacing: -0.18px
    }
.header-05 .head-nav h5 span {
    font-size: 16px;
    margin-top: 1px
    }
.header-05 .shapro-btn-5 {
    height: 50px;
    text-transform: capitalize;
    border-radius: 3px;
    font-weight: 500;
    padding: 18px 27px
    }
.header-05 .shapro-btn-5:after {
    border-radius: 3px
    }
/*---  Banner ---*/
.banner-05 {
    position: relative;
    min-height: 1120px;
    padding: 380px 0 60px;
    overflow: hidden;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: top center
    }
.b5-shape {
    text-align: center;
    position: absolute;
    left: 0;
    top: -50px;
    height: 100%;
    animation: rotated 80s infinite linear
    }
.b5-shape img {
    width: 100%
    }
.banner-content-5 {
    position: relative;
    display: flex;
    justify-content: center
    }
.banner-content-5 h2 {
    font-size: 144px;
    line-height: 0.8;
    color: #fff;
    position: relative;
    font-weight: 800;
    letter-spacing: -5px;
    text-transform: uppercase;
    margin-bottom: 0
    }
.banner-content-5 h2 img {
    position: absolute;
    left: 0;
    bottom: -31px;
    width: 100%;
    height: 20px
    }
.banner-content-5 p {
    font-size: 40px;
    line-height: 47px;
    color: #fff;
    font-family: "Jost", sans-serif;
    font-weight: 300;
    margin: 13px 0 0 27px
    }
.b5-layer-thumb {
    position: relative;
    margin: 96px 0 0
    }
.b5-layer-thumb img {
    width: 100%;
    height: auto;
    border-radius: 53px;
    -webkit-box-shadow: 0 1px 49px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 1px 49px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 1px 49px 0 rgba(0, 0, 0, 0.19)
    }
.b5-layer-thumb .layer-left {
    width: auto;
    max-width: 100%;
    position: absolute;
    left: -115px;
    bottom: 165px;
    z-index: 2;
    box-shadow: none;
    border-radius: 0;
    animation: rotated 40s infinite linear
    }
.b5-layer-thumb .layer-right {
    width: auto;
    max-width: 100%;
    position: absolute;
    right: -200px;
    top: 205px;
    z-index: 2;
    box-shadow: none;
    border-radius: 0;
    animation: rotated 30s infinite linear
    }
.banner-content-5 h2 {
    animation-delay: 2s;
    animation-name: fadeInLeft
    }
.banner-content-5 p {
    animation-delay: 2s;
    animation-name: fadeInRight
    }
.b5-layer-thumb {
    animation-delay: 2.5s;
    animation-name: fadeInUp
    }
/*---  Booking ---*/
.booking-area {
    position: relative
    }
.booking-area img {
    position: absolute;
    right: 0;
    top: -120px
    }
.booking-feature-item {
    position: relative;
    background: #fff;
    border-radius: 100px;
    padding: 42px 20px 39px 175px;
    -webkit-box-shadow: 0 1px 49px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 1px 49px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 1px 49px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 23px;
    margin-right: 65px
    }
.booking-feature-item:before {
    position: absolute;
    left: -4px;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    border-radius: 100px;
    z-index: -1
    }
.booking-feature-item i {
    position: absolute;
    left: 55px;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 26px;
    line-height: 62px;
    text-align: center;
    width: 62px;
    height: 62px;
    color: #fff;
    background: #f69e22;
    border-radius: 20px
    }
.booking-feature-item i:after {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 44px;
    height: 44px;
    content: "";
    border: 3px solid #fff;
    border-radius: 50%
    }
.booking-feature-item h5 {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 17px
    }
.booking-feature-item p {
    color: #666;
    font-size: 16px;
    line-height: 28px;
    margin: 0
    }
.bfi-2 {
    margin-right: 5px;
    margin-left: 60px
    }
.bfi-2:before {
    left: auto;
    right: -4px
    }
.bfi-2 i {
    background: #6f60ff
    }
.bfi-3 i {
    background: #1aa68e
    }
/*---  Funfact ---*/
.funfact-item-1 {
    position: relative
    }
.funfact-item-1 i {
    width: 78px;
    height: 78px;
    line-height: 78px;
    text-align: center;
    display: inline-block;
    position: relative;
    font-size: 36px;
    border-radius: 50%;
    color: #fff;
    margin-bottom: 43px;
    background: -moz-linear-gradient(48deg, #24a1f1 0%, #24a1f1 64%);
    background: -webkit-linear-gradient(48deg, #24a1f1 0%, #24a1f1 64%);
    background: -o-linear-gradient(48deg, #24a1f1 0%, #24a1f1 64%);
    background: -ms-linear-gradient(48deg, #24a1f1 0%, #24a1f1 64%);
    background: linear-gradient(98deg, #24a1f1 0%, #24a1f1 64%)
    }
.funfact-item-1 i:after {
    position: absolute;
    left: 0;
    top: -4px;
    width: 81px;
    height: 85px;
    content: "";
    background: url(../images/fact.webp) no-repeat center center/cover;
    z-index: -1
    }
.funfact-item-1 h2 {
    font-size: 66px;
    line-height: 26px;
    color: #0f0f0f;
    font-weight: 800;
    margin-bottom: 20px
    }
.funfact-item-1 h5 {
    font-size: 17px;
    line-height: 32px;
    color: #239ff1;
    font-weight: 400;
    margin-bottom: 0
    }
.fi-2 i {
    background: -moz-linear-gradient(48deg, #b058df 0%, #e22eb4 64%);
    background: -webkit-linear-gradient(48deg, #b058df 0%, #e22eb4 64%);
    background: -o-linear-gradient(48deg, #b058df 0%, #e22eb4 64%);
    background: -ms-linear-gradient(48deg, #b058df 0%, #e22eb4 64%);
    background: linear-gradient(98deg, #b058df 0%, #e22eb4 64%)
    }
.fi-2 i:after {
    background: url(../images/fact2.webp) no-repeat center center/cover
    }
.fi-2 h5 {
    color: #e22eb4
    }
.fi-3 i {
    background: -moz-linear-gradient(48deg, #00dda0 0%, #27f191 64%);
    background: -webkit-linear-gradient(48deg, #00dda0 0%, #27f191 64%);
    background: -o-linear-gradient(48deg, #00dda0 0%, #27f191 64%);
    background: -ms-linear-gradient(48deg, #00dda0 0%, #27f191 64%);
    background: linear-gradient(98deg, #00dda0 0%, #27f191 64%)
    }
.fi-3 i:after {
    background: url(../images/fact3.webp) no-repeat center center/cover
    }
.fi-3 h5 {
    color: #27f191
    }
.fi-4 i {
    background: -moz-linear-gradient(48deg, #fb7710 0%, #fda620 64%);
    background: -webkit-linear-gradient(48deg, #fb7710 0%, #fda620 64%);
    background: -o-linear-gradient(48deg, #fb7710 0%, #fda620 64%);
    background: -ms-linear-gradient(48deg, #fb7710 0%, #fda620 64%);
    background: linear-gradient(98deg, #fb7710 0%, #fda620 64%)
    }
.fi-4 i:after {
    background: url(../images/fact4.webp) no-repeat center center/cover
    }
.fi-4 h5 {
    color: #fda620
    }
.fi-5 i {
    background: #ee3364
    }
.fi-5 i:after {
    background: url(../images/fact5.webp) no-repeat center center/cover
    }
.fi-5 h5 {
    color: #ee3364
    }
/*--- Booking  ---*/
.booking-tab-wrapper {
    position: relative;
    padding-right: 305px
    }
.booking-tab-title {
    position: absolute;
    right: 0;
    top: 150px;
    margin: 0 0 0;
    padding: 0;
    display: block;
    border: none
    }
.booking-tab-title li {
    list-style: none;
    display: block;
    line-height: 0.8;
    margin: 0 0 10px
    }
.booking-tab-title li a {
    display: inline-block;
    font-size: 22px;
    letter-spacing: 0.22px;
    color: #101010;
    line-height: 70px;
    z-index: 2;
    text-align: left;
    font-family: "Jost", sans-serif;
    font-weight: 700;
    height: 70px;
    position: relative;
    background: transparent;
    border-radius: 50px;
    padding: 0 25px 0 65px;
    width: 100%
    }
.booking-tab-title li a:after {
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 50px;
    visibility: hidden;
    opacity: 0;
    height: 100%;
    z-index: -1;
    width: 100%;
    content: "";
    background-image: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out
    }
.booking-tab-title li a i {
    transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    color: #fff;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 30px;
    top: 0;
    line-height: 70px
    }
.booking-tab-title li a.active, .booking-tab-title li a:hover {
    color: #fff
    }
.booking-tab-title li a.active:after, .booking-tab-title li a:hover:after {
    visibility: visible;
    opacity: 1
    }
.booking-tab-title li a.active i, .booking-tab-title li a:hover i {
    visibility: visible;
    opacity: 1
    }
.booking-tab-content {
    position: relative
    }
.booking-tab-content h2 {
    font-size: 57px;
    line-height: 60px;
    letter-spacing: -1.14px;
    margin-bottom: 35px
    }
.booking-tab-content img {
    width: 100%;
    height: auto
    }
.booking-tab-content p {
    color: #313131;
    margin: 32px 0 35px
    }
/*--- Portfolio  ---*/
.folio-title {
    position: relative;
    margin-bottom: 50px
    }
.folio-title li a {
    position: relative
    }
.folio-title li a.active, .folio-title li a:hover {
    box-shadow: none;
    background: transparent
    }
.folio-title li a:after {
    position: absolute;
    background: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    content: "";
    z-index: -1;
    transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    visibility: hidden;
    opacity: 0
    }
.folio-title li a.active, .folio-title li a:hover {
    color: #fff
    }
.folio-title li a.active:after, .folio-title li a:hover:after {
    visibility: visible;
    opacity: 1
    }
.folio-item-1 {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px
    }
.folio-item-1 img {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.folio-item-1:hover img {
    -webkit-transform: scale(1.02) rotate(-1deg);
    -moz-transform: scale(1.02) rotate(-1deg);
    -ms-transform: scale(1.02) rotate(-1deg);
    -o-transform: scale(1.02) rotate(-1deg);
    transform: scale(1.02) rotate(-1deg)
    }
.folio-details {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 0 25px 22px
    }
.folio-details h3 {
    background: #0e0e0e;
    color: #fff;
    display: block;
    font-size: 30px;
    line-height: 32px;
    letter-spacing: -0.6px;
    padding: 7px 25px 8px;
    border-radius: 30px;
    margin: 0 0 5px
    }
.folio-details h3 a {
    color: inherit;
    display: inline-block
    }
.folio-details .f-cate {
    display: inline-block;
    letter-spacing: 0.09px;
    background: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    font-size: 18px;
    line-height: 0.8;
    color: #fff;
    padding: 8px 26px 9px;
    border-radius: 30px
    }
/*---  Testimonial ---*/
.testimonial-slider-three.owl-carousel {
    position: relative
    }
.ts-three-item {
    position: relative;
    padding: 0 100px;
    margin-bottom: 90px
    }
.ts-three-item .ts-author-thumb {
    display: inline-block;
    margin: 0 0 22px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: #fff;
    text-align: center
    }
.ts-three-item .ts-author-thumb:after {
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    border: 1px dashed #fff;
    content: "";
    z-index: -1;
    border-radius: 50%
    }
.testimonial-slider-three.owl-carousel .ts-author-thumb img {
    width: 182px;
    height: 182px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: 3
    }
.tsi-three-author {
    position: relative;
    margin: 0 0 0
    }
.tsi-three-author h5 {
    display: flex;
    justify-content: center;
    font-size: 16px;
    line-height: 24px;
    color: #222;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 23px
    }
.tsi-three-author span {
    display: inline-block;
    font-weight: 400;
    padding-left: 44px;
    position: relative
    }
.tsi-three-author span:after {
    position: absolute;
    left: 25px;
    bottom: 0;
    top: 0;
    margin: auto;
    content: "";
    width: 5px;
    height: 2px;
    background: #222
    }
.tsi-three-author p {
    position: relative;
    font-size: 24px;
    line-height: 35px;
    color: #181818;
    margin: 0 2px
    }
.tsi-three-author p:after {
    position: absolute;
    left: -54px;
    top: -35px;
    background: url(../images/quote.webp) no-repeat center center/cover;
    width: 54px;
    height: 48px;
    content: ""
    }
.testimonial-slider-three.owl-carousel .owl-dots {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 0
    }
.testimonial-slider-three.owl-carousel .owl-dots button {
    margin: 0 4px;
    width: 18px;
    height: 18px;
    position: relative;
    outline: none;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out
    }
.testimonial-slider-three.owl-carousel .owl-dots button:after {
    position: absolute;
    left: -1px;
    top: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    background: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    border: 1px dashed #fff;
    content: "";
    z-index: -1;
    border-radius: 50%;
    transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out
    }
.testimonial-slider-three.owl-carousel .owl-dots button:before {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    content: "";
    visibility: hidden;
    opacity: 0;
    border-radius: 50%;
    transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -webkit-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out
    }
.testimonial-slider-three.owl-carousel .owl-dots button.active:after, .testimonial-slider-three.owl-carousel .owl-dots button:hover:after {
    border: none
    }
.testimonial-slider-three.owl-carousel .owl-dots button.active:before, .testimonial-slider-three.owl-carousel .owl-dots button:hover:before {
    visibility: visible;
    opacity: 1
    }
.testimonial-slider-three.owl-carousel .owl-dots button span {
    display: none
    }
/*--- Video Tab Content  ---*/
.video-tab-wrapper {
    display: flex;
    justify-content: flex-start
    }
.video-tab-title {
    position: relative;
    display: block;
    border: none;
    min-width: 150px;
    text-align: center;
    margin: 120px 250px 0 0
    }
.video-tab-title li {
    list-style: none;
    display: block;
    margin: 0 0 6px
    }
.video-tab-title li a {
    display: inline-block;
    font-weight: 600;
    font-size: 18px;
    line-height: 48px;
    position: relative;
    color: #000;
    font-family: "Jost", sans-serif
    }
.video-tab-title li a:after {
    position: absolute;
    right: -24px;
    top: 0;
    bottom: 0;
    margin: auto;
    content: "";
    width: 3px;
    height: 0;
    background-image: linear-gradient(to top, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    transition: all 0.4s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out
    }
.video-tab-title li a.active:after, .video-tab-title li a:hover:after {
    height: 36px
    }
.video-tab-title li a.active, .video-tab-title li a:hover {
    transition: all 0.3s cubic-bezier(0, 0, 0.23, 1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de)
    }
.video-tab-content {
    position: relative
    }
.video-tab-content .popup-video {
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
    letter-spacing: -4px;
    border-radius: 50%;
    font-size: 20px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    display: inline-block;
    animation: waveBtn 2.5s infinite;
    background: linear-gradient(to left, #8025ff, #8b41f7, #9456ef, #9c68e7, #a379de);
    margin: 0 0 18px
    }
.video-tab-content h5 {
    font-size: 16px;
    line-height: 32px;
    color: #141414;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 15px
    }
.video-tab-content h2 {
    font-size: 70px;
    line-height: 60px;
    color: #141414;
    margin-bottom: 57px
    }
/*--- Team Section ---*/
.team-item-3 {
    position: relative;
    overflow: hidden;
    margin: 0 0 2px
    }
.team-item-3 img {
    width: 100%;
    height: auto
    }
.team-item-3:after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    visibility: hidden;
    opacity: 0;
    background: rgba(130, 42, 253, 0.9);
    width: 100%;
    height: 100%;
    content: "";
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.team-item-3:hover:after {
    visibility: visible;
    opacity: 1
    }
.team-item-3 .member-name {
    text-transform: uppercase;
    transform: translatey(20px);
    transform: translatey(20px);
    -moz-transform: translatey(20px);
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.team-item-3 .member-name:hover {
    color: #0f0f0f
    }
.team-item-3 p {
    font-family: "Roboto", sans-serif;
    transform: translatey(40px);
    transform: translatey(40px);
    -moz-transform: translatey(40px);
    transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out
    }
.team-item-3:hover .team-detils p {
    visibility: visible;
    opacity: 1;
    transform: translatey(0);
    transform: translatey(0);
    -moz-transform: translatey(0)
    }
.team-item-3:hover .team-detils .member-name {
    visibility: visible;
    opacity: 1;
    transform: translatey(0);
    transform: translatey(0);
    -moz-transform: translatey(0)
    }
.member-social {
    position: absolute;
    right: 31px;
    bottom: 15px;
    z-index: 3;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0)
    }
.member-social a {
    display: inline-block;
    color: #fff;
    font-size: 18px;
    line-height: 36px;
    margin: 0 2px
    }
.member-social a:hover {
    color: #0f0f0f
    }
.team-item-3:hover .member-social {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1)
    }
/*---- Pricing ----*/
.pricing-item-5 {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 37px 30px 0 45px;
    border-radius: 20px
    }
.pricing-item-5 .p-price {
    justify-content: flex-end;
    font-family: "Jost", sans-serif;
    font-size: 64px;
    color: #464646;
    line-height: 46px;
    letter-spacing: -1.2px;
    margin-bottom: 82px
    }
.pricing-item-5 .p-price .currency {
    font-size: 35px;
    top: 10px
    }
.pricing-item-5 .p-price sup {
    left: 5px;
    top: 4px
    }
.pricing-item-5 .p-price p {
    color: #464646;
    margin-left: -45px;
    margin-top: 19px
    }
.pricing-item-5 .p-sub {
    color: #0a0a0a;
    font-family: "Jost", sans-serif;
    margin-bottom: 12px
    }
.pricing-item-5 h3 {
    font-size: 35px;
    line-height: 40px;
    color: #0a0a0a;
    font-weight: 800;
    margin: 0 0 21px
    }
.pricing-item-5 ul {
    margin: 0;
    padding: 0
    }
.pricing-item-5 ul li {
    list-style: none;
    display: block;
    font-size: 22px;
    font-family: "Jost", sans-serif;
    line-height: 44px;
    color: #0a0a0a;
    font-weight: 500
    }
.pricing-item-5 ul li i {
    display: inline-block;
    font-size: 20px;
    color: #ee539b;
    margin-right: 14px
    }
.pricing-item-5 .shapro-btn-5 {
    height: 74px;
    font-weight: 800;
    padding: 31px 33px;
    margin: 36px 0 -44px
    }
.pricing-item-5 div.text-center {
    padding-right: 15px
    }
/*--- Blog ---*/
.blog-wrapper {
    margin-right: -70px;
    padding: 75px 0 0
    }
.blog-item-3 {
    position: relative;
    min-height: 117px;
    margin-bottom: 35px
    }
.blog-item-3 .bi-thumb {
    width: 170px;
    height: 117px;
    position: absolute;
    left: 0;
    top: 0
    }
.blog-item-3 .bi-thumb img {
    border-radius: 0
    }
.blog-item-3 .bi-details {
    padding: 10px 0 0 200px
    }
.blog-item-3 .bp-date {
    font-size: 14px;
    color: #9fa4af;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    margin: 0 0 7px
    }
.blog-item-3 .bp-date a {
    color: #9250ee
    }
.blog-item-3 .bi-details h5 {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    color: #000;
    margin: 0
    }
.blog-item-3 .bi-details h5 a:hover {
    color: #9250ee
    }
/*--- Footer ---*/
.footer-5 {
    position: relative;
    overflow: hidden;
    background: #101010;
    padding: 95px 0 0
    }
.footer-5 .about-widget-two h2 {
    font-size: 23px;
    line-height: 46px;
    color: #fff;
    font-weight: 600;
    margin: 24px 0 17px
    }
.footer-5 .widget {
    margin-bottom: 0;
    text-align: center
    }
.mc4wp-form-fields {
    position: relative
    }
.mc4wp-form-fields input[type="email"] {
    width: 100%;
    height: 60px;
    border: none;
    background: #141414;
    border-radius: 30px;
    outline: none;
    font-size: 17px;
    line-height: 60px;
    padding: 0 40px;
    color: #9fa4af;
    font-family: "Jost", sans-serif;
    font-weight: 300
    }
.mc4wp-form-fields input[type="email"]::-moz-placeholder {
    color: #9fa4af;
    opacity: 1
    }
.mc4wp-form-fields input[type="email"]::-ms-input-placeholder {
    color: #9fa4af;
    opacity: 1
    }
.mc4wp-form-fields input[type="email"]::-webkit-input-placeholder {
    color: #9fa4af;
    opacity: 1
    }
.mc4wp-form-fields button {
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
    background: transparent;
    position: absolute;
    right: 35px;
    top: 0;
    line-height: 60px;
    color: #6e45e2;
    font-size: 20px;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease
    }
.mc4wp-form-fields button:hover {
    color: #fff
    }
.footer-5 .mc4wp-form-fields {
    margin-bottom: 95px
    }
.footer-5 .widget .widget-title {
    font-size: 24px;
    line-height: 36px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 24px
    }
.footer-5 .contact-info p {
    font-size: 18px;
    line-height: 28px;
    color: #999;
    font-weight: 700;
    font-family: "Jost", sans-serif;
    margin: 0
    }
.footer-5 .about-widget {
    margin: 0 25px
    }
.footer-5 .about-widget p {
    font-size: 20px;
    line-height: 26px;
    font-weight: 300;
    color: #999;
    font-family: "Jost", sans-serif;
    margin-bottom: 26px
    }
.footer-5 .ab-social a {
    width: 50px;
    height: 50px;
    background: #000;
    line-height: 50px;
    color: #fff;
    font-size: 16px
    }
.footer-5 .ab-social a:hover {
    color: #a27bf9
    }
.gallery-snaps {
    position: relative;
    margin: -5px 20px 0
    }
.gallery-snaps a {
    position: relative;
    display: inline-block;
    width: 84px;
    height: 78px;
    margin-right: -2px;
    margin-bottom: 2px
    }
.gallery-snaps img {
    width: 100%;
    height: 100%;
    border-radius: 5px
    }
.footer-5 .copyright {
    border: none;
    padding: 90px 0 26px
    }
.footer-5 .copyright p {
    font-size: 16px;
    color: #999
    }
.footer-5 .copyright p a {
    color: #6e45e2
    }
.footer-shape {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
    }
.sf-right {
    position: absolute;
    right: 0;
    top: 0;
    animation: rotated 80s infinite linear
    }
/*------------------------------------------------------
/ 6. About Page
/------------------------------------------------------*/
/*--- Page Banner  ---*/
.page-banner {
    position: relative;
    padding: 387px 0 80px;
    min-height: 660px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
    }
.page-banner:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(0, 0, 0, 0.8)
    }
.page-banner .container {
    position: relative;
    z-index: 2
    }
.banner-title {
    font-size: 60px;
    line-height: 60px;
    color: #fff;
    letter-spacing: -1.2px;
    margin: 0 0 17px
    }
.breadcrumbs {
    margin: 0;
    font-size: 20px;
    display: inline-block;
    font-weight: 400;
    line-height: 24px;
    font-family: "Jost", sans-serif;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.breadcrumbs a {
    color: inherit
    }
/*--- Video Section  ---*/
.video-banner-2 {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 5px;
    min-height: 357px;
    -webkit-box-shadow: -9px 16px 81px 0 rgba(0, 0, 0, 0.23);
    -moz-box-shadow: -9px 16px 81px 0 rgba(0, 0, 0, 0.23);
    box-shadow: -9px 16px 81px 0 rgba(0, 0, 0, 0.23)
    }
.video-banner-2 .popup-video {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    color: #fff;
    line-height: 80px;
    text-align: center;
    display: inline-block;
    animation: waveBtn 2.5s infinite;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
/*---  Funfact ---*/
.funfact-item-2 {
    position: relative;
    padding-left: 90px
    }
.funfact-item-2 i {
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 50px;
    line-height: 50px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.funfact-item-2 h2 {
    font-size: 57px;
    line-height: 36px;
    color: #fdf4b4;
    letter-spacing: 0.28px;
    margin-bottom: 16px
    }
.funfact-item-2 p {
    font-size: 23px;
    line-height: 32px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 0
    }
.mf-btn input[type="submit"] {
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    border-radius: 30px;
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46)
    }
.mf-btn input[type="submit"]:hover {
    box-shadow: none
    }
/*--------------------------------------------------------
/ 7. Contact Page
/---------------------------------------------------------*/
.gmap-section {
    position: relative
    }
.shapro_map {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 560px;
    line-height: 0.8
    }
.icon-box-1 {
    position: relative;
    padding: 38px 20px 29px 80px;
    margin-bottom: 55px;
    background: #fff;
    border-radius: 7px;
    -webkit-box-shadow: 0 1px 13px 0 rgba(0, 1, 1, 0.1);
    -moz-box-shadow: 0 1px 13px 0 rgba(0, 1, 1, 0.1);
    box-shadow: 0 1px 13px 0 rgba(0, 1, 1, 0.1)
    }
.icon-box-1 i {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-size: 32px;
    background: #3749eb;
    line-height: 84px;
    position: absolute;
    left: -18px;
    top: -23px;
    -webkit-box-shadow: 0 1px 16px 0 rgba(53, 76, 236, 0.28);
    -moz-box-shadow: 0 1px 16px 0 rgba(53, 76, 236, 0.28);
    box-shadow: 0 1px 16px 0 rgba(53, 76, 236, 0.28)
    }
.icon-box-1 h5 {
    font-size: 24px;
    line-height: 30px;
    color: #000;
    margin: 0 0 7px
    }
.icon-box-1 p {
    font-size: 18px;
    line-height: 26px;
    font-family: "Jost", sans-serif;
    color: #9fa4af;
    margin: 0
    }
.contact-form-22 {
    position: relative;
    padding: 0 0
    }
.contact-form-22 input[type="text"], .contact-form-22 input[type="email"], .contact-form-22 input[type="url"], .contact-form-22 input[type="number"], .contact-form-22 textarea {
    width: 100%;
    height: 70px;
    background: transparent;
    border-radius: 30px;
    padding: 0 50px;
    border: 2px solid #000000;
    outline: none;
    font-size: 15px;
    font-family: "Jost", sans-serif;
    line-height: 70px;
    color: #222;
    margin: 0 0 20px
    }
.contact-form-22 textarea {
    height: 250px;
    resize: none;
    padding-top: 13px;
    line-height: 28px;
    margin-bottom: 30px
    }
.contact-form-22 input[type="text"]::-moz-placeholder, .contact-form-22 input[type="email"]::-moz-placeholder, .contact-form-22 input[type="url"]::-moz-placeholder, .contact-form-22 input[type="number"]::-moz-placeholder, .contact-form-22 textarea::-moz-placeholder {
    color: #222;
    opacity: 1
    }
.contact-form-22 input[type="text"]::-ms-input-placeholder, .contact-form-22 input[type="email"]::-ms-input-placeholder, .contact-form-22 input[type="url"]::-ms-input-placeholder, .contact-form-22 input[type="number"]::-ms-input-placeholder, .contact-form-22 textarea::-ms-input-placeholder {
    color: #222;
    opacity: 1
    }
.contact-form-22 input[type="text"]::-webkit-input-placeholder, .contact-form-22 input[type="email"]::-webkit-input-placeholder, .contact-form-22 input[type="url"]::-webkit-input-placeholder, .contact-form-22 input[type="number"]::-webkit-input-placeholder, .contact-form-22 textarea::-webkit-input-placeholder {
    color: #222;
    opacity: 1
    }
.contact-form-22 input[type="submit"] {
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    height: 66px;
    font-family: "Jost", sans-serif;
    border-radius: 50px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    line-height: 66px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0 44px;
    border: none;
    outline: none;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.contact-form-22 input[type="submit"]:hover {
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46)
    }
.contact-form-22 input.reqError, .contact-form-22 .reqError {
    border-color: #f00
    }
.shapro_loader {
    display: inline-block;
    width: 16px;
    height: 16px;
    text-align: center;
    display: none
    }
.shapro_con_message {
    color: #fff;
    font-size: 15px;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    padding: 10px 15px;
    margin-top: 30px;
    display: none
    }
/*------------------------------------------------------
/ 8. Portfolio Page
/------------------------------------------------------*/
.folio-section {
    position: relative;
    padding: 90px 0 100px
    }
.folio-section .sec-title {
    font-size: 70px;
    line-height: 60px;
    color: #0f0f0f;
    font-weight: 800;
    margin-bottom: 5px
    }
.folio-section .sec-desc {
    font-size: 16px;
    color: #8b8b8b;
    letter-spacing: 0.08px;
    margin-bottom: 21px
    }
.shaf-filter {
    position: relative;
    margin: 0 0 30px;
    padding: 0;
    text-align: center
    }
.shaf-filter li {
    list-style: none;
    display: inline-block;
    font-size: 20px;
    line-height: 32px;
    color: #1f1f1f;
    letter-spacing: 1px;
    font-family: "Jost", sans-serif;
    text-transform: capitalize;
    font-weight: 700;
    cursor: pointer;
    margin: 0 80px 0 0;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.shaf-filter li:last-child {
    margin-right: 0
    }
.shaf-filter li.active, .shaf-filter li:hover {
    color: #364aeb
    }
.folio-item-2 {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.folio-item-2 img {
    width: 100%;
    height: auto;
    border-radius: 3px
    }
.folio-item-2:after {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    opacity: 0;
    width: 100%;
    border-radius: 3px;
    height: 100%;
    content: "";
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out
    }
.folio-item-2:hover:after {
    visibility: visible;
    opacity: 0.77
    }
.fi-details {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    text-align: center;
    display: inline-block;
    top: 50%;
    transform: translatey(-50%);
    z-index: 4;
    padding: 0 15px
    }
.fi-details .read-more, .fi-details .popup-image {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #fff;
    color: #2a2a2a;
    font-size: 19px;
    line-height: 52px;
    text-align: center;
    border-radius: 50%;
    margin: 0 2px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out
    }
.fi-details .read-more {
    transform: translatex(-40px);
    transform: translatex(-40px);
    -moz-transform: translatex(-40px)
    }
.folio-item-2:hover .fi-details .read-more {
    visibility: visible;
    opacity: 1;
    transform: translatex(0);
    transform: translatex(0);
    -moz-transform: translatex(0)
    }
.fi-details .popup-image {
    transform: translatex(40px);
    transform: translatex(40px);
    -moz-transform: translatex(40px)
    }
.folio-item-2:hover .fi-details .popup-image {
    visibility: visible;
    opacity: 1;
    transform: translatex(0);
    transform: translatex(0);
    -moz-transform: translatex(0)
    }
.fi-details .read-more:hover, .fi-details .popup-image:hover {
    color: #364aeb
    }
.fi-details h5 {
    font-size: 30px;
    margin: 15px 0 0;
    color: #fff;
    line-height: 32px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8)
    }
.fi-details h5 a {
    color: inherit
    }
.fi-details h5 a:hover {
    color: #1f1f1f
    }
.folio-item-2:hover .fi-details h5 {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1)
    }
.folio-section .container-fluid {
    padding-left: 50px;
    padding-right: 50px
    }
.folio-more {
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 32px;
    color: #7d7d7d;
    font-weight: 800;
    font-family: "Jost", sans-serif;
    letter-spacing: 0.56px;
    text-transform: uppercase
    }
.folio-more:hover {
    color: inherit
    }
.folio-more:after {
    position: absolute;
    left: 0;
    bottom: 7px;
    width: 100%;
    height: 1px;
    content: "";
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0s;
    background: #a5a5a5
    }
.folio-more:hover:after {
    width: 0%;
    left: auto;
    right: 0
    }
.folio-more:before {
    position: absolute;
    width: 1px;
    height: 30px;
    background: #000;
    content: "";
    left: 0;
    right: 0;
    top: -30px;
    margin: auto;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite
    }
/*------------------------------------------------------
/ 9. Portfolio Details Page
/------------------------------------------------------*/
.foliodetails-section {
    position: relative;
    padding: 120px 0
    }
.folio-thumb {
    position: relative
    }
.folio-thumb img {
    width: 100%;
    height: auto;
    margin-bottom: 30px
    }
.detils-folio {
    position: relative;
    padding: 16px 0 0 20px
    }
.detils-folio > span {
    display: block;
    font-family: "Jost", sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: #8799a3;
    margin: 0 0 5px
    }
.detils-folio h3 {
    font-size: 40px;
    line-height: 42px;
    color: #252525;
    font-weight: 900;
    margin-bottom: 23px
    }
.detils-folio h3 span {
    display: block
    }
.folio-social {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px
    }
.folio-social h5 {
    font-size: 14px;
    line-height: 36px;
    color: #252525;
    text-transform: uppercase;
    margin: 0
    }
.folio-social a {
    display: inline-block;
    font-size: 16px;
    color: #bbc7cd;
    line-height: 36px;
    margin-left: 20px
    }
.folio-social a:hover {
    color: #8799a3
    }
.detils-folio > p {
    color: #636363;
    margin-bottom: 48px
    }
.meta-item {
    display: block;
    margin: 0 0 21px;
    font-family: "Jost", sans-serif
    }
.meta-item h5 {
    display: block;
    font-size: 20px;
    line-height: 30px;
    color: #8a8a8a;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 1px
    }
.meta-item p {
    font-size: 17px;
    color: #0b0b0b;
    letter-spacing: 0.1px;
    margin: 0
    }
.meta-item p a {
    color: inherit
    }
.detils-folio .shapro-btn-1 {
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.05px;
    margin-top: 24px
    }
.full-width {
    padding-top: 35px
    }
.full-width .detils-folio {
    padding: 0
    }
.full-width .col-lg-4 {
    -ms-flex: 0 0 37.333333%;
    flex: 0 0 37.333333%;
    max-width: 37.333333%
    }
.full-width .col-lg-3 {
    -ms-flex: 0 0 21%;
    flex: 0 0 21%;
    max-width: 21%
    }
.full-width p {
    color: #636363;
    margin-bottom: 0
    }
.full-width .meta-item p {
    color: #0b0b0b
    }
.full-width-2 {
    position: relative;
    padding-top: 43px
    }
.full-width-2 p {
    color: #636363;
    margin-bottom: 37px
    }
.full-width-2 .meta-item p {
    color: #0b0b0b;
    margin: 0
    }
.full-width-2 .shapro-btn-1 {
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.05px
    }
.full-width-2 .detils-folio {
    padding: 0 50px;
    text-align: center
    }
.full-width-2 .detils-folio h3 {
    font-size: 60px;
    line-height: 53px;
    font-weight: 800
    }
.folio-video {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-height: 710px;
    margin: 30px 0 90px
    }
.folio-video:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: rgba(26, 26, 26, 0.18)
    }
.folio-video .popup-video {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    color: #fff;
    line-height: 100px;
    text-align: center;
    display: inline-block;
    animation: waveBtn 2.5s infinite;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
/*------------------------------------------------------
/ 10. Service Page
/------------------------------------------------------*/
.servicepage-section {
    position: relative;
    padding: 120px 0
    }
.servicepage-section .sub-title {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 500
    }
.servicepage-section .sec-title {
    margin-bottom: 72px
    }
.ser-shape-1 {
    position: absolute;
    left: 18%;
    top: 17%;
    animation: rotated 90s infinite linear
    }
.ser-shape-2 {
    position: absolute;
    right: 19%;
    bottom: 17%;
    animation: rotated 90s infinite linear
    }
.servicepage-section .shapro-btn-1 {
    margin-top: 30px;
    height: 58px;
    font-weight: 600;
    font-family: "Jost", sans-serif;
    padding: 23px 42px
    }
.ser-review-section {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding: 115px 0 185px
    }
.review-tab-content .shapro-btn-1 {
    height: 50px;
    font-size: 14px;
    padding: 19px 42px
    }
.pad-b-60 {
    padding-bottom: 60px
    }
/*------------------------------------------------------
/ 11. Service Details Page
/------------------------------------------------------*/
.servicedetails-section {
    position: relative;
    padding: 80px 0 120px
    }
.ser-cate {
    font-size: 12px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    line-height: 30px;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 2.4px;
    font-family: "Jost", sans-serif;
    text-shadow: 1px 0 54px rgba(47, 84, 238, 0.46);
    margin: 0 0 2px
    }
.ser-title {
    font-size: 40px;
    line-height: 50px;
    color: #2e2e2e;
    font-weight: 800;
    margin: 0
    }
.servicedetails-section p {
    font-size: 17px;
    line-height: 28px;
    color: #838383;
    margin: 0
    }
.client-section {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 89px 0 110px
    }
.client-section .sub-title {
    text-shadow: none;
    color: #040404;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    -webkit-text-fill-color: inherit;
    background: transparent
    }
.client-section .sec-title {
    font-size: 40px;
    line-height: 45px;
    letter-spacing: 0;
    color: #040404;
    margin-bottom: 41px
    }
.client-section p {
    font-size: 17px;
    line-height: 28px;
    color: #292929;
    margin-bottom: 55px
    }
.client-section .shapro-btn-1 {
    height: 58px;
    font-weight: 600;
    font-family: "Jost", sans-serif;
    padding: 23px 42px
    }
.graph {
    position: relative
    }
.graph img {
    width: 100%;
    height: auto;
    border-radius: 30px;
    -webkit-box-shadow: -12px 21px 30px 0 rgba(0, 0, 0, 0.41);
    -moz-box-shadow: -12px 21px 30px 0 rgba(0, 0, 0, 0.41);
    box-shadow: -12px 21px 30px 0 rgba(0, 0, 0, 0.41)
    }
.graph-date {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    background-image: linear-gradient(to right, #79ccff, #61bcff, #61a9ff, #7991ff, #9b74ff);
    height: 40px;
    width: 295px;
    border-radius: 30px 0 0 0;
    padding-left: 35px;
    font-family: "Jost", sans-serif;
    font-size: 12px;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 40px
    }
.service-feature-section {
    position: relative;
    display: flex;
    justify-content: space-around;
    margin-bottom: 100px
    }
.ser-f-item {
    position: relative;
    width: 100%;
    overflow: hidden
    }
.ser-f-item:after {
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    opacity: 0.55;
    width: 100%;
    height: 100%;
    content: "";
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.midd-overlay:after {
    background: rgba(16, 16, 16, 0.55)
    }
.ser-f-item img {
    width: 100%;
    height: auto;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.ser-f-item:hover img {
    -webkit-transform: scale(1.02) rotate(1deg);
    -moz-transform: scale(1.02) rotate(1deg);
    -ms-transform: scale(1.02) rotate(1deg);
    -o-transform: scale(1.02) rotate(1deg);
    transform: scale(1.02) rotate(1deg)
    }
.sf-detail {
    left: 0;
    margin: auto;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    z-index: 3;
    text-align: left;
    padding-left: 120px;
    padding-right: 50px
    }
.sf-detail h3 {
    font-size: 32px;
    line-height: 28px;
    color: #fff;
    font-weight: 800;
    margin-bottom: 20px
    }
.sf-detail p {
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    margin-bottom: 30px
    }
.sf-detail .shapro-btn-1 {
    box-shadow: none;
    height: 58px;
    font-weight: 600;
    font-family: "Jost", sans-serif;
    padding: 23px 42px
    }
.sf-detail ul {
    margin: 0 0 0 -20px;
    padding: 0
    }
.sf-detail ul li {
    list-style: none;
    display: block;
    position: relative;
    font-family: "Jost", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #fff;
    margin: 24px 0
    }
.sf-detail ul li i {
    margin-right: 20px;
    position: relative;
    top: 4px;
    font-size: 33px;
    line-height: 33px;
    display: inline-block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
/*------------------------------------------------------
/ 12. Shop Page
/------------------------------------------------------*/
.shop-page {
    position: relative;
    padding: 120px 0 150px
    }
.shop-page .sub-title {
    text-shadow: none;
    color: #2ed279;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    -webkit-text-fill-color: inherit;
    background: transparent
    }
.shop-filter {
    margin: -23px 0 7px
    }
.shop-filter li {
    font-size: 15px;
    font-weight: 700;
    font-family: "Jost", sans-serif;
    color: #3e3e3e;
    line-height: 25px;
    text-transform: uppercase;
    margin-right: 55px;
    letter-spacing: 0
    }
.shop-filter li.active, .shop-filter li:hover {
    color: #e00
    }
.shop-page .shafull-container {
    overflow: visible !important
    }
.product-item {
    position: relative;
    margin-top: 40px
    }
.product-item img {
    width: 100%;
    height: auto;
    -webkit-box-shadow: -2px 4px 40px 0 rgba(0, 0, 0, 0.13);
    -moz-box-shadow: -2px 4px 40px 0 rgba(0, 0, 0, 0.13);
    box-shadow: -2px 4px 40px 0 rgba(0, 0, 0, 0.13)
    }
.product_price {
    font-size: 30px;
    line-height: 18px;
    color: #e00;
    font-weight: 700;
    font-family: "Jost", sans-serif;
    letter-spacing: -0.3px;
    margin: 0
    }
.product_price .price {
    display: inline-block;
    color: inherit
    }
.product_price .price ins {
    text-decoration: none;
    display: block
    }
.product_price .price del {
    font-size: 18px;
    color: #383838;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: -0.18px;
    text-decoration: line-through;
    display: block;
    margin: 0 0 14px
    }
.product-item .product_price {
    position: absolute;
    left: 50px;
    top: 50px
    }
.products-details {
    position: absolute;
    left: 50px;
    bottom: 37px;
    padding-right: 20px
    }
.products-details h3 {
    font-size: 35px;
    line-height: 36px;
    color: #101010;
    margin-bottom: 20px
    }
.products-details h3 a {
    color: inherit
    }
.products-details h3 a:hover {
    color: #e00
    }
.products-details p {
    font-size: 18px;
    line-height: 0.8px;
    color: #101010;
    font-family: "Jost", sans-serif;
    letter-spacing: 0.09px;
    margin-bottom: 0
    }
.products-details p a {
    color: inherit
    }
.products-details p a:hover {
    color: #e00
    }
.col-md-4 .product-item .product_price {
    left: 35px;
    top: 32px
    }
/*------------------------------------------------------
/ 13. Product Details
/------------------------------------------------------*/
.sinlge-product-sec {
    position: relative;
    padding: 120px 0
    }
.productSlide {
    position: relative;
    padding-left: 150px;
    margin-right: 24px
    }
.productSlide .carousel-indicators {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    z-index: 2;
    margin: 0 0 0 0;
    text-align: left;
    display: block
    }
.productSlide .carousel-indicators li {
    width: 97px;
    height: 97px;
    border-radius: 0;
    margin: 0;
    position: relative;
    text-indent: 0;
    flex: none;
    -moz-flex: none;
    -webkit-flex: none;
    float: none;
    display: block;
    margin: 0 0 24px 0;
    border: 1px solid #eaeaeb;
    opacity: 1;
    background: #f4f6f7;
    font-size: 30px;
    line-height: 97px;
    color: #ee3364;
    text-align: center;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out
    }
.productSlide .carousel-indicators li.active, .productSlide .carousel-indicators li:hover {
    -webkit-box-shadow: 0 5px 30px 0 rgba(3, 4, 4, 0.1);
    -moz-box-shadow: 0 5px 30px 0 rgba(3, 4, 4, 0.1);
    box-shadow: 0 5px 30px 0 rgba(3, 4, 4, 0.1)
    }
.ps_img {
    position: relative;
    z-index: 3
    }
.ps_img img {
    width: 100%;
    height: auto
    }
.ps_img .popup-video {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    line-height: 73px;
    background: #fff;
    color: #ee3364;
    font-size: 73px;
    text-align: center;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto
    }
.ps_img .popup-video i {
    position: relative;
    top: -1px;
    left: -1px
    }
.sale {
    height: 20px;
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    line-height: 20px;
    color: #fff;
    font-family: "Jost", sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    text-align: center;
    padding: 0 8px;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 3;
    display: inline-block
    }
.product-desc {
    position: relative
    }
.pd-price {
    display: flex;
    justify-content: space-around;
    border: 1px solid #e6e6e6;
    padding: 33px 35px 26px;
    margin: 0 0 24px
    }
.pd-price h5 {
    font-size: 20px;
    line-height: 15px;
    color: #222;
    margin-bottom: 0
    }
.pd-price .product_price {
    letter-spacing: 0
    }
.pd-price .product_price .woocommerce-Price-currencySymbol {
    font-size: 20px;
    font-size: 20px;
    position: relative;
    top: -8px
    }
.product-desc .p-cate {
    display: inline-block;
    font-size: 14px;
    line-height: 0.8;
    color: #7b7d7f;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Jost", sans-serif;
    letter-spacing: 1.4px;
    margin-bottom: 5px
    }
.product-desc h3 {
    font-size: 30px;
    line-height: 36px;
    color: #1c1f23;
    margin: 0 0 22px
    }
.product-desc ul {
    margin: 0 0 11px;
    padding: 0
    }
.product-desc ul li {
    list-style: none;
    display: block;
    font-size: 16px;
    color: #000;
    line-height: 36px;
    font-family: "Jost", sans-serif;
    margin: 0
    }
.product-desc ul li span {
    font-weight: 700
    }
.product-desc > p {
    font-size: 16px;
    line-height: 24px;
    color: #7b7d7f;
    margin-bottom: 19px
    }
.quantityd {
    height: 50px;
    position: relative;
    z-index: 1;
    width: 110px
    }
.quantityd input[type="text"] {
    border: medium none;
    color: #1c1f23;
    font-weight: 600;
    height: 100%;
    font-size: 16px;
    line-height: 50px;
    width: 30%;
    background: transparent;
    left: 0;
    margin: auto;
    outline: none;
    padding: 0;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: -1
    }
.quantityd button.qtyBtn {
    background: transparent;
    height: 100%;
    width: 24%;
    padding: 0;
    position: absolute;
    font-size: 16px;
    border: none;
    outline: none;
    color: #a8aaab;
    letter-spacing: 0;
    font-weight: 600;
    padding: 0;
    text-align: center;
    top: 0;
    left: 0;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms
    }
.quantityd button.qtyBtn.btnPlus {
    left: auto;
    right: 0
    }
.quantityd button.qtyBtn:hover {
    color: #ee3364
    }
.product-desc .quantityd {
    margin: 0 0 26px
    }
.add-to-cart {
    display: inline-block;
    height: 65px;
    font-size: 15px;
    line-height: 0.8;
    color: #fff;
    position: relative;
    z-index: 1;
    font-family: "Jost", sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 50px;
    padding: 26px 50px;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    overflow: hidden;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms
    }
.add-to-cart:hover {
    color: #fff;
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46)
    }
.product-meta {
    position: relative;
    margin: 64px 0 0
    }
.product-meta a {
    display: inline-block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 19px;
    margin-right: 6px;
    background: #f4f6f7
    }
.product-meta a i {
    display: block;
    line-height: 50px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.product-meta a:hover {
    -webkit-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    -moz-box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46);
    box-shadow: 0 1px 54px 0 rgba(47, 84, 238, 0.46)
    }
.shop-ab-1 {
    position: relative;
    background: #f8f8f8;
    padding: 30px 0
    }
.shop-ab-1 .sub-title {
    margin-top: 45px
    }
.shop-ab-2 {
    position: relative;
    padding: 75px 0 150px
    }
.s-ab-1 {
    position: relative;
    margin-left: -100px
    }
.s-ab-1 img {
    width: 100%;
    height: auto
    }
.shop-ab-1 .sec-desc {
    font-size: 22px;
    line-height: 32px;
    color: #1c1f23;
    margin: -18px 0 36px
    }
.shop-ab-1 .sec-title, .shop-ab-2 .sec-title {
    font-size: 48px;
    line-height: 56px
    }
.shop-ab-2 .sub-title {
    margin-top: 108px
    }
.shop-ab-2 .listing-item {
    margin: -11px 0 2px
    }
.shop-ab-2 .listing-item li {
    font-size: 20px;
    line-height: 28px;
    color: #222;
    font-weight: 500;
    padding-left: 35px;
    margin-bottom: 12px
    }
.shop-ab-2 .listing-item li i {
    width: 20px;
    height: 20px;
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    border-radius: 50%;
    font-size: 16px;
    line-height: 18px;
    letter-spacing: -8px;
    color: #ff5f63;
    top: 3px
    }
.shop-ab-1 .shapro-btn-1, .shop-ab-2 .shapro-btn-1 {
    box-shadow: none;
    font-size: 15px;
    font-weight: 600;
    font-family: "Jost", sans-serif
    }
.s-ab-2 {
    position: relative
    }
/*------------------------------------------------------
/ 14. Blog Page
/------------------------------------------------------*/
.blogpage-section {
    position: relative;
    padding: 120px 0
    }
.blog-item-4 {
    position: relative;
    margin: 0 0 60px
    }
.blog-item-4 .bi-thumb img {
    border-radius: 0
    }
.blog-item-4 .bi-details {
    padding-top: 27px
    }
.blog-item-4 .bi-details h3 {
    font-size: 34px;
    line-height: 41px;
    letter-spacing: 0;
    margin-bottom: 12px
    }
.blog-item-4 .bi-details p {
    font-size: 20px;
    font-family: "Jost", sans-serif;
    line-height: 26px;
    color: #5c5c5c;
    letter-spacing: 0.1px;
    margin: 0 0 25px
    }
.rd-more:after {
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    transform-origin: 0 100% 0;
    transition: transform 0.4s ease 0s, opacity 0.4s ease 0s, background-color 0.4s ease 0s;
    width: 150%;
    z-index: -1;
    border-radius: 50px;
    -webkit-transition: 0.4s;
    transition: 0.4s
    }
.rd-more:hover:after {
    opacity: 1;
    transform: rotate3d(0, 0, 1, 0deg);
    transition-timing-function: cubic-bezier(0.3, 1, 0.3, 1)
    }
.rd-more:hover {
    color: #fff
    }
.bi-thumb-4 {
    position: relative
    }
.bi-thumb-4 img {
    width: 100%;
    height: auto
    }
.bi-thumb-4 p {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    position: absolute;
    left: 29px;
    bottom: 6px;
    height: 43px;
    color: #fff;
    font-family: "Jost", sans-serif;
    line-height: 44px;
    padding: 0 20px;
    border-radius: 30px;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc)
    }
.bi-thumb-4 a {
    color: inherit;
    position: relative;
    padding: 0 8px
    }
.bi-thumb-4 a i {
    margin-right: 5px
    }
.shapro-pagination {
    position: relative
    }
.shapro-pagination a, .shapro-pagination span {
    width: 44px;
    height: 44px;
    background: transparent;
    font-size: 20px;
    color: #252525;
    position: relative;
    border-radius: 50%;
    font-family: "Jost", sans-serif;
    text-align: center;
    line-height: 0.8;
    text-align: center;
    display: inline-block;
    font-weight: 700;
    z-index: 1;
    padding: 14px 0;
    margin: 0 0;
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms
    }
.shapro-pagination a:after, .shapro-pagination span:after {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    border-radius: 50%;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transition: all ease 300ms;
    -moz-transition: all ease 300ms;
    -webkit-transition: all ease 300ms;
    -ms-transition: all ease 300ms;
    -o-transition: all ease 300ms;
    z-index: -1
    }
.shapro-pagination a:hover:after, .shapro-pagination span.current:after {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1)
    }
.shapro-pagination a:hover, .shapro-pagination span.current {
    color: #fff
    }
/*------------------------------------------------------
/ 15. Blog Details Page
/------------------------------------------------------*/
.single-blog-section {
    position: relative;
    padding: 120px 0
    }
.single-post-area {
    position: relative
    }
.sbi-thumb {
    position: relative
    }
.sbi-thumb img {
    max-width: 100%;
    height: auto;
    width: auto;
    border-radius: 0
    }
.sbi-thumb p {
    padding: 0 38px;
    border-radius: 30px;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    font-family: "Jost", sans-serif;
    text-align: center;
    margin: 0;
    color: #fff;
    letter-spacing: 0.97px;
    display: inline-block;
    position: absolute;
    left: 14px;
    bottom: 14px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    height: 43px;
    line-height: 44px;
    padding: 0 19px
    }
.sbi-thumb p a {
    color: inherit;
    position: relative;
    padding-left: 22px
    }
.sbi-thumb p a:after {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 2px;
    width: 5px;
    background: #fff;
    content: ""
    }
.sbi-thumb p a i {
    font-weight: 400;
    margin-right: 7px;
    display: inline-block;
    font-size: 12px
    }
.meta-content {
    position: relative;
    padding: 36px 0 45px
    }
.meta-content h3 {
    font-size: 32px;
    line-height: 38px;
    color: #252525;
    margin: 0 0 8px
    }
.meta-content p {
    display: inline-block;
    margin: 0;
    font-size: 17px;
    color: #c4d2d9;
    font-family: "Jost", sans-serif
    }
.meta-content p a {
    color: inherit;
    color: #8799a3
    }
.meta-content p a:hover {
    color: #0081ff
    }
.meta-content p span {
    margin-left: 20px
    }
.single-post-area > p {
    color: #636363;
    font-family: "Jost", sans-serif;
    margin: 0 0 27px
    }
.single-post-area > p a {
    color: #8799a3
    }
.single-post-area > p a:hover {
    color: #0081ff
    }
.single-post-area > p:first-of-type {
    font-weight: 700;
    color: #252525
    }
blockquote:after {
    position: absolute;
    left: 45px;
    top: 0;
    background: url(../images/single-blog/quote.webp) no-repeat top left;
    content: "";
    width: 113px;
    height: 75px
    }
blockquote p {
    font-weight: 400;
    color: #252525;
    font-size: 24px;
    line-height: 30px;
    font-style: italic;
    margin: 0 0 19px
    }
blockquote cite {
    font-weight: 700;
    font-size: 25px;
    line-height: 28px;
    font-style: normal;
    display: block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    margin: 0 0 7px
    }
blockquote span {
    display: block;
    font-size: 16px;
    line-height: 0.8;
    color: #8799a3;
    font-weight: 700;
    margin: 0
    }
.gall-thumb {
    position: relative;
    margin: 0 0 30px
    }
.gall-thumb img {
    width: 100%;
    height: auto;
    border-radius: 10px
    }
.gall-thumb span {
    width: calc(100% - 40px);
    background: #000;
    height: 30px;
    border-radius: 30px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    color: #959595;
    font-family: "Jost", sans-serif;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    margin: auto
    }
.gall-thumb span a {
    color: #0081ff
    }
.gall-thumb span a:hover {
    color: #959595
    }
.mg-gall {
    margin-top: 55px;
    margin-bottom: 25px
    }
.divider {
    position: relative;
    border-top: 2px solid #f0f4f7;
    margin: 44px 0 52px
    }
.tags {
    color: #8799a3;
    font-size: 16px;
    line-height: 28px;
    display: flex;
    justify-content: flex-start;
    font-family: "Jost", sans-serif;
    margin: 0 0 12px
    }
.tags h6 {
    font-weight: 800;
    font-size: 15px;
    line-height: 28px;
    color: #252525;
    text-transform: uppercase;
    margin: 0 50px 0 0
    }
.tags a {
    color: inherit;
    display: inline-block
    }
.tags a:hover {
    color: #0081ff
    }
.social-share {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 47px
    }
.social-share h6 {
    font-weight: 800;
    font-size: 15px;
    line-height: 28px;
    color: #252525;
    text-transform: uppercase;
    margin: 0 40px 0 0
    }
.social-share a {
    width: 36px;
    height: 36px;
    color: #fff;
    line-height: 38px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    background: #34465d;
    display: inline-block;
    margin-right: 10px
    }
.social-share a.vim {
    background: #34465d
    }
.social-share a.fac {
    background: #3b5998
    }
.social-share a.twi {
    background: #55acee
    }
.social-share a.goo {
    background: #dd4b39
    }
.social-share a:hover {
    background: #0081ff
    }
.post-author {
    position: relative;
    background: #f3f3f3;
    border-radius: 10px;
    padding: 63px 30px 70px 215px
    }
.post-author img {
    width: 155px;
    height: 155px;
    position: absolute;
    left: 35px;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%
    }
.post-author h5 {
    font-weight: 700;
    font-size: 22px;
    line-height: 26px;
    font-style: normal;
    display: block;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    margin: 0 0 9px
    }
.post-author p {
    font-size: 17px;
    line-height: 26px;
    color: #636363;
    font-family: "Jost", sans-serif;
    margin: 0
    }
.comment-form {
    position: relative;
    margin: 93px 0 0
    }
.comment-form h4 {
    font-size: 35px;
    line-height: 38px;
    color: #252525;
    font-weight: 900;
    margin: 0 0 40px
    }
.comment-form input[type="email"], .comment-form input[type="url"], .comment-form input[type="text"], .comment-form textarea {
    width: 100%;
    height: 60px;
    border: none;
    background: #f3f4f6;
    outline: none;
    font-size: 16px;
    font-family: "Jost", sans-serif;
    line-height: 60px;
    text-transform: capitalize;
    color: #8799a3;
    font-weight: 400;
    padding: 0 30px;
    margin: 0 0 20px
    }
.comment-form textarea {
    height: 160px;
    resize: none;
    padding-top: 15px;
    line-height: 30px;
    margin-bottom: 35px
    }
.comment-form input[type="email"]::-moz-placeholder, .comment-form input[type="url"]::-moz-placeholder, .comment-form input[type="text"]::-moz-placeholder, .comment-form textarea::-moz-placeholder {
    color: #8799a3;
    opacity: 1
    }
.comment-form input[type="email"]::-ms-input-placeholder, .comment-form input[type="url"]::-ms-input-placeholder, .comment-form input[type="text"]::-ms-input-placeholder, .comment-form textarea::-ms-input-placeholder {
    color: #8799a3;
    opacity: 1
    }
.comment-form input[type="email"]::-webkit-input-placeholder, .comment-form input[type="url"]::-webkit-input-placeholder, .comment-form input[type="text"]::-webkit-input-placeholder, .comment-form textarea::-webkit-input-placeholder {
    color: #8799a3;
    opacity: 1
    }
.comment-form button {
    border: none;
    outline: none;
    height: 55px;
    font-family: "Jost", sans-serif;
    font-weight: 600;
    padding: 0 68px;
    line-height: 55px;
    box-shadow: none
    }
.blog-sidebar {
    position: relative
    }
.blog-sidebar .widget {
    background: #f9f9f9;
    padding: 38px 35px 20px;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
    margin: 0 0 30px
    }
.blog-sidebar .widget .widget-title {
    position: relative;
    font-size: 24px;
    line-height: 34px;
    color: #252525;
    text-transform: uppercase;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 20px;
    margin: 0 0 20px
    }
.blog-sidebar .widget ul {
    margin: 0;
    padding: 0
    }
.blog-sidebar .widget ul li {
    list-style: none;
    display: block;
    font-size: 20px;
    line-height: 26px;
    position: relative;
    color: #8799a3;
    font-family: "Jost", sans-serif;
    padding-left: 20px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 8px;
    margin-bottom: 15px;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms
    }
.blog-sidebar .widget ul li a {
    color: inherit;
    position: relative
    }
.blog-sidebar .widget ul li:after {
    position: absolute;
    left: 3px;
    top: 0;
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    line-height: 26px;
    color: #8799a3;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms
    }
.blog-sidebar .widget ul li:hover {
    padding-left: 25px
    }
.blog-sidebar .widget ul li:hover:after {
    color: #0081ff
    }
.blog-sidebar .widget ul li:hover a {
    color: #0081ff
    }
.blog-sidebar .widget ul li:last-child {
    border-bottom: none
    }
.tagcloud {
    position: relative;
    margin: 35px 0 15px
    }
.tagcloud a {
    font-size: 16px !important;
    color: #8799a3;
    font-weight: 500;
    text-transform: capitalize;
    height: 35px;
    border: 2px solid #f0f4f7;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    z-index: 2;
    font-family: "Jost", sans-serif;
    background: transparent;
    line-height: 31px;
    padding: 0 14px;
    margin: 0 6px 10px 0;
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms
    }
.tagcloud a:after {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(to left, #0985f9, #0b72f8, #2f5cf3, #4d40ea, #6809dc);
    border-radius: 50px;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transition: all ease 400ms;
    -webkit-transition: all ease 400ms;
    -moz-transition: all ease 400ms;
    z-index: -1
    }
.tagcloud a:hover:after {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1)
    }
.tagcloud a:hover {
    border-color: transparent;
    color: #fff
    }
.lt-news img {
    position: absolute;
    left: 0;
    top: 0;
    width: 95px;
    height: 80px
    }
.lt-news span {
    display: block;
    font-size: 14px;
    line-height: 30px;
    color: #bbc7cd;
    font-weight: 600;
    font-family: "Jost", sans-serif;
    margin: 0 0 2px
    }
.lt-news span i {
    display: inline-block;
    color: #d2d2d2;
    margin-right: 8px
    }
.lt-news h5 a {
    color: inherit
    }
.lt-news h5 a:hover {
    color: #0081ff
    }
.lt-news .author {
    text-transform: capitalize;
    display: block;
    font-size: 14px;
    line-height: 0.8;
    color: #0081ff;
    font-family: "Jost", sans-serif;
    font-weight: 600
    }
.lt-news .author:hover {
    color: #252525
    }
.latest-news-widget .shapro-btn-1 {
    border: none;
    outline: none;
    height: 40px;
    font-family: "Jost", sans-serif;
    font-weight: 600;
    padding: 0 30px;
    font-size: 12px;
    line-height: 40px;
    box-shadow: none;
    margin: 40px 0 0
    }