.loader-logo,
.page-loader {
display: flex;
align-items: center;
}
.hero,
.range-tabs,
.spot-ticker,
body.menu-open {
overflow: hidden;
}
.hero,
.plan-card {
isolation: isolate;
}
.btn-primary,
.btn-secondary,
.dropdown-menu a,
.junu-shop-btn,
.plan-button,
.view-all,
.view-more,
a {
text-decoration: none;
}
.eyebrow,
.product-info small,
.security-label {
text-transform: uppercase;
}
.benefit-icon,
.care-btn span,
.coin::after,
.igel-check {
place-items: center;
}
.benefit-tab span,
.junu-cart-price,
.junu-divider span,
.junu-summary-row strong,
.price-axis span,
.range-tabs button,
.spot-ticker {
white-space: nowrap;
}
.benefits-overlay,
.big-quote,
.dashboard-card::before,
.features-center,
.grid-lines,
.hero-noise,
.hero::after,
.junu-input-icon,
.page-loader.hide,
.security-visual::before,
.select-arrow,
.who-use-section::before {
pointer-events: none;
}
:root {
--bg: #050505;
--bg-soft: #0a090d;
--white: #ffffff;
--muted: rgba(255, 255, 255, 0.58);
--muted-2: rgba(255, 255, 255, 0.38);
--border: rgba(255, 255, 255, 0.11);
--purple: #a66cff;
--purple-light: #d18cff;
--container: 1320px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
a {
color: #fff;
}
button {
font-family: inherit;
}
img {
max-width: 100%;
display: block;
}
.container {
width: min(var(--container), calc(100% - 80px));
margin: 0 auto;
}
.page-loader {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 999999;
justify-content: center;
background: #120808;
opacity: 1;
visibility: visible;
transition: opacity 0.5s, visibility 0.5s;
}
.navbar,
.navbar.scrolled,
.spot-ticker {
background: #881b1b;
}
.page-loader.hide {
opacity: 0;
visibility: hidden;
}
.loader-logo {
position: relative;
width: 100px;
height: 100px;
justify-content: center;
}
.spot-ticker,
.ticker-track {
display: flex;
align-items: center;
}
.loader-logo img {
width: 70px;
height: auto;
display: block;
object-fit: contain;
}
.loader-logo::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 3px solid #eee7d8;
border-top-color: #b88925;
border-right-color: #b88925;
animation: 1s linear infinite junuLoaderSpin;
}
.loader-logo span {
position: absolute;
right: 3px;
bottom: 8px;
color: #b88925;
font-size: 22px;
font-weight: 800;
animation: 1s ease-in-out infinite junuDotPulse;
}
@keyframes junuLoaderSpin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
@keyframes junuDotPulse {
0%,
100% {
opacity: 0.3;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.15);
}
}
.spot-ticker {
width: 100%;
height: 44px;
position: sticky;
top: 0;
z-index: 9999;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ticker-track {
width: max-content;
animation: 28s linear infinite tickerMove;
}
.nav-container,
.ticker-item {
align-items: center;
display: flex;
}
.ticker-item .metal-name {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.ticker-item {
gap: 9px;
padding: 0 38px;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1;
 display: flex;
  justify-content: center;
}

.ticker-item strong {
color: #fff;
font-size: 16px;
font-weight: 700;

}
.ticker-item .up {
color: #8ed8b8;
font-weight: 600;
}
.ticker-item .down {
color: #e9a7a0;
font-weight: 600;
}
@keyframes tickerMove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.products-track:hover,
.spot-ticker:hover .ticker-track,
.testimonial-slider:hover .testimonial-track {
animation-play-state: paused;
}
@media (max-width: 768px) {
    .checkout-container{
        grid-template-columns:1fr;
    }
.related-card {
flex: 0 0 calc((100% - 48px) / 2) !important;
}

.spot-ticker {
height: 42px;
}
.ticker-item {
gap: 7px;
padding: 0 25px;
font-size: 13px;
}
.ticker-item strong {
font-size: 14px;
}
.ticker-track {
animation-duration: 22s;
}
.collection-tab {
padding: 14px 2px !important;
font-size: 13px !important;
}
}
.navbar {
position: fixed;
left: 0;
width: 100%;
z-index: 1000;
border-bottom: 1px solid transparent;
transition: background 0.3s, border 0.3s;
}
.navbar.scrolled {
backdrop-filter: blur(18px);
border-color: var(--border);
}
.nav-container {
width: min(var(--container), calc(100% - 80px));
height: 74px;
margin: auto;
justify-content: space-between;
gap: 12px;
}
.logo {
flex-shrink: 0;
font-size: 21px;
font-weight: 600;
letter-spacing: -1.2px;
}
.logo img {
width: 174px;
height: 58px;
object-fit: contain;
}
.logo span {
color: var(--purple);
}
.desktop-nav {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
gap: clamp(16px, 2vw, 34px);
min-width: 0;
}
.desktop-nav a {
font-family: Inter, "Space Grotesk", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.02em;
transition: color 0.25s;
white-space: nowrap;
}
.card-link:hover,
.gold-timeline-item.active .gold-timeline-dot span,
.hotline-email:hover,
.whatsapp-link:hover {
color: #881b1b;
}
.desktop-nav a:hover{
    color: #fff;
}
.junu-feature,
.nav-dropdown,
.password-field,
.select-wrapper {
position: relative;
}
.desktop-nav .nav-dropdown {
flex-shrink: 0;
}
.desktop-nav > a,
.desktop-nav .nav-dropdown > .dropdown-toggle {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
flex-shrink: 0;
font-family: Inter, "Space Grotesk", Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.02em;
text-decoration: none;
}
.nav-actions .nav-dropdown > .dropdown-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
font-weight: 600;
text-decoration: none;
}

.dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
min-width: 180px;
padding: 10px;
background: #fff;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
border: 1px solid #eee;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
z-index: 999;
}
.chart-card,
.footer-column,
.junu-cart-product,
.product-card {
min-width: 0;
}
.dropdown-menu a {
display: block;
padding: 12px 15px;
color: #333;
font-size: 14px;
font-weight: 500;
border-radius: 8px;
transition: background 0.25s, color 0.25s, padding-left 0.25s;
}
.already-account a:hover,
.featured-header a,
.junu-forgot a:hover {
text-decoration: underline;
}
.dropdown-menu a:hover {
background: #f8f3e6;
color: #970000;
padding-left: 20px;
}
.nav-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-actions {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 12px;
}
.hero,
.nav-button {
align-items: center;
}
.junu-heading-icon,
.junu-right-icon,
.login-link,
.nav-button span,
.security-label span {
font-size: 15px;
}
.nav-button {

    height: 42px;
    
    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid #fffefb;
    border-radius: 8px;

    background: transparent;
    color: #f8f7f5;

    font-size: 15px;
    font-weight: 600;
    font-family: Georgia, "Times New Roman", serif;

    text-decoration: none;
    cursor: pointer;

    transition: all 0.25s ease;
}
.nav-button:hover {
background: #fff;
color: #000;
}
.menu-toggle {
display: none;
border: 0;
background: 0 0;
cursor: pointer;
}
.menu-toggle span {
display: block;
width: 25px;
height: 1px;
background: #fff;
margin: 6px;
}
.mobile-menu {
position: fixed;
inset: 0;
background: #f6efef;
z-index: 2000;
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
gap: 25px;
transform: translateY(-100%);
transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
padding-top: 100px;
}
.mobile-menu.active,
.submit-btn:active {
transform: translateY(0);
}
.mobile-menu a {
font-size: 25px;
color: #000;
font-weight: 600;
}
.mobile-close {
position: absolute;
top: 45px;
right: 25px;
border: 0;
background: 0 0;
color: #000;
font-size: 35px;
}
.mobile-menu .junu-login-btn {
color: #000;
font-size: 25px;
border: 1px solid #6c060b;
}
.mobile-cta,
body {
background: #fff;
color: #000;
}
.mobile-cta {
padding: 13px 24px;
border-radius: 100px;
font-size: 14px !important;
}
.hero {
position: relative;
min-height: 100vh;
height: 100vh;
display: flex;
}
.hero-noise,
.hero-video,
.hero-video-overlay,
.hero::after {
position: absolute;
inset: 0;
}
.hero-video {
width: 100%;
height: 100%;
object-fit: cover;
z-index: -5;
transform: scale(1.03);
}
.hero-video-overlay {
z-index: -4;
background: linear-gradient(
90deg,
rgba(3, 3, 7, 0.94),
rgba(3, 3, 7, 0.76) 34%,
rgba(3, 3, 7, 0.38) 70%,
rgba(3, 3, 7, 0.66)
),
linear-gradient(
180deg,
rgba(0, 0, 0, 0.65),
transparent 45%,
rgba(0, 0, 0, 0.9)
);
}
.hero-noise {
z-index: -2;
opacity: 0.08;
background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.hero::after {
content: "";
z-index: -3;
background: radial-gradient(
circle at 75% 50%,
rgba(155, 80, 255, 0.27),
transparent 32%
);
}
.hero-container {
position: relative;
width: min(var(--container), calc(100% - 80px));
height: 100%;
margin: auto;
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 40px;
}
.hero-content {
max-width: 760px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 14px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 100px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
color: rgba(29, 29, 29, 0.72);
}
.hero-title {
margin-top: 28px;
font-size: clamp(58px, 7.4vw, 88px);
font-weight: 500;
line-height: 0.87;
letter-spacing: -6px;
color: #fff;
}
.gradient-text {
background: linear-gradient(100deg, #fff, #7b1418, #aa1227, #fff);
background-size: 250% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: 6s linear infinite gradientMove;
}
@keyframes gradientMove {
to {
background-position: 250% center;
}
}
.hero-description {
max-width: 550px;
margin-top: 32px;
font-size: 19px;
line-height: 1.8;
color: #fff;
}
.hero-buttons {
display: flex;
gap: 12px;
margin-top: 36px;
}
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.btn-primary span {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #111;
color: #fff;
}
.avatars span,
.hero-trust {
display: flex;
align-items: center;
}
.btn-primary:hover {
box-shadow: 0 20px 50px rgba(255, 255, 255, 0.17);
}
.btn-secondary {
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1);
}
.hero-trust {
gap: 14px;
margin-top: 42px;
}
.avatars {
display: flex;
padding-left: 8px;
}
.avatars span {
width: 31px;
height: 31px;
margin-left: -8px;
border: 2px solid #19151f;
border-radius: 50%;
justify-content: center;
background: linear-gradient(135deg, #7644a7, #29212f);
font-size: 9px;
}
.cube-front,
.hero-visual {
display: flex;
align-items: center;
}
.hero-trust strong,
.spot-item strong,
.spot-price-grid b {
display: block;
font-size: 16px;
}
.hero-trust small {
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, 0.4);
font-size: 9px;
}
.hero-visual {
position: relative;
height: 650px;
justify-content: center;
}
.visual-glow {
position: absolute;
width: 470px;
height: 470px;
border-radius: 50%;
background: radial-gradient(circle, rgba(193, 6, 6, 0.5), transparent 68%);
filter: blur(25px);
animation: 5s ease-in-out infinite glowAnimation;
}
@keyframes glowAnimation {
50% {
transform: scale(1.12);
opacity: 0.8;
}
}
.orbit {
position: absolute;
border: 1px solid rgba(188, 126, 255, 0.22);
border-radius: 50%;
transform: rotateX(65deg);
animation: 15s linear infinite orbitAnimation;
}
.orbit-1 {
width: 450px;
height: 190px;
}
.orbit-2 {
width: 530px;
height: 230px;
animation-duration: 20s;
}
.orbit-3 {
width: 350px;
height: 150px;
animation-duration: 11s;
}
@keyframes orbitAnimation {
to {
transform: rotateX(65deg) rotateZ(360deg);
}
}
.cube-wrapper {
width: 220px;
height: 220px;
perspective: 900px;
}
.cube {
position: relative;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-35deg);
animation: 6s ease-in-out infinite cubeAnimation;
}
@keyframes cubeAnimation {
50% {
transform: rotateX(-12deg) rotateY(25deg) translateY(-20px);
}
}
.cube-face span img {
transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.7s;
}
.cube-face span img.image-moving {
opacity: 0;
transform: translateZ(-45px) scale(0.94);
}
.cube-face span img.image-arrived {
opacity: 1;
transform: translateZ(0) scale(1);
}
.cube-front {
transform: translateZ(90px);
justify-content: center;
}
.card-icon,
.floating-card {
align-items: center;
display: flex;
}
.cube-front span {
font-size: 54px;
font-weight: 600;
text-shadow: 0 0 35px rgba(180, 100, 255, 0.8);
}
.cube-back {
transform: rotateY(180deg) translateZ(90px);
}
.cube-right {
transform: rotateY(90deg) translateZ(90px);
}
.cube-left {
transform: rotateY(-90deg) translateZ(90px);
}
.cube-top {
transform: rotateX(90deg) translateZ(90px);
}
.cube-bottom {
transform: rotateX(-90deg) translateZ(90px);
}
.floating-card {
position: absolute;
z-index: 10;
gap: 12px;
padding: 13px 16px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
background: rgba(10, 8, 15, 0.68);
backdrop-filter: blur(18px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
animation: 5s ease-in-out infinite floatingCard;
}
.ai-card {
top: 100px;
right: 10px;
}
.render-card {
bottom: 105px;
left: 10px;
animation-delay: -2s;
}
@keyframes floatingCard {
50% {
transform: translateY(-12px);
}
}
.card-icon {
width: 31px;
height: 31px;
justify-content: center;
border-radius: 9px;
background: rgba(160, 90, 255, 0.18);
color: #c38cff;
}
.floating-card strong {
display: block;
font-size: 10px;
}
.floating-card small {
display: block;
margin-top: 4px;
color: rgba(255, 255, 255, 0.4);
font-size: 8px;
}
.progress-circle {
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 3px solid rgba(255, 255, 255, 0.12);
border-top-color: var(--purple);
border-right-color: var(--purple);
font-size: 9px;
animation: 3s linear infinite ringRotate;
}
@keyframes ringRotate {
to {
transform: rotate(360deg);
}
}
.hero-bottom {
position: absolute;
bottom: 25px;
left: 0;
width: 100%;
padding: 0 55px;
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(255, 255, 255, 0.38);
font-size: 8px;
letter-spacing: 1.5px;
}
.cta-content h2 span,
.large-heading span,
.platform-copy h2 span,
.section-heading h2 span,
.section-kicker {
color: var(--purple-light);
}
.scroll-line {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
}
.chart-area svg,
.grid-lines {
left: 38px;
top: 0;
position: absolute;
right: 0;
}
.section {
padding: 150px 0;
}
.section-kicker {
display: block;
margin-bottom: 18px;
font-size: 10px;
letter-spacing: 2px;
}
.section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 50px;
margin-bottom: 65px;
}
.platform-copy h2,
.section-heading h2 {
max-width: 720px;
font-size: clamp(45px, 6vw, 82px);
line-height: 0.95;
letter-spacing: -4px;
font-weight: 500;
}
.section-heading > p {
max-width: 390px;
color: var(--muted);
line-height: 1.8;
font-size: 13px;
}
.logo-strip {
padding: 55px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.logo-strip p {
text-align: center;
color: var(--muted-2);
font-size: 9px;
letter-spacing: 2px;
}
.brand-list {
margin-top: 35px;
display: flex;
justify-content: space-between;
color: rgba(255, 255, 255, 0.28);
font-size: 16px;
letter-spacing: 2px;
}
.intro-section {
background: #070609;
}
.intro-grid {
display: grid;
grid-template-columns: 0.25fr 1fr;
gap: 80px;
}
.section-label {
color: var(--muted-2);
font-size: 9px;
letter-spacing: 2px;
}
.large-heading {
max-width: 900px;
font-size: clamp(50px, 7vw, 100px);
line-height: 0.9;
letter-spacing: -5px;
font-weight: 500;
}
.junu-why-section,
body {
font-family: Arial, Helvetica, sans-serif;
}
.large-text {
max-width: 650px;
margin-top: 45px;
color: var(--muted);
font-size: 18px;
line-height: 1.8;
}
body {
margin: 0;
top: 0 !important;
}
.spot-section {
width: 100%;
padding: 70px 7%;
background: #050d17;
}
.spot-dashboard,
.spot-sidebar {
padding: 16px;
box-sizing: border-box;
}
.spot-layout {
width: 100%;
max-width: 1450px;
margin: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
gap: 55px;
align-items: center;
}
.spot-intro {
width: 100%;
max-width: 650px;
}
.spot-eyebrow {
display: flex;
align-items: center;
gap: 12px;
color: #e5a415;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 28px;
}
.spot-intro h2 {
margin: 0;
font-size: clamp(42px, 4vw, 64px);
line-height: 0.95;
letter-spacing: -4px;
font-weight: 500;
color: #fff;
}
.spot-intro > p {
max-width: 650px;
margin: 16px 0 0;
color: #91a2b8;
font-size: 20px;
line-height: 1.75;
}
.feature-list {
margin-top: 22px;
display: flex;
flex-direction: column;
gap: 22px;
}
.check,
.feature-item {
display: flex;
align-items: center;
}
.feature-item {
gap: 16px;
color: #aab8c9;
font-size: 18px;
}
.check {
width: 38px;
height: 38px;
justify-content: center;
border-radius: 50%;
color: #e5a415;
border: 1px solid rgba(229, 164, 21, 0.35);
background: rgba(229, 164, 21, 0.08);
}
.spot-dashboard {
width: 100%;
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 300px 1fr;
border-radius: 14px;
min-height: auto;
}
.market-status,
.spot-card-header {
margin-bottom: 12px;
}
.spot-sidebar {
background: #0a0909;
border-radius: 12px;
}
.spot-card-header h3 {
margin: 0;
font-size: 20px;
font-weight: 600;
color: #fff;
}
.spot-card-header p {
margin: 3px 0 0;
font-size: 12px;
color: #fff;
}
.market-status {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 10px;
background: #0a0909;
border-radius: 8px;
}
.status-dot {
width: 7px;
height: 7px;
background: #35a853;
border-radius: 50%;
flex-shrink: 0;
}
.market-status strong {
display: block;
font-size: 12px;
color: #fff;
}
.market-status small {
display: block;
font-size: 10px;
color: #fff;
margin-top: 2px;
}
.metal-grid,
.selector-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 12px;
}
.metal-card {
padding: 11px;
border: 1px solid #e7e2d7;
border-radius: 9px;
background: #0a0909;
}
.metal-card:hover {
border-color: #c98e13;
transform: translateY(-2px);
}
.metal-card-selectable {
cursor: pointer;
transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.metal-card-selectable.is-active {
border-color: #d89b20;
box-shadow: 0 0 0 1px rgba(216, 155, 32, .35);
}
.chart-positive {
color: #3ecf8e;
font-size: 12px;
margin-top: 6px;
}
.chart-negative {
color: #ff6b6b;
}
.chart-card.is-loading {
opacity: .72;
pointer-events: none;
}
.metal-name {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.5px;
color: #fff;
}
.metal-card:nth-child(2) .metal-name {
color: #aab5c2;
}
.metal-price {
font-size: 18px;
font-weight: 600;
margin: 3px 0;
color: #fff;
}
.chart-dates span,
.chart-y-axis span,
.metal-unit {
font-size: 9px;
color: #fff;
}
.select-field {
height: 36px;
display: flex;
align-items: center;
gap: 6px;
padding: 0 9px;
border: 1px solid #ddd8cd;
border-radius: 7px;
background: #0a0909;
box-sizing: border-box;
}
.alert-button,
.range-tabs button,
.select-field select {
background: 0 0;
cursor: pointer;
}
.select-field select {
flex: 1;
appearance: none;
flex: 1;
width: 100%;
border: 0;
outline: 0;
appearance: none;
color: #fff;
font-size: 12px;
}
.currency-icon,
.weight-icon {
font-size: 12px;
color: #a97817;
}
.select-field select option {
background: #101e2d;
color: #fff;
}
.range-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid #26394c;
border-radius: 12px;
}
.range-tabs button {
height: 48px;
padding: 0 7px;
border: 0;
border-right: 1px solid #26394c;
color: #91a0b1;
font-size: 10px;
}
.feature:last-child,
.range-tabs button:last-child,
.support-grid > div:last-child {
border-right: 0;
}
.range-tabs button.active {
background: #d3940b;
color: #fff;
font-weight: 600;
}
.alert-button {
width: 100%;
min-height: 35px;
margin-top: auto;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #d89b20;
border-radius: 13px;
color: #e0a01c;
font-size: 12px;
font-weight: 600;
transition: 0.3s;
}
.alert-button:hover {
background: #d89b20;
color: #08131d;
}
.alert-button span:last-child {
font-size: 22px;
}
.chart-card {
background: #881b1b;
border-radius: 12px;
padding: 16px;
box-sizing: border-box;
}
.chart-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 30px;
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.chart-current span,
.chart-label {
display: block;
margin-bottom: 2px;
color: #fff;
}
.chart-label {
font-size: 10px;
}
.price-row {
display: flex;
align-items: baseline;
gap: 7px;
}
.price-row strong {
font-size: 22px;
font-weight: 600;
color: #fff;
}
.price-row span {
font-size: 10px;
color: #fff;
}
.chart-negative {
font-size: 10px;
color: #c44747;
margin-top: 2px;
}
.chart-current,
.current-price,
.junu-feature-column.left,
.price-box {
text-align: right;
}
.chart-current span {
font-size: 9px;
}
.chart-current strong {
font-size: 15px;
color: #fff;
}
.chart-area,
.collection-tab.active::after,
.faq-content,
.footer-links li a:hover::before {
width: 100%;
}
.grid-lines {
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.grid-lines span {
width: 100%;
border-top: 1px dashed #e9e5dc;
}
.chart-area svg {
width: calc(100% - 38px);
height: 100%;
}
.chart-fill {
fill: url(#chartFill);
}
.chart-y-axis {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 34px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.chart-dates {
display: flex;
justify-content: space-between;
margin: 5px 0 0 38px;
}
@media (max-width: 1100px) {
.spot-dashboard {
grid-template-columns: 300px minmax(0, 1fr);
}
.spot-sidebar {
padding: 25px 20px;
}
.chart-card {
padding: 30px 25px;
}
.price-row strong {
font-size: 42px;
}
.chart-area {
height: 360px;
}
}
@media (max-width: 850px) {
.spot-dashboard {
grid-template-columns: 1fr;
padding: 0;
gap: 10px;
}
.spot-sidebar {
border-right: 0;
border-bottom: 1px solid #263748;
}
.metal-grid,
.selector-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.alert-button {
margin-top: 5px;
}
}
@media (max-width: 600px) {
.metal-grid,
.selector-grid {
grid-template-columns: 1fr;
}
.chart-header {
flex-direction: column;
}
.chart-current {
width: 100%;
}
.chart-current span {
flex: 1;
}
.price-row strong {
font-size: 38px;
}
.chart-area {
height: 280px;
}
.chart-dates {
font-size: 10px;
}
.range-tabs button {
font-size: 9px;
}
}
.junu-why-section {
width: 100%;
padding: 100px 40px;
background: #faf9f1;
overflow: hidden;
}
.junu-why-container {
width: min(1280px, 100%);
margin: 0 auto;
}
.junu-why-header {
text-align: center;
max-width: 650px;
margin: 0 auto 70px;
}
.junu-why-header h2 {
margin: 0 0 18px;
font-size: clamp(42px, 4vw, 64px);
line-height: 0.95;
font-weight: 500;
letter-spacing: -3px;
color: #111;
}
.junu-why-header h2 span {
display: inline-block;
}
.junu-why-header p {
max-width: 520px;
margin: 0 auto;
color: #333;
font-size: 18px;
line-height: 1.5;
}
.junu-why-content {
display: grid;
grid-template-columns: 1fr 420px 1fr;
gap: 55px;
}
.contact-form,
.junu-feature-column {
display: flex;
flex-direction: column;
gap: 20px;
}
.junu-feature-icon,
.junu-shop-btn {
display: inline-flex;
background: #881b1b;
color: #fff;
font-weight: 700;
}
.junu-feature-column.right,
.who-use-column.right .who-use-item {
text-align: left;
}
.junu-feature-icon {
width: 46px;
height: 46px;
margin-bottom: 16px;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 21px;
transition: 0.35s;
}
.junu-feature-column.left .junu-feature p,
.junu-feature-column.left .junu-feature-icon {
margin-left: auto;
}
.junu-feature:hover .junu-feature-icon {
transform: translateY(-5px) rotate(8deg);
background: #c08a24;
}
.junu-feature h3 {
margin: 0 0 9px;
font-size: 20px;
font-weight: 700;
color: #151515;
}
.junu-feature p {
margin: 0;
max-width: 290px;
font-size: 14px;
line-height: 1.55;
color: #555;
}
.junu-why-center {
position: relative;
text-align: center;
}
.junu-image-frame {
position: relative;
width: 100%;
aspect-ratio: 1/1;
overflow: visible;
z-index: 2;
}
.junu-shop-btn {
position: relative;
z-index: 5;
align-items: center;
gap: 12px;
margin-top: 42px;
padding: 16px 28px;
font-size: 16px;
border-radius: 7px;
box-shadow: 0 12px 25px rgba(164, 0, 0, 0.22);
transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.collection-tab,
.view-all {
font-size: 14px;
font-weight: 600;
}
.junu-shop-btn span {
font-size: 20px;
transition: transform 0.3s;
}
.junu-shop-btn:hover {
background: #7e0000;
transform: translateY(-4px);
box-shadow: 0 17px 32px rgba(164, 0, 0, 0.28);
}
.junu-shop-btn:hover span {
transform: translate(4px, -4px);
}
.junu-why-bottom {
max-width: 900px;
margin: 75px auto 0;
text-align: center;
}
.junu-why-bottom p {
margin: 0;
font-size: 17px;
line-height: 1.7;
color: #333;
}
.junu-why-bottom strong {
color: #a40000;
font-weight: 700;
}
@media (max-width: 1050px) {
.spot-section {
padding: 60px 4%;
}
.spot-layout {
gap: 30px;
}
.spot-card {
padding: 24px;
}
.spot-card-header h3 {
font-size: 32px;
}
.metal-price {
font-size: 30px;
}
.junu-feature h3,
.spot-intro > p {
font-size: 17px;
}
.junu-why-content {
grid-template-columns: 1fr 350px 1fr;
gap: 35px;
}
.junu-feature-column {
gap: 45px;
}
.junu-feature p {
font-size: 13px;
}
}
@media (max-width: 800px) {
.junu-why-section {
padding: 75px 25px;
}
.junu-why-header {
margin-bottom: 50px;
}
.junu-why-header h2 {
letter-spacing: -2px;
}
.junu-why-content {
grid-template-columns: 1fr;
gap: 45px;
}
.junu-why-center {
order: 1;
max-width: 420px;
width: 100%;
margin: 0 auto;
}
.junu-feature-column.left {
order: 2;
text-align: center;
}
.junu-feature-column.right {
order: 3;
text-align: center;
}
.junu-feature-column {
gap: 40px;
}
.junu-feature p,
.junu-feature-column.left .junu-feature p,
.junu-feature-column.left .junu-feature-icon,
.junu-feature-icon {
margin-left: auto;
margin-right: auto;
}
.junu-why-bottom {
margin-top: 55px;
}
.twist-gallery {
order: 2 !important;
}
.twist-content {
order: 1 !important;
}
.spot-section {
/* padding: 50px 20px; */
}
.spot-layout {
grid-template-columns: 1fr;
}
.spot-intro {
max-width: 100%;
}
.spot-intro h2 {
font-size: 52px;
}
.spot-card {
padding: 20px;
}
}
@media (max-width: 520px) {
.security-container {
padding: 0 !important;
grid-template-columns: none !important;
}
.spot-card-header {
flex-direction: column;
gap: 15px;
}
.metal-grid,
.selector-grid {
grid-template-columns: 1fr;
}
.range-tabs button {
font-size: 10px;
}
.price-row strong {
font-size: 32px;
}
.chart-current {
display: none;
}
.spot-intro h2 {
font-size: 44px;
}
}
.collection-section {
width: 100%;
padding: 100px 5%;
background: #f7f5ef;
overflow: hidden;
}
.collection-container {
width: 100%;
max-width: 1450px;
margin: auto;
}
.collection-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 42px;
}
.collection-label {
display: block;
margin-bottom: 12px;
color: #e5a415;
letter-spacing: 2px;
}
.collection-tab.active {
color: #171717;
font-weight: 600;
}
.view-all {
color: #171717;
}
.collection-tab.active::after {
width: 100%;
}
.collection-section .products-track .product-card {
flex: 0 0 320px;
background: #fff;
border-radius: 16px;
overflow: hidden;
}
.collection-section .product-image a {
display: block;
width: 100%;
height: 100%;
}
.collection-section .product-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.collection-section .product-info h3 a {
color: inherit;
text-decoration: none;
}
.collection-section .product-info h3 a:hover {
color: #b58320;
}
.collection-section .inventory-stock-badge {
margin: 6px 0 0;
}
.collection-section .inventory-stock-badge .product-stock-status {
font-size: 13px !important;
}
.collection-section .product-price .old-price {
font-size: 13px;
color: #999;
margin-left: 6px;
font-weight: 500;
}
.collection-section .quick-view {
z-index: 3;
pointer-events: none;
}
.collection-section .product-card:hover .quick-view,
.collection-section .quick-view:focus-visible {
pointer-events: auto;
}
.collection-section .products-track {
animation: none !important;
transform: none !important;
width: 100%;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.collection-section .products-track::-webkit-scrollbar {
display: none;
}
.collection-section .products-slider {
cursor: default;
overflow: visible;
}
.collection-section .quick-view:disabled {
background: #666;
cursor: not-allowed;
pointer-events: none;
}
.collection-section .product-price button:disabled {
opacity: 0.45;
cursor: not-allowed;
font-size: 12px;
}
.collection-section .collection-empty-card {
flex: 0 0 320px;
}
.collection-header h2 {
margin: 0;
font-size: clamp(42px, 4vw, 64px);
line-height: 0.95;
font-weight: 500;
letter-spacing: -3px;
color: #000;
}
.view-all {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #171717;
}
.view-all span {
font-size: 18px;
}
.collection-tabs {
display: flex;
gap: 8px;
border-bottom: 1px solid #ddd8ce;
margin-bottom: 30px;
overflow-x: auto;
scrollbar-width: none;
}
.collection-tabs::-webkit-scrollbar {
display: none;
}
.collection-tab {
position: relative;
flex-shrink: 0;
border: 0;
background: 0 0;
padding: 14px 22px;
color: #77736c;
cursor: pointer;
}
.collection-tab::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
width: 0;
height: 2px;
background: #b58320;
transform: translateX(-50%);
transition: 0.3s;
}
.products-slider {
width: 100%;
overflow: hidden;
cursor: grab;
position: relative;
}
.features-slider:active,
.products-slider.dragging {
cursor: grabbing;
}
.products-track {
display: flex;
gap: 22px;
width: max-content;
animation: 22s linear infinite productsFlow;
will-change: transform;
}
@keyframes productsFlow {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-50% - 11px));
}
}
.product-image {
position: relative;
height: 300px;
background: #ece9e1;
}
.product-card:hover .product-image img {
transform: scale(1.05);
}
.product-tag {
position: absolute;
z-index: 2;
top: 15px;
left: 15px;
padding: 7px 10px;
background: #b9851e;
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
}
.product-tag.silver {
background: #777b7d;
}
.quick-view {
position: absolute;
bottom: 18px;
left: 50%;
transform: translate(-50%, 20px);
opacity: 0;
border: 0;
background: #8a0e0e;
padding: 12px 22px;
color: #eadada;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
.product-card:hover .quick-view {
opacity: 1;
transform: translate(-50%, 0);
}
.care-btn:hover span,
.footer-links li a:hover,
.plan-button:hover .button-arrow,
.register-submit:hover span {
transform: translateX(4px);
}
.product-info {
padding: 17px;
}
.product-info small {
color: #99958c;
font-size: 10px;
letter-spacing: 1.2px;
}
.product-info h3 {
margin: 7px 0 0;
color: #171717;
font-size: 17px;
font-weight: 500;
}
.product-price {
margin-top: 13px;
display: flex;
justify-content: space-between;
align-items: center;
}
.product-price strong {
font-size: 15px;
color: #000;
}
.product-price button {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid #ccc6bb;
background: 0 0;
font-size: 19px;
cursor: pointer;
}
.slider-footer {
margin-top: 45px;
display: flex;
align-items: center;
gap: 30px;
}
.slider-progress {
flex: 1;
height: 2px;
background: #ddd8ce;
}
.slider-progress span {
display: block;
width: 25%;
height: 100%;
background: #a77b20;
transition: width 0.5s;
}
.feature-dots,
.slider-arrows {
display: flex;
gap: 8px;
}
.slider-arrows button {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid #ccc6bb;
background: 0 0;
font-size: 18px;
cursor: pointer;
transition: 0.25s;
}
.slider-arrows button:hover {
background: #171717;
color: #fff;
border-color: #171717;
}
@media (max-width: 1100px) {
.product-card {
flex-basis: calc((100% - 44px) / 3);
}
.product-image {
height: 330px;
}
}
@media (max-width: 700px) {
.collection-section {
padding: 70px 20px;
}
.collection-header {
align-items: flex-start;
flex-direction: column;
gap: 25px;
}
.collection-header h2 {
font-size: 50px;
}
.collection-tabs {
margin-bottom: 25px;
}
.product-card {
flex-basis: calc((100% - 12px) / 1.2);
}
.product-image {
height: 310px;
}
.quick-view {
display: none;
}
.slider-footer {
margin-top: 30px;
}
}
@media (max-width: 480px) {
.junu-why-section {
padding: 60px 18px;
}
.junu-why-header h2 {
font-size: 42px;
}
.junu-why-header p {
font-size: 16px;
}
.junu-shop-btn {
margin-top: 32px;
}
.junu-why-bottom p {
font-size: 15px;
}
.product-card {
flex-basis: calc((100% - 12px) / 1.15);
}
.product-image {
height: 270px;
}
.slider-arrows {
display: none;
}
}
@media (max-width: 1100px) {
.features-grid,
.hero-container,
.intro-grid,
.platform-grid {
grid-template-columns: 1fr;
}
.desktop-nav {
display: none;
}
.menu-toggle {
display: block;
}
.hero {
height: auto;
min-height: 100vh;
}
.hero-container {
text-align: center;
padding: 130px 0 100px;
}
.eyebrow,
.hero-content {
margin: auto;
}
.hero-description {
margin: 30px auto 0;
}
.hero-buttons,
.hero-trust {
justify-content: center;
}
.hero-visual {
height: 520px;
}
.intro-grid {
gap: 30px;
}
.feature-large {
grid-row: auto;
}
.showcase-grid-cards {
grid-template-columns: 1fr 1fr;
}
.project-large {
grid-column: span 2;
}
}
@media (max-width: 700px) {
.container,
.hero-container,
.nav-container {
width: calc(100% - 32px);
}
.nav-container {
height: 72px;
}
.hero-bottom span:last-child,
.nav-actions,
.showcase-label {
display: none;
}
.hero-title {
font-size: clamp(48px, 14vw, 70px);
letter-spacing: -4px;
}
.hero-description {
font-size: 13px;
}
.hero-buttons {
flex-direction: column;
width: 280px;
margin-left: auto;
margin-right: auto;
}
.btn-primary,
.btn-secondary {
width: 100%;
}
.hero-visual {
height: 400px;
transform: scale(0.75);
margin-top: -40px;
}
.ai-card {
right: -10px;
top: 60px;
}
.render-card {
left: -10px;
bottom: 60px;
}
.hero-bottom {
padding: 0 20px;
}
.brand-list {
flex-wrap: wrap;
gap: 25px;
justify-content: center;
}
.section {
padding: 100px 0;
}
.footer-top,
.section-heading {
display: block;
}
.section-heading > p {
margin-top: 25px;
}
.large-heading {
font-size: 50px;
}
.showcase-grid-cards,
.steps {
grid-template-columns: 1fr;
}
.project-large {
grid-column: auto;
}
.project-image {
height: 350px;
}
.interface-body {
grid-template-columns: 80px 1fr;
}
.stats-grid {
grid-template-columns: 1fr 1fr;
}
.stat-item {
border-bottom: 1px solid var(--border);
}
.stat-item:nth-child(2) {
border-right: 0;
}
.stat-item:nth-child(3) {
border-bottom: 0;
}
.stat-item:nth-child(4) {
border-bottom: 0;
border-right: 0;
}
.footer-links {
margin-top: 50px;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.footer-bottom {
display: block;
line-height: 2;
}
.footer-bottom div {
margin-top: 10px;
}
.visual-showcase {
height: 500px;
}
}
.plans-section {
width: 100%;
padding: 40px 30px 60px;
background-color: #fffcfc;
}
.plans-container {
max-width: 1400px;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.plan-card {
position: relative;
min-height: 500px;
padding: 58px 55px;
border-radius: 32px;
overflow: hidden;
}
.jsc-card {
background: radial-gradient(
circle at 82% 80%,
rgba(255, 255, 255, 0.85) 0,
rgba(255, 255, 255, 0.25) 12%,
transparent 30%
),
linear-gradient(135deg, #f9e198, #f0dfae);
}
.gsp-card {
background: radial-gradient(
circle at 82% 80%,
rgba(255, 255, 255, 0.85) 0,
rgba(255, 255, 255, 0.25) 12%,
transparent 30%
),
linear-gradient(135deg, #e8fff7, #b2bfbb);
}
.plan-content {
position: relative;
z-index: 5;
max-width: 570px;
}
.eyebrow {
font-size: 17px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 20px;
}
.jsc-card .eyebrow {
color: #87652a;
}
.gsp-card .eyebrow {
color: #174d43;
}
.plan-title {
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(34px, 3vw, 37px);
line-height: 1.12;
font-weight: 500;
margin-bottom: 20px;
color: #000;
max-width: 620px;
}
.plan-description {
font-size: 18px;
line-height: 1.65;
color: #575750;
max-width: 560px;
}
.accent-line {
width: 55px;
height: 4px;
border-radius: 10px;
margin: 25px 0;
}
.jsc-button,
.jsc-card .accent-line {
background: #b88732;
}
.gsp-card .accent-line {
background: #176052;
}
.plan-button {
position: relative;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 12px;
margin-top: 55px;
padding: 16px 24px;
border-radius: 50px;
color: #fff;
font-size: 16px;
font-weight: 700;
transition: transform 0.35s, box-shadow 0.35s;
}
.gsp-button {
background: #1b1d1b;
}
.plan-button:hover {
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.button-arrow {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
color: #222;
font-size: 18px;
transition: transform 0.3s;
}
.gold-platform,
.gold-visual {
width: 330px;
position: absolute;
}
.gold-visual {
right: -20px;
bottom: -40px;
height: 300px;
z-index: 2;
}
.gold-platform {
right: 10px;
bottom: 10px;
height: 65px;
border-radius: 50%;
background: linear-gradient(180deg, #f8d978, #b77b16);
box-shadow: 0 15px 30px rgba(128, 82, 8, 0.25);
}
.gold-bar {
right: 65px;
bottom: 2px;
transform: rotate(8deg) skewY(-3deg);
animation: 5s ease-in-out infinite floatingBar;
}
.gold-bar::after {
white-space: pre;
position: absolute;
inset: 35px 10px;
text-align: center;
font-weight: 700;
font-size: 17px;
line-height: 1.5;
opacity: 0.75;
}
.gold-coin {
position: absolute;
left: 40px;
bottom: 35px;
width: 145px;
height: 145px;
border-radius: 50%;
box-shadow: 0 15px 25px rgba(91, 58, 8, 0.28),
inset 0 0 0 4px rgba(255, 255, 255, 0.35);
z-index: 4;
animation: 4s ease-in-out infinite floatingCoin;
}
.gold-coin::before {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
}
.gold-coin::after {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
text-align: center;
font-size: 9px;
font-weight: 700;
}
.gsp-visual {
position: absolute;
right: 15px;
bottom: -10px;
width: 390px;
height: 370px;
z-index: 3;
}
.phone {
position: absolute;
right: 45px;
bottom: 10px;
width: 190px;
height: 340px;
border-radius: 30px;
padding: 12px;
transform: rotate(-6deg);
animation: 5s ease-in-out infinite floatingPhone;
}
.phone-screen {
width: 100%;
height: 100%;
border-radius: 21px;
background: #f8faf8;
padding: 25px 16px;
overflow: hidden;
}
.phone-notch {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 65px;
height: 18px;
background: #222;
border-radius: 20px;
z-index: 5;
}
.portfolio-label {
font-size: 11px;
color: #555;
margin-top: 15px;
}
.portfolio-value {
font-size: 25px;
font-weight: 700;
color: #176052;
margin-top: 5px;
}
.chart {
position: relative;
width: 100%;
height: 130px;
margin-top: 25px;
}
.chart svg {
width: 100%;
height: 100%;
overflow: visible;
}
.chart-line {
fill: none;
stroke: #e5a33a;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
fill: none;
stroke: #2d806d;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: 3s forwards drawChart;
}
.chart-fill {
fill: rgba(45, 128, 109, 0.1);
}
.gold-total {
margin-top: 10px;
padding: 12px;
border-radius: 12px;
background: #e6f0ed;
font-size: 11px;
color: #555;
}
.gold-total strong {
display: block;
color: #174d43;
font-size: 18px;
margin-top: 3px;
}
.calendar {
position: absolute;
left: 30px;
bottom: 135px;
height: 125px;
padding: 15px;
border-radius: 14px;
transform: rotate(5deg);
z-index: 5;
animation: 4s ease-in-out infinite floatingCalendar;
}
.calendar-top {
width: 100%;
height: 20px;
border-bottom: 2px solid #ddd;
margin-bottom: 10px;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.calendar-grid span {
width: 13px;
height: 13px;
border: 1px solid #d5ddd9;
border-radius: 3px;
}
.calendar-grid span.active {
background: #237460;
border-color: #237460;
}
.gsp-card::before,
.jsc-card::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
filter: blur(30px);
opacity: 0.25;
z-index: 0;
}
.jsc-card::before {
right: -100px;
background: #fff5cf;
}
.gsp-card::before {
right: -100px;
bottom: -100px;
background: #fff;
}
@keyframes floatingBar {
0%,
100% {
transform: rotate(8deg) translateY(0);
}
50% {
transform: rotate(8deg) translateY(-10px);
}
}
@keyframes floatingCoin {
0%,
100% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-12px) rotate(3deg);
}
}
@keyframes floatingPhone {
0%,
100% {
transform: rotate(-6deg) translateY(0);
}
50% {
transform: rotate(-6deg) translateY(-10px);
}
}
@keyframes floatingCalendar {
0%,
100% {
transform: rotate(5deg) translateY(0);
}
50% {
transform: rotate(5deg) translateY(-8px);
}
}
@media (max-width: 1100px) {
.plans-container {
grid-template-columns: 1fr;
}
.plan-card {
min-height: 500px;
}
.gold-visual,
.gsp-visual {
opacity: 0.85;
}
}
.testimonial-section {
width: 100%;
padding: 90px 0 80px;
overflow: hidden;
background-color: #f6e9e9;
}
.testimonial-header {
text-align: center;
padding: 0 20px;
}
.quote-top {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
margin-bottom: 18px;
}
.quote-top::after,
.quote-top::before {
content: "";
width: 70px;
height: 1px;
background: #d6a438;
}
.quote-icon {
color: #c89520;
}
.testimonial-header h2 {
font-size: clamp(42px, 4vw, 64px);
font-weight: 500;
letter-spacing: -1.5px;
margin-bottom: 15px;
color: #000;
}
.testimonial-header p {
font-size: 17px;
color: #777;
letter-spacing: 0.2px;
}
.testimonial-slider {
width: 100%;
overflow: hidden;
mask-image: linear-gradient(
to right,
transparent 0%,
black 5%,
black 95%,
transparent 100%
);
position: relative;
}
.testimonial-track {
display: flex;
gap: 25px;
transition: transform 0.6s ease;
will-change: transform;
}
.testimonial-card {
position: relative;
flex: 0 0 450px;
padding: 38px 40px 10px;
background: #fff;
border-radius: 28px;
border: 1px solid rgba(0, 0, 0, 0.04);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.4s, box-shadow 0.4s;
}
.testimonial-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.12);
}
.testimonial-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5px;
background: linear-gradient(90deg, #b67b13, #f2ca64, #b67b13);
border-radius: 10px 10px 0 0;
}
.big-quote {
position: absolute;
top: 25px;
right: 30px;
font-family: Georgia, serif;
font-size: 100px;
line-height: 1;
color: #f5f1e9;
}
.rating {
display: inline-flex;
width: fit-content;
gap: 3px;
padding: 9px 14px;
border-radius: 30px;
background: #faf7ef;
margin-bottom: 35px;
}
.rating span {
color: #e7a21a;
font-size: 19px;
line-height: 1;
}
.review-text {
position: relative;
z-index: 2;
/* color: #606060; */
font-size: 17px;
line-height: 1.75;
flex: 1;
}
.testimonial-footer {
display: flex;
align-items: center;
gap: 15px;
padding-top: 25px;
border-top: 1px solid #e9e7e2;
}
.user-icon,
.verified {
display: flex;
align-items: center;
color: #c18a18;
}
.user-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(145deg, #fff8e8, #f3e8cb);
justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.user-info strong {
display: block;
font-size: 16px;
margin-bottom: 5px;
}
.verified {
gap: 5px;
font-size: 12px;
font-weight: 600;
}
.verified-icon {
width: 14px;
height: 14px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #d9a52c;
color: #fff;
font-size: 9px;
}
@keyframes testimonialMove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 14px));
}
}
.testimonial-bottom {
max-width: 1450px;
margin: 35px auto 0;
padding: 0 30px;
display: flex;
justify-content: flex-end;
}
.view-more {
display: inline-flex;
align-items: center;
gap: 10px;
color: #c89520;
font-weight: 700;
font-size: 16px;
transition: gap 0.3s;
}
.security-visual,
.view-arrow {
align-items: center;
display: flex;
}
.view-more:hover {
gap: 16px;
}
.view-arrow {
width: 34px;
height: 34px;
border: 1px solid #c89520;
border-radius: 50%;
justify-content: center;
transition: background 0.3s, color 0.3s;
}
.view-more:hover .view-arrow {
background: #c89520;
color: #fff;
}
@media (max-width: 1000px) {
.testimonial-card {
flex-basis: 390px;
min-height: 420px;
}
.testimonial-track {
gap: 22px;
}
}
.security-visual {
position: relative;
z-index: 5;
height: 470px;
border-radius: 28px;
justify-content: center;
overflow: hidden;
}
.image-carousel {
position: relative;
width: 78%;
height: 85%;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
}
.carousel-card {
position: absolute;
height: 82%;
border-radius: 22px;
overflow: hidden;
transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 1.1s,
filter 1.1s, z-index 0s linear 0.5s;
transform-origin: center center;
}
.benefit,
.footer-links li a,
.footer-logo-icon,
.junu-footer,
.mastercard,
.security-content {
position: relative;
}
.carousel-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1.1s;
}
.carousel-card.active {
z-index: 4;
transform: translateX(0) translateY(0) scale(1) rotateY(0);
opacity: 1;
filter: brightness(1);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 40px rgba(202, 157, 69, 0.1);
}
.carousel-card.next {
z-index: 3;
transform: translateX(65px) translateY(-18px) scale(0.86) rotateY(-8deg);
opacity: 0.72;
filter: brightness(0.72);
}
.carousel-card.next-2 {
z-index: 2;
transform: translateX(110px) translateY(-30px) scale(0.72) rotateY(-12deg);
opacity: 0.42;
filter: brightness(0.5);
}
.carousel-card.back {
z-index: 1;
transform: translateX(145px) translateY(-38px) scale(0.6) rotateY(-15deg);
opacity: 0.2;
filter: brightness(0.35);
}
.security-visual:hover .carousel-card.active img,
.wealth-card:hover .wealth-image img {
transform: scale(1.04);
}
.security-visual::before {
content: "";
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
background: rgba(202, 157, 69, 0.1);
filter: blur(70px);
}
.security-section {
width: 100%;
padding: 30px 20px;
background-color: #fff;
}
.security-container {
position: relative;
width: 100%;
max-width: 1500px;
min-height: 620px;
margin: auto;
padding: 75px 80px;
border-radius: 34px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}
.security-container::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
right: -200px;
top: -200px;
border-radius: 50%;
background: rgba(194, 148, 57, 0.08);
filter: blur(60px);
pointer-events: none;
}
.security-container::after {
content: "";
position: absolute;
width: 350px;
height: 350px;
left: -200px;
bottom: -200px;
border-radius: 50%;
background: rgba(194, 148, 57, 0.04);
filter: blur(50px);
}
.security-content {
z-index: 5;
max-width: 620px;
}
.security-label {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 6px;
margin-bottom: 5px;
border-radius: 50px;
color: #e5a415;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
background: rgba(203, 159, 70, 0.04);
}
.security-title {
font-size: clamp(42px, 4vw, 64px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -1.5px;
color: #0a0a0a;
max-width: 650px;
margin-bottom: 25px;
}
.security-title .gold {
color: #c99a3e;
}
.security-description {
max-width: 590px;
color: #030303;
font-size: 17px;
line-height: 1.75;
margin-bottom: 2dvh;
}
.security-benefits {
display: flex;
flex-direction: column;
gap: 0;
max-width: 650px;
}
.benefit {
display: flex;
align-items: center;
gap: 18px;
color: #0f0f0f;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
transition: padding-left 0.35s, color 0.35s;
}
.benefit:last-child {
border-bottom: none;
}
.benefit-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(201, 154, 62, 0.08);
border: 1px solid rgba(201, 154, 62, 0.18);
}
.benefit-text {
font-size: 15px;
line-height: 1.5;
font-weight: 500;
}
.cta-section {
width: 100%;
min-height: 430px;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 25px;
background: #f8f5ee;
text-align: center;
overflow: hidden;
}
.cta-content {
max-width: 900px;
width: 100%;
}
.cta-label {
display: inline-block;
margin-bottom: 22px;
color: #e5a415;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
}
.cta-content h2 {
margin: 0 auto 38px;
color: #181816;
font-size: clamp(42px, 5vw, 68px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -2px;
}
.cta-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
}
.btn-primary,
.btn-secondary {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 27px;
border-radius: 50px;
font-size: 15px;
font-weight: 600;
transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.hotline-email,
.whatsapp-link {
transition: color 0.3s;
text-decoration: none;
}
.btn-primary {
gap: 12px;
color: #fff;
background: #b78a3c;
box-shadow: 0 8px 25px rgba(183, 138, 60, 0.2);
}
.btn-primary span {
transition: transform 0.3s;
}
.btn-primary:hover {
transform: translateY(-3px);
background: #9f762f;
box-shadow: 0 12px 30px rgba(183, 138, 60, 0.3);
}
.btn-primary:hover span {
transform: translateX(5px);
}
.btn-secondary {
background: 0 0;
border: 1px solid #ddd8ce;
}
.btn-secondary:hover {
transform: translateY(-3px);
border-color: #b78a3c;
color: #b78a3c;
}
.field label,
.setting-box label {
text-transform: uppercase;
letter-spacing: 0.7px;
}
.junu-footer {
width: 100%;
background: #881b1b;
color: #fff;
overflow: hidden;
}
.footer-main {
width: 100%;
max-width: 1400px;
margin: auto;
padding: 42px 30px 35px;
display: grid;
grid-template-columns: 1.65fr 1fr 1.15fr 1.55fr 1fr;
column-gap: 55px;
align-items: start;
}
.footer-logo {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
text-decoration: none;
color: #ffff;
}
.footer-logo-icon {
width: 38px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
color: #ffff;
font-size: 38px;
line-height: 1;
}
.footer-logo-icon::after {
content: "";
position: absolute;
width: 2px;
height: 14px;
background: #ffff;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
}
.footer-logo-text {
font-size: 27px;
font-weight: 700;
letter-spacing: 0.5px;
}
.footer-description {
color: #ffff;
font-size: 15px;
line-height: 1.6;
font-weight: 400;
}
.footer-title {
margin: 4px 0 20px;
color: #ffff;
font-size: 18px;
font-weight: 700;
line-height: 1.2;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 15px;
}
.footer-links li a {
display: inline-block;
color: #ffff;
text-decoration: none;
font-size: 15px;
transition: color 0.3s, transform 0.3s;
}
.footer-links li a::before {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 0;
height: 1px;
background: #fff;
transition: width 0.3s;
}
.footer-links li a:hover {
color: #fff;
}
.footer-address {
color: #fff;
font-size: 15px;
line-height: 1.4;
max-width: 210px;
}
.hotline-email {
display: inline-block;
color: #ffff;
font-size: 15px;
margin-bottom: 24px;
}
.whatsapp-icon,
.whatsapp-link {
display: flex;
align-items: center;
}
.whatsapp-link {
gap: 12px;
color: #ffff;
font-size: 18px;
}
.payment-card,
.social-icon,
.whatsapp-icon {
transition: transform 0.3s, box-shadow 0.3s;
}
.whatsapp-icon {
width: 36px;
height: 36px;
border-radius: 9px;
justify-content: center;
background: #25d366;
color: #fff;
font-size: 21px;
}
.social-icon,
.social-icons {
display: flex;
align-items: center;
}
.whatsapp-link:hover .whatsapp-icon {
transform: scale(1.08);
box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}
.social-title {
margin-top: 28px;
}
.social-icons {
gap: 14px;
flex-wrap: wrap;
}
.social-icon {
width: 38px;
height: 38px;
border-radius: 8px;
justify-content: center;
color: #fff;
text-decoration: none;
font-size: 20px;
}
.footer-bottom,
.payment-card {
align-items: center;
display: flex;
}
.social-icon:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
.telegram {
background: #229ed9;
}
.facebook {
background: #1877f2;
}
.instagram {
background: linear-gradient(
135deg,
#feda75,
#fa7e1e,
#d62976,
#962fbf,
#4f5bd5
);
}
.youtube {
background: red;
}
.twitter {
background: #111;
}
.payment-grid {
display: grid;
grid-template-columns: repeat(2, 76px);
gap: 12px 6px;
}
.payment-card {
width: 76px;
height: 57px;
background: #fff;
border-radius: 0;
justify-content: center;
color: #111;
overflow: hidden;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.payment-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.visa {
color: #1434cb;
font-size: 17px;
font-weight: 800;
letter-spacing: -1px;
}
.visa::before {
content: "";
display: inline-block;
width: 17px;
height: 5px;
margin-right: 4px;
background: linear-gradient(to right, #f6d300 50%, #1434cb 50%);
}
.mastercard {
gap: 0;
}
.mastercard::after,
.mastercard::before {
content: "";
width: 27px;
height: 27px;
border-radius: 50%;
position: absolute;
}
.mastercard::before {
background: #eb001b;
left: 22px;
}
.mastercard::after {
background: #f79e1b;
left: 35px;
opacity: 0.9;
}
.master-text {
position: absolute;
bottom: 6px;
font-size: 7px;
color: #111;
z-index: 3;
}
.amex {
color: #fff;
background: #fff;
}
.amex span {
background: #1473c9;
padding: 5px 6px;
font-weight: 800;
font-size: 13px;
border-radius: 2px;
}
.apple-pay {
gap: 4px;
font-size: 16px;
font-weight: 600;
}
.apple-pay i {
font-size: 19px;
}
.google-pay {
font-size: 17px;
font-weight: 600;
}
.google-pay .g,
.google-pay .g2 {
color: #4285f4;
}
.google-pay .e,
.google-pay .o {
color: #ea4335;
}
.google-pay .o2 {
color: #fbbc05;
}
.google-pay .l {
color: #34a853;
}
.jcb {
font-size: 20px;
font-weight: 800;
background: linear-gradient(to bottom, #fff, #f5f5f5);
}
.jcb span {
background: linear-gradient(90deg, #15489c 0 33%, #df1c2e 33% 66%, #249447 66%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.footer-divider {
width: calc(100% - 60px);
max-width: 1470px;
height: 1px;
margin: 0 auto;
background: rgba(240, 210, 130, 0.28);
}
.footer-bottom {
position: relative;
min-height: 110px;
justify-content: center;
padding: 20px 80px;
}
.copyright {
color: #fff;
font-size: 17px;
text-align: center;
}
.back-to-top {
position: absolute;
right: 28px;
bottom: 14px;
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #e1bc3e;
color: #fff;
text-decoration: none;
font-size: 21px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.back-to-top::before {
content: "\2191";
font-size: 25px;
font-weight: 600;
line-height: 1;
}
.back-to-top:hover {
transform: translateY(-5px);
background: #f0cc52;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1200px) {
.footer-main {
grid-template-columns: 1.5fr 1fr 1.1fr;
row-gap: 45px;
column-gap: 45px;
}
.footer-column:nth-child(4) {
grid-column: span 2;
}
.footer-column:nth-child(5) {
grid-column: span 1;
}
}
@media (max-width: 768px) {
.footer-main {
grid-template-columns: 1fr;
padding: 45px 25px 35px;
gap: 38px;
}
.footer-column:nth-child(4),
.footer-column:nth-child(5) {
grid-column: auto;
}
.footer-description {
max-width: 100%;
font-size: 15px;
line-height: 1.65;
}
.footer-title {
font-size: 18px;
margin-bottom: 17px;
}
.footer-links {
gap: 12px;
}
.footer-links li a {
font-size: 15px;
}
.footer-address {
max-width: 100%;
font-size: 15px;
}
.hotline-email {
font-size: 19px;
}
.whatsapp-link {
font-size: 16px;
}
.payment-grid {
grid-template-columns: repeat(2, 76px);
}
.footer-divider {
width: calc(100% - 40px);
}
.footer-bottom {
min-height: 130px;
padding: 25px 80px 25px 25px;
justify-content: flex-start;
}
.copyright {
font-size: 13px;
text-align: left;
line-height: 1.5;
}
.back-to-top {
right: 20px;
bottom: 25px;
width: 48px;
height: 48px;
font-size: 18px;
}
.goog-te-gadget-simple {
width: 140px;
height: 38px;
}
}
#google_translate_element {
display: block;
width: fit-content;
}
.goog-te-gadget {
font-size: 0 !important;
font-family: Arial, sans-serif !important;
}
.basket-section,
.gold-dashboard,
.junu-chart-section,
.product-details-section {
font-family: Arial, Helvetica, sans-serif;
}
.goog-te-banner-frame,
.goog-te-gadget > span,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
display: none !important;
background: none !important;
box-shadow: none !important;
}
body {
top: 0px !important;
}
/*
 * The site initializes Google Translate with
 * layout: InlineLayout.SIMPLE, so the widget Google actually renders
 * is a <div class="goog-te-gadget-simple"> containing a
 * <span class="goog-te-menu-value">Select Language ▾</span>.
 * The classic <select class="goog-te-combo"> (styled above/below for
 * older dropdown layouts) stays hidden in SIMPLE mode, which is why
 * that styling never applied and the box showed Google's raw default
 * look instead.
 */
#google_translate_element .goog-te-gadget-simple {
position: relative !important;
display: inline-block !important;
overflow: hidden !important;
box-sizing: border-box !important;
width: 160px !important;
height: 42px !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid rgba(231, 200, 94, 0.5) !important;
border-radius: 25px !important;
background: #fff !important;
color: #333 !important;
font-size: 14px !important;
font-weight: 500;
line-height: 40px !important;
cursor: pointer;
transition: 0.3s;
}

#google_translate_element .goog-te-gadget-simple::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

#google_translate_element .goog-te-gadget-simple:hover {
border-color: #e7c85e !important;
}
/* Hide the little flag/globe icon Google adds before the text */
#google_translate_element .goog-te-gadget-icon,
#google_translate_element .goog-te-gadget-simple > span:first-child {
display: none !important;
}
/* The clickable "Select Language ▾" element Google renders as an <a>.
   Reset Google's own inline positioning so it fills the pill instead
   of sitting above/outside it. */
#google_translate_element .goog-te-menu-value,
#google_translate_element a.goog-te-menu-value {
position: static !important;
display: block !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 15px !important;
box-sizing: border-box !important;
line-height: 40px !important;
color: #333 !important;
font-size: 14px !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
#google_translate_element .goog-te-menu-value span {
position: static !important;
top: auto !important;
color: #333 !important;
font-size: 14px !important;
vertical-align: middle !important;
}
/* Remove Google's default vertical divider before the arrow, and
   position the arrow inline at the right instead of on its own line */
