/*
@File: Drodo Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************

** - Default CSS
** - Top Header Area CSS
** - Navbar Area CSS
** - Search Overlay CSS
** - Main Banner Area CSS
** - About Area CSS
** - Categories Area CSS
** - Products Area CSS
** - Products Details Area CSS
** - Cart Area CSS
** - Checkout Area CSS
** - Woocommerce Widget Area CSS
** - Products Promotions Area CSS
** - Feedback Area CSS
** - Why Choose Us Area CSS
** - Hot Deal Area CSS
** - Brands Area CSS
** - Blog Area CSS
** - Blog Details Area CSS
** - Facility Area CSS
** - Gallery Area CSS
** - History Area CSS
** - Doctors Area CSS
** - Funfacts Area CSS
** - Page Title Area CSS
** - Pagination CSS
** - Widget Sidebar CSS
** - Profile Authentication Area CSS
** - 404 Error Area CSS
** - Coming Soon Area CSS
** - Purchase Guide Area CSS
** - Privacy Policy Area CSS
** - Terms Of Service Area CSS
** - Customer Service Area CSS
** - FAQ Area CSS
** - Tracking Order Area CSS
** - Contact Area CSS
** - Footer Area CSS
** - Go Top CSS
** - Modal CSS
*/
/*================================================
Default CSS
=================================================*/

:root {
  --fontFamily: 'Inter';
  --fontFamilyBold: 'Inter Bold';
  --mainColor: #333;
  --optionalColor: #333;
  --whiteColor: #ffffff;
  --blackColor: #111111;
  --fontSize: 15px;
  --transition: .5s;
}

body {
  position: relative;
  padding: 0;
  margin: 0;
  font-size: var(--fontSize);
  font-family: var(--fontFamily);
}

strong {
  font-weight: 800;
}


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, strong, b {
  font-family: var(--fontFamilyBold);
  font-weight: 700;
}

