/*!
Theme Name: Al Mheiri
Theme URI: http://underscores.me/
Author: babar
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: al-mheiri
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Al Mheiri is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root {
  --primary-color: #000;
  --yellow-color: #ffd400;
  --orange-color: rgba(207, 157, 82, 0.88);
  --swiper-theme-color: #fff;
  --swiper-navigation-size: 36px;
}

html,
body {
  font-family: Helvetica, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
}

body.woocommerce-page {
  margin-top: 160px;
}

/* .swiper {
  width: 600px;
  height: 300px;
} */

.btn {
  border-radius: 0;
}

.btn-primary {
  background-color: #cf9c51;
  color: #fff;
  border-color: transparent;
}

.btn-primary:hover {
  background-color: #cf9c51;
  color: #fff;
  border-color: transparent;
}

.btn-secondary {
  border: 1px solid transparent;
  background-color: #aeafb287;
  color: #0a0a10;
  transform: skewX(-30deg);
}

.btn-secondary:hover,
.btn-secondary.active {
  border: 1px solid #aeafb287;
  background-color: #fff;
  color: #0a0a10;
}

.btn-secondary span {
  display: inline-block;
  transform: skewX(30deg);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.8rem;
}

.site-header .navbar {
  transition: all 0.3s ease;
}

.woocommerce-page .site-header .navbar {
  box-shadow: 0 1px 10px var(--primary-color);
  background-color: var(--primary-color);
}

.site-header.sticky-top .navbar {
  box-shadow: 0 1px 10px var(--primary-color);
  background-color: var(--primary-color);
}

.site-header .navbar .container {
  border-bottom: 1px solid rgb(255 255 255 / 50%);
  transition: all 0.3s ease;
}

body.woocommerce-page .site-header .navbar .container:last-child {
  border-bottom: none;
}

.site-header.sticky-top .navbar .container:last-child {
  border-bottom: none;
}

.site-header a.navbar-brand > img {
  width: 250px;
  height: 90px;
  padding-block: 10px;
  transition: all 0.3s ease;
}

.site-header.sticky-top a.navbar-brand > img {
  width: 180px;
  height: 70px;
}

.site-header #navbarNav a {
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.site-header #navbarNav li {
  padding-block: 1rem;
  transition: all 0.3s ease;
}

.site-header.sticky-top #navbarNav li {
  padding-block: 0.5rem;
}

/* #navbarNav li.lang-item {
  border-left: 1px solid #fff;
} */

/* body:not(.home) #navbarNav li.lang-item {
  border-left: 1px solid #1d2855;
} */

/* body:not(.home) .site-header.sticky-top #navbarNav li.lang-item {
  border-left: 1px solid #fff;
} */

/* #navbarNav ul li.dropdown > .dropdown-menu {
  display: block;
  padding: 0;
  opacity: 0;
  width: max-content;
  border: 0;
  height: 0;
  transition: opacity 0.3s ease-out, height 0.3s ease-out;
  overflow: hidden;
} */

/* #navbarNav ul li.dropdown:hover > .dropdown-menu {
  opacity: 1;
  height: fit-content;
} */

/* #navbarNav ul li.dropdown .dropdown-menu li a {
  padding-inline: 1rem;
} */

/* #navbarNav ul li.dropdown .dropdown-menu li a {
  background: #1d2855;
  color: var(--text-color);
  border-left: 0px solid var(--primary-color);
  transition: all 0.3s ease;
} */

/* #navbarNav ul li.dropdown .dropdown-menu li a:hover {
  background: #1d2855;
  color: #fff;
  border-left: 5px solid var(--primary-color);
  transition: all 0.3s ease;
} */

.dropdown-toggle::after {
  border: none !important;
  vertical-align: unset;
  font-family: 'Font Awesome 6 Free';
  font-weight: 600;
  content: '\f078';
  transition: transform 0.3s ease;
}

/* #navbarNav ul li.dropdown > .dropdown-toggle:active {
  pointer-events: none;
} */

/* #navbarNav ul li.dropdown > .dropdown-toggle {
  padding-block: 0.5rem;
} */

/* #navbarNav ul li.dropdown:hover > .dropdown-toggle {
  color: #fff;
} */

/* body:not(.home) #navbarNav ul li.dropdown:hover > .dropdown-toggle {
  background: #1d2855;
  color: #1d2855;
} */