#google_translate_element .goog-te-menu-value span:nth-child(2) {
border-left: none !important;
padding-left: 0 !important;
margin-left: 6px !important;
}
#google_translate_element .goog-te-menu-value span:nth-child(3),
#google_translate_element .goog-te-menu-value span:nth-child(4) {
display: inline !important;
position: static !important;
border-left: none !important;
padding-left: 0 !important;
margin-left: 4px !important;
}
.goog-te-gadget .goog-te-combo {
display: block !important;
width: 160px;
height: 42px;
padding: 0 35px 0 15px;
border: 1px solid rgba(231, 200, 94, 0.5);
border-radius: 25px;
background: #fff;
color: #333;
font-size: 14px !important;
font-weight: 500;
outline: 0;
cursor: pointer;
appearance: auto;
-webkit-appearance: auto;
transition: 0.3s;
}
.goog-te-gadget .goog-te-combo:hover {
border-color: #e7c85e;
}
.goog-te-gadget .goog-te-combo:focus {
border-color: #e7c85e;
box-shadow: 0 0 0 3px rgba(231, 200, 94, 0.12);
}
.gold-dashboard {
width: 100%;
padding: 40px 3%;
background: radial-gradient(
circle at 75% 10%,
rgba(125, 0, 0, 0.18),
transparent 30%
),
radial-gradient(circle at 10% 90%, rgba(218, 165, 42, 0.05), transparent 25%),
var(--bg);
color: var(--text);
box-sizing: border-box;
}
.bullion-brands-section *,
.gold-dashboard *,
.gold-dashboard ::after,
.gold-dashboard ::before,
.junu-checkout,
.junu-checkout * {
box-sizing: border-box;
}
.dashboard-grid {
max-width: 1450px;
margin: auto;
display: grid;
grid-template-columns: minmax(0, 2.1fr) minmax(320px, 0.9fr);
gap: 18px;
}
.junu-left,
.junu-right,
.left-column,
.right-column {
display: flex;
flex-direction: column;
gap: 18px;
}
.dashboard-card {
position: relative;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 12px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.025),
rgba(255, 255, 255, 0.005)
),
var(--card);
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35),
inset 0 1px rgba(255, 255, 255, 0.025);
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.dashboard-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent 35%,
rgba(218, 165, 42, 0.04),
transparent 65%
);
}
.chart-settings {
padding: 24px;
min-height: 190px;
}
.section-title {
margin: 0;
}
.section-subtitle {
margin: 6px 0 22px;
color: var(--muted);
}
.settings-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
align-items: end;
}
.setting-box label {
display: block;
margin-bottom: 7px;
color: #aaa;
font-size: 10px;
}
.select-box {
height: 44px;
padding: 0 13px;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(218, 165, 42, 0.35);
border-radius: 7px;
color: #fff;
background: #0d0d0d;
font-size: 13px;
cursor: pointer;
transition: 0.25s;
}
.select-box span:last-child {
color: var(--gold);
font-size: 16px;
}
.refresh-btn {
width: 48px;
height: 48px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gold);
border-radius: 50%;
color: var(--gold);
background: 0 0;
font-size: 21px;
cursor: pointer;
}
.refresh-btn:hover {
background: var(--gold);
color: #111;
transform: rotate(180deg);
}
.main-chart {
padding: 22px;
}
.chart-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.chart-name,
.chart-title {
display: flex;
align-items: center;
gap: 10px;
}
.gold-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #111;
background: linear-gradient(135deg, #fff0a0, #d99c1d);
box-shadow: 0 0 20px rgba(218, 165, 42, 0.3);
}
.chart-title h2 {
margin: 0;
color: var(--gold-light);
font-size: 20px;
}
.chart-stats {
margin-top: 9px;
color: #aaa;
font-size: 11px;
}
.chart-stats b {
color: var(--red-light);
}
.current-price strong,
.price-box strong {
font-size: 24px;
}
.current-price small,
.spot-item small {
color: #999;
}
.change {
display: block;
margin-top: 4px;
color: #76b82a;
font-size: 12px;
}
.period-tabs {
display: grid;
grid-template-columns: repeat(9, 1fr);
margin-top: 25px;
border-bottom: 1px solid #282828;
}
.period-tabs span {
position: relative;
padding: 10px 5px;
color: #888;
text-align: center;
font-size: 12px;
cursor: pointer;
transition: 0.3s;
}
#countdown span,
.timer span {
padding: 6px 7px;
background: rgba(120, 0, 0, 0.35);
}
.chart-tooltip strong,
.feature h4,
.offer-top,
.period-tabs .active,
.period-tabs span:hover {
color: var(--gold-light);
}
.period-tabs .active::after {
content: "";
position: absolute;
bottom: -1px;
left: 15%;
width: 70%;
height: 2px;
background: var(--red-light);
}
.chart-area {
position: relative;
height: 300px;
margin-top: 15px;
overflow: hidden;
background: 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: 10% 20%;
}
.graph-svg,
.mini-chart svg,
.mini-line {
width: 100%;
height: 100%;
}
.graph-line {
fill: none;
stroke: var(--gold-light);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
animation: 3s forwards drawGraph;
filter: drop-shadow(0 0 4px rgba(246, 200, 76, 0.45));
}
.graph-fill {
fill: url(#goldGradient);
opacity: 0.65;
animation: 2s forwards fadeGraph;
}
@keyframes drawGraph {
to {
stroke-dashoffset: 0;
}
}
@keyframes fadeGraph {
from {
opacity: 0;
}
to {
opacity: 0.65;
}
}
.chart-point {
fill: var(--gold-light);
stroke: #111;
stroke-width: 3;
animation: 1.8s infinite pointPulse;
}
@keyframes pointPulse {
0%,
100% {
r: 5;
}
50% {
r: 8;
}
}
.chart-tooltip {
border: 1px solid var(--gold);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
.offer-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.offer-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.5px;
}
.timer {
display: flex;
gap: 4px;
}
.timer span {
border-radius: 4px;
font-size: 13px;
}
.offer-body,
.offer-content {
display: grid;
grid-template-columns: 105px 1fr;
gap: 18px;
margin-top: 20px;
}
.silver-bar {
object-fit: contain;
filter: grayscale(0.2) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.5));
}
.offer-content h3 {
margin: 3px 0 10px;
font-size: 16px;
line-height: 1.3;
}
.offer-content p {
margin: 0 0 10px;
color: #999;
font-size: 11px;
line-height: 1.45;
}
.cart-row,
.offer-buttons {
display: flex;
gap: 8px;
margin-top: 12px;
}
.qty {
width: 65px;
padding: 10px;
border: 1px solid #555;
border-radius: 5px;
background: #111;
color: #fff;
}
.feature-icon,
.view-btn {
color: var(--gold-light);
}
.cart-btn {
flex: 1;
border-radius: 5px;
}
.cart-btn:hover {
background: var(--gold);
color: #111;
transform: translateY(-2px);
}
.junu-social-login,
.spot-price-grid,
.spot-prices {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.spot-item span {
display: block;
margin-top: 3px;
color: #6eaf25;
font-size: 11px;
}
.mini-selects {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 16px;
}
.view-btn {
width: 100%;
height: 42px;
margin-top: 12px;
border: 1px solid var(--red-light);
border-radius: 5px;
background: rgba(120, 0, 0, 0.2);
font-weight: 700;
cursor: pointer;
}
.feature-grid,
.features {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 20px;
}
.feature {
display: flex;
align-items: center;
gap: 15px;
}
.feature-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--gold);
}
@media (max-width: 650px) {
.security-visual {
height: 350px;
border-radius: 22px;
}
.image-carousel {
width: 90%;
height: 90%;
}
.carousel-card {
width: 68%;
height: 78%;
border-radius: 18px;
}
.carousel-card.next {
transform: translateX(45px) translateY(-14px) scale(0.84) rotateY(-8deg);
}
.carousel-card.next-2 {
transform: translateX(75px) translateY(-24px) scale(0.7) rotateY(-12deg);
}
.carousel-card.back {
transform: translateX(100px) translateY(-30px) scale(0.58) rotateY(-15deg);
}
.period-tabs,
.right-column {
display: flex;
}
.feature,
.support-item {
border-right: 0;
border-bottom: 1px solid #292929;
}
.gold-dashboard {
padding: 20px 12px;
}
.features,
.settings-grid {
grid-template-columns: 1fr;
}
.refresh-btn {
margin: 0 auto;
}
.chart-header {
flex-direction: column;
}
.current-price {
text-align: left;
}
.period-tabs {
overflow-x: auto;
}
.period-tabs span {
min-width: 65px;
}
.chart-area {
height: 230px;
}
.offer-content {
grid-template-columns: 80px 1fr;
}
.silver-bar {
width: 75px;
height: 145px;
}
.feature {
padding: 15px 5px;
}
.feature:last-child,
.support-item:last-child {
border-bottom: 0;
}
.share-card {
flex-direction: column;
align-items: stretch;
}
.support-card {
grid-template-columns: 1fr;
gap: 20px;
}
.support-item {
padding: 15px 0;
}
.spot-prices {
gap: 5px;
}
}
.dashboard-card:hover {
border-color: rgba(218, 165, 42, 0.5);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 25px rgba(218, 165, 42, 0.04);
}
.select-box.selected,
.select-box:hover {
border-color: #dca52a;
box-shadow: 0 0 15px rgba(218, 165, 42, 0.08);
}
.cart-btn,
.copy-btn,
.refresh-btn,
.view-btn {
transition: transform 0.25s, background 0.25s, box-shadow 0.25s;
}
.copy-btn:hover,
.view-btn:hover {
box-shadow: 0 0 18px rgba(218, 165, 42, 0.25);
}
.cart-btn:active,
.copy-btn:active {
transform: scale(0.96);
}
.junu-chart-section {
width: 100%;
padding: 100px 3%;
background-color: #fff;
color: #000;
}
.spot-charts-page .settings-row {
grid-template-columns: minmax(140px, 1.25fr) 55px minmax(120px, 1fr) minmax(120px, 1fr);
gap: 14px;
align-items: end;
}
.spot-charts-page .settings-row .field select {
width: 100%;
min-width: 0;
}
.spot-charts-page .settings-row .field select#chart-currency {
min-width: 110px;
padding-right: 28px;
}
.spot-charts-page .main-chart-card.is-loading {
opacity: 0.72;
pointer-events: none;
}
.spot-charts-page .spot-sidebar-card h3 {
color: #111;
}
.spot-charts-page .spot-price-grid b {
color: #111;
font-size: 13px;
}
.spot-charts-page .spot-price-grid span.up {
color: #76b82c;
}
.spot-charts-page .spot-price-grid span.down {
color: #c8102e;
}
.spot-charts-page .spot-price-grid small {
color: #333;
}
.spot-charts-page .mini-chart {
border-radius: 8px;
overflow: hidden;
background: #f8f8f8;
}
.spot-charts-page .mini-chart svg {
display: block;
width: 100%;
height: 150px;
}
.spot-charts-page .mini-chart.is-loading {
opacity: 0.5;
}
.junu-dashboard {
width: 100%;
max-width: 1450px;
margin: auto;
display: grid;
grid-template-columns: minmax(0, 2.05fr) minmax(330px, 0.95fr);
gap: 18px;
}
.junu-card {
position: relative;
border: 1px solid rgba(218, 165, 42, 0.25);
border-radius: 12px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent),
#fffdfd;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
overflow: hidden;
transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.junu-card:hover {
transform: translateY(-2px);
border-color: rgba(218, 165, 42, 0.55);
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.45);
}
.settings-card {
padding: 24px;
}
.card-heading h2 {
margin: 0;
font-size: 21px;
}
.card-heading p {
margin: 7px 0 22px;
color: #999;
font-size: 13px;
}
.settings-row {
display: grid;
grid-template-columns: 1fr 1fr 55px 1fr 1fr;
gap: 14px;
align-items: end;
}
.field label {
display: block;
margin-bottom: 7px;
color: #121212;
font-size: 10px;
}
#quantity,
.field select,
.spot-selects select {
width: 100%;
height: 45px;
padding: 0 12px;
border: 1px solid rgba(218, 165, 42, 0.3);
border-radius: 6px;
background: #881b1b;
color: #fff;
outline: 0;
cursor: pointer;
font-size: 13px;
transition: 0.25s;
}
#quantity:focus,
.field select:focus,
.field select:hover,
.spot-selects select:focus,
.spot-selects select:hover {
border-color: #e3ac2d;
box-shadow: 0 0 15px rgba(227, 172, 45, 0.1);
}
.refresh-button {
width: 48px;
height: 48px;
border: 1px solid #dca52a;
border-radius: 50%;
background: 0 0;
color: #e5ad32;
font-size: 22px;
cursor: pointer;
transition: 0.5s;
}
#cartButton:hover,
.refresh-button:hover {
background: #dca52a;
color: #111;
}
.refresh-button.rotate {
animation: 0.6s rotateRefresh;
}
@keyframes rotateRefresh {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.main-chart-card {
padding: 23px;
}
.chart-top {
display: flex;
justify-content: space-between;
gap: 20px;
}
.gold-round {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #fff0a1, #d59818);
color: #111;
font-size: 12px;
font-weight: 700;
box-shadow: 0 0 20px rgba(218, 165, 42, 0.25);
}
#mainChart,
.chart-wrapper {
position: relative;
width: 100%;
}
.chart-name h2 {
margin: 0;
color: #eab53b;
font-size: 20px;
}
.chart-stat {
margin-top: 8px;
color: #aaa;
font-size: 11px;
}
.chart-stat span {
color: #040404;
}
.price-box span {
color: #aaa;
}
.price-box small {
display: block;
margin-top: 5px;
color: #75b82c;
font-size: 12px;
}
.period-buttons {
display: grid;
grid-template-columns: repeat(9, 1fr);
margin-top: 24px;
border-bottom: 1px solid #282828;
}
.period-buttons button {
position: relative;
padding: 11px 5px;
border: 0;
background: 0 0;
color: #888;
cursor: pointer;
font-size: 12px;
transition: 0.25s;
}
.period-buttons button.active,
.period-buttons button:hover {
color: #e5ad32;
}
.period-buttons button.active::after {
content: "";
position: absolute;
bottom: -1px;
left: 15%;
width: 70%;
height: 2px;
background: #d92328;
}
.chart-wrapper {
height: 340px;
margin-top: 15px;
padding-right: 58px;
padding-bottom: 32px;
box-sizing: border-box;
overflow: hidden;
}
.chart-grid {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(to right, rgba(0, 0, 0, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
background-size: 8.33% 25%;
}
.month-axis,
.price-axis {
font-size: 12px;
z-index: 10;
position: absolute;
display: flex;
box-sizing: border-box;
}
#mainChart {
z-index: 2;
display: block;
height: 100%;
overflow: visible;
}
.chart-line {
fill: none;
stroke: #e5ad32;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 5px rgba(229, 173, 50, 0.45));
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
transition: d 1s;
}
.chart-line.animate {
animation: 1.5s forwards drawChart;
}
@keyframes drawChart {
to {
stroke-dashoffset: 0;
}
}
.chart-fill {
fill: url(#goldArea);
opacity: 0.7;
transition: d 1s;
}
.chart-dot {
fill: #e5a33a;
stroke: #b87316;
stroke-width: 1.5;
animation: 1.8s infinite chartDotPulse;
}
@keyframes chartDotPulse {
0%,
100% {
r: 5;
}
50% {
r: 7;
}
}
@keyframes pulseDot {
0%,
100% {
r: 5;
}
50% {
r: 8;
}
}
.price-axis {
top: 0;
right: 0;
width: 58px;
height: calc(100% - 32px);
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding-left: 6px;
color: #090909;
line-height: 1;
}
.month-axis {
left: 0;
bottom: 0;
width: calc(100% - 58px);
height: 32px;
align-items: center;
justify-content: space-between;
padding: 0 4px;
}
.month-axis span,
.month-axis strong {
white-space: nowrap;
font-weight: 400;
}
#cartButton,
#countdown,
.month-axis strong,
.more-chart,
.offer-price {
font-weight: 700;
}
.chart-tooltip {
position: absolute;
right: 7%;
top: 25%;
padding: 9px 12px;
border: 1px solid #dca52a;
border-radius: 5px;
background: #181818;
color: #aaa;
font-size: 10px;
z-index: 5;
}
.chart-tooltip strong {
display: block;
margin-top: 3px;
color: #e5ad32;
font-size: 13px;
}
.feature {
display: flex;
align-items: center;
gap: 13px;
padding: 8px 18px;
border-right: 1px solid #292929;
}
.feature-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #dca52a;
color: #e5ad32;
font-size: 20px;
}
.feature h4 {
margin: 0 0 5px;
color: #e5ad32;
font-size: 12px;
}
.feature p {
margin: 0;
color: #161616;
font-size: 10px;
line-height: 1.5;
}
.share-card {
padding: 20px;
display: flex;
align-items: center;
gap: 20px;
}
.share-card h3 {
margin: 0 0 5px;
font-size: 15px;
}
.share-card p {
margin: 0;
color: #999;
font-size: 11px;
}
.share-input {
flex: 1;
display: flex;
height: 42px;
border: 1px solid #444;
border-radius: 5px;
overflow: hidden;
}
.share-input input {
min-width: 0;
flex: 1;
padding: 0 12px;
border: 0;
outline: 0;
background: #090909;
color: #aaa;
font-size: 11px;
}
.share-input button {
width: 110px;
border: 0;
background: #dca52a;
color: #111;
font-weight: 700;
cursor: pointer;
}
.support-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 24px;
}
.news-card,
.offer-card,
.spot-card {
padding: 20px;
}
.support-grid > div {
padding: 0 22px;
border-right: 1px solid #292929;
}
.support-grid h4 {
margin: 0 0 8px;
color: #e5ad32;
font-size: 13px;
}
.support-grid p {
margin: 0;
color: #999;
font-size: 11px;
line-height: 1.6;
}
.offer-card {
min-height: 430px;
background: url("../img/website-banner.jpg") center/cover no-repeat;
}
.offer-header {
display: flex;
justify-content: space-between;
align-items: center;
color: #e5ad32;
}
.offer-header strong {
font-size: 13px;
}
#countdown {
display: flex;
align-items: center;
gap: 4px;
}
#countdown span {
border-radius: 4px;
}
.silver-placeholder {
width: 90px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: linear-gradient(135deg, #ddd, #666, #ddd);
color: #555;
font-size: 11px;
transform: perspective(300px) rotateY(-7deg);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
}
.basket-item,
.basket-summary {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
}
.offer-info h3 {
margin: 0 0 9px;
font-size: 16px;
line-height: 1.3;
}
.offer-info p {
margin: 0 0 9px;
color: #999;
font-size: 11px;
line-height: 1.5;
}
.offer-price {
margin-top: 3px;
color: #ed292d;
font-size: 21px;
}
.cart-row select {
width: 65px;
padding: 0 8px;
border: 1px solid #555;
border-radius: 5px;
background: #111;
color: #fff;
}
#cartButton {
flex: 1;
border: 0;
border-radius: 5px;
background: linear-gradient(135deg, #a51d21, #721014);
color: #fff;
cursor: pointer;
transition: 0.3s;
}
.spot-card h3 {
margin: 0 0 18px;
font-size: 18px;
}
.spot-price-grid span {
display: block;
margin-top: 4px;
color: #76b82c;
font-size: 11px;
}
.spot-price-grid small {
font-size: 12px;
}
.spot-selects {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 17px;
}
.spot-periods {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
margin-top: 14px;
}
.spot-periods button {
height: 30px;
border: 1px solid #333;
border-radius: 5px;
background: #101010;
color: #888;
cursor: pointer;
}
.spot-periods button.active,
.spot-periods button:hover {
background: #8e1519;
color: #fff;
border-color: #a82024;
}
.mini-chart {
height: 150px;
margin-top: 12px;
background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 20% 25%;
}
.more-chart {
width: 100%;
height: 42px;
margin-top: 12px;
border: 1px solid #a82024;
border-radius: 5px;
background: rgba(120, 0, 0, 0.2);
color: #e5ad32;
cursor: pointer;
}
.news-heading {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.news-heading h3 {
margin: 0;
color: #e5ad32;
font-size: 15px;
}
.news-heading a {
color: #d9272d;
font-size: 11px;
}
.news-item {
display: flex;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #252525;
}
.news-item:last-child {
border-bottom: 0;
}
.news-img {
flex-shrink: 0;
width: 45px;
height: 42px;
border-radius: 5px;
background: linear-gradient(135deg, #444, #111);
}
.news-item strong {
display: block;
font-size: 11px;
line-height: 1.35;
}
.news-item small {
display: block;
margin-top: 3px;
color: #777;
font-size: 9px;
}
.bar-rotate {
position: relative;
width: 400px;
height: 400px;
perspective: 1200px;
}
.bar-img,
.product-image img {
height: 100%;
object-fit: contain;
}
.bar-img {
position: absolute;
inset: 0;
width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.bar-front {
animation: 8s infinite showFirst;
}
.bar-back {
animation: 8s infinite showSecond;
}
@keyframes showFirst {
0%,
35% {
transform: rotateY(0);
opacity: 1;
}
50% {
transform: rotateY(90deg);
opacity: 1;
}
50.1% {
opacity: 0;
}
100% {
transform: rotateY(180deg);
opacity: 0;
}
}
@keyframes showSecond {
0% {
transform: rotateY(-180deg);
opacity: 0;
}
49.9% {
transform: rotateY(-90deg);
opacity: 0;
}
50% {
opacity: 1;
transform: rotateY(-90deg);
}
65%,
85% {
transform: rotateY(0);
opacity: 1;
}
100% {
transform: rotateY(180deg);
opacity: 0;
}
}
.mini-plan-select {
width: 70px;
height: 34px;
padding: 0 10px;
border: 1px solid #ddd;
border-radius: 7px;
background: #fff;
color: #17253d;
font-size: 12px;
font-weight: 600;
outline: 0;
cursor: pointer;
}
.header-currency-select.mini-plan-select,
#header-currency,
#header-currency-mobile {
width: auto;
min-width: 76px;
max-width: 92px;
flex-shrink: 0;
padding-right: 24px;
font-size: 14px;
font-weight: 700;
font-family: Inter, "Space Grotesk", Arial, Helvetica, sans-serif;
height: 36px;
}
@media (min-width: 1101px) and (max-width: 1360px) {
.desktop-nav {
gap: 16px;
}
.desktop-nav a,
.desktop-nav .nav-dropdown > .dropdown-toggle {
font-size: 15px;
}
}
.featured-collections {
width: 100%;
padding: 70px 24px;
background: #fff;
}
.featured-container {
max-width: 1180px;
margin: 50px auto 0;
}
.featured-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.featured-header h2 {
margin: 0;
color: #111;
font-size: 41px;
font-weight: 500;
letter-spacing: -1px;
}
.featured-header a {
color: #111;
font-size: 12px;
font-weight: 500;
text-underline-offset: 3px;
}
.featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.featured-product {
position: relative;
min-height: 270px;
padding: 10px;
background: #f8f6f3;
overflow: hidden;
transition: transform 0.35s, box-shadow 0.35s;
}
.featured-product:hover {
transform: translateY(-4px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}
.product-badge {
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
padding: 10px 25px;
border-radius: 20px;
background: #881b1b;
color: #f6f0f0;
font-size: 12px;
font-weight: 600;
border: none;
}
.product-image {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-image img {
width: 100%;
display: block;
transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
max-height: 250px;
}
.featured-product:hover .product-image img {
transform: scale(1.06);
}
.product-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 7px 3px 2px;
}
.product-bottom h3 a{
margin: 0 0 3px;
color: #222;
font-size: 19px;
}
.product-bottom strong {
color: #b30707;
font-size: 16px;
font-weight: 700;
}
.product-action {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #fff;
color: #222;
font-size: 12px;
cursor: pointer;
transition: transform 0.3s, background 0.3s;
}
.size-option,
.thumb {
transition: 0.25s;
cursor: pointer;
}
.product-action:hover {
transform: rotate(45deg);
background: #111;
color: #fff;
}
@media (max-width: 800px) {
.featured-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.product-details-section {
width: 100%;
padding: 100px 20px 80px;
background: #fff;
color: #202020;
}
.product-details-wrap,
.wealth-container {
width: min(1180px, 100%);
margin: auto;
}
.product-main {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 55px;
align-items: start;
}
.product-gallery {
display: grid;
grid-template-columns: 74px 1fr;
gap: 18px;
}
.product-thumbs {
display: flex;
flex-direction: column;
gap: 12px;
}
.thumb {
width: 68px;
height: 68px;
border: 1px solid #e3e3e3;
background: #fff;
padding: 7px;
}
.thumb.active,
.thumb:hover {
border-color: #e53935;
}
.basket-image img,
.card-image img,
.junu-cart-image img,
.thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-image-box {
height: 440px;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product-image-box img {
width: 88%;
height: 88%;
object-fit: contain;
transition: 0.35s;
}
.product-meta {
display: flex;
flex-direction: column;
gap: 5px;
font-size: 11px;
color: #777;
margin-bottom: 10px;
}
.product-info h1 {
font-size: 26px;
line-height: 1.35;
font-weight: 600;
margin: 0 0 12px;
color: #171717;
}
.rating-row {
display: flex;
align-items: center;
gap: 9px;
font-size: 13px;
}
.stars {
color: #f5a623;
letter-spacing: 1px;
}
.header-label,
.related-heading span {
letter-spacing: 2px;
text-transform: uppercase;
}
.reviews {
color: #777;
}
.product-highlights {
margin: 0 0 22px;
color: #151414;
font-size: 16px;
line-height: 1.9;
}
.product-highlights li::marker {
color: #e53935;
}
.option-title {
font-size: 12px;
font-weight: 600;
margin-bottom: 9px;
}
.size-options {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 22px;
}
.price-area,
.purchase-row {
gap: 10px;
align-items: center;
display: flex;
}
.size-option {
border: 1px solid #ddd;
background: #fff;
padding: 9px 15px;
font-size: 11px;
}
.size-option.active,
.size-option:hover {
border-color: #e53935;
color: #e53935;
background: #fff7f7;
}
.price-area {
margin-bottom: 18px;
}
.old-price {
color: #999;
font-size: 12px;
text-decoration: line-through;
}
.price-area strong {
font-size: 23px;
color: #111;
}
.brand-type,
.tax {
font-size: 15px;
color: #000;
font-weight:600;
margin-bottom:10px;
}
.quantity {
display: flex;
align-items: center;
}
.spec-grid div,
.summary-row {
justify-content: space-between;
}
.buy-btn,
.cart-btn {
height: 40px;
padding: 0 23px;
border: 0;
cursor: pointer;
font-size: 16px;
font-weight: 600;
align-content: center;
text-align: center;
}
.buy-btn {
color: #fff;
background: #881b1b;
}
.cart-btn {
background: #fff;
border: 1px solid #881b1b;
color: #881b1b;
}
.buy-btn:hover {
background: #881b1b;
}
.cart-btn:hover {
background: #fff5f5;
}
.product-tabs {
margin-top: 55px;
border-top: 1px solid #eee;
}
.tabs-header {
display: flex;
gap: 65px;
border-bottom: 1px solid #eee;
}
.tab-btn {
position: relative;
border: 0;
background: 0 0;
padding: 18px 3px;
font-size: 17px;
color: #777;
cursor: pointer;
}
.tab-btn.active {
color: #111;
font-weight: 600;
}
.tab-btn.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: #881b1b;
}
.tab-content {
margin: auto;
padding: 25px 0;
}
.tab-panel {
display: none;
animation: 0.3s fadeIn;
}
.tab-panel.active {
display: block;
}
.tab-panel p {
font-size: 17px;
color: #0c0c0c;
margin: 0 0 12px;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.spec-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.spec-grid div {
display: flex;
padding: 13px 15px;
background: #f7f7f7;
font-size: 11px;
}
.spec-grid span {
color: #888;
}
.spec-grid strong {
font-weight: 500;
}
.review-summary {
text-align: center;
padding: 20px;
}
.review-summary strong {
display: block;
font-size: 30px;
margin-bottom: 8px;
}
.review-summary p {
margin-top: 8px;
}
.related-products {
margin-top: 35px;
}
.form-group,
.rating-row,
.related-heading {
margin-bottom: 25px;
}
.related-heading span {
display: block;
font-size: 10px;
color: #881b1b;
margin-bottom: 6px;
}
.related-heading h2 {
margin: 0;
font-size: 20px;
font-weight: 600;
}
.related-grid {
display: flex;
gap: 24px;
transition: transform 0.6s;
}
.plan-slider,
.related-wrapper {
width: 100%;
overflow: hidden;
position: relative;
}
.related-card {
background: #f7f7f7;
border: 1px solid #eee;
transition: 0.3s;
overflow: hidden;
flex: 0 0 calc((100% - 48px) / 3);
box-sizing: border-box;
}
.checkout-btn,
.quick-cart {
transition: 0.25s;
cursor: pointer;
}
.related-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}
.card-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.discount {
position: absolute;
top: 12px;
left: 12px;
background: #13a85c;
color: #fff;
font-size: 8px;
padding: 4px 7px;
border-radius: 10px;
z-index: 2;
}
.card-info h3,
.card-price strong,
.wishlist {
font-size: 16px;
}
.discount.orange {
background: #f59e0b;
}
.discount.purple {
background: #7967e8;
}
.wishlist {
position: absolute;
right: 12px;
top: 10px;
width: 28px;
height: 28px;
border: 0;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
cursor: pointer;
}
.card-info {
padding: 15px;
background: #fff;
}
.card-info h3 a {
font-weight: 500;
margin: 0 0 8px;
line-height: 1.5;
color: #000;
}
.card-rating {
font-size: 10px;
color: #f5a623;
margin-bottom: 8px;
}
.card-rating span {
color: #999;
margin-left: 4px;
}
.card-price {
display: flex;
align-items: center;
gap: 8px;
}
.card-price del {
color: #aaa;
font-size: 10px;
}
.quick-cart {
width: 100%;
border: 1px solid #ddd;
background: #8c1717;
padding: 8px;
font-size: 14px;
margin-top: 12px;
color: #fff;
}
.quick-cart:hover {
background: #e53935;
border-color: #e53935;
color: #fff;
}
.slider-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 25px;
}
.slider-dots span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #d5d5d5;
cursor: pointer;
transition: 0.3s;
}
.slider-dots span.active {
width: 28px;
border-radius: 20px;
background: #970000;
}
@media (max-width: 900px) {
.product-main {
grid-template-columns: 1fr;
gap: 35px;
}
.product-image-box {
height: 400px;
}
.related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.basket-section {
width: 100%;
padding: 118px 20px 70px;
background: #f7f7f7;
color: #202020;
box-sizing: border-box;
}
.basket-container {
width: min(1200px, 100%);
margin: auto;
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
gap: 25px;
align-items: start;
}
.basket-left h2 {
font-size: 24px;
margin: 0 0 20px;
font-weight: 700;
color: #222;
letter-spacing: 0.02em;
}
.basket-item {
position: relative;
display: grid;
grid-template-columns: 105px 1fr;
gap: 14px;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 14px;
padding: 16px;
margin-bottom: 16px;
min-height: 125px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);
}
.basket-image {
position: relative;
width: 105px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.rare-badge {
position: absolute;
top: -3px;
right: -3px;
width: 30px;
height: 30px;
background: #ffd500;
border-radius: 50%;
font-size: 7px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
}
.basket-details {
position: relative;
padding-right: 22px;
}
.basket-details h3 {
font-size: 17px;
line-height: 1.25;
margin: 0 0 3px;
font-weight: 700;
}
.ref {
display: block;
font-size: 9px;
color: #777;
margin-bottom: 5px;
}
.remove-item {
position: absolute;
top: -5px;
right: 0;
border: 0;
background: 0 0;
font-size: 19px;
line-height: 1;
cursor: pointer;
font-weight: 700;
color: #222;
}
.delivery-options {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 14px;
color: #777;
margin-top: 3px;
}
.delivery-options span {
color: #18b957;
font-weight: 800;
margin-right: 5px;
}
.delivery-text {
display: flex;
flex-direction: column;
line-height: 1.4;
}
.delivery-title {
display: block;
font-size: 17px;
font-weight: 700;
color: #222;
}
.delivery-subtitle {
display: block;
font-size: 13px;
font-weight: 400;
color: #777;
margin-top: 2px;
}
.item-bottom {
display: flex;
align-items: center;
gap: 20px;
margin-top: 9px;
border-top: 1px solid #eee;
padding-top: 7px;
}
.quantity-area {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
}
.quantity {
height: 24px;
display: flex;
align-items: center;
border: 1px solid #d8d8d8;
border-radius: 12px;
overflow: hidden;
}
.quantity button {
width: 25px;
height: 24px;
border: 0;
background: #fff;
color: #168ed0;
font-size: 15px;
cursor: pointer;
}
.quantity input {
width: 25px;
height: 24px;
text-align: center;
border: 0;
outline: 0;
font-size: 11px;
color: #222;
}
.item-bottom .item-price {
color: #555;
font-size: 10px;
}
.item-bottom strong {
margin-left: auto;
font-size: 15px;
}
.basket-summary {
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 14px;
padding: 22px;
margin-top: 0;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);
position: sticky;
top: 118px;
}
.junu-cart-card,
.junu-checkout-card,
.junu-payment-card,
.junu-summary-card {
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.035);
}
.delivery-tabs {
display: flex;
gap: 12px;
background: #f5f5f5;
border-radius: 8px;
padding: 7px;
margin: 20px 0;
}
.delivery-tab {
flex: 1;
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 10px;
cursor: pointer;
padding: 7px 4px;
border-radius: 6px;
}
.delivery-tab input {
display: none;
}
.radio {
width: 13px;
height: 13px;
border: 1px solid #bbb;
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.delivery-tab.active,
.delivery-tab:has(input:checked) {
background: #fff;
}
.delivery-tab input:checked + .radio {
border-color: #b58a18;
}
.delivery-tab input:checked + .radio::after {
content: "";
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #b58a18;
top: 2px;
left: 2px;
}
.basket-summary .summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
font-size: 15px;
padding: 8px 0;
color: #555;
}
.basket-summary .summary-row span:last-child {
font-weight: 600;
color: #222;
white-space: nowrap;
}
.basket-summary .summary-total {
border-top: 1px solid #e5e5e5;
margin-top: 8px;
padding: 14px 0 4px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
font-size: 20px;
}
.basket-summary .summary-total strong:last-child {
color: #9c7410;
}
.basket-summary .checkout-btn {
width: 100%;
min-height: 46px;
border: 0;
border-radius: 10px;
background: #881b1b;
color: #fff;
font-size: 15px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 12px 16px;
margin-top: 16px;
cursor: pointer;
transition: background 0.25s ease, transform 0.2s ease;
}
.basket-summary .checkout-btn:hover {
background: #6c060b;
transform: translateY(-1px);
}
.basket-summary .coupon-box {
max-width: none;
height: 48px;
margin-bottom: 4px;
}
.basket-summary .coupon-box input,
.basket-summary .coupon-box button {
font-size: 14px;
font-family: inherit;
}
.basket-summary .coupon-box button {
width: 88px;
border-radius: 0 6px 6px 0;
}
.basket-summary .coupon-box input {
border-radius: 6px 0 0 6px;
}
.checkout-btn {
width: 100%;
height: 40px;
border: 0;
border-radius: 20px;
background: #7b1e1e;
color: #fff;
font-size: 15px;
font-weight: 600;
align-content: center;
text-align: center;
padding: 10px;
}
.checkout-btn:hover {
background: #d68a1f;
transform: translateY(-1px);
}
.secure-text {
font-size: 9px;
color: #999;
line-height: 1.6;
margin: 12px 5px 0;
}
.secure-text a {
color: #5889bd;
text-decoration: none;
}
@media (max-width: 520px) {
.featured-collections {
padding: 50px 15px;
}
.featured-header h2 {
font-size: 27px;
}
.featured-header a,
.product-bottom h3 {
font-size: 10px;
}
.featured-grid {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.featured-product {
min-height: 220px;
}
.product-image {
height: 145px;
}
.product-bottom strong {
font-size: 11px;
}
.basket-section {
padding: 100px 12px 50px;
}
.basket-item {
grid-template-columns: 75px 1fr;
padding: 10px;
gap: 10px;
}
.basket-image {
width: 75px;
height: 80px;
}
.basket-details h3 {
font-size: 14px;
}
.item-bottom {
gap: 8px;
flex-wrap: wrap;
}
.item-bottom strong {
margin-left: 0;
}
.delivery-tabs {
flex-direction: column;
gap: 3px;
}
}
.junu-card-heading {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 13px;
margin-bottom: 13px;
border-bottom: 1px solid #e6e9ec;
}
.junu-heading-left,
.junu-right-heading-left {
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 500;
}
.junu-shipping-input {
width: 100%;
height: 48px;
display: flex;
align-items: center;
border: 1px solid #dfe3e7;
border-radius: 7px;
background: #fff;
}
.junu-shipping-input input {
flex: 1;
width: 100%;
height: 100%;
padding: 0 14px;
border: none;
outline: 0;
font-size: 13px;
color: #333;
}
.junu-shipping-input input::placeholder {
color: #a6abb1;
}
.junu-shipping-input button {
width: 45px;
height: 100%;
border: none;
background: 0 0;
color: #999;
font-size: 17px;
cursor: pointer;
}
.junu-section-title {
font-size: 25px;
font-weight: 400;
margin-bottom: 13px;
}
.junu-delivery-options {
display: flex;
align-items: center;
gap: 25px;
margin-bottom: 13px;
}

.junu-delivery-option input,
.junu-payment-option input,
.junu-save-info input,
.junu-terms input {
position: absolute;
opacity: 0;
}
.junu-radio {
width: 19px;
height: 19px;
border: 1px solid #c9cfd5;
border-radius: 50%;
position: relative;
}
.junu-delivery-option input:checked + .junu-radio {
border: 2px solid #1688ed;
}
.junu-delivery-option input:checked + .junu-radio::after {
content: "";
position: absolute;
width: 11px;
height: 11px;
left: 2px;
top: 2px;
border-radius: 50%;
background: #1688ed;
}
.junu-delivery-option.disabled {
color: #ff7373;
}
.junu-delivery-description {
margin: 0;
font-size: 17px;
line-height: 1.6;
color: #555b62;
}
.junu-payment-card {
background: #fff;
border: 1px solid #e5e8ec;
border-radius: 10px;
padding: 17px;
}
.junu-payment-heading {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 13px;
margin-bottom: 12px;
border-bottom: 1px solid #e6e9ec;
font-size: 17px;
font-weight: 500;
}
.junu-payment-option {
min-height: 58px;
width: 100%;
display: flex;
align-items: center;
gap: 9px;
position: relative;
padding: 0 12px;
margin-bottom: 9px;
border: 1px solid #e1e5e9;
border-radius: 8px;
background: #fff;
cursor: pointer;
transition: 0.2s;
}
.junu-payment-option:hover {
border-color: #cdd3d9;
}
.junu-payment-radio {
width: 14px;
height: 14px;
flex-shrink: 0;
border: 1px solid #8c959e;
border-radius: 50%;
position: relative;
}
.junu-card-brands,
.junu-paypal-logo {
margin-left: auto;
display: flex;
align-items: center;
}
.junu-payment-option input:checked + .junu-payment-radio {
border: 2px solid #1787e9;
}
.junu-payment-option input:checked + .junu-payment-radio::after {
content: "";
position: absolute;
width: 6px;
height: 6px;
left: 2px;
top: 2px;
border-radius: 50%;
background: #1787e9;
}
.junu-payment-name {
font-size: 15px;
font-weight: 500;
color: #20242a;
}
.junu-paypal-logo {
width: 34px;
height: 28px;
justify-content: center;
background: #fafafa;
color: #126db1;
font-size: 19px;
font-weight: 800;
border-radius: 4px;
}
.junu-credit-wrapper {
overflow: hidden;
border: 1px solid #e1e5e9;
border-radius: 8px;
margin-bottom: 9px;
}
.junu-credit-wrapper .junu-payment-option {
margin: 0;
border: none;
border-radius: 0;
}
.junu-card-brands {
gap: 9px;
}
.junu-cvv-wrapper,
.junu-input-icon-wrapper {
align-items: center;
display: flex;
background: #fff;
}
.junu-visa {
font-size: 11px;
font-weight: 800;
color: #263b91;
}
.junu-mastercard {
width: 34px;
height: 20px;
position: relative;
display: block;
}
.junu-mastercard span {
position: absolute;
width: 18px;
height: 18px;
top: 1px;
border-radius: 50%;
}
.junu-form-group input,
.junu-input-icon-wrapper {
width: 100%;
border: 1px solid #dfe3e7;
height: 30px;
}
.junu-mastercard span:first-child {
left: 2px;
background: #ed4c4c;
}
.junu-mastercard span:last-child {
right: 2px;
background: #f0a03a;
}
.junu-amex {
padding: 2px 4px;
color: #1478bb;
border: 1px solid #1478bb;
font-size: 8px;
font-weight: 700;
}
.junu-more {
color: #1685df;
font-size: 12px;
}
.junu-credit-form {
padding: 2px 12px 13px;
background: #f8f9fb;
}
.junu-form-group {
margin-bottom: 10px;
}
.junu-form-group:last-child {
margin-bottom: 0;
}
.junu-form-group label {
display: block;
margin-bottom: 5px;
font-size: 15px;
color: #20242a;
}
.junu-form-group input {
padding: 0 9px;
border-radius: 5px;
outline: 0;
background: #fff;
font-size: 11px;
color: #333;
}
.junu-form-group input:focus {
border-color: #1787e9;
}
.junu-input-icon-wrapper {
border-radius: 5px;
}
.junu-input-small-icon {
margin-left: 8px;
color: #949ba2;
font-size: 11px;
}
.junu-cvv-wrapper input,
.junu-input-icon-wrapper input {
border: none;
flex: 1;
}
.junu-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.junu-cvv-wrapper {
height: 30px;
border: 1px solid #dfe3e7;
border-radius: 5px;
}
.junu-bnpl-logo,
.junu-cod-logo {
margin-left: auto;
align-items: center;
display: flex;
}
.junu-cvv-wrapper span {
width: 25px;
text-align: center;
color: #9ba2a9;
font-size: 12px;
}
.junu-bnpl-logo {
width: 34px;
height: 28px;
justify-content: center;
color: #20b98b;
background: #f1fff9;
font-size: 20px;
border-radius: 4px;
}
.junu-cod-logo {
width: 27px;
height: 27px;
justify-content: center;
border-radius: 50%;
background: #eaf8ee;
color: #40a75d;
font-size: 13px;
font-weight: 700;
}
.junu-save-info {
display: flex;
align-items: center;
gap: 7px;
margin: 16px 0 13px;
font-size: 11px;
color: #444a50;
cursor: pointer;
}
.junu-checkmark {
width: 13px;
height: 13px;
flex-shrink: 0;
border: 1px solid #c8ced4;
border-radius: 2px;
position: relative;
}
.junu-save-info input:checked + .junu-checkmark,
.junu-terms input:checked + .junu-terms-box {
background: #1687e9;
border-color: #1687e9;
}
.junu-save-info input:checked + .junu-checkmark::after {
content: "✓";
position: absolute;
left: 2px;
top: -1px;
color: #fff;
font-size: 9px;
}
.junu-terms {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 14px;
font-size: 13px;
cursor: pointer;
}
.junu-terms-box {
width: 15px;
height: 15px;
flex-shrink: 0;
border: 1px solid #c9cfd5;
border-radius: 2px;
position: relative;
}
.junu-terms input:checked + .junu-terms-box::after {
content: "✓";
position: absolute;
left: 3px;
top: 0;
color: #fff;
font-size: 10px;
}
.junu-pay-button {
width: 100%;
height: 39px;
border: none;
border-radius: 5px;
background: #9d1d21;
color: #fff;
font-size: 15px;
cursor: pointer;
transition: background 0.2s;
}
.junu-pay-button:hover {
background: #83171a;
}
.junu-checkout-right {
display: flex;
flex-direction: column;
gap: 18px;
position: sticky;
top: 20px;
}
.junu-cart-card,
.junu-summary-card {
background: #eee5e5;
border: 1px solid #e5e8ec;
border-radius: 10px;
}
.junu-right-heading {
padding: 16px;
border-bottom: 1px solid #e6e9ec;
}
.junu-cart-item {
position: relative;
display: grid;
grid-template-columns: 55px minmax(90px, 1fr) auto auto;
align-items: center;
gap: 10px;
padding: 15px;
}
.junu-cart-image {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e8eaed;
border-radius: 5px;
background: #fafafa;
overflow: hidden;
}
.junu-qty-value,
.junu-quantity {
align-items: center;
display: flex;
}
.junu-cart-product-name {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #25292e;
}
.junu-cart-product-info {
margin-top: 4px;
font-size: 12px;
font-weight: 600;
line-height: 1.3;
color: #8b9299;
}
.junu-quantity {
height: 28px;
border: 1px solid #dfe3e7;
border-radius: 5px;
overflow: hidden;
}
.junu-quantity button {
width: 26px;
height: 100%;
border: none;
background: #fff;
color: #5d6670;
font-size: 15px;
cursor: pointer;
}
.junu-quantity button:hover {
background: #f4f6f8;
}
.junu-qty-value {
min-width: 26px;
height: 100%;
justify-content: center;
border-left: 1px solid #e1e4e7;
border-right: 1px solid #e1e4e7;
font-size: 12px;
}
.junu-cart-price {
/* min-width: 65px; */
text-align: right;
font-size: 13px;
font-weight: 500;
color: #111;
}
.junu-cart-remove {
position: absolute;
right: 10px;
top: 10px;
width: 17px;
height: 17px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: #fff;
color: #777f87;
font-size: 13px;
line-height: 1;
padding: 0;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.13);
}
.junu-cart-remove:hover {
color: #d51d25;
}
.junu-summary-card {
padding-bottom: 17px;
}
.junu-summary-card .junu-right-heading {
margin-bottom: 4px;
}
.junu-summary-row span {
max-width: 70%;
}

.junu-summary-divider {
height: 1px;
margin: 5px 16px 12px;
background: #e0e3e6;
}
.about-description,
.about-title span {
color: var(--white);
}
@media (max-width: 600px) {
.plans-section {
padding: 20px 15px 40px;
}
.plans-container {
gap: 18px;
}
.plan-card {
min-height: 600px;
padding: 35px 28px;
border-radius: 25px;
}
.plan-title {
font-size: 34px;
}
.plan-description {
font-size: 16px;
line-height: 1.55;
}
.plan-button {
margin-top: 35px;
}
.gold-visual {
right: -30px;
bottom: -20px;
transform: scale(0.8);
transform-origin: bottom right;
}
.gsp-visual {
right: -40px;
bottom: -10px;
transform: scale(0.75);
transform-origin: bottom right;
}
.testimonial-section {
padding: 65px 0;
}
.testimonial-header {
margin-bottom: 35px;
}
.testimonial-header h2 {
font-size: 38px;
}
.review-text,
.testimonial-header p {
font-size: 15px;
}
.testimonial-card {
flex-basis: 310px;
min-height: 410px;
padding: 30px 25px 25px;
border-radius: 22px;
}
.review-text {
line-height: 1.65;
}
.testimonial-track {
gap: 18px;
animation-duration: 22s;
}
.big-quote {
font-size: 80px;
}
.testimonial-bottom {
padding: 0 20px;
}
.cta-section {
min-height: 400px;
padding: 70px 20px;
}
.cta-content h2 {
font-size: 39px;
line-height: 1.08;
letter-spacing: -1px;
}
.cta-content h2 br,
.junu-amex,
.junu-more {
display: none;
}
.cta-buttons {
flex-direction: column;
width: 100%;
}
.btn-primary,
.btn-secondary {
width: 100%;
max-width: 280px;
}
.product-details-section {
padding: 100px 5px;
}
.card-image,
.card-info {
padding: 10px;
}
.product-gallery {
grid-template-columns: 55px 1fr;
gap: 10px;
}
.thumb {
width: 50px;
height: 50px;
}
.product-image-box {
height: 280px;
}
.product-info h1 {
font-size: 19px;
}
.purchase-row {
flex-wrap: wrap;
}
.buy-btn,
.cart-btn {
flex: 1;
}
.tabs-header {
gap: 25px;
}
.tab-btn {
font-size: 10px;
}
.junu-form-row,
.spec-grid {
grid-template-columns: 1fr;
}
.related-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.card-image {
height: 120px;
}
.junu-checkout {
/* padding: 100px 10px 40px; */
}
.junu-section-title {
font-size: 22px;
}
.junu-card-brands {
gap: 5px;
}
.junu-cart-item {
grid-template-columns: 52px 1fr auto;
}
.junu-cart-image {
width: 52px;
height: 52px;
}
.junu-cart-price {
grid-column: 2;
text-align: left;
margin-top: -4px;
}
.junu-quantity {
grid-column: 3;
grid-row: 1 / span 2;
}
.junu-summary-row {
font-size: 11px;
}
.junu-payment-name {
font-size: 12px;
}
}
.about-hero {
position: relative;
padding: 100px 0;
background-image: url("../img/about-us.webp");
background-size: cover;
background-position: center;
background-color: #000;
}
.about-hero::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--dark-grey-overlay);
z-index: 1;
}
.hero-content-about {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about-title {
font-size: 48px;
font-weight: 700;
margin: 0 0 30px;
text-transform: uppercase;
}
.about-description {
font-size: 18px;
max-width: 800px;
line-height: 1.6;
margin-bottom: 50px;
}
.container-about {
max-width: 1200px;
margin: 0 auto;
padding: 50px 20px;
display: flex;
align-items: flex-start;
}
.feature-info,
.left-content,
.right-content {
flex: 1;
}
.about-label {
color: #800101;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
}
.service-since {
font-size: 18px;
font-weight: 700;
margin-bottom: 15px;
color: #333;
}
.description-text,
.info-paragraph {
font-size: 14px;
line-height: 1.6;
color: #555;
margin-bottom: 30px;
}
.history-button {
display: inline-block;
background-color: #800101;
color: #fff;
padding: 12px 30px;
border-radius: 25px;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.image-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 0 30px;
}
.image-content img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.info-item {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.bullets li,
.header-label {
align-items: center;
font-size: 14px;
}
.icon {
width: 30px;
height: 30px;
margin-right: 15px;
margin-top: 2px;
}
.icon svg {
width: 100%;
height: 100%;
fill: #6a1b9a;
}
.item-text h3 {
font-size: 18px;
margin: 0 0 10px;
color: #000;
}
.item-text p {
font-size: 14px;
line-height: 1.6;
margin: 0;
color: #555;
}
.bullets {
margin-top: 30px;
list-style: none;
padding: 0;
}
.bullets li {
margin-bottom: 10px;
display: flex;
}
.bullet-icon {
color: #6a1b9a;
margin-right: 10px;
font-weight: 700;
}
.foundations-section {
padding: 80px 20px;
text-align: center;
background-color: #fcf6f4;
}
.foundations-header {
margin-bottom: 60px;
}
.header-label {
display: inline-flex;
color: #ff5f7f;
margin-bottom: 15px;
}
.card-number-badge,
.sub-heading {
align-items: center;
font-weight: 700;
}
.header-label-arrow {
margin-left: 8px;
color: #ff5f7f;
font-size: 10px;
}
.main-title .gold-flower {
color: #d1b464;
font-size: 32px;
vertical-align: middle;
margin-left: 5px;
}
.foundations-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.foundation-card {
background-color: #0e0f0f;
padding: 40px;
border-radius: 12px;
text-align: left;
transition: transform 0.3s, box-shadow 0.3s;
}
.foundation-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.card-number-badge {
position: absolute;
top: 15px;
right: 15px;
background-color: #1a1e22;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
justify-content: center;
font-size: 16px;
}
.card-squiggle {
fill: #d1b464;
width: 60px;
height: auto;
margin-bottom: 20px;
}
.card-body {
color: #fff;
font-size: 16px;
margin-bottom: 30px;
}
.card-link {
display: inline-block;
transition: color 0.3s;
}
.featured-products-section {
background-color: #fafafa;
padding: 60px 20px;
color: #2b2d42;
}
.nav-btn:hover,
.sub-heading {
color: #7b2cbf;
}
.products-container {
max-width: 1200px;
margin: 0 auto;
}
.products-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 40px;
}
.sub-heading {
display: flex;
gap: 6px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
}
.sub-heading-icon {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 8px solid #7b2cbf;
}
.main-title {
margin: 0;
line-height: 1.2;
}
.slider-controls {
display: flex;
align-items: center;
gap: 16px;
}
.slider-counter {
font-size: 18px;
color: #a0a0a0;
font-weight: 500;
}
.slider-counter strong {
color: #7b2cbf;
font-size: 24px;
font-weight: 700;
}
.benefit-item,
.slider-nav {
display: flex;
align-items: center;
gap: 12px;
}
.nav-btn {
background: 0 0;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #8d99ae;
transition: color 0.2s;
}
.nav-divider {
width: 50px;
height: 1px;
background-color: #e0e0e0;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 30px;
}
.product-card {
background: #fff;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: transform 0.3s, box-shadow 0.3s;
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.brands-btn:hover,
.help-card:hover,
.neon-btn:hover {
transform: translateY(-2px);
}
.help-card:hover,
.share-btn {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.card-image-wrapper {
position: relative;
width: 100%;
height: 260px;
background-color: #f4f4f6;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.card-content,
.share-btn {
background: #fff;
display: flex;
}
.card-image-wrapper.gold-bg {
background: linear-gradient(135deg, #fce082 0, #f7c948 100%);
}
.card-image-wrapper.silver-bg {
background: linear-gradient(135deg, #e2e8f0 0, #cbd5e1 100%);
}
.card-image-wrapper img {
max-height: 80%;
max-width: 80%;
object-fit: contain;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.15));
}
.card-content {
padding: 30px 28px 28px;
position: relative;
flex-grow: 1;
flex-direction: column;
border-radius: 24px 0 28px 28px;
}
.share-btn {
position: absolute;
top: -24px;
right: 20px;
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
color: #4a5568;
transition: 0.2s;
}
.share-btn:hover {
background: #7b2cbf;
color: #fff;
}
.share-btn-jsc {
position: absolute;
top: 49px;
right: 23px;
width: 200px;
height: 45px;
background-color: #881b1b;
border: none;
border-radius: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s, transform 0.2s;
color: #fff;
}
.product-title {
font-size: 22px;
font-weight: 700;
color: #1a202c;
margin: 0 0 14px;
line-height: 1.3;
}
.product-description {
font-size: 14px;
color: #718096;
line-height: 1.6;
margin: 0 0 20px;
flex-grow: 1;
}
.discover-link {
font-size: 14px;
font-weight: 700;
color: #8b0000;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: gap 0.2s;
}
.btn-purple,
.card-link {
font-weight: 600;
text-decoration: none;
}
.discover-link:hover {
gap: 8px;
color: #b30000;
}
.hero-banner {
background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)),
url("../img/contac-us.webp") center/cover no-repeat;
padding: 100px 20px 80px;
text-align: center;
color: #fff;
}
.hero-banner h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 10px;
}
.breadcrumb {
font-size: 14px;
color: #cbd5e1;
}
.breadcrumb a {
color: #cbd5e1;
text-decoration: none;
}
.info-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
}
.info-intro .tag {
color: #ac0920;
font-weight: 700;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
position: relative;
padding-left: 20px;
}
.info-intro .tag::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 2px;
background-color: #6c5ce7;
}
.info-intro h2 {
font-size: 36px;
line-height: 1.2;
color: #0f172a;
margin: 15px 0 25px;
}
.btn-purple {
display: inline-block;
background-color: #881b1b;
color: #fff;
padding: 12px 28px;
border-radius: 25px;
font-size: 14px;
transition: background 0.3s;
}
.btn-purple:hover {
background-color: #e04367;
}
.cards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}
.info-card {
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 25px;
}
.card-header h3 {
font-size: 20px;
color: #0f172a;
}
.author-role,
.card-header p {
font-size: 13px;
color: #64748b;
}
.icon-box {
width: 44px;
height: 44px;
background: #feebeb;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #c91f2e;
}
.detail-item {
margin-bottom: 18px;
}
.detail-item .label {
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
color: #000;
margin-bottom: 4px;
}
.detail-item .val {
font-size: 14px;
color: #334155;
font-weight: 500;
line-height: 1.5;
}
.card-link {
color: #881b1b;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
}
.features-section-contact {
background: #fff;
padding: 50px 20px;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
}
.features-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.feature-item h4 {
font-size: 18px;
color: #0f172a;
margin-bottom: 8px;
}
.feature-item p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
.map-section {
width: 100%;
height: 400px;
background: #e2e8f0;
}
.map-section iframe {
width: 100%;
height: 100%;
border: 0;
}
.shopfront-section {
max-width: 1200px;
margin: 0 auto;
padding: 80px 20px;
}
.shopfront-title {
text-align: center;
margin-bottom: 40px;
}
.shopfront-title h2 {
font-size: 32px;
color: #0f172a;
}
.shopfront-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.shopfront-card {
position: relative;
border-radius: 16px;
overflow: hidden;
height: 280px;
background-size: cover;
background-position: center;
}
.shopfront-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
display: flex;
align-items: flex-end;
padding: 25px;
color: #fff;
}
.faq-section,
.form-group {
flex-direction: column;
display: flex;
}
.form-section {
background-color: #1e293b;
color: #fff;
padding: 80px 20px;
}
.form-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 60px;
}
.form-intro .tag {
color: #ff537c;
font-weight: 700;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.form-intro h2 {
font-size: 40px;
line-height: 1.2;
margin: 15px 0 20px;
}
.form-intro p {
color: #94a3b8;
font-size: 15px;
line-height: 1.6;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.form-group {
gap: 8px;
}
.form-control {
background-color: #0f172a;
border: 1px solid #334155;
border-radius: 8px;
padding: 14px 16px;
color: #fff;
font-size: 14px;
outline: 0;
transition: border-color 0.3s;
}
.form-control:focus {
border-color: #6c5ce7;
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
.checkbox-group {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: #94a3b8;
margin-top: 5px;
}
.btn-pink {
background-color: #8c1717;
color: #fff;
border: none;
padding: 14px 32px;
border-radius: 25px;
font-weight: 600;
font-size: 15px;
cursor: pointer;
align-self: flex-start;
transition: background 0.3s;
}
.btn-pink:hover {
background-color: #e04367;
}

.btn-pink:disabled {
    background: #D4AF37;   
    color: #000;        
    cursor: not-allowed;
    opacity: 0.7;
}

@media (max-width: 992px) {
.cards-grid,
.features-container,
.form-container,
.info-section,
.shopfront-grid {
grid-template-columns: 1fr;
}
}
.faq-section *,
.feedback-section * {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.faq-section {
background-color: #080b0e;
color: #e2e8f0;
padding: 80px 20px;
min-height: 100vh;
align-items: center;
}
.faq-header {
text-align: center;
margin-bottom: 60px;
max-width: 600px;
}
.faq-title {
font-size: 42px;
font-weight: 600;
color: #fff;
letter-spacing: -1px;
margin-bottom: 14px;
}
.faq-subtitle {
font-size: 15px;
color: #8b949e;
line-height: 1.6;
}
.faq-container {
max-width: 960px;
width: 100%;
display: grid;
grid-template-columns: 240px 1fr;
gap: 60px;
}
.faq-sidebar ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 18px;
}
.sidebar-item {
font-size: 15px;
font-weight: 500;
color: #8b949e;
cursor: pointer;
transition: color 0.2s, transform 0.2s;
}
.sidebar-item:hover {
color: #f0f6fc;
}
.sidebar-item.active {
color: #9b0b12;
font-weight: 600;
}
.category-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
color: #f0f6fc;
}
.category-icon {
color: #910815;
}
.category-header h3 {
font-size: 18px;
font-weight: 500;
}
.accordion-list,
.testimonial-card {
display: flex;
flex-direction: column;
}
.faq-item {
border-bottom: 1px solid #161b22;
}
.faq-question {
width: 100%;
background: 0 0;
border: none;
padding: 22px 0;
display: flex;
justify-content: space-between;
align-items: center;
text-align: left;
font-size: 15px;
font-weight: 500;
color: #f0f6fc;
cursor: pointer;
transition: color 0.2s;
}
.faq-question:hover {
color: #920e0e;
}
.icon-toggle {
position: relative;
width: 26px;
height: 26px;
border-radius: 50%;
background-color: #161b22;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background-color 0.2s;
}
.icon-toggle::after,
.icon-toggle::before {
content: "";
position: absolute;
background-color: #8b949e;
border-radius: 2px;
transition: transform 0.25s, opacity 0.25s, background-color 0.2s;
}
.icon-toggle::before {
width: 10px;
height: 1.5px;
}
.icon-toggle::after {
width: 1.5px;
height: 10px;
}
.faq-item.active .icon-toggle::after {
transform: rotate(90deg);
opacity: 0;
}
.faq-item.active .icon-toggle {
background-color: #21262d;
}
.faq-item.active .icon-toggle::before {
background-color: #f0f6fc;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s, padding-bottom 0.3s;
}
.faq-item.active .faq-answer {
max-height: 200px;
padding-bottom: 20px;
}
.faq-answer p {
font-size: 14px;
line-height: 1.6;
color: #8b949e;
}
.help-section {
background-color: #fdeee9;
padding: 60px 20px;
font-family: Montserrat, -apple-system, BlinkMacSystemFont, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
.help-container {
max-width: 1000px;
width: 100%;
text-align: center;
}
.help-title {
font-size: 36px;
font-weight: 700;
color: #000;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.help-subtitle {
font-size: 16px;
color: #222;
margin-bottom: 40px;
}
.help-cards {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.help-card {
background-color: #fff;
border-radius: 12px;
padding: 18px 32px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
text-decoration: none;
color: #000;
font-size: 16px;
font-weight: 600;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
transition: transform 0.2s, box-shadow 0.2s;
}
.help-icon {
color: #000;
flex-shrink: 0;
}
@media (max-width: 768px) {
.foundations-grid {
grid-template-columns: 1fr;
}
.container-about {
display: block;
}
.image-content {
padding: 10px 0;
}
.products-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.featured-header {
display: block !important;
}
.help-title,
.main-title {
font-size: 28px;
}
.products-grid {
grid-template-columns: auto;
}
.faq-container {
grid-template-columns: 1fr;
gap: 30px;
}
.faq-title {
font-size: 32px;
}
.faq-sidebar ul {
flex-direction: row;
overflow-x: auto;
padding-bottom: 12px;
border-bottom: 1px solid #161b22;
}
.help-cards {
flex-direction: column;
width: 100%;
}
.help-card {
width: 100%;
max-width: 380px;
}
}
.policy-page {
background-color: #f4e8e8;
font-family: Inter, sans-serif;
color: #334155;
padding-bottom: 60px;
}
.hero-header {
background: linear-gradient(rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.65)),
url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=1200")
center/cover;
height: 260px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
}
.hero-header h1 {
font-size: 38px;
font-weight: 600;
margin: 0;
}
.effective-date {
font-size: 12px;
letter-spacing: 1.5px;
margin-top: 8px;
opacity: 0.85;
}
.card-container {
max-width: 1200px;
margin: -50px auto 0;
background: #fff;
border-radius: 24px;
padding: 48px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.main-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 12px;
}
.intro-text {
font-size: 14px;
line-height: 1.6;
color: #475569;
}
.dotted-divider {
border: none;
border-top: 2px dotted #cbd5e1;
margin: 32px 0;
}
.policy-section {
margin-bottom: 36px;
}
.policy-section h3 {
color: #700507;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.policy-section p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 12px;
}
.check-list {
list-style: none;
padding: 0;
}
.check-list li {
font-size: 14px;
line-height: 1.6;
margin-bottom: 10px;
position: relative;
padding-left: 28px;
}
.check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #2563eb;
font-weight: 700;
font-size: 15px;
}
.contact-box p {
margin-bottom: 6px;
}
.testimonial-section-de {
background-color: #faf2f4;
color: #fff;
padding: 90px 24px;
width: 100%;
display: flex;
justify-content: center;
}
.testimonial-container {
max-width: 1100px;
width: 100%;
}
.testimonial-header {
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 70px;
align-items: start;
}
.section-title {
font-size: 52px;
font-weight: 700;
line-height: 1.1;
color: #fff;
letter-spacing: -1px;
}
.highlight-italic {
font-family: "Playfair Display", Georgia, serif;
font-style: italic;
font-weight: 500;
color: #921717;
}
.section-subtitle {
font-size: 15px;
line-height: 1.7;
color: #94a3b8;
}
.carousel-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.testimonial-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 50px;
width: 100%;
align-items: stretch;
transition: opacity 0.3s;
}
.quote-icon {
font-size: 48px;
line-height: 1;
font-family: serif;
opacity: 0.9;
}
.card-title {
font-size: 20px;
font-weight: 600;
color: #881b1b;
margin-bottom: 20px;
}
.card-text {
font-size: 15px;
line-height: 1.7;
color: #94a3b8;
margin-bottom: 32px;
word-break: break-all;

}
.author-info {
display: flex;
align-items: center;
gap: 14px;
}
.author-img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.author-name {
font-size: 15px;
font-weight: 600;
color: #181212;
}
.card-divider {
width: 1px;
background-color: #2d3245;
height: 100%;
}
.carousel-indicators {
display: flex;
gap: 8px;
margin-top: 60px;
}
.indicator {
width: 24px;
height: 4px;
border-radius: 2px;
background-color: #33384b;
cursor: pointer;
transition: background-color 0.3s, width 0.3s;
}
.benefit-card,
.brand-tab,
.brands-btn,
.neon-btn,
.trusted-logo,
.view-all a {
transition: 0.3s;
}
.indicator.active {
background-color: #ff4d2d;
width: 28px;
}
.fade-out {
opacity: 0;
}
.feedback-section {
background-color: #0b0f19;
color: #f8fafc;
padding: 80px 24px;
display: flex;
justify-content: center;
align-items: center;
}
.feedback-container {
max-width: 1100px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.feedback-title {
font-size: 52px;
font-weight: 300;
line-height: 1.1;
letter-spacing: -1.5px;
color: #fff;
margin-bottom: 28px;
}
.feedback-description {
font-size: 15px;
line-height: 1.7;
color: #94a3b8;
max-width: 440px;
}
.feedback-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #64748b;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #990915;
box-shadow: 0 0 12px rgba(220, 78, 83, 0.35);

}
.form-action {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.neon-btn {
background-color: #921016;
color: #f4f5f8;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
padding: 14px 40px;
border: none;
border-radius: 6px;
cursor: pointer;
align-self: flex-start;
margin-top: 10px;
}

.neon-btn:hover {
background-color: #e04367;
box-shadow: 0 0 25px rgba(163, 7, 7, 0.7);
}
@media (max-width: 850px) {
.testimonial-header {
grid-template-columns: 1fr;
gap: 20px;
}
.feedback-title,
.section-title {
font-size: 38px;
}
.feedback-container,
.testimonial-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.card-divider {
display: none;
}
.form-action {
justify-content: stretch;
}
.neon-btn {
width: 100%;
}
}
.bullion-brands-section {
--gold: #c99724;
--gold-dark: #a8780d;
--text: #1d252f;
--muted: #69717b;
--light: #f7f7f5;
--border: #e8e8e5;
background: #000;
color: var(--text);
overflow: hidden;
}
.brands-hero {
min-height: 600px;
display: flex;
align-items: center;
position: relative;
border-top: 4px solid var(--gold);
}
.brands-hero-inner {
width: min(1180px, 92%);
margin: auto;
display: grid;
grid-template-columns: 48% 52%;
align-items: center;
gap: 20px;
}
.brands-eyebrow {
color: var(--gold-dark);
font-size: 14px;
font-weight: 800;
letter-spacing: 1.5px;
margin-bottom: 14px;
}
.brands-hero h1 {
margin: 0;
font-size: clamp(38px, 5vw, 64px);
line-height: 1.03;
letter-spacing: -2px;
font-weight: 800;
color: #fff;
}
.brands-hero h1 span {
display: block;
color: var(--gold);
}
.brands-hero-text {
max-width: 520px;
margin: 20px 0 28px;
color: var(--muted);
font-size: 16px;
line-height: 1.7;
}
.brands-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 23px;
border-radius: 5px;
background: #881b1b;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.bar-content,
.trusted-logo {
font-size: 15px;
text-align: center;
}
.brands-btn:hover {
background: var(--gold-dark);
}
.brands-hero-image {
min-height: 390px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.brands-hero-image::before {
content: "";
position: absolute;
width: 330px;
height: 330px;
border-radius: 50%;
background: rgba(201, 151, 36, 0.08);
filter: blur(5px);
}
.bullion-visual {
position: relative;
width: 430px;
height: 330px;
}
.gold-bar,
.silver-bar {
position: absolute;
width: 135px;
height: 220px;
border-radius: 12px;
/* box-shadow: 0 18px 35px rgba(0, 0, 0, .16); */
}
.gold-bar {
left: 105px;
top: 25px;
transform: rotate(-4deg);
/* background: linear-gradient(135deg, #fff0a8, #d7a82d 35%, #f9d968 65%, #b67e0d); */
/* border: 1px solid #c79621; */
}
.silver-bar {
right: 50px;
top: 48px;
transform: rotate(5deg);
background: linear-gradient(135deg, #f5f5f5, #bfc3c6, #fff, #aeb2b5);
border: 1px solid #a9abad;
}
.bar-content {
margin-top: 62px;
font-weight: 800;
opacity: 0.7;
}
.bar-content small {
display: block;
margin-top: 10px;
font-size: 9px;
letter-spacing: 1px;
}
.coin {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}
.coin::after {
content: "9999";
position: absolute;
inset: 0;
display: grid;
font-size: 11px;
font-weight: 800;
color: #8c6107;
}
.coin-one {
bottom: 20px;
}
.coin-two {
bottom: 15px;
width: 62px;
height: 62px;
}
.coin-three {
width: 90px;
height: 90px;
}
.trusted-brands {
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: #fff;
padding: 27px 0;
}
.trusted-inner {
width: min(1150px, 92%);
margin: auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 35px;
align-items: center;
}
.trusted-logo {
font-weight: 700;
color: #30343a;
opacity: 0.8;
}
.collection-label,
.why-label {
font-weight: 800;
letter-spacing: 1.5px;
}
.trusted-logo:hover {
opacity: 1;
color: var(--gold-dark);
}
.trusted-logo small {
display: block;
font-size: 8px;
letter-spacing: 1px;
margin-top: 3px;
font-weight: 600;
}
.why-brands {
padding: 75px 0;
background: #faefef;
}
.why-inner {
width: min(1100px, 92%);
margin: auto;
display: grid;
grid-template-columns: 31% 69%;
gap: 50px;
align-items: center;
}
.why-label {
color: var(--gold);
font-size: 12px;
margin-bottom: 12px;
}
.why-content h2 {
margin: 0;
font-size: 36px;
line-height: 1.15;
}
.why-content p {
color: var(--muted);
line-height: 1.7;
font-size: 14px;
margin: 20px 0 25px;
}
.benefit-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.benefit-card {
min-height: 135px;
border: 1px solid var(--border);
padding: 24px;
border-radius: 6px;
background: #fff;
}
.benefit-card:hover {
border-color: rgba(201, 151, 36, 0.5);
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}
.benefit-icon {
border: 2px solid var(--gold);
border-radius: 50%;
display: grid;
color: var(--gold);
margin-bottom: 13px;
}
.benefit-card h3 {
margin: 0 0 6px;
font-size: 15px;
}
.benefit-card p {
margin: 0;
font-size: 12px;
line-height: 1.55;
color: var(--muted);
}
.brand-collection {
padding: 75px 0 90px;
background: #f8f8f6;
border-top: 1px solid var(--border);
}
.collection-header-b {
text-align: center;
width: min(900px, 92%);
margin: auto;
}
.collection-label {
font-size: 12px;
}
.collection-header-b h2 {
margin: 8px 0 24px;
font-size: 34px;
}
.brand-tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 9px;
margin-bottom: 35px;
}
.brand-tab {
border: 0;
background: #ededeb;
color: #656a70;
padding: 10px 21px;
border-radius: 30px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
}
.brand-tab.active,
.brand-tab:hover,
.view-all a:hover {
background: var(--gold);
color: #fff;
}
.brand-grid {
width: min(1150px, 92%);
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
 align-items: start;
}
.brand-grid > * {
    align-self: start;
    height: fit-content;
}
.brand-card {
background: #fff;
border: 1px solid #ffd5db;
border-radius: 6px;
min-height: 190px;
padding: 25px 15px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: 0.35s;
}
.brand-card:hover {
transform: translateY(-7px);
border-color: rgba(201, 151, 36, 0.5);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.07);
}
.brand-logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #252a30;
font-weight: 800;
font-size: 17px;
}
.brand-logo span {
font-size: 27px;
color: #222;
}
.brand-name,
.brand-metaname,
.view-all a {
font-size: 14px;
font-weight: 700;
color:#881b1b;
}
.brand-name {
margin-bottom: 6px;
}
.brand-metaname {
margin-bottom: 6px;
color:#881b1b;
}
.view-all {
text-align: center;
margin-top: 30px;
}
.view-all a {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 12px 25px;
border: 1px solid var(--gold);
color: var(--gold-dark);
border-radius: 4px;
text-decoration: none;
}
@media (max-width: 1000px) {
.brand-grid,
.trusted-inner {
grid-template-columns: repeat(3, 1fr);
}
.trusted-inner {
row-gap: 25px;
}
.why-inner {
grid-template-columns: 1fr;
}
}
@media (max-width: 700px) {
.brands-hero {
min-height: auto;
padding: 55px 0 30px;
}
.benefit-grid,
.brands-hero-inner {
grid-template-columns: 1fr;
}
.brands-hero-content {
text-align: center;
}
.brands-hero-text {
margin-left: auto;
margin-right: auto;
}
.brands-hero-image {
min-height: 290px;
}
.bullion-visual {
transform: scale(0.78);
}
.brand-grid,
.trusted-inner {
grid-template-columns: repeat(2, 1fr);
}
.why-content h2 {
font-size: 30px;
}
}
@media (max-width: 430px) {
.brand-grid {
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.brand-card {
min-height: 165px;
padding: 15px 8px;
}
.brand-logo {
font-size: 14px;
}
.collection-header-b h2 {
font-size: 28px;
}
}
.junu-login-btn {
height: 42px;
padding: 0 22px;
border: 1px solid #fffefb;
border-radius: 7px;
background: 0 0;
color: #f8f7f5;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: 0.25s;
}
.junu-login-btn:hover {
background: #c5962b;
color: #fff;
}
.junu-login-modal {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
width: 100vw;
height: 100vh;
z-index: 999999 !important;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
overflow-y: auto;
overflow-x: hidden;
}
.junu-login-modal.junu-active {
display: flex;
opacity: 1;
}
.junu-login-backdrop {
position: absolute;
inset: 0;
background: radial-gradient(
circle at 50% 105%,
rgba(255, 255, 255, 0.98) 0,
rgba(233, 181, 181, 0.92) 40%,
rgba(116, 0, 0, 0.96) 100%
);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.junu-login-card {
position: relative;
z-index: 2;
width: 450px;
max-width: 100%;
padding: 40px;
border-radius: 28px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0.87)
);
border: 1px solid rgba(100, 185, 216, 0.55);
box-shadow: 0 25px 70px rgba(48, 105, 130, 0.22),
inset 0 1px 2px rgba(255, 255, 255, 0.95);
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(25px);
transform: translateY(25px) scale(0.96);
transition: transform 0.35s;
}
.junu-login-modal.junu-active .junu-login-card {
transform: translateY(0) scale(1);
}
.junu-login-close {
position: absolute;
top: 14px;
right: 15px;
width: 34px;
height: 34px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.65);
color: #68737d;
font-size: 23px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.25s;
}
.junu-login-close:hover {
background: #fff;
color: #111820;
transform: rotate(90deg);
}
.junu-login-icon {
width: 64px;
height: 64px;
margin: 0 auto 22px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(145deg, #fff, #edf5f8);
border: 1px solid rgba(255, 255, 255, 0.95);
box-shadow: 0 9px 22px rgba(55, 105, 125, 0.14);
color: #20252a;
font-size: 28px;
}
.junu-input-icon,
.junu-password-toggle,
.eye-icon {
transform: translateY(-50%) !important;
font-size: 16px;
}
.junu-login-heading {
text-align: center;
margin-bottom: 26px;
}
.junu-login-heading h2 {
margin: 0 0 8px;
color: #10161c;
font-size: 28px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.5px;
}
.junu-login-heading p {
max-width: 340px;
margin: auto;
color: #68727c;
font-size: 15px;
line-height: 1.5;
}
.junu-input-box {
position: relative !important;
width: 100%;
margin-bottom: 11px;
}
.junu-input-icon,
.junu-password-toggle,
.password-toggle,
.eye-icon,
.select-arrow {
position: absolute;
top: 50%;
}


.junu-input-icon {
    position: absolute !important;
    top: 15px;              /* half of the 42px input height */
    left: 14px;
    color: #737e88;
    font-size: 16px;
    line-height: 1;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: none !important;   /* remove translateY, use fixed top instead */
    pointer-events: none;
}
.junu-input-box input {

height: 42px;

border: 1px solid transparent;
outline: 0;
border-radius: 11px;
background: rgba(235, 240, 243, 0.88);
color: #1d252d;
font-size: 14px;
transition: 0.25s;
 width: 100% !important;
    padding-left: 44px !important;
    padding-right: 42px !important;
    box-sizing: border-box !important;
}
.junu-input-box input::placeholder {
color: #747e87;
}
.junu-input-box input:focus {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(70, 155, 190, 0.45);
box-shadow: 0 0 0 3px rgba(70, 155, 190, 0.08);
}
.junu-password-toggle,
.eye-icon  {
 position: absolute !important;
    top: 21px;
    right: 14px;
    left: auto !important;
    color: #727d87;
    font-size: 16px;
    line-height: 1;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) !important;
    cursor: pointer;
}
.junu-forgot {
display: flex;
justify-content: flex-end;
margin: 5px 2px 17px;
}
.junu-forgot a {
color: #181f25;
font-size: 14px;
text-decoration: none;
}
.junu-get-started {
width: 100%;
height: 43px;
border: 1px solid #11131a;
border-radius: 11px;
background: linear-gradient(180deg, #881b1b, #881b1b);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
transition: 0.25s;
}
.junu-get-started:hover {
transform: translateY(-1px);
box-shadow: 0 7px 17px rgba(0, 0, 0, 0.2);
}
.junu-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 21px 0;
}
.junu-divider::after,
.junu-divider::before {
content: "";
flex: 1;
height: 1px;
background: repeating-linear-gradient(
to right,
#c9ced2 0,
#c9ced2 2px,
transparent 2px,
transparent 7px
);
}
.junu-divider span {
color: #707981;
font-size: 12px;
}
.junu-social-login button {
height: 42px;
border: 1px solid #dfe4e7;
border-radius: 11px;
background: rgba(255, 255, 255, 0.72);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.25s;
}
.junu-social-login button:hover {
background: #fff;
transform: translateY(-2px);
box-shadow: 0 7px 16px rgba(0, 0, 0, 0.07);
}
.junu-google {
color: #4285f4;
font-size: 20px;
font-weight: 800;
}
.junu-facebook {
width: 19px;
height: 19px;
border-radius: 50%;
background: #1877f2;
color: #fff;
display: flex;
align-items: flex-end;
justify-content: center;
font-size: 15px;
font-weight: 700;
}
.junu-apple {
color: #000;
font-size: 21px;
}
.register-section {
width: 100%;
padding: 80px 20px;
background: linear-gradient(135deg, #fafafa 0, #fff 50%, #f8f5ee 100%);
}
.register-container {
width: min(1180px, 100%);
margin: auto;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 70px;

}
.register-intro {
padding: 20px 0;
}
.register-eyebrow {
display: inline-flex;
align-items: center;
padding: 7px 13px;
border-radius: 50px;
background: #f6edda;
color: #a87917;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.4px;
}
.register-intro h1 {
margin: 20px 0 18px;
color: #171717;
font-size: clamp(38px, 4vw, 54px);
line-height: 1.08;
letter-spacing: -2px;
font-weight: 700;
}
.register-intro h1 span {
color: #b78927;
}
.register-intro > p {
max-width: 430px;
margin-bottom: 30px;
color: #727272;
font-size: 15px;
line-height: 1.7;
}
.benefit-item span {
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f1e4c5;
color: #a87817;
font-size: 13px;
font-weight: 700;
}
.benefit-item p {
margin: 0;
color: #444;
font-size: 14px;
}
.register-card {
padding: 38px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #e9e5dc;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(40, 30, 10, 0.07);
}
.form-heading {
margin-bottom: 27px;
}
.form-heading h2 {
margin: 0 0 6px;
color: #202020;
font-size: 25px;
font-weight: 700;
}
.form-heading p {
margin: 0;
color: #888;
font-size: 14px;
}
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-bottom: 19px;
}
.single-row {
grid-template-columns: 1fr;
}
.form-group label span {
color: #c52222;
}
.form-group input,
.form-group select {
width: 100%;
height: 48px;
padding: 0 14px;
border: 1px solid #dedede;
border-radius: 9px;
outline: 0;
background: #fff;
color: #000;
font-family: inherit;
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input::placeholder {
color: #aaa;
}
.form-group input:focus,
.form-group select:focus {
border-color: #c69a3a;
box-shadow: 0 0 0 3px rgba(198, 154, 58, 0.1);
}
.select-wrapper select {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
padding-right: 40px;
}
.select-arrow {
right: 15px;
transform: translateY(-65%);
color: #777;
font-size: 20px;
}
.password-toggle,
.terms {
font-size: 12px;
cursor: pointer;
}
.password-field input {
padding-right: 65px;
}
.password-toggle {
right: 10px;
transform: translateY(-50%);
border: none;
background: 0 0;
color: #a57a24;
font-weight: 600;
}
.form-group small {
display: block;
margin-top: 7px;
color: #929292;
font-size: 11px;
line-height: 1.5;
}
.already-account a,
.terms a {
color: #9a701c;
text-decoration: none;
}
.terms {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 3px 0 20px;
color: #777;
line-height: 1.5;
}
.terms input {
width: 15px;
height: 15px;
margin-top: 1px;
accent-color: #b78927;
}
.terms a {
font-weight: 600;
}
.register-submit {
width: 100%;
height: 43px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
border: none;
border-radius: 11px;
background: linear-gradient(135deg, #881b1b, #881b1b);
color: #fff;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 8px 20px rgba(176, 132, 35, 0.18);
transition: transform 0.2s, box-shadow 0.2s;
}
.register-submit span {
font-size: 18px;
transition: transform 0.2s;
}
.register-submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(176, 132, 35, 0.25);
}
.already-account {
margin-top: 18px;
text-align: center;
color: #888;
font-size: 13px;
}
.already-account a {
font-weight: 700;
}
.coupon-box input,
.search-box {
background: #fff;
border: 1px solid #ddd;
}
.coupon-box button,
.coupon-box input {
font-size: 18px;
font-family: Georgia, serif;
}
.coupon-box {
display: flex;
width: 100%;
max-width: 347px;
height: 57px;
}
.coupon-box input {
flex: 1;
min-width: 0;
padding: 0 13px;
border-right: none;
outline: 0;
color: #333;
}
.coupon-box input::placeholder {
color: #777;
opacity: 1;
}
.coupon-box button {
width: 95px;
border: none;
background: #991b1e;
color: #fff;
cursor: pointer;
transition: background 0.3s;
}
.coupon-box button:hover {
background: #7d1518;
}
.products-search {
width: 80%;
display: flex;
justify-content: right;
margin: 25px 0;
}
.search-box {
width: 100%;
max-width: 500px;
height: 52px;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 12px;
transition: 0.3s;
}
.search-box:focus-within {
border-color: #b8860b;
box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.1);
}
.search-icon {
font-size: 25px;
color: #777;
margin-right: 10px;
line-height: 1;
}
.search-box input {
flex: 1;
height: 100%;
border: none;
outline: 0;
background: 0 0;
font-size: 15px;
color: #222;
}
.search-box input::placeholder {
color: #999;
}
.search-clear {
display: none;
border: none;
background: 0 0;
font-size: 24px;
color: #888;
cursor: pointer;
padding: 0 4px;
}
.search-clear:hover {
color: #8b0000;
}
.wealth-section {
width: 100%;
padding: 75px 20px 80px;
background: #101112;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.wealth-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 65px;
}
.wealth-header h2 {
margin: 0;
font-size: 43px;
line-height: 1.15;
font-weight: 700;
letter-spacing: -1.5px;
}
.wealth-header h2 span {
color: #ff543d;
}
.wealth-btn {
min-width: 210px;
height: 58px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 13px;
border: 2px solid #ff543d;
border-radius: 6px;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
transition: 0.3s;
}
.wealth-btn b {
font-size: 25px;
font-weight: 300;
line-height: 0;
}
.wealth-btn:hover {
background: #ff543d;
color: #111;
}
.wealth-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
}
.wealth-card {
min-height: 451px;
overflow: hidden;
background: #222425;
border-radius: 6px;
transition: transform 0.35s, box-shadow 0.35s;
}
.wealth-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
}
.wealth-image {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.wealth-image img {
width: 70%;
height: 80%;
object-fit: cover;
display: block;
object-position: center center;
}
.wealth-content {
padding: 0 50px 35px;
margin-top: 20px;
position: relative;
text-align: center;
}
.wealth-content h3 {
font-size: 30px;
line-height: 1.1;
font-weight: 700;
}
.wealth-content p {
margin: 0;
color: #bdbdbd;
font-size: 19px;
line-height: 1.8;
}
@media (max-width: 1000px) {
.wealth-section {
padding: 60px 25px;
}
.wealth-header {
margin-bottom: 45px;
}
.wealth-header h2 {
font-size: 36px;
}
.wealth-cards {
gap: 22px;
}
.wealth-content {
padding: 0 25px 30px;
}
.wealth-content h3 {
font-size: 25px;
}
.wealth-content p {
font-size: 16px;
}
}
.gold-plan-timeline {
width: 100%;
padding: 90px 25px 110px;
background: radial-gradient(
circle at 50% 30%,
rgba(214, 165, 54, 0.08),
transparent 45%
),
#fff;
overflow: hidden;
}
.gold-plan-container {
width: 100%;
max-width: 1300px;
margin: auto;
}
.gold-plan-heading {
text-align: center;
max-width: 750px;
margin: 0 auto 80px;
}
.gold-plan-eyebrow {
display: inline-block;
padding: 8px 20px;
border: 1px solid #d8aa43;
border-radius: 50px;
background: #fffaf0;
color: #a47617;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
}
.gold-plan-heading h2 {
margin: 18px 0 12px;
color: #10213d;
font-size: clamp(34px, 4vw, 56px);
line-height: 1.1;
letter-spacing: -1.5px;
}
.gold-plan-heading p {
margin: 0;
color: #718099;
font-size: 17px;
line-height: 1.7;
}
.gold-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 25px;
align-items: start;
}
.gold-timeline-line {
position: absolute;
top: 32px;
left: 10%;
right: 10%;
height: 3px;
background: #e8edf3;
z-index: 1;
overflow: hidden;
border-radius: 10px;
}
.gold-timeline-progress {
width: 0%;
height: 100%;
background: linear-gradient(90deg, #c98d16, #e8c05b);
transition: width 2.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gold-timeline-item {
position: relative;
text-align: center;
z-index: 2;
}
.gold-timeline-dot {
width: 64px;
height: 64px;
margin: 0 auto 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 2px solid #d7dee8;
box-shadow: 0 5px 20px rgba(20, 40, 70, 0.06);
transition: 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gold-timeline-dot span {
color: #8b99ad;
font-size: 13px;
font-weight: 700;
transition: color 0.8s;
}
.gold-timeline-item.active .gold-timeline-dot {
border-color: #d49b22;
background: linear-gradient(135deg, #d39a1b, #edc55d);
transform: scale(1.15);
box-shadow: 0 10px 30px rgba(202, 149, 30, 0.28);
}
.gold-plan-card {
min-height: 380px;
padding: 25px 20px;
border-radius: 25px;
border: 1px solid #edf0f4;
background: #fff;
box-shadow: 0 10px 35px rgba(20, 40, 70, 0.055);
transform: translateY(10px) scale(0.94);
transition: opacity 1.1s, transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
border-color 1s, box-shadow 1s, background 1s;
}
.gold-timeline-item.active .gold-plan-card {
opacity: 1;
transform: translateY(0) scale(1.02);
border-color: #ddb24f;
background: linear-gradient(180deg, #fffdf8, #fff);
box-shadow: 0 25px 55px rgba(191, 145, 43, 0.16);
}
.gold-plan-label {
display: inline-flex;
padding: 8px 15px;
border-radius: 30px;
background: #f0f3f7;
color: #66758b;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
transition: 0.8s;
}
.jsc-hero-label,
.key-features-heading span {
letter-spacing: 2px;
text-transform: uppercase;
}
.gold-timeline-item.active .gold-plan-label {
color: #fff;
background: linear-gradient(135deg, #c88b12, #e8bd50);
}
.gold-plan-icon {
width: 75px;
height: 75px;
margin: 25px auto 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f0f3f7;
color: #50617b;
font-size: 30px;
transition: 1s;
}
.gold-timeline-item.active .gold-plan-icon {
color: #b27a09;
background: radial-gradient(circle, #fff0c8, #f8dfa1);
transform: scale(1.08);
}
.gold-plan-day {
color: #8794a7;
font-size: 13px;
margin-bottom: 5px;
}
.gold-plan-card h3 {
margin: 0 0 25px;
color: #132440;
font-size: 19px;
}
.gold-timeline-item.active .gold-plan-card h3 {
color: #a87408;
}
.gold-plan-amount {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 17px 10px;
border-radius: 15px;
background: #f7f8fa;
}
.gold-timeline-item.active .gold-plan-amount {
background: linear-gradient(135deg, #fff4da, #fff9ee);
}
.gold-plan-amount small {
display: block;
margin-bottom: 5px;
color: #77859a;
font-size: 11px;
}
.gold-plan-amount strong {
color: #172741;
font-size: 17px;
}
.amount-divider {
width: 1px;
height: 35px;
background: #dfe4ea;
}
.gold-timeline-item.active .gold-timeline-dot::before {
content: "";
position: absolute;
width: 64px;
height: 64px;
border-radius: 50%;
border: 1px solid #d8a52d;
animation: 2.4s ease-out infinite timelinePulse;
}
@keyframes timelinePulse {
0% {
transform: scale(1);
opacity: 0.7;
}
100%,
70% {
transform: scale(1.6);
opacity: 0;
}
}
@media (max-width: 1050px) {
.junu-right,
.settings-row {
grid-template-columns: 1fr 1fr;
}
.spot-charts-page .settings-row {
grid-template-columns: 1fr 1fr;
}
.spot-charts-page .settings-row .refresh-button {
grid-column: 1 / -1;
justify-self: center;
}
.junu-dashboard {
display: block;
}
.junu-right {
display: grid;
}
.news-card {
grid-column: 1/-1;
}
.refresh-button {
margin: auto;
}
.gold-timeline {
gap: 12px;
}
.gold-plan-card {
padding: 20px 12px;
}
.gold-plan-amount strong {
font-size: 14px;
}
}
@media (max-width: 700px) {
.wealth-section {
padding: 55px 18px;
}
.wealth-header {
flex-direction: column;
align-items: flex-start;
gap: 30px;
margin-bottom: 40px;
}
.wealth-header h2 {
font-size: 34px;
letter-spacing: -1px;
}
.wealth-btn {
height: 52px;
min-width: 190px;
}
.wealth-cards {
grid-template-columns: 1fr;
gap: 25px;
}
.wealth-card {
min-height: auto;
}
.wealth-image {
height: 260px;
}
.wealth-content {
margin-top: -10px;
padding: 0 28px 30px;
}
.wealth-content h3 {
font-size: 27px;
margin-bottom: 18px;
}
.wealth-content p {
font-size: 17px;
line-height: 1.65;
}
.gold-plan-timeline {
padding: 65px 15px 80px;
}
.gold-plan-heading {
margin-bottom: 55px;
}
.gold-timeline {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 20px;
padding: 10px 5px 25px;
}
.gold-timeline::-webkit-scrollbar {
display: none;
}
.gold-timeline-line {
display: none;
}
.gold-timeline-item {
flex: 0 0 280px;
scroll-snap-align: center;
}
.gold-timeline-dot {
margin-bottom: 20px;
}
}
@media (max-width: 420px) {
.footer-main {
padding-left: 20px;
padding-right: 20px;
}
.footer-logo-text {
font-size: 24px;
}
.social-icons {
gap: 10px;
}
.social-icon {
width: 36px;
height: 36px;
font-size: 18px;
}
.payment-card {
width: 72px;
height: 54px;
}
.payment-grid {
grid-template-columns: repeat(2, 72px);
}
.gold-timeline-item {
flex-basis: 260px;
}
}
.key-features-section {
width: 100%;
background: #fff;
padding: 90px 5% 80px;
overflow: hidden;
}
.key-features-container {
max-width: 1450px;
margin: auto;
}
.key-features-heading {
text-align: center;
max-width: 760px;
margin: 0 auto 65px;
}
.key-features-heading span {
display: block;
margin-bottom: 12px;
color: #a71919;
font-size: 14px;
font-weight: 700;
}
.key-features-heading h2 {
margin: 0;
color: #111;
font-size: clamp(42px, 5vw, 65px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -2px;
}
.key-features-heading p {
margin: 22px auto 0;
max-width: 650px;
color: #929292;
font-size: 17px;
line-height: 1.7;
}
.features-slider {
width: 100%;
overflow: hidden;
cursor: grab;
user-select: none;
}
.features-track {
display: flex;
gap: 0;
transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
will-change: transform;
}
.feature-item-1 {
flex: 0 0 33.333333%;
box-sizing: border-box;
padding: 0 35px;
text-align: center;
}
.feature-icon-1 {
width: 138px;
height: 138px;
margin: 0 auto 40px;
display: flex;
align-items: center;
justify-content: center;
background: #e7eff4;
border-radius: 52% 48% 50% 50%;
transition: 0.4s;
}
.feature-icon-1 span {
font-size: 18px;
font-weight: 800;
color: #17201f;
letter-spacing: 1px;
}
.feature-item-1:hover .feature-icon-1 {
transform: translateY(-8px);
background: #f4df9b;
}
.feature-content h3 {
margin: 0 0 20px;
color: #151515;
font-size: 30px;
line-height: 1.2;
font-weight: 750;
letter-spacing: -0.8px;
}
.feature-content p {
max-width: 420px;
margin: auto;
color: #929292;
font-size: 16px;
line-height: 1.8;
}
.feature-arrow {
display: inline-flex;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
margin-top: 28px;
color: #151515;
font-size: 30px;
text-decoration: none;
transition: 0.35s;
}
.feature-item:hover .feature-arrow {
color: #a71919;
transform: translateX(8px);
}
.feature-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
margin-top: 55px;
}
.feature-next,
.feature-prev {
width: 48px;
height: 48px;
border: 1px solid #dedede;
background: #fff;
border-radius: 50%;
cursor: pointer;
font-size: 22px;
transition: 0.3s;
}
.feature-next:hover,
.feature-prev:hover {
background: #a71919;
color: #fff;
border-color: #a71919;
}
.feature-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d5d5d5;
transition: 0.3s;
}
.feature-dot.active {
width: 25px;
border-radius: 10px;
background: #a71919;
}
@media (max-width: 1000px) {
.feature-item-1 {
flex: 0 0 50%;
padding: 0 25px;
}
}
@media (max-width: 650px) {
.feature-grid,
.settings-row,
.support-grid {
grid-template-columns: 1fr;
}
.feature,
.support-grid > div {
border-right: 0;
border-bottom: 1px solid #292929;
}
.junu-right {
display: flex;
}
.chart-top {
flex-direction: column;
}
.price-box {
text-align: left;
}
.period-buttons {
display: flex;
overflow-x: auto;
scrollbar-width: none;
}
.period-buttons::-webkit-scrollbar {
display: none;
}
.period-buttons button {
min-width: 62px;
}
.chart-wrapper {
height: 230px;
}
.feature {
padding: 15px 5px;
}
.feature:last-child,
.support-grid > div:last-child {
border-bottom: 0;
}
.share-card {
flex-direction: column;
align-items: stretch;
}
.support-grid {
gap: 20px;
}
.support-grid > div {
padding: 15px 0;
}
.offer-body {
grid-template-columns: 80px 1fr;
}
.silver-placeholder {
width: 70px;
height: 130px;
}
.offer-header {
align-items: flex-start;
gap: 10px;
}
.key-features-section {
padding: 65px 20px 60px;
}
.key-features-heading {
margin-bottom: 50px;
}
.key-features-heading h2 {
font-size: 42px;
}
.feature-content p,
.key-features-heading p {
font-size: 15px;
}
.feature-item-1 {
flex: 0 0 100%;
padding: 0 15px;
}
.feature-icon {
width: 115px;
height: 115px;
margin-bottom: 30px;
}
.feature-content h3 {
font-size: 25px;
}
}
.jsc-flow-section {
position: relative;
/* height: 420vh; */
background: #fff;
}
.jsc-flow-sticky {
position: relative;
top: 0;
height: 100vh;
min-height: 650px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
background: radial-gradient(
circle at 50% 48%,
rgba(255, 240, 168, 0.16),
transparent 35%
),
#fff;
}
.jsc-flow,
.jsc-step-number {
align-items: center;
display: flex;
}
.jsc-flow-heading {
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
width: 700px;
text-align: center;
z-index: 10;
}
.jsc-flow-heading span {
display: inline-block;
margin-bottom: 15px;
padding: 7px 13px;
border-radius: 4px;
background: #fff0a8;
color: #8a1717;
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
}
.jsc-flow-heading h2 {
margin: 0;
color: #9b1717;
font-size: clamp(42px, 5vw, 68px);
line-height: 1;
font-weight: 600;
letter-spacing: -2px;
}
.jsc-flow-heading p {
max-width: 600px;
margin: 18px auto 0;
color: #555;
font-size: 16px;
line-height: 1.6;
}
.jsc-flow {
width: max-content;
gap: 0;
position: absolute;
left: 53%;
top: 50%;
transform: translate(-50%, -15%);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.jsc-step {
width: 260px;
min-height: 250px;
padding: 30px 25px;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
border-radius: 22px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #eee;
opacity: 0.25;
transform: scale(0.78) translateY(25px);
filter: blur(0.4px);
transition: opacity 0.7s, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.7s, border-color 0.7s;
}
.jsc-step.active {
opacity: 1;
transform: scale(1.12) translateY(0);
border-color: #e5bd32;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.11);
z-index: 5;
}
.jsc-step-number {
width: 46px;
height: 46px;
margin: 0 auto 20px;
justify-content: center;
border-radius: 50%;
background: #f5f5f5;
color: #999;
font-size: 13px;
font-weight: 600;
transition: background 0.5s, color 0.5s;
}
.jsc-step.active .jsc-step-number {
background: #9b1717;
color: #fff;
}
.jsc-step h3 {
margin: 0 0 15px;
color: #202020;
font-size: 25px;
line-height: 1.15;
font-weight: 600;
}
.jsc-step.active h3 {
color: #9b1717;
}
.jsc-step p {
margin: 0;
color: #666;
font-size: 14px;
line-height: 1.6;
}
.jsc-arrow {
height: 2px;
position: relative;
background: #d7a91a;
opacity: 0.22;
transition: opacity 0.5s, width 0.5s;
}
.jsc-arrow::after {
content: "";
position: absolute;
right: -2px;
top: 50%;
width: 11px;
height: 11px;
border-top: 2px solid #d7a91a;
border-right: 2px solid #d7a91a;
transform: translateY(-50%) rotate(45deg);
}
.jsc-arrow.active {
opacity: 1;
width: 115px;
}
.jsc-progress {
position: absolute;
bottom: 55px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 14px;
}
.progress-line {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 1px;
background: #ddd;
z-index: -1;
}
.progress-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #ddd;
transition: transform 0.5s, background 0.5s;
}
.progress-dot.active {
background: #9b1717;
transform: scale(1.7);
}
@media (max-width: 1100px) {
.jsc-step {
width: 220px;
}
.jsc-arrow {
width: 60px;
}
.jsc-arrow.active {
width: 75px;
}
}
.jsc-plan-detail {
position: relative;
overflow: hidden;
padding: 120px 7%;
background: #0d0e0d;
font-family: Arial, sans-serif;
}
.jsc-plan-detail-wrap {
max-width: 1280px;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 90px;
}
.jsc-plan-detail-hero-c {
max-width: 600px;
}
.jsc-hero-label {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 24px;
font-size: 12px;
font-weight: 700;
color: #6b746d;
}
.jsc-hero-label::before {
content: "";
width: 32px;
height: 2px;
background: #7fa58b;
}
.jsc-plan-detail-hero-c h2 {
margin: 0 0 28px;
color: #fdfffe;
font-size: clamp(42px, 5vw, 68px);
line-height: 1.04;
font-weight: 500;
letter-spacing: -2.5px;
}
.jsc-plan-detail-hero-c h2 span {
color: #aa6e10;
}
.jsc-plan-detail-hero-c p {
margin: 0 0 18px;
color: #fff;
font-size: 17px;
line-height: 1.75;
}
.care-btn {
display: inline-flex;
align-items: center;
gap: 22px;
margin-top: 20px;
padding: 15px 22px 15px 25px;
border-radius: 50px;
background: #17231b;
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: 0.35s;
}
.care-btn span {
width: 32px;
height: 32px;
display: grid;
border-radius: 50%;
background: #fff;
color: #17231b;
font-size: 18px;
transition: 0.35s;
}
.care-btn:hover {
transform: translateY(-3px);
background: #6e9a7a;
}
.care-visual {
position: relative;
min-height: 560px;
display: flex;
justify-content: center;
align-items: center;
}
.igel-circle {
position: absolute;
border-radius: 50%;
}
.igel-circle-1 {
width: 480px;
height: 480px;
}
.igel-circle-2 {
width: 340px;
height: 340px;
border: 1px solid rgba(110, 154, 122, 0.35);
background: rgba(255, 255, 255, 0.35);
}
.igel-product-img {
position: relative;
z-index: 2;
width: min(70%, 380px);
max-height: 520px;
object-fit: contain;
filter: drop-shadow(0 30px 30px rgba(28, 47, 35, 0.18));
transition: transform 0.6s;
}
.igel-care-visual:hover .igel-product-img {
transform: translateY(-10px) scale(1.03);
}
.igel-floating-card {
position: absolute;
z-index: 3;
right: 2%;
bottom: 55px;
display: flex;
align-items: center;
gap: 13px;
padding: 15px 20px;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 16px;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 15px 40px rgba(36, 55, 42, 0.12);
backdrop-filter: blur(14px);
}
.igel-check {
width: 38px;
height: 38px;
display: grid;
border-radius: 50%;
background: #dce9df;
color: #5f8b6c;
font-weight: 700;
}
.junu-offer-card,
.silver-card {
background: radial-gradient(
circle at 82% 80%,
rgba(255, 255, 255, 0.22) 0,
rgba(255, 255, 255, 0.08) 15%,
transparent 35%
),
linear-gradient(135deg, #980513, #3d0507);
}
.igel-floating-card strong {
display: block;
margin-bottom: 3px;
color: #17231b;
font-size: 14px;
}
.igel-floating-card small {
color: #7a837d;
font-size: 11px;
}
@media (max-width: 900px) {
.junu-checkout-container {
grid-template-columns: 1fr;
}
.junu-checkout-right {
position: static;
order: -1;
}
.register-container {
grid-template-columns: 1fr;
gap: 35px;
}
.register-intro {
text-align: center;
}
.register-intro > p {
margin-left: auto;
margin-right: auto;
}
.register-benefits {
width: fit-content;
margin: auto;
text-align: left;
}
.jsc-plan-detail {
padding: 80px 6%;
}
.jsc-plan-detail-wrap {
grid-template-columns: 1fr;
gap: 50px;
}
.jsc-plan-detail-hero-c {
max-width: 700px;
}
.igel-care-visual {
min-height: 480px;
}
}
.junu-offer-grid {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.junu-offer-card {
position: relative;
min-height: 570px;
border-radius: 28px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: 52px 40px 25px;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 12px 35px rgba(23, 92, 145, 0.15);
transition: transform 0.4s, box-shadow 0.4s;
}
.junu-offer-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 45px rgba(22, 94, 148, 0.25);
}
.offer-content-1 {
position: relative;
z-index: 2;
width: 100%;
text-align: center;
}
.offer-content-1 h2 {
margin: 10px 10px 20px;
font-family: Poppins, Montserrat, Arial, sans-serif;
font-size: clamp(27px, 2.5vw, 38px);
font-weight: 400;
line-height: 1.2;
color: #fff;
}
.offer-btn,
.offer-content-1 p {
font-family: Poppins, Arial, sans-serif;
}
.offer-content-1 p {
max-width: 570px;
margin: 0 auto 22px;
font-size: clamp(15px, 1.3vw, 19px);
line-height: 1.55;
color: rgba(255, 255, 255, 0.95);
}
.offer-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 180px;
height: 53px;
padding: 0 28px;
border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 30px;
color: #fff;
background: 0 0;
text-decoration: none;
font-size: 17px;
font-weight: 500;
transition: background 0.3s, color 0.3s, transform 0.3s;
}
.offer-btn:hover {
background: #fff;
color: #2878c5;
transform: translateY(-2px);
}
.junu-offer-card:hover .product-image img {
transform: scale(1.04) translateY(-5px);
}
.gold-product img,
.silver-product img {
max-width: 400px;
}
@media (min-width: 1500px) {
.junu-offer-section {
padding-left: 125px;
padding-right: 125px;
}
.junu-offer-card {
min-height: 650px;
padding-top: 55px;
}
.product-image img {
max-width: 450px;
}
}
@media (max-width: 900px) {
.junu-offer-section {
padding: 20px;
}
.junu-offer-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.junu-offer-card {
min-height: 560px;
}
.offer-content-1 h2 {
font-size: 30px;
}
.offer-content-1 p {
max-width: 600px;
}
.product-image {
/* width: 60% */
}
}
.features-section {
--mouse-x: 0;
--mouse-y: 0;
position: relative;
width: 100%;
min-height: 850px;
overflow: hidden;
background: radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, 0.9) 0,
rgba(248, 250, 249, 0.95) 38%,
#f4f5f4 75%
);
font-family: Poppins, Montserrat, Arial, sans-serif;
}
.customer-benefits,
.investment-hero,
.money-convert-section,
.stats-section {
font-family: Arial, Helvetica, sans-serif;
}
.features-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
translate(calc(var(--mouse-x) * -8px), calc(var(--mouse-y) * -5px));
width: 430px;
text-align: center;
z-index: 10;
}
.features-label {
display: inline-flex;
padding: 7px 12px;
border-radius: 4px;
background: #d7f6a4;
color: #17321d;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 25px;
}
.features-center h2 {
margin: 0;
color: #102a19;
font-size: clamp(42px, 4vw, 65px);
line-height: 0.98;
font-weight: 500;
letter-spacing: -2px;
}
.features-center p {
margin: 28px auto 0;
max-width: 440px;
color: #26392d;
font-size: 17px;
line-height: 1.55;
}
.feature-card {
position: absolute;
width: 430px;
min-height: 205px;
padding: 25px;
display: flex;
align-items: flex-start;
gap: 22px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(218, 207, 150, 0.9);
box-shadow: 0 15px 40px rgba(25, 45, 30, 0.08);
z-index: 4;
transform: translate(
calc(var(--mouse-x) * var(--depth) * 18px),
calc(var(--mouse-y) * var(--depth) * 12px)
)
scale(0.78);
will-change: transform, opacity;
}
.benefit-content,
.benefit-tab {
position: relative;
overflow: hidden;
}
.feature-card.visible {
opacity: 1;
transform: translate(
calc(var(--mouse-x) * var(--depth) * 18px),
calc(var(--mouse-y) * var(--depth) * 12px)
)
scale(1);
}
.feature-card:hover {
z-index: 20;
box-shadow: 0 25px 60px rgba(20, 55, 30, 0.15);
}
.feature-icon {
flex: 0 0 82px;
width: 82px;
height: 82px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
overflow: hidden;
background: #f5f5f3;
}
.feature-icon img,
.gold-step-card img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.feature-info h3 {
margin: 0 0 15px;
color: #12382b;
font-size: 27px;
line-height: 1.08;
font-weight: 600;
letter-spacing: -0.7px;
}
.feature-info ul {
margin: 0;
padding-left: 19px;
color: #171717;
font-size: 15px;
line-height: 1.55;
}
.feature-info li {
margin-bottom: 7px;
}
.feature-1 {
--depth: 1.2;
left: 7%;
top: 21%;
transition-delay: 0.05s;
}
.feature-2 {
--depth: 1.6;
left: 10%;
bottom: 19%;
transition-delay: 0.15s;
}
.feature-3 {
--depth: 1;
left: 36%;
transform: translateX(-50%) scale(0.78);
transition-delay: 0.25s;
}
.feature-card.feature-3.visible {
transform: translateX(-50%)
translate(
calc(var(--mouse-x) * var(--depth) * 18px),
calc(var(--mouse-y) * var(--depth) * 12px)
)
scale(1);
}
.feature-4 {
--depth: 1.5;
right: 7%;
top: 21%;
transition-delay: 0.1s;
}
.feature-5 {
--depth: 1.3;
right: 10%;
bottom: 19%;
transition-delay: 0.2s;
}
.feature-card[data-active="far"] {
opacity: 0.72;
}
.feature-card[data-active="near"] {
opacity: 1;
box-shadow: 0 25px 65px rgba(20, 55, 30, 0.17);
}
@media (max-width: 1200px) {
.features-section {
min-height: 900px;
}
.feature-card {
width: 360px;
min-height: 190px;
padding: 20px;
gap: 16px;
}
.feature-info h3 {
font-size: 23px;
}
.feature-info ul {
font-size: 13px;
}
.feature-1 {
left: 3%;
}
.feature-2 {
left: 5%;
}
.feature-4 {
right: 3%;
}
.feature-5 {
right: 5%;
}
}
@media (max-width: 768px) {
.card-container {
margin: -30px 16px 0;
padding: 24px;
}
.hero-header h1 {
font-size: 28px;
}
.jsc-flow,
.jsc-flow-heading {
position: relative;
left: auto;
width: 100%;
top: auto;
}
.jsc-flow-section {
height: auto;
padding: 70px 18px;
}
.jsc-flow-sticky {
position: relative;
height: auto;
min-height: auto;
overflow: visible;
display: block;
}
.jsc-flow-heading {
transform: none;
margin-bottom: 50px;
}
.features-center h2,
.jsc-flow-heading h2 {
font-size: 42px;
}
.jsc-flow-heading p {
font-size: 14px;
}
.jsc-flow {
transform: none !important;
display: flex;
flex-direction: column;
gap: 0;
}
.jsc-step,
.jsc-step.active {
width: 100%;
min-height: 210px;
margin-bottom: 15px;
opacity: 1;
transform: none;
filter: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.jsc-step.active {
border-color: #e5bd32;
}
.jsc-arrow {
width: 2px;
height: 45px;
margin: 0 auto;
background: #d7a91a;
}
.jsc-arrow::after {
top: auto;
right: 50%;
bottom: -3px;
transform: translateX(50%) rotate(135deg);
}
.jsc-progress {
display: none;
}
.feature-card,
.feature-card.visible,
.features-center {
position: relative;
left: auto;
top: auto;
width: 100%;
transform: none !important;
}
.features-section {
min-height: auto;
padding: 70px 18px;
}
.features-center {
margin-bottom: 40px;
}
.features-center p {
font-size: 15px;
max-width: 500px;
}
.feature-card,
.feature-card.visible {
right: auto;
bottom: auto;
min-height: auto;
margin-bottom: 18px;
opacity: 1;
transition: box-shadow 0.3s;
}
.feature-card[data-active="far"],
.feature-card[data-active="near"] {
opacity: 1;
}
.feature-icon {
flex: 0 0 65px;
width: 65px;
height: 65px;
}
.feature-info h3 {
font-size: 22px;
}
}
.feature-card {
opacity: 0;
transform: translate3d(0, 80px, 0) scale(0.82);
transition: opacity 0.7s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.35s;
will-change: transform;
}
.feature-card.show,
.features-center.show-center {
opacity: 1;
}
.features-center {
opacity: 0;
transition: opacity 0.9s, transform 0.3s ease-out;
}
.jsc-benefits {
width: 100%;
padding: 100px 5vw 110px;
background: #f7f7f7;
overflow: hidden;
}
.benefits-heading,
.jsc-benefits-title,
.money-heading {
text-align: center;
margin-bottom: 65px;
}
.jsc-benefits-title span {
display: inline-block;
margin-bottom: 14px;
padding: 7px 14px;
background: #fff0a8;
color: #9b1717;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
border-radius: 4px;
}
.jsc-benefits-title h2 {
margin: 0;
color: #a90d0d;
font-size: clamp(38px, 5vw, 68px);
font-weight: 700;
letter-spacing: -2px;
}
.benefits-wrapper {
width: 100%;
max-width: 1450px;
height: 590px;
margin: auto;
display: flex;
gap: 10px;
}
.benefit-tabs {
width: 180px;
display: flex;
gap: 7px;
flex-shrink: 0;
}
.benefit-tab {
width: 54px;
height: 100%;
border: none;
border-radius: 30px;
cursor: pointer;
background: #d9ccec;
transition: width 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s,
background 0.5s;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.benefit-tab:first-child,
.benefit-tab:nth-child(2),
.benefit-tab:nth-child(3) {
background: #881b1b;
}
.benefit-tab.active {
width: 58px;
transform: scale(1.015);
}
.benefit-tab span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
color: #f7f3f3;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.5px;
}
.benefit-content {
flex: 1;
min-width: 0;
height: 100%;
border-radius: 30px;
background: #c8b8e2;
}
.benefit-panel {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: grid;
grid-template-columns: minmax(400px, 48%) 1fr;
gap: 55px;
padding: 25px;
opacity: 0;
visibility: hidden;
transform: translateX(60px) scale(0.98);
transition: opacity 0.55s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.55s;
}
.benefit-panel.active {
opacity: 1;
visibility: visible;
transform: translateX(0) scale(1);
}
.benefit-image {
width: 100%;
height: 100%;
border-radius: 25px;
overflow: hidden;
background: #ddd;
}
.benefit-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.benefit-panel.active .benefit-image img {
transform: scale(1.01);
}
.benefit-info {
align-self: center;
padding: 35px 60px 35px 10px;
color: #111;
}
.benefit-number {
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.8);
color: #9b1717;
font-size: 14px;
font-weight: 800;
}
.benefit-info h3 {
margin: 0 0 20px;
color: #111;
font-size: clamp(35px, 4vw, 64px);
line-height: 0.98;
letter-spacing: -2px;
font-weight: 800;
}
.benefit-intro {
max-width: 560px;
margin: 0 0 28px;
color: #333;
font-size: 18px;
line-height: 1.5;
}
.benefit-info ul {
margin: 0;
padding: 0;
list-style: none;
max-width: 600px;
}
.benefit-info li {
position: relative;
padding-left: 27px;
margin-bottom: 16px;
color: #171717;
font-size: 17px;
line-height: 1.45;
}
.benefit-info li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 9px;
height: 9px;
border-radius: 50%;
background: #9b1717;
}
.benefit-panel[data-panel="children"],
.benefit-panel[data-panel="emergency"],
.benefit-panel[data-panel="retirement"] {
background: #f3bebe;
}
.investment-hero {
width: 100%;
min-height: 775px;
position: relative;
overflow: hidden;
background-image: url("../img/hero-gsp-1.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.investment-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(8, 8, 8, 0.82) 0,
rgba(12, 10, 9, 0.72) 42%,
rgba(10, 10, 10, 0.1) 75%,
rgba(10, 10, 10, 0.05) 100%
);
z-index: 1;
}
.investment-container {
width: min(1180px, calc(100% - 60px));
min-height: 775px;
margin: auto;
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.investment-btn,
.stats-card {
align-items: center;
border-radius: 4px;
}
.investment-content {
max-width: 600px;
padding-bottom: 5px;
}
.investment-content h1 {
margin: 0 0 28px;
color: #fff;
font-size: 58px;
line-height: 1.28;
font-weight: 500;
letter-spacing: 1px;
}
.benefits-heading h2 span,
.investment-content h1 span {
color: #d4a84e;
font-weight: 700;
}
.investment-content p {
margin: 0 0 28px;
color: #fff;
font-size: 17px;
line-height: 1.8;
font-weight: 400;
}
.investment-btn {
display: inline-flex;
justify-content: center;
min-width: 133px;
height: 52px;
padding: 0 25px;
background: #d4a84e;
color: #111;
text-decoration: none;
font-size: 14px;
font-weight: 700;
transition: 0.3s;
}
.investment-btn:hover {
background: #e5bc61;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(212, 168, 78, 0.25);
}
@media (max-width: 1100px) {
.benefits-wrapper {
height: 520px;
}
.benefit-panel {
grid-template-columns: 45% 1fr;
gap: 30px;
padding: 20px;
}
.benefit-info {
padding: 25px;
}
.benefit-info h3 {
font-size: 42px;
}
.investment-container {
width: calc(100% - 80px);
}
.investment-content h1 {
font-size: 48px;
}
.investment-content p {
font-size: 15px;
}
}
@media (max-width: 768px) {
.jsc-benefits {
padding: 70px 16px 80px;
}
.jsc-benefits-title {
margin-bottom: 35px;
}
.jsc-benefits-title h2 {
font-size: 38px;
letter-spacing: -1px;
}
.benefits-wrapper {
/* height: auto; */
display: flex;
flex-direction: column;
}
.care-visual {
min-height: 160px !important;
}
.benefit-tabs {
width: 100%;
height: 58px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
}
.benefit-tab {
width: 100% !important;
height: 58px;
border-radius: 15px;
}
.benefit-tab span {
position: static;
transform: none;
white-space: normal;
text-align: center;
font-size: 11px;
line-height: 1.2;
padding: 5px;
}
.benefit-content {
height: 700px;
border-radius: 22px;
}
.benefit-panel {
display: flex;
flex-direction: column;
gap: 20px;
padding: 15px;
overflow-y: auto;
}
.benefit-image {
width: 100%;
height: 300px;
flex-shrink: 0;
border-radius: 18px;
}
.benefit-info {
padding: 10px 10px 25px;
}
.benefit-info h3 {
font-size: 38px;
}
.benefit-info li,
.benefit-intro {
font-size: 15px;
}
.investment-hero {
min-height: 700px;
background-position: 62% center;
}
.investment-container {
min-height: 700px;
width: calc(100% - 40px);
align-items: center;
}
.investment-overlay {
background: linear-gradient(
90deg,
rgba(8, 8, 8, 0.92) 0,
rgba(8, 8, 8, 0.78) 65%,
rgba(8, 8, 8, 0.45) 100%
);
}
.investment-content {
max-width: 100%;
}
.investment-content h1 {
font-size: 42px;
line-height: 1.2;
letter-spacing: 0;
}
.investment-content p {
font-size: 15px;
line-height: 1.7;
}
.investment-content p br {
display: none;
}
}
.stats-section {
width: 100%;
padding: 55px 20px;
background: #f9f9f9;
}
.stats-container {
margin: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.stats-card {
min-height: 145px;
padding: 30px;
display: flex;
gap: 20px;
background: #850a0a;
transition: transform 0.3s, box-shadow 0.3s;
}
.gold-steps-carousel,
.stats-icon {
position: relative;
align-items: center;
display: flex;
}
.stats-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}
.stats-icon {
width: 80px;
height: 80px;
min-width: 80px;
justify-content: center;
background: #ff0080;
border-radius: 4px;
color: #fff;
}
.stats-icon span {
font-size: 38px;
line-height: 1;
font-weight: 400;
}
.stats-icon small {
position: absolute;
font-size: 17px;
bottom: 18px;
right: 17px;
}
.stats-content h3 {
margin: 0 0 5px;
color: #fff;
font-size: 40px;
line-height: 1;
font-weight: 700;
}
.stats-content h3 span {
font-weight: 400;
}
.stats-content p {
margin: 0;
color: #fff;
font-size: 20px;
font-weight: 600;
}
@media (max-width: 900px) {
.stats-container {
grid-template-columns: 1fr 1fr;
}
.stats-card:last-child {
grid-column: 1/-1;
max-width: calc(50% - 15px);
width: 100%;
margin: auto;
}
}
@media (max-width: 600px) {
.wealth-image img {
width: 52% !important;
}
.junu-login-modal {
padding: 14px;
}
.junu-login-card {
width: 100%;
padding: 30px 20px;
border-radius: 23px;
}
.junu-login-heading h2 {
font-size: 25px;
}
.junu-login-heading p {
font-size: 14px;
}
.junu-login-icon {
width: 56px;
height: 56px;
}
.register-section {
padding: 50px 15px;
}
.register-intro h1 {
font-size: 38px;
letter-spacing: -1px;
}
.register-card {
padding: 25px 18px;
border-radius: 16px;
}
.form-row {
grid-template-columns: 1fr;
gap: 17px;
margin-bottom: 17px;
}
.form-heading h2 {
font-size: 23px;
}
.products-search {
margin: 18px 0;
}
.search-box {
height: 48px;
border-radius: 10px;
}
.jsc-plan-detail {
/* padding: 65px 22px; */
}
.jsc-plan-detail-hero-c h2 {
font-size: 42px;
letter-spacing: -1.5px;
}
.jsc-plan-detail-hero-c p {
font-size: 15px;
line-height: 1.65;
}
.igel-care-visual {
min-height: 390px;
}
.igel-circle-1 {
width: 310px;
height: 310px;
}
.igel-circle-2 {
width: 230px;
height: 230px;
}
.igel-product-img {
width: 72%;
max-height: 360px;
}
.igel-floating-card {
right: 0;
bottom: 20px;
padding: 11px 14px;
}
.igel-check {
width: 32px;
height: 32px;
}
.junu-offer-section {
padding: 12px;
}
.junu-offer-grid {
gap: 15px;
}
.junu-offer-card {
min-height: 500px;
border-radius: 22px;
padding: 35px 20px 20px;
}
.offer-content-1 h2 {
font-size: 25px;
margin-bottom: 14px;
}
.offer-content-1 p {
font-size: 14px;
line-height: 1.45;
max-width: 330px;
margin-bottom: 18px;
}
.offer-btn {
min-width: 155px;
height: 46px;
font-size: 15px;
}
.product-image {
/* width: 72%;
    bottom: 12px; */
}
.product-image img {
max-width: 290px;
}
.stats-section {
padding: 40px 18px;
}
.stats-container {
grid-template-columns: 1fr;
gap: 18px;
}
.stats-card:last-child {
grid-column: auto;
max-width: none;
}
.stats-card {
min-height: 125px;
padding: 22px;
}
.stats-icon {
width: 68px;
height: 68px;
min-width: 68px;
}
.stats-content h3,
.stats-icon span {
font-size: 32px;
}
.stats-content p {
font-size: 17px;
}
}
@media (max-width: 380px) {
.stats-card {
padding: 18px;
gap: 15px;
}
.stats-icon {
width: 60px;
height: 60px;
min-width: 60px;
}
.stats-content h3 {
font-size: 28px;
}
.stats-content p {
font-size: 15px;
}
}
.gold-steps-section {
width: 100%;
padding: 100px 0;
overflow: hidden;
background: #060606;
}
.gold-steps-carousel {
width: 100%;
max-width: 900px;
height: 380px;
margin: 0 auto;
justify-content: center;
}
.gold-step-card {
position: absolute;
width: 250px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 20px;
overflow: hidden;
opacity: 0;
transform: translateX(0) scale(0.65);
filter: blur(2px);
transition: transform 1.25s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 1.25s,
filter 1.25s;
will-change: transform, opacity;
}
.plan-card-de,
.plan-features-section {
position: relative;
background: #fff;
overflow: hidden;
}
.gold-step-card.center {
transform: translateX(0) scale(1);
opacity: 1;
filter: blur(0);
z-index: 10;
}
.gold-step-card.left {
transform: translateX(-310px) scale(0.72);
opacity: 0.55;
filter: blur(0.4px);
z-index: 5;
}
.gold-step-card.right {
transform: translateX(310px) scale(0.72);
opacity: 0.55;
filter: blur(0.4px);
z-index: 5;
}
.gold-step-card.hidden-left {
transform: translateX(-650px) scale(0.55);
opacity: 0;
filter: blur(3px);
z-index: 1;
}
.gold-step-card.hidden-right {
transform: translateX(650px) scale(0.55);
opacity: 0;
filter: blur(3px);
z-index: 1;
}
@media (max-width: 768px) {
.gold-steps-carousel {
height: 290px;
}
.gold-step-card {
width: 190px;
height: 245px;
}
.gold-step-card.left {
transform: translateX(-145px) scale(0.72);
opacity: 0.45;
}
.gold-step-card.right {
transform: translateX(145px) scale(0.72);
opacity: 0.45;
}
}
.plan-features-section {
width: 100%;
padding: 80px 5%;
}
.plan-features-container {
max-width: 1250px;
margin: auto;
}
.plan-features-heading {
text-align: center;
margin-bottom: 50px;
}
.plan-features-heading span {
display: block;
color: #c59b27;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 8px;
}
.plan-features-heading h2 {
margin: 0;
color: #881b1b;
font-size: 45px;
font-weight: 700;
}
.plan-features-heading p {
margin: 15px auto 0;
max-width: 650px;
color: #666;
font-size: 16px;
line-height: 1.7;
}
.plan-cards {
display: flex;
width: 100%;
transition: transform 2s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform;
}
.plan-card-de {
min-height: 100px;
padding: 20px;
border-radius: 12px;
border: 1px solid #eee;
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
transition: 0.35s;
flex: 0 0 24%;
width: 25%;
box-sizing: border-box;
margin: 5px;
}
.plan-card-icon,
.plan-card-number {
position: absolute;
display: flex;
font-weight: 700;
}
.plan-card-number {
top: 0;
right: 0;
width: 55px;
height: 55px;
background: #881b1b;
color: #fff;
align-items: center;
justify-content: center;
font-size: 15px;
border-radius: 0 0 12px;
}
.plan-card-icon {
left: 30px;
top: 65px;
width: 58px;
height: 58px;
border-radius: 50%;
background: #f7e8e5;
color: #c59b27;
align-items: center;
justify-content: center;
font-size: 25px;
transition: 0.35s;
}
.plan-card-content h3 {
margin: 0 0 12px;
color: #34241b;
font-size: 23px;
font-weight: 700;
}
.plan-card-content p {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.7;
}
.plan-card-content strong {
color: #a91414;
font-weight: 700;
}
.plan-card:hover {
transform: translateY(-7px);
border-color: #d7b13a;
box-shadow: 0 18px 45px rgba(169, 20, 20, 0.12);
}
.plan-card:hover .plan-card-icon {
background: #c59b27;
color: #fff;
transform: rotate(10deg) scale(1.08);
}
.plan-card:hover .plan-card-number {
background: #c59b27;
}
@media (max-width: 900px) {
.plan-features-section {
padding: 65px 25px;
}
.plan-features-heading h2 {
font-size: 34px;
}
.plan-card-de {
padding-left: 95px;
}
.plan-card-icon {
left: 22px;
}
}
.money-convert-section {
position: relative;
overflow: hidden;
padding: 90px 20px 85px;
background: radial-gradient(
circle at 50% 30%,
rgba(198, 146, 30, 0.06),
transparent 35%
),
#fcf1f1;
}
.money-container {
position: relative;
max-width: 1300px;
margin: 0 auto;
z-index: 2;
}
.money-heading h2 {
margin: 0;
color: #101c2c;
font-size: 45px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -2px;
}
.money-heading h2 span {
color: #881b1b;
}
.money-heading p {
margin: 20px 0 0;
color: #5d626b;
font-size: 20px;
line-height: 1.6;
}
.money-heading-line {
width: 100px;
height: 4px;
margin: 25px auto 0;
border-radius: 50px;
background: linear-gradient(90deg, transparent, #dca72d, transparent);
}
.money-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.money-card {
position: relative;
height: 170px;
overflow: hidden;
text-align: center;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(218, 170, 55, 0.22);
border-radius: 28px;
box-shadow: 0 18px 45px rgba(45, 35, 15, 0.08),
0 5px 15px rgba(218, 170, 55, 0.08);
transition: transform 0.4s, box-shadow 0.4s;
}
.money-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: linear-gradient(90deg, #d89d20, #f0c65b, #d89d20);
}
.money-card:hover {
transform: translateY(-10px);
box-shadow: 0 28px 55px rgba(45, 35, 15, 0.12),
0 8px 25px rgba(218, 170, 55, 0.16);
}
.money-amount {
padding: 5px 15px;
  color: #fff;
  background: linear-gradient(135deg, #881b1b, #881b1b);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.money-value{
padding: 5px 15px;
  color: #ffcd56;
  background: linear-gradient(135deg, #881b1b, #881b1b);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.money-arrow {
margin: 10px 0 10px;
  color: #d9a52d;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}
.money-result {
color: #555b64;
font-size: 24px;
line-height: 1.4;
}
.money-result strong {
color: #111923;
font-size: 24px;
font-weight: 800;
}
.money-bg-dots {
position: absolute;
width: 100px;
height: 70px;
opacity: 0.55;
background-image: radial-gradient(#d8a832 1.6px, transparent 1.6px);
background-size: 20px 20px;
}
.money-bg-dots-left {
left: 35px;
top: 175px;
}
.money-bg-dots-right {
right: 80px;
top: 175px;
}
.money-bg-lines {
position: absolute;
right: -180px;
bottom: 20px;
width: 500px;
height: 350px;
opacity: 0.35;
transform: rotate(-15deg);
border-radius: 50%;
border: 1px solid rgba(215, 165, 45, 0.45);
box-shadow: 0 0 0 12px rgba(215, 165, 45, 0.05),
0 0 0 24px rgba(215, 165, 45, 0.04), 0 0 0 36px rgba(215, 165, 45, 0.035),
0 0 0 48px rgba(215, 165, 45, 0.03);
}
@media (max-width: 1100px) {
.money-cards {
grid-template-columns: repeat(2, 1fr);
max-width: 850px;
margin: auto;
}
.money-heading h2 {
font-size: 52px;
}
}
.customer-benefits {
position: relative;
width: 100%;
min-height: 700px;
overflow: hidden;
background-color: #881b1b;
background-position-x: 0%, 0%;
background-position-y: 0%, 0%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: #fff;
}
.benefits-overlay {
position: absolute;
inset: 0;
background: radial-gradient(
circle at center,
rgba(212, 168, 78, 0.08),
transparent 55%
);
}
.benefits-container {
position: relative;
z-index: 2;
width: min(1250px, calc(100% - 60px));
margin: auto;
padding: 70px 0 80px;
}
.benefits-heading h2 {
margin: 0 0 20px;
font-size: 45px;
line-height: 1.2;
font-weight: 400;
letter-spacing: 0.5px;
}
.benefits-heading p {
max-width: 700px;
margin: auto;
color: #e5e5e5;
font-size: 16px;
line-height: 1.7;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 55px;
row-gap: 65px;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 18px;
position: relative;
}
.benefit-icon {
width: 50px;
height: 50px;
min-width: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #d4a84e;
font-size: 34px;
font-weight: 400;
transition: 0.35s;
}
.benefit-icon span {
line-height: 1;
}
.benefit-text h3 {
margin: 3px 0 20px;
color: #d4a84e;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
}
.benefit-text p {
margin: 0;
color: #eee;
font-size: 15px;
line-height: 1.7;
}
.benefit-item:hover .benefit-icon {
transform: translateY(-5px) scale(1.08);
text-shadow: 0 0 10px rgba(212, 168, 78, 0.8), 0 0 25px rgba(212, 168, 78, 0.4);
}
.benefit-item:hover .benefit-text h3 {
color: #f0c867;
}
@media (max-width: 1100px) {
.benefits-container {
width: calc(100% - 50px);
}
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
column-gap: 55px;
row-gap: 55px;
}
.benefits-heading h2 {
font-size: 40px;
}
}
@media (max-width: 650px) {
.plan-features-section {
padding: 50px 18px;
}
.plan-features-heading {
margin-bottom: 35px;
}
.plan-features-heading h2 {
font-size: 28px;
}
.benefits-heading p,
.plan-card-content p,
.plan-features-heading p {
font-size: 14px;
}
.plan-cards {
grid-template-columns: 1fr;
gap: 18px;
}
.foundations-grid {
grid-template-columns: auto !important;
}
.plan-card-de {
flex: 0 0 50% !important;
min-height: 170px;
padding: 75px 22px 25px;
}
.plan-card-icon {
top: 20px;
left: 65px;
}
.plan-card-number {
width: 48px;
height: 48px;
}
.plan-card-content h3 {
font-size: 20px;
}
.money-convert-section {
padding: 65px 16px;
}
.money-heading {
margin-bottom: 40px;
}
.money-heading h2 {
font-size: 38px;
letter-spacing: -1.2px;
}
.money-heading p {
font-size: 16px;
margin-top: 15px;
}
.money-cards {
grid-template-columns: 1fr;
gap: 20px;
max-width: 420px;
}
.money-card {
min-height: 350px;
}
.money-amount {
font-size: 25px;
}
.money-result strong {
font-size: 26px;
}
.money-bg-dots {
display: none;
}
.money-bg-lines {
opacity: 0.15;
}
.customer-benefits {
min-height: auto;
background-position: center;
}
.benefits-container {
width: calc(100% - 35px);
padding: 55px 0 60px;
}
.benefits-heading {
margin-bottom: 45px;
}
.benefits-heading h2 {
font-size: 32px;
}
.benefits-grid {
grid-template-columns: 1fr;
row-gap: 40px;
}
.benefit-item {
gap: 15px;
}
.benefit-icon {
width: 45px;
min-width: 45px;
height: 45px;
font-size: 28px;
}
.benefit-text h3 {
font-size: 19px;
margin-bottom: 12px;
}
.benefit-text p {
font-size: 14px;
line-height: 1.65;
}
}
@media (max-width: 400px) {
.plan-card {
min-height: 570px;
}
.plan-title {
font-size: 30px;
}
.gold-visual {
transform: scale(0.65);
}
.gsp-visual {
transform: scale(0.62);
}
.benefit-text h3,
.chart-name h2 {
font-size: 17px;
}
.chart-stat {
font-size: 9px;
line-height: 1.7;
}
.current-price {
font-size: 20px;
}
.offer-body {
grid-template-columns: 1fr;
}
.silver-placeholder {
margin: auto;
}
.junu-checkout {
padding-left: 7px;
padding-right: 7px;
}
.junu-checkout-card,
.junu-payment-card {
/* padding: 12px; */
}
.junu-payment-option {
padding-left: 9px;
padding-right: 9px;
}
.junu-card-brands {
display: none;
}
.wealth-header h2 {
font-size: 29px;
}
.wealth-image {
height: 220px;
}
.wealth-content {
padding: 0 22px 28px;
}
.wealth-content h3 {
font-size: 24px;
}
.wealth-content p {
font-size: 15px;
}
.feature-content h3 {
font-size: 23px;
}
.junu-offer-card {
min-height: 450px;
padding-top: 28px;
}
.offer-content-1 h2 {
font-size: 22px;
}
.benefit-text p,
.offer-content-1 p {
font-size: 13px;
}
.product-image {
/* width: 68% */
}
.benefits-heading h2 {
font-size: 28px;
}
.benefits-grid {
row-gap: 32px;
}
}
.who-use-section {
position: relative;
overflow: hidden;
padding: 90px 6%;
background: radial-gradient(
circle at 50% 50%,
rgba(183, 128, 38, 0.1),
transparent 28%
),
linear-gradient(135deg, #f0eef1, #f4f3f4 55%, #f8f7f9);
color: #0c0c0c;
font-family: Arial, sans-serif;
}
.who-use-section::before {
content: "";
position: absolute;
width: 600px;
height: 600px;
left: 50%;
top: 50%;
transform: translate(-50%, -45%);
background: radial-gradient(circle, rgba(214, 163, 62, 0.13), transparent 65%);
}
.who-use-header {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
margin: 0 auto 65px;
}
.who-use-header span {
display: block;
color: #480a01;
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
margin-bottom: 10px;
}
.who-use-header h2 {
margin: 0;
font-size: clamp(36px, 4vw, 56px);
line-height: 1.1;
font-weight: 800;
}
.who-use-header p {
max-width: 650px;
margin: 20px auto 0;
color: rgba(7, 7, 7, 0.82);
font-size: 16px;
line-height: 1.7;
}
.who-use-wrapper {
position: relative;
z-index: 2;
max-width: 1450px;
margin: auto;
display: grid;
grid-template-columns: 1fr 360px 1fr;
gap: 45px;
align-items: center;
}
.who-use-column {
display: flex;
flex-direction: column;
gap: 42px;
}
.who-use-column.left .who-use-item {
text-align: right;
flex-direction: row-reverse;
}
.who-use-item {
display: flex;
align-items: flex-start;
gap: 18px;
min-height: 110px;
}
.who-use-item h3 {
margin: 5px 0 10px;
font-size: 20px;
font-weight: 700;
color: #090909;
}
.who-use-item p {
margin: 0;
color: rgba(8, 8, 8, 0.78);
font-size: 14px;
line-height: 1.7;
max-width: 330px;
}
.who-use-icon {
flex: 0 0 58px;
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #e7b84b, #c58a27);
box-shadow: 0 0 0 7px rgba(220, 170, 60, 0.08), 0 8px 25px rgba(0, 0, 0, 0.25);
transition: 0.35s;
}
.who-use-icon svg {
width: 27px;
height: 27px;
fill: none;
stroke: #fff;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.who-use-item:hover .who-use-icon {
transform: translateY(-5px) scale(1.08);
box-shadow: 0 0 0 9px rgba(220, 170, 60, 0.1), 0 12px 35px rgba(0, 0, 0, 0.3);
}
.who-use-center {
position: relative;
width: 360px;
height: 360px;
display: flex;
align-items: center;
justify-content: center;
}
.center-circle {
position: relative;
z-index: 4;
width: 210px;
height: 210px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 35% 30%, #f4f2f5, #fff);
border: 2px solid #d5a83f;
box-shadow: 0 0 0 12px rgba(213, 168, 63, 0.06),
0 0 50px rgba(213, 168, 63, 0.22);
}
.center-icon,
.coin {
border-radius: 50%;
display: flex;
}
.center-icon {
width: 65px;
height: 65px;
align-items: center;
justify-content: center;
background: rgba(213, 168, 63, 0.12);
margin-bottom: 12px;
}
.center-icon svg {
width: 34px;
height: 34px;
fill: none;
stroke: #e1b74e;
stroke-width: 1.5;
}
.center-circle strong {
color: #e2b84e;
font-size: 18px;
letter-spacing: 2px;
}
.center-circle span {
margin-top: 4px;
font-size: 11px;
letter-spacing: 2px;
color: #fff;
}
.coin {
position: absolute;
width: 68px;
height: 68px;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 700;
color: #6b4308;
background: radial-gradient(
circle at 35% 30%,
#fff1a5,
#e2ad38 45%,
#a86d14 100%
);
border: 4px solid #e7bd58;
box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.25),
0 8px 20px rgba(0, 0, 0, 0.35);
z-index: 2;
}
.coin-one {
top: 20px;
left: 48px;
transform: rotate(-22deg);
}
.coin-two {
top: 5px;
right: 35px;
transform: rotate(20deg);
}
.coin-three {
bottom: 20px;
left: 40px;
transform: rotate(18deg);
}
.coin-four {
bottom: 0;
right: 48px;
transform: rotate(-25deg);
}
.who-use-center::after,
.who-use-center::before {
content: "";
position: absolute;
top: 50%;
width: 110px;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(216, 171, 65, 0.55),
transparent
);
}
.who-use-center::before {
left: -65px;
}
.who-use-center::after {
right: -65px;
}
.who-use-item {
transition: transform 0.35s;
}
.who-use-column.left .who-use-item:hover {
transform: translateX(-7px);
}
.who-use-column.right .who-use-item:hover {
transform: translateX(7px);
}
@media (max-width: 1100px) {
.who-use-wrapper {
grid-template-columns: 1fr 280px 1fr;
gap: 25px;
}
.who-use-center {
width: 280px;
height: 300px;
}
.center-circle {
width: 175px;
height: 175px;
}
.who-use-item h3 {
font-size: 17px;
}
.who-use-item p {
font-size: 13px;
}
.who-use-icon {
width: 50px;
height: 50px;
flex-basis: 50px;
}
}
@media (max-width: 800px) {
.basket-container {
grid-template-columns: 1fr;
display: grid !important;
}
.basket-summary {
position: static;
margin-top: 8px;
}
.who-use-section {
padding: 65px 20px;
}
.who-use-header {
margin-bottom: 45px;
}
.who-use-header h2 {
font-size: 34px;
}
.who-use-wrapper {
display: flex;
flex-direction: column;
gap: 30px;
}
.who-use-center {
order: 0;
width: 280px;
height: 280px;
margin: 10px auto 20px;
}
.who-use-column {
width: 100%;
gap: 25px;
}
.who-use-column.left {
order: 1;
}
.who-use-column.right {
order: 2;
}
.who-use-column.left .who-use-item,
.who-use-column.right .who-use-item {
text-align: left;
flex-direction: row;
transform: none;
}
.who-use-item {
min-height: auto;
}
.who-use-item h3 {
font-size: 18px;
}
.who-use-item p {
max-width: none;
}
.who-use-center::after,
.who-use-center::before {
display: none;
}
}
@media (max-width: 480px) {
.features-section {
padding: 55px 14px;
}
.features-center h2 {
font-size: 36px;
}
.feature-card {
padding: 18px;
gap: 13px;
border-radius: 14px;
}
.feature-icon {
width: 55px;
height: 55px;
flex-basis: 55px;
}
.feature-info h3 {
font-size: 19px;
}
.feature-info ul {
font-size: 13px;
padding-left: 15px;
}
.investment-hero {
min-height: 650px;
}
.investment-container {
min-height: 650px;
width: calc(100% - 30px);
}
.investment-content h1 {
font-size: 34px;
line-height: 1.25;
margin-bottom: 22px;
}
.investment-content p {
font-size: 14px;
line-height: 1.65;
margin-bottom: 25px;
}
.investment-btn {
height: 48px;
min-width: 120px;
font-size: 13px;
}
.gold-steps-carousel {
height: 245px;
}
.gold-step-card {
width: 155px;
height: 205px;
}
.gold-step-card.left {
transform: translateX(-115px) scale(0.68);
opacity: 0.4;
}
.gold-step-card.right {
transform: translateX(115px) scale(0.68);
opacity: 0.4;
}
.who-use-section {
padding: 50px 16px;
}
.who-use-header h2 {
font-size: 30px;
}
.who-use-header p {
font-size: 14px;
}
.who-use-item {
gap: 13px;
}
.who-use-icon {
width: 48px;
height: 48px;
flex-basis: 48px;
}
.who-use-icon svg {
width: 23px;
height: 23px;
}
.who-use-item h3 {
font-size: 16px;
margin-top: 2px;
}
.who-use-item p {
font-size: 13px;
line-height: 1.6;
}
}
.foundations-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
align-items: start;
}
.foundation-card {
position: relative;
align-self: start;
height: fit-content;
}
.card-more-content {
max-height: 0;
overflow: hidden;
opacity: 0;
margin-top: 0;
transition: max-height 0.5s, opacity 0.4s, margin-top 0.4s;
}
.foundation-card.active .card-more-content {
max-height: 400px;
opacity: 1;
margin-top: 10px;
color: #fff;
}
.image-lightbox {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.88);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999;
padding: 30px;
animation: 0.25s lightboxFade;
}
.lightbox-image {
max-width: 90%;
max-height: 90vh;
object-fit: contain;
border-radius: 10px;
animation: 0.3s imageZoom;
}
.lightbox-close {
position: absolute;
top: 25px;
right: 30px;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background: #fff;
color: #222;
font-size: 30px;
line-height: 1;
cursor: pointer;
z-index: 10;
}
.lightbox-close:hover {
background: #d1b464;
color: #fff;
}
@keyframes lightboxFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes imageZoom {
from {
transform: scale(0.85);
}
to {
transform: scale(1);
}
}
.add-review {
margin: 20px auto;
}
.add-review h2 {
margin: 0 0 30px;
}
.form-group label,
.rating-row > label {
display: block;
margin-bottom: 10px;
font-size: 15px;
font-weight: 600;
color: #000;
}
.rating {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 8px;
}
.rating label {
font-size: 32px;
line-height: 1;
color: #d5d5d5;
cursor: pointer;
transition: transform 0.2s, color 0.2s;
}
.rating label:hover,
.rating label:hover ~ label {
color: #f5b301;
transform: scale(1.15);
}
.rating label.active {
color: #f5b301;
}
.form-group textarea {
width: 100%;
min-height: 150px;
padding: 18px 20px;
border: 1px solid #e4e4e4;
border-radius: 16px;
background: #fafafa;
font-size: 15px;
font-family: inherit;
color: #222;
outline: 0;
resize: vertical;
transition: 0.25s;
box-sizing: border-box;
}
.form-group textarea::placeholder {
color: #aaa;
}
.form-group textarea:focus {
background: #fff;
border-color: #b8963e;
box-shadow: 0 0 0 4px rgba(184, 150, 62, 0.1);
}
.submit-btn {
border: none;
outline: 0;
padding: 14px 32px;
min-width: 150px;
border-radius: 12px;
background: linear-gradient(135deg, #7a0d16, #970000);
color: #fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
box-shadow: 0 8px 20px rgba(122, 13, 22, 0.2);
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(122, 13, 22, 0.3);
}
.review-message {
margin-top: 18px;
font-size: 14px;
font-weight: 500;
}
@media (max-width: 768px) {
.add-review {
margin: 30px 15px;
padding: 28px 20px;
border-radius: 20px;
}
.add-review h2 {
font-size: 24px;
}
.rating-row {
padding: 18px;
}
.rating label {
font-size: 28px;
}
.submit-btn {
width: 100%;
padding: 15px;
}
}
/* =========================
   CART SECTION
========================= */

.junu-cart-section {
width: 100%;
padding: 100px 4%;
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}

.junu-cart-wrapper {
width: 100%;
max-width: 1300px;
margin: auto;
display: grid;
grid-template-columns: minmax(0, 1.8fr) minmax(380px, 0.9fr);
gap: 44px;
align-items: start;
}

/* =========================
   LEFT CART
========================= */

.junu-cart-products {
width: 100%;
}

.junu-cart-products h1 {
margin: 0 0 70px;
font-size: 28px;
font-weight: 500;
letter-spacing: 1px;
color: #111;
}

/* CART HEAD */

.junu-cart-head {
display: grid;
grid-template-columns: minmax(280px, 1fr) 130px 150px 130px;
align-items: center;
padding: 0 35px 22px 135px;
border-bottom: 1px solid #d8d8d8;
color: #17324c;
font-size: 16px;
}

.junu-cart-head span {
text-align: center;
}

/* CART ITEM */

.junu-cart-item {
min-height: 195px;
display: grid;
grid-template-columns: 45px minmax(280px, 1fr) 130px 150px 130px;
align-items: center;
border-bottom: 1px solid #d5d5d5;
padding: 25px 0;
}

/* DELETE / BUCKET ICON */
.junu-remove {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: #d40000;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
transition: all 0.25s ease;
}

.junu-remove i {
font-size: 22px;
color: #d40000;
}

.junu-remove:hover i {
color: #a80000;
transform: scale(1.12);
}

/* Remove focus/outline */
.junu-remove:focus {
outline: none;
box-shadow: none;
}

/* PRODUCT INFO */

.junu-product-info {
display: flex;
align-items: center;
gap: 22px;
}

.junu-product-image {
width: 130px;
height: 130px;
background: #eef4f8;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}

.junu-product-image img {
width: 88%;
height: 88%;
object-fit: contain;
}

.junu-product-name h3 {
margin: 0 0 8px;
font-size: 18px;
font-weight: 600;
color: #111;
}

.junu-product-name p {
margin: 3px 0;
color: #858585;
font-size: 15px;
}

/* PRICE */

.junu-product-price,
.junu-product-subtotal {
text-align: center;
font-size: 16px;
font-weight: 600;
color: #17324c;
}

/* QUANTITY */

.junu-quantity {
width: 138px;
height: 48px;
margin: auto;
border: 1px solid #ddd;
border-radius: 28px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.junu-quantity button {
width: 42px;
height: 100%;
border: 0;
background: transparent;
font-size: 22px;
cursor: pointer;
color: #333;
}

.junu-quantity input {
width: 45px;
height: 100%;
border: 0;
text-align: center;
outline: none;
font-size: 15px;
background: transparent;
}

.junu-quantity input::-webkit-inner-spin-button,
.junu-quantity input::-webkit-outer-spin-button {
-webkit-appearance: none;
}

/* CART BOTTOM */

.junu-cart-bottom {
padding-top: 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}

.junu-coupon-left {
display: flex;
gap: 12px;
}

.junu-coupon-left input {
width: 240px;
height: 60px;
padding: 0 17px;
border: 1px solid #d2d2d2;
outline: none;
font-size: 16px;
box-sizing: border-box;
}

.junu-coupon-left button {
height: 60px;
padding: 0 35px;
border: 0;
background: #1d1d1d;
color: #fff;
font-size: 16px;
cursor: pointer;
}

.junu-update-cart {
height: 60px;
min-width: 190px;
border: 0;
background: #999;
color: #fff;
font-size: 16px;
cursor: pointer;
}

/* =========================
   PAYMENT BOX
========================= */

.junu-payment-box {
background: #881b1b;
border-radius: 18px 18px 0 0;
padding: 38px 34px 35px;
color: #fff;
box-sizing: border-box;
min-height: 700px;
}

.junu-payment-box > h2 {
margin: 0 0 20px;
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
}

/* PROMO */

.junu-payment-coupon h3 {
margin: 0 0 30px;
font-size: 27px;
font-weight: 600;
}

.junu-promo-input {
height: 68px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: 40px;
padding: 4px;
display: flex;
align-items: center;
overflow: hidden;
}

.junu-promo-input input {
flex: 1;
min-width: 0;
height: 100%;
padding: 0 22px;
border: 0;
outline: none;
background: transparent;
color: #fff;
font-size: 16px;
}

.junu-promo-input input::placeholder {
color: #fff;
}

.junu-promo-input button {
height: 58px;
min-width: 140px;
border: 0;
border-radius: 35px;

color: #000;
font-size: 17px;
cursor: pointer;
}

/* TOTAL TITLE */

.junu-cart-totals > h3 {
margin: 25px 0 25px;
text-align: center;
font-size: 2%;
font-weight: 500;
}

/* DELIVERY */

.junu-delivery-box {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 18px;
margin-bottom: 24px;
}

.junu-delivery-box h4 {
margin: 0 0 15px;
font-size: 18px;
}

.junu-delivery-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}

.junu-delivery-option {
min-height: 100px;
padding: 13px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 14px;
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
box-sizing: border-box;
}

.junu-delivery-option.active {
border-color: #a51d20;
background: rgba(255, 255, 255, 0.04);
}

.junu-delivery-option input {
margin-top: 3px;
accent-color: #1769e8;
}

.junu-delivery-option strong {
display: block;
font-size: 16px;
line-height: 1.2;
}

.junu-delivery-option small {
display: block;
margin-top: 8px;
color: #aaa;
line-height: 1.3;
font-size: 13px;
}

.junu-delivery-note {
margin: 12px 0 0;
color: #fff;
line-height: 1.45;
font-size: 14px;
}

/* SUMMARY */

.junu-summary {
width: 100%;
}

.junu-summary-row {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 13px 0;
font-size: 17px;
line-height: 1.45;
}

.junu-summary-row strong {
font-size: 18px;
}

.junu-summary-total {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.55);
margin-top: 20px;
padding-top: 26px;
font-size: 21px;
}

/* CHECKOUT */

.junu-checkout {
width: 100%;
height: 65px;
margin-top: 32px;
border: 0;
border-radius: 35px;
background: #b78a3c;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: 0.25s ease;
align-content: center;
text-align: center;
}

.junu-checkout:hover,
.junu-promo-input button:hover {
background: #2f78d0;
}

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

@media (max-width: 1100px) {
.junu-cart-wrapper {
grid-template-columns: 1fr;
}

.junu-payment-box {
max-width: 650px;
width: 100%;
margin: auto;
}

.junu-cart-head {
padding-left: 260px;
}
}

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

@media (max-width: 700px) {
.junu-cart-products h1 {
margin-bottom: 35px;
font-size: 28px;
}

.junu-cart-head {
display: none;
}

.junu-cart-item {
grid-template-columns: 35px 1fr;
gap: 12px;
padding: 20px 0;
}

.junu-product-info {
align-items: flex-start;
}

.junu-product-image {
width: 90px;
height: 90px;
}

.junu-product-name h3 {
font-size: 15px;
}

.junu-product-name p {
font-size: 12px;
}

.junu-product-price,
.junu-product-subtotal {
display: none;
}

.junu-quantity {
grid-column: 2;
margin: 10px 0 0;
}

.junu-cart-bottom {
flex-direction: column;
align-items: stretch;
}

.junu-coupon-left {
width: 100%;
}

.junu-coupon-left input {
width: 55%;
}

.junu-coupon-left button {
flex: 1;
padding: 0 15px;
}

.junu-update-cart {
width: 100%;
}

.junu-payment-box {
padding: 30px 20px;
}

.junu-payment-box > h2 {
font-size: 30px;
margin-bottom: 40px;
}

.junu-payment-coupon h3 {
font-size: 22px;
}

.junu-cart-totals > h3 {
font-size: 32px;
margin: 45px 0 30px;
}

.junu-delivery-options {
grid-template-columns: 1fr;
}

.junu-promo-input button {
min-width: 100px;
}
}
@media (max-width: 768px) {
/* MAIN SECTION */
.junu-cart-section {
width: 100%;
/* padding: 30px 15px; */
overflow: hidden;
}

.junu-cart-wrapper {
width: 100%;
display: flex;
flex-direction: column;
gap: 25px;
}

/* =========================================
       LEFT - SHOPPING CART
       ========================================= */

.junu-cart-products {
width: 100%;
}

.junu-cart-products h1 {
font-size: 26px;
line-height: 1.2;
margin-bottom: 20px;
}

/* Hide desktop table headings */
.junu-cart-head {
display: none;
}

/* CART ITEM */
.junu-cart-item {
position: relative;
width: 100%;
display: block !important;
grid-template-columns: 90px 1fr;
grid-template-areas:
"image info"
"image price"
"image quantity"
"image subtotal";
column-gap: 15px;
row-gap: 8px;

padding: 18px 15px;
margin-bottom: 15px;

border: 1px solid #e5e5e5;
border-radius: 12px;
background: #fff;
box-sizing: border-box;
}

/* REMOVE BUTTON */
.junu-remove {
position: absolute;
top: 12px;
right: 12px;

width: 30px;
height: 30px;

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

border: none;
background: transparent;

font-size: 18px;
cursor: pointer;
z-index: 5;
}

/* PRODUCT INFO */
.junu-product-info {
display: contents;
}

/* PRODUCT IMAGE */
.junu-product-image {
grid-area: image;

width: 90px;
height: 110px;

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

overflow: hidden;
border-radius: 8px;
background: #f7f7f7;
}

.junu-product-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}

/* PRODUCT NAME */
.junu-product-name {
grid-area: info;
padding-right: 25px;
}

.junu-product-name h3 {
font-size: 15px;
line-height: 1.35;
margin: 0 0 5px;
}

.junu-product-name p {
font-size: 11px;
line-height: 1.4;
margin: 2px 0;
color: #777;
}

/* PRICE */
.junu-product-price {
grid-area: price;

font-size: 14px;
font-weight: 600;
margin-top: 3px;
}

/* QUANTITY */
.junu-quantity {
grid-area: quantity;

width: fit-content;

display: flex;
align-items: center;

border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
margin-top: 3px;
}

.junu-quantity button {
width: 30px;
height: 30px;

border: none;
background: #f7f7f7;

font-size: 16px;
cursor: pointer;
}

.junu-quantity input {
width: 35px;
height: 30px;

padding: 0;
border: none;
outline: none;

text-align: center;
font-size: 13px;
}

/* SUBTOTAL */
.junu-product-subtotal {
grid-area: subtotal;

font-size: 15px;
font-weight: 700;

margin-top: 3px;
}

/* =========================================
       RIGHT - PAYMENT INFO
       ========================================= */

.junu-payment-box {
width: 100%;
box-sizing: border-box;

padding: 20px 15px;

border-radius: 12px;
}

.junu-payment-box h2 {
font-size: 22px;
margin-bottom: 18px;
}

/* COUPON */
.junu-promo-input {
width: 100%;
display: flex;
gap: 8px;
}

.junu-promo-input input {
min-width: 0;
flex: 1;

height: 44px;
padding: 0 12px;

font-size: 13px;
box-sizing: border-box;
}

.junu-promo-input button {
width: 80px;
height: 44px;

flex-shrink: 0;

font-size: 13px;
}

/* CART TOTALS */
.junu-cart-totals {
width: 100%;
margin-top: 20px;
}

.junu-cart-totals h3 {
font-size: 18px;
margin-bottom: 15px;
}

/* =========================================
       DELIVERY
       ========================================= */

.junu-delivery-box {
width: 100%;
padding: 15px;

box-sizing: border-box;
border-radius: 10px;
}

.junu-delivery-box h4 {
font-size: 14px;
margin-bottom: 12px;
}

.junu-delivery-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}

.junu-delivery-option {
min-width: 0;
padding: 12px 8px;

display: flex;
align-items: flex-start;
gap: 7px;

box-sizing: border-box;
border-radius: 8px;
}

.junu-delivery-option strong {
font-size: 12px;
line-height: 1.3;
}

.junu-delivery-option small {
display: block;

font-size: 10px;
line-height: 1.4;

margin-top: 4px;
}

.junu-delivery-option input {
margin-top: 3px;
flex-shrink: 0;
}

/* DELIVERY NOTE */
.junu-delivery-note {
font-size: 10px;
line-height: 1.5;

margin-top: 12px;
}

/* =========================================
       SUMMARY
       ========================================= */

.junu-summary {
width: 100%;
margin-top: 18px;
}

.junu-summary-row {
display: flex;
justify-content: space-between;
align-items: flex-start;

gap: 15px;

padding: 9px 0;

font-size: 12px;
line-height: 1.4;
}

.junu-summary-row span:last-child,
.junu-summary-row strong:last-child {
text-align: right;
white-space: nowrap;
}

.junu-summary-total {
display: flex;
justify-content: space-between;

margin-top: 8px;
padding-top: 15px;

border-top: 1px solid #ddd;

font-size: 17px;
}

/* =========================================
       CHECKOUT BUTTON
       ========================================= */

.junu-checkout {
width: 100%;
height: 50px;

margin-top: 18px;

border: none;
border-radius: 8px;

font-size: 15px;
font-weight: 600;

cursor: pointer;
}
}
/* =========================================================
   JUNU CHECKOUT PAGE
   ========================================================= */

.junu-checkout-de {
width: 100%;
padding: 60px 20px;
background: #f7f7f7;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}

.junu-checkout-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;

display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.8fr);
gap: 25px;

align-items: start;
}

/* =========================================================
   LEFT SIDE
   ========================================================= */

.junu-checkout-left {
display: flex;
flex-direction: column;
gap: 20px;
min-width: 0;
}

/* =========================================================
   COMMON CARD
   ========================================================= */

.junu-checkout-card,
.junu-payment-card,
.junu-cart-card,
.junu-summary-card {
width: 100%;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 14px;
padding: 22px;
box-sizing: border-box;
}

/* =========================================================
   CARD HEADING
   ========================================================= */

.junu-card-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}

.junu-heading-left,
.junu-payment-heading,
.junu-right-heading-left {
display: flex;
align-items: center;
gap: 10px;

color: #222;
font-size: 17px;
font-weight: 700;
}

.junu-heading-icon,
.junu-payment-heading-icon,
.junu-right-icon {
width: 32px;
height: 32px;

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

border-radius: 8px;

background: #f8f0d8;
color: #a87900;

font-size: 14px;
}

/* =========================================================
   SHIPPING ADDRESS
   ========================================================= */

.junu-shipping-input {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
}

.junu-shipping-input input {
width: 100%;
height: 48px;

padding: 0 14px;

border: 1px solid #ddd;
border-radius: 8px;

outline: none;

font-size: 14px;
color: #222;

box-sizing: border-box;
}

.junu-shipping-input input:focus {
border-color: #b58a18;
}

.junu-shipping-input button {
width: 48px;
height: 48px;

flex-shrink: 0;

border: 1px solid #ddd;
border-radius: 8px;

background: #fff;
color: #555;

cursor: pointer;
font-size: 18px;
}

.junu-shipping-input button:hover {
background: #f8f0d8;
color: #9b7100;
}

/* =========================================================
   DELIVERY OPTION
   ========================================================= */

.junu-section-title {
font-size: 17px;
font-weight: 700;
margin-bottom: 16px;
color: #222;
}

.junu-delivery-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}

.junu-delivery-option {
position: relative;

min-height: 55px;

display: flex;
align-items: center;
gap: 10px;

padding: 14px;

border: 1px solid #ddd;
border-radius: 10px;

cursor: pointer;

transition: 0.25s ease;

box-sizing: border-box;
}

.junu-delivery-option:hover {
border-color: #b58a18;
}

.junu-delivery-option.active {
border-color: #b58a18;
/* background: #fffaf0; */
}

.junu-delivery-option.disabled {
opacity: 0.5;
cursor: not-allowed;
}

.junu-delivery-option input {
display: none;
}

.junu-radio {
width: 18px;
height: 18px;

flex-shrink: 0;

border: 2px solid #aaa;
border-radius: 50%;

position: relative;
box-sizing: border-box;
}

.junu-delivery-option.active .junu-radio {
border-color: #b58a18;
}

.junu-delivery-option.active .junu-radio::after {
content: "";

position: absolute;
width: 8px;
height: 8px;

top: 50%;
left: 50%;

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

background: #b58a18;
border-radius: 50%;
}

.junu-delivery-name {
font-size: 14px;
font-weight: 600;
color: #333;
}

.junu-delivery-description {
margin: 14px 0 0;

color: #777;

font-size: 12px;
line-height: 1.6;
}

/* =========================================================
   PAYMENT
   ========================================================= */

.junu-payment-card {
padding: 22px;
}

.junu-payment-heading {
margin-bottom: 10px;
}

/* PAYMENT OPTION */

.junu-payment-option {
width: 100%;

min-height: 50px;

display: flex;
align-items: center;

gap: 10px;

padding: 12px 0;

cursor: pointer;

box-sizing: border-box;
}

.junu-payment-option input {
display: none;
}

.junu-payment-radio {
width: 18px;
height: 18px;

flex-shrink: 0;

border: 2px solid #aaa;
border-radius: 50%;

position: relative;
}

.junu-payment-option:has(input:checked) .junu-payment-radio {
border-color: #b58a18;
}

.junu-payment-option:has(input:checked) .junu-payment-radio::after {
content: "";

width: 8px;
height: 8px;

position: absolute;

top: 50%;
left: 50%;

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

background: #b58a18;
border-radius: 50%;
}

.junu-payment-name {
font-size: 14px;
font-weight: 600;
color: #333;
}

/* =========================================================
   CARD BRANDS
   ========================================================= */

.junu-card-brands {
margin-left: auto;

display: flex;
align-items: center;
gap: 7px;
}

.junu-visa,
.junu-amex,
.junu-more {
min-width: 38px;
height: 24px;

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

padding: 0 6px;

border: 1px solid #ddd;
border-radius: 4px;

background: #fff;

font-size: 9px;
font-weight: 700;
}

.junu-mastercard {
width: 38px;
height: 24px;

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

position: relative;

border: 1px solid #ddd;
border-radius: 4px;

background: #fff;
}

.junu-mastercard span {
width: 13px;
height: 13px;

border-radius: 50%;

position: absolute;
}

.junu-mastercard span:first-child {
left: 8px;
background: #e31b23;
}

.junu-mastercard span:last-child {
right: 8px;
background: #f7a800;
}

/* =========================================================
   CREDIT CARD FORM
   ========================================================= */

.junu-credit-wrapper {
padding: 0 14px 15px;

border: 1px solid #e3e3e3;
border-radius: 10px;

background: #fafafa;
}

.junu-credit-wrapper.active {
border-color: #ddd;
}

.junu-credit-header {
padding-bottom: 15px;
}

.junu-credit-form {
padding-top: 5px;
}

.junu-form-group {
width: 100%;
margin-bottom: 15px;
}

.junu-form-group label {
display: block;

margin-bottom: 7px;

color: #444;

font-size: 12px;
font-weight: 600;
}

.junu-form-group input {
width: 100%;
height: 45px;

padding: 0 12px;

border: 1px solid #ddd;
border-radius: 7px;

background: #fff;

outline: none;

font-size: 13px;

box-sizing: border-box;
}

.junu-form-group input:focus {
border-color: #b58a18;
}

/* CARD NUMBER */

.junu-input-icon-wrapper {
position: relative;
}

.junu-input-icon-wrapper input {
padding-left: 38px;
}

.junu-input-small-icon {
position: absolute;

left: 13px;
top: 50%;

transform: translateY(-50%);

color: #999;
}

/* EXPIRY + CVV */

.junu-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}

