/* Updated with ChatGPT on 2025-11-30 – no functional rules removed. */
/*
@File: Arrola HTML Template

* 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 Style 
** - Section Title Style
** - Top Header Style
** - Navbar Area Style
** - Main Banner Area CSS  Style
** - Inner Banner Style
** - About Area Style
** - Other Area Style
*******************************************
/*

/*================================================
Default CSS
=================================================*/
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
:root {
  --bodyFonts: "DM Sans", sans-serif;
  --headerFonts: "Roboto Slab", serif;
  --greenColor: #72ae44;
  --titleColor: #191f30;
  --whiteColor: #ffffff;
  --bodyColor: #4e4e4e;
  --fontSize: 16px;
  --transition: .5s;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: var(--fontSize);
  font-family: var(--bodyFonts);
  font-weight: 400;
}

p {
  color: var(--bodyColor);
  margin-bottom: 10px;
}
p:last-child {
  margin-bottom: 0;
}

a {
  display: inline-block;
  transition: var(--transition);
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: none;
}

button {
  outline: 0;
}
button:focus {
  outline: 0;
  border: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--titleColor);
  line-height: 1.4;
  font-family: var(--headerFonts);
}

h3 {
  font-size: 20px;
}

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

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

img {
  max-width: 100%;
}

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

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

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

.pb-100 {
  padding-bottom: 100px !important;
}

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

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

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

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

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

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

.pl-20 {
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}

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

.ml-20 {
  margin-left: 20px;
}

.border-radius-5 {
  border-radius: 5px !important;
}

.border-radius-50 {
  border-radius: 50px !important;
}

.default-btn {
  padding: 10px 30px;
  color: var(--whiteColor);
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  text-transform: capitalize;
  background-color: var(--greenColor);
  border: none;
  outline: none;
}
.default-btn::before {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  background-color: var(--titleColor);
  left: 0;
  right: 0;
  opacity: 0;
  z-index: -1;
  transition: var(--transition);
}
.default-btn:hover {
  color: var(--whiteColor);
}
.default-btn:hover::before {
  transform: scale(1);
  opacity: 1;
}
.default-btn.two {
  background-color: var(--titleColor);
}
.default-btn.two:hover {
  color: var(--whiteColor);
}
.default-btn.two:hover::before {
  background-color: var(--greenColor);
}

/*================================
Section Title Style 
===================================*/
.section-title span {
  padding-bottom: 22px;
  display: inline-block;
  line-height: 0;
  font-size: 15px;
  color: var(--greenColor);
  position: relative;
  font-weight: 500;
  font-family: var(--headerFonts);
}
.section-title h2 {
  font-size: 40px;
  font-weight: 500;
  margin-top: 0;
  line-height: 1.2;
  color: var(--titleColor);
  margin-bottom: 0;
}
.section-title h2 b {
  color: var(--greenColor);
  font-weight: 500;
}
.section-title p {
  padding-top: 15px;
  margin-bottom: 0;
}

/*================================
Section Title Style End
===================================*/
/*================================
Top Header Area
===================================*/
.top-header-bg {
  background-color: #f4f7ea;
}

.top-header-bg-two {
  background-color: #0a0f1f;
  padding: 7px 20px;
}

.top-inner-bg {
  background-color: var(--greenColor);
  padding: 7px 20px;
  border-radius: 3px;
}

.header-left {
  float: left;
}
.header-left p {
  color: var(--whiteColor);
}

.header-right {
  float: right;
}
.header-right .header-item {
  margin-right: 30px;
}
.header-right .header-item:last-child {
  margin-right: 0;
}
.header-right .header-item ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.header-right .header-item ul li {
  display: inline-block;
  margin-right: 10px;
  color: var(--whiteColor);
}
.header-right .header-item ul li.title {
  position: relative;
  top: -3px;
}
.header-right .header-item ul li:last-child {
  margin-right: 0;
}
.header-right .header-item ul li a i {
  width: 30px;
  height: 30px;
  line-height: 30px;
  background-color: var(--whiteColor);
  border-radius: 0;
  text-align: center;
  color: var(--greenColor);
  font-size: 18px;
  transition: var(--transition);
}
.header-right .header-item ul li a:hover i {
  color: var(--whiteColor);
  background-color: var(--titleColor);
}
.header-right .header-item .cart-top-btn {
  font-size: 24px;
  color: var(--whiteColor);
  position: relative;
  z-index: 1;
  top: 2px;
  transition: var(--transition);
}
.header-right .header-item .cart-top-btn span {
  position: absolute;
  bottom: 10px;
  right: 0;
  text-align: center;
  width: 12px;
  height: 12px;
  background-color: var(--whiteColor);
  font-size: 8px;
  color: var(--greenColor);
  border-radius: 50px;
  transition: var(--transition);
}
.header-right .header-item .cart-top-btn:hover {
  color: var(--greenColor);
}
.header-right .header-item .cart-top-btn.cart-top-btn-two:hover {
  color: var(--titleColor);
}
.header-right .header-item .header-language {
  display: inline-block;
  position: relative;
  top: 0;
}
.header-right .header-item .header-language .dropdown-toggle {
  background-color: transparent;
  color: var(--whiteColor);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  padding: 0;
  outline: 0;
  border: 0;
  transition: all 0.3s linear;
}
.header-right .header-item .header-language .dropdown-toggle:after {
  content: "\ea4a";
  font-family: "boxicons";
  border: 0;
  margin-left: 8px;
  font-size: 20px;
}
.header-right .header-item .header-language .dropdown-toggle i {
  margin-right: 8px;
  font-size: 20px;
  color: var(--whiteColor);
}
.header-right .header-item .header-language .dropdown-menu {
  margin: 0;
  padding: 0;
  box-shadow: 0px 9px 54px 0px rgba(32, 32, 32, 0.1);
  left: auto;
  right: 0;
  border: 0;
  border-radius: 0;
  transform: translateY(100px) !important;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s linear;
}
.header-right .header-item .header-language .dropdown-menu.show {
  transform: translateY(40px) !important;
  opacity: 1;
  pointer-events: all;
}
.header-right .header-item .header-language .dropdown-menu a {
  padding: 5px 10px;
  transition: all 0.3s linear;
  font-size: 15px;
}
.header-right .header-item .header-language .dropdown-menu a:active {
  background-color: #f8f9fa;
}
.header-right .header-item .header-language .dropdown-menu a img {
  width: 20px;
  margin-right: 10px;
}
.header-right .header-item .header-language .dropdown-menu[style] {
  right: 0 !important;
  left: auto !important;
}

/*================================
Top Header Area End
===================================*/
/*================================
Navbar Area
===================================*/
.desktop-nav {
  background-color: transparent;
  padding-top: 0;
  padding-bottom: 0;
}
.desktop-nav .navbar {
  padding-right: 0;
  padding-top: 0;
  padding-left: 0;
  padding-bottom: 0;
}
.desktop-nav .navbar .navbar-brand .logo-two {
  display: none;
}
.desktop-nav .navbar ul {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}
.desktop-nav .navbar .navbar-nav {
  margin-left: auto;
  margin-right: auto;
}
.desktop-nav .navbar .navbar-nav .nav-item {
  position: relative;
  padding-bottom: 30px;
  padding-top: 30px;
  padding-right: 0;
  padding-left: 0;
}
.desktop-nav .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  color: var(--bodyColor);
  position: relative;
  z-index: 1;
  font-family: var(--headerFonts);
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-left: 15px;
  margin-right: 15px;
}
.desktop-nav .navbar .navbar-nav .nav-item a:hover, .desktop-nav .navbar .navbar-nav .nav-item a:focus, .desktop-nav .navbar .navbar-nav .nav-item a.active {
  color: var(--greenColor);
}
.desktop-nav .navbar .navbar-nav .nav-item a:hover i, .desktop-nav .navbar .navbar-nav .nav-item a:focus i, .desktop-nav .navbar .navbar-nav .nav-item a.active i {
  transform: rotate(360deg);
}
.desktop-nav .navbar .navbar-nav .nav-item a i {
  font-size: 18px;
  position: relative;
  top: 3px;
  transition: var(--transition);
}
.desktop-nav .navbar .navbar-nav .nav-item:last-child a {
  margin-right: 0;
}
.desktop-nav .navbar .navbar-nav .nav-item:first-child a {
  margin-left: 0;
}
.desktop-nav .navbar .navbar-nav .nav-item:hover a, .desktop-nav .navbar .navbar-nav .nav-item:focus a, .desktop-nav .navbar .navbar-nav .nav-item.active a {
  color: var(--greenColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  background: var(--whiteColor);
  border: none;
  border-top: 2px solid #72ae44;
  border-bottom: 2px solid #72ae44;
  position: absolute;
  visibility: hidden;
  transform-origin: top;
  border-radius: 5px;
  display: block;
  width: 250px;
  z-index: 99;
  opacity: 0;
  top: 80px;
  left: 0;
  transform: scaleY(0);
  transition: var(--transition);
  padding-top: 2px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 0;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
  padding: 0;
  border-bottom: 1px solid #f0eeee;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child {
  border: none;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
  color: var(--titleColor);
  padding: 12px 20px;
  margin: 0;
  font-size: 15px;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:before {
  display: none;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
  color: var(--greenColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li a i {
  float: right;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
  margin-top: 11px;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
  color: var(--greenColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
  left: 245px;
  top: 0;
  opacity: 0;
  visibility: hidden;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
  font-size: 15px;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--greenColor);
}
.desktop-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;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
  color: var(--greenColor);
}
.desktop-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;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
  color: var(--titleColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .desktop-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(--greenColor);
}
.desktop-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;
}
.desktop-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: var(--titleColor);
}
.desktop-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, .desktop-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, .desktop-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(--greenColor);
}
.desktop-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;
}
.desktop-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: var(--titleColor);
}
.desktop-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, .desktop-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, .desktop-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(--greenColor);
}
.desktop-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(--greenColor);
}
.desktop-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;
  top: -15px;
}
.desktop-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(--greenColor);
}
.desktop-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;
  top: -15px;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--greenColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  top: -15px;
  visibility: visible;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
  color: var(--greenColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  top: -15px;
  visibility: visible;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li.active a {
  color: var(--greenColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: -15px;
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li.active a {
  color: var(--greenColor);
}
.desktop-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: -15px;
}
.desktop-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu {
  top: 100%;
  opacity: 1;
  margin-top: 0;
  visibility: visible;
  transform: scaleY(1);
}

.desktop-nav-one {
  background-color: #f3f7e9;
}

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

.others-options .optional-item {
  margin-right: 30px;
}
.others-options .optional-item:last-child {
  margin-right: 0;
}
.others-options .optional-item .default-btn {
  font-family: var(--headerFonts);
  position: relative;
  top: 3px;
}
.others-options .optional-item .search-btn {
  position: relative;
  top: 4px;
}

.search-btn a i {
  font-size: 22px;
  color: var(--titleColor);
  transition: 0.6s;
}
.search-btn a i:hover {
  color: var(--greenColor);
}

.searchmodal .modal-dialog {
  width: 100%;
  height: 100%;
  max-width: 100%;
  margin: 0;
  display: table;
}

.modal-content {
  height: 100%;
  border-radius: 0;
  border: none;
  display: table-cell;
  vertical-align: middle;
  background-color: #222;
  opacity: 0.77;
}

.modal-body {
  max-width: 700px;
  margin: auto;
  padding: 0;
}

.modal-header {
  border: none;
}
.modal-header button {
  position: relative;
}
.modal-header button.close {
  position: absolute;
  right: 25px;
  top: 25px;
  display: inline-block;
  height: 50px;
  width: 50px;
  line-height: 55px;
  background-color: var(--whiteColor);
  border-radius: 5px;
  color: var(--greenColor);
  border: none;
  font-size: 35px;
  transition: 0.6s;
}
.modal-header button.close:hover, .modal-header button.close:focus {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}

.modal-search-form {
  position: relative;
}
.modal-search-form .search-field {
  background-color: transparent;
  height: 60px;
  padding: 8px 15px;
  border: none;
  border-bottom: 1px solid var(--whiteColor);
  width: 100%;
  display: block;
  outline: 0;
  transition: 0.6s;
  border-radius: 0;
  color: var(--whiteColor);
}
.modal-search-form .search-field::-webkit-input-placeholder, .modal-search-form .search-field:-ms-input-placeholder, .modal-search-form .search-field::-ms-input-placeholder, .modal-search-form .search-field::placeholder {
  color: var(--whiteColor);
  -webkit-transition: 0.6s;
  -ms-transition: 0.6s;
  transition: 0.6s;
}
.modal-search-form .search-field:focus {
  border-color: var(--greenColor);
}
.modal-search-form .search-field:focus::-webkit-input-placeholder, .modal-search-form .search-field:focus:-ms-input-placeholder, .modal-search-form .search-field:focus::-ms-input-placeholder, .modal-search-form .search-field:focus::placeholder {
  color: transparent;
}
.modal-search-form button {
  border: none;
  background-color: var(--whiteColor);
  color: var(--greenColor);
  height: 40px;
  width: 40px;
  position: absolute;
  right: 10px;
  padding: 0;
  transition: 0.6s;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  border-radius: 5px;
  cursor: pointer;
}
.modal-search-form button i {
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  transform: translateY(-52%);
}
.modal-search-form button:hover, .modal-search-form button:focus {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}

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

.mobile-nav {
  position: absolute;
  top: -2px;
  right: 50px;
  display: none;
}
.mobile-nav .mobile-other .optional-item {
  margin-right: 10px;
}
.mobile-nav .mobile-other .optional-item:last-child {
  margin-right: 0;
}
.mobile-nav .mobile-other .optional-item .default-btn {
  font-family: var(--headerFonts);
  position: relative;
  top: 3px;
  padding: 8px 7px;
  font-size: 11px;
}
.mobile-nav .mobile-other .optional-item .search-btn {
  position: relative;
  top: 4px;
}

/*================================
Navbar Area End
===================================*/
/*================================
Main Banner Area
===================================*/
.banner-area {
  background-image: url(../images/home-one-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 85px 0;
  position: relative;
  z-index: 1;
}
.banner-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: var(--titleColor);
  opacity: 0.4;
}

.banner-content {
  padding: 50px 40px;
  background-color: var(--whiteColor);
  max-width: 700px;
  margin-left: auto;
  position: relative;
}
.banner-content h1 {
  font-size: 55px;
  color: var(--titleColor);
  line-height: 1.2;
  margin-bottom: 20px;
}
.banner-content h1 b {
  color: var(--greenColor);
  font-weight: 600;
}
.banner-content p {
  margin-bottom: 25px;
}

.banner-shape img:nth-child(1) {
  position: absolute;
  top: 20px;
  right: 40px;
  animation: animationFramesOne 7s infinite linear;
}
.banner-shape img:nth-child(2) {
  position: absolute;
  bottom: 55px;
  right: 30px;
  animation: animationFramesOne 9s infinite linear;
}
.banner-shape img:nth-child(3) {
  position: absolute;
  bottom: 55px;
  right: 50%;
  animation: animationFramesOne 11s infinite linear;
}

.banner-slider-area {
  padding: 50px 0;
  position: relative;
  z-index: 1;
}
.banner-slider-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 85%;
  background-color: #f2fef2;
}
.banner-slider-area .owl-dots {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: grid;
}
.banner-slider-area .owl-dots .owl-dot span {
  background-color: var(--greenColor) !important;
  transition: 0.7s;
  margin: 7px 0;
  width: 12px !important;
  height: 12px !important;
  position: relative;
  z-index: 1;
  display: block;
}
.banner-slider-area .owl-dots .owl-dot span::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: transparent;
  border: 1px solid var(--greenColor);
  border-radius: 50%;
  opacity: 0;
  transition: 0.7s;
}
.banner-slider-area .owl-dots .owl-dot.active span {
  width: 10px !important;
  height: 10px !important;
}
.banner-slider-area .owl-dots .owl-dot.active span::before {
  opacity: 1;
}
.banner-slider-area .owl-dots .owl-dot:hover span {
  width: 10px !important;
  height: 10px !important;
}
.banner-slider-area .owl-dots .owl-dot:hover span::before {
  opacity: 1;
}

.banner-item-content {
  position: relative;
}
.banner-item-content h1 {
  font-size: 55px;
  color: var(--titleColor);
  line-height: 1.2;
  margin-bottom: 20px;
}
.banner-item-content p {
  margin-bottom: 25px;
}
.banner-item-content .banner-btn .two {
  margin-left: 20px;
}

.banner-shape-two img:nth-child(1) {
  position: absolute;
  bottom: 170px;
  left: 40%;
  width: unset !important;
  animation: moveIn-to 9s infinite linear;
}
.banner-shape-two img:nth-child(2) {
  position: absolute;
  top: 50px;
  left: 0;
  width: unset !important;
  animation: moveIn-to 12s infinite linear;
}
.banner-shape-two img:nth-child(3) {
  position: absolute;
  bottom: 115px;
  left: 3%;
  width: unset !important;
  animation: movebounce-up 15s infinite linear;
}

.banner-item-img {
  padding-left: 30px;
}
.banner-item-img img {
  border-bottom-left-radius: 30px;
}

.banner-area-three {
  padding: 50px 0;
  background-image: url(../images/home-three-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.banner-content-two {
  max-width: 760px;
  background-color: var(--whiteColor);
  padding: 130px 110px;
  border-radius: 50%;
  position: relative;
}
.banner-content-two span {
  color: var(--greenColor);
  font-weight: 600;
}
.banner-content-two h1 {
  font-size: 55px;
  color: var(--titleColor);
  line-height: 1.2;
  margin-bottom: 17px;
}
.banner-content-two p {
  margin-bottom: 25px;
}
.banner-content-two .banner-btn .two {
  margin-left: 20px;
  border: 1px solid var(--greenColor);
  background-color: transparent;
  color: var(--greenColor);
}
.banner-content-two .banner-btn .two:hover {
  color: var(--whiteColor);
}
.banner-content-two .banner-content-shape img:nth-child(1) {
  position: absolute;
  top: 135px;
  left: 55px;
  animation: moveIn-to 13s infinite linear;
}
.banner-content-two .banner-content-shape img:nth-child(2) {
  position: absolute;
  top: 65%;
  transform: translateY(-65%);
  left: 30px;
  animation: moveIn-to 11s infinite linear;
}
.banner-content-two .banner-content-shape img:nth-child(3) {
  position: absolute;
  top: 75px;
  right: 45px;
  height: 400px;
}

.owl-item.active .banner-item-content h1 {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
  animation-delay: 0.7s;
}
.owl-item.active .banner-item-content p {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInDown;
  animation-delay: 0.9s;
}
.owl-item.active .banner-item-content .banner-btn {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUp;
  animation-delay: 1.1s;
}
.owl-item.active .banner-item-img img {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInRight;
  animation-delay: 0.7s;
}

/*================================
Main Banner Area End
===================================*/
/*================================
Inner Banner Area
===================================*/
.inner-banner {
  position: relative;
  z-index: 1;
  background-position: center center;
  background-size: cover;
}
.inner-banner::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--titleColor);
  opacity: 0.7;
}
.inner-banner .inner-title {
  padding-top: 140px;
  padding-bottom: 140px;
  position: relative;
  z-index: 1;
}
.inner-banner .inner-title h3 {
  font-size: 45px;
  color: var(--whiteColor);
  font-weight: 500;
}
.inner-banner .inner-title ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.inner-banner .inner-title ul li {
  font-size: 18px;
  color: var(--whiteColor);
  display: inline-block;
  position: relative;
  margin-right: 25px;
  font-weight: 400;
}
.inner-banner .inner-title ul li:last-child {
  margin-right: 0;
}
.inner-banner .inner-title ul li:last-child::before {
  display: none;
}
.inner-banner .inner-title ul li::before {
  content: "";
  position: absolute;
  top: 7px;
  right: -15px;
  height: 17px;
  width: 1px;
  transform: rotate(20deg);
  background-color: var(--whiteColor);
}
.inner-banner .inner-title ul li a {
  color: var(--whiteColor);
}
.inner-banner .inner-title ul li a:hover {
  color: var(--greenColor);
}

.inner-bg1 {
  background-image: url("../images/inner-banner/inner-banner1.jpg");
}

.inner-bg2 {
  background-image: url("../images/inner-banner/inner-banner2.jpg");
}

.inner-bg3 {
  background-image: url("../images/inner-banner/inner-banner3.jpg");
}

.inner-bg4 {
  background-image: url("../images/inner-banner/inner-banner4.jpg");
}

.inner-bg5 {
  background-image: url("../images/inner-banner/inner-banner5.jpg");
}

.inner-bg6 {
  background-image: url("../images/inner-banner/inner-banner6.jpg");
}

.inner-bg7 {
  background-image: url("../images/inner-banner/inner-banner7.jpg");
}

.inner-bg8 {
  background-image: url("../images/inner-banner/inner-banner8.jpg");
}

.inner-bg9 {
  background-image: url("../images/inner-banner/inner-banner9.jpg");
}

.inner-bg10 {
  background-image: url("../images/inner-banner/inner-banner10.jpg");
}

.inner-bg11 {
  background-image: url("../images/inner-banner/inner-banner11.jpg");
}

.inner-bg12 {
  background-image: url("../images/inner-banner/inner-banner12.jpg");
}

.inner-bg13 {
  background-image: url("../images/inner-banner/inner-banner13.jpg");
}

.inner-bg14 {
  background-image: url("../images/inner-banner/inner-banner14.jpg");
}

