/*
Theme Name: Smarthome
Theme URI: https://webyar.net
Author: Mohamad Mehdi Hajati
Description: This is an Ecommerce theme for smart Home ID  
Tags: Ecommerce
Version: 1.3
Requires at least: 6.5.0
Tested up to: 5.4
Requires PHP: 7.4
Use it to make something cool, have fun, and share what you've learned with others.
*/
:root {
    --primary-color: rgb(134, 83, 138);
    --low-opacity-primary-color: rgba(134, 83, 138, 0.7);
    --low-opacity-secondary-color: rgba(203, 150, 206, 0.71);
    --gray-color: rgb(153, 153, 153);
    --title-color: #440748;
    --shadow-color: rgba(115, 155, 208, 0.3);
    --secondary-color: rgb(203, 150, 206);
    --orange-color: #f58634;
    --text-color: #000;
    --white-color: #fff;
    --bg-cta: rgb(68, 7, 72);
    --footer-bg: rgb(245, 233, 246);
}

@font-face {
    font-family: 'yekanBakh';
    src: url(fonts/YekanBakhFaNum-Regular.woff2);
    font-display: swap;
}

@font-face {
    font-family: 'yekanBakh-bold';
    src: url(fonts/YekanBakhFaNum-Bold.woff2);
    font-display: swap;
}

* {
    margin: 0;
    padding: 0
}

/* html {
    overflow-x: hidden
} */

body {
    font-family: 'yekanBakh', tahoma;
    direction: rtl;
}
body.home{
    overflow-x: hidden !important
}
.bottom-10{bottom:10%;}

img {
    height: auto;
}

h2.indexHeaderTitle {
    font-size: 2rem;
    color: var(--title-color)
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'yekanBakh-bold',
    tahoma
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.8rem
}

h3 {
    font-size: 1.6rem
}

h4 {
    font-size: 1.4rem
}

h5 {
    font-size: 1.2rem
}

h6 {
    font-size: 1rem
}

ul {
    padding-right: 0 !important
}

p {
    margin-bottom: 0;
    color: var(--text-color);
    line-height: 2.3
}

a,
a:hover {
    text-decoration: none
}

.text-justify {
    text-align: justify
}

.text-secondary {
    color: var(--title-color) !important
}

.container-90 {
    width: 90%;
    margin: 0 auto
}

.container-80 {
    width: 80%;
    margin: 0 auto
}

.container-70 {
    width: 70%;
    margin: 0 auto
}

.w-90 {
    width: 90%
}

.w-10 {
    width: 10%
}

.headerTitle strong {
    color: var(--primary-color);
    font-family: 'kalameh-bold', tahoma;
    font-size: 1.2rem
}

.headerTitle h1 {
    font-size: 1rem;
    font-family: 'kalameh', tahoma
}
.searchButton,
.width-of-bottom-cart .button {
    background: var(--primary-color);
    color: var(--white-color);
    transition: all .1s linear .1s;
    font-size: 1.3rem
}

.searchButton {
    background: var(--secondary-color) !important
}

.searchButton:hover {
    border: 1px solid var(--secondary-color) !important;
    background: var(--white-color);
    color: var(--primary-color)
}

.header-icons :where(a, button) {
    background: var(--white-color);
    border: none;
    filter: drop-shadow(0 0 0.1rem);
    font-size: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.2rem;
    border-radius: .3125rem;
    text-decoration: none;
    margin: 0 .5rem;
    color: var(--primary-color);
    transition: all .1s linear .1s
}

.header-icons :where(a, button):hover {
    background: var(--primary-color);
    color: var(--white-color)
}

.mainCarousel img {
    object-fit: cover;
    max-height: 700px;
    object-position: top;
}

.carouselCaption {
    position: absolute;
    top: 50%;
    left: 4%;
    width: 25%;
    background: var(--low-opacity-secondary-color);
    color: var(--white-color);
    padding: 1rem;
    border-radius: .3125rem
}

.carouselCaption h2 {
    font-size: 1.3rem
}

.carouselCaption p {
    color: var(--white-color);
    text-align: justify
}

.carouselCaption a {
    color: var(--primary-color);
    background: var(--white-color);
    padding: .3rem .8rem;
    border-radius: .3125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    float: left
}

.site-navbar {
    margin-bottom: 0;
    z-index: 26;
    position: relative;
    z-index: 25;
    width: 100%
}

.site-navbar-inner {
    top: unset !important;
    position: relative !important;
    margin-top: unset
}

.site-navbar.transparent {
    background: transparent
}

.site-navbar.absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.icomoon-shopping-cart::before {
    font-size: 1.4rem
}

.icomoon-magnifying-glass::before {
    font-size: 1.4rem
}

.site-navbar .site-navigation {
    margin-top: unset
}

.site-navbar .site-navigation-inner {
    margin-top: unset
}

.site-navbar .site-navigation .site-menu {
    margin-bottom: 0
}

.site-navbar .site-navigation .site-menu .active>a {
    color: #FFFEF7
}

body.offcanvas-menu:before {
    opacity: 1;
    visibility: visible
}

.catImgPara {
    max-width: 100%;
    position: absolute;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    opacity: .7;
    display: none
}

a {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    text-decoration: none
}

.fixed-menu {
    top: 0;
    z-index: 700;
    background: var(--white-color);
    width: 100%;
    filter: var(--filter-shadow);
    right: 0;
    left: 0
}

.site-logo img {
    width: 128px
}

.mobileHeader img {
    width: 100px
}

.absoluteDescribtion {
    position: absolute;
    top: 0;
    z-index: 10;
    background: var(--primary-color);
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1.2rem;
    font-family: 'kalameh';
    color: var(--white-color);
    padding: .5rem;
    border-radius: 0 0 1rem 1rem
}

.mobileHeader :where(a:not(:nth-child(2)), button) {
    font-size: 1.5rem;
    margin: 0 !important;
    background: var(--primary-color);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    border-radius: .3125rem;
    border: none
}

