@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Tenor+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
    --gold: #d4af37;
    --gold-light: #f3e5ab;
    --dark: #121212;
    --dark-light: #1f1f1f;
    --light: #faf9f6;
    --text-main: #333333;
    --text-muted: #666666;
    --border: #ececec;
    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    --dark-text:#121212;

    --primary: #cbab58; /* Elegant Gold */
    --primary-hover: #b3913f;
    --text-light: #777777;
    --bg-body: #Fdfcfb;
    --bg-card: #ffffff;
    --border: #eeeeee;
    --discount: #e74c3c;

    --black:#0A0705;
    --deep:#110D09;
    --dark:#1A1310;
    --card:#201810;
    /* --gold:#C9993A; */
    --gold2:#E8B84B;
    --gold3:#F5D070;
    --gold-pale:#FDF0C0;
    --cream:#FAF5EC;
    --muted:#ffffff;
    --red:#C0392B;
    --red2:#E74C3C;

    --bg-color: #fcfbfa; /* Very warm light pearl */
    --card-bg: #ffffff;
    --text-dark: #1c1917;
    --text-muted: #78716c;
    --gold-primary: #c39b56;
    --gold-hover: #a17c46;
    --discount-red: #d94b4b;
    --border-color: #f0ebe1;

    --font-display: 'Cinzel', serif;
    --font-body: 'Montserrat', sans-serif;

    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.03);
    --shadow-float: 0 20px 40px rgba(195, 155, 86, 0.08);
    --transition-speed: 0.4s;
    --transition: all var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);

    --accent: #d4af37; /* Metallic Gold */
    --text-main: #121212;

    --bg-dark: #0a0002;
    --bg-maroon: #2d040e;
    --bg-royal: #4a0915;
    --gold-light-bridal: #fbeaba;
    --gold-main-bridal: #d4af37;
    --gold-dark-bridal: #aa8118;
    --text-light-bridal: #f5f0e6;
    --font-title: 'Cinzel Decorative', serif;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Jost', sans-serif;

    --insta-color: #e1306c;

    /* footer root */
    --bg-dark: #0a0002;
    --bg-maroon: #2d040e;
    --bg-royal: #4a0915;
    --gold-light: #fbeaba;
    --gold-main: #d4af37;
    --gold-dark: #aa8118;
    --text-light: #f5f0e6;
    --text-muted: #b5a996;
    --font-title: 'Cinzel Decorative', serif;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Jost', sans-serif;
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

    --gold-gradient: linear-gradient(135deg, #b38728 0%, #fbf5b7 50%, #aa771c 100%);

    /* bridla page banner  */

     --bg-bridal: #fcf9f6; /* Pearl/Soft Cream */
    --bg-secondary: #f3efe9;
    --text-dark: #2a2626;
    --text-muted: #6b6360;
    --accent-gold: #cba135; /* Sophisticated Champagne Gold */
    --accent-hover: #b58d27;
    --white: #ffffff;
    
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Outfit', sans-serif;

    /* bridal offer */
    --bg-start: #12070f;
    --bg-end: #2a0f1f;
    --rose: #ff4f9a;
    /* --gold: #f6ca78; */
    --gold-deep: #c28c2f;
    --ivory: #fff8ef;
    --text-soft: #f0d8be;
    --panel: rgba(255, 255, 255, 0.06);
    --panel-border: rgba(246, 202, 120, 0.3);

    /* about page */

    --gold-1: #f7d99f;
    --gold-2: #c8923f;
    --rose: #ff6faa;
    --ivory: #fff8ef;
    --soft-text: #ebdcc9;
    --panel: rgba(255, 255, 255, 0.05);
    --panel-border: rgba(247, 217, 159, 0.26);

    /* CART ROOT */

    --primary-gold: #C5A059;
    --soft-gold: #fdfaf3;
    --accent-red: #8B0000; /* Dark Red */
    --luxury-black: #1a1a1a;
    --pure-white: #ffffff;
    --text-gray: #666666;
    --border-gold: rgba(197, 160, 89, 0.3);
    --transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);


}

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--light);
    -webkit-font-smoothing: antialiased;
}
.container {
    width: 90%;
    margin: 0 auto;
    padding: 0 20px;
}

h1,h2,h3,h4 {
    font-family: 'Cinzel', serif;
    color: var(--dark);
}

/* --- HEADER WRAPPER --- */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: var(--transition);
}

.header.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* Header scrolled state: hide topbar */
.header.scrolled .header-top {
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
}

.container {
    /* width: 100%; */
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- HEADER TOP (Left & Right columns) --- */
.header-top {
    background-color: var(--dark);
    color: var(--light);
    height: 45px;
    display: flex;
    align-items: center;
    transition: var(--transition);
}

.header-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Left Column: Gold Price Dropdown */
.gold-rates {
    position: relative;
    font-size: 13px;
    letter-spacing: 1px;
    z-index: 1010;
}

.gold-rates-btn {
    background: transparent;
    border: none;
    color: var(--light);
    font-family: 'Lato', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
    padding: 5px 0;
}

.gold-rates-btn:hover {
    color: var(--gold);
}

.gold-rates-btn i.fa-chart-line {
    color: var(--gold);
}

.gold-rates-btn i.fa-chevron-down {
    transition: transform 0.3s ease;
    font-size: 10px;
}

.gold-rates:hover .gold-rates-btn i.fa-chevron-down {
    transform: rotate(180deg);
}

.gold-rates-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    color: var(--text-main);
    width: 260px;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: var(--transition);
    border-top: 3px solid var(--gold);
    padding: 10px 0;
    margin-top: 10px;
}

.gold-rates:hover .gold-rates-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown triangle arrow */
.gold-rates-dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--gold);
}

.rate-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 25px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    transition: background 0.3s ease, padding-left 0.3s ease;
}

.rate-item:hover {
    background: #fafafa;
    padding-left: 30px;
}

.rate-item:last-child {
    border-bottom: none;
}

.rate-item .metal {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rate-item i {
    font-size: 10px;
}

.rate-item.up i { color: #2e7d32; }
.rate-item.down i { color: #c62828; }

.rate-item .price-top-header {
    font-weight: 700;
    color: var(--dark);
}

/* Middle Column: Offers Animation */
.header-offers {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 30px;
    align-items: center;
    padding: 0 20px;
}

.offer-slider {
    position: relative;
    height: 20px;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
}

.offer-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.5px;
    gap: 8px;
    color: var(--gold-light);
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpVertical 12s infinite;
    white-space: nowrap;
}

.offer-text i {
    color: var(--gold);
}

.offer-text:nth-child(1) { animation-delay: 0s; }
.offer-text:nth-child(2) { animation-delay: 4s; }
.offer-text:nth-child(3) { animation-delay: 8s; }

@keyframes slideUpVertical {
    0% { transform: translateY(20px); opacity: 0; }
    4% { transform: translateY(0); opacity: 1; }
    29% { transform: translateY(0); opacity: 1; }
    33% { transform: translateY(-20px); opacity: 0; }
    100% { transform: translateY(-20px); opacity: 0; }
}

/* Right Column (Top): Social Contacts */
.social-contacts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.social-icon {
    color: var(--light);
    font-size: 14px;
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    color: var(--gold);
    transform: translateY(-2px) scale(1.1);
}

.contact-divider {
    color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
}

.contact-phone {
    color: var(--light);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
}

.contact-phone:hover {
    color: var(--gold);
}

/* Right Column (Main Nav): Actions (Search, Wishlist, Cart, User) */
.header-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    justify-content: flex-end;
}

.search-box {
    display: flex;
    align-items: center;
    position: relative;
}

.search-btn {
    background: transparent;
    border: none;
    color: var(--dark);
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.search-btn:hover {
    color: var(--gold);
    transform: scale(1.1);
}

.search-input {
    width: 0;
    opacity: 0;
    background: #ffffff;
    border: none;
    border-bottom: 2px solid var(--gold);
    color: var(--dark);
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    padding: 5px 0;
    transition: var(--transition);
    outline: none;
    position: absolute;
    right: 100%;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.search-box.active .search-input {
    width: 220px;
    opacity: 1;
    padding: 8px 12px;
    margin-right: 15px;
    pointer-events: auto;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.action-link {
    color: var(--dark);
    font-size: 18px;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.action-link:hover {
    color: var(--gold);
    transform: translateY(-3px);
}

.action-link .badge-subheader {
    position: absolute;
    top: -10px;
    right: -12px;
    background-color: var(--gold);
    color: var(--dark);
    font-size: 10px;
    font-weight: 700;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ffffff;
    transition: transform 0.3s ease;
}

.action-link:hover .badge-subheader {
    animation: bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) alternate;
}

@keyframes bounce {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-3px) scale(1.1); }
}

/* --- MAIN NAVBAR --- */
.header-main {
    background-color: #ffffff;
    height: 85px;
    display: flex;
    align-items: center;
    transition: height 0.4s ease;
}

.header-main-inner {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: center;
    width: 100%;
}

/* Logo */
.logo {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--dark);
    text-decoration: none;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.logo span {
    color: var(--gold);
}

/* Desktop Nav */
.navbar {
    justify-self: center;
}

.navbar ul {
    display: flex;
    gap: 40px;
    list-style: none;
}

.navbar a {
    text-decoration: none;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.navbar a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--gold);
    transition: var(--transition);
    transform: translateX(-50%);
}

.navbar a:hover, .navbar a.active {
    color: var(--gold);
}

.navbar a:hover::before, .navbar a.active::before {
    width: 100%;
}

/* Mobile Toggle Icon */
.mobile-toggle {
    display: none; /* hidden on desktop */
    font-size: 26px;
    background: transparent;
    border: none;
    color: var(--dark);
    cursor: pointer;
    transition: color 0.3s ease;
}

.mobile-toggle:hover {
    color: var(--gold);
}

/* --- MOBILE NAV MENU (Slide-in) --- */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px); /* classy blur effect */
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    max-width: 85%;
    height: 100vh;
    background: #ffffff;
    z-index: 2000;
    padding: 40px 30px;
    box-shadow: -10px 0 40px rgba(0,0,0,0.15);
    transition: right 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

.mobile-nav.active {
    right: 0;
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}

.mobile-nav-header .logo {
    font-size: 26px;
    letter-spacing: 2px;
}

.close-nav {
    font-size: 24px;
    background: transparent;
    border: none;
    color: var(--dark);
    cursor: pointer;
    transition: transform 0.4s ease, color 0.3s ease;
}

.close-nav:hover {
    color: var(--gold);
    transform: rotate(90deg);
}

.mobile-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mobile-nav-links a {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease, padding-left 0.3s ease;
    display: block;
}

.mobile-nav-links a:hover, 
.mobile-nav-links a.active {
    color: var(--gold);
    padding-left: 15px;
}

/* --- HERO BANNER SLIDER --- */
.banner-section {
    width: 100%;
    height: 100vh;
    position: relative;
}

.banner-swiper {
    width: 100%;
    height: 100%;
    background-color: var(--dark);
}

.banner-swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    height: auto;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.slide-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1);
    transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swiper-slide-active .slide-bg img {
    transform: scale(1);
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(18,18,18,0.85) 0%, rgba(18,18,18,0.4) 50%, rgba(18,18,18,0.1) 100%);
    z-index: 2;
}

.slide-content {
    position: relative;
    z-index: 3;
    /* width: 100%; */
    padding-top: 130px; /* Offset for header */
    color: var(--light);
}

.slide-content-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
}

.slide-text {
    max-width: 750px;
}

.slide-featured {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.featured-glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 25px;
    border-radius: 20px;
    width: 100%;
    max-width: 320px;
    opacity: 0;
    transform: translateY(50px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
}

/* Ambient light inside card */
.featured-glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: skewX(-20deg);
    z-index: 1;
}

.swiper-slide-active .featured-glass-card {
    animation: fadeUpItem 1s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s forwards;
}

.swiper-slide-active .featured-glass-card::before {
    animation: shine 3s infinite 2.5s;
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 200%; }
    100% { left: 200%; }
}

.featured-tag {
    display: inline-block;
    background: var(--gold);
    color: var(--dark);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.featured-img-wrap {
    width: 100%;
    height: 220px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.featured-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.featured-glass-card:hover .featured-img-wrap img {
    transform: scale(1.1);
}

.featured-info {
    position: relative;
    z-index: 2;
}

.featured-info h4 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    margin-bottom: 8px;
    color: #ffffff;
    font-weight: 600;
}

.featured-info .price {
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    color: var(--gold);
    font-weight: 700;
    margin-bottom: 20px;
}

.discover-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s ease;
    font-weight: 600;
}

.discover-link i {
    transition: transform 0.3s ease;
}

.discover-link:hover {
    color: var(--gold);
}

.discover-link:hover i {
    transform: translateX(5px);
}

.slide-text .subtitle-banner {
    display: block;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--gold);
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(30px);
}

.slide-text .title-banner {
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    max-width: 700px;
    color: #ffffff;
    opacity: 0;
    transform: translateY(40px);
    text-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.slide-text .desc {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 40px;
    color: rgba(255,255,255,0.85);
    opacity: 0;
    transform: translateY(30px);
}

.btn-primary-home {
    display: inline-block;
    background-color: transparent;
    color: var(--gold);
    padding: 16px 45px;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    border: 1px solid var(--gold);
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
    opacity: 0;
    transform: translateY(30px);
    z-index: 10;
}

.btn-primary-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--gold);
    z-index: -1;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary-home:hover {
    color: var(--dark);
}

.btn-primary-home:hover::before {
    width: 100%;
}

/* TEXT ANIMATIONS ON ACTIVE SLIDE */
.swiper-slide-active .subtitle-banner {
    animation: fadeUpItem 0.8s ease 0.4s forwards;
}

.swiper-slide-active .title-banner {
    animation: fadeUpItem 0.8s ease 0.6s forwards;
}

.swiper-slide-active .desc {
    animation: fadeUpItem 0.8s ease 0.8s forwards;
}

.swiper-slide-active .btn-primary-home {
    animation: fadeUpItem 0.8s ease 1s forwards;
}

@keyframes fadeUpItem {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Swiper Controls Customization */
.banner-swiper-btn-next, .banner-swiper-btn-prev {
    color: var(--light);
    transition: all 0.3s ease;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.1);
    backdrop-filter: blur(5px);
}

.banner-swiper-btn-next:hover, .banner-swiper-btn-prev:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--dark);
    transform: scale(1.05);
}

.banner-swiper-btn-next::after, .banner-swiper-btn-prev::after {
    font-size: 16px;
}

.swiper-pagination-bullet {
    background: #ffffff;
    opacity: 0.4;
    width: 12px;
    height: 12px;
    transition: all 0.4s ease;
    border-radius: 6px;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--gold);
    width: 35px;
}


/* ================= TEXT SLIDER SECTION CSS ===================== */

/* Animated Dark Background */
.slider-container {
    background: linear-gradient(-45deg, #0a0a0a, #1a1a1a, #0f0f0f, #151515);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    height: 60px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    position: relative;
    overflow: hidden;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Marquee Logic */
.marquee {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    animation: marquee 30s linear infinite;
}

.marquee:hover {
    animation-play-state: paused; /* Allows users to read specific deals */
}

.marquee-content {
    display: flex;
    align-items: center;
}

.item {
    display: flex;
    align-items: center;
    padding: 0 40px;
    color: var(--gold);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: var(--text-shadow);
}

.item span {
    margin: 0 15px;
    font-size: 2rem;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Decorative Glow */
.slider-container::before,
.slider-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
}

.slider-container::before {
    left: 0;
    background: linear-gradient(to right, var(--dark), transparent);
}

.slider-container::after {
    right: 0;
    background: linear-gradient(to left, var(--dark), transparent);
}

/* ======================= TRANDING SECTION START ====================== */

 ::selection {
    background: #d4af37;
    color: #000;
}

.trending-section {
    padding: 100px 0px;
    margin: 0 auto;
}

/* ----- Header Styles ----- */
.section-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
}

.subtitle {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--dark-text);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 16px;
    position: relative;
}

.title-main {
    font-size: 60px;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.gold-text {
        background: linear-gradient(135deg, #BF953F 0%, #d2bf00 25%, #B38728 50%, #d2c002 75%, #AA771C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: goldShine 4s linear infinite;
    background-size: 200% auto;
}

@keyframes goldShine {
    to { background-position: 200% center; }
}

.section-desc {
    color: #a0a0a0;
    max-width: 580px;
    margin: 0 auto;
    font-size: 1.15rem;
    line-height: 1.7;
    font-weight: 300;
}

/* ----- Bento Grid Layout ----- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 350px);
    gap: 24px;
}

.bento-item {
    position: relative;
    border-radius: 24px;
    padding: 2px; /* Width of the animated border */
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); /* Static border */
}

/* Spinning Gradient Border Animation */
.bento-item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 60%, rgba(212, 175, 55, 0.4) 80%, #b98f07 100%);
    animation: spinRotate 4s linear infinite;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

@keyframes spinRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bento-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(212, 175, 55, 0.15);
}

.bento-item:hover::before {
    opacity: 1;
}

.bento-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 22px; 
    overflow: hidden;
    background: #0a0a0a;
    z-index: 2; /* Sits above the spinning border */
}

/* Images inside cards */
.bento-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease;
    filter: brightness(0.7) contrast(1.1) saturate(0.9);
}

.bento-item:hover .bento-img {
    transform: scale(1.08); /* Parallax zoom */
    filter: brightness(0.9) contrast(1.1) saturate(1.2);
}