.inner-bg15 {
  background-image: url("../images/inner-banner/inner-banner15.jpg");
}

.inner-bg16 {
  background-image: url("../images/inner-banner/inner-banner16.jpg");
}

.inner-bg17 {
  background-image: url("../images/inner-banner/inner-banner17.jpg");
}

.inner-bg18 {
  background-image: url("../images/inner-banner/inner-banner18.jpg");
}

.inner-bg19 {
  background-image: url("../images/inner-banner/inner-banner19.jpg");
}

.inner-bg20 {
  background-image: url("../images/inner-banner/inner-banner20.jpg");
}

.inner-bg21 {
  background-image: url("../images/inner-banner/inner-banner21.jpg");
}

.inner-bg22 {
  background-image: url("../images/inner-banner/inner-banner22.jpg");
}
.inner-bg23 {
  background-image: url("../images/inner-banner/inner-banner23.jpg");
}

/*================================
Banner Bottom Area
===================================*/
.banner-bottom-card {
  padding: 30px;
  position: relative;
  z-index: 1;
  border-radius: 15px;
  margin-bottom: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
}
.banner-bottom-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 100px;
  height: 75px;
  transition: var(--transition);
  background-color: #f3fcec;
  border-bottom-left-radius: 400px;
}
.banner-bottom-card i {
  width: 80px;
  height: 80px;
  line-height: 92px;
  font-size: 40px;
  color: var(--whiteColor);
  background-color: var(--greenColor);
  border-radius: 50px;
  display: inline-block;
  text-align: center;
  margin-bottom: 15px;
}
.banner-bottom-card h3 {
  margin-bottom: 15px;
}
.banner-bottom-card p {
  margin-bottom: 15px;
}
.banner-bottom-card .learn-btn {
  color: var(--greenColor);
  font-weight: 600;
  transition: var(--transition);
}
.banner-bottom-card .learn-btn:hover {
  color: var(--titleColor);
  letter-spacing: 0.25px;
}
.banner-bottom-card:hover::before {
  height: 100%;
  width: 100%;
  border-bottom-left-radius: 0;
  background-color: var(--greenColor);
  border-radius: 15px;
}
.banner-bottom-card:hover i {
  color: var(--greenColor);
  background-color: var(--whiteColor);
}
.banner-bottom-card:hover h3 {
  color: var(--whiteColor);
}
.banner-bottom-card:hover p {
  color: var(--whiteColor);
}
.banner-bottom-card:hover .learn-btn {
  color: var(--whiteColor);
}

.banner-bottom-card-two {
  padding: 20px;
}
.banner-bottom-card-two i {
  width: 60px;
  height: 60px;
  line-height: 62px;
  font-size: 30px;
}
.banner-bottom-card-two h3 {
  margin-bottom: 15px;
  font-size: 21px !important;
}
.banner-bottom-card-two p {
  margin-bottom: 0 !important;
}

.banner-bottom-item {
  padding: 30px 30px 25px;
  border: 1px dashed var(--greenColor);
  position: relative;
  z-index: 1;
  border-radius: 10px;
  margin-bottom: 30px;
  overflow: hidden;
}
.banner-bottom-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  transition: var(--transition);
  background-color: var(--greenColor);
  opacity: 0;
  border-radius: 10px;
}
.banner-bottom-item i {
  font-size: 40px;
  color: var(--greenColor);
  line-height: 1;
  display: inline-block;
  text-align: center;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  padding-top: 10px;
  padding-left: 15px;
}
.banner-bottom-item i::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: var(--transition);
  background-color: #cfeaba;
}
.banner-bottom-item h3 {
  margin-bottom: 10px;
}
.banner-bottom-item p {
  margin-bottom: 10px;
}
.banner-bottom-item .learn-btn {
  color: var(--greenColor);
  font-weight: 600;
  transition: var(--transition);
}
.banner-bottom-item .learn-btn:hover {
  color: var(--titleColor);
  letter-spacing: 0.25px;
}
.banner-bottom-item .top-shape img:nth-child(1) {
  position: absolute;
  top: 25px;
  right: 25px;
  transition: var(--transition);
}
.banner-bottom-item .top-shape img:nth-child(2) {
  position: absolute;
  top: -125px;
  right: 25px;
  opacity: 0;
  transition: var(--transition);
  animation: rotated360 15s infinite linear;
}
.banner-bottom-item:hover {
  border: 1px solid var(--greenColor);
}
.banner-bottom-item:hover::before {
  height: 100%;
  opacity: 1;
}
.banner-bottom-item:hover .top-shape img:nth-child(1) {
  opacity: 0;
}
.banner-bottom-item:hover .top-shape img:nth-child(2) {
  position: absolute;
  top: 25px;
  opacity: 1;
}
.banner-bottom-item:hover i {
  color: var(--whiteColor);
}
.banner-bottom-item:hover h3 {
  color: var(--whiteColor);
}
.banner-bottom-item:hover p {
  color: var(--whiteColor);
}
.banner-bottom-item:hover .learn-btn {
  color: var(--whiteColor);
  letter-spacing: 0.25px;
}

/*================================
Banner Bottom Area End
===================================*/
/*================================
About Area 
===================================*/
.about-area {
  background-color: #f7fef1;
  position: relative;
  z-index: 1;
}
.about-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 49%;
  height: 100%;
  transition: var(--transition);
  background-size: cover;
  background-position: center center;
  background-image: url(../images/about/about-bg.png);
  background-repeat: no-repeat;
}

.about-content {
  margin-bottom: 20px;
}
.about-content .section-title {
  margin-bottom: 20px;
}
.about-content h3 {
  margin-bottom: 15px;
}
.about-content .about-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.about-content .about-list ul li {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  transition: var(--transition);
}
.about-content .about-list ul li i {
  margin-right: 5px;
  font-size: 18px;
  color: var(--greenColor);
  position: relative;
  top: 2px;
  transition: var(--transition);
}
.about-content .about-list ul li:hover {
  color: var(--greenColor);
  letter-spacing: 0.25px;
}
.about-content .about-list ul li:hover i {
  color: var(--transition);
}

