body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Fira Sans';
}


::selection {
    background-color: var(--primary-color);
    color: var(--white-fix);
}

a {
    color: var(--primary-color);
    text-decoration: underline;
}

a:hover,
a:focus-within,
a:focus {
    color: var(--primary-color);
    text-decoration: dotted underline;
}

a:focus,button:focus-visible,.btn:focus,button:focus-within,.btn-close:focus {
    outline: 1px dotted;
    text-decoration: none;
    outline-offset: -3px;
}
.widget.widget-contact:focus{
    outline: 1px dotted var(--primary-color);;
    text-decoration: none;
    outline-offset: -3px;
}
.screen-reader-text {
	display: initial !important;
}


/* main-btn */
a.main-btn,
.main-btn {
    text-decoration: none;
    display: inline-block;
    padding: 10px 15px;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: 0.65s;

}

/* This media query for layout resize with boxed layout */

@media(min-width: 1200px) {

body.boxed {
    width: 1170px;
    -webkit-box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
    box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
    margin: 0 auto;
    position: relative;
    background: url(../../../assets/images/bg-pattern/pattern-1.png) repeat fixed;
}

}

body.boxed {
    -webkit-box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
    box-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
    margin: 0 auto;
    position: relative;
}

@media (min-width: 576px){
    body.boxed{
        width: 540px;
    }  
}

@media (min-width: 768px){
    body.boxed{
        width: 720px;
    }
}

@media (min-width: 992px){
    body.boxed {
        width: 960px;
    }
}

@media (min-width: 1200px){
    body.boxed{
        width: 1140px;
    }
}

@media (min-width: 1400px){
    body.boxed {
        width: 1320px;
    }
}


a.main-btn::before,
.main-btn::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 80%;
    height: 100%;
    border-bottom: 1px solid white;
    margin: 0 auto;
    transform: translate(-50%, 0) translateX(-100%);
    opacity: 0;
    transition: 0.65s;
}

a.main-btn:hover::before,
.main-btn:hover::before {
    transform: translate(-50%, 0) translateX(0%);
    opacity: 1;
}

.main-btn.bg {
    margin-right: 10px;
    background-color: var(--primary-color);
    color: var(--white-fix);
}

a.main-btn:hover,
.main-btn:hover {
    background-color: var(--primary-color);
    color: var(--white-fix)
}

/* header Css */
.main-header.transparent {
    position: absolute;
    width: 100%;
    z-index: 9999;
}
.main-header .navbar-brand,.main-header a.site-title {
    display: block;
    position: relative;
    flex: 1;
    height: auto;
}

a:has(.site-title) {
	display: inline-block;
}

.navbar-brand .site-title, .navbar-brand .site-description  {
	margin: 0.4em 0;
}

.navbar-brand .custom-logo-link  {
	padding-top: 9px;
	margin-bottom: 9px;
	display: block;
}

.navbar-brand .site-title, .navbar-brand .site-description {
	color: var(--primary-color);
}

.main-header .topbar-inner .row > .col-lg-3:nth-child(1){
	position: relative;
	z-index: 1;
}

.header-two a.navbar-brand::before,.header-two .header-top-right::before{
    display: none;
}
.main-header .navbar-brand .site-description{
    /* color: var(--white-fix) */
}

.header-widget .widget-contact .contact-area {
    display: flex;
    align-items: center;
}

.header-widget .widget-contact .contact-area:not(:last-child) {
    margin-right: 30px;
}

.header-widget .widget-contact .contact-icon {
    margin-right: 15px;
    color: var(--primary-color);
    font-size: 26px;
}

.header-widget .widget-contact .contact-info .text {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--white-fix);
}
.header-two .header-widget .widget-contact .contact-info .text{
    color: var(--dark);
}

.header-widget .widget-contact .contact-info .text a {
    text-decoration: none;
    color: var(--white-fix);
    font-size: 16px;
}
.header-two .header-widget .widget-contact .contact-info .text a{
    color: var(--dark);
    font-weight: 600;
    transition: 0.5s;
}

.header-widget {
    height: 100%;
    display: block;
    width: 100%;
}

.header-top-right {
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px 0 20px;
    display: flex;
    align-items: center;
    justify-content: end;
    z-index: 1;
}


.header-top-right .main-btn {
    margin-right: 15px;
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.topbar p.site-description{
    /* color: var(--white); */
}
.topbar-inner {
    border: 1px solid rgba(255 255 255 / 10%);
    padding: 0 10px;
    border-top: transparent;
	position: relative;
}

.topbar-inner::before, .topbar-inner::after {
	content: '';
    position: absolute;
    border-left: 1px solid rgba(255 255 255 / 10%);
    top: 0;
    height: 100%;
}

.topbar-inner::after {
	left:calc( 25% - 18px);
}
.topbar-inner::before {
	right:calc( 16.6667% - 18px);
}
.topbar .navbar-brand img {
    width: 100%;
    max-width: 212px;
}
.header-two .topbar-inner {
    border: 1px solid rgba(120 120 120 / 20%);
}
.header-top-right .dropdown-menu {
    border-radius: 0;
    padding: 0;
    background-color: var(--white-fix);
    border: none;
}
.header-top-right .dropdown-menu li button.dropdown-item{
    color: var(--dark-fix);
    font-weight: 500;
    padding: 8px 10px;
}
.header-top-right .dropdown-menu li:not(:last-child){
    border-bottom: 1px solid #d9d9d9;
}
.header-top-right .dropdown-menu li button.dropdown-item:hover,
.header-top-right .dropdown-menu li button.dropdown-item:focus-within,
.header-top-right .dropdown-menu li button.dropdown-item.active{
    color: var(--primary-color); 
    background: transparent;
}
.main-header.is-sticky-menu {
    position: fixed;
    top: -1px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    -webkit-box-shadow: 0 10px 15px rgb(0 0 0 / 5%);
    -ms-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    -o-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 15px rgb(0 0 0 / 5%);
    -webkit-animation: 1s ease-in-out 0s normal none 1 running fadeInDown;
    animation: 1s ease-in-out 0s normal none 1 running fadeInDown;
    background-color: var(--dark-fix);
}
.author-content{
    text-align: left;
}
.heading-title p{
    line-height: 1.5;
}

.author-content .widget_media_gallery .gallery .gallery-item{
    width: 28%;
    float: left;
    margin: 0 8px 16px;
}
.author-content .widget_media_gallery .gallery .gallery-item img{
    width: 100%;
    display: block;
    object-fit: cover;
    max-width: 100%;
    height: auto;
}
.author-content>aside,.author-content>div {
    clear: both;
}
 .author-sidebar .offcanvas-header {
     background-color: var(--dark-fix);
     flex-wrap: wrap;
 }

 .author-sidebar .offcanvas-header .custom-logo-link {
     flex: 1;
     height: auto;
     justify-content: start;
 }
 
 .author-sidebar .custom-logo-link + a {
	 display: none;
 }

 .author-sidebar .site-description {
     order: 1;
     color: var(--white);
     width: 100%;
 }
.author-content .widget-social-widget ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.menu-right .author-sidebar .author-content .widget-social-widget ul li {
    display: inline-block;
    margin-right: 5px;
    border: none;
}
.author-content .widget-social-widget ul li a {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.author-content .widget-contact .contact-area{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.author-content .widget-contact .contact-area .contact-icon{
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--primary-color);
    color: var(--white-fix);
    margin-right: 15px;
}
.author-content .widget-contact .contact-area .contact-info p {
    line-height: 1.5;
    margin: 0;
}
.author-content .widget-contact .contact-area .contact-info p span{
    color: var(--dark);
    font-weight: 500;
}
.author-content .widget-contact .contact-area .contact-info p a{
    color: var(--primary-color);
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
}
.author-sidebar .offcanvas-header{
    background: var(--primary-color);
    text-align: left;
}
.navbar .offcanvas-header button.btn-close {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
}
.author-sidebar .offcanvas-header .btn-close{
    opacity: 1;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    color: var(--white-fix);
}
.header-widget .contact-area:hover .contact-icon i,
.header-widget .contact-area:focus-within .contact-icon i{
    animation: headShake 2s;
}
.header-widget .contact-area .contact-info a:hover,
.header-widget .contact-area .contact-info a:focus-within{
    color: var(--primary-color);
}
.header-widget aside.widget.widget-contact {
    display: inline-block;
}
/* Topbar end */

/* Navigation area */
.nav-area .nav-info-text{
    height: 100%;
}
.nav-area .nav-text {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    z-index: 1;
}

.nav-area .nav-text::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-right: 1px solid rgba(255 255 255 / 10%);
    top: 0;
    left: 0;
    z-index: -1;
}

.nav-text-icon {
    color: var(--primary-color);
    margin-right: 10px;
}

.nav-area .nav-text p,
.nav-area .nav-text p a {
    color: var(--white-fix);
    margin: 0;
    transition: 0.65s;
}

.nav-area .nav-text p a:hover,
.nav-area .nav-text p a:focus-within {
    color: var(--primary-color);
}

.nav-area .nav-text p:hover {
    text-decoration: dotted underline;
}

.nav-area-inner {
    padding: 0 10px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: rgba(255 255 255 / 10%);
}
.header-two .nav-area-inner {
    border: 1px solid rgba(120 120 120 / 20%);
    border-top-color: transparent;
}
.nav-area .navbar {
    padding: 0;
}

.nav-area .navbar-nav .nav-item .nav-link {
    text-decoration: none;
    color: var(--white-fix);
    padding: 0;
    line-height: 4;
    margin-right: 27px;
    font-weight: 500;
}
.nav-area .navbar-nav .nav-item .nav-link[title="Add a menu"] {
    text-decoration: underline;
}

.nav-area .navbar-nav .nav-item .nav-link[title="Add a menu"]:hover, .nav-area .navbar-nav .nav-item .nav-link[title="Add a menu"]:focus {
    text-decoration: underline dotted;
}
.navbar-expand-lg .navbar-nav{
    flex-wrap: wrap;
}

.nav-area .navbar-nav .nav-item .nav-link.active {
    color: var(--primary-color);
}

.menu-right > ul {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}
.header-two .menu-right> ul,.header-two .menu-right> ul li .widget_social_widget ul{
    justify-content: end;
    padding: 0;
    margin: 0;
    list-style: none;
    height: 100%;
    display: flex;
}
.header-two .menu-right ul li .widget_social_widget{
    height: 100%;
}
.navbar-nav .dropdown-menu {
    padding: 0;
    margin: 0;
    border-radius: 0;
    background-color: var(--white-fix);
}

.navbar-nav .dropdown-menu li:not(:last-child) {
    border-bottom: 1px solid #e7e7e7;
}
.navbar-nav .dropdown-menu li .dropdown-item {
    padding: 10px;
    text-decoration: none;
    font-weight: 500;
    color: var(--dark-fix);
    transition: 0.65s;
}

.navbar-nav .dropdown-menu li.dropdown .dropdown-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}


.navbar-nav .dropdown-menu li .dropdown-item:hover,
.navbar-nav .dropdown-menu li .dropdown-item:focus-within,
.navbar-nav .dropdown-menu li .dropdown-item.active {
    color: var(--white-fix);
    background-color: var(--primary-color);
}
.dropdown-menu > li{
    position: relative;
}
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu,
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu{
    left: 100%;
    top: 0;
}
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu,
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu,
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu{
    top: 100%;
    left: 0%;
}
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu,
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu{
    left: -100%;
    top: 0%;
}
.navbar .navbar-nav li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu{
    top: 0%;
    left: -100%;
}

.nav-area .menu-right {
    width: 100%;
    height: 100%;
    position: relative;
    /* z-index: 1; */
}

.nav-area .menu-right::before {
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    border-left: 1px solid rgba(255 255 255 / 10%);
    z-index: -1;
}
.header-two .nav-area .menu-right::before{
    display: none;
}



.menu-right>ul>li {
    display: inline-block;
    flex: 1;
    text-align: center;
    height: 100%;
}

.header-two .menu-right ul li{
    width: unset;
}
.header-two .menu-right>ul>li>a,
.header-two .widget_social_widget ul li a{
    width: 50px;
}
.header-two .nav-area:not(.is-sticky-menu) .menu-right ul> li> a{
    color:var(--dark)
}

.menu-right ul li:not(:last-child) {
    border-right: 1px solid rgba(255 255 255 / 10%);
}
.header-two .menu-right ul li:not(:last-child) {
    border-right: 1px solid rgba(120 120 120 / 20%);
}