a {
  color: var(--blackColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-decoration: none;
  outline: 0 !important;
}



.a_link,
.default_content_page p a {
  color: #049ce3;
  text-decoration: underline;
}

.a_link::hover,
.default_content_page p a::hover {
  cursor: pointer;
  text-decoration: none;
}

.a_link i {
  margin-right: 5px;
}

:focus {
  outline: 0 !important;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  vertical-align: middle;
}

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

p {
  color: #333;
  font-size: var(--fontSize);
  margin-bottom: 15px;
  line-height: 1.8;
}

p:last-child {
  margin-bottom: 0;
}

.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.ptb-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.ptb-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.ptb-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-20 {
  padding-top: 20px;
}

.pb-70 {
  padding-bottom: 70px;
}

.ptb-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

.pt-40 {
  padding-top: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}


.container {
  max-width: 1230px;
}

.bg-f7f8fa {
  background-color: #f7f8fa;
}

/*default-btn*/
.default-btn,
.woocommerce-form-login__submit,
.woocommerce-Button,
.add_to_cart_button,
.single_add_to_cart_button,
.mailpoet_form input[type="submit"],
.shop_table .actions button,
.cart-totals .wc-proceed-to-checkout a,
button[name="save_account_details"],
button[name="save_address"],
.woocommerce-form-coupon button,
#place_order,
.wc-backward,
#registerPaymentButton,
.mailpoet_form button { 
  display: inline-block;
  position: relative;
  z-index: 1;
  border: none;
  background-color: var(--mainColor);
  color: var(--whiteColor)!important;
  border-radius: 5px;
  -webkit-box-shadow: unset;
          box-shadow: unset;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  text-align: center;
  padding: 10px 12px;
  font-size: 14px;
  
  text-decoration: none!important;
}

.default-btn:hover,
.woocommerce-form-login__submit:hover,
#js_vorschau_abschliessen:hover,
.woocommerce-Button:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.mailpoet_form input[type="submit"]:hover,
.shop_table .actions button:hover,
.cart-totals .wc-proceed-to-checkout a:hover,
button[name="save_account_details"]:hover,
button[name="save_address"]:hover,
#place_order:hover,
.wc-backward:hover,
.mailpoet_form button:hover { 
	background-color: var(--whiteColor);
  color: var(--blackColor)!important;
  -webkit-box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;
	cursor: pointer;
}


button[name="save_account_details"],
button[name="save_address"] { 
	margin-top: 20px;
}

.default-btn i {
  margin-right: 5px;
}

.btn-red {
  background-color: #ec2c46;
  color: #fff !important;
  text-decoration: none !important;
}

.btn-red:hover { 
  background-color: #fff;
  color: #ec2c46 !important;
}

.btn-red i {
  color: #fff !important;
}

.default-btn:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.mailpoet_form input[type="submit"]:hover,
.shop_table .actions button:hover,
.cart-totals .wc-proceed-to-checkout a:hover,
#place_order:hover,
.mailpoet_form button:hover  {
  background-color: var(--whiteColor);
  color: var(--blackColor);
  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.btn-red:hover {
  color: var(--mainColor) !important;
}

.default-btn:hover i {
  color: var(--mainColor);
}

/*section-title*/

.section-title h2,
.section-title h3,
.section-title h4,
.section-title h5 {
  margin-bottom: 0;
  font-size: 30px;
}



/*form-control*/
.variations .value select,
.quantity select,
.form-control {
  height: 50px;
  color: var(--blackColor);
  -webkit-box-shadow: unset !important;
          box-shadow: unset !important;
  border: 1px solid #f5f5f5;
  background-color: #f5f5f5;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 3px;
  padding: 1px 0 0 15px;
  font-size: 15px;
  font-weight: 500;
}

.form-control::-webkit-input-placeholder {
  color: #7e7e7e;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.form-control:-ms-input-placeholder {
  color: #7e7e7e;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.form-control::-ms-input-placeholder {
  color: #7e7e7e;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.form-control::placeholder {
  color: #7e7e7e;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.form-control:focus {
  border-color: var(--mainColor);
  background-color: transparent;
}

.form-control:focus::-webkit-input-placeholder {
  color: transparent;
}

.form-control:focus:-ms-input-placeholder {
  color: transparent;
}

.form-control:focus::-ms-input-placeholder {
  color: transparent;
}

.form-control:focus::placeholder {
  color: transparent;
}

textarea.form-control {
  height: auto;
  padding-top: 15px;
}


/*================================================
Navbar Area CSS
=================================================*/

.nav-wrapper {
  background-color: #eeeeee;
  padding: 15px 0;
  margin-top: 30px;
}

.drodo-responsive-nav {
  display: none;
}

.drodo-nav {
  background-color: var(--whiteColor);
  padding: 15px 0 0 0;
}

.drodo-nav .navbar {
  position: inherit;
  padding-left: 0;
  padding-right: 0;
}

.drodo-nav .navbar .navbar-brand {
  font-size: inherit;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

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



.drodo-nav .navbar .navbar-nav .nav-item {
  position: relative;
  margin-right: 30px;
}

.drodo-nav .navbar .navbar-nav .nav-item a {
  color: #333;
  font-size: 16.5px;
}

.drodo-nav .navbar .navbar-nav .nav-item a i {
  font-size: 26px;
}


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

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

.drodo-nav .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: var(--whiteColor);
  position: absolute;
  border: none;
  top: 42px;
  left: 0;
  width: 250px;
  z-index: 99;
  display: block;
  opacity: 0;
  visibility: hidden;
  border-radius: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  padding: 0;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
  padding: 13px 20px 11px;
  margin: 0;
  position: relative;
  display: block;
  color: #666666;
  border-bottom: 1px solid #e5e5e5;
  font-size: 15px;

}

.drodo-nav .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;
}



.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

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



.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

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


.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

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

.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--mainColor);
}

.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

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

.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--mainColor);
}

.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: -250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

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

.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--mainColor);
}

.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 250px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

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

.drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .drodo-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--mainColor);
}

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

.drodo-nav .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-transform: scaleY(1);
          transform: scaleY(1);
}

.drodo-nav .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);
}

.drodo-nav .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-transform: scaleY(1);
          transform: scaleY(1);
}

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

.drodo-nav .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-transform: scaleY(1);
          transform: scaleY(1);
}

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

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

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

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

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

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

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

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

