@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&display=swap");

/* Global: remove blue focus/active outlines and tap highlight */
* {
  outline: none;
}
*:focus,
*:active,
*:focus-visible {
  outline: none;
  box-shadow: none;
}
a, button, img, div {
  -webkit-tap-highlight-color: transparent;
}

:root {
  --color-black: hsl(0, 0%, 10%);
  --color-white: hsl(0, 0%, 100%);
  --color-light-white: hsl(0, 0%, 95%);
  --color-dark-cyan: hsl(192, 28%, 21%);
  --dark-grayish-blue: hsl(200, 2%, 28%);
  --color-darken: hsl(206, 16%, 9%);
  --color-yellow: hsl(42, 99%, 53%);
  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Hero "Ver productos" button – mobile (max-width: 768px): tweak in live preview */
  --mobile-btn-size: 10px;
  --mobile-btn-padding-y: 14px;
  --mobile-btn-padding-x: 28px;
  --mobile-btn-left: 1%;
  --mobile-btn-bottom: 30px;

  /* Hero content (title, subtitle, button) – vertical position: adjust to move all three up/down */
  --hero-content-offset: -18px;

  /* Joystick (PS5 banner): edit these to change position, size and rotation */
  --joystick-right: 2%;     /* horizontal: smaller = more to the right */
  --joystick-top: 12%;      /* vertical: smaller = higher */
  --joystick-size: 220px;   /* width of the joystick image */
  --joystick-rotate: 25deg; /* tilt angle (e.g. -8deg, 5deg) */

  /* PS5 banner overlay: logo and controller – edit to reposition independently */
  --ps5-logo-top: 1%;
  --ps5-logo-right: 32%;
  --ps5-logo-size: 520px;

  --ps5-controller-top: 65%;
  --ps5-controller-right: 37%;
  --ps5-controller-size: 280px;

  /* PS5 banner mobile (max-width: 768px) – edit to adjust position/size on small screens */
  --ps5-logo-mobile-top: -15%;
  --ps5-logo-mobile-right: 18%;
  --ps5-logo-mobile-size: 190px;

  --ps5-controller-mobile-top: 65%;
  --ps5-controller-mobile-right: 30%;
  --ps5-controller-mobile-size: 80px;

  /* PS5 banner: VR headset – position/size (desktop and mobile) */
  --ps5-vr-top: 35%;
  --ps5-vr-right: 10%;
  --ps5-vr-size: 460px;

  --ps5-vr-mobile-top: 30%;
  --ps5-vr-mobile-right: 6%;
  --ps5-vr-mobile-size: 100px;

  /* PS5 banner: Pulse Elite headset – position/size (desktop and mobile) */
  --ps5-pulse-top: 35%;
  --ps5-pulse-right: 50%;
  --ps5-pulse-size: 460px;

  --ps5-pulse-mobile-top: 30%;
  --ps5-pulse-mobile-right: 48%;
  --ps5-pulse-mobile-size: 100px;

  /* PS5 banner vertical offset – tweak to align with video slide */
  --ps5-banner-offset-y: 0px;

  /* bannernuevo.jpg: vertical crop alignment (e.g. 50%, 55%, 60%) – no margin/padding */
  --banner-vertical-adjust: 200%;

  /* JBL banner logo – edit to reposition/resize */
  --jbl-logo-top: 8%;
  --jbl-logo-left: 12%;
  --jbl-logo-size: 140px;

  --jbl-logo-mobile-top: -9%;
  --jbl-logo-mobile-left: 5%;
  --jbl-logo-mobile-size: 150px;

  /* JBL floating products – desktop positions/sizes (edit these only) */
  --jbl-extreme4-top: 45%;
  --jbl-extreme4-left: 10%;
  --jbl-extreme4-size: 220px;

  --jbl-clip5-top: 25%;
  --jbl-clip5-left: 35%;
  --jbl-clip5-size: 150px;

  /* JBL floating products – mobile positions/sizes (smaller, stay inside banner) */
  --jbl-extreme4-mobile-top: 55%;
  --jbl-extreme4-mobile-left: -5%;
  --jbl-extreme4-mobile-size: 180px;

  --jbl-clip5-mobile-top: 10%;
  --jbl-clip5-mobile-left: 30%;
  --jbl-clip5-mobile-size: 90px;

  /* iPhone banner Apple logo controls (desktop) */
  --iphone-logo-top: 8%;
  --iphone-logo-left: 10%;
  --iphone-logo-size: 90px;

  /* iPhone banner Apple logo controls (mobile) */
  --iphone-logo-mobile-top: -7%;
  --iphone-logo-mobile-left: 14%;
  --iphone-logo-mobile-size: 180px;

  /* iPhone floating product controls (desktop) */
  --iphone-product-top: 55%;
  --iphone-product-left: 60%;
  --iphone-product-size: 260px;

  /* iPhone floating product controls (mobile) */
  --iphone-product-mobile-top: 60%;
  --iphone-product-mobile-left: 10%;
  --iphone-product-mobile-size: 80px;

  /* iPhone 13 floating product controls (desktop) */
  --iphone13-top: 60%;
  --iphone13-left: 35%;
  --iphone13-size: 240px;

  /* iPhone 13 floating product controls (mobile) */
  --iphone13-mobile-top: 65%;
  --iphone13-mobile-left: 35%;
  --iphone13-mobile-size: 150px;

  /* Nintendo banner: producto flotante centrado */
  --nintendo-product-top: 50%;
  --nintendo-product-left: 50%;
  --nintendo-product-size: 210px;
  --nintendo-product-mobile-top: 52%;
  --nintendo-product-mobile-left: 50%;
  --nintendo-product-mobile-size: 125px;

  /* Nintendo banner: logo de marca (arriba de los productos) */
  --nintendo-brand-logo-top: 1%;
  --nintendo-brand-logo-left: 50%;
  --nintendo-brand-logo-size: 280px;
  --nintendo-brand-logo-mobile-top: -11%;
  --nintendo-brand-logo-mobile-left: 50%;
  --nintendo-brand-logo-mobile-size: 200px;

  /* Nintendo banner: Joy-Cons derecha (controles) */
  --nintendo-joycons-right-top-offset: 10px;
  --nintendo-joycons-right-left-mult: 0.78;   /* más grande = más a la derecha */
  --nintendo-joycons-right-size-mult: 0.68;   /* más grande = más grande */
  --nintendo-joycons-right-rotate: -6deg;

  --nintendo-joycons-right-mobile-top-offset: 8px;
  --nintendo-joycons-right-mobile-left-mult: 1;
  --nintendo-joycons-right-mobile-size-mult: 0.74;

  /* Nintendo banner: Joy-Cons izquierda (controles) */
  --nintendo-joycons-left-top-offset: 14px;
  --nintendo-joycons-left-left-mult: 0.52;    /* más grande = más a la izquierda */
  --nintendo-joycons-left-size-mult: 0.66;
  --nintendo-joycons-left-rotate: 7deg;

  --nintendo-joycons-left-mobile-top-offset: 10px;
  --nintendo-joycons-left-mobile-left-mult: 1.1;
  --nintendo-joycons-left-mobile-size-mult: 0.62;

  /* GoPro banner: producto flotante */
  --gopro-product-top: 50%;
  --gopro-product-left: 50%;
  --gopro-product-size: 200px;
  --gopro-product-mobile-top: 52%;
  --gopro-product-mobile-left: 50%;
  --gopro-product-mobile-size: 118px;

  /* GoPro banner: productos (izq/der) */
  --gopro-brand-logo-top: 12%;
  --gopro-brand-logo-left: 50%;
  --gopro-brand-logo-size: 260px;
  --gopro-brand-logo-mobile-top: -20%;
  --gopro-brand-logo-mobile-left: 50%;
  --gopro-brand-logo-mobile-size: 200px;

  --dji-brand-logo-top: 6%;
  --dji-brand-logo-left: 50%;
  --dji-brand-logo-size: 180px;
  --dji-brand-logo-mobile-top: -5%;
  --dji-brand-logo-mobile-left: 50%;
  --dji-brand-logo-mobile-size: 140px;
  --dji-product-top: 60%;
  --dji-product-left: 50%;
  --dji-product-size: 250px;
  --dji-product-left-top: 66%;
  --dji-product-left-left: 28%;
  --dji-product-left-size: 150px;
  --dji-product-right-top: 66%;
  --dji-product-right-left: 72%;
  --dji-product-right-size: 180px;
  --dji-product-mobile-top: 64%;
  --dji-product-mobile-left: 50%;
  --dji-product-mobile-size: 170px;
  --dji-product-left-mobile-top: 31%;
  --dji-product-left-mobile-left: 16%;
  --dji-product-left-mobile-size: 105px;
  --dji-product-right-mobile-top: 31%;
  --dji-product-right-mobile-left: 84%;
  --dji-product-right-mobile-size: 125px;

  --gopro-center-top: 56%;
  --gopro-center-left: 50%;
  --gopro-center-size: 175px;

  --gopro-left-top: 58%;
  --gopro-left-left: 26%;
  --gopro-left-size: 170px;

  --gopro-right-top: 56%;
  --gopro-right-left: 76%;
  --gopro-right-size: 170px;

  --gopro-center-mobile-top: 58%;
  --gopro-center-mobile-left: 50%;
  --gopro-center-mobile-size: 110px;

  --gopro-left-mobile-top: 60%;
  --gopro-left-mobile-left: 18%;
  --gopro-left-mobile-size: 110px;

  --gopro-right-mobile-top: 58%;
  --gopro-right-mobile-left: 82%;
  --gopro-right-mobile-size: 110px;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 100%;
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  color: var(--color-black);
  background: var(--color-white);
}

a,
button {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* Scroll-to-top – global, fixed; above WhatsApp button so both visible */
.scroll-to-top {
  position: fixed;
  bottom: 88px; /* above .wa-float (56px + 24px + gap) */
  right: 24px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-to-top i {
  font-size: 18px;
  color: #111111;
}

.scroll-to-top:hover {
  background-color: #ffffff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
  .scroll-to-top {
    bottom: 84px; /* above WhatsApp on tablet */
    right: 24px;
    width: 40px;
    height: 40px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }
}
@media (max-width: 480px) {
  .scroll-to-top {
    bottom: 80px; /* above smaller WhatsApp (52px + 20px + gap) */
    right: 20px;
  }
}

/* Project cards – cover image and layout (matches other project cards) */
.project-card {
  max-width: 360px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-medium);
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.card-image {
  overflow: hidden;
  line-height: 0;
}

.card-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.card-title {
  margin: 1rem 1rem 0.5rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-black);
}

.card-description {
  margin: 0 1rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--dark-grayish-blue);
}

.card-tags {
  margin: 0 1rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.card-tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  background: var(--color-light-white);
  border-radius: 4px;
  color: var(--dark-grayish-blue);
}

.card-btn {
  display: inline-block;
  margin: 0 1rem 1.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-darken);
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.card-btn:hover {
  opacity: 0.9;
}

/* Lock scroll while intro/presentation screen is visible */
html.intro-active,
html.intro-active body {
  overflow: hidden;
  height: 100%;
}

/* Intro overlay - minimalist Apple-style, matches reference */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: #000000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.intro-screen--hidden {
  opacity: 0;
  visibility: hidden;
}