/* body:not(.home)
  .site-header.sticky-top
  #navbarNav
  ul
  li.dropdown:hover
  > .dropdown-toggle {
  color: #fff;
} */

/* #navbarNav ul li.dropdown:hover > .dropdown-toggle::after {
  transform: rotate(180deg);
} */

#menu-main-menu > li.menu-item:last-child a {
  text-decoration: none;
  background-color: var(--primary-color);
  color: #fff;
  padding-inline: 12px;
  padding-block: 8px;
}

#menu-main-menu > li.menu-item:last-child a::after {
  content: '\f062';
  font-family: 'Font Awesome 6 Free';
  font-weight: 600;
  display: inline-block;
  vertical-align: unset;
  border: none !important;
  margin-left: 10px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

#menu-main-menu > li.menu-item:last-child a:hover::after {
  transform: rotate(90deg);
}

.wp-block-search__button {
  background: transparent;
  border: none;
  color: #fff;
  display: grid;
  place-items: center;
}

.wp-block-search__button {
  padding: 0 10px;
}

.wp-block-search__button svg {
  min-height: 24px;
  min-width: 24px;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__input {
  background: transparent;
  outline: none;
  padding: 5px 15px;
  transform: skew(-25deg);
}

.wp-block-search.wp-block-search__button-only
  .wp-block-search__input::placeholder {
  color: #fff;
  opacity: 0.4;
  transform: skew(25deg);
}

.wp-block-search.wp-block-search__button-only
  .wp-block-search__input:focus-visible {
  border: 1px solid #fff;
}

.contact-info {
  display: flex;
  font-weight: bold;
  text-transform: uppercase;
  gap: 1rem;
}

.contact-info .email,
.contact-info .phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.contact-info .email img,
.contact-info .phone img {
  width: 20px;
  height: 20px;
}

.contact-info a {
  color: #fff;
  text-decoration: none;
}

.hero-banner {
  width: 100%;
  height: 100%;
}

.home-banner .swiper-slide {
  height: 700px;
}

.home-banner .swiper-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(1, 6, 4, 0.59);
  z-index: 1;
}

.skew-btn {
  border-radius: 0px;
  transform: skewX(-25deg);
}

.skew-btn button {
  border-radius: 0px;
  padding: 5px 20px;
}

.skew-btn span {
  display: flex;
  transform: skewX(25deg);
  align-items: center;
}

.skew-btn span img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  transition: filter 0.15s ease-in-out;
}

.skew-btn button.btn-yellow span img,
.skew-btn button:hover span img {
  filter: invert(1);
}

.skew-btn button.bg-dark:hover {
  color: #fff;
}

.skew-btn button.bg-dark:hover span img {
  filter: unset;
}

.banner-overlay {
  position: absolute;
  top: 50%;
  width: 100%;
  color: #fff;
  z-index: 1;
}

.about-overlay h1,
.banner-overlay h1 {
  position: relative;
  width: max-content;
}

.about-overlay h1::after,
.banner-overlay h1::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 10px;
  right: -20px;
  translate: 100% 0;
  width: 10px;
  transform: skewX(-25deg);
  box-shadow: 9px 0px 0 #ffdd00, 11px 0px 0 #000, 15px 0px 0 #ec1c24,
    17px 0px 0 #000, 25px 0px 0 #221f1f;
}

.banner-overlay .shop-cta {
  text-decoration: none;
  color: #cf9c51;
}

.banner-overlay .dunlop-logo {
  width: 150px;
  height: auto;
  vertical-align: baseline;
}

.swiper-btn-group {
  position: absolute;
  bottom: 150px;
  width: 80px;
}

.site-footer .almheiri-main-logo {
  width: 90%;
}

.site-footer .contact-info {
  gap: 4rem;
  justify-content: center;
  margin-block: 1.5rem;
}

.site-footer .contact-info .email,
.site-footer .contact-info .phone {
  gap: 1rem;
}

.site-footer h6 {
  color: #cf9c51;
  text-transform: uppercase;
}

.footer-widget ul {
  padding-left: 0;
  list-style-type: none;
}

.footer-widget ul a {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
}

.footer-widget ul li {
  margin-bottom: 10px;
}

.newsletter-form-box {
  border: 1px solid #fff;
  transform: skewX(-15deg);
}

.newsletter-form-box input[type='email'] {
  color: #fff;
  background: transparent;
  transform: skewX(15deg);
}

