/* ==============================================================

Template name : Bizlamp - Multipurpose eCommerce HTML Template
Author : Shafiqul Islam
Version : v.1.0
Created : 2020-11-01
Last update : 2020-11-01

============================================================== */
/*================================================
1. Global CSS
2. Bootstrap CSS
3. Mini Cart CSS
4. Header CSS
5. Navbar Area CSS
6. Breadcrumbs Area CSS
7. Home Page Slider Area CSS
8. Facilities Area CSS
9. Box Banner Area CSS
10. Category Area CSS
11. Offer Countdown Area CSS
12. Product Listing CSS
13. Banner Area CSS
14. Product Info CSS
15. Single Product Details CSS
16. Cart Area CSS
17. Checkout Area CSS
18. Signup and Signin Page CSS
19. Blog List Page CSS
20. Sidebar CSS
21. Faqs Page CSS
22. About Us Page CSS
23. Contact Page CSS
24. Coming Soon CSS
25. Footer CSS
=================================================*/
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");

:root {
    --primary-bg: #092267;
    --yellow: #FFC200;
}

/*================================================
1. Global CSS
=================================================*/
* {
  box-sizing: border-box;
  outline: none;
  -moz-osx-font-smoothing: grayscale;
  /* Firefox */
  -webkit-font-smoothing: antialiased;
  /* WebKit  */
}

@font-face {
  font-family: Ruddy;
  src: url(/fonts/Ruddy/Ruddy-Regular.woff);
}

@font-face {
  font-family: Poppins;
  src: url(/fonts/Poppins/Poppins-Regular.ttf);
}

.second-navbar {
  border-top: 1px solid #0000001c;
  padding: 10px 0px;
}

.second-navbar span {
  font-family: Poppins;
  font-weight: 500;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Lato", sans-serif;
}

a {
  color: #353535;
  font-family: "Roboto", sans-serif;
}

p {
  color: #666666;
  font-family: "Roboto", sans-serif;
  line-height: 26px;
}

span,
label,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
  font-family: Poppins;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #353535;
}

button:focus {
  outline: none;
}

ul li {
  list-style: none;
}

button {
  border: none;
  display: inline-block;
  padding: 8px 15px;
  border-radius: 5px;
  color: #fff;
  margin-top: 10px;
  background: var(--primary-bg);
  transition: all 0.4s ease;
}


button:hover {
  background: #353535;
}

input[type=text],
input[type=email],
input[type=phone],
input[type=password] {
  padding: 8px 15px;
  display: block;
  width: 100%;
  transition: all 0.4s ease;
  background: #F7F7F7;
  border: 1px solid #F7F7F7;
  border-radius: 5px;
  margin-bottom: 10px;
  height: 45px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=phone]:focus,
input[type=password]:focus {
  outline: none;
  border: 1px solid var(--primary-bg);
}

select {
  padding: 8px 10px;
  background: #F7F7F7;
  border: 1px solid #F7F7F7;
  border-radius: 5px;
  display: block;
  width: 100%;
  transition: all 0.4s ease;
  margin-bottom: 10px;
  height: 45px;
}

select:focus {
  outline: none;
  border: 1px solid var(--primary-bg);
}

textarea {
  padding: 8px 10px;
  background: #F7F7F7;
  border-radius: 5px;
  display: block;
  width: 100%;
  border: none;
  transition: all 0.4s ease;
  margin-bottom: 30px;
}

input[type=submit] {
  background: var(--primary-bg);
  border: none;
  color: #fff;
  padding: 10px 20px;
  text-transform: uppercase;
  transition: all 0.4s ease;
}

input[type=submit]:focus {
  outline: none;
}

input[type=submit]:hover {
  background: #353535;
}

.contact-form form .contact-btn {
  text-align: center;
}

.contact-form form .contact-btn button {
  padding: 10px 70px;
}

table {
  width: 100%;
}

table tbody,
table thead,
table tfoot {
  width: 100%;
  border: 1px solid #f0f0f0;
  min-width: 100%;
}

table tbody tr td,
table tbody tr th,
table thead tr td,
table thead tr th,
table tfoot tr td,
table tfoot tr th {
  border: 1px solid #ddd;
  padding: 10px;
}

span.required {
  color: red;
}

.owl-carousel .owl-dots.disabled,
.owl-carousel .owl-nav.disabled {
  /* display: none; */
  display: inline-block;
}

.owl-carousel .owl-item img {
  width: auto;
  margin: 0px auto;
  max-width: 100%;
}

/*================================================
2. Bootstrap CSS
=================================================*/
.dropdown-menu {
  margin: 0;
  padding: 0;
  border: 1px solid #eee;
  box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15), 0 0 1px rgba(27, 31, 35, 0.2);
  min-width: 13rem;
}

.dropdown-item {
  border-bottom: 1px solid #eee;
  font-size: 14px;
  padding: 0.5rem 0.6rem;
}

.dropdown-item i {
  width: 18px;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary-bg);
  color: #ffffff;
}

.btn-primary {
  background-color: var(--primary-bg);
  border-color: var(--primary-bg);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #353535;
  border-color: #353535;
}

.btn-primary-yellow {
  background-color: var(--yellow);
  border-color: var(--yellow);
  color: #353535;
}

.btn-primary-yellow:hover {
  background-color: #353535;
  border-color: #353535;
  color: var(--yellow);
}

.btn-secondary {
  background-color: #2f36793d;
  border-color: #2f36793d;
  color: #2F3779;
}

.btn-secondary:hover {
  background-color: #2F3779;
  border-color: #2F3779;
  color: #e6e6e6cb;
}

.form-control {
  height: calc(1.7em + .75rem + 2px);
}

.form-control:focus {
  box-shadow: none;
}

.navbar-light .navbar-toggler {
  margin-top: 0px;
  background: none;
}

.nav-tabs {
  justify-content: center;
}

.nav-tabs .nav-link {
  border-radius: 0px;
  justify-content: center;
}

.form-control {
  border-radius: 0;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
  background-color: #353535;
  border-color: #353535;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: none;
}

.pagination {
  margin: 25px 0;
}

.page-item.active .page-link {
  background-color: var(--primary-bg);
  border-color: var(--primary-bg);
}

.page-link {
  color: #353535;
  padding: 0.5rem 1rem;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
  margin: 5px;
  border-radius: 3px;
}

.page-link:hover {
  background-color: var(--primary-bg);
  border-color: var(--primary-bg);
  color: #fff;
  transition: all 0.3s;
}

blockquote.blockquote {
  background: #f8f8f8;
  padding: 20px;
  border-left: 4px solid #353535;
}

/*================================================
3. Mini Cart CSS
=================================================*/
.dropdown-menu.cart-dropdown.show {
  min-width: 25rem;
  padding: 20px;
  left: auto;
  right: 0;
}

minicart-product-info {
  margin-bottom: 10px;
}

.minicart-product-info .delete-btn {
  position: absolute;
  right: 10px;
}

.minicart-product-info img.img-border {
  border: 1px solid #eee;
  padding: 5px;
  width: 80px;
}

.minicart-product-info a {
  margin: 0;
  padding: 0 !important;
}

.minicart-product-info .product-meta h5.product-title {
  font-size: 15px;
  margin-top: 0px;
  line-height: 20px;
}

.minicart-product-info .product-meta h5.product-title a {
  padding: 0 !important;
  margin: 0 !important;
  text-transform: none;
}

.minicart-product-info .product-meta span.product-price {
  font-weight: bold;
}

.minicart-product-calculation {
  border-top: 1px solid #eee;
  margin-left: -20px;
  margin-right: -20px;
  padding: 20px 20px 0px 20px;
  margin-top: 20px;
}

.minicart-product-calculation p {
  margin-bottom: 5px;
}

.minicart-product-calculation .dcart-action a {
  color: #fff !important;
  margin: 3px;
  display: block;
  font-size: 16px;
  padding: 7px !important;
}

span.item-delete {
  padding: 1.5rem 0;
  display: block;
}

/*================================================
4. Header CSS
=================================================*/
.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fff;
  top: 0;
  left: 0;
}

.preloader .loader {
  position: absolute;
  top: 43%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-43%);
  transform: translateY(-43%);
  text-align: center;
  margin: 0 auto;
}





header.header-area {
  /* padding: 0px 0; */
  margin: 0;
  box-shadow: 0px 1px 4px 0px #00000038;
}

header.header-area.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.1);
  background: #ffffff;
}

/*================================================
5. Navbar Area CSS
=================================================*/
.main-responsive-nav {
  display: none;
}

.main-navbar {
  padding: 5px 0;
}

.main-navbar .navbar {
  position: inherit;
  padding: 0;
}

.main-navbar .navbar .navbar-brand {
  font-size: inherit;
  line-height: 1;
  padding: 0;
}

.main-navbar .navbar ul {
  padding-left: 0;
  list-style-type: none;
  margin-bottom: 0;
}

.main-navbar .navbar .navbar-nav {
  margin-left: 30px;
  margin-right: auto;
}

.main-navbar .navbar .navbar-nav .nav-item {
  position: relative;
}

.main-navbar .navbar .navbar-nav .nav-item a {
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  padding-top: 17px;
  padding-bottom: 16px;
  font-size: 16px;
  color: #353535;
  transition: all 0.4s ease;
}

.main-navbar .navbar .navbar-nav .nav-item a i {
  font-size: 18px;
  position: relative;
  top: 2px;
  display: inline-block;
  margin-left: -3px;
  margin-right: -3px;
}

.main-navbar .navbar .navbar-nav .nav-item a:hover,
.main-navbar .navbar .navbar-nav .nav-item a:focus,
.main-navbar .navbar .navbar-nav .nav-item a.active {
  color: #353535;
}