/* Skip intro when returning (e.g. logo click): show main content only */
html.intro-skipped .intro-screen {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

/* Ocultar botón WhatsApp en la pantalla de bienvenida; mostrarlo solo tras INGRESAR */
html.intro-active .wa-float-wrapper,
html.intro-active .wa-float {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

.intro-content {
  max-width: 90vw;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  gap: 2.5rem;
}

/* Presentation image - main visual, centered */
.intro-presentation-image {
  line-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.intro-presentation-image img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  background: transparent;
}

/* INGRESAR gradient button - centered below image */
.intro-screen .intro-gradient-wrap {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.intro-screen .intro-gradient-wrap .container {
  position: relative;
  padding: 3px;
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  border-radius: 0.9em;
  transition: all 0.4s ease;
}

.intro-screen .intro-gradient-wrap .container::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 0.9em;
  z-index: -10;
  filter: blur(0);
  transition: filter 0.4s ease;
}

.intro-screen .intro-gradient-wrap .container:hover::before {
  background: linear-gradient(90deg, #03a9f4, #f441a5);
  filter: blur(1.2em);
}

.intro-screen .intro-gradient-wrap .container:active::before {
  filter: blur(0.2em);
}

.intro-screen .intro-gradient-wrap .button {
  font-size: 1.4em;
  padding: 0.6em 0.8em;
  border-radius: 0.5em;
  border: none;
  background-color: #000;
  color: #fff;
  cursor: pointer;
  box-shadow: 2px 2px 3px #000000b4;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.intro-screen .intro-gradient-wrap .button:active {
  transform: scale(0.92);
  background-color: #1a1a1a;
  box-shadow: 1px 1px 2px #000000b4;
}

/* Click feedback animation - plays when button is pressed */
@keyframes intro-btn-click {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.9); }
  70%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

.intro-screen .intro-gradient-wrap .button.intro-btn-pressed {
  animation: intro-btn-click 0.28s ease-out;
}

@media (max-width: 600px) {
  .intro-content {
    gap: 2rem;
    padding: 1.5rem 1rem;
  }
  .intro-presentation-image img {
    max-width: 100%;
  }
  .intro-screen .intro-gradient-wrap .button {
    font-size: 1.2em;
    padding: 0.5em 0.7em;
  }
}

@-webkit-keyframes slideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}

@keyframes slideLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@-webkit-keyframes slideRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
@keyframes slideRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}
.container {
  max-width: 85rem;
  height: auto;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.brand {
  font-family: "Rubik", sans-serif;
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -1px;
  color: var(--color-yellow);
  text-transform: uppercase;
}
.main-content-wrapper{
	overflow-x: hidden;
	overflow-y: hidden;
	width:100%;
	max-width: 100vw;
	padding-top: 80px;
	margin: 0;
}

.main-content-wrapper .carousel .brand {
	display:none;
}
/*banner-wrapper start*/
.Banner_wrapper{
    width: 100%;
    height: 100vh;
    background-image: url('./../images/banner.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/*phone-wrapper start*/
.phone_product_wrapper , .headphones_product_wrapper{
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone_product_inner_wrapper , .headphones_product_inner_wrapper{
    width: 100%;
    display: block;
}
.phone_product_column_one, .phone_product_column_two, .headphones_product_column_one, .headphones_product_column_two{
    width: 50%;
    float: left;
}
.phone_product_column_one, .headphones_product_column_two{
    background-color: var(--color-light-white);
}
.phone_product_column_two {
    background-color: hsl(355.56deg 100% 94.71%);
}
.headphones_product_column_one{
    background-color: var(--dark-grayish-blue);
    background-image: url("./../images/headphones-section-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.headphones_product_column_one::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 16, 24, 0.28);
  pointer-events: none;
}

/* Auriculares y Smartwatches: reemplazar fondo blanco por imagen (solo esta columna) */
.headphones_product_column_two{
  /* Importante: el nombre del archivo tiene espacios */
  background-color: transparent;
  background-image: url("./../images/Auriculares%20y%20Smartwatches.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.phone_product_column_two .phone_product_info{
  max-width: 38rem;
  height: auto;
  margin-right: auto;
  padding: 5.25em 1.25rem;
  float: left;
}
/*phone-wrapper end*/
/*headphone-wrapper start*/
.headphones_product_column_one .headphones_product_info{
  max-width: 38rem;
  height: auto;
  margin-left: auto;
  padding: 4.25rem 1.25rem;
}
.headphones_product_column_two .headphones_product_info{
  max-width: 38rem;
  height: auto;
  margin-right: auto;
  padding: 3.25rem 1.25rem;
  float: left;
}
.phone_product_info .phone_info_inner > h2 ,
.headphones_product_info .headphones_info_inner > h2{
  color: var(--color-yellow);
  font-size: 50px;
  font-weight: 600;
  line-height: 65px;
  padding-bottom: 50px;
}
.phone_product_info .phone_info_inner > p{
  font-size: 17px;
  padding-left: 20px;
  border-left: 8px solid var(--color-yellow);
}
.headphones_product_info .headphones_info_inner > p{
  font-size: 17px;
  padding-right: 20px;
  padding-left: 65px;
  border-right: 8px solid var(--color-yellow);
}
.phone_product_column_one .phone_product_info {
  max-width: 38rem;
  height: auto;
  margin-left: auto;
  padding: 4.25em 1.25rem;
}
.phone_product_column_one .phone_info_inner {
  width: 65%;
}
.headphones_product_column_two 
 .headphones_info_inner {
    width: 77%;
    float: right;
}
.phone_product_column_one .phone_info_inner > a , .headphones_product_info .headphones_info_inner > a{
  background: transparent;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-yellow);
  padding: 12px 30px;
  display: inline-block;
  margin-top: 30px;
  margin-left: 25px;
  border: 2px solid var(--color-yellow);
  transition: all 0.3s ease-in-out;
  position: relative;
}

/* iPhone banner ("iPhone en iShop") – legibilidad y coherencia visual */
.phone_product_column_one .phone_info_inner{
  position: relative;
  z-index: 1;
  padding: 18px 18px 20px;
  border-radius: 14px;
}
.phone_product_column_one .phone_info_inner::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.42);
  border-radius: inherit;
  z-index:-1;
}
.phone_product_column_one .phone_info_inner > h2{
  color:#ffffff !important;
}
.phone_product_column_one .phone_info_inner > p{
  color: rgba(255,255,255,0.92);
  border-left-color:#ffffff;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
.phone_product_column_one .dt-sc-btn.corner-button{
  background:#ffffff;
  color:#000000;
  border:2px solid #000000;
}
.phone_product_column_one .dt-sc-btn.corner-button:hover{
  background:#ffffff;
  color:#000000;
  border-color:#000000;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* Auriculares y Smartwatches – mismo lenguaje visual que iPhone */
.headphones_product_column_two .headphones_info_inner{
  position: relative;
  z-index: 1;
  padding: 18px 18px 20px;
  border-radius: 14px;
}
.headphones_product_column_two .headphones_info_inner::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.42);
  border-radius: inherit;
  z-index:-1;
}
.headphones_product_column_two .headphones_info_inner > h2{
  color:#ffffff !important;
}
.headphones_product_column_two .headphones_info_inner > p{
  color: rgba(255,255,255,0.92);
  border-right-color:#ffffff;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
.headphones_product_column_two .dt-sc-btn.corner-button{
  background:#ffffff;
  color:#000000;
  border:2px solid #000000;
}
.headphones_product_column_two .dt-sc-btn.corner-button:hover{
  background:#ffffff;
  color:#000000;
  border-color:#000000;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

/* Global style for primary CTA buttons (including "Comprar ahora") */
.dt-sc-btn.corner-button {
  background: transparent;
  border: 2px solid #f5a623;      /* yellow accent */
  color: #f5a623;
  padding: 12px 28px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all 0.3s ease;
}

.dt-sc-btn.corner-button:hover {
  background: #000;
  color: #fff;
  border-color: #f5a623;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
.corner-button span {
	position: relative;
	z-index: 2;
}

/* Disable decorative corner backgrounds for this CTA so no white block appears */
.dt-sc-btn.corner-button::before,
.dt-sc-btn.corner-button::after {
  content: none !important;
  background: transparent !important;
}
.corner-button::after, .corner-button::before {
	content: "";
	background: var(--color-light-white);
	position: absolute;
	z-index: 1;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.corner-button::before {
	width: calc(100% - 1.2rem);
	height: calc(94% + .7rem);
	top: -3px;
	left: 50%;
	-webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translate(-50%);
}
.corner-button::after {
	height: calc(100% - 1.2rem);
	width: calc(98% + .7rem);
	left: -3px;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.corner-button::after, .corner-button::before {
	content: "";
	background: var(--color-light-white);
	position: absolute;
	z-index: 1;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}
.corner-button:hover::before {
	width: 0;
}
.corner-button:hover::after {
	height: 0;
}
.phone_product_column_one .phone_info_inner > a:hover , .headphones_product_info .headphones_info_inner > a:hover{
  background: transparent;
  color: var(--color-yellow);
}
.phone_product_column_two .phone_product_info .phone_info_inner{
  width: 55%;
  float: right;
}
.headphones_product_column_one .headphones_info_inner {
  width: 55%;
  position: relative;
  z-index: 1;
}
.phone_product_column_two .phone_product_info .phone_info_inner .phone_product_detail > h3,
.headphones_product_column_one .headphones_product_info .headphones_info_inner .headphones_product_detail > h3{
  color: var(--color-white);
  font-size: 28px;
  font-weight: 600;
}
.phone_product_column_two .phone_product_info .phone_info_inner .phone_product_detail > p,
.headphones_product_column_one .headphones_product_info .headphones_info_inner .headphones_product_detail > p {
  color: var(--color-white);
}
.phone_info_inner .phone_product_detail , .headphones_info_inner .headphones_product_detail{
  padding: 30px 22px 30px 10px;
}
.phone_product_images_wrapper , .headphones_product_images_wrapper{
  width: 300px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  z-index: 1;
}

.phone_product_images_wrapper{
  background-image: url('./../images/up_date.png');
}
.headphones_product_images_wrapper{
  background-image: url('./../images/samrt_w.png');
}
.headphones_product_column_two .headphones_info_inner {
	text-align: right;
	position: relative;
	z-index: 1;
}
.phone_product_wrapper {
      background-color: hsl(355.56deg 100% 94.71%);
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
}
.headphones_product_wrapper{
  background-color: var(--dark-grayish-blue);
  position: relative;
  overflow-x:hidden;
  overflow-y:hidden;
}
.headphones_product_info .headphones_info_inner > a{
  margin-right: 25px;
}
.phone_product_images{
	display:none;
}
.phone_product_column_center{
	display:none;
}
.headphones_product_images{
	display:none;
}
.headphones_column_center{
	display:none;
}
.headphones_product_images img{
	display:none;
}
/*headphone-wrapper end*/
/* shop wrapper start */
.shop_category_wrapper_start {
  width: 100%;
  display: block;
  padding: 50px 0px;
  position:relative;
  overflow-x:hidden;
  overflow-y:hidden;
}
/* Keep decorative shapes behind interactive/content layers */
.rectangle-shape {
  z-index: 0 !important;
  pointer-events: none;
}

/* Raise banners/content above floating decorative shapes */
.hero,
.hero-slider,
.hero-slider .carousel,
.hero-slider .carousel-inner,
.hero-slider .carousel-item,
.hero-slider .banner-slide,
.shop_category_wrapper_start,
.most_popular_products_wrapper,
.phone_product_wrapper,
.headphones_product_wrapper {
  position: relative;
  z-index: 30;
}

.hero-slider .ps5-overlay,
.hero-slider .jbl-overlay,
.hero-slider .iphone-banner-overlay,
.hero-slider .nintendo-banner-overlay,
.hero-slider .gopro-banner-overlay,
.hero-slider .dji-banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.hero-slider .carousel-indicators {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 70;
}

/* Home: decorative floating shapes should not overlap product banners/cards */
.shop_category_wrapper_start .rectangle-shape,
.most_popular_products_wrapper .rectangle-shape,
.phone_product_wrapper .rectangle-shape,
.headphones_product_wrapper .rectangle-shape {
  display: none !important;
}
.shop_category_product_heading > h1 {
  font-size: 60px;
  text-transform: uppercase;
  font-weight: 700;
  color: #000;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: center;
  padding: 10px 0px 20px;
}
.shop_category_inner_wrapper{
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  text-align: center;
}
.shop_category_column{
  width: 19.5%;
  display: inline-block;
  padding: 10px;
  box-sizing: border-box;
  vertical-align: top;
}
.shop_category_img {
  width: 210px;
  height: 210px;
  background-image: url('./../images/Rectangle 15.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shop_category_img > img{
  width: 210px;
}
.shop_category_heading > h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 500;
  padding-top: 10px;
  position: relative;
  z-index: 3;
  color: #000 !important; /* Evita morado del estado :visited del link */
}

/* Asegura color negro del título aunque el link ya haya sido visitado */
.shop_category_link:visited .shop_category_heading > h2{
  color: #000 !important;
}

/* Shop category cards as links (image + title clickable) */
.shop_category_link{
  display:block;
}

.shop_category_link:hover{
  opacity: 1;
  transform: none;
}
/* shop wrapper end */
/*most popular product start*/
.most_popular_products_wrapper{
	width:100%;
	display: block;
	padding-bottom:50px;
	padding-top:50px;
	background-color:#fafafa;
	position:relative;
	overflow-x:hidden;
	overflow-y:hidden;
}
.most_popular_product_heading h1{
	font-size: 50px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  padding-bottom:25px;
  color: #000;
  position:relative;
  z-index:1;
}
.most_popular_inner_wrapper{
  width: 100%;
  display: block;
  position:relative;
  z-index:1;
}
.most_popular_column{
  width: 24.5%;
  display: inline-block;
  padding: 10px;
  box-sizing: border-box;
}
.most_popular_img img{
	width:450px;
	object-fit:cover;
}
.most_popular_heading h3{
	font-size:19px;
	font-weight:600;
	padding-top:20px;
}
.most_popular_heading{
	padding-left:20px;
}
.most_popular_product_price del{
	font-size:19px;
	font-weight:700;
	color:black;
	text-decoration:line-through;
}
.most_popular_product_price{
	color:#feb710;
	font-size:25px;
	font-weight:600;
}
/*most popular product end*/
/*learning wrapper start*/
.learning_wrapper {
    background-image: url("../images/bannernuevo.jpg");
    width: 100%;
    height: auto;
    min-height: 280px;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: white;
	overflow-x:hidden;
	overflow-y:hidden;
}
/* Capa suave para contraste del texto (antes: Rectangle 20.png inexistente) */
.overlay-img{
	width:100%;
	background-image: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.12) 0%,
		rgba(0, 0, 0, 0.28) 45%,
		rgba(0, 0, 0, 0.4) 100%
	);
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	pointer-events: none;
}
.learn_container{
	 max-width: 88rem;
  height: auto;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.about_product_inner_wrapper {
    position: relative;
    z-index: 9;
	padding-bottom:55px;
	padding-top:28px;
}
.learning_head {
	font-size: 65px;
	font-weight: 700;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.learning_data {
	font-size: 20px;
	text-align: center;
	font-weight: 700;
	padding-bottom: 55px;
	letter-spacing: 0.5px;
	padding: 10px 25px;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.learning_btn{
	background:#fff;
	border:none;
	color:#111111;
	font-size:15px;
	border-radius:0;
	padding:10px 20px;
	text-decoration:none;
	text-align:center;
	font-weight:600;
	display: inline-block;
	width:120px;
	text-transform:uppercase;
	cursor:pointer;
	transform: skew(-21deg);
	position: relative;
	overflow: hidden;
	z-index: 1;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	transition: color 0.5s ease;
}
.learning_btn span{
	display: inline-block;
	transform: skew(21deg);
}
.learning_btn::before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	left: 0;
	background: rgb(20, 20, 20);
	opacity: 0;
	z-index: -1;
	transition: all 0.5s;
}
.learning_btn:hover{
	color:#fff;
}
.learning_btn:hover::before{
	left: 0;
	right: 0;
	opacity: 1;
}

/*learning wrapper end*/
/* Brands wrapper start */
.brand_wrapper{
	width:100%;
	display: block;
	padding-top:30px;
	padding-bottom:30px;
	position:relative;
	overflow-x:hidden;
	overflow-y:hidden;
}
.brand_heading{
	position: relative;
    z-index: 1;
}
.brand_heading h1{
	color: #000;
    font-size: 60px;
	font-weight:700;
    text-align: center;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: 0.5px;

}
.brand_inner_wrapper{
  width: 100%;
  display: block;
  margin-top:30px;
   margin-bottom:30px;
   position: relative;
    z-index: 1;
	text-align:center;
}
.brand_col{
  width: 19.5%;
  display: inline-block;
  box-sizing: border-box;
  vertical-align: middle;
}
.brand_col_1_img{
	padding-left:0;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow: visible;
}
.brand_col_1_img img{
	height:80px;
	width:180px;
	object-fit:contain;
}

.brand_col_1_img img.brand_logo--nintendo{
	height:90px;
	width:210px;
}
/* Brands wrapper end */
/* Payment wrapper start */
.payment_wrapprer{
	width:100%;
    background-color:#feb710;
	display: block;
	padding:30px 0px;
	overflow-x:hidden;
	overflow-y:hidden;
}
.payment_inner_wrapper{
	width: 100%;
	display: block;
}
.payment_col{
	width: 24.5%;
	display: inline-block;
	box-sizing: border-box;
}
.payment_col h2{
	font-size:25px;
	text-transform:uppercase;
	font-weight:700;
	color:white;
}
.payment_col p{
	font-size:22px;
	font-weight:500;
	color:white;
}
/* Payment wrapper end */


.rectangle-shape.very-small {
  width: 20px;
  height: 20px;
  background: transparent;
  position: absolute;
  animation-name: example;
  animation-iteration-count: infinite;
  animation-duration: 20s;
  border: 3px solid;
  border-bottom-color: #003791;
  border-right-color: #0047ab;
  border-top-color: #002e6b;
  border-left-color: #005cbf;
  transform: rotate(20deg);
  border-radius: 2px;
}

@keyframes example {
  0%   {left:0px; top:2px;transform: rotate(20deg);height: 15px;width: 15px;}
  25%  {left:200px; top:100px;transform: rotate(30deg);width:20px;height: 20px;}
  50%  {left:200px; top:200px;transform: rotate(60deg);height: 30px;width: 30px;}
  75%  {left:0px; top:200px;transform: rotate(30deg);height: 20px;width: 20px;}
  100% {left:0px; top:2px;transform: rotate(20deg);height: 15px;width: 15px;}
}

.rectangle-shape.small {
  width: 60px;
  height: 60px;
  background: transparent;
  position: absolute;
  animation-name: small;
  animation-iteration-count: infinite;
  animation-duration: 30s;
  border: 3px solid;
  border-bottom-color: #003791;
  border-right-color: #0047ab;
  border-top-color: #002e6b;
  border-left-color: #005cbf;
  transform: rotate(70deg);
  border-radius: 50px;
}
@keyframes small {
  0%   {left:10px; top:60px;transform: rotate(120deg);height: 35px;width: 35px;}
  25%  {left:300px; top:100px;transform: rotate(30deg);width:20px;height: 20px;}
  50%  {left:200px; top:200px;transform: rotate(180deg);height: 30px;width: 30px;}
  75%  {left:10px; top:200px;transform: rotate(360deg);height: 50px;width: 50px;}
  100% {left:100px; top:2px;transform: rotate(60deg);height: 60px;width: 60px;}
}
.rectangle-shape.medium{
  width: 25px;
  height: 25px;
  background: transparent;
  position: absolute;
  border: 3px solid;
  border-bottom-color: #003791;
  border-right-color: #0047ab;
  border-top-color: #002e6b;
  border-left-color: #005cbf;
  transform: rotate(20deg);
  border-radius: 50%;
  bottom: 0;
  right: 0;
  animation-name: medium;
  animation-iteration-count: infinite;
  animation-duration: 40s;
}
@keyframes medium {
  0%   {right:300px; bottom:2px;transform: rotate(150deg);height: 10px;width: 10px;}
  25%  {right:0px; bottom:200px;transform: rotate(30deg);width:40px;height: 40px;}
  50%  {right:50px; bottom:500px;transform: rotate(160deg);height: 13px;width: 13px;}
  75%  {right:700px; bottom:200px;transform: rotate(230deg);height: 30px;width: 30px;}
  100% {right:0px; bottom:25px;transform: rotate(320deg);height: 15px;width: 15px;}
}
.rectangle-shape.very-medium{
  width: 25px;
  height: 25px;
  background: transparent;
  position: absolute;
  border: 3px solid;
  border-bottom-color: #003791;
  border-right-color: #0047ab;
  border-top-color: #002e6b;
  border-left-color: #005cbf;
  transform: rotate(50deg);
  border-radius: 50%;
  bottom: 0;
  right: 0;
  animation-name: very-medium;
  animation-iteration-count: infinite;
  animation-duration: 50s;
}
@keyframes very-medium {
  0%   {right:0px; bottom:2px;transform: rotate(20deg);height: 25px;width: 25px;}
  25%  {right:300px; bottom:100px;transform: rotate(30deg);width:30px;height: 30px;}
  50%  {right:200px; bottom:150px;transform: rotate(60deg);height: 33px;width: 33px;}
  75%  {right:300px; bottom:200px;transform: rotate(30deg);height: 30px;width: 30px;}
  100% {right:0px; bottom:2px;transform: rotate(20deg);height: 25px;width: 25px;}
}
.rectangle-shape.large{
  width: 35px;
  height: 35px;
  background: transparent;
  position: absolute;
  border: 3px solid;
  border-bottom-color: #003791;
  border-right-color: #0047ab;
  border-top-color: #002e6b;
  border-left-color: #005cbf;
  transform: rotate(40deg);
  border-radius: 2px;
  bottom: 30px;
  right: 50%;
  animation-name: large;
  animation-iteration-count: infinite;
  animation-duration: 60s;
}
@keyframes large {
  0%   {right:50%; bottom:30px;transform: rotate(40deg);height: 35px;width: 35px;}
  25%  {right:70%; bottom:100px;transform: rotate(80deg);width: 37px;height: 37px;}
  50%  {right:70%; bottom:400px;transform: rotate(160deg);height: 40px;width: 40px;}
  75%  {right:30%; bottom:200px;transform: rotate(80deg);height: 37px;width: 37px;}
  100% {right:20%; bottom:30px;transform: rotate(40deg);height: 35px;width: 35px;}
}
.rectangle-shape.very-large{
  width: 35px;
  height: 35px;
  background: transparent;
  position: absolute;
  border: 3px solid;
  border-bottom-color: #003791;
  border-right-color: #0047ab;
  border-top-color: #002e6b;
  border-left-color: #005cbf;
  transform: rotate(40deg);
  border-radius: 2px;
  bottom: 30px;
  right: 50%;
  animation-name: very-large;
  animation-iteration-count: infinite;
  animation-duration: 60s;
}
@keyframes very-large {
  0%   {right:0%; bottom:50px;transform: rotate(50deg);height: 55px;width: 55px;}
  25%  {right:90%; bottom:100px;transform: rotate(60deg);width: 53px;height:53px;}
  50%  {right:30%; bottom:150px;transform: rotate(10deg);height: 52px;width: 52px;}
  75%  {right:60%; bottom:65px;transform: rotate(90deg);height: 50px;width: 50px;}
  100% {right:30%; bottom:30px;transform: rotate(120deg);height: 55px;width: 55px;}
}

.phone_product_images_wrapper, .headphones_product_images_wrapper{
	transform: rotateY(45deg);
	animation: rotateAnimation 4.5s linear infinite;
}

@keyframes rotateAnimation {
	from {transform: rotateY(45deg);}
	to {transform: rotateY(400deg);}
}
/* Search Box Bar */


.searchbox-open{
  width:100%;
}
.brand_col_1_img img {
	filter: grayscale(0%);
	-webkit-transform: scale(1);
	transform: scale(1);
	transform-origin: center;
	will-change: transform;
	-webkit-transition: transform .25s ease, opacity .25s ease, filter .25s ease;
	transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}
.brand_col_1_img img:hover {
	transform: scale(1.12);
	opacity: 0.8;
	filter: grayscale(100%);
}
.shop_category_img img {
  width: 85%;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
}
.shop_category_img:hover img {
  transform: scale(1);
}

/* Ajuste puntual: la imagen de Smartwatch se ve grande y se corta */
.shop_category_img img#images_change5{
  width: 72% !important;
  transform: scale(0.95);
  transform-origin: center;
}

.shop_category_img:hover img#images_change5{
  transform: scale(0.95);
}

/* Ajuste puntual iPhones: segunda imagen (hiphone azul) */
.shop_category_img img#images_change1[src$="lenovo-na-laptop-original-imafuzt8r5jqppfn.webp"]{
  width: 68% !important;
  transform: scale(1.2);
  transform-origin: center;
}

.shop_category_img:hover img#images_change1[src$="lenovo-na-laptop-original-imafuzt8r5jqppfn.webp"]{
  transform: scale(1.2);
}

/* Consolas: ajustar ambas imágenes que alternan en #images_change2 */
.shop_category_img img#images_change2[src$="ipad-mini-select-wifi-purple-202109_FMT_WHH.png"]{
  width: 72% !important;
  transform: scale(1.2);
  transform-origin: center;
}

.shop_category_img--consoles:hover img#images_change2[src$="ipad-mini-select-wifi-purple-202109_FMT_WHH.png"]{
  transform: scale(1.2) !important;
}

.shop_category_img img#images_change2[src$="264261_zzl2aq.png"]{
  width: 70% !important;
  transform: scale(1.8);
  transform-origin: center;
}

.shop_category_img--consoles:hover img#images_change2[src$="264261_zzl2aq.png"]{
  transform: scale(1.8) !important;
}
/* Computadoras: centrar solo macbook1 en el rombo (sin tocar macbook2) */
.shop_category_img img#images_change6[src$="macbook1.png"]{
  width: 72% !important;
  transform: translateX(12px) translateY(8px) scale(1.06);
  transform-origin: center;
}