.about-play-btn {
  text-align: center;
}
.about-play-btn .play-btn i {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: var(--whiteColor);
  color: var(--greenColor);
  font-size: 45px;
  border-radius: 50px;
  margin: 0 auto;
  padding-left: 5px;
  position: relative;
  transition: var(--transition);
}
.about-play-btn .play-btn i::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 1px solid var(--whiteColor);
  border-radius: 50px;
  animation: ripple 2s infinite ease-in-out;
  transition: var(--transition);
}
.about-play-btn .play-btn i:hover {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.about-play-btn .play-btn i:hover::after {
  border-color: var(--greenColor);
}

.about-shape img:nth-child(1) {
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  animation: movebounce-up 11s infinite linear;
}
.about-shape img:nth-child(2) {
  position: absolute;
  z-index: -1;
  top: 20px;
  left: 40px;
  animation: animationFramesOne 10s infinite linear;
}
.about-shape img:nth-child(3) {
  position: absolute;
  z-index: -1;
  bottom: 25px;
  left: 20px;
  animation: animationFramesOne 12s infinite linear;
}
.about-shape img:nth-child(4) {
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  left: 10%;
  animation: animationFramesOne 15s infinite linear;
}

.about-area-two {
  position: relative;
}

.about-content-two {
  margin-bottom: 30px;
}
.about-content-two .section-title {
  margin-bottom: 20px;
}
.about-content-two .about-content-item {
  padding-left: 65px;
  position: relative;
  margin-bottom: 25px;
}
.about-content-two .about-content-item i {
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  line-height: 55px;
  background-color: var(--greenColor);
  color: var(--whiteColor);
  border-radius: 50px;
  text-align: center;
  font-size: 26px;
  transition: var(--transition);
}
.about-content-two .about-content-item h3 {
  font-size: 18px;
  margin-bottom: 10px;
  transition: var(--transition);
}
.about-content-two .about-content-item p {
  margin-bottom: 0;
}
.about-content-two .about-content-item:hover i {
  background-color: var(--titleColor);
}
.about-content-two .about-content-item:hover h3 {
  color: var(--greenColor);
}

.about-img {
  margin-bottom: 30px;
  animation: movebounce-up 17s infinite linear;
}

.about-shape-two img:nth-child(1) {
  position: absolute;
  z-index: -1;
  bottom: 40px;
  left: 40px;
  animation: moveIn-to 11s infinite linear;
}
.about-shape-two img:nth-child(2) {
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  animation: moveIn-to 13s infinite linear;
}

/*================================
About Area End
===================================*/
/*================================
Team Area
===================================*/
.team-card {
  margin-bottom: 30px;
  transition: var(--transition);
}
.team-card .team-img {
  position: relative;
  z-index: 1;
  transition: var(--transition);
}
.team-card .team-img a {
  display: block;
}
.team-card .team-img::before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  left: 0;
  height: 10px;
  background-color: var(--greenColor);
  transition: var(--transition);
  opacity: 0;
}
.team-card .team-img::after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 0%;
  left: 0;
  right: 0;
  background-color: transparent;
  border-left: 10px solid var(--greenColor);
  border-right: 10px solid var(--greenColor);
  transition: var(--transition);
  opacity: 0;
}
.team-card .content {
  background-color: var(--greenColor);
  padding: 20px;
  text-align: center;
  position: relative;
  transition: var(--transition);
}
.team-card .content h3 {
  margin-bottom: 5px;
}
.team-card .content h3 a {
  color: var(--whiteColor);
}
.team-card .content span {
  color: var(--whiteColor);
}
.team-card .content .team-social {
  padding-left: 0;
  list-style-type: none;
  position: absolute;
  z-index: 1;
  right: 30px;
  left: 30px;
  bottom: 100px;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 0;
  transition: var(--transition);
}
.team-card .content .team-social li {
  display: inline-block;
  transform: translateY(30px);
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  visibility: hidden;
  margin-right: 10px;
}
.team-card .content .team-social li:last-child {
  margin-right: 0;
}
.team-card .content .team-social li a i {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 18px;
  color: var(--whiteColor);
  background-color: var(--greenColor);
  transition: var(--transition);
}
.team-card .content .team-social li a:hover i {
  background-color: var(--titleColor);
  border-radius: 50px;
}
.team-card .content .team-social li:nth-child(1) {
  transition-delay: 0.1s;
}
.team-card .content .team-social li:nth-child(2) {
  transition-delay: 0.2s;
}
.team-card .content .team-social li:nth-child(3) {
  transition-delay: 0.3s;
}
.team-card .content .team-social li:nth-child(4) {
  transition-delay: 0.4s;
}
.team-card:hover {
  transform: translateY(-10px);
}
.team-card:hover .team-img {
  padding: 10px 10px 0;
}
.team-card:hover .team-img::before {
  width: 100%;
  opacity: 1;
}
.team-card:hover .team-img::after {
  height: 90%;
  opacity: 1;
}
.team-card:hover .content {
  background-color: transparent;
}
.team-card:hover .content h3 a {
  color: var(--titleColor);
}
.team-card:hover .content span {
  color: var(--greenColor);
}
.team-card:hover .content .team-social {
  bottom: 120px;
}
.team-card:hover .content .team-social li {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/*================================
Team Area End
===================================*/
/*================================
Recipe Area
===================================*/
.recipe-card {
  margin-bottom: 30px;
  position: relative;
}
.recipe-card .recipe-img {
  position: relative;
}
.recipe-card .recipe-img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: var(--transition);
  background-color: var(--titleColor);
  opacity: 0;
  transform: scale(0);
}
.recipe-card .recipe-img a {
  display: block;
}
.recipe-card .recipe-img .tag {
  position: absolute;
  top: 20px;
  left: 15px;
}
.recipe-card .recipe-img .tag a {
  font-size: 14px;
  padding: 6px 12px;
  background-color: var(--titleColor);
  color: var(--whiteColor);
  display: inline-block;
  font-weight: 500;
  transition: var(--transition);
}
.recipe-card .recipe-img .tag a:hover {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.recipe-card .recipe-img:hover .tag a {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.recipe-card .recipe-img:hover::before {
  opacity: 0.3;
  transform: scale(1);
}
.recipe-card h3 {
  margin-top: 18px;
  margin-bottom: 10px;
}
.recipe-card h3 a {
  display: inline-block;
  color: var(--titleColor);
}
.recipe-card span {
  font-size: 18px;
  color: var(--greenColor);
}
.recipe-card:hover h3 a {
  color: var(--greenColor);
}

.recent-recipe-area {
  background-color: #f0fdf0;
  overflow: hidden;
  position: relative;
}
.recent-recipe-area .owl-dots {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.recent-recipe-area .owl-dots .owl-dot span {
  background-color: #d1eabf !important;
  transition: 0.7s;
  margin: 0 7px;
  width: 35px !important;
  height: 5px !important;
  position: relative;
  z-index: 1;
  border-radius: 0;
}
.recent-recipe-area .owl-dots .owl-dot.active span {
  background-color: var(--greenColor) !important;
}
.recent-recipe-area .owl-dots .owl-dot:hover span {
  background-color: var(--greenColor) !important;
}

.recipe-slider.owl-theme {
  left: calc((100% - 1300px) / 2);
  position: relative;
}

.recent-recipe-item {
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  transition: var(--transition);
}
.recent-recipe-item a {
  display: block;
}
.recent-recipe-item .content {
  padding: 25px 20px;
}
.recent-recipe-item .content h3 {
  margin-bottom: 15px;
}
.recent-recipe-item .content h3 a {
  color: var(--titleColor);
  transition: var(--transition);
}
.recent-recipe-item .content .rating {
  color: #ffc107;
  line-height: 1;
  margin-bottom: 10px;
}
.recent-recipe-item .content p {
  margin-bottom: 15px;
}
.recent-recipe-item .content ul {
  padding: 0;
  margin-bottom: 0;
  line-height: normal;
}
.recent-recipe-item .content ul li {
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
}
.recent-recipe-item .content ul li img {
  vertical-align: middle;
  border-radius: 50px;
  width: unset !important;
  display: inline-block;
}
.recent-recipe-item .content ul li:last-child {
  margin-right: 0;
}
.recent-recipe-item .content ul li a {
  color: var(--bodyColor);
  transition: var(--transition);
}
.recent-recipe-item .content ul li a:hover {
  color: var(--greenColor);
}
.recent-recipe-item:hover {
  transform: translateY(-10px);
}
.recent-recipe-item:hover .content h3 a {
  color: var(--greenColor);
}

.recipe-details-content h1, .recipe-details-content h2, .recipe-details-content h3, .recipe-details-content h4, .recipe-details-content h5, .recipe-details-content h6 {
  margin-bottom: 15px;
}
.recipe-details-content h1 {
  font-size: 32px;
}
.recipe-details-content h2 {
  font-size: 29px;
}
.recipe-details-content h3 {
  font-size: 26px;
}
.recipe-details-content h4 {
  font-size: 23px;
}
.recipe-details-content h5 {
  font-size: 20px;
}
.recipe-details-content h6 {
  font-size: 17px;
}
.recipe-details-content a {
  color: var(--greenColor);
}
.recipe-details-content a:hover {
  color: var(--titleColor);
  border-bottom: 1px solid var(--greenColor);
}
.recipe-details-content ul, .recipe-details-content ol {
  margin-bottom: 30px;
}
.recipe-details-content ul li, .recipe-details-content ol li {
  margin-bottom: 10px;
}
.recipe-details-content ul li:last-child, .recipe-details-content ol li:last-child {
  margin-bottom: 0;
}
.recipe-details-content p {
  margin-bottom: 15px;
}
.recipe-details-content .recipe-preview-img {
  margin-bottom: 30px;
}
.recipe-details-content .tag-list {
  list-style-type: none;
  margin: 0 0 15px;
  padding: 0;
}
.recipe-details-content .tag-list li {
  display: inline-block;
  font-size: 15px;
  color: var(--bodyColor);
  margin-right: 15px;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}
.recipe-details-content .tag-list li:last-child {
  margin-right: 0;
}
.recipe-details-content .tag-list li i {
  color: var(--greenColor);
  font-size: 18px;
  margin-right: 5px;
  position: relative;
  top: 2px;
  transition: var(--transition);
}
.recipe-details-content .tag-list li a {
  color: var(--bodyColor);
  transition: var(--transition);
}
.recipe-details-content .tag-list li a i {
  color: var(--greenColor);
  transition: var(--transition);
}
.recipe-details-content .tag-list li a:hover {
  color: var(--greenColor);
  border: none;
}
.recipe-details-content .tag-list li a:hover i {
  color: var(--titleColor);
}
.recipe-details-content .tag-list li:hover {
  color: var(--greenColor);
}
.recipe-details-content .tag-list li:hover i {
  color: var(--titleColor);
}
.recipe-details-content .rating {
  color: #ffc107;
  line-height: 1;
  margin-bottom: 10px;
}
.recipe-details-content .recipe-tag-list {
  list-style-type: none;
  margin: 0 0 30px;
  padding: 0;
}
.recipe-details-content .recipe-tag-list li {
  display: inline-block;
  font-size: 15px;
  color: var(--bodyColor);
  margin-right: 15px;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  padding: 6px 0 5px 50px;
  transition: var(--transition);
}
.recipe-details-content .recipe-tag-list li:last-child {
  margin-right: 0;
}
.recipe-details-content .recipe-tag-list li i {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50px;
  font-size: 20px;
  text-align: center;
  background-color: var(--greenColor);
  color: var(--whiteColor);
  vertical-align: middle;
  transition: var(--transition);
}
.recipe-details-content .recipe-tag-list li:hover {
  color: var(--greenColor);
}
.recipe-details-content .recipe-tag-list li:hover i {
  background-color: var(--titleColor);
}
.recipe-details-content .recipe-details-video {
  margin-top: 15px;
}
.recipe-details-content .recipe-details-video h3 {
  margin-bottom: 25px;
}
.recipe-details-content .recipe-details-video .video-btn {
  padding: 160px 0;
}
.recipe-details-content .recipe-details-share {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 15px 0;
  border-top: 1px solid #f2f1f1;
  border-bottom: 1px solid #f2f1f1;
}
.recipe-details-content .recipe-details-share .article-tag ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.recipe-details-content .recipe-details-share .article-tag ul li {
  color: var(--titleColor);
  margin-right: 5px;
  display: inline-block;
  margin-bottom: 0;
}
.recipe-details-content .recipe-details-share .article-tag ul li.title {
  font-weight: 500;
}
.recipe-details-content .recipe-details-share .article-tag ul li a {
  border: none;
  color: var(--bodyColor);
}
.recipe-details-content .recipe-details-share .article-tag ul li a:hover {
  color: var(--greenColor);
}
.recipe-details-content .recipe-details-share .article-social-icon {
  float: right;
}
.recipe-details-content .recipe-details-share .article-social-icon .social-icon {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.recipe-details-content .recipe-details-share .article-social-icon .social-icon li {
  font-size: 18px;
  color: var(--titleColor);
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0;
}
.recipe-details-content .recipe-details-share .article-social-icon .social-icon li.title {
  font-weight: 500;
}
.recipe-details-content .recipe-details-share .article-social-icon .social-icon li:last-child {
  margin-right: 0;
}
.recipe-details-content .recipe-details-share .article-social-icon .social-icon li a i {
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-color: #faf9f8;
  border-radius: 0;
  text-align: center;
  color: var(--greenColor);
  font-size: 20px;
  transition: var(--transition);
}
.recipe-details-content .recipe-details-share .article-social-icon .social-icon li a:hover {
  border: none;
}
.recipe-details-content .recipe-details-share .article-social-icon .social-icon li a:hover i {
  background-color: var(--greenColor);
  color: var(--whiteColor);
  border-radius: 50px;
}
.recipe-details-content .comments-wrap .comment-title {
  margin-bottom: 20px;
}
.recipe-details-content .comments-wrap .comment-form {
  list-style: none;
  margin: 0;
  padding: 0;
}
.recipe-details-content .comments-wrap .comment-form li {
  position: relative;
  padding-left: 80px;
  margin-bottom: 30px;
}
.recipe-details-content .comments-wrap .comment-form li.pl-80 {
  padding-left: 125px;
}
.recipe-details-content .comments-wrap .comment-form li.pl-80 img {
  left: 40px;
}
.recipe-details-content .comments-wrap .comment-form li img {
  position: absolute;
  top: 3px;
  left: 0;
  border-radius: 3px;
}
.recipe-details-content .comments-wrap .comment-form li h3 {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 500;
}
.recipe-details-content .comments-wrap .comment-form li span {
  color: var(--greenColor);
  font-size: 15px;
}
.recipe-details-content .comments-wrap .comment-form li p {
  margin-top: 10px;
  margin-bottom: 15px;
}
.recipe-details-content .comments-wrap .comment-form li a {
  padding: 5px 18px;
  background-color: #f3f4f5;
  color: var(--titleColor);
  border-radius: 0;
  font-size: 15px;
  display: inline-block;
}
.recipe-details-content .comments-wrap .comment-form li a:hover {
  background-color: var(--greenColor);
  color: var(--whiteColor);
  border: none;
}
.recipe-details-content .comments-form {
  margin-top: 35px;
  margin-bottom: 30px;
}
.recipe-details-content .comments-form .contact-form {
  max-width: 100%;
  box-shadow: none;
  border: 1px solid #d4d3d3;
}
.recipe-details-content .comments-form .contact-form h4 {
  margin-bottom: 25px;
}
.recipe-details-content .comments-form .contact-form .form-group label {
  margin-bottom: 20px;
  color: var(--titleColor);
}
.recipe-details-content .comments-form .contact-form .form-group .form-control {
  background-color: #f9f9f9;
}
.recipe-details-content .comments-form .default-btn {
  width: unset;
  border: none;
  box-shadow: none;
}

.recipe-side-bar-categories {
  margin-bottom: 35px;
}
.recipe-side-bar-categories h3 {
  font-size: 20px;
  margin-bottom: 20px;
}
.recipe-side-bar-categories ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.recipe-side-bar-categories ul li {
  position: relative;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
}
.recipe-side-bar-categories ul li a {
  display: inline-block;
  color: var(--titleColor);
  font-weight: normal;
  padding: 15px;
  font-weight: 500;
  background-color: #faf9f8;
  width: 100%;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}
.recipe-side-bar-categories ul li a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--greenColor);
  transition: var(--transition);
  opacity: 0;
}
.recipe-side-bar-categories ul li a span {
  color: var(--greenColor);
  float: right;
}
.recipe-side-bar-categories ul li:hover a {
  color: var(--whiteColor);
}
.recipe-side-bar-categories ul li:hover a span {
  color: var(--whiteColor);
}
.recipe-side-bar-categories ul li:hover a::before {
  opacity: 1;
  width: 100%;
}
.recipe-side-bar-categories ul li:hover a i {
  color: var(--whiteColor);
}

.side-bar-widget-bg {
  background-color: #faf9f8 !important;
  border: none !important;
}

/*================================
Recipe Area End
===================================*/
/*================================
Recipe Video Area End
===================================*/
.recipe-video-card {
  position: relative;
  z-index: 1;
  margin-right: 20px;
}
.recipe-video-card a {
  display: block;
}
.recipe-video-card a img {
  transition: var(--transition);
}
.recipe-video-card .content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100px;
}
.recipe-video-card .content h3 {
  margin-bottom: 7px;
}
.recipe-video-card .content h3 a {
  color: var(--whiteColor);
}
.recipe-video-card .content h3 a:hover {
  color: var(--greenColor);
}
.recipe-video-card .content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.recipe-video-card .content ul li {
  display: inline-block;
  font-size: 14px;
  color: var(--whiteColor);
  margin-right: 10px;
}
.recipe-video-card .content ul li i {
  font-size: 16px;
  margin-right: 5px;
  color: var(--whiteColor);
  position: relative;
  top: 3px;
}

.recipe-video-list {
  position: relative;
  z-index: 1;
  margin-bottom: 45px;
}
.recipe-video-list a {
  display: inline-block;
}
.recipe-video-list a img {
  transition: var(--transition);
  vertical-align: middle;
  max-width: 105px;
  margin-right: 10px;
  border-radius: 5px;
}
.recipe-video-list .content {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.recipe-video-list .content h3 {
  color: var(--titleColor);
  margin-bottom: 7px;
  transition: var(--transition);
}
.recipe-video-list .content h3 a {
  color: var(--titleColor);
}
.recipe-video-list .content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.recipe-video-list .content ul li {
  display: inline-block;
  font-size: 14px;
  color: var(--titleColor);
  margin-right: 10px;
}
.recipe-video-list .content ul li:last-child {
  margin-right: 0;
}
.recipe-video-list .content ul li i {
  font-size: 16px;
  margin-right: 5px;
  color: var(--greenColor);
  position: relative;
  top: 3px;
}
.recipe-video-list:hover h3 a {
  color: var(--greenColor);
}

/*================================
Recipe Video Area End
===================================*/
/*================================
Video Area
===================================*/
.video-btn-ara {
  background-image: url(../images/video-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
  z-index: 1;
}
.video-btn-ara::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/shape/bg-shape.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
}
.video-btn-ara .video-btn {
  padding: 290px 0;
  margin: 0 auto;
  text-align: center;
}
.video-btn-ara .video-btn i {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: var(--greenColor);
  color: var(--whiteColor);
  font-size: 45px;
  border-radius: 50px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  transition: var(--transition);
}
.video-btn-ara .video-btn i::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 1px solid var(--greenColor);
  border-radius: 50px;
  animation: ripple 2s infinite ease-in-out;
  transition: var(--transition);
}
.video-btn-ara .video-btn i:hover {
  background-color: var(--whiteColor);
  color: var(--greenColor);
}
.video-btn-ara .video-btn i:hover::after {
  border-color: var(--whiteColor);
}

/*================================
Video Area End
===================================*/
/*================================
Diet Plan Area
===================================*/
.diet-tab .tabs {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.diet-tab .tabs li {
  margin-right: 25px;
  display: inline-block;
  position: relative;
  color: var(--titleColor);
  font-weight: 500;
  padding: 10px 30px;
  background-color: #effce5;
  border-radius: 0;
  cursor: pointer;
}
.diet-tab .tabs li.active {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.diet-tab .tabs li.current {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.diet-tab .tabs li:last-child {
  margin-right: 0;
}

.tab .tabs_item {
  display: none;
}
.tab .tabs_item:first-child {
  display: block;
}

.diet-plan-card {
  margin-bottom: 30px;
  position: relative;
  text-align: center;
}
.diet-plan-card .diet-plan-img {
  position: relative;
}
.diet-plan-card .diet-plan-img::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  transition: var(--transition);
  background-color: var(--titleColor);
  opacity: 0;
  transform: scale(0);
}
.diet-plan-card .diet-plan-img a {
  display: block;
}
.diet-plan-card .diet-plan-img .tag {
  position: absolute;
  top: 20px;
  left: 15px;
}
.diet-plan-card .diet-plan-img .tag a {
  font-size: 14px;
  padding: 6px 12px;
  background-color: var(--whiteColor);
  color: var(--titleColor);
  display: inline-block;
  font-weight: 500;
  transition: var(--transition);
}
.diet-plan-card .diet-plan-img .tag a:hover {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.diet-plan-card .diet-plan-img:hover .tag a {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.diet-plan-card .diet-plan-img:hover::before {
  opacity: 0.3;
  transform: scale(1);
}
.diet-plan-card h3 {
  margin-top: 15px;
  margin-bottom: 0;
}
.diet-plan-card h3 a {
  display: inline-block;
  color: var(--titleColor);
}
.diet-plan-card:hover h3 a {
  color: var(--greenColor);
}

/*================================
Diet Plan Area End
===================================*/
/*================================
Appointment Area
===================================*/
.appointment-area {
  background-size: cover;
  background-position: center center;
  background-image: url(../images/appointment-bg.jpg);
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.appointment-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.4588235294), rgba(0, 0, 0, 0));
}

.appointment-form {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  max-width: 650px;
  background-color: var(--whiteColor);
  padding: 40px 30px;
  border-radius: 0;
}
.appointment-form h2 {
  font-size: 30px;
  margin-bottom: 25px;
}
.appointment-form .form-group {
  margin-bottom: 20px;
  position: relative;
}
.appointment-form .form-group label {
  color: var(--titleColor);
  margin-bottom: 15px;
}
.appointment-form .form-group .form-control {
  height: 50px;
  color: var(--bodyColor);
  border: none;
  background-color: #e8f0fe;
  font-size: 15px;
  padding: 10px 20px;
  width: 100%;
  border-radius: 0;
}
.appointment-form .form-group .form-control:focus::-webkit-input-placeholder, .appointment-form .form-group .form-control:focus:-ms-input-placeholder, .appointment-form .form-group .form-control:focus::-ms-input-placeholder, .appointment-form .form-group .form-control:focus::placeholder {
  color: transparent;
}
.appointment-form .form-group .form-control:focus {
  outline: none;
  box-shadow: none;
}
.appointment-form .form-group textarea.form-control {
  height: auto;
}

/*================================
Appointment Area End
===================================*/
/*================================
Services Area
===================================*/
.services-area {
  background-color: #f4fbf4;
}

.services-card {
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  border-radius: 5px;
  transition: var(--transition);
}
.services-card a {
  display: block;
}
.services-card a img {
  border-radius: 5px;
}
.services-card .content {
  padding: 20px 20px 25px;
}
.services-card .content h3 {
  margin-bottom: 10px;
}
.services-card .content h3 a {
  color: var(--titleColor);
}
.services-card .content p {
  margin-bottom: 15px;
}
.services-card .content .learn-btn {
  padding: 8px 16px;
  font-size: 15px;
  background-color: var(--greenColor);
  color: var(--whiteColor);
  display: inline-block;
  transition: var(--transition);
}
.services-card .content .learn-btn:hover {
  background-color: var(--titleColor);
}
.services-card:hover {
  transform: translateX(-10px);
}
.services-card:hover h3 a {
  color: var(--greenColor);
}

.service-details-content h1, .service-details-content h2, .service-details-content h3, .service-details-content h4, .service-details-content h5, .service-details-content h6 {
  margin-bottom: 15px;
}
.service-details-content h1 {
  font-size: 32px;
}
.service-details-content h2 {
  font-size: 29px;
}
.service-details-content h3 {
  font-size: 26px;
}
.service-details-content h4 {
  font-size: 23px;
}
.service-details-content h5 {
  font-size: 20px;
}
.service-details-content h6 {
  font-size: 17px;
}
.service-details-content a {
  color: var(--greenColor);
}
.service-details-content a:hover {
  color: var(--titleColor);
  border-bottom: 1px solid var(--greenColor);
}
.service-details-content ul, .service-details-content ol {
  margin-bottom: 30px;
}
.service-details-content ul li, .service-details-content ol li {
  margin-bottom: 10px;
}
.service-details-content ul li:last-child, .service-details-content ol li:last-child {
  margin-bottom: 0;
}
.service-details-content p {
  margin-bottom: 15px;
}
.service-details-content .service-preview-item {
  margin-bottom: 30px;
}

.service-preview-slider {
  position: relative;
}
.service-preview-slider .owl-nav {
  margin-top: 0;
}
.service-preview-slider .owl-nav .owl-prev {
  position: absolute;
  top: 45%;
  transform: translateY(-45%);
  left: -6px;
  font-size: 24px !important;
  transition: 0.7s;
  text-align: center;
  width: 45px;
  height: 45px;
  line-height: 45px !important;
  border-radius: 0 !important;
  background-color: var(--greenColor) !important;
  color: var(--whiteColor) !important;
  transition: var(--transition);
}
.service-preview-slider .owl-nav .owl-prev i {
  position: relative;
  top: 2px;
}
.service-preview-slider .owl-nav .owl-prev:hover {
  color: var(--whiteColor) !important;
  background-color: var(--titleColor) !important;
}
.service-preview-slider .owl-nav .owl-next {
  position: absolute;
  top: 45%;
  transform: translateY(-45%);
  right: -6px;
  font-size: 24px !important;
  transition: 0.7s;
  text-align: center;
  width: 45px;
  height: 45px;
  line-height: 45px !important;
  border-radius: 0 !important;
  background-color: var(--greenColor) !important;
  color: var(--whiteColor) !important;
  transition: var(--transition);
}
.service-preview-slider .owl-nav .owl-next i {
  position: relative;
  top: 3px;
}
.service-preview-slider .owl-nav .owl-next:hover {
  color: var(--whiteColor) !important;
  background-color: var(--titleColor) !important;
}

.service-article-img {
  margin-bottom: 30px;
  margin-top: 15px;
}

.services-content-list {
  margin-bottom: 30px;
}
.services-content-list p {
  margin-bottom: 15px;
}
.services-content-list ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.services-content-list ul li {
  display: block;
  font-size: 16px;
  color: var(--titleColor);
  margin-bottom: 10px;
  font-weight: 500;
  transition: var(--transition);
}
.services-content-list ul li i {
  color: var(--greenColor);
  font-size: 18px;
  margin-right: 5px;
  position: relative;
  top: 3px;
  transition: var(--transition);
}
.services-content-list ul li:hover {
  color: var(--greenColor);
  letter-spacing: 0.25px;
  margin-left: 2px;
}
.services-content-list ul li:hover i {
  color: var(--titleColor);
}

.service-article-img-area {
  margin-top: 15px;
}
.service-article-img-area .service-article-img {
  margin-bottom: 30px;
}

.service-card-bg {
  background-color: #f4fbf4;
}

/*================================
Services Area End
===================================*/
/*================================
Work Area
===================================*/
.work-card {
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  transition: var(--transition);
}
.work-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition: var(--transition);
  opacity: 0;
  border-radius: 5px;
}
.work-card.work-bg1::before {
  background-image: url(../images/work-img/work-img1.jpg);
}
.work-card.work-bg2::before {
  background-image: url(../images/work-img/work-img2.jpg);
}
.work-card.work-bg3::before {
  background-image: url(../images/work-img/work-img3.jpg);
}
.work-card.work-bg4::before {
  background-image: url(../images/work-img/work-img4.jpg);
}
.work-card .content {
  background-color: #83bf54;
  padding: 35px;
  border-radius: 5px;
  transition: var(--transition);
}
.work-card .content i {
  font-size: 45px;
  color: var(--whiteColor);
  margin-bottom: 10px;
}
.work-card .content h3 {
  color: var(--whiteColor);
  margin-bottom: 10px;
}
.work-card .content p {
  color: var(--whiteColor);
}
.work-card:hover {
  padding: 10px;
}
.work-card:hover .content {
  padding: 25px;
  background-color: rgba(130, 191, 84, 0.9098039216);
}
.work-card:hover::before {
  height: 100%;
  opacity: 1;
}

/*================================
Work Area End
===================================*/
/*================================
Choose Area
===================================*/
.choose-area {
  background-size: cover;
  background-position: center center;
  background-image: url(../images/choose-bg.jpg);
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.choose-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #f4fbf4;
  opacity: 0.7;
}
.choose-area::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-image: url(../images/shape/shape-bg.png);
  background-repeat: no-repeat;
  opacity: 0.7;
}

.choose-content .section-title {
  margin-bottom: 30px;
}
.choose-content .content {
  padding-left: 55px;
  position: relative;
  margin-bottom: 30px;
}
.choose-content .content .number {
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 500;
  color: var(--whiteColor);
  background-color: var(--greenColor);
  text-align: center;
  transition: var(--transition);
}
.choose-content .content h3 {
  margin-bottom: 10px;
  transition: var(--transition);
}
.choose-content .content p {
  margin-bottom: 0;
  max-width: 530px;
}
.choose-content .content:hover .number {
  background-color: var(--titleColor);
  animation: bounce 1s;
}
.choose-content .content:hover h3 {
  color: var(--greenColor);
}

.choose-slider-area {
  padding-bottom: 90px;
}

.choose-slider {
  position: relative;
}
.choose-slider .owl-nav {
  margin-top: 0;
}
.choose-slider .owl-nav .owl-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
  font-size: 24px !important;
  transition: 0.7s;
  text-align: center;
  width: 45px;
  height: 45px;
  line-height: 45px !important;
  border-radius: 0 !important;
  background-color: #def9c9 !important;
  color: var(--titleColor) !important;
  transition: var(--transition);
}
.choose-slider .owl-nav .owl-prev i {
  position: relative;
  top: 2px;
}
.choose-slider .owl-nav .owl-prev:hover {
  color: var(--whiteColor) !important;
  background-color: var(--greenColor) !important;
}
.choose-slider .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -10px;
  font-size: 24px !important;
  transition: 0.7s;
  text-align: center;
  width: 45px;
  height: 45px;
  line-height: 45px !important;
  border-radius: 0 !important;
  background-color: #def9c9 !important;
  color: var(--titleColor) !important;
  transition: var(--transition);
}
.choose-slider .owl-nav .owl-next i {
  position: relative;
  top: 3px;
}
.choose-slider .owl-nav .owl-next:hover {
  color: var(--whiteColor) !important;
  background-color: var(--greenColor) !important;
}

.choose-item {
  text-align: center;
}
.choose-item a {
  display: block;
}
.choose-item a img {
  width: 250px !important;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
}
.choose-item h3 a {
  color: var(--titleColor);
  transition: var(--transition);
}
.choose-item:hover h3 a {
  color: var(--greenColor);
}

/*================================
Choose Area End
===================================*/
/*================================
Event Area 
===================================*/
.event-content .section-title {
  margin-bottom: 30px;
}
.event-content .content {
  margin-bottom: 30px;
  padding-left: 160px;
  position: relative;
}
.event-content .content .event-date {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
}
.event-content .content .event-date h2 {
  font-size: 28px;
  color: var(--titleColor);
  margin-bottom: 0;
  text-align: center;
  line-height: 1.2;
  padding: 25px;
}
.event-content .content .event-date img {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
}
.event-content .content h3 {
  margin-bottom: 10px;
  font-size: 22px;
}
.event-content .content h3 a {
  color: var(--titleColor);
  transition: var(--transition);
}
.event-content .content h3 a:hover {
  color: var(--greenColor);
}
.event-content .content p {
  margin-bottom: 10px;
}
.event-content .content a {
  color: var(--bodyColor);
  transition: var(--transition);
}
.event-content .content a i {
  position: relative;
  top: 3px;
  font-size: 20px;
  color: var(--greenColor);
  transition: var(--transition);
}
.event-content .content a:hover {
  color: var(--greenColor);
}
.event-content .content a:hover i {
  color: var(--titleColor);
}

.event-img {
  position: relative;
  margin-right: 40px;
  margin-bottom: 30px;
}
.event-img .sub-img {
  position: absolute;
  bottom: -70px;
  right: -45px;
  animation: movebounce-up 15s infinite linear;
}

/*================================
Event Area End
===================================*/
/*================================
Testimonials Area
===================================*/
.testimonials-area {
  background-size: cover;
  background-position: center center;
  background-image: url(../images/testimonials/testimonials-bg.png);
  background-repeat: no-repeat;
}
.testimonials-area .owl-dots {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.testimonials-area .owl-dots .owl-dot span {
  background-color: var(--whiteColor) !important;
  transition: 0.7s;
  margin: 0 7px;
  width: 35px !important;
  height: 5px !important;
  position: relative;
  z-index: 1;
  border-radius: 0;
}
.testimonials-area .owl-dots .owl-dot.active span {
  background-color: var(--greenColor) !important;
}
.testimonials-area .owl-dots .owl-dot:hover span {
  background-color: var(--greenColor) !important;
}

.testimonials-item {
  margin-bottom: 30px;
  text-align: center;
}
.testimonials-item .section-title {
  margin-bottom: 25px;
}
.testimonials-item i {
  font-size: 40px;
  color: var(--titleColor);
  line-height: 1;
  margin-bottom: 20px;
}
.testimonials-item p {
  font-size: 22px;
  margin-bottom: 20px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.testimonials-item .content h3 {
  font-size: 18px;
  margin-bottom: 5px;
}
.testimonials-item .content span {
  color: var(--greenColor);
  font-size: 15px;
  font-family: var(--headerFonts);
}

.testimonial-card {
  background-color: var(--whiteColor);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
  padding: 30px 20px;
  margin-bottom: 30px;
}
.testimonial-card .content {
  padding-left: 80px;
  position: relative;
  margin-bottom: 20px;
}
.testimonial-card .content img {
  position: absolute;
  top: -3px;
  left: 0;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50%;
}
.testimonial-card .content h3 {
  margin-bottom: 0;
  font-size: 18px;
}
.testimonial-card .content span {
  color: var(--orangeColor);
  font-size: 15px;
}
.testimonial-card p {
  margin-top: 10px;
  margin-bottom: 0;
}
.testimonial-card .rating {
  font-size: 15px;
  color: #ffc107;
}
.testimonial-card .rating i {
  display: inline-block;
}

/*================================
Testimonials Area End
===================================*/
/*================================
Pricing Area
===================================*/
.pricing-area {
  position: relative;
}

.pricing-card {
  padding: 35px;
  background-color: var(--whiteColor);
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.09);
  transition: var(--transition);
}
.pricing-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 190px;
  transition: var(--transition);
  background-color: var(--greenColor);
  border-bottom-left-radius: 400px;
  border-bottom-right-radius: 400px;
}
.pricing-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  transition: var(--transition);
  background-color: var(--whiteColor);
  border-bottom-left-radius: 400px;
  border-bottom-right-radius: 400px;
}
.pricing-card .pricing-title {
  margin-bottom: 30px;
  padding-bottom: 30px;
}
.pricing-card .pricing-title h3 {
  font-size: 30px;
  color: var(--greenColor);
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-color: var(--whiteColor);
  border-radius: 50px;
  margin-bottom: 0;
  text-align: center;
  margin: 0 auto;
  transition: var(--transition);
}
.pricing-card .pricing-title span {
  color: var(--whiteColor);
  font-size: 20px;
  display: block;
  margin-top: 10px;
  transition: var(--transition);
  font-weight: 600;
  font-family: var(--headerFonts);
}
.pricing-card ul {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
.pricing-card ul li {
  display: block;
  margin-bottom: 10px;
  transition: var(--transition);
  color: #4e4e4e;
  font-weight: 500;
}
.pricing-card ul li i {
  font-size: 18px;
  color: var(--greenColor);
  transition: var(--transition);
  margin-right: 5px;
}
.pricing-card ul li:last-child {
  margin-bottom: 0;
}
.pricing-card ul li:hover {
  color: var(--greenColor);
  letter-spacing: 0.25px;
  margin-left: 3px;
}
.pricing-card ul li:hover i {
  color: var(--titleColor);
}
.pricing-card .price-btn-area {
  margin-top: 25px;
}
.pricing-card:hover {
  background-color: #f4fbf4;
}
.pricing-card:hover::before {
  height: 0;
  opacity: 0;
}
.pricing-card:hover::after {
  height: 190px;
  opacity: 1;
}
.pricing-card:hover .pricing-title h3 {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.pricing-card:hover .pricing-title span {
  color: var(--titleColor);
}

.pricing-shape {
  position: absolute;
  bottom: 170px;
  left: 0;
  animation: movebounce-up 15s infinite linear;
}

/*================================
Pricing Area End
===================================*/
/*================================
Calculate Area
===================================*/
.calculate-area {
  background-size: cover;
  background-position: center center;
  background-image: url(../images/calculate-bg.png);
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}
.calculate-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #f5f9f7;
  opacity: 0.5;
}

.calculate-form {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  padding: 40px 30px;
  border-radius: 0;
}
.calculate-form h2 {
  font-size: 30px;
  margin-bottom: 25px;
}
.calculate-form .form-group {
  margin-bottom: 20px;
  position: relative;
}
.calculate-form .form-group label {
  color: var(--titleColor);
  margin-bottom: 15px;
}
.calculate-form .form-group .form-control {
  height: 50px;
  color: var(--bodyColor);
  border: none;
  background-color: var(--whiteColor);
  font-size: 15px;
  padding: 10px 20px;
  width: 100%;
  border-radius: 0;
  border: 1px dashed #e2e2e2;
}
.calculate-form .form-group .form-control:focus::-webkit-input-placeholder, .calculate-form .form-group .form-control:focus:-ms-input-placeholder, .calculate-form .form-group .form-control:focus::-ms-input-placeholder, .calculate-form .form-group .form-control:focus::placeholder {
  color: transparent;
}
.calculate-form .form-group .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--greenColor);
}
.calculate-form .default-btn {
  width: 100%;
  text-align: center;
}