.main-navbar .navbar .navbar-nav .nav-item:last-child a {
  margin-right: 0;
}

.main-navbar .navbar .navbar-nav .nav-item:first-child a {
  margin-left: 0;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu {
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  background: #fff;
  position: absolute;
  border: none;
  top: 60px;
  left: 0;
  width: 275px;
  z-index: 99;
  display: block;
  opacity: 0;
  visibility: hidden;
  border-radius: 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  padding: 15px 5px;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li a {
  padding: 8px 15px;
  margin: 0;
  position: relative;
  display: block;
  font-size: 15px;
  font-weight: 500;
  text-transform: none;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li a i {
  margin: 0;
  position: absolute;
  top: 50%;
  font-size: 20px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li a:hover,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li a:focus {
  color: #353535;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: #515050;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: #515050;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: #353535;
  padding-left: 5px;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: #515050;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: #353535;
  padding-left: 5px;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: #515050;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: #353535;
  padding-left: 5px;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: #515050;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: #353535;
  padding-left: 5px;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: #515050;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus,
.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: #353535;
  padding-left: 5px;
}

.main-navbar .container {
  position: relative;
}

.main-navbar button.navbar-toggler {
  border: none;
  padding: 0px;
  margin: 0px;
}

.main-navbar button.navbar-toggler i {
  font-size: 38px;
  font-weight: normal;
  color: #353535;
}

.main-navbar nav.navbar.navbar-expand-lg.navbar-light {
  padding-left: 0;
  padding-right: 0;
}

.main-navbar ul.navbar-nav.mr-auto {
  margin-left: auto;
  margin-right: auto;
}

.main-navbar ul.navbar-nav.mr-auto li {
  margin: 0px 5px;
}

.main-navbar ul.navbar-nav.mr-auto li.active a {
  color: #353535;
}

.main-navbar ul.navbar-nav.mr-auto li ul.dropdown-menu li {
  margin: 0px;
  position: relative;
}

.main-navbar ul.navbar-nav.mr-auto li ul.dropdown-menu li:last-child a {
  border-bottom: none;
}

.main-navbar ul.navbar-nav.mr-auto li ul.dropdown-menu li a {
  border-bottom: 1px solid #eee;
  font-size: 14px;
  padding: 0.6rem 0.6rem;
  color: #353535;
  display: block;
  font-weight: 600;
  transition: all 0.4s ease;
}

.main-navbar ul.navbar-nav.mr-auto li ul.dropdown-menu li a i {
  float: right;
  position: relative;
  top: 3px;
}

.main-navbar ul.navbar-nav.mr-auto li ul.dropdown-menu li a:hover {
  color: #353535;
  padding-left: 20px;
}

.main-navbar ul.navbar-nav.mr-auto .nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.main-navbar ul.navbar-nav.mr-auto .nav-item .dropdown-menu li .dropdown-menu {
  left: 208px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

.main-navbar ul.navbar-nav.mr-auto .nav-item .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}

.main-navbar ul.cart-menu {
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-align: right;
  display: flex;
}

.main-navbar ul.cart-menu.responsive {
  display: none;
}

.main-navbar ul.cart-menu li {
  margin: 0px 10px;
  text-transform: uppercase;
}

.main-navbar ul.cart-menu li .dropdown {
  position: inherit;
}

.main-navbar ul.cart-menu li .dropdown-menu {
  left: auto;
  right: 0;
}

.main-navbar ul.cart-menu li .minicart-products .minicart-product-info.d-flex figure {
  margin-right: 15px;
}

.main-navbar ul.cart-menu li a {
  font-size: 15px;
  padding-top: 17px;
  padding-bottom: 17px;
  text-decoration: none;
  text-transform: uppercase;
  font-family: "Lato", sans-serif;
  font-weight: 600;
  color: #353535;
  transition: all 0.4s ease;
  display: block;
}

.main-navbar ul.cart-menu li a:hover {
  color: #353535;
}

.main-navbar ul.cart-menu li a i {
  vertical-align: middle;
  font-size: 22px;
  margin-right: 4px;
  margin-top: -3px;
}

.main-navbar ul.cart-menu li a.dropdown-item {
  padding: 0.6rem 0.6rem;
  font-size: 14px;
}

.main-navbar ul.cart-menu li a.dropdown-item:hover {
  padding-left: 18px;
}

.main-navbar ul.cart-menu li a span.item-count {
  position: absolute;
  left: 12px;
  background: var(--primary-bg);
  padding: 1px;
  width: 17px;
  height: 17px;
  color: #fff;
  font-size: 10px;
  text-align: center;
  border-radius: 90%;
  top: 7px;
}

.main-navbar ul.cart-menu li .search-btn i {
  cursor: pointer;
}

.main-navbar ul.cart-menu .searchbox {
  opacity: 0;
  position: absolute;
  /* min-width: 50px;*/
  width: 0%;
  right: 40px;
  left: auto;
  overflow: hidden;
  -webkit-transition: width 0.3s;
  -moz-transition: width 0.3s;
  -ms-transition: width 0.3s;
  -o-transition: width 0.3s;
  transition: width 0.3s;
}

.main-navbar ul.cart-menu .searchbox .searchbox-input {
  top: 0;
  right: 0;
  outline: 0;
  background: #ffffff;
  width: 25%;
  height: 50px;
  margin: 0;
  padding: 0px 55px 0px 20px;
  font-size: 20px;
  color: #353535;
  border: 1px solid;
}

.main-navbar ul.cart-menu .searchbox .searchbox-input::-webkit-input-placeholder {
  color: #d74b4b;
}

.main-navbar ul.cart-menu .searchbox .searchbox-input:-moz-placeholder {
  color: #d74b4b;
}

.main-navbar ul.cart-menu .searchbox .searchbox-input::-moz-placeholder {
  color: #d74b4b;
}

.main-navbar ul.cart-menu .searchbox .searchbox-input:-ms-input-placeholder {
  color: #d74b4b;
}

.main-navbar ul.cart-menu .searchbox .searchbox-icon,
.main-navbar ul.cart-menu .searchbox .searchbox-submit {
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  top: 0;
  font-size: 22px;
  right: 0;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  color: #ffffff;
  background: #353535;
  border-radius: 0;
}

.main-navbar ul.cart-menu .searchbox.searchbox-open {
  width: 100%;
  opacity: 1;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--mainColor);
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--mainColor);
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--mainColor);
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li.active a {
  color: var(--mainColor);
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li.active a {
  color: var(--mainColor);
}

.main-navbar .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.main-navbar .navbar .navbar-nav .nav-item.megamenu {
  position: inherit;
}

.main-navbar .navbar .navbar-nav .nav-item.megamenu .container {
  display: block;
  -ms-flex-wrap: unset;
  flex-wrap: unset;
  -webkit-box-align: unset;
  -ms-flex-align: unset;
  align-items: unset;
  -webkit-box-pack: unset;
  -ms-flex-pack: unset;
  justify-content: unset;
}

.main-navbar .navbar .navbar-nav .nav-item.megamenu .dropdown-menu {
  width: 100%;
  margin-top: 8px;
  position: absolute;
  top: auto;
  left: 0;
  margin: auto;
  right: 0;
  padding: 30px 10px;
  -webkit-transform: unset !important;
  transform: unset !important;
}

.main-navbar .navbar .navbar-nav .nav-item.megamenu .dropdown-menu a {
  border-bottom: none !important;
}

.main-navbar .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu li a {
  margin-top: 14px;
  color: var(--optionalColor);
  padding: 0;
  font-weight: 500;
}

.main-navbar .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu li a:hover,
.main-navbar .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu li a:focus,
.main-navbar .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu li a.active {
  color: #353535;
}

.main-navbar .navbar .navbar-nav .nav-item.megamenu .submenu-title {
  position: relative;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 8px;
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-top: 25px;
  font-size: 18px;
  font-weight: 600;
  /* &::before {
     width: 30px;
     height: 1px;
     content: '';
     position: absolute;
     left: 0;
     bottom: -1px;
     background-color: var(--mainColor);
   }*/
}

.main-navbar .navbar .navbar-nav .nav-item.megamenu .submenu-title:first-child {
  margin-top: 0;
}

/*================================================
6. Breadcrumbs Area CSS
=================================================*/
div.breadcrumbs {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/Frame_2.png);
  padding: 60px 20px;
}

div.breadcrumbs h2.page-title {
  color: #fff;
  margin: 8px 0px;
  font-weight: 600;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-size: 40px;
  line-height: 55px;
}

div.breadcrumbs ul.breadcrumbs-link {
  list-style: none;
  padding: 0;
  position: relative;
  margin: 16px 0;
  font-weight: 500;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-size: 16px;
  line-height: 30px;
}

div.breadcrumbs ul.breadcrumbs-link li {
  display: inline-block;
  margin: 0px 5px;
  position: relative;
}

div.breadcrumbs ul.breadcrumbs-link li a {
  color: #fff;
}

div.breadcrumbs ul.breadcrumbs-link li a i {
  vertical-align: middle;
  position: relative;
  right: -5px;
}

div.breadcrumbs ul.breadcrumbs-link li:last-child {
  color: #ffa700;
}

div.breadcrumbs a {
  color: #353535;
  text-decoration: none;
  font-weight: 500;
}

div.breadcrumbs a:hover {
  color: #353535;
  transition: all 0.3s ease;
}

/*================================================
7. Home Page Slider Area CSS
=================================================*/
div.home-slider {
  padding: 60px 0px;
  position: relative;
  /* background: #FFDCD7; */
  background-image: linear-gradient(to right, #FFDCD7, #DBD6E3);
  height: 380px;
  overflow: hidden;
}

div.home-slider .owl-stage-outer.owl-height {
  height: 320px !important;
}

div.home-slider .owl-item.active h2 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

div.home-slider .owl-item.active a {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

div.home-slider .owl-item.active h4 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

div.home-slider .slider-caption-text {
  padding: 10px 0px 10px 70px;
}

div.home-slider .item-1 .slider-caption-text h2,
div.home-slider .item-3 .slider-caption-text h2 {
  font-size: 48px;
  color: #000;
  line-height: 53px;
  font-weight: bold;
  padding-right: 35%;
  padding-bottom: 20px;
}

div.home-slider .item-2 .slider-caption-text h2 {
  font-size: 48px;
  color: #000;
  line-height: 53px;
  font-weight: bold;
  padding-right: 21%;
  padding-bottom: 20px;
}

div.home-slider .slider-caption-text h2 span {
  color: var(--primary-bg);
  font-weight: bold;
}

div.home-slider .slider-caption-text h4 {
  color: red;
}

div.home-slider .slider-caption-text a.shop-now {
  margin-top: 20px;
  background: var(--primary-bg);
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 18px;
  display: inline-block;
  transition: all 0.6s ease;
  color: #ffffff;
}

div.home-slider .slider-caption-text a.shop-now:hover {
  background: #353535;
}

div.home-slider .owl-item img {
  width: auto;
  margin: 0px auto;
}

div.home-slider .owl-nav [class*=owl-] {
  position: absolute;
  top: 40%;
  background: var(--primary-bg);
  padding: 10px 3px !important;
  font-size: 24px;
}

div.home-slider .owl-nav [class*=owl-].owl-next {
  right: 0;
}

div.marketing-slider {
  padding: 60px 0px;
  position: relative;
  /* background: #FFDCD7; */
  background-image: linear-gradient(to right, #FFDCD7, #DBD6E3);
  height: 380px;
  overflow: hidden;
}

div.marketing-slider .owl-stage-outer.owl-height {
  height: 320px !important;
}

div.marketing-slider .owl-item.active h2 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

div.marketing-slider .owl-item.active a {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

div.marketing-slider .owl-item.active h4 {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

div.marketing-slider .slider-caption-text {
  padding: 10px 0px 10px 70px;
}

div.marketing-slider .item-1 .slider-caption-text h2,
div.marketing-slider .item-3 .slider-caption-text h2 {
  font-size: 48px;
  color: #000;
  line-height: 53px;
  font-weight: bold;
  padding-right: 35%;
  padding-bottom: 20px;
}

div.marketing-slider .item-2 .slider-caption-text h2 {
  font-size: 48px;
  color: #000;
  line-height: 53px;
  font-weight: bold;
  padding-right: 21%;
  padding-bottom: 20px;
}

div.marketing-slider .slider-caption-text h2 span {
  color: var(--primary-bg);
  font-weight: bold;
}

div.marketing-slider .slider-caption-text h4 {
  color: red;
}

div.marketing-slider .slider-caption-text a.shop-now {
  margin-top: 20px;
  background: var(--primary-bg);
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 18px;
  display: inline-block;
  transition: all 0.6s ease;
  color: #ffffff;
}

div.marketing-slider .slider-caption-text a.shop-now:hover {
  background: #353535;
}

div.marketing-slider .owl-item img {
  width: auto;
  margin: 0px auto;
}

div.marketing-slider .owl-nav [class*=owl-] {
  position: absolute;
  top: 40%;
  background: var(--primary-bg);
  padding: 10px 3px !important;
  font-size: 24px;
}

div.marketing-slider .owl-nav [class*=owl-].owl-next {
  right: 0;
}

.owl-dots {
  text-align: center;
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
}

.owl-carousel.home-slider .owl-dots button.owl-dot {
  background: 0 0;
  color: inherit;
  border: 1px solid var(--primary-bg);
  padding: 0 !important;
  font: inherit;
  width: 30px;
  height: 12px;
  margin: 10px;
  border-radius: 40px;
}

.owl-carousel.home-slider .owl-dots button.owl-dot.active {
  background: var(--primary-bg);
}

.owl-carousel.home-slider .owl-nav button {
  position: absolute;
  top: 42%;
  margin: 0;
}

.owl-carousel.home-slider .owl-nav button.owl-next {
  right: 2% !important;
  top: 42%;
  height: 35px !important;
  width: 35px !important;
  background: var(--primary-bg) !important;
  border-radius: 50%;
}

.owl-carousel.home-slider .owl-nav button.owl-next i {
  color: #FFFFFF !important;
  font-size: 30px !important;
}

.owl-carousel.home-slider .owl-nav button.owl-prev {
  left: 2% !important;
  top: 42%;
  padding: 0px 0 !important;
  height: 35px !important;
  width: 35px !important;
  background: var(--primary-bg) !important;
  border-radius: 50% !important;
}

.owl-carousel.home-slider .owl-nav button.owl-prev i {
  color: #FFFFFF !important;
  font-size: 30px !important;
}

.owl-carousel.home-slider .owl-nav button.owl-next {
  padding: 0px !important;
  height: 35px;
  border: 2px solid var(--primary-bg);
  border-radius: 90%;
  width: 35px;
}

.owl-carousel.home-slider .owl-nav button.owl-next i {
  font-size: 30px;
  color: var(--primary-bg);
}

.owl-carousel.marketing-slider .owl-dots button.owl-dot {
  background: 0 0;
  color: inherit;
  border: 1px solid var(--primary-bg);
  padding: 0 !important;
  font: inherit;
  width: 30px;
  height: 12px;
  margin: 10px;
  border-radius: 40px;
}

.owl-carousel.marketing-slider .owl-dots button.owl-dot.active {
  background: var(--primary-bg);
}

.owl-carousel.marketing-slider .owl-nav button {
  position: absolute;
  top: 42%;
  margin: 0;
}

.owl-carousel.marketing-slider .owl-nav button {
  padding: 0px 0 !important;
  top: 42%;
  height: 35px !important;
  width: 35px !important;
  background: var(--primary-bg) !important;
  border-radius: 50%;
  height: 35px;
  border: 2px solid var(--primary-bg);
}

.owl-carousel.marketing-slider .owl-nav button.owl-next {
  /* padding: 0px 0 !important; */
  right: 2% !important;
}

.owl-carousel.marketing-slider .owl-nav button.owl-prev {
  left: 2% !important;
}

.owl-carousel.marketing-slider .owl-nav button i {
  color: #FFFFFF;
  font-size: 30px !important;
}

/* card slider */

.card-slider:hover ~ button.owl-next,
.card-slider:hover ~ button.owl-prev {
  background: var(--primary-bg) !important;
}

.owl-carousel.card-slider .owl-nav button.owl-next {
  position: absolute;
  right: 2% !important;
  top: 42%;
  height: 30px !important;
  width: 30px !important;
  background-color: (128, 128, 128, 0.57);
  border-radius: 50%;
}

.owl-carousel.card-slider .owl-nav button.owl-next:hover {
  background: var(--primary-bg) !important;
}

.owl-carousel.card-slider .owl-nav button.owl-next i {
  color: #FFFFFF !important;
  font-size: 22px !important;
}

.owl-carousel.card-slider .owl-nav button.owl-prev {
  position: absolute;
  left: 2% !important;
  top: 42%;
  padding: 4px 0 !important;
  height: 30px !important;
  width: 30px !important;
  background-color: (128, 128, 128, 0.57);
  border-radius: 50% !important;
}

.owl-carousel.card-slider .owl-nav button.owl-prev:hover {
  background: var(--primary-bg) !important;
}

.owl-carousel.card-slider .owl-nav button.owl-prev i {
  color: #FFFFFF !important;
  font-size: 22px !important;
}

.owl-carousel.card-slider .owl-nav button.owl-next {
  padding: 0px !important;
  height: 35px;
  /* border: 2px solid var(--primary-bg); */
  border-radius: 90%;
  width: 35px;
}

.owl-carousel.card-slider .owl-nav button.owl-next i {
  font-size: 30px;
  color: var(--primary-bg);
}

.owl-carousel.card-slider .owl-dots {
  bottom: 0px;
}

.owl-carousel.card-slider .owl-dots button.owl-dot {
  background: 0 0;
  color: inherit;
  border: 1px solid var(--primary-bg);
  padding: 0 !important;
  font: inherit;
  width: 12px;
  height: 12px;
  margin: 5px;
  border-radius: 40px;
}

.owl-carousel.card-slider .owl-dots button.owl-dot.active {
  background: var(--primary-bg);
}

/* card slider */

/*================================================
7. Facilities Area CSS
=================================================*/
.facilities {
  padding: 60px 0;
}

.facilities .facilities-item {
  text-align: center;
  box-shadow: 0px 12px 20px rgba(255, 82, 53, 0.1);
  padding: 30px 20px;
  border-radius: 5px;
}

.facilities .facilities-item:hover {
  transition: all 0.4s;
}

.facilities .facilities-item img {
  height: 60px;
}

.facilities .facilities-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 25px;
}

/*================================================
15. Product Listing CSS
=================================================*/
.bl-products-wrapper {
  padding: 15px 0;
  position: relative;
}

.bl-product-item {
  border: 1px solid #ededed;
  padding: 20px 15px 20px 15px;
  border-radius: 10px;
  position: relative;
  margin-bottom: 30px;
  min-width: 190px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
}

.bl-product-item:hover {
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.08);
  /* transition: all 0.4s; */
}

.bl-product-item:hover .bl-product-item-image .add-to-cart {
  opacity: 1;
}

.bl-product-item:hover .bl-product-item-hover-description {
  opacity: 1;
}

.bl-product-item .bl-product-item-image {
  text-align: center;
  margin: 20px 0;
}

.bl-product-item .bl-product-item-image .add-to-cart {
  position: absolute;
  left: auto;
  right: 10px;
  top: 10px;
  transition: all 0.4s;
  opacity: 0;
}

.bl-product-item .bl-product-item-image .add-to-cart a.btn-add-to-cart {
  background: var(--primary-bg);
  color: #fff;
  padding: 10px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 30px;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration: none;
  font-weight: 600;
  width: 40px;
  height: 40px;
  text-align: center;
}

.bl-product-item .bl-product-item-image .add-to-cart a.btn-add-to-cart i {
  text-align: center;
  font-size: 21px;
}

.bl-product-item .bl-product-item-image .add-to-cart a.btn-add-to-cart:hover {
  background: #353535;
  transition: all 0.4s;
}

.bl-product-item .bl-product-item-description {
  margin: 15px -10px 0px -10px;
  padding: 10px;
  justify-content: space-between;
}

.bl-product-item .bl-product-item-description .bl-product-item-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-bg);
}

.bl-product-item .bl-product-item-description .bl-product-item-name {
  font-size: 16px;
  font-weight: 700;
  height: 75px;
}

.bl-product-item .bl-product-item-description .bl-product-item-name a {
  color: #353535;
  text-decoration: none;
}

.bl-product-item .bl-product-item-description .bl-product-item-name a:hover {
  color: var(--primary-bg);
}

.bl-product-item .bl-product-item-hover-description {
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.02);
  opacity: 0;
  border-radius: 0 0 10px 10px;
  transition: all 0.4s;
  /* max-height: 269px; */
}

.bl-product-item .bl-product-item-hover-description .bl-product-item-price {
  display: inline-block;
  background: var(--primary-bg);
  color: #fff;
  text-align: center;
  padding: 5px 30px;
  font-weight: 600;
  border-radius: 5px;
  margin: 0;
  position: relative;
  top: -15px;
}

.bl-product-item .bl-product-item-hover-description .bl-product-item-name a {
  margin: 0px 0 15px 0px;
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  color: #353535;
}

.bl-product-item .bl-product-item-hover-description .bl-product-item-name a:hover {
  color: var(--primary-bg);
  transition: all 0.4s;
}

.bl-product-item .bl-product-item-hover-description .star-rating {
  margin-bottom: 10px;
}

.bl-product-item .bl-product-item-hover-description .star-rating i {
  color: #FF8D07;
  margin: 0px 2px;
}

.owl-carousel.product-carousel .owl-nav button {
  position: absolute;
  margin: 0;
}

.owl-carousel.product-carousel .owl-nav button.owl-next {
  right: 0% !important;
  top: -85px;
  height: 35px !important;
  width: 35px !important;
  border-radius: 50% !important;
  background: transparent;
  border: 2px solid var(--primary-bg);
}

.owl-carousel.product-carousel .owl-nav button.owl-next i {
  color: var(--primary-bg);
  font-size: 30px !important;
}

.owl-carousel.product-carousel .owl-nav button.owl-prev {
  right: 44px !important;
  top: -85px;
  height: 35px !important;
  width: 35px !important;
  background: transparent;
  border: 2px solid var(--primary-bg);
  border-radius: 50% !important;
}

.owl-carousel.product-carousel .owl-nav button.owl-prev i {
  color: var(--primary-bg);
  font-size: 30px;
}

/*================================================
15. Single Product Details CSS
=================================================*/
div.product-details {
  margin: 80px 0;
}

div.product-details .carousel-indicators {
  bottom: -40px;
  margin: 0;
}

div.product-details .carousel-indicators li {
  text-indent: inherit;
  width: 75px;
}

div.product-details .carousel-indicators li img {
  border: 1px solid #ddd;
  padding: 5px;
}

div.product-details .single-product-image {
  padding-bottom: 150px;
}

div.product-details .single-product-details .brand {
  text-transform: uppercase;
  border: 1px solid var(--primary-bg);
  display: inline-block;
  padding: 2px 12px;
}

div.product-details .single-product-details .star-rating {
  float: right;
  display: flex;
}

div.product-details .single-product-details .star-rating i {
  color: var(--primary-bg);
  margin: 6px 0;
}

div.product-details .single-product-details .star-rating p {
  margin: 3px 6px;
}

div.product-details .single-product-details .product-name h2 {
  font-size: 25px;
  line-height: 32px;
  margin: 10px 0px;
  font-weight: 600;
}

div.product-details .single-product-details .product-description-title h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0 8px 0px;
  font-family: var(--primary-bg);
}

div.product-details .single-product-details p.product-short-description {
  color: #666666;
}

div.product-details .single-product-details .color-select {
  margin: 10px 0;
}

div.product-details .single-product-details .color-select h5.widget-title {
  font-size: 18px;
  font-weight: bold;
}

div.product-details .single-product-details .color-select input[type=radio] {
  display: none;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label span {
  transform: scale(1.25);
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .red {
  border: 2px solid #711313;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .orange {
  border: 2px solid #873a08;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .yellow {
  border: 2px solid #816102;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .olive {
  border: 2px solid #505a0b;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .green {
  border: 2px solid #0e4e1d;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .teal {
  border: 2px solid #003633;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .blue {
  border: 2px solid #103f62;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .violet {
  border: 2px solid #321a64;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .purple {
  border: 2px solid #501962;
}

div.product-details .single-product-details .color-select input[type=radio]:checked+label .pink {
  border: 2px solid #851554;
}

div.product-details .single-product-details .color-select label {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  cursor: pointer;
}

div.product-details .single-product-details .color-select label:hover span {
  transform: scale(1.25);
}

div.product-details .single-product-details .color-select label span {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
  border-radius: 90%;
}

div.product-details .single-product-details .color-select label span.red {
  background: #DB2828;
}

div.product-details .single-product-details .color-select label span.orange {
  background: #F2711C;
}

div.product-details .single-product-details .color-select label span.yellow {
  background: #FBBD08;
}

div.product-details .single-product-details .color-select label span.olive {
  background: #B5CC18;
}

div.product-details .single-product-details .color-select label span.green {
  background: #21BA45;
}

div.product-details .single-product-details .color-select label span.teal {
  background: #00B5AD;
}

div.product-details .single-product-details .color-select label span.blue {
  background: #2185D0;
}

div.product-details .single-product-details .color-select label span.violet {
  background: #6435C9;
}

div.product-details .single-product-details .color-select label span.purple {
  background: #A333C8;
}

div.product-details .single-product-details .color-select label span.pink {
  background: #E03997;
}

div.product-details .single-product-details .size-select {
  margin: 10px 0;
}

div.product-details .single-product-details .size-select h5.widget-title {
  font-size: 18px;
  font-weight: bold;
}

div.product-details .single-product-details .size-select input[type=radio] {
  display: none;
}

div.product-details .single-product-details .size-select input[type=radio]:checked+label span {
  border: 1px solid var(--primary-bg);
}

div.product-details .single-product-details .size-select label {
  display: inline-block;
  width: 50px;
  height: 32px;
  margin-right: 10px;
  cursor: pointer;
}

div.product-details .single-product-details .size-select label:hover span {
  border: 1px solid var(--primary-bg);
}

div.product-details .single-product-details .size-select label span {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
  background: #FFF6F5;
  border: 1px solid #FFF6F5;
  color: var(--primary-bg);
  text-align: center;
  padding: 3px 10px;
}

div.product-details .single-product-details .quantity {
  margin-bottom: 25px;
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 15px;
}

div.product-details .single-product-details .quantity h5.quantity-title {
  font-size: 18px;
  font-weight: bold;
}

div.product-details .single-product-details .quantity form {
  display: flex;
  justify-content: space-between;
}

div.product-details .single-product-details .quantity form .qty-w {
  display: flex;
}

div.product-details .single-product-details .quantity form input {
  border: 1px solid #f9e4e1;
  background: #fff6f5;
  height: 38px;
  padding: 0px 12px;
  text-align: center;
  font-weight: bold;
  border-radius: 0;
}

div.product-details .single-product-details .quantity form input:focus {
  outline: none;
}

div.product-details .single-product-details .quantity form input[type=text] {
  width: 60px;
}

div.product-details .single-product-details .quantity form button.add-to-cart {
  margin: 0px;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  font-size: 14px;
  padding: 5px 18px;
  height: 38px;
}

div.product-details .single-product-details .quantity form a.add-to-favourites {
  margin: 8px 0px;
  text-decoration: none;
  transition: all 0.3s ease;
  color: var(--primary-bg);
}

div.product-details .single-product-details .quantity form a.add-to-favourites:hover {
  color: #353535;
}

div.product-details .single-product-details .quantity form a.add-to-favourites i {
  font-size: 22px;
  vertical-align: bottom;
}

div.product-details .single-product-details .payment-method {
  margin: 40px 0;
}

div.product-details .single-product-details .payment-method h5.payment-method-title {
  font-size: 18px;
  font-weight: bold;
}

div.product-details .single-product-details .price {
  margin-top: 15px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  font-size: 28px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  color: var(--primary-bg);
}

div.product-details .single-product-details .price .base-price {
  font-weight: bold;
  color: #666;
  margin-right: 2rem;
  text-decoration: line-through;
}

div.product-details .single-product-details .price .off-percent {
  border: 1px solid var(--primary-bg);
  display: inline-block;
  padding: 5px 12px;
  margin-left: 2rem;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 20px;
  height: 30px;
  margin-top: 4px;
  color: #353535;
}

div.product-details .product-details-tab {
  margin: 50px 0;
}

div.product-details .product-details-tab .nav-tabs a.nav-item {
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.5rem 1.8rem;
  font-size: 17px;
}

div.product-details .product-details-tab .tab-content {
  padding: 20px;
  border: 1px solid #ddd;
  margin-top: -1px;
}

div.product-details .product-details-tab .tab-content ul {
  margin: 0px;
  padding: 0px;
}

div.product-details .product-details-tab .tab-content ul li {
  position: relative;
  padding-left: 20px;
}

div.product-details .product-details-tab .tab-content ul li:after {
  content: "";
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 90%;
  top: 6px;
  border: 2px solid #666;
}

div.product-details .product-details-tab .tab-content table tbody,
div.product-details .product-details-tab .tab-content table thead,
div.product-details .product-details-tab .tab-content table tfoot {
  border: none;
}

div.product-details .product-details-tab .tab-content table tbody tr td {
  border: none;
}

div.product-details .related-product {
  margin-top: 80px;
  margin-bottom: 50px;
}

div.product-details .related-product h3 {
  font-weight: 700;
  position: relative;
  margin-bottom: 30px;
}

div.product-details .related-product .owl-carousel .owl-nav button {
  position: absolute;
  margin: 0;
}

div.product-details .related-product .owl-carousel .owl-nav button.owl-next {
  right: 0% !important;
  top: -65px;
  height: 35px !important;
  width: 35px !important;
  border-radius: 50% !important;
  background: transparent;
  border: 2px solid var(--primary-bg);
}

div.product-details .related-product .owl-carousel .owl-nav button.owl-next i {
  color: var(--primary-bg);
  font-size: 30px !important;
}

div.product-details .related-product .owl-carousel .owl-nav button.owl-prev {
  right: 45px !important;
  top: -65px;
  border-radius: 50% !important;
  height: 35px !important;
  width: 35px !important;
  background: transparent;
  border: 2px solid var(--primary-bg);
}

div.product-details .related-product .owl-carousel .owl-nav button.owl-prev i {
  color: var(--primary-bg);
  font-size: 30px;
}

div.product-details .review-wrapper .review-list .review-item {
  border: 1px solid #dddddd;
  margin: 15px 0;
  padding: 30px;
  display: flex;
}

div.product-details .review-wrapper .review-list .review-item .review-image img {
  width: 90px;
  height: 90px;
  border-radius: 90%;
  border: 1px solid #eee;
}

div.product-details .review-wrapper .review-list .review-item .review-text {
  margin-left: 20px;
}

div.product-details .review-wrapper .review-list .review-item .review-text .customer-name {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

div.product-details .review-wrapper .review-list .review-item .review-text .customer-name h4 {
  font-size: 22px;
}

div.product-details .review-wrapper .review-list .review-item .review-text .customer-name span.review-date {
  font-size: 15px;
  font-weight: normal;
}

div.product-details .review-wrapper .review-list .review-item .review-text .customer-name .star-rating i {
  color: var(--primary-bg);
}

div.product-details .review-wrapper .review-form {
  margin-top: 50px;
}

div.product-details .review-wrapper .review-form .star-rating {
  float: right;
}

div.product-details .review-wrapper .review-form .star-rating i {
  font-size: 22px;
  color: var(--primary-bg);
}

div.product-details .review-wrapper .review-form h4 {
  font-size: 20px;
}

/*================================================
7. Box Banner Area CSS
=================================================*/
.box-banner {
  padding: 60px 0;
}

.box-banner .box-banner-area-text {
  padding: 60px 20px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
}

.box-banner .box-banner-area-text:hover {
  /*transform: scale(1.2);
  transition: all 0.5s ease;*/
}

.box-banner .box-banner-area-text h3 {
  color: #ffffff;
  font-weight: 700;
  font-size: 45px;
}

.box-banner .box-banner-area-text p {
  color: #ffffff;
}

.box-banner .box-banner-area-text a.shop-now {
  background: #fff;
  display: inline-block;
  padding: 6px 20px;
  font-size: 18px;
  border-radius: 5px;
  color: var(--primary-bg);
  text-decoration: none;
}

.box-banner .box-banner-area-text a.shop-now:hover {
  background: var(--primary-bg);
  color: #fff;
  transition: all 0.4s;
}

/*================================================
7. Flash Sale Area CSS
=================================================*/
.flash-sale {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/event_banner.png);
  padding: 20px 20px 80px 20px;
  margin: 60px 0;
}

.flash-sale .flash-sale-text {
  background: url("../images/event_banner_shape.png");
  width: 370px;
  height: 387px;
  text-align: center;
  padding: 20px 30px;
  margin-top: -20px;
}

.flash-sale .flash-sale-text h3 {
  color: #ffffff;
  font-size: 75px;
  font-weight: 700;
}

.flash-sale .flash-sale-text h6 {
  color: #ffffff;
  font-size: 25px;
  font-weight: 600;
}

.flash-sale .countdown-wrapper {
  text-align: center;
}

.flash-sale .countdown-wrapper .offer-countdown {
  margin: 60px 0px;
}

.flash-sale .countdown-wrapper .offer-countdown #timer div {
  border: 3px solid #fff;
  width: 125px;
  height: 125px;
  -webkit-border-radius: 90%;
  -moz-border-radius: 90%;
  border-radius: 90%;
  font-size: 45px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 20px 15px;
  line-height: 41px;
  margin: 20px;
}

.flash-sale .countdown-wrapper .offer-countdown #timer div:last-child {
  margin-right: 0;
}

.flash-sale .countdown-wrapper .offer-countdown #timer div span {
  display: block;
  font-size: 22px;
}

