.elementor-31 .elementor-element.elementor-element-b372d15{--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-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-31 .elementor-element.elementor-element-e8daa3a{width:100%;max-width:100%;}.elementor-31 .elementor-element.elementor-element-e8daa3a img{width:100%;max-width:100%;height:300px;object-fit:cover;object-position:center center;filter:brightness( 67% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-31 .elementor-element.elementor-element-6926e04{--display:flex;--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-31 .elementor-element.elementor-element-cbe2fd0{--display:flex;}.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-31 .elementor-element.elementor-element-4a0d532{--display:flex;}.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-31 .elementor-element.elementor-element-9166189{--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;}body:not(.rtl) .elementor-31 .elementor-element.elementor-element-a033975{left:912px;}body.rtl .elementor-31 .elementor-element.elementor-element-a033975{right:912px;}.elementor-31 .elementor-element.elementor-element-a033975{top:690px;z-index:10;}.elementor-31 .elementor-element.elementor-element-de4c32f{--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-31 .elementor-element.elementor-element-de4c32f:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-de4c32f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Product-family-2.png");background-position:center center;background-size:cover;}.elementor-31 .elementor-element.elementor-element-5cf61d7{--display:flex;--min-height:700px;--overlay-opacity:0.32;}.elementor-31 .elementor-element.elementor-element-5cf61d7:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-5cf61d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/sugar-bg.png");background-position:top center;background-size:cover;}.elementor-31 .elementor-element.elementor-element-5cf61d7::before, .elementor-31 .elementor-element.elementor-element-5cf61d7 > .elementor-background-video-container::before, .elementor-31 .elementor-element.elementor-element-5cf61d7 > .e-con-inner > .elementor-background-video-container::before, .elementor-31 .elementor-element.elementor-element-5cf61d7 > .elementor-background-slideshow::before, .elementor-31 .elementor-element.elementor-element-5cf61d7 > .e-con-inner > .elementor-background-slideshow::before, .elementor-31 .elementor-element.elementor-element-5cf61d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-31 .elementor-element.elementor-element-5e4b209{--display:flex;}.elementor-31 .elementor-element.elementor-element-66f8b09 .elementor-heading-title{text-shadow:4px 3px 6px rgba(0, 0, 0, 0.71);}.elementor-31 .elementor-element.elementor-element-c1c69cf{text-shadow:2px 2px 3px rgba(0, 0, 0, 0.75);}.elementor-31 .elementor-element.elementor-element-bde7675{--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-31 .elementor-element.elementor-element-69350b1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-aec8370{--display:flex;--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-31 .elementor-element.elementor-element-383e329{--display:flex;}.elementor-31 .elementor-element.elementor-element-c1b26dd{--display:flex;}.elementor-31 .elementor-element.elementor-element-69e223b{--display:flex;}.elementor-31 .elementor-element.elementor-element-a8979f4{--display:flex;}.elementor-31 .elementor-element.elementor-element-f451bc5{--display:flex;}.elementor-31 .elementor-element.elementor-element-4e9a3da{--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-31 .elementor-element.elementor-element-4e9a3da:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-4e9a3da > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Product-family-2.png");background-position:center center;background-size:cover;}.elementor-31 .elementor-element.elementor-element-f1b127d{--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-31 .elementor-element.elementor-element-4c6b34b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-31 .elementor-element.elementor-element-fa836dd{--display:flex;}.elementor-31 .elementor-element.elementor-element-8143e5e{--display:flex;}.elementor-31 .elementor-element.elementor-element-f882379{--display:flex;}.elementor-31 .elementor-element.elementor-element-d8c1992{--display:flex;}:root{--page-title-display:none;}@media(min-width:1025px){.elementor-31 .elementor-element.elementor-element-de4c32f:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-de4c32f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}.elementor-31 .elementor-element.elementor-element-5cf61d7:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-5cf61d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}.elementor-31 .elementor-element.elementor-element-4e9a3da:not(.elementor-motion-effects-element-type-background), .elementor-31 .elementor-element.elementor-element-4e9a3da > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:767px){.elementor-31 .elementor-element.elementor-element-de4c32f{--min-height:558px;}.elementor-31 .elementor-element.elementor-element-4e9a3da{--min-height:558px;}}/* Start custom CSS for container, class: .elementor-element-6926e04 *//* =========================================
SUGARTIA PRODUCTS HERO — REFINED VERSION
========================================= */
.elementor-31 .elementor-element.elementor-element-6926e04 {
position: relative;
overflow: hidden;
isolation: isolate;
min-height: 760px;
padding: clamp(120px, 9vw, 150px) 7vw clamp(130px, 9vw, 155px);
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: clamp(56px, 6vw, 92px);
background:
radial-gradient(circle at 13% 24%, rgba(158, 35, 109, 0.13) 0%, rgba(158, 35, 109, 0) 31%),
radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 38%),
radial-gradient(circle at 76% 78%, rgba(8, 31, 95, 0.075) 0%, rgba(8, 31, 95, 0) 36%),
linear-gradient(rgba(8,31,95,0.038) 1px, transparent 1px),
linear-gradient(90deg, rgba(8,31,95,0.038) 1px, transparent 1px),
radial-gradient(circle, rgba(158,35,109,0.105) 1px, transparent 2px),
radial-gradient(circle, rgba(8,31,95,0.075) 1px, transparent 2px),
linear-gradient(135deg, #fbf6ed 0%, #f7efe4 46%, #fdf9f3 100%);
background-size:
auto,
auto,
auto,
74px 74px,
74px 74px,
30px 30px,
44px 44px,
auto;
background-position:
center,
center,
center,
0 0,
0 0,
12px 16px,
26px 22px,
center;
}
/* Content columns */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-copy,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-visual {
position: relative;
z-index: 2;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-copy {
flex: 0 0 43%;
width: 43%;
max-width: 650px;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-visual {
flex: 0 0 57%;
width: 57%;
max-width: 800px;
}
/* Eyebrow */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-eyebrow,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-eyebrow .elementor-heading-title {
color: #9E236D;
font-size: 12px;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 20px;
}
/* Title */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-title,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-title .elementor-heading-title {
color: #081f5f;
font-size: clamp(48px, 4.9vw, 82px);
line-height: 0.94;
letter-spacing: -0.06em;
font-weight: 850;
max-width: 720px;
}
/* Text */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-text,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-text p {
color: rgba(8, 31, 95, 0.70);
font-size: 18.5px;
line-height: 1.75;
max-width: 600px;
margin-top: 26px;
}
/* Button row */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-actions {
display: flex;
align-items: center;
flex-direction: row;
gap: 14px;
margin-top: 36px;
flex-wrap: wrap;
}
/* Button base */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button {
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
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(0.22, 1, 0.36, 1),
box-shadow 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button {
background: #081f5f;
color: #ffffff;
border: 1px solid #081f5f;
box-shadow:
0 16px 38px rgba(8, 31, 95, 0.22),
inset 0 1px 0 rgba(255,255,255,0.15);
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button {
background: rgba(255, 255, 255, 0.68);
color: #081f5f;
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);
}
/* Button fill layer */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button::before,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-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(0.22, 1, 0.36, 1),
right 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button::before {
background: #9E236D;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button::before {
background: #081f5f;
}
/* Button arrow */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button::after,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-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(0.22, 1, 0.36, 1),
margin-left 0.34s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button:hover,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-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-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button:hover::before,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button:hover::before {
transform: translateY(-50%) scale(35);
right: 50%;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button:hover::after,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button:hover::after {
opacity: 1;
width: 16px;
margin-left: 9px;
transform: translateX(0);
}
/* =========================================
3D PRODUCT STAGE
========================================= */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage {
position: relative;
overflow: hidden;
width: 100%;
min-height: 570px;
padding: 0;
border-radius: 36px;
background:
radial-gradient(circle at 50% 22%, rgba(255,255,255,0.14), transparent 33%),
radial-gradient(circle at 82% 72%, rgba(158,35,109,0.11), transparent 36%),
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(135deg, #314258 0%, #0C1B42 100%);
background-size:
auto,
auto,
62px 62px,
62px 62px,
auto;
background-position:
center,
center,
0 0,
0 0,
center;
border: 1px solid rgba(255,255,255,0.10);
box-shadow:
0 34px 88px rgba(8,31,95,0.18),
0 12px 30px rgba(158,35,109,0.06),
inset 0 1px 0 rgba(255,255,255,0.08);
transition:
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.65s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.65s ease;
}
/* Subtle internal light wash */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
radial-gradient(circle at 52% 30%, rgba(255,255,255,0.11), transparent 34%),
linear-gradient(90deg, rgba(255,255,255,0.07), transparent 36%, rgba(255,255,255,0.04));
}
/* Grounding shadow */
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage::after {
content: "";
position: absolute;
left: 22%;
right: 22%;
bottom: 58px;
z-index: 2;
height: 44px;
border-radius: 999px;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0));
filter: blur(13px);
opacity: 0.40;
pointer-events: none;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage model-viewer {
position: relative;
z-index: 3;
width: 100% !important;
height: 570px !important;
display: block;
background: transparent !important;
--poster-color: transparent;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-visual:hover .sg-3d-kitchen-stage {
transform: translateY(-7px);
border-color: rgba(255,255,255,0.16);
box-shadow:
0 42px 102px rgba(8,31,95,0.23),
0 16px 38px rgba(158,35,109,0.08),
inset 0 1px 0 rgba(255,255,255,0.10);
}
/* =========================================
TOP NAV READABILITY OVERLAY
Keep only if the hero outer container has class: sg-products-hero
========================================= */
.sg-products-hero {
position: relative;
overflow: hidden;
isolation: isolate;
}
.sg-products-hero::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 4;
height: 200px;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(7, 21, 61, 0.6) 0%,
rgba(7, 21, 61, 0.20) 36%,
rgba(7, 21, 61, 0.08) 70%,
rgba(7, 21, 61, 0) 100%
);
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1024px) {
.elementor-31 .elementor-element.elementor-element-6926e04 {
min-height: auto;
padding: 104px 5vw 124px;
gap: 46px;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-copy,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-visual {
width: 50%;
flex: 0 0 50%;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-title,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-title .elementor-heading-title {
font-size: clamp(42px, 6vw, 62px);
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-text,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-text p {
font-size: 17px;
line-height: 1.68;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage {
min-height: 480px;
border-radius: 30px;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage model-viewer {
height: 480px !important;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.elementor-31 .elementor-element.elementor-element-6926e04 {
flex-direction: column;
align-items: flex-start;
padding: 86px 20px 104px;
gap: 42px;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-copy,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-visual {
width: 100%;
max-width: 100%;
flex: 0 0 auto;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-title,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-title .elementor-heading-title {
font-size: clamp(38px, 12vw, 52px);
line-height: 1;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-text,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-text p {
font-size: 16px;
line-height: 1.65;
margin-top: 20px;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-actions {
flex-direction: column;
width: 100%;
margin-top: 28px;
gap: 12px;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button {
width: 100%;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage {
min-height: 420px;
border-radius: 26px;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage model-viewer {
height: 420px !important;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage::after {
left: 18%;
right: 18%;
bottom: 46px;
}
.elementor-31 .elementor-element.elementor-element-6926e04::after {
height: 72px;
}
.sg-products-hero::before {
height: 145px;
background:
linear-gradient(
180deg,
rgba(7, 21, 61, 0.42) 0%,
rgba(7, 21, 61, 0.25) 38%,
rgba(7, 21, 61, 0.10) 72%,
rgba(7, 21, 61, 0) 100%
);
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button::before,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button::before,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button::after,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button::after,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-3d-kitchen-stage {
transition: none !important;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-visual:hover .sg-3d-kitchen-stage,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-primary .elementor-button:hover,
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-btn-secondary .elementor-button:hover {
transform: none !important;
}
}
/* =========================================
PRODUCTS HERO — DESKTOP SPACING REFINEMENT
Moves left copy slightly right + reduces middle gap
========================================= */
@media (min-width: 1025px) {
.elementor-31 .elementor-element.elementor-element-6926e04 {
gap: clamp(28px, 3.4vw, 54px) !important;
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-copy {
flex: 0 0 46% !important;
width: 46% !important;
max-width: 690px !important;
transform: translateX(clamp(18px, 2.2vw, 42px));
}
.elementor-31 .elementor-element.elementor-element-6926e04 .sg-products-gateway-visual {
flex: 0 0 54% !important;
width: 54% !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5e4b209 *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5cf61d7 *//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-de4c32f *//* =========================================
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-aec8370 *//* =========================================
SUGARTIA PRODUCTS — 3D SHOWCASE CLEAN FINAL
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 {
--sg-blue: #081f5f;
--sg-deep: #0C1B42;
--sg-pink: #9E236D;
--sg-muted: #5d6884;
--stage-top: #3d4e64;
--stage-mid: #10264a;
--stage-bottom: #0C1B42;
--stage-glow: rgba(158, 35, 109, 0.13);
--prod-accent: #081f5f;
--prod-accent-2: #123477;
position: relative;
overflow: hidden;
isolation: isolate;
width: 100%;
max-width: 100%;
padding: clamp(96px, 8vw, 126px) 20px clamp(140px, 10vw, 180px);
/*background:
radial-gradient(circle at 14% 20%, rgba(158, 35, 109, 0.08), transparent 32%),
radial-gradient(circle at 86% 74%, rgba(8, 31, 95, 0.08), transparent 36%),
linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);*/
}
.elementor-31 .elementor-element.elementor-element-aec8370,
.elementor-31 .elementor-element.elementor-element-aec8370 * {
box-sizing: border-box;
}
/* Section grid / dot background */
/*.elementor-31 .elementor-element.elementor-element-aec8370::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(8,31,95,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(8,31,95,0.055) 1px, transparent 1px),
radial-gradient(circle, rgba(158,35,109,0.13) 1.05px, transparent 2px),
radial-gradient(circle, rgba(8,31,95,0.09) 1.05px, transparent 2px);
background-size:
74px 74px,
74px 74px,
30px 30px,
44px 44px;
background-position:
0 0,
0 0,
12px 16px,
26px 22px;
opacity: 0.62;
}
.elementor-31 .elementor-element.elementor-element-aec8370 > * {
position: relative;
z-index: 2;
}*/
/* =========================================
MAIN LAYOUT
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs {
width: min(1280px, calc(100vw - 40px));
max-width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(42px, 6vw, 76px);
align-items: center;
min-width: 0;
}
/* Category mood variables */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs[data-category="white"] {
--stage-top: #3d4e64;
--stage-mid: #10264a;
--stage-bottom: #0C1B42;
--stage-glow: rgba(158, 35, 109, 0.12);
--prod-accent: #081f5f;
--prod-accent-2: #123477;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs[data-category="brown"] {
--stage-top: #8b6a4b;
--stage-mid: #5e422c;
--stage-bottom: #2c2431;
--stage-glow: rgba(185, 133, 78, 0.28);
--prod-accent: #8B5E34;
--prod-accent-2: #B9854E;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs[data-category="powder"] {
--stage-top: #7b5470;
--stage-mid: #4b3157;
--stage-bottom: #0C1B42;
--stage-glow: rgba(200, 91, 154, 0.26);
--prod-accent: #9E236D;
--prod-accent-2: #C85B9A;
}
/* =========================================
LEFT COPY
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy {
max-width: 590px;
min-width: 0;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-eyebrow {
display: inline-block;
margin-bottom: 18px;
color: var(--sg-pink);
font-size: 12px;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy h2 {
margin: 0;
color: var(--sg-blue);
font-size: clamp(42px, 4.5vw, 72px);
line-height: 0.96;
letter-spacing: -0.06em;
font-weight: 850;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy p {
margin: 24px 0 0;
color: rgba(8, 31, 95, 0.68);
font-size: 18px;
line-height: 1.72;
max-width: 620px;
}
/* =========================================
CATEGORY TABS
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 36px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category:nth-child(1) {
--cat-accent: #081f5f;
--cat-accent-2: #123477;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category:nth-child(2) {
--cat-accent: #8B5E34;
--cat-accent-2: #B9854E;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category:nth-child(3) {
--cat-accent: #9E236D;
--cat-accent-2: #C85B9A;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category {
position: relative;
overflow: hidden;
isolation: isolate;
min-height: 44px;
padding: 12px 18px;
border-radius: 999px;
border: 1px solid rgba(8, 31, 95, 0.13);
background:
linear-gradient(90deg, var(--cat-accent), var(--cat-accent-2)) left / 0% 100% no-repeat,
rgba(255,255,255,0.84);
color: var(--sg-blue);
font-size: 12px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.045em;
text-transform: uppercase;
cursor: pointer;
box-shadow:
0 12px 26px rgba(8, 31, 95, 0.06),
inset 0 1px 0 rgba(255,255,255,0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
color 0.28s ease,
background-size 0.46s cubic-bezier(.22, 1, .36, 1),
border-color 0.28s ease,
transform 0.34s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.34s cubic-bezier(.22, 1, .36, 1);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category::before {
display: none !important;
content: none !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category:hover,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category.is-active {
color: #ffffff;
background-size: 100% 100%, 100% 100%;
border-color: transparent;
transform: translateY(-2px);
box-shadow:
0 18px 38px rgba(8,31,95,0.13),
0 8px 22px rgba(158,35,109,0.08);
}
/* =========================================
PRODUCT PILLS
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product-list {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 620px;
margin-top: 20px;
transition:
opacity 0.34s ease,
filter 0.34s ease,
transform 0.42s cubic-bezier(.22, 1, .36, 1);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product {
position: relative !important;
overflow: hidden !important;
isolation: isolate !important;
width: 100%;
min-height: 58px;
padding: 16px 52px 16px 24px;
border-radius: 999px;
border: 1px solid rgba(8,31,95,0.13) !important;
background:
linear-gradient(135deg, rgba(255,255,255,0.92), rgba(247,249,255,0.74)) !important;
color: var(--sg-blue) !important;
font-size: 15px;
line-height: 1.15;
font-weight: 900;
text-align: left;
cursor: pointer;
box-shadow:
0 14px 32px rgba(8,31,95,0.07),
inset 0 1px 0 rgba(255,255,255,0.92);
transition:
color 0.28s ease,
border-color 0.28s ease,
transform 0.34s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.34s cubic-bezier(.22, 1, .36, 1) !important;
}
/* kill old pseudo layers */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product::before,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product::after {
display: none !important;
content: none !important;
}
/* fill layer */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-prod-pill-fill {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
width: 0%;
background:
linear-gradient(90deg, var(--prod-accent), var(--prod-accent-2));
transition:
width 0.52s cubic-bezier(.22, 1, .36, 1);
}
/* sparkle layer */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-prod-pill-sparkles {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0;
background-image:
radial-gradient(circle, rgba(255,255,255,0.95) 0 1.2px, transparent 2px),
radial-gradient(circle, rgba(255,255,255,0.70) 0 1px, transparent 1.8px),
radial-gradient(circle, rgba(255,255,255,0.78) 0 1.1px, transparent 1.9px),
radial-gradient(circle, rgba(255,255,255,0.62) 0 1px, transparent 1.7px);
background-size:
42px 42px,
54px 54px,
48px 48px,
60px 60px;
background-position:
0 0,
10px 18px,
24px 8px,
4px 30px;
mix-blend-mode: screen;
transition: opacity 0.22s ease;
}
/* text and arrow */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-prod-pill-label,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-prod-pill-arrow {
position: relative;
z-index: 3;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-prod-pill-label {
display: inline-block;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-prod-pill-arrow {
position: absolute;
right: 23px;
top: 50%;
opacity: 0;
transform: translateY(-50%) translateX(-8px);
transition:
opacity 0.28s ease,
transform 0.34s cubic-bezier(.22, 1, .36, 1);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product:hover,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product.is-active {
color: #ffffff !important;
border-color: transparent !important;
transform: translateY(-3px);
box-shadow:
0 18px 40px rgba(8,31,95,0.16),
0 8px 24px rgba(158,35,109,0.08) !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product:hover .sg-prod-pill-fill,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product.is-active .sg-prod-pill-fill {
width: 100%;
}
/* same sparkle animation for hover and active */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product:hover .sg-prod-pill-sparkles,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product.is-active .sg-prod-pill-sparkles,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product.is-active:hover .sg-prod-pill-sparkles {
opacity: 0.9 !important;
animation: sgLiveProductSparkles 2.4s linear infinite !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product:hover .sg-prod-pill-arrow,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product.is-active .sg-prod-pill-arrow {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* =========================================
RIGHT SIDE / 3D VIEW
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-view {
position: relative;
min-width: 0;
max-width: 100%;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage {
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
min-height: 590px;
border-radius: 36px;
border: 0;
outline: none;
background:
radial-gradient(circle at 50% 26%, rgba(255,255,255,0.20), transparent 34%),
radial-gradient(circle at 74% 70%, var(--stage-glow), transparent 38%),
radial-gradient(circle at 24% 78%, rgba(255,255,255,0.08), transparent 34%),
linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px),
radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 2px),
linear-gradient(135deg, var(--stage-top) 0%, var(--stage-mid) 50%, var(--stage-bottom) 100%);
background-size:
145% 145%,
135% 135%,
100% 100%,
62px 62px,
62px 62px,
30px 30px,
auto;
background-position:
50% 35%,
82% 70%,
center,
0 0,
0 0,
12px 16px,
center;
box-shadow:
0 34px 88px rgba(8,31,95,0.18),
0 12px 30px rgba(158,35,109,0.06),
inset 0 0 0 1px rgba(255,255,255,0.09),
inset 0 1px 0 rgba(255,255,255,0.12);
animation: sgProductsShowcaseGlow 12s ease-in-out infinite alternate;
transition:
background 0.65s ease,
box-shadow 0.45s ease,
transform 0.45s cubic-bezier(.22, 1, .36, 1);
}
/* internal light wash */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
border-radius: inherit;
background:
radial-gradient(circle at 52% 30%, rgba(255,255,255,0.12), transparent 34%),
linear-gradient(90deg, rgba(255,255,255,0.07), transparent 36%, rgba(255,255,255,0.04));
opacity: 0.95;
}
/* grounding shadow */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage::after {
content: "";
position: absolute;
left: 24%;
right: 24%;
bottom: 50px;
z-index: 2;
height: 52px;
border-radius: 999px;
background: radial-gradient(ellipse, rgba(0,0,0,0.34), rgba(0,0,0,0));
filter: blur(14px);
opacity: 0.46;
pointer-events: none;
}
/* model viewer visual only */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage model-viewer {
position: relative;
z-index: 3;
width: 100% !important;
max-width: 100% !important;
height: 540px !important;
transform: translateY(20px) scale(0.92);
transform-origin: center center;
--poster-color: transparent;
transition:
opacity 0.34s ease,
transform 0.45s cubic-bezier(.22, 1, .36, 1),
filter 0.34s ease;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.is-changing model-viewer,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.sg-stage-soft-changing model-viewer {
opacity: 0;
transform: translateY(32px) scale(0.89);
filter: blur(3px);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage:not(.is-changing):not(.sg-stage-soft-changing) model-viewer {
opacity: 1;
transform: translateY(20px) scale(0.92);
filter: blur(0);
}
/* 360 hint pill */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-hint {
position: absolute;
top: 22px;
right: 22px;
z-index: 6;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.82);
border: 1px solid rgba(8,31,95,0.10);
box-shadow:
0 12px 28px rgba(8,31,95,0.08),
inset 0 1px 0 rgba(255,255,255,0.72);
color: var(--sg-blue);
font-size: 11px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.06em;
text-transform: uppercase;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
pointer-events: none;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-hint::before {
content: "";
width: 7px;
height: 7px;
margin-right: 8px;
border-radius: 999px;
background: var(--sg-pink);
box-shadow:
0 0 0 0 rgba(158,35,109,0.32);
animation: sgProductPulse 2.2s ease-in-out infinite;
}
/* empty / no model state */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.has-no-model::after {
opacity: 0;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.has-no-model model-viewer {
opacity: 0.14;
filter: blur(1px);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-empty-message {
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
width: min(78%, 360px);
padding: 24px 26px;
border-radius: 24px;
background: rgba(255,255,255,0.84);
border: 1px solid rgba(8,31,95,0.10);
box-shadow:
0 20px 54px rgba(8,31,95,0.08),
inset 0 1px 0 rgba(255,255,255,0.78);
color: var(--sg-blue);
font-size: 16px;
line-height: 1.45;
font-weight: 850;
text-align: center;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -50%) scale(0.96);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
opacity 0.34s ease,
visibility 0.34s ease,
transform 0.45s cubic-bezier(.22, 1, .36, 1);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.has-no-model .sg-products-3d-empty-message {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.has-no-model .sg-products-3d-hint {
opacity: 0;
}
/* transition curtain */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-stage-transition-curtain {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: 0;
background:
radial-gradient(circle at 50% 35%, rgba(255,255,255,0.42), transparent 42%),
radial-gradient(circle at 74% 70%, var(--stage-glow), transparent 42%),
linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.03));
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: opacity 0.28s ease;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.sg-stage-soft-changing .sg-stage-transition-curtain {
opacity: 1;
}
/* stage hover */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-view:hover .sg-products-3d-stage {
transform: translateY(-5px);
box-shadow:
0 42px 102px rgba(8,31,95,0.23),
0 16px 38px rgba(158,35,109,0.08),
inset 0 0 0 1px rgba(255,255,255,0.12),
inset 0 1px 0 rgba(255,255,255,0.12);
}
/* =========================================
INFO CARD
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info {
position: relative;
z-index: 4;
width: min(650px, calc(100% - 36px));
max-width: 100%;
margin: 24px auto clamp(64px, 6vw, 96px);
padding: 26px 30px;
border-radius: 30px;
background:
radial-gradient(circle at 16% 12%, rgba(255,255,255,0.92), transparent 38%),
linear-gradient(135deg, rgba(255,255,255,0.92), rgba(247,249,255,0.76));
border: 1px solid rgba(219,195,210,0.58);
box-shadow:
0 24px 58px rgba(8,31,95,0.10),
0 10px 24px rgba(158,35,109,0.05),
inset 0 1px 0 rgba(255,255,255,0.94);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition:
opacity 0.34s ease,
filter 0.34s ease,
transform 0.42s cubic-bezier(.22, 1, .36, 1);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info span {
display: inline-block;
margin-bottom: 10px;
color: var(--sg-pink);
font-size: 11px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info h3 {
margin: 0;
color: var(--sg-blue);
font-size: clamp(24px, 2.1vw, 32px);
line-height: 1.08;
font-weight: 850;
letter-spacing: -0.045em;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info p {
margin: 12px 0 0;
color: rgba(8,31,95,0.66);
font-size: 15.8px;
line-height: 1.62;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info a {
display: inline-flex;
align-items: center;
margin-top: 16px;
color: var(--sg-pink);
font-size: 12px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.07em;
text-transform: none;
text-decoration: none;
transition:
color 0.28s ease,
transform 0.28s cubic-bezier(.22, 1, .36, 1);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info a:hover {
color: var(--sg-blue);
transform: translateX(4px);
}
/* UI transition when switching */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs.sg-tabs-ui-changing .sg-products-3d-product-list,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs.sg-tabs-ui-changing .sg-products-3d-info {
opacity: 0.30;
filter: blur(4px);
transform: translateY(8px);
}
/* =========================================
ANIMATIONS
========================================= */
@keyframes sgProductPulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(158,35,109,0.26);
}
50% {
box-shadow: 0 0 0 8px rgba(158,35,109,0);
}
}
@keyframes sgProductsShowcaseGlow {
0% {
background-position:
48% 32%,
78% 72%,
center,
0 0,
0 0,
12px 16px,
center;
}
100% {
background-position:
54% 38%,
86% 66%,
center,
0 0,
0 0,
20px 26px,
center;
}
}
@keyframes sgLiveProductSparkles {
0% {
background-position:
0 0,
10px 18px,
24px 8px,
4px 30px;
}
100% {
background-position:
42px 42px,
64px 72px,
72px 56px,
64px 90px;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1024px) {
.elementor-31 .elementor-element.elementor-element-aec8370 {
padding: 86px 18px 120px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs {
width: min(780px, calc(100vw - 36px));
grid-template-columns: minmax(0, 1fr);
gap: 46px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy {
max-width: 760px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product-list {
max-width: 100%;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage {
min-height: 540px;
border-radius: 32px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage model-viewer {
height: 500px !important;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.elementor-31 .elementor-element.elementor-element-aec8370 {
padding: 74px 16px 110px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs {
width: calc(100vw - 32px);
gap: 38px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy h2 {
font-size: clamp(34px, 10vw, 48px);
line-height: 1;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy p {
font-size: 16px;
line-height: 1.65;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category-tabs {
gap: 9px;
margin-top: 30px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category {
min-height: 40px;
padding: 10px 14px;
font-size: 11px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product {
min-height: 54px;
padding: 14px 42px 14px 18px;
font-size: 13.5px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage {
min-height: 500px;
border-radius: 28px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage model-viewer {
height: 400px !important;
transform: translateY(18px) scale(0.90);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.is-changing model-viewer,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.sg-stage-soft-changing model-viewer {
transform: translateY(28px) scale(0.87);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage:not(.is-changing):not(.sg-stage-soft-changing) model-viewer {
transform: translateY(18px) scale(0.90);
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-hint {
top: 16px;
right: 16px;
min-height: 32px;
padding: 7px 12px;
font-size: 10px;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage::after {
bottom: 42px;
left: 20%;
right: 20%;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info {
width: 100%;
padding: 22px;
border-radius: 24px;
margin-top: 18px;
margin-bottom: 64px;
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage model-viewer,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-empty-message,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-hint::before,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product-list,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-prod-pill-fill,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-prod-pill-sparkles {
transition: none !important;
animation: none !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-category:hover,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-product:hover,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-view:hover .sg-products-3d-stage {
transform: none !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs.sg-tabs-ui-changing .sg-products-3d-product-list,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs.sg-tabs-ui-changing .sg-products-3d-info {
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
}
/* =========================================
PRODUCTS 3D SHOWCASE — FORCE SUGARTIA BLUE TEXT
Fixes Elementor heading color override
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy h2,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy h2 *,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy .elementor-heading-title,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info h3,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info h3 *,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info .elementor-heading-title {
color: #081f5f !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy p,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs-copy p *,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info p,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info p * {
color: rgba(8, 31, 95, 0.68) !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-eyebrow,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info span,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-info a {
color: #9E236D !important;
}
/* =========================================
PRODUCTS 3D SHOWCASE — REMOVE UI LAG
Keep transition only on the model/stage, not the text/list.
========================================= */
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs.sg-tabs-ui-changing .sg-products-3d-product-list,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-tabs.sg-tabs-ui-changing .sg-products-3d-info {
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.is-changing model-viewer,
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage.sg-stage-soft-changing model-viewer {
opacity: 0 !important;
transform: translateY(28px) scale(0.90) !important;
filter: blur(2px) !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-products-3d-stage:not(.is-changing):not(.sg-stage-soft-changing) model-viewer {
opacity: 1 !important;
transform: translateY(20px) scale(0.92) !important;
filter: blur(0) !important;
}
.elementor-31 .elementor-element.elementor-element-aec8370 .sg-stage-transition-curtain {
transition: opacity 0.22s ease !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-383e329 *//* =========================================
SUGARTIA PRODUCTS — CHOOSE YOUR PATH
Final cleaned version
Navy section + glass cards + async glow + compact 100vh desktop
========================================= */
.elementor-31 .elementor-element.elementor-element-383e329 {
--sg-blue: #081f5f;
--sg-deep: #0C1B42;
--sg-dark: #07153d;
--sg-pink: #9E236D;
--sg-soft-pink: #f3a5cf;
--sg-cyan: #4A84DC;
--sg-soft-cyan: #aad7ff;
--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");
--sg-icon-croissant: url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Croissant.webp");
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(28px, 4vh, 48px) 20px clamp(30px, 4vh, 52px);
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
background:
radial-gradient(circle at 16% 22%, rgba(158,35,109,0.22), transparent 32%),
radial-gradient(circle at 86% 74%, rgba(255,255,255,0.08), transparent 34%),
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
radial-gradient(circle, rgba(243,165,207,0.16) 1px, transparent 2px),
radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 2px),
linear-gradient(135deg, #07153d 0%, #0C1B42 52%, #07153d 100%);
background-size:
auto,
auto,
74px 74px,
74px 74px,
30px 30px,
44px 44px,
auto;
background-position:
center,
center,
0 0,
0 0,
12px 16px,
26px 22px,
center;
}
.elementor-31 .elementor-element.elementor-element-383e329,
.elementor-31 .elementor-element.elementor-element-383e329 * {
box-sizing: border-box;
}
.elementor-31 .elementor-element.elementor-element-383e329 > * {
position: relative;
z-index: 2;
}
/* Large subtle dessert watermark */
.elementor-31 .elementor-element.elementor-element-383e329::after {
content: "";
position: absolute;
right: -70px;
top: 80px;
z-index: 1;
width: clamp(180px, 18vw, 300px);
aspect-ratio: 1 / 1;
background-image: var(--sg-icon-waffles);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.105;
transform: rotate(10deg);
filter:
brightness(0)
invert(1)
drop-shadow(0 22px 34px rgba(0,0,0,0.16));
mix-blend-mode: screen;
pointer-events: none;
}
/* =========================================
INTRO
========================================= */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro {
position: relative;
max-width: 740px;
margin: 0 auto clamp(18px, 2.6vh, 28px);
text-align: center;
}
/* Floating donut */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro::before {
content: "";
position: absolute;
left: -120px;
top: 10px;
z-index: -1;
width: 74px;
aspect-ratio: 1 / 1;
background-image: var(--sg-icon-donut);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.22;
transform: rotate(-14deg);
filter:
brightness(0)
invert(1)
drop-shadow(0 18px 28px rgba(0,0,0,0.20));
mix-blend-mode: screen;
animation: sgPathIconFloatA 7s ease-in-out infinite alternate;
pointer-events: none;
}
/* Floating croissant */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro::after {
content: "";
position: absolute;
right: -125px;
top: 52px;
z-index: -1;
width: 88px;
aspect-ratio: 1 / 1;
background-image: var(--sg-icon-croissant);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.22;
transform: rotate(12deg);
filter:
brightness(0)
invert(1)
drop-shadow(0 18px 28px rgba(0,0,0,0.20));
mix-blend-mode: screen;
animation: sgPathIconFloatB 8s ease-in-out infinite alternate;
pointer-events: none;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-eyebrow,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-eyebrow .elementor-heading-title {
color: var(--sg-soft-pink);
font-size: 11px;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.22em;
margin-bottom: 10px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-title,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-title .elementor-heading-title {
color: #ffffff;
font-size: clamp(34px, 3.45vw, 52px);
line-height: 0.98;
letter-spacing: -0.055em;
font-weight: 850;
text-shadow:
0 18px 42px rgba(0,0,0,0.30),
0 0 24px rgba(255,255,255,0.08);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-text,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-text p {
color: rgba(255,255,255,0.76);
font-size: 15.5px;
line-height: 1.5;
max-width: 620px;
margin: 10px auto 0;
}
/* =========================================
GRID
========================================= */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid {
position: relative;
width: min(1080px, calc(100vw - 48px));
max-width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
/* Floating cake */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid::before {
content: "";
position: absolute;
left: -78px;
bottom: 18px;
z-index: 1;
width: 76px;
aspect-ratio: 1 / 1;
background-image: var(--sg-icon-cake);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.22;
transform: rotate(-8deg);
filter:
brightness(0)
invert(1)
drop-shadow(0 18px 28px rgba(0,0,0,0.20));
mix-blend-mode: screen;
animation: sgPathIconFloatC 7.5s ease-in-out infinite alternate;
pointer-events: none;
}
/* Floating cookie */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid::after {
content: "";
position: absolute;
right: -70px;
bottom: 60px;
z-index: 1;
width: 70px;
aspect-ratio: 1 / 1;
background-image: var(--sg-icon-cookie);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.22;
transform: rotate(15deg);
filter:
brightness(0)
invert(1)
drop-shadow(0 18px 28px rgba(0,0,0,0.20));
mix-blend-mode: screen;
animation: sgPathIconFloatD 8.2s ease-in-out infinite alternate;
pointer-events: none;
}
/* =========================================
CARDS
========================================= */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card {
position: relative;
overflow: visible;
isolation: isolate;
min-height: min(330px, 41vh);
padding: clamp(22px, 2.35vw, 32px);
display: flex;
flex-direction: column;
justify-content: flex-start;
border-radius: 30px;
border: 1px solid rgba(255,255,255,0.16);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transition:
transform 0.46s cubic-bezier(.22, 1, .36, 1),
box-shadow 0.46s cubic-bezier(.22, 1, .36, 1),
border-color 0.34s ease;
}
/* Inner subtle card grid */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card::before {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
background-size: 54px 54px;
opacity: 0.24;
pointer-events: none;
}
/* Animated glow layer */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card::after {
content: "";
display: block;
position: absolute;
inset: -5px;
z-index: 1;
border-radius: inherit;
pointer-events: none;
opacity: 0.92;
background-image: none;
filter: none;
mix-blend-mode: screen;
}
/* Keep real card content above glow */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card > * {
position: relative;
z-index: 3;
}
/* Home / B2C card — warm pink glass */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-home {
background:
radial-gradient(circle at 12% 10%, rgba(255,255,255,0.18), transparent 34%),
radial-gradient(circle at 82% 18%, rgba(243,165,207,0.28), transparent 36%),
radial-gradient(circle at 92% 88%, rgba(158,35,109,0.34), transparent 42%),
linear-gradient(
135deg,
rgba(255,255,255,0.13) 0%,
rgba(158,35,109,0.14) 48%,
rgba(255,255,255,0.055) 100%
);
border-color: rgba(243,165,207,0.40);
box-shadow:
0 34px 86px rgba(0,0,0,0.24),
0 18px 44px rgba(158,35,109,0.19),
inset 0 1px 0 rgba(255,255,255,0.22);
}
/* Pro card — cool blue glass */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro {
background:
radial-gradient(circle at 12% 10%, rgba(255,255,255,0.16), transparent 34%),
radial-gradient(circle at 82% 18%, rgba(150,210,255,0.26), transparent 36%),
radial-gradient(circle at 92% 88%, rgba(74,132,220,0.34), transparent 42%),
linear-gradient(
135deg,
rgba(255,255,255,0.115) 0%,
rgba(74,132,220,0.13) 48%,
rgba(255,255,255,0.050) 100%
);
border-color: rgba(170,215,255,0.40);
box-shadow:
0 34px 86px rgba(0,0,0,0.24),
0 18px 44px rgba(74,132,220,0.18),
inset 0 1px 0 rgba(255,255,255,0.20);
}
/* Home glow */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-home::after {
border: 1px solid rgba(255,198,232,0.50);
box-shadow:
0 0 0 1px rgba(255,255,255,0.12),
0 0 18px rgba(243,165,207,0.34),
0 0 42px rgba(158,35,109,0.36),
0 0 86px rgba(158,35,109,0.22);
animation:
sgHomeCardGlowPulse 6.8s ease-in-out infinite,
sgHomeCardGlowDrift 10.6s ease-in-out infinite;
}
/* Pro glow */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro::after {
border: 1px solid rgba(190,226,255,0.48);
box-shadow:
0 0 0 1px rgba(255,255,255,0.10),
0 0 18px rgba(150,210,255,0.32),
0 0 42px rgba(74,132,220,0.34),
0 0 86px rgba(74,132,220,0.20);
animation:
sgProCardGlowPulse 8.4s ease-in-out infinite,
sgProCardGlowDrift 12.8s ease-in-out infinite;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card:hover {
transform: translateY(-7px);
border-color: rgba(255,255,255,0.30);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-home:hover::after {
opacity: 1;
transform: scale(1.006);
box-shadow:
0 0 0 1px rgba(255,255,255,0.18),
0 0 24px rgba(243,165,207,0.48),
0 0 56px rgba(158,35,109,0.46),
0 0 104px rgba(158,35,109,0.30);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro:hover::after {
opacity: 1;
transform: scale(1.006);
box-shadow:
0 0 0 1px rgba(255,255,255,0.16),
0 0 24px rgba(150,210,255,0.46),
0 0 56px rgba(74,132,220,0.44),
0 0 104px rgba(74,132,220,0.28);
}
/* =========================================
CARD TEXT
========================================= */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-eyebrow,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-eyebrow .elementor-heading-title,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro .sg-products-path-card-eyebrow,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro .sg-products-path-card-eyebrow .elementor-heading-title {
color: var(--sg-soft-pink);
font-size: 10.5px;
font-weight: 900;
letter-spacing: 0.18em;
margin-bottom: 10px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-title,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-title .elementor-heading-title {
color: #ffffff;
font-size: clamp(27px, 2.45vw, 38px);
line-height: 1;
letter-spacing: -0.047em;
font-weight: 850;
text-shadow:
0 14px 34px rgba(0,0,0,0.24),
0 0 18px rgba(255,255,255,0.06);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-text,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-text p {
color: rgba(255,255,255,0.74);
font-size: 14.5px;
line-height: 1.5;
max-width: 500px;
min-height: 0;
margin-top: 12px;
}
/* =========================================
TAGS / PILLS
========================================= */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-tags {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 14px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-tags span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 7px 11px;
border-radius: 999px;
color: #ffffff;
font-size: 10px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.045em;
text-transform: none;
box-shadow:
0 8px 20px rgba(0,0,0,0.10),
inset 0 1px 0 rgba(255,255,255,0.16);
transition:
transform 0.18s ease,
filter 0.18s ease,
background 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-home .sg-products-path-tags span {
border: 1px solid rgba(243,165,207,0.28);
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.20), rgba(158,35,109,0.13));
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro .sg-products-path-tags span {
border: 1px solid rgba(170,215,255,0.26);
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), rgba(74,132,220,0.13));
}
/* Pinball light-up for left card pills */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-home .sg-products-path-tags span:hover {
transform: translateY(-2px) scale(1.045);
filter: brightness(1.18) saturate(1.14);
border-color: rgba(243,165,207,0.54);
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.28), rgba(243,165,207,0.18));
box-shadow:
0 0 0 1px rgba(255,255,255,0.18),
0 0 14px rgba(243,165,207,0.46),
0 0 32px rgba(158,35,109,0.34),
0 12px 24px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.22);
}
/* Pinball light-up for right card pills */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro .sg-products-path-tags span:hover {
transform: translateY(-2px) scale(1.045);
filter: brightness(1.18) saturate(1.14);
border-color: rgba(170,215,255,0.54);
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.28), rgba(74,132,220,0.18));
box-shadow:
0 0 0 1px rgba(255,255,255,0.16),
0 0 14px rgba(150,210,255,0.46),
0 0 32px rgba(74,132,220,0.34),
0 12px 24px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.22);
}
/* =========================================
BUTTONS
========================================= */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card .sg-products-path-card-btn {
margin-top: 18px;
padding-top: 0;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button {
position: relative;
overflow: hidden;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 12px 20px;
background:
radial-gradient(circle at 30% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0.10));
color: #ffffff;
border: 1px solid rgba(255,255,255,0.22);
font-size: 11px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: none;
box-shadow:
0 16px 34px rgba(0,0,0,0.14),
inset 0 1px 0 rgba(255,255,255,0.16);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:
transform 0.20s ease,
filter 0.20s ease,
color 0.28s ease,
border-color 0.20s ease,
box-shadow 0.20s ease;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .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-31 .elementor-element.elementor-element-383e329 .sg-products-path-home .sg-products-path-card-btn .elementor-button::before {
background: var(--sg-pink);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro .sg-products-path-card-btn .elementor-button::before {
background: var(--sg-cyan);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button::after {
content: "→";
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-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button:hover {
transform: translateY(-3px) scale(1.018);
color: #ffffff;
filter: brightness(1.12) saturate(1.12);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button:hover::before {
transform: translateY(-50%) scale(34);
right: 50%;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button:hover::after {
opacity: 1;
width: 16px;
margin-left: 9px;
transform: translateX(0);
}
/* Left card button hover */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-home .sg-products-path-card-btn .elementor-button:hover {
border-color: rgba(243,165,207,0.54);
box-shadow:
0 0 0 1px rgba(255,255,255,0.18),
0 0 16px rgba(243,165,207,0.48),
0 0 36px rgba(158,35,109,0.30),
0 20px 46px rgba(158,35,109,0.20),
0 10px 24px rgba(0,0,0,0.16),
inset 0 1px 0 rgba(255,255,255,0.22);
}
/* Right card button hover */
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-pro .sg-products-path-card-btn .elementor-button:hover {
border-color: rgba(170,215,255,0.54);
box-shadow:
0 0 0 1px rgba(255,255,255,0.16),
0 0 16px rgba(150,210,255,0.48),
0 0 38px rgba(74,132,220,0.36),
0 20px 46px rgba(74,132,220,0.22),
0 10px 24px rgba(0,0,0,0.16),
inset 0 1px 0 rgba(255,255,255,0.22);
}
/* =========================================
FLOATING ICON ANIMATIONS
========================================= */
@keyframes sgPathIconFloatA {
from {
transform: translate3d(0, 0, 0) rotate(-14deg);
}
to {
transform: translate3d(8px, -14px, 0) rotate(-7deg);
}
}
@keyframes sgPathIconFloatB {
from {
transform: translate3d(0, 0, 0) rotate(12deg);
}
to {
transform: translate3d(-10px, 12px, 0) rotate(6deg);
}
}
@keyframes sgPathIconFloatC {
from {
transform: translate3d(0, 0, 0) rotate(-8deg);
}
to {
transform: translate3d(12px, -10px, 0) rotate(-14deg);
}
}
@keyframes sgPathIconFloatD {
from {
transform: translate3d(0, 0, 0) rotate(15deg);
}
to {
transform: translate3d(-10px, -12px, 0) rotate(22deg);
}
}
/* =========================================
CARD GLOW ANIMATIONS
========================================= */
@keyframes sgHomeCardGlowPulse {
0% {
opacity: 0.82;
box-shadow:
0 0 0 1px rgba(255,255,255,0.08),
0 0 14px rgba(243,165,207,0.22),
0 0 34px rgba(158,35,109,0.24),
0 0 68px rgba(158,35,109,0.16);
}
21% {
opacity: 1;
box-shadow:
0 0 0 1px rgba(255,255,255,0.16),
0 0 24px rgba(243,165,207,0.42),
0 0 58px rgba(158,35,109,0.44),
0 0 108px rgba(158,35,109,0.28);
}
46% {
opacity: 0.76;
box-shadow:
0 0 0 1px rgba(255,255,255,0.07),
0 0 13px rgba(243,165,207,0.20),
0 0 32px rgba(158,35,109,0.22),
0 0 62px rgba(158,35,109,0.14);
}
73% {
opacity: 1;
box-shadow:
0 0 0 1px rgba(255,255,255,0.15),
0 0 26px rgba(243,165,207,0.40),
0 0 62px rgba(158,35,109,0.43),
0 0 116px rgba(158,35,109,0.27);
}
100% {
opacity: 0.86;
box-shadow:
0 0 0 1px rgba(255,255,255,0.10),
0 0 17px rgba(243,165,207,0.26),
0 0 40px rgba(158,35,109,0.28),
0 0 78px rgba(158,35,109,0.18);
}
}
@keyframes sgProCardGlowPulse {
0% {
opacity: 0.78;
box-shadow:
0 0 0 1px rgba(255,255,255,0.07),
0 0 14px rgba(150,210,255,0.20),
0 0 34px rgba(74,132,220,0.22),
0 0 68px rgba(74,132,220,0.14);
}
27% {
opacity: 1;
box-shadow:
0 0 0 1px rgba(255,255,255,0.14),
0 0 24px rgba(150,210,255,0.40),
0 0 58px rgba(74,132,220,0.42),
0 0 108px rgba(74,132,220,0.26);
}
52% {
opacity: 0.74;
box-shadow:
0 0 0 1px rgba(255,255,255,0.07),
0 0 13px rgba(150,210,255,0.18),
0 0 32px rgba(74,132,220,0.20),
0 0 62px rgba(74,132,220,0.13);
}
79% {
opacity: 1;
box-shadow:
0 0 0 1px rgba(255,255,255,0.15),
0 0 26px rgba(150,210,255,0.42),
0 0 62px rgba(74,132,220,0.43),
0 0 116px rgba(74,132,220,0.27);
}
100% {
opacity: 0.84;
box-shadow:
0 0 0 1px rgba(255,255,255,0.09),
0 0 17px rgba(150,210,255,0.24),
0 0 40px rgba(74,132,220,0.26),
0 0 78px rgba(74,132,220,0.17);
}
}
@keyframes sgHomeCardGlowDrift {
0% { transform: translate3d(0,0,0) scale(1); }
24% { transform: translate3d(1px,-1px,0) scale(1.004); }
49% { transform: translate3d(-1px,1px,0) scale(0.998); }
76% { transform: translate3d(1px,1px,0) scale(1.005); }
100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes sgProCardGlowDrift {
0% { transform: translate3d(0,0,0) scale(1); }
19% { transform: translate3d(-1px,1px,0) scale(1.003); }
44% { transform: translate3d(1px,0,0) scale(0.999); }
70% { transform: translate3d(-1px,-1px,0) scale(1.004); }
100% { transform: translate3d(0,0,0) scale(1); }
}
/* =========================================
SHORT LAPTOP HEIGHT REFINEMENT
========================================= */
@media (min-width: 1025px) and (max-height: 760px) {
.elementor-31 .elementor-element.elementor-element-383e329 {
padding: 22px 20px 28px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro {
margin-bottom: 18px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-title,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-title .elementor-heading-title {
font-size: clamp(30px, 3.1vw, 46px);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-text,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-text p {
font-size: 14.5px;
line-height: 1.45;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card {
min-height: 285px;
padding: 22px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-title,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-title .elementor-heading-title {
font-size: clamp(25px, 2.2vw, 34px);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-text,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-text p {
font-size: 13.8px;
line-height: 1.42;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-tags {
margin-top: 10px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card .sg-products-path-card-btn {
margin-top: 14px;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1024px) {
.elementor-31 .elementor-element.elementor-element-383e329 {
min-height: auto;
padding: 56px 18px 70px;
display: block;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro {
max-width: 760px;
margin-bottom: 30px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid {
width: min(880px, calc(100vw - 36px));
gap: 18px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card {
min-height: 310px;
padding: 28px;
border-radius: 28px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro::before {
left: -70px;
width: 68px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro::after {
right: -64px;
width: 78px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid::before,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid::after {
display: none;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.elementor-31 .elementor-element.elementor-element-383e329 {
min-height: auto;
padding: 48px 16px 60px;
display: block;
}
.elementor-31 .elementor-element.elementor-element-383e329::after,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro::before,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro::after,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid::before,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid::after {
display: none;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro {
text-align: left;
margin-bottom: 24px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-title,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-title .elementor-heading-title {
font-size: clamp(32px, 9vw, 44px);
line-height: 1;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-text,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-text p {
font-size: 15.5px;
line-height: 1.55;
margin-top: 12px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid {
width: calc(100vw - 32px);
grid-template-columns: 1fr;
gap: 18px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card {
min-height: auto;
padding: 24px 22px;
border-radius: 26px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-title,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-title .elementor-heading-title {
font-size: clamp(29px, 8.5vw, 40px);
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-text,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-text p {
font-size: 14.8px;
line-height: 1.5;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-tags {
margin-top: 14px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card .sg-products-path-card-btn {
margin-top: 18px;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button {
width: 100%;
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro::before,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-intro::after,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid::before,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-grid::after,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card::after,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button::before,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button::after {
animation: none !important;
transition: none !important;
}
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card:hover,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card:hover::after,
.elementor-31 .elementor-element.elementor-element-383e329 .sg-products-path-card-btn .elementor-button:hover {
transform: none !important;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-4e9a3da *//* =========================================
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-fa836dd *//* =========================================
SUGARTIA PRODUCTS — FINAL CTA DARK PANEL
Different visual rhythm from previous light sections
========================================= */
.elementor-31 .elementor-element.elementor-element-fa836dd {
--sg-blue: #081f5f;
--sg-deep: #0C1B42;
--sg-pink: #9E236D;
--sg-icon-cookie: url("https://sugartia-staging.digiglowmedia.gr/wp-content/uploads/2026/05/Sugar-Cube-8.png");
position: relative;
overflow: hidden;
isolation: isolate;
padding: clamp(92px, 8vw, 124px) 20px clamp(100px, 8vw, 138px);
/*background:
radial-gradient(circle at 12% 20%, rgba(158, 35, 109, 0.08), transparent 34%),
radial-gradient(circle at 86% 78%, rgba(8, 31, 95, 0.08), transparent 38%),
linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);*/
}
.elementor-31 .elementor-element.elementor-element-fa836dd,
.elementor-31 .elementor-element.elementor-element-fa836dd * {
box-sizing: border-box;
}
/* Page grid / dots */
/*.elementor-31 .elementor-element.elementor-element-fa836dd::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(8,31,95,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(8,31,95,0.045) 1px, transparent 1px),
radial-gradient(circle, rgba(158,35,109,0.12) 1px, transparent 2px),
radial-gradient(circle, rgba(8,31,95,0.075) 1px, transparent 2px);
background-size:
74px 74px,
74px 74px,
30px 30px,
44px 44px;
background-position:
0 0,
0 0,
12px 16px,
26px 22px;
opacity: 0.58;
}*/
/* Large soft decorative icon behind the panel */
.elementor-31 .elementor-element.elementor-element-fa836dd::after {
content: "";
position: absolute;
left: -72px;
bottom: 24px;
z-index: 1;
width: clamp(190px, 18vw, 320px);
aspect-ratio: 1 / 1;
background-image: var(--sg-icon-waffles);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.07;
transform: rotate(-12deg);
pointer-events: none;
}
.elementor-31 .elementor-element.elementor-element-fa836dd > * {
position: relative;
z-index: 2;
}
/* =========================================
DARK CTA CARD
========================================= */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-card {
position: relative;
overflow: hidden;
isolation: isolate;
width: min(1120px, calc(100vw - 40px));
max-width: 100%;
margin: 0 auto;
padding: clamp(54px, 5vw, 76px) clamp(32px, 5vw, 72px);
border-radius: 40px;
text-align: center;
background:
radial-gradient(circle at 16% 22%, rgba(158,35,109,0.34), transparent 36%),
radial-gradient(circle at 86% 76%, rgba(255,255,255,0.10), transparent 34%),
linear-gradient(135deg, #14285a 0%, #081f5f 42%, #0C1B42 100%);
border: 1px solid rgba(255,255,255,0.12);
box-shadow:
0 34px 96px rgba(8,31,95,0.24),
0 16px 36px rgba(158,35,109,0.10),
inset 0 1px 0 rgba(255,255,255,0.12);
}
/* Dark card grid */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 2px);
background-size:
62px 62px,
62px 62px,
34px 34px;
background-position:
0 0,
0 0,
12px 16px;
opacity: 0.55;
}
/* Floating cookie corner */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-card::after {
content: "";
position: absolute;
right: -22px;
top: -26px;
z-index: 1;
width: clamp(120px, 12vw, 190px);
aspect-ratio: 1 / 1;
background-image: var(--sg-icon-cookie);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.82;
transform: rotate(14deg);
filter:
drop-shadow(0 24px 32px rgba(0,0,0,0.18))
saturate(1.04);
animation: sgFinalCtaCookieFloat 7s ease-in-out infinite alternate;
pointer-events: none;
}
/* Inner content above decoration */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-eyebrow,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-title,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-text,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-actions {
position: relative;
z-index: 3;
}
/* Small decorative croissant near lower area */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-actions::before {
content: "";
position: absolute;
left: -120px;
bottom: -24px;
z-index: -1;
width: 92px;
aspect-ratio: 1 / 1;
background-image: var(--sg-icon-croissant);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.56;
transform: rotate(-10deg);
filter: drop-shadow(0 18px 24px rgba(0,0,0,0.14));
animation: sgFinalCtaCroissantFloat 8s ease-in-out infinite alternate;
pointer-events: none;
}
/* =========================================
TEXT
========================================= */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-eyebrow,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-eyebrow .elementor-heading-title {
color: #f1a6cd !important;
font-size: 12px;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 18px;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-title,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-title *,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-title .elementor-heading-title {
color: #ffffff !important;
font-size: clamp(38px, 4vw, 64px);
line-height: 1.02;
letter-spacing: -0.055em;
font-weight: 850;
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-text,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-text *,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-text p {
color: rgba(255,255,255,0.74) !important;
font-size: 17.5px;
line-height: 1.75;
max-width: 740px;
margin: 24px auto 0;
}
/* =========================================
ACTIONS
========================================= */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 38px;
}
/* Button base */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-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: 15px 30px;
font-size: 13px;
line-height: 1;
font-weight: 900;
letter-spacing: 0.04em;
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);
}
/* Primary */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button {
background: #ffffff;
color: var(--sg-blue);
border: 1px solid rgba(255,255,255,0.92);
box-shadow:
0 16px 38px rgba(0,0,0,0.16),
inset 0 1px 0 rgba(255,255,255,0.9);
}
/* Secondary */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button {
background: rgba(255,255,255,0.08);
color: #ffffff;
border: 1px solid rgba(255,255,255,0.26);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.09);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Fill dot */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button::before,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-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-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button::before {
background: var(--sg-pink);
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button::before {
background: #ffffff;
}
/* Arrow */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button::after,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-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);
}
/* Hover */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button:hover,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button:hover {
transform: translateY(-3px);
border-color: transparent;
box-shadow:
0 20px 44px rgba(0,0,0,0.18),
0 10px 24px rgba(158,35,109,0.14);
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button:hover {
color: #ffffff;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button:hover {
color: var(--sg-blue);
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button:hover::before,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button:hover::before {
transform: translateY(-50%) scale(36);
right: 50%;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button:hover::after,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button:hover::after {
opacity: 1;
width: 16px;
margin-left: 9px;
transform: translateX(0);
}
/* Subtle shine */
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button .elementor-button-text,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button .elementor-button-text {
position: relative;
z-index: 3;
}
/* =========================================
ANIMATIONS
========================================= */
@keyframes sgFinalCtaCookieFloat {
from {
transform: translate3d(0, 0, 0) rotate(14deg);
}
to {
transform: translate3d(-8px, 12px, 0) rotate(8deg);
}
}
@keyframes sgFinalCtaCroissantFloat {
from {
transform: translate3d(0, 0, 0) rotate(-10deg);
}
to {
transform: translate3d(12px, -8px, 0) rotate(-16deg);
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1024px) {
.elementor-31 .elementor-element.elementor-element-fa836dd {
padding: 86px 18px 106px;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-card {
width: min(860px, calc(100vw - 36px));
padding: 54px 38px;
border-radius: 34px;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-card::after {
width: 120px;
right: -18px;
top: -18px;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-actions::before {
display: none;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.elementor-31 .elementor-element.elementor-element-fa836dd {
padding: 74px 16px 88px;
}
.elementor-31 .elementor-element.elementor-element-fa836dd::after {
display: none;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-card {
width: calc(100vw - 32px);
padding: 42px 24px 34px;
border-radius: 28px;
text-align: left;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-card::after {
width: 94px;
right: -28px;
top: -20px;
opacity: 0.54;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-eyebrow,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-eyebrow .elementor-heading-title {
font-size: 11px;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-title,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-title *,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-title .elementor-heading-title {
font-size: clamp(32px, 10vw, 46px);
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-text,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-text *,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-text p {
font-size: 16px;
line-height: 1.65;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-actions {
align-items: stretch;
flex-direction: column;
width: 100%;
margin-top: 30px;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button {
width: 100%;
}
}
/* =========================================
REDUCED MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-card::after,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-cta-actions::before,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button::before,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button::before,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button::after,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button::after {
animation: none !important;
transition: none !important;
}
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-primary .elementor-button:hover,
.elementor-31 .elementor-element.elementor-element-fa836dd .sg-products-final-btn-secondary .elementor-button:hover {
transform: none !important;
}
}/* End custom CSS */
/* Start custom CSS *//* End custom CSS */