@charset "utf-8";
/**
*
* -----------------------------------------------------------------------------
*
* Template : fann - Multipurpose Blogging WordPress Theme
* Author : reacthemes
* Author URI : http://www.reactheme.com/
*
* -----------------------------------------------------------------------------
*
**/

/* Table Of Content
---------------------------------------------------------
01. General CSS
02. Global Class
03. Header Section 
04. Sticky Menu
05. Slider Section
06. About Us
07. Services
08. Calltoaction
09. Portfolio
10. Pricing Tables
11. Team Member
12. Newsletter
13. Testimonial
15. Contact Us
16. Footer
17. Scroll Up
18. Video
19. Counter up
20. Breadcrumbs
21. Portfolio Details
25. Home Banner
26. Preloader
27. FAQ
--------------------------------------------------------*/



@font-face {
    font-family: 'OpticianSans';
    src: url('../fonts/OpticianSans.eot');
    src: url('../fonts/OpticianSans.eot') format('embedded-opentype'),
         url('../fonts/OpticianSans.woff2') format('woff2'),
         url('../fonts/OpticianSans.woff') format('woff'),
         url('../fonts/OpticianSans.ttf') format('truetype'),
         url('../fonts/OpticianSans.svg#OpticianSans') format('svg');
    font-display: swap;
}
@font-face {
    font-family: 'MabryProRegular';
    src: url('../fonts/MabryProRegular.eot');
    src: url('../fonts/MabryProRegular.eot') format('embedded-opentype'),
         url('../fonts/MabryProRegular.woff2') format('woff2'),
         url('../fonts/MabryProRegular.woff') format('woff'),
         url('../fonts/MabryProRegular.ttf') format('truetype'),
         url('../fonts/MabryProRegular.svg#MabryProRegular') format('svg');
    font-display: swap;
}



:root {
    
    --bodyFont: 'MabryProRegular', sans-serif;
    --titleFont: 'OpticianSans', sans-serif;
    --partialFont: 'OpticianSans', sans-serif;
    --metaFont: 'OpticianSans', serif;
    --partialFont2:'MabryProRegular';
    --transition: 1.3s;
    --primaryColor: #F06B9D;
    --secondaryColor: #101010;
    --whiteColor: #ffffff;
    --titleColor: #101010;     
    --hoverColor: #F06B9D;   
    --bodyColor: #15171A;  
    --button-bg: #F06B9D;
    --button-bg-hover: #F281AC;
    --button-bg-dark: #212529;
    --button-bg-dark-hover: #424649;
    --neutral-light-black: #15171A;
    --gray-slate-light-900: #151A17;
    --gray-slate-light-100: #E1E3E6;
    --gray-slate-light-500: #6B7280;
    --gray-slate-light-700: #40444D;
    --gray-slate-pink-50:#FDF0F5;
    --gray-slate-light-40:#A6AAB3;
    --gray-slate-light-10: #C4C7CC;
    --gray-slate-light-25: #F0F1F2;
    --gray-slate-light-50: rgb(248,248,249);
    --warning-bg: #FFF0CD;
    --warning-bg-two:#FFE19C;
    --border-color: rgba(155, 155, 155, 0.5);
}


@import "blog";
@import "header";
@import "footer";


/* -----------------------------------
    01. General CSS
-------------------------------------*/
html,
body {
    font-size: 16px;
    color: var(--bodyColor);
    font-family: var(--bodyFont);
    vertical-align: baseline;
    line-height: 24px;
    font-weight: 400;
    overflow-x: hidden;
}
.my-custom-font{
    font-family: var(--bodyFont) !important;
    .bottom-shape{
        font-weight: 100 !important;     
    }
}
.text-separate{
    font-weight: 700;
    color: #fff !important;
}
img {
    max-width: 100%;
    height: auto;
}
p {
    margin: 0 0 26px;
}
a:focus {
    border-width: 5x;
    outline: thin dotted !important;
}
a:hover:focus, a:hover:focus-within,a:hover:focus, a:hover:focus-visible {
    outline: none !important
}
a:target {
    outline: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--titleFont);
    color: var(--titleColor);
    margin: 0 0 26px;
    font-weight: 400;
    line-height: 1.2;
}
h1, h2, h3, h4, h5, h6 {margin:0 0 26px; padding:0;}