.newsletter-form-box input[type='email']::placeholder {
  color: #cf9c51;
  opacity: 0.4;
  text-transform: uppercase;
}

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

.newsletter-form-box .wpcf7-spinner {
  position: absolute;
  left: -50%;
}

.social-links {
  margin-top: 40px;
}

.social-links .socials {
  display: flex;
  gap: 1rem;
}

.social-links .socials img {
  width: 25px;
  height: 25px;
}

.copyright-footer {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 70px;
  text-transform: uppercase;
  color: #fff;
  padding-block: 30px;
}

.terms-privacy a {
  color: #fff;
  text-decoration: none;
}

.payments,
.payment-logos,
.terms-privacy {
  display: flex;
  gap: 30px;
  align-items: center;
}

.payment-logos img {
  height: 25px;
  object-fit: contain;
}

.copyright-footer p {
  margin: 0;
}

.choose-box {
  background-color: #ffd400;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}

.tyre-cat {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.tyre-cat .cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: skewX(25deg);
}

.tyre-cat a {
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #000;
  text-decoration: none;
  transform: skewX(-25deg);
}

.tyre-cat a.active,
.tyre-cat a:hover {
  background-color: #fff;
}

.tyre-cat img {
  height: 35px;
  width: 70px;
}

.tyre-cat h6 {
  margin: 0;
  margin-top: 15px;
  padding-bottom: 10px;
  border-bottom: 7px solid transparent;
  font-weight: bold;
}

.tyre-cat a.active h6,
.tyre-cat a:hover h6 {
  border-bottom: 7px solid #da2f2a;
}

.swiper.choose-tyre-swiper {
  width: 85%;
  padding-inline: 50px;
  padding-block: 10px;
}

.choose-tyre-swiper .tyre-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 40px;
}

.choose-tyre-swiper .tyre-brand-logo {
  width: 130px;
  height: auto;
  margin-bottom: 30px;
}

.choose-tyre-swiper .tyre-image {
  width: auto;
  height: 160px;
  object-fit: contain;
}

.choose-tyre-swiper .swiper-button-next,
.choose-tyre-swiper .swiper-button-prev {
  color: #000;
}

.fancy-box,
.explore-cta {
  text-align: center;
  transform: skewX(-20deg);
}

.fancy-box .btn-fancy,
.explore-cta a {
  display: inline-block;
  text-decoration: none;
  color: #ffda1c;
  background-color: #010604;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px 25px;
  box-shadow: 2px 0px 0 #fff, -2px 0px 0 #fff, 9px 0px 0 #ffdd00,
    -8px 0px 0 #000, 10px 0px 0 #fff, -9px 0px 0 #fff, 13px 0px 0 #ec1c24,
    -12px 0px 0 #ec1c24, 14px 0px 0 #fff, -13px 0px 0 #fff, 20px 0px 0 #000,
    -20px 0px 0 #ffdd00;
}

.fancy-box .btn-fancy input,
.explore-cta a span {
  display: inline-block;
  transform: skewX(20deg);
}

.explore-cta p {
  width: fit-content;
}

.fancy-box .btn-fancy input {
  color: #ffda1c;
  font-size: 0.9rem;
}

.feature-list div img {
  width: 30px;
  height: 30px;
}

.feature-list div p {
  margin: 0;
}

.our-products .btn-group .btn-yellow {
  color: #000;
  background-color: #ffda1c;
  border: 1px solid #ffda1c;
}

.our-products .skew-btn button {
  font-size: 14px;
}

.why-almheiri .why-img {
  text-align: center;
}

.why-almheiri .why-img img {
  width: 200px;
  height: auto;
}

.choose-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
}

.choose-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.choose-item img {
  width: 40px;
  height: 40px;
}

.choose-item p {
  margin-bottom: 0;
}

.testimonials .container {
  background: linear-gradient(90deg, #aeb0b387, #fff);
}

.testimonial-box .quote-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}

.testimonial-box {
  transform: skewX(10deg);
}