.shop_category_img:hover img#images_change6[src$="macbook1.png"]{
  transform: translateX(12px) translateY(8px) scale(1.06);
}
/* Consolas: subtle zoom on hover (iPhone unchanged) */
.shop_category_img--consoles:hover img {
  transform: none;
}
/* Parlantes (rombo): PNG sin fondo — más chicas para que entren en el diamante */
:root{
  --category-headphones-img-width: 72%;
  --category-headphones-img-scale: 2;
  --category-headphones-hover-scale: 1.22;
  --category-headphones-explore-scale: 0.88;
  --category-headphones-explore-hover-scale: 0.92;
}
.shop_category_img--headphones img {
  width: var(--category-headphones-img-width);
  object-fit: contain;
  transform: scale(var(--category-headphones-img-scale));
  transform-origin: center;
  max-width: none;
  transition: transform 0.25s ease;
}
.shop_category_img--headphones:hover img {
  transform: scale(var(--category-headphones-img-scale));
}

/* Rombo Parlantes: ambas imágenes del carrusel (#images_change4) */
.shop_category_img--headphones img#images_change4 {
  transform: scale(var(--category-headphones-explore-scale));
}
.shop_category_img--headphones:hover img#images_change4 {
  transform: scale(var(--category-headphones-explore-scale));
}