.menu-right ul li a {
    height: 100%;
    color: var(--white-fix);
    font-size: 16px;
    transition: 0.65s;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu-right .cart_dropdown .shopping-cart a.main-btn {
    line-height: 2.5;
    background-color: var(--dark);
    border: none;
    color: var(--white);
    text-align: center;
}
.menu-right .cart_dropdown .shopping-cart a.main-btn:hover,
.menu-right .cart_dropdown .shopping-cart a.main-btn:focus{
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.shopping-cart a.main-btn i{
    margin-left: 10px;
}

.cart_dropdown .dropdown-menu{
    padding: 0;
    border-radius: 0;
    width: 320px;
    padding: 20px;
    background-color: var(--white);
    border: none;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.cart_dropdown .dropdown-menu.show{
    animation: cartion .2s linear;
}
@keyframes cartion {
    from{
        transform: translate(0 , 66px) scale(.7);
        visibility: hidden;
        border-radius: 100%;
    }
    to{
        transform: translate(0 , 66px) scale(1);
        visibility: visible;
        border-radius: 0%;
    }
}
.cart_dropdown > a span.cart-badge{
    display: inline-block;
    width: 15px;
    height: 15px;
    background: var(--primary-color);
    line-height: 16px;
    font-size: 12px;
    border-radius: 15px;
    /* vertical-align: super; */
    margin: 0 0 0 -3px;
    color: var(--white-fix);
}
.shopping-cart .cart-header>i {
    font-size: 16px;
    color: var(--primary-color);
}

.shopping-cart .cart-header {
    display: flex;
    border-bottom: 1px solid rgba(120 120 120 / 20%);
    padding-bottom: 15px;
    line-height: 1;
    justify-content: space-between
}

.shopping-cart .main-button {
    text-decoration: none;
    border: 1px solid rgba(255 255 255 / 20%);
    color: var(--white);
    font-weight: 500;
    display: block;
    font-size: 18px;
    background: var(--dark);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    border-radius: 5px;
}
.shopping-cart .main-button:hover,
.shopping-cart .main-button:focus-within{
    background: var(--primary-color);
    color: var(--white-fix)
}

.shopping-cart .cart-header .cart-total {
    font-size: 16px
}

div.shopping-cart ul.cart-items {
    padding: 0;
    margin: 20px 0 20px;
    list-style: none;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    display: block;
}

div.shopping-cart ul.cart-items li {
    display: inline-block;
    width: 100%;
    margin: 0 10px 10px 0;
    padding: 0;
    font-size: 15px;
    position: relative;
    border: 1px solid rgba(120 120 120 / 20%);
    border-radius: 5px;
}

div.shopping-cart ul.cart-items li a:focus-within,div.shopping-cart ul.cart-items li a:hover {
    color: var(--primary-color);
}

div.shopping-cart ul a.remove {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0px, -50%);
    width: 15px;
    height: 15px;
    line-height: 13px;
    text-align: center;
    border-radius: 4px;
    background-color: var(--dark);
    color: var(--white);
    text-decoration: none;
    transition: 0.65s;
    opacity: 0;
}
div.shopping-cart ul.cart-items li a.remove:hover,
div.shopping-cart ul.cart-items li a.remove:focus{
    text-decoration: none;
    color: var(--white-fix);
    background-color: var(--primary-color);
}


.shopping-cart .cart-items .item-img {
    float: left;
    margin-right: 12px;
    width: 70px;
    height: 70px;
    border-radius: 5px;
    text-align: center;
    line-height: 4.1;
}

.shopping-cart .cart-items .item-img img {
    width: 90%;
    display: inline-block;
    float: none;
    height: auto;
    margin: auto
}

.shopping-cart .cart-items .item-name {
    font-size: 16px;
    font-weight: 600;
    display: block;
    padding-top: 15px;
    line-height: 1;
    text-align: left;
    color: var(--dark);
}

.shopping-cart .cart-items .item-name:focus-within,.shopping-cart .cart-items .item-name:hover {
    color: var(--primary-color)
}

.shopping-cart .cart-badge {
    color: var(--white-fix);
    font-size: 10px;
    margin: 0 0 0 -10px;
    width: 16px;
    height: 16px;
    line-height: 1.6;
    text-align: center;
    vertical-align: super;
    border-radius: 100px;
    display: inline-block;
    background-color: var(--primary-color)
}

.shopping-cart .cart-items .quantity {
    font-size: 12px;
    font-weight: 500;
    color: var(--dark);
    line-height: 3;
    float: left;
    transition: 0.65s;
}

.shopping-cart .cart-items .quantity span bdi {
    color: var(--dark);
    font-weight: 400
}

.shopping-cart .cart-items .amount {
    font-size: 12px;
    font-weight: 600;
    margin-right: 0;
    color: #222
}
div.shopping-cart ul.cart-items li:hover a:not(a.remove),
div.shopping-cart ul.cart-items li:hover span.quantity{
    transform: translateX(25px);
}
div.shopping-cart ul.cart-items li:hover a.remove,
div.shopping-cart ul.cart-items li:focus a.remove{
    opacity: 1;
    z-index: 0;
}

.menu-right .modal-header {
    border: none;
}

.header-search-flex {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.header-search-flex .search-form {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.header-search-flex .search-form .header-search-field {
    border-radius: 5px;
    width: 79%;
    outline: none;
    border: none;
    transition: 0.65s;
    transition-delay: 0.5s;
    background-color: var(--white-fix);
    color: var(--dark-fix);
    padding: 15px;
}

.header-search-flex .search-form .search-submit {
    width: 19%;
    border-radius: 5px;
    border: none;
    background-color: var(--dark-fix);
    transition: 0.65s;
    transition-delay: 0.5s;
    color: var(--white-fix);
}

.menu-right .modal .modal-content {
    background-color: var(--primary-color);
}

.menu-right .modal .modal-header .btn-close {
    color: var(--white-fix);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 1;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    top: 20%;
    z-index: 999;
}

.modal .header-search-flex .search-form .header-search-field:not(.modal.show .header-search-flex .search-form .header-search-field) {
    opacity: 0;
    transform: translateX(-50%);
    visibility: hidden;
}

.modal .header-search-flex .search-form .search-submit:not(.modal.show .header-search-flex .search-form .search-submit) {
    opacity: 0;
    transform: translateX(200%);
    visibility: hidden;
}




/* Navigation area end */



/* slider.css */
.slide-main-item {
    position: relative;
}

.slide-main-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0 0 0 / 70%);
}

.slider-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

.slide-main-item .carousel-caption {
    position: inherit;
}

.slide-main-item .carousel-caption span:not(span>span):not(h1>span),
.slider2-item .carousel-caption span:not(span>span):not(h1>span) {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 5px;
    margin-bottom: 15px;
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-weight: 600;
    color: var(--white-fix);
    overflow: hidden;
}
.slider2-item .carousel-caption span:not(span>span):not(h1>span){
    color: var(--dark);
}
.carousel-caption span.sub-effect {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.carousel-caption span.sub-effect:after,
.carousel-caption span.sub-effect:before {
  position: absolute;
  background-color: rgba(255 255 255 / 10%);
  content: "";
  display: block;
  width: 1px;
  height: 100%;
  transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  visibility: hidden;
}
.slider2-item .carousel-caption span.sub-effect:after,
.slider2-item .carousel-caption span.sub-effect:before{
    background-color: rgba(var(--border-color),10%);
}

.carousel-caption span.sub-effect:before {
  left: 0;
}

.carousel-caption span.sub-effect:after {
  right: 0;
  top: 0;
}
.carousel-item.active .carousel-caption span.sub-effect::before,
.carousel-item.active .carousel-caption span.sub-effect::after{
  width: 50%;
  visibility: visible;
}

.slide-main-item .carousel-caption span::after:not(span>span):not(h1>span),
.slide-main-item .carousel-caption span::before:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::after:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::before:not(span>span):not(h1>span) {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: -1;
    background-color: var(--white-fix);
}
.slider2-item .carousel-caption span::after:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::before:not(span>span):not(h1>span){
    background-color: var(--dark);
}

.slide-main-item .carousel-caption span::before:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::before:not(span>span):not(h1>span) {
    left: 10px;
}

.slide-main-item .carousel-caption span::after:not(span>span):not(h1>span),
.slider2-item .carousel-caption span::after:not(span>span):not(h1>span) {
    right: 10px;
}

.slide-main-item .carousel-caption h1,
.slider2-item .carousel-caption h1 {
    font-weight: 700;
    font-size: 55px;
    color: var(--white-fix);
    margin-bottom: 30px;
}
.slider2-item .carousel-caption h1{
    color: var(--dark);
}

.slide-main-item .carousel-caption:last-of-type,
.slider2-item .carousel-caption:last-of-type {
    margin-left: 10px;
}

.slider-section button.carousel-control-prev,
.slider-section button.carousel-control-next {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    background-size: cover;
    top: 50%;
    transform: translate(0px, -50%);

}

.slider-section button.carousel-control-prev {
    left: 40px;
}

.slider-section button.carousel-control-next {
    right: 40px;
}

.slider-section .carousel-control-prev i,
.slider-section .carousel-control-next i {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background-color: var(--white-fix);
    color: var(--primary-color);
    line-height: 30px;
    text-align: center;
    transition: 0.65s;
}

.slider-section .carousel-control-prev i {
    position: absolute;
    left: -15px;
}

.slider-section .carousel-control-next i {
    position: absolute;
    right: -15px;
}

.slider-section .carousel-control-prev:hover i,
.slider-section .carousel-control-prev:focus i,
.slider-section .carousel-control-next:hover i,
.slider-section .carousel-control-next:focus i {
    background-color: var(--primary-color);
    color: var(--white-fix);
}

span.primary-color {
    color: var(--primary-color);
}

.slider-two .slider2-item{
    height: 800px;
}
.slider-two .slider2-item>.row{
    height: 100%;
}
.slider-two {
    background-color: var(--bg-color);
    position: relative;
    z-index: 1;
}
.slider-two::before{
    content: '';
    position: absolute;
    background-image: url(../images/shapes/shape6.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: -1;
}
.slider-two::after{
    content: '';
    position: absolute;
    background-image: url(../images/shapes/shape5.png);
    background-repeat: no-repeat;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    background-position: right bottom;
    z-index: -1;
}
[data-bs-theme="light"] .slider-two::before{
    background-image: url(../images/shapes/shape6-dark.png);
} 
[data-bs-theme="light"] .slider-two::after{
    background-image: url(../images/shapes/shape5-dark.png);
} 
.slider-two .carousel-caption {
    position: unset;
    text-align: left;
}
.slider-two .slider2-content {
    display: flex;
    align-items: center;
    height: 100%;
}
.slider-two .slider-image {
    height: 100%;
    position: relative;
}
.slider-two .slider-image img {
    position: absolute;
    bottom: 0;
    right: 0;
}
.slider-section .carousel-indicators button {
    width: 15px;
    height: 15px;
    border-radius: 100%;
}
.slider-section.slider-two .carousel-indicators button {
    background-color: var(--dark)!important;
}

/* section title */
.section-title {
    text-align: center;
    margin-bottom: 40px;
}

.section-title h2 {
    font-size: 45px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--dark);
    transition: 0.65s;
    opacity: 0.5;
    margin: 0 0 10px;
}

.section-title .sub-title {
    color: var(--white-fix);
    display: inline-block;
    padding: 5px 10px;
    position: relative;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 600;
    z-index: 1;
    transition: 0.65s;
    margin-bottom: 20px;
}

.section-title .sub-title::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    left: 50%;
    bottom: -9px;
    transform: translate(-50%, 0px);
    z-index: -1;
    clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
}

.section-title .sub-title::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--primary-color);
    border-radius: 3px;
    z-index: -1;
}

.section-title p {
    color: var(--dark);
}





/* service-section */
.service-section {
    background-color: var(--white);
    padding: 100px 0 75px;
}

.service {
    margin-bottom: 25px;
}

.service-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.service-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}

.service .service-image img {
    width: 100%;
    display: block;
    transition: 0.3s;
    max-width: 100%;
    height: auto;
}
.service:hover .service-image img,
.service:focus .service-image img{
    transform: scale(1.1);
}

.service .service-image {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.service .service-heading {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* background-color: rgba(0 0 0 / 50%); */
    border-radius: 0 50px 0 0;
    padding: 10px 15px;
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
    width: 80%;
    z-index: 1;
}

.service .service-heading::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--dark);
    opacity: 0.9;
    border-radius: 0 50px 0 0;
    z-index: -1;
}

.service .service-content .service-heading h2 a,
.service .service-content .service-heading h2 {
    color: var(--white);
    font-size: 22px;
    margin: 0 0 5px;
    text-decoration: none;
}

.service .service-content .service-heading span {
    color: var(--primary-color);
    font-size: 16px;
}

.service .service-icon {
    position: absolute;
    width: 80px;
    height: 80px;
    line-height: 70px;
    top: 0;
    left: 0;
    background-color: var(--primary-color);
    color: var(--white-fix);
    text-align: center;
    border-radius: 0 0 80px 0;
    z-index: 1;
    font-size: 26px;
    padding: 0px 6px 0 0px;
}
.service:hover .service-icon,
.service:focus .service-icon{
    color: var(--primary-color);
}
.service .service-icon::before{
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    right: 0;
    bottom: 0;
    border-radius: 100%;
    z-index: -1;
    border: 80px solid var(--dark);
    border-left-color: transparent;
    border-bottom-color: var(--dark);
    border-right-color: transparent;
    transform: rotate(45deg) translateY(0px);
    transition: 0.3s;
}
.service:hover .service-icon::before,
.service:focus .service-icon::before{
    transform: rotate(-45deg) translateY(1px);
    opacity: 1;
}

.service .service-content a:not(.service-content .service-heading h2 a) {
    position: absolute;
    width: 80px;
    height: 80px;
    line-height: 80px;
    bottom: 0;
    right: 0;
    background-color: var(--primary-color);
    color: var(--white-fix);
    text-align: center;
    border-radius: 80px 0 0;
    z-index: 1;
    padding: 10px 0 0 10px;
    transition: 0.86s;
}

.service .service-content a:not(.service-content .service-heading h2 a)::before{
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    left: 0;
    top: 0;
    border-radius: 100%;
    z-index: -1;
    border: 80px solid var(--dark);
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(45deg) translateY(-0.9px);
    transition: 0.3s;
}
.service:hover .service-content a:not(.service-content .service-heading h2 a)::before,
.service:focus .service-content a:not(.service-content .service-heading h2 a)::before{
    transform: rotate(-45deg) translateY(-0.9px);
    opacity: 1;
}
.service .service-content a:not(.service-content .service-heading h2 a) i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 30px;
    background-color: var(--white-fix);
    color: var(--primary-color);
}
.service:hover .service-content a:not(.service-content .service-heading h2 a) i,
.service:focus .service-content a:not(.service-content .service-heading h2 a) i{
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.service .service-image::before {
    content: '';
    position: absolute;
    inset: 12px;
    border: 2px dashed var(--white-fix);
    z-index: 1;
    border-bottom: transparent;
}
.service .service-image::after {
    content: '';
    position: absolute;
    inset: 0px;
    z-index: 0;
    background-color: var(--dark-fix);
    opacity: 0.5;
}

.find-solution {
    text-align: center;
    margin: 0;
    background-color: var(--primary-color);
    padding: 10px;
    color: var(--white-fix);
    font-size: 16px;
    margin-bottom: 25px;
}

.find-solution a {
    color: var(--dark-fix);
    display: inline-block;
    background-color: var(--white-fix);
    margin-left: 10px;
    padding: 5px 10px;
}

.service-two{
    padding: 90px 25px 30px;
    position: relative;
    background-color: var(--bg-color);
    text-align: center;
    border-radius: 5px;
    margin-bottom: 25px;
    z-index: 1;
    overflow: hidden;
    transform-style: preserve-3d;
}
.service-two::before{
    content: '';
    position: absolute;
    border-radius: 5px;
    inset: 13px;
    border: 1px dashed var(--primary-color);
    z-index: -1;
}
.service-two::after{
    content: '';
    position: absolute;
    border-radius: 5px;
    background-color: var(--primary-color);
    z-index: -1;
    width: 90px;
    height: 90px;
    left: 50%;
    top: -30px;
    border-radius: 100%;
    transform: translate(-50%, 0px);
}
.service-two:hover,
.service-two:focus-within{
    background-color: var(--dark);
}
.service-two .service-icon{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: var(--dark);
    color: var(--white);
    line-height: 50px;
    font-size: 18px;
    left: 50%;
    top: 26px;
    transform: translate(-50%, 0);
}
.service-two:hover .service-icon,
.service-two:focus-within .service-icon{
    background-color: var(--white);
    color: var(--primary-color);
}
.service-two .service-heading h2 a {
    text-decoration: none;
    font-size: 20px;
    background-color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 3px;
    color: var(--white-fix);
}
.service-two .service-content>a {
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 40px;
    background-color: var(--dark);
    border-radius: 100%;
    color: var(--white);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translate(-50%, 0px);
}
.service-two .service-heading span {
    font-size: 26px;
    font-weight: 600;
    display: block;
    text-align: right;
    color: var(--dark);
}
.service-two:hover .service-heading span,
.service-two:focus-within .service-heading span{
    color: var(--white);
}
.service-two .service-two-inner{
    transform: translateZ(20px);
}
.service-two .service-heading p {
    margin: 0;
    color: var(--dark);
}
.service-two:hover .service-heading p,
.service-two:focus-within .service-heading p{
    color: var(--white);
}
.service-two:hover .service-content>a,
.service-two:focus-within .service-content>a{
    background-color: var(--primary-color);
    color: var(--white-fix);
}
/* end service css */


/* features css */
.feature-section {
    padding: 100px 0 75px;
    background-color: var(--bg-color);
}

.feature-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.feature-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}

.feature-item {
    background-color: var(--dark);
    padding: 30px 20px;
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    z-index: 1;
}
.feature-two{
    background-color: var(--dark2-fix);
    position: relative;
}
.feature-two::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/shapes/shape5.png');
    background-repeat: no-repeat;
    background-position: center bottom;
}
.feature-two .feature-item{
    background-color: transparent;
    flex-direction: column-reverse;
    align-items: center;
    position: relative;
    transition: 0.65s;
}
.feature-two .feature-item .feature-inner{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
}
.feature-two .feature-item .feature-inner{
    transform: translateZ(50px);
}