.user-details {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.user-details img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.dunlop-skew-before::before {
  content: '';
  background: center / contain no-repeat
    url('https://almuhairytrading.com/wp-content/uploads/2025/10/dunlop-skew.svg');
  position: absolute;
  left: -254px;
  top: 30px;
  height: 150px;
  width: 290px;
}

.testimonials-swiper {
  border: 1px solid #fff;
  transform: skewX(-10deg);
  position: relative;
  backdrop-filter: blur(7px);
}

.testimonials-swiper .swiper-slide {
  padding: 3rem;
}

.swiper-btn-group.tests {
  position: absolute;
  right: 30px;
  bottom: 50px;
  width: 80px;
  transform: skewX(10deg);
  z-index: 1;
}

/* WOOCOMMERCE */
.woocommerce ul.products li.product {
  background-color: #fff;
  border: 1px solid #dbdbdb;
  box-shadow: 0 0 10px #00000024;
}

.woocommerce ul.products li.product a {
  color: #000;
  font-size: 0.9rem;
}

.woocommerce ul.products li.product a .product-brand-logo {
  padding: 10px;
  border-bottom: 1px solid #dbdbdb;
}

.summary.entry-summary .product-brand-logo {
  width: 250px;
}

.woocommerce ul.products li.product a .product-brand-logo img {
  width: 50%;
  margin: 0;
}

.woocommerce ul.products li.product a .woocommerce-loop-product__title {
  font-style: italic;
  padding: 10px;
  font-size: 0.9rem;
}

span.woocommerce-Price-amount.amount {
  font-size: 1.3rem;
  font-family: 'Helvetica', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
}

.price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.price-box p {
  margin: 0;
  font-size: 0.9rem;
}

.set-price .price-box {
  background-color: #f2f2f2;
}

span.wc-block-mini-cart__badge {
  color: #000;
}

.woocommerce span.onsale {
  background-color: #da2f2a;
  border-radius: 0;
  min-height: unset;
  min-width: unset;
  line-height: 1;
  padding: 10px;
  margin: 0 !important;
}

.woocommerce ul.products li.product .onsale {
  top: 10px;
  left: 10px;
  right: unset;
}

.product-quantity-selector {
  width: 50%;
}

.summary.entry-summary .product-quantity-selector {
  width: 100%;
}

.woocommerce .quantity .qty {
  width: 100%;
}

.product-quantity-selector select {
  color: #fff;
  background-color: #231916;
  border: 0;
  border-radius: 0px;
  padding: 15px;
  width: 100%;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce ul.products li.product .button.add_to_cart_button {
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  color: #000;
  background-color: #ffe501;
  width: 50%;
  padding: 15px 0;
  margin: 0;
  border-radius: 0;
  text-align: center;
  font-size: 0.8rem;
}

.woocommerce ul.products li.product a img.attachment-woocommerce_thumbnail {
  padding: 40px 40px 0 40px;
  margin: 0;
  width: 100%;
  height: 150px;
  object-fit: cover;
  object-position: top;
}

.product-category-thumb {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-category-thumb img {
  height: 20px !important;
  width: fit-content !important;
  margin: 0 !important;
}

.car-tyre-info {
  padding: 10px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.car-tyre-info h5 {
  margin: 0;
}

.custom-cart-wrapper {
  display: flex;
  align-items: stretch;
}

section.about-sec-1::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0.5;
  z-index: 1;
}

.video-box {
  width: 100%;
  height: 700px;
  max-width: 100%;
}

video#myVideo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.values-title {
  color: rgba(10, 10, 16, 0.06);
  border: 0.5pt solid #0a0a10;
  border-left: none;
  border-right: none;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
  text-align: center;
  margin: 0;
  font-size: 17vw;
  text-align: center;
  line-height: 0.8;
}

.values-title.positions {
  font-size: 9vw;
}

.values-sec .feature-list.position-absolute {
  top: 50%;
  transform: translateY(-50%);
}

.three-lines::before {
  content: '';
  position: absolute;
  top: 18px;
  bottom: 38px;
  left: -80px;
  translate: -100% 0;
  width: 10px;
  transform: skewX(-25deg);
  box-shadow: 9px 0px 0 #ffdd00, 11px 0px 0 #000, 15px 0px 0 #ec1c24,
    17px 0px 0 #000, 25px 0px 0 #221f1f;
}

.testimonials.reverse .container {
  background: linear-gradient(270deg, #aeb0b387, #fff);
}

.contact-us-border {
  border: 5px solid #ffd400;
}

.wpcf7-spinner {
  position: absolute;
}

.wpcf7 input[type='text'],
.wpcf7 input[type='email'],
.wpcf7 input[type='tel'],
.wpcf7 input[type='number'],
.wpcf7 select {
  border: none !important;
  border-bottom: 1px solid #0a0a10 !important;
  border-radius: 0 !important;
  padding-inline: 0 !important;
  font-size: 0.8rem !important;
}

textarea {
  border-radius: 0 !important;
  border: 1px solid #0a0a10 !important;
}

.wpcf7 input[type='text']::placeholder,
.wpcf7 input[type='email']::placeholder,
.wpcf7 input[type='tel']::placeholder,
.wpcf7 input[type='number']::placeholder,
.wpcf7 select,
label {
  font-weight: 600 !important;
  text-transform: uppercase;
  color: rgba(207, 157, 82, 0.88) !important;
}

label {
  font-size: 0.8rem !important;
}

.form-select:focus,
.form-control:focus {
  border-color: none;
  outline: 0;
  box-shadow: none;
}

.service-center-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, #01060480);
}

.service-center-overlay {
  transform: skewX(-15deg);
}

.service-center-overlay .service-overlay-content {
  transform: skewX(15deg);
}

.sales-info {
  background: #ffef00;
  box-shadow: 0px 3px 0 #fff, 0px 11px 0 #ffef00, 0px 13px 0 #fff,
    0px 16px 0 #ec1c24, 0px 18px 0 #fff, 0px 25px 0 #221f1f, 0px 30px 0 #ffef00;
}

.sales-info a {
  text-decoration: none;
  color: #000;
}

section.career-sec-1 {
  display: flex;
  align-items: end;
  height: 400px;
  position: relative;
}

section.career-sec-1::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  /* z-index: 1; */
}

ul.mheiri-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  line-height: 2.4;
  font-weight: 300;
}