/* Dark Gradient Overlay */
.bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px 32px;
    transition: background 0.5s ease;
}

.bento-item:hover .bento-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.2) 100%);
}

/* Premium Brand Badge */
.brand-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    background: rgba(15, 15, 15, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    padding: 8px 18px;
    border-radius: 30px;
    color: #fcf6ba;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transform: translateY(-25px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    overflow: hidden;
}

.brand-badge i {
    color: #d4af37;
    font-size: 0.95rem;
}

.bento-item:hover .brand-badge {
    transform: translateY(0);
    opacity: 1;
}

/* Shine effect on badge */
.brand-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(252, 246, 186, 0.3), transparent);
    transform: skewX(-20deg);
}

.bento-item:hover .brand-badge::after {
    animation: badgeShine 1.5s ease-out 0.6s;
}

@keyframes badgeShine {
    100% { left: 150%; }
}

/* Content Revealed on Hover */
.content-wrap {
    transform: translateY(35px);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contant-wrap-main{
   transform: translateY(0px); 
}

.bento-item:hover .content-wrap {
    transform: translateY(0);
}

.card-title-arrivel {
    font-family: "Cinzel", serif;
    color: #ffe8c4;
    font-size: 1.7rem;
    margin: 0 0 10px 0;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.8);
}

.large .card-title-arrivel {
    font-size: 2.6rem;
    margin-bottom: 15px;
}

.card-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
    opacity: 0;
    max-height: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

/* Large card naturally shows desc */
.large .card-desc {
    max-height: 100px;
    opacity: 1;
    transform: translateY(0);
    margin-bottom: 25px;
    font-size: 1.05rem;
}

/* Small cards reveal desc on hover */
.bento-item:not(.large):hover .card-desc {
    max-height: max-content;
    opacity: 1;
    transform: translateY(0);
    margin-top: 12px;
    margin-bottom: 20px;
}

.explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #d4af37;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.4s ease 0.2s;
    position: relative;
}

.large .explore-btn {
    opacity: 1;
    transform: translateX(0);
}

.bento-item:hover .explore-btn {
    opacity: 1;
    transform: translateX(0);
}

.explore-btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 1px;
    background: #d4af37;
    transition: width 0.3s ease;
}

.explore-btn:hover::after {
    width: 100%;
}

.explore-btn i {
    transition: transform 0.3s ease;
}

.explore-btn:hover i {
    transform: translateX(6px);
}

/* Grid Item Sizing */
.large {
    grid-column: span 2;
    grid-row: span 2;
}

.vertical {
    grid-row: span 2;
}

 /* Delicate ornament separator */
.title-separator {
    width: 60px;
    height: 1px;
    background: #b76e79;
    margin: 25px auto 40px;
    position: relative;
    animation: fadeIn 1s ease-out 0.4s both;
}

.title-separator::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #FAFAFA;
    border: 1px solid #b76e79;
    transform: rotate(45deg);
    top: -4px;
    left: 26px;
}

/* Initial Entrance Animations */
.fade-in-up {
    animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(40px);
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

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



/* ===============================  NEW ARRIVEL SECTION START ============================ */

/* --- Section Heading --- */
.slider-section {
    padding: 100px 20px;
    max-width: 1440px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.eyebrow {
    font-family: 'Lato', sans-serif;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    display: block;
    margin-bottom: 12px;
}

.title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--text-main);
    font-weight: 500;
    letter-spacing: 1px;
    font-style: italic;
}

/* --- Swiper Layout --- */
.swiper-arrivel {
    width: 100%;
    padding: 20px 10px 60px; /* Room for shadow and pagination */
}

.swiper-arrivel-slide {
    display: flex;
    justify-content: center;
}

/* Nav Arrows Customization - Gold outline minimal style */
.new-arrivel-next, .new-arrivel-prev {
    color: var(--text-main);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}
.new-arrivel-next::after, .new-arrivel-prev::after {
    font-size: 1rem;
    font-weight: bold;
}
.new-arrivel-next:hover, .new-arrivel-prev:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Pagination dots */
.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #ccc;
    opacity: 1;
    transition: all 0.4s ease;
}
.swiper-pagination-bullet-active {
    background: var(--primary);
    width: 30px;
    border-radius: 4px;
}

/* --- Product Card - Premium Layout --- */
.product-card-arrivel {
    width: 100%;
    background: var(--bg-card);
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid var(--gold);
    border-radius: 16px;
}

.product-card-arrivel:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    transform: translateY(-5px);
    border-color: transparent;
    border: 1px solid var(--gold-hover);
}

/* Image Container */
.card-image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2/2;
    background: #f7f7f7;
    border-radius: 16px 16px 0 0;
}

/* Image Swap Effect */
.img-primary, .img-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: all 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.img-primary {
    opacity: 1;
    transform: scale(1);
}

.img-secondary {
    opacity: 0;
    transform: scale(1.1);
}

.product-card-arrivel:hover .img-primary {
    opacity: 0;
    transform: scale(1.05); /* Soft push back */
}

.product-card-arrivel:hover .img-secondary {
    opacity: 1;
    transform: scale(1); /* Settles beautifully */
}

/* Overlay Effect (Dark Gradient & Flash) */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s ease;
}

.product-card-arrivel:hover .overlay {
    opacity: 1;
}

/* Flash Light Effect */
.card-image-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
    transform: skewX(-25deg);
    z-index: 1;
}

.product-card-arrivel:hover .card-image-wrap::after {
    animation: flashLight 1.2s ease-out;
}

@keyframes flashLight {
    0% { left: -100%; opacity: 1; }
    100% { left: 200%; opacity: 0; }
}

/* Badges */
.badge-group {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
    pointer-events: none;
}
.badge-arrivel {
    padding: 4px 10px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 50px;
}
.badge-new-arrivel { background: var(--text-main); }
.badge-discount { background: var(--discount); }

/* Floating Actions Container */
.actions-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    color: var(--text-main);
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
}

.icon-btn::before {
    content: attr(data-tooltip);
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: var(--text-main);
    color: white;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 2px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Tooltip Arrow */
.icon-btn::after {
    content: '';
    position: absolute;
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent transparent var(--text-main);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.icon-btn:hover {
    background: var(--primary);
    color: white;
}

.icon-btn:hover::before, .icon-btn:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.product-card-arrivel:hover .icon-btn {
    opacity: 1;
    transform: translateX(0);
}
.product-card-arrivel:hover .icon-btn:nth-child(1) { transition-delay: 0.05s; }
.product-card-arrivel:hover .icon-btn:nth-child(2) { transition-delay: 0.1s; }

/* Quick Add Bottom Button Overlay */
.quick-add-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--text-main);
    color: white;
    border: none;
    padding: 16px 0;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.quick-add-btn:hover {
    background: var(--primary);
}

.product-card-arrivel:hover .quick-add-btn {
    transform: translateY(0);
}

/* --- Card Text Information --- */
.card-info {
    padding: 24px 20px 28px;
    text-align: center;
    background: var(--bg-card);
    border-radius: 0 0 16px 16px;
}

/* Rating Stars */
.rating {
    color: #f39c12;
    font-size: 0.70rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.reviews-count {
    color: #000;
    margin-left: 5px;
    font-size: 0.75rem;
    font-family: 'Lato', sans-serif;
}

.category-arrivel {
    font-size: 0.75rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.product-title-arrivel {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--text-main);
    margin-bottom: 12px;
    font-weight: 400;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.product-card-arrivel:hover .product-title-arrivel {
    color: var(--primary);
}

/* Pricing Focus */
.prices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: 'Lato', sans-serif;
}

.original-price {
    color: #282828;
    text-decoration: line-through;
    font-size: 0.95rem;
}

.current-price {
    color: var(--discount); /* Uses a noticeable color for the discounted price */
    font-weight: 700;
    font-size: 1.15rem;
}

.standard-price {
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.15rem;
}


/* ====================== OFFER SECTION START ============================== */

/* ═══════════════════════════════
   ANIMATED BG CANVAS
═══════════════════════════════ */
#bgCanvas{
  position:fixed;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
  opacity:1;
}

/* ═══════════════════════════════
   OFFER SECTION WRAPPER
═══════════════════════════════ */
.offer-section{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color: #280107;
  background: url(../images/xSlider.jpg.pagespeed.ic.KNLXo64yNk.webp);
  background-position-x: right;
}

/* ═══════════════════════════════
   TOP MARQUEE STRIP
═══════════════════════════════ */
.marquee-strip{
  background:var(--gold);
  overflow:hidden;
  padding:10px 0;
  flex-shrink:0;
}
.marquee-track-home{
  display:flex;gap:0;
  animation:marqueeRoll 18s linear infinite;
  width:max-content;
}
.marquee-item-home{
  display:inline-flex;align-items:center;gap:14px;
  padding:0 32px;
  font-family:'Jost',sans-serif;
  font-size:11px;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--black);white-space:nowrap;
}
.marquee-item-home::after{content:'✦';font-size:8px;}
@keyframes marqueeRoll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ═══════════════════════════════
   MAIN OFFER BODY
═══════════════════════════════ */
.offer-body{
  flex:1;
  display:grid;
  grid-template-columns:1fr 480px;
  min-height:calc(100vh - 42px);
}

/* LEFT PANEL */
.offer-left{
  padding:60px 56px;
  display:flex;flex-direction:column;
  justify-content:center;
  position:relative;
  border-right:1px solid rgba(201,153,58,0.15);
}

/* Decorative corner lines */
.offer-left::before,
.offer-left::after{
  content:'';
  position:absolute;
  width:60px;height:60px;
  border-color:rgba(201,153,58,0.35);
  border-style:solid;
}
.offer-left::before{top:40px;left:0px;border-width:1px 0 0 1px;}
.offer-left::after{bottom:40px;right:0;border-width:0 0 1px 0;width:120px;}

/* Sale eyebrow */
.sale-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:28px;
}
.sale-pill{
  background:var(--red2);
  color:#fff;
  font-size:10px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;
  padding:6px 16px;
  position:relative;
  overflow:hidden;
}
.sale-pill::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  animation:shineShift 2.5s ease-in-out infinite;
}
@keyframes shineShift{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(200%);}
}
.sale-tag-line{
  font-size:10px;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold2);
}

/* Main heading */
.offer-headline{
  font-family:'Italiana',serif;
  font-size:clamp(48px,5.5vw,88px);
  font-weight:400;
  line-height:.95;
  letter-spacing:-1px;
  color:var(--cream);
  margin-bottom:8px;
}
.offer-headline .pct{
  display:block;
  font-size:clamp(80px,10vw,140px);
  line-height:1;
  background:linear-gradient(135deg,var(--gold3) 0%,var(--gold) 50%,var(--gold2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:drop-shadow(0 0 30px rgba(201,153,58,0.4));
  animation:goldPulse 3s ease-in-out infinite;
}
@keyframes goldPulse{
  0%,100%{filter:drop-shadow(0 0 20px rgba(201,153,58,0.3));}
  50%{filter:drop-shadow(0 0 50px rgba(232,184,75,0.6));}
}
.offer-subtitle{
  font-family:'Cormorant Garamond',serif;
  font-size:22px;font-weight:300;font-style:italic;
  color:rgba(250,245,236,1);
  margin-bottom:36px;
  letter-spacing:1px;
}

/* Stats row */
.stats-row{
  display:flex;gap:32px;
  margin-bottom:44px;
  flex-wrap:wrap;
}
.stat-item{
  display:flex;flex-direction:column;
  gap:4px;
}
.stat-num{
  font-family:'Cormorant Garamond',serif;
  font-size:36px;font-weight:600;
  color:var(--gold2);
  line-height:1;
}
.stat-label{
  font-size:10px;letter-spacing:3px;
  text-transform:uppercase;color:var(--muted);
}
.stat-divider{width:1px;background:rgba(201,153,58,0.2);align-self:stretch;margin:4px 0;}

/* CTA row */
.cta-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.btn-shop{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 44px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold2) 100%);
  color:var(--black);
  border:none;
  font-family:'Jost',sans-serif;
  font-size:11px;font-weight:600;
  letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;
  position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
  box-shadow:0 8px 32px rgba(201,153,58,0.3);
}
.btn-shop:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 48px rgba(201,153,58,0.5);
}
.btn-shop::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent);
  transform:translateX(-100%);
  transition:transform .6s;
}
.btn-shop:hover::before{transform:translateX(100%);}
.btn-browse{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 36px;
  background:transparent;
  border:1px solid rgba(201,153,58,0.4);
  color:var(--gold2);
  font-family:'Jost',sans-serif;
  font-size:11px;font-weight:400;
  letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;
  transition:all .3s;
}
.btn-browse:hover{border-color:var(--gold);color:var(--gold3);}

/* Offer tags */
.offer-tags{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:28px;
}
.otag{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);
  display:flex;align-items:center;gap:6px;
}
.otag::before{content:'✓';color:var(--gold);font-size:11px;}

/* ═══════════════════════════════
   RIGHT PANEL - TIMER + PRODUCTS
═══════════════════════════════ */
.offer-right{
  display:flex;flex-direction:column;
  background:var(--deep);
}

/* COUNTDOWN */
.countdown-box{
  padding:40px 36px 32px;
  border-bottom:1px solid rgba(201,153,58,0.12);
  position:relative;overflow:hidden;
}
.countdown-box::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(201,153,58,0.08) 0%,transparent 70%);
}
.timer-label{
  text-align:center;
  font-size:10px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold2);margin-bottom:20px;
  position:relative;z-index:1;
}
.timer-label span{
  display:inline-flex;align-items:center;gap:8px;
}
.timer-label span::before,
.timer-label span::after{
  content:'';display:block;
  width:30px;height:1px;background:var(--gold);opacity:.5;
}
.clock-row{
  display:flex;
  /* align-items:flex-end; */
  justify-content:center;
  gap:6px;
  position:relative;
  z-index:1;
}
.clock-unit{
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.clock-digits{
  display:flex;gap:3px;
}
.digit-flip{
  position:relative;
  width:44px;height:50px;
  background:var(--card);
  border:1px solid rgba(201,153,58,0.2);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* .digit-flip::before{
  content:'';
  position:absolute;top:50%;left:0;right:0;
  height:1px;background:rgba(0,0,0,0.5);
  z-index:2;
} */
.digit-flip .top-half{
  /* position:absolute;
  top:0;left:0;right:0;bottom:50%; */
  background:linear-gradient(to bottom,var(--dark),var(--card));
  display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:4px;
  font-family:'Cormorant Garamond',serif;
  font-size:30px;font-weight:600;
  color:var(--gold2);
  overflow:hidden;
}
.digit-flip .bot-half{
  position:absolute;
  top:50%;left:0;right:0;bottom:0;
  background:var(--card);
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:4px;
  font-family:'Cormorant Garamond',serif;
  font-size:30px;font-weight:600;
  color:var(--gold);
  overflow:hidden;
  display: none;
}
.digit-flip.flip .top-half{
  animation:flipTop .25s ease forwards;
}
.digit-flip.flip .bot-half{
  animation:flipBot .25s .15s ease forwards;
}
@keyframes flipTop{
  0%{transform:rotateX(0deg);}
  100%{transform:rotateX(-90deg);}
}
@keyframes flipBot{
  0%{transform:rotateX(90deg);}
  100%{transform:rotateX(0deg);}
}
.clock-sep{
  font-family:'Cormorant Garamond',serif;
  font-size:36px;font-weight:300;
  color:var(--gold);
  line-height:1;
  margin-bottom:14px;
  animation:blinkSep 1s step-end infinite;
}
@keyframes blinkSep{0%,100%{opacity:1;}50%{opacity:.3;}}
.clock-unit-label{
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--muted);
}

/* Progress bar */
.progress-wrap{
  margin-top:22px;position:relative;z-index:1;
}
.progress-label{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
}
.prog-text{font-size:11px;color:var(--muted);letter-spacing:1px;}
.prog-pct{font-size:11px;color:var(--gold2);}
.progress-bar{
  height:3px;background:rgba(255,255,255,0.06);
  overflow:hidden;
  position:relative;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold3));
  width:0%;
  animation:fillBar 2s 0.5s ease forwards;
  position:relative;
}
.progress-fill::after{
  content:'';
  position:absolute;right:0;top:-2px;
  width:6px;height:7px;
  background:var(--gold3);
  border-radius:50%;
  box-shadow:0 0 10px var(--gold3);
}
@keyframes fillBar{to{width:72%;}}

/* PRODUCT CARDS STACK */
.offer-products{
  flex:1;
  padding:24px 24px 28px;
  display:flex;flex-direction:column;
  gap:14px;
  overflow-y:auto;
}
.offer-products::-webkit-scrollbar{width:4px;}
.offer-products::-webkit-scrollbar-track{background:transparent;}
.offer-products::-webkit-scrollbar-thumb{background:rgba(201,153,58,0.2);border-radius:2px;}

.prod-card{
  display:flex;gap:16px;align-items:center;
  background:var(--card);
  border:1px solid rgba(201,153,58,0.1);
  padding:14px;
  cursor:pointer;
  transition:all .35s;
  position:relative;overflow:hidden;
  opacity:0;transform:translateX(30px);
  animation:slideIn .5s ease forwards;
}
.prod-card:nth-child(1){animation-delay:.2s;}
.prod-card:nth-child(2){animation-delay:.35s;}
.prod-card:nth-child(3){animation-delay:.5s;}
.prod-card:nth-child(4){animation-delay:.65s;}
@keyframes slideIn{
  to{opacity:1;transform:translateX(0);}
}
.prod-card:hover{
  border-color:rgba(201,153,58,0.4);
  background:#271E13;
  transform:translateX(-4px);
}
.prod-card::after{
  content:'';position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(201,153,58,0.04),transparent);
  transform:translateX(-100%);
  transition:transform .5s;
}
.prod-card:hover::after{transform:translateX(100%);}