.calculate-chart {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  padding: 40px 30px;
  border-radius: 0;
}
.calculate-chart h2 {
  font-size: 30px;
  margin-bottom: 25px;
}
.calculate-chart ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  border: 1px solid #bfbfbe;
}
.calculate-chart ul li {
  border-bottom: 1px solid #bfbfbe;
  padding: 12px 25px;
  position: relative;
}
.calculate-chart ul li:first-child {
  font-weight: 600;
  color: var(--titleColor);
}
.calculate-chart ul li:last-child {
  border-bottom: none;
}
.calculate-chart ul li span {
  position: absolute;
  top: 10px;
  right: 20px;
}
.calculate-chart p {
  margin-top: 15px;
  color: var(--titleColor);
  font-weight: 600;
}

/*================================
Calculate Area End
===================================*/
/*================================
Blog Area
===================================*/
.blog-area {
  background-color: #f5fef5;
}

.blog-card {
  margin-bottom: 30px;
  transition: var(--transition);
}
.blog-card .blog-img {
  position: relative;
  margin-bottom: 35px;
}
.blog-card .blog-img a {
  display: block;
}
.blog-card .blog-img a img {
  border-radius: 5px;
}
.blog-card .blog-img .tag {
  position: absolute;
  bottom: -20px;
  left: 20px;
}
.blog-card .blog-img .tag a {
  display: inline-block;
  padding: 5px 8px;
  background-color: var(--greenColor);
  color: var(--whiteColor);
  font-size: 14px;
  border-radius: 5px;
  transition: var(--transition);
}
.blog-card .content {
  padding-left: 20px;
}
.blog-card .content span {
  display: block;
  color: var(--greenColor);
  margin-bottom: 10px;
}
.blog-card .content span i {
  margin-right: 5px;
  position: relative;
  top: 2px;
}
.blog-card .content h3 {
  margin-bottom: 10px;
}
.blog-card .content h3 a {
  color: var(--titleColor);
  transition: var(--transition);
}
.blog-card .content p {
  margin-bottom: 10px;
}
.blog-card .content .read-btn {
  font-weight: 600;
  color: var(--greenColor);
}
.blog-card .content .read-btn:hover {
  letter-spacing: 0.25px;
  color: var(--titleColor);
}
.blog-card:hover {
  transform: translateY(-10px);
}
.blog-card:hover .content h3 a {
  color: var(--greenColor);
}

.blog-side-content {
  margin-bottom: 42px;
  padding: 17px 25px 17px 220px;
  position: relative;
}
.blog-side-content .blog-side-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 160px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 5px;
}
.blog-side-content .blog-side-img.blog-side1 {
  background-image: url(../images/blog/blog-sub-img1.jpg);
}
.blog-side-content .blog-side-img.blog-side2 {
  background-image: url(../images/blog/blog-sub-img2.jpg);
}
.blog-side-content .blog-side-img.blog-side3 {
  background-image: url(../images/blog/blog-sub-img3.jpg);
}
.blog-side-content .content {
  vertical-align: middle;
}
.blog-side-content .content span {
  display: block;
  color: var(--greenColor);
  margin-bottom: 10px;
}
.blog-side-content .content span i {
  margin-right: 5px;
  position: relative;
  top: 2px;
}
.blog-side-content .content h3 {
  margin-bottom: 10px;
}
.blog-side-content .content h3 a {
  color: var(--titleColor);
  transition: var(--transition);
}
.blog-side-content .content p {
  margin-bottom: 0;
}
.blog-side-content:hover .content h3 a {
  color: var(--greenColor);
}

.blog-item {
  margin-bottom: 30px;
  transition: var(--transition);
}
.blog-item a {
  display: block;
}
.blog-item a img {
  border-radius: 5px;
}
.blog-item .blog-img {
  position: relative;
}
.blog-item .blog-img a {
  display: block;
}
.blog-item .blog-img a img {
  border-radius: 5px;
}
.blog-item .blog-img .tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.blog-item .blog-img .tag a {
  display: inline-block;
  padding: 5px 8px;
  background-color: var(--greenColor);
  color: var(--whiteColor);
  font-size: 14px;
  border-radius: 0;
  transition: var(--transition);
}
.blog-item .content {
  padding-top: 20px;
}
.blog-item .content span {
  display: block;
  color: var(--greenColor);
  margin-bottom: 10px;
}
.blog-item .content span i {
  margin-right: 5px;
  position: relative;
  top: 2px;
}
.blog-item .content h3 {
  margin-bottom: 10px;
  max-width: 350px;
}
.blog-item .content h3 a {
  color: var(--titleColor);
  transition: var(--transition);
}
.blog-item .content p {
  margin-bottom: 10px;
}
.blog-item .content .read-btn {
  font-weight: 600;
  color: var(--greenColor);
}
.blog-item .content .read-btn:hover {
  letter-spacing: 0.25px;
  color: var(--titleColor);
}
.blog-item:hover {
  transform: translateY(-10px);
}
.blog-item:hover .content h3 a {
  color: var(--greenColor);
}

.blog-bg {
  background-color: #f4fdf4;
}

.blog-details-content h1, .blog-details-content h2, .blog-details-content h3, .blog-details-content h4, .blog-details-content h5, .blog-details-content h6 {
  margin-bottom: 15px;
}
.blog-details-content h1 {
  font-size: 32px;
}
.blog-details-content h2 {
  font-size: 29px;
}
.blog-details-content h3 {
  font-size: 26px;
}
.blog-details-content h4 {
  font-size: 23px;
}
.blog-details-content h5 {
  font-size: 20px;
}
.blog-details-content h6 {
  font-size: 17px;
}
.blog-details-content a {
  color: var(--greenColor);
}
.blog-details-content a:hover {
  color: var(--titleColor);
  border-bottom: 1px solid var(--greenColor);
}
.blog-details-content ul, .blog-details-content ol {
  margin-bottom: 30px;
}
.blog-details-content ul li, .blog-details-content ol li {
  margin-bottom: 10px;
}
.blog-details-content ul li:last-child, .blog-details-content ol li:last-child {
  margin-bottom: 0;
}
.blog-details-content p {
  margin-bottom: 15px;
}
.blog-details-content .blog-preview-img {
  margin-bottom: 30px;
}
.blog-details-content .tag-list {
  list-style-type: none;
  margin: 0 0 25px;
  padding: 0 0 5px;
  border-bottom: 1px solid #f1f0f0;
}
.blog-details-content .tag-list li {
  display: inline-block;
  font-size: 15px;
  color: var(--bodyColor);
  margin-right: 15px;
  position: relative;
  z-index: 1;
}
.blog-details-content .tag-list li::before {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 0;
  height: 1px;
  width: 0%;
  background-color: var(--greenColor);
  opacity: 0;
  transition: var(--transition);
}
.blog-details-content .tag-list li:last-child {
  margin-right: 0;
}
.blog-details-content .tag-list li i {
  color: var(--greenColor);
  font-size: 18px;
  margin-right: 5px;
  position: relative;
  top: 2px;
  transition: var(--transition);
}
.blog-details-content .tag-list li a {
  color: var(--bodyColor);
  transition: var(--transition);
}
.blog-details-content .tag-list li a i {
  color: var(--greenColor);
  transition: var(--transition);
}
.blog-details-content .tag-list li a:hover {
  color: var(--greenColor);
  border: none;
}
.blog-details-content .tag-list li a:hover i {
  color: var(--titleColor);
}
.blog-details-content .tag-list li:hover {
  color: var(--greenColor);
}
.blog-details-content .tag-list li:hover i {
  color: var(--titleColor);
}
.blog-details-content .tag-list li:hover::before {
  width: 100%;
  opacity: 1;
}
.blog-details-content .tag-list li.active::before {
  width: 100%;
  opacity: 1;
}
.blog-details-content .blockquote {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  margin-top: 30px;
  background-color: #f8f8f8;
  padding: 30px 30px 35px;
}
.blog-details-content .blockquote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background-color: var(--greenColor);
}
.blog-details-content .blockquote p {
  font-size: 18px;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  font-family: var(--headerFonts);
}
.blog-details-content .blockquote i {
  position: absolute;
  bottom: 20px;
  right: 30px;
  font-size: 35px;
  color: var(--greenColor);
}
.blog-details-content .blog-article-content {
  margin-bottom: 30px;
}
.blog-details-content .blog-article-content ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.blog-details-content .blog-article-content ul li {
  display: block;
  font-size: 16px;
  padding-left: 23px;
  position: relative;
  z-index: 1;
  margin-bottom: 10px;
  transition: var(--transition);
  font-weight: 500;
}
.blog-details-content .blog-article-content ul li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: var(--greenColor);
  border-radius: 50px;
  transition: var(--transition);
}
.blog-details-content .blog-article-content ul li:hover {
  color: var(--greenColor);
}
.blog-details-content .blog-article-content ul li:hover::before {
  background-color: var(--titleColor);
  border-radius: 0;
}
.blog-details-content .article-share {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 15px 0;
  border-top: 1px solid #f2f1f1;
  border-bottom: 1px solid #f2f1f1;
}
.blog-details-content .article-share .article-tag ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.blog-details-content .article-share .article-tag ul li {
  color: var(--titleColor);
  margin-right: 5px;
  display: inline-block;
  margin-bottom: 0;
}
.blog-details-content .article-share .article-tag ul li.title {
  font-weight: 500;
}
.blog-details-content .article-share .article-tag ul li a {
  border: none;
  color: var(--bodyColor);
}
.blog-details-content .article-share .article-tag ul li a:hover {
  color: var(--greenColor);
}
.blog-details-content .article-share .article-social-icon {
  float: right;
}
.blog-details-content .article-share .article-social-icon .social-icon {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.blog-details-content .article-share .article-social-icon .social-icon li {
  font-size: 18px;
  color: var(--titleColor);
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 0;
}
.blog-details-content .article-share .article-social-icon .social-icon li.title {
  font-weight: 500;
}
.blog-details-content .article-share .article-social-icon .social-icon li:last-child {
  margin-right: 0;
}
.blog-details-content .article-share .article-social-icon .social-icon li a i {
  width: 35px;
  height: 35px;
  line-height: 35px;
  background-color: #faf9f8;
  border-radius: 0;
  text-align: center;
  color: var(--greenColor);
  font-size: 20px;
  transition: var(--transition);
}
.blog-details-content .article-share .article-social-icon .social-icon li a:hover {
  border: none;
}
.blog-details-content .article-share .article-social-icon .social-icon li a:hover i {
  background-color: var(--greenColor);
  color: var(--whiteColor);
  border-radius: 50px;
}
.blog-details-content .comments-wrap .comment-title {
  margin-bottom: 20px;
}
.blog-details-content .comments-wrap .comment-form {
  list-style: none;
  margin: 0;
  padding: 0;
}
.blog-details-content .comments-wrap .comment-form li {
  position: relative;
  padding-left: 80px;
  margin-bottom: 30px;
}
.blog-details-content .comments-wrap .comment-form li.pl-80 {
  padding-left: 125px;
}
.blog-details-content .comments-wrap .comment-form li.pl-80 img {
  left: 40px;
}
.blog-details-content .comments-wrap .comment-form li img {
  position: absolute;
  top: 3px;
  left: 0;
  border-radius: 3px;
}
.blog-details-content .comments-wrap .comment-form li h3 {
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: 500;
}
.blog-details-content .comments-wrap .comment-form li span {
  color: var(--greenColor);
  font-size: 15px;
}
.blog-details-content .comments-wrap .comment-form li p {
  margin-top: 10px;
  margin-bottom: 15px;
}
.blog-details-content .comments-wrap .comment-form li a {
  padding: 5px 18px;
  background-color: #f3f4f5;
  color: var(--titleColor);
  border-radius: 0;
  font-size: 15px;
  display: inline-block;
}
.blog-details-content .comments-wrap .comment-form li a:hover {
  background-color: var(--greenColor);
  color: var(--whiteColor);
  border: none;
}
.blog-details-content .comments-form {
  margin-top: 35px;
  margin-bottom: 30px;
}
.blog-details-content .comments-form .contact-form {
  max-width: 100%;
  box-shadow: none;
  border: 1px solid #d4d3d3;
}
.blog-details-content .comments-form .contact-form .form-group label {
  margin-bottom: 20px;
  color: var(--titleColor);
}
.blog-details-content .comments-form .contact-form .form-group .form-control {
  background-color: #f9f9f9;
}
.blog-details-content .comments-form .contact-form .agree-label label {
  font-weight: 400;
}
.blog-details-content .comments-form .default-btn {
  width: unset;
  border: none;
  box-shadow: none;
}

.search-widget {
  display: inline-block;
  width: 100%;
  margin-bottom: 30px;
  background-color: #f8f8f8;
  padding: 15px;
}
.search-widget .search-form {
  position: relative;
  margin: 0 auto;
  border-radius: 0;
  border: none;
  width: 100%;
  background-color: var(--whiteColor);
}
.search-widget .search-form .form-control {
  background-color: var(--whiteColor);
  border-radius: 0;
  border: none;
  height: 50px;
  line-height: 50px;
  margin: 0;
  border: 0;
  padding: 0 25px;
  color: var(--titleColor);
}
.search-widget .search-form .form-control:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.search-widget .search-form button {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--greenColor);
  color: var(--whiteColor);
  height: 50px;
  line-height: 53px;
  font-size: 22px;
  padding: 0 15px;
  transition: var(--transition);
}
.search-widget .search-form button:hover {
  background: var(--titleColor);
}

.side-bar-categories {
  margin-bottom: 35px;
}
.side-bar-categories ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.side-bar-categories ul li {
  position: relative;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 500;
}
.side-bar-categories ul li a {
  display: inline-block;
  color: var(--titleColor);
  font-weight: normal;
  padding: 15px;
  font-weight: 500;
  background-color: transparent;
  border: 1px solid #d2d2d2;
  width: 100%;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}
.side-bar-categories ul li a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--greenColor);
  transition: var(--transition);
  opacity: 0;
}
.side-bar-categories ul li a i {
  color: var(--greenColor);
  float: right;
  position: relative;
  top: 3px;
  font-size: 20px;
}
.side-bar-categories ul li:hover a {
  color: var(--whiteColor);
  border-color: var(--greenColor);
}
.side-bar-categories ul li:hover a::before {
  opacity: 1;
  width: 100%;
}
.side-bar-categories ul li:hover a i {
  color: var(--whiteColor);
}

.side-bar-widget {
  margin-bottom: 35px;
  background-color: transparent;
  border: 1px solid #d2d2d2;
  padding: 25px;
}
.side-bar-widget .title {
  font-size: 20px;
  color: var(--titleColor);
  margin-bottom: 25px;
}
.side-bar-widget .title-tag {
  margin-bottom: 20px;
}
.side-bar-widget .widget-popular-post {
  position: relative;
  overflow: hidden;
}
.side-bar-widget .widget-popular-post .item {
  overflow: hidden;
  margin-bottom: 12px;
}
.side-bar-widget .widget-popular-post .item:last-child {
  margin-bottom: 0;
}
.side-bar-widget .widget-popular-post .item .thumb {
  float: left;
  overflow: hidden;
  position: relative;
  margin-right: 15px;
}
.side-bar-widget .widget-popular-post .item .thumb .full-image {
  width: 85px;
  height: 85px;
  display: inline-block;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center center !important;
  position: relative;
  background-color: var(--whiteColor);
}
.side-bar-widget .widget-popular-post .item .thumb .full-image.bg1 {
  background-image: url(../images/blog/blog-img3.jpg);
}
.side-bar-widget .widget-popular-post .item .thumb .full-image.bg2 {
  background-image: url(../images/blog/blog-img4.jpg);
}
.side-bar-widget .widget-popular-post .item .thumb .full-image.bg3 {
  background-image: url(../images/blog/blog-img5.jpg);
}
.side-bar-widget .widget-popular-post .item .thumb .full-image.bg4 {
  background-image: url(../images/blog/blog-img6.jpg);
}
.side-bar-widget .widget-popular-post .item .info {
  overflow: hidden;
  padding: 6px 0;
}
.side-bar-widget .widget-popular-post .item .info .title-text {
  margin-bottom: 10px;
  line-height: 1.2;
  font-size: 17px;
  font-weight: 500;
  max-width: 245px;
}
.side-bar-widget .widget-popular-post .item .info .title-text a {
  display: inline-block;
  color: var(--titleColor);
}
.side-bar-widget .widget-popular-post .item .info .title-text a:hover {
  color: var(--greenColor);
}
.side-bar-widget .widget-popular-post .item .info .read-btn {
  font-size: 14px;
  color: var(--greenColor);
  display: inline-block;
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.side-bar-widget .widget-popular-post .item .info .read-btn::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  width: 100%;
  background-color: var(--titleColor);
  opacity: 0;
  transition: var(--transition);
  transform: scale(0);
}
.side-bar-widget .widget-popular-post .item .info .read-btn:hover {
  color: var(--titleColor);
}
.side-bar-widget .widget-popular-post .item .info .read-btn:hover::before {
  transform: scale(1);
  opacity: 1;
}
.side-bar-widget .side-bar-widget-tag {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-bar-widget .side-bar-widget-tag li {
  display: inline-block;
  margin: 5px;
}
.side-bar-widget .side-bar-widget-tag li a {
  padding: 8px 25px;
  color: var(--bodyColor);
  transition: 0.7s;
  color: var(--bodyColor);
  font-size: 14px;
  font-weight: 600;
  background-color: #faf7f7;
}
.side-bar-widget .side-bar-widget-tag li:hover a {
  color: var(--whiteColor);
  background-color: var(--greenColor);
}
.side-bar-widget .contact-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-bar-widget .contact-sidebar-list li {
  display: block;
  margin-bottom: 15px;
  padding-left: 60px;
  position: relative;
}
.side-bar-widget .contact-sidebar-list li:last-child {
  margin-bottom: 0;
}
.side-bar-widget .contact-sidebar-list li .content i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  background-color: var(--greenColor);
  font-size: 20px;
  color: var(--whiteColor);
  transition: var(--transition);
  border-radius: 50px;
  margin-bottom: 10px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}
.side-bar-widget .contact-sidebar-list li .content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--titleColor);
  display: block;
}
.side-bar-widget .contact-sidebar-list li .content a {
  color: var(--titleColor);
  display: block;
  font-weight: 400;
  font-size: 15px;
  transition: var(--transition);
}
.side-bar-widget .contact-sidebar-list li .content a:hover {
  color: var(--greenColor);
}
.side-bar-widget .contact-sidebar-list li .content span {
  color: var(--bodyColor);
  font-weight: 400;
  display: block;
  font-size: 15px;
  transition: var(--transition);
}
.side-bar-widget .contact-sidebar-list li .content:hover i {
  background-color: var(--titleColor);
}
.side-bar-widget .contact-sidebar-list li .content:hover a {
  color: var(--greenColor);
}
.side-bar-widget .contact-sidebar-list li .content:hover span {
  color: var(--greenColor);
}