ul.mheiri-list li {
  padding-left: 30px;
  position: relative;
}

ul.mheiri-list li::before {
  content: '';
  background-image: url('https://almuhairytrading.com/wp-content/uploads/2025/10/Asset-3.svg');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 5px;
  position: absolute;
  left: 0;
  top: 12px;
  height: 15px;
  width: 15px;
  transition: 0.3s all linear;
}

.career-details img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.apply-btn a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  color: #cf9c51;
  display: flex;
  align-items: center;
}

.apply-btn a img {
  width: 13px;
  height: 13px;
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.apply-btn a:hover img {
  transform: rotate(40deg);
}

.sales-support {
  background: #ffd400;
  box-shadow: 0px 3px 0 #fff, 0px 11px 0 #ffd400, 0px 13px 0 #fff,
    0px 16px 0 #ec1c24, 0px 18px 0 #fff, 0px 25px 0 #221f1f, 0px 30px 0 #ffd400;
}

.service-card {
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: transparent;
  transition: all 0.3s;
}

.service-card:hover::after {
  background-color: rgba(207, 157, 81, 0.86);
}

.service-card-overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* padding: 20px; */
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(55%);
}

.service-card-overlay p,
.service-card-overlay .explore-cta {
  opacity: 0;
  transition: all 0.3s;
}

.service-card:hover .service-card-overlay p,
.service-card:hover .service-card-overlay .explore-cta {
  opacity: 1;
}

.service-card:hover .service-card-overlay {
  height: 100%;
  transform: translateY(0px);
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 40px;
  z-index: 1000;
}

.whatsapp-button {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.whatsapp-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.whatsapp-button:hover::before {
  opacity: 1;
}

.whatsapp-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}

.whatsapp-button:active {
  transform: scale(0.95);
}

.whatsapp-icon {
  width: 32px;
  height: 32px;
  fill: white;
  position: relative;
  z-index: 1;
}

/* Pulse Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.whatsapp-button.pulse {
  animation: pulse 2s infinite;
}

/* Ripple Effect */
.ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  animation: ripple-animation 1.5s infinite;
}

@keyframes ripple-animation {
  0% {
    width: 0;
    height: 0;
    opacity: 0.8;
  }
  100% {
    width: 100px;
    height: 100px;
    opacity: 0;
  }
}

/* Tooltip */
.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  color: #128c7e;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.whatsapp-tooltip::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  border: 8px solid transparent;
  border-left-color: white;
}

.whatsapp-float:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
  right: 75px;
}

.account-breadcrumb {
  display: flex;
  gap: 10px;
  align-items: center;
  text-transform: uppercase;
  font-style: italic;
  font-weight: bold;
}

.account-breadcrumb a {
  text-decoration: none;
  color: #000;
}

.skew-tab {
  color: #fff;
  background-color: var(--primary-color);
}

.skew-tab:hover,
.skew-tab.active {
  color: #000;
  background-color: var(--yellow-color);
}