/* CVV */

.junu-cvv-wrapper {
position: relative;
}

.junu-cvv-wrapper input {
padding-right: 38px;
}

.junu-cvv-wrapper span {
position: absolute;

right: 12px;
top: 50%;

transform: translateY(-50%);

width: 20px;
height: 20px;

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

border-radius: 50%;

background: #eee;
color: #777;

font-size: 11px;
}

/* =========================================================
   CHECKBOXES
   ========================================================= */

.junu-save-info,
.junu-terms {
display: flex;
align-items: flex-start;
gap: 9px;

margin-top: 14px;

color: #666;

font-size: 12px;
line-height: 1.5;

cursor: pointer;
}

.junu-save-info input,
.junu-terms input {
width: 16px;
height: 16px;

flex-shrink: 0;

margin: 2px 0 0;

accent-color: #b58a18;
}

/* =========================================================
   PAY BUTTON
   ========================================================= */

.junu-pay-button {
width: 100%;
height: 52px;

margin-top: 20px;

border: none;
border-radius: 9px;

background: #881b1b;
color: #fff;

font-size: 15px;
font-weight: 700;

cursor: pointer;

transition: 0.25s ease;
}

.junu-pay-button:hover {
background: #7e5d0b;
}

/* =========================================================
   RIGHT SIDE
   ========================================================= */

