.elementor-5213 .elementor-element.elementor-element-19b3b1c{--display:flex;--min-height:800px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5213 .elementor-element.elementor-element-19b3b1c:not(.elementor-motion-effects-element-type-background), .elementor-5213 .elementor-element.elementor-element-19b3b1c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/close-up-of-woman-sprinkling-pie-with-powdered-sug-2026-01-11-10-48-40-utc-scaled.jpg");background-position:center center;background-size:cover;}.elementor-5213 .elementor-element.elementor-element-bdf2755{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-5213 .elementor-element.elementor-element-547c2e6{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-5213 .elementor-element.elementor-element-d44467e{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5213 .elementor-element.elementor-element-8a1bb71{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5213 .elementor-element.elementor-element-039bfd8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5213 .elementor-element.elementor-element-2a52ff0{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5213 .elementor-element.elementor-element-2939181{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5213 .elementor-element.elementor-element-830d53a{--display:flex;}.elementor-5213 .elementor-element.elementor-element-5a328b5{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5213 .elementor-element.elementor-element-3f12c6f{--display:flex;}.elementor-5213 .elementor-element.elementor-element-5d1e6e8{--display:flex;}.elementor-5213 .elementor-element.elementor-element-4be3252{--display:flex;}.elementor-5213 .elementor-element.elementor-element-12f1206{--display:flex;}.elementor-5213 .elementor-element.elementor-element-0a173fa{--display:flex;}.elementor-5213 .elementor-element.elementor-element-ccc6d0b{--display:flex;--min-height:800px;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5213 .elementor-element.elementor-element-ccc6d0b:not(.elementor-motion-effects-element-type-background), .elementor-5213 .elementor-element.elementor-element-ccc6d0b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/cooking-book.png");background-position:center center;background-size:cover;}.elementor-5213 .elementor-element.elementor-element-4be67e5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5213 .elementor-element.elementor-element-e43df04{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-5213 .elementor-element.elementor-element-8e5d084{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5213 .elementor-element.elementor-element-22d35d2{--display:flex;}.elementor-5213 .elementor-element.elementor-element-3971f0a{--display:flex;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-5213 .elementor-element.elementor-element-47a350c{--grid-columns:3;}.elementor-5213 .elementor-element.elementor-element-5920322{--display:flex;}body:not(.rtl) .elementor-5213 .elementor-element.elementor-element-99fdde0{left:1541px;}body.rtl .elementor-5213 .elementor-element.elementor-element-99fdde0{right:1541px;}.elementor-5213 .elementor-element.elementor-element-99fdde0{top:-3200px;z-index:10;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-5213 .elementor-element.elementor-element-47a350c{--grid-columns:2;}}@media(max-width:767px){.elementor-5213 .elementor-element.elementor-element-19b3b1c{--min-height:558px;}.elementor-5213 .elementor-element.elementor-element-ccc6d0b{--min-height:558px;}.elementor-5213 .elementor-element.elementor-element-47a350c{--grid-columns:1;}}@media(min-width:1025px){.elementor-5213 .elementor-element.elementor-element-19b3b1c:not(.elementor-motion-effects-element-type-background), .elementor-5213 .elementor-element.elementor-element-19b3b1c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}.elementor-5213 .elementor-element.elementor-element-ccc6d0b:not(.elementor-motion-effects-element-type-background), .elementor-5213 .elementor-element.elementor-element-ccc6d0b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for container, class: .elementor-element-19b3b1c *//* =========================================
   SUGARTIA — HERO TOP SUGAR DIVIDER
   ========================================= */

/* Parent image section */
.sg-b2c-image-container {
  position: relative !important;
  overflow: hidden !important;
}

/* Sugar trail mask/anchor */
.sg-hero-top-sugar-divider {
  --sg-trail-box-height: clamp(210px, 16vw, 330px);
  --sg-trail-img-bottom: clamp(-310px, -15vw, -185px);

  position: absolute !important;

  left: 50% !important;
  bottom: 90px !important;

  z-index: 30 !important;

  width: 100vw !important;
  max-width: none !important;

  height: var(--sg-trail-box-height) !important;
  min-height: 0 !important;
  max-height: none !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  pointer-events: none !important;

  display: block !important;
}

/* Elementor inner wrapper */
.sg-hero-top-sugar-divider > .e-con-inner {
  position: relative !important;

  width: 100vw !important;
  max-width: none !important;

  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  display: block !important;
}

/* Image widget */
.sg-hero-top-sugar-divider .sg-sugar-divider-img,
.sg-hero-top-sugar-divider .sg-sugar-divider-img .elementor-widget-container {
  position: absolute !important;

  left: 50% !important;
  bottom: var(--sg-trail-img-bottom) !important;

  width: 100vw !important;
  max-width: none !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;

  display: block !important;
}

/* Actual sugar trail image */
.sg-hero-top-sugar-divider .sg-sugar-divider-img img {
  display: block !important;

  width: 100vw !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: bottom center !important;

  pointer-events: none !important;
}

/* Large desktop */
@media (min-width: 1600px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(230px, 15vw, 360px);
    --sg-trail-img-bottom: clamp(-350px, -15vw, -230px);
  }
}

/* Very large desktop */
@media (min-width: 1920px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(240px, 14vw, 380px);
    --sg-trail-img-bottom: clamp(-390px, -15vw, -260px);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(170px, 24vw, 280px);
    --sg-trail-img-bottom: clamp(-230px, -20vw, -150px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(120px, 36vw, 210px);
    --sg-trail-img-bottom: clamp(-135px, -28vw, -82px);
  }
}

/* Small mobile */
@media (max-width: 390px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(112px, 34vw, 190px);
    --sg-trail-img-bottom: clamp(-118px, -26vw, -76px);
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d44467e *//* =========================================
   SUGARTIA — ΓΙΑ ΤΟ ΣΠΙΤΙ HERO / B2C GATEWAY
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-d44467e {
  --sg-blue: #081f5f;
  --sg-deep: #0C1B42;
  --sg-pink: #9E236D;

  --sg-icon-donut: url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Donut.webp");
  --sg-icon-cake: url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Cake-Slice-Cherries.webp");
  --sg-icon-cookie: url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Cookie-1.webp");

  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow-x: clip;

  width: 100%;
  max-width: 100%;
  min-height: 760px;

  padding: clamp(122px, 9vw, 152px) 7vw clamp(112px, 8vw, 140px);

  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  justify-content: center;
  column-gap: clamp(42px, 5.5vw, 82px);
  row-gap: 42px;
/*
  background:
    radial-gradient(circle at 12% 24%, rgba(158,35,109,0.22), transparent 32%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,0.92), transparent 40%),
    radial-gradient(circle at 78% 82%, rgba(8,31,95,0.07), transparent 36%),
    linear-gradient(135deg, #fbf6ed 0%, #fff8f2 44%, #fffafd 100%);
    */
}

.elementor-5213 .elementor-element.elementor-element-d44467e,
.elementor-5213 .elementor-element.elementor-element-d44467e * {
  box-sizing: border-box;
}

/* Texture + navbar readability overlay */
/*.elementor-5213 .elementor-element.elementor-element-d44467e::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      180deg,
      rgba(7,21,61,0.70) 0%,
      rgba(7,21,61,0.19) 76px,
      rgba(7,21,61,0.07) 136px,
      rgba(7,21,61,0) 210px
    ),
    linear-gradient(rgba(8,31,95,0.046) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,31,95,0.046) 1px, transparent 1px),
    radial-gradient(circle, rgba(158,35,109,0.13) 1px, transparent 2px),
    radial-gradient(circle, rgba(8,31,95,0.075) 1px, transparent 2px);

  background-size:
    100% 100%,
    74px 74px,
    74px 74px,
    30px 30px,
    44px 44px;

  background-position:
    0 0,
    0 0,
    0 0,
    12px 16px,
    26px 22px;
}

.elementor-5213 .elementor-element.elementor-element-d44467e::after {
  content: none;
  display: none;
}

.elementor-5213 .elementor-element.elementor-element-d44467e > * {
  position: relative;
  z-index: 2;
}
*/
/* =========================================
   LAYOUT
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-content {
  position: relative;
  z-index: 8;

  width: 100%;
  max-width: 610px;
  min-width: 0;

  flex: none;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-visual {
  position: relative;

  width: 100%;
  max-width: 780px;
  min-width: 0;

  flex: none;
  overflow: visible;
}

/* =========================================
   DECORATIVE ICONS ALREADY INJECTED THROUGH CSS
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy::before {
  content: "";
  position: absolute;
  right: 26px;
  top: -54px;
  z-index: -1;

  width: clamp(58px, 5vw, 82px);
  aspect-ratio: 1 / 1;

  background-image: var(--sg-icon-donut);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  opacity: 0.62;
  transform: rotate(-12deg);

  animation: sgHomeB2CFloatA 7s ease-in-out infinite alternate;
  pointer-events: none;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -76px;
  z-index: -1;

  width: clamp(52px, 4.5vw, 74px);
  aspect-ratio: 1 / 1;

  background-image: var(--sg-icon-cookie);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  opacity: 0.52;
  transform: rotate(14deg);

  animation: sgHomeB2CFloatB 8s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Do not use pseudo-icons on the visual frame; it belongs to the filmstrip */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-visual::before,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-visual::after {
  content: none;
  display: none;
}

/* =========================================
   TEXT
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-eyebrow,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-eyebrow .elementor-heading-title {
  color: var(--sg-pink) !important;

  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  margin-bottom: 20px;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-title,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-title *,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-title .elementor-heading-title {
  color: var(--sg-blue) !important;

  font-size: clamp(48px, 4.9vw, 82px);
  line-height: 0.96;
  letter-spacing: -0.06em;
  font-weight: 850;

  max-width: 720px;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-text,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-text *,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-text p {
  color: rgba(8,31,95,0.70) !important;

  font-size: 18.5px;
  line-height: 1.75;

  max-width: 630px;
  margin-top: 26px;
}

/* =========================================
   BUTTONS
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;

  margin-top: 36px;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;
  border-radius: 999px;
  padding: 16px 29px;

  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.045em;
  text-transform: uppercase;

  transition:
    color 0.34s ease,
    border-color 0.34s ease,
    background-color 0.34s ease,
    transform 0.34s cubic-bezier(.22,1,.36,1),
    box-shadow 0.34s cubic-bezier(.22,1,.36,1);
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button {
  background: var(--sg-blue);
  color: #ffffff;
  border: 1px solid var(--sg-blue);

  box-shadow:
    0 16px 38px rgba(8,31,95,0.22),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button {
  background: rgba(255,255,255,0.72);
  color: var(--sg-blue);
  border: 1px solid rgba(8,31,95,0.18);

  box-shadow:
    0 12px 26px rgba(8,31,95,0.06),
    inset 0 1px 0 rgba(255,255,255,0.86);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button::before,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  z-index: -1;

  width: 10px;
  height: 10px;
  border-radius: 999px;

  transform: translateY(-50%) scale(0);
  transform-origin: center;

  transition:
    transform 0.46s cubic-bezier(.22,1,.36,1),
    right 0.46s cubic-bezier(.22,1,.36,1);
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button::before {
  background: var(--sg-pink);
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button::before {
  background: var(--sg-blue);
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button::after,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button::after {
  content: "→";
  position: relative;
  z-index: 2;

  display: inline-block;

  opacity: 0;
  width: 0;
  margin-left: 0;

  transform: translateX(-6px);

  transition:
    opacity 0.28s ease,
    width 0.34s cubic-bezier(.22,1,.36,1),
    margin-left 0.34s cubic-bezier(.22,1,.36,1),
    transform 0.34s cubic-bezier(.22,1,.36,1);
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button:hover,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button:hover {
  transform: translateY(-3px);
  color: #ffffff;
  border-color: transparent;

  box-shadow:
    0 18px 42px rgba(8,31,95,0.18),
    0 10px 24px rgba(158,35,109,0.08);
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button:hover::before,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button:hover::before {
  transform: translateY(-50%) scale(35);
  right: 50%;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button:hover::after,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button:hover::after {
  opacity: 1;
  width: 16px;
  margin-left: 9px;
  transform: translateX(0);
}

/* =========================================
   RIGHT VISUAL FRAME / MASK
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage {
  position: relative !important;
  z-index: 4;

  overflow: hidden !important;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  min-height: clamp(430px, 42vw, 620px);

  border-radius: clamp(30px, 2.7vw, 46px);

  background:
    radial-gradient(circle at 18% 14%, rgba(158,35,109,0.28), transparent 34%),
    radial-gradient(circle at 82% 80%, rgba(255,255,255,0.10), transparent 36%),
    linear-gradient(
      135deg,
      #081f5f 0%,
      #0C1B42 50%,
      #061434 100%
    );

  box-shadow:
    0 34px 90px rgba(8,31,95,0.24),
    inset 0 1px 0 rgba(255,255,255,0.10);

  cursor: grab;
  touch-action: pan-y !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual.is-dragging,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage.is-dragging {
  cursor: grabbing;
}

/* Hide old 3D model if it still exists, without hiding the drag indicator HTML widget */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage model-viewer,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual model-viewer {
  display: none !important;
}

/* Keep the indicator HTML widget visible even inside the visual frame */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual .elementor-widget-html.sg-b2c-scroll-widget,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage .elementor-widget-html.sg-b2c-scroll-widget {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Make inner wrappers clip the reel */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual > .e-con-inner,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual .elementor-widget-wrap,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage > .e-con-inner,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage .elementor-widget-wrap {
  overflow: hidden !important;
}

/* Soft shine inside the navy frame */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual::before,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.16) 0%,
      rgba(255,255,255,0.03) 36%,
      rgba(158,35,109,0.14) 100%
    );
}

/* Inner vignette */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual::after,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(8,31,95,0.65) 0%,
      transparent 14%,
      transparent 86%,
      rgba(8,31,95,0.65) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6,20,52,0.36) 0%,
      transparent 24%,
      transparent 78%,
      rgba(6,20,52,0.46) 100%
    );
}