.tab-content {
  border: 5px solid var(--yellow-color);
}

.woocommerce form .form-row .input-text {
  border: 1px solid #0a0a10;
  border-radius: 0px;
  padding: 15px;
  font-size: 13px;
}

.woocommerce form .form-row .input-text::placeholder {
  color: var(--orange-color);
  text-transform: uppercase;
  font-weight: bold;
}

p.woocommerce-LostPassword.lost_password a {
  text-decoration: none;
  color: #0a0a104a;
}

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
  width: 100%;
}

.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
  width: 100%;
}

.woocommerce
  div.product
  div.images
  .woocommerce-product-gallery__wrapper
  .woocommerce-product-gallery__image
  img {
  padding: 3rem;
}

.woocommerce div.product .product_title {
  font-size: 2rem;
  font-weight: 600;
  font-style: italic;
}

.woocommerce .woocommerce-breadcrumb {
  margin: 2rem 0;
}

.woocommerce span.onsale {
  top: 0;
  left: 0;
}

.related.products > h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 600;
  font-style: italic;
  margin-bottom: 30px;
}

.woocommerce div.product form.cart div.quantity {
  margin: 0;
  width: 50%;
}

ul.tyre-specs-list {
  list-style-type: none;
  padding: 0;
}

ul.tyre-specs-list li {
  padding-block: 5px;
}

ul.tyre-specs-list li span {
  display: inline-block;
  min-width: 100px;
}

.woocommerce-tabs .woocommerce-Tabs-panel h2 {
  font-style: italic;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.5rem;
}

/* .woocommerce div.product .woocommerce-tabs ul.tabs {
} */

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  transform: skewX(-20deg);
  border-radius: 0;
  background-color: #000;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  transform: skewX(20deg);
  text-transform: uppercase;
  color: #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #000;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a:hover {
  color: #000;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  border-radius: 0;
  box-shadow: none;
}

.woocommerce p.stars a {
  color: var(--orange-color);
}

span.comment-reply-title {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.woocommerce #review_form #respond .form-submit input {
  text-transform: uppercase;
  color: #000;
  background-color: #ffe501;
  padding: 15px;
  border-radius: 0;
  font-size: 0.8rem;
}

.woocommerce-products-header h1 {
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
}

.woocommerce .woocommerce-result-count {
  margin-top: 1rem;
}

.woocommerce .woocommerce-ordering select {
  color: #fff;
  background-color: #231916;
  border: 0;
  border-radius: 0px;
  padding: 15px;
  width: 100%;
}

.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 5px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: 100%;
  padding: 5px;
  border: 1px solid #cfc8d8;
}

.woocommerce-tabs.wc-tabs-wrapper {
  padding-bottom: 1rem;
}

.custom-product-meta {
  background-color: #f2f2f2;
  padding: 1.5rem;
}

.filtered-products-wrapper {
  margin-top: 100px;
}

.wpfMainWrapper {
  position: sticky !important;
  top: 140px;
}

.wpfFilterButton.wpfButton,
.wpfClearButton.wpfButton {
  font-size: 0.8rem !important;
  border-radius: 0 !important;
}

.wpfButton.wpfFilterButton {
  color: #000;
  background-color: #ffe501;
}

.wpfButton.wpfClearButton {
  color: #fff;
  background-color: #231916;
}

.wpfSearchWrapper .wpfSearchFieldsFilter {
  border: 1px solid #cfc8d8;
  padding: 10px;
  margin-bottom: 15px !important;
}

#wpfSliderRange.ui-slider.ui-widget-content:not(.iris-slider-offset) {
  border-radius: 500px !important;
  background: #cfc8d8 !important;
  border: none !important;
}

#wpfSliderRange.ui-slider.ui-widget-content .ui-slider-handle {
  border: none !important;
  border-radius: 50% !important;
  background-color: #ffe501 !important;
}

.la-spinner,
.wpfIconPreview .spinner,
.wpfLoaderIconTemplate .spinner,
.woobewoo-filter-loader.spinner {
  background: url('https://almuhairytrading.com/wp-content/uploads/2025/10/about-sec-icon.svg') !important;
}

.wpfPriceInputs .wpfCurrencySymbol {
  font-family: 'igNewAEDSymbolFont';
}