h1 {
    font-size: 48px;   
    letter-spacing: -0.48px;
    
}
h2 {
    font-size: 40px;    
}
h3 {
    font-size: 36px;   
}
h4 {
    font-size: 28px;    
}
h5 {
    font-size: 20px;
   
}
h6 {
    font-size: 16px;   
}
.wp-block-calendar{
    nav{
        padding-bottom: 20px;
    }
}
a {
    color: var(--primaryColor);
    transition: var(--transition);
    text-decoration: none !important;
    outline: none !important;
}
a:active,
a:hover {
    text-decoration: none;
    outline: 0 none;
    color: var(--hoverColor);
}
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.clear {
    clear: both;
}
.z-index-10{
    z-index: 10;
    position: relative;
}
::-moz-selection {
    background: var(--secondaryColor);
    text-shadow: none;
    color: #ffffff;
}
::selection {
    background: var(--secondaryColor);
    text-shadow: none;
    color: #ffffff;
}

body .bg-fixed{
    background-attachment: fixed !important;
    background-position:  center top !important;
}
body .bg-top{
   background-position:  center top !important;  
}
body .bg-left{
   background-position:  bottom left !important;  
}
body .bg-right{
   background-position:  top right !important;  
}
body .bg-bottom{
   background-position:  center bottom !important;  
}
body .main-contain{
 background-size: cover; 
 background-repeat: no-repeat;

}
.no-gutter [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

.overflow-visible{
    overflow: visible !important;
    z-index: 30;
}
.overflow-hidden{
    overflow: hidden !important;
}
.max-width-700{
    max-width: 700px;
    margin: 0 auto;
}
.white-color{
    color: #fff;
    h1,
    h2,
    h3,
    h4{
        color: #fff;
        letter-spacing: normal;
    }
}
iframe{
    width: 100%;
}
h1,
h2{
    letter-spacing: -0.03em;
}
h3,
h4{
    letter-spacing: -0.02em;
}
.menu-cart-area h2{
    display: none;
}
.react-sideabr{
    #wp-calendar{
        th{
            background: var(--primaryColor);
            color: #fff;
        }
    }
    table{
        margin-bottom: 0;
    }    
}
.common-shadow{
    box-shadow: 0 0 150px #eee;
    background: #fff;
}