.feature-two .feature-item::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 5px;
    border: 1px solid var(--white-fix);
    opacity: 0.1;
}
.feature-two .feature-item::after{
    content: '';
    position: absolute;
    inset: 10px;
    z-index: -1;
    border-radius: 5px;
    border: 1px dashed var(--white-fix);
    transition: 0.65s;
    visibility: hidden;
}
.feature-two .feature-item:hover{
    background-color: var(--primary-color);
}
.feature-two .feature-item:hover .feature-icon{
    color: var(--white-fix);
    transition: 0.65s;
}
.feature-two .feature-item:hover::after{
    visibility: visible;
}
.feature-two .section-title h2,.feature-two .section-title p,.feature-two .feature-content h3{
    color: var(--white-fix);
}
@keyframes shkX {
    0%{
        transform: translateX(0);
    }
    50%{
        transform: translateX(5px);
    }
    0%{
        transform: translateX(0);
    }
}
.feature-content {
    flex: 1;
    padding-right: 15px;
}

.feature-content h3 {
    color: var(--white);
    font-size: 22px;
    margin: 0;
}

.feature-icon {
    font-size: 40px;
    color: var(--primary-color)
}
.feature-item:hover .feature-icon i {
    animation: flipInX 1s;
}
.feature-two .feature-item .feature-icon {
    margin-bottom: 15px;
}



/* portfolio css  start*/
.portfolio-section {
    background-color: var(--white);
    padding: 100px 0 75px;
}

.portfolio-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.portfolio-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}

.portfolio-item {
    border-radius: 0;
    padding: 10px;
    border: 0;
    background-color: var(--bg-color);
    position: relative;
    z-index: 1;
}


.portfolio-item:hover::before,
.portfolio-item:focus::before {
    transform-origin: left;
    transform: scaleX(1);
}


.portfolio-item::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
    background-color: var(--primary-color);
    z-index: -1;
}
.portfolio-two .portfolio-item::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    transition: 0.65s ease-in-out;
    background: linear-gradient(to top, var(--dark-fix), transparent);
    z-index: 1;
    opacity: 0;
}
.portfolio-two .portfolio-item:hover::after,
.portfolio-two .portfolio-item:focus:after{
    background: linear-gradient(to top, var(--primary-color), transparent);
    opacity: 1;
}
.portfolio-content {
    text-align: center;
    position: relative;
    padding: 34px 30px 6px;
}

span.portfolio-categorie {
    background-color: var(--primary-color);
    color: var(--white-fix);
    display: inline-block;
    padding: 5px 10px;
    position: absolute;
    left: 50%;
    top: -17px;
    transform: translate(-50%, 0px);
    width: 80%;
    transition: 0.65s;
}

.portfolio-content a {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    line-height: 30px;
    background-color: var(--primary-color);
    color: var(--white-fix);
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0px, -50%);
    transition: 0.65s;
}

.portfolio-content .card-title {
    color: var(--dark);
    transition: 0.65s;
    font-size: 18px;
}

.portfolio-item:hover .card-title,
.portfolio-item:focus .card-title {
    color: var(--white-fix);
}

.portfolio-item:hover span.portfolio-categorie,
.portfolio-item:focus span.portfolio-categorie,
.portfolio-item:hover .portfolio-content a,
.portfolio-item:focus .portfolio-content a {
    background-color: var(--white-fix);
    color: var(--primary-color);
}
.portfolio-two .portfolio-item:hover span.portfolio-categorie,
.portfolio-two .portfolio-item:focus span.portfolio-categorie{
    background-color: var(--dark-fix);
}

.portfolio-section .tab-filter {
    text-align: center;
    margin-bottom: 40px;
}
.portfolio-section .tab-filter a{
    text-decoration: none;
    display: inline-block;
    padding: 16px 20px 10px;
    border: 1px solid var(--dark);
    border-radius: 5px;
    margin-right: 10px;
    color: var(--dark);
    position: relative;;
}
.tab-filter a span.filter-count {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    display: inline-block;
    line-height: 30px;
    background-color: var(--primary-color);
    color: var(--white-fix);
    font-size: 14px;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%, 0px);
}
.tab-filter a.active span.filter-count{
    background-color: var(--dark);
    color: var(--white);
}
.portfolio-section .tab-filter a.active{
    background-color: var(--primary-color);
    color: var(--white-fix);
    border-color: var(--primary-color);
}
.portfolio-two .portfolio-item{
    border-radius: 0;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}
.portfolio-two .portfolio-content{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: left;
    padding: 15px 70px 15px 15px;
    z-index: 2;
}
.portfolio-two .portfolio-item span.portfolio-categorie{
    background: var(--primary-color);
    color: var(--white-fix);
    display: inline-block;
    padding: 5px 10px;
    position: unset;
    left: unset;
    top: unset;
    transform: translate(0, 0);
    width: unset;
    transition: 0.65s;
    font-size: 16px;
    margin-bottom: 10px;
}
.portfolio-two .portfolio-item .portfolio-content .card-title{
    color: var(--white-fix);
    margin: 0;
}
.portfolio-two .portfolio-item .portfolio-content a {
    width: 70px;
    height: 70px;
    border-radius: 100px 0 0 0;
    bottom: 0;
    transform: translate(0px, 0%);
    top: unset;
    line-height: 80px;
    text-align: center;
}
.portfolio-two .portfolio-item .card-img, .card-img-top{
    border-radius: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
}
/* portfolio css  End*/




/* team css*/
.team-section {
    background-color: var(--dark-fix);
    padding: 100px 0 75px;
}
.team-section.team_page{
    background-color: var(--bg-color);
}
.team-section.team_page .section-title h2,
.team-section.team_page .section-title p{
    color: var(--dark);
 }

.team-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.team-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}

.team-section .section-title h2,
.team-section .section-title p {
    color: var(--white-fix);
}

.team {
    position: relative;
    margin-bottom: 25px;
}

.team-img {
    position: relative;
    z-index: 1;
    padding: 15px 15px 0;
}

.team-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--white-fix);
    z-index: -1;
}

.team-img img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.team-content {
    position: absolute;
    bottom: -32px;
    left: 0;
    right: 0;
    z-index: 0;
    padding: 15px;
    transform: rotateX(70deg);
    transition: 0.65s;
}

.team-content::before {
    content: '';
    position: absolute;
    inset: -5px;
    background-color: var(--primary-color);
    z-index: -1;
    opacity: 0.9;
    border-radius: 4px;
}

.team-content h4 {
    color: var(--white-fix);
    font-size: 22px;
    margin: 0 0 5px;
    visibility: hidden;
    transition: 0.35s;
}

.team-content span {
    color: var(--white-fix);
    visibility: hidden;
    transition: 0.35s;
}

.team:hover .team-content {
    transform: rotateX(0deg);
    bottom: 0px;
    z-index: 1;
}

.team:hover .team-content h4,
.team:hover .team-content span {
    visibility: visible;
}

/* team end */


/* whychoose us */
.why_choose-section {
    padding: 100px 0 75px;
    background-color: var(--bg-color);
}

.why_choose-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.why_choose-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}

.why_choose-content .feature-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.why_choose-content .feature-list li {
    background-color: var(--white);
    padding: 25px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.why_choose-content .feature-list li::before {
    z-index: -1;
    content: '';
    position: absolute;
    background-color: var(--primary-color);
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.why_choose-content .feature-list li:hover::before,
.why_choose-content .feature-list li:focus::before {
    transform-origin: top;
    transform: scaleX(1);
}

.why_choose-content .feature-list li:not(:last-child) {
    margin-bottom: 25px;
}

.feature-list-text h5,.feature-list-text h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dark);
    transition: 0.65s;
}

.feature-list-text p {
    color: var(--dark);
    margin: 0;
    transition: 0.65s;
}

.why_choose-content .feature-list li:hover .feature-list-text h2,
.why_choose-content .feature-list li:focus-within .feature-list-text h2,
.why_choose-content .feature-list li:hover .feature-list-text p,
.why_choose-content .feature-list li:focus-within .feature-list-text p {
    color: var(--white-fix);
}

.feature-list-text {
    flex: 1;
    margin-right: 15px;
}

.why_choose-content .feature-list li a {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background-color: var(--primary-color);
    color: var(--white-fix);
    border-radius: 4px;
    transition: 0.65s;
}

.why_choose-content .feature-list li a i {
    transform: rotate(45deg);
}

.why_choose-content {
    margin-bottom: 25px;
}

.why_choose-content .feature-list li:hover a,
.why_choose-content .feature-list li:focus-within a {
    background-color: var(--white-fix);
    color: var(--primary-color);
}

.feature-image {
    position: relative;
}

.feature-image::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 10px solid;
    border-top-color: var(--dark);
    border-left-color: var(--dark);
    border-right-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    z-index: 1;
}

.feature-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--dark-fix);
    opacity: 0.5;
}

.feature-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.video-play {
    position: absolute;
    bottom: 30px;
    display: flex;
    left: 30px;
    right: 30px;
    align-items: center;
    z-index: 1;
}

.video-play a {
    min-width: 50px;
    height: 50px;
    border-radius: 100%;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    background-color: var(--white-fix);
}

.video-play h3 {
    font-size: 20px;
    color: var(--white-fix);
    flex: auto;
    margin-left: 20px;
}

/* whychoose us end */



/* cta section */
.cta-section {
    padding: 100px 0 75px;
    position: relative;
    background-size: cover;
    background-position: center center;
    z-index: 1;
    overflow: hidden;
    background-attachment: fixed;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--dark-fix);
    opacity: 0.7;
    z-index: -1;
}

.cta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    display: block;
    background-image: url(../images/shapes/map.png);
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;
}

.cta-left .contact-area .contact-icon,
.cta-right .contact-area .contact-icon {
    width: 90px;
    height: 90px;
    line-height: 87px;
    text-align: center;
    border-radius: 100%;
    border: 5px solid var(--white-fix);
    font-size: 30px;
    background-color: var(--primary-color);
    color: var(--white-fix);
    position: absolute;
    right: 0;
    z-index: 2;
    top: 50%;
    transform: translate(0px, -50%);
}

.cta-right .contact-area .contact-icon {
    left: 0;
}

.cta-left .contact-area .contact-info p,
.cta-right .contact-area .contact-info p {
    margin: 0;
}

.cta-left .contact-area .contact-info a,
.cta-right .contact-area .contact-info a {
    color: var(--white-fix);
    text-decoration: none;
    font-size: 26px;
    letter-spacing: 2px;
}

.cta-left .contact-area .contact-info,
.cta-right .contact-area .contact-info {
    height: 120px;
    line-height: 120px;
    background-color: var(--primary-color);
    padding: 0 90px 0 20px;
    position: relative;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    z-index: 1;
    text-align: center;
}

.cta-left .contact-area .contact-info::before,
.cta-right .contact-area .contact-info::before {
    content: '';
    position: absolute;
    inset: 0;
    right: 14px;
    background: var(--white-fix);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    z-index: -1;
}

.cta-left .contact-area .contact-info::after,
.cta-right .contact-area .contact-info::after {
    content: '';
    position: absolute;
    inset: 3px;
    right: 19px;
    left: 0;
    background: var(--dark-fix);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    z-index: -1;
}

.cta-left .contact-area,
.cta-right .contact-area {
    position: relative;
}

.cta-right .contact-area .contact-info,
.cta-right .contact-area .contact-info::before,
.cta-right .contact-area .contact-info::after {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}

.cta-right .contact-area .contact-info {
    padding: 0 20px 0 90px;
}

.cta-right .contact-area .contact-info::before {
    left: 14px;
    right: 0;
}

.cta-right .contact-area .contact-info::after {
    left: 19px;
    right: 0;
}

.cta-right,
.cta-left {
    margin-bottom: 25px;
}

.cta-content {
    text-align: center;
    padding-bottom: 150px;
}

.cta-content h3 {
    color: var(--white-fix);
    font-size: 35px;
    font-weight: 800;
}

.cta-content p {
    color: var(--white-fix);
}

.cta-center {
    position: relative;
}

.cta-play-btn {
    height: 220px;
    width: 160px;
    margin: 20px auto -62px;
    background: white;
    display: block;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    text-align: center;
    line-height: 170px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    bottom: -80px;
}

.cta-play-btn::before {
    background-color: var(--primary-color);
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    position: absolute;
    inset: 6px;
    content: '';
}

.cta-play-btn a {
    z-index: 1;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    line-height: 50px;
    text-align: center;
    display: inline-block;
    border: 1px solid var(--white-fix);
    color: var(--white-fix);
}
/* cta section  end*/


.pricing-section {
    padding: 100px 0 100px;
    background-color: var(--bg-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.pricing-section:not(.price-single)::before {
    content: '';
    position: absolute;
    width: 30%;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--dark-fix);
    z-index: -1;
    clip-path: polygon(0% 0%, 65% 0%, 100% 50%, 65% 100%, 0% 100%);
}

.ring {
    position: relative;
    display: inline-block;
    width: 450px;
    height: 450px;
}

.pricing-section .ring:before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--primary-color);
    opacity: 0.5;
    z-index: 0;
    border-radius: 50%;
    border: 5px solid var(--white);
}

.ring:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top: 5px solid var(--primary-color);
    border-right: 5px solid var(--primary-color);
    border-radius: 50%;
    animation: animateC 20s linear infinite;
    /* z-index: 1; */
}

.pricing-image .rounded-circle {
    width: 100%;
    max-width: 450px;
    height: 450px;
    object-fit: cover;
    border: 5px solid var(--white-fix);
}

.funfact-effect-1 {
    display: block;
    position: absolute;
    top: calc(50% - 2px);
    left: 50%;
    width: 50%;
    height: 4px;
    background: transparent;
    transform-origin: left;
    animation: animate 20s linear infinite;
}

.funfact-effect-1:before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--primary-color);
    top: 7px;
    right: -10px;
    box-shadow: 0 0 20px var(--primary-color);
}

.pricing-image {
    display: block;
    text-align: center;
}

@keyframes animateC {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate {
    0% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(405deg);
    }
}

.pricing-section:not(.price-single) .section-title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    padding: 0 15px;
    z-index: 1;
}

.pricing-section:not(.price-single) .section-title h2,
.pricing-section:not(.price-single) .section-title h2 span {
    color: var(--white-fix);
    opacity: 1;
}

.pricing-section:not(.price-single) .section-title p {
    color: var(--white-fix);
}

.pricing-section:not(.price-single) .section-title .sub-title {
    color: var(--primary-color);
}

.pricing-section:not(.price-single) .section-title span::after:not(h2>span),
.pricing-section:not(.price-single) .section-title span::before:not(h2>span) {
    background-color: var(--white-fix);
}

.pricing-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.pricing-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}

.price-item {
    background-color: var(--white);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin-bottom: 25px;
}
.price-item:hover,
.price-item:focus{
    background-color: var(--dark);
}
.price-item::before {
    position: absolute;
    content: '';
    inset: 0;
    background-image: url('../images/shapes/shape1.png');
    background-repeat: no-repeat;
    z-index: -1;
}
.price-item::after {
    position: absolute;
    content: '';
    inset: 0;
    background-image: url('../images/shapes/shape2.png');
    background-repeat: no-repeat;
    z-index: -1;
}
.price-item *{
    transition: 0.5s;
}

.price-item .price-header {
    padding: 30px 20px 0;
    text-align: center;
    margin-bottom: 20px;
}

.price-item .price-header span.price:not(span.price>span) {
    font-size: 30px;
    color: var(--primary-color);
    font-weight: 700;
}

.price-item .price-header span.price>span {
    font-size: 16px;
    font-weight: 500;
    color: var(--dark);transition: 0.5s;
}
.price-item:hover .price-header span.price>span,
.price-item:focus .price-header span.price>span{
    color: var(--white);
}

.price-heading {
    font-size: 36px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 15px;
}
.price-item:hover .price-heading,
.price-item:focus .price-heading{
    color: var(--white);
}
.price-item:hover .price-header,
.price-item:focus .price-header{
    color: var(--white);
}

.price-header p {
    color: var(--dark);
    margin-top: 15px;
}
.price-item:hover .price-header p,
.price-item:focus .price-header p{
    color: var(--white);
}