/* =========================================
   FILMSTRIP REEL
   The script updates:
   --sg-reel-x
   --sg-reel-y
   ========================================= */

/* Moving track: no background, no dots, no rotation */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-track {
  --sg-reel-x: 0px;
  --sg-reel-y: 0px;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 20 !important;

  width: max-content !important;
  max-width: none !important;
  height: auto !important;

  display: block !important;

  padding: 0 !important;
  margin: 0 !important;

  background: none !important;
  border: 0 !important;
  box-shadow: none !important;

  transform:
    translate3d(
      calc(-50% + var(--sg-reel-x)),
      calc(-50% + var(--sg-reel-y)),
      0
    ) !important;

  transition: none !important;

  pointer-events: auto !important;
  will-change: transform !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-track::before,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-track::after {
  content: none !important;
  display: none !important;
}

/* Visual rail: the only visible filmstrip */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail {
  --sg-filmstrip-angle: -7deg;

  position: relative !important;

  width: max-content !important;
  max-width: none !important;
  height: auto !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: clamp(22px, 2.4vw, 42px) !important;

  padding: clamp(18px, 2vw, 28px) clamp(22px, 2.6vw, 42px) !important;

  border-radius: clamp(28px, 2.4vw, 42px) !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.10) 0%,
      rgba(255,255,255,0.05) 38%,
      rgba(158,35,109,0.16) 100%
    ),
    linear-gradient(
      135deg,
      #081f5f 0%,
      #0C1B42 52%,
      #061434 100%
    ) !important;

  border: 1px solid rgba(255,255,255,0.12) !important;

  box-shadow:
    0 28px 70px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.18) !important;

  transform: rotate(var(--sg-filmstrip-angle)) !important;
  transform-origin: center center !important;

  overflow: visible !important;
}