/* Hero carousel: keep inside viewport without breakout overflow */
.carousel {
    width: 100%;
    max-width: 100%;
    position: relative;
    left: 0;
    transform: none;
    margin: 0;
    padding: 0;
    height: auto;
    min-height: 40vmin;
    overflow-x: hidden;
    display: flex;
    justify-content: flex-start;
    cursor: grab;
    user-select: none;
}
.carousel,
.carousel-inner,
.carousel-item {
    margin: 0;
    padding: 0;
}
.carousel.is-dragging {
    cursor: grabbing;
}
.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item a,
.carousel .carousel-item img {
    cursor: grab;
    user-select: none;
    pointer-events: auto;
}
/* Disable link/image dragging so carousel swipe is always used (no link preview on drag) */
.carousel-item a {
    -webkit-user-drag: none;
    user-drag: none;
}
.carousel-item img {
    -webkit-user-drag: none;
    user-drag: none;
}
.carousel .carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}
.carousel .carousel-item-video video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.carousel.is-dragging .carousel-inner,
.carousel.is-dragging .carousel-item,
.carousel.is-dragging .carousel-item a,
.carousel.is-dragging .carousel-item img {
    cursor: grabbing;
}
.carousel-indicators span {
    cursor: pointer;
}
.carousel-inner{
  height: 100%;
  min-height: 100%;
  /* min-width: 400%; */
  display: flex;
  transition: all ease .5s;
  flex: 1;
}
.carousel-item{
  flex: 1;
  height: 100%;
  min-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.banner-slide{
  position:relative;
  width:100%;
  height:100%;
}

/* Smartwatch video banner: allow adjustable bottom padding via CSS variable */
.carousel-item-video .banner-slide{
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: var(--watch-banner-bottom-offset);
  box-sizing: border-box;
}

.carousel-item-video .banner-slide video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PS5 banner: full-width hero, console on left (background), logo + controller on right */
.ps5-banner{
  position: relative;
  width: 100%;
  height: var(--ps5-banner-height-desktop);
  overflow: hidden;
}

/* Desktop only: match 16:9 (same visual proportion as video slide) */
@media (min-width: 769px){
  .ps5-banner{
    height: auto;
    aspect-ratio: 16/9;
  }
  .jbl-banner{
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    padding-bottom: 20px; /* add a little extra bottom space to match video slide height */
    box-sizing: border-box;
  }
  .iphone_banner_item .banner-slide{
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 20px; /* más altura en el borde inferior para coincidir con los otros banners */
  }
  .nintendo_banner_item .banner-slide{
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
  .gopro_banner_item .banner-slide{
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
  .dji_drones_banner_item .banner-slide{
    height: auto;
    aspect-ratio: 16/9;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 20px;
  }
}
/* Banner background (PS5 console) fills the section – do not scale overlay images */
.ps5-banner .ps5-banner-link,
.ps5-banner .ps5-banner-link .banner-bg{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.ps5-banner .ps5-banner-link .banner-bg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* JBL banner background fills the section */
.jbl-banner .jbl-banner-link,
.jbl-banner .jbl-banner-link .banner-bg{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.jbl-banner .jbl-banner-link .banner-bg{
  width: 100% !important;
  height: calc(100% + 20px) !important; /* extend into padding-bottom */
  object-fit: cover !important;
}

/* iPhone banner: same layout as other image banners, 16:9 on desktop */
.iphone_banner_item .banner-slide{
  position: relative;
  overflow: hidden;
}
.iphone_banner_item .banner-slide a,
.iphone_banner_item .banner-slide .banner-bg{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.iphone_banner_item .banner-slide .banner-bg{
  height: calc(100% + 20px) !important; /* extiende hacia el padding-bottom para que el borde inferior coincida con los otros */
  object-fit: cover !important;
}

/* Nintendo: imagen única, mismo 16:9 que iPhone/JBL */
.nintendo_banner_item .banner-slide{
  position: relative;
  overflow: hidden;
}
.nintendo_banner_item .banner-slide .banner-bg{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  height: calc(100% + 20px) !important;
  object-fit: cover !important;
}

/* GoPro: imagen única, mismo 16:9 que Nintendo */
.gopro_banner_item .banner-slide{
  position: relative;
  overflow: hidden;
}
.gopro_banner_item .banner-slide .banner-bg{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  height: calc(100% + 20px) !important;
  object-fit: cover !important;
}

.dji_drones_banner_item .banner-slide{
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 0;
}
.dji_drones_banner_item .banner-slide .banner-bg{
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom;
}

.dji-banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.dji_drones_banner_item .dji-banner-overlay .dji-brand-logo{
  position: absolute;
  top: var(--dji-brand-logo-top);
  left: var(--dji-brand-logo-left);
  width: var(--dji-brand-logo-size) !important;
  max-width: 70vw;
  height: auto !important;
  transform: translateX(-50%);
  z-index: 56;
  opacity: 0.98;
}

.dji_drones_banner_item .dji-banner-overlay .dji-floating-product{
  position: absolute;
  top: var(--dji-product-top);
  left: var(--dji-product-left);
  width: var(--dji-product-size) !important;
  max-width: 78vw;
  height: auto !important;
  transform: translate(-50%, 120%);
  z-index: 55;
  opacity: 0;
  animation:
    djiProductEntryFromBottom 1.45s ease-out forwards,
    djiProductFloat 4.2s ease-in-out 1.45s infinite;
}

.dji_drones_banner_item .dji-banner-overlay .dji-floating-product--left{
  top: var(--dji-product-left-top);
  left: var(--dji-product-left-left);
  width: var(--dji-product-left-size) !important;
  transform: translate(-50%, -140%);
  animation:
    djiProductEntryFromTop 1.35s ease-out forwards,
    djiProductFloat 4.2s ease-in-out 1.35s infinite;
}

.dji_drones_banner_item .dji-banner-overlay .dji-floating-product--right{
  top: var(--dji-product-right-top);
  left: var(--dji-product-right-left);
  width: var(--dji-product-right-size) !important;
  transform: translate(-50%, -140%);
  animation:
    djiProductEntryFromTop 1.35s ease-out forwards,
    djiProductFloat 4.2s ease-in-out 1.35s infinite;
}

@keyframes djiProductEntryFromBottom{
  0%{
    transform: translate(-50%, 120%);
    opacity: 0;
  }
  100%{
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes djiProductEntryFromTop{
  0%{
    transform: translate(-50%, -140%);
    opacity: 0;
  }
  100%{
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes djiProductFloat{
  0%{ transform: translate(-50%, -50%); }
  50%{ transform: translate(-50%, -54%); }
  100%{ transform: translate(-50%, -50%); }
}

.gopro-banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.gopro_banner_item .gopro-banner-overlay .gopro-brand-logo{
  position: absolute;
  top: var(--gopro-brand-logo-top);
  left: var(--gopro-brand-logo-left);
  width: var(--gopro-brand-logo-size) !important;
  max-width: 82vw;
  height: auto !important;
  transform: translateX(-50%);
  z-index: 56;
  opacity: 0.98;
}

.gopro_banner_item .gopro-banner-overlay .gopro-floating-product{
  position: absolute;
  top: var(--gopro-product-top);
  left: var(--gopro-product-left);
  width: var(--gopro-product-size) !important;
  max-width: 72vw;
  height: auto !important;
  opacity: 0;
  transform: translate(-50%, 130%) scale(0.5);
  filter: blur(12px);
  transform-origin: center center;
  z-index: 55;
  display: block;
  animation:
    goproProductEntry 1.85s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    goproProductFloat 4.2s ease-in-out 1.85s infinite;
}

.gopro_banner_item .gopro-banner-overlay .gopro-floating-product--left{
  top: var(--gopro-left-top);
  left: var(--gopro-left-left);
  width: var(--gopro-left-size) !important;
}

.gopro_banner_item .gopro-banner-overlay .gopro-floating-product--center{
  top: var(--gopro-center-top);
  left: var(--gopro-center-left);
  width: var(--gopro-center-size) !important;
  z-index: 56;
}

.gopro_banner_item .gopro-banner-overlay .gopro-floating-product--right{
  top: var(--gopro-right-top);
  left: var(--gopro-right-left);
  width: var(--gopro-right-size) !important;
  animation-delay: 0.06s, 1.91s;
}

@keyframes goproProductEntry{
  0%{
    transform: translate(-50%, 130%) scale(0.48);
    opacity: 0;
    filter: blur(14px);
  }
  35%{
    opacity: 0.85;
    filter: blur(5px);
  }
  58%{
    transform: translate(-50%, -54%) scale(1.06);
    opacity: 1;
    filter: blur(0);
  }
  78%{
    transform: translate(-50%, -49%) scale(0.98);
  }
  100%{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes goproProductFloat{
  0%{
    transform: translate(-50%, -50%) scale(1);
  }
  50%{
    transform: translate(-50%, -55%) scale(1);
  }
  100%{
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 768px){
  .dji_drones_banner_item .dji-banner-overlay .dji-brand-logo{
    top: var(--dji-brand-logo-mobile-top);
    left: var(--dji-brand-logo-mobile-left);
    width: var(--dji-brand-logo-mobile-size) !important;
    max-width: 85vw;
  }
  .dji_drones_banner_item .dji-banner-overlay .dji-floating-product{
    top: var(--dji-product-mobile-top);
    left: var(--dji-product-mobile-left);
    width: var(--dji-product-mobile-size) !important;
    max-width: 82vw;
  }
  .dji_drones_banner_item .dji-banner-overlay .dji-floating-product--left{
    top: var(--dji-product-left-mobile-top);
    left: var(--dji-product-left-mobile-left);
    width: var(--dji-product-left-mobile-size) !important;
  }
  .dji_drones_banner_item .dji-banner-overlay .dji-floating-product--right{
    top: var(--dji-product-right-mobile-top);
    left: var(--dji-product-right-mobile-left);
    width: var(--dji-product-right-mobile-size) !important;
  }

  .gopro_banner_item .gopro-banner-overlay .gopro-brand-logo{
    top: var(--gopro-brand-logo-mobile-top);
    left: var(--gopro-brand-logo-mobile-left);
    width: var(--gopro-brand-logo-mobile-size) !important;
    max-width: 92vw;
  }

  .gopro_banner_item .gopro-banner-overlay .gopro-floating-product{
    top: var(--gopro-product-mobile-top);
    left: var(--gopro-product-mobile-left);
    width: var(--gopro-product-mobile-size) !important;
    max-width: 65vw;
  }

  .gopro_banner_item .gopro-banner-overlay .gopro-floating-product--left{
    top: var(--gopro-left-mobile-top);
    left: var(--gopro-left-mobile-left);
    width: var(--gopro-left-mobile-size) !important;
    max-width: 70vw;
  }

  .gopro_banner_item .gopro-banner-overlay .gopro-floating-product--center{
    top: var(--gopro-center-mobile-top);
    left: var(--gopro-center-mobile-left);
    width: var(--gopro-center-mobile-size) !important;
    max-width: 70vw;
  }

  .gopro_banner_item .gopro-banner-overlay .gopro-floating-product--right{
    top: var(--gopro-right-mobile-top);
    left: var(--gopro-right-mobile-left);
    width: var(--gopro-right-mobile-size) !important;
    max-width: 70vw;
  }
}

.nintendo-banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.nintendo_banner_item .nintendo-banner-overlay .nintendo-brand-logo{
  position: absolute;
  top: var(--nintendo-brand-logo-top);
  left: var(--nintendo-brand-logo-left);
  width: var(--nintendo-brand-logo-size) !important;
  max-width: 80vw;
  height: auto !important;
  transform: translateX(-50%);
  z-index: 56;
  opacity: 0.98;
}

.nintendo_banner_item .nintendo-banner-overlay .nintendo-floating-product{
  position: absolute;
  top: var(--nintendo-product-top);
  left: var(--nintendo-product-left);
  width: var(--nintendo-product-size) !important;
  max-width: 78vw;
  height: auto !important;
  opacity: 0;
  transform: translate(-50%, 125%);
  z-index: 55;
  display: block;
  animation:
    nintendoProductEntry 1.55s ease-out forwards,
    nintendoProductFloat 4.2s ease-in-out 1.55s infinite;
}

/* Keep Nintendo center product hidden off-slide; restart entry when slide becomes first */
.carousel-inner .carousel-item:not(:first-child) .nintendo_banner_item .nintendo-banner-overlay .nintendo-floating-product,
.carousel-inner .carousel-item:not(:first-child).nintendo_banner_item .nintendo-banner-overlay .nintendo-floating-product{
  opacity: 0 !important;
  animation: none !important;
}

.nintendo_banner_item .nintendo-banner-overlay .nintendo-floating-joycons{
  position: absolute;
  top: calc(var(--nintendo-product-top) + var(--nintendo-joycons-right-top-offset));
  left: calc(var(--nintendo-product-left) + (var(--nintendo-product-size) * var(--nintendo-joycons-right-left-mult)));
  width: calc(var(--nintendo-product-size) * var(--nintendo-joycons-right-size-mult)) !important;
  max-width: 52vw;
  height: auto !important;
  opacity: 0;
  transform: translate(-50%, 125%) rotate(var(--nintendo-joycons-right-rotate));
  z-index: 54;
  display: block;
  animation:
    nintendoJoyconsEntry 1.65s ease-out forwards,
    nintendoJoyconsFloat 4.6s ease-in-out 1.65s infinite;
}

.nintendo_banner_item .nintendo-banner-overlay .nintendo-floating-joycons-left{
  position: absolute;
  top: calc(var(--nintendo-product-top) + var(--nintendo-joycons-left-top-offset));
  left: calc(var(--nintendo-product-left) - (var(--nintendo-product-size) * var(--nintendo-joycons-left-left-mult)));
  width: calc(var(--nintendo-product-size) * var(--nintendo-joycons-left-size-mult)) !important;
  max-width: 52vw;
  height: auto !important;
  opacity: 0;
  transform: translate(-50%, 125%) rotate(var(--nintendo-joycons-left-rotate));
  z-index: 54;
  display: block;
  animation:
    nintendoJoyconsLeftEntry 1.7s ease-out forwards,
    nintendoJoyconsLeftFloat 4.8s ease-in-out 1.7s infinite;
}

@keyframes nintendoJoyconsEntry{
  0%{
    transform: translate(-50%, 125%) rotate(-10deg);
    opacity: 0;
  }
  65%{
    transform: translate(-50%, -52%) rotate(-6deg);
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%) rotate(-6deg);
    opacity: 1;
  }
}

@keyframes nintendoJoyconsFloat{
  0%{
    transform: translate(-50%, -50%) rotate(-6deg);
  }
  50%{
    transform: translate(-50%, -56%) rotate(-4deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(-6deg);
  }
}

@keyframes nintendoJoyconsLeftEntry{
  0%{
    transform: translate(-50%, 125%) rotate(10deg);
    opacity: 0;
  }
  65%{
    transform: translate(-50%, -52%) rotate(7deg);
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%) rotate(7deg);
    opacity: 1;
  }
}

@keyframes nintendoJoyconsLeftFloat{
  0%{
    transform: translate(-50%, -50%) rotate(7deg);
  }
  50%{
    transform: translate(-50%, -56%) rotate(5deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(7deg);
  }
}

@keyframes nintendoProductEntry{
  0%{
    transform: translate(-50%, 125%);
    opacity: 0;
  }
  65%{
    transform: translate(-50%, -52%);
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes nintendoProductFloat{
  0%{
    transform: translate(-50%, -50%);
  }
  50%{
    transform: translate(-50%, -56%);
  }
  100%{
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 768px){
  .nintendo_banner_item .nintendo-banner-overlay .nintendo-brand-logo{
    top: var(--nintendo-brand-logo-mobile-top);
    left: var(--nintendo-brand-logo-mobile-left);
    width: var(--nintendo-brand-logo-mobile-size) !important;
    max-width: 92vw;
  }

  .nintendo_banner_item .nintendo-banner-overlay .nintendo-floating-product{
    top: var(--nintendo-product-mobile-top);
    left: var(--nintendo-product-mobile-left);
    width: var(--nintendo-product-mobile-size) !important;
    max-width: 70vw;
  }

  .nintendo_banner_item .nintendo-banner-overlay .nintendo-floating-joycons{
    top: calc(var(--nintendo-product-mobile-top) + var(--nintendo-joycons-right-mobile-top-offset));
    left: calc(var(--nintendo-product-mobile-left) + (var(--nintendo-product-mobile-size) * var(--nintendo-joycons-right-mobile-left-mult)));
    width: calc(var(--nintendo-product-mobile-size) * var(--nintendo-joycons-right-mobile-size-mult)) !important;
    max-width: 60vw;
  }

  .nintendo_banner_item .nintendo-banner-overlay .nintendo-floating-joycons-left{
    top: calc(var(--nintendo-product-mobile-top) + var(--nintendo-joycons-left-mobile-top-offset));
    left: calc(var(--nintendo-product-mobile-left) - (var(--nintendo-product-mobile-size) * var(--nintendo-joycons-left-mobile-left-mult)));
    width: calc(var(--nintendo-product-mobile-size) * var(--nintendo-joycons-left-mobile-size-mult)) !important;
    max-width: 60vw;
  }
}

/* Apple logo overlay – inside iPhone banner slide, on top of banner image */
.iphone-banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
/* Higher specificity so carousel .carousel-item img (width:100%) does not override */
.iphone_banner_item .iphone-banner-overlay .iphone-banner-logo{
  position: absolute;
  top: var(--iphone-logo-top);
  left: var(--iphone-logo-left);
  width: var(--iphone-logo-size) !important;
  height: auto !important;
  z-index: 60;
  display: block;
}

@media (max-width: 768px){
  .iphone_banner_item .iphone-banner-overlay .iphone-banner-logo{
    top: var(--iphone-logo-mobile-top);
    left: var(--iphone-logo-mobile-left);
    width: var(--iphone-logo-mobile-size) !important;
  }
}

/* iPhone floating product – inside iPhone banner slide */
.iphone_banner_item .iphone-banner-overlay .iphone-floating-product{
  position: absolute;
  top: var(--iphone-product-top);
  left: var(--iphone-product-left);
  width: var(--iphone-product-size) !important;
  height: auto !important;
  /* Hidden starting pose: below banner, rotated, mirrored */
  opacity: 0;
  transform: translate(-50%, 140%) rotate(-25deg) scaleX(-1);
  z-index: 55;
  display: block;
  /* 1) Entrada, 2) flotación suave continua */
  animation:
    iphoneProductEntry 1.6s ease-out forwards,
    iphoneProductFloat 4.2s ease-in-out 1.6s infinite;
}

/* iPhone 13 floating product – similar entry style */
.iphone_banner_item .iphone-banner-overlay .iphone13-floating-product{
  position: absolute;
  top: var(--iphone13-top);
  left: var(--iphone13-left);
  width: var(--iphone13-size) !important;
  height: auto !important;
  opacity: 0;
  transform: translate(-50%, 140%) rotate(-25deg);
  z-index: 55;
  display: block;
  /* 1) Entrada, 2) flotación suave continua */
  animation:
    iphone13Entry 1.6s ease-out forwards,
    iphone13ProductFloat 5.4s ease-in-out 2.3s infinite;
}

@keyframes iphoneProductEntry{
  0%{
    transform: translate(-50%, 140%) rotate(-25deg) scaleX(-1);
    opacity: 0;
  }
  50%{
    transform: translate(-50%, -20%) rotate(12deg) scaleX(-1);
    opacity: 1;
  }
  80%{
    transform: translate(-50%, -55%) rotate(-6deg) scaleX(-1);
  }
  100%{
    transform: translate(-50%, -50%) rotate(0deg) scaleX(-1);
    opacity: 1;
  }
}

/* Flotación suave para iPhone 12 */
@keyframes iphoneProductFloat{
  0%{
    transform: translate(-50%, -50%) rotate(0deg) scaleX(-1);
  }
  50%{
    transform: translate(-50%, -55%) rotate(0deg) scaleX(-1);
  }
  100%{
    transform: translate(-50%, -50%) rotate(0deg) scaleX(-1);
  }
}

@keyframes iphone13Entry{
  0%{
    transform: translate(-50%, 140%) rotate(-25deg);
    opacity: 0;
  }
  60%{
    transform: translate(-50%, -30%) rotate(10deg);
    opacity: 1;
  }
  100%{
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
}

/* Flotación suave para iPhone 13 */
@keyframes iphone13ProductFloat{
  0%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50%{
    transform: translate(-50%, -55%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@media (max-width: 768px){
  .iphone_banner_item .iphone-banner-overlay .iphone-floating-product{
    top: var(--iphone-product-mobile-top);
    left: var(--iphone-product-mobile-left);
    width: var(--iphone-product-mobile-size) !important;
  }

  .iphone_banner_item .iphone-banner-overlay .iphone13-floating-product{
    top: var(--iphone13-mobile-top);
    left: var(--iphone13-mobile-left);
    width: var(--iphone13-mobile-size) !important;
  }
}

/* JBL logo overlay */
.jbl-overlay{
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.jbl-banner .jbl-overlay .jbl-logo{
  position: absolute;
  top: var(--jbl-logo-top);
  left: var(--jbl-logo-left);
  width: var(--jbl-logo-size);
  height: auto;
  z-index: 50;
  display: block;
}

/* JBL floating products */
.jbl-overlay .jbl-product{
  position: absolute;
  display: block;
  height: auto;
  z-index: 55;
  pointer-events: none;
}

.jbl-overlay .jbl-extreme4{
  top: var(--jbl-extreme4-top);
  left: var(--jbl-extreme4-left);
  width: var(--jbl-extreme4-size) !important;
  height: auto !important;
  animation: jblFloat1 6s ease-in-out infinite;
}

.jbl-overlay .jbl-clip5{
  top: var(--jbl-clip5-top);
  left: var(--jbl-clip5-left);
  width: var(--jbl-clip5-size) !important;
  height: auto !important;
  animation: jblFloat2 5.2s ease-in-out infinite;
}

@keyframes jblFloat1{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0); }
}
@keyframes jblFloat2{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
  100%{ transform: translateY(0); }
}

/* JBL floating products – mobile layout overrides */
@media (max-width: 768px){
  .jbl-overlay .jbl-extreme4{
    top: var(--jbl-extreme4-mobile-top);
    left: var(--jbl-extreme4-mobile-left);
    width: var(--jbl-extreme4-mobile-size) !important;
    max-width: 45vw;
    height: auto !important;
  }
  .jbl-overlay .jbl-clip5{
    top: var(--jbl-clip5-mobile-top);
    left: var(--jbl-clip5-mobile-left);
    width: var(--jbl-clip5-mobile-size) !important;
    max-width: 40vw;
    height: auto !important;
  }
}
/* Overlay: full banner so logo/controller use % from banner (variables in :root) */
.ps5-overlay{
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.ps5-banner .ps5-overlay .ps5-logo{
  position: absolute;
  top: var(--ps5-logo-top);
  right: var(--ps5-logo-right);
  width: var(--ps5-logo-size) !important;
  max-width: 32vw;
  height: auto !important;
  display: block;
}
.ps5-banner .ps5-overlay .ps5-controller{
  position: absolute;
  top: var(--ps5-controller-top);
  right: var(--ps5-controller-right);
  width: var(--ps5-controller-size) !important;
  max-width: 22vw;
  height: auto !important;
  display: block;
  animation: joystickFloat 4.8s ease-in-out infinite;
  animation-delay: 0.3s;
}
.ps5-banner .ps5-overlay .ps5-vr{
  position: absolute;
  top: var(--ps5-vr-top);
  right: var(--ps5-vr-right);
  width: var(--ps5-vr-size) !important;
  max-width: 24vw;
  height: auto !important;
  display: block;
  z-index: 50;
  animation: vrFloat 5.5s ease-in-out infinite;
  animation-delay: 0.8s;
}
.ps5-banner .ps5-overlay .ps5-pulseelite{
  position: absolute;
  top: var(--ps5-pulse-top);
  right: var(--ps5-pulse-right);
  width: var(--ps5-pulse-size) !important;
  max-width: 24vw;
  height: auto !important;
  display: block;
  z-index: 50;
  animation: pulseFloat 6.2s ease-in-out infinite;
  animation-delay: 1.6s;
}

@keyframes pulseFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
  100%{ transform: translateY(0px); }
}

@keyframes vrFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-14px); }
  100%{ transform: translateY(0px); }
}

@keyframes joystickFloat{
  0%{ transform: translateY(0px); }
  50%{ transform: translateY(-12px); }
  100%{ transform: translateY(0px); }
}

/* PS5 banner: mobile – use :root variables (--ps5-*-mobile-*) to adjust position/size */
@media (max-width: 768px){
  .ps5-banner{
    height: var(--ps5-banner-height-mobile);
  }
  .ps5-banner .ps5-overlay .ps5-logo{
    top: var(--ps5-logo-mobile-top);
    right: var(--ps5-logo-mobile-right);
    width: var(--ps5-logo-mobile-size) !important;
    max-width: 50vw;
    height: auto !important;
  }
  .ps5-banner .ps5-overlay .ps5-controller{
    top: var(--ps5-controller-mobile-top);
    right: var(--ps5-controller-mobile-right);
    width: var(--ps5-controller-mobile-size) !important;
    max-width: 45vw;
    height: auto !important;
  }
  .ps5-banner .ps5-overlay .ps5-vr{
    top: var(--ps5-vr-mobile-top);
    right: var(--ps5-vr-mobile-right);
    width: var(--ps5-vr-mobile-size) !important;
    max-width: 40vw;
  }
  .ps5-banner .ps5-overlay .ps5-pulseelite{
    top: var(--ps5-pulse-mobile-top);
    right: var(--ps5-pulse-mobile-right);
    width: var(--ps5-pulse-mobile-size) !important;
    max-width: 40vw;
  }

  .jbl-banner .jbl-overlay .jbl-logo{
    top: var(--jbl-logo-mobile-top);
    left: var(--jbl-logo-mobile-left);
    width: var(--jbl-logo-mobile-size) !important;
  }
}

.banner-bg,
.banner-slide video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.banner-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: visible !important;
  pointer-events: none;
}

.product-float{
  position:absolute;
  right:8%;
  top:30%;
  width:220px;
  max-width:22vw;
  height:auto;
  z-index:2;
  left:auto;
  animation:floatProduct 4s ease-in-out infinite;
}
/* Joystick: right with !important so it wins over .product-float and media overrides */
.product-float.joystick{
  position: absolute;
  right: 1% !important;
  top: 5%;
  width: 220px;
  max-width: 22vw;
  left: auto !important;
  /* Rotation: edit --joystick-rotate in :root above */
  transform: rotate(var(--joystick-rotate));
  opacity: 0;
}
.carousel-item.three_carousel_item.active .product-float.joystick{
  animation:
    joystickEntrance 0.6s ease-out forwards,
    floatProduct 4s ease-in-out infinite 0.6s;
}
@keyframes joystickEntrance{
  0%{
    transform: translateX(80px) rotate(var(--joystick-rotate));
    opacity: 0;
  }
  100%{
    transform: translateX(0px) rotate(var(--joystick-rotate));
    opacity: 1;
  }
}
@keyframes floatProduct{
  0%{
    transform: translateY(0px) rotate(var(--joystick-rotate));
  }
  50%{
    transform: translateY(-10px) rotate(var(--joystick-rotate));
  }
  100%{
    transform: translateY(0px) rotate(var(--joystick-rotate));
  }
}

/* PlayStation logo (PS5 banner overlay) */
.ps5-brand-logo {
  position: absolute !important;
  top: 20% !important;
  left: 10% !important;
  width: 200px !important;
  height: auto !important;
  z-index: 9999 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.carousel-item h1{
  opacity: .5;
}
.carousel-controls .prev{
  display: inline-block;
  height: 32px;
  width: 32px;
  position: absolute;
  left: 12px;
  top: 60%;
  transform: translate(-50%, -50%);
  background-image: url('../images/prev.svg');
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: .5;
}
.carousel-controls .next{
  display: inline-block;
  height: 32px;
  width: 32px;
  position: absolute;
  right: 12px;
  top: 60%;
  transform: translate(-50%, -50%);
  background-image: url('../images/next.svg');
  background-position: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
  cursor: pointer;
  opacity: .5;
}
.prev:hover, .next:hover{
  opacity: 1;
}
.carousel-indicators{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}
.carousel-indicators span{
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.6);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.carousel-indicators span:hover{
  opacity: 0.9;
  background-color: rgba(255, 255, 255, 0.8);
}
.carousel-indicators span.active{
  background-color: #fff;
  transform: scale(1.2);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.7), 0 0 24px rgba(255, 255, 255, 0.35);
  opacity: 1;
}
.one_carousel_item, .two_carousel_item{
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    object-fit: unset;
} 
.one_carousel_item > h1{
  position: absolute;
} 


.two_carousel_item > h1{
  width: 100%;
  position: absolute;
} 




.three_carousel_item > h1{
  position: absolute;
}
.four_carousel_item{
  overflow: hidden;
}

.four_carousel_item > h1{
  position: absolute;
}

/* bannernuevo.jpg slide: fill container, vertical crop via object-position (no margin/padding) */
.carousel-item.banner-new-item .banner-slide .banner-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--banner-vertical-adjust, 50%);
}

/* Mobile: bannernuevo.jpg slide – same height and bottom alignment as other banners */
@media (max-width: 768px) {
  .carousel-item.banner_new_item .banner-slide,
  .carousel-item.banner-new-item .banner-slide {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  .carousel-item.banner_new_item .banner-slide a,
  .carousel-item.banner-new-item .banner-slide a {
    display: block;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
  }
  .carousel-item.banner_new_item .banner-slide .banner-bg,
  .carousel-item.banner-new-item .banner-slide .banner-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center var(--banner-vertical-adjust, 0%);
  }
}

/* Hero: slider solo controla imágenes; overlay fuera del slider (evita bugs de interacción) */
.hero {
  position: relative;
}
.hero-slider {
  position: relative;
}
.hero-slider img,
.hero-slider .banner-bg {
  width: 100%;
  display: block;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Overlay solo visible cuando su slide es el primero; oculto al instante al iniciar slide */
.hero-overlay {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(calc(-50% + var(--hero-content-offset, 0px)));
  z-index: 20;
  color: white;
  max-width: 520px;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* Sutil overlay de contraste solo detrás del texto del hero (slide principal con video) */
.carousel-item.banner_new_item .hero-overlay::before,
.carousel-item.banner-new-item .hero-overlay::before {
  content: "";
  position: absolute;
  inset: -18px -24px;
  background:
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.55), transparent 55%),
    linear-gradient(120deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.78) 40%, rgba(15, 23, 42, 0.0) 100%);
  opacity: 0.96;
  border-radius: 26px;
  pointer-events: none;
  z-index: -1;
}
.carousel-item .hero-overlay {
  opacity: 0;
}
.carousel-item.banner_new_item:first-child .hero-overlay,
.carousel-item.banner-new-item:first-child .hero-overlay {
  opacity: 1;
}
.carousel--sliding .carousel-item:first-child .hero-overlay {
  opacity: 0;
  transition: none;
}
.hero-overlay .hero-btn {
  pointer-events: auto;
}
.hero-title {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 12px;
  margin-bottom: 20px;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: -0.02em;
  animation: hero-title-in 0.6s ease-out forwards;
}
.hero-subtitle {
  font-size: 20px;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  opacity: 0;
  margin-bottom: 35px;
  line-height: 1.5;
  animation: hero-subtitle-in 0.6s ease-out 0.15s forwards;
  max-width: 46ch;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(15, 23, 42, 0.75);
}
.hero-btn {
  font-size: 22px;
  font-weight: 600;
  padding: 18px 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  text-decoration: none;
  color: white;
  background: linear-gradient(#111, #111) padding-box,
               linear-gradient(90deg, #2ad0ff, #a53cff) border-box;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border: 2px solid transparent;
  box-shadow: 0 0 20px rgba(120, 120, 255, 0.4);
  transition: 0.3s;
  animation: hero-btn-in 0.5s ease-out 0.3s forwards;
  opacity: 0;
}
.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(140, 120, 255, 0.8);
}
@keyframes hero-title-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hero-subtitle-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 0.85;
    transform: translateY(0);
  }
}
@keyframes hero-btn-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 768px) {
  .hero-overlay {
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    /* Evita que el botón baje y se cruce con los dots en pantallas bajas */
    top: 44%;
    transform: translateY(calc(-50% + var(--hero-content-offset, 0px)));
  }
  .hero-title {
    font-size: clamp(28px, 6vw, 34px);
    font-weight: 700;
    line-height: 1.22;
    margin-top: 48px; /* empuja el título un poco hacia abajo dentro del hero */
    margin-bottom: 12px;
  }
  .hero-subtitle {
    font-size: 14px;
    max-width: 44ch;
    margin-bottom: 20px;
  }
  .hero-btn {
    font-size: 14px;
    padding: 10px 18px;
    border-radius: 28px;
    max-width: 85%;
    position: static;
    left: auto;
    bottom: auto;
    margin: 0 auto;
  }
}

/* Tablet: mantener proporción del botón y subir overlay para no tapar los dots */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-overlay {
    top: 46%;
    left: 6%;
    max-width: 520px;
  }
  .hero-btn {
    font-size: 18px;
    padding: 14px 28px;
    border-radius: 34px;
  }
  .carousel-indicators {
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Mobile chico: más compacto y más arriba todavía */
@media (max-width: 480px) {
  .hero-overlay {
    top: 40%;
    padding: 18px;
  }
  .hero-title { font-size: 24px; }
  .hero-subtitle { font-size: 13px; }
  .hero-btn {
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 26px;
  }
  .carousel-indicators {
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* Desktop: raise carousel dots so they sit inside the banner */
@media (min-width: 992px) {
  .carousel-indicators {
    bottom: 100px;
  }
}

  /* Quantity Css */
.counter {
    width: 150px;
    display: flex;
}
.counter input {
    width: 50px;
    border: 0;
    line-height: 30px;
    font-size: 20px;
    text-align: center;
    background: var(--color-yellow);
    color: #fff;
    appearance: none;
    outline: 0;
    border: 1px solid var(--color-yellow);
}
.counter span {
  display: block;
  font-size: 25px;
  padding: 0 15px;
  cursor: pointer;
  color: var(--color-yellow);
  user-select: none;
  border: 1px solid var(--color-yellow);
}


/*index page end*/



/*about inner page start*/
/*banner*/
.about_banner_wrapper{
	width:100%;
	display:block;
	background-image:
		url('../images/about-banner-bg-new.png'),
		url('../images/about-banner-bg-new.png');
	height:300px;
	background-repeat:no-repeat;
	position:relative;
	background-size:contain, cover;
	background-position:center center, center center;
	overflow-x:hidden;
}
.about_banner_wrapper_overlay{
	background:#0000007d;
	width:100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: repeat;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.about_banner_inner_wrapper{
	position:relative;
	z-index:99;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 16px;
}
.about_banner_inner_wrapper h1{
	text-align:center;
	color:#ffffff;
	font-size: clamp(46px, 7vw, 86px);
	font-weight:800;
	padding-top:110px;
	position:relative;
	z-index:99;
	text-transform:uppercase;
	letter-spacing: 1.3px;
	line-height: 1.05;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	text-shadow: 0 12px 34px rgba(0,0,0,0.42);
	display:inline-block;
	left:50%;
	transform:translateX(-50%);
}
.about_banner_inner_wrapper h1::after{
	content:"";
	display:block;
	width:84px;
	height:4px;
	border-radius:999px;
	margin:14px auto 0;
	background:linear-gradient(90deg, #ffffff 0%, #cfe0ff 100%);
	box-shadow:0 8px 20px rgba(0,0,0,0.30);
}
.about_banner_inner_wrapper h2{
	text-align:center;
	color: rgba(255,255,255,0.92);
	font-size: clamp(18px, 2.3vw, 28px);
	font-weight:600;
	margin-top: 10px;
	letter-spacing: 0.25px;
	line-height: 1.3;
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	text-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.about_banner_inner_wrapper h2 a{
	color: inherit;
	text-decoration: none;
}
.about_banner_inner_wrapper h2 a:hover{
	text-decoration: underline;
}
/* about wrapper start*/

.about_wrapper{
	width:100%;
	display:block;
	padding-top:60px;
	padding-bottom:60px;
	overflow-x:hidden;
}
.about_inner_col{
	padding:20px;
}
.about_column{
	padding-bottom:30px;
}
.about_col{
	width:49%;
	display:inline-block;
	vertical-align:middle;
}
.about_inner_col_desc_top{
	padding:20px;
}

.about_inner_col img{
	box-shadow:18px 18px #111111;
	object-fit:cover;
}
.about_inner_col_desc_top h1{
	font-size:40px;
	font-weight:600;
	color:#000000;
	margin-bottom:30px;

}
.border_top_line{
	width: 40px;
    height: 5px;
    background:#000000 ;
    margin-bottom: 30px;
	border-radius:5px;
}
.about_detail_1{
	font-size:18px;
	
}
.about_inner_col_desc{
	padding:30px;
	vertical-align:middle;
}
.about_inner_col_desc_middle{
	padding:20px;
	
	text-align:right;
}

.about_inner_col_desc_middle h1{
	font-size:40px;
	font-weight:600;
	color:#000000;
	margin-bottom:30px;
	text-align:right;
	margin-top:30px;
}
.border_line_middle{
	width: 40px;
    height: 5px;
    background:#000000 ;
	border-radius:5px;
	text-align:right;
	margin:0 auto;
}
.about_detail_2{
	font-size:18px;
	
	text-align:right;
}
.about_inner_col_desc_bottom {
    padding: 20px;
}
.about_inner_col_desc_bottom h1{
	font-size:40px;
	font-weight:600;
	color:#000000;
	margin-bottom:30px;
	margin-top:30px;
}

/* Index: premium storytelling timeline */
.about_wrapper.timeline-section{
  background: #ffffff;
  padding-top: 72px;
  padding-bottom: 80px;
}
.about_wrapper.timeline-section .about_inner_wrapper{
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
  /* value in range [0..1] controlled by JS */
  --timeline-progress: 0;
}
.about_wrapper.timeline-section .about_inner_wrapper::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, #d8dee6 0%, #cfd8e3 100%);
  transform: translateX(-50%);
  z-index: 100;
}
.about_wrapper.timeline-section .about_inner_wrapper::after{
  content: "";
  position: absolute;
  left: 50%;
  /* line is drawn from `top:10px` to `bottom:10px` in ::before */
  top: calc(10px + (100% - 20px) * var(--timeline-progress));
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #111111;
  border: 2px solid #ffffff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 5px rgba(17, 17, 17, 0.1), 0 8px 16px rgba(17, 17, 17, 0.2);
  /* Keep dot above the fixed header while scrolling */
  z-index: 2005;
  transition: none;
  pointer-events: none;
}
.about_wrapper.timeline-section .about_column{
  position: relative;
  margin-bottom: 34px;
  padding-bottom: 8px;
  transition: transform .35s ease, opacity .35s ease;
}
.about_wrapper.timeline-section .about_column::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #111111;
  border: 2px solid #ffffff;
  transform: translateX(-50%);
  box-shadow: 0 0 0 4px rgba(17,17,17,0.08);
  opacity: 0.18;
  z-index: 2;
}
.about_wrapper.timeline-section .about_column.marker-reached::before{
  opacity: 1;
  background: linear-gradient(180deg, #0b63ce 0%, #0a4fa8 100%);
  border-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(11, 99, 206, 0.12), 0 12px 26px rgba(11, 99, 206, 0.18);
}
.about_wrapper.timeline-section .about_column.marker-pulse::before{
  animation: timelineDotPulse 900ms ease-out;
}

@keyframes timelineDotPulse{
  0%{
    /* Don't animate transform to avoid z-order flicker over the grey line */
    box-shadow: 0 0 0 4px rgba(11, 99, 206, 0.12), 0 12px 26px rgba(11, 99, 206, 0.18),
      0 0 0 0 rgba(11, 99, 206, 0.35);
  }
  55%{
    box-shadow: 0 0 0 4px rgba(11, 99, 206, 0.12), 0 12px 26px rgba(11, 99, 206, 0.18),
      0 0 0 18px rgba(11, 99, 206, 0.10);
  }
  100%{
    box-shadow: 0 0 0 4px rgba(11, 99, 206, 0.12), 0 12px 26px rgba(11, 99, 206, 0.18),
      0 0 0 0 rgba(11, 99, 206, 0.0);
  }
}
.about_wrapper.timeline-section .about_column.is-revealed::before{
  opacity: 1;
}
.about_wrapper.timeline-section .about_column.is-revealed .about_inner_col,
.about_wrapper.timeline-section .about_column.is-revealed .about_inner_col_desc_top,
.about_wrapper.timeline-section .about_column.is-revealed .about_inner_col_desc_middle,
.about_wrapper.timeline-section .about_column.is-revealed .about_inner_col_desc_bottom{
  box-shadow: 0 16px 36px rgba(17,24,39,0.14);
}
.about_wrapper.timeline-section .about_col{
  width: 48%;
}
.about_wrapper.timeline-section .about_inner_col,
.about_wrapper.timeline-section .about_inner_col_desc_top,
.about_wrapper.timeline-section .about_inner_col_desc_middle,
.about_wrapper.timeline-section .about_inner_col_desc_bottom{
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(17,24,39,0.08);
  padding: 22px;
}
.about_wrapper.timeline-section .about_inner_col img{
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(17,24,39,0.14);
  transition: transform .32s ease, box-shadow .32s ease;
}
.about_wrapper.timeline-section img.about_timeline_extra_image{
  width: 100%;
  margin-top: 16px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(17,24,39,0.14);
  transition: transform .32s ease, box-shadow .32s ease;
}
.about_wrapper.timeline-section img.about_timeline_extra_image:hover{
  transform: scale(1.03);
  box-shadow: 0 14px 34px rgba(17,24,39,0.20);
}
.about_wrapper.timeline-section .about_inner_col:hover img{
  transform: scale(1.03);
  box-shadow: 0 14px 34px rgba(17,24,39,0.20);
}
.about_wrapper.timeline-section .about_inner_col_desc_top h1,
.about_wrapper.timeline-section .about_inner_col_desc_middle h1,
.about_wrapper.timeline-section .about_inner_col_desc_bottom h1{
  font-size: clamp(34px, 4.3vw, 52px);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.about_wrapper.timeline-section .about_detail_1,
.about_wrapper.timeline-section .about_detail_2{
  font-size: 19px;
  line-height: 1.65;
  color: #1f2937;
}
.about_wrapper.timeline-section .about_detail_1 a,
.about_wrapper.timeline-section .about_detail_2 a{
  color: #0b63ce;
  text-decoration: none;
  font-weight: 500;
}
.about_wrapper.timeline-section .about_detail_1 a:hover,
.about_wrapper.timeline-section .about_detail_2 a:hover{
  text-decoration: underline;
}
.about_wrapper.timeline-section .about_column--family .about_col{
  width: 100%;
  display: block;
}
.about_wrapper.timeline-section .about_column--family .about_inner_col_desc_middle{
  text-align: left;
}
.about_wrapper.timeline-section .about_column--family .about_inner_col_desc_middle h1{
  text-align: left;
}
.about_wrapper.timeline-section .about_column--family .about_detail_2{
  text-align: left;
}
@media (max-width: 768px){
  .about_wrapper.timeline-section .about_inner_wrapper::before{
    left: 16px;
    transform: none;
  }
  .about_wrapper.timeline-section .about_inner_wrapper::after{
    left: 16px;
    transform: translate(0, -50%);
  }
  .about_wrapper.timeline-section .about_column::before{
    left: 16px;
    transform: none;
  }
  .about_wrapper.timeline-section .about_col{
    width: 100%;
    display: block;
  }
  .about_wrapper.timeline-section .about_inner_col_desc_middle,
  .about_wrapper.timeline-section .about_detail_2,
  .about_wrapper.timeline-section .about_inner_col_desc_middle h1{
    text-align: left;
  }
  .about_wrapper.timeline-section .about_inner_col,
  .about_wrapper.timeline-section .about_inner_col_desc_top,
  .about_wrapper.timeline-section .about_inner_col_desc_middle,
  .about_wrapper.timeline-section .about_inner_col_desc_bottom{
    margin-left: 34px;
  }
  .about_wrapper.timeline-section .about_column--family .about_inner_col,
  .about_wrapper.timeline-section .about_column--family .about_inner_col_desc_middle{
    margin-left: 22px;
    margin-right: 10px;
  }
}

/* Contact section (About page inside index.html) */
.about_contact_section{
  padding: 80px 20px;
  text-align: center;
  background: #ffffff;
  font-family: 'Inter', sans-serif;
}
.about_contact_section h1{
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 10px;
}
.about_contact_section > .container > p{
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #666;
  line-height: 1.5;
}
.about_contact_grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}
.about_contact_item{
  background: linear-gradient(145deg, #ffffff, #f5f5f5);
  border-radius: 16px;
  padding: 40px 30px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.about_contact_item::before{
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0,114,255,0.1), transparent 70%);
  top: -50%;
  left: -50%;
  opacity: 0;
  transition: 0.4s;
  pointer-events: none;
  z-index: 0;
}
.about_contact_item:hover::before{
  opacity: 1;
}
.about_contact_item > *{
  position: relative;
  z-index: 1;
}
.about_contact_item:hover{
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}
.about_contact_icon{
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about_contact_icon > a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.about_contact_icon i{
  font-size: 28px;
  color: #fff;
}
.about_contact_item h2{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #111;
  margin-bottom: 10px;
}
.about_contact_item p{
  margin-top: 0;
  font-size: 15px;
  font-weight: 400;
  color: #555;
  line-height: 1.6;
}
.about_contact_item a{
  color: #0072ff;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}
.about_contact_item a:hover{
  color: #0050cc;
}
.about_map iframe{
  width: 100%;
  height: 400px;
  border-radius: 20px;
  margin-top: 60px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}

@media (max-width: 768px){
  .about_contact_grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about_map iframe{
    height: 320px;
    margin-top: 30px;
  }
}

/*about inner page end*/

/*Blog inner page start*/
/*banner*/
.blog_banner_wrapper{
	width:100%;
	display:block;
	background-image:url('../images/New Project (36).webp');
	height:300px;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
}
.blog_banner_wrapper_overlay{
	position:absolute;
	background-color:#00000099;
	width:100%;
	height: 100%;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.blog_banner_inner_wrapper{
	 position: relative;
    z-index:9;
}
.blog_banner_inner_wrapper h1{
	text-align:center;
	color:white;
	font-size:45px;
	font-weight:500;
	padding-top:140px;
		text-transform:uppercase;
}
.blog_banner_inner_wrapper h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
}
/* blog wrapper start*/
.blog_wrapper{
	width:100%;
	display:block;
	padding-top:40px;
	padding-bottom :40px;
}
.blog_inner_wrapper{
	width:100%;
}
.blog_col_left{
	width:59%;
	display:inline-block;
}
.blog_col_right{
	width:40%;
	display:inline-block;
	vertical-align:top;
	
}
.inner_blog_col_left{
	padding-right:50px;
}
.inner_blog_col_left h1{
	padding-bottom:20px;
	font-weight: 600;
    text-transform: uppercase;
}
.inner_blog_col_right{
	border-left:1px solid grey;
}
.img_blog_one{
	width:100%;
	padding-bottom:20px;
	text-align:center;
	
}
.img_blog_one img{
	
}
.blog_one_btn{
	background-color:#feb710;
	color:white;
	padding:7px 15px;
	font-size:16px;
	border:1px solid #feb710;
	text-align:center;
	margin:0 auto;
	text-transform:uppercase;
	font-weight:500;
}
.blog_one_btn:hover{
	background-color:black;
	color:white;
	border:1px solid black;
}

.img_blog_one h2{
	font-size:22px;
	font-weight:600;
	padding-top:20px;
	text-align:center;
}
.img_blog_two{
	width:100%;
	display:block;
	padding-top:20px;
	padding-bottom:20px;
}
.img_blog_part{
	display:inline-block;
	width:49%;
	padding:10px;
	box-sizing:border-box;
	text-align:center;
}
.img_blog_part img{
	width:100%;
	object-fit:cover;
}
.img_blog_part h2{
	font-size:20px;
	font-weight:500;
	padding-top:20px;
	text-align:center;
}
.img_blog_part_btn{
	background-color:#feb710;
	color:white;
	padding:12px 12px;
	font-size:16px;
	border:1px solid #feb710;
	text-align:center;
	margin:0 auto;
	text-transform:uppercase;
	font-weight:500;
}
.img_blog_part_btn:hover{
	background-color:black;
	color:white;
	border:1px solid black;
}
.inner_blog_col_right{
	padding-left:50px;
}
.blog_border{
	border-left:5px solid grey;
}
.explore_more h4{
	font-size:20px;
	font-weight:600;
}
.blog_btn_product{
	background-color:white;
	color:black;
	padding:6px 15px;
	font-size:15px;
	border:1px solid black;
	margin-right:20px;
	text-transform:uppercase;
}
.blog_btn_product:hover{
	background-color:#feb710;
	color:white;
	padding:6px 15px;
	font-size:15px;
	border:1px solid #feb710;
}
.blog_btn{
	padding-top:15px;
	padding-bottom:15px;
}
.popular_post{
	width:100%;
	display:block;
}
.popular_post_col{
	width:100%;
	display:block;
	padding-bottom:50px;
}
.popular_post_img{
	width:49%;
	display:inline-block;
	text-align:center;
	margin:0 auto;
}
.popular_post_img_btn{
	background-color:#feb710;
	color:white;
	padding:12px 12px;
	font-size:16px;
	border:1px solid #feb710;
	text-align:center;
	margin:0 auto;
	text-transform:uppercase;
	font-weight:500;
}
.popular_post_img_btn:hover{
	background-color:black;
	color:white;
	border:1px solid black;
}
.popular_post_detail{
	width:49%;
	display:inline-block;
	vertical-align:top;
}
.popular_post h4{
	font-size:20px;
	font-weight:600;
	padding-bottom:20px;
	padding-top:20px;
}
.popular_post_detail h5{
	font-size:20px;
	font-weight:400;
}
.popular_post_img img{
	width:100%;
	object-fit:cover;
	text-align:center;
	margin:0 auto;
}
.blog_feature_product{
	width:100%;
	display:block;
}
.inner_blog_feature_product {
	width:100%;
}
.inner_blog_feature_product h4{
	font-size:20px;
	font-weight:600;
	padding-bottom:20px;
}
.blog_feature_img{
	padding:20px 140px;
}
.blog_feature_name{
	padding-top:20px;
	font-size:18px;
	padding-left:20px;
}
.blog_feature_brand{
	padding-left:20px;
}
.blog_price del{
	text-decoration:line-through;
	color:black;
}
.blog_price{
	color:#feb710;
	padding-left:20px;
	font-size:16px;
}
.sale_btn{
	font-size:16px;
	text-align:center;
	margin:0 auto;
	text-transform:uppercase;
	font-weight:500;
	color:red;
}
.sale_btn:hover{
	color:#feb710;
	
	
}
/* top image wrapper start*/
.top_image_wrapper{
	width:100%;
	display:block;
	padding-top:30px;
	padding-bottom:80px;
}
.inner_top_image_wrapper{
	width:100%;
	display:block;
}
.inner_top_image_wrapper h1{
	font-size:30px;
	font-weight:500;
	padding-bottom:30px;
}
.top_img_col{
	width:16.3%;
	display:inline-block;
}
.top_img_col_inner img{
	
	border-radius:50%;
	object-fit:cover;
}
.top_img_col_inner img{
	text-align:center;
	margin:0 auto;
}
.top_img_col_inner h4{
	text-align:center;
	padding-top:20px;
	font-size:20px;
	font-weight:500;
}

/*blog inner page end*/

/*cart inner page start*/
/*banner*/


/*banner*/
.cart_banner_wrapper{
	width:100%;
	display:block;
	background-image:url('../images/cart.webp');
	height:300px;
	background-repeat:no-repeat;
	position:relative;
	background-size:cover;
	overflow-x:hidden;
	
}
.cart_banner_wrapper_overlay{
	background:#0000007d;
	width:100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: repeat;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.cart_banner_inner_wrapper{
	position:relative;
	z-index:99;
}
.cart_banner_inner_wrapper h1{
	text-align:center;
	color:white;
	font-size:45px;
	font-weight:500;
	padding-top:140px;
	position:relative;
	z-index:99;
	text-transform:uppercase;
}
.cart_banner_inner_wrapper h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
}
/* cart wrapper start*/
.cart_wrapper{
	width:100%;
	display:block;
	padding-top:30px;
	padding-bottom:50px;
	overflow-x:hidden;
}
.cart_inner_wrapper{
	width:100%;
}
.cart_col{
	width:49%;
	display:inline-block;
}
.cart_heading h1 {
	font-size:40px;
	font-weight:500;
}
.cart_shop{
	text-align:right;
}
.cart_shop p{
	font-size:20px;
	font-weight:500;
	text-decoration:underline;
}

/* cart product table*/
.cart_product_table{
	width:100%;
	display:block;
	padding-bottom:15px;
	overflow-x:hidden;
}
.cart_product_table_inner{
	width:49%;
	display:inline-block;
}

.cart_product{
	padding-top:20px;
	text-transform:uppercase;
}
.cart_product p{
	font-size:16px;
	font-weight:500;
}
.cart_quantity_col{
	padding-top:20px;
	text-align:right;
	text-transform:uppercase;
}

.cart_quantity{
	padding-right:270px;
	font-size:16px;
	font-weight:500;
	display:inline;
}
.cart_total{
	font-size:16px;
	font-weight:500;
	display:inline;
}
/*cart product detail*/
.cart_product_detail{
	width:100%;
	display:block;
	border-top:1px solid black;
	border-bottom:1px solid black;
	padding:30px 0px;
	overflow-x:hidden;
}
.cart_product_col{
	display:inline-block;
	width:49%;
	vertical-align:top;
}
.cart_pro{
	width:100%;
	display:block;
	
}
.del_btn{
	margin-right:160px;
}
.del_btn i{
	font-size:20px;
	padding-left:10px;
}
.cart_product_image{
	display:inline-block;
	width:30%;
}	
.cart_image_detail{
	display:inline-block;
	width:68%;
	vertical-align:top;
} 
.cart_product_image img{
	width:145px;
	height:150px;
	object-fit:cover;
}
.cart_image_detail p{
	font-size:18px;
	font-weight:400;
}
.del_btn i{
	color:black;
	text-decoration:none;
}
.cart_btn{
	background-color:var(--color-yellow);
	border:1px solid var(--color-yellow);
	padding:10px 10px;
	color:white;
}
.cart_btn_inner{
	text-align:right;
	
}
.car_btn_price{
	font-size:18px;
	font-weight:400;
}
.cart_btn_inner p{
	display:inline;
}

.cart_btn_group{
	display:inline;
	margin-left:20px;
}

/* quantity button */



/* Sass Config */
#myform {
   
   
}
.qty {
    width: 50px;
    height: 40px;
    text-align: center;
    margin: -5px;
    font-size: 20px;
    border: 2px solid #feb710;
}
input.qtyplus {
    width: 30px;
    height: 40px;
    font-size: 20px;
    background-color: #feb710;
    color: #fff;
    cursor: pointer;
    border: none;
    margin-left: 2px;
}
input.qtyplus:active {
    border: 1px solid #feb710;
}
input.qtyminus:active {
    border: 1px solid #feb710;
}
input.qtyminus:hover {
    background-color: #000;
}
input.qtyplus:hover {
    background-color: #000;
}
input.qtyminus {
    width: 30px;
    height: 40px;
    font-size: 20px;
    background-color: #feb710;
    border-right: none;
    color: #fff;
    cursor: pointer;
    border: none;
    margin-right: 2px;
}
/*sub total*/
.sub_total{
	width:100%;
	display:block;
	padding-top:50px;
	padding-bottom:50px;
	overflow-x:hidden;
}
.inner_sub_total{
	text-align:right;
}
.inner_sub_total h3{
	padding-bottom:20px;
	font-size:25;
	font-weight:500;
}
.inner_sub_total p{
	padding-bottom:30px;
	font-size:16px;
}
.check_out_btn{
	background-color:var(--color-yellow);
	border:1px solid var(--color-yellow);
	padding:10px 100px;
	text-decoration:none;
	color:white;
	font-weight:500;
	text-transform: uppercase;
}
.check_out_btn:hover{
	background-color:black;
	border:1px solid black;
}
/* best sellers*/
.best_sellers{
	width:100%;
	display:block;
	padding-top:10px;
	padding-bottom:50px;
	overflow-x:hidden;
	overflow-y:hidden;
}
.best_sellers_inner_wrapper{
	width:100%;
}
.best_sellers_inner_wrapper h1{
	padding-bottom:30px;
	font-size: 30px;
    font-weight: 500;
}
.best_sellers_col_inner{
	margin:10px;
	border:1px solid #80808085;
}
.best_sellers_col{
	width:24.4%;
	display:inline-block;
	
}
.best_sellers_col_inner img{
	height:300px;
	object-fit:cover;
}
.best_sellers_col_inner h2{
	font-size:20px;
	font-weight:500;
	padding-top:13px;
	padding-left:20px;
}
.save_price{
	text-decoration:line-through;
	color:black;
}

.best_sellers_col_inner p{
	font-size:18px;
	font-weight:500;
	padding-top:13px;
	padding-bottom:13px;
	padding-left:20px;
	color:var(--color-yellow);
}

.view_btn{
	background-color:var(--color-yellow);
	padding:10px 15px;
	border:1px solid var(--color-yellow);
	color:white;
	font-size:16px;
	font-weight:500;

}
.view_btn:hover{
	background-color:black;
	padding:10px 15px;
	border:1px solid black;
	color:white;
	
}
.cart_view{
	text-align:center;
	margin:0 auto;
	padding-top:30px;
}
/*cart inner page end*/


/*contact us inner page start*/
.banner_wrapper{
	width:100%;
	display:block;
	background-image:url('../images/New Project (38).webp');
	background-repeat:no-repeat;
	background-size:cover;
	height:320px;
	position:relative;
	overflow-x:hidden;

}
.banner_inner_wrapper{
	vertical-align:middle;
	 position: relative;
    z-index: 9;
}
.banner_inner_wrapper h1{
	text-align:center;
	color:white;
	font-size:45px;
	font-weight:500;
	padding-top:140px;
	text-transform:uppercase;
	
}
.banner_inner_wrapper h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
		
}
.banner_overlay{
	position:absolute;
	background-color:#00000099;
	width:100%;
	height: 100%;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}
.contact_wrapper{
	width:100%;
	display:block;
	padding:50px 0px;
	overflow-x:hidden;
}
.contact_col{
	width:33%;
	display:inline-block;
}
.phone_desc{
	border:1px solid #e4e4e4;
	padding:30px 30px;
	
}
.phone_desc:hover{
	border:1px solid #000;
	
}
.phone_icon > i{
	font-size:50px;
	color:#000;
	border-radius:0px;
	margin-bottom:18px;
}
.phone_desc h2{
	font-size:22px;
	font-weight:500;
	margin-bottom:18px;
}
.phone_desc p{
	font-size:20px;
	font-weight:400;
}
.address_icon i{
	color:white;
	background:#000;
	font-size:30px;
	border-radius:8px;
	padding:6px 10px;
	margin-bottom:25px;
}
.map{
	width:100%;
	display:block;
}
.map iframe{
	width:100%;
	height:600px;
	overflow-x:hidden;
}
/* contact form wrapper start*/
.contact_form{
	width:100%;
	padding-top:50px;
	padding-bottom:50px;
	overflow-x:hidden;
}
.inner_contact_form{
	width:100%;
	display:block;
}
.contact_form_detail{
	width:70%;
	display:inline-block;
	    vertical-align: text-top
}
.contact_form_image {
    width: 29%;
    display: inline-block;
    vertical-align: text-top;
}
.contact_form_image_inner{
	padding-left:20px;
	padding-right:20px;
}
.contact_form_image_inner img{

	height:310px;
	object-fit:cover;
	box-shadow: 18px 18px #000;
}
.contact_form_col{
	width:33%;
	display:inline-block;
	padding-bottom:30px;
}
.contact_form_heading h2{
	font-size:25px;
	padding-bottom:20px;
	font-weight:600;
	text-transform:uppercase;
}

.name_field {
    text-align: center;
    position: relative;
}
.name_field span#name__error {
    position: absolute;
    top: 50px;
    left: 0;
}
.name_field span#email__error {
    position: absolute;
    top: 50px;
    left: 0;
}
.name_field span#phone__error {
    position: absolute;
    top: 50px;
    left: 0px;
}
.name_field input{
	width:305px;
	padding:12px 20px;
	font-size:18px;
}
.form_textarea textarea{
	width:100%;
}
.form_btn{
	margin-top:27px;
}
.form_btn button{
	padding:10px 50px;
	border:1px solid #000;
	font-size:20px;
	font-weight:500;
	background-color:#000;
	margin:0 auto;
	color:white;
}
.form_btn button:hover{
	
	border:1px solid black;
	font-size:20px;
	font-weight:500;
	background-color:black;
	margin:0 auto;
	color:white;
}

/*contact us inner page end*/
/*FAQ inner page start*/
/*banner*/
.faq_banner_wrapper{
	width:100%;
	display:block;
	background-image:url('../images/NewProject (34).webp');
	height:300px;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	overflow-x:hidden;
}
.faq_banner_wrapper_overlay{
	position:absolute;
	background-color:#00000099;
	width:100%;
	height: 100%;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.faq_banner_inner_wrapper{
	 position: relative;
    z-index: 9;
}
.faq_banner_inner_wrapper h1{
	text-align:center;
	color:white;
	font-size:45px;
	font-weight:500;
	padding-top:140px;
		text-transform:uppercase;
}
.faq_banner_inner_wrapper h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
}
.faq_wrapper{
	width:100%;
	padding-top:50px;
	padding-bottom:50px;
	overflow-x:hidden;
	background-color:#000000;
	color:#ffffff;
}
.faq_inner_wrapper{
	width:100%;
	color:#ffffff;
}
.faq_detail{
	width:100%;
}
.faq_inner_wrapper p{
	font-size:18px;
	padding-top:20px;
	padding-bottom:20px;
	color:#ffffff;
}
.faq_inner_wrapper h2{
	padding-top:20px;
	color:#ffffff;
}
.faq_accordion{
}
.accordion_faq {
  color:#ffffff;
  cursor: pointer;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-size:25px;
  font-weight:500;
  border-top:1px solid rgba(255,255,255,0.25);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left:20px;
}

.accordion_faq:after {
  content: '\002B';
  color: #ffffff;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}
.faq_accordion .accordion_faq.active:after {
  content: "\2212";
  color:#ffffff;
}
.faq_accordion .panel {
  background-color: rgba(255,255,255,0.06);
  color:#ffffff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.faq_accordion .panel p {
  color:#ffffff;
  padding: 1rem 20px;
}

/*FAQ inner page end*/


/*gallery inner page start*/
/*banner*/
.gallery_banner_wrapper{
	width:100%;
	display:block;
	background-image:url('../images/gallery.jpg');
	height:300px;
	background-repeat:no-repeat;
	position:relative;
	background-size:cover;
}
.gallery_banner_wrapper_overlay{
	background:#0000007d;
	width:100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: repeat;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.gallery_banner_inner_wrapper{
	position:relative;
	z-index:99;
}
.gallery_banner_inner_wrapper h1{
	text-align:center;
	color:white;
	font-size:45px;
	font-weight:500;
	padding-top:140px;
	position:relative;
	z-index:99;
	text-transform:uppercase;
}
.gallery_banner_inner_wrapper h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
}
/* gallery wrapper start*/

.gallery_wrapper{
	width:100%;
	display:block;
	padding-top:50px;
	padding-bottom:50px;
}
.gallery_inner_wrapper h1{
	font-size:40px;
	font-weight:500;
	text-align:center;
	padding-bottom:30px;
}
.gallery_inner_wrapper p{
	font-size:18px;
	font-weight:400;
	text-align:center;
	padding-bottom:40px;
}
.gallery_row_one{
	width:100%;
	display:block;
}
.gallery_col_1{
	width:49%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.gallery_col_2{
	width:25%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.gallery_col_3{
	width:25%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.gallery_inner_col_1 img{
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_1 img:hover{
	transform: scale(1.15);
}
.gallery_inner_col_2 img{
	
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_2 img:hover{
	transform: scale(1.15);
}
.gallery_inner_col_3 img{
	
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_3 img:hover{
	transform: scale(1.15);
}
.gallery_row_two{
	width:100%;
	display:block;
}
.gallery_col_4{
	width:25%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.gallery_col_5{
	width:49%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.gallery_col_6{
	width:25%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.gallery_inner_col_4 img{
	
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_4 img:hover{
	transform: scale(1.15);
}
.gallery_inner_col_5 img{
	
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_5 img:hover{
	transform: scale(1.15);
}
.gallery_inner_col_6 img{
	
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_6 img:hover{
	transform: scale(1.15);
}
.gallery_row_three{
	width:100%;
	display:block;
}
.gallery_col_7{
	width:25%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery_col_8{
	width:25%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}

.gallery_col_9{
	width:49%;
	display:inline-block;
	box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.gallery_inner_col_7 img{
	
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_7 img:hover{
	transform: scale(1.15);
}
.gallery_inner_col_8 img{
	
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_8 img:hover{
	transform: scale(1.15);
}
.gallery_inner_col_9 img{
	
	transition: transform 400ms ease-out;
	object-fit:cover;
}
.gallery_inner_col_9 img:hover{
	transform: scale(1.15);
}
/* gallery wrapper end*/

/*privacy inner page start*/
.privacy_banner_wrapper{
	width:100%;
	background-image:url('../images/New Project (34).webp');
	height:300px;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	overflow-x:hidden;
}
.privacy_banner_wrapper_overlay{
	background-color:#00000099;
	width:100%;
	height: 100%;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.inner_privacy_banner_wrapper{
	position:relative;
	z-index:9;
}

.inner_privacy_banner_wrapper h1{
	text-align:center;
	color:white;
	font-size:45px;
	font-weight:500;
	padding-top:140px;
	position:relative;
	z-index:99;
	text-transform:uppercase;
}
.inner_privacy_banner_wrapper h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
}
.privacy_wrapper{
	width:100%;
	padding:50px 0px;
	overflow-x:hidden;
}
.inner_privacy h1{
	font-size:35px;
	text-align:center;
	padding-bottom: 30px;
}
.privacy_detail{
	width:100%;
}
.privacy_detail h2{
	font-size:25px;
	padding-bottom:20px;
	font-weight:500;
}
.privacy_detail p{
	font-size:18px;
	padding-bottom:15px;
	
}
/*privacy inner page end*/

/* product inner page start*/
/*banner*/
.product_banner_wrapper{
	width:100%;
	display:block;
	background-image:url('../images/New Project-1.webp');
	height:300px;
	background-repeat:no-repeat;
	position:relative;
	background-size:cover;
	overflow-x:hidden;
}
.product_banner_wrapper_overlay{
	background:#0000007d;
	width:100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: repeat;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.product_banner_wrapper_inner{
	position:relative;
	z-index:9;
}
.product_banner_wrapper_inner h1{
	text-align:center;
	color:white;
	font-size:45px;
	font-weight:500;
	padding-top:140px;
	position:relative;
	z-index:99;
	text-transform:uppercase;
}
.product_banner_wrapper_inner h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
}
.headphones_detail_wrapper{
	width:100%;
	display: block;
	margin-top:30px;
	overflow-x:hidden;
}
.headphones_detail_inner_wrapper{
	width:100%;
	display:block;
	padding-top:0px;
	padding-bottom:50px;
}
.headphones-col {
    width: 49%;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
}
.headphones_col_img {
    display: flex;
    width: 100%;
    margin: 0 auto;
    height: auto;
    max-width: 550px;
    max-height: 580px;
}
.headphones_col_img img {
    width: 100%;
    object-fit: cover;
    text-align: center;
    margin: 0 auto;
    min-width: 600px;
}
.headphones_info{
	display:block;
	width:100%;
}
.headphones_short_img{
	display:block;
	width:100%;
	text-align: center;
}
.short_img {
    display: inline-block;
    width: 22%;
    text-align: center;
    margin: 0 auto;
    border: 3px solid transparent;
}
.short_img img {
    height: 120px;
    object-fit: cover;
    margin: 0 auto;
}

.headphones_heading{
	padding-bottom:50px;
}
.short_img.img-item:hover {
    border: 3px solid hsl(42, 99%, 53%);
}
.heading-detail{
	font-size:20px;
	font-weight:700;
	width:20%;
	display:inline-block;
}
.price, .type, .weight_detail , .material_detail, .vendor_detail, .type_detail, .available_detail, .quantity_detail, .button_list, .social_icon{
	margin-bottom:30px;	
	width:100%;
	display:block;
}
.detail_price, .type_btn, .weight , .material, .vendor, .type_headphone, .available, .quantity {
	width:77%;
	display:inline-block;
}
.detail_price{
	font-size:26px;
	font-weight:600;
	color:hsl(42, 99%, 53%);
}
.detail_price del{
	font-size:20px;
	color:grey;
	text-decoration:line-through;
}
.wireless{
	border:1px solid hsl(42, 99%, 53%);
	color:hsl(42, 99%, 53%);
	background:white;
	padding:2px 10px;
	font-size:20px;
	font-weight:500;
	
}
.wired{
	border:1px solid grey;
	color:grey;
	background:white;
	padding:2px 10px;
	font-size:20px;
	font-weight:500;
}
.wired:hover{
	border:1px solid hsl(42, 99%, 53%);
	color:hsl(42, 99%, 53%);
}
.type_btn a{
	margin-right:10px;
}
.no289{
	border:1px solid hsl(42, 99%, 53%);
	color:hsl(42, 99%, 53%);
	background:white;
	padding:2px 10px;
	font-size:20px;
	font-weight:500;
}
.no250{
	border:1px solid #9e9999;
	color:#9e9999;
	background:white;
	padding:2px 10px;
	font-size:20px;
	font-weight:500;
}
.no250:hover{
	border:1px solid hsl(42, 99%, 53%);
	color:hsl(42, 99%, 53%);
	
}
.weight a{
	margin-right:10px;
}
.silicon{
	border:1px solid hsl(42, 99%, 53%);
	color:hsl(42, 99%, 53%);
	background:white;
	padding:2px 10px;
	font-size:20px;
	font-weight:500;
}
.leather{
	border:1px solid #9e9999;
	color:#9e9999;
	background:white;
	padding:2px 10px;
	font-size:20px;
	font-weight:500;
}
.leather:hover{
	border:1px solid hsl(42, 99%, 53%);
	color:hsl(42, 99%, 53%);
	
}
.material a{
	margin-right:10px;
}
.vendor{
	font-size:20px;
	font-weight:500;
}
.type_headphone{
	font-size:20px;
	font-weight:500;
	color:#9e9999;
}
.available{
	font-size:20px;
	font-weight:500;
	color:#4f8a10;
}

.button_list a{
	display:inline-block;
	vertical-align:middle;
}
.btn_cart_buy{
	background-color:hsl(42, 99%, 53%);
	color:white;
	border:1px solid hsl(42, 99%, 53%);
	padding:10px 30px;
	font-size:20px;
	margin-right:12px;
}
.btn_cart_buy:hover{
	background-color:black;
	color:white;
	border:1px solid black;
}
.btn_cart_add{
	background-color:hsl(42, 99%, 53%);
	color:white;
	border:1px solid hsl(42, 99%, 53%);
	padding:10px 30px;
	font-size:20px;
	margin-right:12px;
}
.btn_cart_add:hover{
	background-color:black;
	color:white;
	border:1px solid black;
}
/* Product page: brief description and technical specs (simplified layout) */
.product_brief_description {
	font-size: 1rem;
	line-height: 1.5;
	color: #444;
	margin-bottom: 1.5rem;
	max-width: 100%;
}
.product_specs_wrapper {
	margin-bottom: 1.5rem;
}
.product_specs_heading {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}
.product_specs_list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.product_specs_list .spec_row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
	gap: 0.35rem;
}
.product_specs_list dt {
	font-weight: 600;
	margin: 0;
	min-width: 7rem;
}
.product_specs_list dd {
	margin: 0;
	color: #555;
}
/* WhatsApp consult button (cards + product CTA) */
.product_whatsapp_wrapper {
	margin-top: 1rem;
}
.buttons {
	display: flex;
	justify-content: center;
}
.buttons button {
	width: 100%;
	height: 45px;
	background-color: white;
	color: #333;
	position: relative;
	overflow: hidden;
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: 500;
	text-transform: uppercase;
	transition: all 0.3s ease;
	cursor: pointer;
	border: 1px solid #2f2f2f;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
}
.buttons button:before,
.buttons button:after {
	content: "";
	position: absolute;
	width: 0;
	height: 2px;
	background-color: #25D366;
	transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}
.buttons button:before {
	right: 0;
	top: 0;
}
.buttons button:after {
	left: 0;
	bottom: 0;
}
.buttons button span:before,
.buttons button span:after {
	content: "";
	position: absolute;
	width: 2px;
	height: 0;
	background-color: #25D366;
	transition: all 0.3s cubic-bezier(0.35, 0.1, 0.25, 1);
}
.buttons button span:before {
	right: 0;
	top: 0;
}
.buttons button span:after {
	left: 0;
	bottom: 0;
}
.buttons button p {
	margin: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}
.buttons button p:before {
	content: attr(data-title);
	position: absolute;
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.buttons button p:after {
	content: attr(data-text);
	position: absolute;
	width: 100%;
	top: 150%;
	color: #25D366;
	left: 0;
}
.buttons button:hover:before,
.buttons button:hover:after {
	width: 100%;
}
.buttons button:hover span:before,
.buttons button:hover span:after {
	height: 100%;
}
.buttons button:hover p:before {
	top: -50%;
}
.buttons button:hover p:after {
	top: 50%;
	transform: translateY(-50%);
}
.whatsapp-btn:hover {
	transform: scale(1.03);
}
.whatsapp-btn .wa-icon {
	position: absolute;
	left: calc(50% + 56px);
	top: 50%;
	transform: translate(-50%, 6px);
	opacity: 0;
	width: 16px;
	height: 16px;
	fill: #25D366;
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}
.whatsapp-btn:hover .wa-icon {
	opacity: 1;
	transform: translate(-50%, -50%);
}
.product_list_actions .buttons {
	width: 100%;
}
.btn_wishlist i {
    color: black;
    border: 2px solid black;
    padding: 8px;
    font-size: 25px;
    border-radius: 50px;
}
.btn_wishlist i:hover{
    color:hsl(42, 99%, 53%);
	 border: 2px solid hsl(42, 99%, 53%) ;
}
.wishlist{
		margin-top:35px;
}
.social_icon img{
	width:40px;
	display:inline-block;
	margin-right:10px;
}
/* product description wrapper start*/
.product_description_wrapper{
	width:100%;
	padding-bottom:20px;
	padding-bottom:20px;
	overflow-x:hidden;
}
.product_decription_button{
	margin-bottom:10px;
}

.para_1{
	font-size:18px;
	color:#9e9999;
	font-weight:400;
	padding:15px;
}
.para_2{
	font-size:18px;
	color:#9e9999;
	font-weight:400;
	padding:15px;
}
.para_3{
	font-size:18px;
	color:#9e9999;
	font-weight:400;
	padding:15px;
}
.tab {
  overflow: hidden;
 /* border: 1px solid #ccc;
  background-color: #f1f1f1;*/
}

/* Style the buttons inside the tab */
.tab button {
  background-color: hsl(42, 99%, 53%);
  float: left;
  border: 1px solid hsl(42, 99%, 53%);
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 18px;
  margin-right:10px;
  color:white;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color:black;
  border:1px solid black ;
  color:white;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color:black;
  color:white;
   border:1px solid black ;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
}
/* product description wrapper end*/
/*enquiry about product start*/
.enquiry_wrapper{
	width:100%;
	padding-top:30px;
	padding-bottom:50px;
}
.enquiry_heading{
	text-align:center;
}
.enquiry_heading h1{
	font-size:40px;
	padding-bottom:50px;
}

.enquiry_column{
	width:100%;
	display:block;
}
.enquiry_col{
	width:24.5%;
	display:inline-block;
	 
}
.enquiry_col_img{
	width:200px;
	object-fit:contain;
	text-align:center;
	margin:0 auto;
	
}

/*.enquiry_hover_img{
	display:none;
	width:200px;
	height:230px;
	text-align:center;
	position: absolute;
    top: 0;
    left: 0;
	box-shadow: 0px 5px #8888881f;
	object-fit:contain;
}
.enquiry_col_img:hover .enquiry_hover_img {
        display: block;
    }*/

.enquiry_img_name{
	text-align:center;
	padding-top:30px;
}
.enquiry_img_name i{
	color:hsl(42, 99%, 53%);
}
.enquiry_img_name h2{
	font-size:22px;
	font-weight:600;
}
.enquiry_img_name p{
	font-size:20px;
	font-weight:600;
	color: hsl(42, 99%, 53%);
}
.enquiry_img_name del{
	text-decoration:line-through;
	color:grey;
	font-size:18px;
}

/*enquiry about product end*/

/*recently about product start*/
.recently_wrapper{
	width:100%;
	padding-top:30px;
	padding-bottom:50px;
}
.recently_heading{
	text-align:center;
}
.recently_heading h1{
	font-size:40px;
	padding-bottom:50px;
}

.recently_column{
	width:100%;
	display:block;
}
.recently_col{
	width:24.5%;
	display:inline-block;
	 
}
.recently_col_img{
	width:200px;
	object-fit:contain;
	text-align:center;
	margin:0 auto;
}
.recently_img_name del {
    text-decoration: line-through;
    color: grey;
	font-size:18px;
}
.recently_img_name{
	text-align:center;
	padding-top:30px;
}
.recently_img_name i{
	color:hsl(42, 99%, 53%);
}
.recently_img_name h2{
	font-size:22px;
	font-weight:600;
}
.recently_img_name p{
	font-size:20px;
	font-weight:600;
	    color: hsl(42, 99%, 53%);
}
/* product inner page end*/

/*product-list inner page start*/
/*banner*/
.product_list_banner_wrapper{
	width:100%;
	display:block;
	background-image:url('../images/NewProject (34).webp');
	height:300px;
	background-repeat:no-repeat;
	position:relative;
	background-size:cover;
}
.product_list_banner_wrapper_overlay{
	background:#0000007d;
	width:100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: repeat;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.product_list_banner_wrapper_inner{
	position:relative;
	z-index:9;
}
.product_list_banner_wrapper_inner h1{
	text-align:center;
	color:#f9fafb;
	font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight:700;
	letter-spacing:-0.03em;
	padding-top:140px;
	position:relative;
	z-index:99;
	text-transform:none;
}
.product_list_banner_wrapper_inner h2{
	text-align:center;
	color:#e5e7eb;
	font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	font-size:14px;
	font-weight:500;
	letter-spacing:0.04em;
	text-transform:uppercase;
	margin-top:10px;
	opacity:0.9;
}
.product_list_banner_wrapper_inner h2 a{
  color: inherit;
  text-decoration: none;
}
.product_list_banner_wrapper_inner h2 a:hover{
  text-decoration: underline;
}
.product_list_wrapper{
	width:100%;
	display:block;
	padding-top:40px;
}

@media (max-width: 768px) {
  .product_list_banner_wrapper{
    height:260px;
  }
  .product_list_banner_wrapper_inner h1{
    font-size: clamp(24px, 6vw, 30px);
    padding-top:120px;
  }
  .product_list_banner_wrapper_inner h2{
    font-size:12px;
    letter-spacing:0.06em;
  }
}
.product_list_inner_wrapper{
	width:100%;
	display:block;
}
/* side bar*/
.product_list_sidebar_column{
	width:24%;
	display:inline-block;
	vertical-align:top;
}
.product_list_inner_sidebar{
   height: 100%;
   width:280px;
  z-index: 1;
  top: 135px;
  overflow-x: hidden;
  padding: 10px 0; 
}
.accordion_bar {
  background-color:#feb710;
  color:white;
  cursor: pointer;
  padding: 13px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-size:20px;
  font-weight:500;
}

.active, .accordion_bar:hover {
  background-color:black ;
  color:white;
}
.panel input{
		margin-right:12px;
}
.accordion_bar:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
  color:white;
  display:none;
}

.product_list_inner_sidebar .panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel h4{
  font-size:20px;
  padding:10px 0px;
  font-weight:600;
}
.product_list_inner_sidebar .panel p{
  padding:10px 0px;
}
.product_list_inner_sidebar .active{
	position:relative;
}

.product_list_inner_sidebar .active::before {
    width: 10px;
    height: 2px;
    background-color: #fff;
    content: "";
    position: absolute;
    right: 15px;
    top: 30px;
}
input[type='checkbox'] {
    accent-color:#feb710;
}

/*side bar end*/
.product_list_column{
	width:100%;
	display:block;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
	background-color:black ;
	color:white;
}

.show {display: block;}
/*sort end*/
.product_list_column{
	width:74%;
	display:inline-block;
}
.product_list_inner_column{
	width:100%;
}

/* Restaurar layout en columnas para las cards de productos */
.product_list_inner_column{
  /* OBLIGATORIO: mantener siempre 2 columnas */
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:20px;
}

.product_list_inner_column .product_list_col{
  width:100%;
  box-sizing:border-box;
}
.product_list_col{
	/* evita espacio vacío excesivo debajo de los botones */
	display:block;
	width:100%;
	padding-bottom:12px;
}
.product_list_image{
  border-radius:12px;
  overflow:hidden;
  background:#f7f7f7;
  padding:10px;
}
.product_list_image >a >img{
	margin:0 auto;
	text-align:center;
	object-fit:contain;
  border-radius:10px;

}
.product_list_detail{
	padding-left:0;
	padding-right:0;
	padding-bottom:8px;
	display:flex;
	flex-direction:column;
	flex-grow:1;
}
.product_list_detail h3{
	font-size:19px;
	font-weight:600;
	padding-top:20px;
}

/* SOLO ajustar imágenes de las dos primeras cards sin tocar el layout */
.product_list_inner_column .product_list_col:nth-child(1) .product_list_image,
.product_list_inner_column .product_list_col:nth-child(2) .product_list_image{
  height:250px;
  overflow:hidden;
}

.product_list_inner_column .product_list_col:nth-child(1) .product_list_image img,
.product_list_inner_column .product_list_col:nth-child(2) .product_list_image img{
  width:100%;
  height:100%;
  object-fit:contain;
}
/* product list header (categorías + contador) */
.product_list_header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:32px;
  margin-bottom:24px;
}
.product_list_categories{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.product_list_category{
  border:none;
  padding:6px 14px;
  border-radius:999px;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  background:#0b1120;
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,0.6);
  cursor:pointer;
  transition:background 0.2s ease-out,color 0.2s ease-out,transform 0.15s ease-out,box-shadow 0.15s ease-out;
}
.product_list_category--active,
.product_list_category:hover{
  background:#f97316;
  border-color:#f97316;
  color:#0b1120;
  box-shadow:0 8px 20px rgba(249,115,22,0.35);
  transform:translateY(-1px);
}
.product_list_count{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:13px;
  color:#9ca3af;
}

/* product cards */
.product_list_col{
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e5e5e5;
  box-shadow:0 4px 12px rgba(0,0,0,0.04);
  transition:all 0.3s ease;
  padding:16px;
  /* Alineación interna consistente (sin tocar el grid) */
  display:flex;
  flex-direction:column;
  height:100%;
}
.product_list_col:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}
.product_list_image img{
  width:100%;
  display:block;
  transition:transform 0.4s ease-out;
}
.product_list_col:hover .product_list_image img{
  transform:scale(1.06);
}
.product_list_actions{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  /* Botones siempre alineados al fondo */
  margin-top:auto;
  justify-content:center;
}
.product_list_btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:10px;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:13px;
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:background 0.18s ease-out,color 0.18s ease-out,box-shadow 0.18s ease-out,transform 0.3s ease-out;
  background:#020617;
  color:#f9fafb;
}
.product_list_btn:hover{
  background:#111827;
  box-shadow:0 10px 25px rgba(15,23,42,0.35);
  transform:scale(1.02);
}
.product_list_btn--whatsapp{
  background:#10b981;
  color:#022c22;
  border-color:#10b981;
}
.product_list_btn--whatsapp:hover{
  background:#059669;
  color:#ecfdf5;
  box-shadow:0 10px 25px rgba(16,185,129,0.45);
}

/* Product description dropdown (product list cards) */
.product-description,
.toggle-description {
  text-align: center;
}

.product-description {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  font-size: 13px;
  color: #444;
  margin-top: 8px;
  padding: 0;
  border-radius: 12px;
  background: #f7f7f7;
}

.product-description.active {
  max-height: 120px;
  padding: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.toggle-description {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f0f0f0;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  border: none;
  margin: 8px auto;
  transition: all 0.3s ease;
}

.toggle-description:hover {
  background: #e0e0e0;
  transform: scale(1.05);
}

.toggle-description::before {
  content: "▼";
  transition: transform 0.3s ease;
}

.toggle-description.active::before {
  transform: rotate(180deg);
}

.toggle-description.active::before {
  color: #25D366; /* verde tipo WhatsApp */
}

@media (max-width: 768px){
  .product_list_header{
    flex-direction:column;
    align-items:flex-start;
  }
}
.product_list_price del{
	font-size:19px;
	font-weight:700;
	color:black;
	text-decoration:line-through;
}
.product_list_price{
	color:#feb710;
	font-size:25px;
	font-weight:600;
}
/*pagination*/
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto 40px;
  gap: 10px;
  width: 100%;
}

.pagination a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.pagination a.actived,
.pagination a.active {
  background-color: #feb710;
  color: white;
  border-color: #feb710;
}

.pagination a:hover:not(.actived):not(.active) {
  background-color: #feb710;
  color: white;
}

/* Desactivar delay visual en elementos de la parte inferior (se muestran instantáneamente) */
.pagination,
.footer,
#main_social_midia_icon,
.main_social_icon,
.social-icons {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

#main_social_midia_icon {
  max-width: 100vw;
  overflow-x: hidden;
}

.main-content-wrapper [data-aos] {
  max-width: 100%;
}

/* discover wrapper start*/
.discover_wrapper{
	width:100%;
	display:block;
	padding:60px 0px;
}
.discover_heading{
	text-align:center;
	padding-bottom:30px;
	font-size:25px;
}
.discover_inner_wrapper{
	width:100%;
	display:block;
}
.discover_col{
	width:49%;
	display:inline-block;
}
.discover_image{
	
}
.discover_image img{
	
	object-fit:cover;
	text-align:center;
	margin: 0 auto;
}
.discover-detail{
	text-align:center;
}
.discover-detail h3{
	
	font-size:20px;
	font-weight:500;
	margin-bottom: 30px;
    margin-top: 20px;
}
.follow-btn{
	border:1px solid #feb710;
	padding:12px 18px;
	background-color:#feb710;
	color:white;
	font-size:18px;
	font-weight:500;
}
.follow-btn:hover{
	border:1px solid black;
	background-color:black;
	color:white;
}
.readmore_btn{
	border:1px solid #feb710;
	padding:12px 18px;
	background-color:#feb710;
	color:white;
	font-size:18px;
	font-weight:500;
}
.readmore_btn:hover{
	border:1px solid black;
	background-color:black;
	color:white;
}

/* discover wrapper end*/
/*product-list inner page end*/


/*return policy inner page start*/
/*banner*/
.return_banner_wrapper{
	width:100%;
	display:block;
	background-image:url('../images/New Project-1.webp');
	height:300px;
	background-repeat:no-repeat;
	position:relative;
	background-size:cover;
	overflow-x:hidden;
}
.return_banner_wrapper_overlay{
	background:#0000007d;
	width:100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: repeat;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.return_banner_inner_wrapper{
	position:relative;
	z-index:99;
}
.return_banner_inner_wrapper h1{
	text-align:center;
	color:white;
	font-size:45px;
	font-weight:500;
	padding-top:140px;
	position:relative;
	z-index:99;
	text-transform:uppercase;
	
}
.return_banner_inner_wrapper h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
}
/* return wrapper start*/

.return_wrapper{
	width:100%;
	display:block;
	padding-top:50px;
	padding-bottom:50px;
	overflow-x:hidden;
	
}
.return_inner_wrapper h1{
	font-size:40px;
	text-align:center;
	padding-bottom:30px;
}
.return_detail{
	font-size:20px;
	text-align:center;
}
.return_inner_wrapper h2{
	font-size:25px;
	font-weight:500;
	padding-bottom:20px;
	text-transform:uppercase;
}
.return_inner_wrapper p{
	font-size:18px;
	padding-bottom:20px;
}
/*return policy inner page end*/

/*terms inner page start*/
.terms_banner_wrapper{
	width:100%;
	background-image:url('../images/New Project (35).webp');
	height:300px;
	background-repeat:no-repeat;
	background-size:cover;
	position:relative;
	overflow-x:hidden;
}
.terms_banner_wrapper_overlay{
	background:#0000007d;
	width:100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: repeat;
	position: absolute;
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.inner_terms_banner_wrapper h1{
	text-align:center;
	color:white;
	font-size:40px;
	font-weight:500;
	padding-top:140px;
	position:relative;
	z-index:99;
	text-transform:uppercase;
	
}
.inner_terms_banner_wrapper h2{
	text-align:center;
	color:white;
	font-size:25px;
	font-weight:400;
}
.inner_terms_banner_wrapper{
	position:relative;
	z-index:99;
	
}
.terms_services_wrapper{
	width:100%;
	padding:50px 0px;
	overflow-x:hidden;
}
.inner_terms_services h1{
	font-size:40px;
	text-align:center;
}
.terms_services_detail{
	width:100%;
}
.terms_services_detail h2{
	font-size:25px;
	padding-bottom:20px;
	font-weight:500;
	text-transform:uppercase;
}
.terms_services_detail p{
	font-size:18px;
	padding-bottom:15px;

}
/*terms inner page end*/

.preloader{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loader {
  width: auto;
  height: auto;
}


/* login start*/

.login-page-wrapper {
    width: 100%;
    background-image: url("../images/workplace-business-modern.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 80px;
}

.login-page-wrapper .login-page {
    width: 100%;
    padding: 70px 10px;
    display: block;
    box-sizing: border-box;
    max-width: 1350px;
    margin: 0 auto;
}

.login-page-wrapper .login-page .login-text {
    max-width: 47%;
    width: 100%;
    display: inline-block;
    margin-top: 30px;
}

.login-page-wrapper .login-page .login-text h1 {
    margin: 10px 10px;
    color: hsl(42, 99%, 53%);
    font-size: 60px;
    font-weight: 600;
}

.login-page-wrapper .login-page .login-text p {
    color: #fff;
    font-size: 42px;
    padding: 10px 0px;
    font-weight: 600;
    margin-left: 45px;
    position: relative;
}
.login-page-wrapper  svg.svg_icon {
    position: absolute;
    left: -34px;
}

.login-page-wrapper .login-page .login-text p span{
    color: #fff;
    font-size: 18px;
    margin: 10px 10px;
}

.login-page-wrapper .login-page .login-text p svg{
    fill: #fff;
    width: 25px;
    height: 60px
}

.login-page-wrapper .login-page .login-text p svg.end-quote{
    fill: #fff;
    width: 25px;
    height: 30px
}

.login-page-wrapper .login-page .login-text span{
    color: #fff;
    font-size: 18px;
    margin: 10px 10px;
}

.login-page-wrapper .login-page .login-form {
    max-width: 49%;
    width: 100%;
    margin: 10px 10px;
    display: inline-block;
    background-color: #fff;
    padding: 30px 50px;
    box-sizing: border-box;
    border-radius: 5px;
    vertical-align: top;
}

.login-page-wrapper .login-page .login-form .form-head {
    padding-bottom: 20px;
    text-align: center;
}

.login-page-wrapper .login-page .login-form h1 {
    font-size: 30px;
    text-align: center;
    padding-bottom: 10px;
    font-weight: 600;
}

.login-page-wrapper .login-page .login-form .form-field{
    width: 100%;
}

.login-page-wrapper .login-page .login-form .form-field div {
    width: 100%;
    padding: 10px 0px;
    box-sizing: border-box;
}

.login-page-wrapper .login-page .login-form .form-field input {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #c8c0c0;
    background-color: #f9f9f9;
    outline: 1px solid transparent;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.login-page-wrapper .login-page .login-form .form-field input::placeholder{
    font-size: 16px;
}

.login-page-wrapper .login-page .login-form .form-field .password{
    width: 100%;
    position: relative;
}

.login-page-wrapper .login-page .login-form .form-field .password svg {
    position: absolute;
    right: 22px;
    top: 27px;
    fill: #736a6a;
    cursor: pointer;
}

.login-page-wrapper .login-page .login-form .form-field .password svg.show{
    display: none;
}

.login-page-wrapper .login-page .login-form .form-forgot{
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.login-page-wrapper .login-page .login-form .form-forgot a{
    text-decoration: none;
    color: #3384ee;
}

.login-page-wrapper .login-page .login-form .form-login-btn{
    width: 100%;
    margin-top: 50px;
}
.login-page-wrapper .login-page .login-form .form-login-btn a {
    width: 100%;
    display: block;
    text-align: center;
    color: #000;
    text-decoration: none;
    background-color: #feb710;
    padding: 12px 0px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 23px;
    border: 1px solid #feb710;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.login-page-wrapper .login-page .login-form .form-login-btn a:hover {
    background: #fff;
    border: 1px solid #000;
}

.login-page-wrapper .login-page .login-form .form-login{
    width: 100%;
    text-align: center;
    padding: 20px 0px;
}

.login-page-wrapper .login-page .login-form .form-login a{
    text-decoration: none;
    color: #3384ee;
    font-weight: 500;
}

/* login end */

/* signup start */


.signup-page-wrapper {
    width: 100%;
    background-image: url("../images/gadgets-office.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 80px;
}
.signup-page-wrapper .signup-page {
    width: 100%;
    padding: 70px 10px;
    display: block;
    box-sizing: border-box;
    max-width: 1350px;
    margin: 0 auto;
}

.signup-page-wrapper .signup-page .signup-text {
    max-width: 47%;
    width: 100%;
    display: inline-block;
    margin-top: 100px;
}

.signup-page-wrapper .signup-page .signup-text h1 {
    margin: 10px 10px;
    color: #feb710;
    font-size: 70px;
    font-weight: 600;
}
.signup-page-wrapper .signup-page .signup-text p {
    color: #fff;
    font-size: 50px;
    margin: 10px 0px;
    font-weight: 600;
    position: relative;
    padding-left: 40px;
}
.signup-page-wrapper svg.signup_svg {
    position: absolute;
    left: 7px;
}
.signup-page-wrapper .signup-page .signup-text p svg{
    fill: #fff;
    width: 25px;
    height: 60px
}

.signup-page-wrapper .signup-page .signup-text span{
    color: #fff;
    font-size: 18px;
    margin: 10px 10px;
}

.signup-page-wrapper .signup-page .signup-form{
    max-width: 49%;
    width: 100%;
    margin: 10px 10px;
    display: inline-block;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    vertical-align: top;
}

.signup-page-wrapper .signup-page .signup-form h1 {
    font-size: 30px;
    text-align: center;
    padding-bottom: 20px;
    font-weight: 600;
    text-transform: capitalize;
}

.signup-page-wrapper .signup-page .signup-form .form-field{
    width: 100%;
}

.signup-page-wrapper .signup-page .signup-form .form-field div {
    width: 100%;
    padding: 5px 0px;
    box-sizing: border-box;
}

.signup-page-wrapper .signup-page .signup-form .form-field input {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #c8c0c0;
    background-color: #f9f9f9;
    outline: 1px solid transparent;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.signup-page-wrapper .signup-page .signup-form .form-field input::placeholder{
    font-size: 16px;
}

.signup-page-wrapper .signup-page .signup-form .form-field .name{
    width: 100%;
    display: block;
}

.signup-page-wrapper .signup-page .signup-form .form-field .name .first-name{
    width: 50%;
    display: inline-block;
}

.signup-page-wrapper .signup-page .signup-form .form-field .name .last-name {
    width: 49%;
    display: inline-block;
}

.signup-page-wrapper .signup-page .signup-form .form-field .gender-dob{
    width: 100%;
    display: block;
}

.signup-page-wrapper .signup-page .signup-form .form-field .gender-dob .gender{
    width: 50%;
    display: inline-block;
}

.signup-page-wrapper .signup-page .signup-form .form-field .gender-dob .gender select {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #c8c0c0;
    background-color: #f9f9f9;
    outline: 1px solid transparent;
    font-size: 16px;
    color: #747171;
}

.signup-page-wrapper .signup-page .signup-form .form-field .gender-dob .gender select option{
    border-radius: 5px;

}

.signup-page-wrapper .signup-page .signup-form .form-field .gender-dob .dob {
    width: 49%;
    display: inline-block;
    position: relative;
}

.signup-page-wrapper .signup-page .signup-form .form-field .gender-dob .dob label{
    font-size: 12px;
    color: #736a6a;
    position: absolute;
    left: 20px;
    top: 10px;
}


.signup-page-wrapper .signup-page .signup-form .form-field .gender-dob .dob input[type="date"] {
    color: #736a6a;
    font-size: 16px;
    padding: 19px 20px;
}  

.signup-page-wrapper .signup-page .signup-form .form-field .password{
    width: 100%;
    position: relative;
}

.signup-page-wrapper .signup-page .signup-form .form-field .password svg {
    position: absolute;
    right: 23px;
    top: 22px;
    fill: #736a6a;
    cursor: pointer;
}

.signup-page-wrapper .signup-page .signup-form .form-field .password svg.show{
    display: none;
}

.signup-page-wrapper .signup-page .signup-form .form-field .strength{
    width: 100%;
}

.signup-page-wrapper .signup-page .signup-form .form-field .strength ul{
    display: flex;
}

.signup-page-wrapper .signup-page .signup-form .form-field .strength ul li {
    list-style: none;
    width: 13%;
    font-size: 14px;
    margin-left: 5px;
    color: #999999;
    text-align: center;
}

.signup-page-wrapper .signup-page .signup-form .form-field .strength ul li.blank {
    width: 28%;
    height: 3px;
    background-color: #8f8f8f;
    position: relative;
    top: 7px;
    border-radius: 5px;
}

.signup-page-wrapper .signup-page .signup-form .form-field .iagree{
    width: 100%;
}

.signup-page-wrapper .signup-page .signup-form .form-field .iagree label{
    float: left;
}

.signup-page-wrapper .signup-page .signup-form .form-field .iagree p {
    margin-left: 20px;
    font-size: 14px;
    color: #747171;
}

.signup-page-wrapper .signup-page .signup-form .form-signup-btn{
    width: 100%;
    margin-top: 50px;
}
.signup-page-wrapper .signup-page .signup-form .form-signup-btn a {
    width: 100%;
    display: block;
    text-align: center;
    color: #000;
    text-decoration: none;
    background-color: #feb710;
    padding: 12px 0px;
    border-radius: 25px;
    font-size: 23px;
    font-weight: 600;
    border: 1px solid #feb710;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.signup-page-wrapper .signup-page .signup-form .form-signup-btn a:hover {
    background: #fff;
    border: 1px solid #000;
}

.signup-page-wrapper .signup-page .signup-form .form-signin{
    width: 100%;
    text-align: center;
    padding: 20px 0px;
}

.signup-page-wrapper .signup-page .signup-form .form-signin p{
    color: #736a6a;
}

.signup-page-wrapper .signup-page .signup-form .form-signin a{
    text-decoration: none;
    color: #3384ee;
    font-weight: 500;
}

.signup-page-wrapper .signup-page .signup-form .form-privacy{
    width: 100%;
    padding: 10px 0px;
}

.signup-page-wrapper .signup-page .signup-form .form-privacy p{
    color: #736a6a;
    font-size: 14px;
}

.signup-page-wrapper .signup-page .signup-form .form-privacy a{
    text-decoration: none;
    color: #3384ee;
}

/* signup end */
/* blog-inner-page start */

.inner_blog_wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
	
}

.inner_blog_wrapper .banner_blog {
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../images/modern.jpg');
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}
.inner_blog_wrapper .banner_heading {
    
    color: #fff;
}
.inner_blog_wrapper .banner_heading h1 {
    font-weight: 500;
    font-size: 40px;
    text-align: center;
}
.inner_blog_wrapper .blog_post_container {
    width: 100%;
    margin: 0 auto;
    max-width: 1300px;
    padding: 80px 0px;
}
.inner_blog_wrapper .blog_post_outer {
    width: 100%;
    display: block;
}

.inner_blog_wrapper .blog_left_box {
    display: inline-block;
    width: 67%;
    vertical-align: top;
}
.inner_blog_wrapper .blog_right_box {
    width: 29%;
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
}
.inner_blog_wrapper .blog_left_box img {
    width: 100%;
    max-width: 840px;
    margin-bottom: 18px;
}
.inner_blog_wrapper .blog_right_box img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}
.inner_blog_wrapper .blog_left_box p {
    color: #7A7A7A;
    line-height: 26px;
    margin: 0;
    padding-bottom: 15px;
}
.inner_blog_wrapper .blog_left_box h1 {
    color: #8d8a8ac7;
    font-size: 40px;
    font-weight: 500;
    margin: 0;
    padding: 15px 0px;
}
.inner_blog_wrapper textarea#comment {
    box-shadow: 0px 5px 50px rgb(0 0 0 / 10%);
    border: none;
    width: 100%;
    height: 200px;
    margin: 10px 0px;
}
.inner_blog_wrapper .blog_left_box input {
    width: 100%;
    padding: 12px 0px;
    border-radius: 4px;
    border: 1px solid black !important;
}
.inner_blog_wrapper p.comment-form {
    padding-bottom: 0px !important;
}
.inner_blog_wrapper input#wp-comment-cookies-consent {
    max-width: 20px;
    margin: 0;
}
.inner_blog_wrapper input#submit {
    max-width: 180px;
    padding: 18px 0px;
    color: #FFf;
    background-color: #feb710;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    border-color: #feb710 !important;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.inner_blog_wrapper form.elementor-search-form svg {
    max-width: 20px;
}
.inner_blog_wrapper form.list_search button {
    width: 15%;
    background-color: #feb710;
    border: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    display: inline-block;
    margin-left: -4px;
    height: 46px;
    vertical-align: top;
}
.inner_blog_wrapper form.list_search button svg {
    width: 20px;
    height: 20px;
    margin-top: 8px;
    fill: white;
}
.inner_blog_wrapper form.list_search input {
    width: 75%;
    padding: 15px;
    vertical-align: text-bottom;
    background-color: #edeff6;
    border: none;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    display: inline-block;
    vertical-align: top;
}
.inner_blog_wrapper .elementor-widget-container {
    border: 1px solid #feb710;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 20px;
}
.inner_blog_wrapper .elementor-widget-container h2 {
    margin: 0;
    padding-bottom: 20px;
}
.inner_blog_wrapper .recent_Posts_left img {
    border-radius: 5px;
}
.inner_blog_wrapper .recent_Posts {
    width: 100%;
    display: block;
}
.inner_blog_wrapper .recent_Posts_left {
    width: 39%;
    display: inline-block;
}

.inner_blog_wrapper  .recent_Posts_right {
    display: inline-block;
    vertical-align: top;
    width: 54%;
    margin-left: 18px;
}
.inner_blog_wrapper .recent_Posts_right h6 {
    font-size: 18px;
    margin: 0;
    font-weight: 400;
}
.inner_blog_wrapper .recent_Posts.organic_post {
    margin: 25px 0px;
}
.inner_blog_wrapper .recent_Posts_right a {
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    text-decoration: none;
    color: #feb710;
}
.inner_blog_wrapper .share_box {
    width: 100%;
    display: block;
}
.inner_blog_wrapper .share_icon {
    width: 40px;
    padding: 8px 0px;
    display: inline-block;
    background-color: #feb710;
    text-align: center;
    margin-right: 7px;
}

.inner_blog_wrapper .share_icon svg {
    max-width: 12px;
    fill: #fff;
}
.ps5-overlay img{
	width:auto !important;
	max-width:none !important;
}

/* blog-inner-page end */

/* ===== BOTÓN FLOTANTE WHATSAPP ===== */
.wa-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #10b981;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}
.wa-float:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(16, 185, 129, 0.55);
}
.wa-float:focus {
  outline: 2px solid #10b981;
  outline-offset: 3px;
}
.wa-float__icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wa-float__icon svg {
  width: 28px;
  height: 28px;
}
.wa-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #10b981;
  opacity: 0.4;
  animation: wa-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 480px) {
  .wa-float {
    width: 52px;
    height: 52px;
    bottom: 20px;
    right: 20px;
  }
  .wa-float__icon svg { width: 26px; height: 26px; }
}

/* ===== TOOLTIP BOTÓN WHATSAPP ===== */
.wa-float-wrapper {
  position: fixed;
  bottom: 24px;
  right: 20px;
  left: auto;
  z-index: 99999;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0;
  overflow: visible;
  max-width: calc(100vw - 20px);
}

/* Optional floating social widget class: keep anchored to the right */
.main_social_midia_icon {
  position: fixed;
  right: 20px;
  left: auto;
  max-width: calc(100vw - 20px);
}
.wa-float-wrapper .wa-float {
  position: relative;
  bottom: auto;
  right: auto;
  flex-shrink: 0;
}
.wa-float-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateX(10px) translateY(-50%);
  white-space: nowrap;
  padding: 10px 16px;

  /* Tooltip tech/premium style (ya no burbuja WhatsApp) */
  background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.35), transparent 55%),
              linear-gradient(135deg, #020617 0%, #020617 40%, #020617 100%);
  color: #e5e7eb;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(14px);

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease-out, transform 0.28s ease-out, visibility 0.28s ease-out;
  pointer-events: none;
  z-index: 99998;
}
.wa-float-tooltip.visible,
.wa-float-tooltip[data-visible="true"] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) translateY(-50%) !important;
  pointer-events: auto !important;
}
.wa-float-tooltip::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #0d9668;
  border-radius: 2px;
  pointer-events: none;
}
.wa-float-wrapper:hover .wa-float-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) translateY(-50%);
  pointer-events: auto;
}
@media (max-width: 480px) {
  .wa-float-wrapper {
    bottom: 20px;
    right: 20px;
  }
  .wa-float-tooltip {
    right: 50%;
    left: auto;
    top: auto;
    bottom: calc(100% + 10px);
    transform: translateX(50%) translateY(8px);
    padding: 8px 12px;
    font-size: 13px;
    white-space: normal;
    max-width: 220px;
    text-align: center;
  }
  .wa-float-tooltip.visible,
  .wa-float-tooltip[data-visible="true"] {
    transform: translateX(50%) translateY(0) !important;
  }
  .wa-float-wrapper:hover .wa-float-tooltip {
    transform: translateX(50%) translateY(0);
  }
  .wa-float-tooltip::after {
    right: 50%;
    top: 100%;
    bottom: auto;
    transform: translateX(50%) translateY(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
  }
}