.flash-sale .countdown-wrapper a.shop-now {
  background: var(--primary-bg);
  display: inline-block;
  padding: 10px 30px;
  color: #fff;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
}

.flash-sale .countdown-wrapper a.shop-now:hover {
  background: #353535;
  transition: all 0.4s;
}

/*================================================
7. Subscribe Area CSS
=================================================*/
.subscribe-wrapper {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../images/subscribe_banner.png);
  padding: 80px 20px;
  margin: 60px 0;
}

.subscribe-wrapper .subscribe {
  padding: 2% 16%;
}

.subscribe-wrapper .subscribe h3 {
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
}

.subscribe-wrapper .subscribe p {
  color: #ffffff94;
  line-height: 32px;
}

.subscribe-wrapper .subscribe form.subscribe-form {
  margin-top: 40px;
  position: relative;
}

.subscribe-wrapper .subscribe form.subscribe-form input[type=email] {
  height: 57px;
  border-radius: 5px;
  border: none;
  padding-left: 20px;
  padding-right: 30px;
}

.subscribe-wrapper .subscribe form.subscribe-form button.subscribe-submit {
  background: var(--primary-bg);
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 15px 30px;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 0 5px 5px 0px;
}

.subscribe-wrapper .subscribe form.subscribe-form button.subscribe-submit:hover {
  background: #353535;
  transition: all 0.4s;
}