.price-body {
    padding: 0 20px;
}

.price-body ul {
    margin: 0;
    padding: 20px;
    list-style: none;
    background-color: var(--bg-color);
    border-radius: 5px;
    text-align: left;
}
.price-item:hover .price-body ul ,
.price-item:focus .price-body ul {
    background-color: var(--dark2-fix);
}

.price-body ul li i {
    color: var(--primary-color);
    margin-right: 5px;
}

.price-body ul li {
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
}
.price-item:hover .price-body ul li,
.price-item:focus .price-body ul li{
    color: var(--white-fix);
}

.price-body ul li:not(:last-child) {
    margin-bottom: 10px;
}

.price-item .widget_payment_methods ul {
    list-style: none;
    margin: 0;
    padding: 20px;
    position: relative;
    z-index: 1;
}

.price-item .widget_payment_methods ul::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-bottom: 1px solid var(--dark);
    left: 0;
    top: 0;
    opacity: 0.1;
    z-index: -1;
}

.price-item .widget_payment_methods ul li {
    display: inline-block;
    margin-right: 5px;
}

.price-item .widget_payment_methods ul li a {
    display: inline-block;
    font-size: 36px;
    line-height: 0;
}

.price-item .widget-contact .contact-area {
    padding: 20px;
}

.price-item .widget-contact .contact-area {
    display: flex;
    align-items: center;
}

.price-item .contact-info p {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: self-start;
}

.price-item .contact-info p span {
    color: var(--dark);
    font-weight: 500;
}
.price-item:hover .contact-info p span,
.price-item:focus .contact-info p span{
    color: var(--white);
}

.price-item .contact-info a {
    text-decoration: none;
    font-size: 20px;
    color: var(--dark);
    font-weight: 700;
}
.price-item:hover .contact-info a,
.price-item:focus .contact-info a{
    color: var(--white);
}
.price-item .contact-icon {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    line-height: 50px;
    text-align: center;
    margin-right: 15px;
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.pricing .filter-wrapper-2 {
    text-align: center;
}
.pricing .filter-wrapper-2 .tab-filter {
    display: inline-block;
    background-color: var(--white);
    border-radius: 4px;
    border: 1px solid var(--primary-color);
    margin-bottom: 30px;
}
.pricing .filter-wrapper-2 .tab-filter a {
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
    font-weight: 600;
    color: var(--primary-color);
}
.pricing .filter-wrapper-2 .tab-filter a.active{
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.tooltip-inner {
    background-color: var(--dark) !important;
    color: var(--white) ;
    font-weight: 500;
}
.icon-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.price-single{
    padding: 100px 0 75px;
}
.price-single .price-item{
    margin-bottom: 25px;
}
/* testimonial  */
.testimonial-section{
    padding: 100px 0;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
.testimonial-section::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--dark-fix);
    opacity: 0.8;
    z-index: -1;
}
.testimonial-section .section-title h2,.testimonial-section .section-title p{
    color: var(--white-fix);
}
.testimonial-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.testimonial-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.testimonial-content {
    padding: 40px 70px;
    position: relative;
    border-radius: 5px;
    z-index: 1;
}
.testimonial-content .client-info h2{
    color: var(--primary-color);
    margin-bottom: 5px;
    font-size: 22px;
}
.testimonial-content .client-info span ,.testimonial-content p{
    color: var(--white-fix);
}
.testimonial-content p::before,.testimonial-content p::after{
    font-family: "Font Awesome 5 free";
    font-weight: 900;
    position: absolute;
    font-size: 30px;
    color: var(--primary-color);
}
.testimonial-content p::before{
    content: '\f10d';
    top: 12px;
    left: 20px;
}
.testimonial-content p::after{
    content: '\f10e';
    bottom: 12px;
    right: 20px;
}
.testimonial-content::before{
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--white-fix);
    opacity: 0.2;
    border-radius: 5px;
    z-index: -1;
}
.testimonial-image {
    text-align: center;
}
.testimonial-image img{
    width: 130px;
    height: 130px;
    object-fit: cover;
    border: 3px solid var(--primary-color);
    border-radius: 100%;
}
.testimonial-section .carousel-indicators button{
    text-indent: 0;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: none;
    border: 2px solid var(--white-fix);
    outline: none;
    opacity: 1;
}
.testimonial-section .carousel-indicators button.active{
    border-color: var(--primary-color);
}
.testimonial-section .carousel-indicators button img{
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 100%;
}
.testimonial-section .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 372px;
    text-align: center;
    margin: 0;
    left: unset;
    display: inline-block;
}
/* testimonial  end */



/* funfact styles */
.funfact-section{
    padding: 100px 0 75px;
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
.funfact-section::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--dark-fix);
    opacity: 0.7;
    z-index: -1;
}
.funfact-box{
    text-align: center;
    margin-bottom: 25px;
}
.funfact-content span:not(h3>span){
    color: var(--white-fix);
    font-weight: 700;
    font-size: 26px;
}
.funfact-icon {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: var(--white-fix);
    display: flex;
    color: var(--primary-color);
    align-items: center;
    justify-content: center;
    margin: 15px auto 30px;
    font-size: 80px;
    font-weight: 800;
    position: relative;
    transition: 0.65s;
}

.funfact-box:hover .funfact-icon{
    background-color: var(--primary-color);
    color: var(--white-fix);
}

.funfact-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100%;
    border: 4px solid var(--primary-color);
    border-top-color: transparent;
    border-left-color: transparent;
}
.funfact-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100%;
    border: 4px solid transparent;
    border-top-color: var(--primary-color);
    transform: rotate(-40deg);
}
.funfact-box:hover .funfact-icon::before{
    border-color: var(--white-fix);
    border-top-color: transparent;
    border-left-color: transparent;
}
.funfact-box:hover .funfact-icon::after{
    border: 4px solid transparent;
    border-top-color: var(--white-fix);
}
.effect-border {
    position: absolute;
    inset: -15px;
    border: 2px solid transparent;
    border-radius: 100%;
    border-bottom-color: #fff;
}
.effect-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 100%;
    border: 2px solid transparent;
    border-right-color: #fff;
    transform: rotate(-30deg);
}
.effect-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 100%;
    border: 2px solid transparent;
    border-top-color: #fff;
    transform: rotate(-60deg);
}
@keyframes effectone {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.funfact-box:hover .funfact-icon::before {
    animation: effectone 10s linear infinite;
}
.funfact-box:hover .funfact-icon::after {
    animation: effecttwo 10s linear infinite;
}
.funfact-box:hover .effect-border {
    animation: effectthree 10s linear infinite;
}
@keyframes effecttwo {
    0% {
        transform: rotate(-40deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
@keyframes effectthree {
    0% {
        transform: rotate(360deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
.funfact-content h3{
    font-size: 45px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0;
}

/* end funfact section */



/* sponsors */
.sponsor-section{
    padding: 100px 0 100px;
    background-color: var(--white);
}
.sponsor-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}
.sponsor-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.sponsor-item img {
    max-width: 100%;
    height: auto;
}
.sponsor-item {
    padding: 0 20px;
    height: 150px;
    line-height: 150px;
    border-radius: 10px;
    background-color: var(--dark-fix);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: 0.65s;
    margin: 0 10px;
}
.sponsor-image {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sponsor-item::before{
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 10px;
    border: 2px dashed var(--primary-color);
    z-index: -1;
    transition: 0.65s;
}
.sponsor-item:hover{
    background-color: var(--primary-color);
}
.sponsor-item:hover::before{
    border-color: var(--white-fix);
}
/* sponsors end*/




/* cta2 */
.cta2-section{
    background-size: cover;
    position: relative;
    z-index: 1;
    background-position-x: -200px;
    background-attachment: fixed;
}
.cta2-section::before{
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, var(--dark-fix),var(--dark-fix),transparent);
    z-index: -1;
}
.cta2-section::after{
    content: '';
    position: absolute;
    background-image: url(../images/shapes/shape3.png);
    background-repeat: no-repeat;
    z-index: -1;
    right: 0;
    top: 0;
    width: 736px;
    height: 100%;
}
.cta2-content{
    padding: 100px 0 100px;
}
.cta2-image {
    position: relative;
    height: 100%;
}
.cta2-image img{
    position: absolute;
    bottom: 0;
    width: 400px;
    right: 0;
}
.cta2-content h1 {
    font-size: 46px;
    font-weight: 700;
    color: var(--white-fix);
    margin-bottom: 20px;
}
.cta2-content>span {
    color: var(--white-fix);
    display: inline-block;
    padding: 5px 10px;
    position: relative;
    border-radius: 3px;
    font-size: 18px;
    font-weight: 600;
    z-index: 1;
    transition: 0.65s;
    margin-bottom: 20px;
}
.cta2-content>span::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--primary-color);
    left: 10px;
    bottom: -9px;
    transform: translate(0%, 0px);
    z-index: -1;
    clip-path: polygon(50% 50%, 100% 50%, 50% 100%, 0% 50%);
}
.cta2-content>span::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--primary-color);
    border-radius: 3px;
    z-index: -1;
}
.cta2-content>p{
    color: var(--white-fix);
    margin-bottom: 20px;
}
a.store_btn {
    text-decoration: none;
    padding: 5px 25px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    line-height: 1.2;
}
a.store_btn>span{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}
a.store_btn.google{
    background-color: var(--primary-color);
    color: var(--white-fix);
    margin-right: 10px;
    transition: 0.5s;
}
a.store_btn.google:hover,
a.store_btn.google:focus-within{
    background-color: var(--white-fix);
    color: var(--primary-color);
    margin-right: 10px;
    transition: 0.5s;
}
a.store_btn.apple{
    background-color: var(--white-fix);
    color: var(--primary-color);
}
a.store_btn.apple:hover,
a.store_btn.apple:focus-within{
    background-color: var(--primary-color);
    color: var(--white-fix);
}
/* cta2 end */




/* blog section */

.blog-section{
    padding: 100px 0 75px;
    /* background-color: var(--bg-color); */
}
.blog-section.blog-page,.blog-section.blog-single{
    /* background-color: var(--white); */
}

.blog-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.blog-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.post-item{
    margin-bottom: 25px;
}
.post-item .post-image{
    margin: 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 5px 5px 0 0;
}
.post-item .post-image img{
    transition: 0.3s;
}

.post-item:hover .post-image img,
.post-item:focus .post-image img{
    transform: scale(1.1);
}
.post-item .post-image::after{
    position: absolute;
    top: 0%;
    right: 0%;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, .4);
    border-radius: 50%;
}
.post-item:hover .post-image::after{
    -webkit-animation: circle .95s;
    animation: circle .95s;
}

@keyframes circle{
    0% {
        width: 0;
        height: 0;
        top: 0;
        right: 0;
    }
    90%{
        width: 100%;
        height: 120%;
    }
    100%{
        opacity: 0;
    }
}
.post-image img{
    width: 100%;
    display: block;
    border-radius: 5px 5px 0 0;
    max-width: 100%;
    height: auto;
}
.post-meta.up .author{
    text-decoration: none;
    font-weight: 500;
    flex: 1;
}
.author-image img {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border: 2px solid var(--primary-color);
    margin-right: 10px;
}
.post-meta.up {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 1;
    margin-top: -55px;
    margin-bottom: 15px;
}
.post-meta.up::before{
    content: '';
    position: absolute;
    background-color: var(--bg-color);;
    inset: 10px 20px;
    z-index: -1;
    margin: 0 auto;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.author-name{   
     color: var(--dark);
}
.post-meta.up span.post-date a {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--white-fix);
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    line-height: 48px;
}
.post-meta.up span.post-date a span {
    font-size: 20px;
    line-height: 0;
}
.post-content {
    position: relative;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    border-radius: 0 0 5px 5px;
    background-color: var(--white);
}
.blog-section.blog-page .post-content,.blog-section.blog-single .post-content{
    background-color: var(--bg-color);
}
.blog-section.blog-page .post-meta.up::before,.blog-section.blog-single .post-meta.up::before{
    background-color: var(--white);
}
.post-content .post-title{
    line-height: 1;
    word-break: break-word;
}
.post-content .post-title a {
    text-decoration: none;
    font-size: 26px;
    color: var(--dark);
    font-weight: 700;
    transition: 0.65s;
}
.blog-section .post-item > .post-content:nth-child(1) {
    margin-top: 25px;
}
.post-content .post-title a:hover,
.post-content .post-title a:focus-within{
    color: var(--primary-color);
}
.post-content>p{
    color: var(--dark);
    padding-bottom: 20px;
    position: relative;
    z-index: 1;
}
.post-content>p::before{
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-bottom: 1px solid var(--dark);
    opacity: 0.2;
}
.blog-single .post-content>p {

    padding: 0;
}
.blog-single .post-content>p::before{
    border: none;
}
a.more-link {
    text-decoration: none;
    font-weight: 600;
    color: var(--dark);
    transition: 0.65s;
    float: left;
}

a.more-link:hover,
a.more-link:focus-within{
    color: var(--primary-color);
}
.post-meta.down {
    float: right;
}
.post-meta.down span.comments-link i {
    color: var(--primary-color);
    margin-right: 5px;
}
.post-meta.down span.comments-link a{
    text-decoration: none;
    color: var(--dark);
    font-weight: 600;
}
.post-content::after {
    content: '';
    display: block;
    clear: both;
}

.page-links {
    padding: 0;
    margin-top: 30px;
    list-style: none;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}
.page-links .post-page-numbers {
    width: 40px;
    height: 50px;
    display: inline-block;
    line-height: 50px;
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    z-index: 1;
    text-align: center;
    background: var(--dark);;
}
.page-links .post-page-numbers.current::before {
    background-color: var(--primary-color);
    content: '';
    position: absolute;
    inset: -10px 0;
    z-index: -1;
    clip-path: polygon(10% 15%, 0 15%, 10% 0, 90% 0, 100% 15%, 90% 15%, 90% 85%, 100% 85%, 90% 100%, 10% 100%, 0 85%, 10% 85%);
}
/* blog single */
.blog-post.author-details {
    background-color: var(--bg-color);
    padding: 25px;
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
    margin-bottom: 25px;
}
.blog-post.author-details::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    background-color: var(--dark);
    z-index: -1;
    width: 40%;
}
.section-header h2{
    color: var(--white-fix)
}
.author-details .media {
    display: flex;
    align-items: center;
}