/*================================
Blog Area End
===================================*/
.author-profile {
  background: var(--whiteColor);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
  padding: 35px 30px;
  text-align: center;
  border-radius: 10px;
  margin-bottom: 35px;
  border-top: 2px solid var(--greenColor);
  border-bottom: 2px solid var(--greenColor);
}
.author-profile h3 {
  color: var(--transition);
  margin-bottom: 10px;
  font-size: 22px;
}
.author-profile img {
  border-radius: 50%;
  margin-bottom: 15px;
}
.author-profile p {
  margin-bottom: 17px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.author-profile .profile-social-link {
  list-style: none;
  margin: 0;
  padding: 0;
}
.author-profile .profile-social-link li {
  display: inline-block;
  margin-right: 5px;
}
.author-profile .profile-social-link li a i {
  width: 35px;
  height: 35px;
  line-height: 35px;
  font-size: 20px;
  text-align: center;
  color: var(--whiteColor);
  background-color: var(--greenColor);
  transition: var(--transition);
}
.author-profile .profile-social-link li a:hover i {
  background-color: var(--titleColor);
  border-radius: 50px;
}

.single-content {
  margin-bottom: 30px;
}
.single-content h1, .single-content h2, .single-content h3, .single-content h4, .single-content h5, .single-content h6 {
  margin-bottom: 15px;
}
.single-content h1 {
  font-size: 32px;
}
.single-content h2 {
  font-size: 29px;
}
.single-content h3 {
  font-size: 26px;
}
.single-content h4 {
  font-size: 23px;
}
.single-content h5 {
  font-size: 20px;
}
.single-content h6 {
  font-size: 17px;
}
.single-content a {
  color: var(--greenColor);
}
.single-content a:hover {
  color: var(--titleColor);
  border-bottom: 1px solid var(--greenColor);
}
.single-content ul, .single-content ol {
  margin-bottom: 30px;
}
.single-content ul li, .single-content ol li {
  margin-bottom: 10px;
}
.single-content ul li:last-child, .single-content ol li:last-child {
  margin-bottom: 0;
}
.single-content p {
  margin-bottom: 15px;
}
.single-content p:last-child {
  margin-bottom: 0;
}

/*================================
Faq Area
===================================*/
.faq-accordion {
  max-width: 610px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
.faq-accordion .accordion {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}
.faq-accordion .accordion .accordion-item {
  border-radius: 15px;
  display: block;
  background-color: #ffffff;
  margin-bottom: 15px;
  border: none;
}
.faq-accordion .accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.faq-accordion .accordion .accordion-title {
  padding: 15px 60px 12px 20px;
  color: var(--titleColor);
  background-color: #f4f3f3;
  text-decoration: none;
  position: relative;
  display: block;
  font-size: 17px;
  font-weight: 600;
}
.faq-accordion .accordion .accordion-title i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  transition: 0.5s;
  font-size: 20px;
  width: 35px;
  height: 35px;
  color: var(--greenColor);
  border-radius: 50px;
  border: none;
  text-align: center;
  line-height: 35px;
  background-color: transparent;
}
.faq-accordion .accordion .accordion-title.active {
  background-color: var(--greenColor);
  color: var(--whiteColor);
}
.faq-accordion .accordion .accordion-title.active i {
  color: var(--whiteColor);
}
.faq-accordion .accordion .accordion-title.active i::before {
  content: "\eb8b";
}
.faq-accordion .accordion .accordion-content {
  display: none;
  position: relative;
  margin-top: 10px;
  padding-bottom: 0;
  padding-right: 20px;
  padding-left: 20px;
}
.faq-accordion .accordion .accordion-content p {
  line-height: 1.8;
}
.faq-accordion .accordion .accordion-content.show {
  display: block;
}

/*================================
Faq Area End
===================================*/
/*================================
Product Area
===================================*/
.product-topper {
  background-color: #f9f9f9;
  padding: 10px 20px;
}
.product-topper .product-title h3 {
  font-size: 16px;
  color: var(--bodyColor);
  margin-bottom: 0;
  font-weight: 400;
}
.product-topper .product-list {
  vertical-align: middle;
  position: relative;
  background-color: var(--whiteColor);
  float: right;
}
.product-topper .product-list i {
  display: inline-block;
  position: absolute;
  top: 13px;
  right: 6px;
  color: var(--bodyColor);
  font-size: 20px;
}
.product-topper .product-list .form-select {
  color: var(--bodyColor);
  background-color: transparent;
  border: 0;
  background-image: unset;
  padding: 10px 40px 10px 20px;
  font-family: var(--headerFonts);
  font-size: 14px;
}
.product-topper .product-list .form-select:focus {
  border: 0;
  box-shadow: none;
}
.product-topper .product-list .form-select option {
  color: var(--bodyColor);
  padding-top: 5px;
  padding-bottom: 5px;
}

.top-title {
  font-size: 24px;
  margin-bottom: 30px;
}

.product-card {
  margin-bottom: 30px;
}
.product-card .product-img {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 20px;
}
.product-card .product-img::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0;
  background-color: transparent;
  border-left: 1px solid #dadadb;
  border-right: 1px solid #dadadb;
  transition: 0.7s;
  opacity: 0;
}
.product-card .product-img::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 100%;
  background-color: transparent;
  border-top: 1px solid #dadadb;
  border-bottom: 1px solid #dadadb;
  transition: 0.7s;
  opacity: 0;
}
.product-card .product-img a {
  display: block;
}
.product-card .product-img a img {
  max-width: 100%;
  background-color: #f2f6fe;
  transition: var(--transition);
  padding: 35px;
}
.product-card .product-img .product-item-action {
  padding-left: 0;
  list-style-type: none;
  position: absolute;
  z-index: 1;
  right: 20px;
  top: 20px;
  margin: auto;
  margin-bottom: 0;
}
.product-card .product-img .product-item-action li {
  display: block;
  transform: translateY(30px);
  transition: all 0.3s ease-in-out 0s;
  opacity: 0;
  visibility: hidden;
  margin-bottom: 10px;
}
.product-card .product-img .product-item-action li a {
  display: block;
  width: 35px;
  height: 35px;
  background-color: var(--greenColor);
  text-align: center;
  position: relative;
  font-size: 20px;
  color: var(--whiteColor);
  transition: 0.5s;
  border-radius: 5px;
}
.product-card .product-img .product-item-action li a i {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: auto;
  margin-right: auto;
}
.product-card .product-img .product-item-action li a:hover {
  background-color: var(--titleColor);
}
.product-card .product-img .product-item-action li:nth-child(1) {
  transition-delay: 0.1s;
}
.product-card .product-img .product-item-action li:nth-child(2) {
  transition-delay: 0.2s;
}
.product-card .content {
  position: relative;
}
.product-card .content h3 {
  margin-bottom: 5px;
}
.product-card .content h3 a {
  color: var(--titleColor);
  transition: var(--transition);
}
.product-card .content span {
  color: var(--greenColor);
  font-weight: 500;
}
.product-card .content .rating {
  position: absolute;
  top: 3px;
  right: 0;
  color: #ffc107;
  font-size: 14px;
}
.product-card:hover .product-img::before {
  opacity: 1;
  height: 100%;
}
.product-card:hover .product-img::after {
  opacity: 1;
  width: 100%;
}
.product-card:hover .product-img img {
  transform: scale(1.1);
  background-color: transparent;
}
.product-card:hover .product-img .product-item-action li {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.product-card:hover .content h3 a {
  color: var(--greenColor);
}

/*================================
Product Area End
===================================*/
/*==================================
Shop Details 
====================================*/
.shop-details-img {
  margin-bottom: 30px;
  overflow: hidden;
}
.shop-details-img img {
  background-color: #f2f6fe;
  transition: var(--transition);
  padding: 40px;
}
.shop-details-img:hover img {
  transform: scale(1.1);
}

.shop-desc {
  margin-bottom: 30px;
}
.shop-desc h3 {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 600;
}
.shop-desc .price {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--greenColor);
}
.shop-desc .price .old-price {
  text-decoration: line-through;
  color: var(--bodyColor);
  margin-left: 10px;
}
.shop-desc .shop-review {
  margin-bottom: 15px;
}
.shop-desc .shop-review .rating {
  display: inline-block;
  padding-right: 5px;
  font-size: 14px;
}
.shop-desc .shop-review .rating i {
  color: #ffc107;
}
.shop-desc .shop-review .rating-count {
  margin-left: 5px;
  display: inline-block;
  color: var(--bodyColor);
  border-bottom: 1px solid var(--titleColor);
  line-height: initial;
}
.shop-desc .shop-review .rating-count:hover {
  color: var(--greenColor);
  border-color: var(--greenColor);
}
.shop-desc p {
  margin-bottom: 15px;
}
.shop-desc .input-count-area h3 {
  font-size: 16px;
  display: inline-block;
  font-weight: 500;
  margin-right: 15px;
}
.shop-desc .input-count-area .input-counter {
  margin-top: 10px;
  max-width: 130px;
  min-width: 130px;
  margin-right: 10px;
  text-align: center;
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
}
.shop-desc .input-count-area .input-counter span {
  position: absolute;
  top: 0;
  background-color: transparent;
  cursor: pointer;
  color: var(--bodyColor);
  width: 50px;
  height: 100%;
  line-height: 45px;
  transition: 0.5s;
}
.shop-desc .input-count-area .input-counter span:hover {
  color: var(--greenColor);
}
.shop-desc .input-count-area .input-counter .minus-btn {
  left: 0;
}
.shop-desc .input-count-area .input-counter .plus-btn {
  right: 0;
}
.shop-desc .input-count-area .input-counter input {
  height: 45px;
  color: var(--bodyColor);
  outline: 0;
  display: block;
  border: none;
  background-color: #f8f8f8;
  text-align: center;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
}
.shop-desc .input-count-area .input-counter input:focus::-webkit-input-placeholder, .shop-desc .input-count-area .input-counter input:focus:-ms-input-placeholder, .shop-desc .input-count-area .input-counter input:focus::-ms-input-placeholder, .shop-desc .input-count-area .input-counter input:focus::placeholder {
  color: var(--greenColor);
}
.shop-desc .shop-add {
  margin-top: 20px;
}
.shop-desc .shop-add .default-btn {
  border: none;
  margin-right: 20px;
}
.shop-desc .shop-share {
  margin-top: 30px;
}
.shop-desc .shop-share ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.shop-desc .shop-share ul li {
  display: inline-block;
  margin: 0 3px;
}
.shop-desc .shop-share ul li span {
  color: var(--titleColor);
  margin-right: 5px;
  font-size: 16px;
}
.shop-desc .shop-share ul li a {
  display: inline-block;
}
.shop-desc .shop-share ul li a i {
  width: 35px;
  height: 35px;
  background-color: var(--greenColor);
  font-size: 16px;
  color: var(--whiteColor);
  line-height: 35px;
  border-radius: 50px;
  text-align: center;
  transition: var(--transition);
}
.shop-desc .shop-share ul li a i:hover {
  background-color: var(--titleColor);
}

.shop-detls-tab .tabs {
  margin: 0;
  padding: 0 0 15px;
  list-style: none;
  border-bottom: 1px solid #e9e9e9;
}
.shop-detls-tab .tabs li {
  display: inline-block;
  margin-right: 30px;
  font-size: 18px;
  position: relative;
  color: var(--titleColor);
  font-family: var(--headerFonts);
  transition: var(--transition);
  cursor: pointer;
}
.shop-detls-tab .tabs li:focus {
  color: var(--greenColor);
}
.shop-detls-tab .tabs li.active {
  color: var(--greenColor);
}
.shop-detls-tab .tabs li.current {
  color: var(--greenColor);
}
.shop-detls-tab .tabs li:last-child {
  margin-right: 0;
}