/* -----------------------
    404
--------------------------*/
.page-error{
    .error-image{
        margin-bottom: 20px;
    }    
    .page-content{
        max-width: 360px;
        margin: 0 auto;
    }
    .content-area {
        position: relative;   
        margin: 0 auto;
        text-align: center;
        h1.page-title{
            color: var(--whiteColor);
            font-size: 100px;
            margin-bottom: 30px;
            margin-top: 0px;
        }
        h2{           
            font-size: 48px;            
            margin-bottom: 0px;
            line-height: 30px;
            font-style: normal;
            font-weight: 400;
            line-height: 120%;
            letter-spacing: -0.48px;
            span{
                display: block;
                color: var(--gray-slate-light-900);
                text-align: center;
                font-family: Recoleta;
                font-size: 256px;
                font-style: normal;
                font-weight: 400;
                line-height: 100%; 
                letter-spacing: -2.56px;
                opacity: .25;
            }
        }  
        p.error-msg{
            font-size: 16px;
            font-weight: 400;
            max-width: 480;
            margin:0 auto;           
        }     
    }
    .react-sideabr{
        max-width: 400px;
        margin: 0 auto;
        padding-bottom: 40px;   
        padding-top: 25px;    
    }
    .react-sideabr{
        padding: 10px 0 35px;
    }
    .reacbutton{
        overflow: hidden;
        color: #ffffff;       
        font-size: 16px;       
        line-height: 1;
        padding:17px 33px;
        display: inline-block;
        position: relative;
        z-index: 1;
        text-transform: uppercase;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.4s ease-in-out;
        background:var(--primaryColor);
        border: none;
        border-radius: 8px;
        margin-top: 32px;
        font-family: var(--partialFont);
        &:hover{
            background: var(--titleColor);           
            color: #fff !important;
        }
    } 
}
/* ------------------------------------
    02. Global Class
---------------------------------------*/
.overflow-show{
    overflow: visible !important;
}
input[type="checkbox"], input[type="radio"] {
    margin-right: 8px;
    vertical-align: text-top;
}
.sticky{
    .menu-area{
        padding: 0
    }
}
.alignleft{
    margin-bottom: 26px;
}
.alignright{
    margin-bottom: 26px;
}
.vertical-middle{
    display: table;
    width: 100%;
    height: 100%;
    .vertical-middle-cell{
        display: table-cell;
        vertical-align: middle;
    }
}
.display-table {
    display: table;
    height: 100%;
    width: 100%;
}
.display-table-cell {
    display: table-cell;
    vertical-align: middle;
}
mark, ins{
    background: var(--primaryColor);
    color: #fff; 
    padding: 0 4px;
}
code{
    background: var(--primaryColor) !important;
    color: #fff !important;
}
button,  
html input[type="button"],  
input[type="reset"],  
input[type="submit"] {    
    color: #fff;
    padding:13px 30px;   
    font-size: 16px;
    text-transform: capitalize;
    outline: none;
    transition: all .5s ease;   
    background: var(--primaryColor);
    position: relative;
    border: none;
    font-family: var(--partialFont);
    border-radius: 8px;
}
button:hover,  html input[type="button"]:hover,  input[type="reset"]:hover{
    background: var(--primaryColor);
    color:var(--whiteColor);
}
input[type="submit"]:hover{
    opacity: .9;
}
.main-contain {
    #content {
        padding-top: 80px;
        padding-bottom: 80px;
    }  
    .page-error{
        #content {
            padding-top: 60px;
        }
       
    }
}
.opps-nothing{
    margin-bottom: 30px !important;
}
.post-password-required  input[type="password"]{
    margin-left: 5px;
}
.post-password-required  input[type="submit"] {
    margin-left: -4px;
    border-radius: 0 3px 3px 0;
    padding: 11px 20px;
}
input[type="text"],
input[type="number"],
input[type="password"],
textarea,
input[type="email"]{  
    color: var(--bodyColor) ;
    width: 100%;
    max-width: 100%;
    opacity:1;
    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
      color: #7b7d82;
      opacity:1;
    }
    &::-moz-placeholder { /* Firefox 19+ */
      color: #7b7d82;
      opacity:1;
    }
    &:-ms-input-placeholder { /* IE 10+ */
      color: #7b7d82;
      opacity:1;
    }
    &:-moz-placeholder { /* Firefox 18- */
      color: #7b7d82;
      opacity:1;
    }    
}
select{
    color: var(--bodyColor);
    cursor: pointer;
    &:valid{
      color:var(--bodyColor);
    }
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a{
    color: var(--primaryColor);
}
a:hover,  a:focus,  a:active {
    color: var(--primaryColor);
}
a:focus {
    outline: thin dotted;
}
a:hover,  a:active {
    outline: 0;
}
.wp-block-calendar tfoot a{
    color: var(--primaryColor);
    &:hover{
        color:var(--secondaryColor);
    }
}
.sticky-logo{
    display: none;
}
.sticky {   
    .logo-area{
        display: none;
    }
    .logo-area.sticky-logo{
        display: block;
    }
}
.sidenav{
    width: 100%;
    display: flex;
    flex-direction: column;
    .widget-title{
        padding: 0 0 15px;
        font-size: 24px !important;
        line-height: 30px;
        font-weight: 700 !important;
        position: relative;
        &:before{
            content: "";
            position: absolute;
            background: var(--secondaryColor);
            height: 2px;
            width: 50px;
            left: 0;
            bottom: 0;
            display: block;
            z-index: 1;
        }
    } 
    .widget_reactheme_soical_widget{
      display: flex;
      justify-content: center;
    }    
    .widget {
        padding: 0;
        margin: 0;
        &:first-child{
            border: none;
        }
        .widget-title {
            font-size: 24px;
            margin-bottom: 30px;
        }
        .search-form {
            .search-input {
                height: 42px;
                background: rgba(255,255,255,0.1);
                border-color: rgba(255,255,255,0.3) !important;
                color: #fff;
                font-size: 14px;
                outline: none;
                &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                  color: #fff;
                }
                &::-moz-placeholder { /* Firefox 19+ */
                  color: #fff;
                }
                &:-ms-input-placeholder { /* IE 10+ */
                  color: #fff;
                }
                &:-moz-placeholder { /* Firefox 18- */
                  color: #fff;
                }
            }
            button {
                padding: 8px 12px;
                color: #fff;
                background: transparent !important;
                -webkit-transition: 0.3s ease all;
                transition: 0.3s ease all;
                &:hover {
                    opacity: 0.7;
                }
            }
        }
    }
    .widget_contact_widget{
        margin: 30px 0 0px;
    }
    .widget_medvillsocialiconwi_widget{
        margin-top: 40px;
    }
    .widget_medvillsocialiconwi_widget{
        .footer_social{
            margin: 0 !important;
        }
    }
    .offcanvas_social{        
        list-style-type: none;
        padding-bottom: 0;
        li{
            display: inline-block;
            a{
                -webkit-transition: all 0.35s;
                -o-transition: all 0.35s;
                transition: all 0.35s;
                -moz-transition: all 0.35s;
                -ms-transition: all 0.35s;
                float: left;
                margin-right: 0;
                i{
                    font-size: 15px;
                    color: #fff;
                    margin: 0 8px 0 0;
                    text-align: center;
                    background: var(--secondaryColor);
                    width: 35px;
                    height: 35px;
                    line-height: 35px;
                    border-radius: 3px;
                    &:hover{
                        opacity:.9;
                    }
                }
            }
            &:last-child{
                a{
                    margin-right: 0;
                }
            }
        }
    }
    .nav-close-menu-li {
        margin: 0;
        padding-bottom: 30px;
        text-align: right;
        a{
            font-size: 0;
            text-align: center;
            display: inline-block;
            border: 2px solid #fff;
            width: 36px;
            height: 36px;
            line-height: 36px;
            border-radius: 100%;
            margin-right: 10px;
            position: relative;
            &:after, &:before {
                content: '';
                position: absolute;
                width: 2px;
                height: 14px;
                background-color: #fff;
                top: 9px;
            }
            &:before {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
            }
            &:after {
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }
            &:hover{
                background:#fff;
                color: #000;
                border-color: #fff;
                &:after, &:before {
                    background-color: var(--primaryColor);
                }
            }
        }
    }
    
    .bs-search button{
        padding: 5px 11px;
    }
    li.nav-link-container{
        color: var(--secondaryColor);
        text-align: center;
        display: block;
        border-radius: 30px;
        height: 40px;
        right: 15px;
        width: 40px;
        top: 5px;
        position: absolute;
        -webkit-transition: transform .5s ease;
            -moz-transition: transform .5s ease;
            transition: transform .5s ease;
            &:hover{
                a{
                    display: block;
                    span{
                        background: var(--secondaryColor) !important;
                    }    
                }
            }
        a{
            display: block;
            background:none !important;
            span{
                background: var(--primaryColor) !important;
                height: 3px;
                width: 25px;
            }    
        }
        .nav-menu-link{
            padding: 13px 15px 15px 10px !important;
            span.hamburger1{
                transform: rotate(-45deg) translate(-5px, 5px);
            }
            span.hamburger3{
                -webkit-transform: rotate(45deg) translate(0px, 0px);
                transform: rotate(45deg) translate(0px, 0px);
            }
        }
    }
}
#mobile_menu{
    .widget_nav_menu {
        ul{
            padding: 0;
            margin: 0;
            text-align: left;         
            &:hover{
                li{
                    a{
                        opacity: .6;
                    }
                }
            }
            li{
                list-style: none;
                margin-left: 0;
                padding: 0;
                position:relative;
                a{
                    font-size: 16px;
                    padding: 8px 0;
                    display: block;
                    color: var(--titleColor);
                    font-family: var(--titleFont);
                    line-height: 25px;  
                    &:hover{
                        opacity: 1 !important;
                    }                   
                }
                &:before{
                    display: none;
                }
                ul{
                    li{                       
                        a{
                            text-transform: capitalize;
                            padding: 4px 0 4px 20px;
                            line-height: 24px;
                            font-size: 90%;
                           
                        }
                    }
                }
                &:last-child{
                	a{
                		border-bottom: none;
                	}
                }
            }
        }
    }
}
.mobile-menu-container {
    .nav-close-menu-li {
        padding-top: 50px;
        a{
            padding: 0
        }
    }
    ul{
        padding-left: 0;
        margin: 0;
        text-align: left;
        li{
            list-style: none;
            border: none !important;
            margin-left: 0;
            padding: 0;
            a{
                font-size: 15px;
                padding: 12px 0;
                display: block;
                color: #222;
                border-bottom: none;
                &:hover{
                    opacity: 0.9;
                }
            }
            &:before{
                display: none;
            }
        }
    }
}
.nav-active-menu-container{
  -ms-transform: translate(0);
  -webkit-transform: translate(0);
  -moz-transform: translate(0);
  transform: translate(0);
}
#reactheme-header .menu-area .navbar ul li ul li .sub-menu{
    position: absolute;
    left: 100%;
    top: 0;
    opacity: 0;
    transform: scaleY(0);
    visibility: hidden;
    &:after{
        display: none;
    }
}
#reactheme-header.header-transparent .menu-sticky.sticky ul.offcanvas-icon.sidenav .nav-link-container span{
    background: #fff !important;
}
#reactheme-header .menu-area .navbar ul li ul li:hover ul.sub-menu{
    opacity: 1;
    transform: scaleY(1);
    visibility: visible;
}
#reactheme-header .menu-area .navbar ul li.three-col ul > li{
    width: 33.33%;
}
#reactheme-header .menu-area .navbar ul li.four-col ul > li{
    width: 25%;
}
.default_header .menu-area .navbar ul > li > a:after {
    background: var(--primaryColor);
}
/*------------------------------------
    04. Sticky Menu
--------------------------------------*/
.menu-sticky{
    margin: 0;
    width: 100%;
    z-index: 99;
    transition: all 300ms ease-in-out;
    background: transparent;
    &.sticky{
        position: fixed !important;       
        padding: 0;       
    }
}
/* ------------------------------------
    20. Breadcrumbs
  ---------------------------------------*/