.media .auth-mata {
    margin-right: 15px;
}
.media .auth-mata img {
    width: 150px;
    height: 150px;
    border-radius: 100%;
}
.media-body h4 a {
    text-decoration: none;
    text-transform: capitalize;
    color: var(--primary-color);
}
.comments-area {
    margin-bottom: 25px;
    clear: both;
}
ol.comment-list {
    margin: 0 0 25px;
    padding: 0px;
    list-style: none;
    position: relative;
    z-index: 1;
    background-color: var(--white);
    border-radius: 5px;
}
ol.comment-list::before{
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--dark);
    opacity: 0.2;
    z-index: -1;
    border-radius: 5px;
}
ol.children {
    margin: 0;
    list-style: none;
}
.comments-area .comment-meta .comment-author img {
    position: absolute;
    z-index: 0;
    left: 0;
    border-radius: 5px;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-left: 25px;
}
.comments-area .comment-body {
    position: relative;
    padding: 25px 25px 25px 145px;
    overflow-wrap: break-word;
    word-wrap: break-word;
    border-radius: 3px;
    z-index: 1;
    min-height: 150px;
}
.comment-list>li:not(:last-child).comment .comment-body::before{
    content: '';
    position: absolute;
    inset: 0;
    border-bottom: 1px solid var(--dark);
    opacity: 0.2;
    z-index: -1;
}
.comment-list>li.comment .children .comment-body::before{
    left: -32px;
}
.comment-list>li.comment .children .children  .comment-body::before{
    left: -64px;
}
.comment-content p {
    margin: 0;
    color: var(--dark);
}
.comment-author .fn a {
    text-decoration: none;
    color: var(--dark);
    font-weight: 700;
    font-size: 18px;
}
.comment-metadata a {
    text-decoration: none;
    font-weight: 600;
    color: var(--primary-color);
}
.comment-metadata a time:before {
    content: "\f073";
    font-family: "Font Awesome 5 Free";
    font-size: 14px;
    color: var(--primary-color);
    margin-right: 5px;
}
.comment-metadata a.reply {
    display: inline-block;
    background-color: var(--primary-color);
    padding: 8px 15px;
    color: var(--white);
    border-radius: 5px;
}
.comment-metadata {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.comment-respond {
    padding: 25px;
    background-color: var(--bg-color);
    border-radius: 5px;
}
.comment-reply-title {
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 600;
}
.comment-form p{
    color: var(--dark)
}
.comment-form p .comment-textarea,
.comment-form p input[type='text'],
.comment-form p input[type='email'],
.comment-form p input[type='url']{
    width: 100%;
    background-color: var(--white);
    border: none;
    outline: none;
    padding: 10px 15px;
    border-radius: 4px;
    color: var(--dark);
}
.comment-form p.form-submit{
    margin: 0;
}
.comment-form p.form-submit input[type='submit']{
    background-color: var(--primary-color);
    border: none;
    outline: none;
    color: var(--white-fix);
    padding: 10px 15px;
    border-radius: 4px;
}
/* footer section */
.footer-section{
    position: relative;
    z-index: 1;
    background-size: cover;
}
.footer-section .logo img{
    max-width: 100%;
    height: auto;
}
/* .footer-section:not(.footer-blur) .blur-effect { */
    /* display: none; */
/* } */
/* .footer-section:not(.footer-blur)::before{ */
.footer-section::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right,#000,#000,#000,transparent);
}
.footer-section::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000;
    opacity: 0.7;
    background-image: url(../images/shapes/shape5.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}
.footer-item .logo {
    margin-bottom: 20px;
}
.textwidget p{
    color: var(--white-fix);
}

.footer-active-shape {
    position: absolute;
    inset: -26px 0 0 0;
    background-color: var(--primary-color);
    z-index: -1;
}
.footer-active-shape::before,.footer-active-shape>span::before{
    content: '';
    position: absolute;
    width: 17px;
    height: 26px;
    background-color: var(--primary-color);
    left: -16px;
    clip-path: polygon(100% 0%, 100% 0, 100% 100%, 0% 100%);
    z-index: -2;
}
.footer-active-shape::after,.footer-active-shape>span::after{
    content: '';
    position: absolute;
    width: 17px;
    height: 26px;
    background-color: var(--primary-color);
    right: -17px;
    clip-path: polygon(0% 0%, 0% 0, 100% 100%, 0% 100%);
    z-index: -2;
    backdrop-filter: drop-shadow(16px 16px 10px black);
}
.footer-active-shape>span {
    background-image: url(../images/shapes/shape3.png);
    position: absolute;
    inset: 0;
    background-position: 0 0;
}
.footer-active-shape>span::before,.footer-active-shape>span::after {
    background-color: var(--dark-fix);
    opacity: 0.3;
    z-index: 1;
}


.footer-item .widget_social_widget ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.footer-item .widget_social_widget ul li{
    display: inline-block;
}
.footer-item .widget_social_widget ul li:not(:last-child){
    margin-right: 10px;
}
.footer-item .widget_social_widget ul li a{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    background-color: var(--white-fix);
    color: var(--primary-color);
    margin-bottom: 10px
}
.widget_social_widget ul li a:hover i,
.widget-social-widget ul li a:hover i{
    animation: flipInX 1s;
}

.br-bottom{
    border-bottom: 1px solid rgb(180 180 180 / 20%);
}
.footer-item {
    position: relative;
    height: 100%;
    z-index: 1;
    padding: 0 20px 20px;
}
.footer-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-right: 1px solid rgb(180 180 180 / 20%);
    border-left: 1px solid rgb(180 180 180 / 20%);
}
.footer-item .widget-title {
    padding: 10px 0px;
    color: var(--white-fix);
    font-size: 20px;
    margin-bottom: 0px;
    letter-spacing: 1px;
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}
.footer-item .widget-title::before{
    content: '';
    position: absolute;
    inset: 0 -20px;
    border-bottom: 1px solid rgb(180 180 180 / 20%);
    z-index: -1;
}
.footer-item .widget_categories ul,
.footer-item .wp-block-categories
{
    padding: 0px;
    list-style: none;
    margin: 0;
}
.footer-item .widget_categories ul li:not(:last-child),
.footer-item .wp-block-categories li:not(:last-child)
{
    margin-bottom: 10px;
}
.footer-item .widget_categories ul li a,
.footer-item .wp-block-categories li a
{
    text-decoration: none;
    color: var(--white-fix);
}
.footer-section .widget_categories ul li a::before,
.footer-section .wp-block-categories li a::before
 {
    content: "\f192";
    font-family: 'Font Awesome 5 Free';
    font-weight: 500;
    margin-right: 5px;
	color:var(--primary-color);
}

.footer-item .grid-time {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}
.footer-item .grid-time dt i{
    margin-right: 10px;
    color: var(--primary-color);
}
.footer-item .grid-time dt,
.footer-item .grid-time dd{
    color: var(--white-fix);
    margin-bottom: 0.5rem;
}

.footer-item .custom-html-widget .payment_methods {
    padding: 0;
    margin: 0 0 15px;
    list-style: none;
}
.footer-item .custom-html-widget .payment_methods li{
    display: inline-block;
}
.footer-item .custom-html-widget .payment_methods li a{
    text-decoration: none;
    color: var(--white-fix);
    font-size: 30px;
    margin-right: 5px;
}

.footer-item .our-rewards{
    margin-bottom: 20px;
}
.footer-item .our-rewards .reward{
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 10px;
}
.footer-item .our-rewards .reward img{
    width: 50px;
    height: 50px;
}

.custom-html-widget .contact-area{
    display: flex;
    align-items: center;
}
.custom-html-widget .contact-icon{
    color: var(--primary-color);
    font-size: 45px;
    margin-right: 15px;
}
.custom-html-widget .contact-info p{
    display: flex;
    flex-direction: column;
    margin: 0;
}
.custom-html-widget .contact-info p span{
    font-size: 16px;
    color: var(--white-fix);
}
.custom-html-widget .contact-info p a{
    text-decoration: none;
    font-size: 22px;
    color: var(--white-fix);
    font-weight: 700;
    letter-spacing: 1px;
}
.footer-item .contact-area:hover .contact-icon i,
.footer-item .contact-area:focus-within .contact-icon i{
    animation: headShake 2s;
}
.footer-item .contact-area .contact-info a:hover,
.footer-item .contact-area .contact-info a:focus-within{
    color: var(--primary-color);
}

.footer-main {
    margin-bottom: 60px;
    border-bottom: 1px solid rgb(180 180 180 / 20%);
}
.footer-middle .contact-area {
    display: flex;
    align-items: center;
    border: 1px solid rgb(180 180 180 / 20%);
    margin-bottom: 25px;
}
.footer-middle .contact-area .contact-icon>i:nth-child(1) {
    transition: 0.5s;
    text-align: center;
    transform-origin: top;
    transform: translateY(0px) rotateX(0deg);
    height: 100px;
    line-height: 100px;
    width: 100%;
    border: 1px solid rgb(180 180 180 / 20%);
}
 
 .footer-middle .contact-area .contact-icon>i:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s;
    transform-origin: bottom;
    transform: translateY(-100%) rotateX(90deg);
    background: var(--primary-color);
    color: var(--white-fix);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-middle .contactinfo-box:hover .contact-icon>i:nth-child(2) {
    transform: translateY(0%) rotateX(0deg);
} 
.footer-middle .contactinfo-box:hover .contact-icon>i:nth-child(1) {
    transform: translateY(100%) rotateX(90deg);
}
.footer-middle .contactinfo-box{
    position: relative;
}



.footer-middle .contact-area .contact-icon{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: var(--primary-color);
    background: rgba(255 255 255 / 5%);
    font-size: 40px;
    margin-right: 15px;
    backdrop-filter: blur(2px);
}


.footer-middle .contact-area .contact-info{
    height: 100px;
    display: flex;
    align-items: center;
}
.footer-middle .contact-area .contact-info p{
    margin: 0;
    display: flex;
    flex-direction: column;
}
.footer-middle .contact-area .contact-info p span{
    color: var(--white-fix);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
}
.footer-middle .contact-area .contact-info p a{
    text-decoration: none;
    color: var(--white-fix);
}
.footer-middle {
    margin-bottom: 35px;
}
p.copyright-text {
    margin: 0;
    color: var(--white-fix);
    font-weight: 400;
}
.footer-copyright .widget_pages ul{
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: right;
}
.footer-copyright .widget_pages ul li{
    display: inline-block;
}
.footer-copyright .widget_pages ul li:not(:last-child){
    margin-right: 10px;
}
.footer-copyright .widget_pages ul li a{
    color: var(--white-fix);
    transition: 0.65s;
}
.footer-copyright .footer-menu li a{
    text-decoration: underline;
}
.footer-copyright .footer-menu li a:hover, .footer-copyright .footer-menu li a:focus{
    text-decoration: underline dotted;
}
.footer-copyright .widget_pages ul li a:hover,
.footer-copyright .widget_pages ul li a:focus-within{
    color: var(--primary-color);
}
.footer-copyright {
    border: 1px solid rgb(180 180 180 / 20%);
    padding: 25px 20px;
}
/* footer section end*/



/* Theme darkmode css */
ul.switcher-dark {
    padding: 0;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
ul.switcher-dark li.nav-item.dropdown {
    list-style: none;
}
ul.switcher-dark li.nav-item.dropdown button.bd-theme {
    border-radius: 5px;
    background-color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    color: var(--white-fix);
    border: none;
}
.switcher-dark .dropdown-menu .dropdown-item{
    line-height: 1.5;
}

/* scroll-top */
.scrollingUp.scroll-btn {
    display: inline-block;
    text-decoration: none;
    background: var(--primary-color);
    color: var(--white-fix);
    border-radius: 100%;
    height: 40px;
    width: 40px;
    line-height: 40px;
    padding: 0;
    z-index: 999;
    border: none;
    position: fixed;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0px);
    visibility: hidden;
    transition: all 0.65s ease 0s;
}
.scrollingUp.scroll-btn.is-active {
    bottom: 8%;
    visibility: visible;
}



/* breadcrumbes */
.breadcrumb-area {
    height: 500px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.breadcrumb-area:not(.breadcrumb-blur)::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* background: linear-gradient(to right,#000000,#000000,transparent); */
}
.breadcrumb-area::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: #000;
    opacity: 0.3;
}
.breadcrumb-area ol.breadcrumb{
    justify-content: center;
    display: inline-flex;
    padding: 10px 15px;
    border-radius: 3px;
    background-color: #1b1e22;
}
.breadcrumb-item+.breadcrumb-item::before{
    content: '\f054';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--white-fix);
    line-height: 1.8;
    font-size: 14px;
	display:none;
}
h1.breadcrumb-heading {
    color: var(--white-fix);
    margin-bottom: 15px;
}
.breadcrumb-item a ,.breadcrumb-item{
    color: var(--white-fix);
    text-decoration: none;
}
.breadcrumb-item.active{
    color: var(--primary-color);
}
.breadcrumb-area:not(.breadcrumb-blur) .blur-effect2{
    display: none;
}


/* about page  */
.about-section{
    padding: 100px 0 75px;
    background-color: var(--white);
    position: relative;
}
.about-section:hover .section-title h2 {
    transform: scale(1) translateY(32px);
    opacity: 1;
}
.about-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.about-section .about-image {
    position: relative;
    display: block;
    text-align: center;
    margin-bottom: 25px;
}
.about-section .about-image img{
    width: 100%;
    display: block;
}
.about-section .ring {
    position: relative;
    display: inline-block;
    width: 600px;
    height: 600px;
}
.about-image .funfact-effect-1{
    z-index: 1;
}
.about-image .funfact-effect-1:before {
    top: -5px;
    right: -8px;
}
    
.about-section .ring::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-bottom: 10px solid var(--dark);
    border-left: 10px solid var(--dark);
    border-image: initial;
    border-top: 10px solid var(--primary-color);
    border-right: 10px solid var(--primary-color);
    border-radius: 50%;
    animation: 20s linear 0s infinite normal none running animateC;
}
.about-content .section-title {
    text-align: left;
    margin-bottom: 0;
}
.about-content .section-title span::before:not(h2>span){
    left: 15px;
}
.about-content h2{
    font-weight: 700;
    font-size: 35px;
    color: var(--dark);
}
.about-content .about-author{
    padding: 15px;
    margin: 0;
    list-style: none;
    display: flex;
    background-color: var(--bg-color);
    border-radius: 5px;
}
.about-content .about-author li img{
    width: 70px;
    height: 70px;
    border-radius: 100%;
    margin-right: 10px;
}
.about-content .about-author li h3{
    font-size: 18px;
    margin: 0;
    display: inline-block;
    font-weight: 700;
    color: var(--dark);
}
.about-content .about-author li p{
    margin: 0;
    color: var(--dark);
}
.about-content{
    margin-bottom: 25px;
}
.about-experience{
    position: relative;
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
    background-size: cover;
    background-position: center center;
    border-radius: 3px;
    z-index: 1;
    display: flex;
    padding: 15px;
    align-items: center;
}
.about-experience::before{
    position: absolute;
    content: '';
    inset: 0;
    border-radius: 3px;
    background-color: var(--primary-color);
    opacity: 0.7;
    z-index: -1;
}
.about-experience>li:first-child{
    display: flex;
    align-items: center;
    flex: 1;
}
.about-experience>li>span:first-child{
    color: var(--white-fix);
    font-size: 35px;
    font-weight: 700;
    margin-right: 15px;
}
.about-experience>li>span:last-child{
    color: var(--white-fix);
    font-size: 20px;
    font-weight: 600;
}
.about-experience li .main-btn.bg{
    background-color: var(--white-fix);
    color: var(--dark-fix);
}
.about-experience li .main-btn.bg::before{ 
    border-color: var(--primary-color);
}
/* whychoose2 */
.why_choose-section.whychoose-about{
    background-color: var(--white);
}
.whychoose-about .why_choose-content .feature-list li{
    background-color: var(--bg-color)
}
/* about company */
.about-company:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}
.about-company:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.about-company{
    padding: 100px 0 75px;
    background-color: var(--white);
}
.rewards{
    flex: 0 0 auto;
}
.rewards h2 {
    font-size: 65px;
    font-weight: 800;
    color: var(--dark);
}
.rewards h2 i {
    color: var(--primary-color);
    font-size: 50px;
}
.rewards > span {
    display: block;
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 15px;
}
.headings h2 {
    font-size: 45px;
    font-weight: 600;
    color: var(--dark);
}
.headings p{
    color: var(--dark);
}
.company-content{
    display: flex;
    align-items: center;
}
.headings {
    border-left: 1px solid #666;
    padding: 10px 0px 0 25px;
    margin-left: 25px;
}

.about-company-image img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 120px 0 0 0;
}
.about-company-image{
    position: relative;
    text-align: right;
    z-index: 1;
}
.about-company-image::before{
    position: absolute;
    content: '';
    width: 300px;
    height: 300px;
    border-radius: 130px 0 0 0;
    right: 10px;
    bottom: 10px;
    background-color: var(--primary-color);
    z-index: -1;
}