.prod-img{
  width:72px;height:72px;flex-shrink:0;
  overflow:hidden;
  border:1px solid rgba(201,153,58,0.15);
}
.prod-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .5s;
}
.prod-card:hover .prod-img img{transform:scale(1.1);}

.prod-info{flex:1;min-width:0;}
.prod-cat{
  font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--gold);margin-bottom:4px;
}
.prod-name{
  font-family:'Cormorant Garamond',serif;
  font-size:17px;font-weight:400;
  color:var(--cream);
  margin-bottom:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.prod-pricing{display:flex;align-items:center;gap:8px;}
.prod-old{font-size:12px;color:var(--muted);text-decoration:line-through;}
.prod-new{
  font-family:'Cormorant Garamond',serif;
  font-size:20px;font-weight:600;color:var(--gold2);
}
.prod-badge{
  margin-left:auto;flex-shrink:0;
  background:var(--red2);
  color:#fff;
  font-size:10px;font-weight:600;
  letter-spacing:1px;
  padding:4px 10px;
  align-self:flex-start;
}
.prod-cart{
  margin-left:6px;flex-shrink:0;
  width:36px;height:36px;
  background:transparent;
  border:1px solid rgba(201,153,58,0.3);
  color:var(--gold2);font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s;
  align-self:center;
}
.prod-cart:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}

/* Sold count */
.sold-bar{
  display:flex;align-items:center;gap:8px;
  margin-top:6px;
}
.sold-dots{display:flex;gap:3px;}
.sdot{width:6px;height:6px;border-radius:50%;}
.sdot.filled{background:var(--gold);}
.sdot.empty{background:rgba(255,255,255,0.1);}
.sold-text{font-size:10px;color:var(--muted);}

/* ========================= COLLECTION SECTION START ========================== */

.collection-wrapper {
    max-width: 1536px;
    margin: 0 auto;
    padding: 100px 4%;
}

/* --------------------------
    HEADER SECTION
-------------------------- */
.section-header {
    text-align: center;
    margin-bottom: 70px;
    position: relative;
}

.pre-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--gold-primary);
    font-weight: 500;
    display: inline-block;
    margin-bottom: 20px;
    position: relative;
}

.pre-title::before, .pre-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background-color: var(--gold-primary);
}
.pre-title::before { right: 100%; margin-right: 15px; }
.pre-title::after { left: 100%; margin-left: 15px; }

.section-header h2 {
    font-size: 56px;
}

/* --------------------------
    TABS DESIGN
-------------------------- */
.tab-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.filter-tab {
    padding: 12px 30px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 40px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.filter-tab::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--gold-primary);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-speed) ease;
}

.filter-tab:hover {
    color: var(--text-dark);
    border-color: var(--text-dark);
}

.filter-tab.active {
    color: #fff;
    border-color: var(--gold-primary);
}

.filter-tab.active::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* --------------------------
    GRID & CARDS
-------------------------- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
    /* align-items stretch allows cards in same row to match height */
    align-items: stretch;
}

.product-card-css {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow-subtle);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-speed), border-color var(--transition-speed), transform var(--transition-speed);
    position: relative;
    
    /* Hidden via display none by default to stop grid gaps */
    display: none; 
    flex-direction: column;
    
    /* Animation properties for JS to toggle */
    opacity: 0;
    transform: translateY(30px) scale(0.95);
}

/* JS toggle classes */
.product-card-css.show-card {
    display: flex;
}

.product-card-css.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.product-card-css:hover {
    box-shadow: var(--shadow-float);
    border-color: rgba(195, 155, 86, 0.3);
    /* Important: disable hover transform Y so it doesn't conflict with animation transform */
    transform: translateY(-8px) scale(1) !important;
}

.product-card-show-on{
  opacity: 0;
    transform: translateY(30px) scale(0.95);  
    display: none;
}

.product-card-show-on.show-card {
    display: flex;
    flex-direction: column;
}

.product-card-show-on.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Media / Image Area */
.card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
    background-color: #f5f5f5;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card-css:hover .card-media img {
    transform: scale(1.1);
}

/* Badges & Overlays */
.card-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}

.badge-collection {
    padding: 6px 12px;
    background: var(--card-bg);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.badge-collection.discount { 
    background: var(--discount-red); 
    color: white; 
}
.badge.trending { 
    background: var(--gold-primary); 
    color: white; 
}
.badge.rating { 
    display: flex; 
    align-items: center; 
    gap: 4px; 
    color: var(--text-dark); 
    font-weight: 500;
    background: rgb(255 247 228);
}
.badge.rating i { 
    color: var(--gold-primary); 
    font-size: 10px; 
}

/* Wishlist Heart */
.wishlist-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 16px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: var(--transition);
    z-index: 2;
}

.wishlist-btn:hover {
    color: var(--discount-red);
    transform: scale(1.1);
}

/* Quick Action Overlay */
.quick-actions {
    position: absolute;
    bottom: -60px;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0) 100%);
    display: flex;
    gap: 10px;
    transition: var(--transition);
    z-index: 2;
    opacity: 0;
    text-align: center;
    justify-content: center;
}

.product-card-css:hover .quick-actions {
    bottom: 0;
    opacity: 1;
}

.btn-action {
    background: var(--text-dark);
    color: #fff;
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    flex-grow: 1;
    transition: background 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%;
}

.btn-action:hover {
    background: var(--gold-primary);
}

/* Card Information */
.card-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
}

.material-tag {
    color: var(--gold-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.delivery-tag {
    color: #3b82f6; /* Trust blue */
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

.product-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 15px;
    line-height: 1.3;
    transition: color 0.3s;
    text-align: left;
}

.product-card-css:hover .product-title {
    color: var(--gold-primary);
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.price-wrapper {
    display: flex;
    flex-direction: column;
}

.price-old {
    font-size: 14px;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-bottom: 2px;
}

.price-current {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-dark);
    font-family: var(--font-body);
}

/* Interactive "Plus" button for add to cart alternative */
.add-cart-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dark);
    cursor: pointer;
    transition: var(--transition);
}

.product-card-css:hover .add-cart-circle {
    background: var(--gold-primary);
    color: white;
    border-color: var(--gold-primary);
    transform: rotate(90deg);
}

/* --------------------------
    RESPONSIVE DESIGN
-------------------------- */


/* ==================================== COLLECTION HAND START =========================== */

.collection-h1{
    color: #cb9274;
    font-size: 13rem;
    text-align: center;
    font-weight: 500;
    line-height: normal;
}
.hand-image-on{
    max-width: 100%;
    height: auto;
    /* top: -14%;
    margin-left: -70px; */
    margin-top: -306px;

}
.heading-hand{
    text-align: center;
    position: relative;
}
.hand-down-text{
    font-family: "Sorts Mill Goudy", serif;
    font-size: 30px;
    text-align: center;

}

/* =================== 3 crad start =================== */

.gallery-section {
  background-color: var(--bg-soft);
  padding: 100px 0px;
  text-align: center;
}

.header-area {
  margin-bottom: 70px;
}

.subtitle {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 12px;
  /* color: var(--accent); */
  margin-bottom: 10px;
}

.main-title {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  font-weight: 400;
  color: var(--text-main);
}

.luxury-line {
  width: 50px;
  height: 2px;
  background: var(--accent);
  margin: 20px auto;
}

/* The Grid */
.jewel-grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
}

.jewel-wrapper {
  flex: 1;
  perspective: 1000px;
}

/* The Box */
.jewel-box {
  position: relative;
  background: #fff;
  padding: 15px; /* Creates the "Frame" look */
  box-shadow: 0 15px 35px rgba(0,0,0,0.05);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  overflow: hidden;
}

.jewel-box img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  transition: transform 1.2s ease;
}

/* The Hover Mask */
.hover-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 18, 18, 0.4); /* Subtle dark tint */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mask-content {
  color: white;
  transform: translateY(20px);
  transition: transform 0.6s ease;
}

.collection-name {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.mask-content h4 {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  margin: 10px 0 20px;
  color: #fff;
}

.shop-link {
  color: white;
  text-decoration: none;
  font-size: 16px;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 5px;
  letter-spacing: 1px;
}

/* INTERACTION DESIGN */
.jewel-wrapper:hover .jewel-box {
  transform: translateY(-15px); /* Floating effect */
  box-shadow: 0 30px 60px rgba(0,0,0,0.1);
  outline: 1px solid var(--accent); /* Gold border reveal */
  outline-offset: -10px;
}

.jewel-wrapper:hover img {
  transform: scale(1.1); /* Zoom effect */
}

.jewel-wrapper:hover .hover-mask {
  opacity: 1;
}

.jewel-wrapper:hover .mask-content {
  transform: translateY(0);
}


/* =============================== BRIDAL SECTION START =========================== */

/* Royal Section */
.royal-bridal-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 5%;
    background: radial-gradient(circle at center, var(--bg-maroon) 0%, #0a0002 80%);
    overflow: hidden;
}

/* Animated Particles */
.royal-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, var(--gold-main-bridal) 50%, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #ffffff 50%, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 90px 40px, var(--gold-light-bridal) 50%, rgba(0,0,0,0));
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.15;
    animation: starryFloat 60s linear infinite;
}

.royal-particles::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: 300px 300px;
    animation: starryFloat 45s linear infinite reverse;
    opacity: 0.5;
}

@keyframes starryFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-300px) rotate(5deg); }
}

/* Container */
.royal-container {
    max-width: 1300px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    z-index: 2;
    position: relative;
}

/* Left Content */
.royal-content {
    display: flex;
    flex-direction: column;
    gap: 25px;
    animation: fadeRight 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.royal-badge {
    align-self: flex-start;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--gold-main-bridal);
    font-size: 1.1rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.royal-badge span {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.5rem;
    vertical-align: middle;
}

.royal-title {
    font-family: var(--font-title);
    font-size: clamp(3.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--gold-light-bridal);
    text-transform: uppercase;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.royal-title span {
    display: block;
    color: var(--gold-main-bridal);
    font-family: var(--font-serif);
    text-transform: none;
    font-size: 1.2em;
    font-style: italic;
    font-weight: 400;
    margin-top: -10px;
    background: linear-gradient(to right, var(--gold-light-bridal), var(--gold-main-bridal), var(--gold-dark-bridal));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.royal-desc {
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(245, 240, 230, 0.8);
    max-width: 90%;
    font-weight: 300;
}

/* Button */
.btn-royal {
    align-self: flex-start;
    margin-top: 15px;
    padding: 16px 45px;
    font-family: var(--font-sans);
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #000;
    background: linear-gradient(45deg, var(--gold-light-bridal), var(--gold-main-bridal));
    border: none;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
    box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2);
    overflow: hidden;
}

.btn-royal::before {
    content: '';
    position: absolute;
    inset: 2px;
    background: #0a0002;
    z-index: -1;
    transition: all 0.4s ease;
    opacity: 0;
}

.btn-royal:hover::before {
    opacity: 1;
}
.btn-royal:hover {
    color: var(--gold-light-bridal);
    box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);
    transform: translateY(-3px);
}

/* Features */
.royal-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    border-left: 2px solid rgba(212, 175, 55, 0.2);
    padding-left: 20px;
}

.rf-item {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--gold-main-bridal);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
}

.rf-item::before {
    content: '♦';
    margin-right: 12px;
    font-size: 0.8rem;
    color: var(--gold-light-bridal);
}

/* Right Visuals */
.royal-visuals {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 700px;
    animation: fadeLeft 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.royal-frame {
    position: relative;
    width: 75%;
    height: 90%;
    background: #0a0002;
    padding: 15px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 0 50px rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.royal-frame::before {
    content: '';
    position: absolute;
    top: -10px; bottom: -10px; left: -10px; right: -10px;
    border: 1px solid rgba(212, 175, 55, 0.5);
    pointer-events: none;
}
.royal-frame::after {
    content: '';
    position: absolute;
    top: 5px; bottom: 5px; left: 5px; right: 5px;
    border: 1px dashed rgba(212, 175, 55, 0.4);
    pointer-events: none;
    z-index: 5;
}

.main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1) brightness(0.9);
    transition: all 0.5s ease;
}

.royal-frame:hover .main-img {
    filter: contrast(1.2) brightness(1.1);
}

/* Ornamental Corners */
.ornament-bridal-main {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid var(--gold-main-bridal);
    z-index: 10;
    background: var(--bg-dark);
}

.ornament-bridal-main.tl { top: -11px; left: -11px; border-right: none; border-bottom: none; }
.ornament-bridal-main.tr { top: -11px; right: -11px; border-left: none; border-bottom: none; }
.ornament-bridal-main.bl { bottom: -11px; left: -11px; border-right: none; border-top: none; }
.ornament-bridal-main.br { bottom: -11px; right: -11px; border-left: none; border-top: none; }

.ornament-bridal-main::after {
    content: '✦';
    position: absolute;
    color: var(--gold-light-bridal);
    font-size: 16px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

/* Hovering Product Card */
.royal-product {
    position: absolute;
    bottom: 10%;
    left: -15%;
    background: var(--bg-maroon);
    border: 1px solid var(--gold-main-bridal);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.royal-product::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(212,175,55,0.4);
    pointer-events: none;
}

.royal-product:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 50px rgba(0,0,0,0.8), 0 0 30px rgba(212, 175, 55, 0.2);
    background: #3a0815;
}

.rp-img-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gold-main-bridal);
    padding: 2px;
    flex-shrink: 0;
    background:#0a0002;
    z-index: 2;
}

.rp-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.5s ease;
}

.royal-product:hover .rp-img-wrapper img {
    transform: scale(1.15) rotate(5deg);
}

.rp-info {
    z-index: 2;
}

.rp-info h4 {
    font-family: var(--font-serif);
    color: var(--gold-light-bridal);
    font-size: 1.15rem;
    margin-bottom: 5px;
}

.rp-info p {
    font-size: 0.85rem;
    color: var(--text-light-bridal);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Animations */
@keyframes fadeRight {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ========================== JEWELLERY GALLERY SECTION START =========================== */

::selection {
    background: #b76e79;
    color: #fff;
}

.new-arrivals-section {
    padding: 100px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Header Styling --- */
.section-header {
    text-align: center;
    margin-bottom: 70px;
}

.eyebrow {
    font-family: 'Montserrat', sans-serif;
    color: #b76e79;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
    animation: fadeIn 1s ease-out;
}

.title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.8rem, 5vw, 4rem);
    color: #1a1a1a;
    font-weight: 500;
    letter-spacing: 1px;
    animation: fadeIn 1s ease-out 0.2s both;
}

/* Delicate ornament separator */
.title-separator {
    width: 60px;
    height: 1px;
    background: #b76e79;
    margin: 25px auto 40px;
    position: relative;
    animation: fadeIn 1s ease-out 0.4s both;
}

.title-separator::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #FAFAFA;
    border: 1px solid #b76e79;
    transform: rotate(45deg);
    top: -4px;
    left: 26px;
}

/* --- Editorial Layout Grid --- */
.arrivals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 420px 420px;
    gap: 50px 30px; /* 50px vertical for text room, 30px horizontal */
}

.card-tall { grid-column: 1 / 2; grid-row: 1 / 3; }
.card-square-top { grid-column: 2 / 3; grid-row: 1 / 2; }
.card-square-bot { grid-column: 2 / 3; grid-row: 2 / 3; }
.card-huge { grid-column: 3 / 5; grid-row: 1 / 3; }

/* --- Product Card Core --- */
.product-card-gallery {
    display: flex;
    flex-direction: column;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    animation: fadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.card-tall { animation-delay: 0.2s; }
.card-square-top { animation-delay: 0.3s; }
.card-square-bot { animation-delay: 0.4s; }
.card-huge { animation-delay: 0.5s; }

.card-image-wrap-gallery {
    flex: 1; /* Steals available height */
    position: relative;
    overflow: hidden;
    background: #EAE8E4;
}

/* Flash overlay animation */
.card-image-wrap-gallery::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    z-index: 2;
}

.product-card-gallery:hover .card-image-wrap-gallery::after {
    animation: flashLight 1.2s ease-out;
}

@keyframes flashLight {
    0% { left: -100%; opacity: 1; }
    100% { left: 200%; opacity: 0; }
}

/* Imagery Hover Swap */
.img-primary-gallery, .img-secondary-gallery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.img-primary-gallery {
    opacity: 1;
    transform: scale(1);
}

.img-secondary-gallery {
    opacity: 0;
    transform: scale(1.1);
}

.product-card-gallery:hover .img-primary-gallery {
    opacity: 0;
    transform: scale(1.05); /* Slight push back */
}

.product-card-gallery:hover .img-secondary-gallery {
    opacity: 1;
    transform: scale(1); /* Settles in perfectly */
}

/* Action Buttons Hovering over Image */
.card-actions {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 3;
}

.action-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2a2a;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateX(20px);
    transition: background 0.3s ease, color 0.3s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
}

.action-btn:hover {
    background: #b76e79;
    color: #fff;
}

.product-card-gallery:hover .action-btn:nth-child(1) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