/* Elementor inner wrapper inside rail */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail > .e-con-inner {
  width: max-content !important;
  max-width: none !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: clamp(22px, 2.4vw, 42px) !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Film perforation dots — rail only */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail::before,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail::after {
  content: "" !important;
  position: absolute !important;

  left: 24px !important;
  right: 24px !important;

  height: 10px !important;

  pointer-events: none !important;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,0.42) 0 3px,
      transparent 3.6px
    ) 0 0 / 28px 10px repeat-x !important;

  opacity: 0.5 !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail::before {
  top: 9px !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail::after {
  bottom: 9px !important;
}

/* Cards */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card {
  position: relative !important;
  z-index: 2 !important;

  flex: 0 0 auto !important;

  width: clamp(210px, 16vw, 330px) !important;
  aspect-ratio: 1.36 / 1 !important;

  margin: 0 !important;

  overflow: hidden !important;

  border-radius: clamp(20px, 1.6vw, 30px) !important;

  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  box-shadow:
    0 18px 36px rgba(0,0,0,0.24),
    0 6px 14px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;

  transform: none !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-card-1,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-card-2,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-card-3,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-card-4,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-card-5,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-card-6,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-card-7,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-card-8,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card.is-clone {
  transform: none !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card.is-clone {
  pointer-events: none !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  border-radius: inherit !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;

  object-fit: cover !important;
  object-position: center center;

  border-radius: inherit !important;

  transform: scale(1.04) !important;

  filter: saturate(1.07) contrast(1.04) brightness(0.96) !important;

  transition:
    transform 0.7s cubic-bezier(.22,1,.36,1),
    filter 0.4s ease !important;

  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card:hover img {
  transform: scale(1.12) !important;
  filter: saturate(1.18) contrast(1.07) brightness(1) !important;
}

/* Prevent image/element selection while dragging */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-track,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card *,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card img {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -moz-user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* =========================================
   DRAG INDICATOR
   HTML widget class: sg-b2c-scroll-widget
   HTML:
   <div class="sg-b2c-drag-indicator" aria-hidden="true">
     <span class="sg-b2c-drag-icon">
       <span class="sg-b2c-drag-arrow sg-b2c-drag-arrow-left">‹</span>
       <span class="sg-b2c-drag-handle"><span></span><span></span><span></span></span>
       <span class="sg-b2c-drag-arrow sg-b2c-drag-arrow-right">›</span>
     </span>
     <span class="sg-b2c-drag-text">σύρετε</span>
   </div>
   ========================================= */

/* Hide older indicator versions if still present */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-scroll-indicator,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-reel-hint,
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-hand {
  display: none !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-scroll-widget {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  z-index: 90 !important;

  width: auto !important;
  height: auto !important;

  transform: translateX(-50%) !important;

  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-scroll-widget .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-indicator {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  pointer-events: none !important;
  opacity: 0.92 !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  padding: 7px 11px !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;

  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;

  animation: sgB2CDragIconFloat 1.9s ease-in-out infinite !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-handle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-handle span {
  display: block !important;

  width: 3px !important;
  height: 18px !important;

  border-radius: 999px !important;

  background: rgba(255,255,255,0.88) !important;

  box-shadow: 0 4px 10px rgba(0,0,0,0.18) !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-arrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: rgba(255,255,255,0.86) !important;

  font-size: 22px !important;
  line-height: 0.5 !important;
  font-weight: 700 !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-arrow-left {
  animation: sgB2CArrowLeft 1.65s ease-in-out infinite !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-arrow-right {
  animation: sgB2CArrowRight 1.65s ease-in-out infinite !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-text {
  color: rgba(255,255,255,0.82) !important;

  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;

  text-shadow: 0 4px 12px rgba(0,0,0,0.28) !important;
}

/* =========================================
   EXTRA FLOATING ICON WIDGETS
   Optional widget classes:
   sg-b2c-float-icon sg-b2c-float-icon-1 ... 6
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon {
  position: absolute !important;
  z-index: 6 !important;

  width: clamp(46px, 4.2vw, 82px) !important;
  height: auto !important;

  pointer-events: none !important;
  opacity: 0.9 !important;

  filter:
    drop-shadow(0 14px 18px rgba(8,31,95,0.13))
    drop-shadow(0 4px 8px rgba(158,35,109,0.10)) !important;

  transform-origin: center center !important;
  will-change: transform !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon img {
  display: block !important;
  width: 100% !important;
  height: auto !important;

  user-select: none !important;
  -webkit-user-drag: none !important;
  pointer-events: none !important;
}

/* Icon positions */
.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-1 {
  left: 5.5% !important;
  top: 20% !important;
  animation: sgB2CIconFloatA 4.8s ease-in-out infinite !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-2 {
  left: 38% !important;
  bottom: 12% !important;
  width: clamp(42px, 3.7vw, 70px) !important;
  animation: sgB2CIconPop 4.4s ease-in-out infinite !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-3 {
  right: 7% !important;
  top: 15% !important;
  width: clamp(52px, 4.8vw, 92px) !important;
  animation: sgB2CIconFloatB 5.2s ease-in-out infinite !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-4 {
  right: 2.5% !important;
  bottom: 19% !important;
  width: clamp(44px, 4vw, 78px) !important;
  animation: sgB2CIconSwing 5.6s ease-in-out infinite !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-5 {
  left: 42% !important;
  top: 20% !important;
  width: clamp(36px, 3.4vw, 64px) !important;
  opacity: 0.78 !important;
  animation: sgB2CIconBounce 4.9s ease-in-out infinite !important;
}

.elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-6 {
  right: 39% !important;
  bottom: 8% !important;
  width: clamp(38px, 3.6vw, 66px) !important;
  opacity: 0.8 !important;
  animation: sgB2CIconFloatC 5.4s ease-in-out infinite !important;
}

/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes sgHomeB2CFloatA {
  from {
    transform: translate3d(0,0,0) rotate(-12deg);
  }

  to {
    transform: translate3d(8px,-12px,0) rotate(-7deg);
  }
}

@keyframes sgHomeB2CFloatB {
  from {
    transform: translate3d(0,0,0) rotate(14deg);
  }

  to {
    transform: translate3d(-10px,10px,0) rotate(21deg);
  }
}

@keyframes sgB2CDragIconFloat {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.78;
  }

  38% {
    transform: translateX(-8px);
    opacity: 1;
  }

  68% {
    transform: translateX(6px);
    opacity: 0.92;
  }
}

@keyframes sgB2CArrowLeft {
  0%, 100% {
    transform: translateX(3px);
    opacity: 0.42;
  }

  45% {
    transform: translateX(-4px);
    opacity: 1;
  }
}

@keyframes sgB2CArrowRight {
  0%, 100% {
    transform: translateX(-3px);
    opacity: 0.42;
  }

  45% {
    transform: translateX(4px);
    opacity: 1;
  }
}

@keyframes sgB2CIconFloatA {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
  }

  38% {
    transform: translate3d(10px, -18px, 0) rotate(7deg) scale(1.1);
  }

  72% {
    transform: translate3d(-8px, 8px, 0) rotate(-3deg) scale(0.98);
  }
}

@keyframes sgB2CIconFloatB {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }

  42% {
    transform: translate3d(-14px, -18px, 0) rotate(-8deg) scale(1.1);
  }

  76% {
    transform: translate3d(8px, 10px, 0) rotate(4deg) scale(0.98);
  }
}

@keyframes sgB2CIconFloatC {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(5deg) scale(1);
  }

  40% {
    transform: translate3d(12px, -14px, 0) rotate(-7deg) scale(1.09);
  }

  74% {
    transform: translate3d(-8px, 8px, 0) rotate(4deg) scale(0.98);
  }
}

@keyframes sgB2CIconPop {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
  }

  34% {
    transform: translate3d(8px, -12px, 0) rotate(5deg) scale(1.14);
  }

  62% {
    transform: translate3d(-6px, 6px, 0) rotate(-3deg) scale(0.98);
  }
}

@keyframes sgB2CIconSwing {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(10deg) scale(1);
  }

  50% {
    transform: translate3d(-12px, -16px, 0) rotate(-12deg) scale(1.09);
  }
}

@keyframes sgB2CIconBounce {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
  }

  44% {
    transform: translate3d(0, -20px, 0) rotate(6deg) scale(1.12);
  }

  66% {
    transform: translate3d(0, 5px, 0) rotate(-2deg) scale(0.96);
  }
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {
  .elementor-5213 .elementor-element.elementor-element-d44467e {
    min-height: auto;
    padding: 104px 5vw 118px;

    grid-template-columns: minmax(0, 1fr);
    row-gap: 42px;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-visual,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-content {
    max-width: 100%;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-title,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-title .elementor-heading-title {
    font-size: clamp(42px, 6vw, 62px);
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-text,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-text p {
    font-size: 17px;
    line-height: 1.68;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage {
    min-height: 430px;
    border-radius: 30px;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail {
    --sg-filmstrip-angle: -6deg;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail > .e-con-inner {
    gap: 22px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card {
    width: clamp(205px, 34vw, 320px) !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon {
    width: clamp(38px, 6vw, 66px) !important;
    opacity: 0.82 !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-1 {
    left: 4% !important;
    top: 16% !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-2 {
    left: 8% !important;
    bottom: 10% !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-3 {
    right: 5% !important;
    top: 14% !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-4 {
    right: 6% !important;
    bottom: 12% !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-5,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-6 {
    display: none !important;
  }
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {
  .elementor-5213 .elementor-element.elementor-element-d44467e {
    grid-template-columns: minmax(0, 1fr);

    padding: 88px 20px 96px;
    row-gap: 42px;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e::before {
    background-image:
      linear-gradient(
        180deg,
        rgba(7,21,61,0.42) 0%,
        rgba(7,21,61,0.24) 70px,
        rgba(7,21,61,0.09) 130px,
        rgba(7,21,61,0) 190px
      ),
      linear-gradient(rgba(8,31,95,0.044) 1px, transparent 1px),
      linear-gradient(90deg, rgba(8,31,95,0.044) 1px, transparent 1px),
      radial-gradient(circle, rgba(158,35,109,0.11) 1px, transparent 2px),
      radial-gradient(circle, rgba(8,31,95,0.07) 1px, transparent 2px);
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-visual,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-content {
    width: 100%;
    max-width: 100%;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-title,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-title .elementor-heading-title {
    font-size: clamp(38px, 12vw, 52px);
    line-height: 1;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-text,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-text p {
    font-size: 16px;
    line-height: 1.65;
    margin-top: 20px;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-top: 28px;
    gap: 12px;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button {
    width: 100%;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-gateway-visual,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-stage {
    min-height: 360px;
    border-radius: 26px;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail {
    --sg-filmstrip-angle: -5deg;
    gap: 18px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-filmstrip-rail > .e-con-inner {
    gap: 18px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card {
    width: 230px !important;
    border-radius: 22px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-scroll-widget {
    bottom: 16px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-icon {
    padding: 6px 9px !important;
    gap: 7px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-handle span {
    height: 16px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-text {
    font-size: 9px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy::before,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy::after {
    display: none;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon {
    width: clamp(34px, 11vw, 52px) !important;
    opacity: 0.76 !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-1 {
    left: 5% !important;
    top: 9% !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-3 {
    right: 5% !important;
    top: 12% !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-2,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-4,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-5,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-6 {
    display: none !important;
  }
}

/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button::before,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button::before,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button::after,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button::after,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy::before,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-copy::after,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-collage-card img,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-icon,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-arrow-left,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-drag-arrow-right,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon {
    transition: none !important;
    animation: none !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-primary .elementor-button:hover,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-home-products-btn-secondary .elementor-button:hover {
    transform: none !important;
  }
}

/* =========================================
   B2C HERO — FINAL TABLET / MOBILE FLOATING ICONS
   Visible, larger, evenly distributed, soft motion
   Paste at the VERY BOTTOM of this section CSS
   ========================================= */

/* Base cleanup for all responsive icon behavior */
@media (max-width: 1024px) {
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;

    z-index: 6 !important;

    width: clamp(76px, 9vw, 112px) !important;
    max-width: 150px !important;

    opacity: 0.84 !important;

    pointer-events: none !important;

    filter:
      drop-shadow(0 14px 18px rgba(8,31,95,0.12))
      drop-shadow(0 4px 8px rgba(158,35,109,0.08)) !important;

    transform-origin: center center !important;
    will-change: transform !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  /* Tablet distribution */
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-1 {
    left: 3% !important;
    top: 30% !important;
    width: 96px !important;
    opacity: 0.86 !important;
    animation: sgB2CIconSoftFloatA 8.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-2 {
    display: block !important;
    left: 8% !important;
    bottom: 12% !important;
    width: 86px !important;
    opacity: 0.82 !important;
    animation: sgB2CIconSoftFloatB 9.4s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-3 {
    right: 4% !important;
    top: 29% !important;
    width: 102px !important;
    opacity: 0.86 !important;
    animation: sgB2CIconSoftFloatC 9.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-4 {
    display: block !important;
    right: 6% !important;
    bottom: 14% !important;
    width: 88px !important;
    opacity: 0.82 !important;
    animation: sgB2CIconSoftFloatD 9.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-5 {
    display: block !important;
    left: 44% !important;
    top: 48% !important;
    width: 78px !important;
    opacity: 0.80 !important;
    animation: sgB2CIconSoftFloatE 10.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-6 {
    display: block !important;
    right: 36% !important;
    bottom: 8% !important;
    width: 78px !important;
    opacity: 0.80 !important;
    animation: sgB2CIconSoftFloatF 9.6s ease-in-out infinite !important;
  }
}

/* Mobile: fewer icons than tablet, but still visible and larger */
@media (max-width: 767px) {
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;

    width: 76px !important;
    max-width: 95px !important;

    opacity: 0.82 !important;
    z-index: 6 !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-1 {
    left: -14px !important;
    top: 210px !important;
    width: 76px !important;
    opacity: 0.84 !important;
    animation: sgB2CIconSoftFloatA 8.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-2 {
    display: block !important;
    left: 16px !important;
    top: 430px !important;
    width: 70px !important;
    opacity: 0.80 !important;
    animation: sgB2CIconSoftFloatB 9.4s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-3 {
    right: -14px !important;
    top: 250px !important;
    width: 82px !important;
    opacity: 0.84 !important;
    animation: sgB2CIconSoftFloatC 9.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-4 {
    display: block !important;
    right: -12px !important;
    top: 500px !important;
    width: 76px !important;
    opacity: 0.80 !important;
    animation: sgB2CIconSoftFloatD 9.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-5,
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-6 {
    display: none !important;
  }
}

/* Small mobile: slightly tighter placement */
@media (max-width: 390px) {
  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-1 {
    top: 195px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-2 {
    top: 405px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-3 {
    top: 235px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-d44467e .sg-b2c-float-icon-4 {
    top: 475px !important;
  }
}

/* =========================================
   SOFT ICON ANIMATIONS
   Replaces the aggressive old movement visually
   ========================================= */

@keyframes sgB2CIconSoftFloatA {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-7deg) scale(1);
  }

  50% {
    transform: translate3d(5px, -8px, 0) rotate(-3deg) scale(1.02);
  }
}

@keyframes sgB2CIconSoftFloatB {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(6deg) scale(1);
  }

  50% {
    transform: translate3d(-6px, 7px, 0) rotate(10deg) scale(1.015);
  }
}

@keyframes sgB2CIconSoftFloatC {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(7deg) scale(1);
  }

  50% {
    transform: translate3d(-6px, -8px, 0) rotate(3deg) scale(1.02);
  }
}

@keyframes sgB2CIconSoftFloatD {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(9deg) scale(1);
  }

  50% {
    transform: translate3d(6px, -7px, 0) rotate(5deg) scale(1.018);
  }
}

@keyframes sgB2CIconSoftFloatE {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }

  50% {
    transform: translate3d(4px, -6px, 0) rotate(-1deg) scale(1.018);
  }
}

@keyframes sgB2CIconSoftFloatF {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(5deg) scale(1);
  }

  50% {
    transform: translate3d(-5px, 7px, 0) rotate(8deg) scale(1.015);
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5a328b5 *//* =========================================
   SUGARTIA — B2C USE SECTION
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-5a328b5 {
  --sg-blue: #081f5f;
  --sg-deep: #0C1B42;
  --sg-pink: #9E236D;
  --sg-text: rgba(8, 31, 95, 0.66);

  --sg-icon-cappuccino: url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Cappuccino-1.png");
  --sg-icon-strawberry: url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Strawberry.webp");
  --sg-icon-cookware: url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Kochgeschirr.png");

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  max-width: 100%;

  padding: clamp(32px, 4.8vw, 54px) 7vw clamp(74px, 6vw, 98px);

  background:
    radial-gradient(circle at 10% 14%, rgba(158, 35, 109, 0.055), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(8, 31, 95, 0.04), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fffdf9 100%);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5,
.elementor-5213 .elementor-element.elementor-element-5a328b5 * {
  box-sizing: border-box;
}

/* Background grid */
.elementor-5213 .elementor-element.elementor-element-5a328b5::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(8,31,95,0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,31,95,0.042) 1px, transparent 1px),
    radial-gradient(circle, rgba(158,35,109,0.12) 1px, transparent 2px);

  background-size:
    74px 74px,
    74px 74px,
    30px 30px;

  background-position:
    0 0,
    0 0,
    12px 16px;

  opacity: 0.5;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 > * {
  position: relative;
  z-index: 2;
}

/* =========================================
   INTRO
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-intro {
  max-width: 790px;
  margin: 0 auto clamp(24px, 3vw, 34px);
  text-align: center;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-eyebrow,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-eyebrow .elementor-heading-title {
  color: var(--sg-pink);

  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;

  margin-bottom: 14px;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-title,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-title *,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-title .elementor-heading-title {
  color: var(--sg-blue) !important;

  font-size: clamp(38px, 3.7vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.052em;
  font-weight: 850;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-text,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-text *,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-text p {
  color: rgba(8, 31, 95, 0.68) !important;

  font-size: 17px;
  line-height: 1.72;

  max-width: 700px;
  margin: 16px auto 0;
}

/* =========================================
   GRID
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-grid {
  width: min(1240px, 100%);
  max-width: 100%;
  min-width: 0;

  margin: 0 auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.2vw, 32px);
}

/* =========================================
   CARDS
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-width: 0;

  padding: 14px 14px 24px;

  border-radius: 30px;
  border: 1px solid rgba(8, 31, 95, 0.075);

  background: #ffffff;

  box-shadow:
    0 18px 48px rgba(8, 31, 95, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);

  transition:
    transform 0.42s cubic-bezier(.22, 1, .36, 1),
    box-shadow 0.42s cubic-bezier(.22, 1, .36, 1),
    border-color 0.3s ease;
}

/* Ambient wash */
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  pointer-events: none;

  opacity: 0.78;

  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}

/* Watermark icon */
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card::before {
  content: "";
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 10px;
  z-index: 1;

  width: clamp(120px, 34%, 170px);
  height: clamp(120px, 34%, 170px);

  pointer-events: none;

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  opacity: 0.14;

  transform: translateX(-50%) rotate(-4deg) scale(1);
  transform-origin: center center;

  transition:
    opacity 0.34s ease,
    transform 0.42s cubic-bezier(.22, 1, .36, 1);
}

/* Keep content above decorative layers */
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card > * {
  position: relative;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image {
  position: relative;
  z-index: 4;

  width: 100%;
  margin-bottom: 18px;

  overflow: hidden;

  border-radius: 22px;

  background: rgba(255,255,255,0.72);

  box-shadow: 0 14px 34px rgba(8, 31, 95, 0.075);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image .elementor-widget-container {
  overflow: hidden;
  border-radius: 22px;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image img {
  display: block;

  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;

  object-fit: cover;
  object-position: center;

  border-radius: 22px;

  transform: scale(1);

  transition:
    transform 0.65s cubic-bezier(.22, 1, .36, 1),
    filter 0.45s ease;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;

  border-radius: 22px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0) 46%,
      rgba(8,31,95,0.045) 100%
    );
}

/* Text */
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-text {
  position: relative;
  z-index: 3;

  padding-left: 14px;
  padding-right: 14px;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title *,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title .elementor-heading-title {
  color: var(--sg-blue) !important;

  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 850;

  margin-bottom: 0;

  transition: color 0.3s ease;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-text,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-text *,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-text p {
  color: var(--sg-text) !important;

  font-size: 15.5px;
  line-height: 1.62;

  margin-top: 8px;
  margin-bottom: 0;
}

/* =========================================
   CARD THEMES
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-drinks {
  background:
    linear-gradient(145deg, #ffffff 0%, #fffafc 58%, #ffffff 100%);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-drinks::before {
  background-image: var(--sg-icon-cappuccino);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-drinks::after {
  background:
    radial-gradient(circle at 16% 18%, rgba(158, 35, 109, 0.06), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(8, 31, 95, 0.04), transparent 38%);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-baking {
  background:
    linear-gradient(145deg, #ffffff 0%, #fff8f1 58%, #fffdf8 100%);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-baking::before {
  background-image: var(--sg-icon-cookware);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-baking::after {
  background:
    radial-gradient(circle at 16% 18%, rgba(214, 152, 72, 0.09), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(158, 35, 109, 0.04), transparent 38%);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-finish {
  background:
    linear-gradient(145deg, #ffffff 0%, #fff8fb 58%, #fffaf3 100%);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-finish::before {
  background-image: var(--sg-icon-strawberry);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-finish::after {
  background:
    radial-gradient(circle at 16% 18%, rgba(158, 35, 109, 0.07), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(255, 214, 232, 0.38), transparent 40%);
}

/* =========================================
   HOVER
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover {
  transform: translateY(-15px);
  border-color: rgba(158, 35, 109, 0.15);

  box-shadow:
    0 30px 74px rgba(8, 31, 95, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover::after {
  opacity: 1;
  transform: scale(1.02);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover::before {
  opacity: 0.28;
  transform: translateX(-50%) rotate(-4deg) scale(1.06);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover .sg-b2c-use-card-image img {
  transform: scale(1.05);
  filter: saturate(1.04) contrast(1.02);
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover .sg-b2c-use-card-title,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover .sg-b2c-use-card-title *,
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover .sg-b2c-use-card-title .elementor-heading-title {
  color: var(--sg-pink) !important;
}

/* =========================================
   EXTRA FLOATING ICON WIDGETS
   Add Image widgets directly inside the main parent container
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon {
  position: absolute;
  z-index: 3;

  width: clamp(78px, 3.8vw, 92px);
  height: auto;

  pointer-events: none;

  opacity: 0.72;

  filter:
    drop-shadow(0 12px 18px rgba(8,31,95,0.12))
    drop-shadow(0 4px 8px rgba(158,35,109,0.08));

  transform-origin: center center;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon img {
  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Icon positions */
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-1 {
  left: 7%;
  top: 18%;
  animation: sgB2CUseIconSoftFloat 5.4s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-2 {
  right: 8%;
  top: 22%;

  width: clamp(34px, 3.4vw, 64px);
  opacity: 0.62;

  animation: sgB2CUseIconOrbit 6.8s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-3 {
  left: 12%;
  bottom: 11%;

  width: clamp(36px, 3.6vw, 68px);
  opacity: 0.68;

  animation: sgB2CUseIconBreathPop 4.9s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-4 {
  right: 11%;
  bottom: 14%;

  width: clamp(42px, 4vw, 76px);
  opacity: 0.7;

  animation: sgB2CUseIconWiggle 5.8s ease-in-out infinite;
}

/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes sgB2CUseIconSoftFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-7deg) scale(1);
  }

  45% {
    transform: translate3d(7px, -13px, 0) rotate(4deg) scale(1.06);
  }

  72% {
    transform: translate3d(-4px, 4px, 0) rotate(-3deg) scale(0.99);
  }
}

@keyframes sgB2CUseIconOrbit {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }

  25% {
    transform: translate3d(10px, -6px, 0) rotate(13deg) scale(1.04);
  }

  50% {
    transform: translate3d(4px, -14px, 0) rotate(4deg) scale(1.07);
  }

  75% {
    transform: translate3d(-9px, -5px, 0) rotate(-5deg) scale(1.02);
  }
}

@keyframes sgB2CUseIconBreathPop {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
    opacity: 0.68;
  }

  38% {
    transform: translate3d(0, -5px, 0) rotate(2deg) scale(1.16);
    opacity: 0.9;
  }

  62% {
    transform: translate3d(0, 2px, 0) rotate(-2deg) scale(0.96);
    opacity: 0.74;
  }
}

@keyframes sgB2CUseIconWiggle {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }

  20% {
    transform: translate3d(-4px, -4px, 0) rotate(-7deg) scale(1.03);
  }

  42% {
    transform: translate3d(5px, -8px, 0) rotate(10deg) scale(1.06);
  }

  66% {
    transform: translate3d(-3px, 3px, 0) rotate(-4deg) scale(0.99);
  }
}

/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1024px) {
  .elementor-5213 .elementor-element.elementor-element-5a328b5 {
    padding: 60px 5vw 84px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-intro {
    margin-bottom: 30px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
    gap: 22px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card {
    border-radius: 28px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card::before {
    width: 140px;
    height: 140px;
    bottom: 12px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon {
    width: clamp(34px, 6vw, 60px);
    opacity: 0.58;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-1 {
    left: 5%;
    top: 12%;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-2 {
    right: 5%;
    top: 14%;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-3,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-4 {
    display: none;
  }
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {
  .elementor-5213 .elementor-element.elementor-element-5a328b5 {
    padding: 52px 24px 72px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-intro {
    text-align: left;
    margin-bottom: 26px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-title,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-title *,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-title .elementor-heading-title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-text,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-text p {
    font-size: 16px;
    line-height: 1.65;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card {
    padding: 12px 12px 22px;
    border-radius: 26px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image .elementor-widget-container,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image img,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image::after {
    border-radius: 20px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image {
    margin-bottom: 18px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-text {
    padding-left: 10px;
    padding-right: 10px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title .elementor-heading-title {
    font-size: 25px;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card::before {
    width: 118px;
    height: 118px;
    bottom: 10px;
    opacity: 0.12;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover::before {
    opacity: 0.22;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon {
    width: clamp(30px, 10vw, 48px);
    opacity: 0.5;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-1 {
    left: auto;
    right: 7%;
    top: 6%;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-2,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-3,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-4 {
    display: none;
  }
}

/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card::before,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card::after,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-image img,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card-title .elementor-heading-title,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon {
    transition: none !important;
    animation: none !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover::before,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover::after,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card:hover .sg-b2c-use-card-image img {
    transform: none !important;
  }
}
/* =========================================
   B2C USE SECTION — BACKGROUND CONTRAST POLISH
   Warmer section background + stronger separation from previous section
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-5a328b5 {
  background:
    linear-gradient(
      180deg,
      rgba(8,31,95,0.055) 0%,
      rgba(8,31,95,0.018) 42px,
      rgba(8,31,95,0) 120px
    ),
    radial-gradient(circle at 16% 22%, rgba(158,35,109,0.105), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(255,205,145,0.18), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(8,31,95,0.055), transparent 42%),
    linear-gradient(
      180deg,
      #fff6ec 0%,
      #fffaf4 48%,
      #ffffff 100%
    ) !important;

  box-shadow:
    inset 0 34px 54px rgba(8,31,95,0.045) !important;
}

/* Make the texture slightly warmer/different from the section above */
.elementor-5213 .elementor-element.elementor-element-5a328b5::before {
  background-image:
    linear-gradient(rgba(8,31,95,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,31,95,0.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(158,35,109,0.105) 1px, transparent 2px),
    radial-gradient(circle, rgba(214,152,72,0.10) 1px, transparent 2px) !important;

  background-size:
    74px 74px,
    74px 74px,
    30px 30px,
    46px 46px !important;

  background-position:
    0 0,
    0 0,
    12px 16px,
    24px 28px !important;

  opacity: 0.62 !important;
}

/* Soft glow behind the card row */
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-grid {
  position: relative;
}

.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: -1;

  width: min(980px, 92vw);
  height: 260px;

  transform: translate(-50%, -50%);

  border-radius: 999px;

  background:
    radial-gradient(circle, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.28) 42%, transparent 72%);

  filter: blur(8px);
  pointer-events: none;
}

/* Cards stand out a little more on the warmer background */
.elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card {
  background: rgba(255,255,255,0.88) !important;
  box-shadow:
    0 22px 56px rgba(8,31,95,0.075),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

/* =========================================
   B2C USE SECTION — FINAL TABLET / MOBILE FLOATING ICONS
   Larger, visible, evenly distributed, soft motion
   Paste at the VERY BOTTOM of this section CSS
   ========================================= */

/* =========================================
   TABLET ICON FIX
   ========================================= */

@media (max-width: 1024px) {
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;

    z-index: 3 !important;

    width: clamp(78px, 9vw, 112px) !important;
    max-width: 150px !important;

    opacity: 0.84 !important;

    pointer-events: none !important;

    filter:
      drop-shadow(0 14px 18px rgba(8,31,95,0.12))
      drop-shadow(0 4px 8px rgba(158,35,109,0.08)) !important;

    transform-origin: center center !important;
    will-change: transform !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon img {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-1 {
    left: 2.5% !important;
    top: 18% !important;
    width: 104px !important;
    opacity: 0.86 !important;
    animation: sgB2CUseIconSoftA 8.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-2 {
    right: 3% !important;
    top: 21% !important;
    width: 96px !important;
    opacity: 0.84 !important;
    animation: sgB2CUseIconSoftB 9.4s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-3 {
    display: block !important;
    left: 4% !important;
    bottom: 15% !important;
    width: 92px !important;
    opacity: 0.82 !important;
    animation: sgB2CUseIconSoftC 9.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-4 {
    display: block !important;
    right: 4% !important;
    bottom: 13% !important;
    width: 96px !important;
    opacity: 0.82 !important;
    animation: sgB2CUseIconSoftD 9.8s ease-in-out infinite !important;
  }
}

/* =========================================
   MOBILE ICON FIX
   ========================================= */

@media (max-width: 767px) {
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;

    z-index: 3 !important;

    width: 76px !important;
    max-width: 95px !important;

    opacity: 0.82 !important;

    pointer-events: none !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-1 {
    left: -16px !important;
    top: 86px !important;
    width: 76px !important;
    opacity: 0.84 !important;
    animation: sgB2CUseIconSoftA 8.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-2 {
    display: block !important;
    right: -16px !important;
    top: 230px !important;
    width: 78px !important;
    opacity: 0.82 !important;
    animation: sgB2CUseIconSoftB 9.4s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-3 {
    display: block !important;
    left: -14px !important;
    top: 610px !important;
    width: 74px !important;
    opacity: 0.80 !important;
    animation: sgB2CUseIconSoftC 9.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-4 {
    display: block !important;
    right: -14px !important;
    bottom: 88px !important;
    width: 78px !important;
    opacity: 0.80 !important;
    animation: sgB2CUseIconSoftD 9.8s ease-in-out infinite !important;
  }

  /* Keep cards/readable content above the decorative icons */
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-intro,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-grid,
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-card {
    position: relative !important;
    z-index: 4 !important;
  }
}

/* Small mobile: slightly tighter positions */
@media (max-width: 390px) {
  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-1 {
    top: 78px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-2 {
    top: 215px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-3 {
    top: 575px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-5a328b5 .sg-b2c-use-float-icon-4 {
    bottom: 72px !important;
  }
}

/* =========================================
   SOFT ICON ANIMATIONS
   Replaces aggressive old motion visually
   ========================================= */

@keyframes sgB2CUseIconSoftA {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-7deg) scale(1);
  }

  50% {
    transform: translate3d(5px, -8px, 0) rotate(-3deg) scale(1.02);
  }
}

@keyframes sgB2CUseIconSoftB {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(7deg) scale(1);
  }

  50% {
    transform: translate3d(-6px, -7px, 0) rotate(3deg) scale(1.02);
  }
}

@keyframes sgB2CUseIconSoftC {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }

  50% {
    transform: translate3d(6px, 7px, 0) rotate(-1deg) scale(1.018);
  }
}

@keyframes sgB2CUseIconSoftD {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }

  50% {
    transform: translate3d(-5px, -7px, 0) rotate(4deg) scale(1.018);
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ccc6d0b *//* =========================================
   SUGARTIA — HERO TOP SUGAR DIVIDER
   ========================================= */

/* Parent image section */
.sg-b2c-image-container {
  position: relative !important;
  overflow: hidden !important;
}

/* Sugar trail mask/anchor */
.sg-hero-top-sugar-divider {
  --sg-trail-box-height: clamp(210px, 16vw, 330px);
  --sg-trail-img-bottom: clamp(-310px, -15vw, -185px);

  position: absolute !important;

  left: 50% !important;
  bottom: 90px !important;

  z-index: 30 !important;

  width: 100vw !important;
  max-width: none !important;

  height: var(--sg-trail-box-height) !important;
  min-height: 0 !important;
  max-height: none !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  pointer-events: none !important;

  display: block !important;
}

/* Elementor inner wrapper */
.sg-hero-top-sugar-divider > .e-con-inner {
  position: relative !important;

  width: 100vw !important;
  max-width: none !important;

  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  display: block !important;
}

/* Image widget */
.sg-hero-top-sugar-divider .sg-sugar-divider-img,
.sg-hero-top-sugar-divider .sg-sugar-divider-img .elementor-widget-container {
  position: absolute !important;

  left: 50% !important;
  bottom: var(--sg-trail-img-bottom) !important;

  width: 100vw !important;
  max-width: none !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;
  padding: 0 !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;

  display: block !important;
}

/* Actual sugar trail image */
.sg-hero-top-sugar-divider .sg-sugar-divider-img img {
  display: block !important;

  width: 100vw !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: bottom center !important;

  pointer-events: none !important;
}

/* Large desktop */
@media (min-width: 1600px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(230px, 15vw, 360px);
    --sg-trail-img-bottom: clamp(-350px, -15vw, -230px);
  }
}

/* Very large desktop */
@media (min-width: 1920px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(240px, 14vw, 380px);
    --sg-trail-img-bottom: clamp(-390px, -15vw, -260px);
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(170px, 24vw, 280px);
    --sg-trail-img-bottom: clamp(-230px, -20vw, -150px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(120px, 36vw, 210px);
    --sg-trail-img-bottom: clamp(-135px, -28vw, -82px);
  }
}

/* Small mobile */
@media (max-width: 390px) {
  .sg-hero-top-sugar-divider {
    --sg-trail-box-height: clamp(112px, 34vw, 190px);
    --sg-trail-img-bottom: clamp(-118px, -26vw, -76px);
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8e5d084 *//* =========================================
   SUGARTIA — B2C PRODUCTS SHOWCASE MAIN SECTION
   Section-level only: background, spacing, intro, icons
   Do NOT paste product card CSS here.
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-8e5d084 {
  --sg-blue: #081f5f;
  --sg-deep: #0C1B42;
  --sg-pink: #9E236D;
  --sg-text: rgba(8, 31, 95, 0.68);

  position: relative;
  isolation: isolate;
  overflow: hidden;

  width: 100%;
  max-width: 100%;

  padding: clamp(64px, 6vw, 92px) 7vw clamp(78px, 6.5vw, 110px);

  background: #ffffff;

  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084:hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}

/* Keep real content above decorative icons */
.elementor-5213 .elementor-element.elementor-element-8e5d084 > * {
  position: relative;
  z-index: 3;
}

/* =========================================
   INTRO
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-intro {
  max-width: 820px;
  margin: 0 auto clamp(34px, 3.8vw, 52px);
  text-align: center;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-eyebrow,
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-eyebrow *,
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-eyebrow .elementor-heading-title {
  color: var(--sg-pink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-title,
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-title *,
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-title .elementor-heading-title {
  color: var(--sg-blue);
  font-size: clamp(38px, 3.7vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.052em;
  font-weight: 850;
  margin: 0;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-text,
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-text *,
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-text p {
  color: var(--sg-text);
  font-size: 17px;
  line-height: 1.68;
  max-width: 720px;
  margin: 16px auto 0;
}

/* =========================================
   LOOP GRID / PRODUCT AREA SPACING
   Add class sg-b2c-products-loop-area to the Loop Grid widget/container
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-loop-area {
  position: relative;
  z-index: 4;
  width: min(1240px, 100%);
  max-width: 100%;
  margin: 0 auto;
}

/* If Elementor Loop Grid uses its default container */
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-loop-area .elementor-loop-container,
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-loop-area .e-loop-container {
  row-gap: clamp(22px, 2.4vw, 34px);
  column-gap: clamp(22px, 2.4vw, 34px);
}

/* Safety: main section must never act like a card */
.elementor-5213 .elementor-element.elementor-element-8e5d084,
.elementor-5213 .elementor-element.elementor-element-8e5d084:hover {
  border-radius: 0;
}

/* =========================================
   FLOATING DECORATIVE ICONS
   Add Image widgets directly inside this main section.
   Classes:
   sg-b2c-products-float-icon sg-b2c-products-float-icon-1
   ... up to 8
   ========================================= */

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon {
  position: absolute;
  z-index: 2;

  width: clamp(78px, 7.8vw, 108px);
  height: auto;

  pointer-events: none;
  opacity: 0.68;

  filter:
    drop-shadow(0 12px 18px rgba(8,31,95,0.10))
    drop-shadow(0 4px 8px rgba(158,35,109,0.08));

  transform-origin: center center;
  will-change: transform;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon img {
  display: block;
  width: 100%;
  height: auto;

  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Icon positions */
.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-1 {
  left: 6%;
  top: 12%;
  animation: sgB2CProductsSoftFloat 5.6s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-2 {
  right: 8%;
  top: 11%;
  width: clamp(104px, 3.2vw, 104px);
  opacity: 0.58;
  animation: sgB2CProductsOrbit 6.8s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-3 {
  left: 4%;
  top: 42%;
  width: clamp(94px, 3vw, 106px);
  opacity: 0.62;
  animation: sgB2CProductsWiggle 6s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-4 {
  right: 6%;
  top: 42%;
  width: clamp(42px, 4vw, 84px);
  opacity: 0.64;
  animation: sgB2CProductsBreathPop 5.2s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-5 {
  left: 5%;
  bottom: 22%;
  width: clamp(106px, 5.4vw, 108px);
  opacity: 0.58;
  animation: sgB2CProductsDriftDiagonal 6.4s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-6 {
  right: 4%;
  bottom: 24%;
  width: clamp(94px, 3vw, 106px);
  opacity: 0.6;
  animation: sgB2CProductsTinyBounce 5.8s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-7 {
  left: 23%;
  bottom: 7%;
  width: clamp(94px, 3vw, 106px);
  opacity: 0.52;
  animation: sgB2CProductsSlowSwing 7s ease-in-out infinite;
}

.elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-8 {
  right: 23%;
  bottom: 6%;
  width: clamp(94px, 3vw, 106px);
  opacity: 0.54;
  animation: sgB2CProductsSoftFloatReverse 6.6s ease-in-out infinite;
}

/* =========================================
   ICON ANIMATIONS
   ========================================= */

@keyframes sgB2CProductsSoftFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-7deg) scale(1);
  }

  45% {
    transform: translate3d(8px, -14px, 0) rotate(5deg) scale(1.07);
  }

  72% {
    transform: translate3d(-5px, 5px, 0) rotate(-3deg) scale(0.99);
  }
}

@keyframes sgB2CProductsSoftFloatReverse {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(7deg) scale(1);
  }

  45% {
    transform: translate3d(-8px, -14px, 0) rotate(-5deg) scale(1.07);
  }

  72% {
    transform: translate3d(5px, 5px, 0) rotate(3deg) scale(0.99);
  }
}

@keyframes sgB2CProductsOrbit {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }

  25% {
    transform: translate3d(10px, -6px, 0) rotate(13deg) scale(1.04);
  }

  50% {
    transform: translate3d(4px, -14px, 0) rotate(3deg) scale(1.07);
  }

  75% {
    transform: translate3d(-9px, -5px, 0) rotate(-5deg) scale(1.02);
  }
}

@keyframes sgB2CProductsBreathPop {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-4deg) scale(1);
    opacity: 0.58;
  }

  38% {
    transform: translate3d(0, -5px, 0) rotate(2deg) scale(1.16);
    opacity: 0.78;
  }

  62% {
    transform: translate3d(0, 2px, 0) rotate(-2deg) scale(0.96);
    opacity: 0.64;
  }
}

@keyframes sgB2CProductsWiggle {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }

  20% {
    transform: translate3d(-4px, -4px, 0) rotate(-7deg) scale(1.03);
  }

  42% {
    transform: translate3d(5px, -8px, 0) rotate(10deg) scale(1.06);
  }

  66% {
    transform: translate3d(-3px, 3px, 0) rotate(-4deg) scale(0.99);
  }
}

@keyframes sgB2CProductsDriftDiagonal {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
  }

  50% {
    transform: translate3d(16px, -16px, 0) rotate(6deg) scale(1.08);
  }
}

@keyframes sgB2CProductsTinyBounce {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(5deg) scale(1);
  }

  28% {
    transform: translate3d(0, -12px, 0) rotate(-3deg) scale(1.08);
  }

  46% {
    transform: translate3d(0, 3px, 0) rotate(2deg) scale(0.98);
  }

  68% {
    transform: translate3d(0, -5px, 0) rotate(-1deg) scale(1.03);
  }
}

@keyframes sgB2CProductsSlowSwing {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(10deg) scale(1);
  }

  50% {
    transform: translate3d(-10px, -12px, 0) rotate(-10deg) scale(1.08);
  }
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1024px) {
  .elementor-5213 .elementor-element.elementor-element-8e5d084 {
    padding: 60px 5vw 86px;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-intro {
    margin-bottom: 34px;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon {
    width: clamp(32px, 6vw, 58px);
    opacity: 0.5;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-5,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-6,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-7,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-8 {
    display: none;
  }
}

@media (max-width: 767px) {
  .elementor-5213 .elementor-element.elementor-element-8e5d084 {
    padding: 52px 22px 74px;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-intro {
    text-align: left;
    margin-bottom: 28px;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-title,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-title *,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-title .elementor-heading-title {
    font-size: clamp(34px, 10vw, 46px);
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-text,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-text *,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-text p {
    font-size: 16px;
    line-height: 1.65;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-1 {
    left: auto;
    right: 6%;
    top: 5%;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-2,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-3,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-4,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-5,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-6,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-7,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-8 {
    display: none;
  }
}

/* =========================================
   B2C PRODUCTS SHOWCASE — FINAL TABLET / MOBILE FLOATING ICONS
   Larger, visible, evenly distributed, soft motion
   Paste at the VERY BOTTOM of this section CSS
   ========================================= */

/* =========================================
   TABLET ICON FIX
   ========================================= */

@media (max-width: 1024px) {
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;

    z-index: 2 !important;

    width: clamp(78px, 9vw, 112px) !important;
    max-width: 150px !important;

    opacity: 0.84 !important;

    pointer-events: none !important;

    filter:
      drop-shadow(0 14px 18px rgba(8,31,95,0.12))
      drop-shadow(0 4px 8px rgba(158,35,109,0.08)) !important;

    transform-origin: center center !important;
    will-change: transform !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon img {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-1 {
    left: 3% !important;
    top: 8% !important;
    width: 104px !important;
    opacity: 0.86 !important;
    animation: sgB2CProductsIconSoftA 8.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-2 {
    right: 3% !important;
    top: 10% !important;
    width: 102px !important;
    opacity: 0.84 !important;
    animation: sgB2CProductsIconSoftB 9.4s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-3 {
    left: 3% !important;
    top: 36% !important;
    width: 98px !important;
    opacity: 0.82 !important;
    animation: sgB2CProductsIconSoftC 9.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-4 {
    right: 3% !important;
    top: 38% !important;
    width: 96px !important;
    opacity: 0.82 !important;
    animation: sgB2CProductsIconSoftD 9.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-5 {
    display: block !important;
    left: 4% !important;
    bottom: 22% !important;
    width: 96px !important;
    opacity: 0.82 !important;
    animation: sgB2CProductsIconSoftE 10.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-6 {
    display: block !important;
    right: 4% !important;
    bottom: 23% !important;
    width: 98px !important;
    opacity: 0.82 !important;
    animation: sgB2CProductsIconSoftF 9.6s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-7 {
    display: block !important;
    left: 22% !important;
    bottom: 7% !important;
    width: 88px !important;
    opacity: 0.80 !important;
    animation: sgB2CProductsIconSoftG 10.4s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-8 {
    display: block !important;
    right: 22% !important;
    bottom: 6% !important;
    width: 90px !important;
    opacity: 0.80 !important;
    animation: sgB2CProductsIconSoftH 10s ease-in-out infinite !important;
  }
}

/* =========================================
   MOBILE ICON FIX
   Fewer than tablet, but still visible and larger
   ========================================= */

@media (max-width: 767px) {
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon {
    position: absolute !important;
    display: block !important;
    visibility: visible !important;

    z-index: 2 !important;

    width: 76px !important;
    max-width: 95px !important;

    opacity: 0.82 !important;

    pointer-events: none !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-1 {
    left: -16px !important;
    top: 74px !important;
    width: 76px !important;
    opacity: 0.84 !important;
    animation: sgB2CProductsIconSoftA 8.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-2 {
    display: block !important;
    right: -16px !important;
    top: 188px !important;
    width: 82px !important;
    opacity: 0.84 !important;
    animation: sgB2CProductsIconSoftB 9.4s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-3 {
    display: block !important;
    left: -14px !important;
    top: 460px !important;
    width: 78px !important;
    opacity: 0.82 !important;
    animation: sgB2CProductsIconSoftC 9.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-4 {
    display: block !important;
    right: -14px !important;
    top: 650px !important;
    width: 80px !important;
    opacity: 0.82 !important;
    animation: sgB2CProductsIconSoftD 9.8s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-5 {
    display: block !important;
    left: -12px !important;
    bottom: 210px !important;
    width: 76px !important;
    opacity: 0.80 !important;
    animation: sgB2CProductsIconSoftE 10.2s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-6 {
    display: block !important;
    right: -12px !important;
    bottom: 92px !important;
    width: 78px !important;
    opacity: 0.80 !important;
    animation: sgB2CProductsIconSoftF 9.6s ease-in-out infinite !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-7,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-8 {
    display: none !important;
  }

  /* Keep intro/products readable above decorative icons */
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-intro,
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-loop-area {
    position: relative !important;
    z-index: 4 !important;
  }
}

/* Small mobile: slightly tighter positions */
@media (max-width: 390px) {
  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-1 {
    top: 66px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-2 {
    top: 172px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-3 {
    top: 430px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-4 {
    top: 610px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-5 {
    bottom: 188px !important;
  }

  .elementor-5213 .elementor-element.elementor-element-8e5d084 .sg-b2c-products-float-icon-6 {
    bottom: 78px !important;
  }
}

/* =========================================
   SOFT ICON ANIMATIONS
   Replaces aggressive old motion visually
   ========================================= */

@keyframes sgB2CProductsIconSoftA {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-7deg) scale(1);
  }

  50% {
    transform: translate3d(5px, -8px, 0) rotate(-3deg) scale(1.02);
  }
}

@keyframes sgB2CProductsIconSoftB {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(7deg) scale(1);
  }

  50% {
    transform: translate3d(-6px, -7px, 0) rotate(3deg) scale(1.02);
  }
}

@keyframes sgB2CProductsIconSoftC {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }

  50% {
    transform: translate3d(6px, 7px, 0) rotate(-1deg) scale(1.018);
  }
}

@keyframes sgB2CProductsIconSoftD {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }

  50% {
    transform: translate3d(-5px, -7px, 0) rotate(4deg) scale(1.018);
  }
}

@keyframes sgB2CProductsIconSoftE {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-6deg) scale(1);
  }

  50% {
    transform: translate3d(5px, -6px, 0) rotate(-2deg) scale(1.018);
  }
}

@keyframes sgB2CProductsIconSoftF {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(6deg) scale(1);
  }

  50% {
    transform: translate3d(-6px, 7px, 0) rotate(9deg) scale(1.015);
  }
}

@keyframes sgB2CProductsIconSoftG {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(5deg) scale(1);
  }

  50% {
    transform: translate3d(-5px, -7px, 0) rotate(2deg) scale(1.018);
  }
}

@keyframes sgB2CProductsIconSoftH {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(1);
  }

  50% {
    transform: translate3d(6px, -6px, 0) rotate(-1deg) scale(1.018);
  }
}/* End custom CSS */