.reactheme-breadcrumbs{
    .row{
        align-items: center;
    }
    position: relative;
    background: var(--gray-slate-light-50);    
    .breadcrumbs-title{
        font-size: 0px;               
        display: flex;
        justify-content: flex-end;     
        max-width: max-content;       
        margin:0 auto;
        font-family: var(--partialFont2);      
    }
    .breadcrumbs-inner{
        padding: 20px 0;      
        position: relative;  
        max-width: 950px;
        margin:0 auto;
        
       
    }

    .container-fluid{
        padding-left: 100px;
        padding-right: 100px;
    }
    .breadcrumbs-single{
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;     
    }
    .page-title {            
        font-size: 34px;
        line-height:44px;       
        margin: 0 auto;  
        text-align: center;  
        font-weight: 600;
    }
    .sub-title{
        font-size: 18px;
    }
    .breadcrumbs {
        text-align: center;        
    }
    .trail-items li::after {
        font-size: 12px;
    }
    ul {
        display: inline-block;
        padding: 5px 20px;
        margin: 10px 0 0;
        li {
            color: #999;
            display: inline-block;
            font-size: 14px;
            * {
                color: #999;
            }
            a {
                padding: 0 8px;
                color: #fff;
                &:hover {
                    color: var(--secondaryColor);
                }
            }
            &.trail-begin{
                a {
                    position: relative;
                    display: inline-block; 
                    padding-left: 0;
                    &:hover {
                        opacity: 0.7;
                    }               
                }
            }
            &.trail-end{
              padding-left: 8px;
            }
        }
    }
}
.entry-content .page-links{
    padding-top: 30px;
}
.comment-reply-title{
    font-size: 24px;
    font-weight: 700;
    margin-top: 14px;
}
.page{
    .comments-title{
        font-size: 24px;
        font-weight: 700;
    }
}
.format-aside .single-content-full .bs-desc {
    margin-top: 0;
}
.admin-bar {
    .menu-sticky.sticky {
        top: 31px;
    }
}
.single-post{
    .breadcrumbs-inner{
        .single--post-cat{
            padding-left: 5px;
        }
        .tag-line{
            a{
                &:hover{
                    color: #fff;
                }
            }
        }
    }
}

