/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #151515; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ffc451; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #312f2f; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: rgba(0, 0, 0, 0.905);  /* The default color of the main navmenu links */
  --nav-hover-color: #ffc451; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ffc451; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Template Custom Colors */
:root {
  --footer-background-color: #000000;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0.8);
  --heading-color: #000000;
  --contrast-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 0 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 80px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 32px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .logo span {
  color: var(--accent-color);
  font-size: 32px;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  font-size: 14px;
  padding: 8px 30px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--default-color);
  background: var(--accent-color);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgb(255, 255, 255);
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: rgb(255, 255, 255);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1000px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
    justify-content: space-between;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 0;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    background-color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 999px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    padding: 15px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), white 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: color-mix(in srgb, var(--accent-color), white 90%);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    background-color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: auto;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: var(--footer-background-color);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer::after {
  content: "";
  display: table;
  clear: both;
}

.footer .footer-top {
  padding: 50px 0;
  background-color: color-mix(in srgb, var(--footer-background-color) 90%, white 10%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 10px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  background-color: color-mix(in srgb, var(--default-color) 5%, white 10%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  font-size: 16px;
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  margin-right: 4px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: color-mix(in srgb, var(--footer-background-color) 90%, white 15%);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: color-mix(in srgb, var(--footer-background-color) 90%, white 15%);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer .copyright {
  padding: 30px 0;
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 5px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: #000;
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 80px;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 58px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  padding-bottom: 0px;
  position: relative;
}

.section-title h2 {
  font-size: 14px;
  font-weight: 500;
  padding: 0;
  line-height: 1px;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title h2::after {
  content: "";
  width: 120px;
  height: 1px;
  display: inline-block;
  background: var(--accent-color);
  margin: 4px 10px;
}

.section-title p {
  color: var(--heading-color);
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
}
#contact .container > .mb-5 {
  margin-top: 0; /* Remove top margin for iframe container */
  padding-top: 0; /* Remove top padding for iframe container */
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  width: 100%;
  min-height: 100vh;
  position: relative;
  padding: 120px 0 80px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h2 {
  margin: 0;
  font-size: 56px;
  font-weight: 700;
  font-family: var(--nav-font);
}

.hero h2 span {
  color: var(--accent-color);
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 24px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: normal;
  font-style: italic;
}

.hero .icon-box {
  padding: 30px 30px;
  transition: ease-in-out 0.3s;
  flex: 1 1 200px; /* The flex-grow, flex-shrink, and flex-basis properties */
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  white-space: nowrap; /* Prevents text from wrapping */
  height: 100px;
}

.hero .icon-box i {
  font-size: 32px;
  line-height: 1;
  color: var(--accent-color);
}

.hero .icon-box h3 {
  font-weight: 600;
  margin: 10px 0 0 0;
  padding: 0;
  line-height: 1;
  font-size: 20px;
  line-height: 20px;
}

.hero .icon-box h3 a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: ease-in-out 0.3s;
}

.hero .icon-box:hover {
  border-color: var(--accent-color);
}

.hero .icon-box:hover h3 a {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 32px;
  }

  .hero p {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h3 {
  font-size: 1.75rem;
  font-weight: 700;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 1.25rem;
}

.about .content p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  opacity: 0.5;
  transition: 0.3s;
  filter: grayscale(100);
}

.clients .swiper-slide img:hover {
  filter: none;
  opacity: 1;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-image {
  position: relative;
  min-height: 400px;
}

.features .features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.features .features-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.features .features-item i {
  font-size: 48px;
  color: var(--accent-color);
  margin-right: 20px;
  line-height: 0;
}

.features .features-item p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  padding: 80px 20px;
  height: 100%;
  transition: all ease-in-out 0.3s;
}

.services .service-item .icon {
  background: var(--accent-color);
  color: var(--contrast-color);
  margin: 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
}

.services .service-item .icon i {
  font-size: 28px;
  transition: ease-in-out 0.3s;
}

.services .service-item h3 {
  font-weight: 700;
  margin: 10px 0 15px 0;
  font-size: 22px;
  transition: 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover {
  box-shadow: 0px 0 25px 0 color-mix(in srgb, var(--default-color), transparent 92%);
  transform: translateY(-10px);
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  --background-color: #000000;
  --default-color: #ffffff;
  --contrast-color: #ffffff;
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  color: var(--background-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 5px;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 0 10px 0;
  }
}

.portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -100%;
  z-index: 3;
  transition: all ease-in-out 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 10%);
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 0;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 10px;
}

.stats .stats-item i {
  font-size: 44px;
  color: var(--accent-color);
  line-height: 0;
  margin-right: 15px;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 40px;
  display: block;
  font-weight: 700;
  line-height: 40px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  --default-color: #ffffff;
  --background-color: #000000;
  --heading-color: #ffffff;
  padding: 80px 0;
  position: relative;
}

.testimonials:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.testimonials .testimonials-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.testimonials .container {
  position: relative;
  z-index: 3;
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 6px solid color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  margin: 0 0 15px 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 50%);
  opacity: 0.5;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--default-color);
  opacity: 1;
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .social {
  position: absolute;
  left: 0;
  bottom: 30px;
  right: 0;
  opacity: 0;
  transition: ease-in-out 0.3s;
  text-align: center;
}

.team .team-member .social a {
  background: color-mix(in srgb, var(--background-color), transparent 25%);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0 3px;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  transition: ease-in-out 0.3s;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team .team-member .social a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

.team .team-member .social i {
  font-size: 18px;
  line-height: 0;
}

.team .team-member .member-info {
  padding: 25px 15px;
}

.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
}

.team .team-member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .team-member:hover .social {
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, white 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
  padding: 20px;
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 88%);
}

.service-details .service-box+.service-box {
  margin-top: 30px;
}

.service-details .service-box h4 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.service-details .services-list a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-top: 15px;
  transition: 0.3s;
}

.service-details .services-list a:first-child {
  margin-top: 0;
}

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .services-list a.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.service-details .services-list a.active i {
  color: var(--contrast-color);
}

.service-details .services-list a:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.service-details .download-catalog a {
  color: var(--default-color);
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: 0.3s;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-details .download-catalog a:last-child {
  padding-bottom: 0;
}

.service-details .download-catalog a i {
  font-size: 24px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .download-catalog a:hover {
  color: var(--accent-color);
}

.service-details .help-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  margin-top: 30px;
  padding: 30px 15px;
}

.service-details .help-box .help-icon {
  font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
  color: var(--contrast-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

@media (max-width: 999px) {
  #portfolio-flters {
    text-align: center;
  }

  #portfolio-flters li {
    display: inline-block;
    float: none;
    margin: 0 auto;
  }

  #portfolio-flters blockquote.instagram-media {
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
  }
}

@font-face {
  font-family: 'ZD';
  src: url('/assets/vendor/ZD.ttf') format('truetype');
}

.custom-font {
  font-family: 'ZD';
}

.white {
  color: rgb(255, 255, 255); /* Set color to white */
}

.about .content .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

/*-----------------------------------------
[Table Of Content]

    01. Typography CSS
    02. Color CSS
    03. Common Style CSS
    04. Header Area Style CSS
        4.1 - Site Navigation Style
    05. Slider Area Style
    06. Banner Area Style
    07. Call to action Style
    08. Product Item Style
    09. Countdown Clock Style
    10. Flash Deals Style
    11. Newsletter Area Style
    12. Brand Logo Area Style
    13. Off Canvas Style CSS
    14. Page Header Style
    15. Gallery Style Css
    16. Contact Page Style
    17. Shop Page Style
    18. Single Product Page Style
    19. Cart Page Style Css
    20. Checkout Page Style Css
    21. Blog Layout Style Css
    22. Blog Details Style Css
    23. Login Register Page Style Css
    24. Footer Style CSS
----------------------------------------*/
/*=====================================
   01. Typography CSS
===================================== */
body {
  color: #303030;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}
body, html {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensure the body takes at least the full viewport height */
}

main {
  flex-grow: 1; /* Allow main content to expand and fill available space */
}

/* Remove text-shadow in selection highlight. */
::-moz-selection {
  background: #eeb644;
  color: #FFFFFF;
  text-shadow: none;
}
::selection {
  background: #eeb644;
  color: #FFFFFF;
  text-shadow: none;
}

/* A better looking default horizontal rule */
hr {
  border: 0;
  border-top: 1px solid #e1e1e1;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  overflow: visible;
}

/* Remove the gap between audio, canvas, iframes,images, videos */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/* Remove default fieldset styles. */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/* Allow only vertical resizing of textareas. */
textarea {
  resize: vertical;
}

/* Anchor Tag Default Style */
a {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  outline: none;
  text-decoration: none;
  font-family: Comic Verdana, Geneva, Tahoma, sans-serif;
  font-weight: auto; /* or 700 for Roboto Bold */
}
a:hover, a:active, a:focus {
  color: inherit;
  outline: none;
  text-decoration: none;
}

textarea:focus, textarea:active, input:focus, input:active {
  outline: none;
}

/* Heading Default Style */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  color: #1b1b1c;
  line-height: 1.2;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
}

h1, .h1 {
  font-size: 60px;
  margin-bottom: 6px;
  margin-top: -15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  h1, .h1 {
    margin-top: -10px;
  }
}
@media only screen and (max-width: 767.98px) {
  h1, .h1 {
    margin-top: -8px;
  }
}

h2, .h2 {
  font-size: 56px;
  margin-bottom: 6px;
  margin-top: -14px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h2, .h2 {
    margin-top: -10px;
  }
}
@media only screen and (max-width: 767.98px) {
  h2, .h2 {
    margin-top: -7px;
  }
}

h3, .h3 {
  font-size: 36px;
  margin-bottom: 10px;
  margin-top: -10px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h3, .h3 {
    margin-top: -9px;
  }
}
@media only screen and (max-width: 767.98px) {
  h3, .h3 {
    margin-top: -6px;
  }
}

h4, .h4 {
  font-size: 32px;
  margin-bottom: 14px;
  margin-top: -8px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  h4, .h4 {
    margin-top: -6px;
  }
}
@media only screen and (max-width: 767.98px) {
  h4, .h4 {
    margin-top: -5px;
  }
}