.junu-checkout-right {
display: flex;
flex-direction: column;
gap: 20px;

min-width: 0;
}

/* =========================================================
   RIGHT HEADINGS
   ========================================================= */

.junu-right-heading {
padding-bottom: 15px;

margin-bottom: 5px;

border-bottom: 1px solid #eee;
}

/* =========================================================
   CART
   ========================================================= */

.junu-cart-item-de {
display: grid;

grid-template-columns: 75px minmax(0, 1fr) auto 85px;

grid-template-areas:
"image product quantity price"
"image product quantity remove";

align-items: center;

gap: 12px;

padding-top: 18px;

box-sizing: border-box;
}

.junu-cart-image {


width: 75px;
height: 85px;

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

background: #f7f7f7;
border-radius: 8px;

overflow: hidden;
}

.junu-cart-image img {
width: 100%;
height: 100%;

object-fit: contain;

display: block;
}

/* PRODUCT */

.junu-cart-product {
grid-area: product;
min-width: 0;
}

.junu-cart-product-name {
color: #222;

font-size: 13px;
font-weight: 700;

line-height: 1.4;
}

.junu-cart-product-info {
margin-top: 5px;

color: #888;

font-size: 12px;
line-height: 1.4;
}

/* QUANTITY */

.junu-quantity-de {
grid-area: quantity;

display: flex;
align-items: center;

border: 1px solid #ddd;
border-radius: 6px;

overflow: hidden;
}