@media screen and (max-width: 991.9px) {
  body {
    margin-top: 0px;
  }
  body .site-header.menu-open .navbar,
  body:not(.home) .site-header.sticky-top.menu-open .navbar {
    box-shadow: 0 8px 6px -6px var(--primary-color);
    background-color: var(--primary-color);
  }
  /* body:not(.home) .site-header.menu-open .navbar {
    box-shadow: 0 8px 6px -6px #fff;
    background-color: #fff;
  } */
  .site-header #navbarNav li {
    padding-block: 0.3rem;
  }
  .site-header a.navbar-brand > img {
    width: 150px;
    height: 75px;
    padding-inline: 0;
  }
  .site-header.sticky-top a.navbar-brand > img {
    width: 150px;
    height: 50px;
  }
  .mob-language-switcher {
    display: block;
    margin-left: auto;
    margin-right: 20px;
  }
  .mob-language-switcher li {
    list-style-type: none;
  }
  .mob-language-switcher li a {
    color: #fff;
  }
  /* body:not(.home) .mob-language-switcher li a {
    color: #1d2855;
  } */
  body:not(.home) .site-header.sticky-top .mob-language-switcher li a {
    color: #fff;
  }
  /* #navbarNav a {
    color: #3f4343;
  } */
  .navbar-toggler {
    border: none;
    padding: 0;
    outline: none;
  }
  .navbar-toggler:focus {
    box-shadow: none;
  }
  .navbar-toggler .hamburger-toggle {
    position: relative;
    /* display: inline-block; */
    width: 50px;
    height: 50px;
    z-index: 11;
    float: right;
  }
  .navbar-toggler .hamburger-toggle .hamburger {
    position: absolute;
    transform: translate(-50%, -50%) rotate(0deg);
    left: 50%;
    top: 50%;
    width: 50%;
    height: 50%;
    pointer-events: none;
  }
  .navbar-toggler .hamburger-toggle .hamburger span {
    width: 100%;
    height: 3px;
    position: absolute;
    background: #fff;
    border-radius: 2px;
    z-index: 1;
    transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1),
      background 0.2s cubic-bezier(0.77, 0.2, 0.05, 1), all 0.2s ease-in-out;
    left: 0px;
  }
  body:not(.home)
    .site-header.sticky-top
    .navbar-toggler
    .hamburger-toggle
    .hamburger
    span {
    background: #fff;
  }
  /* body:not(.home) .navbar-toggler .hamburger-toggle .hamburger span {
    background: #1d2855;
  } */
  /* body:not(.home)
    .site-header.menu-open
    #navbarNav
    ul
    li.dropdown:hover
    > .dropdown-toggle {
    color: #1d2855;
  } */
  body:not(.home)
    .site-header.menu-open.sticky-top
    #navbarNav
    ul
    li.dropdown:hover
    > .dropdown-toggle {
    color: #fff;
  }
  .navbar-toggler .hamburger-toggle .hamburger span:first-child {
    top: 10%;
    transform-origin: 50% 50%;
    transform: translate(0% -50%) !important;
  }
  .navbar-toggler .hamburger-toggle .hamburger span:nth-child(2) {
    top: 50%;
    transform: translate(0, -50%);
    width: 80%;
  }
  .navbar-toggler .hamburger-toggle .hamburger span:last-child {
    left: 0px;
    top: auto;
    bottom: 10%;
    transform-origin: 50% 50%;
  }
  .navbar-toggler .hamburger-toggle .hamburger.active span {
    position: absolute;
    margin: 0;
  }
  .navbar-toggler .hamburger-toggle .hamburger.active span:first-child {
    top: 45%;
    transform: rotate(45deg);
  }
  .navbar-toggler .hamburger-toggle .hamburger.active span:nth-child(2) {
    left: 50%;
    width: 0px;
  }
  .navbar-toggler .hamburger-toggle .hamburger.active span:last-child {
    top: 45%;
    transform: rotate(-45deg);
  }
  .site-header .nav-cta-btn {
    display: none;
  }
  /* .site-header.menu-open .my-custom-cta {
    display: block;
  } */
  #navbarNav li.pll-parent-menu-item {
    display: none;
  }
  #navbarNav ul li.dropdown .dropdown-menu li a {
    padding-inline: 1rem;
  }
  #menu-main-menu > li.menu-item:last-child a {
    padding-inline: unset;
  }
}

@media screen and (min-width: 1320px) {
  .values-title {
    font-size: 16rem;
  }
  .values-title.positions {
    font-size: 8rem;
  }
}