.product-card-gallery:hover .action-btn:nth-child(2) {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

/* Badges */
.badge-new {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    color: #2a2a2a;
    padding: 6px 14px;
    font-size: 0.70rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    animation: floatBadge 3.5s ease-in-out infinite;
    z-index: 3;
}

.badge-dark {
    background: #1a1a1a;
    color: #fff;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* --- Text Information --- */
.card-info-gallery {
    height: 100px;
    padding-top: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.category {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.name {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    color: #1a1a1a;
    margin-bottom: 10px;
    line-height: 1.3;
    /* Truncate text elegantly */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-huge .name {
    font-size: 1.6rem;
}

/* --- The Magical Price / Add-To-Cart Slider --- */
.price-wrap {
    height: 30px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.price {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #b76e79;
    font-size: 1.15rem;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
    transform: translateY(0);
}

.add-to-cart {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: transparent;
    border: none;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1a1a1a;
    cursor: pointer;
    transform: translateY(100%); /* Hides below */
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.add-to-cart i {
    transition: transform 0.3s ease;
}

.add-to-cart:hover i {
    transform: translateX(4px);
    color: #b76e79;
}

.product-card-gallery:hover .price {
    transform: translateY(-100%);
    opacity: 0;
}

.product-card-gallery:hover .add-to-cart {
    transform: translateY(0);
    opacity: 1;
}

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ====================== FOOTER SECTION START ======================== */

/* --- Site Footer Main Wrapper --- */
.site-footer {
    position: relative;
    background: var(--bg-dark);
    color: var(--text-light);
    font-family: var(--font-sans);
    overflow: hidden;
    border-top: 2px solid var(--gold);
}

/* Radial Overlay for depth */
.footer-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 100%, var(--bg-maroon) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

/* Animated Gold Dust Background */
.footer-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: 
        radial-gradient(1.5px 1.5px at 15% 25%, var(--gold-main) 50%, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 75% 15%, var(--gold-light) 50%, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 50% 80%, var(--gold-dark) 50%, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 85% 65%, var(--gold-main) 50%, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 25% 75%, var(--gold-light) 50%, rgba(0,0,0,0));
    background-size: 150px 150px;
    opacity: 0.2;
    animation: floatUp 40s linear infinite;
}

.footer-particles::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: 250px 250px;
    animation: floatUp 60s linear infinite reverse;
    opacity: 0.6;
}

@keyframes floatUp {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-50px) scale(1.1); }
    100% { transform: translateY(0) scale(1); }
}

.footer-container {
    position: relative;
    z-index: 5;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 5% 20px;
}

/* --- Newsletter Section --- */
.footer-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
}

.newsletter-text h3 {
    font-family: var(--font-title);
    font-size: 2rem;
    color: var(--gold-light);
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.newsletter-text p {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 300;
    font-family: var(--font-serif);
    font-style: italic;
}

.newsletter-form {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 500px;
}

.newsletter-form input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.4);
    padding: 15px 20px;
    color: var(--text-light);
    font-family: var(--font-sans);
    font-size: 1rem;
    outline: none;
    transition: var(--transition-smooth);
}

.newsletter-form input:focus {
    border-bottom-color: var(--gold-main);
    background: rgba(212, 175, 55, 0.03);
}

.newsletter-form input::placeholder {
    color: rgba(181, 169, 150, 0.5);
}

.newsletter-form button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: transparent;
    border: none;
    color: var(--gold-main);
    padding: 0 20px;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.newsletter-form button:hover {
    color: var(--gold-light);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
    transform: scale(1.05);
}

/* --- Footer Grid Links --- */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 50px;
    margin-bottom: 60px;
}

/* Brand Column */
.footer-brand .brand-logo {
    font-family: var(--font-title);
    font-size: 2.2rem;
    color: var(--gold-main);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
    background: linear-gradient(to right, var(--gold-light), var(--gold-main), var(--gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: var(--transition-smooth);
}

.footer-brand p {
    color: var(--text-muted);
    line-height: 1.8;
    font-size: 0.95rem;
    margin-bottom: 25px;
    padding-right: 20px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    color: var(--gold-main);
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
    background: transparent;
}

.social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gold-main);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: -1;
}

.social-link:hover {
    color: var(--bg-dark);
    border-color: var(--gold-main);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    transform: translateY(-5px);
}

.social-link:hover::before {
    transform: scale(1);
}

/* Links Columns */
.footer-links h4 {
    font-family: var(--font-serif);
    color: var(--text-light);
    font-size: 1.25rem;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.footer-links h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--gold-main);
    transition: var(--transition-smooth);
}

.footer-links:hover h4::after {
    width: 100%;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    position: relative;
    display: inline-block;
}

/* Hover Magic Line Animation */
.footer-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold-light);
    transition: width 0.3s ease;
}

.footer-links a:hover {
    color: var(--gold-light);
    transform: translateX(8px);
}

.footer-links a:hover::after {
    width: 100%;
}

/* Contact Details */
.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    transition: var(--transition-smooth);
}

.contact-item:hover {
    color: var(--text-light);
}

.contact-item i {
    color: var(--gold-main);
    font-size: 1.2rem;
    margin-top: 3px;
    transition: var(--transition-smooth);
}

.contact-item:hover i {
    transform: scale(1.2) rotate(10deg);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* --- Footer Bottom --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid rgba(212, 175, 55, 0.1);
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-text p span {
    color: var(--gold-main);
    font-family: var(--font-serif);
    font-style: italic;
}

.payment-icons {
    display: flex;
    gap: 15px;
    font-size: 1.5rem;
    color: rgba(245, 240, 230, 0.5);
}

.payment-icons i {
    transition: var(--transition-smooth);
    cursor: pointer;
}

.payment-icons i:hover {
    color: var(--gold-light);
    transform: translateY(-3px);
}

/* ================================= BRAND AND PRODUCTS SLIDER ========================= */

.p-80{
    padding: 20px 0;
    /* background: radial-gradient(circle at center, var(--bg-maroon) 0%, #0a0002 80%); */
}
.smooth-carousel .owl-stage {
  transition-timing-function: linear !important;
}
.item-brand img{
    border-radius: 12px;
    height: 120px;
    object-fit: cover;
    border: 1px solid var(--gold);
}

/* ================= ***** NEW ARRIVEL PAGE START **********================ */

/* --- Banner Container --- */
.minimal-hero {
    position: relative;
    width: 100%;
    min-height:calc(100vh - 130px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 5%;
    background: radial-gradient(circle at center, var(--bg-maroon) 0%, #0a0002 80%);
    overflow: hidden;
    margin-top: 130px;
}

/* Diagonal subtle background accent */
.minimal-hero::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 60%; height: 140%;
    background: linear-gradient(120deg, var(--bg-white) 0%, rgba(203, 171, 88, 0.03) 100%);
    transform: rotate(-15deg);
    z-index: 1;
}

.hero-layout {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1300px;
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 60px;
    align-items: center;
}

/* --- Left Side: Massive Clean Visual --- */
.mh-visual {
    position: relative;
    width: 100%;
    height: 65vh;
    min-height: 300px;
    /* The sleek entrance mask */
    overflow: hidden;
}

.mh-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.mh-img-wrapper::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--bg-white);
    animation: slideUpMask 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    z-index: 2;
}

.mh-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.1);
    animation: slowZoomOut 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Overlay text on image */
.mh-img-overlay {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: white;
    z-index: 3;
    opacity: 0;
    animation: fadeIn 1s ease 1.5s forwards;
}

.mh-img-overlay span {
    font-size: 0.8rem;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* --- The Unique Rotating Badge Overlap --- */
.circular-badge {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(253, 251, 248, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(203, 171, 88, 0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    /* Entrance */
    opacity: 0;
    animation: fadePopIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1s forwards;
}

.circular-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: spin-text 15s linear infinite;
}

.circular-text svg {
    width: 100%;
    height: 100%;
    fill: var(--text-dark);
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}

.center-icon {
    color: #970c0c;
    font-size: 40px;
}

/* --- Right Side: Typography & Secondary Content --- */
.mh-content {
    padding: 40px 0 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mh-eyebrow {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--gold-primary);
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 25px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 15px;
    /* anim */
    opacity: 0;
    transform: translateX(30px);
    animation: slideLeft 0.8s ease 0.5s forwards;
}

.mh-eyebrow::before {
    content: '';
    width: 40px; height: 1px;
    background: var(--gold-primary);
}

.mh-title {
    font-family: var(--font-title);
    font-size: clamp(3.5rem, 5vw, 5rem);
    color: #fff;
    line-height: 1.1;
    margin-bottom: 30px;
    font-weight: 400;
}

.mh-title .highlight {
    font-style: italic;
    color: var(--gold-primary);
    display: block;
}

/* Letter staggering wrapper */
.word-reveal {
    overflow: hidden;
    display: block;
    padding-bottom: 5px;
}

.word-reveal span {
    display: block;
    transform: translateY(100%);
    animation: slideUpChar 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.mh-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.8;
    margin-bottom: 30px;
    max-width: 85%;
    font-weight: 300;
    /* anim */
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpFade 0.8s ease 1.1s forwards;
}

.mh-button {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--gold);
    text-decoration: none;
    font-weight: 700;
    position: relative;
    align-self: flex-start;
    /* anim */
    opacity: 0;
    animation: slideUpFade 0.8s ease 1.3s forwards;
}

.mh-button::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0;
    width: 100%; height: 1px;
    background: var(--text-dark);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.mh-button:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    background: var(--gold-primary);
}

.mh-button i {
    transition: transform 0.3s ease;
    color: var(--gold-primary);
}

.mh-button:hover i {
    transform: translateX(5px);
}

/* Small offset secondary image for asymmetry */
.mh-secondary-visual {
    position: absolute;
    bottom: -40px;
    right: 10%;
    width: 200px;
    height: 250px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-white);
    padding: 10px;
    /* anim */
    opacity: 0;
    transform: translateY(40px);
    animation: slideUpFade 1s ease 1.5s forwards;
}

.mh-secondary-visual img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* --- Animations --- */
@keyframes slideUpMask {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes slowZoomOut {
    0% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes slideUpChar {
    0% { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

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

@keyframes slideUpFade {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes fadePopIn {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes spin-text {
    100% { transform: rotate(360deg); }
}

.btn-new{
  width: fit-content;
  animation: slideUpFade 0.8s ease 1.3s forwards;
}

/* ============** ARRIVEL PAGE OFFER SECTION START ** ============ */

.prism-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    background: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Tenor Sans', sans-serif;
}

/* Background Animation: Moving Liquid Mesh */
.mesh-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,30%,0.2) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,0.2) 0, transparent 50%);
    filter: blur(100px);
    opacity: 0.8;
    animation: meshMove 10s ease infinite alternate;
}

@keyframes meshMove {
    0% { transform: scale(1); }
    100% { transform: scale(1.2) rotate(5deg); }
}

.luxury-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1200px;
    width: 90%;
    gap: 80px;
    align-items: center;
}

/* IMAGE PART: 3D Animation */
.image-box {
    position: relative;
    perspective: 1000px;
    cursor: crosshair;
}

.main-img-arriving {
    width: 100%;
    border-radius: 4px;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 50px 100px rgba(0,0,0,0.5);
    border: 6px solid #b38728;
}

.card-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
}

.floating-price-tag {
    position: absolute;
    top: 30px;
    left: -20px;
    /* bottom: -20px;
    right: -20px; */
    background: var(--gold-gradient);
    padding: 20px 30px;
    font-weight: bold;
    color: #000;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    animation: floatTag 3s ease-in-out infinite;
}

@keyframes floatTag {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* CONTENT PART */
.eyebrow {
    color: red;
    letter-spacing: 5px;
    font-size: 0.7rem;
    text-transform: uppercase;
}

.glitch-gold {
    font-family: 'Syncopate', sans-serif;
    font-size: 4.5rem;
    color: #fff;
    line-height: 0.85;
    margin: 20px 0;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.offer-footer {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

.discount-pill {
    border: 2px solid #ffffff;
    padding: 10px 25px;
    border-radius: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.discount-pill .val {
    font-size: 1.5rem;
    color: #ff0000;
    font-weight: bold;
}

.discount-pill .label-arrivel {
    font-size: 0.6rem;
    color: #ffffff;
}
.offer-arrivel-description{
    color: #fff;
}
.cta-luxury {
    background: #fff;
    border: none;
    padding: 18px 40px;
    font-family: 'Syncopate', sans-serif;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 2px;
    cursor: pointer;
    transition: 0.4s;
}

.cta-luxury:hover {
    letter-spacing: 5px;
    background: #b38728;
    color: #fff;
}
/* Decorative Background Text */
.bg-text {
    position: absolute;
    font-size: 15vw;
    font-weight: 600;
    /* color: rgba(119, 4, 4, 0.5); */
    white-space: nowrap;
    z-index: 1;
    animation: slideText 6s linear infinite;
    margin-left: -50%;
    rotate: 90deg;
    -webkit-text-stroke: 1px rgba(119, 4, 4, 0.7);
    background-color: transparent;
}

@keyframes slideText {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

/* ================== **** COLLECTION PAGE BANNER ****** ================= */

  /* === SECTION LAYOUT === */
.collection-hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #070002; /* Base layer */
    z-index: 1;
    margin-top: 130px;
}

/* === ANIMATED MAROON & BLACK MESH GRADIENT === */
.gradient-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background: linear-gradient(125deg, #070002 20%, #2b000b 50%, #070002 80%);
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.blob-maroon {
    position: absolute;
    top: 20%;
    right: 10%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, #6b001a 0%, transparent 60%);
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.6;
    z-index: -2;
    animation: floatBlob 12s infinite alternate ease-in-out;
}

.blob-dark {
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #1c0007 0%, transparent 65%);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.8;
    z-index: -2;
    animation: floatBlob 18s infinite alternate-reverse ease-in-out;
}

@keyframes floatBlob {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.2) translate(-30px, 50px); }
}

/* Subtle Noise Texture for Premium Print feel */
.noise-overlay {
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: -1;
}

/* === GRID CONTAINER === */
.container-collection-hero {
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

/* === TEXT CONTENT (Left Column) === */
.text-column-collection {
    flex: 1;
    max-width: 550px;
    padding-right: 20px;
}

.subheading {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #D4AF37;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 5px;
    margin-bottom: 30px;
    font-weight: 400;
}

.subheading::before {
    content: '';
    width: 50px;
    height: 1px;
    background-color: #D4AF37;
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(4rem, 7vw, 7rem);
    line-height: 1.05;
    margin-bottom: 40px;
    position: relative;
}

.hero-title .solid {
    display: block;
    font-weight: 500;
    color: #fff;
}

.hero-title .outline {
    display: block;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.9);
    font-weight: 500;
    padding-left: 10%;
}

.hero-title .italic {
    display: block;
    font-style: italic;
    font-weight: 300;
    color: #D4AF37;
    font-size: clamp(3.5rem, 6vw, 6rem);
    padding-left: 20%;
}

.description-banner-collection {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 200;
    margin-bottom: 50px;
    padding-left: 10%;
    border-left: 1px solid rgba(212, 175, 55, 0.3);
    margin-left: 10%;
}

/* CTA Button */
.cta-btn {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    font-weight: 300;
    position: relative;
    margin-left: 10%;
    padding-bottom: 10px;
}

.cta-btn i {
    margin-left: 12px;
    color: #D4AF37;
    transition: transform 0.4s ease;
}

.cta-btn .line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #D4AF37;
    transform: scaleX(0.4);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.cta-btn:hover .line {
    transform: scaleX(1);
}

.cta-btn:hover i {
    transform: translateX(10px);
}

/* === IMAGE GALLERY (Right Column) === */
.gallery-column {
    flex: 1;
    position: relative;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fashion Arch Style Cards */
.arch-card {
    position: absolute;
    background: #111;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.15);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.arch-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85) saturate(1.2);
    transition: all 0.8s ease;
}

.arch-card:hover {
    z-index: 10;
}

.arch-card:hover img {
    filter: brightness(1.1) saturate(1.1);
    transform: scale(1.08);
}

/* Front Floating Image */
.img-front {
    width: 320px;
    height: 460px;
    border-radius: 160px 160px 0 0; /* Classic arch */
    border-bottom: 3px solid #D4AF37;
    right: 0%;
    top: 5%;
    z-index: 3;
    animation: floatCard 8s ease-in-out infinite;
}

/* Back Floating Image */
.img-back {
    width: 260px;
    height: 380px;
    border-radius: 0 0 130px 130px; /* Reverse arch */
    border-top: 3px solid #D4AF37;
    left: 20%;
    bottom: 5%;
    z-index: 2;
    animation: floatCardReverse 10s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 20px rgba(0,0,0,0.9));
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-20px) rotate(0deg); }
}

@keyframes floatCardReverse {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(25px) rotate(1deg); }
}

/* === ROTATING GOLD EMBLEM === */
.emblem-wrapper {
    position: absolute;
    top: 33%;
    left: 54%;
    z-index: 999;
}

.emblem {
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: rgba(10, 0, 5, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    border: 1px solid #d4af37;
    /* Removed rotation from main wrapper so entrance animation can play */
}

.emblem svg {
    width: 100%;
    height: 100%;
    position: absolute;
    animation: spinSvg 20s linear infinite;
}

@keyframes spinSvg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.emblem path {
    fill: none;
}

.emblem text {
    font-size: 11px;
    font-family: var(--font-sans);
    fill: #D4AF37;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.emblem .inner-icon {
    font-size: 28px;
    color: #D4AF37;
    /* Main container no longer spins, so the inner icon stays straight natively */
}

/* === INITIAL ANIMATION CLASSES === */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    animation: slideFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }

@keyframes slideFadeUp {
    to { opacity: 1; transform: translateY(0); }
}


/* ============= COLLECTION OFFER SECTION ================== */