.hfe-site-logo-set{
    display:inline-block;
}
body.logged-in{
    .cart-icon-total-products.visible-cart{
        top:32px;
    }
}
  
.menu-area .navbar ul li.menu-item-has-children ul li.menu-item-has-children > a:before{
    display: none;
}
.header-inner{
    .menu-area{
        ul{
            &.menu{
                .mega{
                    &.col-3{
                        width: unset !important;
                        ul{
                            &.sub-menu{
                                .menu-item{
                                    border: none !important;
                                    padding-left: 0 !important;
                                    a{
                                        &:after,
                                        &:before{
                                            content: none !important;
                                        }
                                    }
                                    li{
                                        padding-left: 0 !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }        
    }
}


[data-theme="dark"] .dark-logo img{
    filter:invert(1);
}

.post--tilte-single h1 {
    margin: 45px 0 15px;
}
/*contact layout*/
input[type="submit"]{
    border: none;
    padding: 10px 18px;
    background:var(--primaryColor);
}

body div textarea{    
    padding: 10px 18px;
    height: 160px;
    border:0;
    &:focus{
        outline:1px solid var(--primaryColor);
    }
}
input[type="text"], 
input[type="number"], 
input[type="email"],  
input[type="url"], 
select,
input[type="password"]{    
    padding: 13px 33px;
    border: 1px solid transparent;
    margin-bottom: 10px;
    &:focus{
        outline:1px solid var(--primaryColor);
    }
}
.wp-block-search .wp-block-search__button {
    margin-left: 0;
}
.wp-block-search {
    margin-bottom: 20px;
}
.wp-block-archives, .wp-block-categories{
    select{
        width: 400px;
    }
}
.wp-block-group.has-background{
    padding: 24px 30px 10px;
    margin-bottom: 30px;
}
[type="search"]{
    border: 1px solid #E9E9E9;
    border-radius: 5px 0 0 5px;
    padding: 10px 20px;
    outline: none;
}
div textarea{
	border: 1px solid #E9E9E9;
   
}
#fann-load {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 999999
}
#fann-load {
    .lds-ring {
        display: inline-block;
        position: relative;
        width: 40px;
        height: 40px;
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
      }
      .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 40px;
        height: 40px;
        margin: 8px;
        border: 4px solid #fff;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #fff transparent transparent transparent;
      }
      .lds-ring div:nth-child(1) {
        animation-delay: -0.45s;
      }
      .lds-ring div:nth-child(2) {
        animation-delay: -0.3s;
      }
      .lds-ring div:nth-child(3) {
        animation-delay: -0.15s;
      }     
}

@keyframes lds-ring {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
.single-product{
    .yith-wcwl-add-button{
        display: none;
    }
}
.rts-popup-form{
    #rtsBtn{
        cursor: pointer;
        font-family: var(--partialFont);
    }
}

#rtsModal{  
    
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
    
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        max-width: 880px;
        flex-direction: row;
        border-radius: 0;
        .popup-thumb {
            width: 50%;
            img {
                height: 100%;
            }
        }
        .popup-contents {
            width: 50%;
            text-align: center;
            padding: 60px 40px;
            position: relative;
            .popup-subtitle {
                font-family: var(--partialFont);
                color: var(--primaryColor);
                margin-bottom: 15px;
                font-size: 16px;
            }
            .popup-title {
                margin-bottom: 20px;
            }
            .popup-des {
                font-size: 16px;
                color: var(--titleColor);
                margin: 20px 0 0;
            }
            .popup_full_width_btn{
                width:100%;
            }
            span.close {
                place-self: flex-start;
            }
            /* The Close Button */
            .close {
                color: var(--whiteColor);
                font-weight: 400;
                display: inline-block;
                width: 23px;
                height: 23px;
                line-height: 19px;
                background: var(--gray-slate-light-900);
                text-align: center;                   
                border-radius: 50px;
                margin-top: 5px;
                margin-right: 5px;
                position: absolute;
                font-size: 32px;
                top: 2px;
                right: 2px;
                &:hover,
                &:focus {                       
                    cursor: pointer;
                }
            }

        }

    }    
}
.right-gap-shop{
    padding-right: 30px;
}
body button.metform-btn, body button.metform-btn:not(.toggle){
    background: var(--button-bg);
    font-family: var(--partialFont);
    border-radius: 8px;
    &:hover{
        background: var(--button-bg-hover);
    }
}
body .mf-input-wrapper .mf-input{
    &:focus{
        border-color: var(--primaryColor) !important;
    }
}
#modal-close-default{
    .uk-modal-dialog{
        max-width: 880px !important;
        width: 100% !important;
    }
    .uk-close{
        background: var(--button-bg-dark);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        line-height: 15px;
       i{       
        color:#fff !important;
        font-size: 15px;
        
        &:before{
            margin:0;
        }
       }
        svg{
            display: none;
        }        
    }
}

#modal-close-login{
    .uk-modal-dialog{
        max-width: 600px !important;
        width: 100% !important;
    }
    .uk-close{
        background: var(--button-bg-dark);
        width: 24px;
        height: 24px;
        border-radius: 50%;
        line-height: 15px;
       i{       
        color:#fff !important;
        font-size: 15px;
        
        &:before{
            margin:0;
        }
       }
        svg{
            display: none;
        }        
    }
}
.body-overflow{
    overflow-y: hidden; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    height: 100vh;
}
[data-theme="dark"] .mf-input-wrapper .mf-input{
    background: transparent !important;
    border-color: rgba(255,255,255,0.3) !important;
    color:#fff !important
}

.sticky-hide-small{
    transition: .2s;
}
.box_wrap_hidden .elementor-image-box-img {
    overflow: hidden !important;
}
.footer_single_menu .menu-area .navbar ul:hover > li > a {
    opacity: 1;
}

//blog layout pagination top border styles
.reactheme-blog-grid.blog--style2 {
    .main__pagination__wrapper {
        padding-top: 25px;
        margin-top: 35px;
        position: relative;
        padding-left: 0;
        padding-right: 0;
        &::before {
            content: '';
            display: block;
            width: 97.5%;
            height :1px;
            background: #83838340;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        ul.main__page__pagination {
            padding-bottom: 0;
        }
    }
}
.wc-empty-cart-message{
    width: 100%;
}

[data-theme="dark"]  .filter-style img{
   filter: invert(1);
}
[data-theme="dark"]  .filter-half img{
    filter: invert(.1) !important;
}