.hero {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.site-navbar.transparent {
    background: var(--primary-color)
}

.site-navbar.absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.site-navbar .site-logo {
    position: relative;
    right: 0;
    font-size: 24px !important
}
.site-navbar .site-navigation .site-menu {
    margin-bottom: 0
}

.site-navbar .site-navigation .site-menu .active>a {
    background: var(--primary-color);
    color: var(--white-color);
    border-radius: 1rem;
    display: inline-block;
    padding: 5px 20px
}

.site-navbar .site-navigation .site-menu a {
    text-decoration: none !important;
    display: inline-block
}

.site-navbar .site-navigation .site-menu>li {
    display: inline-block;
    padding: 5px 0
}

.site-navbar .site-navigation .site-menu>li>a {
    padding: 7px 5px;
    color: var(--white-color);
    font-size: 16px;
    text-decoration: none !important;
    border: 2px solid transparent
}

.icon-menu {
    color: var(--aboutus-items)
}

.site-navbar .site-navigation .site-menu>li>a {
    padding: 5px 7px;
    display: inline-block;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    border-radius: .3125rem
}

.site-navbar .site-navigation .site-menu>li>a:hover {
    border-radius: .3125rem;
    display: inline-block;
    background-color: var(--white-color);
    color: var(--primary-color)
}

.site-navbar-inner .site-navigation .site-menu>li>a {
    border: 2px solid transparent;
    border-radius: 6px;
    display: inline-block
}

.site-navbar .site-navigation .site-menu .menu-item-has-children {
    position: relative
}

.site-navbar .site-navigation .site-menu .menu-item-has-children>a {
    position: relative;
    padding-left: 23px
}

.site-navbar .site-navigation .site-menu .menu-item-has-children>a:before {
    position: absolute;
    content: "\e910";
    font-size: 16px;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-family: 'webyar'
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu {
    visibility: hidden;
    opacity: 0;
    top: 100%;
    position: absolute;
    text-align: left;
    border-top: 2px solid var(--primary-color);
    -webkit-box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.1);
    padding: 0;
    margin-top: 20px;
    margin-left: 0;
    background: #fff;
    -webkit-transition: .2s 0;
    -o-transition: .2s 0;
    transition: .2s 0;
    z-index: 3
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu.arrow-top {
    position: absolute
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu.arrow-top:before {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: var(--primary-color);
    border-bottom-color: #fff;
    border-width: 10px;
    margin-left: -10px
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu a {
    text-transform: none;
    letter-spacing: normal;
    -webkit-transition: 0 all;
    -o-transition: 0 all;
    transition: 0 all;
    color: #343a40
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu .active>a {
    color: var(--services-bg) !important
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 220px;
    text-align: right
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li>a {
    padding: 9px 20px;
    display: block;
    font-size: .9rem
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li>a:hover {
    background: #eee;
    border: solid 2px transparent
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li.menu-item-has-children>a {
    position: relative
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li.menu-item-has-children>a:after {
    position: absolute;
    left: 5px;
    content: "\f104";
    font-family: 'icomoon'
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li.menu-item-has-children>.sub-menu,
.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li.menu-item-has-children>ul {
    right: 100%;
    top: 0
}

.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li.menu-item-has-children:hover>a,
.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li.menu-item-has-children:active>a,
.site-navbar .site-navigation .site-menu .menu-item-has-children .sub-menu>li.menu-item-has-children:focus>a {
    background: #fafafb;
    color: var(--primary-color)
}

.site-navbar .site-navigation .site-menu .menu-item-has-children:hover>a,
.site-navbar .site-navigation .site-menu .menu-item-has-children:focus>a,
.site-navbar .site-navigation .site-menu .menu-item-has-children:active>a {
    color: var(--primary-color);
    background-color: var(--white-color)
}

.site-navbar .site-navigation .site-menu .menu-item-has-children:hover {
    border-radius: 1rem;
    color: #fff
}

.site-navbar-inner .site-navigation .site-menu .menu-item-has-children:hover {
    background: unset !important
}

.site-navbar .site-navigation .site-menu .menu-item-has-children:hover,
.site-navbar .site-navigation .site-menu .menu-item-has-children:focus,
.site-navbar .site-navigation .site-menu .menu-item-has-children:active {
    cursor: pointer
}

.site-navbar .site-navigation .site-menu .menu-item-has-children:hover>.sub-menu,
.site-navbar .site-navigation .site-menu .menu-item-has-children:focus>.sub-menu,
.site-navbar .site-navigation .site-menu .menu-item-has-children:active>.sub-menu {
    -webkit-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
    margin-top: 0;
    visibility: visible;
    opacity: 1
}

.site-mobile-menu {
    width: 300px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 27;
    padding-top: 20px;
    background: #fff;
    height: calc(100vh);
    -webkit-transform: translateX(110%);
    -ms-transform: translateX(110%);
    transform: translateX(110%);
    -webkit-box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
    box-shadow: -10px 0 20px -10px rgba(0, 0, 0, 0.1);
    -webkit-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out;
    transition: .3s all ease-in-out
}

.offcanvas-menu .site-mobile-menu {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%)
}

.site-mobile-menu .site-mobile-menu-header {
    width: 100%;
    float: left;
    padding-left: 20px;
    padding-right: 20px
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close {
    float: right;
    margin-top: 8px;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    position: relative
}

.site-mobile-menu-close .webyar-right-circle {
    position: static !important
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span {
    font-size: 30px;
    display: inline-block;
    padding-left: 10px;
    padding-right: 0;
    line-height: 1;
    cursor: pointer;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    color: var(--primary-color)
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-close span:hover {
    color: #f8f9fa
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo {
    float: left;
    margin-top: 10px;
    margin-left: 0
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a {
    display: inline-block;
    text-transform: uppercase
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a img {
    max-width: 70px
}

.site-mobile-menu .site-mobile-menu-header .site-mobile-menu-logo a:hover {
    text-decoration: none
}

.site-mobile-menu .site-mobile-menu-body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: relative;
    padding: 0 20px 20px;
    height: calc(100vh - 52px);
    padding-bottom: 150px
}

.site-mobile-menu .site-nav-wrap {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative
}

.site-mobile-menu .site-nav-wrap a {
    padding: 10px 20px;
    display: block;
    position: relative;
    color: #212529;
    text-align: right
}

.site-mobile-menu .site-nav-wrap a:hover {
    color: #0e5098;
    background: #eee;
    border-radius: 5px
}

.site-mobile-menu .site-nav-wrap li {
    position: relative;
    display: block
}

.site-mobile-menu .site-nav-wrap li.active>a {
    color: #007bff
}

.site-mobile-menu .site-nav-wrap .arrow-collapse {
    position: absolute;
    left: 0;
    top: 10px;
    z-index: 20;
    width: 36px;
    height: 36px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:hover {
    background: #f8f9fa
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
    font-size: 12px;
    z-index: 20;
    font-family: "icomoon";
    content: "\e90c";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
    -ms-transform: translate(-50%, -50%) rotate(-180deg);
    transform: translate(-50%, -50%) rotate(-180deg);
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease
}

.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.site-mobile-menu .site-nav-wrap>li {
    display: block;
    position: relative;
    float: right;
    width: 100%
}

.site-mobile-menu .site-nav-wrap>li>a {
    padding-left: 20px;
    font-size: 20px;
    text-align: right
}

.site-mobile-menu .site-nav-wrap>li>ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.site-mobile-menu .site-nav-wrap>li>ul>li {
    display: block
}

.site-mobile-menu .site-nav-wrap>li>ul>li>a {
    padding-left: 40px;
    font-size: 16px
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul {
    padding: 0;
    margin: 0
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li {
    display: block
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li>a {
    font-size: 16px;
    padding-left: 60px
}

.site-mobile-menu .site-nav-wrap[data-class="social"] {
    float: left;
    width: 100%;
    margin-top: 30px;
    padding-bottom: 5em
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li {
    width: auto
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li:first-child a {
    padding-left: 15px !important
}

.site-mobile-menu .site-nav-wrap .arrow-collapse:before {
    font-size: 12px;
    z-index: 20;
    font-family: 'webyar';
    content: "\e90c";
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-180deg);
    transform: translate(-50%, -50%) rotate(-180deg);
    -webkit-transition: .3s all ease;
    transition: .3s all ease
}

.site-mobile-menu .site-nav-wrap .arrow-collapse.collapsed:before {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.site-mobile-menu .site-nav-wrap>li {
    display: block;
    position: relative;
    float: left;
    width: 100%
}

.site-mobile-menu .site-nav-wrap>li>a {
    padding-left: 20px;
    font-size: 20px;
    transition: all .3s;
    border-radius: .5rem
}

.site-mobile-menu .site-nav-wrap>li>a:hover {
    background-color: #ddd
}

.site-mobile-menu .site-nav-wrap>li>ul {
    padding: 0;
    margin: 0;
    list-style: none
}

.site-mobile-menu .site-nav-wrap>li>ul>li {
    display: block
}

.site-mobile-menu .site-nav-wrap>li>ul>li>a {
    padding-left: 40px;
    font-size: 16px
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul {
    padding: 0;
    margin: 0
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li {
    display: block
}

.site-mobile-menu .site-nav-wrap>li>ul>li>ul>li>a {
    font-size: 16px;
    padding-left: 60px
}

.site-mobile-menu .site-nav-wrap[data-class="social"] {
    float: left;
    width: 100%;
    margin-top: 30px;
    padding-bottom: 5em
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li {
    width: auto
}

.site-mobile-menu .site-nav-wrap[data-class="social"]>li:first-child a {
    padding-left: 15px !important
}

.bottomButtons {
    position: fixed;
    width: 100%;
    justify-content: space-around;
    bottom: 0;
    background: var(--white-color);
    border-top: 1px solid #ccc;
    z-index: 100
}

.bottomButtons :where(a, button) {
    color: var(--text-color);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    background: transparent;
    border: none
}
.heroImg{
    height: 100vh !important;
    object-fit: cover;
}
.heroSectionTitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white-color);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    .swiper-slide{max-width:250px !important;}
    .swiper-slide a{
        background:transparent !important;
        height:auto !important;
        width:auto !important;
        
    }
    h1{
        font-size: 65px;
    }
    strong{
        font-size: 32.17px;
    }
   & a {
       background: var(--primary-color);
       display: flex;
       width: 257px;
       height: 52px;
       color: var(--white-color);
       border-radius: 0.625rem;
       justify-content: center;
       align-items: center;
       text-align: center;
       &:hover{
           background: var(--white-color);
           color: var(--primary-color);
       }
    }
   & a:last-child{
    background: var(--white-color);
    color: var(--primary-color);
    &:hover{
        color:var(--white-color);
        background : var(--primary-color);
    }
   }
   
}
.typicalButton{
    background: var(--primary-color) !important;
    display: flex !important;
    width: 257px;
    height: 52px;
    color: var(--white-color) !important;
    border-radius: 0.625rem !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    &:hover {
    background: var(--white-color) !important;
    color: var(--primary-color) !important;
    }
}
.serviceAbsolute{
    right: auto;
    left: auto;
}
.servicesCarousel img {
    height: 106px !important;
    width: auto !important;
}
.servicesCarousel h4{
    font-family:'yekanbakh';
    color: var(--white-color);
    font-size: 1.3rem;
}
#myAccount,#search{
    color: var(--white-color);
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.row-gap-100{
    row-gap: 6.25rem;
}
.mt-161{
    margin-top: 162px;
    @media screen and (max-width:1200px) {
        margin-top: 2rem;
    }
}
.homeMainSection {
    background:url(./img/BG-1.png) no-repeat,
    url(./img/mainbg3.png) no-repeat,
    url(./img/mainbg2.png) no-repeat,
    url(./img/mainbg4.png) no-repeat
    ;
    background-position: 100% 8%,0 25%,100% 35%,-10% 84%;
}
.index-title{
    font-size:2.25rem;
    color: var(--title-color);
}
.paragraphStyle{
    font-size: 1.375rem;
}

/* circular slider */
.whatweuse {
    width: 100%;
    /* height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.whatweuse>* {
    flex-grow: 1;
}

.circle--rotate {
    border-radius: 50%;
    border: 1px var(--primary-color) solid;
    width: 100%;
    height: 100%;
    margin: 0 auto 0;
    position: relative;
    transform: rotate(0deg);
    z-index: 0;
    padding: 0;
}

.circle--rotate>li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    z-index: 10;
    visibility: hidden;
}

.circle--rotate>li .icon {
    visibility: visible;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    font-size: 20px;
    color: #ffffff;
    border-radius: 50%;
    background-color: #000000;
    height: 10%;
    width: 10%;
    margin: -5% auto;
    transition: all 500ms ease;
    box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.circle--rotate>li i {
    color: var(--green-color);
    font-size: 24px;
    margin: auto;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: table;
}

.circle--rotate>li i::before {
    display: table-cell;
    vertical-align: middle;
}

.circle--rotate>li img {
    margin: auto;
}

.circle--slider {
    position: relative;
}

.circle--slider .rotate--circle {
    margin: 0 auto;
}

.circle--slider .circle--rotate>li div {
    position: relative;
    overflow: visible;
    background-color: var(--primary-color);
}

.circle--slider .circle--rotate>li div span {
    transform: rotate(0deg);
    transition: all 2s;
    opacity: 0;
}

.circle--slider .circle--rotate>li.active div {
    font-size: 20px;
    background-color: var(--orange-color);
    transition: all 1s;
}

.circle--slider .circle--rotate>li.active i {
    color: var(--white-color);
}

.circle--slider .circle--rotate>li.active div span {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-45deg);
    z-index: -1;
    opacity: 1;
}

.circle--slider .circle--rotate>li.active div span:before {
    position: absolute;
    height: 1px;
    top: -50%;
    right: 140%;
    bottom: 0;
    margin: auto;
    content: "";
    width: 30%;
    height: 30%;
    filter: blur(3px);
    opacity: 0.7;
    border: 6px solid #f48e2a;
    z-index: -1;
}

.circle--slider .circle--rotate>li.active div span:after {
    position: absolute;
    height: 1px;
    top: 100%;
    left: 130%;
    bottom: 0;
    margin: auto;
    content: "";
    width: 40%;
    height: 40%;
    border-radius: 50%;
    opacity: 0.7;
    border: 8px solid #fe9290;
    z-index: 5;
}

.circle--slider .count2 li:nth-child(2) {
    transform: rotate(180deg);
}

.circle--slider .count3 li:nth-child(2) {
    transform: rotate(120deg);
}

.circle--slider .count3 li:nth-child(3) {
    transform: rotate(240deg);
}

.circle--slider .count4 li:nth-child(2) {
    transform: rotate(90deg);
}

.circle--slider .count4 li:nth-child(3) {
    transform: rotate(180deg);
}

.circle--slider .count4 li:nth-child(4) {
    transform: rotate(270deg);
}

.circle--slider .count5 li:nth-child(2) {
    transform: rotate(72deg);
}

.circle--slider .count5 li:nth-child(3) {
    transform: rotate(144deg);
}

.circle--slider .count5 li:nth-child(4) {
    transform: rotate(216deg);
}

.circle--slider .count5 li:nth-child(5) {
    transform: rotate(-72deg);
}

.circle--slider .count6 li:nth-child(2) {
    transform: rotate(60deg);
}

.circle--slider .count6 li:nth-child(3) {
    transform: rotate(120deg);
}

.circle--slider .count6 li:nth-child(4) {
    transform: rotate(180deg);
}

.circle--slider .count6 li:nth-child(5) {
    transform: rotate(240deg);
}

.circle--slider .count6 li:nth-child(6) {
    transform: rotate(-60deg);
}

.circle--slider .count7 li:nth-child(2) {
    transform: rotate(51.5deg);
}

.circle--slider .count7 li:nth-child(3) {
    transform: rotate(103deg);
}

.circle--slider .count7 li:nth-child(4) {
    transform: rotate(154.5deg);
}

.circle--slider .count7 li:nth-child(5) {
    transform: rotate(206deg);
}

.circle--slider .count7 li:nth-child(6) {
    transform: rotate(-103deg);
}

.circle--slider .count7 li:nth-child(7) {
    transform: rotate(-51.5deg);
}

.circle--slider .count8 li:nth-child(2) {
    transform: rotate(45deg);
}

.circle--slider .count8 li:nth-child(3) {
    transform: rotate(90deg);
}

.circle--slider .count8 li:nth-child(4) {
    transform: rotate(135deg);
}

.circle--slider .count8 li:nth-child(5) {
    transform: rotate(180deg);
}

.circle--slider .count8 li:nth-child(6) {
    transform: rotate(-135deg);
}

.circle--slider .count8 li:nth-child(7) {
    transform: rotate(-90deg);
}

.circle--slider .count8 li:nth-child(8) {
    transform: rotate(-45deg);
}

.circle--slider .count9 li:nth-child(2) {
    transform: rotate(40deg);
}

.circle--slider .count9 li:nth-child(3) {
    transform: rotate(80deg);
}

.circle--slider .count9 li:nth-child(4) {
    transform: rotate(120deg);
}

.circle--slider .count9 li:nth-child(5) {
    transform: rotate(160deg);
}

.circle--slider .count9 li:nth-child(6) {
    transform: rotate(-160deg);
}

.circle--slider .count9 li:nth-child(7) {
    transform: rotate(-120deg);
}

.circle--slider .count9 li:nth-child(8) {
    transform: rotate(-80deg);
}

.circle--slider .count9 li:nth-child(9) {
    transform: rotate(-40deg);
}

.circle--slider .count10 li:nth-child(2) {
    transform: rotate(36deg);
}

.circle--slider .count10 li:nth-child(3) {
    transform: rotate(72deg);
}

.circle--slider .count10 li:nth-child(4) {
    transform: rotate(108deg);
}

.circle--slider .count10 li:nth-child(5) {
    transform: rotate(144deg);
}

.circle--slider .count10 li:nth-child(6) {
    transform: rotate(-180deg);
}

.circle--slider .count10 li:nth-child(7) {
    transform: rotate(-144deg);
}

.circle--slider .count10 li:nth-child(8) {
    transform: rotate(-108deg);
}

.circle--slider .count10 li:nth-child(9) {
    transform: rotate(-72deg);
}

.circle--slider .count10 li:nth-child(10) {
    transform: rotate(-36deg);
}

.circle--slider .animate-wrapper {
    width: 80%;
    height: 80% !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
}

.circle--slider .animate-title {
    color: var(--text-color);
}

.circle--slider .animate-img {
    width: 25%;
    height: 25%;
    border-radius: 50%;
    overflow: hidden;
}

.circle--slider .animate-img .animate-img__in {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 50%;
    background-repeat: no-repeat;
    z-index: 3;
    transform: rotate3d(0, 0, 0, 0deg) scale(0.85);
    transition: 0.55s ease-in-out;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-size: cover;
    box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.3);
}

.circle--slider .animate-more {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s 0.4s;
    min-width: 131px;
    overflow: hidden;
    text-align: center;
    z-index: 30;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding: 15px;
    height: 200px;
    transform: scale(0.8);
}

.circle--slider .animate-more p {
    color: var(--text-color) !important;
}

.circle--slider .animate.active .animate-more {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.circle--slider .animate.active .animate-img .animate-img__in {
    opacity: 1;
    transform: scale(1);
}

.circle--slider .prev,
.circle--slider .next {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
    height: 62px;
    width: 87px;
    text-align: center;
    cursor: pointer;
}

.circle--slider .prev span,
.circle--slider .next span {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: 700;
}

.circle--slider .prev {
    left: 250px;
}

.circle--slider .next {
    right: 250px;
}
  .circular-title {
      font-size: 1.8rem;
  }
  .circularImg {
      max-width: 100%;
      width: 50px;
  }
/* circular slider-end */
.stepCard {
    background: var(--white-color);
    transition: all .2s linear .1s;
    padding: .5rem;
    border-radius: 0.625rem;

}
.stepCard:hover,
.swiper-slide-active .stepCard{
    filter: drop-shadow(0 0 0.3rem #E5BAE8);
}
.stepCounter {
    background: var(--primary-color);
    width: 48px;
    height: 48px;
    color: var(--white-color);
    font-size: 1.5rem;
    font-family: 'yekanbakh-Bold';
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
     transition: all .2s linear .1s;

}
.stepCard:hover,
.swiper-slide-active .stepCard{
    h3{
        color: var(--orange-color);
    }
    .stepCounter{
        background:var(--orange-color) ;
    }
    hr{
        border-top: 2px dashed var(--footer-bg);
        opacity: 70%;
    }
}
.stepCounter + h3 {
	margin-bottom: 0;
	color: var(--primary-color);
	transition: all .2s linear .1s;
	font-size: 1.2rem;
}
.stepCard hr {
    color:  transparent;
    border-top: 2px dashed transparent;
}
.productCard {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 8px 0px #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all .2s linear .1s;
    gap:6px;
    .imgWrapper {
        background: #F2F2F2;
        width: 100%;
        min-height: 290px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: .625rem .625rem 0 0;
    transition: all .2s linear .1s;
    }
    img{
        max-height: 233px;
        width:auto;
    }
    h4{
        padding:0 0.3rem;
        a{
            color: var(--title-color);
            font-family: 'yekanbakh';
        }
    }
    .price {
        color: var(--primary-color) !important;
        font-size: 1.1rem !important;

        del,
        ins {
            font-weight: normal !important;
        }

        del {
            color: var(--orange-color) !important;
        }

        ins {
            text-decoration: none !important;
        }
    }
    .onsale {
        min-width: unset !important;
        min-height: unset !important;
        font-weight: normal !important;
        width: 40px;
        height: 28px;
        border-radius: .25rem !important;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 1rem !important;
        left: 1rem !important;
        background-color: var(--orange-color) !important;
        right: unset !important;
    }
    &:hover{
        background: var(--primary-color);
        .imgWrapper{
            background:var(--primary-color) ;
        }
        h4{
            color: var(--white-color);
            a{
                color: var(--white-color);
            }
        }
        .price {
            color: var(--white-color) !important;


        }
        del,
        ins {
            color: var(--white-color) !important;
        }
    }
    
}
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#cta1{
    background:var(--title-color);
    padding: 6rem 0;
    color: var(--white-color);
    .ctaForm{
        p:first-child{
            background: var(--title-color);
            border-radius: 8px;
            box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.25);
            height: 60px;
            padding: 0 .7rem;
            display: flex;
            align-items: center;
            .wpcf7-form-control-wrap:first-child{
                width: 75%;
            }
            .wpcf7-submit{
                width: 25%;
            }
        }
        input[type="text"]{
            background-color: transparent;
            border: none;
            width: 100%;
            outline: none;
            caret-color: var(--white-color);
            color: var(--white-color);
            &::placeholder{
                color: rgba(238, 238, 238,.6);
                font-size:1rem;
            }
        }
        button,input[type="submit"]{
            border-radius: 10px;
            background:var(--primary-color);
            color: var(--white-color);
            border: none;
            height: 46px;
        }
        .wpcf7-spinner{display: none !important;}
    }
}
.testoCard{
    border-radius: 21px;
    background: #FFF;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    strong{
        color: var(--title-color);
    }
    span{
        color: var(--primary-color);
    }
    hr{
        color: transparent;
        border-top: 1px dashed var(--title-color);
    }
}
#oneSimpleTouch{
    background: url(./img/circular/simple\ touch\ bgpng.png) no-repeat;
    background-position: center;
}
.gradCircle {
    background: var(--primary-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.oneTouchCard{
    h4{
        color: var(--title-color);
    }
    ul{
        padding-right: 1.5rem !important;
    }
}
#faqAccordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.accordion-item{
    border-radius: 1rem !important;
    border: none;
    filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.25));
    overflow: hidden;
}
.accordion-button {
    background: var(--white-color) !important;
    box-shadow: none !important;
    color: var(--primary-color) !important;
}
.blogCard {
    background: var(--white-color);
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(206, 206, 206, 0.25);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all .2s linear .1s;
    img{
        border-radius: 0.625rem;
    }
    h3{
        font-size: 1.18rem;
        text-align: center;
        a{
            transition: all .2s linear .1s;
            color: var(--title-color);
        }
    }
    &:hover{
        background:var(--title-color);
        h3 a,p{
            color: var(--white-color);    
        }

    }
}
.indexMoreButton {
    border-radius: 10px;
    border: 1px solid var(--primary-color);
    background: var(--white-color);
    width: 498px;
    max-width: 100%;
    height: 67px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    font-size: 1.1rem;
    transition: all .2s linear .1s;
    &:hover{
        background:var(--primary-color) ;
        color: var(--white-color);
    }

}
.contactusInfo{
    iframe{
        width: 100%;
        border-radius: 1rem;
        min-height:387px;
    }
    h3{color: var(--title-color);}
    [class^="webyar-"],
    [class*=" webyar-"]{
        color: var(--primary-color);
        font-size: 1.2rem;
    }


}
.form-control{
    border-color: rgba(156, 30, 165, 0.33) !important;
}
.mainPageForm label {
    color: var(--primary-color) !important;
}
.gap-form{
row-gap: 30px;
}
.btn.sendRequestBtn {
    background: var(--white-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    transition: all .2s linear .1s;
    &:hover{
        background: var(--primary-color);
        color: var(--white-color);

    }
}
.importantLink {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    list-style: none;
    font-size: 1.2rem;
    flex-wrap: wrap;
    li:not(:last-child) {
    	border-left: 1px solid var(--white-color);
    	padding-left: .3rem;
    }
    & a{
        color: var(--white-color);
    }
}
.filterNavBar {
    background: rgba(68, 7, 72, 0.5);
    backdrop-filter: blur(27px);
    padding: .25rem;
}
#innerNav .site-menu a {
    color: var(--primary-color) !important;
}
.innerTitlePage {
    background: var(--footer-bg);
    padding: 3rem 0;
}
#breadcrumbs a {
    color: var(--primary-color);
}
.blog-widget 
{
    h4 {
        color: var(--title-color);
    }
    .tagwrapper{
        list-style: none !important;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        gap: .625rem;
        li a{
            color: var(--white-color);
            background-color: var(--primary-color);
            border: 1px solid var(--primary-color);
            padding:.25rem .5rem;
            border-radius: .5rem;
            &:hover{
                background-color:var(--white-color) ;
                color: var(--primary-color);
            }
        }
    }
    .searchButton{
        background-color: var(--primary-color) !important;
    }
    .categoriesList {
        li {
            a {
                background: var(--primary-color);
                color: var(--white-color);
                border: 1px solid var(--primary-color);
                border-radius: 0.625rem;
                padding: 0.5rem .25rem;
            }
        }
    }
}
.content{
    h1,h2,h3,h4,h5,h6{
        color: var(--title-color);
        margin:1rem 0;
    }
    h1{
        font-size: 2rem;
    }
    h2{
        font-size: 1.7rem;
    }
    h3{
        font-size: 1.5rem;
    }
    h4{
        font-size: 1.3rem;
    }
    h5{
        font-size: 1.2rem;
    }
    h6{
        font-size: 1rem;
    }
    ul,ol{
        display:flex;
        align-items:start;
        flex-direction:column;
        gap:1rem;
        padding-right:2rem !important;
    }
}
/* comment-styles */
#commentform {
    display: flex;
    flex-wrap: wrap
}

.comment-notes,
.comment-form-rating {
    width: 100%
}

.comment-form-comment {
    display: flex;
    flex-direction: column;
    width: 100%
}

.comment-form :where(textarea, input) {
    border: 1px solid #aaa !important;
    border-radius: .3125rem
}

.comment-form-cookies-consent {
    justify-content: start;
    gap: 2px;
    width: 100%;

}

.form-submit {
    width: 10%;
    display: flex;
    justify-content: center;
    align-items: center
}

.form-submit input {
    width: 100%;
    border: 1px solid var(--primary-color) !important;
    background: var(--white-color) !important;
    color: var(--primary-color) !important;
    transition: all .1s linear .1s !important;
}

.form-submit input:hover {
    color: var(--white-color) !important;
    background: var(--primary-color) !important;
}

.bottomAddToCart .cart {
    display: flex
}

.comment-form-email,
.comment-form-author,
.form-submit,
.comment-form-cookies-consent {
    margin: .5rem 0
}
.singleCommentWrapper {
    background: #fff;
    height: inherit;
    margin-right: 1rem;
    padding: 1rem;
    filter: drop-shadow(0 0 0.4rem #eee);
    border-radius: .3rem;
    width: 100%
}

.singleCommentWrapper h4 {
    font-size: 1.2rem;
    color: transparent;
    background: linear-gradient(45deg, var(--secondary-color) 0%, var(--primary-color) 100%);
    background-clip: border-box;
    background-clip: text
}

.border-bottom {
    border-bottom: solid 1px var(--primary-color) !important
}

.comment-reply-link {
    color: var(--primary-color);
    font-size: 1rem;
    text-decoration: none !important
}

.commentDate {
    color: var(--text-color);
    font-size: .8rem;
    margin-left: .3rem
}

.singleCommentWrapper p {
    word-break: break-all;
    text-align: justify
}
/* end comment-styles */

.productSummery{
    top: 120px;
    .price {
        color: var(--primary-color) !important;
        ins{
            text-decoration: none !important;
        }
    }
    .product_title {
        color: var(--title-color);
    }
    .woocommerce-product-details__short-description p {text-align: justify;}
    .onsale{
        position: static !important;
        color: var(--orange-color) !important;
        background-color: transparent !important;
    }
} 
.woocommerce-product-gallery {
    width: 100% !important;
    img{
        border-radius: 1rem;
    }
}
.woocommerce div.product div.images .flex-control-thumbs{
    gap: 10px;
    display: flex;
    margin-top:10px !important ;
}
.fami-wccp-button,
.woosw-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 1.4rem;
}
.woosw-btn:hover{
    color: var(--orange-color);
}
.fami-wccp-button:hover{
    color: var(--primary-color);
}
.product_meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#singleFirstSection{
    background: #fcfcfc;
}
.bgtransparent{
    background: transparent !important;
}

.top-120{
    top: 120px;
}
.review.byuser{
 .comment-text{
     width: 100%;
     margin: 0 !important;
    }
}
.woocommerce .star-rating{
    color:var(--orange-color);
}
.content .bg-light {
    border-radius: 10px;
}
.buttons{
    display: flex;
    justify-content: space-between;
    align-items: center;
    & a {
        background: var(--primary-color);
        color: var(--white-color);
        padding: .4rem;
        border-radius: .25rem;
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content;
        height: 48px;
    }
    & .socialLinkSingle{

        a {
            font-size: 2rem;
            padding: .5rem;
            width: 48px;
            height: 48px;
        }
        .whatsappSingle{
            background-color: #25d366;
        }
        .telegramSingle{
            background-color: #2ca5e0;
        }
        .eitaaSingle {
            background-color: #FF8300;
        }
        
    }

}
#innerNav.filterNavBar {
    .site-navigation .site-menu>li>a {
        color: var(--white-color) !important;
    }
}
.checkout-button{
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
    font-weight: normal !important;
}
.w-fit{
    width: fit-content;
}
.coupon.input-group.w-fit {
    border-radius: .5rem !important;
    border: 1px solid var(--primary-color);
    padding: .25rem;
    overflow: hidden;
    input{
        border: none;
        border-radius: 0;
        padding: .25rem;
    }
    button{
        background: var(--primary-color) !important;
        color: var(--white-color) !important;
        font-weight: normal !important;
        border-radius: .5rem !important;
    }
}
.cart_totals{width: 100% !important;}
.custominputsforcheckout select {
    height: 2.5rem !important;
    text-align: right !important;
    padding-right: .1rem !important;
    background: var(--white-color) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: unset !important;
    left: 1px !important
}
.custominputsforcheckout :where(input, select) {
    border: 1px solid #ccc !important;
    border-radius: .3125rem !important;
    padding: .3rem !important
}
.custominputsforcheckout textarea.input-text {
    display: block !important;
    width: 100% !important;
    padding: .375rem .75rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #212529 !important;
    background-color: #fff !important;
    background-clip: padding-box !important;
    border: 1px solid#ced4da !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: .375rem !important;
    transition: border-color .15s ease-in-out, box-shadow .15sease-in-out !important;
}
#payment {
    padding: .5rem !important;
    ul{
        padding: 1rem !important;
    }
}
aside.woocommerceMyAccountNavigation ul {
    list-style: none;
    padding-right: 0 !important;
    background: var(--secondary-color);
    border-radius: .3125rem
}

aside.woocommerceMyAccountNavigation ul li a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    color: var(--white-color)
}

aside.woocommerceMyAccountNavigation ul :where(li.is-active a, li a:hover) {
    background: linear-gradient(15deg, var(--primary-color), var(--secondary-color))
}
.pageWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 5px;

    & li {
        width: 40px;
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;

        a {
            background: var(--primary-color);
            color: var(--white-color);
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
        }

    }

    li.active {
        background: var(--white-color);
        filter: drop-shadow(0 0 0.3rem rgba(0, 0, 0, .2));
        color: var(--primary-color);
    }

}
.brandItem{
    img{
        filter: grayscale(100%);
        transition: all .4s linear .1s;
        height: 79px;
        max-width: 100%;
        width: auto;
        object-fit: contain;
    }
    &:hover img{
        filter: grayscale(0);
    }
}
.logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.basket {
    background: transparent;
    border: none;
    font-size: 1.5rem;
}
#bgnav {
    .basket{
        color: var(--white-color);
    }
}
#innerNav {
    .basket{
        color: var(--primary-color);
    }
}
.miniCartTotal {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4rem 0;
    background: #eee;
}

.miniCartButtons a {
    background: var(--primary-color);
    color: var(--white-color);
    border: 1px solid var(--primary-color);
    padding: .3rem .8rem;
    margin: .4rem;
    border-radius: .3125rem;
}

.miniCartButtons a:hover {
    color: var(--primary-color);
    background: var(--white-color);
}

.miniCartButtons a:last-child {
    background: var(--secondary-color);
    color: var(--white-color);
    border: 1px solid var(--secondary-color);
}

.miniCartButtons a:last-child:hover {
    color: var(--secondary-color);
    background: var(--white-color);
}

.fixedButton {
    background: var(--oposite-color);
    border: 1px siolid var(--oposite-color);
    font-size: 1.4rem;
    color: var(--white-color);
    position: fixed;
    bottom: 4rem;
    right: 1rem;
    padding: .3rem;
    border-radius: .3125rem;
}

.miniCard-wrapper {
    display: flex;
    justify-content: start;
    align-items: center;
}

.blogCard p {
    text-align: justify;
    color: var(--text-color);
}

.miniCard-wrapper img {
    width: 70px;
    height: auto;
}

.miniCard-wrapper strong {
    color: var(--primary-color);
    font-size: 1rem;
}

.miniCard-wrapper .offerPrice {
    font-size: .8rem;
}
.footerNav{display: none;}
.woocommerce-pagination {margin-top:1rem;}
.woocommerce-pagination ul.page-numbers {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    list-style-type: none !important;
    gap: 0.625rem !important;
    padding: unset !important;
    clear: unset !important;
    border: none !important;
}

.woocommerce-pagination ul.page-numbers li {
    border-left: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: unset !important;
    display: unset;
    overflow: unset !important;
}

.woocommerce-pagination ul.page-numbers li :where(a, span) {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 0.625rem !important;
    background: var(--primary-color) !important;
    color: var(--white-color) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.woocommerce-pagination ul.page-numbers li span.page-numbers {
    background: var(--white-color) !important;
    filter: drop-shadow(0 0 0.4rem var(--shadow-color)) !important;
    color: var(--primary-color) !important;
}

.woosw-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.625rem;
}

.woosw-list .woosw-copy {
    flex-wrap: wrap;
}

.woosw-popup-content {
    width: 60% !important;
    max-width: 100% !important;
}

.woosw-copy-label {
    width: 100%;
}

.woosw-copy-url {
    margin: 0 !important;
    width: 90%;
}

.woosw-copy-url input {
    border-radius: 0 0.5rem 0.5rem 0 !important;
    width: 100%;
    border: 1px solid #888 !important;
    padding: .25rem .5rem;
}

.woosw-copy-btn {
    width: 10%;
}

.woosw-list table.woosw-items .woosw-item .woosw-item--name a {
    color: var(--oposite-color) !important;
}
.socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    a{
        color: var(--white-color);
        font-size: 2rem;
    }
}
.mh-45vh{min-height:45vh;}
/*.accordion-button:not(.collapsed)::after {*/
/*	transform: rotate(0deg) !important;*/
/*}*/
footer {
	background: url(./img/footerbg.png) no-repeat;
}
.footer-content{
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100% !important;
	color:var(--white-color);
	gap:0.625rem;
	.footerLogo{
    width:200px;
    
    }
}
aside{padding:0.5rem;}
.woocommerce-product-details__short-description{
    h1,h2,h3,h4,h5,h6{color:var(--title-color);}
    h1{font-size:1.7rem;}
    h2{font-size:1.4rem;}
    h3{font-size:1.2rem;}
    h4{font-size:1.1rem;}
    h5{font-size:1rem;}
    h6{font-size:0.9rem;}
    ul,ol{
        display:flex;
        align-items:start;
        flex-direction:column;
        gap:1rem;
        padding-right:2rem !important;
    }
}
.woocommerce-Price-currencySymbol{
    display:flex;
    justify-content:center;
    align-items:center;
    svg {
	width: 1.5rem;
	height: auto;
    }
}
.price {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}
.price :where(ins,del) bdi {
	display: flex;
	justify-content: center;
	align-items: center;
	gap:5px;
}
.price bdi{
    display: flex;
	justify-content: center;
	align-items: center;
	gap:5px;
}
.rtl .bapf_sfilter ul li {
    text-align: right!important;
    display: flex !important;
    gap: 5px !important;
}
@media screen and (max-width:1480px) {
           .heroSectionTitle img{
                width:240px;
               
           }
}
@media screen and (max-width:1300px) {
       .heroSectionTitle{
        gap: 10px;
        img{
         
        }
        h1{
            font-size: 2rem;
        }
        strong{
            font-size: 1.5rem;
        }
        a{
            width: 140px;
            height: 3rem;
            font-size: 1rem;
        }
    }
    .servicesCarousel{
    & h4 {
    	font-size: 1rem;
    	width: 100%;
    	text-align: center;
        }
    }
    .servicesCarousel img{
        height:79px !important;
    }
    .index-title {
	font-size: 1.8rem;
	color: var(--title-color);
}
.paragraphStyle {
	font-size: 1rem;
}
}
@media screen and (max-width:1024px) {
    .heroSectionTitle{
        gap: 10px;
        h1{
            font-size: 1.5rem;
        }
        strong{
            font-size: 1.2rem;
        }
        a{
            width: 140px;
            height: 3rem;
            font-size: 1rem;
        }
    }
    .index-title{
        font-size:1.7rem
    }
   .stepCounter+h3 {
      font-size: 1.25rem;
   }
   #WhatWeUse .col-lg-6:first-child{
    margin-bottom: 40px;
   }
   .paragraphStyle{
    font-size: 1rem;
   }
   .productCard {
       .imgWrapper {
           height: 150px;

       }

       img {
           max-height: auto;
       }


   }
   .indexMoreButton {
       max-width: 93%;
       font-size: 1rem;
   }
   footer{
    padding-bottom: 4rem;
   }
   .footerNav {
       display: flex;
       justify-content: space-around;
       align-items: center;
       background: transparent;
       position: fixed;
       bottom: 1rem;
       z-index: 1000;
       right: 0;
       left: 0;

       button,
       a {
           background: var(--primary-color) !important;
           color: var(--white-color) !important;
           display: flex !important;
           justify-content: center !important;
           align-items: center !important;
           width: 3rem !important;
           height: 3rem !important;
           border-radius: .5rem !important;
           font-size: 1.3rem;

           .webyar-profile-set {
               font-size: 1.5rem;
           }
       }

   }
   footer {
       padding-top:2rem;
	background:var(--title-color);
}
.footerImg{display:none;}
.footer-content{
	position:static !important;
	transform:translate(0);
}
}
.submitButtonWrapper{
    p{
    display:flex;
    }
    
    .wpcf7-spinner{order:-1;}
}
@media screen and (max-width:576px){
    .container{width:90% !important;}
    .form-submit{width:90%;}
    .container-90{
        width: 96%;
    }
    .content{
        h1{font-size:1.7rem;}
        h2{font-size:1.4rem;}
        h3{font-size:1.2rem;}
        h4{font-size:1.1rem;}
        h5{font-size:1rem;}
        h6{font-size:0.9rem;}
    }
.buttons {
    	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	a{width:100%;}
  & .socialLinkSingle {
	justify-content: space-around !important;
	width: 100%;
}
}
    #aboutUs {
        margin: 0 auto !important;   
        margin-top: 1rem !important;
        p{
            text-align: justify;
        }
        
    }
    .index-title {
           font-size:1.2rem;
           text-align: center;
       }
       #cta1 {
        & h3{
            font-size: 1.2rem;
        }
            input[type="text"]{
            &::placeholder{
                color: rgba(238, 238, 238,.6);
                font-size: .8rem !important;
            }
        }
        & p:first-child {
            & .wpcf7-form-control-wrap:first-child {
                width: 55% !important;
                
                   & .wpcf7-submit {
                       width: 45% !important;
            }
           }
        }
        }
        #cta1 {
  & .ctaForm {
    & p:first-child {
      & .wpcf7-submit {
        width: 45% !important;
      }
    }
  }
}
    .testoCard{
        p{
            text-align: justify;
        }
    }
    .servicesCarousel{
        & img{
            height: 80px !important;
            max-width: 100%;
        }
        h4{
            font-size: 1rem !important;
        }
    }
    .gradCircle {
        background: var(--primary-color);
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
    .circularImg {
        max-width: 100%;
        width: 16px;
    }
    .stepCard{
        .d-flex{
            flex-direction: column;
        }
        p{
            text-align: center;
        }
        h3{
            font-size: 1rem;
        }
    }
    .row{
        row-gap: 1rem;
    }
    .mt-161{
        margin-top: 1rem;
    }
    #cta1 .row {
        margin: 0 auto !important;
    }
    .homeMainSection{
        background-size: 30%;
    }
    #oneSimpleTouch {
        background-position: -22% 37%;
        background-size: 30%;
    }
    .product_title{font-size:1.5rem;}
    .submitButtonWrapper {
  & p {
    display: flex;
    flex-direction:column;
  }
}
.typicalButton{background:var(--title-color);}
}