.shop-detls-tab-content {
  margin-top: 30px;
  border: 1px solid #eeeeee;
  padding: 30px;
  margin-bottom: 30px;
}
.shop-detls-tab-content p {
  margin-bottom: 20px;
}
.shop-detls-tab-content p:last-child {
  margin-bottom: 0;
}
.shop-detls-tab-content .additional-information {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
  text-align: left;
}
.shop-detls-tab-content .additional-information li {
  border: 1px solid #eeeeee;
  border-bottom: none;
  padding: 10px 15px 7px;
  color: #737b9a;
}
.shop-detls-tab-content .additional-information li:last-child {
  border-bottom: 1px solid #eeeeee;
}
.shop-detls-tab-content .additional-information li span {
  display: inline-block;
  width: 40%;
  color: #212529;
  font-weight: 600;
}
.shop-detls-tab-content h3 {
  margin-bottom: 15px;
  font-size: 24px;
}
.shop-detls-tab-content .shop-review-form .review-title {
  position: relative;
}
.shop-detls-tab-content .shop-review-form .review-title .rating {
  display: inline-block;
}
.shop-detls-tab-content .shop-review-form .review-title .rating i {
  color: #ffc107;
  font-size: 14px;
}
.shop-detls-tab-content .shop-review-form .review-title .rating p {
  margin-bottom: 0;
  display: inline-block;
  padding-left: 5px;
  line-height: initial;
}
.shop-detls-tab-content .shop-review-form .review-title .btn-right {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 14px;
  color: var(--whiteColor);
  background-color: var(--titleColor);
  padding: 7px 15px;
  border-radius: 5px;
}
.shop-detls-tab-content .shop-review-form .review-title .btn-right:hover {
  background-color: var(--mainColor);
  color: var(--whiteColor);
}
.shop-detls-tab-content .shop-review-form .review-comments {
  margin-top: 35px;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item {
  margin-top: 30px;
  position: relative;
  padding-right: 200px;
  border-top: 1px dashed #eeeeee;
  padding-top: 30px;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item .content {
  position: relative;
  z-index: 1;
  padding: 3px 0 3px 80px;
  margin-bottom: 15px;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item .content img {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item .content .content-dtls h4 {
  font-size: 18px;
  margin-bottom: 5px;
  margin-top: 0;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item .content .content-dtls span {
  color: var(--greenColor);
  font-size: 14px;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item .rating i {
  color: #ffc107;
  font-size: 14px;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item h3 {
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: var(--titleColor);
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item p {
  margin-bottom: 0;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item .review-report-link {
  position: absolute;
  right: 0;
  color: #737b9a;
  top: 40px;
  text-decoration: underline;
  font-weight: 600;
  font-size: 15px;
}
.shop-detls-tab-content .shop-review-form .review-comments .review-item .review-report-link:hover {
  color: var(--mainColor);
}
.shop-detls-tab-content .shop-review-form .review-form {
  margin-top: 25px;
}
.shop-detls-tab-content .shop-review-form .review-form .contact-form {
  max-width: 100%;
  margin: 0 auto;
  background-color: transparent;
  box-shadow: none;
  padding: 0;
}
.shop-detls-tab-content .shop-review-form .review-form .contact-form h4 {
  margin-bottom: 25px;
}
.shop-detls-tab-content .shop-review-form .review-form .contact-form .form-group label {
  margin-bottom: 20px;
}

/*==================================
Shop Details End
====================================*/
/*=================================
Cart Wraps Area
===================================*/
.cart-wraps-area .cart-wraps {
  margin-bottom: 30px;
}
.cart-wraps-area .cart-table table {
  margin-bottom: 0;
}
.cart-wraps-area .cart-table table thead tr th {
  border-bottom-width: 0px;
  vertical-align: middle;
  padding: 15px 0;
  border: none;
  font-weight: 700;
  font-size: 18px;
}
.cart-wraps-area .cart-table table tbody tr td {
  vertical-align: middle;
  color: var(--titleColor);
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 0;
  padding-right: 0;
  font-size: 15px;
  border-color: #eeeeee;
  border-left: none;
  border-right: none;
}
.cart-wraps-area .cart-table table tbody tr td.product-thumbnail a {
  display: block;
}
.cart-wraps-area .cart-table table tbody tr td.product-thumbnail a img {
  width: 60px;
  height: 60px;
  background-color: #f2f6fe;
  padding: 3px;
}
.cart-wraps-area .cart-table table tbody tr td.product-name a {
  color: var(--titleColor);
  font-weight: 600;
  display: inline-block;
  font-size: 16px;
}
.cart-wraps-area .cart-table table tbody tr td.product-name a:hover {
  color: var(--greenColor) !important;
}
.cart-wraps-area .cart-table table tbody tr td.product-subtotal .default-btn i {
  position: relative;
  top: 3px;
  margin-left: 3px;
}
.cart-wraps-area .cart-table table tbody tr td.product-subtotal .remove {
  color: var(--bodyColor);
  float: right;
  position: relative;
  top: 1px;
  transition: all 0.5s;
}
.cart-wraps-area .cart-table table tbody tr td.product-subtotal .remove i {
  font-size: 24px;
}
.cart-wraps-area .cart-table table tbody tr td.product-subtotal .remove:hover {
  color: var(--greenColor);
}
.cart-wraps-area .cart-table table tbody tr td.product-subtotal span {
  font-weight: 600;
}
.cart-wraps-area .cart-table table tbody tr td.product-subtotal .remove-mt {
  top: 12px;
}
.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter {
  max-width: 130px;
  min-width: 130px;
  text-align: center;
  display: inline-block;
  position: relative;
}
.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter span {
  position: absolute;
  top: 0;
  background-color: transparent;
  cursor: pointer;
  color: var(--titleColor);
  width: 40px;
  height: 100%;
  line-height: 48px;
  transition: 0.5s;
}
.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter span:hover {
  color: var(--greenColor) !important;
}
.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter .minus-btn {
  left: 0;
}
.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter .minus-btn:hover {
  color: var(--greenColor) !important;
}
.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter .plus-btn {
  right: 0;
}
.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter .plus-btn:hover {
  color: var(--greenColor) !important;
}
.cart-wraps-area .cart-table table tbody tr td.product-quantity .input-counter input {
  height: 45px;
  color: var(--titleColor);
  outline: 0;
  display: block;
  border: none;
  background-color: #f8f8f8;
  text-align: center;
  width: 100%;
  font-size: 17px;
  font-weight: 600;
}
.cart-wraps-area .cart-table .table > :not(:first-child) {
  border-top: 0;
}
.cart-wraps-area .cart-buttons {
  margin-top: 30px;
}

.cart-totals {
  border-radius: 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  padding: 40px;
  margin-left: 30px;
  margin-bottom: 30px;
}
.cart-totals h3 {
  font-size: 24px;
  margin-bottom: 15px;
}
.cart-totals ul {
  padding: 0;
  margin: 0 0 25px;
  list-style-type: none;
}
.cart-totals ul li {
  border-bottom: 1px solid #eeeeee;
  padding: 10px 15px;
  color: var(--bodyColor);
  overflow: hidden;
  font-weight: 500;
}
.cart-totals ul li span {
  float: right;
  color: var(--greenColor);
  font-weight: normal;
}

/*=================================
Cart Wraps Area End
===================================*/
/*=================================
Checkout Area
===================================*/
.checkout-user {
  color: var(--titleColor);
  font-size: 16px;
  margin-bottom: 30px;
  border-left: 2px solid var(--greenColor);
  padding: 15px 25px;
  background-color: var(--whiteColor);
  box-shadow: 0 5px 28px rgba(0, 0, 0, 0.07);
}
.checkout-user span {
  color: var(--bodyColor);
  font-size: 18px;
}
.checkout-user span a {
  color: var(--greenColor);
}
.checkout-user span a:hover {
  color: var(--titleColor);
}

.billing-details {
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  padding: 50px 30px 25px 30px;
  box-shadow: 0 5px 28px rgba(0, 0, 0, 0.07);
}
.billing-details h3 {
  font-size: 24px;
  color: var(--titleColor);
  margin-bottom: 25px;
  font-weight: 600;
}
.billing-details .form-group {
  margin-bottom: 25px;
}
.billing-details .form-group label {
  color: var(--titleColor);
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
}
.billing-details .form-group label span {
  color: var(--greenColor);
}
.billing-details .form-group .form-control {
  height: 50px;
  color: var(--bodyColor);
  border: none;
  background-color: #f9f8f8;
  border-radius: 0;
  padding: 10px 20px;
  width: 100%;
}
.billing-details .form-group .form-control:focus, .billing-details .form-group .form-control :hover {
  outline: 0;
  box-shadow: none;
}
.billing-details .form-group .form-message {
  font-size: 16px;
  border: none;
  background-color: #f9f8f8;
  padding: 18px 18px;
  font-weight: 400;
  width: 100%;
}
.billing-details .form-group .form-message:focus, .billing-details .form-group .form-message :hover {
  outline: 0;
  box-shadow: none;
}
.billing-details .form-check {
  margin-bottom: 15px;
}
.billing-details .form-check .form-check-input {
  width: 15px;
  height: 15px;
}
.billing-details .form-check .form-check-label {
  color: var(--titleColor);
  margin-left: 5px;
  font-weight: 500;
}

.billing-totals {
  border-radius: 0;
  background-color: var(--whiteColor);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
  padding: 35px 30px 40px;
  margin-bottom: 30px;
}
.billing-totals h3 {
  font-size: 22px;
  margin-bottom: 15px;
}
.billing-totals ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.billing-totals ul li {
  border-bottom: 1px solid #eeeeee;
  padding: 10px 15px;
  color: var(--bodyColor);
  overflow: hidden;
  font-weight: 500;
}
.billing-totals ul li span {
  float: right;
  color: var(--greenColor);
  font-weight: normal;
}

.payment-box {
  background-color: var(--whiteColor);
  box-shadow: 0 5px 28px rgba(0, 0, 0, 0.07);
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 40px 30px;
}
.payment-box .payment-method h3 {
  font-size: 22px;
  margin-bottom: 20px;
}
.payment-box .payment-method p [type=radio]:checked {
  display: none;
}
.payment-box .payment-method p [type=radio]:checked + label {
  padding-left: 27px;
  cursor: pointer;
  display: block;
  font-weight: 600;
  color: var(--titleColor);
  position: relative;
  margin-bottom: 15px;
}
.payment-box .payment-method p [type=radio]:checked + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid #dddddd;
  border-radius: 50%;
  background: #ffffff;
}
.payment-box .payment-method p [type=radio]:checked + label::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--greenColor);
  position: absolute;
  top: 6px;
  left: 3px;
  border-radius: 50%;
  transition: 0.5s;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.payment-box .payment-method p [type=radio]:not(:checked) {
  display: none;
}
.payment-box .payment-method p [type=radio]:not(:checked) + label {
  padding-left: 27px;
  cursor: pointer;
  display: block;
  font-weight: 600;
  color: #172541;
  position: relative;
  margin-bottom: 15px;
}
.payment-box .payment-method p [type=radio]:not(:checked) + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border: 1px solid #dddddd;
  border-radius: 50%;
  background: #ffffff;
}
.payment-box .payment-method p [type=radio]:not(:checked) + label::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--greenColor);
  position: absolute;
  top: 6px;
  left: 3px;
  border-radius: 50%;
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  transform: scale(0);
}
.payment-box .default-btn {
  margin-top: 20px;
  text-align: center;
  width: 100%;
}

/*=================================
Checkout Area End
===================================*/
/*=================================
Portfolio Area 
===================================*/
.portfolio-card {
  margin-bottom: 30px;
  transition: var(--transition);
}
.portfolio-card a {
  display: block;
}
.portfolio-card a img {
  border-radius: 10px;
}
.portfolio-card .content {
  position: relative;
  margin-top: -30px;
  border-radius: 10px;
  padding: 20px;
  background-color: var(--whiteColor);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.portfolio-card .content h3 {
  margin-bottom: 0;
}
.portfolio-card .content h3 a {
  color: var(--titleColor);
  transition: var(--transition);
  display: inline-block;
}
.portfolio-card:hover {
  transform: translateY(-10px);
}
.portfolio-card:hover .content h3 a {
  color: var(--greenColor);
}

/*=================================
Portfolio Area End
===================================*/
/*================================
Contact Area
===================================*/
.contact-info {
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  padding: 60px 35px 22px;
  border-radius: 0;
  position: relative;
  z-index: 1;
  margin-right: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border-top: 3px solid var(--greenColor);
  border-bottom: 3px solid var(--greenColor);
}
.contact-info span {
  color: var(--greenColor);
  display: block;
  margin-bottom: 5px;
}
.contact-info h2 {
  color: var(--titleColor);
  font-size: 26px;
  margin-bottom: 15px;
}
.contact-info p {
  color: var(--bodyColor);
  margin-bottom: 20px;
}
.contact-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-info ul li {
  display: block;
  margin-bottom: 30px;
  padding-left: 60px;
  position: relative;
}
.contact-info ul li .content i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  background-color: var(--greenColor);
  font-size: 20px;
  color: var(--whiteColor);
  transition: var(--transition);
  border-radius: 50px;
  margin-bottom: 10px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}
.contact-info ul li .content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: var(--titleColor);
  display: block;
}
.contact-info ul li .content a {
  color: var(--titleColor);
  display: block;
  font-weight: 400;
  font-size: 15px;
  transition: var(--transition);
}
.contact-info ul li .content a:hover {
  color: var(--greenColor);
}
.contact-info ul li .content span {
  color: var(--bodyColor);
  font-weight: 400;
  display: block;
  font-size: 15px;
  transition: var(--transition);
}
.contact-info ul li .content:hover i {
  background-color: var(--titleColor);
}
.contact-info ul li .content:hover a {
  color: var(--greenColor);
}
.contact-info ul li .content:hover span {
  color: var(--greenColor);
}

.contact-form {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
  background-color: var(--whiteColor);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  padding: 40px 30px;
}
.contact-form h3 {
  font-size: 26px;
  margin-bottom: 20px;
}
.contact-form .form-group {
  margin-bottom: 20px;
  position: relative;
}
.contact-form .form-group.checkbox-option {
  position: relative;
}
.contact-form .form-group.checkbox-option #chb2 {
  position: absolute;
  top: 6px;
  left: 0;
}
.contact-form .form-group.checkbox-option p {
  padding-left: 25px;
  font-size: 15px;
  color: var(--titleColor);
}
.contact-form .form-group.checkbox-option p a {
  color: var(--mainColor);
}
.contact-form .form-group.checkbox-option p a:hover {
  color: var(--titleColor);
}
.contact-form .form-group .form-control {
  height: 50px;
  color: var(--bodyColor);
  border: none;
  background-color: #f4fbf4;
  font-size: 15px;
  padding: 15px 20px;
  width: 100%;
  border-radius: 0;
}
.contact-form .form-group .form-control:focus {
  outline: none;
  box-shadow: none;
}
.contact-form .form-group textarea.form-control {
  height: auto;
}
.contact-form .agree-label {
  margin-bottom: 15px;
  position: relative;
}
.contact-form .agree-label #chb1 {
  position: absolute;
  top: 7px;
  left: 0;
}
.contact-form .agree-label label {
  font-weight: 500;
  color: var(--titleColor);
  margin-left: 25px;
}
.contact-form .agree-label label a {
  color: var(--greenColor);
}
.contact-form .agree-label label a:hover {
  color: var(--titleColor);
}
.contact-form .agree-label label a.forget {
  position: absolute;
  right: 0;
}
.contact-form .with-errors {
  float: left;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 0;
  color: #f00;
  font-weight: 400;
  display: block;
}
.contact-form .text-danger {
  font-size: 18px;
  margin-top: 15px;
}
.contact-form .default-btn {
  border: 0;
  outline: none;
}
.contact-form .default-btn i {
  position: relative;
  top: 2px;
  margin-right: 5px;
}

.contact-form .form-group .form-control::-webkit-input-placeholder, .contact-form .form-group .form-control:-ms-input-placeholder, .contact-form .form-group .form-control::-ms-input-placeholder, .contact-form .form-group .form-control::placeholder {
  color: var(--bodyColor);
}

.user-all-form .contact-form {
  background-color: var(--whiteColor);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
  border-top: 2px solid var(--greenColor);
  border-bottom: 2px solid var(--greenColor);
  border-radius: 10px;
}
.user-all-form .contact-form .form-group label {
  margin-bottom: 20px;
  color: var(--titleColor);
}
.user-all-form .contact-form .default-btn {
  width: 100%;
  text-align: center;
  border-radius: 0;
}
.user-all-form .contact-form .account-desc {
  margin-top: 20px;
  font-weight: 500;
}
.user-all-form .contact-form .account-desc a {
  color: var(--greenColor);
}
.user-all-form .contact-form .account-desc a:hover {
  color: var(--titleColor);
}

/*================================
Contact Area End
===================================*/
/*=================================
Map Area 
====================================*/
.map-area iframe {
  display: block;
  width: 100%;
  height: 400px;
}

.map-area .container-fluid {
  max-width: 100% !important;
}

/*=================================
Map Area End
====================================*/
.pagination-area {
  margin-top: 10px;
  margin-bottom: 30px;
}
.pagination-area .page-numbers {
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: var(--greenColor);
  background-color: #f8f8f8;
  text-align: center;
  display: inline-block;
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
  font-size: 18px;
  border-radius: 0;
}
.pagination-area .page-numbers:hover {
  background-color: var(--greenColor);
  color: var(--whiteColor);
  border-radius: 50px;
}
.pagination-area .page-numbers i {
  position: relative;
  font-size: 25px;
  top: 5px;
}
.pagination-area .page-numbers.current {
  background-color: var(--greenColor);
  color: var(--whiteColor);
  border-radius: 50px;
}
.pagination-area.pagination-area-color .page-numbers {
  background-color: var(--whiteColor);
}
.pagination-area.pagination-area-color .page-numbers.current {
  background-color: var(--greenColor);
}
.pagination-area.pagination-area-color .page-numbers:hover {
  background-color: var(--greenColor);
}

/*=================================
Buy Now Btn
====================================*/
.buy-now-btn {
  right: 20px;
  z-index: 99;
  top: 50%;
  position: fixed;
  transform: translateY(-50%);
  border-radius: 30px;
  display: inline-block;
  color: var(--whiteColor);
  background-color: #82b440;
  padding: 10px 20px 10px 42px;
  box-shadow: 0 1px 20px 1px #82b440;
  font-size: 13px;
  font-weight: 600;
}
.buy-now-btn img {
  top: 50%;
  left: 20px;
  width: 15px;
  position: absolute;
  transform: translateY(-50%);
}
.buy-now-btn:hover {
  color: var(--whiteColor);
  background-color: #94be5d;
}

/*=================================
404 Error Area
===================================*/
.error-area .error-content {
  text-align: center;
  position: relative;
}
.error-area .error-content h1 {
  font-size: 300px;
  line-height: 0.7;
  font-weight: 700;
  color: var(--titleColor);
}
.error-area .error-content h1 span {
  color: var(--greenColor);
}
.error-area .error-content h3 {
  margin: 50px 0 0;
  position: relative;
  color: var(--titleColor);
  font-size: 35px;
}
.error-area .error-content p {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 18px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/*=================================
404 Error Area End
===================================*/
/*=================================
Coming Soon Area
===================================*/
.coming-soon-area {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  background-color: #0a0f1f;
}
.coming-soon-area::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/about/about-bg-shape.png);
}
.coming-soon-area .coming-soon-content {
  text-align: center;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
  padding: 50px 30px;
  background-color: transparent;
  border: 3px solid var(--whiteColor);
}
.coming-soon-area .coming-soon-content h1 {
  margin-bottom: 0;
  color: var(--whiteColor);
  font-size: 50px;
}
.coming-soon-area .coming-soon-content p {
  font-size: 16px;
  max-width: 600px;
  margin-top: 15px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  color: var(--whiteColor);
}
.coming-soon-area .coming-soon-content #timer {
  margin-top: 40px;
}
.coming-soon-area .coming-soon-content #timer div {
  display: inline-block;
  color: var(--whiteColor);
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 10px;
  font-size: 35px;
  font-weight: 700;
  background-color: transparent;
  border-radius: 5px;
  border: 2px solid var(--whiteColor);
}
.coming-soon-area .coming-soon-content #timer div span {
  display: block;
  text-transform: capitalize;
  margin-top: -15px;
  font-size: 16px;
  font-weight: normal;
  color: var(--whiteColor);
}
.coming-soon-area .coming-soon-content #timer div:last-child {
  margin-right: 0;
}
.coming-soon-area .coming-soon-content #timer div:last-child::before {
  display: none;
}
.coming-soon-area .coming-soon-content #timer div:first-child {
  margin-left: 0;
}
.coming-soon-area .coming-soon-content #timer div::before {
  content: "";
  position: absolute;
  right: -50px;
  top: -10px;
  font-size: 70px;
  color: #ffffff;
}
.coming-soon-area .coming-soon-content .newsletter-form {
  position: relative;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
.coming-soon-area .coming-soon-content .newsletter-form .input-newsletter {
  display: block;
  width: 100%;
  height: 60px;
  border: none;
  background-color: var(--whiteColor);
  padding-left: 15px;
  color: var(--whiteColor);
  outline: 0;
  transition: 0.5s;
  border-radius: 0;
  border: 1px solid #cccccc;
  color: #5d5d5d;
}
.coming-soon-area .coming-soon-content .newsletter-form .input-newsletter:focus {
  border-color: var(--greenColor);
}
.coming-soon-area .coming-soon-content .newsletter-form .default-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 60px;
  padding: 0 30px;
  text-transform: uppercase;
  outline: 0;
  color: #ffffff;
  transition: 0.5s;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  background-color: var(--greenColor);
}
.coming-soon-area .coming-soon-content .newsletter-form .default-btn::before {
  border-radius: 0;
  background-color: var(--titleColor);
}
.coming-soon-area .coming-soon-content .newsletter-form .default-btn:hover {
  color: #ffffff;
  background-color: #190f3c;
}
.coming-soon-area #validator-newsletter {
  text-align: left;
  color: #dc3545 !important;
}

/*=================================
Coming Soon Area End
===================================*/
.gallery-img {
  position: relative;
  z-index: 1;
}
.gallery-img img {
  width: unset !important;
  display: inline-block;
}
.gallery-img:hover::before {
  opacity: 0.7;
  height: 100%;
}
.gallery-img:hover .gallery-icon {
  opacity: 1;
}
.gallery-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 0%;
  background-color: var(--titleColor);
  opacity: 0;
  transition: 0.7s;
}
.gallery-img .gallery-icon {
  font-size: 35px;
  color: var(--whiteColor);
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.7s;
  display: inline-block;
}

.categories-title {
  margin-bottom: 30px;
}
.categories-title h3 {
  font-size: 24px;
  color: var(--titleColor);
}
.categories-title h3 span {
  color: var(--bodyColor);
  font-size: 17px;
}

/*================================
Footer Area
===================================*/
.footer-area-bg {
  background-color: #0a0f1f;
}

.footer-widget {
  margin-bottom: 30px;
}
.footer-widget .footer-logo {
  margin-bottom: 20px;
  position: relative;
  top: -5px;
}
.footer-widget h3 {
  margin-top: 0;
  font-size: 22px;
  margin-bottom: 30px;
  color: var(--greenColor);
  line-height: 1.2;
}
.footer-widget h3.title {
  margin-bottom: 20px;
  font-size: 20px;
}
.footer-widget p {
  margin-bottom: 25px;
  color: var(--whiteColor);
}
.footer-widget .social-link {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.footer-widget .social-link li {
  display: inline-block;
  margin-right: 10px;
}
.footer-widget .social-link li:last-child {
  margin-right: 0;
}
.footer-widget .social-link li a i {
  border-radius: 0;
  color: var(--greenColor);
  font-size: 26px;
  transition: var(--transition);
}
.footer-widget .social-link li a:hover i {
  color: var(--whiteColor);
}
.footer-widget .footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-widget .footer-list li {
  display: block;
  margin-bottom: 15px;
}
.footer-widget .footer-list li:last-child {
  margin-bottom: 0;
}
.footer-widget .footer-list li a {
  color: var(--whiteColor);
}
.footer-widget .footer-list li a:hover {
  color: var(--greenColor);
  letter-spacing: 0.25px;
}
.footer-widget .footer-list li:hover a {
  color: var(--greenColor);
  letter-spacing: 0.25px;
}
.footer-widget .footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-widget .footer-contact li {
  position: relative;
  color: var(--greenColor);
  padding-bottom: 40px;
}
.footer-widget .footer-contact li span {
  position: absolute;
  top: 0;
  left: 90px;
  color: var(--whiteColor);
}
.footer-widget .footer-contact li span a {
  color: var(--whiteColor);
  transition: var(--transition);
}
.footer-widget .footer-contact li span a:hover {
  color: var(--greenColor);
}

.newsletter-area .newsletter-form {
  position: relative;
}
.newsletter-area .newsletter-form .form-control {
  background: #0e1125;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  margin: 0;
  border-radius: 0;
  border: none;
  padding: 0 25px;
  max-width: 100%;
  color: var(--whiteColor);
  border: 1px solid var(--whiteColor);
}
.newsletter-area .newsletter-form .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--greenColor);
}
.newsletter-area .newsletter-form .subscribe-btn {
  margin-top: 15px;
  background-color: var(--greenColor);
  color: var(--whiteColor);
  height: 50px;
  line-height: 50px;
  width: 100%;
  border: 0;
  transition: var(--transition);
  text-align: center;
}
.newsletter-area .newsletter-form .subscribe-btn:hover {
  background-color: var(--whiteColor);
  color: var(--greenColor);
}
.newsletter-area .newsletter-form .validation-danger {
  font-size: 18px;
  margin-top: 5px;
  color: red;
}

.copyright-area {
  border-top: 1px solid #3b5e2a;
  padding: 15px 0;
}

.copy-right-text p {
  color: var(--whiteColor);
  margin-bottom: 0;
}
.copy-right-text p a {
  color: var(--greenColor);
  font-weight: 500;
}
.copy-right-text p a:hover {
  color: var(--whiteColor);
}

/*================================
Footer Area End
===================================*/
/*================================
Preloader Area
===================================*/
.preloader {
  position: fixed;
  background: var(--whiteColor);
  z-index: 99999;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.preloader .spinner {
  margin: auto;
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  position: absolute;
  left: 50%;
  right: 50%;
  margin-left: -20px;
  top: 50%;
  animation: sk-rotate 2s infinite linear;
}
.preloader .dot1, .preloader .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: var(--greenColor);
  border-radius: 100%;
  animation: sk-bounce 3s infinite ease-in-out;
}
.preloader .dot1 {
  background-color: var(--titleColor);
}
.preloader .dot2 {
  top: auto;
  background-color: var(--greenColor);
  bottom: 0;
  animation-delay: -1s;
}

/*================================
Preloader Area End
===================================*/
/*=================================
Go Top Area 
====================================*/
.go-top {
  position: fixed;
  top: 60%;
  right: 3%;
  opacity: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--whiteColor);
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  background: var(--greenColor);
  border-radius: 0;
  width: 45px;
  height: 45px;
  line-height: 45px;
  z-index: 100;
  transition: 0.5s;
}
.go-top i {
  transition: 0.5s;
  vertical-align: middle;
}
.go-top:hover {
  background-color: var(--titleColor);
}
.go-top:hover i {
  transform: translateY(-5px);
}
.go-top.active {
  top: 95%;
  transform: translateY(-95%);
  opacity: 1;
  visibility: visible;
}