/* market analetics */
.market-analysis{
    padding: 100px 0 75px;
    background-color: var(--dark2-fix);
}
.market-report h2 {
    font-size: 40px;
    font-weight: 700;
    color: var(--white-fix);
    margin-bottom: 25px;
}
.market-report ul{
    padding: 0;
    margin: 0;
    list-style: none;
}
.market-report ul li{
    padding-left: 35px;
    position: relative;
    margin-bottom: 25px;
}
.market-report ul li:last-child{
    margin-bottom: 0;
}
.market-report ul li h3 {
    font-size: 22px;
    color: var(--white-fix);
}
.market-report ul li p{
    color: var(--white-fix);
}
.market-report ul li h3 i{
    position: absolute;
    color: var(--primary-color);
    left: 0;
    margin-top: 3px;
}
.chart-img img{
    width: 100%;
}
/* market analetics */
.team-section.team-about {
    background-color: var(--white);
}
.team-section.team-about .section-title h2, .team-section.team-about .section-title p{
    color: var(--dark);
}

/* faq */
.faq-section.about-faq{
    background-color: var(--dark2-fix);
    padding: 100px 0 100px;
    position: relative;
    z-index: 1;
}
.faq-section.about-faq::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/shapes/shape3.png');
    background-position: left top;
    background-repeat: no-repeat;
    z-index: -1;
}
.faq-section.about-faq .section-title h2, .faq-section.about-faq .section-title p{
    color: var(--white-fix);
}
.faq-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}
.faq-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
/* achievement-section */
.achievement-section{
    padding: 100px 0 100px;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.achievement-section::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-color);
    opacity: 0.8;
    z-index: -1;
}
.achivement-area{
    background-color: var(--primary-color);
    border-radius: 5px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    margin-bottom: 25px;
}
.achivement-area::before{
    content: '';
    position: absolute;
    background-color: var(--dark-fix);
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
    width: 60%;
    right: 10px;
    z-index: -1;
    bottom: 0;
    top: 10px;
}
.achive-icon {
    font-size: 40px;
    color: var(--white-fix);
}
.achive-content h3 {
    color: var(--white-fix);
    font-size: 45px;
    font-weight: 700;
}
.achive-content span{
    color: var(--white-fix);
}
.achivement-area .achive {
    text-align: center;
}
.achive-image img{
    width: 275px;
    height: 275px;
    object-fit: cover;
    border-radius: 10px;
}
@property --a {
    /* control the gradient rotation (no need to update) */
    syntax: "<angle>";
    initial-value: 45deg;
    inherits: true;
  }
  @property --r {
    syntax: "<angle>";
    initial-value: 5deg; /* control the image rotation */
    inherits: true;
  }
  @property --p {
    /* control the color stops of the gradient (no need to update) */
    syntax: "<percentage>";
    initial-value: 0%;
    inherits: true;
  }
  .achive-image img {
    --c: var(--bg-color); /* the main coloration of the rotating gradient */
    aspect-ratio: 1;
    border-radius: 25px;
    border: 4px solid #0000; /* the thickness for the rotating gradient */
    padding: 10px; /* the gap */
    background: conic-gradient(
        from var(--a),
        var(--primary-color) calc(30% - var(--p)),
        var(--c) calc(50% - var(--p)) calc(50% + var(--p)),
        var(--primary-color) calc(70% + var(--p))
      )
      border-box;
    --g: linear-gradient(#000 0 0);
    -webkit-mask: var(--g), var(--g) padding-box,
      conic-gradient(
          from var(--a),
          #000d calc(30% - var(--p)),
          #000 calc(50% - var(--p)) calc(50% + var(--p)),
          #000d calc(70% + var(--p))
        )
        content-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    --_t: perspective(450px); /* the bigger, the better */
    animation: 4s linear infinite;
    animation-name: a, r;
    transition: --p 0.5s, --r 0.4s;
    cursor: pointer;
  }
  .achive-image img:hover {
    --r: 0deg;
    animation-play-state: paused;
  }
  @keyframes a {
    to {
      --a: 405deg;
    }
  }
  
  @keyframes r {
    0%,
    100% {
      transform: var(--_t) rotate3d(1, 1, 0, var(--r));
    }
    12.5% {
      transform: var(--_t) rotate3d(0, 1, 0, var(--r));
    }
    25% {
      transform: var(--_t) rotate3d(-1, 1, 0, var(--r));
    }
    37.5% {
      transform: var(--_t) rotate3d(-1, 0, 0, var(--r));
    }
    50% {
      transform: var(--_t) rotate3d(-1, -1, 0, var(--r));
    }
    62.5% {
      transform: var(--_t) rotate3d(0, -1, 0, var(--r));
    }
    75% {
      transform: var(--_t) rotate3d(1, -1, 0, var(--r));
    }
    87.5% {
      transform: var(--_t) rotate3d(1, 0, 0, var(--r));
    }
  }
.achive-text {
    display: flex;
    align-items: center;
}
.achive-text p {
    margin: 0;
    font-size: 32px;
    color: var(--dark);
}


/* career page  */
/* hiring */
.hiring-section{
    padding: 100px 0 100px;
    background-color: var(--white);
}
.hiring-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}
.hiring-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.hiring-table table{
    background-color: var(--white);
    border: 1px solid rgba(120 120 120 / 20%);
}
.hiring-section .hiring-table {
    width: 100%;
    overflow: scroll;
}
.hiring-table table th,
.hiring-table table td{
    padding: 10px 15px;
    font-weight: 500;
}
.hiring-table table td{
    color: var(--dark);
}
.hiring-table table thead tr{
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.hiring-table table tr:nth-child(even){
    background-color: var(--bg-color);
}
.hiring-table table tbody tr td:last-child,
.hiring-table table thead tr th:last-child{
    text-align: right;
}
.hiring2-section{
    padding: 100px 0 75px;
    background-color: var(--white);
}
.hiring2-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}
.hiring2-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.hiring2-section .post-hiring{
    padding: 42px 25px 25px;
    margin-bottom: 25px;
    border-radius: 10px;
    background-color: var(--dark2-fix);
    text-align: center;
    position: relative;
    z-index: 1;
    transition: 0.65s;
}
.hiring2-section .post-hiring::before{
    content: '';
    position: absolute;
    background-image: url(../images/shapes/shape6.png);
    z-index: -1;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
}
.hiring2-section .post-hiring:hover,
.hiring2-section .post-hiring:focus,
.hiring2-section .post-hiring.active{
    background-color: var(--primary-color);
}
.post-hiring span.timing {
    color: var(--white-fix);
    background-color: var(--primary-color);
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    position: absolute;
    left: 50%;
    top: -17px;
    transform: translate(-50%, 0px);
    transition: 0.65s;
}
.hiring2-section .post-hiring:hover span.timing,
.hiring2-section .post-hiring:focus span.timing,
.hiring2-section .post-hiring.active span.timing{
    background-color: var(--dark-fix);
}
.hiring2-section .post-hiring:hover .main-btn,
.hiring2-section .post-hiring:focus .main-btn,
.hiring2-section .post-hiring.active .main-btn{
    background-color: var(--white);
    color: var(--dark);
}
.hiring2-section .post-hiring .main-btn::before{
    border-color: var(--primary-color);
}

.post-hiring h3.job-title {
    color: var(--white-fix);
}
.post-hiring > p{
    color: var(--white-fix);
    border-bottom: 1px solid rgba(120 120 120 / 20%);
    padding-bottom: 15px;
}
.job-location,.salary {
    color: var(--white-fix);
    text-transform: capitalize;
    font-weight: 500;
    margin-bottom: 15px;
}
.job-location > span,
.salary > span{
    font-weight: 400;
    margin-left: 5px;
}
/* skill-section */
.skill-section{
    padding: 100px 0 75px;
    background-color: var(--dark-fix);
    position: relative;
}
.skill-section:hover .section-title h2 {
    transform: scale(1) translateY(32px);
    opacity: 1;
}
.skill-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.skill-section .section-title {
    text-align: left;
    margin-bottom: 0;
}
.skill-section .section-title span::before:not(h2>span){
    left: 15px;
}
.skill-section .section-title h2{
    color: var(--white-fix);
}
.skill-content,.skill-image{
    margin-bottom: 25px;
} 
.skill-content h2{
    font-weight: 700;
    font-size: 35px;
    color: var(--white-fix);
}
.skill-content>p{
    color: var(--white-fix);
}
.progress-bars .progress-item{
    margin-bottom: 25px;
}
.progress-bar{
     background-color: var(--primary-color);
     border-radius: 10px;
     position: relative;
     overflow: visible;
}

.progress-bar {
    width: 0;
    animation: progress-animation 3s ease-out forwards;
}

@keyframes progress-animation {
    to {
        width: var(--progress-value, 0%);
    }
}
.progress {
    border: 1px solid var(--primary-color);
    border-radius: 10px;
    padding: 2px;
    background-color: transparent;
    overflow: visible;
    transition-duration: 3s;
}
.progress-item h3 {
    font-size: 22px;
    color: var(--white-fix);
}
.progress-bar span {
    position: absolute;
    width: 30px;
    height: 30px;
    display: inline-block;
    background-color: var(--primary-color);
    border-radius: 100%;
    right: 0;
    line-height: 30px;
    color: var(--white-fix);
}
.skill-video-btn a {
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    text-align: center;
    background: var(--primary-color);
    color: var(--white-fix);
    border-radius: 100%;
    position: relative;
    z-index: 1;
}
.skill-video-btn a::before{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 100%;
    background-color: var(--primary-color);
    opacity: 0.5;
    animation: ripp 2s linear infinite;
    z-index: -1;
}
.skill-video-btn span {
    display: inline-block;
    color: var(--white-fix);
    margin-left: 15px;
    text-decoration: underline;
}
@keyframes ripp {
    from{
        transform: scale(1);
    }
    to{
        transform: scale(1.5);
        opacity: 0;
    }
}

.skill-image img {
    max-width: 500px;
    display: block;
    margin-left: auto;
    border-radius: 22px;
    width: 100%;
}
.skill-image{
    position: relative;
    z-index: 1;
}
.skill-image::before{
    content: '';
    width: 200px;
    height: 250px;
    border-radius: 20px;
    background-color: var(--primary-color);
    bottom: -15px;
    right: -15px;
    position: absolute;
    z-index: -1;
}
.skill-image .top-img {
    top: -15px;
    left: 0;
    position: absolute;
}
.skill-image .top-img img{
    width: 210px;
    height: 210px;
    object-fit: cover;
}



/* timeline section */
.timeline-section{
    padding: 100px 0 75px;
    background-color: var(--bg-color);
}
.timeline-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.timeline-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.timeline-inner{
    position: relative; 
}
.timeline-inner::before{
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    height: 100%;
    bottom: 0;
    border-left: 4px dashed var(--primary-color);
}
.timeline-inner .timeline{
    border: none;
    background-color: transparent;
}
.timeline-inner .timeline .card-body{
    background-color: var(--dark);
    border-radius: 5px;
    position: relative;
    z-index: 1;
    padding: 25px;
    transition: 0.65s;
}
.timeline-inner .timeline .card-body::before{
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../images/shapes/shape4.png');
    z-index: -1;
    opacity: 0.1;
    background-size: cover;
    background-position: center center;
}

.timeline-inner .timeline .card-body:hover{
    background-color: var(--primary-color);
}
.timeline-inner .timeline .card-body:hover span:not(.timeline-count){
    color: var(--white-fix);
}
.timeline-inner .timeline .card-body:hover .card-title{
    color: var(--white-fix);
}
.timeline-inner .timeline .card-body:hover .card-text{
    color: var(--white-fix);
}

.timeline-inner .timeline .card-body>span{
    color: var(--primary-color);
    font-size: 26px;
    font-weight: 600;
    transition: 0.65s;
}
.timeline-inner .timeline .card-body>span>span{
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
}
.timeline-inner .timeline .card-title{
    color: var(--primary-color);
    font-size: 26px;
    transition: 0.65s;
}
.timeline-inner .timeline .card-text{
    color: var(--white);
    transition: 0.65s;
}

.timeline-inner .left .timeline::before{
    width: 100px;
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: -155px;
    border-bottom: 1px dashed var(--primary-color);
}
.timeline-inner .right .timeline::before{
    width: 100px;
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: -55px;
    border-bottom: 1px dashed var(--primary-color);
}

.timeline-inner .left .timeline::after {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: var(--dark);
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: -29.2%;
    transition: 0.65s;
}


.timeline-inner .right .timeline::after {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: var(--dark);
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: -23.5%;
    transition: 0.65s;
}
.timeline-inner .timeline span.timeline-count {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    color: var(--dark);
}
.timeline-inner .timeline span.timeline-count.count-odd {
    right: -34%;
}
.timeline-inner .timeline span.timeline-count.count-even {
    left: -34%;
}
.timeline-inner .timeline:hover::after,
.timeline-inner .timeline:focus::after{
    /* outline: thick double var(--primary-color); */
    background-color: var(--primary-color);
    animation: oat 2s linear infinite;
}
@keyframes oat {
    from{
        outline: 0;
    }
    to{
        outline: thick double var(--primary-color);
    }
}
/* timeline section end */

/* funfact-about */
.funfact-about{
    padding: 100px 0 75px;
    background-color: var(--white);
}
.funfact-about .funfact-item{
    position: relative;
    border-radius: 5px;
    padding: 20px;
    background-color: var(--bg-color);
    margin-bottom: 25px;
}
.funfact-about .funfact-item h3{
    font-weight: 700;
    font-size: 45px;
    color: var(--dark);
    margin: 0;
}
.funfact-about .funfact-item span:not(h3 span){
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
}
.funfact-about .funfact-item p{
    color: var(--dark);
}
.funfact-item .icon {
    position: absolute;
    top: 5px;
    right: 15px;
    font-size: 45px;
    color: var(--primary-color);
}
.funfact-about .funfact-item:hover .icon i{
    animation: flipInX 1s;
}
/* funfact-about end */