.offer-container {
    position: relative;
    /* height: 80vh; */
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: start;
    overflow: hidden;
    color: white;
    background: url('/images/offer9.png') no-repeat top center;
    background-size: cover;
}

/* Decorative Background Text */
.bg-text {
    position: absolute;
    font-size: 15vw;
    font-weight: 900;
    color: rgba(212, 175, 55, 0.05);
    white-space: nowrap;
    z-index: 1;
    animation: slideText 20s linear infinite;
}

@keyframes slideText {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

/* Main Content Box */
.offer-card {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px;
    border: 3px solid var(--gold);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    max-width: 600px;
    animation: fadeInUp 1.5s ease-out;
    margin-left: 100px;
}

.offer-card h3 {
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--gold);
    margin-bottom: 10px;
    font-size: 1rem;
}

.offer-card h1 {
    font-size: 40px;
    margin: 0;
    font-weight: 800;
    color: #fff;
    font-family: "Cinzel Decorative", serif;
}

.discount-badge-collection {
    display: inline-block;
    background: var(--gold);
    color: black;
    padding: 10px 25px;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 20px 0;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    animation: pulse 2s infinite;
}

.offer-card p {
    font-style: italic;
    opacity: 0.8;
    line-height: 1.6;
}

/* Floating Jewelry Assets (Placeholders) */
.floating-asset {
    position: absolute;
    z-index: 3;
    width: 150px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    animation: float 4s ease-in-out infinite;
}

.asset-1 { top: 15%; left: 10%; animation-delay: 0s; }

/* Buttons */
.cta-btn-offer-on {
    margin-top: 30px;
    padding: 15px 40px;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.4s;
}

.cta-btn-offer-on:hover {
    background: var(--gold);
    color: black;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

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

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ====================== TRANDING SECTION START =================== */

.luxury-gallery {
  padding: 80px 4%;
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
}

/* Grid Layout */
.jewel-row {
  display: flex;
  gap: 25px;
  max-width: 1300px;
  margin: 0 auto;
}

.jewel-item {
  flex: 1;
  position: relative;
}

.image-container {
  position: relative;
  height: 550px;
  width: 100%;
  overflow: hidden;
  background-color: #000;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.15, 0.83, 0.66, 1);
  opacity: 0.9;
}

/* Static Info (Always Visible) */
.static-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  z-index: 2;
  transition: 0.5s ease;
  pointer-events: none;
}

.static-info .tag {
  background: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.static-info h3 {
  font-family: 'Cinzel', serif;
  color: #fff;
  font-size: 24px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
  margin: 0;
}

/* Hover Overlay (Revealed on Hover) */
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dimming the background */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 40px;
  box-sizing: border-box;
  opacity: 0;
  transition: all 0.6s ease;
  z-index: 3;
}

.hover-overlay .description-para {
  color: #ddd;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 15px;
  transform: translateY(20px);
  transition: 0.6s ease;
}

.hover-overlay .price {
  color: #bfa37d;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 25px;
}

.cta-gold {
  background: transparent;
  border: 1px solid #bfa37d;
  color: #fff;
  padding: 12px 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 11px;
  cursor: pointer;
  transition: 0.3s;
}

/* HOVER EFFECTS */
.jewel-item:hover img {
  transform: scale(1.1);
  opacity: 0.6;
}

.jewel-item:hover .static-info {
  opacity: 0; /* Fade out top text to show description */
}

.jewel-item:hover .hover-overlay {
  opacity: 1;
}

.jewel-item:hover .description-para {
  transform: translateY(0);
}

.cta-gold:hover {
  background: #bfa37d;
  color: #fff;
}


/* =========== BRIDAL PAGE BANNER SECTION =============== */

/* === BRIDAL HERO WRAPPER === */
.bridal-banner-wrap {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
    background: radial-gradient(circle at center, var(--white) 0%, var(--bg-bridal) 70%);
    padding: 60px 0;
    overflow: hidden;
    margin-top: 130px;
}

/* Ambient Glowing Background Text */
.marquee-bg {
    position: absolute;
    top: 50%;
    left: -50%;
    width: 200vw;
    transform: translateY(-50%) rotate(-12deg);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0.4;
}

.marquee-track {
    display: flex;
    white-space: nowrap;
    animation: marquee 50s linear infinite;
}

.marquee-track span {
    font-size: clamp(6rem, 10vw, 10rem);
    font-family: var(--font-serif);
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 1px rgba(203, 161, 53, 0.4);
    padding: 0 50px;
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Pure CSS Diamond Sparkles */
.css-sparkle {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
    animation: flashSparkle 4s infinite;
    z-index: 1;
}

.css-sparkle::before, .css-sparkle::after {
    content: '';
    position: absolute;
    background: var(--accent-gold);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-gold);
}

.css-sparkle::before { width: 100%; height: 2px; top: 9px; left: 0; }
.css-sparkle::after { width: 2px; height: 100%; top: 0; left: 9px; }

.css-sparkle-1 { top: 15%; left: 40%; transform: scale(0.8); animation-delay: 0s; }
.css-sparkle-2 { top: 80%; right: 45%; transform: scale(1.2); animation-delay: 2s; }
.css-sparkle-3 { bottom: 25%; left: 5%; transform: scale(0.6); animation-delay: 1.2s; }

@keyframes flashSparkle {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50% { opacity: 0.8; transform: scale(1.2) rotate(90deg); }
}

/* === GRID CONTAINER === */
.container-bridal {
    max-width: 1350px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* === LEFT CONTENT (Text & Sales CTA) === */
.text-column {
    position: relative;
}

.badge-bridal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(203, 161, 53, 0.1);
    color: var(--accent-gold);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid rgba(203, 161, 53, 0.2);
}

.badge-bridal .dot {
    width: 6px;
    height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

.main-title {
    font-size: clamp(3.5rem, 6vw, 5.5rem);
    line-height: 1.1;
    color: var(--text-dark);
    font-family: var(--font-serif);
    margin-bottom: 30px;
}

.main-title .line-1 { font-weight: 400; }
.main-title .line-2 {
    font-style: italic;
    color: var(--accent-gold);
    font-weight: 300;
}

.main-title .line-3 {
    position: relative;
    display: inline-block;
    font-weight: 600;
}

/* Animated baseline indicator for visual pop */
.main-title .line-3::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--accent-gold);
    animation: drawLine 1.5s cubic-bezier(0.85, 0, 0.15, 1) forwards 1s;
}

@keyframes drawLine {
    to { width: 100%; }
}

.description {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 45px;
    font-weight: 300;
    max-width: 500px;
}

/* High-Converting CTA Actions */
.action-row {
    display: flex;
    gap: 25px;
    align-items: center;
    margin-bottom: 50px;
}

.btn-primary {
    background: transparent;
    color: var(--gold);
    padding: 16px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 400;
    font-size: 1.05rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--gold);
}

.btn-primary:hover {
    background: var(--gold);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    transition: color 0.3s ease;
    position: relative;
}

.btn-secondary::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--text-dark);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.btn-secondary:hover {
    color: var(--accent-gold);
}

.btn-secondary:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    background: var(--accent-gold);
}

/* Sales Trust Badges */
.trust-row {
    display: flex;
    gap: 30px;
    border-top: 1px solid rgba(0,0,0,0.06);
    padding-top: 30px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-gold);
    box-shadow: 0 8px 16px rgba(0,0,0,0.04);
    font-size: 1.1rem;
}

.trust-item span {
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--text-dark);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* === RIGHT VISUALS (Images & Floating Product Card) === */
.visual-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Animated border ring for luxury essence */
.frame-border {
    position: absolute;
    width: 460px;
    height: 640px;
    border-radius: 230px;
    border: 1px solid var(--accent-gold);
    top: 20px;
    right: 0px;
    z-index: 0;
    animation: floatingBorder 8s ease-in-out infinite;
}

@keyframes floatingBorder {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-10px, -20px) rotate(-2deg); }
}

/* Main Image clip-path reveal */
.large-frame {
    width: 460px;
    height: 640px;
    border-radius: 230px; /* Elegant pill shape */
    z-index: 1;
    position: relative;
    box-shadow: 0 40px 80px rgba(0,0,0,0.15);
    overflow: hidden;
    margin-right: 20px;
}

.large-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
    animation: imageScaleReveal 1.8s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.2s;
}

/* Curtain Reveal Effect */
.large-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-secondary);
    animation: curtainReveal 1.4s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.2s;
    z-index: 2;
}

@keyframes curtainReveal {
    0% { transform: translateY(0); }
    100% { transform: translateY(-101%); }
}

@keyframes imageScaleReveal {
    0% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* === FLOATING "BUY NOW" PRODUCT CARD === */
/* Used to immediately establish a "Sell/Converting" website format */
.product-card-float {
    position: absolute;
    bottom: 10%;
    left: -20%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,1);
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    width: 260px;
    z-index: 10;
    animation: levitate 6s ease-in-out infinite;
    opacity: 1;
}

.card-img-wrap {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card-float:hover .card-img-wrap img {
    transform: scale(1.1);
}

/* Quick-add tag inside image */
.tag-sale {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--accent-gold);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 15px;
    letter-spacing: 1px;
}

.card-info {
    text-align: center;
    background: transparent;
}

.stars {
    color: #FABB05;
    font-size: 11px;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.card-info h4 {
    font-size: 1.05rem;
    color: var(--text-dark);
    font-family: var(--font-serif);
    margin: 5px 0 10px 0;
    font-weight: 600;
}

.price-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.price {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--text-dark);
}

.old-price {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.btn-add-cart {
    width: 100%;
    padding: 12px;
    background: var(--bg-secondary);
    color: var(--text-dark);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-add-cart:hover {
    background: var(--text-dark);
    color: var(--white);
}

@keyframes levitate {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* === INITIAL REVEAL CLASSES === */
.reveal-up-bridal {
    opacity: 0;
    transform: translateY(30px);
    animation: slideFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }
.delay-6 { animation-delay: 1.2s; }

@keyframes slideFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes levitateMobile {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -15px); }
}


/* ============== BRIDAL PAGE OFFER SECTION START ====================*/

.bridal-offer-parents{
    min-height: auto;
    font-family: "Inter", sans-serif;
    background: radial-gradient(circle at 15% 20%, #391327 0%, transparent 38%),
                radial-gradient(circle at 85% 78%, #6a1f44 0%, transparent 33%),
                linear-gradient(130deg, var(--bg-start), var(--bg-end));
    color: var(--ivory);
    display: grid;
    place-items: center;
    padding: 100px 0px;
}
.bridal-offer {
    width: 100%;
    min-height: auto;
    border-radius: 34px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(24, 10, 20, 0.92), rgba(38, 14, 30, 0.96));
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(246, 202, 120, 0.08);
    padding: clamp(1.3rem, 3vw, 2.8rem);
    isolation: isolate;
}

.bridal-offer::before,
.bridal-offer::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.bridal-offer::before {
    width: 380px;
    height: 380px;
    top: -120px;
    right: -120px;
    background: radial-gradient(circle, rgba(255, 79, 154, 0.27), transparent 70%);
    animation: floatBloom 8s ease-in-out infinite;
}

.bridal-offer::after {
    width: 430px;
    height: 430px;
    bottom: -180px;
    left: -140px;
    background: radial-gradient(circle, rgba(246, 202, 120, 0.25), transparent 70%);
    animation: floatBloom 10s ease-in-out infinite reverse;
}

@keyframes floatBloom {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-18px); }
}

.offer-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(1.4rem, 2.5vw, 2.4rem);
    align-items: center;
    min-height: 100%;
}

.offer-copy {
    animation: riseIn 1s ease;
}

@keyframes riseIn {
    from {
        transform: translateY(35px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22rem;
    font-size: 0.74rem;
    color: var(--text-soft);
    margin-bottom: 16px;
}

.label::before {
    content: "";
    width: 36px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold));
}

.offer-copy h1 {
    font-family: "Cinzel", serif;
    font-size: 50px;
    line-height: 1.04;
    color: var(--ivory);
    margin-bottom: 16px;
}

.offer-copy h1 span {
    color: var(--gold);
    text-shadow: 0 0 20px rgba(246, 202, 120, 0.42);
}

.offer-text-bridal {
    max-width: 54ch;
    line-height: 1.8;
    color: #f5decb;
    margin-bottom: 24px;
    font-size: clamp(0.95rem, 1.2vw, 1.06rem);
}

.discount-box {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 14px 18px;
    border-radius: 18px;
    margin-bottom: 22px;
    border: 1px solid var(--panel-border);
    background: linear-gradient(140deg, rgba(255, 79, 154, 0.14), rgba(246, 202, 120, 0.08));
    box-shadow: inset 0 0 24px rgba(255, 79, 154, 0.18), 0 10px 24px rgba(0, 0, 0, 0.32);
    animation: pulseOffer 2.5s ease-in-out infinite;
}

@keyframes pulseOffer {
    0%, 100% {
        transform: scale(1);
        box-shadow: inset 0 0 24px rgba(255, 79, 154, 0.15), 0 10px 24px rgba(0, 0, 0, 0.3);
    }
    50% {
        transform: scale(1.03);
        box-shadow: inset 0 0 30px rgba(255, 79, 154, 0.25), 0 14px 28px rgba(0, 0, 0, 0.42);
    }
}

.discount-value {
    font-family: "Cinzel", serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    color: var(--gold);
    line-height: 1;
}

.discount-meta {
    font-size: 0.83rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    color: #ffe3c3;
}

.offer-action {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-bridal-online {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14rem;
    font-size: 0.77rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.9rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.btn-main {
    color: #351706;
    background: linear-gradient(120deg, #ffdfab 0%, var(--gold) 45%, var(--gold-deep) 100%);
    box-shadow: 0 12px 26px rgba(194, 140, 47, 0.35);
}

.btn-sub {
    color: var(--ivory);
    border: 1px solid var(--panel-border);
    background: var(--panel);
}

.btn-bridal-online:hover {
    transform: translateY(-3px);
}

.btn-sub:hover {
    color: var(--gold);
    box-shadow: 0 10px 22px rgba(246, 202, 120, 0.2);
}

.showcase {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center;
    perspective: 900px;
}

.ring-glow {
    position: absolute;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(246, 202, 120, 0.45);
    transform: rotateX(68deg);
    animation: spinRing 12s linear infinite;
}

.ring-glow.two {
    width: 88%;
    opacity: 0.5;
    animation-direction: reverse;
    animation-duration: 16s;
}

@keyframes spinRing {
    from { transform: rotateX(68deg) rotateZ(0deg); }
    to { transform: rotateX(68deg) rotateZ(360deg); }
}

.cards {
    width: min(100%, 460px);
    height: 360px;
    position: relative;
}

.jewel-card {
    position: absolute;
    width: 210px;
    height: 270px;
    border-radius: 24px;
    border: 1px solid var(--panel-border);
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02) 55%, rgba(0, 0, 0, 0.2));
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.38), inset 0 0 40px rgba(246, 202, 120, 0.1);
    backdrop-filter: blur(5px);
    overflow: hidden;
    padding: 15px;
}

.jewel-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 40%, transparent 70%, rgba(246, 202, 120, 0.16));
    pointer-events: none;
}

.jewel-card.one {
    left: 5%;
    top: 42px;
    transform: rotate(-7deg);
    animation: floatCardA 6s ease-in-out infinite;
}

.jewel-card.two {
    right: 4%;
    top: 18px;
    transform: rotate(8deg);
    animation: floatCardB 6.7s ease-in-out infinite;
}

@keyframes floatCardA {
    0%, 100% { transform: rotate(-7deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-15px); }
}

@keyframes floatCardB {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50% { transform: rotate(5deg) translateY(-18px); }
}

.card-image {
    height: 68%;
    border-radius: 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.5), transparent 35%),
                linear-gradient(135deg, #f5ce87 0%, #b57a2e 38%, #5d2f19 100%);
}

.card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 20%, rgba(10, 3, 8, 0.6) 100%);
}

.ornament {
    position: absolute;
    z-index: 2;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.ornament.ring {
    width: 70px;
    height: 70px;
    left: 52%;
    top: 42%;
    transform: translate(-50%, -50%);
}

.ornament.drop {
    width: 14px;
    height: 56px;
    border-radius: 15px;
    left: 48%;
    top: 47%;
    transform: rotate(15deg);
}

.card-title {
    font-family: "Cinzel", serif;
    font-size: 1rem;
    letter-spacing: 0.04rem;
    color: #ffe8c4;
}

.card-sub {
    font-size: 0.77rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #f6d6ad;
    margin-top: 4px;
}

.sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.spark-offer {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--gold) 55%, transparent 100%);
    box-shadow: 0 0 12px rgba(246, 202, 120, 0.78);
    animation: sparkleMove linear infinite;
}

.spark-offer:nth-child(1) { top: 18%; left: 20%; animation-duration: 4s; }
.spark-offer:nth-child(2) { top: 72%; left: 14%; animation-duration: 5.2s; animation-delay: 1s; }
.spark-offer:nth-child(3) { top: 30%; right: 18%; animation-duration: 4.8s; animation-delay: 0.6s; }
.spark-offer:nth-child(4) { bottom: 14%; right: 26%; animation-duration: 5.6s; animation-delay: 1.4s; }
.spark-offer:nth-child(5) { top: 56%; left: 48%; animation-duration: 4.5s; animation-delay: 2s; }
.spark-offer:nth-child(6) { top: 12%; right: 40%; animation-duration: 5s; animation-delay: 0.8s; }