/*=================================
Go Top Area End
====================================*/
/*==================================
Animation CSS
====================================*/
@keyframes sk-rotate {
  100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
  }
}
@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
@keyframes ripple {
  0% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.75);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes animationFramesOne {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    transform: translate(13px, -1px) rotate(36deg);
  }
  40% {
    transform: translate(53px, 22px) rotate(72deg);
  }
  60% {
    transform: translate(33px, 85px) rotate(108deg);
  }
  80% {
    transform: translate(-10px, 42px) rotate(144deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
@keyframes movebounce-up {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-120px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes moveIn-to {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(50px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes rotated360 {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}/*# sourceMappingURL=style.css.map */
.site-topbar {
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
}
.top-logo {
  height: 42px;
}

.site-mainnav {
  background: #fff;
  border-bottom: 1px solid #ececec;
}

.site-mainnav .navbar-nav > li > a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #343434;
  white-space: nowrap;
  text-transform: capitalize;
}

.site-mainnav .navbar-nav > li > a:hover {
  color: #0bb672;
}

.site-mainnav .dropdown-menu {
  min-width: 210px;
}

.site-mainnav .dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
}

@media (max-width: 991px) {
  .site-mainnav .navbar-nav {
    flex-wrap: wrap;
  }
}
/* --- FIX: allow page to scroll --- */

/* 1. our custom header should just be normal */
.gxr-header {
  position: relative !important;
  top: auto !important;
  z-index: 50;
}

/* 2. kill the template's sticky header behaviour */
.navbar-area.is-sticky,
.site-mainnav.is-sticky,
.site-topbar.is-sticky {
  position: static !important;
  top: auto !important;
  box-shadow: none !important;
}

/* 3. just in case something set the body to hidden */
html, body {
  overflow-y: auto !important;
}
/* 1. stop template header from becoming fixed */
.navbar-area.is-sticky {
  position: relative !important;
  top: 0 !important;
  animation: none !important;
  box-shadow: none !important;
}

/* 2. make sure the page can scroll normally */
html, body {
  overflow-y: auto !important;
}

/* 3. make our menu look tidy */
.gx-main-menu > li > a {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #343434;
  white-space: nowrap;
  text-transform: capitalize;
}
.gx-main-menu > li > a:hover {
  color: #0bb672;
}
.gx-main-menu .dropdown-menu { min-width: 210px; }
.gx-main-menu .dropdown-menu .dropdown-menu {
  top: 0;
  left: 100%;
}
/* --- Fix dropdown item spacing for deep submenus --- */
.navbar-nav .dropdown-menu .dropdown-item {
  padding: 6px 16px !important; /* more vertical breathing space */
  line-height: 1.4 !important;
  white-space: nowrap;
}

/* Optional: keep consistent padding for nested submenus too */
.navbar-nav .dropdown-menu .dropdown-menu .dropdown-item {
  padding-left: 22px !important; /* small indent for clarity */
}
/* === FIX FOR DEEP DROPDOWN SPACING (e.g. Bajra / Ragi / Jaware / Jowar Flour) === */

/* Ensure all dropdown items have consistent padding */
.navbar-nav .dropdown-menu .dropdown-item {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  line-height: 1.5 !important;
  white-space: nowrap;
}

/* Increase spacing for nested dropdowns (second and third level) */
.navbar-nav .dropdown-menu .dropdown-menu .dropdown-item {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  padding-left: 26px !important; /* add extra indent */
}

/* Ensure nested dropdown container has enough width and no clipping */
.navbar-nav .dropdown-menu .dropdown-menu {
  min-width: 230px !important;
  padding: 6px 0 !important;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Fix any vertical overlap between dropdown levels */
.navbar-nav .dropdown-menu > li > .dropdown-menu {
  margin-top: -4px !important;
}
/* FIX: nested grocery menu items getting cramped */
.navbar-nav.m-auto.gx-main-menu .dropdown-menu > li > a,
.navbar-nav.m-auto.gx-main-menu .dropdown-menu .dropdown-menu > li > a {
  display: block !important;               /* make the whole line clickable */
  padding: 10px 18px !important;           /* real top/bottom padding */
  line-height: 1.4 !important;
  white-space: normal !important;          /* allow long text to wrap nicely */
}

/* make deeper submenus a bit wider so long flour names fit */
.navbar-nav.m-auto.gx-main-menu .dropdown-menu .dropdown-menu {
  min-width: 260px !important;
}

/* tiny gap between items so borders don’t touch text */
.navbar-nav.m-auto.gx-main-menu .dropdown-menu > li,
.navbar-nav.m-auto.gx-main-menu .dropdown-menu .dropdown-menu > li {
  margin-bottom: 0px !important;
}
/* === Top Logo Styling === */
.top-logo-wrap {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.top-logo {
  height: 110px;          /* adjust size as needed */
  width: auto;
  border-radius: 50%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* subtle hover effect */
.top-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* make sure header doesn’t overlap it */
.navbar-area {
  margin-top: 0 !important;
}
/* Default desktop size */
.top-logo {
  height: 110px;
  width: auto;
  border-radius: 50%;
}

/* Laptops */
@media (max-width: 1199px) {
  .top-logo {
    height: 95px;
  }
}

/* Tablets and mobile */
@media (max-width: 991px) {
  .top-logo {
    height: 80px;
  }
}
/* === Fine-tuned Overlap Logo Placement === */
.top-logo-wrap {
  position: relative;
  z-index: 1000;
  background: transparent;
  margin-top: -25px;         /* lifts logo upward slightly */
  margin-bottom: -55px;      /* overlap amount */
  text-align: center;
}

.top-logo {
  height: 120px;
  width: auto;
  border-radius: 50%;
  background: #fff;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* hover */
.top-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
}

/* Responsive adjustments */
@media (max-width: 1199px) {
  .top-logo {
    height: 100px;
    padding: 6px;
  }
  .top-logo-wrap {
    margin-bottom: -45px;
  }
}

@media (max-width: 991px) {
  .top-logo {
    height: 85px;
    padding: 5px;
  }
  .top-logo-wrap {
    margin-bottom: -35px;
  }
}
/* top circular logo – final placement */
.top-logo-wrap {
  position: relative;
  z-index: 1000;
  background: transparent;
  padding-top: 12px;      /* <-- keeps it away from very top so it's not cut */
  margin-top: 0;          /* no negative top now */
  margin-bottom: -60px;   /* overlap onto the white navbar */
  text-align: center;
}

.top-logo {
  height: 138px;          /* your actual logo size */
  width: 138px;
  border-radius: 50%;
  background: #fff;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}
/* hide theme's built-in logo in the navbar */
.navbar-area .navbar-brand,
.navbar-area .navbar-brand img {
  display: none !important;
}
/* Slimmer top welcome strip */
.site-topbar,
.top-header,
.top-header-area {
  padding: 6px 0;
  font-size: 13px;
}
/* === Round Social Icons (Premium Style) === */
.header-top-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #0bb672; /* brand green */
  color: #fff;
  font-size: 14px;
  margin-left: 6px;
  border: 2px solid transparent;
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

/* hover effect – white background, green border, green icon */
.header-top-social a:hover {
  background-color: #fff;
  color: #0bb672;
  border-color: #0bb672;
  transform: scale(1.1);
}

/* keep icons aligned properly inside top bar */
.header-top-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* === POLISHED PREMIUM ROUND SOCIAL ICONS === */
.top-header .top-social-list li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: #0bb672;
  color: #ffffff !important; /* pure white */
  font-size: 18px;
  margin-left: 8px;
  border: 2px solid transparent;
  transition: all 0.35s ease;
  text-decoration: none;
  box-shadow: none !important;
  transform: translateY(0);
}

/* Ensure icon color stays white, no transparency */
.top-header .top-social-list li a i {
  color: #ffffff !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  line-height: 1;
}

/* Hover effect — white background, green icon, lift-up motion */
.top-header .top-social-list li a:hover {
  background-color: #ffffff;
  color: #0bb672 !important;
  border-color: #0bb672;
  transform: translateY(-3px) scale(1.05);
}

/* keep the icon inside green when hovered */
.top-header .top-social-list li a:hover i {
  color: #0bb672 !important;
}

/* layout and spacing */
.top-header .top-social-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}

.top-header .top-social-list .title {
  font-weight: 600;
  font-size: 14px;
  margin-right: 8px;
  color: #ffffff;
}

/* smaller devices */
@media (max-width: 767px) {
  .top-header .top-social-list li a {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}
/* === ORGANIC PREMIUM ROUND SOCIAL ICONS === */
.top-header .top-social-list li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #84c83a; /* pulled from Taste Delight logo */
  color: #ffffff !important;
  font-size: 18px;
  margin-left: 8px;
  border: 2px solid transparent;
  transition: all 0.35s ease;
  text-decoration: none;
  box-shadow: none !important;
  transform: translateY(0);
}

/* inner icon cleanup */
.top-header .top-social-list li a i {
  color: #ffffff !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  line-height: 1;
}

/* Hover: soft glow + reverse color scheme */
.top-header .top-social-list li a:hover {
  background-color: #ffffff;
  color: #84c83a !important;
  border-color: #84c83a;
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6); /* elegant white halo */
}

.top-header .top-social-list li a:hover i {
  color: #84c83a !important;
}

/* Alignment */
.top-header .top-social-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.top-header .top-social-list .title {
  font-weight: 600;
  font-size: 14px;
  margin-right: 10px;
  color: #ffffff;
}

/* Mobile */
@media (max-width: 767px) {
  .top-header .top-social-list li a {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
}
/* ========== MOBILE HEADER FIXES ========== */
@media (max-width: 767px) {

  /* 1) hide the theme's small logo in mobile too */
  .navbar-area .navbar-brand,
  .navbar-area .navbar-brand img {
    display: none !important;
  }

  /* 2) adjust top round logo so it doesn’t overlap weirdly on mobile */
  .top-logo-wrap {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 10px;
    text-align: center;
  }

  .top-logo {
    height: 95px;
    width: 95px;
  }

  /* 3) top strip: show only text, hide social icons + other header items */
  .top-header .header-right,
  .top-header .header-right .header-item {
    display: none !important;
  }

  /* keep welcome text centered in a thin bar */
  .top-header.top-header-bg-two {
    padding: 4px 0;
    text-align: center;
  }
  .top-header .header-left p {
    margin: 0;
  }

  /* 4) remove that white line / border between dark strip and header */
  .navbar-area {
    border-top: none !important;
  }
}

/* slightly wider mobile / small tablets */
@media (max-width: 991px) and (min-width: 768px) {
  .navbar-area .navbar-brand,
  .navbar-area .navbar-brand img {
    display: none !important;
  }
  .top-header .header-right {
    display: none !important;
  }
}
/* MOBILE fixes */
@media (max-width: 767px) {

  /* 1. Hide the mobile template logo ("Logo") */
  .mobile-nav .logo,
  .mobile-nav .logo img,
  .navbar-area .mobile-nav .logo {
    display: none !important;
  }

  /* 2. Give space between round logo and dark strip */
  .top-logo-wrap {
    margin-bottom: 10px;   /* gap before dark bar */
  }

  /* make the dark bar a bit thicker so it looks intentional */
  .top-header.top-header-bg-two {
    padding: 6px 0;
  }
}
/* logo inside top header */
.top-header {
  position: relative;
  background: #061126; /* your dark color */
  border: 0;
}

/* center logo */
.top-logo-wrap {
  width: 100%;
  text-align: center;
  padding-top: 10px;
  margin-bottom: 6px; /* gives space before welcome line */
}

.top-logo {
  width: 138px;        /* your size */
  max-width: 40vw;     /* stays reasonable on very small phones */
  height: auto;
  display: inline-block;
}

/* welcome line */
.top-welcome {
  color: #fff;
  font-size: 14px;
  margin-bottom: 10px;
}

/* desktop social */
.top-social-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-social-list .title {
  color: #fff;
  font-weight: 600;
}

/* hide social on mobile */
@media (max-width: 991px) {
  .top-social-list {
    display: none !important;
  }
  .top-header {
    padding-bottom: 10px;
  }
  .top-logo {
    width: 120px;
  }
}
/* hide template's built-in mobile logo (the broken image) */
@media (max-width: 991px) {
  .mobile-nav .logo,
  .mobile-nav .logo img,
  .navbar-area .mobile-nav .logo,
  .navbar-area .mobile-nav .logo img,
  .navbar-area .mobile-nav .navbar-brand,
  .navbar-area .mobile-nav .navbar-brand img {
    display: none !important;
  }

  /* re-align mobile bar so hamburger is on the right nicely */
  .navbar-area .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
/* ===== mobile logo + top strip fix ===== */
@media (max-width: 991px) {

  /* 1) hide ONLY the mobile logo inside mobile-responsive-nav */
  .navbar-area .mobile-responsive-nav .logo,
  .navbar-area .mobile-responsive-nav .logo a,
  .navbar-area .mobile-responsive-nav .logo img {
    display: none !important;
  }

  /* 2) make the welcome strip thinner */
  .top-header.top-header-bg-two {
    padding: 5px 0 !important;
  }
  .top-header.top-header-bg-two .header-left p {
    margin: 0 !important;
    text-align: center;
  }
}
/* --- MOBILE HEADER CLEAN LAYOUT --- */
@media (max-width: 991px) {

  /* make the welcome strip auto-size around text */
  .top-header.top-header-bg-two {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
    padding: 5px 16px !important; /* equal padding around text */
    border-radius: 6px;
  }

  /* center text inside it */
  .top-header .header-left p {
    margin: 0;
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
  }

  /* reposition hamburger icon */
  .mobile-responsive-nav {
    margin-top: -12px; /* pull it up slightly to align visually */
  }
}
/* --- MOBILE HEADER COMPACT STRIP FIX --- */
@media (max-width: 991px) {

  /* 1. shrink dark strip height and center nicely */
  .top-header.top-header-bg-two {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    margin: 4px auto 0 auto; /* slight spacing below logo */
    padding: 3px 10px !important; /* tighter padding */
    border-radius: 6px;
  }

  /* 2. fine-tune text size and spacing */
  .top-header .header-left p {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
  }

  /* 3. adjust hamburger icon position */
  .mobile-responsive-nav {
    margin-top: -10px; /* aligns visually below the strip */
  }
}
/* Green dropdown arrow for menus (premium smooth effect) */
.navbar-nav .dropdown-toggle::after,
.gxr-has-sub > a::after {
  border-top-color: #8bc53f !important; /* your logo’s green */
  transition: transform 0.2s ease-out, border-top-color 0.2s ease-out;
}

/* Rotate arrow upward when dropdown is open */
.navbar-nav .dropdown.show > .dropdown-toggle::after,
.gxr-has-sub.open > a::after {
  transform: rotate(180deg);
}

/* Slightly darker green on hover */
.navbar-nav .dropdown-toggle:hover::after,
.gxr-has-sub > a:hover::after {
  border-top-color: #7ab634 !important;
}
/* ===== Top Header Social Icons (Refined Look) ===== */
.top-header .header-item ul li a i {
  width: 32px;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  background-color: #8bc53f; /* your logo green */
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Hover - clean white outline + float up */
.top-header .header-item ul li a:hover i {
  background-color: #fff;
  color: #8bc53f;
  border: 2px solid #8bc53f;
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(139, 197, 63, 0.3);
}

/* Reduce gap between icons */
.top-header .header-item ul li {
  margin-right: 6px;
}

/* Mobile adjustment */
@media (max-width: 991px) {
  .top-header .header-item ul li a i {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
  }
  .top-header .header-item ul li {
    margin-right: 4px;
  }
}
/* ===== Elegant Drop Shadow for Dropdown Menus ===== */
/* ===== Main Categories (replacing old recipe categories slider) ===== */
.main-categories-area {
    position: relative;
}

.main-categories-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 25px;
}

.category-card {
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 6px;
    padding: 35px 15px 30px;
    text-align: center;
    transition: all .3s ease;
    text-decoration: none;
    box-shadow: 0 25px 40px rgba(0,0,0,.03);
}

.category-card .icon-wrap {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 12px;
    background: #e4f9ed; /* light green like your screenshot */
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-card i {
    font-size: 30px;
    color: #0fb76b; /* brand green */
}

.category-card h3 {
    font-size: 15px;
    margin: 0;
    color: #1f2933;
    font-weight: 600;
}

.category-card:hover {
    border-color: #0fb76b;
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(15, 183, 107, 0.1);
}

@media (max-width: 1199px) {
    .main-categories-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 767px) {
    .main-categories-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}
/* ===== Main Categories Grid ===== */
.main-categories-area {
  position: relative;
}

.main-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 30px;
}

.category-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 40px 20px 35px;
  text-align: center;
  transition: all .3s ease;
  text-decoration: none;
  box-shadow: 0 15px 40px rgba(0,0,0,0.03);
}

.category-card .icon-wrap {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #e4f9ed;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-card i {
  font-size: 34px;
  color: #0fb76b;
}

.category-card h3 {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin: 0;
}

.category-card:hover {
  border-color: #0fb76b;
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(15,183,107,0.15);
}

/* Responsive */
@media (max-width: 1199px) {
  .main-categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .main-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ===== Equipment / B2B Section ===== */
.td-equipment-area {
  background: #fff;
}

.td-equipment-title h2 {
  font-size: 34px;
  margin-bottom: 10px;
}
.td-equipment-title p {
  max-width: 620px;
  margin: 0 auto;
  color: #555;
}

.td-equipment-grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 25px;
}

.td-equipment-card {
  border-radius: 20px;
  padding: 30px 30px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 280px;
  overflow: hidden;
  position: relative;
}

.td-equipment-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.td-equipment-card p {
  margin-bottom: 20px;
  color: #2b2b2b;
}

.td-btn {
  display: inline-block;
  background: #ff7a1a;
  color: #fff;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
}

.td-equipment-img {
  margin-top: 20px;
  text-align: right;
}
.td-equipment-img img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* different background colors like your sample */
.td-equipment-card.racks {
  background: #d4f6dd;
}
.td-equipment-card.freezer {
  background: #d8e7ff;
}
.td-equipment-card.machines {
  background: #ffe9b9;
}

/* responsive */
@media (max-width: 991px) {
  .td-equipment-grid {
    grid-template-columns: 1fr;
  }
  .td-equipment-card {
    text-align: left;
  }
  .td-equipment-img {
    text-align: left;
  }
}
.footer-logo {
  text-align: center;
}
.footer-logo img {
  max-width:180px; /* adjust as needed */
  margin: 0 auto;
  display: block;
}
.banner-slider .banner-content-shape img {
  width: auto !important;
  max-width: none;
  height: auto;
  position: static;
}
.portfolio-card .content {
  text-align: center !important;
}
/* ==== FIX: show logo again on desktop & mobile ==== */

/* Desktop logo inside navbar */
.navbar-area .navbar-brand img {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Mobile logo in the mobile nav / responsive nav */
@media (max-width: 991px) {

  .navbar-area .mobile-responsive-nav .logo,
  .navbar-area .mobile-responsive-nav .logo a,
  .navbar-area .mobile-responsive-nav .logo img,
  .mobile-nav .logo,
  .mobile-nav .logo img,
  .navbar-area .mobile-nav .logo,
  .navbar-area .mobile-nav .logo img,
  .navbar-area .mobile-nav .navbar-brand,
  .navbar-area .mobile-nav .navbar-brand img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
/* === FIX LOGO VISIBILITY === */

/* Desktop logo */
.navbar-area .navbar-brand img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile logo */
.navbar-area .mobile-responsive-nav .logo,
.navbar-area .mobile-responsive-nav .logo img,
.mobile-nav .logo,
.mobile-nav .logo img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Top round logo (centered) */
.top-logo-wrap img,
.top-logo {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* === FIX FOR NORMAL LEFT-ALIGNED NAVBAR LOGO === */

.navbar-area .navbar-brand img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 125px;  /* adjust logo size */
}

.navbar-area .navbar-brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Remove all hiding from previous edits */
.mobile-nav .logo,
.mobile-nav .logo img,
.navbar-area .mobile-nav .logo,
.navbar-area .mobile-nav .logo img,
.navbar-area .mobile-responsive-nav .logo,
.navbar-area .mobile-responsive-nav .logo img {
    display: inline-block !important;
}
/* === FINAL HEADER / LOGO FIX === */

/* Always show the logo inside the desktop navbar */
.navbar-area .desktop-nav .navbar-brand,
.navbar-area .desktop-nav .navbar-brand img {
    display: inline-block !important;
}

/* Desktop: show ONLY desktop nav + logo, hide mobile header */
@media (min-width: 992px) {
    .navbar-area .mobile-responsive-nav {
        display: none !important;
    }
}

/* Mobile / tablet: show ONLY mobile header, hide desktop logo */
@media (max-width: 991px) {
    .navbar-area .desktop-nav .navbar-brand,
    .navbar-area .desktop-nav .navbar-brand img {
        display: none !important;
    }

    .navbar-area .mobile-responsive-nav {
        display: block !important;
    }
}
/* ===== FINAL WELCOME TEXT FIX ===== */
@media (max-width: 767px) {

    /* Center the header-left column */
    .top-header .col-lg-3.col-md-4 {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* Center the paragraph */
    .top-header .header-left p {
        text-align: center !important;
        margin: 6px 0 2px 0 !important;
        width: 100% !important;
        display: block !important;
    }

    /* Remove welcome bar background */
    .top-header,
    .top-header.top-header-bg-two {
        background: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    /* Hide social icons */
    .top-header .header-right {
        display: none !important;
    }
}
/* === Mobile fix for Welcome line === */
@media (max-width: 767.98px) {

    /* Make sure top header is visible */
    .top-header,
    .top-header.top-header-bg-two {
        display: block !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Stack header content nicely */
    .top-header .container-fluid .row {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Center the left block */
    .top-header .header-left {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center !important;
    }

    /* Center and show the text */
    .top-header .header-left p {
        margin: 0;
        padding: 6px 0;
        width: 100%;
        text-align: center !important;
        font-size: 13px;
        color: #000 !important;
        background: transparent !important;
    }

    /* (Optional) hide the right side section on mobile */
    .top-header .header-right {
        display: none !important;
    }
}
/* === FINAL FIX: center welcome line on mobile === */
@media (max-width: 767.98px) {

  /* Make the welcome container full-width and not floating */
  .top-header .header-left {
    float: none !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
  }

  /* Center the text inside it */
  .top-header .header-left p {
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    display: block !important;
  }
}
/* === FINAL MOBILE CENTER FIX FOR WELCOME LINE === */
@media (max-width: 767.98px) {

    /* Cancel float and make the welcome container full width */
    .top-header .header-left {
        float: none !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    /* Center the text inside it */
    .top-header .header-left p {
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        display: block !important;
    }
}
.mobile-welcome {
    font-size: 13px;
    color: #000;
    padding: 6px 0;
}
/* === FINAL OVERRIDE: Center welcome line on mobile === */
@media (max-width: 991.98px) {

  /* Make the dark strip full-width again, no pill / fit-content */
  .top-header.top-header-bg-two {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 4px 0 !important;
      text-align: center !important;
  }

  /* Break Bootstrap row layout for header */
  .top-header .row {
      display: block !important;
      text-align: center !important;
  }

  /* Both columns full-width, no float */
  .top-header .col-lg-3.col-md-4,
  .top-header .col-lg-9.col-md-8 {
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
      text-align: center !important;
  }

  /* Welcome container */
  .top-header .header-left {
      float: none !important;
      text-align: center !important;
  }

  /* The welcome text itself */
  .top-header .header-left p {
      margin: 0 !important;
      display: inline-block !important;
      text-align: center !important;
      font-size: 13px;
      color: #000;
  }

  /* If you want: hide social icons row on mobile */
  .top-header .header-right {
      display: none !important;
  }
}
/* === FORCE REDUCE INNER BANNER HEIGHT GLOBALLY === */
body .inner-banner,
body .inner-banner[class*="inner-bg"] {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
    min-height: auto !important;
}

/* Adjust title spacing */
body .inner-banner .inner-title {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body .inner-banner .inner-title h3 {
    margin-bottom: 5px !important;
}

body .inner-banner .inner-title ul {
    margin-top: 5px !important;
}
/* ==== HOME PAGE HERO SLIDER – CLEAN VERSION ==== */

/* 1. Reset the slide container (keeps original width & normal hero height) */
.banner-area-three {
  padding: 85px 0;                 /* similar scale to main banner */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* 2. Remove big round white patch & use a simple overlay panel */
.banner-content-two {
  max-width: 900px;
  margin: 0 auto;
  padding: 25px 35px;
  background: rgba(0, 0, 0, 0.45);  /* subtle dark panel for readability */
  border-radius: 18px;
  position: relative;
  text-align: center;
}

/* 3. Make slider text very readable on top of images */
.banner-content-two span,
.banner-content-two h1,
.banner-content-two p {
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.banner-content-two span {
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.banner-content-two h1 {
  font-size: 46px;
  line-height: 1.2;
  margin: 10px 0 15px;
}

.banner-content-two p {
  font-size: 16px;
  max-width: 650px;
  margin: 0 auto 22px;
}

/* 4. Buttons – compact & readable */
.banner-content-two .banner-btn .default-btn {
  margin: 0 6px 6px;
}

/* 5. Tablet tweaks */
@media (max-width: 991.98px) {
  .banner-area-three {
    padding: 70px 15px;
  }

  .banner-content-two {
    max-width: 95%;
    padding: 20px 20px;
  }

  .banner-content-two h1 {
    font-size: 32px;
  }

  .banner-content-two p {
    font-size: 15px;
  }
}

/* 6. Mobile – avoid card covering whole screen */
@media (max-width: 575.98px) {
  .banner-area-three {
    padding: 55px 12px 65px;
  }

  .banner-content-two {
    padding: 16px 14px;
    background: rgba(0, 0, 0, 0.55);  /* slightly stronger so text pops */
  }

  .banner-content-two h1 {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .banner-content-two p {
    font-size: 14px;
    margin-bottom: 15px;
  }
}

/* 7. Safety: kill any old circular pseudo-elements if theme added them */
.banner-content-two::before,
.banner-content-two::after {
  content: none !important;
}
/* Increase banner height (desktop) */
.banner-area-three {
    padding: 130px 0 !important;   /* adjust 130 → 160 → 200 as you prefer */
}

/* Mobile stays shorter */
@media (max-width: 575.98px) {
  .banner-area-three {
    padding: 90px 0 !important;
  }
}
/* Balanced banner height */
.banner-area-three {
    padding: 145px 0 !important;   /* perfect midpoint */
}

/* Mobile stays compact */
@media (max-width: 575.98px) {
  .banner-area-three {
    padding: 90px 0 !important;
  }
}
/* Fix huge gap above Solutions For Your Store */
.recipe-area {
    padding-bottom: 40px !important;   /* was 70px */
}

.td-equipment-area {
    padding-top: 40px !important;      /* was 100px */
}
/* Softer, premium transparent patch for slider text */
.banner-content-two {
    background: rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 18px;
}
/* Remove dark/blur box completely */
.banner-content-two {
    background: transparent !important;
    padding: 20px 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Make text VERY readable on any background image */
.banner-content-two span,
.banner-content-two h1,
.banner-content-two p {
    color: #ffffff !important;
    text-shadow: 0 3px 6px rgba(0,0,0,0.75) !important;
}

/* Extra clarity for headings */
.banner-content-two h1 {
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

/* Mobile readability */
@media (max-width: 575px) {
  .banner-content-two h1 {
    text-shadow: 0 3px 8px rgba(0,0,0,0.9) !important;
  }
  .banner-content-two p {
    text-shadow: 0 2px 6px rgba(0,0,0,0.85) !important;
  }
}
/* Left image block */
.dv-about-image-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.dv-about-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 20px;
}

/* Responsive alignment */
@media (max-width: 991px) {
  .dv-about-image-wrap {
    margin-bottom: 25px;
  }
}
/* Fix About Us top alignment */
.dv-section .row.align-items-center {
    align-items: flex-start !important;
}
/* === DIRECTOR MESSAGE PAGE – VISUAL UPGRADE === */

/* Section background – soft, not plain white */
.dv-section.dv-md-main {
  padding: 100px 0 110px;
  background:
    radial-gradient(circle at top left, #fff4e4 0, transparent 55%),
    radial-gradient(circle at bottom right, #ffe8f0 0, transparent 55%),
    #ffffff;
}

/* Card glow & accent bar */
.dv-md-card {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 42px 42px 34px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
  border: 1px solid #f4d8d6;
}

/* Gradient bar on top of card */
.dv-md-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f7a61c, #e53b3b);
}

/* Quote icon a bit stronger & integrated */
.dv-md-icon {
  float: right;
  font-size: 30px;
  color: #f3b3b7;
  margin-top: -6px;
}

/* Title & subtitle tweaks */
.dv-md-title {
  font-size: 28px;
  line-height: 1.4;
  font-weight: 700;
  color: #231f26;
  margin-bottom: 8px;
}

.dv-md-subtitle {
  font-size: 15px;
  color: #8a828a;
  margin-bottom: 22px;
}

/* Text colours just a bit richer */
.dv-md-text {
  font-size: 16px;
  line-height: 1.9;
  color: #4b4750;
  margin-bottom: 14px;
}

.dv-md-highlight {
  font-size: 16.2px;
  color: #2d2932;
  font-weight: 500;
}

/* Sign-off block more premium */
.dv-md-signoff {
  margin-top: 26px;
  border-left: 3px solid #e53b3b;
  padding-left: 16px;
}

.dv-md-signoff p {
  font-size: 15.5px;
  color: #3a363f;
}

/* Optional: small stat row under message to fill space a bit */
.dv-md-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 22px;
}

.dv-md-stat-item {
  flex: 1 1 120px;
  min-width: 140px;
  background: #fff7ed;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
  color: #5b524a;
}

.dv-md-stat-item strong {
  display: block;
  font-size: 16px;
  color: #c0392b;
}

/* Responsive tweaks */
@media (max-width: 991px) {
  .dv-section.dv-md-main {
    padding: 70px 0 80px;
  }

  .dv-md-card {
    padding: 30px 22px 26px;
    border-radius: 20px;
  }

  .dv-md-card::before {
    left: 14px;
    right: 14px;
  }

  .dv-md-title {
    font-size: 22px;
  }

  .dv-md-icon {
    font-size: 24px;
  }

  .dv-md-stats {
    flex-direction: column;
  }
}
/* Reduce visual gap under the left image on About Us */
.dv-about-card {
    height: 100%;
}

/* Make the image match content visually */
.dv-about-image-wrap {
    height: 100%;
    display: flex;
    align-items: flex-start;
}
.banner-btn {
    display: none !important;
}
/* Left align slider captions */
.banner-content-two {
    text-align: left !important;
    max-width: 700px; /* keeps text neat on wide screens */
}

/* Make tagline, title, paragraph left aligned */
.banner-content-two span,
.banner-content-two h1,
.banner-content-two p {
    text-align: left !important;
}

/* Remove centering gap */
.banner-content-two {
    margin-left: 0 !important;
}
/* === FORCE HERO SLIDER TEXT LEFT === */
.banner-content-two {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Make all caption lines left aligned */
.banner-content-two span,
.banner-content-two h1,
.banner-content-two p {
    text-align: left !important;
}

/* Stop centering the paragraph block itself */
.banner-content-two p {
    max-width: none !important;
    margin: 0 0 22px 0 !important;
}
/* Disable hover effects on Special Products images */
.recipe-card:hover,
.recipe-card .recipe-img:hover,
.recipe-card .recipe-img img:hover {
    transform: none !important;
    scale: 1 !important;
    opacity: 1 !important;
}

/* Remove any pseudo overlay */
.recipe-card .recipe-img::before,
.recipe-card .recipe-img::after {
    content: none !important;
    display: none !important;
}

/* Ensure image is fully clickable */
.recipe-card .recipe-img img {
    pointer-events: auto !important;
}
.footer-contact li {
    display: flex !important;
    align-items: flex-start !important;
}

.footer-contact li span {
    margin-left: 6px !important;
    display: inline-block !important;
    white-space: normal !important;
}
/* Fix home slider image so it's not zoomed/cropped */
.banner-area-three {
  position: relative;
  padding: 0 !important;                 /* remove extra height */
  background-size: 100% 100% !important; /* show full image */
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Maintain the image aspect ratio (574x1891) */
.banner-area-three::before {
  content: "";
  display: block;
  padding-top: 30.4%; /* (574 / 1891) * 100 */
}

/* Center the text vertically over the banner */
.banner-area-three > .container-fluid {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
/* Hero Slider - Perfect, No Stretch, No Crop */
.banner-area-three {
    position: relative;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;   /* important for natural look */
    overflow: hidden;
}

/* Maintain exact image aspect ratio */
.banner-area-three::before {
    content: "";
    display: block;
    padding-top: 30.1%;  /* same ratio as your banner */
}

/* Position content inside the banner */
.banner-area-three > .container-fluid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
}
/* === HERO BANNER FIX (1920x1050) === */

.banner-area-three {
    position: relative;
    padding: 0 !important;              /* remove extra top/bottom space */
    height: auto !important;
    min-height: 0 !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;  /* fits perfectly once ratio matches */
    overflow: hidden;
}

/* Keep the box in same ratio as 1920x1050 (1050/1920 ~= 54.69%) */
.banner-area-three::before {
    content: "";
    display: block;
    padding-top: 54.69%;   /* exact aspect ratio of your image */
}

/* Make inner content overlay correctly */
.banner-area-three > .container,
.banner-area-three > .container-fluid {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;   /* vertical center */
}
/* ==========================================
   OPTIMAL BANNER SETTINGS – NO BIG GAPS
   ========================================== */

.banner-area-three {
    position: relative;
    width: 100%;
    height: 480px;                         /* perfect balanced height */
    background-repeat: no-repeat !important;
    background-size: cover !important;      /* remove top/bottom gaps */
    background-position: center center !important;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Inner text spacing */
.banner-area-three .banner-content-two {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Mobile */
@media (max-width: 768px) {
    .banner-area-three {
        height: 360px;                     /* compact mobile height */
        background-size: cover !important;
    }
    .banner-area-three .banner-content-two {
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
    }
}
/* ==========================================
   ULTIMATE RESPONSIVE BANNER FIX
   ========================================== */

.banner-area-three {
    position: relative;
    width: 100%;
    height: 65vh;                        /* <== Banner height adjusts to window height */
    min-height: 250px;                   /* <== Prevents the banner from getting too small */
    max-height: 650px;                   /* <== Prevents it from becoming too tall */

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    display: flex;
    align-items: center;
}

/* Adjust text spacing WITHOUT forcing banner height */
.banner-area-three .banner-content-two {
    padding: 0 0 0 0 !important;         /* remove vertical padding */
    margin-top: -10vh;                   /* lift text slightly (auto adjusts to height) */
}

/* Mobile */
@media (max-width: 768px) {
    .banner-area-three {
        height: 45vh;
        min-height: 200px;
    }
    .banner-area-three .banner-content-two {
        margin-top: -5vh;
        text-align: center;
    }
}
@media (max-width: 768px) {
    .banner-area-three {
        height: 45vh;
        min-height: 200px;
    }
    .banner-area-three .banner-content-two {
        margin-top: -5vh;
    }
}
/* === FINAL HERO BANNER CONTROL === */
.banner-area-three {
  padding: 550px 0 !important;          /* 🔧 change this number for top+bottom */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* === FINAL OVERRIDE FOR HOME SLIDER HEIGHT === */
.banner-slider .banner-area-three {
    padding: 350px 0 !important;   /* 🔧 change 70 to adjust top+bottom */
}
/* Force banner slider to be shorter / auto height */
.banner-slider,
.banner-slider .owl-stage-outer,
.banner-slider .owl-stage,
.banner-slider .owl-item,
.banner-area-three {
    height: auto !important;
}

/* Make the banner a nice compact hero */
.banner-area-three {
    padding: 80px 0;              /* adjust: try 60px if you want even shorter */
    display: flex;
    align-items: center;
    background-size: cover !important;
    background-position: center center !important;
}

/* Optional: shrink heading & text if they look too big */
.banner-content-two h1 {
    font-size: 42px;
    line-height: 1.2;
}

.banner-content-two p {
    font-size: 18px;
    margin-bottom: 20px;
}
/* FINAL OVERRIDE – HERO BANNER HEIGHT */
.banner-slider .banner-area-three {
    padding: 60px 0 !important;  /* change 60 to adjust height */
    outline: 3px solid red;      /* DEBUG: you should SEE a red border */
}
/* FORCE CENTER ALIGNMENT FOR 2-COLUMN PRODUCT GRID */
.portfolio-card {
    text-align: center !important;
}

.portfolio-card .content {
    text-align: center !important;
}

.portfolio-card .content h3,
.portfolio-card .content h3 a {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.section-title.pt-70 {
    padding-top: 30px !important;
}
.section-title.pb-100 {
    padding-bottom: 40px !important;
}
/* ✅ FIX: Mobile slider image cut issue (use height instead of huge padding) */

.banner-slider .banner-area-three,
.banner-area-three{
  padding: 0 !important;                 /* remove the 250px padding */
  min-height: 700px !important;          /* desktop height */
  height: 70vh !important;               /* responsive height */
  max-height: 750px !important;          /* optional clamp */
  display: flex !important;
  align-items: center !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* keep owl carousel from clipping weirdly */
.banner-slider .owl-stage-outer{
  overflow: hidden !important;
}

/* ✅ Mobile tuning */
@media (max-width: 767.98px){
  .banner-slider .banner-area-three,
  .banner-area-three{
    height: 55vh !important;             /* mobile visible area */
    min-height: 420px !important;        /* minimum so it doesn't look tiny */
    max-height: 520px !important;
    background-position: center top !important;  /* show more top part on phone */
  }

  /* optional: reduce side padding of text area so it doesn't force weird layout */
  .banner-content-two{
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
/* ✅ MOBILE: show full hero image (no crop) */
@media (max-width: 767px){

  .banner-slider .banner-area-three,
  .banner-area-three{
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;

    /* KEY CHANGE */
    background-size: contain !important;     /* show full image */
    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* give it a consistent banner shape */
    aspect-ratio: 1920 / 700 !important;    /* your slider ratio */
    width: 100% !important;

    /* optional: so empty space looks premium */
    background-color: #0b0f1a !important;
  }

  /* Owl sometimes forces height/cropping */
  .banner-slider .owl-item{
    height: auto !important;
  }
}
@media (max-width: 767px){
  .banner-slider .banner-area-three,
  .banner-area-three{
    background-size: cover !important;
    background-position: center top !important; /* show more top area */
    height: 55vh !important;
    min-height: 420px !important;
    padding: 0 !important;
  }
}
@media (max-width: 767px){
  .banner-slider [style*="background-image"]{
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    aspect-ratio: 1920 / 700 !important;
    width: 100% !important;
    height: auto !important;
    background-color: #0b0f1a !important;
  }
}
/* =========================================================
   CONSOLIDATED HERO SLIDER FIX (DESKTOP OK + MOBILE FULL VIEW)
   Paste this at the VERY END of your main CSS file
   ========================================================= */

/* 1) Base slide behavior (keeps desktop looking good) */
.banner-slider .banner-area-three,
.banner-area-three{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* 2) Remove the common cause of mobile cut: huge padding */
.banner-slider .banner-area-three,
.banner-area-three{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 3) Stable slide height (desktop/tablet) */
@media (min-width: 769px){
  .banner-slider .banner-area-three,
  .banner-area-three{
    height: 700px !important;      /* desktop hero height */
    min-height: 700px !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* 4) ✅ MOBILE FIX: show bottom area (packs) instead of cropping it */
@media (max-width: 768px){
  .banner-slider .banner-area-three,
  .banner-area-three{
    height: 75vh !important;       /* responsive mobile height */
    min-height: 520px !important;  /* prevents becoming too short */
    display: flex !important;
    align-items: center !important;

    /* KEY: keep bottom visible */
    background-position: center bottom !important;

    /* ensure no hidden cropping due to padding */
    padding: 0 !important;
  }

  /* Prevent Owl wrapper clipping issues on some themes */
  .banner-slider,
  .banner-slider .owl-stage-outer{
    overflow: hidden !important;
  }
}

/* 5) Optional: If you still see slight cut on VERY small phones */
@media (max-width: 380px){
  .banner-slider .banner-area-three,
  .banner-area-three{
    height: 78vh !important;
    min-height: 540px !important;
  }
}




/* =========================================================
   FINAL OVERRIDE — HERO SLIDER MOBILE FULL-VIEW FIX
   (Place LAST in cascade. This section is intentionally
   high-specificity + !important to defeat older rules.)
   ========================================================= */

:root{
  --dv-hero-h-desktop: 700px;
  --dv-hero-h-tablet: 560px;
  --dv-hero-h-mobile: 520px;
}

/* Force Owl wrapper heights so background doesn't crop unpredictably */
.banner-slider.owl-carousel.owl-theme .owl-stage-outer,
.banner-slider.owl-carousel.owl-theme .owl-stage,
.banner-slider.owl-carousel.owl-theme .owl-item{
  height: var(--dv-hero-h-desktop) !important;
}

/* Slide container */
.banner-slider.owl-carousel.owl-theme .banner-area-three{
  height: var(--dv-hero-h-desktop) !important;
  min-height: var(--dv-hero-h-desktop) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important; /* Desktop stays premium */
  overflow: hidden !important;
  outline: none !important;          /* kills any debug outline */
}

/* Tablet */
@media (max-width: 991.98px){
  .banner-slider.owl-carousel.owl-theme .owl-stage-outer,
  .banner-slider.owl-carousel.owl-theme .owl-stage,
  .banner-slider.owl-carousel.owl-theme .owl-item{
    height: var(--dv-hero-h-tablet) !important;
  }
  .banner-slider.owl-carousel.owl-theme .banner-area-three{
    height: var(--dv-hero-h-tablet) !important;
    min-height: var(--dv-hero-h-tablet) !important;
    background-position: center bottom !important; /* keeps products visible */
  }
}

/* Mobile: show FULL image (no cut). This may add letterboxing, which is expected. */
@media (max-width: 575.98px){
  .banner-slider.owl-carousel.owl-theme .owl-stage-outer,
  .banner-slider.owl-carousel.owl-theme .owl-stage,
  .banner-slider.owl-carousel.owl-theme .owl-item{
    height: var(--dv-hero-h-mobile) !important;
  }
  .banner-slider.owl-carousel.owl-theme .banner-area-three{
    height: var(--dv-hero-h-mobile) !important;
    min-height: var(--dv-hero-h-mobile) !important;
    background-size: contain !important;     /* FULL image visible */
    background-position: center bottom !important;
    background-color: #000 !important;       /* fills empty area cleanly */
  }
}



/* =========================================================
   MOBILE HERO TEXT PANEL POLISH (prevents awkward line breaks)
   ========================================================= */
@media (max-width: 575.98px){
  /* Keep text readable but reduce the "big black block" height */
  .banner-content-two{
    max-width: 92% !important;
    padding: 16px 16px 14px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* Improve typography so the paragraph doesn't break oddly */
  .banner-content-two span{
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
  }

  .banner-content-two h1{
    font-size: 30px !important;
    line-height: 1.12 !important;
    margin-bottom: 10px !important;
  }

  .banner-content-two p{
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
    max-width: 100% !important;

    /* prevent ugly wrapping behaviour */
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  /* If your theme adds extra spacing around the banner text container */
  .banner-content-two *:last-child{
    margin-bottom: 0 !important;
  }
}
/* =========================================================
   FIX: Remove huge overlay panel on some slides (mobile)
   Keep only small background behind text
   ========================================================= */

@media (max-width: 575.98px){

  /* 1) Kill any full-slide overlays */
  .banner-area-three::before,
  .banner-area-three::after,
  .banner-slider .banner-area-three::before,
  .banner-slider .banner-area-three::after{
    content: none !important;
    display: none !important;
  }

  /* 2) Remove the BIG panel background (this is what you circled) */
  .banner-content-two{
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
    max-width: 92% !important;
    margin: 0 auto !important;
  }

  /* 3) Add small premium “chips” behind text only */
  .banner-content-two span,
  .banner-content-two h1,
  .banner-content-two p{
    display: inline-block !important;
    background: rgba(0,0,0,0.55) !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    margin: 6px 0 !important;
  }

  /* 4) Optional: slightly smaller title on mobile */
  .banner-content-two h1{
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  .banner-content-two p{
    font-size: 14px !important;
    line-height: 1.55 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}
/* =========================================================
   FIX: Remove full-width dark strip behind banner paragraph (mobile)
   ========================================================= */
@media (max-width: 575.98px){

  /* kill any pseudo overlay on the paragraph */
  .banner-content-two p::before,
  .banner-content-two p::after{
    content: none !important;
    display: none !important;
  }

  /* make paragraph background only wrap text */
  .banner-content-two p{
    display: inline-block !important;   /* key */
    width: auto !important;
    max-width: 92% !important;
    background: rgba(0,0,0,0.55) !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  /* ensure parent isn't forcing full-width background */
  .banner-content-two{
    background: transparent !important;
    padding: 0 16px !important;
  }
}
/* =========================================================
   MOBILE: keep banner text in top dark area (avoid sitting on image)
   ========================================================= */
@media (max-width: 575.98px){

  /* push content to top instead of vertical center */
  .banner-slider .banner-area-three{
    align-items: flex-start !important;
    padding-top: 120px !important;   /* adjust 100–140px if needed */
  }

  /* keep content from drifting down */
  .banner-content-two{
    margin-top: 0 !important;
  }

  /* optional: tighten spacing so it stays compact */
  .banner-content-two h1{ margin-bottom: 10px !important; }
  .banner-content-two p{ margin-top: 10px !important; }
}
/* =========================================================
   FINAL MOBILE FIX: Pin banner text to top (never falls on image)
   ========================================================= */
@media (max-width: 575.98px){

  /* make slide a positioning context */
  .banner-slider.owl-carousel.owl-theme .owl-item,
  .banner-slider.owl-carousel.owl-theme .banner-area-three{
    position: relative !important;
  }

  /* controlled top-dark fade (premium) */
  .banner-slider.owl-carousel.owl-theme .banner-area-three::before{
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0; right: 0; top: 0;
    height: 62% !important; /* dark only on top area */
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.85) 0%,
      rgba(0,0,0,0.55) 55%,
      rgba(0,0,0,0.00) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* 🔑 Pin the text block */
  .banner-slider.owl-carousel.owl-theme .banner-area-three .banner-content-two{
    position: absolute !important;
    top: 125px !important;        /* adjust 95–130px depending on header height */
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;

    padding: 0 16px !important;
    margin: 0 !important;

    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
  }

  /* Keep chips behind text only (optional but clean) */
  .banner-slider.owl-carousel.owl-theme .banner-content-two span,
  .banner-slider.owl-carousel.owl-theme .banner-content-two h1,
  .banner-slider.owl-carousel.owl-theme .banner-content-two p{
    display: inline-block !important;
    background: rgba(0,0,0,0.55) !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    margin: 6px 0 !important;
    max-width: 92% !important;
  }

  /* Typography */
  .banner-slider.owl-carousel.owl-theme .banner-content-two h1{
    font-size: 28px !important;
    line-height: 1.12 !important;
  }
  .banner-slider.owl-carousel.owl-theme .banner-content-two p{
    font-size: 14px !important;
    line-height: 1.55 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}