/* sponsor  */
.sponsor-about{
    background-color: var(--dark-fix);
}
.sponsor-about .sponsor{
    height: 150px;
    line-height: 150px;
    position: relative;
    text-align: center;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sponsor-about .sponsor::after {
    position: absolute;
    content: '';
    inset: -19px;
    background-color: var(--primary-color);
    z-index: -1;
    clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
    opacity: 0;
    visibility: hidden;
    transition: 0.65s;
    transform-origin: center;
    transform: scale(1.1);
    background-image: url('../images/shapes/shape2.png');
    background-blend-mode: multiply;
    display: block;
}
.sponsor-about .sponsor:hover::after{
    visibility: visible;
    opacity: 1;
    transform-origin: center;
    transform: scale(1);
}
.sponsor-about .sponsor-img h5 {
    margin: 0;
    line-height: 150px;
}
/* sponsor  end */


/* work process */
.work-process{
    padding: 100px 0;
    background-color: var(--bg-color);
}
.work-process:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.work-process:hover .section-title .sub-title {
    transform: translateY(-80px);
}
.process-img{
    text-align: center;
    position: relative;
    margin-bottom: 25px;
}
.process-img img{
    width: 230px;
    height: 230px;
    object-fit: cover;
    display: inline-block;
    border: 6px solid var(--white);
    border-radius: 100%;
    transition: 0.65s;
}
.process-content{
    text-align: center;
}
.process-count {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: var(--dark);
    line-height: 40px;
    color: var(--white);
    top: 10px;
    transition: 0.65s;
    right: 60px;
    font-weight: 500;
}
.process:hover .process-img img,
.process:focus .process-img img{
    border-color: var(--primary-color);
}
.process:hover .process-count,
.process:focus .process-count{
    background-color: var(--white);
    color: var(--primary-color);
}


/* gallery page */
.gallery-section{
    padding: 100px 0 75px;
    background-color: var(--white);
}

.gallery-section .gallery-item{
    margin-bottom: 25px;
}

.gallery-section .gallery-item .card{
    border-radius: 0;
    border: none;
    position: relative;
}
.gallery-section .gallery-item .card::before{
    content: '';
    position: absolute;
    inset: 0;
    border: 20px solid var(--dark);
    opacity: 0.6;
}
.gallery-section .gallery-item .card::after{
    content: '';
    position: absolute;
    border: 2px dashed var(--white-fix);
    opacity: 1;
}
.gallery-section .gallery-item .card::after{
    inset: 0px;
    visibility: hidden;
}
.gallery-section .gallery-item .card:hover::before{

    border-radius: 5px;
}
.gallery-section .gallery-item .card:hover::after{
    animation: breffect2 0.5s linear;
    visibility: visible;
    inset: 18px;
}


@keyframes breffect2 {
    from{
        inset: 0px;
    }
    to{
        inset: 18px;
    }
}
.gallery-section .gallery-item .card-body{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    z-index: 1;
    transform: translate(-50%, -50%) scale(0);
    visibility: hidden;
    transition: 0.65s;
}
.gallery-section .gallery-item .card:hover .card-body{
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.gallery-section .gallery-item .card-body .gallery-title{
    position: relative;
    display: inline-block;
    margin: 0;
    color: var(--white-fix);
    padding: 25px 20px;
    font-size: 22px;
    z-index: 1;

}

.gallery-section .gallery-item .card-body .gallery-title::before,
.gallery-section .gallery-item .card-body .gallery-title::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1px;
    background-color: var(--primary-color);
    opacity: 0.6;
    z-index: -1;
}


.gallery-section .gallery-item .card-body .gallery-title::after{
    animation: titleffect2 2s linear infinite;
}

@keyframes titleffect1 {
    0%{
        transform: translate(10px, 10px);
    }
    50%{
        transform: translate(0px, 0px);
    }
    100%{
        transform: translate(10px, 10px);
    }
}
@keyframes titleffect2 {
    0%{
        transform: translate(-10px, -10px);
    }
    50%{
        transform: translate(10px, 10px);
    }
    100%{
        transform: translate(-10px, -10px);
    }
}
/* gallery page  end*/



/* my account */
.my-account{
    padding: 100px 0 75px;
    background-color: var(--white);
}
.signpageforms{
    padding: 25px;
    background-color: var(--white);
    border-radius: 10px;
    margin-bottom: 25px;
}
.signpageforms h2{
    text-align: center;
    color: var(--dark);
    margin-bottom: 25px;
    font-weight: 700;
}
.login-via_accounts ul li a {
    width: 40px;
    height: 40px;
    display: inline-block;
    text-decoration: none;
    line-height: 37px;
    border: 1px solid rgba(120 120 120 / 20%);
    text-align: center;
}
.login-via_accounts ul li a img{
    width: 24px;
    height: 24px;
    object-fit: cover;
}
.login-via_accounts ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    margin-bottom: 25px;   
}
.login-via_accounts ul li:not(:last-child){
    margin-right: 10px;
}
.loginform-inner > .text-via_email{
    font-weight: 500;
    color: var(--dark);
    display: block;
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: 25px;
}
.loginform-inner > .text-via_email span{
    display: inline-block;
    position: relative;
    background-color: var(--white);
    z-index: 1;
    padding: 0 8px;
    
}
.loginform-inner > .text-via_email::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: 50%;
    transform: translate(0%,-50%);
    background-color: rgba(120 120 120 / 20% );
    z-index: -1;
}   
.woocommerce-form-login input[type='text'],
.woocommerce-form-login input[type='password']{
    width: 100%;
    padding: 15px;
    outline: none;
    box-shadow: none;
    border: 1px solid rgba(120 120 120 / 20%);
    color: var(--dark);
    background: transparent;
}
.woocommerce-form-login .woocommerce-form-row{
    position: relative;
    margin-bottom: 30px;
}
.woocommerce-form-row label {
    font-weight: 500;
    color: var(--dark);
    position: absolute;
    left: 20px;
    top: -12px;
    background-color: var(--white);
    padding: 0 5px;
}
.woocommerce-form-login__rememberme span{
    font-weight: 500;
    color: var(--dark);
}
.woocommerce-form-login__submit {
    width: 100%;
    padding: 15px;
    border-radius: 0;
    background-color: var(--dark)!important;
    color: var(--white)!important;
    border: none;
    outline: none;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 25px;
    transition: 0.65s;
}
.woocommerce-form-login__submit:hover,
.woocommerce-form-login__submit:focus{
    background-color: var(--primary-color)!important;
    color: var(--white-fix)!important;
}
/* my account end */


/* faq  */
.faq-section{
    padding: 100px 0 100px;
    background-color: var(--white);
}
.faq-space{
    height: 350px;
    overflow: auto;
}
.faq-section .nav-pills .nav-link {
    background-color: var(--dark);
    border-radius: 0;
    padding: 15px;
    color: var(--white);
    text-decoration: none;
}
.faq-section .nav-pills .nav-link.active:not(.show .nav-link){
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.faq-section .nav-pills.show .nav-link {
    background-color: var(--bg-color);
    color: var(--dark);
    font-weight: 500;
}
.category-faq{
    margin-bottom: 15px;
}
.category-faq > a::after{
    content: '\f067';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
}
.faq-space .accordion-flush .accordion-header .accordion-button{
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    font-weight: 500;
    background: none;
}
.faq-space .accordion-flush .accordion-header .accordion-button:focus{
    box-shadow: none;
}
.about-faq .accordion h4{
	color: var(--white-fix);
}
.accordion h4{
	color: var(--dark);
}

.faq-space .accordion-item {
    border: none;
    margin-bottom: 15px;
}
.about-faq .faq-space .accordion-item {
    background: none;
}
.about-faq .faq-space .accordion-button,.about-faq .faq-space .accordion-body{
    color: var(--white-fix);
}

.faq-space .accordion-button::after{
    content: "\f078";
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--primary-color);
    border-radius: 5px;
    color: var(--white-fix);
    background-image: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.faq-space .accordion-body {
    border: 1px solid rgba(120 120 120 / 20%);
    margin-top: 15px;
}
/* faq end */



/* contact page */
iframe {
    width: 100%;
    height: 100%;
}
.cta-play-btn.map a{
    width: unset;
    height: unset;
    border: none;
    line-height: unset;
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1.5;
    transform: translateY(35px);
    font-weight: 700;
    font-size: 18px;
    color: var(--white-fix);
}
.cta-play-btn.map a i{
    font-size: 40px;
    margin-bottom: 10px;
}
.cta-play-btn.map a span{
    font-size: 16px;
    color: var(--dark-fix);
}
.contact-section{
    padding: 100px 0 75px;
    background-color: var(--bg-color);
}
.contact-section:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.contact-section:hover .section-title .sub-title {
    transform: translateY(-80px);
}

.contactus-widget .widget-contact .contact-area{
    background-color: var(--dark);
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 25px;
    display: flex;
    position: relative;
    overflow: hidden;
    transition: 0.65s;
}
.contactus-widget .widget-contact .contact-area:hover,
.contactus-widget .widget-contact .contact-area:focus-within{
    background-color: var(--primary-color);
}
.contactus-widget .widget-contact .contact-area::after,
.contactus-widget .widget-contact .contact-area::before{
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    background-color: var(--primary-color);
    right: -40px;
    transform: rotate(45deg);
    transition: 0.65s;
}
.contactus-widget .widget-contact .contact-area::before{
    right: -30px;
    opacity: 0.5;
}
.contactus-widget .widget-contact .contact-area:hover::before,
.contactus-widget .widget-contact .contact-area:focus-within::before,
.contactus-widget .widget-contact .contact-area:hover::after,
.contactus-widget .widget-contact .contact-area:focus-within::after{
    transform: rotate(225deg);
    background-color: var(--dark);
}
.contactus-widget .widget-contact .contact-icon {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    line-height: 60px;
    text-align: center;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 25px;
    margin-right: 15px;
    transition: 0.65s;
}
.contactus-widget .widget-contact .contact-info .text{
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contactus-widget .widget-contact .contact-info .text span{
    color: var(--white);
    font-size: 22px;
    font-weight: 600;
}
.contactus-widget .widget-contact .contact-info .text a{
    text-decoration: none;
    color: var(--white);
}
.contactus-widget .widget-contact .contact-area:hover .contact-icon,
.contactus-widget .widget-contact .contact-area:focus-within .contact-icon{
    background-color: var(--white-fix);
    color: var(--primary-color);
}
.contactus-widget .widget-contact .contact-area:hover .contact-info .text span,
.contactus-widget .widget-contact .contact-area:focus-within .contact-info .text span,
.contactus-widget .widget-contact .contact-area:hover .contact-info .text a,
.contactus-widget .widget-contact .contact-area:focus-within .contact-info .text a{
    color: var(--white-fix);
}
.send-your-enquiry .wpcf7-form p:nth-child(2){
    width: 49%;
    float: left;
}
.send-your-enquiry .wpcf7-form p:nth-child(3){
    width: 49%;
    float: right;
}
.send-your-enquiry .wpcf7-form p input[type='text'],
.send-your-enquiry .wpcf7-form p input[type='email'],
.send-your-enquiry .wpcf7-form p .wpcf7-textarea{
    width: 100%;
    outline: none;
    box-shadow: none;
    padding: 10px 15px;
    color: var(--dark);
    background-color: var(--white);
    border: 1px solid var(--primary-color);
    border-radius: 3px;
}
.send-your-enquiry .wpcf7-form p label{
    width: 100%;
    font-weight: 500;
    color: var(--dark);
}
.send-your-enquiry .wpcf7-form p input[type='submit']{
    background-color: var(--primary-color);
    border: none;
    outline: none;
    color: var(--white-fix);
    padding: 10px 15px;
    border-radius: 4px;
}


/* section office address */
.office-address{
    padding: 100px 0;
    overflow: hidden;
}
.office-address:hover .section-title h2 {
    transform: scale(1.3) translateY(32px);
    opacity: 1;
}

.office-address:hover .section-title .sub-title {
    transform: translateY(-80px);
}

.country-office {
    margin-top: 35px;
}
.country-image {
    text-align: center;
    position: relative;
    /* overflow: hidden; */
    width: 200px;
    margin: 0 auto;
    border-radius: 100%;
    transition-delay: 100ms;
}
.country-image::before{
    content: '';
    position: absolute;
    background-color: var(--dark);
    opacity: 0.9;
    transition: 0.3s;
    height: 100px;
    width: 200px;
    border-radius: 10rem 10rem 0 0;
    transform: scaleY(-1);
    bottom: 0;
    left: 0;
}
.country-image::after{
    content: '';
    position: absolute;
    inset: 0;
    border: 4px solid var(--primary-color);
    border-radius: 100%;
}
.country-image>img{
    max-width: 200px;
    height: 200px;
    border-radius: 100%;
    margin: 0 auto;
    border: 4px solid var(--primary-color);
}
.country-content .flag-image img{
    display: inline-block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    border: 3px solid var(--primary-color);
}
.flag-image i {
    width: 70px;
    height: 70px;
    line-height: 70px;
    background-color: var(--dark);
    border-radius: 100%;
    font-size: 26px;
    color: var(--primary-color);
    border: 3px solid var(--primary-color);
}
.office3 .country-image {
    width: 200px;
    height: 200px;
    background-color: var(--primary-color);
}
.country-content {
    text-align: center;
    position: absolute;
    margin: 0 auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(40px);
    z-index: 1;
    transition: 0.3s;
}
.country-content .flag-image{
    margin-bottom: 10px;
}
.country-text h4 a{
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
}
.country-text p{
    color: var(--white);
    visibility: hidden;
    
}
.country-image:hover::before,
.country-image:focus::before{
    height: 200px;
    border-radius: 10rem;
}
.country-image:hover .country-content:not(.office3 .country-content) ,
.country-image:focus .country-content:not(.office3 .country-content) {
    transform: translateY(-35px);
}
.country-image:hover .country-text p:not(.office3 .country-text p)  ,
.country-image:focus .country-text p:not(.office3 .country-text p) {
    visibility: visible;
    transition: 0.3s;
}

@media(min-width: 992px){
.office-address .row{
    perspective: 10px;
    transform: perspective(300px) rotateX(20deg);
    will-change: perspective;
    perspective-origin: center center;
    transition: all 1.3s ease-out;
    justify-content: center;
    transform-style: preserve-3d;
}
.office-address .row:hover {
    perspective: 1000px;
    transition: all 1.3s ease-in;
    transform: perspective(10000px) rotateX(0deg);
}
.office1,.office2,.office4,.office5{
    transform-style: preserve-3d;
    opacity: 0;
    transition: all 0.3s ease;
    transition-delay: 1s;
    position: relative;
    cursor: pointer;
}
.office1 {
    transform: translateZ(-50px) ;
  }
  
  .office2 {
    transform: translateZ(-25px);
  }
  
  .office3 {
    opacity: 1;
  }
  
  .office4 {
    transform: translateZ(-25px) ;
  }
  
  .office5 {
    transform:  translateZ(-50px);
  }

  .office-address .row:hover > div {
    opacity: 1;
    transition-delay: 0s;
  }
}

/* social */
.social_info{
    position: relative;
    padding: 100px 0;
    z-index: 1;
    overflow: hidden;
}
.social_info::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--dark-fix);
    opacity: 0.7;
    z-index: -1;
}
.h_100{
    height: 100px;
}
.social_area {
    position: relative;
}
.social_area.left .bar-icon,.social_area.right .bar-icon{
    width: 90px;
    height: 90px;
    line-height: 87px;
    text-align: center;
    border-radius: 100%;
    border: 5px solid var(--white-fix);
    font-size: 30px;
    background-color: var(--primary-color);
    color: var(--white-fix);
    position: absolute;
    right: 0;
    z-index: 2;
    top: 50%;
    transform: translate(0px, -50%);
}
.social_area.right .bar-icon{
    left: 0;
}
.social_area.left .social_text,.social_area.right .social_text{
    height: 120px;
    background-color: var(--primary-color);
    padding: 0 90px 0 20px;
    position: relative;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    z-index: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.social_info .social_area.right .social_text{
    padding: 0 20px 0 90px;
}
.social_area.left .social_text::before,.social_area.right .social_text::before{
    content: '';
    position: absolute;
    inset: 0;
    right: 14px;
    background: var(--white-fix);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    z-index: -1;
}
.social_area.right .social_text::before{
    left: 14px;
    right: 0;
}
.social_area.left .social_text::after, .social_area.right .social_text::after{
    content: '';
    position: absolute;
    inset: 3px;
    right: 19px;
    left: 0;
    background: var(--dark-fix);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    z-index: -1;
}
.social_area.right .social_text::after{
    left: 19px;
    right: 0;
}
.social_info .social_area.right .social_text,
.social_info .social_area.right .social_text::after,
.social_info .social_area.right .social_text::before{
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}
.social_area .social_text h5{
    color: var(--white-fix);
    text-decoration: none;
    font-size: 26px;
    letter-spacing: 2px;
    margin-bottom: 0;
}
.social_icons, .contact_icons {
    height: 100%;
}
.social_icons ul, .contact_icons ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
}
.social_icons ul li:not(:last-child),  .contact_icons ul li:not(:last-child){
    margin-right: 25px;
}
.social_icons ul li a, .contact_icons ul li a{
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 100%;
    background-color: var(--primary-color);
    color: var(--white-fix);
    font-size: 35px;
}
/* contact page end */