@keyframes sparkleMove {
    0% { transform: translateY(0) scale(0.8); opacity: 0; }
    20%, 80% { opacity: 1; }
    100% { transform: translateY(-40px) scale(1.2); opacity: 0; }
}

.corner-tag {
    position: absolute;
    right: 22px;
    bottom: 18px;
    font-size: 0.74rem;
    color: #ffdca9;
    letter-spacing: 0.15rem;
    text-transform: uppercase;
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(246, 202, 120, 0.45);
    background: rgba(0, 0, 0, 0.35);
    z-index: 2;
}
.card-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ============== BRIDAL PAGE tranding SECTION END ====================*/


.bridal-section {
    padding: 80px 4%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 50px;
    align-items: start;
}
.title-traanding-bridal{
    margin-left: 0;
}

/* Left Side: Editorial Content */
.content-box {
    position: sticky;
    top: 120px;
    text-align: left;
    min-width: 100%;
}

.tagline {
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.8rem;
    color: var(--gold);
    display: block;
    margin-bottom: 20px;
}

.description-bridal-section {
    font-family: 'Inter', sans-serif;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 40px;
}

/* Right Side: Animated Cards */
.collection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.jewel-card-bridal-tranding {
    background: #fff;
    border: 1px solid var(--gold-light-bridal);
    padding: 20px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.jewel-card-bridal-tranding:hover {
    transform: translateY(-10px);
    border-color: var(--gold);
}

/* The "Glint" Animation Effect */
.jewel-card-bridal-tranding::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(30deg);
    transition: 0.6s;
}

.jewel-card-bridal-tranding:hover::after {
    left: 120%;
}

.jewel-img {
    width: 100%;
    height: 350px;
    background: #151515; /* Placeholder for actual images */
    border-radius: 10px;
    margin-bottom: 20px;
    object-fit: cover;
    background-position: center;
}

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

.jewel-info h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.price {
    color: var(--gold);
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

.cta-btn-bridal-section {
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
    padding: 12px 30px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
}

.cta-btn-bridal-section:hover {
    background: var(--gold);
    color: black;
}



/* ===================== ABOUT PAGE BANNER START =================== */

.about-banner {
    position: relative;
    width: 100%;
    min-height: auto;
    /* margin: 4vh auto; */
        background: radial-gradient(circle at center, var(--bg-maroon) 0%, #0a0002 80%);
    border: 1px solid var(--card-border);
    overflow: hidden;
    isolation: isolate;
    margin-top: 130px;
    overflow: hidden;
}

.light-noise {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image:
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%),
        radial-gradient(circle, #ffffff 1px, transparent 1px);
    background-size: 240px 240px, 18px 18px;
    animation: shimmerPass 9s linear infinite;
    pointer-events: none;
}

@keyframes shimmerPass {
    from {
        transform: translateX(-10%);
    }
    to {
        transform: translateX(10%);
    }
}

.banner-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 2rem;
    align-items: center;
    min-height: inherit;
    padding: 50px 0;
}
.realtive{
    position: relative;
}
.about-copy {
    max-width: 620px;
    animation: revealUp 1s ease forwards;
}

@keyframes revealUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.eyebrow-about-page {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.78rem;
    letter-spacing: 0.24rem;
    text-transform: uppercase;
    color: #d7cab4;
    margin-bottom: 1.1rem;
}

.eyebrow-about-page::before {
    content: "";
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, transparent, #f8d88d);
}

.about-copy h1 {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.5rem, 6.3vw, 4.8rem);
    line-height: 0.95;
    letter-spacing: 0.03rem;
    margin-bottom: 1.2rem;
    background: linear-gradient(128deg, #fef7e8 0%, #f8d88d 40%, #c7902e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.about-copy h1 span {
    display: block;
    font-size: clamp(1.4rem, 3.6vw, 2.7rem);
    font-weight: 500;
    letter-spacing: 0.34rem;
    margin-top: 0.6rem;
}

.about-text {
    font-size: clamp(0.98rem, 1.5vw, 1.13rem);
    line-height: 1.8;
    color: #eee2d0;
    max-width: 56ch;
    margin-bottom: 2rem;
}

.about-text strong {
    color: var(--gold-1);
    font-weight: 500;
}

.about-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.btn-about {
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.16rem;
    text-transform: uppercase;
    padding: 0.95rem 1.8rem;
    border-radius: 999px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}

.btn-primary-about {
    color: #27180a;
    background: linear-gradient(125deg, #ffe5ab 0%, #f8d88d 35%, #c7902e 100%);
    box-shadow: 0 12px 30px rgba(199, 144, 46, 0.35);
}

.btn-secondary-about {
    color: #f8f3ea;
    border: 1px solid rgba(248, 216, 141, 0.24);
    background: rgba(255, 255, 255, 0.03);
}

.btn-about::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.45) 50%, transparent 75%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}

.btn-about:hover::after {
    transform: translateX(120%);
}

.btn-about:hover {
    transform: translateY(-3px);
}

.btn-secondary-about:hover {
    box-shadow: 0 10px 24px rgba(248, 216, 141, 0.2);
    color: var(--gold-1);
}

.trust-row-about {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.trust-card {
    min-width: 120px;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(248, 216, 141, 0.2);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(5px);
}

.trust-card b {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.8rem;
    color: #f8d88d;
    line-height: 1;
}

.trust-card span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #d7c7ac;
}

.visual-stage {
    position: relative;
    height: clamp(320px, 52vw, 560px);
    display: grid;
    place-items: center;
    perspective: 900px;
}

.halo {
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(248, 216, 141, 0.35);
    animation: spinHalo 14s linear infinite;
    opacity: 0.72;
}

.halo-1 {
    width: 64%;
    aspect-ratio: 1;
}

.halo-2 {
    width: 78%;
    aspect-ratio: 1;
    animation-direction: reverse;
    animation-duration: 20s;
    opacity: 0.45;
}

@keyframes spinHalo {
    from {
        transform: rotateZ(0deg) rotateX(72deg);
    }
    to {
        transform: rotateZ(360deg) rotateX(72deg);
    }
}

.gem-card {
    width: min(82%, 360px);
    aspect-ratio: 3 / 4;
    border-radius: 28px;
    border: 1px solid rgba(248, 216, 141, 0.24);
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 36%),
        linear-gradient(145deg, rgba(248, 216, 141, 0.17), rgba(15, 12, 20, 0.9) 38%, rgba(6, 4, 8, 1));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 50px rgba(248, 216, 141, 0.12);
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    animation: floatCard 7s ease-in-out infinite;
    position: relative;
}
.gem-card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

@keyframes floatCard {
    0%, 100% {
        transform: rotateY(-9deg) rotateX(8deg) translateY(0px);
    }
    50% {
        transform: rotateY(6deg) rotateX(-6deg) translateY(-12px);
    }
}

.diamond {
    width: 150px;
    height: 150px;
    background: conic-gradient(
        from 190deg,
        #fffef8 0%,
        #fce6b6 16%,
        #d8a654 29%,
        #fff3cf 48%,
        #f7d089 66%,
        #c4892f 82%,
        #fff9ec 100%
    );
    clip-path: polygon(50% 0, 88% 34%, 70% 100%, 30% 100%, 12% 34%);
    filter: drop-shadow(0 0 26px rgba(248, 216, 141, 0.42));
    animation: twinkleGem 2.6s ease-in-out infinite;
}

@keyframes twinkleGem {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 22px rgba(248, 216, 141, 0.32));
    }
    50% {
        transform: scale(1.07) rotate(3deg);
        filter: drop-shadow(0 0 40px rgba(248, 216, 141, 0.75));
    }
}

.spark-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #f8d88d 60%, transparent 100%);
    box-shadow: 0 0 14px rgba(248, 216, 141, 0.75);
    animation: sparkFloat linear infinite;
}

@keyframes sparkFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(0.6);
        opacity: 0;
    }
    20%,
    80% {
        opacity: 1;
    }
    100% {
        transform: translate3d(var(--x-move), var(--y-move), 0) scale(1.35);
        opacity: 0;
    }
}

.edge-shine {
    position: absolute;
    inset: 1px;
    pointer-events: none;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 26%, transparent 74%, rgba(248, 216, 141, 0.1));
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}



/* ===================== ABOUT MIDDLE SECTION START ============================ */

.about-page {
    width: min(1240px, 96%);
    margin: 2.2rem auto 3rem;
    display: grid;
    gap: 1.1rem;
}

.section {
    position: relative;
    /* border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(145deg, rgba(20, 12, 25, 0.95), rgba(9, 6, 13, 0.98));
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55), inset 0 0 44px rgba(247, 217, 159, 0.06); */
    overflow: hidden;
    isolation: isolate;
    padding: 80px 0;
}

.section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
    background-size: 16px 16px;
    opacity: 0.06;
    pointer-events: none;
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 0.72rem;
    color: var(--soft-text);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0.9rem;
}

.eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gold-1));
}

.hero {
    min-height: 78vh;
    display: grid;
    grid-template-columns: 1.04fr 0.96fr;
    gap: 1rem;
    align-items: center;
}

.hero h1 span {
    color: var(--gold-1);
    text-shadow: 0 0 20px rgba(247, 217, 159, 0.36);
}

.hero-copy {
    position: relative;
    z-index: 2;
    animation: rise 1s ease both;
}

.hero-copy p {
    max-width: 55ch;
    margin-bottom: 1.4rem;
}

.hero-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.badge {
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel);
    padding: 0.45rem 0.85rem;
    font-size: 0.73rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #ffebc8;
}

.hero-visual {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
    perspective: 900px;
}

.halo {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(247, 217, 159, 0.35);
    transform: rotateX(70deg);
    animation: spin 14s linear infinite;
}

.halo.one { width: 64%; aspect-ratio: 1; }
.halo.two { width: 82%; aspect-ratio: 1; animation-direction: reverse; animation-duration: 20s; opacity: 0.55; }

.gem-frame {
    width: min(78%, 340px);
    aspect-ratio: 3 / 4;
    border-radius: 28px;
    border: 1px solid var(--panel-border);
    background:
        radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.4), transparent 32%),
        linear-gradient(145deg, rgba(247, 217, 159, 0.14), rgba(10, 6, 14, 0.9));
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.48), inset 0 0 40px rgba(247, 217, 159, 0.12);
    display: grid;
    place-items: center;
    animation: cardFloat 6.6s ease-in-out infinite;
}

.diamond {
    width: 145px;
    height: 145px;
    clip-path: polygon(50% 0, 88% 35%, 70% 100%, 30% 100%, 12% 35%);
    background: conic-gradient(from 190deg, #fff8ea, #f9d48d, #c68d35, #fff2d3, #f4c870, #c68d35, #fff8ea);
    filter: drop-shadow(0 0 26px rgba(247, 217, 159, 0.62));
    animation: twinkle 2.8s ease-in-out infinite;
}

.spark {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--gold-1) 55%, transparent 100%);
    box-shadow: 0 0 12px rgba(247, 217, 159, 0.8);
    animation: sparkle 5s linear infinite;
}

.s1 { top: 15%; left: 20%; animation-delay: 0s; }
.s2 { top: 32%; right: 18%; animation-delay: 1.1s; }
.s3 { bottom: 20%; left: 46%; animation-delay: 2.2s; }
.s4 { top: 10%; right: 40%; animation-delay: 3.1s; }

.craft {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
}

.craft-card {
    border: 1px solid var(--gold);
    border-radius: 22px;
    background: #fff;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.craft-card h3 {
    font-size: 1.5rem;
    color: #000;
    margin-bottom: 0.4rem;
}
.craft-card p{
    font-size: 16px;
}

.craft-image {
    margin-top: 25px;
    height: 180px;
    border-radius: 16px;
    position: relative;
    background:
        radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.45), transparent 30%),
        linear-gradient(135deg, #f7d99f 0%, #b77d33 40%, #4b2518 100%);
    overflow: hidden;
}
.craft-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.craft-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 20%, rgba(10, 4, 8, 0.65) 100%);
}

.ring-shape, .necklace-shape {
    position: absolute;
    z-index: 1;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
    animation: drift 4s ease-in-out infinite;
}

.ring-shape {
    width: 72px;
    height: 72px;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.necklace-shape {
    width: 112px;
    height: 112px;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-color: transparent;
    animation-delay: 0.5s;
}

.line {
    margin-top: 1rem;
    position: relative;
    display: grid;
    gap: 0.9rem;
}

.line::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: linear-gradient(to bottom, #d4af37, #d4af37);
}

.milestone {
    position: relative;
    margin-left: 2rem;
    padding: 20px 0.9rem;
    border-radius: 14px;
    border: 1px solid var(--gold);
    background: #fff;
    animation: fadeSlide 0.8s ease both;
    font-size: 17px;
    font-weight: 600;
}

.milestone:nth-child(2) { animation-delay: 0.1s; }
.milestone:nth-child(3) { animation-delay: 0.2s; }
.milestone:nth-child(4) { animation-delay: 0.3s; }
.milestone:nth-child(5) { animation-delay: 0.4s; }

.milestone::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d4af37;
    left: -1.55rem;
    top: 1rem;
    box-shadow: 0 0 14px rgba(247, 217, 159, 0.8);
}

.milestone b {
    color: #b76e79;
    letter-spacing: 0.04rem;
    font-weight: 800;
}

.values {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 1rem;
    align-items: center;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: 0.8rem;
}

.metric {
    border: 1px solid var(--panel-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.9rem;
    animation: pulse 2.8s ease-in-out infinite;
}

.metric:nth-child(2) { animation-delay: 0.6s; }
.metric:nth-child(3) { animation-delay: 1.2s; }
.metric:nth-child(4) { animation-delay: 1.8s; }

.metric b {
    display: block;
    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--gold-1);
}

.metric span {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: #efdcc6;
}

.quote-box {
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    background: var(--panel);
    padding: 1.1rem;
    position: relative;
}

.quote-box::before {
    content: "“";
    position: absolute;
    top: -14px;
    left: 14px;
    font-family: "Cormorant Garamond", serif;
    font-size: 3rem;
    color: var(--rose);
}

.quote-box p {
    color: #f4e2cd;
}

.cta {
    margin-top: 1rem;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.84rem 1.35rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.btn-main {
    color: #2e1a08;
    background: linear-gradient(120deg, #ffe8bf 0%, var(--gold-1) 45%, var(--gold-2) 100%);
    box-shadow: 0 12px 24px rgba(200, 146, 63, 0.3);
}

.mx-w{
    max-width: 760px;
    margin: 0 auto;
}

.btn-alt {
    color: var(--ivory);
    background: var(--panel);
    border: 1px solid var(--panel-border);
}

.btn:hover { transform: translateY(-3px); }
.btn-alt:hover { color: var(--gold-1); box-shadow: 0 10px 20px rgba(247, 217, 159, 0.16); }

@keyframes rise {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes spin {
    from { transform: rotateX(70deg) rotateZ(0deg); }
    to { transform: rotateX(70deg) rotateZ(360deg); }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0) rotateY(-6deg); }
    50% { transform: translateY(-10px) rotateY(6deg); }
}

@keyframes twinkle {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 22px rgba(247, 217, 159, 0.45)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 38px rgba(247, 217, 159, 0.75)); }
}

@keyframes sparkle {
    0% { transform: translateY(0) scale(0.7); opacity: 0; }
    20%, 80% { opacity: 1; }
    100% { transform: translateY(-36px) scale(1.2); opacity: 0; }
}

@keyframes drift {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -53%) scale(1.06); }
}

@keyframes fadeSlide {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}


/* ============== WHU CHOOSE US SECTION START ===================== */

.choose-section{
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    color: var(--text);
    background: radial-gradient(circle at center, var(--bg-maroon) 0%, #0a0002 80%);
    display: grid;
    place-items: center;
    padding: 80px 0px;
    overflow-x: hidden;
}
.why-wrap {
    width: 100%;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.5);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
    padding: 54px;
    position: relative;
    overflow: hidden;
}

.spark-about {
    position: absolute;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(243, 200, 106, 0.3), transparent 65%);
    animation: twinkle 5s linear infinite;
    pointer-events: none;
    z-index: 99;
}

.s1-about { width: 12px; height: 12px; top: 14%; left: 12%; animation-delay: 0s; }
.s2-about { width: 10px; height: 10px; top: 22%; right: 20%; animation-delay: 1.4s; }
.s3-about { width: 8px; height: 8px; bottom: 20%; left: 18%; animation-delay: 2.2s; }
.s4-about { width: 14px; height: 14px; bottom: 14%; right: 15%; animation-delay: 3.1s; }

.why-layout {
    display: grid;
    grid-template-columns: 1.05fr 1.35fr;
    gap: 22px;
    align-items: stretch;
}

.intro {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 22px;
    padding: 30px 24px;
    position: relative;
    animation: slideIn 0.8s ease both;
}

.intro::after {
    content: "";
    position: absolute;
    inset: auto 18px 18px 18px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--gold), transparent);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    color: #ffebb8;
    border: 1px solid var(--gold);
    padding: 7px 12px;
    border-radius: 999px;
    margin-bottom: 14px;
    background: rgba(243, 200, 106, 0.08);
}

.tag::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold);
}

.intro h2 {
    font-size: clamp(1.9rem, 2.8vw, 2.8rem);
    line-height: 1.15;
    margin-bottom: 14px;
    text-wrap: balance;
    color: #fff;
}

.intro h2 span {
    color: var(--gold);
    text-shadow: 0 0 18px rgba(243, 200, 106, 0.3);
}

.intro p {
    color: var(--muted);
    line-height: 1.72;
    font-size: 0.97rem;
    max-width: 36ch;
}