.junu-qty-minus,
.junu-qty-plus {
width: 28px;
height: 30px;

border: none;

background: #f7f7f7;

cursor: pointer;

font-size: 15px;
}

.junu-qty-value {
min-width: 28px;

text-align: center;

font-size: 12px;
}

/* PRICE */

.junu-cart-price {
grid-area: price;

font-size: 13px;
font-weight: 700;

white-space: nowrap;
}

/* REMOVE */

.junu-cart-remove {
grid-area: remove;

width: 28px;
height: 28px;

border: none;

background: transparent;

color: #888;

font-size: 21px;

cursor: pointer;
}

.junu-cart-remove:hover {
color: #b00000;
}

/* =========================================================
   SUMMARY
   ========================================================= */

.junu-summary-row {
display: flex;

justify-content: space-between;
align-items: flex-start;

gap: 20px;

padding: 11px 0;

/* color: #555; */

/* font-size: 13px; */
line-height: 1.5;
}

.junu-summary-row strong {
flex-shrink: 0;

/* color: #222; */

white-space: nowrap;
}

.junu-summary-divider {
width: 100%;
height: 1px;

margin: 8px 0;

background: #e5e5e5;
}

.junu-summary-total {
display: flex;

align-items: center;
justify-content: space-between;

gap: 15px;

padding-top: 12px;

font-size: 18px;
font-weight: 700;
}