/* 404 page */
.section-404,.section-500{
    padding: 100px 0 100px;
    background-color: var(--white);
}
.section-404 .card-404,.section-500 .card-500 {
    text-align: center;
}
.card-404 h2,.card-500 h2{
    font-size: 220px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    line-height: 1;
    text-shadow: 5px 5px var(--bg-color);
}
.card-404 h2 i {
    font-size: 180px;
    margin: 0 10px;
    color: var(--dark);
    animation: moveIcon 10s linear infinite;
}
.card-404 .not-found,.card-500 .not-found{
    font-size: 40px;
    font-weight: 700;
    color: var(--dark);
}
@keyframes moveIcon {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(0.8) rotate(360deg);
    }
    100%{
        transform: scale(1) rotate(-360deg);
    }
}


/* system section */
.system_section{
    padding: 100px 0 100px;
    background-color: var(--white);
}
.system_section h2 {
    font-size: 30px;
    font-weight: 600;
    color: var(--dark);
}
.system_section p{
    color: var(--dark);
}
.system_section form {
    width: 100%;
    background-color: var(--bg-color);
    padding: 25px;
}
.system_section form input[type='password'],
.system_section form input[type='email']{
    width: 100%;
    border: none;
    background-color: var(--white);
    color: var(--dark);
    padding: 10px 15px;
    margin-bottom: 25px;
    outline: none;
}
.system_section form input[type='submit']{
    width: 100%;
    border: none;
    background-color: var(--primary-color);
    color: var(--white-fix);
    padding: 10px 15px;
    outline: none;
}
.system_section form input[type='text']{
    flex: 1;
    border: none;
    background-color: var(--white);
    color: var(--dark);
    padding: 10px 15px;
    outline: none;
}
.system_section form button{
    padding: 10px 15px;
    border: none;
    outline: none;
    background-color: var(--primary-color);
    color: var(--white-fix);
}
.system_section form > div{
    position: relative;
    display: flex;
}
.system_section form p{
    display: block;
    font-weight: 500;
    color: var(--dark);
}
.system_section form > label{
    display: block;
    margin-bottom: 15px;
    font-weight: 500;
}
.system_section form label{
    display: block;
}
.email-confirm {
    text-align: center;
}
.email-confirm .icon {
    font-size: 60px;
    color: var(--primary-color);
}
.email-confirm a{
    text-decoration: none;
    color: var(--dark);
    font-size: 26px;
    font-weight: 700;
}
.system_section .bottom-line{
    margin-top: 15px;
}
/* system section end */







/* .product-single */
div.product-single,
section.product-single{
    padding: 100px 0 75px;
    background: var(--white);
    border: none;
}

.wc-tabs,
.a-unordered-list {
    padding: 0;
    list-style: none;
}

.wc-tabs li {
    display: inline-block;
    margin: 0 5px;
}

.wc-tabs li a {
    text-decoration: none;
    font-size: 22px;
    font-weight: 600;
    color: var(--dark);
    padding: 5px 10px;
    display: inline-block;
    transition: 0.65s;
}

.wc-tabs li.active a {
    border-bottom: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.wc-tabs li a:hover a,
.wc-tabs li a:focus-within a {
    color: var(--primary-color);
}
.woocommerce-tabs .tabs.wc-tabs{
    text-align: center;
    border-bottom: 1px solid rgba(120 120 120 / 20%);;
}
.faq-section.product-faq{
    padding: 15px;
    border-radius: 10px;
    background-color: var(--bg-color);
}
.woocommerce-Reviews .comment-form .comment-form-comment textarea {
    width: 100%;
    outline: none;
    border: none;
    border-radius: 5px;
    background-color: var(--white);
}
.woocommerce-Tabs-panel{
    background-color: var(--bg-color);
    padding: 15px;
    border-radius: 10px;
}
.woocommerce-Tabs-panel h2 {
    font-weight: 600;
    color: var(--dark);
}
.woocommerce-Tabs-panel ul li span{
    color: var(--dark)
}


.product_video_img {
    width: 100px;
    height: 100px;
}

.expand-button-hidden {
    position: absolute;
    top: 5px;
    right: 10px;
}

#content div.product div.images,
div.product div.images,
#content div.product div.images,
div.product div.images {
    float: left;
    width: 48%;
}

.product-single div.product div.images {
    margin-bottom: 2em;
}



.product-single #content div.product div.summary {
    padding: 0 30px;
    margin-bottom: 3em;
}

#content div.product div.summary,
div.product div.summary,
#content div.product div.summary,
div.product div.summary {
    float: right;
    width: 48%;
    clear: none;
    padding: 20px;
}

.product-single .add_to_cart_button,
.product-single div.product {
    overflow: visible !important;
}

.product-single div.product {
    margin-bottom: 0;
    position: relative;
}

.product-single div.product div.images .woocommerce-product-gallery__image:nth-child(1) {
    padding: 30px;
    background: var(--bg-color);
    margin-bottom: 25px;
}

.woocommerce-product-gallery__image {
    position: relative;
}

iframe {
    max-width: 100%;
}

.storely_magnifier_gallery {
    list-style: none;
    padding: 0;
    margin-top: 30px;
    text-align: center;
}

.product-single .owl-carousel .owl-item img {
    display: inline-block;
}

.product-single .owl-prev,
.product-single .owl-next {
    width: 20px;
    height: 20px;
    font-size: 10px;
}

.product-single #product-32 {
    width: 100%;
}

.product-single .woocommerce-tabs {
    clear: both;
    margin-bottom: 60px;
}

.woocommerce-product-gallery__image .woocommerce-main-image img {
    max-width: 350px;
    height: 350px;
    margin: 0 auto;
    display: block;
    object-fit: cover;
}

a.storely_pv-popup {
    bottom: 10px;
    font-size: 25px;
    line-height: 0;
    opacity: 1;
    outline: medium none !important;
    padding: 15px 0;
    position: absolute;
    right: 13px;
    text-decoration: none;
    z-index: 10;
    color: #444;
    display: none;
}

.product-single .sale-ribbon {
    position: absolute;
    background: var(--primary-color);
    top: 10px;
    left: 20px;
    padding: 5px;
    color: #fff;
    z-index: 10;
}

.entry-summary h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--secondary-color);
}

.product-single .price .woocommerce-Price-amount {
    color: var(--secondary-color);
    font-weight: 500;
}
.thumbnails .accron_magnifier_gallery{
    padding: 0;
    margin: 0;
    list-style: none;
}
.thumbnails .accron_magnifier_gallery li{
    display: inline-block;
    background-color: var(--bg-color);
    padding: 15px;
}
.thumbnails .accron_magnifier_gallery li img{
    max-width: 115px;
    height: 115px;
    object-fit: contain;
}

.cart .quantity {
    margin-bottom: 20px;
}

.cart .quantity label {
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 600;
    margin-right: 10px;
}

.cart .quantity input {
    width: 50px;
    outline: none;
    border-radius: 0;
    border: 1px solid #d8d8d8;
    padding: 5px;
}

.product-single .cart button {
    background: var(--dark);
    color: var(--white);
    border: none;
    padding: 7px 15px;
    float: left;
    margin-right: 10px;
    transition: 0.65s;
    border-radius: 5px;
}

.product-single .cart button:hover,
.product-single .cart button:focus-within {
    background: var(--primary-color);
    color: var(--white-fix);
}

.product-single .cart .need-help {
    background: var(--primary-color);
    border: none;
    border-radius: 0;
    padding: 7px 15px;
    margin: 0;
}

.product-single .text .yith-wcwl-add-button .add_to_wishlist {
    border-radius: 3px;
    background-color: transparent;
    color: var(--primary-color);
}
.product-single .text .yith-wcwl-add-button .add_to_wishlist:hover,
.product-single .text .yith-wcwl-add-button .add_to_wishlist:focus {
    color: var(--white-fix);
    background: var(--primary-color);
}
.product_meta .posted_in {
    font-size: 16px;
    color: var(--secondary-color);
    font-weight: 600;
}
.thumbnails .storely_magnifier_gallery {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}

.product_meta {
    margin-bottom: 15px;
}

.product_meta .posted_in a {
    text-decoration: none;
    color: var(--primary-color);
}

.product-single .widget_social_widget h6 {
    color: var(--secondary-color);
    font-weight: 600;
}
.product-single .widget_social_widget ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}
.product-single .widget_social_widget ul li a {
    width: 40px;
    height: 40px;
    background: var(--dark);
    box-shadow: 0 0 6px -3px var(--primary-color);
    display: inline-block;
    text-align: center;
    line-height: 40px;
    border-radius: 100%;
    margin-right: 10px;
    color: var(--white);
    transition: 0.65s;
}
.product-single .widget_social_widget ul li a:hover,
.product-single .widget_social_widget ul li a:focus{
    background: var(--primary-color);
    color: var(--white-fix);
}

.product-single #single-product {
    background: transparent;
}

.product-single .wishlist-head {
    border-bottom: 1px solid #000;
    /*margin: 0 0 30px;*/
    padding: 0 0 30px;
}

.product-single .wishlist-head h5 {
    margin: 0;
}

.product-single .storely-woowishlist-item:not(.wishlist-head) {
    padding: 30px 0;
    border-bottom: 1px solid #d8d8d8;
}

.product-single .storely-woowishlist-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.product-single span.dashicons.dashicons-dismiss:before {
    content: "\f00d";
    font-family: 'FontAwesome';
    width: 20px;
    height: 20px;
    display: block;
    text-align: center;
    line-height: 19px;
    border-radius: 30px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    transition: 0.65s;
    font-size: 12px;
}

.product-single span.dashicons.dashicons-dismiss:hover:before {
    background: var(--primary-color);
    color: #fff;
}

.product-single .storely-woowishlist-item .add_to_cart_button {
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    font-weight: 500;
    transition: 0.65s;
}

.product-single .storely-woowishlist-item .add_to_cart_button:hover {
    background: var(--secondary-color);
}

.product-single .storely-woocomerce-list__product-title a {
    color: var(--primary-color);
    transition: 0.65s;
}

.product-single .storely-woocomerce-list__product-title a:hover {
    text-decoration: underline;
}
.product-section.related-product{
    padding: 0;
    background: transparent;
}

/* footer animation */
circle {
    r: 5%;
  }
  circle.grow {
    r: 30%;
    transition: r 1s ease-out;
  }
  circle.shrink {
    r: 0%;
    transition: r 10s ease-in;
  }


  /* theme unit test */
.theme-unit{
    padding: 100px 0 100px;
}



/* preloader */
/**! 24. preloader **/
.preloader {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 999999;
    height: 100%;
    width: 100%;
  }
  
  .preloader .preloader-wapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100vh;
  }
  
  .preloader .loader-section {
    background-color: #fff;
    height: 100%;
    position: fixed;
    top: 0;
    width: calc(50% + 1px);
  }
  
  .preloader .loader-section.section-right {
    right: 0;
  }
  
  .preloader .loader-section.section-left {
    left: 0;
  }
  
  .preloader .loaded .section-right {
    -webkit-transform: translateX(101%);
        -ms-transform: translateX(101%);
            transform: translateX(101%);
    -webkit-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
    -o-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
    transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  }
  
  .preloader .loaded .section-left {
    -webkit-transform: translateX(-101%);
        -ms-transform: translateX(-101%);
            transform: translateX(-101%);
    -webkit-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
    -o-transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
    transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
  }
  
  .preloader .spinner {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 99;
}
.preloader .spinner:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
.preloader .spinner:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.preloader .loaded .spinner {
    opacity: 0;
    -webkit-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
    visibility: hidden;
  }



  



       

  #socialicon {
    left: -100%;
    transform: translatex(-50%);
    top: 0;
    display: none;
    position: absolute;
}

  #contacticon {
    right: -100%;
    transform: translatex(50%);
    top: 0;
    display: none;
    position: absolute;
}

  /* #contacticon {
      height: 100%;
    transform: translateX(100%);
    transition: 0.6s;
    visibility: hidden;
} */


#socialicon.activate, #contacticon.activate {
    transform: translateX(0); visibility: visible;
}



/******************** Start WP TEST CSS *************/

.page-wrapper{
    padding: 100px 0;
}


h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-weight:400;
    margin: 0 0 20px;
    font-weight: 600;
}

h1, .h1 {
    font-size: 36px;
    line-height: 1.2;
}
h2, .h2 {
    font-size: 32px;
    line-height: 1.2;
}
h3, .h3 {
    font-size: 28px;
    line-height: 1.2;
}
h4, .h4 {
    font-size: 24px;
    line-height: 1.2;
}
h5, .h5 {
    font-size: 20px;
    line-height: 1.2;
}
h6, .h6 {
    font-size: 16px;
    line-height: 1.2;
}

/* Blockquote*/
blockquote { 
    padding: 10px 20px;
    margin: 0 0 20px;
    background: #000;
}
blockquote { 
    font-size: 15px;
    font-style: italic;
    font-weight: 500;
    line-height: 21px;
    letter-spacing: 1px;
    border-left: 5px solid var(--primary-color);
    color: #ffffff;
}
blockquote cite, blockquote small { 
    font-size: 15px; 
    display: block; 
    line-height: 20px; 
    padding-top: 15px; 
    color: var(--primary-color);
}
blockquote em, blockquote i, blockquote cite { font-style: normal; }
blockquote strong, blockquote b { font-weight: 600; }


/* .site a { */
    /* color: #f77c29; */
    /* text-decoration: underline; */
    
/* } */
/* .site a:hover { */
    /* color: #f77c29; */
    /* text-decoration: dotted underline; */
    
/* } */
/*Address*/
address { font-style: italic; margin: 0 0 20px; font-weight: 600; letter-spacing: 0.5px; line-height: 27px; }
/*Table*/
table { 
    border: 1px solid #e9e9e9;
    background-color: var(--secondary-color);
    color: var(--white);
    border-spacing: 0; 
    letter-spacing: 0.5px; 
    margin: 0 0 20px; 
    text-align: left; 
    width: 100%; 
}
table th {     
    padding: 10px 10px;
    color: var(--white-fix); 
    background: var(--primary-color);
}
table th {     
    border-right: solid 1px #636468;
}
table th {     
    border-right: solid 1px #4c4c4c5c;
}
table td { border: 1px solid rgba(120 120 120 / 20%); padding: 8px 10px; color: var(--dark); }

/*Definition Lists*/
dl { 
    margin-bottom: 25px; 
    margin-top: 0; 
}
dl dt { 
    font-weight: 700; 
    margin-bottom: 10px; 
    color: #222222;
    font-family: 'Open Sans', sans-serif;
}
dl dd { 
    margin-bottom: 20px; 
    margin-left: 15px; 
}


abbr, tla, acronym { text-decoration: underline; cursor: help; }
acronym { border-bottom: 0 none; }
big { font-size: large; font-weight: 600; }
s, strike, del { text-decoration: line-through; }
em, cite, q { 
    font-style: italic; 
    font-weight: 600;
    color: var(--primary-color
    );
}
ins { text-decoration: none; padding: 0 3px; }
code, kbd, tt, var, samp, pre {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    background: #333;
    color: #ffffff;
    padding: 2px 5px;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.3125;
    max-width: 100%;
    overflow: auto;
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
mark {
    color: #000;
    background: #ff0;
    padding: 2px 5px;
}
.search-form label {
    width: 100%;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: bold;
}
/******************** End WP TEST CSS *************/


.product-section.woocommerce ul.products li.product {
    margin: 0 0 25px;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

.wp-block-image img,.has-post-thumbnail img,.post-content img{
  display:block;
  margin:10px auto;
	width: auto;
}