.reasons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.reason {
    padding: 20px 16px 16px;
    border-radius: 18px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(212, 175, 55, 0.5);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
    animation: cardIn 0.65s ease both;
}

.reason:nth-child(1) { animation-delay: 0.08s; }
.reason:nth-child(2) { animation-delay: 0.16s; }
.reason:nth-child(3) { animation-delay: 0.24s; }
.reason:nth-child(4) { animation-delay: 0.32s; }

.reason::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 200, 106, 0.25), transparent 70%);
    top: -90px;
    right: -85px;
    transform: scale(0.7);
    transition: transform 0.4s ease;
}

.reason:hover {
    transform: translateY(-8px) rotateX(3deg);
    border-color: rgba(243, 200, 106, 0.55);
    background: linear-gradient(160deg, rgba(243, 200, 106, 0.15), rgba(255, 255, 255, 0.03));
}

.reason:hover::before {
    transform: scale(1);
}

.top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--gold);
    border: 1px solid rgba(243, 200, 106, 0.45);
    color: #fff;
    font-size: 1.2rem;
    box-shadow: inset 0 0 14px rgba(243, 200, 106, 0.25);
}

.reason h3 {
    font-size: 1rem;
    color: #fffaf0;
}

.reason p {
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============== OUR VALUES SECTION START ===================== */

/* ============================================
SECTION 4: VALUES MISSION SECTION
============================================ */

.value-block-section{
    min-height: 100vh;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    display: grid;
    place-items: center;
    padding: 34px 0px;
    overflow-x: hidden;
}


.inner {
    position: relative;
    z-index: 1;
}

.layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}

.panel {
    background: #fffdf8;
    border: 2px solid var(--gold);
    border-radius: 20px;
    padding: 20px 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    animation: fadeInUp 0.75s ease both;
}
.mb-40{
    margin-bottom: 40px !important;
}
.hero-mark img{
    width: 50px;
}
.mini-mark img{
    width: 25px;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(198, 147, 63, 0.14), rgba(216, 170, 183, 0.1), transparent 68%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.panel:hover {
    transform: translateY(-9px);
    border-color: rgba(198, 147, 63, 0.45);
    box-shadow: 0 16px 28px rgba(60, 40, 75, 0.13);
}

.panel:hover::before {
    opacity: 1;
}

.hero {
    grid-column: span 5;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    animation-delay: 0.08s;
}

.hero-mark {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    color: #8f6425;
    background: linear-gradient(140deg, #fff, #f3d8e2);
    border: 1px solid var(--gold);
    margin-bottom: 14px;
    transition: transform 0.35s ease;
}

.panel:hover .hero-mark,
.panel:hover .mini-mark {
    transform: rotate(-7deg) scale(1.08);
}

.hero h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #2f253a;
}

.hero p {
    color: #2f253a;
    font-size: 0.93rem;
    line-height: 1.65;
    margin-bottom: 15px;
}

.hero-note {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #9a7441;
    border-top: 1px dashed rgba(198, 147, 63, 0.38);
    padding-top: 10px;
    width: 100%;
}

.mini {
    grid-column: span 7;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.mini-card {
    animation-delay: 0.16s;
}

.mini-card:nth-child(2) { animation-delay: 0.24s; }
.mini-card:nth-child(3) { animation-delay: 0.32s; }
.mini-card:nth-child(4) { animation-delay: 0.4s; }

.mini-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.mini-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    color: #9a6e2d;
    border: 1px solid rgba(198, 147, 63, 0.35);
    background: linear-gradient(140deg, #fff, #f8e2ea);
    transition: transform 0.35s ease;
}

.mini-card h4 {
    font-size: 1rem;
    color: #382d45;
}

.mini-card p {
    color: #2f253a;
    font-size: 0.9rem;
    line-height: 1.6;
}

.line-about {
    margin-top: 24px;
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(198, 147, 63, 0.8), transparent);
    animation: blink 2.8s ease-in-out infinite;
}

@keyframes fadeInUp {
    from {
    opacity: 0;
    transform: translateY(22px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}

@keyframes drift {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-16px) scale(1.04); }
}

@keyframes blink {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}


/* =============== CONTACT BANNER SCETION START ================ */

/* --- CONTACT HERO BANNER --- */
.contact-hero {
    position: relative;
    padding: 80px 4%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(circle at top left, #ffffff 0%, #fcf9f6 60%);
    margin-top: 130px;
}

/* Ambient Background Text (Marquee Style) */
.ambient-text {
    position: absolute;
    top: 15%;
    left: -10%;
    font-size: 18vw;
    font-family: var(--font-serif);
    font-style: italic;
    color: transparent;
    -webkit-text-stroke: 1px rgba(203, 161, 53, 0.1); /* Very subtle stroke */
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    animation: floatText 60s linear infinite;
}

@keyframes floatText {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.contact-container {
    max-width: 1350px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* --- LEFT CONTENT AREA --- */
.text-section {
    padding-right: 30px;
}

/* Trust/Eyebrow Badge */
.eyebrow-contact {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 22px;
    background:  rgba(203, 161, 53, 0.1);
    color: var(--accent-gold);
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    border: 1px solid rgba(203, 161, 53, 0.2);
    backdrop-filter: blur(10px);
}

.eyebrow-contact .dot {
    width: 6px;
    height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.4); }
}

/* Main Heading */
.title-contact {
    font-size: clamp(3.2rem, 5vw, 5.5rem);
    font-family: var(--font-serif);
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--text-dark);
    font-weight: 400;
}

.title-contact span {
    font-style: italic;
    color: var(--accent-gold);
    font-weight: 300;
    display: block;
}

/* Subtitle / Description */
.subtitle-contact {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 50px;
    max-width: 520px;
    font-weight: 300;
}

/* Contact Details Grid */
.contact-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

/* Individual Contact Card */
.method-card {
    background: var(--bg-card);
    padding: 35px 30px;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.03);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Hover Line Effect */
.method-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--accent-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.method-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.08);
}

.method-card:hover::before {
    transform: scaleX(1);
}

.method-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background:  rgba(203, 161, 53, 0.1);
    color: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 25px;
    transition: transform 0.4s ease;
}

.method-card:hover .method-icon {
    transform: scale(1.1);
}

.method-card h3 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    margin-bottom: 12px;
    color: var(--text-dark);
    font-weight: 500;
}

.method-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.method-card a {
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: gap 0.3s ease;
    word-break: break-all;
}

.method-card a:hover {
    gap: 15px;
}

/* --- RIGHT VISUAL AREA --- */
.visual-section {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* The Gold Arch Frame Outline */
.image-frame {
    position: absolute;
    width: 460px;
    height: 640px;
    border: 1px solid var(--accent-gold);
    border-radius: 230px 230px 0 0; /* Arch geometry */
    top: 25px;
    right: 0px;
    animation: floatingFrame 8s ease-in-out infinite;
    z-index: 0;
}

@keyframes floatingFrame {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-15px, -15px) rotate(-1.5deg); }
}

/* The Image Mask Wrapper */
.image-mask {
    width: 460px;
    height: 640px;
    border-radius: 230px 230px 0 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 40px 80px rgba(0,0,0,0.12);
    z-index: 1;
}

/* The Image */
.image-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2);
    animation: imageZoom 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0.4s;
}

/* Curtain Reveal Animation */
.image-mask::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg-primary);
    animation: revealCurtain 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards 0.2s;
    z-index: 2;
}

@keyframes imageZoom {
    to { transform: scale(1); }
}

@keyframes revealCurtain {
    0% { transform: translateY(0); }
    100% { transform: translateY(-101%); }
}

/* Floating Info Badge Over Image */
.floating-card {
    position: absolute;
    bottom: 10%;
    left: -8%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 22px 25px;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    gap: 20px;
    width: 300px;
    animation: floatCard 6s ease-in-out infinite;
    z-index: 10;
}

.fc-icon {
    width: 55px;
    height: 55px;
    background: var(--bg-card);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-gold);
    font-size: 1.4rem;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.fc-text h4 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--text-dark);
    font-weight: 600;
}

.fc-text p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* --- ENTRANCE ANIMATIONS --- */
.reveal-up-contact {
    opacity: 0;
    transform: translateY(40px);
    animation: slideFadeUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.delay-1-contact { animation-delay: 0.2s; }
.delay-2-contact { animation-delay: 0.4s; }
.delay-3-contact { animation-delay: 0.6s; }
.delay-4-contact { animation-delay: 0.8s; }
.delay-5-contact { animation-delay: 1.0s; }

@keyframes slideFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* =================== CONTACT FORM SECTION CREATE ===================== */

/* --- THE EMERALD CUT FORM CONTAINER --- */
.jewel-form-container {
    width: 100%;
    /* Increased massive width to remove left/right gap! Form scales out beautifully. */
    /* max-width: 850px;  */
    position: relative;
    padding: 80px 0;
}

.contact-form-filed-on{
    max-width: 1000px;
    margin: 0 auto;
}
.form-heading {
    text-align: center;
    margin-bottom: 40px;
}

.form-heading h2 {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 500;
    color: #cba135;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.form-heading p {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 300;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Responsive Row Layout for Inputs */
.form-row {
    display: flex;
    gap: 25px;
}

.form-row > .emerald-wrap {
    flex: 1;
}

/* The Emerald Cut Border Wrap Logic */
.emerald-wrap {
    /* Dim border initially */
    background: #d4af37;
    /* Iconic Emerald Diamond Cut Geometry using clip-path */
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
    padding: 2px; /* The border thickness */
    position: relative;
    margin-bottom: 25px;
    transition: all 0.5s ease;
}

/* Focus state creates the "Molten Gold" border Trace */
.emerald-wrap:focus-within {
    background: linear-gradient(135deg, var(--gold-light) 0%, #cba135 50%, #8c6b22 100%);
    box-shadow: 0 0 20px var(--gold-glow);
    z-index: 5;
}

/* Inner Velvet Input Box */
.emerald-inner {
    background: #141210;
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
    padding: 20px 25px;
    position: relative;
    display: flex;
    align-items: center;
    transition: background 0.4s ease;
}

.emerald-wrap:focus-within .emerald-inner {
    background: #1a1714; /* Slightly brightens on focus */
}

/* The actual input fields */
.j-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--text-main);
    font-size: 1.1rem;
    font-family: var(--font-sans);
    font-weight: 300;
    outline: none;
}

/* Hide placeholder so label can do the work */
.j-input::placeholder {
    color: transparent;
}

/* Elegant Floating Labels */
.j-label {
    position: absolute;
    left: 25px;
    top: 22px;
    color: #d3d3d3;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-style: italic;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
}

/* Floating logic: When input has focus or holds text */
.j-input:focus ~ .j-label,
.j-input:not(:placeholder-shown) ~ .j-label {
    top: 5px;
    font-size: 0.75rem;
    color: #cba135;
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Adjust input padding when focused so text doesn't hit label */
.emerald-inner:focus-within .j-input,
.j-input:not(:placeholder-shown) {
    transform: translateY(8px);
}

/* Textarea specific */
textarea.j-input {
    resize: none;
    min-height: 120px;
    line-height: 1.6;
    margin-top: 5px;
}

/* Ensure cursor stays correct height with transform */
textarea.j-input {
    transform: translateY(12px);
}
.j-input:not(:focus):placeholder-shown {
    transform: translateY(0);
}
textarea.j-input:not(:focus):placeholder-shown {
    transform: translateY(0);
}

/* --- SPARKLING STONE SELECTION CHIPS --- */
.chip-container {
    margin: 35px 0;
    text-align: center;
}

.chip-container > p {
    font-family: var(--font-serif);
    color: #000;
    margin-bottom: 20px;
    font-size: 1.1rem;
    font-style: italic;
}

.chip-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.chip-label {
    cursor: pointer;
}

.chip-label input {
    display: none;
}

.chip-text {
    display: inline-block;
    padding: 12px 24px;
    background: #141210;
    border: 1px solid var(--border-dim);
    color: #fff;
    font-size: 0.95rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* Cushion Cut Shape */
    border-radius: 12px; 
}

.chip-label:hover .chip-text {
    border-color: #cba135;
    color: #fff;
    font-weight: 500;
}

/* Checked State */
.chip-label input:checked + .chip-text {
    background: linear-gradient(145deg, #cba135, #cba135);
    color: var(--bg-dark);
    font-weight: 500;
    border-color: transparent;
    box-shadow: 1px 1px 4px #000;
}

/* --- THE JEWEL SUBMIT BUTTON --- */
.btn-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.emerald-btn-wrap {
    background: #cba135;
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
    padding: 2px; /* Thick gold border */
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer;
    width: 100%;
}

.emerald-btn {
    background: var(--bg-dark);
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
    padding: 18px 40px;
    width: 100%;
    border: none;
    color: #cba135;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Shine effect passing over the button on hover */
.emerald-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(203, 161, 53, 0.4), transparent);
    transform: skewX(-20deg);
    transition: all 0.6s ease;
}

.emerald-btn-wrap:hover .emerald-btn {
    background: linear-gradient(135deg, #cba135 0%, #8c6b22 100%);
    color: var(--bg-dark);
}

.emerald-btn-wrap:hover .emerald-btn::after {
    left: 200%;
}

.emerald-btn-wrap:hover {
    box-shadow: 0 15px 30px var(--gold-glow);
    transform: translateY(-3px);
}


/* ================= SCROLL TOP BUTTON START ==================== */

/* --- Scroll Button Styling --- */
.scroll-btn {
    position: fixed;
    bottom: 30px; /* Distance from bottom */
    right: 30px; /* Distance from right */
    width: 60px;
    height: 60px;
    background-color: #fff; /* Button background */
    color: #bfa071; /* Accent color: Elegant Gold/Champagne */
    border: 2px solid #bfa071; /* Matches accent */
    border-radius: 50%; /* Make it perfectly circular */
    font-size: 24px;
    cursor: pointer;
    z-index: 1000; /* Ensure it stays on top of other content */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Prevent interaction when hidden */
    transition: all 0.4s ease-in-out; /* Smooth transition for showing/hiding and size */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow for depth */

    /* Flexbox to center the icon */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Start the pulsating animation */
    animation: pulsate 2s infinite ease-in-out;
}

/* Class to show the button (added via JavaScript) */
.scroll-btn.show {
    opacity: 1;
    visibility: visible;
}

/* Icon-specific styling */
.diamond-icon {
    transition: transform 0.3s ease; /* For hover animation */
}

/* --- Base Pulsate Animation --- */
@keyframes pulsate {
    0% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    50% { transform: scale(1.05); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
    100% { transform: scale(1); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
}

/* --- Hover State Animations --- */
.scroll-btn:hover {
    background-color: #bfa071; /* Invert colors on hover */
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3); /* Stronger shadow on hover */
    animation: none; /* Stop the base pulsating on hover to show the hover effect */
}

.scroll-btn:hover .diamond-icon {
    transform: rotate(15deg) scale(1.1); /* Slightly rotate and scale the icon */
}

/* Optional: Add a subtle 'sparkle' aftereffect on hover using a pseudo-element */
.scroll-btn:hover::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.8) 10%, rgba(255,255,255,0) 30%);
    opacity: 0;
    border-radius: 50%;
    animation: sparkleEffect 1s ease-out forwards; /* Sparkle and fade */
}

@keyframes sparkleEffect {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    30% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

/* --- Screen Reader Only (for A11y) --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}


/* ================== PRODUCTS DETAILS CSS START ================= */

/* --- THE PRODUCT DETAILS CONTAINER --- */
.pdp-wrapper {
    max-width: 1350px;
    margin: 0 auto;
    padding: 80px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-top: 130px;
}

/* --- LEFT SIDE: GALLERY --- */
.gallery-section-products {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top:120px;
}

.main-image-container {
    width: 100%;
    /* height: 650px; */
    height: calc(100vh - 300px);
    background-color: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.02);
    /* Slide down reveal animation */
    animation: slideDown 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    opacity: 0;
    transform: translateY(-40px);
}

.main-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
}

.main-image-container:hover img {
    transform: scale(1.08); /* Zoom on hover */
}

/* Floating Badge over image */
.badge-exclusive {
    position: absolute;
    top: 30px;
    left: -10px;
    background: var(--text-dark);
    color: #fff;
    padding: 8px 25px;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 500;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 2;
}

.badge-exclusive::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    border-width: 8px 10px 0 0;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

/* Thumbnails Group */
.thumbnails {
    display: flex;
    gap: 15px;
    animation: fadeIn 1s ease forwards 0.5s;
    opacity: 0;
}

.thumb {
    width: calc(25% - 12px);
    height: 120px;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.02);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.thumb:hover {
    border-color: rgba(203, 161, 53, 0.4);
}

.thumb:hover img { opacity: 1; }

.thumb.active {
    border-color: var(--accent-gold);
}

.thumb.active img {
    opacity: 1;
}


/* --- RIGHT SIDE: PRODUCT INFO --- */
.info-section {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
}

/* Breadcrumbs */
.breadcrumbs {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 25px;
    opacity: 0;
    animation: slideUp 0.8s ease forwards 0.2s;
}
.breadcrumbs span { color: var(--accent-gold); }

/* Title Area */
.product-title-products {
    font-family: var(--font-serif);
    font-size: 3rem;
    line-height: 1.1;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 400;
    opacity: 0;
    animation: slideUp 0.8s ease forwards 0.3s;
}

/* Reviews */
.reviews {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    opacity: 0;
    animation: slideUp 0.8s ease forwards 0.4s;
}