.junu-summary-total strong {
color: #9c7410;
}

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

@media (max-width: 950px) {
.junu-checkout-container {
grid-template-columns: 1fr;
}

.junu-checkout-right {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
}
}

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

@media (max-width: 768px) {
.junu-checkout-de {
padding: 25px 12px;
}

.junu-checkout-container {
display: flex;
flex-direction: column;
gap: 16px;
}

.junu-checkout-left,
.junu-checkout-right {
width: 100%;
}

.junu-checkout-right {
display: flex;
flex-direction: column;
}

.junu-checkout-card,
.junu-payment-card,
.junu-cart-card,
.junu-summary-card {
padding: 16px;
border-radius: 12px;
}

/* DELIVERY */

.junu-delivery-options {
grid-template-columns: 1fr 1fr;
}

/* CARD BRANDS */

.junu-card-brands {
margin-left: auto;
gap: 4px;
}

/* CART */

.junu-cart-item-de {
grid-template-columns: 70px minmax(0, 1fr) auto;

grid-template-areas:
"image product price"
"image product remove"
"image quantity remove";

column-gap: 10px;
row-gap: 6px;
}

.junu-cart-image {
width: 70px;
height: 80px;
}

.junu-cart-product-name {
font-size: 12px;
}

.junu-cart-price {
font-size: 12px;
}

/* SUMMARY */

.junu-summary-row {
font-size: 12px;
}
}

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

