*{outline:none;}
html{scroll-behavior: smooth;}
body{font-family:'Poppins', sans-serif !important; font-size:14px;}
a{text-decoration:none; transition:300ms}
a:hover{text-decoration:underline;}

input, select{box-shadow:none !important; border-radius:100px !important;}

.multiply{mix-blend-mode:multiply;}
.fs-12{font-size:12px;}
.fs-14{font-size:14px;}
.fs-18{font-size:18px;}
.top-unset{top:unset;}

.btn-secondary{color:rgba(var(--bs-white-rgb)) !important}
.btn-light{background:#fff !important; color:rgba(var(--bs-secondary-rgb))!important}
.btn-outline-light:active,
.btn-outline-light:hover{color:rgba(var(--bs-secondary-rgb))!important}
.btn{padding:8px 30px; font-weight:700; font-size:14px; border-radius:100px;}
.shadow-sm{box-shadow: 0 0 7px #dadada !important;}

.card,
.card-img-overlay,
.card-img{border:none; border-radius:0;}


#header{position:absolute; z-index:8; width:100%}

#mySearch[style="width: 100%;"]{width:calc(100% - 215px) !important}
#mySearch{width:0; position:absolute; z-index:556; top:40px; right:0; overflow-x:hidden; transition:300ms; background:#fff;}
#mySearch .input-group{min-width:200px;}
#mySearch .form-control{height:47px;}
#mySearch .btn{padding:0 15px;}

#logo{position:relative; z-index:1}
#logo:before{content:""; position:absolute; top:33px; right:0; left:-50px; height:47px; background:#fff;  z-index:-1}
#mainMenu .nav-link{color:#fff}
.dropdown-menu{border-radius:0; border:0; padding:5px; font-size:14px}

.navbar-toggler .icon-bar{background-color:#fff; transform:rotate(0deg) translate(0px, 0px); transition:300ms;}
.navbar-toggler .icon-bar{display:block; width:22px; height:2px; border-radius:1px;}
.navbar-toggler .icon-bar+.icon-bar{margin-top:4px;}
.navbar-toggler .icon-bar:nth-child(2){width:16px; transition:300ms;}
.navbar-toggler:hover>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:active>.icon-bar:nth-child(2){width:22px; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1){transform:rotate(45deg) translate(5px, 4px); transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(2){opacity:0; transition:300ms;}
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(3){transform:rotate(-45deg) translate(4px, -4px); transition:300ms;}

#offcanvasLogo{position:relative; z-index:1}
#offcanvasLogo:before{content:""; position:absolute; top:26px; right:-15px; left:-15px; height:36px; background:#fff; z-index:-1}
  

#mainMenu #megaMenu{position:unset;}
#mainMenu #megaMenu .dropdown-menu{width:100%; margin-top:0}
#mainMenu #megaMenu .dropdown-menu .text-dark:hover{color:#b11f27 !important}


.hot{position:relative;}
.hot:after{content:"HOT"; position:absolute; top:10px; left:10px; padding:3px 5px; background:rgba(var(--bs-primary-rgb)); color:#fff; font-size:10px}

#categoriesArea{}
#categoriesArea img{height:650px !important}
#categoriesArea .card .top-unset{transition:300ms;}
#categoriesArea .card:hover .top-unset{background-color:rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;}

#servicesArea{background:url(../template/imgs/services-bg.jpg) center; background-size:cover;}

#subCategoriesArea .card .top-unset{transition:300ms;}
#subCategoriesArea .card:hover .top-unset{background-color:rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;}

#pageHeading{background:url(../template/imgs/bg.jpg) center; background-size:cover;}

#accordionFlushFilter .accordion-button{background:none !important; box-shadow:none !important; padding:15px 0;}


#catsMenu a[data-bs-toggle="collapse"] {
    position: relative;
    display: block;
}

#catsMenu a[data-bs-toggle="collapse"]:after {
    content: "\F64D";
    font-family: bootstrap-icons !important;
    float: right;
    font-size: 16px;
}

#catsMenu a[aria-expanded="true"]:after {
    content: "\F2EA";
}


@media (min-width:768px){
#filter{display:block;}
.container-fluid{padding:0 60px}
#pageHeading{padding-top:120px;}
}

@media (min-width:1200px) and (max-width:1400px){}
@media (min-width:992px) and (max-width:1199px){}
@media (min-width:768px) and (max-width:991px){
#mySearch{top:37px;}
}
@media (min-width:576px) and (max-width:767px){
#mySearch[style="width: 100%;"]{width:calc(100% - 185px) !important}
#mySearch{top:37px;}
#header{position:unset; background:rgba(var(--bs-secondary-rgb));}
.container-fluid{padding:0 30px}
#categoriesArea img{height:500px !important}
}
@media (min-width:0px) and (max-width:575px){
#mySearch[style="width: 100%;"]{width:calc(100% - 135px) !important}
#mySearch{top:29px;}
#mySearch .form-control{height:35px;}
#header{position:unset; background:rgba(var(--bs-secondary-rgb));}
#logo img{height:78px}
#logo:before{top:25px; left:0; height:35px;}
.btn.btn-outline-light.fw-normal.px-3{font-size:12px; padding:5px 15px !important;}
#categoriesArea img{height:auto !important}
}