.stars {
    color: var(--accent-gold);
    font-size: 1rem;
    letter-spacing: 2px;
}

.review-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    text-decoration: underline;
    text-decoration-color: var(--border-color);
    text-underline-offset: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.review-text:hover { color: var(--text-dark); text-decoration-color: var(--text-dark); }

/* Pricing Area */
.pricing-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 30px;
    opacity: 0;
    animation: slideUp 0.8s ease forwards 0.5s;
}

.current-price-product-on {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: var(--text-dark);
    font-weight: 500;
}

.old-price {
    font-size: 1.2rem;
    color: var(--text-muted);
    text-decoration: line-through;
}

.discount-badge {
    background: var(--gold-light);
    color: var(--accent-gold);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid rgba(203, 161, 53, 0.2);
}

/* Description */
.description-products {
    font-size: 1.05rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 40px;
    font-weight: 300;
    opacity: 0;
    animation: slideUp 0.8s ease forwards 0.6s;
}


/* --- ACTION AREA (Forms & Buttons) --- */
.action-area {
    opacity: 0;
    animation: slideUp 0.8s ease forwards 0.7s;
}

/* Coupon Section */
.coupon-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    margin-bottom: 30px;
    border: 1px solid var(--border-color);
}

.coupon-wrapper p {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coupon-input-group {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.coupon-input-group:focus-within {
    border-color: var(--accent-gold);
}

.coupon-input-group input {
    flex-grow: 1;
    border: none;
    padding: 14px 20px;
    font-family: var(--font-sans);
    font-size: 1rem;
    outline: none;
    background: transparent;
}

.coupon-input-group button {
    background: var(--bg-color);
    border: none;
    border-left: 1px solid var(--border-color);
    padding: 0 25px;
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--accent-gold);
    cursor: pointer;
    transition: all 0.3s ease;
}

.coupon-input-group button:hover {
    background: var(--gold-light);
    color: var(--text-dark);
}

/* Add to Cart & Buy Now Buttons */
.buttons-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

.btn-products-main {
    padding: 20px 0;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    outline: none;
}

/* Add to Cart (Secondary Outline) */
.btn-cart {
    background: transparent;
    border: 1px solid var(--text-dark);
    color: var(--text-dark);
    position: relative;
    overflow: hidden;
    min-width: 100%;
}

.btn-cart::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--text-dark);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 0;
}

.btn-cart span, .btn-cart i { position: relative; z-index: 1; transition: color 0.4s ease; }

.btn-cart:hover::before { transform: translateY(0); }
.btn-cart:hover span, .btn-cart:hover i { color: #fff; }


/* Buy Now (Primary Solid) */
.btn-buy {
    background: var(--text-dark);
    border: 1px solid var(--text-dark);
    color: #fff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.a-none{
    text-decoration: none !important;
}

.btn-buy::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: all 0.7s ease;
}

.btn-buy:hover {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    box-shadow: 0 15px 30px rgba(203, 161, 53, 0.3);
    transform: translateY(-3px);
}

.btn-buy:hover::after { left: 200%; }


/* --- TRUST / POLICIES SECTION --- */
.policy-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    opacity: 0;
    animation: slideUp 0.8s ease forwards 0.8s;
}

.policy-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.policy-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    font-size: 1rem;
    flex-shrink: 0;
}

.policy-text h4 {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 2px;
    font-weight: 500;
}

.policy-text p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}


/* --- BEAUTIFUL ACCORDION SPECS --- */
.info-accordion {
    margin-bottom: 40px;
    border-top: 1px solid var(--border-color);
    opacity: 0;
    animation: slideUp 0.8s ease forwards 0.65s;
}

details.acc-item {
    border-bottom: 1px solid var(--border-color);
}

summary.acc-header {
    padding: 22px 0;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--text-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

summary.acc-header::-webkit-details-marker {
    display: none; /* Hide default arrow */
}

summary.acc-header::after {
    content: '+';
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--accent-gold);
}

details[open] summary.acc-header::after {
    content: '−';
}

.acc-content {
    padding: 5px 10px 25px 0;
    color: var(--text-muted);
    font-size: 0.98rem;
    line-height: 1.7;
    animation: fadeIn 0.4s ease forwards;
}

.acc-table {
    width: 100%;
    border-collapse: collapse;
}

.acc-table td {
    padding: 10px 0;
    border-bottom: 1px dashed rgba(0,0,0,0.08);
}

.acc-table td:first-child {
    font-weight: 500;
    color: var(--text-dark);
    width: 45%;
}

/* --- KEYFRAMES --- */
@keyframes slideUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    0% { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.realeted-h2{
    text-align: left;
    font-size: 35px !important;
}

.copy-a{
    text-decoration: none;
}


/* ==================== CART PAGE CART SECTION START =================== */

 /* Top Progress Bar */
.checkout-header {
    background: var(--pure-white);
    padding: 20px 0;
    border-bottom: 1px solid var(--border-gold);
    position: sticky;
    top: 84px;
    z-index: 100;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    margin-top: 130px;
}

.progress-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--border-gold);
    z-index: 1;
    transform: translateY(-50%);
}

.progress-step {
    position: relative;
    z-index: 2;
    background: var(--pure-white);
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.step-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--primary-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pure-white);
    transition: var(--transition);
    color: var(--primary-gold);
    font-weight: 600;
}

.progress-step.active .step-icon {
    background: var(--primary-gold);
    color: var(--pure-white);
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.4);
}

.step-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: var(--text-gray);
}

.progress-step.active .step-label {
    color: var(--luxury-black);
}

/* Layout */
.main-container {
    max-width: 1300px;
    margin: 4rem auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
}

.cart-h2-on {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
}

.cart-h2-on::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--primary-gold);
}

/* Step Visibility */
.checkout-step {
    display: none;
    animation: fadeIn 0.8s ease-out;
}

.checkout-step.active-step {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cart Items */
.cart-card {
    background: var(--pure-white);
    margin-bottom: 2rem;
    padding: 2rem;
    display: flex;
    gap: 2rem;
    border: 1px solid rgba(0,0,0,0.05);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.cart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--primary-gold);
    transition: var(--transition);
}

.cart-card:hover {
    box-shadow: 20px 20px 40px rgba(0,0,0,0.05);
    transform: translateX(10px);
}

.cart-card:hover::before {
    height: 100%;
}

.item-image {
    width: 180px;
    height: 220px;
    overflow: hidden;
    background: var(--soft-gold);
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.cart-card:hover .item-image img {
    transform: scale(1.1);
}

.item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.item-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.sku {
    font-size: 0.8rem;
    color: var(--text-gray);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.item-controls {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--border-gold);
    padding: 0.5rem 1rem;
}

.qty-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 10px;
    color: var(--primary-gold);
}

.remove-link {
    color: var(--accent-red);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.remove-link:hover {
    opacity: 0.7;
}

.item-price {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--primary-gold);
    font-weight: 600;
}

/* Form Styling */
.address-form, .payment-form {
    background: var(--pure-white);
    padding: 3rem;
    border: 1px solid rgba(0,0,0,0.05);
    margin-top: 2rem;
}

.input-group {
    margin-bottom: 2rem;
    position: relative;
}

.input-group label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.input-group input {
    width: 100%;
    padding: 1rem 0;
    border: none;
    border-bottom: 1px solid var(--border-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: var(--transition);
}

.input-group input:focus {
    border-bottom-color: var(--accent-red);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.payment-card-visual {
    background: linear-gradient(135deg, var(--luxury-black), #333);
    color: white;
    padding: 2rem;
    border-radius: 20px;
    margin-bottom: 3rem;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
}

.card-chip {
    width: 50px;
    height: 40px;
    background: linear-gradient(135deg, #d4af37, #fdfaf3);
    border-radius: 8px;
}

/* Summary Panel */
.summary-panel {
    background: var(--pure-white);
    padding: 3rem;
    border: 1px solid var(--border-gold);
    height: fit-content;
    position: sticky;
    top: 210px;
    animation: fadeInRight 1s ease-out;
}

.summary-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    font-size: 16px;
    color: var(--text-gray);
}

.summary-row.total {
    border-top: 1px solid var(--border-gold);
    padding-top: 2rem;
    margin-top: 2rem;
    color: var(--luxury-black);
    font-weight: 700;
    font-size: 1.2rem;
}

.checkout-button {
    width: 100%;
    background: var(--accent-red);
    color: var(--pure-white);
    border: none;
    padding: 1.2rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    margin-top: 2rem;
    transition: var(--transition);
}

.checkout-button:hover {
    background: var(--luxury-black);
    letter-spacing: 5px;
}

.back-btn {
    background: transparent;
    border: 1px solid var(--border-gold);
    padding: 1rem 2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.btn-group {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.gold-badge {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: var(--soft-gold);
    color: var(--primary-gold);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.bg-gradient-circle {
    position: fixed;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.05) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

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

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}


/* ======================== WHATSAPP BUTTON CSS START ========================= */

.wa-shell {
    position: fixed;
    display: inline-grid;
    place-items: center;
    animation: levitate 3s ease-in-out infinite;
    z-index: 99999;
    bottom: 30px;
    left: 30px;
}

@keyframes levitate {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.orbit {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px dashed rgba(72, 255, 157, 0.28);
    animation: rotate 10s linear infinite;
}

.orbit::before,
.orbit::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7fffc1, #21d267);
    box-shadow: 0 0 14px rgba(79, 255, 165, 0.7);
}

.orbit::before {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit::after {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.wa-btn {
    width: 70px;
    height: 70px;
    border-radius: 28px;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    position: relative;
    background: linear-gradient(145deg, #43ef8f, #23d265 60%, #129b45);
    box-shadow:
    0 15px 34px rgba(18, 123, 56, 0.52),
    inset 0 -8px 12px rgba(0, 0, 0, 0.2),
    inset 0 7px 12px rgba(255, 255, 255, 0.21);
    transition: transform 0.22s ease, filter 0.22s ease;
    z-index: 2;
}

.wa-btn::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.33);
}

.wa-btn:hover {
    transform: rotate(-6deg) scale(1.08);
    filter: brightness(1.08);
}

.wa-btn:active {
    transform: scale(0.95);
}

.icon-whatsapp {
    width: 42px;
    height: 42px;
    color: #fff;
    z-index: 3;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.33));
}


/* ========================== SIGN UP FORM ============================ */

.login-frame {
    width: min(430px, 92vw);
    padding: 2px;
    border-radius: 26px;
    background: #d4af37;
    animation: frameShift 5s ease-in-out infinite;
    box-shadow:
    0 25px 40px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(242, 201, 106, 0.35);
    position: fixed;
    z-index: 2;
    right: 30px;
top: 30px;
}

.card {
    background: radial-gradient(circle at center, var(--bg-maroon) 0%, #0a0002 80%);
    border-radius: 24px;
    padding: 30px 26px;
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}

.content {
    position: relative;
    z-index: 1;
}

.signup-h1 {
    text-align: center;
    font-size: 1.8rem;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
    color: var(--gold);
}

.subtitle-login {
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
    margin-bottom: 20px;
}

.tabs {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(242, 201, 106, 0.25);
    border-radius: 14px;
    padding: 5px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 20px;
    overflow: hidden;
}

.tab-bg {
    position: absolute;
    top: 5px;
    left: 5px;
    width: calc(50% - 5px);
    height: calc(100% - 10px);
    border-radius: 10px;
    background: linear-gradient(90deg, #f8d98d, #f2c96a, #eabf4f);
    box-shadow: 0 6px 14px rgba(242, 201, 106, 0.35);
    transition: transform 0.35s ease;
    z-index: 0;
}

.tab-btn {
    border: none;
    background: transparent;
    color: #f9e9c5;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 10px 8px;
    border-radius: 10px;
    cursor: pointer;
    z-index: 1;
    transition: color 0.3s;
    margin-bottom: 0;
    text-align: center;
}

.switch-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#tab-login:checked ~ .tabs .tab-bg {
    transform: translateX(0);
}

#tab-signup:checked ~ .tabs .tab-bg {
    transform: translateX(100%);
}

#tab-login:checked ~ .tabs label[for="tab-login"],
#tab-signup:checked ~ .tabs label[for="tab-signup"] {
    color: #2a1a00;
}

.group {
    margin-bottom: 14px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.88rem;
    color: #f0dfbc;
}

.input-sign {
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(242, 201, 106, 0.3);
    border-radius: 12px;
    padding: 12px 12px;
    font-size: 0.96rem;
    outline: none;
    transition: 0.25s;
}

.input-sign::placeholder {
    color: rgba(244, 228, 189, 0.56);
}

.input-sign:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px rgba(242, 201, 106, 0.14);
    transform: translateY(-1px);
}

.options {
    margin: 10px 0 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #f0dfbc;
}

.checkbox-wrap .input-sign {
    width: 14px;
    height: 14px;
    accent-color: var(--gold-soft);
}

.forgot {
    color: #fff;
    text-decoration: none;
    transition: 0.2s;
}

.forgot:hover {
    color: #fff3f9;
    text-decoration: underline;
}

.forms {
    width: 100%;
    overflow: hidden;
    position: relative;
    min-height: 318px;
}

.slider {
    width: 200%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    transition: transform 0.45s ease;
}

.panel-signup {
    width: 100%;
    padding-top: 2px;
    animation: fadeInPanel 0.45s ease;
}

#tab-signup:checked ~ .forms .slider {
    transform: translateX(-50%);
}

.btn {
    width: 100%;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: #2a1a00;
    background: linear-gradient(90deg, #f8d98d, #f2c96a, #eabf4f);
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(242, 201, 106, 0.35);
    transition: 0.25s;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px rgba(242, 201, 106, 0.45);
}

.btn:active {
    transform: translateY(0);
}

.foot {
    margin-top: 16px;
    text-align: center;
    font-size: 0.88rem;
    color: #e8d8b1;
}

.foot a {
    color: #ffd7e8;
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
}

.foot a:hover {
    text-decoration: underline;
}

.switch-link {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font-weight: 600;
    margin-left: 4px;
    transition: 0.2s;
}

.switch-link:hover {
    color: #fff3f9;
    text-decoration: underline;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.7); }
    50% { opacity: 1; transform: scale(1.3); }
}

@keyframes frameShift {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-4px) rotate(-0.35deg); }
}

@keyframes pulse {
    0%, 100% { box-shadow: inset 0 0 18px rgba(242, 201, 106, 0.25), 0 0 0 rgba(242, 201, 106, 0); }
    50% { box-shadow: inset 0 0 20px rgba(242, 201, 106, 0.3), 0 0 22px rgba(242, 201, 106, 0.25); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeInPanel {
    from {
    opacity: 0.5;
    transform: translateY(6px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}


/* ========================== POPUP START ====================== */

/* Popup Overlay */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff00;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Popup Container */
.popup-container {
    width: 900px;
    max-width: 95%;
    height: 550px;
    background: var(--black);
    display: flex;
    position: relative;
    border: 6px solid var(--primary-gold);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(50px) scale(0.95);
    transition: var(--transition);
    overflow: hidden;
}

.popup-overlay.active .popup-container {
    transform: translateY(0) scale(1);
}

/* Left Side: Image */
.popup-image-side {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.popup-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
}

.popup-overlay.active .popup-image-side img {
    transform: scale(1.1);
}

/* Right Side: Form */
.popup-form-side {
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, #111 0%, #000 100%);
}

/* Sparkle Animation Decor */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-gold);
    border-radius: 50%;
    pointer-events: none;
    animation: sparkle-anim 3s infinite;
    opacity: 0;
}

@keyframes sparkle-anim {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
    background: #996515;
    border-radius: 50px;
    width: 30px;
    height: 30px;
}

.close-btn:hover {
    color: #fff;
    transform: rotate(90deg);
}

.offer-header {
    margin-bottom: 30px;
}

.offer-header span {
    display: block;
    color: var(--primary-gold);
    font-size: 0.8rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 600;
}

.offer-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--white);
    line-height: 1.1;
    margin-bottom: 15px;
}

.offer-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
}

.offer-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group-popup {
    position: relative;
}

.input-group-popup input {
    width: 100%;
    padding: 15px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
}

.input-group-popup input:focus {
    border-bottom-color: var(--primary-gold);
}

.input-group-popup label {
    position: absolute;
    left: 0;
    top: 15px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: var(--transition);
    font-size: 0.9rem;
}

.input-group-popup input:focus + label,
.input-group-popup input:valid + label {
    top: -10px;
    font-size: 0.7rem;
    color: var(--primary-gold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Staggered Animations */
.stagger-1, .stagger-2, .stagger-3, .stagger-4, .stagger-5, .stagger-6, .stagger-7 {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.popup-overlay.active .stagger-1 { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.popup-overlay.active .stagger-2 { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.popup-overlay.active .stagger-3 { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.popup-overlay.active .stagger-4 { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.popup-overlay.active .stagger-5 { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.popup-overlay.active .stagger-6 { opacity: 1; transform: translateY(0); transition-delay: 0.7s; }
.popup-overlay.active .stagger-7 { opacity: 1; transform: translateY(0); transition-delay: 0.8s; }

.submit-btn {
    margin-top: 20px;
    padding: 18px;
    background: var(--primary-gold);
    color: var(--black);
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.submit-btn:hover {
    background: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

.submit-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    transition: 0.8s;
    left: -100%;
}

.submit-btn:hover::after {
    left: 100%;
}

.no-thanks {
    margin-top: 20px;
    text-align: center;
}

.no-thanks a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 1px;
    transition: var(--transition);
}

.no-thanks a:hover {
    color: var(--white);
}

.quick-actions a{
    width: 100%;
}