@media (max-width: 480px) {
.junu-checkout-de {
padding: 18px 9px;
}

.junu-checkout-card,
.junu-payment-card,
.junu-cart-card,
.junu-summary-card {
padding: 14px;
}

.junu-heading-left,
.junu-payment-heading,
.junu-right-heading-left {
font-size: 15px;
}

/* DELIVERY */

.junu-delivery-options {
grid-template-columns: 1fr;
}

/* PAYMENT */

.junu-card-brands {
width: 100%;
margin-left: 27px;
margin-top: 3px;
}

.junu-credit-header {
flex-wrap: wrap;
}

/* FORM */

.junu-form-row {
grid-template-columns: 1fr;
gap: 0;
}

/* CART */

.junu-cart-item-de {
grid-template-columns: 62px minmax(0, 1fr) auto;
gap: 8px;
}

.junu-cart-image {
width: 62px; 
height: 72px;
}

.junu-cart-product-name {
font-size: 11px;
}

.junu-cart-product-info {
font-size: 9px;
}

.junu-cart-price {
font-size: 11px;
}

.junu-qty-minus,
.junu-qty-plus {
width: 25px;
height: 27px;
}

.junu-qty-value {
min-width: 25px;
}

/* SUMMARY */

.junu-summary-row {
font-size: 11px;
}

.junu-summary-total {
font-size: 16px;
}

.junu-pay-button {
height: 48px;
font-size: 14px;
}
}



.nav-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    color: #fff;
    text-decoration: none;

    margin-left: 8px;
}

/* Cart icon */
.nav-cart-link i {
    font-size: 30px;
    line-height: 1;
    color: #fff;

    transition: transform 0.2s ease;
}

.nav-cart-link:hover {
    color: #fff;
}

.nav-cart-link:hover i {
    transform: scale(1.08);
}


/* Cart count */
.nav-cart-link .cart-count {
    position: absolute;

    top: -5px;
    right: -5px;

    min-width: 22px;
    height: 22px;

    padding: 0 5px;

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

    border-radius: 50%;

    background: #f5d36a;
    color: #681015;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    border: none;
}

.register-link{
    text-align:center;
    margin-top:35px;
    font-size:18px;
}

.register-link a{
    color:#881B1B;
    text-decoration:none;
    font-weight:600;
}
.error-msg{
    position:absolute !important;
    right:0 !important;
    bottom:-22px !important;
    font-size:12px !important;
    color:#ff9999 !important;
}


.send-message{
    display:none;
    color:#fff;
    font-weight:bold;
    margin-top:10px;
    font-size:20px;
    font-family:Times New Roman, Times, serif;
}
.privacy-text{
    font-size:15px;
    color:#000;
    font-weight:600;
}
.neon-btn:disabled {
    background: #D4AF37;   
    color: #000;        
    cursor: not-allowed;
    opacity: 0.7;
}
.form-group label{
    margin-top:10px;
}
.add-cart-btn-view{
    display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient( 135deg, #881B1B, #881B1B);
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.product-category{
    color: #9a0015;
  font-size: 22px;
  letter-spacing: 2px;
  font-weight: bold;
}
.rating input {
    display: none;
}
.rating input:checked ~ label {
    color: #f4b400;
}
.review-message{
color: #7c0c0c;
    font-size: 20px;
}

.no-products-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: 70px 20px;
}

.no-products-found p {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #7c0c0c;
}
/* =========================================================
   WALLET HEADER
   ========================================================= */

.wallet-dropdown .dropdown-menu {
    left: 0;
    transform: translateX(0) translateY(10px);
    min-width: 220px;
}

.wallet-dropdown:hover .dropdown-menu {
    transform: translateX(0) translateY(0);
}

.wallet-dropdown.is-active > .dropdown-toggle {
    color: #fff;
}

.wallet-dropdown .dropdown-menu a.is-active {
    background: #f8f3e6;
    color: #881b1b;
    font-weight: 600;
}



/* =========================================================
   MY ACCOUNT
   New button design + Old dropdown design
   ========================================================= */

.account-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10000;
}

.account-dropdown .account-toggle {
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #f8f7f5;
    font-size: 14px;
    font-weight: 600;
    font-family: Georgia, "Times New Roman", serif;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.25s ease;
}

.account-dropdown .account-toggle:hover {
    background: transparent;
    color: #fff;
}

.account-dropdown .account-chevron {
    font-size: 12px;
    transition: transform 0.25s ease;
}

.account-dropdown:hover .account-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   MY ACCOUNT DROPDOWN
   ========================================================= */

.account-dropdown .account-nav-submenu {
    position: absolute;

    /* directly below My Account */
    top: calc(100% + 8px);

    /* ALIGN LEFT EDGE WITH MY ACCOUNT */
    left: 0;
    right: auto;

    width: 275px;
    min-width: 275px;

    margin: 0;
    padding: 0;

    background: #881b1b;
    border: none;
    border-radius: 0;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.20);

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    z-index: 99999;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

/* SHOW DROPDOWN */
.account-dropdown:hover .account-nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* REMOVE DEFAULT LIST STYLING */
.account-dropdown .account-nav-submenu,
.account-dropdown .account-nav-submenu li {
    list-style: none;
}

.account-dropdown .account-nav-submenu li {
    width: 100%;
    margin: 0;
    padding: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.account-dropdown .account-nav-submenu li:last-child {
    border-bottom: none;
}


/* ACCOUNT OPTIONS */
.account-dropdown .account-nav-submenu li a {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 45px;

    padding: 0 22px;

    background: transparent;
    color: #f3d28b;

    border-radius: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;

    text-decoration: none;

    box-sizing: border-box;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;
}


/* OPTION HOVER */
.account-dropdown .account-nav-submenu li a:hover {
    background: #7d171b;
    color: #fff;
    padding-left: 27px;
}


/* LOGOUT FORM */
.account-dropdown .account-nav-submenu li form {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}


/* LOGOUT BUTTON */
.account-dropdown .account-nav-submenu li form button {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 59px;

    padding: 0 22px;
    margin: 0;

    background: transparent;
    color: #f3d28b;

    border: none;
    border-radius: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: 600;

    text-align: left;
    cursor: pointer;

    box-sizing: border-box;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        padding-left 0.2s ease;
}


/* LOGOUT HOVER */
.account-dropdown .account-nav-submenu li form button:hover {
    background: #7d171b;
    color: #fff;
    padding-left: 27px;
}

.account-dropdown .account-nav-submenu li form button:focus {
    outline: none;
}



.spot-price-section{
margin: 150px 0px 50px 0px;
}

.account-page-container{
    max-width:1200px;
    margin:0 auto 70px;
    display:grid;
    grid-template-columns:280px 1fr;
    gap:24px;
}
.account-sidebar{
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    height:max-content;
}

.account-sidebar h3{
    margin:0 0 16px;

}
.account-content{
    background:#fff;
    border-radius:12px;
    padding:24px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.account-content h2{
    margin-top:0;
}

.account-table-wrap{
    overflow-x:auto;
}
.account-table{
    width:100%;
    border-collapse:collapse;
}

.account-table th,
.account-table td{
    padding:12px 10px;
    border-bottom:1px solid #eee;
    text-align:left;
    font-size:14px;
}



.account-table th{
    font-weight:700;
    background:#edeae5;
}


.account-pagination {
    margin-top: 16px;
    width: 100%;
}

.account-pagination nav {
    width: 100%;
}

.account-pagination nav > div {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
}

.account-pagination .pagination {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.account-pagination .pagination li {
    display: inline-flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.account-pagination .pagination li::before,
.account-pagination .pagination li::after {
    display: none !important;
    content: none !important;
}

.account-pagination .page-link {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 6px 10px;
    font-size: 14px;
    line-height: 1.2;
    color: #881B1B;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    text-decoration: none !important;
}

.account-pagination .page-item.active .page-link {
    background: #881B1B;
    border-color: #881B1B;
    color: #fff;
}

.account-pagination .page-link:hover {
    color: #881B1B;
    background: #faf8ff;
    border-color: #881B1B;
}

.account-pagination .page-item.disabled .page-link {
    color: #999;
    background: #fff;
    border-color: #e5e5e5;
    cursor: default;
}

.account-pagination svg {
    width: 16px;
    height: 16px;
}

/* -------------7/9/26------------------------ */

@media (max-width: 991px){


    .account-page-container{
        grid-template-columns:1fr;
    }
}
.account-menu-list{
    list-style:none;
    margin:0;
    padding:0;
}
.account-menu-list li{
    border-bottom:1px solid #eee;
}

.account-menu-list li:last-child{
    border-bottom:none;
}

.account-menu-list a,
.account-menu-list button{
    display:block;
    width:100%;
    padding:12px 8px;
    color:#333;
    text-decoration:none;
    background:transparent;
    border:none;
    text-align:left;
    cursor:pointer;
    font-size:15px;
}

.account-menu-list li.active a,
.account-menu-list a:hover,
.account-menu-list button:hover{
    color:#881B1B;
    font-weight:600;
}
.account-link{
     color:#d9a24b;
     font-size:15px;
     font-weight:600;
     text-decoration:none;
}
.confirm{
    height:50px;
    padding:0 30px;
    border:none;
    border-radius:6px;
    background:#881B1B;
    color:#fff;
    cursor:pointer;
}
@media(max-width:768px){
    .checkout-container{
        grid-template-columns:1fr;
    }

    .row{
        flex-direction:column;
    }

    .buttons{
        flex-direction:column;
    }

    .confirm,
    .back{
        width:100%;
    }
}
.payment-methods{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}
.method{
    width:70px;
    height:45px;
    border:1px solid #ddd;
    background:#fff;
    border-radius:8px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    flex-shrink:0;
    transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.method:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.method.active{
    border:2px solid #7b68ee;
    background:#faf8ff;
    box-shadow:0 0 0 1px rgba(123,104,238,.25);
}

.method img{
    width:50px;
    height:40px;
    object-fit:contain;
    pointer-events:none;
}
/* -------------7/9/26 ------------------------ */

/* -------------8/9/26 blog------------------------ */
/* blog 05-9-2026*/
/* =========================================
   RESET
========================================= */

.news-page {
  --dark: #111111;
  --light: #f6f5f2;
  --white: #ffffff;
  --gray: #777777;
  --border: rgba(17, 17, 17, 0.14);

  background: var(--light);
  color: var(--dark);
  overflow: hidden;
}

.news-page *,
.news-page *::before,
.news-page *::after {
  box-sizing: border-box;
}

.news-page a {
  color: inherit;
  text-decoration: none;
}

.news-container {
  width: min(1280px, calc(100% - 80px));
  margin: auto;
}

/* =========================================
   HERO
========================================= */

.news-hero {
  min-height: 65vh;
  display: flex;
  align-items: flex-end;
  padding: 200px 0 90px;

  background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.55)
    ),
    url("../img/blog-new-banner.jpg") center / cover no-repeat;
  background-size: cover;
  color: #fff;
}

.hero-content-b {
  max-width: 800px;
}

.eyebrow {
  display: block;
  margin: 36px 20px 0px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.hero-content-b h1 {
  margin: 0;

  font-size: clamp(70px, 11vw, 160px);
  line-height: 0.82;
  font-weight: 400;
  letter-spacing: -7px;
}

.hero-content-b p {
  max-width: 520px;
  margin: 20px 20px 0px;

  font-size: 18px;
  line-height: 1.7;
  opacity: 0.85;
}

/* =========================================
   NEWS SECTION
========================================= */

.news-section {
  padding: 70px 0;
}

.news-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;

  margin-bottom: 75px;
}

/* TABS */

.news-tabs {
  display: flex;
  gap: 35px;
}

.tab {
  position: relative;

  padding: 8px 0;

  border: 0;
  background: transparent;

  font-size: 19px;
  cursor: pointer;

  color: #888;

  transition: color 0.3s ease;
}

.tab::after {
  content: "";

  position: absolute;
  left: 0;
  bottom: 0;

  width: 0;
  height: 1px;

  background: #111;

  transition: width 0.35s ease;
}

.tab:hover,
.tab.active {
  color: #111;
}

.tab.active::after {
  width: 100%;
}

/* SEARCH */

/* .news-search {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.news-search input {
  width: 250px;
  padding: 10px 10px;
  border: 0;
  outline: none;
  background: #edeae3;
  font-size: 19px;
}

.news-search button {
  border: 0;
  background: #881b1b;
  padding: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  color:#fff;
} */


.news-search {
    width: 500px;
    display: flex;
    justify-content: flex-start;
    margin: 25px 0 35px;
}

.news-search form {
    width: 100%;
    max-width: 620px;
}

.search-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    background: #f3f0ea;
    border: 1px solid #e4dfd5;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.search-wrapper:focus-within {
    background: #fff;
    border-color: #881b1b;
    box-shadow: 0 6px 22px rgba(136, 27, 27, 0.12);
}

/* Search icon */
.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 17px;
    color: #8b857c;
}

.search-wrapper:focus-within .search-icon {
    color: #881b1b;
}

/* Input */
.news-search input {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 14px;
    border: 0;
    outline: none;
    background: transparent;
    color: #333;
    font-size: 17px;
    font-family: inherit;
}

.news-search input::placeholder {
    color: #8d8982;
    opacity: 1;
}

/* Button */
.news-search button {
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 0 22px;
    border: 0;

    background: #881b1b;
    color: #fff;

    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.3px;

    cursor: pointer;
    transition: all 0.3s ease;
}

.news-search button:hover {
    background: #6f1414;
}

.button-arrow {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.news-search button:hover .button-arrow {
    transform: translateX(4px);
}

/* Mobile */
@media (max-width: 576px) {
    .news-search {
        margin: 20px 0 30px;
    }

    .news-search form {
        max-width: 100%;
    }

    .search-wrapper {
        border-radius: 8px;
    }

    .news-search input {
        height: 48px;
        font-size: 15px;
        padding: 0 10px;
    }

    .news-search button {
        height: 48px;
        padding: 0 16px;
        font-size: 11px;
    }

    .button-arrow {
        display: none;
    }

    .search-icon {
        padding-left: 13px;
    }
}





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

.news-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 90px 45px;
}

/* CARD */

.news-card {
  min-width: 0;

  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.news-card:hover {
  transform: translateY(-10px);
}

/* IMAGE */

.news-image {
  position: relative;

  display: block;

  width: 100%;
  /* height: 560px; */

  overflow: hidden;

  /* background: #ddd; */
}

.news-image img {
  width: 100%;
  height: 100%;

  /* object-fit: cover; */

  transform: scale(1);

  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-card:hover .news-image img {
  transform: scale(1.08);
}

/* IMAGE OVERLAY */

.image-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4));

  opacity: 0;

  transition: opacity 0.6s ease;
}

