/* ===========================
Index Of css

01. Variables CSS
02. Normalize CSS
03. Header CSS
04. Hero Area CSS
05. Shipping Info CSS
07. Product CSS
08. Banner CSS
09. Special Offer CSS
10. Home Product List CSS
12. Faq CSS
13. Blog CSS
14. Brands CSS
24. Footer CSS
========================== */
/*======================================
    Manrope Font (self-hosted, variable weight 200-800)
========================================*/
/* latin-ext: acentos, ñ, ü — necesario para español */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope/Manrope-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin: caracteres básicos */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/manrope/Manrope-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*======================================
    Normalize CSS
========================================*/
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  /* Herramienta de depuración para maquetar web */
  /* border: 1px solid red; */
}

h1,
h2,
h3,
h4,
h5 {
  text-wrap: balance;
}

body {
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-style: normal;
  color: #888;
  overflow-x: hidden;
  font-size: 14px;
  min-height: 100dvh;
}

p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 24px;
  text-wrap: pretty;
}

/* Eliminar border de Bootstrap en navbar-toggler (menú hamburguesa) */
.navbar-toggler {
  border: none !important;
  padding: 0.25rem 0.5rem;
}

.navbar-toggler:focus,
a:focus,
input:focus,
textarea:focus,
button:focus,
.btn:focus,
.btn.focus,
.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
  text-decoration: none;
  outline: none;
  outline: none !important;
  border-color: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.form-check-input:checked {
  background-color: #00bba1;
  border-color: #00bba1;
}