.drodo-nav .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;
}

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

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .submenu-title {
  color: var(--blackColor);
  position: relative;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 8px;
  text-transform: uppercase;
  margin-bottom: 20px;
  margin-top: 25px;
  font-size: 15.5px;
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .submenu-title::before {
  width: 30px;
  height: 1px;
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  background-color: var(--mainColor);
}

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

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

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu li a {
  margin-top: 14px;
  color: #666666;
  padding: 0;
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu li a:hover, .drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu li a.active {
  color: var(--mainColor);
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu .aside-trending-products {
  overflow: hidden;
  position: relative;
  text-align: center;
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu .aside-trending-products img {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu .aside-trending-products .category {
  position: absolute;
  left: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  right: 0;
  bottom: 0;
  background-color: var(--whiteColor);
  padding: 15px;
  margin-left: 10px;
  margin-right: 10px;
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu .aside-trending-products .category h4 {
  text-transform: uppercase;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  font-size: var(--fontSize);
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu .aside-trending-products .link-btn {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu .aside-trending-products:not(:first-child) {
  margin-top: 15px;
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu .aside-trending-products:hover img {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.drodo-nav .navbar .navbar-nav .nav-item.megamenu .dropdown-menu .megamenu-submenu .aside-trending-products:hover .category {
  bottom: 10px;
}

.drodo-nav .navbar .others-option .option-item {
  display: inline-block;
  margin-left: 15px;
  position: relative;
  z-index: 3;
}

.drodo-nav .navbar .others-option .option-item:first-child {
  margin-left: 0;
}

.drodo-nav .navbar .others-option .option-item .search-btn-box {
  position: relative;
  top: 1px;
}

.drodo-nav .navbar .others-option .option-item .search-btn-box .search-btn {
  font-size: 25px;
  cursor: pointer;
  color: var(--blackColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.drodo-nav .navbar .others-option .option-item .search-btn-box .search-btn:hover {
  color: var(--mainColor);
}

.drodo-nav .cart-btn {
  position: relative;
  line-height: 1;
  background-color: #eeeeee;
  text-align: center;
  color: #333;
  padding: 10px;
  margin-top: 20px;
  border-radius: 5px;
}

.aws-container .aws-search-form {
  height: auto!important;
}


.navbar-area.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  -webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
          box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
  background-color: var(--whiteColor) !important;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
          animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  padding-top: 0;
  padding-bottom: 0;
}

@media only screen and (max-width: 1024px) {
  .dropdown-toggle::after { 
	display: none;
	content: '';
  }
  .drodo-responsive-nav {
    display: block;
  }
  .drodo-responsive-nav .drodo-responsive-menu {
    position: relative;
  }

  .drodo-responsive-nav .logo {
    position: relative;
    width: 50%;
    z-index: 999;
    margin-left: 20px;
  }
  .drodo-nav {
    display: none;
  }
  .navbar-area {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .navbar-area.is-sticky {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}







/*================================================
Categories Area CSS
=================================================*/
.single-categories-box {
  margin-bottom: 30px;
  position: relative;
  border-radius: 3px;
  text-align: center;
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  padding: 30px 15px;
}

.single-categories-box img {
  width: auto !important;
  display: inline-block !important;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.single-categories-box h3 {
  font-size: 18px;
  margin-bottom: 0;
  margin-top: 25px;
}

.single-categories-box .link-btn {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  z-index: 2;
}

.single-categories-box:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

/*================================================
Products Area CSS
=================================================*/



/*================================================
Products Details Area CSS
=================================================*/

/*================================================
Cart Area CSS
=================================================*/


/*================================================
Why Choose Us Area CSS
=================================================*/
.single-why-choose-box {
  margin-bottom: 30px;
  text-align: center;
  background-color: #f2f8f6;
  padding: 35px 20px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.single-why-choose-box .icon {
  line-height: 1;
  margin-bottom: 25px;
  font-size: 45px;
  color: var(--mainColor);
}

.single-why-choose-box h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.single-why-choose-box:hover {
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
  background-color: var(--whiteColor) !important;
}

.col-lg-4:nth-child(2) .single-why-choose-box {
  background-color: #f3f7fa;
}

.col-lg-4:nth-child(3) .single-why-choose-box {
  background-color: #fef7ee;
}




/*================================================
Brands Area CSS
=================================================*/
.single-brands-item {
  margin-bottom: 30px;
  text-align: center;
  border-right: 1px solid #eeeeee;
}

.col-lg-2:nth-child(6) .single-brands-item, .col-lg-2:nth-child(12) .single-brands-item, .col-lg-2:nth-child(18) .single-brands-item {
  border-right: none;
}

/*================================================
Blog Area CSS
=================================================*/
.single-blog-post {
  margin-bottom: 30px;
}

.single-blog-post .post-image {
  overflow: hidden;
}

.single-blog-post .post-image img {
  -webkit-transition: var(--transition);
  transition: var(--transition);
  width: 100%;
}

.single-blog-post .post-content {
  margin-top: 25px;
}

.single-blog-post .post-content h3 {
  margin-bottom: 15px;
  font-size: 21px;
}

.single-blog-post .post-content .post-meta {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.single-blog-post .post-content .post-meta li {
  margin-right: 20px;
  position: relative;
  color: var(--optionalColor);
  
}

.single-blog-post .post-content .post-meta li::before {
  content: '';
  position: absolute;
  right: -11px;
  top: 10.8px;
  width: 1px;
  height: 14px;
  background-color: #b3afaf;
}

.single-blog-post .post-content .post-meta li:last-child {
  margin-right: 0;
}

.single-blog-post .post-content .post-meta li:last-child::before {
  display: none;
}

.single-blog-post .post-content .post-meta li img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 5px;
}

.single-blog-post .post-content .post-meta li a {
  color: var(--optionalColor);
}

.single-blog-post .post-content .post-meta li a:hover {
  color: var(--mainColor);
}

.single-blog-post:hover .post-image img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}


/*================================================
Facility Area CSS
=================================================*/
.single-facility-box {
  margin-bottom: 30px;
  position: relative;
  padding-left: 62px;
}

.single-facility-box .icon {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 1;
  color: var(--mainColor);
  font-size: 45px;
}

.single-facility-box .h3 {
  margin-bottom: 8px;
  font-size: 22px;
}

.single-facility-box p {
  font-size: 14.5px;
  line-height: initial;
}

.col-lg-3:nth-child(4) .single-facility-box, .col-lg-3:nth-child(8) .single-facility-box, .col-lg-3:nth-child(12) .single-facility-box {
  border-right: none;
}

/*================================================
Gallery Area CSS
=================================================*/
.single-gallery-item {
  position: relative;
  margin-bottom: 30px;
  z-index: 1;
  border-radius: 5px;
  overflow: hidden;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.single-gallery-item a {
  display: block;
  border-radius: 5px;
}

.single-gallery-item a img {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.single-gallery-item:hover a img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-filter: blur(2px);
          filter: blur(2px);
}


/*================================================
Page Title Area CSS
=================================================*/
.page-title-area {
  background-color: #f7f8fa;
  padding: 10px;
}

.page-title-area #breadcrumbs {
  font-size: 14px;
}


.page-title-content ul {
  padding-left: 0;
  list-style-type: none;
  margin-bottom: 0;
  margin-top: 12px;
}

.page-title-content ul li {
  display: inline-block;
  position: relative;
  color: var(--mainColor);
  
  font-size: 16px;
  margin-left: 10px;
  margin-right: 10px;
}

.page-title-content ul li::before {
  width: 1px;
  height: 14px;
  content: '';
  position: absolute;
  right: -13px;
  top: 6.2px;
  background-color: #404040;
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
}

.page-title-content ul li:first-child {
  margin-left: 0;
}

.page-title-content ul li:last-child {
  margin-right: 0;
}

.page-title-content ul li:last-child::before {
  display: none;
}

.page-title-content ul li a {
  display: inline-block;
  color: var(--optionalColor);
}

.page-title-content ul li a:hover {
  color: var(--mainColor);
}



/*================================================
Widget Sidebar CSS
=================================================*/
.widget-area {
  padding-left: 10px;
}

.widget-area.widget-left-sidebar {
  padding-right: 10px;
  padding-left: 0;
}

.widget-area .widget {
  margin-bottom: 30px;
  background-color: #f7f8fa;
  padding: 25px;
}

.widget-area .widget:last-child {
  margin-bottom: 0;
}

.widget-area .widget .widget-title {
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 7px;
  border-bottom: 1px solid #eeeeee;
  font-size: 21px;
}

.widget-area .widget .widget-title::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 1px;
  bottom: -1px;
  background-color: var(--mainColor);
}

.widget-area .widget_search form {
  position: relative;
}

.widget-area .widget_search form .screen-reader-text {
  display: none;
}

.widget-area .widget_search form label {
  display: block;
  margin-bottom: 0;
}

.widget-area .widget_search form .search-field {
  height: 50px;
  color: var(--blackColor);
  background-color: var(--whiteColor);
  display: block;
  width: 100%;
  border-radius: 5px;
  padding: 0 0 0 15px;
  border: none;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  font-weight: 500;
}

.widget-area .widget_search form .search-field::-webkit-input-placeholder {
  color: var(--optionalColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget-area .widget_search form .search-field:-ms-input-placeholder {
  color: var(--optionalColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget-area .widget_search form .search-field::-ms-input-placeholder {
  color: var(--optionalColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget-area .widget_search form .search-field::placeholder {
  color: var(--optionalColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget-area .widget_search form .search-field:focus::-webkit-input-placeholder {
  color: transparent;
}

.widget-area .widget_search form .search-field:focus:-ms-input-placeholder {
  color: transparent;
}

.widget-area .widget_search form .search-field:focus::-ms-input-placeholder {
  color: transparent;
}

.widget-area .widget_search form .search-field:focus::placeholder {
  color: transparent;
}

.widget-area .widget_search form button {
  border: none;
  background-color: var(--whiteColor);
  color: var(--mainColor);
  height: 40px;
  width: 40px;
  position: absolute;
  right: 5px;
  padding: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  top: 5px;
  font-size: 20px;
}

.widget-area .widget_search form button i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.widget-area .widget_search form button:hover, .widget-area .widget_search form button:focus {
  border-radius: 5px;
  background-color: var(--mainColor);
  color: var(--whiteColor);
}

.widget-area .widget_drodo_posts_thumb {
  position: relative;
  overflow: hidden;
}

.widget-area .widget_drodo_posts_thumb .item {
  overflow: hidden;
  margin-bottom: 15px;
}

.widget-area .widget_drodo_posts_thumb .item:last-child {
  margin-bottom: 0;
}

.widget-area .widget_drodo_posts_thumb .item .thumb {
  float: left;
  height: 80px;
  overflow: hidden;
  display: block;
  position: relative;
  width: 80px;
  margin-right: 15px;
  z-index: 1;
}

.widget-area .widget_drodo_posts_thumb .item .thumb .fullimage {
  width: 80px;
  height: 80px;
  display: inline-block;
  border-radius: 5px;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center center !important;
}

.widget-area .widget_drodo_posts_thumb .item .thumb .fullimage.bg1 {
  background-image: url(../../assets/img/blog/blog-img1.jpg);
}

.widget-area .widget_drodo_posts_thumb .item .thumb .fullimage.bg2 {
  background-image: url(../../assets/img/blog/blog-img2.jpg);
}

.widget-area .widget_drodo_posts_thumb .item .thumb .fullimage.bg3 {
  background-image: url(../../assets/img/blog/blog-img3.jpg);
}

.widget-area .widget_drodo_posts_thumb .item .thumb::before, .widget-area .widget_drodo_posts_thumb .item .thumb::after {
  -webkit-transition: all 0.8s cubic-bezier(0.2, 1, 0.22, 1);
  transition: all 0.8s cubic-bezier(0.2, 1, 0.22, 1);
  content: '';
  background-color: var(--whiteColor);
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.widget-area .widget_drodo_posts_thumb .item .thumb::before {
  width: 40px;
  height: 1px;
  left: 100%;
}

.widget-area .widget_drodo_posts_thumb .item .thumb::after {
  height: 40px;
  width: 1px;
  top: 0;
}

.widget-area .widget_drodo_posts_thumb .item .info {
  overflow: hidden;
  margin-top: 5px;
}

.widget-area .widget_drodo_posts_thumb .item .info span {
  display: block;
  color: var(--optionalColor);
  text-transform: uppercase;
  margin-top: -2px;
  margin-bottom: 5px;
  font-size: 13px;
}

.widget-area .widget_drodo_posts_thumb .item .info .title {
  margin-bottom: 0;
  line-height: 1.4;
  font-size: 17px;
  font-weight: 700;
}

.widget-area .widget_drodo_posts_thumb .item .info .title a {
  display: inline-block;
}

.widget-area .widget_drodo_posts_thumb .item:hover .thumb::before, .widget-area .widget_drodo_posts_thumb .item:hover .thumb::after {
  opacity: 1;
  top: 50%;
  left: 50%;
}

.widget-area .widget_categories ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.widget-area .widget_categories ul li {
  position: relative;
  margin-bottom: 12px;
  overflow: hidden;
  color: var(--blackColor);
  padding-left: 18px;
  
  font-size: 14.5px;
}

.widget-area .widget_categories ul li:last-child {
  margin-bottom: 0;
}

.widget-area .widget_categories ul li::before {
  background: var(--mainColor);
  height: 8px;
  width: 8px;
  content: '';
  border-radius: 50%;
  left: 0;
  top: 7px;
  position: absolute;
}

.widget-area .widget_categories ul li a {
  color: var(--blackColor);
  display: inline-block;
}

.widget-area .widget_categories ul li a:hover {
  color: var(--mainColor);
}

.widget-area .widget_categories ul li .post-count {
  font-size: 14px;
  display: inline-block;
  position: relative;
  top: 1px;
}

.widget-area .widget_tag_cloud .widget-title {
  margin-bottom: 17px;
}

.widget-area .tagcloud a {
  display: inline-block;
  background: var(--whiteColor);
  color: var(--blackColor);
  padding: 7px 15px;
  border: none;
  border-radius: 3px;
  
  font-size: 14px !important;
  margin-top: 8px;
  margin-right: 4px;
}

.widget-area .tagcloud a:hover, .widget-area .tagcloud a:focus {
  color: var(--whiteColor);
  background-color: var(--mainColor);
}

.widget-area .widget_instagram ul {
  padding-left: 0;
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 0;
  margin-left: -5px;
  margin-right: -5px;
  margin-top: -10px;
}

.widget-area .widget_instagram ul li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.333333%;
          flex: 0 0 33.333333%;
  max-width: 33.333333%;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 10px;
}

.widget-area .widget_instagram ul li .box {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.widget-area .widget_instagram ul li .box .link-btn {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
}

.widget-area .widget_instagram ul li .box i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 30px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  color: var(--whiteColor);
  z-index: 2;
}

.widget-area .widget_instagram ul li .box img {
  -webkit-transition: var(--transition);
  transition: var(--transition);
}

.widget-area .widget_instagram ul li .box::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background-color: var(--mainColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
}

.widget-area .widget_instagram ul li .box:hover::before {
  opacity: 0.5;
  visibility: visible;
}

.widget-area .widget_instagram ul li .box:hover img {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.widget-area .widget_instagram ul li .box:hover i {
  opacity: 1;
  visibility: visible;
}

.widget-area .widget_insight ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

.widget-area .widget_insight ul li {
  margin-bottom: -1px;
}

.widget-area .widget_insight ul li a {
  position: relative;
  display: block;
  padding: 15px 25px 15px 40px;
  color: var(--blackColor);
  border: 1px solid #eeeeee;
  background-color: var(--whiteColor);
  font-weight: 700;
  font-size: 15px;
}

.widget-area .widget_insight ul li a::before {
  width: 5px;
  height: 5px;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: var(--optionalColor);
  content: '';
  position: absolute;
  left: 25px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 50%;
}

.widget-area .widget_insight ul li a:hover, .widget-area .widget_insight ul li a.active {
  border-color: var(--mainColor);
  background-color: var(--mainColor);
  color: var(--whiteColor);
}

.widget-area .widget_insight ul li a:hover::before, .widget-area .widget_insight ul li a.active::before {
  background-color: var(--whiteColor);
}

.widget-area .widget_insight ul li.active a {
  border-color: var(--mainColor);
  background-color: var(--mainColor);
  color: var(--whiteColor);
}

.widget-area .widget_insight ul li.active a::before {
  background-color: var(--whiteColor);
}

/*================================================
Profile Authentication Area CSS
=================================================*/
.login-form {
  padding: 40px 50px;
  border-radius: 5px;
  background-color: var(--whiteColor);
  -webkit-box-shadow: 0 0 10px rgba(51, 51, 51, 0.1);
          box-shadow: 0 0 10px rgba(51, 51, 51, 0.1);
  margin-right: 30px;
}

.login-form h2 {
  margin-bottom: 25px;
  font-size: 30px;
}

.login-form form .form-group {
  margin-bottom: 25px;
}

.login-form form .form-group label {
  display: block;
  margin-bottom: 10px;
  color: var(--blackColor);
  
}

.login-form form .remember-me-wrap {
  margin-bottom: 0;
}

.login-form form .remember-me-wrap [type="checkbox"]:checked, .login-form form .remember-me-wrap [type="checkbox"]:not(:checked) {
  display: none;
}

.login-form form .remember-me-wrap [type="checkbox"]:checked + label, .login-form form .remember-me-wrap [type="checkbox"]:not(:checked) + label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  margin-bottom: 0;
  color: var(--optionalColor);
  
}

.login-form form .remember-me-wrap [type="checkbox"]:checked + label:before, .login-form form .remember-me-wrap [type="checkbox"]:not(:checked) + label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 1px solid #f5f5f5;
  border-radius: 3px;
  background: #f5f5f5;
}

.login-form form .remember-me-wrap [type="checkbox"]:checked + label:after, .login-form form .remember-me-wrap [type="checkbox"]:not(:checked) + label:after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--mainColor);
  position: absolute;
  top: 5.5px;
  left: 6px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.login-form form .remember-me-wrap [type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.login-form form .remember-me-wrap [type="checkbox"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.login-form form .remember-me-wrap [type="checkbox"]:hover + label:before {
  border-color: var(--mainColor);
}

.login-form form .remember-me-wrap [type="checkbox"]:checked + label:before {
  border-color: var(--mainColor);
}

.login-form form .lost-your-password-wrap {
  text-align: right;
}

.login-form form .lost-your-password-wrap a {
  display: inline-block;
  position: relative;
  
  line-height: 1.3;
}

.login-form form .lost-your-password-wrap a::before {
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  -webkit-transition: var(--transition);
  transition: var(--transition);
  background-color: #eeeeee;
}

.login-form form .lost-your-password-wrap a::after {
  width: 0;
  height: 1px;
  position: absolute;
  left: 0;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  bottom: 0;
  content: '';
  background-color: var(--mainColor);
}

.login-form form .lost-your-password-wrap a:hover::before {
  width: 0;
}

.login-form form .lost-your-password-wrap a:hover::after {
  width: 100%;
}

.login-form form button {
  margin-top: 22px;
  border: none;
  display: block;
  text-align: center;
  overflow: hidden;
  color: var(--whiteColor);
  background-color: var(--mainColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  border-radius: 5px;
  padding: 10px 40px;
  font-weight: 700;
}

.login-form form button:hover {
  background-color: var(--blackColor);
  color: var(--whiteColor);
}

.register-form {
  padding-top: 30px;
  padding-left: 30px;
}

.register-form h2 {
  margin-bottom: 25px;
  font-size: 30px;
}

.register-form form .form-group {
  margin-bottom: 25px;
}

.register-form form .form-group label {
  display: block;
  margin-bottom: 10px;
  color: var(--blackColor);
  
}

.register-form form .description {
  font-style: italic;
  font-size: 13.5px;
  margin-top: -10px;
  margin-bottom: 0;
}

.register-form form button {
  margin-top: 22px;
  border: none;
  display: block;
  text-align: center;
  overflow: hidden;
  color: var(--whiteColor);
  background-color: var(--mainColor);
  -webkit-transition: var(--transition);
  transition: var(--transition);
  width: 100%;
  border-radius: 5px;
  padding: 14.5px 30px;
  font-weight: 700;
}

.register-form form button:hover {
  background-color: var(--blackColor);
  color: var(--whiteColor);
}

/*================================================
404 Error Area CSS
=================================================*/
.error-content {
  text-align: center;
}

.error-content h3 {
  margin-bottom: 20px;
  margin-top: 45px;
  font-size: 40px;
}

.error-content p {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

.error-content .default-btn {
  margin-top: 30px;
}

/*================================================
FAQ Area CSS
=================================================*/


.tab .tabs-item {
  display: none;
}

.tab .tabs-item:first-child {
  display: block;
}


.text-danger {
  color: #dc3545 !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  margin-top: 15px !important;
}