.news-card:hover .image-overlay {
  opacity: 1;
}

/* ARROW */

.card-arrow {
  position: absolute;

  right: 25px;
  bottom: 25px;

  width: 55px;
  height: 55px;

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

  border-radius: 50%;

  background: #fff;

  color: #111;

  font-size: 20px;

  transform: translateY(20px);

  opacity: 0;

  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-card:hover .card-arrow {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   CARD CONTENT
========================================= */

.news-info {
  padding: 28px 0 0;
}

.news-category {
  display: inline-block;

  margin-bottom: 10px;

  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
}

.news-date {
  display: block;

  margin-bottom: 18px;

  color: var(--gray);

  font-size: 12px;
}

.news-info h2 {
  margin: 0;

  max-width: 700px;

  font-size: clamp(30px, 3vw, 28px);
  line-height: 1.05;
  font-weight: 400;

  letter-spacing: -1.5px;
}

.news-info p {
  max-width: 520px;

  margin: 22px 0;

  color: #777;

  font-size: 15px;
  line-height: 1.7;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 15px;

  padding-bottom: 7px;

  border-bottom: 1px solid #111;

  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;

  transition: gap 0.3s ease;
}

.read-more span {
  font-size: 18px;
}

.read-more:hover {
  gap: 25px;
}

/* =========================================
   NEWSLETTER
========================================= */

.newsletter-section {
  padding: 130px 0;

  background: #edeae3;
  color: #111;
}

.newsletter-container {
  width: min(1280px, calc(100% - 80px));
  margin: auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 100px;

  align-items: end;
}

.newsletter-content h2 {
  max-width: 650px;

  margin: 0;

  font-size: clamp(50px, 6vw, 90px);
  line-height: 0.95;
  font-weight: 400;

  letter-spacing: -4px;
}

.newsletter-content h2 em {
  font-family: Georgia, serif;
  font-weight: 400;
}

.newsletter-content p {
  max-width: 500px;

  margin-top: 30px;

  /* color: rgba(255,255,255,.65); */

  line-height: 1.7;
}

/* FORM */

.input-group {
  display: flex;

  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.input-group input {
  flex: 1;
 
  padding: 20px 20px;
 
  border: 0;
  outline: 0;
 
  /* background: transparent; */
 
  color: #e51b1b;
 
  font-size: 16px;
  margin-bottom: 10px;
  border-radius: 20px;
}

.input-group input::placeholder {
  color: rgba(15, 5, 5, 0.55);
}

.input-group button {
  border: 0;
  background: #710606;
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  padding: 10px;
}

.input-group button span {
  margin-left: 12px;

  font-size: 18px;

  transition: margin 0.3s ease;
}

.input-group button:hover span {
  margin-left: 20px;
}

/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {
  /* opacity: 0; */

  transform: translateY(70px) scale(0.97);

  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.show {
  opacity: 1;

  transform: translateY(0) scale(1);
}

/* =========================================
   CARD STAGGER
========================================= */

.news-card:nth-child(1) {
  transition-delay: 0.05s;
}

.news-card:nth-child(2) {
  transition-delay: 0.15s;
}

.news-card:nth-child(3) {
  transition-delay: 0.25s;
}

.news-card:nth-child(4) {
  transition-delay: 0.35s;
}

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

@media (max-width: 900px) {
  .news-container,
  .newsletter-container {
    width: min(100% - 40px, 700px);
  }

  .news-hero {
    min-height: 55vh;
  }

  .news-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .news-grid {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .news-image {
    height: 500px;
  }

  .newsletter-container {
    grid-template-columns: 1fr;

    gap: 60px;
  }
}

@media (max-width: 600px) {
  .news-hero {
    min-height: 60vh;
    padding-bottom: 60px;
  }

  .hero-content-b h1 {
    letter-spacing: -4px;
  }

  .news-section {
    padding: 80px 0;
  }

  .news-tabs {
    gap: 22px;
  }

  .news-search {
    width: 100%;
  }

  .news-search input {
    width: 100%;
  }

  .news-image {
    height: 400px;
  }

  .news-info h2 {
    font-size: 34px;
  }

  .newsletter-section {
    padding: 90px 0;
  }

  .newsletter-content h2 {
    font-size: 52px;
    letter-spacing: -2px;
  }
}
/* =========================================
   NEWS CAROUSEL
========================================= */

.news-carousel {
  position: relative;
}

/* VIEWPORT */

.news-carousel-viewport {
  width: 100%;

  overflow: hidden;
}

/* SLIDING TRACK */

.news-grid {
  display: flex;

  gap: 45px;

  width: 100%;

  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;
}

/* CARD */

.news-card {
  flex: 0 0 calc(50% - 22.5px);

  min-width: 0;

  opacity: 1;

  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

/* =========================================
   CAROUSEL ARROWS
========================================= */

.carousel-arrow {
  position: absolute;

  top: -60px;

  z-index: 20;

  width: 52px;
  height: 52px;

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

  border: 1px solid rgba(17, 17, 17, 0.25);
  border-radius: 50%;

  background: transparent;
  color: #111;

  font-size: 20px;
  line-height: 1;

  cursor: pointer;

  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease,
    opacity 0.35s ease;
}

/* Previous arrow */

.carousel-prev {
  right: 65px;
  left: auto;
}

/* Next arrow */

.carousel-next {
  right: 0;
}

/* Hover */

.carousel-arrow:hover {
  background: #111;
  color: #fff;

  transform: translateY(-3px);
}

/* DISABLED */

.carousel-arrow:disabled {
  opacity: 0.3;

  cursor: not-allowed;
}

.carousel-arrow:disabled:hover {
  background: #fff;

  color: #111;

  transform: translateY(-50%);
}

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

@media (max-width: 900px) {
  .news-card {
    flex: 0 0 100%;
  }

  .news-grid {
    gap: 30px;
  }

  .carousel-prev {
    left: 15px;
  }

  .carousel-next {
    right: 15px;
  }

  .carousel-arrow {
    width: 50px;
    height: 50px;

    background: rgba(255, 255, 255, 0.9);
  }
}

@media (max-width: 600px) {
  .news-card {
    flex: 0 0 100%;
  }

  .news-image {
    height: 400px;
  }

  .carousel-prev {
    left: 10px;
  }

  .carousel-next {
    right: 10px;
  }
}
/* =========================================
   RESET
========================================= */

/* =========================================
   ARTICLE HERO
========================================= */

.article-hero {
  position: relative;

  min-height: 620px;

  display: flex;
  align-items: center;

  color: #fff;
}

.hero-overlay {
  position: absolute;
  inset: 0;

  background: #fbe4e4;
}

.article-hero .container {
  position: relative;
  z-index: 2;
}

/* =========================================
   BREADCRUMB
========================================= */

.breadcrumb {
  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 13px;

  margin-bottom: 45px;

  opacity: 0.85;
}

/* =========================================
   ARTICLE TITLE
========================================= */

.article-heading {
  max-width: 900px;
}

.article-category {
  display: block;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 20px;
}

.article-heading h1 {
  font-size: clamp(52px, 7vw, 65px);
color:#000;
  line-height: 0.95;

  font-weight: 400;

  letter-spacing: -3px;
    margin-top: 100px;
}

/* =========================================
   ARTICLE CONTENT
========================================= */

.article-page {
  padding: 100px 0 80px;
}

.article-content {
  /* max-width: 1100px; */

  margin: auto;
}

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

.article-intro {
  /* max-width: 850px; */

  margin: 0 auto 80px;

  /* text-align: center; */
}

.article-intro p {
  font-size: 18px;

  line-height: 1.9;

  color: #555;

  margin-bottom: 22px;
}

/* =========================================
   IMAGE GALLERY
========================================= */

.article-gallery {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 15px;
}

.gallery-item {
  overflow: hidden;

  cursor: pointer;
}

.gallery-item img {
  width: 100%;

  height: 320px;

  object-fit: cover;

  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gallery-item:hover img {
  transform: scale(1.06);
}

.gallery-large {
  grid-column: span 2;

  grid-row: span 2;
}

.gallery-large img {
  height: 655px;
}

/* =========================================
   SHARE
========================================= */

.article-share {
  /* display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px; */

  /* padding:
    65px 0 40px; */

  /* border-bottom:
    1px solid #ddd; */
}

.article-share > span {
  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 2px;
}

.share-links {
  display: flex;

  gap: 10px;
}

.share-links a {
  width: 38px;
  height: 38px;

  border: 1px solid #ddd;

  border-radius: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 12px;
color: #d60e0e;
  transition: 0.3s ease;
}

.share-links a:hover {
  background: #111;

  color: #fff;

  border-color: #111;
}

/* =========================================
   BACK TO NEWS
========================================= */

.back-news {
  text-align: center;

  padding-top: 45px;
}

.back-news a {
  display: inline-flex;

  gap: 12px;

  align-items: center;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 1.5px;
}

.back-news span {
  font-size: 20px;
}

/* =========================================
   RELATED ARTICLE
========================================= */

.related-section {
  padding: 100px 0;

  background: #f5f4f0;
}

.related-card-1 {
  display: grid;

  grid-template-columns: 1fr 1fr;

  background: #fff;
}

.related-image {
  /* min-height: 450px; */

  overflow: hidden;
}

.related-image img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.7s ease;
}

.related-card-1:hover .related-image img {
  transform: scale(1.04);
}

.related-content {
  padding: 70px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.related-date {
  font-size: 12px;

  color: #888;

  margin-bottom: 20px;
}

.related-content h3 {
  font-family: "Playfair Display", serif;

  font-size: 42px;

  line-height: 1.1;

  font-weight: 400;

  margin-bottom: 25px;
}

.related-content p {
  color: #666;

  line-height: 1.8;

  margin-bottom: 30px;
}

.read-more {
  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 1.5px;
}

/* =========================================
   NEWSLETTER
========================================= */

.newsletter {
  padding: 100px 0;

  background: #111;

  color: #fff;
}

.newsletter-inner {
  display: grid;

  grid-template-columns: 350px 1fr;

  gap: 80px;

  align-items: start;
}

.newsletter-title span {
  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 2px;

  opacity: 0.6;
}

.newsletter-title h2 {
  font-family: "Playfair Display", serif;

  font-size: 46px;

  font-weight: 400;

  line-height: 1.1;

  margin-top: 15px;
}

/* =========================================
   NEWSLETTER FORM
========================================= */

.newsletter-form {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 15px;
}

.newsletter-form-blog.input-group input,
.input-group select {
  width: 100%;

  padding: 17px 0;

  border: 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.35);

  background: transparent;

  color: #fff;

  outline: none;
}

.input-group input::placeholder {
  color: rgba(161, 18, 18, 0.6);
}

.input-group select {
  color: rgba(255, 255, 255, 0.7);
}

.input-group select option {
  color: #111;
}

.newsletter-form-button {
  width: max-content;
 
  padding: 16px 35px;
 
  background: #780707;
  color: #fff;
 
  border: 1px solid #fff;
 
  cursor: pointer;
 
  text-transform: uppercase;
 
  letter-spacing: 1px;
 
  transition: 0.3s ease;
  border-radius: 20px;
}

.newsletter-form button:hover {
  background: transparent;

  color: #fff;
}

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

@media (max-width: 768px) {
  .container {
    width: min(calc(100% - 40px), 600px);
  }

  .article-hero {
    min-height: 520px;
  }

  .article-heading h1 {
    font-size: 52px;

    letter-spacing: -2px;
  }

  .article-page {
    padding: 70px 0;
  }

  .article-intro {
    margin-bottom: 50px;
  }

  .article-intro p {
    font-size: 16px;
  }

  .article-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .gallery-large {
    grid-column: span 2;

    grid-row: auto;
  }

  .gallery-large img,
  .gallery-item img {
    height: 260px;
  }

  .related-card-1 {
    grid-template-columns: 1fr;
  }

  .related-image {
    min-height: 320px;
  }

  .related-content {
    padding: 45px 30px;
  }

  .related-content h3 {
    font-size: 34px;
  }

  .newsletter-inner {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .newsletter-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .article-heading h1 {
    font-size: 43px;
  }

  .article-gallery {
    grid-template-columns: 1fr;
  }

  .gallery-large {
    grid-column: auto;
  }

  .gallery-large img,
  .gallery-item img {
    height: 300px;
  }
}
/* =========================================
   RELATED ARTICLES - 3 COLUMN GRID
========================================= */

.related-section {
  padding: 100px 0;
  background: #f5f4f0;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* =========================================
   RELATED CARD
========================================= */

.related-card-1 {
  background: #fff;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  height: 100%;
}

/* =========================================
   IMAGE
========================================= */

.related-image {
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.related-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform 0.7s ease;
}

.related-card-1:hover .related-image img {
  transform: scale(1.06);
}

/* =========================================
   CONTENT
========================================= */

.related-content {
  padding: 35px 30px 40px;

  display: flex;
  flex-direction: column;

  flex: 1;
}

.related-date {
  display: block;

  font-size: 12px;
  color: #888;

  margin-bottom: 18px;
}

.related-content h3 {
  font-family: "Playfair Display", serif;

  font-size: 30px;
  line-height: 1.15;

  font-weight: 400;

  margin-bottom: 20px;
}

.related-content p {
  font-size: 14px;

  color: #666;

  line-height: 1.8;

  margin-bottom: 25px;
}

/* =========================================
   READ MORE
========================================= */

.read-more {
  margin-top: auto;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s ease;
  color:#000;
  font-weight: 600;
}

.read-more:hover {
  opacity: 0.55;
}

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

@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 600px) {
  .related-section {
    padding: 70px 0;
  }

  .related-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .related-image {
    height: 280px;
  }

  .related-content {
    padding: 30px 25px 35px;
  }

  .related-content h3 {
    font-size: 28px;
  }
}
/* =========================================
   SMOOTH PAGE SCROLL
========================================= */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

/* =========================================
   SECTION FLOW
========================================= */

.article-hero,
.article-page,
.related-section,
.newsletter {
  position: relative;
  overflow: hidden;
}

/* =========================================
   IMAGE MOVEMENT
========================================= */

.article-hero {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* =========================================
   GALLERY IMAGE
========================================= */

.gallery-item {
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* =========================================
   RELATED IMAGE
========================================= */

.related-image {
  overflow: hidden;
}

.related-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card:hover .related-image img {
  transform: scale(1.05);
}

/* =========================================
   SMOOTH SECTION SPACING
========================================= */

.related-section {
  padding-top: 120px;
  padding-bottom: 120px;
}

.newsletter {
  padding-top: 120px;
  padding-bottom: 120px;
}

/* =========================================
   REMOVE BROWSER JUMP
========================================= */

* {
  scroll-margin-top: 0;
}

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

@media (max-width: 768px) {
  .article-hero {
    background-attachment: scroll;
  }
}


.savings-section {
    width: 100%;
    padding: 80px 20px;
    background: #faeaea;
    box-sizing: border-box;
}

.savings-wrapper {
    max-width: 1150px;
    margin: auto;
}


/* =====================================
   HEADING
===================================== */

.savings-title {
    text-align: center;
    margin-bottom: 55px;
}

.savings-title span {
    display: inline-block;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 4px;

    color: #991b1b;

    margin-bottom: 12px;
}

.savings-title h1 {
    margin: 0;

    font-size: 52px;
    line-height: 1.1;
    font-weight: 800;

    color: #991b1b;
}

.savings-title p {
    margin: 10px 0 0;

    font-size: 25px;
    font-weight: 600;

    color: #991b1b;
}


/* =====================================
   PRODUCT LIST
===================================== */

.savings-list {
    display: flex;
    /* flex-direction: column; */
    gap: 28px;
}


/* =====================================
   PRODUCT ITEM
===================================== */

.savings-item {
    position: relative;

    min-height: 315px;

    display: grid;
    grid-template-columns: 58% 42%;

    background: #ffffff;

    border-radius: 28px;

    overflow: hidden;

    border: 1px solid #dfc8a6;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.savings-item:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.12);
}


/* =====================================
   IMAGE AREA
===================================== */

.product-images {
    position: relative;

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

    gap: 15px;

    padding: 35px;

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #f8f5ed 70%,
            #eee8dc 100%
        );
}


/* Decorative circle */

.product-images::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    border: 1px solid #dfc8a6;

    opacity: 0.7;
}


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

.image-card {
    position: relative;
    z-index: 2;

    width: 145px;
    height: 220px;

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

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid #ddd;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);

    overflow: hidden;

    transition: transform 0.4s ease;
}



.savings-item:hover .image-card:first-child {
    transform:
        rotate(-5deg)
        translateY(-6px);
}

.savings-item:hover .image-card:last-child {
    transform:
        rotate(5deg)
        translateY(-6px);
}

.image-card img {
    width: 90%;
    height: 90%;

    object-fit: contain;

    transition: transform 0.4s ease;
}

.image-card:hover img {
    transform: scale(1.08);
}


/* =====================================
   CONTENT
===================================== */

.product-content {
    position: relative;

    padding: 30px 25px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Number */

.product-number {
    position: absolute;

    top: 25px;
    right: 35px;

    font-size: 48px;
    font-weight: 800;

    color: #eee8dc;
}


/* Product title */

.product-content h2 {
    position: relative;
    z-index: 2;

    margin: 0 0 8px;

    font-size: 29px;
    font-weight: 750;

    color: #171717;
}


/* Price */

.price {
    font-size: 25px;
    font-weight: 600;

    color: #991b1b;

    margin-bottom: 15px;
}


/* Description */

.product-description {
    max-width: 400px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #686868;
}


/* =====================================
   LINE
===================================== */

.product-line {
    width: 100%;
    height: 1px;

    background: #e5ddd0;

    margin: 22px 0;
}


/* =====================================
   BOTTOM
===================================== */

.product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}


/* Purity */

.purity {
    font-size: 13px;
    font-weight: 600;

    color: #777;

    letter-spacing: 0.5px;
}


/* =====================================
   BUTTON
===================================== */

.cart-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-width: 155px;
    height: 48px;

    padding: 0 22px;

    border: none;
    border-radius: 10px;

    background: #991b1b;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.cart-button span {
    font-size: 20px;

    transition:
        transform 0.3s ease;
}

.cart-button:hover {
    background: #7d1515;

    transform: translateY(-2px);
}

.cart-button:hover span {
    transform: translateX(5px);
}


/* =====================================
   GOLD CARD
===================================== */

.gold-item {
    border-left: 5px solid #d9ad45;
}


/* =====================================
   SILVER CARD
===================================== */

.silver-item {
    border-left: 5px solid #aaa;
}


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

@media (max-width: 900px) {

    .savings-section {
        padding: 60px 20px;
    }

    .savings-title h1 {
        font-size: 42px;
    }

    .savings-title p {
        font-size: 21px;
    }

    .savings-item {
        grid-template-columns: 45% 55%;
    }

    .product-images {
        padding: 25px 15px;
    }

    .image-card {
        width: 125px;
        height: 200px;
    }

    .product-content {
        padding: 35px 30px;
    }

    .product-content h2 {
        font-size: 25px;
    }

}


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

@media (max-width: 700px) {

    .savings-section {
        padding: 50px 15px;
    }

    .savings-title {
        margin-bottom: 35px;
    }

    .savings-title span {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .savings-title h1 {
        font-size: 34px;
    }

    .savings-title p {
        font-size: 20px;
        line-height: 1.4;
    }


    .savings-item {
        grid-template-columns: 1fr;

        min-height: auto;
    }


    .product-images {
        min-height: 270px;

        padding: 25px;
    }


    .image-card {
        width: 125px;
        height: 200px;
    }


    .product-content {
        padding: 30px 25px;
    }


    .product-number {
        top: 20px;
        right: 25px;

        font-size: 38px;
    }


    .product-content h2 {
        font-size: 24px;
    }


    .product-bottom {
        align-items: stretch;
        flex-direction: column;
    }


    .cart-button {
        width: 100%;
    }

}


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

@media (max-width: 430px) {

    .savings-title h1 {
        font-size: 29px;
    }

    .savings-title p {
        font-size: 18px;
    }

    .product-images {
        gap: 8px;
    }

    .image-card {
        width: 110px;
        height: 175px;
    }

    .product-content {
        padding: 25px 20px;
    }

}

.blogpost-text{
color:#000;
}
/* -------------8/9/26 blog------------------------ */

/* ================================
   Sell Back Modal
================================ */

.wallet-sellback-modal .modal-dialog {
    max-width: 1000px;
    width: calc(100% - 30px);
}

.wallet-sellback-modal .modal-content {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* Header */
.wallet-sellback-modal .modal-header {
    min-height: 76px;
    padding: 18px 22px;
    background: linear-gradient(90deg, #d20a2e, #b40000);
    border: 0;
}

.wallet-sellback-modal .modal-title {
    margin: 0;
    color: #ffd83d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
}

.wallet-sellback-modal .modal-header {
    position: relative;
    padding-right: 64px;
}

.wallet-sellback-modal .btn-close {
    position: absolute;
    top: 14px;
    right: 16px;
    display: grid;
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent !important;
    color: #fff;
    cursor: pointer;
    filter: none;
    opacity: 1;
}

.wallet-sellback-modal .btn-close::before {
    content: "×";
    font-size: 32px;
    font-weight: 300;
    line-height: 1;
}

.wallet-sellback-modal .btn-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
}


/* ================================
   Modal Body
================================ */

.wallet-sellback-modal .modal-body {
    padding: 21px 20px 20px;
}


/* ================================
   Steps
================================ */

.wallet-sellback-steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 30px;
}

.wallet-sellback-step {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;
    background: #f1f2f4;

    color: #626b7a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.wallet-sellback-step.active {
    background: #fde5e9;
    color: #c90024;
}


/* ================================
   Step Panels
================================ */

.wallet-sellback-panel {
    display: none;
}

.wallet-sellback-panel.active {
    display: block;
}


/* ================================
   Form Grid
================================ */

.wallet-sellback-panel .row {
    /* --bs-gutter-x: 20px;
    --bs-gutter-y: 26px; */
     display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.wallet-sellback-panel .col-md-6 {
   
    flex: 0 0 48%;
}

.wallet-sellback-panel .col-md-12 {
  flex: 0 0 100%;
}
.wallet-sellback-panel .form-group {
  margin-bottom: 22px;
}

/* Labels */

.wallet-sellback-panel label {
    display: block;
    margin-bottom: 6px;

    color: #850018;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 600;
}


/* Inputs */

.wallet-sellback-panel .form-control {
    width: 100%;
    height: 55px;

    padding: 12px 15px;

    border: 1px solid #d9dde4;
    border-radius: 9px;

    background: #fff;

    color: #333;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;

    box-shadow: none;
}

.wallet-sellback-panel .form-control:focus {
    border-color: #c90024;
    box-shadow: 0 0 0 2px rgba(201, 0, 36, 0.08);
}

.wallet-sellback-panel .form-control::placeholder {
    color: #555;
    opacity: 1;
}


/* ================================
   Actions
================================ */

.wallet-sellback-actions {
    display: flex;
    align-items: center;
    /* justify-content: space-between; */

    margin-top: 22px;
    padding: 0 15px;
    justify-content: flex-end;
  gap: 15px;
}

.wallet-sellback-actions .btn {
    min-width: 133px;
    height: 55px;

    border-radius: 30px;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 500;
}


/* Cancel */

.wallet-sellback-actions .btn-label-secondary {
    min-width: auto;
    padding: 0 15px;

    border: 0;
    background: transparent;

    color: #222;
}


/* Continue / Submit */

.wallet-sellback-actions .btn-primary {
    border: 0;
    background: linear-gradient(90deg, #d20a2e, #ef3434);
    color: #fff;
}

.wallet-sellback-actions .btn-primary:hover {
    background: linear-gradient(90deg, #bd0828, #df2929);
}
.wallet-sellback-actions .btn-default {
    border: 0;
    background: linear-gradient(90deg, #555555, #aaaaaa);
    color: #fff;
}

.wallet-sellback-actions .btn-default:hover {
    background: linear-gradient(90deg, #555555, #aaaaaa);
}


/* ================================
   Step 2
================================ */

.sellback-amount {
    margin-top: 7px;
}

.sellback-estimate {
    margin-top: 12px;
    padding: 12px 15px;

    border-radius: 8px;
    background: #f7f7f7;

    color: #555;
}

.wallet-sellback-note {
    color: #6b7280;
    font-size: 14px;
}


/* ================================
   Mobile
================================ */

@media (max-width: 767px) {

    .wallet-sellback-modal .modal-dialog {
        width: calc(100% - 20px);
        margin: 10px auto;
    }

    .wallet-sellback-modal .modal-title {
        font-size: 21px;
    }

    .wallet-sellback-steps {
        grid-template-columns: 1fr;
    }

    .wallet-sellback-panel .col-md-6 {
        width: 100%;
    }

    .wallet-sellback-actions {
        padding: 0;
    }

    .wallet-sellback-actions .btn-primary {
        min-width: 120px;
    }
}
.wallet-sellback-modal {
    display: none;
}

.wallet-sellback-modal.show {
    display: block;
}

#sellBackModal {
    display: none;
}

#sellBackModal.show {
    display: block;
}

.wallet-sellback-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.55);
}

.wallet-sellback-modal.show {
    display: flex !important;
}

.wallet-sellback-modal .modal-dialog {
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.wallet-sellback-modal .modal-content {
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3);
}
.checkout-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
    margin-bottom: 70px;
}
.checkout-left{
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.checkout-right{
    background:#fae2e2ff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    height: max-content;
}
.payment-details-panel{
    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:16px;
    margin-bottom:20px;
    background:#fafafa;
}
.bank-transfer-instructions ol{
    line-height:1.45;
}
.buttons{
    display:flex;
    gap:15px;
    margin-top:15px;
}
.wallet-plan-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.wallet-plan-actions .btn-primary-plan,
.wallet-plan-actions .btn-outline-plan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    margin: 0;
    white-space: nowrap;
}

.wallet-plan-actions .btn-primary-plan {
    flex: 1.35;
}

.wallet-plan-actions .btn-outline-plan {
    flex: 1;
}

@media (max-width: 480px) {
    .wallet-plan-actions {
        flex-wrap: wrap;
    }

    .wallet-plan-actions .btn-primary-plan,
    .wallet-plan-actions .btn-outline-plan {
        flex: 1 1 100%;
    }
}

.plan-submenu,
.plan-submenu > li {
    list-style: none !important;
}

.plan-submenu {
    margin: 0;
    padding: 0;
}

.plan-submenu > li {
    margin-left: 24px; /* keeps the submenu shifted right */
}

.plan-submenu > li::marker {
    content: "";
}


/* =========================
   BRAND POPUP
========================= */
 
.brand-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
 
    display: flex;
    align-items: center;
    justify-content: center;
 
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
 
    transition: all 0.3s ease;
}
 
.brand-popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
 
/* Overlay */
 
.brand-popup-overlay {
    position: absolute;
    inset: 0;
 
    background: rgba(0, 0, 0, 0.7);
 
    backdrop-filter: blur(5px);
}
 
 
/* Popup Box */
 
.brand-popup-content {
    position: relative;
    z-index: 2;
 
    width: min(700px, 90%);
    max-height: 85vh;
 
    overflow-y: auto;
 
    background: #fff;
 
    padding: 40px;
 
    border-radius: 20px;
 
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
 
    transform: translateY(30px) scale(0.95);
 
    transition: all 0.3s ease;
}
 
.brand-popup.active .brand-popup-content {
    transform: translateY(0) scale(1);
}
 
 
/* Close Button */
 
.brand-popup-close {
    position: absolute;
 
    top: 10px;
    right: 18px;
 
    width: 38px;
    height: 38px;
 
    border: none;
    border-radius: 50%;
 
    background: #881B1B;
    color: #fff;
 
    font-size: 28px;
    line-height: 1;
 
    cursor: pointer;
 
    transition: 0.3s ease;
}
 
.brand-popup-close:hover {
    background: #022D5A;
    transform: rotate(90deg);
}
 
 
/* Category */
 
.brand-popup-category {
    display: inline-block;
 
    padding: 7px 16px;
 
    margin-bottom: 15px;
 
    border-radius: 30px;
 
    background: #881B1B;
    color: #fff;
 
    font-size: 13px;
    font-weight: 600;
}
 
 
/* Logo */
 
.brand-popup-logo {
    width: 110px;
    height: 110px;
 
    margin: 10px auto 20px;
 
    display: flex;
    align-items: center;
    justify-content: center;
}
 
.brand-popup-logo img {
    max-width: 100%;
    max-height: 100%;
 
    object-fit: contain;
}
 
 
/* Brand Name */
 
.brand-popup-content h2 {
    margin: 0 0 20px;
 
    text-align: center;
 
    color: #881B1B;
 
    font-size: 28px;
    font-weight: 700;
}
 
 
/* Description */
 
.brand-popup-description {
    color: #333;
 
    font-size: 16px;
    line-height: 1.8;
 
    text-align: left;
}
 
 
/* Mobile */
 
@media (max-width: 576px) {
 
    .brand-popup-content {
        width: 92%;
        padding: 30px 22px;
 
        max-height: 88vh;
 
        border-radius: 15px;
    }
 
    .brand-popup-content h2 {
        font-size: 22px;
    }
 
    .brand-popup-description {
        font-size: 14px;
        line-height: 1.7;
    }
 
    .brand-popup-close {
        width: 34px;
        height: 34px;
 
        font-size: 24px;
    }
}
 
.brand-logo img{
    height: 250px;
    min-width: 250px;
}

.nav-dropdown--about .dropdown-menu {
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 100px;
    width: max-content;
}

.nav-dropdown--about:hover .dropdown-menu {
    transform: translateX(-50%) translateY(0);
}


/* =========================
   BRAND PAGINATION
========================= */

.brand-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 45px;
    padding-bottom: 40px;
}

.brand-pagination nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Reset any ul/li Laravel outputs */
.brand-pagination ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.brand-pagination nav > div,
.brand-pagination ul {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-pagination li {
    list-style: none;
    display: flex;
}

/* Only style actual page links + the active page marker,
   not every span (e.g. the "Showing X to Y of Z results" text) */
.brand-pagination a,
.brand-pagination li span[aria-current="page"],
.brand-pagination li span[aria-disabled="true"] {
    min-width: 42px;
    height: 42px;

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

    padding: 0 14px;

    border: 1px solid #ddd;
    border-radius: 6px;

    background: #fff;
    color: #333;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    transition: all 0.25s ease;
}

/* Hover */

.brand-pagination a:hover {
    background: #881b1b;
    border-color: #881b1b;
    color: #fff;
}

/* Active page */

.brand-pagination li span[aria-current="page"] {
    background: #881b1b;
    border-color: #881b1b;
    color: #fff;
    font-weight: 600;
}

/* Previous / Next */

.brand-pagination a[rel="prev"],
.brand-pagination a[rel="next"] {
    padding: 0 16px;
}

/* Disabled Previous / Next */

.brand-pagination li span[aria-disabled="true"] {
    color: #aaa;
    background: #f7f7f7;
    border-color: #e5e5e5;
    cursor: not-allowed;
}

/* The "Showing X to Y of Z results" text should stay plain text */
.brand-pagination > p,
.brand-pagination .text-sm,
.brand-pagination .text-muted {
    margin: 0 12px;
    font-size: 14px;
    color: #555;
}

/* Mobile */

@media (max-width: 576px) {

    .brand-pagination {
        margin-top: 30px;
        padding-bottom: 25px;
    }

    .brand-pagination nav > div,
    .brand-pagination ul {
        gap: 5px;
    }

    .brand-pagination a,
    .brand-pagination li span[aria-current="page"],
    .brand-pagination li span[aria-disabled="true"] {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
        font-size: 13px;
    }

}