h5, .h5 {
  font-size: 26px;
  margin-bottom: 15px;
}

h6, .h6 {
  font-size: 20px;
  margin-bottom: 12px;
}

/* Paragraph Margin */
p {
  margin-bottom: 15px;
}
p:last-child {
  margin-bottom: 0;
}

ul {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}

strong, b {
  font-weight: 700;
}

figure {
  margin: 0;
}

img {
  max-width: 100%;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
button:active, button:focus {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

[data-mfp-src], .btn-img-popup {
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.parallax {
  background-repeat: no-repeat;
}

.form-message.alert {
  margin-top: 10px;
}

.slick-slide:focus, .slick-slide:active {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}

/*============================
03. Common Style CSS
==============================*/
/*------------------
3.1 - Buttons Style
--------------------*/
.btn-group .btn {
  margin-right: 15px;
}
.btn-group .btn:last-child {
  margin-right: 0;
}

.btn {
  border: 2px solid #d8d8d8;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  font-family: "Oswald", sans-serif;
  height: 45px;
  letter-spacing: 0.025em;
  line-height: 41px;
  padding: 0 30px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.btn:focus, .btn:active {
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.btn-white {
  background-color: #d8d8d8;
  border-radius: 25px;
  color: #1b1b1c;
}
.btn-white:hover {
  background-color: #eeb644;
  border-color: #eeb644;
  color: #FFFFFF;
}
.btn-brand {
  background-color: #eeb644;
  border-color: #eeb644;
  border-radius: 25px;
  color: #1b1b1c;
}
.btn-brand:hover {
  background-color: #d8d8d8;
  border-color: #d8d8d8;
}
.btn-black {
  background-color: #1b1b1c;
  border-color: #1b1b1c;
  border-radius: 25px;
  color: #FFFFFF;
}
.btn-black:hover {
  background-color: #d8d8d8;
  border-color: #d8d8d8;
  color: #1b1b1c;
}
.btn-bordered {
  border-radius: 0;
  border-width: 1px;
  font-size: 16px;
  padding: 0 40px;
  height: 50px;
  line-height: 48px;
}
.btn-bordered:hover {
  border-color: #eeb644;
  color: #eeb644;
}

/*----------------------
3.2 - Background Image
-----------------------*/
.bg-img {
  background: no-repeat center center;
  background-size: cover;
}
.bg-img-tr {
  background: no-repeat top right;
}
.bg-img-tl {
  background: no-repeat top left;
}
.bg-img-br {
  background: no-repeat bottom right;
}
.bg-img-bl {
  background: no-repeat bottom left;
}
.bg-img-nr {
  background: no-repeat center center;
  background-size: contain;
}

/*-----------------
3.3 - Overflow
-------------------*/
.fix {
  overflow: hidden;
}
.fix-x {
  overflow-x: hidden;
}
.fix-y {
  overflow-y: hidden;
}

/*-------------------------
3.4 - Section title Style
--------------------------*/
.section-title {
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .section-title {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767.98px) {
  .section-title {
    margin-bottom: 40px;
  }
}
.section-title h2 {
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 19px;
}

@media screen and (min-width: 1200px) {
  .container-wide, .slider-area-wrapper .slick-dots {
    max-width: 1200px;
  }
}
@media screen and (min-width: 1500px) {
  .container-wide, .slider-area-wrapper .slick-dots {
    max-width: 1480px;
  }
}

/*--------------------------------
3.5 - Tippy Customization
----------------------------------*/
.tippy-popper .tippy-tooltip {
  background-color: #eeb644;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  padding: 7px 13px;
}
.tippy-popper[x-placement^=top] .tippy-arrow {
  border-top-color: #eeb644 !important;
}
.tippy-popper[x-placement^=bottom] .tippy-arrow {
  border-bottom-color: #eeb644 !important;
}
.tippy-popper[x-placement^=left] .tippy-arrow {
  border-left-color: #eeb644 !important;
}
.tippy-popper[x-placement^=right] .tippy-arrow {
  border-right-color: #eeb644 !important;
}

/*--------------------------------
3.6 - Magnific JS Customization
----------------------------------*/
.ht-mfp {
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.ht-mfp.mfp-bg {
  background: rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.ht-mfp .mfp-content {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  overflow-y: auto;
}
@media only screen and (min-width: 1200px) {
  .ht-mfp .mfp-content {
    max-width: 70%;
  }
}
.ht-mfp .mfp-content .mfp-close {
  display: none;
}
.ht-mfp .mfp-close {
  background-color: #eeb644;
  color: #FFFFFF;
  padding: 0;
  text-align: center;
  opacity: 1;
  top: 50px;
  right: 50px;
  height: 50px;
  width: 50px;
  line-height: 50px;
}
@media only screen and (max-width: 767.98px) {
  .ht-mfp .mfp-close {
    top: 30px;
    right: 30px;
    height: 40px;
    width: 40px;
    line-height: 40px;
  }
}
.ht-mfp .mfp-close:hover {
  background-color: #eeb644;
}
.ht-mfp .mfp-arrow {
  background-color: #eeb644;
  opacity: 1;
  margin-left: 15px;
  height: 55px;
  width: 55px;
}
.ht-mfp .mfp-arrow:before {
  display: none;
}
.ht-mfp .mfp-arrow:after {
  content: "\f104";
  color: #FFFFFF;
  font-family: "FontAwesome";
  font-size: 25px;
  line-height: 40px;
  text-align: center;
  margin: 0;
  padding: 0;
  border: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}
.ht-mfp .mfp-arrow-right {
  margin-left: auto;
  margin-right: 15px;
}
.ht-mfp .mfp-arrow-right:after {
  content: "\f105";
}
.ht-mfp .mfp-arrow:hover {
  background-color: #eaa415;
}
.ht-mfp.zoom-animate.mfp-bg {
  opacity: 0;
}
.ht-mfp.zoom-animate .mfp-content {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  opacity: 0;
}
.ht-mfp.zoom-animate.mfp-ready.mfp-bg {
  opacity: 0.9;
}
.ht-mfp.zoom-animate.mfp-ready .mfp-content {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.ht-mfp.zoom-animate.mfp-removing .mfp-content {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  opacity: 0;
}
.ht-mfp.zoom-animate.mfp-removing.mfp-bg {
  opacity: 0;
}
.ht-mfp.zoom-animate.mfp-removing .mfp-close {
  opacity: 0;
}

/*--------------------------------
3.7 - Blockquote Style
----------------------------------*/
blockquote, .blockquote {
  background-color: #f8f9fc;
  color: #1b1b1c;
  font-size: 18px;
  padding: 42px 44px 80px;
  position: relative;
}
@media only screen and (max-width: 767.98px) {
  blockquote, .blockquote {
    padding: 20px 22px 60px;
  }
}
blockquote:before, .blockquote:before {
  content: "\f10e";
  font-family: "FontAwesome";
  position: absolute;
  right: 40px;
  bottom: 40px;
}
@media only screen and (max-width: 767.98px) {
  blockquote:before, .blockquote:before {
    right: 30px;
    bottom: 20px;
  }
}
blockquote-title, .blockquote-title {
  color: #eeb644;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1;
}

/*--------------------------------
3.8 - Nice Select Customization
----------------------------------*/
.nice-select {
  background-color: transparent;
  border-radius: 0;
  border: 1px solid #e1e1e1;
  color: #1b1b1c;
  float: inherit;
  font-size: 15px;
  padding-left: 0;
}
.nice-select:after {
  border-right-color: #303030;
  border-bottom-color: #303030;
  height: 7px;
  width: 7px;
}
.nice-select .list {
  border-radius: 0;
  color: #1b1b1c;
  font-size: 14px;
  width: 100%;
}

/*--------------------------------
3.9 - Site Boxed Layout
----------------------------------*/
@media only screen and (min-width: 1200px) {
  .boxed-layout {
    -webkit-box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
            box-shadow: -3px 0 50px -2px rgba(0, 0, 0, 0.14);
    max-width: 90%;
    margin: auto;
  }
}

/*--------------------
3.10 - Video Play
---------------------*/
.video-play {
  position: relative;
}
.video-play img {
  width: 100%;
}
.video-play .btn-video-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.btn-video-popup {
  border-radius: 50%;
  background-color: #eeb644;
  color: #FFFFFF;
  display: inline-block;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
  height: 60px;
  width: 60px;
}

/*==========================
02. Color CSS
============================*/
.bg-white {
  background-color: #FFFFFF;
}
.bg-softWhite {
  background-color: #f8f8f8 !important;
}
.bg-brand {
  background-color: #eeb644;
}
.bg-blackSoft {
  background-color: #1b1b1c;
}

.text-brand {
  color: #eeb644;
}

/*==========================
3.0 - Template Spacing
============================*/
.sm-top {
  margin-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sm-top {
    margin-top: 80px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sm-top {
    margin-top: 60px;
  }
}

.sm-bottom {
  margin-bottom: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sm-bottom {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sm-bottom {
    margin-bottom: 60px;
  }
}

.sm-top-lh {
  margin-top: 95px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sm-top-lh {
    margin-top: 75px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sm-top-lh {
    margin-top: 55px;
  }
}

.sm-y-lh {
  margin: 95px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sm-y-lh {
    margin: 75px 0;
  }
}
@media only screen and (max-width: 767.98px) {
  .sm-y-lh {
    margin: 60px 0;
  }
}

.sp-top, .call-to-action-content-area.home-2 {
  padding-top: 100px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sp-top, .call-to-action-content-area.home-2 {
    padding-top: 80px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sp-top, .call-to-action-content-area.home-2 {
    padding-top: 60px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .sp-lg-top {
    padding-top: 100px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sp-md-top {
    padding-top: 80px;
  }
}

.sp-y, .flash-deals-area.home-2 {
  padding: 100px 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sp-y, .flash-deals-area.home-2 {
    padding: 80px 0;
  }
}
@media only screen and (max-width: 767.98px) {
  .sp-y, .flash-deals-area.home-2 {
    padding: 60px 0;
  }
}

/*=============================
04. Header Area Style CSS
==============================*/
.header-area {
  padding: 30px 0;
}
@media only screen and (max-width: 767.98px) {
  .header-area {
    padding: 15px 0;
  }
}
.header-area .nav li {
  margin-right: 35px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .header-area .nav li {
    margin-right: 20px;
  }
}
.header-area .nav li:last-child {
  margin-right: 0;
}
.header-area .nav li a {
  color: #1b1b1c;
  display: block;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}
.header-area .nav li a:hover {
  color: #eeb644;
}

@media only screen and (max-width: 575.98px) {
  .site-logo {
    margin-bottom: 10px;
  }
}

.site-action .login-reg-nav li {
  position: relative;
}
@media only screen and (max-width: 767.98px) {
  .site-action .login-reg-nav li {
    margin-right: 15px;
  }
}
.site-action .login-reg-nav li:after {
  content: "|";
  position: absolute;
  right: -20px;
  top: 0;
}
@media only screen and (max-width: 767.98px) {
  .site-action .login-reg-nav li:after {
    right: -10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .site-action .login-reg-nav li:after {
    right: -12px;
  }
}
.site-action .login-reg-nav li:last-child:after {
  display: none;
}

.mini-cart-wrap {
  margin-left: 60px;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .mini-cart-wrap {
    margin-left: 30px;
  }
}
.mini-cart-wrap .btn-mini-cart {
  font-size: 25px;
  line-height: 1;
  position: relative;
  color: #1b1b1c;
}
.mini-cart-wrap .btn-mini-cart .cart-total {
  background-color: #1b1b1c;
  border-radius: 50%;
  color: #FFFFFF;
  display: block;
  font-size: 50%;
  text-align: center;
  line-height: 20px;
  height: 20px;
  width: 20px;
  position: absolute;
  left: -10px;
  top: 0;
}
.mini-cart-wrap .mini-cart-content {
  background-color: #FFFFFF;
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  padding: 25px 20px;
  position: absolute;
  right: 15px;
  top: 100%;
  margin-top: 32px;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  width: 350px;
  z-index: 99;
}
@media only screen and (max-width: 767.98px) {
  .mini-cart-wrap .mini-cart-content {
    display: none;
  }
}
.mini-cart-wrap .mini-cart-content:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 32px;
}
.mini-cart-wrap .mini-product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}
.mini-cart-wrap .mini-product:last-child {
  margin-bottom: 0;
}
.mini-cart-wrap .mini-product__thumb {
  border: 1px solid rgba(0, 0, 0, 0.07);
  margin-right: 15px;
  -ms-flex-preferred-size: 80px;
      flex-basis: 80px;
  width: 80px;
}
.mini-cart-wrap .mini-product__info {
  -ms-flex-preferred-size: calc(100% - 95px);
      flex-basis: calc(100% - 95px);
  width: calc(100% - 95px);
}
.mini-cart-wrap .mini-product__info .title {
  font-size: 15px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 8px;
}
.mini-cart-wrap .mini-product__info .title a {
  color: #1b1b1c;
}
.mini-cart-wrap .mini-product__info .title a:hover {
  color: #eeb644;
}
.mini-cart-wrap .mini-product__info .mini-calculation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mini-cart-wrap .mini-product__info .mini-calculation .price {
  margin-bottom: 0;
  font-weight: 600;
  vertical-align: middle;
}
.mini-cart-wrap .mini-product__info .mini-calculation .price span {
  color: #eeb644;
}
.mini-cart-wrap .mini-product__info .mini-calculation .remove-pro {
  font-size: 18px;
  line-height: 1;
}
.mini-cart-wrap .mini-product__info .mini-calculation .remove-pro:hover {
  color: #eeb644;
}
.mini-cart-wrap:hover .mini-cart-content {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  visibility: visible;
}

.responsive-menu {
  margin-left: 50px;
  font-size: 20px;
}
@media only screen and (max-width: 767.98px) {
  .responsive-menu {
    margin-left: 20px;
  }
}

/*=============================
4.1 - Site Navigation Style
==============================*/
@media only screen and (min-width: 1200px) {
  .main-menu {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.main-menu li {
  position: relative;
}
.main-menu li.has-submenu .sub-menu {
  background-color: #FFFFFF;
  padding: 20px 20px;
  position: absolute;
  text-align: left;
  top: 100%;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  pointer-events: none;
  margin-top: 34px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  width: 230px;
  z-index: 9999;
  left: 0;
}
.main-menu li.has-submenu .sub-menu:before {
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 0;
  height: 34px;
  width: 100%;
}
.main-menu li.has-submenu .sub-menu li {
  margin-right: 0;
}
.main-menu li.has-submenu .sub-menu li:first-child a {
  padding-top: 0;
}
.main-menu li.has-submenu .sub-menu li:last-child a {
  padding-bottom: 0;
}
.main-menu li.has-submenu .sub-menu li a {
  color: #454545;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
  padding: 8px 0;
}
.main-menu li.has-submenu .sub-menu li a:hover {
  color: #eeb644;
}
.main-menu li.has-submenu:hover .sub-menu {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}
.main-menu li:hover a {
  color: #eeb644;
}

/* Responsive Mobile Menu */
.mobile-menu {
  margin: 0 -10px;
}
.mobile-menu.res-mobile-menu {
  min-height: 310px;
  overflow: auto;
}
.mobile-menu .slicknav_btn {
  display: none;
}
.mobile-menu .slicknav_menu {
  padding: 0;
}
.mobile-menu .slicknav_nav {
  background-color: #FFFFFF;
  display: block !important;
  padding: 0 30px 20px;
}
.mobile-menu .slicknav_nav li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.mobile-menu .slicknav_nav li:last-child {
  border-bottom: 0;
}
.mobile-menu .slicknav_nav li a {
  color: #303030;
  font-size: 16px;
  padding: 6px 0;
  margin: 0;
  text-transform: capitalize;
  position: relative;
}
.mobile-menu .slicknav_nav li a .slicknav_arrow {
  background-color: transparent;
  color: #303030;
  font-size: 15px;
  display: block;
  text-align: center;
  margin: 0;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.mobile-menu .slicknav_nav li a a {
  padding: 0;
}
.mobile-menu .slicknav_nav li a:hover {
  color: #eeb644;
  background-color: transparent;
}
.mobile-menu .slicknav_nav li img {
  display: none;
}
.mobile-menu .slicknav_nav li ul {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 0;
  padding-left: 10px;
}
.mobile-menu .slicknav_nav li ul li a {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.7);
  padding: 8px 0;
}
.mobile-menu .slicknav_nav .slicknav_open > .slicknav_item {
  position: relative;
}
.mobile-menu .slicknav_nav .slicknav_open > .slicknav_item .slicknav_arrow {
  color: #eeb644;
}

/*--------------------------------
Scroll Top Button
----------------------------------*/
.btn-scroll-top {
  background-color: #eeb644;
  border-radius: 50%;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14);
  color: #FFFFFF;
  cursor: pointer;
  font-size: 16px;
  display: block;
  text-align: center;
  line-height: 50px;
  position: fixed;
  bottom: -50px;
  right: 30px;
  height: 50px;
  width: 50px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
@media only screen and (max-width: 767.98px) {
  .btn-scroll-top {
    line-height: 40px;
    height: 40px;
    width: 40px;
  }
}
.btn-scroll-top:hover {
  background-color: #1b1b1c;
}
.btn-scroll-top.show {
  bottom: 30px;
  opacity: 1;
  visibility: visible;
}

/*===========================
05. Slider Area Style
============================*/
.slider-slide-item {
  height: 850px;
}
@media only screen and (max-width: 767.98px) {
  .slider-slide-item {
    height: 450px;
  }
}
.slider-slide-item .slide-content h2, .slider-slide-item .slide-content h3 {
  color: #d8d8d8;
}
.slider-slide-item .slide-content h3 {
  font-weight: 300;
  margin-bottom: 20px;
}
@media only screen and (max-width: 767.98px) {
  .slider-slide-item .slide-content h3 {
    font-size: 26px;
  }
}
.slider-slide-item .slide-content h2 {
  font-weight: 600;
  font-size: 72px;
  margin-bottom: 22px;
}
@media only screen and (max-width: 767.98px) {
  .slider-slide-item .slide-content h2 {
    font-size: 40px;
  }
}
.slider-slide-item .slide-content-inner {
  margin-top: -100px;
}
@media only screen and (max-width: 767.98px) {
  .slider-slide-item .slide-content-inner {
    margin-top: 0;
  }
}
.slider-slide-item .slide-content-inner * {
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  -webkit-transition: 0.8s;
  transition: 0.8s;
  opacity: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .slider-slide-item .slide-img img {
    max-width: 40%;
  }
}
@media only screen and (max-width: 767.98px) {
  .slider-slide-item .slide-img img {
    max-width: 180px;
  }
}

.slider-area-wrapper .slick-arrow {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  color: #FFFFFF;
  line-height: 50px;
  position: absolute;
  left: 50px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  height: 50px;
  width: 50px;
  z-index: 1;
}
.slider-area-wrapper .slick-arrow.slick-next {
  left: auto;
  right: 50px;
}
.slider-area-wrapper .slick-arrow:hover {
  background-color: #eeb644;
}
.slider-area-wrapper .slick-dots {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 200px;
  cursor: pointer;
  padding: 0 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .slider-area-wrapper .slick-dots {
    max-width: 720px;
  }
}
@media only screen and (max-width: 767.98px) {
  .slider-area-wrapper .slick-dots {
    bottom: 50px;
    max-width: 540px;
  }
}
.slider-area-wrapper .slick-dots li {
  background-color: #FFFFFF;
  display: inline-block;
  margin: 0 5px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  height: 2px;
  width: 20px;
}
.slider-area-wrapper .slick-dots li.slick-active {
  background-color: #eeb644;
  width: 30px;
}
.slider-area-wrapper .slick-dots li button {
  display: none;
}
.slider-area-wrapper .slick-active .slide-content-inner * {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.slider-area-wrapper .slick-active .slide-content-inner *:first-child {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.slider-area-wrapper .slick-active .slide-content-inner *:nth-child(2) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.slider-area-wrapper .slick-active .slide-content-inner *:nth-child(3) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.slider-area-wrapper:hover .slick-arrow {
  opacity: 1;
  visibility: visible;
}
.slider-area-wrapper.home-2 .slider-slide-item {
  height: 800px;
}
@media only screen and (max-width: 767.98px) {
  .slider-area-wrapper.home-2 .slider-slide-item {
    height: 680px;
  }
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .slider-area-wrapper.home-2 .slider-slide-item .slide-content h2 {
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 35px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .slider-area-wrapper.home-2 .slider-slide-item .slide-content h2 {
    font-size: 50px;
  }
}
.slider-area-wrapper.home-2 .slider-slide-item .slide-content-inner {
  margin-top: 0;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .slider-area-wrapper.home-2 .slider-slide-item .slide-content-inner {
    margin-top: -200px;
  }
}
.slider-area-wrapper.home-2 .slick-dots {
  text-align: right;
  bottom: 60px;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .slider-area-wrapper.home-2 .slick-dots {
    text-align: left;
  }
}

/*========================
06. Banner Area Style
==========================*/
.banner-mt {
  margin-top: -130px;
}
@media only screen and (max-width: 767.98px) {
  .banner-mt {
    margin-top: 0;
  }
}

.banner-item {
  position: relative;
  overflow: hidden;
  margin-top: 30px;
}
.banner-item__txt {
  left: 42%;
  position: absolute;
  text-align: left;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
}
.banner-item__txt h2, .banner-item__txt h4 {
  color: #FFFFFF;
}
.banner-item__txt h4 {
  font-size: 24px;
  font-weight: 300;
}
.banner-item__txt h2, .banner-item__txt .h3 {
  margin-bottom: 20px;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px), only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .banner-item__txt h2, .banner-item__txt .h3 {
    font-size: 24px;
  }
}
.banner-item__txt .btn {
  font-size: 14px;
  height: 40px;
  line-height: 36px;
}
@media only screen and (max-width: 575.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .banner-item__txt .btn {
    padding: 0 20px;
    height: 35px;
    line-height: 31px;
  }
}
.banner-item__img {
  overflow: hidden;
}
.banner-item__img img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
  width: 100%;
}
.banner-item:hover .banner-item__img img {
  -webkit-transform: scale(1.12);
          transform: scale(1.12);
}

.promotion-code-banner-item {
  overflow: hidden;
}
.promotion-code-banner-item img {
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.promotion-code-banner-item:hover img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}

/*========================
07. Call to action Style
==========================*/
.call-to-action-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding-right: 30px;
  margin-right: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .call-to-action-item {
    display: block;
    margin-right: 10px;
    padding-right: 0;
  }
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-item {
    margin-top: 25px;
    display: block;
    text-align: center;
    margin-right: 0;
    padding-right: 0;
  }
}
.call-to-action-item:after {
  background-color: #d8d8d8;
  position: absolute;
  content: "";
  right: -10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 50px;
  width: 1px;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .call-to-action-item:after {
    display: none;
  }
}
.call-to-action-item__icon {
  margin-right: 30px;
  -ms-flex-preferred-size: 45px;
      flex-basis: 45px;
  max-width: 45px;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .call-to-action-item__icon {
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
}
.call-to-action-item__info {
  -ms-flex-preferred-size: calc(100% - 75px);
      flex-basis: calc(100% - 75px);
  max-width: calc(100% - 75px);
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .call-to-action-item__info {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-item__info {
    max-width: 75%;
    margin: auto;
  }
}
.call-to-action-item__info h3 {
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  margin-top: -3px;
}

.call-to-action-area [class*=col-]:last-child .call-to-action-item:after {
  display: none;
}

.call-to-action-content-area {
  padding: 200px 0 170px;
  margin-top: -130px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .call-to-action-content-area {
    padding-top: 180px;
  }
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-content-area {
    padding-top: 60px;
    margin-top: 30px;
  }
}
.call-to-action-content-area .call-to-action-txt h2 {
  font-size: 40px;
  margin-bottom: 35px;
  margin-top: -7px;
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-content-area .call-to-action-txt h2 {
    font-size: 26px;
  }
  .call-to-action-content-area .call-to-action-txt h2 br {
    display: none;
  }
}
.call-to-action-content-area.home-2 {
  padding-bottom: 170px;
  margin-top: 0;
}

.call-to-action-image-area {
  margin-top: -130px;
}
@media only screen and (max-width: 767.98px) {
  .call-to-action-image-area {
    margin-bottom: 60px;
  }
}
@media only screen and (max-width: 479.98px) {
  .call-to-action-image-area {
    margin-bottom: 95px;
  }
}

.need-help-area {
  padding: 50px 0 45px;
}

.about-content .h3, .about-content h2 {
  margin-bottom: 20px;
}

/*=========================
08. Product Item Style
===========================*/
.product-item {
  background-color: #f6f6f6;
  position: relative;
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/* Add glow effect on hover */
.product-item:hover {
  box-shadow: 0 0 20px 
  5px rgba(255, 196, 81, 0.7); /* Adjust the color and size as needed */
}
.product-item__info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
}
.product-item__info-details {
  display: flex; 
  flex-direction: column; 
  align-items: center;
}
.product-item__thumb {
  position: relative;
}
.product-item__thumb .thumb-secondary {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  visibility: hidden;
}
.product-item__thumb img {
  text-align: center;
  display: block;
  margin: auto;
}
.product-item__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Align content at the bottom */
  align-items: center;
  text-align: center;
  height: 100%; /* Added */
  padding-left: 15px;  /* Add padding to the left */
  padding-right: 15px; /* Add padding to the right */}
.product-item__content .title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .product-item__content .title {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767.98px) {
  .product-item__content .title {
    font-weight: 500;
    font-size: 16px;
  }
}
.product-item__content .title a {
  color: #1c1c1b;
}
.product-item__content .price {
  color: #666666;
}
.product-item__content .price strong {
  color: #1b1b1c;
  font-weight: 600;
}
.product-item__action button:last-child, .product-item__action a:last-child {
  margin-right: 0;
}
.product-item__desc {
  display: none;
}
.product-wrapper .slick-list {
  margin: 0 -15px;
}
.col-sm-6,
.col-lg-4 {
  margin-bottom: 30px;
}
.product-wrapper .slick-slide {
  margin: 0 15px;
}
.product-wrapper .slick-slide.product-item {
  margin-bottom: 30px;
  margin-top: 0;
}
.product-wrapper.columns-5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -30px -15px 0;
}
.product-wrapper.columns-5 .col {
  max-width: 20%;
  -ms-flex-preferred-size: 20%;
      flex-basis: 20%;
  padding: 0 15px;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  .product-wrapper.columns-5 .col {
    max-width: 25%;
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .product-wrapper.columns-5 .col {
    max-width: 33.333%;
    -ms-flex-preferred-size: 33.333%;
        flex-basis: 33.333%;
  }
}
@media only screen and (max-width: 767.98px) {
  .product-wrapper.columns-5 .col {
    max-width: 50%;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
}
@media only screen and (max-width: 479.98px) {
  .product-wrapper.columns-5 .col {
    max-width: 50%;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
}
.products-area-wrapper {
  position: relative;
  z-index: 2;
}
.layout-list [class*=col-] {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  max-width: 100%;
}
.layout-list .product-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .layout-list .product-item {
    display: block;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) and (max-width: 1599.98px) {
  .layout-list .product-item {
    min-height: 450px;
  }
}
.layout-list .product-item__thumb {
  -ms-flex-preferred-size: 35%;
      flex-basis: 35%;
  max-width: 35%;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .layout-list .product-item__thumb {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
}
.layout-list .product-item__thumb img {
  width: 75%;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .layout-list .product-item__thumb img {
    width: auto;
  }
}
.layout-list .product-item__content {
  -ms-flex-preferred-size: 65%;
      flex-basis: 65%;
  max-width: 65%;
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .layout-list .product-item__content {
    padding-bottom: 0;
  }
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .layout-list .product-item__content {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
}
.layout-list .product-item__content .title {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 20px;
}
.layout-list .product-item__desc {
  border-top: 1px solid #e1e1e1;
  margin-top: 25px;
  padding-top: 25px;
  display: block;
}

/*==========================
09. Countdown Clock Style
============================*/
.ht-countdown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.ht-countdown .countdown-item {
  text-align: center;
  position: relative;
  margin-right: 30px;
}
@media only screen and (max-width: 575.98px) {
  .ht-countdown .countdown-item {
    margin-right: 10px;
  }
}
.ht-countdown .countdown-item:last-child {
  padding-right: 0;
  margin-right: 0;
}
.ht-countdown .countdown-item__time {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}
.ht-countdown .countdown-item__label {
  color: #1b1b1c;
  font-size: 22px;
  display: block;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
}
.ht-countdown--light .countdown-item:after {
  color: #FFFFFF;
}
.ht-countdown--light .countdown-item__time {
  color: #eeb644;
}
.ht-countdown--light .countdown-item__label {
  color: rgba(255, 255, 255, 0.6);
}

/*========================
10. Flash Deals Style
=========================*/
@media only screen and (max-width: 767.98px) {
  .flash-deals-content {
    margin-top: 28px;
  }
}
.flash-deals-content h2 {
  font-size: 40px;
  margin-bottom: 25px;
}
.flash-deals-content h3 {
  font-size: 32px;
  font-weight: 600;
}
.flash-deals-content .btn {
  margin-top: 25px;
}
.flash-deals-content .deals-countdown-area {
  margin-top: 50px;
}

.flash-deals-area {
  padding: 230px 0;
  margin-top: -130px;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .flash-deals-area {
    padding: 210px 0;
  }
}
@media only screen and (max-width: 767.98px) {
  .flash-deals-area {
    padding: 192px 0;
  }
}
.flash-deals-area.home-2 {
  margin-top: 70px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .flash-deals-area.home-2 {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767.98px) {
  .flash-deals-area.home-2 {
    margin-top: 30px;
  }
}

@media only screen and (max-width: 767.98px) {
  .flash-deals-thumb {
    max-width: 80%;
    margin: auto;
  }
}

/*=========================
11. Newsletter Area Style
===========================*/
.newsletter-content {
  color: #d8d8d8;
  padding: 100px 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .newsletter-content {
    padding: 80px 15px;
  }
}
@media only screen and (max-width: 767.98px) {
  .newsletter-content {
    padding: 60px 15px;
  }
}
.newsletter-content h2, .newsletter-content h3, .newsletter-content h4 {
  color: #FFFFFF;
  margin-top: 0;
}
.newsletter-content h4 {
  font-size: 24px;
  font-weight: 300;
}
@media only screen and (max-width: 767.98px) {
  .newsletter-content h4 {
    font-size: 20px;
  }
}
.newsletter-content h4 span {
  color: #eeb644;
}
.newsletter-content h2 {
  font-size: 32px;
  font-weight: 600;
}
@media only screen and (max-width: 767.98px) {
  .newsletter-content h2 {
    font-size: 26px;
  }
}

.newsletter-form-wrap {
  margin: 44px auto 0;
}
@media only screen and (min-width: 1200px) {
  .newsletter-form-wrap {
    max-width: 90%;
  }
}
@media only screen and (max-width: 767.98px) {
  .newsletter-form-wrap {
    margin-top: 34px;
  }
}
.newsletter-form-wrap .form-content {
  position: relative;
}
.newsletter-form-wrap .form-content input {
  background-color: transparent;
  border: 1px solid #d8d8d8;
  border-radius: 100px;
  color: #FFFFFF;
  display: block;
  padding: 12px 165px 12px 20px;
  width: 100%;
}
@media only screen and (max-width: 767.98px) {
  .newsletter-form-wrap .form-content input {
    padding: 15px;
  }
}
.newsletter-form-wrap .form-content .btn-newsletter {
  background-color: #eeb644;
  border-radius: 100px;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  position: absolute;
  height: 100%;
  width: 150px;
  top: 0;
  right: 0;
}
@media only screen and (max-width: 767.98px) {
  .newsletter-form-wrap .form-content .btn-newsletter {
    position: static;
    padding: 10px;
    margin-top: 20px;
  }
}
.newsletter-form-wrap .form-content .btn-newsletter:hover {
  background-color: #d8d8d8;
  color: #1b1b1c;
}

.newsletter-area-wrapper {
  margin-top: -130px;
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .newsletter-area-wrapper.home--2 {
    padding-top: 80px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199.98px), only screen and (min-width: 1200px) {
  .newsletter-area-wrapper.home--2 {
    padding-top: 100px;
  }
}

/*============================
12. Brand Logo Area Style
=============================*/
.brand-logo-item {
  text-align: center;
  display: table !important;
  height: 85px;
}
.brand-logo-item a {
  display: table-cell;
  vertical-align: middle;
}
.brand-logo-item img {
  margin: auto;
}

/*============================
13. Off Canvas Style CSS
=============================*/
.off-canvas-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 100vh;
  width: 100vw;
  z-index: 9999;
}
.off-canvas-wrapper.active {
  opacity: 1;
  visibility: visible;
  pointer-events: visible;
}
.off-canvas-wrapper.active .off-canvas-inner {
  -webkit-transform: none;
          transform: none;
}
.off-canvas-wrapper.active .btn-close {
  display: block;
}
.off-canvas-wrapper.active .off-canvas-overlay {
  opacity: 1;
  visibility: visible;
}
.off-canvas-wrapper .close-btn {
  color: #eeb644;
  font-size: 25px;
  line-height: 1;
  right: 0;
  top: 0;
  z-index: 9;
  background: #FFFFFF;
  width: 100%;
  text-align: right;
}
.off-canvas-wrapper .close-btn .btn-close {
  margin-left: auto;
}
.off-canvas-wrapper .close-btn i {
  line-height: 1;
}
.off-canvas-wrapper .close-btn:hover {
  color: #eeb644;
}
.off-canvas-overlay {
  background-color: rgba(0, 0, 0, 0.8);
  cursor: url("../img/icons/cancel-white.png"), auto;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  height: 100%;
  width: 100%;
  z-index: 2;
}
.off-canvas-inner {
  background-color: #FFFFFF;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: 0.45s;
  transition: 0.45s;
  height: 100%;
  z-index: 3;
  overflow-y: auto;
}
.off-canvas-content {
  width: 380px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 50px 0 60px;
  overflow-y: auto;
  overflow-x: hidden;
}
@media only screen and (max-width: 767.98px) {
  .off-canvas-content {
    padding: 45px 0 30px;
  }
}
@media only screen and (max-width: 575.98px) {
  .off-canvas-content {
    width: 280px;
  }
}
.off-canvas-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 20px 15px;
  margin-bottom: 15px;
}

/*========================
14. Page Header Style
==========================*/
.page-header-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2; /* Ensure content is above the overlay */
  height: 100%; /* Set height to 100% to align content vertically */
  text-align: center; /* Center text horizontally */
}

.page-header-wrap {
  position: relative;
  color: #fff;
  background-size: cover; /* Ensure the background image covers the entire element */
  background-position: center; /* Center the background image */
}

.page-header-wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
  z-index: 1;
}

/* Make the image responsive */
.bg-img {
  background-size: cover;
  background-position: center center;
  padding-top: 25%; /* Adjust the aspect ratio */
}

@media only screen and (max-width: 767.98px) {
  .page-header-content {
    height: 200px;
  }
}

.page-header-wrap .page-header-content h1 {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 68px; /* Increase font size here */
  line-height: 1;
  margin-bottom: 0;
}

@media only screen and (max-width: 575.98px) {
  .page-header-wrap .page-header-content h1 {
    font-size: 28px !important;
    line-height: 1.6 !important;
  }
}

.breadcrumb {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 0;
  margin-top: 20px;
}
.breadcrumb li {
  position: relative;
}
.breadcrumb li:after {
  content: ">";
  color: #FFFFFF;
  font-size: 18px;
  font-family: "Oswald", sans-serif;
  vertical-align: middle;
  line-height: 1;
  display: inline-block;
  margin-top: -7px;
  padding-left: 10px;
  padding-right: 10px;
}
.breadcrumb li a {
  color: #FFFFFF;
  font-size: 18px;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  line-height: 1;
}
.breadcrumb li a:hover {
  color: #eeb644;
}
.breadcrumb li.current:after {
  display: none;
}
.breadcrumb li.current a {
  color: #eeb644;
  pointer-events: none;
}

/*=======================
15. Gallery Style Css
=========================*/
.gallery-item {
  position: relative;
  background-color: #f7f7f7;
  cursor: auto;
  margin-top: 30px;
}
.gallery-item:before {
  background-color: rgba(27, 27, 28, 0.7);
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.gallery-item img {
  margin: auto;
  display: block;
}
.gallery-item__text h3 {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 20px;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  width: 100%;
  padding: 0 20px;
  text-align: center;
}
.gallery-item:hover {
  cursor: pointer;
}
.gallery-item:hover:before {
  opacity: 1;
  visibility: visible;
}
.gallery-item:hover .gallery-item__text h3 {
  opacity: 1;
  visibility: visible;
}

/*======================
16. Contact Page Style
========================*/
.contact-info-item {
  border: 1px solid #e1e1e1;
  text-align: center;
  padding: 60px 20px;
  margin-top: 30px;
}
.contact-info-item .con-info-icon {
  border: 1px solid #eeb644;
  border-radius: 100px;
  color: #eeb644;
  font-size: 35px;
  margin: 0 auto 20px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  line-height: 60px;
  height: 60px;
  width: 60px;
}
.contact-info-item .con-info-txt h4 {
  font-size: 18px;
  margin-top: -2px;
}
.contact-info-item:hover .con-info-icon {
  background-color: #eeb644;
  color: #FFFFFF;
}

.contact-form-content h2 {
  font-size: 20px;
  text-transform: uppercase;
  margin-top: -3px;
}

.input-item {
  margin-top: 30px;
}
.input-item input:not([type=checkbox]), .input-item textarea {
  border: 1px solid #e1e1e1;
  display: block;
  padding: 12px 15px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  width: 100%;
}
.input-item input:not([type=checkbox]):focus, .input-item textarea:focus {
  border-color: #eeb644;
}
.input-item .nice-select {
  border-color: #e1e1e1;
  height: 50px;
  padding-left: 15px;
  line-height: 50px;
}
.input-item .nice-select .list {
  max-height: 200px;
  overflow: auto;
}
.input-item .btn-brand {
  font-size: 14px;
  border-radius: 2px;
  margin-top: 10px;
  letter-spacing: 1.6px;
}

.contact-map-wrapper {
  height: 500px;
}
@media only screen and (max-width: 767.98px) {
  .contact-map-wrapper {
    height: 300px;
  }
}

/*=====================
17. Shop Page Style
======================*/
.action-bar-inner {
  border: 1px solid #e1e1e1;
  padding: 15px 30px;
}

@media only screen and (max-width: 575.98px) {
  .layout-switcher {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.layout-switcher li {
  border: 1px solid transparent;
  font-size: 20px;
  text-transform: uppercase;
  margin-right: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  padding: 6px 5px 4px;
}
.layout-switcher li:last-child {
  margin-right: 0;
}
.layout-switcher li.active {
  border-color: #1b1b1c;
}

.sort-by-wrapper .nice-select {
  height: 40px;
  max-width: 300px;
  margin-left: auto;
  padding-left: 15px;
}

@media only screen and (max-width: 575.98px) {
  .pagination {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.pagination li {
  margin-right: 20px;
}
.pagination li:last-child {
  margin-right: 0;
}
.pagination li a {
  color: #a7a7a7;
}
.pagination li:hover a, .pagination li.active a {
  color: #000000;
}
.pagination--2 li a {
  border: 1px solid #e1e1e1;
  display: block;
  text-align: center;
  line-height: 43px;
  height: 45px;
  width: 45px;
}
.pagination--2 li:hover a, .pagination--2 li.active a {
  border-color: #eeb644;
  color: #eeb644;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .sidebar-area {
    margin-top: 84px;
  }
}
@media only screen and (max-width: 767.98px) {
  .sidebar-area {
    margin-top: 64px;
  }
}
.sidebar-item {
  margin-bottom: 60px;
}
@media only screen and (max-width: 767.98px) {
  .sidebar-item {
    margin-bottom: 35px;
  }
}
.sidebar-item:last-child {
  margin-bottom: 0;
}
.sidebar-title {
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 30px;
  margin-top: -5px;
}
.sidebar-title:after {
  background-color: #a8a8a8;
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 1px;
  width: 60%;
}
.sidebar-list li {
  margin-bottom: 15px;
}
.sidebar-list li:last-child {
  margin-bottom: 0;
}
.sidebar-list li a {
  color: #1b1b1c;
  font-weight: 500;
}
.sidebar-list li a:hover {
  color: #eeb644;
}
.sidebar-list li a span {
  color: #898989;
  font-size: 12px;
}
.sidebar-product {
  width: 100%;
  overflow: hidden;
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sidebar-product:last-child {
  margin-bottom: 0;
}
.sidebar-product .image {
  width: 80px;
  -ms-flex-preferred-size: 80px;
      flex-basis: 80px;
  background-color: #d8d8d8;
  margin-right: 15px;
}
.sidebar-product .image img {
  width: 100%;
}
.sidebar-product .content {
  width: calc(100% - 80px);
  -ms-flex-preferred-size: calc(100% - 80px);
      flex-basis: calc(100% - 80px);
  font-size: 13px;
}
.sidebar-product .content .title {
  color: #1b1b1c;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 3px;
}
.sidebar-product .content .title:hover {
  color: #eeb644;
}
.sidebar-product .content .price {
  font-size: 14px;
  display: block;
}
.sidebar-product .content .price .old {
  margin-left: 10px;
  color: #a8a8a8;
  text-decoration: line-through;
}
.sidebar-product .content .ratting {
  display: block;
}
.sidebar-product .content .ratting i {
  font-size: 12px;
  color: #f5cc26;
}
.sidebar-search form {
  position: relative;
}
.sidebar-search form input {
  border: 1px solid #e1e1e1;
  border-radius: 5px;
  display: block;
  padding: 13px 63px 15px 13px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  width: 100%;
}
.sidebar-search form input:focus {
  border-color: #eeb644;
}
.sidebar-search form .btn-src {
  background-color: #1b1b1c;
  border-radius: 0 5px 5px 0;
  color: #FFFFFF;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 50px;
}
.sidebar-search form .btn-src:hover {
  color: #eeb644;
}

.tags li {
  display: inline-block;
}
.tags li a {
  border: 1px solid #e1e1e1;
  line-height: 1em;
  padding: 10px 15px;
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 10px;
  color: #1b1b1c;
  border-radius: 25px;
  font-weight: 500;
}
.tags li a:hover {
  color: #eeb644;
  border-color: #eeb644;
}

/*================================
18. Single Product Page Style
==================================*/
@media only screen and (max-width: 767.98px) {
  .product-thumb-area {
    margin-bottom: 30px;
  }
}
.product-thumb-area .pro-thumb-item img {
  margin: auto;
}
.product-thumb-area .product-details-thumbnail {
  border: 1px solid #e1e1e1;
  text-align: center;
  position: relative;
  overflow: auto;
}

.product-thumb-area .product-details-thumbnail .btn-large-view {
  background-color: #eeb54400;
  color: #1b1b1c;
  display: block;
  font-weight: 600;
  line-height: 22px;
  padding: 5px 0;
  position: absolute;
  text-align: center;
  width: 136px;
  bottom: 10px; /* Adjust as needed */
  right: 10px; /* Adjust as needed */
  transform: none; /* Remove centering */
}

.product-thumb-area .product-details-thumbnail .btn-large-view i {
  margin-left: 3px;
  vertical-align: middle;
}
.product-thumb-area .product-details-thumbnail-nav {
  margin-top: 10px;
}
.product-thumb-area .product-details-thumbnail-nav .pro-thumb-item {
  border: 1px solid #e1e1e1;
  text-align: center;
  cursor: pointer;
}
.product-thumb-area .product-details-thumbnail-nav .slick-list {
  margin: 0 -5px;
}
.product-thumb-area .product-details-thumbnail-nav .slick-list .slick-slide {
  margin: 0 5px;
}

@media only screen and (min-width: 1200px) {
  .prod-details-info-content {
    padding-left: 20px;
  }
}
.prod-details-info-content h2 {
  font-size: 30px;
  margin-top: -6px;
}
@media only screen and (max-width: 767.98px) {
  .prod-details-info-content h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
  }
}
.prod-details-info-content .price {
  font-size: 24px;
  font-family: "Poppins", sans-serif;
  margin-bottom: 33px;
}
@media only screen and (max-width: 767.98px) {
  .prod-details-info-content .price {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
.prod-details-info-content .price-amount {
  font-size: 18px;
  font-weight: 500;
  vertical-align: middle;
}

.product-config {
  margin: 40px 0;
}
.product-config .table {
  margin-bottom: 0;
}
.product-config .table-bordered td, .product-config .table-bordered th {
  border-color: #e1e1e1;
}
.product-config .table th {
  font-size: 18px;
  font-weight: 500;
}
.product-config .table .config-option a {
  color: #1b1b1c;
  font-size: 16px;
  font-weight: 500;
  margin-right: 10px;
}
.product-config .table .config-option a:last-child {
  margin-right: 0;
}
.product-config .table .config-option a:hover {
  color: #eeb644;
}

.product-meta {
  margin-top: 40px;
}
.product-meta span:not(.sku) {
  display: block;
  font-size: 16px;
  margin-bottom: 15px;
}
.product-meta span:not(.sku):last-child {
  margin-bottom: 0;
}
.product-meta a {
  color: #1b1b1c;
  margin-right: 5px;
  font-size: 15px;
  vertical-align: middle;
}
.product-meta a:last-child {
  margin-right: 0;
}
.product-meta a:hover {
  color: #eeb644;
}

.pro-qty {
  border: 1px solid #e1e1e1;
  display: inline-block;
  position: relative;
  width: 150px;
}
@media only screen and (max-width: 767.98px), only screen and (min-width: 768px) and (max-width: 991.98px) {
  .pro-qty {
    width: 120px;
  }
}
.pro-qty input {
  font-weight: 600;
  border: none;
  text-align: center;
  padding: 12px 45px;
  outline: none;
  width: 100%;
}
.pro-qty a {
  color: #000000;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  position: absolute;
  top: 0;
  line-height: 50px;
  height: 100%;
  width: 35px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .pro-qty a {
    width: 35px;
    line-height: 54px;
  }
}
@media only screen and (max-width: 767.98px) {
  .pro-qty a {
    width: 35px;
    line-height: 48px;
  }
}
.pro-qty a:hover {
  background-color: #eeb644;
  border-color: #eeb644;
  color: #FFFFFF;
}
.pro-qty a.inc {
  right: 0;
  border-left: 1px solid #e1e1e1;
}
.pro-qty a.dec {
  left: 0;
  border-right: 1px solid #e1e1e1;
}

.product-description-review {
  margin-top: 80px;
}
@media only screen and (max-width: 767.98px) {
  .product-description-review {
    margin-top: 60px;
  }
}
.product-description-review .desc-review-tab-menu {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.product-description-review .desc-review-tab-menu li {
  width: 100%;
}
.product-description-review .desc-review-tab-menu li button {
  background-color: #1b1b1c;
  border-right: 2px solid #ddd;
  color: #FFFFFF;
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  padding: 20px 0;
  width: 100%;
}
.product-description-review .desc-review-tab-menu li button:last-child {
  border: none;
}
.product-description-review .desc-review-tab-menu li button.active {
  background-color: #eeb644;
}
@media only screen and (max-width: 767.98px) {
  .product-description-review .desc-review-tab-menu li button {
    font-size: 15px;
    font-weight: 500;
    padding: 10px 0;
  }
}
.product-description-review .tab-content {
  background-color: #f6f6f6;
  padding: 45px;
}
@media only screen and (max-width: 767.98px) {
  .product-description-review .tab-content {
    padding: 25px 15px;
  }
}

.product-rating-wrap .average-rating {
  margin-bottom: 30px;
}
.product-rating-wrap .average-rating h4 {
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 3px;
}
.product-rating-wrap .display-ratings .rating-item {
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.product-rating-wrap .display-ratings .rating-item:last-child {
  margin-bottom: 0;
}
.product-rating-wrap .display-ratings .rating-item .rating-author-pic {
  max-width: 50px;
  -ms-flex-preferred-size: 50px;
      flex-basis: 50px;
  border-radius: 2px;
  overflow: hidden;
  margin-right: 10px;
}
.product-rating-wrap .display-ratings .rating-item .rating-author-txt {
  border: 1px solid #e1e1e1;
  border-radius: 2px;
  padding: 15px;
  -ms-flex-preferred-size: calc(100% - 60px);
      flex-basis: calc(100% - 60px);
  max-width: calc(100% - 60px);
}
.product-rating-wrap .display-ratings .rating-item .rating-author-txt .rating-meta h3 {
  font-size: 14px;
  margin-top: 0;
  font-family: "Poppins", sans-serif;
  display: inline-block;
}
.product-rating-wrap .display-ratings .rating-item .rating-author-txt .rating-meta .time {
  vertical-align: middle;
  margin-left: 5px;
  font-size: 13px;
}
.product-rating-wrap .display-ratings .rating-item .rating-author-txt .rating-star {
  color: #eeb644;
  font-size: 14px;
  margin-bottom: 5px;
}
.product-rating-wrap .display-ratings .rating-item .rating-author-txt .rating-star i {
  margin-right: 5px;
}
.product-rating-wrap .display-ratings .rating-item .rating-author-txt .rating-star i:last-child {
  margin-right: 0;
}
.product-rating-wrap .rating-form-wrapper {
  margin-top: 60px;
}
.product-rating-wrap .rating-form-wrapper h3 {
  font-size: 24px;
  font-weight: 500;
  margin-top: -5px;
  margin-bottom: 20px;
}
.product-rating-wrap .rating-form-wrapper .rating-form h5 {
  font-weight: 400;
  font-size: 18px;
  margin-bottom: 8px;
}
.product-rating-wrap .rating-form-wrapper .rating-form .rating-star i {
  color: #ccc;
  margin-right: 10px;
}
.product-rating-wrap .rating-form-wrapper .rating-form .rating-star i:last-child {
  margin-right: 0;
}
.product-rating-wrap .rating-form-wrapper .rating-form .rating-star i:hover ~ i {
  color: #ccc;
}
.product-rating-wrap .rating-form-wrapper .rating-form .rating-star:hover i {
  cursor: pointer;
  color: #eeb644;
}
.product-rating-wrap .rating-form-wrapper .rating-form input, .product-rating-wrap .rating-form-wrapper .rating-form textarea {
  background-color: #FFFFFF;
  border: 1px solid #e1e1e1;
  display: block;
  padding: 12px 20px;
  width: 100%;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.product-rating-wrap .rating-form-wrapper .rating-form input:focus, .product-rating-wrap .rating-form-wrapper .rating-form textarea:focus {
  border-color: #eeb644;
}

/*==================================
19. Cart Page Style Css
===================================*/
.shopping-cart-table thead th {
  color: #1b1b1c;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  border-bottom: 0;
}
.shopping-cart-table tr td, .shopping-cart-table tr th {
  vertical-align: middle;
  width: 15%;
  padding: 10px;
  border-color: #e1e1e1;
  white-space: nowrap;
}
.shopping-cart-table tr td.product-list, .shopping-cart-table tr th.product-list {
  width: 55%;
}
.shopping-cart-table .product-list .remove-icon {
  margin-right: 15px;
}
.shopping-cart-table .product-list .remove-icon button {
  color: #303030;
}
.shopping-cart-table .product-list .remove-icon button:hover {
  color: #eeb644;
}
.shopping-cart-table .product-list .product-thumb {
  display: block;
  width: 120px;
  margin-right: 20px;
}
.shopping-cart-table .product-list .product-name {
  color: #1b1b1c;
  line-height: 1;
}
.shopping-cart-table .product-list .product-name:hover {
  color: #eeb644;
}
.shopping-cart-table .pro-qty {
  width: 120px;
  line-height: 40px;
}
.shopping-cart-table .pro-qty input {
  padding: 10px 0;
  font-weight: 400;
  height: 40px;
}
.shopping-cart-table .pro-qty a {
  width: 30px;
  line-height: 44px;
  font-weight: 400;
  font-size: 16px;
}
.shopping-cart-table .add-cart .btn {
  font-size: 13px;
  padding: 0 20px;
  height: 36px;
  line-height: 30px;
}

.cart-coupon-update-area {
  border: 1px solid #e1e1e1;
  border-top: 0;
  padding: 20px 30px 30px;
}
.cart-coupon-update-area button {
  font-size: 14px;
  font-weight: 700;
}
.cart-coupon-update-area button:hover {
  color: #eeb644;
}
.cart-coupon-update-area .coupon-form-wrap {
  width: 55%;
}
@media only screen and (max-width: 575.98px) {
  .cart-coupon-update-area .coupon-form-wrap {
    width: 100%;
  }
}
.cart-coupon-update-area .coupon-form-wrap form {
  position: relative;
}
.cart-coupon-update-area .coupon-form-wrap form input {
  border: none;
  border-bottom: 1px solid #e1e1e1;
  display: block;
  outline: none;
  padding: 5px 100px 5px 0;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  width: 100%;
}
.cart-coupon-update-area .coupon-form-wrap form input:focus {
  border-color: #eeb644;
}
.cart-coupon-update-area .coupon-form-wrap form .btn-apply {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.cart-coupon-update-area .cart-update-buttons button:nth-child(1n+2) {
  margin-left: 10px;
}

.cart-calculate-area {
  background-color: #f7f7f7;
  padding: 30px;
}
.cart-calculate-area h5 {
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 20px;
}
.cart-calculate-area .cart-cal-table {
  white-space: nowrap;
}
.cart-calculate-area .cart-cal-table table {
  margin-bottom: 0;
}
.cart-calculate-area .cart-cal-table td, .cart-calculate-area .cart-cal-table th {
  font-size: 16px;
  font-weight: 400;
  padding: 5px 0 15px;
}
.cart-calculate-area .cart-cal-table .shipping-method li {
  margin-bottom: 15px;
}
.cart-calculate-area .cart-cal-table .shipping-method li:last-child {
  margin-bottom: 0;
}
.cart-calculate-area .cart-cal-table .order-total {
  border-top: 1px solid #e1e1e1;
}
.cart-calculate-area .cart-cal-table .order-total th, .cart-calculate-area .cart-cal-table .order-total td {
  padding-top: 15px;
}
.cart-calculate-area .proceed-checkout-btn {
  margin: 15px 0 0;
}
.cart-calculate-area .proceed-checkout-btn .btn {
  font-size: 14px;
}

.table-responsive::-webkit-scrollbar-thumb, .list::-webkit-scrollbar-thumb {
  border-radius: 0;
  border: 0;
  background-color: #eeb644;
}
.table-responsive::-webkit-scrollbar, .list::-webkit-scrollbar {
  background-color: rgba(238, 182, 68, 0.3);
  -webkit-appearance: none;
  width: 15px;
  height: 5px;
}

.form-check-input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.form-check-input:checked {
  border-color: #eeb644;
  background-color: #eeb644;
}

/*==========================================
20. Checkout Page Style Css
===========================================*/
.checkout-page-coupon-area .card {
  border: none;
  padding: 0;
}
.checkout-page-coupon-area .card h3 {
  background-color: #eeb644;
  color: #1b1b1c;
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
  padding: 20px 30px;
}
@media only screen and (max-width: 575.98px) {
  .checkout-page-coupon-area .card h3 {
    font-size: 14px;
    padding: 10px 15px;
  }
}
.checkout-page-coupon-area .card h3 i {
  color: #FFFFFF;
  margin-right: 5px;
  font-size: 20px;
  vertical-align: middle;
}
.checkout-page-coupon-area .card h3 span {
  cursor: pointer;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}
.checkout-page-coupon-area .card h3 span:hover {
  color: #FFFFFF;
}
.checkout-page-coupon-area .card .card-body {
  padding: 0;
  margin-top: 30px;
}
.checkout-page-coupon-area .card .card-body .apply-coupon-wrapper .form-input-item input {
  font-size: 16px;
  padding: 10px 0;
}

.checkout-billing-details-wrap {
  margin-top: 90px;
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .checkout-billing-details-wrap {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767.98px) {
  .checkout-billing-details-wrap {
    margin-top: 40px;
  }
}
.checkout-billing-details-wrap h2 {
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 46px;
}
@media only screen and (max-width: 767.98px) {
  .checkout-billing-details-wrap h2 {
    margin-bottom: 26px;
  }
}
.checkout-billing-details-wrap h2:before {
  background-color: #1b1b1c;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 50px;
}

.billing-form-wrap .form-input-item {
  margin-top: 40px;
}
.billing-form-wrap .form-input-item input, .billing-form-wrap .form-input-item textarea {
  font-size: 16px;
  padding: 5px 0;
}
.billing-form-wrap .form-input-item input::-webkit-input-placeholder, .billing-form-wrap .form-input-item textarea::-webkit-input-placeholder {
  color: #303030;
}
.billing-form-wrap .form-input-item input::-moz-placeholder, .billing-form-wrap .form-input-item textarea::-moz-placeholder {
  color: #303030;
}
.billing-form-wrap .form-input-item input:-ms-input-placeholder, .billing-form-wrap .form-input-item textarea:-ms-input-placeholder {
  color: #303030;
}
.billing-form-wrap .form-input-item input::-ms-input-placeholder, .billing-form-wrap .form-input-item textarea::-ms-input-placeholder {
  color: #303030;
}
.billing-form-wrap .form-input-item input::placeholder, .billing-form-wrap .form-input-item textarea::placeholder {
  color: #303030;
}
.billing-form-wrap .form-input-item .nice-select:after {
  border-right-color: #303030;
  border-bottom-color: #303030;
}
.billing-form-wrap .form-input-item .nice-select .current {
  font-size: 16px;
  color: #303030;
}

.checkout-box-wrap .account-create {
  margin-top: 25px;
  font-size: 16px;
}
.checkout-box-wrap .account-create, .checkout-box-wrap .ship-to-different {
  display: none;
}

.order-details-area-wrap {
  border: 2px solid #e1e1e1;
  padding: 50px 30px;
  margin-top: 80px;
}
@media only screen and (max-width: 575.98px) {
  .order-details-area-wrap {
    padding: 30px 20px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  .order-details-area-wrap {
    margin-top: 60px;
  }
}
@media only screen and (max-width: 767.98px) {
  .order-details-area-wrap {
    margin-top: 40px;
  }
}
.order-details-area-wrap h2 {
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 35px;
}
@media only screen and (max-width: 767.98px) {
  .order-details-area-wrap h2 {
    margin-bottom: 26px;
  }
}
.order-details-area-wrap h2:before {
  background-color: #1b1b1c;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 50px;
}
.order-details-area-wrap .order-details-table {
  line-height: 1;
  white-space: nowrap;
}
.order-details-area-wrap .order-details-table .custom-control-label, .order-details-area-wrap .order-details-table th {
  font-weight: 400;
}
.order-details-area-wrap .order-details-table .form-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.order-details-area-wrap .order-details-table .form-check-label {
  padding-left: 10px;
}
.order-details-area-wrap .order-details-table .table thead {
  border-bottom: 1px solid #e1e1e1;
  margin-bottom: 27px;
}
.order-details-area-wrap .order-details-table .table thead th {
  margin-bottom: 27px;
}
.order-details-area-wrap .order-details-table .table tbody {
  border-bottom: 1px solid #e1e1e1;
}
.order-details-area-wrap .order-details-table .table tbody .cart-item {
  font-size: 16px;
}
.order-details-area-wrap .order-details-table .table tbody .cart-item:first-child td {
  padding-top: 30px;
}
.order-details-area-wrap .order-details-table .table tbody .cart-item:last-child td {
  padding-bottom: 30px;
}
.order-details-area-wrap .order-details-table .table tfoot .shipping .shipping-method li {
  margin-bottom: 15px;
}
.order-details-area-wrap .order-details-table .table tfoot .shipping .shipping-method li:last-child {
  margin-bottom: 0;
}
.order-details-area-wrap .order-details-table .table tfoot .shipping .shipping-method .custom-control-label {
  line-height: 23px;
}
.order-details-area-wrap .order-details-table .table tfoot .total-amount {
  font-size: 20px;
  font-weight: 600;
}
.order-details-area-wrap .order-details-table .table tfoot tr {
  border-bottom: 1px solid #e1e1e1;
}
.order-details-area-wrap .order-details-table .table tr td, .order-details-area-wrap .order-details-table .table tr th {
  padding: 15px 0;
}
.order-details-area-wrap .order-details-table .table tr td:last-child, .order-details-area-wrap .order-details-table .table tr th:last-child {
  text-align: right;
}
.order-details-area-wrap .order-details-table .product-title .product-quantity {
  color: #8d8d8d;
  font-size: 14px;
}
.order-details-area-wrap .order-details-footer {
  font-size: 15px;
}

/*=============================
21. Blog Layout Style Css
==============================*/
.blog-item {
  position: relative;
  margin-top: 25px;
}
.blog-item__info {
  position: relative;
  padding-left: 70px;
  padding-top: 25px;
}
.blog-item__info .post-date {
  border-radius: 5px;
  border: 1px solid #e1e1e1;
  text-align: center;
  padding: 10px;
  margin-right: 20px;
  width: 50px;
  position: absolute;
  left: 0;
  top: 25px;
}
.blog-item__info .post-date span {
  display: block;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
  color: #1b1b1c;
  font-family: "Oswald", sans-serif;
}
.blog-item__info .post-date span:first-child {
  padding-bottom: 5px;
}
.blog-item__info .post-meta {
  margin-bottom: 10px;
  margin-top: -4px;
}
.blog-item__info .post-meta a, .blog-item__info .post-meta span {
  color: #1b1b1c;
  font-family: "Oswald", sans-serif;
}
.blog-item__info .post-meta a a:hover, .blog-item__info .post-meta span a:hover {
  color: #eeb644;
}
.blog-item__info .post-meta span:after {
  content: "|";
  padding-left: 3px;
}
.blog-item__info .post-meta span:last-child:after {
  display: none;
}
.blog-item__info .post-title {
  font-size: 20px;
  font-weight: 500;
  margin-top: -5px;
  margin-bottom: 10px;
}
.blog-item__info .post-title a {
  color: #1b1b1c;
}
.blog-item__info .post-title a:hover {
  color: #eeb644;
}

/*==============================
22. Blog Details Style Css
===============================*/
.blog-post-details .blog-post-thumb {
  margin-bottom: 50px;
}
@media only screen and (max-width: 767.98px) {
  .blog-post-details .blog-post-thumb {
    margin-bottom: 35px;
  }
}
.blog-post-details .blog-post-thumb img {
  width: 100%;
}
.blog-post-details .blog-post-txt h2 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 18px;
  margin-top: -6px;
}
@media only screen and (max-width: 767.98px) {
  .blog-post-details .blog-post-txt h2 {
    font-size: 24px;
    font-weight: 400;
  }
}
.blog-post-details .blog-post-txt p, .blog-post-details .blog-post-txt img, .blog-post-details .blog-post-txt blockquote {
  margin-bottom: 30px;
}
.blog-post-details .share-article {
  margin-top: 50px;
}
.blog-post-details .share-article h6 {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.blog-post-details .share-article .share-icons {
  border-top: 1px solid #e1e1e1;
  padding-top: 20px;
  margin-top: 20px;
}
.blog-post-details .share-article .share-icons a {
  color: #FFFFFF;
  display: block;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
  height: 40px;
  width: 50px;
}
.blog-post-details .share-article .share-icons a.facebook {
  background-color: #3B5999;
}
.blog-post-details .share-article .share-icons a.twitter {
  background-color: #1DA1F2;
}
.blog-post-details .share-article .share-icons a.reddit {
  background-color: #FF4500;
}
.blog-post-details .share-article .share-icons a.pinterest {
  background-color: #CB2028;
}
.blog-post-details .comment-area-wrapper .btn-outline {
  border-radius: 0;
  border-width: 1px;
}

.author-info {
  border-top: 8px solid rgba(225, 225, 225, 0.5);
  border-bottom: 1px solid #e1e1e1;
  padding: 20px 0;
}
.author-info .author-thumb {
  border-radius: 50%;
  overflow: hidden;
  height: 100px;
  width: 100px;
  margin: 0 auto 15px;
}
.author-info .author-txt {
  text-align: center;
}
.author-info .author-txt h5 {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 0;
}
.author-info .author-txt h5 .designation {
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  display: block;
  font-weight: 500;
  margin-top: 7px;
}
.author-info .author-txt .member-social-icons {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 15px;
}
.author-info .author-txt .member-social-icons a {
  color: #303030;
  display: inline-block;
  height: auto;
  width: auto;
  margin-right: 15px;
  line-height: 1;
}
.author-info .author-txt .member-social-icons a:last-child {
  margin-right: 0;
}

/*==================================
23. Login Register Page Style Css
===================================*/
.login-form-style,
.register-form-style {
  background: transparent none repeat scroll 0 0;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  padding: 80px;
}
@media only screen and (max-width: 767.98px) {
  .login-form-style,
.register-form-style {
    padding: 50px 50px;
  }
}
@media only screen and (max-width: 575.98px) {
  .login-form-style,
.register-form-style {
    padding: 50px 30px;
  }
}
.login-form-style form input,
.register-form-style form input {
  background-color: transparent;
  border: 1px solid #e1e1e1;
  font-size: 15px;
  height: 50px;
  margin-bottom: 30px;
  padding: 0 15px;
  color: #303030;
  width: 100%;
}
.login-form-style form input::-moz-input-placeholder,
.register-form-style form input::-moz-input-placeholder {
  opacity: 1;
  color: #303030;
}
.login-form-style form input::-webkit-input-placeholder,
.register-form-style form input::-webkit-input-placeholder {
  opacity: 1;
  color: #303030;
}
@media only screen and (max-width: 575.98px) {
  .login-form-style form input,
.register-form-style form input {
    margin-bottom: 20px;
  }
}
.login-form-style form input[type=checkbox],
.register-form-style form input[type=checkbox] {
  height: 15px;
  margin: 0;
  position: relative;
  top: 2px;
  width: 17px;
  color: #303030;
}
.login-form-style form input[type=checkbox]:-moz-input-placeholder,
.register-form-style form input[type=checkbox]:-moz-input-placeholder {
  color: #303030;
  opacity: 1;
}
.login-form-style form input[type=checkbox]:-webkit-input-placeholder,
.register-form-style form input[type=checkbox]:-webkit-input-placeholder {
  color: #303030;
  opacity: 1;
}
.login-form-style form .login-toggle-btn,
.register-form-style form .login-toggle-btn {
  padding: 10px 0 19px;
}
@media only screen and (max-width: 575.98px) {
  .login-form-style form .login-toggle-btn,
.register-form-style form .login-toggle-btn {
    padding: 0px 0 17px;
  }
}
.login-form-style form .login-toggle-btn label,
.register-form-style form .login-toggle-btn label {
  font-size: 15px;
  font-weight: 400;
}
@media only screen and (max-width: 575.98px) {
  .login-form-style form .login-toggle-btn label,
.register-form-style form .login-toggle-btn label {
    font-size: 14px;
  }
}
.login-form-style form .login-toggle-btn a,
.register-form-style form .login-toggle-btn a {
  float: right;
  font-size: 15px;
  color: #303030;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
@media only screen and (max-width: 575.98px) {
  .login-form-style form .login-toggle-btn a,
.register-form-style form .login-toggle-btn a {
    font-size: 14px;
  }
}
.login-form-style form .login-toggle-btn a:hover,
.register-form-style form .login-toggle-btn a:hover {
  color: #eeb644;
}
.login-form-style form .login-btn button,
.register-form-style form .login-btn button {
  background-color: #303030;
  color: #fff;
  border: medium none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  padding: 16px 30px 15px;
  display: block;
  width: 100%;
}
.login-form-style form .login-btn button:hover,
.register-form-style form .login-btn button:hover {
  background-color: #eeb644;
}

.hero .icon-box .dropdown {
  position: absolute;
  top: calc(100% + 10px); /* Position dropdown below the icon box */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center horizontally */
  width: 300px;
  display: none;
  z-index: 1000; /* Ensure dropdown appears above other content */
  background-color:#eeb644; /* Grey background color */
  padding: 10px; /* Adjust padding as needed */
}
.hero .icon-box .dropdown ul {
  margin: 0;
  padding: 10px 0;
  background: var(--nav-dropdown-background-color);
  box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  list-style: none;
  border-radius: 0;
}

.hero .icon-box .dropdown ul li {
  min-width: 200px;
}

.hero .icon-box .dropdown ul a {
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  text-transform: none;
  color: var(--nav-dropdown-color);
  text-decoration: none;
}

.hero .icon-box .dropdown ul a:hover,
.hero .icon-box .dropdown ul .active:hover,
.hero .icon-box .dropdown ul li:hover > a {
  background-color: var(--nav-dropdown-hover-color);
}

.parent-container {
  overflow: visible; /* Adjust as necessary */
}

.btn-buy-now {
  display: inline-block;
  background-color: #eeb644; /* Button background color */
  color: #ffffff; /* Button text color */
  padding: 12px 24px; /* Padding inside the button */
  border-radius: 5px; /* Rounded corners */
  text-decoration: none; /* Remove underline from anchor tag */
  transition: background-color 0.3s ease; /* Smooth background color transition */
  font-size: large;
  text-align: center; /* Center text horizontally */
    margin: 0 auto; /* Center button horizontally */
    display: block; /* Ensure button takes full width on mobile */
}

.btn-buy-now:hover {
  background-color: #b88725; /* Darker background color on hover */
}

.whatsapp-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background-color: #eeb644; /* WhatsApp green color */
  border: none;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-bottom: 10px;
}

.whatsapp-button:hover {
  background-color: #128C7E; /* Darker shade for hover effect */
}

.icon-box-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.icon-box-link .icon-box {
  /* Add any additional styling needed for the icon-box */
}