select {
  -webkit-writing-mode: horizontal-tb !important;
  writing-mode: horizontal-tb !important;
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: #0b2244;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  background-color: -internal-light-dark(white, #3b3b3b);
  cursor: default;
  margin: 0em;
  font: 400 14px;
  border-radius: 0px;
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark(#767676, #858585);
  -o-border-image: initial;
  border-image: initial;
}

span,
a {
  display: inline-block;
  text-decoration: none;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  margin: 0px;
  color: #0b2244;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 20px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}

ul,
ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

.mt-5 {
  margin-top: 5px;
}

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

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

.img-bg {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container {
    width: 450px;
  }
}

.section {
  padding-top: 90px;
  padding-bottom: 90px;
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/* Section Title */
.section-title {
  text-align: center;
  margin-bottom: 40px;
  padding: 0px 300px;
  position: relative;
  z-index: 5;
  position: relative;
}

.section-title h2 {
  font-size: 20px;
  line-height: 35px;
  text-transform: none;
  position: relative;
  font-weight: 800;
  padding-bottom: 20px;
  margin-bottom: 20px;
  position: relative;
}

.section-title h2::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  content: "";
  background-color: #00bba1;
  height: 2px;
  width: 50px;
  margin-left: -25px;
  border-radius: 2px;
}

.section-title p {
  font-size: 14px;
  color: #000;
  text-wrap: pretty;
}

@media only screen and (min-width: 992px) and (max-width: 1400px) {
  .section-title {
    padding: 0px 150px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .section-title {
    padding: 0px 20px;
    margin-bottom: 30px;
  }
  .section-title h3 {
    font-size: 14px;
  }
  .section-title h2 {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 20px;
  }
  .section-title p {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .section-title {
    padding: 0px 10px;
    margin-bottom: 25px;
  }
  .section-title h3 {
    font-size: 14px;
  }
  .section-title h2 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 18px;
  }
  .section-title p {
    font-size: 14px;
  }
}

.section-title.align-right {
  padding: 0;
  padding-left: 600px;
}

.section-title.align-right h2:before {
  display: none;
}

.section-title.align-right h2:after {
  position: absolute;
  right: 0;
  bottom: -1px;
  height: 2px;
  width: 50px;
  background: #00bba1;
  content: "";
}

.section-title.align-left {
  padding: 0;
  padding-right: 600px;
}

.section-title.align-left h2:before {
  left: 0;
  margin-left: 0;
}

/* One Click Scrool Top Button*/
.scroll-top {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #00bba1;
  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;
  font-size: 16px;
  color: #fff !important;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border-radius: 4px;
}

.scroll-top:hover {
  -webkit-box-shadow: 0 1rem 3rem rgba(35, 38, 45, 0.15) !important;
  box-shadow: 0 1rem 3rem rgba(35, 38, 45, 0.15) !important;
  -webkit-transform: translate3d(0, -5px, 0);
  transform: translate3d(0, -5px, 0);
  background-color: #0b2244;
}

/* Overlay */
.overlay {
  position: relative;
  z-index: 1;
}

.overlay::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background: #0b2244;
  content: "";
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  z-index: -1;
}

/* Inicio Style para Btn CSS Animado de cerrar sesion */
.Btn-logout {
  --black: #000000;
  --ch-black: #141414;
  --eer-black: #1b1b1b;
  --night-rider: #0b2244;
  --white: #ffffff;
  --af-white: #f3f3f3;
  --ch-white: #e1e1e1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: 0.3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: var(--night-rider);
  margin-left: 10px;
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign svg {
  width: 17px;
}

.sign svg path {
  fill: var(--af-white);
}
/* text */
.textBtn {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: var(--af-white);
  font-size: 1.2em;
  font-weight: 600;
  transition-duration: 0.3s;
}
/* hover effect on button width */
.Btn-logout:hover {
  width: 125px;
  border-radius: 5px;
  transition-duration: 0.3s;
}

.Btn-logout:hover .sign {
  width: 30%;
  transition-duration: 0.3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn-logout:hover .textBtn {
  opacity: 1;
  width: 70%;
  transition-duration: 0.3s;
  padding-right: 10px;
}
/* button click effect*/
.Btn-logout:active {
  transform: translate(2px, 2px);
}
/* Final Style para Btn CSS Animado de cerrar sesion */

.button .btn {
  display: inline-block;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 30px;
  background-color: #0b2244;
  color: #fff;
  border: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  margin-right: 7px;
  overflow: hidden;
}

.button .btn-delete {
  /* Centrar boton y contenido del boton*/
  margin-left: 70%;
  margin-top: 70px;
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  background-color: #ec5353;
  color: #fff;
  border: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.button .btn-delete:hover {
  color: #fff;
  background-color: #0b2244;
  -webkit-box-shadow: 0px 4px 4px #0000000f;
  box-shadow: 0px 4px 4px #0000000f;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .button .btn {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
  }
}

@media (max-width: 767px) {
  .button .btn {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
  }
}

.button .btn i {
  display: inline-block;
  margin-right: 5px;
}

.button .btn:last-child {
  margin: 0;
}

.button .btn:hover {
  color: #fff;
  background-color: #00bba1;
  -webkit-box-shadow: 0px 4px 4px #0000000f;
  box-shadow: 0px 4px 4px #0000000f;
}

.button .btn-alt {
  background-color: #0b2244 !important;
  color: #fff !important;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .button .btn-alt {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
  }
}

@media (max-width: 767px) {
  .button .btn-alt {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 500;
  }
}

.button .btn-alt:hover {
  background-color: #00bba1 !important;
  color: #fff !important;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align-center {
  text-align: center;
}

/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.preloader-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.preloader-icon {
  width: 100px;
  height: 100px;
  display: inline-block;
  padding: 0px;
}

.preloader-icon span {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: #00bba1;
  -webkit-animation: preloader-fx 1.6s linear infinite;
  animation: preloader-fx 1.6s linear infinite;
}

.preloader-icon span:last-child {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
}

@keyframes preloader-fx {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 0;
  }
}

@-webkit-keyframes preloader-fx {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0;
  }
}

/*======================================
	01. Start Header CSS
========================================*/
/* Start Navbar Announcements */
.announcement-bar {
  background-color: #00bba1;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
}

.header.navbar-area {
  padding-top: 40px;
}

.announcement-content {
  color: #0b2244;
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.announcement-wrapper {
  min-height: 25px;
}

/* .announcement-item {
  opacity: 0;
  position: absolute;
  width: 100%;
  transform: translateY(20px);
  animation: fadeInUp 0.5s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

.announcement-item {
  opacity: 0;
  position: absolute;
  width: 100%;
  transform: translateX(100%);
  animation:
    slideInRight 0.5s ease forwards,
    slideOutLeft 0.5s ease forwards 4.5s;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutLeft {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

.highlight {
  color: #ffffff;
  background-color: #0b2244;
  padding: 0 6px;
  border-radius: 4px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .announcement-content {
    font-size: 0.75rem;
  }
}

.announcement-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.9;
  padding: 0.25rem;
  z-index: 10;
  cursor: pointer;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  height: 100%;
}

.announcement-nav:hover {
  opacity: 1;
}

.prev-announcement {
  left: 0.5rem;
}

.next-announcement {
  right: 0.5rem;
}

.announcement-nav i {
  font-size: 1rem;
}

@media (min-width: 992px) {
  .prev-announcement {
    left: 25%;
  }

  .next-announcement {
    right: 25%;
  }
}

@media (max-width: 576px) {
  .announcement-nav {
    padding: 0.15rem;
  }

  .announcement-nav i {
    font-size: 0.875rem;
  }
}

@media (max-width: 768px) {
  .header.navbar-area {
    padding-top: 35px;
  }

  .announcement-content {
    font-size: 0.75rem;
  }
}
/* Fin CSS navbar Anuncios */

.header {
  width: 100%;
  background: #fff;
  position: relative;
  width: 100%;
  /* Start Topbar */
  /* End Topbar */
  /* Start Main Menu Search */
  /* End Main Menu Search */
}

.header .topbar {
  background-color: #0b2244;
  padding: 18px 0;
}

@media (max-width: 767px) {
  .header .topbar .top-left {
    text-align: center;
  }
}

.header .topbar .top-left .menu-top-link .select-position {
  position: relative;
}

.header .topbar .top-left .menu-top-link .select-position select {
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  border: none;
  padding: 0 10px 0 0px;
  color: #fff !important;
  font-weight: 500;
  font-size: 14px;
  background-color: #0b2244 !important;
}

.header .topbar .top-left .menu-top-link .select-position select:focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.header .topbar .top-left .menu-top-link .select-position::after {
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: "";
  display: block;
  height: 6px;
  margin-top: -3px;
  pointer-events: none;
  position: absolute;
  right: 0px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 6px;
}

.header .topbar .top-left .menu-top-link li {
  display: inline-block;
  margin-right: 20px;
}

.header .topbar .top-left .menu-top-link li:last-child {
  margin: 0;
}

.header .topbar .top-middle {
  text-align: center;
}

@media (max-width: 767px) {
  .header .topbar .top-middle {
    display: none;
  }
}

.header .topbar .top-middle .useful-links li {
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px;
}

.header .topbar .top-middle .useful-links li:last-child {
  margin: 0;
  border: none;
}

.header .topbar .top-middle .useful-links li a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.header .topbar .top-middle .useful-links li a:hover {
  color: #a6f0e3; /* SEO FIX: Contrast Ratio 10.8:1 on dark bg */
}

/* .header .topbar .top-end {
  float: right;
  display: inline-block;
} */

@media (max-width: 767px) {
  .header .topbar .top-end {
    float: none;
    text-align: center;
    display: block;
    margin-top: 15px;
  }
}

.header .topbar .top-end .user {
  color: #fff;
  display: inline-block;
  margin-right: 5px;
  font-weight: 500;
  font-size: 14px;
  /* Activar las siguientes lineas cuando se quiera usar el boton logout animado */
  /* display: flex;
  align-items: center; */
}

.header .topbar .top-end .user i {
  color: #fff;
  display: inline-block;
  margin-right: 5px;
  font-size: 16px;
}

.header .topbar .top-end .user a {
  cursor: pointer;
}

.header .topbar .top-end .user-login {
  display: inline-block;
  white-space: nowrap;
}

.header .topbar .top-end .user-login li {
  display: inline-block;
  border-right: 1px solid rgba(255, 255, 255, 0.459);
  padding: 0px 10px;
  white-space: nowrap;
}

.header .topbar .top-end .user-login li:first-child {
  padding-right: 12px;
}

.header .topbar .top-end .user-login li:last-child {
  margin-right: 0;
  padding-right: 0;
  border-right: none;
}

.header .topbar .top-end .user-login li a {
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

.header .topbar .top-end .user-login li a:hover {
  color: #00bba1;
}

.header .header-middle {
  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;
  padding: 25px 0;
  border-bottom: 1px solid #eee;
}

@media (max-width: 767px) {
  .header .header-middle .d-xs-none {
    display: none;
  }
}

.header .middle-right-area {
  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;
}

@media (max-width: 767px) {
  .header .middle-right-area {
    -webkit-box-pack: right;
    -ms-flex-pack: right;
    justify-content: right;
    float: right;
  }
}

.header .nav-hotline {
  position: relative;
  padding-left: 50px;
  margin-right: 35px;
}

@media (max-width: 767px) {
  .header .nav-hotline {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .nav-hotline {
    display: none;
  }
}

.header .nav-hotline i {
  color: #0b2244;
  font-size: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  border: 1px solid #eee;
  border-radius: 50%;
}

.header .nav-hotline h3 {
  font-size: 15px;
  font-weight: 600;
  color: #0b2244;
}

.header .nav-hotline h3 span {
  color: #000000;
  font-weight: 500;
  font-size: 14px;
  display: block;
  margin-top: 2px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header .nav-hotline h3 span {
    font-size: 12px;
    font-weight: 600;
  }
}

.header .navbar-cart {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
}

.header .navbar-cart .wishlist {
  margin-right: 12px;
}

.header .navbar-cart .wishlist a {
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #eee;
  color: #555;
  font-size: 18px;
  text-align: center;
  position: relative;
}

.header .navbar-cart .wishlist a:hover {
  color: #fff;
  background-color: #00bba1;
  border-color: transparent;
}

.header .navbar-cart .wishlist a .total-items {
  position: absolute;
  right: -6px;
  top: -5px;
  height: 19px;
  width: 19px;
  line-height: 19px;
  background-color: #0b2244;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border-radius: 50%;
}

.header .navbar-cart .cart-items {
  position: relative;
}

.header .navbar-cart .cart-items:hover .main-btn {
  color: #fff;
  background-color: #00bba1;
  border-color: transparent;
}

.header .navbar-cart .cart-items .main-btn {
  height: 40px;
  width: 40px;
  line-height: 40px;
  display: inline-block;
  border-radius: 50%;
  border: 1px solid #eee;
  color: #555;
  font-size: 18px;
  text-align: center;
  position: relative;
}

.header .navbar-cart .cart-items .main-btn .total-items {
  position: absolute;
  right: -6px;
  top: -5px;
  height: 19px;
  width: 19px;
  line-height: 19px;
  background-color: #0b2244;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  border-radius: 50%;
}

.header .navbar-cart .cart-items:hover .shopping-item {
  opacity: 1;
  visibility: visible;
}

.header .navbar-cart .cart-items .shopping-item {
  position: absolute;
  top: 72px;
  right: 0;
  width: 300px;
  background: #fff;
  padding: 20px 25px;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  z-index: 99;
  border-radius: 4px;
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.137);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.137);
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item {
    width: 250px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .navbar-cart .cart-items .shopping-item {
    top: 68px;
  }
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item {
    top: 66px;
  }
}

.header .navbar-cart .cart-items .shopping-item .dropdown-cart-header {
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e6e6e6;
}

.header .navbar-cart .cart-items .shopping-item .dropdown-cart-header span {
  text-transform: capitalize;
  color: #222;
  font-size: 14px;
  font-weight: 600;
}

.header .navbar-cart .cart-items .shopping-item .dropdown-cart-header a {
  float: right;
  text-transform: capitalize;
  color: #222;
  font-size: 14px;
  font-weight: 600;
}

.header .navbar-cart .cart-items .shopping-item .dropdown-cart-header a:hover {
  color: #00bba1;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li {
  overflow: hidden;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 15px;
  margin-bottom: 15px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .remove {
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
  width: 20px;
  line-height: 18px;
  text-align: center;
  background: #fff;
  color: #222;
  border-radius: 50%;
  font-size: 9px;
  border: 1px solid #ededed;
  padding-left: 1px;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .remove:hover {
  border-color: transparent;
  color: #fff;
  background-color: #00bba1;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .cart-img-head {
  width: 40%;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .shopping-list li .cart-img-head {
    width: 30%;
    margin-right: 12px;
  }
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .cart-img {
  border: 1px solid #ededed;
  overflow: hidden;
  height: 80px;
  width: 80px;
  border-radius: 4px;
  float: left;
  margin-right: 20px;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .shopping-list li .cart-img {
    height: 60px;
    width: 60px;
    margin-right: 10px;
  }
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content {
  padding-right: 25px;
  width: 60%;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .shopping-list li .content {
    width: 70%;
  }
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content h4 {
  margin-bottom: 5px;
  line-height: 22px;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content h4 a {
  font-size: 14px;
  font-weight: 600;
  color: #0b2244;
}

@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .shopping-list li .content h4 a {
    font-size: 13px;
  }
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content h4 a:hover {
  color: #00bba1;
}

.header .navbar-cart .cart-items .shopping-item .shopping-list li .content .quantity {
  line-height: 22px;
  font-size: 14px;
}

.header .navbar-cart .cart-items .shopping-item .bottom {
  text-align: center;
}

.header .navbar-cart .cart-items .shopping-item .bottom .total {
  overflow: hidden;
  display: block;
  padding-bottom: 10px;
}

.header .navbar-cart .cart-items .shopping-item .bottom .total span {
  text-transform: capitalize;
  color: #222;
  font-size: 14px;
  font-weight: 600;
  float: left;
}

.header .navbar-cart .cart-items .shopping-item .bottom .total .total-amount {
  float: right;
  font-size: 14px;
}

.header .navbar-cart .cart-items .shopping-item .bottom .button {
  margin-top: 10px;
  width: 100%;
}

.header .navbar-cart .cart-items .shopping-item .bottom .button .btn {
  width: 100%;
}

/* ===========================
   Global Cart Icon - Empty State & Login Prompt
   Estilos para dropdown del carrito vacío y mensaje de login
   ========================== */
.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown {
  text-align: center;
  padding: 30px 20px;
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown i {
  font-size: 3rem;
  color: #ccc;
  margin-bottom: 15px;
  display: block;
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown.login-required i {
  color: #00bba1;
  font-size: 2.5rem;
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .empty-message {
  color: #666;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}

/* Botones del dropdown - Diseño coherente con la web */
.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border-radius: 5px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

/* Botón primario - Color corporativo */
.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn-cart-primary {
  background-color: #0a2344;
  color: #fff;
  box-shadow: 0 2px 4px rgba(10, 35, 68, 0.2);
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn-cart-primary:hover {
  background-color: #00bba1;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 187, 161, 0.3);
  transform: translateY(-1px);
}

/* Botón outline - Variante secundaria */
.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn-cart-outline {
  background-color: transparent;
  color: #0a2344;
  border: 2px solid #0a2344;
}

.header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn-cart-outline:hover {
  background-color: #0a2344;
  color: #fff;
  border-color: #0a2344;
  transform: translateY(-1px);
}

/* Botón eliminar item - Hover rojo */
.header .navbar-cart .cart-items .shopping-item .shopping-list li .remove:hover {
  background-color: #cc0a3a !important;
  border-color: #cc0a3a !important;
  color: #fff !important;
}

/* Responsive */
@media (max-width: 767px) {
  .header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown {
    padding: 20px 15px;
  }

  .header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown i {
    font-size: 2.5rem;
  }

  .header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .empty-message {
    font-size: 13px;
    margin-bottom: 15px;
  }

  .header .navbar-cart .cart-items .shopping-item .empty-cart-dropdown .btn {
    font-size: 12px;
    padding: 9px 16px;
  }
}

@media (max-width: 767px) {
  .header .main-menu-search {
    display: none;
  }
}

.header .main-menu-search .navbar-search {
  position: relative;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .main-menu-search .select-position {
  position: relative;
}

.header .main-menu-search .select-position:after {
  border-bottom: 1.5px solid #0b2244;
  border-right: 1.5px solid #0b2244;
  content: "";
  display: block;
  height: 8px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  width: 8px;
}

.header .main-menu-search .select-position select {
  height: 45px;
  border: 1px solid #e2e2e2;
  border-right: 0px;
  padding: 0 20px;
  background: transparent;
  border-radius: 4px 0 0 4px;
  position: relative;
  padding-right: 30px;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  font-size: 14px;
}

.header .main-menu-search .select-position select:focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.header .main-menu-search .search-input {
  width: 100%;
}

.header .main-menu-search .search-input input {
  width: 100%;
  height: 45px;
  border: 1px solid #e2e2e2;
  background-color: #fff;
  color: #000;
  border-radius: 0;
  padding: 0 15px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
  font-size: 14px;
}

.header .main-menu-search .search-btn button {
  background-color: #00bba1;
  color: #fff;
  width: 45px;
  height: 45px;
  padding: 0;
  border: 0;
  border-radius: 0 4px 4px 0;
  margin-left: -2px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-size: 18px;
}

.header .main-menu-search .search-btn button:hover {
  color: #fff;
  background-color: #0b2244;
}

/* Media Queries para el menu superior Home */
@media only screen and (min-width: 1201px) and (max-width: 1400px) {
  .header .navbar .ms-auto .nav-item a {
    display: flex; /* Cambia a flexbox */
    white-space: nowrap; /* Evita los saltos de línea */
    margin: 0 -3px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header .navbar .ms-auto .nav-item a {
    display: flex; /* Cambia a flexbox */
    white-space: nowrap; /* Evita los saltos de línea */
    margin: 0 -7.5px; /* Reduce el espacio entre cada elemento <a> */
    font-size: small;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .mobile-menu-btn .toggler-icon {
    background-color: #0b2244;
  }
  .header .button {
    margin: 0 !important;
  }
  .header .nav-inner {
    display: block !important;
    padding: 18px 0;
  }
  .header .navbar-collapse {
    position: absolute;
    top: 46px !important;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    max-height: 350px;
    overflow-y: scroll;
    border-top: 1px solid #eee;
    border-radius: 6px;
  }
  .header .navbar .navbar-nav .nav-item a:hover {
    color: #00bba1 !important;
  }
  .header .navbar .navbar-nav .nav-item a.active {
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item {
    margin: 0;
  }
  .header .navbar-nav .nav-item:hover a {
    color: #00bba1;
  }
  .header .navbar-nav .nav-item a {
    padding: 12px 16px !important;
  }
  .header .navbar-nav .nav-item a::before {
    display: none;
  }
  .header .navbar-nav .nav-item .sub-menu {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    border: none;
    margin-left: 15px;
    margin-right: 15px;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a {
    padding: 12px 12px;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a:hover {
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item a {
    color: #051441;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 0;
  }
  .header .navbar-nav .nav-item a::after {
    opacity: 1;
    visibility: visible;
  }
  .header .navbar-nav .nav-item .sub-menu li.active {
    background: #fff !important;
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item {
    margin: 0 !important;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a {
    padding: 10px 12px !important;
  }
  .header .navbar-nav .nav-item .sub-menu li:hover {
    background: #fff !important;
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item a {
    font-size: 14px;
  }
  .header .navbar-nav .nav-item a:hover {
    color: #00bba1;
  }
}

@media (max-width: 767px) {
  .header .mobile-menu-btn .toggler-icon {
    background-color: #0b2244;
  }
  .header .button {
    margin: 0 !important;
  }
  .header .nav-inner {
    display: block !important;
    padding: 18px 0;
  }
  .header .navbar-collapse {
    position: absolute;
    top: 46px !important;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    max-height: 350px;
    overflow-y: scroll;
    border-top: 1px solid #eee;
    border-radius: 6px;
  }

  .header .navbar .navbar-nav .nav-item a:hover {
    color: #00bba1 !important;
  }
  .header .navbar .navbar-nav .nav-item a.active {
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item {
    margin: 0;
  }
  .header .navbar-nav .nav-item:hover a {
    color: #00bba1;
  }
  .header .navbar-nav .nav-item a {
    padding: 12px 16px !important;
  }
  .header .navbar-nav .nav-item a::before {
    display: none;
  }
  .header .navbar-nav .nav-item .sub-menu {
    position: static;
    width: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
    border: none;
    margin-left: 15px;
    margin-right: 15px;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a {
    padding: 12px 12px;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a:hover {
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item a {
    color: #051441;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 0;
  }
  .header .navbar-nav .nav-item a::after {
    opacity: 1;
    visibility: visible;
  }

  .header .navbar-nav .nav-item .sub-menu li.active {
    background: #fff !important;
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item {
    margin: 0 !important;
  }
  .header .navbar-nav .nav-item .sub-menu .nav-item a {
    padding: 10px 12px !important;
  }
  .header .navbar-nav .nav-item .sub-menu li:hover {
    background: #fff !important;
    color: #00bba1 !important;
  }
  .header .navbar-nav .nav-item a {
    font-size: 14px;
  }
  .header .navbar-nav .nav-item a:hover {
    color: #00bba1;
  }
}

.header .navbar-nav .nav-item .sub-menu li a {
  color: black;
}

.header .nav-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.header .mega-category-menu {
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-right: 1px solid #eee;
  margin-right: 40px;
  padding-right: 112px;
  cursor: pointer;
}

/* Inicio Animacion Linea sub menu Productos */
.custom-dropdown-item a {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.custom-dropdown-item a span {
  position: relative;
  display: inline-block;
}

.custom-dropdown-item a span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #0b2244; /* Color de la línea animada */
  width: 100%; /* Ancho inicial de la línea */
  transform: scaleX(0); /* Oculta la línea inicialmente */
  transition: transform 0.3s ease-in-out; /* Transición suave de la transformación */
  transform-origin: left; /* La transformación comienza desde la izquierda */
}

.custom-dropdown-item a:hover span::after {
  transform: scaleX(1); /* Al pasar el mouse, la línea animada se expande al ancho del texto */
}
/* Fin Animacion Linea sub menu Productos */

/* INICIO Animacion para el Boton Mac usados */

.animate-saldos span {
  position: relative;
  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: #0b2244;
  width: fit-content;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 2px 5px;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  overflow: hidden;
  cursor: pointer;
}

/* FIN Animacion para el Boton Mac usados */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header .mega-category-menu {
    padding-right: 35px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .mega-category-menu {
    display: none;
  }
}

@media (max-width: 767px) {
  .header .mega-category-menu {
    display: none;
  }
}

.header .mega-category-menu .cat-button {
  display: flex; /* Cambia a flexbox */
  align-items: center; /* Alinea verticalmente el texto y el icono */
  color: #0b2244;
  font-size: 15px;
  font-weight: 600;
}

.header .mega-category-menu .cat-button i {
  margin-right: 12px;
  font-size: 20px;
}

.header .mega-category-menu:hover .sub-category {
  opacity: 1;
  visibility: visible;
  top: 61px;
}

.header .mega-category-menu .sub-category {
  position: absolute;
  left: 0;
  top: 68px;
  width: 241px;
  height: auto;
  border: 1px solid #eee;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  border-radius: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  padding: 15px 0;
}

.header .mega-category-menu .sub-category li {
  display: block;
  position: relative;
}

.header .mega-category-menu .sub-category li:hover .inner-sub-category {
  opacity: 1;
  visibility: visible;
  top: 0;
}

.header .mega-category-menu .sub-category li .inner-sub-category {
  padding: 15px 0;
  position: absolute;
  top: 8px;
  width: 240px;
  height: auto;
  border: 1px solid #eee;
  background-color: #fff;
  border-radius: 0;
  left: 239px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.header .mega-category-menu .sub-category li .inner-sub-category li {
  display: block;
  position: relative;
}

.header .mega-category-menu .sub-category li .inner-sub-category li:last-child {
  margin: 0;
}

.header .mega-category-menu .sub-category li .inner-sub-category li a {
  color: #0b2244;
  text-transform: capitalize;
  font-size: 14px;
  position: relative;
  width: 100%;
  padding: 8px 30px;
}

.header .mega-category-menu .sub-category li .inner-sub-category li a:hover {
  color: #00bba1;
}

.header .mega-category-menu .sub-category li:last-child {
  margin: 0;
}

.header .mega-category-menu .sub-category li a {
  color: #0b2244;
  text-transform: capitalize;
  font-size: 14px;
  position: relative;
  width: 100%;
  padding: 8px 30px;
}

.header .mega-category-menu .sub-category li a i {
  font-size: 12px;
  float: right;
  position: relative;
  top: 5px;
}

.header .mega-category-menu .sub-category li a:hover {
  color: #00bba1;
}

.header .nav-social {
  float: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width: 767px) {
  .header .nav-social {
    position: relative;
    margin-top: -50px;
  }
}

.header .nav-social .title {
  font-size: 14px;
  font-weight: 600;
  color: #0b2244;
  display: inline-block;
  margin-right: 15px;
}

@media (max-width: 767px) {
  .header .nav-social .title {
    display: none;
  }
}

.header .nav-social ul li {
  display: inline-block;
  margin-right: 5px;
}

.header .nav-social ul li:last-child {
  margin: 0;
}

.header .nav-social ul li a {
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  display: block;
  border: 1px solid #eee;
  border-radius: 50%;
  font-size: 14px;
  color: #555;
}

.header .nav-social ul li a:hover {
  color: #fff;
  background-color: #00bba1;
  border-color: transparent;
}

.header .navbar-brand {
  margin: 0;
}

@media (max-width: 767px) {
  .header .navbar-brand {
    display: block;
    text-align: left;
    padding: 0;
  }
}

.header .navbar-brand img {
  width: 200px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header .navbar-brand img {
    width: 190px;
  }
}

@media (max-width: 767px) {
  .header .navbar-brand img {
    width: 180px;
  }
}

.header.sticky .navbar-brand .white-logo {
  opacity: 0;
  visibility: hidden;
}

.header.sticky .navbar-brand .dark-logo {
  opacity: 1;
  visibility: visible;
}

.header.sticky .button .btn {
  background-color: #00bba1;
  color: #fff;
  border-color: transparent;
}

.header.sticky .button .btn:hover {
  background-color: #0b2244;
  color: #fff;
}

.sticky {
  position: fixed;
  z-index: 99;
  background-color: #fff;
  -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  top: 0;
  width: 100%;
}

.navbar-expand-lg .navbar-nav {
  margin: 0;
  margin-left: 0 !important;
  margin-right: auto !important;
}

.header .navbar .navbar-nav .nav-item a.active {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.sticky .navbar .navbar-nav .nav-item a.active {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.sticky .navbar .mobile-menu-btn .toggler-icon {
  background: #333;
}

/*===== NAVBAR =====*/
.navbar-area {
  width: 100%;
  z-index: 99;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  padding: 0;
  border-bottom: 1px solid #eee;
}

.navbar-area.sticky {
  position: fixed;
  z-index: 99;
  background: #00bba1;
  -webkit-box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  background: #fff;
  padding: 0px 0;
}

.navbar {
  padding: 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.navbar-brand {
  padding-left: 0;
  border-radius: 0;
}

.mobile-menu-btn {
  padding: 0px;
  border: none !important;
  background: transparent !important;
}

.mobile-menu-btn:focus {
  text-decoration: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none !important;
}

.mobile-menu-btn .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #222;
  display: block;
  margin: 5px 0;
  position: relative;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.mobile-menu-btn.active .toggler-icon:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 7px;
}

.mobile-menu-btn.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.mobile-menu-btn.active .toggler-icon:nth-of-type(3) {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  top: -7px;
}

.navbar-nav .nav-item {
  z-index: 1;
  position: relative;
  margin-right: 40px;
}

.navbar-nav .nav-item:last-child {
  margin-right: 0 !important;
}

.navbar-nav .nav-item:hover a {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.sticky .navbar-nav .nav-item:hover a {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.navbar-nav .nav-item a {
  font-size: 14px;
  color: #0b2244;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  position: relative;
  padding: 20px 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: 600;
  transition: all 0.3s ease-out 0s;
  position: relative;
  text-transform: capitalize;
}

.navbar-nav .nav-item:hover .dd-menu::before {
  border-bottom-color: #00bba1;
  border-right-color: #00bba1;
}

.navbar-nav .nav-item a.active {
  color: #006c5b; /* SEO FIX: Contrast Ratio 5.0:1 */
}

.navbar-nav .nav-item a.dd-menu::after {
  content: "\ea5e";
  font: normal normal normal 1em/1 "LineIcons";
  position: absolute;
  right: -20px;
  font-size: 12px;
  top: 50%;
  margin-left: 5px;
  margin-top: -4px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .navbar-nav .nav-item a.dd-menu::after {
    right: -15;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item a.dd-menu::after {
    top: 18px;
    right: 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item a.collapsed::after {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.navbar-nav .nav-item:hover > .sub-menu {
  top: 100%;
  opacity: 1;
  visibility: visible;
}

.navbar-nav .nav-item:hover > .sub-menu .sub-menu {
  left: 100%;
  top: 0;
}

.navbar-nav .nav-item .sub-menu {
  padding: 30px;
  min-width: 240px;
  background: #fff;
  border: 1px solid #eee;
  position: absolute;
  top: 110% !important;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  border-radius: 0 0 4px 4px;
}

.navbar-nav .nav-item:hover .sub-menu {
  top: 100% !important;
}

.navbar-nav .nav-item .sub-menu .nav-item {
  width: 100%;
  margin-bottom: 15px;
}

.navbar-nav .nav-item .sub-menu .nav-item:last-child {
  margin: 0;
}

.navbar-nav .nav-item .sub-menu .nav-item a {
  padding: 0;
  color: #888;
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  text-transform: capitalize;
  position: relative;
  z-index: 1;
  border-radius: 4px;
  overflow: hidden;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.navbar-nav .nav-item .sub-menu .nav-item a:hover {
  color: #00bba1;
}

.navbar-nav .nav-item .sub-menu.left-menu {
  left: -100%;
}

.navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    display: none;
  }
}

.navbar-nav .nav-item .sub-menu > li {
  display: block;
  margin-left: 0;
}

.navbar-nav .nav-item .sub-menu > li:last-child {
  border: none;
}

.navbar-nav .nav-item .sub-menu > li.active > a {
  color: #00bba1 !important;
}

.navbar-nav .nav-item .sub-menu > li > a {
  font-weight: 400;
  display: block;
  padding: 12px 15px;
  font-size: 14px;
  color: #222;
  font-weight: 400;
}

.navbar-nav .nav-item .sub-menu > li:first-child a {
  border: none;
}

.add-list-button {
  display: inline-block;
  margin-left: 10px;
}

.add-list-button .btn i {
  font-size: 14px;
  display: inline-block;
  margin-right: 5px;
}

/*======================================
End Header CSS
  ========================================*/
/*======================================
    Hero Area CSS
========================================*/
.hero-area {
  position: relative;
  background-color: #fff;
  margin-top: 12px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .md-custom-padding {
    padding-right: 0 !important;
  }
}

.hero-area .custom-padding-right {
  padding-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .custom-padding-right {
    padding-right: calc(var(--bs-gutter-x) / 2);
  }
}

@media (max-width: 767px) {
  .hero-area .custom-padding-right {
    padding-right: calc(var(--bs-gutter-x) / 2);
  }
}

.hero-area .slider-head {
  position: relative;
  overflow: hidden;
}

.hero-area .slider-head:hover .tns-controls button:first-child {
  left: 0;
}

.hero-area .slider-head:hover .tns-controls button:last-child {
  right: 0;
}

.hero-area .tns-controls button {
  width: 35px;
  height: 60px;
  cursor: pointer;
  z-index: 2;
  color: #fff;
  font-size: 17px;
  background: #00bba1;
  border: none;
  padding: 2px 5px;
  border-radius: 4px;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  position: absolute;
  z-index: 99;
  top: 50%;
  margin-top: -30px;
  border-radius: 0;
}

.hero-area .tns-controls button:hover {
  background-color: #0b2244;
  color: #fff;
}

.hero-area .tns-controls button:first-child {
  left: -40px;
  border-radius: 0 4px 4px 0;
}

.hero-area .tns-controls button:last-child {
  right: -40px;
  border-radius: 4px 0px 0px 4px;
}

/* CLS fix: antes de que tns() inicialice, los slides se apilan verticalmente.
   :not(.tns-slider) limita la altura al primer slide; tns() añade .tns-slider y toma el control */
.hero-slider:not(.tns-slider) {
  overflow: hidden;
  height: 500px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-slider:not(.tns-slider) {
    height: 400px;
  }
}

@media (max-width: 767px) {
  .hero-slider:not(.tns-slider) {
    overflow: hidden;
    height: auto;
    aspect-ratio: 800 / 500;
  }
}

.hero-area .hero-slider .single-slider {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  position: relative;
}

/* LCP fix: img visible como candidato LCP real en lugar de background-image */
.hero-area .hero-slider .single-slider .hero-lcp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

@media (max-width: 767px) {
  .hero-area .hero-slider .single-slider {
    position: relative;
    background-size: cover;
    background-position: center;
    width: 100%;
    /* CLS fix: aspect-ratio estable en lugar de vh (que cambia con barra de dirección) */
    aspect-ratio: 800 / 500;
    height: auto;
    margin-bottom: 12px;
  }
  .hero-area .hero-slider .single-slider::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.5;
    z-index: 1;
  }
  .hero-area .hero-slider .single-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-slider .single-slider {
    height: 400px;
    margin-bottom: 12px;
  }
}

.hero-area .hero-slider .single-slider .content {
  padding: 20px 365px 20px 50px;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-slider .single-slider .content {
    padding-right: 300px;
  }
}

@media (max-width: 767px) {
  .hero-area .hero-slider .single-slider .content {
    position: relative;
    padding-right: 30px;
    padding-left: 20px;
  }
}

.hero-area .hero-slider .single-slider .content h2 {
  font-size: 30px;
  font-weight: 800;
  color: #0b2244;
}

.hero-area .hero-slider .single-slider .content h2 span {
  font-size: 17px;
  font-weight: 600;
  display: block;
  color: #8a8a8a;
  margin-bottom: 10px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-slider .single-slider .content h2 span {
    font-size: 14px;
    font-weight: 500;
  }
}

@media (max-width: 767px) {
  .hero-area .hero-slider .single-slider .content h2 span {
    font-size: 14px;
    font-weight: 500;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-slider .single-slider .content h2 {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  /* para que se vea bien en el movil */
  .hero-area .hero-slider .single-slider .content h2 {
    font-size: 20px;
  }
}

.hero-area .hero-slider .single-slider .content p {
  margin-top: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-slider .single-slider .content p {
    margin-top: 10px;
  }
}

@media (max-width: 767px) {
  .hero-area .hero-slider .single-slider .content p {
    margin-top: 10px;
  }
}

.hero-area .hero-slider .single-slider .content h3 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 800;
  color: #0b2244;
}

.hero-area .hero-slider .single-slider .content h3 span {
  display: inline-block;
  margin-right: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #8a8a8a;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-slider .single-slider .content h3 span {
    margin-right: 10px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .hero-area .hero-slider .single-slider .content h3 span {
    margin-right: 8px;
    font-size: 14px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-slider .single-slider .content h3 {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .hero-area .hero-slider .single-slider .content h3 {
    font-size: 20px;
  }
}

.hero-area .hero-slider .single-slider .content .button {
  margin-top: 30px;
}

/* Style para Boton Banner Home Black Friday - Posicionado sobre el botón del banner */
.hero-area .hero-slider .single-slider.slider-blackfriday .content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  transform: none;
}

.hero-area .hero-slider .single-slider .content .button.btn-blackfriday {
  position: absolute;
  left: 50%;
  bottom: 8%;
  top: auto;
  transform: translateX(-50%);
  margin: 0;
}

/* Estilos del botón Black Friday */
.hero-area .hero-slider .single-slider .content .button.btn-blackfriday .btn {
  background-color: #00bba1;
  color: #0b2244;
  font-weight: 700;
  padding: 12px 28px;
  border: 2px solid #00bba1;
  transition: all 0.3s ease;
}

.hero-area .hero-slider .single-slider .content .button.btn-blackfriday .btn:hover {
  background-color: #ffffff;
  color: #0b2244;
  border-color: #ffffff;
}

/* Tablet landscape */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-slider .single-slider .content .button.btn-blackfriday {
    bottom: 3%;
  }
}

/* Smartphones */
@media (max-width: 767px) {
  .hero-area .hero-slider .single-slider.slider-blackfriday .content {
    position: absolute;
  }

  .hero-area .hero-slider .single-slider .content .button.btn-blackfriday {
    bottom: 5%;
  }

  .hero-area .hero-slider .single-slider .content .button.btn-blackfriday .btn {
    padding: 10px 22px;
    font-size: 13px;
  }
}

.hero-area .hero-slider .single-slider .content .button.hero-button .btn {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.hero-area .hero-slider .single-slider .content .button.hero-button .btn:hover {
  color: #ffffff !important;
  background-color: #00bba1 !important;
}

.hero-area .hero-small-banner {
  height: 244px;
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-size: cover;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-small-banner {
    height: 240px;
  }
}

@media (max-width: 767px) {
  .hero-small-banner {
    width: 100%;
    /* CLS fix: aspect-ratio reserva espacio antes de que cargue la imagen de fondo */
    aspect-ratio: 370 / 250;
    height: auto;
    background-size: cover;
    background-position: center;
    position: relative;
    contain: layout style;
  }
  .hero-small-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }
}

.hero-area .hero-small-banner .content {
  padding: 30px;
  position: absolute;
  left: 0;
  top: 45%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Ajuste de posición para el banner promocional de MacBook */
.hero-area .hero-small-banner.banner-macbook-promo .content {
  top: 80%;
}

.hero-area .hero-small-banner .content h2 {
  font-size: 20px;
  font-weight: 700;
}

.hero-area .hero-small-banner .content h2 span {
  font-size: 15px;
  font-weight: 500;
  color: #888;
  display: block;
  margin-bottom: 4px;
}

.hero-area .hero-small-banner .content h3 {
  color: #00bba1;
  font-size: 20px;
  font-weight: 800;
  display: block;
  margin-top: 7px;
}

.hero-area .hero-small-banner.style2 {
  margin-top: 12px;
  background-image: url("../images/hero/small-banner-bg.png");
  background-color: #0b2244;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-area .hero-small-banner.style2 {
    margin-top: 0;
  }
}

.hero-area .hero-small-banner.style2 .content {
  margin-top: 4%;
}

.hero-area .hero-small-banner.style2 .content h2 {
  color: #fff;
}

.hero-area .hero-small-banner.style2 .content h2 span {
  color: #fff;
}

.hero-area .hero-small-banner.style2 .content p {
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  margin-top: 15px;
}

.hero-area .hero-small-banner.style2 .content .button {
  margin-top: 20px;
}

.hero-area .hero-small-banner .content .button.hero-button-small .btn {
  background-color: #fff !important;
  color: #0b2244 !important;
  padding: 10px 25px !important;
}

.hero-area .hero-small-banner .content .button.hero-button-small .btn:hover {
  background-color: #00bba1 !important;
  color: #fff !important;
}

.hero-area .hero-small-banner.style2 .content .button .btn {
  background-color: #fff;
  color: #0b2244;
  padding: 10px 25px;
}

.hero-area .hero-small-banner.style2 .content .button .btn:hover {
  background-color: #00bba1;
  color: #fff;
}

/* Stylo para el boton del banner Vende tu Mac*/

.single-slider .box-vender-mac {
  display: flex;
  width: 100%;
  padding-top: 15% !important;
  margin-left: 170px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .single-slider .box-vender-mac {
    margin-left: 120px;
  }
}

@media only screen and (min-width: 997px) and (max-width: 1199px) {
  .single-slider .box-vender-mac {
    margin-left: 60px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 996px) {
  .single-slider .box-vender-mac {
    margin-left: 120px;
  }
}

@media (max-width: 767px) {
  .single-slider .box-vender-mac {
    margin-left: 35px;
  }
}

@media only screen and (min-width: 320px) and (max-width: 375px) {
  .single-slider .box-vender-mac {
    margin-left: 10px;
  }
}

/* Estilo base del botón */
.btn-banner-hero {
  background-color: #ffdf6e !important;
  color: #0b2244 !important;
  font-size: medium !important;
  font-weight: bold !important;
  position: absolute !important;
  bottom: 30% !important;
  right: 25% !important;
  z-index: 2 !important;
}

/* Hover del botón */
.btn-banner-hero:hover {
  background-color: #0b2244 !important;
  color: #ffffff !important;
}

/* Media queries con mayor especificidad */
@media only screen and (max-width: 767px) {
  .single-slider .button .btn-banner-hero {
    bottom: 25% !important;
    right: 12% !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .single-slider .button .btn-banner-hero {
    bottom: 25% !important;
    right: 22% !important;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1199px) {
  .single-slider .button .btn-banner-hero {
    bottom: 30% !important;
    right: 17% !important;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .single-slider .button .btn-banner-hero {
    bottom: 30% !important;
    right: 22% !important;
  }
}

/*======================================
    Shipping Info CSS
========================================*/
.shipping-info {
  background-color: #f9f9f9;
  padding: 50px 0;
}

.shipping-info ul {
  display: inline-block;
  width: 100%;
  margin-bottom: 0px;
}

.shipping-info li {
  list-style: none;
  float: left;
  width: 25%;
  padding: 30px 40px;
  border: 1px solid #eee;
  text-align: center;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .shipping-info li {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .shipping-info li {
    width: 100%;
  }
}

.shipping-info li:hover {
  background-color: #fff;
}

.shipping-info .media-icon {
  margin-bottom: 15px;
}

.shipping-info .media-icon i {
  color: #00bba1;
  font-size: 38px;
}

.shipping-info .media-body {
  padding-bottom: 0px;
}

.shipping-info .media-body h2 {
  font-size: 15px;
  margin: 0px;
  font-weight: 600;
  color: #0b2244;
}

.shipping-info .media-body span {
  font-size: 13px;
  margin-top: 2px;
  color: #000000;
}

/*======================================
    Featured Categories Area CSS
========================================*/
.featured-categories .section-title {
  margin-bottom: 20px;
}

.featured-categories .single-category {
  padding: 40px;
  margin-top: 30px;
  border: 2px solid #f0f0f0;
  position: relative;
  background: #fff;
  z-index: 0;
}

.featured-categories .single-category .heading {
  font-size: 17px;
  font-weight: 700;
  color: #0b2244;
}

.featured-categories .single-category ul {
  margin-top: 20px;
}

.featured-categories .single-category ul li {
  display: block;
  margin-bottom: 4px;
}

.featured-categories .single-category ul li:last-child {
  margin: 0;
}

.featured-categories .single-category ul li a {
  color: #000000;
}

.featured-categories .single-category ul li a:hover {
  color: #00bba1;
  padding-left: 5px;
}

.featured-categories .single-category img {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .featured-categories .single-category img {
    width: 50%;
  }
}

/*======================================
    Product CSS
========================================*/
/* Single Product*/
.single-product {
  border: 1px solid #eee;
  border-radius: 4px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin-top: 30px;
  -webkit-box-shadow: 0px 0px 20px #00000012;
  box-shadow: 0px 0px 20px #00000012;
  padding: 8px;
  background: #fff;
}

.single-product .product-image {
  overflow: hidden;
  position: relative;
}

/* Nuevo estilo para el tag de disponibilidad */
.single-product .product-image .availability-tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 23;
  padding: 5px 10px;
  border-radius: 2px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

/* Ajuste del tag de descuento: posición inferior al tag de disponibilidad */
.single-product .product-image .sale-tag {
  background: #0b2244; /* ya actualizado */
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 30px; /* Se mueve abajo para dejar espacio al tag de disponibilidad */
  padding: 5px 10px;
  left: 0;
  z-index: 22;
}

.single-product .product-image .new-tag {
  background: #00adbf;
  border-radius: 2px;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 0;
  padding: 5px 10px;
  left: 0;
  z-index: 22;
}

.single-product .product-image .button {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  bottom: -60px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  opacity: 0;
  visibility: hidden;
}

.single-product .product-image .button .btn {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  width: 140px;
}

.single-product .product-image .button .btn i {
  font-size: 18px;
  position: relative;
  top: 2px;
}

.single-product .product-image img {
  width: 100%;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.single-product:hover .product-image .button {
  bottom: 30px;
  opacity: 1;
  visibility: visible;
}

.single-product:hover .product-image img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.single-product .product-info {
  padding: 20px;
  background-color: #fff;
}

.single-product .product-info {
  padding: 20px;
  background-color: #fff;
}

.single-product .product-info .category {
  color: #000000;
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}

.single-product .product-info .title a {
  font-size: 16px;
  font-weight: 700;
  color: #0b2244;
  /* agregar manito arriba de hipervinculo*/
  cursor: pointer;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .single-product .product-info .title a {
    font-size: 15px;
  }
}

.single-product .product-info .title a:hover {
  color: #007D6E;
}

.single-product .product-info .review {
  margin-top: 5px;
}

.single-product .product-info .review li {
  display: inline-block;
}

.single-product .product-info .review li i {
  color: #B8860B;
  font-size: 13px;
}

.single-product .product-info .review li span {
  display: inline-block;
  margin-left: 4px;
  color: #555; /* A11y fix: contrast 7.46:1 on #fff (mobile safe) */
  font-size: 13px;
}

.single-product .product-info .price {
  margin-top: 15px;
}

.single-product .product-info .price span {
  font-size: 17px;
  font-weight: 700;
  color: #006050; /* A11y fix: contrast 7.53:1 on #fff (mobile safe) */
  display: inline-block;
}

.single-product .product-info .price .discount-price {
  margin: 0;
  color: #666; /* A11y fix: contrast 5.74:1 on #fff (mobile safe, was 4.54:1 borderline) */
  text-decoration: line-through;
  font-weight: normal;
  margin-left: 10px;
  font-size: 14px;
  display: inline-block;
}

/* End Single Product */
.trending-product {
  background-color: #f9f9f9;
}

.trending-product .section-title {
  margin-bottom: 20px;
}

/*======================================
    Banner CSS
========================================*/
.single-banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 4px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .single-banner.right {
    height: 33vh;
  }

  .single-banner.right img {
    width: 100%;
    height: auto;
  }

  .single-banner.custom-responsive-margin {
    margin-top: 30px;
  }
}

.single-banner.right {
  text-align: left;
}

.single-banner.right img {
  width: 100%;
  height: auto;
}

.single-banner.right .content {
  padding: 50px 40px;
}

.single-banner.right .banner-blackfriday {
  margin-top: 30px;
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.single-banner .content {
  padding: 70px 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-banner .content {
    padding: 50px 30px;
  }
}

@media (max-width: 767px) {
  .single-banner .content {
    padding: 35px;
    margin-left: -5%;
    margin-top: -5%;
  }
}

.single-banner .content h2 {
  font-size: 22px;
  font-weight: 700;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-banner .content h2 {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .single-banner .content h2 {
    font-size: 18px;
  }
}

.single-banner .content .price span {
  color: #0b2244;
  display: block;
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
}

.single-banner .content p {
  font-size: 14px;
  margin-top: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-banner .content p {
    margin-top: 10px;
  }
}

@media (max-width: 767px) {
  .single-banner .content p {
    margin-top: 8px;
  }
}

.single-banner .content .button {
  margin-top: 25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-banner .content .button {
    margin-top: 20px;
  }
}

@media (max-width: 767px) {
  .single-banner .content .button {
    margin-top: 15px;
  }
}

/*======================================
    Special Offer CSS
========================================*/
.special-offer {
  background-color: #f9f9f9;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .special-offer .section-title {
    margin-bottom: 20px;
  }
}

.special-offer .offer-content {
  text-align: left;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  -webkit-box-shadow: 0px 0px 20px #00000012;
  box-shadow: 0px 0px 20px #00000012;
  padding: 12px;
  margin-top: 30px;
}

.special-offer .offer-content:hover .image img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.special-offer .offer-content .image {
  position: relative;
  overflow: hidden;
}

.special-offer .offer-content .image img {
  width: 100%;
  border-radius: 4px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.special-offer .offer-content .image .sale-tag {
  background: #c0392b; /* A11y fix: contrast 5.2:1 with #fff text (was #f73232 = 3.76:1) */
  border-radius: 2px;
  font-size: 13px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top: 10px;
  padding: 5px 10px;
  right: 10px;
  z-index: 22;
  height: 50px;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  padding: 0;
  text-align: center;
}

.special-offer .offer-content .text {
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 0px 20px;
}

.special-offer .offer-content .text h2 {
  text-align: left;
  margin-bottom: 10px;
}

.special-offer .offer-content .text h2 a {
  font-size: 20px;
  font-weight: 700;
  color: #0b2244;
}

.special-offer .offer-content .text h2 a:hover {
  color: #00bba1;
}

.special-offer .offer-content .text .review {
  margin-top: 5px;
}

.special-offer .offer-content .text .review li {
  display: inline-block;
}

.special-offer .offer-content .text .review li i {
  color: #B8860B;
  font-size: 13px;
}

.special-offer .offer-content .text .review li span {
  display: inline-block;
  margin-left: 4px;
  color: #595959; /* A11y fix: contrast 7.1:1 on #fff */
  font-size: 13px;
}

.special-offer .offer-content .text .price {
  margin-top: 10px;
  margin-bottom: 10px;
}

.special-offer .offer-content .text .price span {
  font-size: 20px;
  font-weight: 800;
  color: #006c5b; /* A11y fix: contrast 6.5:1 on #fff (was #00bba1 = 2.35:1) */
  display: inline-block;
}

.special-offer .offer-content .text .price .discount-price {
  margin: 0;
  color: #767676; /* A11y fix: contrast 4.54:1 on #fff (was #aaaaaa = 2.24:1) */
  text-decoration: line-through;
  font-weight: normal;
  margin-left: 10px;
  font-size: 18px;
  display: inline-block;
}

.special-offer .offer-content .text p {
  color: #595959; /* A11y fix: contrast 7.1:1 on #fff (was #888 = 3.54:1) */
}

.special-offer .offer-content .box-head {
  border: 1px solid #eee;
  padding: 15px 10px;
  border-radius: 4px;
}

.special-offer .offer-content .box {
  background: #ffffff0d;
  width: 24%;
  height: auto;
  margin: 0;
  display: inline-block;
}

.special-offer .offer-content span#days,
.special-offer .offer-content span#hours,
.special-offer .offer-content span#minutes,
.special-offer .offer-content span#seconds {
  text-align: center;
  padding-top: 2px;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 5px;
  color: #0b2244;
}

.special-offer .offer-content span#daystxt,
.special-offer .offer-content span#hourstxt,
.special-offer .offer-content span#minutestxt,
.special-offer .offer-content span#secondstxt {
  text-align: center;
  padding-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
}

.special-offer .offer-content .alert {
  display: none;
}

/*======================================
    Home Product List CSS
========================================*/
@media (max-width: 767px) {
  .home-product-list .custom-responsive-margin {
    margin-bottom: 40px;
  }
}

.home-product-list .list-title {
  position: relative;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
  color: #232323;
  font-size: 15px;
  font-weight: 500;
}

.home-product-list .list-title::before {
  display: block;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 90px;
  height: 1px;
  background-color: #00bba1;
  content: "";
}

.home-product-list .single-list {
  margin-bottom: 20px;
}

.home-product-list .single-list:last-child {
  margin: 0;
}

.home-product-list .single-list .list-image {
  width: 60px;
  padding-right: 12px;
  float: left;
  position: relative;
  top: 10px;
}

.home-product-list .single-list .list-image a {
  display: block;
  border-radius: 5px;
  overflow: hidden;
}

.home-product-list .single-list .list-image a img {
  width: 100%;
  height: auto;
}

.home-product-list .single-list .list-info {
  display: table-cell;
  vertical-align: top;
}

.home-product-list .single-list .list-info h4 a {
  font-size: 14px;
  font-weight: 500;
  color: #0b2244;
  text-wrap: balance;
}

.home-product-list .single-list .list-info h4 a:hover {
  color: #00bba1;
}

.home-product-list .single-list .list-info span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #006c5b; /* A11y fix: contrast 6.5:1 on #fff (was #00adbf = 2.64:1) */
}

/*======================================
    About Us CSS
========================================*/
.about-us {
  background-color: #f9f9f9;
}

.about-us .content-left {
  position: relative;
}

.about-us .content-left img {
  width: 100%;
  border-radius: 4px;
}

.about-us .content-left .video {
  position: absolute;
  height: 80px;
  width: 80px;
  line-height: 80px;
  text-align: center;
  color: #00bba1;
  background-color: #fff;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  font-size: 25px;
  padding-left: 3px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.about-us .content-left .video:hover {
  color: #fff;
  background-color: #00bba1;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.about-us .content-left .video:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border: 1px solid #fff;
  border-radius: 50%;
  -webkit-animation: pulse-border-2 2s linear infinite;
  animation: pulse-border-2 2s linear infinite;
}

@-webkit-keyframes pulse-border {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes pulse-border {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    opacity: 0;
  }
}

@-webkit-keyframes pulse-border-2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

@keyframes pulse-border-2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0;
  }
}

.about-us .content-right {
  padding-left: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .about-us .content-right {
    padding: 0;
    margin-top: 30px;
  }
}

.about-us .content-right h2 {
  display: block;
  font-size: 32px;
  margin-bottom: 25px;
  line-height: 45px;
  text-transform: capitalize;
  position: relative;
  font-weight: 700;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .about-us .content-right h2 {
    font-size: 28px;
    line-height: 38px;
  }
}

@media (max-width: 767px) {
  .about-us .content-right h2 {
    font-size: 22px;
    line-height: 35px;
  }
}

.about-us .content-right h3 {
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 8px;
  line-height: 45px;
  text-transform: capitalize;
  position: relative;
  font-weight: 600;
}

.about-us .content-right p {
  font-size: 14px;
  line-height: 26px;
  margin-bottom: 25px;
}

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

/*======================================
    Faq CSS
========================================*/
.faq {
  padding-bottom: 80px;
  background-color: #f9f9f9;
}

.faq .section-title {
  margin-bottom: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq .section-title {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .faq .section-title {
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .faq {
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .faq {
    padding-bottom: 30px;
  }
}

.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  padding-right: 40px;
}

.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

.accordion-item .accordion-button {
  border-radius: 4px;
  font-size: 17px;
  font-weight: 500;
  width: 100%;
  display: block;
  overflow: hidden;
  border: none;
  padding: 15px 25px;
  padding-right: 40px;
  background-color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .accordion-item .accordion-button {
    padding: 18px 20px;
    padding-right: 40px;
  }
}

@media (max-width: 767px) {
  .accordion-item .accordion-button {
    padding: 15px 20px;
    padding-right: 40px;
  }
}

.accordion-item .accordion-button .title {
  font-size: 14px;
  position: relative;
  font-weight: 600;
  float: left;
  line-height: 25px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .accordion-item .accordion-button .title {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .accordion-item .accordion-button .title {
    font-size: 14px;
  }
}

.accordion-item .accordion-button i {
  font-size: 15px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  top: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 20px;
}

.accordion-button:not(.collapsed) {
  color: #fff;
  background-color: #0b2244;
  border-radius: 4px 4px 0 0;
}

.accordion-button:not(.collapsed) i::before {
  content: "\eb2e";
  font-family: lineIcons;
}

.accordion-button::after {
  display: none;
}

.accordion-collapse {
  border: none;
}

.accordion-body {
  border-radius: 0 0 4px 4px;
  padding: 25px;
  background-color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .accordion-body {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .accordion-body {
    padding: 20px;
  }
}

.accordion-body p {
  margin: 0;
  margin-bottom: 20px;
  color: #000000;
}

.accordion-body p a {
  color: #00bba0;
}

.accordion-body p:last-child {
  margin: 0;
}

.accordion-item {
  margin-bottom: 20px;
  -webkit-box-shadow: 0px 0px 20px #00000007;
  box-shadow: 0px 0px 20px #00000007;
  border-radius: 4px;
}

.accordion-item:last-child {
  margin: 0;
}

/*======================================
    Blog CSS
========================================*/
.blog-section {
  background-color: #fff;
}

.blog-section .section-title {
  margin-bottom: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .blog-section .section-title {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .blog-section .section-title {
    margin-bottom: 20px;
  }
}

.blog-section .single-blog {
  margin-top: 30px;
  overflow: hidden !important;
  -webkit-box-shadow: 0px 0px 20px #00000012;
  box-shadow: 0px 0px 20px #00000012;
  padding: 8px;
  background: #fff;
  border-radius: 4px;
}

.blog-section .single-blog .blog-img {
  overflow: hidden;
}

.blog-section .single-blog .blog-img a {
  width: 100%;
}

.blog-section .single-blog .blog-img img {
  width: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.blog-section .single-blog:hover .blog-img img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.blog-section .single-blog .blog-content {
  padding: 20px;
}

.blog-section .single-blog .blog-content .category {
  font-size: 14px;
  color: #010101;
  display: inline-block;
  font-weight: 500;
  padding: 12px 0;
}

.blog-section .single-blog .blog-content h2 {
  display: block;
  margin-top: 10px;
  line-height: 28px;
}

.blog-section .single-blog .blog-content h2 a {
  font-size: 19px;
  color: #0b2244;
  display: inline-block;
  font-weight: 700;
  padding: 8px 0;
}

.blog-section .single-blog .blog-content h2 a:hover {
  color: #00bba1;
}

.blog-section .single-blog .blog-content h3 {
  display: block;
  margin-top: 10px;
  line-height: 28px;
}

.blog-section .single-blog .blog-content h3 a {
  font-size: 19px;
  color: #0b2244;
  display: inline-block;
  font-weight: 700;
  padding: 8px 0;
}

.blog-section .single-blog .blog-content h3 a:hover {
  color: #00bba1;
}

.blog-section .single-blog .blog-content p {
  display: block;
  margin-top: 20px;
  color: #000;
}

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

.blog-section .single-blog .blog-content .button .btn {
  background-color: transparent;
  border: 1px solid #dfdfdf;
  color: #0b2244;
}

.blog-section .single-blog .blog-content .button .btn:hover {
  background-color: #00bba1;
  color: #fff;
  border-color: transparent;
}

/*======================================
Brands CSS
========================================*/
.brands {
  padding: 80px 0;
  background-color: #f9f9f9;
}

.brands #tns2 > .tns-item {
  padding-right: 28px;
}

.brands .title {
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .brands {
    padding: 40px 0;
  }
}

.brands .brands-logo-wrapper {
  border: 1px solid #eee;
}

.brands .brands-logo-wrapper .brands-logo-carousel .brand-logo {
  padding: 20px 20px;
  text-align: center;
  margin: 0;
  border-right: 1px solid #eee;
}

.brands .brands-logo-wrapper .brands-logo-carousel .brand-logo img {
  width: 100px;
  opacity: 0.8;
  -webkit-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

.brands .brands-logo-wrapper .brands-logo-carousel .brand-logo img:hover {
  opacity: 1;
}

/*======================================
	Footer CSS
========================================*/
.footer {
  background-color: #0b2244;
  position: relative;
  /* Single Footer */
  /* End Single Footer */
}

.footer .footer-top .inner-content {
  padding: 60px 0;
  border-bottom: 1px solid #ffffff26;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-top .inner-content {
    padding: 50px 0;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .inner-content {
    padding: 40px 0;
    text-align: center;
  }
}

.footer .footer-top .footer-logo a img {
  width: 200px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-top .footer-logo a img {
    width: 190px;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-logo a img {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter {
    padding: 0px 20px;
  }
}

.footer .footer-top .footer-newsletter .title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  float: left;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-top .footer-newsletter .title {
    margin-bottom: 20px;
    display: block;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .title {
    margin-bottom: 20px;
    display: block;
    font-size: 18px;
    width: 100%;
  }
}

.footer .footer-top .footer-newsletter .title span {
  color: #c2c2c2;
  display: block;
  font-size: 14px;
  margin-top: 5px;
  font-weight: 400;
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .title span {
    margin-top: 10px;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form {
  float: right;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-top .footer-newsletter .newsletter-form {
    float: none;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .newsletter-form {
    float: none;
    margin-top: 20px;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form input {
  height: 50px;
  background-color: rgba(255, 255, 255, 0.308);
  border-radius: 4px;
  width: 300px;
  display: inline-block;
  border: none;
  padding: 0px 20px;
  color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer .footer-top .footer-newsletter .newsletter-form input {
    width: 240px;
  }
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .newsletter-form input {
    width: 100%;
    text-align: center;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form input::-webkit-input-placeholder {
  color: #fff;
}

.footer .footer-top .footer-newsletter .newsletter-form input:-ms-input-placeholder {
  color: #fff;
}

.footer .footer-top .footer-newsletter .newsletter-form input::-ms-input-placeholder {
  color: #fff;
}

.footer .footer-top .footer-newsletter .newsletter-form input::placeholder {
  color: #fff;
}

.footer .footer-top .footer-newsletter .newsletter-form .button {
  display: inline-block;
  margin-left: 6px;
  position: relative;
  top: -2px;
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .newsletter-form .button {
    margin: 0;
    margin-top: 10px;
    top: 0;
    width: 100%;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form .button .btn {
  height: 50px;
  background-color: #fff;
  color: #0b2244;
  padding: 12px 30px;
  font-size: 14px;
}

@media (max-width: 767px) {
  .footer .footer-top .footer-newsletter .newsletter-form .button .btn {
    width: 100%;
  }
}

.footer .footer-top .footer-newsletter .newsletter-form .button .btn:hover {
  color: #fff;
  background-color: #00bba0;
}

.footer .footer-middle {
  padding-top: 40px;
  padding-bottom: 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer .footer-middle {
    padding-top: 30px;
    padding-bottom: 70px;
  }
}

@media (max-width: 767px) {
  .footer .footer-middle {
    padding-top: 10px;
    padding-bottom: 50px;
  }
}

.footer .footer-middle .newsletter-form input {
  width: 100%;
  border-radius: 4px;
  padding: 0px 20px;
  height: 50px;
  border: 1px solid #eee;
}

.footer .footer-middle .newsletter-form .button {
  margin-top: 12px;
}

.footer .footer-middle .newsletter-form .button .btn {
  background-color: #0b2244;
  color: #fff;
}

.footer .footer-middle .newsletter-form .button .btn:hover {
  background-color: #00bba1;
  color: #fff;
}

.footer .footer-middle .newsletter-form p {
  color: #888;
  margin-top: 20px;
}

.footer .single-footer {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .footer .single-footer {
    margin-top: 30px;
    text-align: center;
  }
}

.footer .single-footer h3 {
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 15px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
}

.footer .single-footer h3::before {
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 3px;
  background-color: #00bba1;
  content: "";
}

@media (max-width: 767px) {
  .footer .single-footer h3::before {
    left: 50%;
    margin-left: -20px;
  }
}

.footer .single-footer.f-link ul li {
  display: block;
  margin-bottom: 12px;
  position: relative;
}

.footer .single-footer.f-link ul li:last-child {
  margin-bottom: 0;
}

.footer .single-footer.f-link ul li a {
  color: #d6d6d6;
  font-size: 14px;
  font-weight: 500;
  position: relative;
}

.footer .single-footer.f-link ul li a:hover {
  padding-left: 5px;
  color: #00bba1;
}

.footer .single-footer.f-link.cat ul li {
  display: block;
  margin-bottom: 12px;
  position: relative;
}

.footer .single-footer.f-link.cat ul li:last-child {
  margin-bottom: 0;
}

.footer .single-footer.f-link.cat ul li h4 {
  color: #d6d6d6;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: padding-left 0.4s ease;
}

.footer .single-footer.f-link.cat ul li h4:hover {
  padding-left: 2.5px;
  color: #00bba1;
}

.footer .single-footer.f-contact .phone {
  color: #d6d6d6;
}

.footer .single-footer.f-contact ul {
  margin: 10px 0;
}

.footer .single-footer.f-contact ul li {
  display: block;
  margin-bottom: 10px;
  color: #d6d6d6;
}

.footer .single-footer.f-contact ul li span {
  display: block;
}

.footer .single-footer.f-contact ul li:last-child {
  margin: 0;
}

.footer .single-footer.f-contact ul li span {
  color: #d6d6d6;
}

.footer .single-footer.f-contact .mail a {
  color: #d6d6d6;
}

.footer .single-footer.f-contact .mail a:hover {
  color: #00bba1;
}

.footer .single-footer.our-app .app-btn li {
  display: block;
  margin-bottom: 15px;
}

.footer .single-footer.our-app .app-btn li:last-child {
  margin-bottom: 0;
}

.footer .single-footer.our-app .app-btn li span {
  display: block !important;
}

.footer .single-footer.our-app .app-btn li a {
  position: relative;
  padding-left: 40px;
  border-radius: 4px;
  padding: 15px 30px;
  padding-left: 60px;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  background-color: #ffffff0f;
}

.footer .single-footer.our-app .app-btn li a i {
  font-size: 27px;
  position: absolute;
  left: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer .single-footer.our-app .app-btn li a .small-title {
  font-size: 13px;
  display: block;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer .single-footer.our-app .app-btn li a .big-title {
  font-size: 14px;
  font-weight: 500;
  display: block;
  color: #fff;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer .single-footer.our-app .app-btn li a:hover {
  background-color: #00bba1;
  color: #fff;
  border-color: transparent;
}

.footer .single-footer.our-app .app-btn li a:hover .small-title {
  color: #fff;
}

.footer .single-footer.our-app .app-btn li a:hover .big-title {
  color: #fff;
}

.footer .footer-bottom .inner-content {
  border-top: 1px solid #ffffff26;
  padding: 25px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer .footer-bottom .inner-content {
    text-align: center;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer .footer-bottom .payment-gateway {
    margin-bottom: 12px;
  }
}

.footer .footer-bottom .payment-gateway span {
  display: inline-block;
  margin-right: 12px;
  color: #fff;
}

@media (max-width: 767px) {
  .footer .footer-bottom .payment-gateway span {
    display: block;
    margin: 0;
    margin-bottom: 10px;
  }
}

.footer .footer-bottom .payment-gateway img {
  width: 200px;
}

.footer .footer-bottom .copyright {
  text-align: center;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer .footer-bottom .copyright {
    margin-bottom: 12px;
  }
}

.footer .footer-bottom .copyright p {
  color: #fff;
}

.footer .footer-bottom .copyright p a {
  color: #eee;
  display: inline-block;
  margin-left: 4px;
}

.footer .footer-bottom .copyright p a:hover {
  color: #00bba1;
}

.footer .footer-bottom .socila {
  display: block;
  float: right;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .footer .footer-bottom .socila {
    float: none;
    text-align: center;
  }
}

.footer .footer-bottom .socila li {
  margin: 0;
  margin-right: 5px;
  display: inline-block;
}

.footer .footer-bottom .socila li:last-child {
  margin: 0;
}

.footer .footer-bottom .socila li a {
  height: 35px;
  width: 35px;
  text-align: center;
  display: block;
  color: #fff;
  border-radius: 50%;
  line-height: 35px;
  font-size: 15px;
}

.footer .footer-bottom .socila li a:hover {
  background-color: #00bba1;
  color: #fff;
  border-color: transparent;
}

.footer .footer-bottom .socila li span {
  display: inline-block;
  color: #fff;
  margin-right: 12px;
}

@media (max-width: 767px) {
  .footer .footer-bottom .socila li span {
    display: none;
  }
}

/* posicion del boton Whatsapp */
.boton-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: all 0.3s ease-in-out;
  z-index: 100;
}

.boton-whatsapp img {
  transform: scale(1.85);
}

/* Animacion de elevacion*/
.boton-whatsapp:hover {
  transform: translateY(-5px);
}

@media only screen and (max-width: 600px) {
  .boton-whatsapp {
    bottom: 10px;
    right: 10px;
  }
}

/* Estilos optimizados para el botón WhatsApp - Versión Global */
.boton-whatsapp,
.boton-whatsapp-home {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  text-decoration: none;
  min-width: 64px;
  min-height: 64px;
  display: block;
}

.whatsapp-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenedor del icono optimizado */
.whatsapp-icon-wrapper {
  background-color: #25d366;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  will-change: transform;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.whatsapp-icon {
  width: 100%;
  height: 100%;
  display: block;
}

/* Efectos hover optimizados */
.whatsapp-icon-wrapper:hover {
  transform: translateY(-5px);
  background-color: #20ba5a;
}

/* Animación de rebote optimizada */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Eliminar animaciones anteriores que causaban CLS */
.boton-whatsapp:before,
.boton-whatsapp-home:before {
  content: none;
}

/* Media queries optimizadas */
@media only screen and (max-width: 768px) {
  .boton-whatsapp,
  .boton-whatsapp-home {
    bottom: 16px;
    right: 16px;
  }

  .whatsapp-icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .whatsapp-icon {
    width: 100%;
    height: 100%;
  }
}

/* Soporte para dispositivos de alta densidad de píxeles */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .whatsapp-icon {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Optimización para reducir CLS en diferentes viewports */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .boton-whatsapp,
  .boton-whatsapp-home {
    bottom: 25px;
    right: 25px;
  }
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
  .whatsapp-icon-wrapper {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  }
}

/* Boton animado FAQ - Esquinas */

#button-contact-faq {
  color: rgb(0, 0, 0);
  outline: none;
  border: none;
  font-size: 17px;
  font-weight: bold;
  padding: 1em 2em;
  position: relative;
  background: none;
  cursor: pointer;
}

#button-contact-faq:active {
  transform: scale(0.98);
  box-shadow: 0.1px 0.1px 2px #00bba1;
}

#button-contact-faq span {
  position: absolute;
  background: #00bba1;
  transition: 0.5s;
  box-shadow: 1px 1px 20px #00bba1;
}

#button-contact-faq span.b1 {
  top: 0;
  left: 0;
  width: 3px;
  height: 30%;
}

#button-contact-faq:hover span.b1 {
  height: 100%;
}

#button-contact-faq span.b2 {
  top: 0;
  left: 0;
  width: 15%;
  height: 3px;
}

#button-contact-faq:hover span.b2 {
  width: 100%;
}

#button-contact-faq span.b3 {
  bottom: 0;
  right: 0;
  width: 3px;
  height: 30%;
}

#button-contact-faq:hover span.b3 {
  height: 100%;
}

#button-contact-faq span.b4 {
  bottom: 0;
  right: 0;
  width: 15%;
  height: 3px;
}

#button-contact-faq:hover span.b4 {
  width: 100%;
}

/* =====================================
   MENÚ DROPDOWN DE USUARIO - MOBILE FIRST
   ===================================== 
   Sistema global de menú desplegable de usuario
   Presente en todas las páginas del e-commerce
   Diseño coherente con dropdown del carrito
*/

/* ===== CONTENEDOR PRINCIPAL ===== */
.user-menu-wrapper {
  position: relative;
  display: none; /* Controlado por JavaScript según autenticación */
}

/* ===== BOTÓN TRIGGER ===== */
.user-menu-trigger {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.user-menu-trigger:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-menu-trigger:focus {
  outline: 2px solid rgba(0, 187, 161, 0.5);
  outline-offset: 2px;
}

.user-menu-trigger i.lni-user {
  font-size: 16px;
  color: #fff;
}

.user-menu-trigger .chevron-icon {
  font-size: 12px;
  transition: transform 0.3s ease;
  margin-left: 2px;
}

/* Mobile: Ajustar tamaño de texto para mejor legibilidad */
@media (max-width: 767px) {
  .user-menu-trigger {
    font-size: 13px;
    gap: 4px;
  }

  .user-menu-trigger #greeting,
  .user-menu-trigger #usernametoken {
    font-size: 12px;
  }
}

/* ===== DROPDOWN MENU ===== */
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

/* Estado visible del dropdown */
.user-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Flecha superior del dropdown */
.user-menu-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
}

/* ===== LISTA DE OPCIONES ===== */
.user-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.user-menu-list li {
  margin: 0;
  padding: 0;
}

/* ===== ITEMS DEL MENÚ ===== */
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: #0b2244;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.user-menu-item:hover {
  background-color: #f8f9fa;
  color: #00bba1;
  border-left-color: #00bba1;
}

.user-menu-item i {
  font-size: 18px;
  color: #6c757d;
  transition: color 0.2s ease;
}

.user-menu-item:hover i {
  color: #00bba1;
}

/* Separador visual antes del último item (Cerrar sesión) */
.user-menu-list li:last-child {
  border-top: 1px solid #e9ecef;
  margin-top: 4px;
  padding-top: 4px;
}

.user-menu-list li:last-child .user-menu-item:hover {
  color: #dc3545;
  border-left-color: #dc3545;
}

.user-menu-list li:last-child .user-menu-item:hover i {
  color: #dc3545;
}

/* ===== RESPONSIVE - TABLET ===== */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .user-menu-dropdown {
    min-width: 180px;
  }

  .user-menu-item {
    padding: 10px 16px;
    font-size: 13px;
  }

  .user-menu-item i {
    font-size: 16px;
  }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 767px) {
  .user-menu-dropdown {
    min-width: 160px;
    right: -10px;
  }

  .user-menu-dropdown::before {
    right: 15px;
  }

  .user-menu-item {
    padding: 10px 14px;
    font-size: 13px;
    gap: 10px;
  }

  .user-menu-item i {
    font-size: 16px;
  }

  .user-menu-item span {
    font-size: 13px;
  }
}

/* ===== ACCESIBILIDAD ===== */
@media (prefers-reduced-motion: reduce) {
  .user-menu-trigger,
  .user-menu-trigger .chevron-icon,
  .user-menu-dropdown,
  .user-menu-item {
    transition: none;
  }
}

/* Estados de focus para navegación por teclado */
.user-menu-item:focus {
  outline: 2px solid #00bba1;
  outline-offset: -2px;
  background-color: #f8f9fa;
}

/* ===== ANIMACIONES DE CARGA ===== */
@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== FIN MENÚ DROPDOWN DE USUARIO ===== */

/*======================================
    Testimonials Google Reviews CSS
========================================*/
.testimonials-section {
  background-color: #f9f9f9;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.testimonials-section .section-title {
  margin-bottom: 40px;
}

.testimonials-section .section-title h2 {
  color: #0b2244;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: none !important; /* Fix: Respect original casing */
}

.testimonials-section .section-title p {
  color: #666;
  font-size: 16px;
}

/* Scroll Snap Container */
.testimonials-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px 5px 40px 5px; /* Padding bottom for shadow */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  align-items: stretch; /* Ensure all cards have same height */
}

.testimonials-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.testimonial-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 30px; /* Increased vertical padding */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
  height: auto; /* Allow grow */
  min-height: 380px; /* Fix: Enforce minimum height for uniformity */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Fix: Center content vertically */
  align-items: center; /* Fix: Center content horizontally */
  gap: 25px; /* Increased gap */
  flex: 0 0 85%; /* Mobile: 85% width */
  scroll-snap-align: center;
  border: 1px solid rgba(0, 0, 0, 0.03);
  color: #000;
  font-weight: bold;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.testimonial-stars {
  color: #ffc107;
  margin-bottom: 0;
  font-size: 20px; /* Slightly larger stars */
}

.testimonial-text {
  font-style: italic;
  color: #555;
  margin-bottom: 0;
  font-size: 16px; /* Slightly larger text */
  line-height: 1.6;
  flex-grow: 0;
  max-width: 100%;
}

.testimonial-user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 0;
  width: 100%;
}

.testimonial-user img {
  width: 45px; /* Larger profile image */
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #00bba1;
}

.user-info {
  text-align: left;
}

.user-info h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0b2244;
  margin-bottom: 2px;
}

.user-info span {
  font-size: 13px;
  color: #313131;
  display: block;
}

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 40px;
}

.google-badge img {
  width: 28px;
  height: 28px;
}

.google-badge span {
  font-weight: 700;
  color: #5f6368;
  font-size: 15px;
}

/* Navigation Buttons */
.testimonial-nav-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #eee;
  color: #0b2244;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  font-size: 18px;
}

.testimonial-nav-btn:hover {
  background: #00bba1;
  color: #fff;
  border-color: #00bba1;
}

.testimonials-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

@media (min-width: 768px) {
  .testimonial-card {
    flex: 0 0 45%; /* Tablet: 2 cards */
  }
}

@media (min-width: 992px) {
  .testimonial-card {
    flex: 0 0 32%; /* Desktop: 3 cards (approx) */
  }
  .testimonials-section {
    padding: 80px 0;
  }
}

/* ========================================
   DÍA DE LA MUJER ANNOUNCEMENT BAR
   Campaña temporal - 5 Mar a 17 Mar 2026
   ======================================== */
.bf-announcement-bar {
  background: linear-gradient(135deg, #1a0533 0%, #2e0a4f 50%, #1a0533 100%);
  position: fixed;
  top: 40px; /* Debajo de announcement-bar original (~40px) */
  left: 0;
  width: 100%;
  z-index: 1049; /* Debajo de announcement-bar original (1050) */
  padding: 5px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .bf-announcement-bar {
    top: 35px; /* Altura de announcement-bar en mobile */
  }
}

.bf-announcement-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(168, 85, 247, 0.05) 25%,
    rgba(168, 85, 247, 0.08) 50%,
    rgba(168, 85, 247, 0.05) 75%,
    transparent 100%
  );
  pointer-events: none;
}

.bf-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}

.bf-text-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  text-align: center;
}

.bf-title {
  color: #d8b4fe;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.4),
    0 0 16px rgba(168, 85, 247, 0.3);
  animation: bf-glow 2.5s ease-in-out infinite;
}

@keyframes bf-glow {
  0%,
  100% {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.4),
      0 0 16px rgba(168, 85, 247, 0.3);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255, 255, 255, 0.7),
      0 0 24px rgba(168, 85, 247, 0.5);
  }
}

.bf-discount {
  color: #fff;
  font-weight: 700;
  font-size: 0.75rem;
}

.bf-discount-amount {
  color: #f0abfc;
  font-weight: 800;
  font-size: 0.9rem;
  text-shadow: 0 0 8px rgba(240, 171, 252, 0.4);
}

.bf-separator {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.7rem;
}

.bf-hide-mobile {
  display: none;
}

.bf-promo-text {
  color: #fff;
  font-weight: 500;
  font-size: 0.7rem;
}

.bf-code-inline {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 3px;
  margin: 0 2px;
}

.bf-countdown-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.bf-countdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bf-time-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 28px;
}

.bf-time-value {
  background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
  padding: 2px 5px;
  border-radius: 4px;
  min-width: 26px;
  text-align: center;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bf-time-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

.bf-time-separator {
  color: #c084fc;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.bf-code-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bf-code-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
  font-weight: 500;
}

.bf-code {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.7rem;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.bf-limit {
  color: #fbbf24;
  font-size: 1rem;
  font-weight: 600;
}

/* Tablet - 576px+ */
@media (min-width: 576px) {
  .bf-announcement-bar {
    padding: 8px 15px;
  }

  .bf-content {
    flex-direction: row;
    gap: 12px;
  }

  .bf-title {
    font-size: 0.85rem;
  }

  .bf-discount {
    font-size: 0.8rem;
  }

  .bf-discount-amount {
    font-size: 0.95rem;
  }

  .bf-hide-mobile {
    display: inline;
  }

  .bf-promo-text {
    font-size: 0.8rem;
  }

  .bf-code-inline {
    font-size: 0.7rem;
    padding: 2px 8px;
  }

  .bf-time-value {
    font-size: 0.9rem;
    padding: 3px 6px;
    min-width: 30px;
  }

  .bf-time-label {
    font-size: 0.55rem;
  }

  .bf-code {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .bf-limit {
    font-size: 1rem;
  }
}

/* Desktop - 992px+ */
@media (min-width: 992px) {
  .bf-announcement-bar {
    padding: 8px 20px;
  }

  .bf-content {
    gap: 20px;
  }

  .bf-text-row {
    gap: 10px;
  }

  .bf-title {
    font-size: 0.95rem;
    letter-spacing: 2px;
  }

  .bf-promo-text {
    font-size: 0.85rem;
  }

  .bf-code-inline {
    font-size: 0.75rem;
    padding: 3px 10px;
  }

  .bf-discount-amount {
    font-size: 1rem;
  }

  .bf-countdown-row {
    gap: 15px;
  }

  .bf-time-unit {
    min-width: 36px;
  }

  .bf-time-value {
    font-size: 1rem;
    padding: 4px 8px;
    min-width: 36px;
  }

  .bf-time-label {
    font-size: 0.6rem;
  }

  .bf-time-separator {
    font-size: 1rem;
  }

  .bf-code {
    font-size: 0.85rem;
    padding: 5px 12px;
  }

  .bf-code-label {
    font-size: 0.75rem;
  }

  .bf-limit {
    font-size: 1rem;
  }
}

/* Large Desktop - 1200px+ */
@media (min-width: 1200px) {
  .bf-content {
    gap: 30px;
  }

  .bf-title {
    font-size: 1rem;
  }

  .bf-promo-text {
    font-size: 0.9rem;
  }

  .bf-code-inline {
    font-size: 0.8rem;
    padding: 3px 12px;
  }

  .bf-discount-amount {
    font-size: 1.1rem;
  }

  .bf-time-value {
    font-size: 1.1rem;
    min-width: 40px;
  }
}

/* Animación sutil del contador */
@keyframes bf-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.bf-time-value.bf-pulse {
  animation: bf-pulse 0.3s ease-in-out;
}

/* 
   * Promo + Announcement Bar Coexistencia
   * Ambas barras visibles: Original arriba, promo debajo
   */

/* Ajustar padding del header cuando la promo está activa (ambas barras) */
.bf-active .header.navbar-area {
  padding-top: 106px;
}

@media (min-width: 576px) {
  .bf-active .header.navbar-area {
    padding-top: 90px;
  }
}

@media (min-width: 768px) {
  .bf-active .header.navbar-area {
    padding-top: 88px;
  }
}

@media (min-width: 992px) {
  .bf-active .header.navbar-area {
    padding-top: 90px;
  }
}

@media (min-width: 1200px) {
  .bf-active .header.navbar-area {
    padding-top: 90px;
  }
}
/* Fin Día de la Mujer Announcement Bar */

/*======================================
    SEO Content Sections CSS
    Added: 2026-03-06
========================================*/

/* Section 1: Why Buy Used Mac */
.why-buy-mac {
  background-color: #f8fafc;
  padding: 70px 0;
}

.why-buy-mac .section-title {
  margin-bottom: 40px;
}

.why-buy-mac .value-card {
  text-align: center;
  padding: 35px 25px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.why-buy-mac .value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.why-buy-mac .value-card .card-icon {
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  background-color: rgba(0, 187, 161, 0.1);
  color: #00bba1;
  font-size: 28px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-buy-mac .value-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0b2244;
  margin-bottom: 12px;
}

.why-buy-mac .value-card p {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .why-buy-mac {
    padding: 50px 0;
  }
}

@media (max-width: 767px) {
  .why-buy-mac {
    padding: 40px 0;
  }
  .why-buy-mac .value-card {
    margin-bottom: 20px;
  }
}

/* Section 2: MacBook Buying Guide */
.macbook-guide {
  background-color: #fff;
}

.macbook-guide .guide-intro {
  font-size: 15px;
  color: #333;
  line-height: 1.8;
  max-width: 900px;
  margin: 0 auto 30px;
  text-align: center;
}

.macbook-guide .table-responsive {
  border-radius: 10px;
  overflow-x: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.macbook-guide table {
  margin-bottom: 0;
  min-width: 560px;
}

.macbook-guide table thead {
  background-color: #0b2244;
  color: #fff;
}

.macbook-guide table thead th {
  font-size: 13px;
  font-weight: 600;
  padding: 14px 16px;
  border: none;
  white-space: nowrap;
  vertical-align: middle;
}

.macbook-guide table tbody td {
  font-size: 13px;
  color: #333;
  padding: 12px 16px;
  vertical-align: middle;
  border-color: #f0f0f0;
}

.macbook-guide table tbody tr:hover {
  background-color: #f8fafc;
}

.macbook-guide table .btn-sm {
  font-size: 12px;
  padding: 6px 16px;
  background-color: #007D6E;
  border-color: #007D6E;
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
}

.macbook-guide table .btn-sm:hover {
  background-color: #0b2244;
  border-color: #0b2244;
}

.macbook-guide .guide-cta {
  text-align: center;
  margin-top: 30px;
}

.macbook-guide .guide-cta p {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
  max-width: 800px;
  margin: 0 auto;
}

.macbook-guide .guide-cta a {
  color: #007D6E;
  font-weight: 600;
}

.macbook-guide .guide-cta a:hover {
  color: #0b2244;
}

@media (max-width: 767px) {
  .macbook-guide table thead th,
  .macbook-guide table tbody td {
    font-size: 12px;
    padding: 10px 12px;
  }
}

/* Section 3: Mac vs PC */
.mac-vs-pc {
  background-color: #f8fafc;
}

.mac-vs-pc .comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 30px;
}

.mac-vs-pc .comparison-card {
  background: #fff;
  border-radius: 10px;
  padding: 35px 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.mac-vs-pc .comparison-card:hover {
  transform: translateY(-3px);
}

.mac-vs-pc .comparison-card .card-header-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.mac-vs-pc .comparison-card .card-header-custom i {
  font-size: 28px;
  color: #0b2244;
}

.mac-vs-pc .comparison-card .card-header-custom h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0b2244;
  margin: 0;
}

.mac-vs-pc .comparison-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mac-vs-pc .comparison-card ul li {
  font-size: 14px;
  color: #444;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.6;
}

.mac-vs-pc .comparison-card ul li:last-child {
  border-bottom: none;
}

.mac-vs-pc .comparison-card ul li i {
  color: #00bba1;
  font-size: 14px;
  margin-top: 4px;
  flex-shrink: 0;
}

.mac-vs-pc .verdict {
  background: #fff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border-left: 4px solid #00bba1;
}

.mac-vs-pc .verdict h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0b2244;
  margin-bottom: 10px;
}

.mac-vs-pc .verdict p {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
  margin: 0;
}

.mac-vs-pc .verdict a {
  color: #007D6E;
  font-weight: 600;
}

.mac-vs-pc .verdict a:hover {
  color: #0b2244;
}

@media (max-width: 767px) {
  .mac-vs-pc .comparison-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mac-vs-pc .comparison-card {
    padding: 25px 20px;
  }
}

/* Section 4: MacBook Info Cards */
.macbook-info {
  background-color: #fff;
}

.macbook-info .info-card {
  background: #fff;
  border-radius: 10px;
  padding: 35px 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  height: 100%;
  transition: transform 0.3s ease;
  border-top: 3px solid #00bba1;
}

.macbook-info .info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.macbook-info .info-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0b2244;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.macbook-info .info-card h3 i {
  color: #00bba1;
  font-size: 22px;
}

.macbook-info .info-card p {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
  margin-bottom: 12px;
}

.macbook-info .info-card p:last-child {
  margin-bottom: 0;
}

.macbook-info .info-card strong {
  color: #0b2244;
}

.macbook-info .info-card a {
  color: #007D6E;
  font-weight: 600;
}

.macbook-info .info-card a:hover {
  color: #0b2244;
}

@media (max-width: 767px) {
  .macbook-info .info-card {
    margin-bottom: 20px;
    padding: 25px 20px;
  }
}

/* Section 5: Home FAQ */
.home-faq {
  background-color: #f8fafc;
  padding-bottom: 80px;
}

.home-faq .section-title {
  margin-bottom: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home-faq {
    padding-bottom: 50px;
  }
  .home-faq .section-title {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .home-faq {
    padding-bottom: 40px;
  }
  .home-faq .section-title {
    margin-bottom: 25px;
  }
}

.home-faq .faq-cta {
  text-align: center;
  margin-top: 35px;
}

.home-faq .faq-cta p {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
}

.home-faq .faq-cta .btn-faq {
  display: inline-block;
  padding: 12px 30px;
  background-color: #0b2244;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

.home-faq .faq-cta .btn-faq:hover {
  background-color: #00bba1;
}

/* A11y tap-target fix: ensure inline links in info-card meet 48px touch target on mobile */
@media (max-width: 767px) {
  .macbook-info .info-card p a {
    display: inline-block;
    padding: 6px 2px;
    min-height: 44px;
    line-height: 1.6;
  }
}