/*================================================
7. Blog Area CSS
=================================================*/
.bl-blog-wrapper {
  padding: 60px 0;
}

.bl-blog-wrapper .bl-blog-item {
  border: 1px solid #ededed;
  padding: 10px 10px 10px 10px;
  border-radius: 10px;
  position: relative;
  margin-bottom: 30px;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-image {
  margin: -10px -10px 0px -10px;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-image img {
  border-radius: 10px 10px 0px 0px;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info .bl-blog-item-date a {
  text-decoration: none;
  background: var(--primary-bg);
  color: #fff;
  padding: 5px 25px;
  display: inline-block;
  margin-bottom: 0;
  border-radius: 5px;
  margin-top: 0;
  position: relative;
  top: -20px;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info .bl-blog-item-category h6 {
  color: #848484;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info .bl-blog-item-category h6 a {
  text-decoration: none;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info .bl-blog-item-category h6 a:hover {
  color: var(--primary-bg);
  transition: all 0.4s;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info .bl-blog-item-name h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info .bl-blog-item-name h3 a {
  text-decoration: none;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info .bl-blog-item-name h3 a:hover {
  color: var(--primary-bg);
  transition: all 0.4s;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info a.read-more {
  color: var(--primary-bg);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 15px;
  margin-top: 15px;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info a.read-more i {
  vertical-align: middle;
}

.bl-blog-wrapper .bl-blog-item .bl-blog-item-info a.read-more:hover {
  color: #353535;
  transition: all 0.4s;
}

.bl-blog-wrapper .blog-post-standard {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-bottom: 20px;
}

.bl-blog-wrapper .blog-post-standard .blog-post-image {
  margin-bottom: 20px;
}

.bl-blog-wrapper .blog-post-standard h3.blog-post-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}

.bl-blog-wrapper .blog-post-standard h3.blog-post-title a {
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-standard h3.blog-post-title a:hover {
  color: var(--primary-bg);
  transition: all 0.4s;
}

.bl-blog-wrapper .blog-post-standard a.read-more {
  background: var(--primary-bg);
  color: #fff;
  padding: 8px 20px;
  border-radius: 5px;
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-standard a.read-more:hover {
  background: #353535;
  transition: all 0.4s;
}

.bl-blog-wrapper .blog-post-standard .entry-meta {
  margin: 5px 0px 10px;
}

.bl-blog-wrapper .blog-post-standard .entry-meta .article-category span {
  font-weight: bold;
}

.bl-blog-wrapper .blog-post-standard .entry-meta .article-category span a {
  font-weight: 400;
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-standard .entry-meta .posted-by {
  margin-right: 20px;
}

.bl-blog-wrapper .blog-post-standard .entry-meta .posted-by i {
  position: relative;
  top: 1px;
}

.bl-blog-wrapper .blog-post-standard .entry-meta .posted-by a {
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-standard .entry-meta .posted-on i {
  position: relative;
  top: 1px;
}

.bl-blog-wrapper .blog-post-standard .entry-meta .posted-on a {
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-details {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.bl-blog-wrapper .blog-post-details .blog-post-image {
  margin-bottom: 20px;
}

.bl-blog-wrapper .blog-post-details h3.blog-post-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}

.bl-blog-wrapper .blog-post-details .entry-meta {
  margin: 5px 0px 10px;
}

.bl-blog-wrapper .blog-post-details .entry-meta .article-category span {
  font-weight: bold;
}

.bl-blog-wrapper .blog-post-details .entry-meta .article-category span a {
  font-weight: 400;
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-details .entry-meta .posted-by {
  margin-right: 20px;
}

.bl-blog-wrapper .blog-post-details .entry-meta .posted-by i {
  position: relative;
  top: 1px;
}

.bl-blog-wrapper .blog-post-details .entry-meta .posted-by a {
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-details .entry-meta .posted-on i {
  position: relative;
  top: 1px;
}

.bl-blog-wrapper .blog-post-details .entry-meta .posted-on a {
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-details .comments-area {
  padding: 60px 0;
}

.bl-blog-wrapper .blog-post-details .comments-area .comments-title {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 25px;
  line-height: 55px;
  margin-bottom: 30px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper {
  padding-bottom: 60px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list {
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .author-image {
  width: 75px;
  margin-right: 30px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .author-image img {
  border-radius: 5px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text {
  width: 85%;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text p {
  color: #666666;
  line-height: 30px;
  margin-bottom: 7px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text h3.author-name {
  padding: 0;
  margin: 0;
  font-size: 20px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text .comment-date {
  display: flex;
  flex-direction: row;
  line-height: 30px;
  margin-bottom: 20px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text .comment-date .comment-calendar {
  margin-right: 60px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text .comment-date .comment-calendar i {
  color: var(--primary-bg);
  font-size: 20px;
  margin-right: 8px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text .comment-date .comment-time {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text .comment-date .comment-time i {
  color: var(--primary-bg);
  font-size: 20px;
  margin-right: 8px;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text a.comment-reply-link {
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 18px;
  color: #ffffff;
  border-radius: 5px;
  font-size: 14px;
  text-align: center;
  background: var(--primary-bg);
  font-size: 16px;
  line-height: 25px;
  font-family: "Lato", sans-serif;
  transition: 0.5s ease;
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text a.comment-reply-link:hover {
  background: rgba(0, 0, 0, 0.75);
}

.bl-blog-wrapper .blog-post-details .comments-area .comment-list-wrapper .comment-list .comment-text a.comment-reply-link i {
  margin-right: 10px;
}

.bl-blog-wrapper .blog-post-details .tag-area {
  margin-bottom: 15px;
}

.bl-blog-wrapper .blog-post-details .tag-area a {
  display: inline-block;
  border: 1px solid;
  padding: 3px 10px;
  margin: 10px;
  font-size: 14px;
  text-decoration: none;
}

.bl-blog-wrapper .blog-post-details .tag-area a:hover {
  background: #353535;
  transition: all 0.4s;
  color: #fff;
}

.bl-blog-wrapper .blog-post-details .social-share strong {
  float: left;
  margin: 15px 0px;
}

.bl-blog-wrapper .blog-post-details .social-share ul {
  margin: 0px;
  padding: 0;
}

.bl-blog-wrapper .blog-post-details .social-share ul li {
  display: inline-block;
}

.bl-blog-wrapper .blog-post-details .social-share ul li a {
  display: inline-block;
  margin: 10px;
  background: #ddd;
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none;
  color: #ffffff;
}

.bl-blog-wrapper .blog-post-details .social-share ul li a:hover {
  transition: all 0.4s;
  opacity: 0.7;
}

.bl-blog-wrapper .blog-post-details .social-share ul li a.facebook {
  background: #3B5999;
}

.bl-blog-wrapper .blog-post-details .social-share ul li a.twitter {
  background: #55ACEE;
}

.bl-blog-wrapper .blog-post-details .social-share ul li a.pinterest {
  background: #BD081C;
}

.bl-blog-wrapper .blog-post-details .social-share ul li a.instagram {
  background: #E4405F;
}

.bl-blog-wrapper .blog-post-details .social-share ul li a.linkdin {
  background: #0077B5;
}

.bl-blog-wrapper .owl-carousel.blog-carousel .owl-nav button {
  position: absolute;
  margin: 0;
}

.bl-blog-wrapper .owl-carousel.blog-carousel .owl-nav button.owl-next {
  right: 0% !important;
  top: -84px;
  height: 35px !important;
  width: 35px !important;
  border-radius: 50% !important;
  background: transparent;
  border: 2px solid var(--primary-bg);
}

.bl-blog-wrapper .owl-carousel.blog-carousel .owl-nav button.owl-next i {
  color: var(--primary-bg);
  font-size: 30px !important;
}

.bl-blog-wrapper .owl-carousel.blog-carousel .owl-nav button.owl-prev {
  right: 55px !important;
  top: -84px;
  border-radius: 50% !important;
  height: 35px !important;
  width: 35px !important;
  background: transparent;
  border: 2px solid var(--primary-bg);
}

.bl-blog-wrapper .owl-carousel.blog-carousel .owl-nav button.owl-prev i {
  color: var(--primary-bg);
  font-size: 30px;
}

/*================================================
20. Sidebar CSS
=================================================*/
.sidebar-widget-area {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
  padding: 20px 10px;
  margin-bottom: 20px;
}

.sidebar-widget-area h3.widget-title {
  font-size: 22px;
  padding-bottom: 10px;
  margin-bottom: 15px;
  position: relative;
  font-weight: 600;
  display: inline-block;
}

.sidebar-widget-area h3.widget-title:after {
  content: "";
  position: absolute;
  width: 60px;
  height: 2px;
  background: var(--primary-bg);
  top: 13px;
  right: -70px;
}

.sidebar-widget-area form.post-search {
  position: relative;
}

.sidebar-widget-area form.post-search input[type=submit] {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 10px;
}

.sidebar-widget-area .small-post-wrapper .small-post-item {
  margin-bottom: 15px;
}

.sidebar-widget-area .small-post-wrapper .small-post-item .small-post-item-image {
  margin-right: 10px;
  width: 30%;
}

.sidebar-widget-area .small-post-wrapper .small-post-item .small-post-item-image img {
  border-radius: 5px;
}

.sidebar-widget-area .small-post-wrapper .small-post-item .small-post-item-content {
  width: 70%;
}

.sidebar-widget-area .small-post-wrapper .small-post-item span.post-date {
  font-size: 14px;
  color: #353535;
}

.sidebar-widget-area .small-post-wrapper .small-post-item h3.small-post-item-title {
  font-size: 16px;
  margin: 0;
}

.sidebar-widget-area .small-post-wrapper .small-post-item h3.small-post-item-title a {
  color: #353535;
  text-decoration: none;
}

.sidebar-widget-area .small-post-wrapper .small-post-item h3.small-post-item-title a:hover {
  color: #353535;
}

.sidebar-widget-area ul.categories {
  margin: 0px;
  padding: 0px;
}

.sidebar-widget-area ul.categories li {
  margin: 12px 0px;
}

.sidebar-widget-area ul.categories li a {
  color: #353535;
  font-weight: 500;
  text-decoration: none;
}

.sidebar-widget-area ul.categories li a i {
  top: 1.7px;
  position: relative;
}

.sidebar-widget-area ul.categories li a:hover {
  transition: all 0.4s ease;
  color: #353535;
}

/*================================================
25. Client Area CSS
=================================================*/
.brand-wrapper {
  padding: 60px 0;
}

.brand-wrapper .owl-carousel .owl-item img {
  width: auto;
  margin: 0px auto;
}

.brand-wrapper .brand-carousel {
  text-align: center;
}

.brand-wrapper .owl-nav.disabled {
  display: none !important;
}

/*================================================
25. Shop Page CSS
=================================================*/
.shop-wrapper {
  padding: 10px 0;
  min-height: calc(-483px + 100vh);
}

.shop-wrapper .bl-products-wrapper {
  padding: 0;
}

.shop-wrapper .shop-sidebar-area .widget-area {
  border: 1px solid #ededed;
  padding: 15px;
  margin-bottom: 30px;
  border-radius: 5px;
}

.shop-wrapper .shop-sidebar-area .widget-area h4.widget-title {
  background: var(--primary-bg);
  color: #fff;
  font-size: 20px;
  padding: 10px 20px;
  display: block;
  margin: -15px -15px 15px -15px;
  border-radius: 5px 5px 0px 0px;
}

.shop-wrapper .shop-sidebar-area .widget-area h5.widget-title {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0px;
}

.shop-wrapper .shop-sidebar-area .widget-area ul.category-list {
  margin: 0;
  padding: 0;
}

.shop-wrapper .shop-sidebar-area .widget-area ul.category-list li a {
  display: inline-block;
  margin-bottom: 10px;
  text-decoration: none;
  padding-left: 0;
}

.shop-wrapper .shop-sidebar-area .widget-area ul.category-list li a:hover,
.shop-wrapper .shop-sidebar-area .widget-area ul.category-list li a.active {
  color: var(--primary-bg);
  transition: all 0.2s;
  font-size: 17px;
}

.shop-wrapper .shop-sidebar-area .widget-area ul.category-list li a i {
  position: relative;
  top: 2px;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider {
  position: relative;
  padding-bottom: 30px;
  margin-top: 30px;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider .rangeValues {
  display: block;
  font-weight: 600;
  margin: 10px 0;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range] {
  -webkit-appearance: none;
  border: 1px solid white;
  left: 0;
  right: 0;
  width: 100%;
  position: absolute;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--primary-bg);
  margin-top: -4px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]:focus {
  outline: none;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]::-moz-range-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #21c1ff;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]::-ms-track {
  width: 300px;
  height: 5px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;
  /*remove default tick marks*/
  color: transparent;
  z-index: -4;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #21c1ff;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]:focus::-ms-fill-lower {
  background: #888;
}

.shop-wrapper .shop-sidebar-area .widget-area .range-slider input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

.shop-wrapper .shop-sidebar-area .widget-area select {
  width: 100%;
  margin: 10px 0;
  padding: 10px 11px;
  border: none;
  background: #FFF6F5;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select {
  margin: 10px 0;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio] {
  display: none;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label span {
  transform: scale(1.25);
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .red {
  border: 2px solid #711313;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .orange {
  border: 2px solid #873a08;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .yellow {
  border: 2px solid #816102;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .olive {
  border: 2px solid #505a0b;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .green {
  border: 2px solid #0e4e1d;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .teal {
  border: 2px solid #003633;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .blue {
  border: 2px solid #103f62;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .violet {
  border: 2px solid #321a64;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .purple {
  border: 2px solid #501962;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select input[type=radio]:checked+label .pink {
  border: 2px solid #851554;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  cursor: pointer;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label:hover span {
  transform: scale(1.25);
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
  border-radius: 90%;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.red {
  background: #DB2828;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.orange {
  background: #F2711C;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.yellow {
  background: #FBBD08;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.olive {
  background: #B5CC18;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.green {
  background: #21BA45;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.teal {
  background: #00B5AD;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.blue {
  background: #2185D0;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.violet {
  background: #6435C9;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.purple {
  background: #A333C8;
}

.shop-wrapper .shop-sidebar-area .widget-area .color-select label span.pink {
  background: #E03997;
}

.shop-wrapper .shop-sidebar-area .widget-area a.reset-filter {
  color: red;
  text-align: center;
  display: block;
  margin-top: 20px;
  text-decoration: none;
}

.shop-wrapper .shop-sidebar-area .widget-area a.reset-filter:hover {
  color: #353535;
  transition: all 0.4s;
}

/*================================================
25. Cart Page CSS
=================================================*/
.bl-cart-wrapper {
  padding: 60px 0;
}

.bl-cart-wrapper table.cart-info {
  margin-top: 20px;
  margin-bottom: 30px;
  width: 100%;
  display: inline-table;
  position: relative;
}

.bl-cart-wrapper table.cart-info thead {
  border: none;
}

.bl-cart-wrapper table.cart-info thead tr th {
  border: none;
  background: var(--primary-bg);
  color: #ffffff;
  font-weight: 500;
  padding: 14px 20px;
  font-size: 18px;
}

.bl-cart-wrapper table.cart-info tbody {
  border: none;
}

.bl-cart-wrapper table.cart-info tbody tr {
  border: 1px solid #ededed;
}

.bl-cart-wrapper table.cart-info tbody tr td {
  border: none;
  padding: 10px 10px;
}

.bl-cart-wrapper table.cart-info .product-info .product-image img {
  /* border: 1px solid var(--primary-bg); */
  padding: 15px;
  margin: 0 20px;
  border-radius: 5px;
  width: 150px;
}

.bl-cart-wrapper table.cart-info .product-info .product-name h5 a {
  font-size: 18px;
  font-weight: 500;
}

.bl-cart-wrapper table.cart-info .product-info .product-name h5 a:hover {
  text-decoration: none;
  color: var(--primary-bg);
  transition: 0.3s all;
}

.bl-cart-wrapper table.cart-info .product-info .product-name p {
  margin: 10px 0;
}

.bl-cart-wrapper table.cart-info .quantity {
  display: flex;
}

.bl-cart-wrapper table.cart-info .quantity input {
  border: 1px solid #f9e4e1;
  background: #fff6f5;
  height: 38px;
  padding: 0px 12px;
  text-align: center;
  font-weight: bold;
  border-radius: 0;
}

.bl-cart-wrapper table.cart-info .quantity input:focus {
  outline: none;
}

.bl-cart-wrapper table.cart-info .quantity input[type=text] {
  width: 60px;
}

.bl-cart-wrapper table.cart-info button.delete-item {
  padding: 6px 10px;
  margin: 0;
  float: right;
}

.bl-cart-wrapper .discount-box {
  box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.08);
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.bl-cart-wrapper .discount-box h5 {
  background: var(--primary-bg);
  color: #fff;
  font-size: 18px;
  margin: -20px -20px 20px -20px;
  padding: 15px 20px;
  border-radius: 5px 5px 0px 0px;
}

.bl-cart-wrapper .discount-box .discount-form form {
  position: relative;
}

.bl-cart-wrapper .discount-box .discount-form form input[type=text] {
  height: 44px;
  border-radius: 20px;
}

.bl-cart-wrapper .discount-box .discount-form form input[type=submit] {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 0px 20px 20px 0px;
}

.bl-cart-wrapper .total-calculation {
  box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.08);
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.bl-cart-wrapper .total-calculation h5 {
  background: var(--primary-bg);
  color: #fff;
  font-size: 18px;
  margin: -20px -20px 20px -20px;
  padding: 15px 20px;
  border-radius: 5px 5px 0px 0px;
}

.bl-cart-wrapper .total-calculation .calculate {
  margin-bottom: 30px;
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 10px;
}

.bl-cart-wrapper .total-calculation .calculate table {
  border: none;
}

.bl-cart-wrapper .total-calculation .calculate table tbody {
  border: none;
}

.bl-cart-wrapper .total-calculation .calculate table tbody tr {
  border: none;
}

.bl-cart-wrapper .total-calculation .calculate table tbody tr td {
  padding: 10px 0;
  border: none;
}

.bl-cart-wrapper .total-calculation .calculate table tbody tr td p {
  padding: 0;
  margin: 0;
}

.bl-cart-wrapper .total-calculation a.place-order {
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--primary-bg);
}

.bl-cart-wrapper .total-calculation a.place-order:hover {
  background: #353535;
  transition: 0.4s all;
}

/*================================================
25. Checkout Page CSS
=================================================*/
.bl-checkout-wrapper {
  padding: 60px 0;
}

.bl-checkout-wrapper .box-shadow-form {
  box-shadow: 0px 10px 18px rgba(0, 0, 0, 0.08);
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.bl-checkout-wrapper .box-shadow-form h5 {
  background: var(--primary-bg);
  color: #fff;
  font-size: 18px;
  margin: -20px -20px 20px -20px;
  padding: 15px 20px;
  border-radius: 5px 5px 0px 0px;
}

.bl-checkout-wrapper .payment-system {
  margin: 20px 0;
}

.bl-checkout-wrapper .payment-system ul {
  margin: 0;
  padding: 0;
}

.bl-checkout-wrapper .payment-system ul li {
  margin: 20px 0;
}

.bl-checkout-wrapper .payment-system ul li .form-check {
  margin-bottom: 15px;
}

/*================================================
7. Contact Page CSS
=================================================*/
.bl-contact-wrapper {
  padding: 80px 0 20px 0;
}

.bl-contact-wrapper .contact-form h5 {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.75);
}

.bl-contact-wrapper .contact-form h3 {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 25px;
  line-height: 34px;
  color: rgba(0, 0, 0, 0.75);
}

.bl-contact-wrapper .contact-form form {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin-top: 75px;
  margin-bottom: 50px;
}

.bl-contact-wrapper .contact-address h3 {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 25px;
  line-height: 135%;
  color: rgba(0, 0, 0, 0.75);
}

.bl-contact-wrapper .contact-address h5 {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  line-height: 34px;
  margin-bottom: -8px;
  color: rgba(0, 0, 0, 0.75);
}

.bl-contact-wrapper .contact-address .contact-address-box {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
  padding: 20px 15px;
  margin-top: 27px;
}

.bl-contact-wrapper .contact-address .contact-address-box:hover i {
  background: #353535;
  transition: all 0.4s;
}

.bl-contact-wrapper .contact-address .contact-address-box .contact-address-box.first-child {
  margin-top: -20px;
}

.bl-contact-wrapper .contact-address .contact-address-box i {
  background: var(--primary-bg);
  color: #fff;
  padding: 10px;
  font-size: 28px;
  border-radius: 90%;
  text-align: center;
  margin-right: 15px;
  width: 55px;
  height: 55px;
  line-height: 36px;
}

.bl-contact-wrapper .contact-address .contact-address-box p {
  margin: 0;
}

/*================================================
7. Faqs Page CSS
=================================================*/
.bl-faq-wrapper {
  padding: 60px 0;
}

.bl-faq-wrapper h3 {
  margin: 1px 0 60px 0;
  text-align: center;
  font-size: 36px;
  font-weight: 600;
}

.bl-faq-wrapper .nav-tabs .nav-link {
  text-transform: uppercase;
  font-weight: 500;
}

.bl-faq-wrapper .tab-content {
  padding: 20px;
  border: 1px solid #ddd;
  margin-top: -1px;
}

.bl-faq-wrapper .tab-content .accordion-item {
  margin-bottom: 20px;
}

.bl-faq-wrapper .tab-content .accordion-item a {
  font-size: 16px;
  text-transform: uppercase;
  margin: 6px 0;
  display: block;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: #353535;
}

.bl-faq-wrapper .tab-content .accordion-item a:hover {
  color: #F14705;
}

.bl-faq-wrapper .tab-content .accordion-item a i {
  font-size: 24px;
  position: relative;
  top: 3px;
  transform: rotate(180deg);
}

.bl-faq-wrapper .tab-content .accordion-item a.collapsed i {
  transform: rotate(0deg);
}

.bl-faq-wrapper .tab-content .accordion-item p {
  padding: 0px 28px;
}

/*================================================
7. Signup and Signin Page CSS
=================================================*/
.bl-account-wrapper {
  padding: 60px 0;
}

.bl-account-wrapper .signup-wrapper {
  padding: 20px;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.08);
}

.bl-account-wrapper .signup-wrapper h4 {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.bl-account-wrapper .signup-wrapper form button.btn.btn-primary {
  display: block;
  width: 100%;
  font-size: 20px;
  text-transform: uppercase;
  padding: 10px;
  letter-spacing: 1px;
  font-weight: normal;
  margin-top: 20px;
}

.bl-account-wrapper .signup-wrapper .login-or-with {
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  margin-top: 35px;
  margin-bottom: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bl-account-wrapper .signup-wrapper .login-or-with:after {
  content: "";
  flex: 1 0 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #E2E2E2;
  margin-right: -20px;
  margin-left: 10px;
}

.bl-account-wrapper .signup-wrapper .login-or-with:before {
  content: "";
  flex: 1 0 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #E2E2E2;
  margin-left: -20px;
  margin-right: 10px;
}

.bl-account-wrapper .signup-wrapper .social-button {
  margin-top: 20px;
}

.bl-account-wrapper .signup-wrapper .social-button a {
  color: #fff;
  padding: 10px 15px;
  display: inline-block;
  border-radius: 5px;
  font-size: 16px;
  margin: 10px;
  text-transform: uppercase;
  text-decoration: none;
}

.bl-account-wrapper .signup-wrapper .social-button a.facebook-btn {
  background: #4267B2;
}

.bl-account-wrapper .signup-wrapper .social-button a.facebook-btn:hover {
  background: #4267b2eb;
}

.bl-account-wrapper .signup-wrapper .social-button a.google-btn {
  background: #D44730;
}

.bl-account-wrapper .signup-wrapper .social-button a.google-btn:hover {
  background: #d44730e6;
  transition: all 0.4s ease;
}

/*================================================
7. 404 Page CSS
=================================================*/
.bl-404-wrapper {
  padding: 60px 0;
}

.bl-404-wrapper h1 {
  font-size: 125px;
  font-weight: bold;
}

.bl-404-wrapper h3 {
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 26px;
  font-size: 34px;
}

.bl-404-wrapper p {
  margin-bottom: 40px;
}

/*================================================
25. Footer CSS
=================================================*/
div.footer .footer-wrapper {
  background: #2F3779;
  color: #fff;
  padding: 50px 0px 50px 0px;
}

div.footer .footer-wrapper p {
  color: #afafaf;
}

div.footer .footer-wrapper img {
  margin-bottom: 15px;
}

div.footer .footer-wrapper input {
  border: none;
  margin: 0;
}

div.footer .footer-wrapper .footer-social-lcon .social-icon li a {
  font-size: 20px;
  padding: 5px 7px;
  border-radius: 90%;
  background: #FFFFFF;
  display: block;
  width: 36px;
  height: 36px;
  text-align: center;
}

div.footer .footer-wrapper .footer-social-lcon .social-icon li a:hover {
  color: var(--primary-bg);
}

div.footer ul.social-icon {
  margin: 20px 0px 8px 0;
  padding: 0px;
  list-style: none;
}

div.footer ul.social-icon li {
  display: inline-block;
  margin: 3px;
}

div.footer ul.social-icon li a {
  color: #afafaf;
  font-size: 26px;
}

div.footer ul.social-icon li a:hover {
  transition: all 0.4s ease;
  color: #ffffff;
}

div.footer h4.footer-title {
  color: #ffffff;
  font-size: 20px;
  /* text-transform: uppercase;*/
  font-weight: 600;
  margin-bottom: 15px;
  font-family: "Lato", sans-serif;
  font-style: normal;
  line-height: 24px;
}

div.footer p {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 16px;
}

div.footer ul.footer-menu {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

div.footer ul.footer-menu li {
  display: block;
  margin: 15px 0;
}

div.footer ul.footer-menu li a {
  color: #afafaf;
  text-decoration: none;
  transition: all 0.8s ease;
}

div.footer ul.footer-menu li a:hover {
  margin-left: 8px;
  color: var(--primary-bg);
}

div.footer ul.footer-menu li a i {
  top: 2px;
  position: relative;
}

div.footer .footer-copyright {
  padding: 25px 0 0 0;
}

div.footer .footer-copyright p.copyright-text {
  margin: 0;
  text-align: center;
  background: var(--primary-bg);
  padding: 10px;
  color: #fff;
  font-size: 15px;
}

div.footer .footer-copyright p.copyright-text a {
  text-decoration: none;
  transition: all 0.3s ease;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

div.footer .footer-copyright p.copyright-text a:hover {
  color: #353535;
}

div.footer .contact-info p {
  margin-bottom: 8px;
}

div.footer .contact-info p a {
  color: #afafaf;
}

.top-bottom-scroll {
  display: none;
}

.top-bottom-scroll.fixed {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: block;
}

.top-bottom-scroll.fixed i {
  background: #353535;
  font-size: 26px;
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 90%;
  color: #fff;
  border: 2px solid #ffffff;
  cursor: pointer;
  text-align: center;
}

/*================================================
25. about page CSS
=================================================*/
.bl-about-wrapper {
  padding: 80px 0;
}

.bl-about-wrapper .about-image {
  margin-top: 11px;
  background: rgba(255, 82, 53, 0.8);
  box-shadow: 0px 10px 15px rgba(255, 82, 53, 0.25);
}

.bl-about-wrapper .about-image img {
  border-radius: 5px;
  border: 3px solid var(--primary-bg);
}

.bl-about-wrapper .about-content h2 {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  line-height: 55px;
  margin-bottom: 8px;
}

.bl-about-wrapper .about-content h5 {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 35px;
  margin-bottom: 8px;
}

.bl-about-wrapper .about-content p {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 9px;
  color: rgba(0, 0, 0, 0.5);
}

.bl-about-wrapper .about-features-row {
  padding: 55px 0;
  margin: 80px 0;
  background: rgba(255, 82, 53, 0.15);
}

.bl-about-wrapper .about-features {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.bl-about-wrapper .about-features .features-img {
  width: 100px;
}

.bl-about-wrapper .about-features h5 {
  margin-top: 21px;
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 23px;
  line-height: 30px;
  margin-bottom: 5px;
  color: #353535;
}

.bl-about-wrapper .about-features p {
  color: rgba(0, 0, 0, 0.5);
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 25px;
  text-align: center;
}

.bl-about-wrapper .about-intro .about-intro-content {
  margin-top: 67px;
}

.bl-about-wrapper .about-intro .about-intro-content h2 {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  line-height: 55px;
  color: #353535;
  margin-bottom: 5px;
}

.bl-about-wrapper .about-intro .about-intro-content h5 {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 35px;
  color: rgba(0, 0, 0, 0.75);
  margin-bottom: 10px;
}

.bl-about-wrapper .about-intro .about-intro-content p {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 18px;
}

.bl-about-wrapper .about-intro .about-intro-content .intro-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.bl-about-wrapper .about-intro .about-intro-content .intro-list .single-intro {
  display: flex;
  width: 50%;
  flex-direction: row;
  margin-bottom: 38px;
}

.bl-about-wrapper .about-intro .about-intro-content .intro-list .single-intro i {
  font-size: 38px;
  color: var(--primary-bg);
  line-height: 32px;
}

.bl-about-wrapper .about-intro .about-intro-content .intro-list .single-intro p {
  font-family: "Lato", sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 30px;
  color: #333333;
  margin-left: 10px;
}

.card-slider {
  height: 146px;
}

.slider-image .girl {
  height: 340px;
}

.slider-image img {
  height: 250px;
}

@media (max-width:768px) {

  .bl-product-item {
    width: 45% !important;
  }

}


@media (max-width:980px) {

  .bl-product-item {
    width: 46%;
  }

  div.home-slider .slider-caption-text h2 {
    font-size: 25px !important;
    line-height: 33px;
  }

  div.home-slider .slider-caption-text p {
    font-size: 14px !important;
    line-height: 24px;
  }

  .home-slider .owl-nav {
    display: none !important;
  }

  .slider-image .girl {
    height: 300px;
    width: 260px !important;
    max-width: 260px !important;
  }

  div.home-slider .slider-caption-text {
    padding: 5px 0 !important;
  }
  
  div.marketing-slider .slider-caption-text h2 {
    font-size: 25px !important;
    line-height: 33px;
  }
  
  div.marketing-slider .slider-caption-text p {
    font-size: 14px !important;
    line-height: 24px;
  }
  
  .marketing-slider .owl-nav {
    display: none !important;
  }
  
  div.marketing-slider .slider-caption-text {
    padding: 5px 0 !important;
  }


  .category-title {
    top: -20px !important;
    left: 8px !important;
  }

}

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: fit-content;
  margin: 0px auto;
  padding: 5px 0px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 0px 0;
}

.modal-default-button {
  float: right;
}

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.modal-body {
  padding: 0px !important;
}

.vueperslides__arrow svg {
    width: 2.5em !important;
}

.vueperslides__arrow {
  border-radius: 40px;
  padding: 0px 5px;
}

.vueperslides__arrow:hover {
  background: var(--primary-bg);
}

/* ========= CUSTOM ============= */

.title-line {
    padding: 5px 30px;
    background-color: var(--yellow);
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}
.title-line h3 {
    color: var(--primary-bg) !important;
    margin-bottom: 0px !important;
    font-weight: bold;
}

.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 80%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}

.skeleton-text {
  width: 135px;
  height: 50px;
  border-radius: 50px;
}

.skeleton-card {
  width: 255px;
  height: 288px;
  float: left;
  margin-right: 11px;
  margin-left: 11px;
  margin-bottom: 15px;
  padding: 0px 0px 0px 0px !important;
  overflow: hidden;
}

a {
  cursor: pointer;
}