@charset "utf-8";
/* CSS Document */

/*
@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Marcellus&display=swap');
*::before,
*::after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --bs-black: #000;
    --bs-white: #fff;
    --bs-text-dark: #363636;
    --bs-brown: #351f12;
    --bs-brown-light: #c59a78;
    --bs-brown-dark: #25130c;
    --bs-golden: #8b6b22;
    --bs-light-gold: #eee;
    --bs-light-gold-400: #f2e4d94a;
    --bs-text-light: #777;
    --bs-silver: #d2c8be;
    --bs-silver-bg: linear-gradient(135deg,
            #f5f5f5 0%,
            #d9d9d9 25%,
            #bfbfbf 50%,
            #e6e6e6 75%,
            #f5f5f5 100%);
	--font-heading:"Marcellus", serif;
	--font-body: "Lato", sans-serif

}

@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: normal;
    line-height: 1.7;
    color: var(--bs-text-dark);
    background-color: var(--bs-white);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow-x: hidden;
    width: 100%;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 400;
}

p {
    line-height: 1.7;
    color: var(--bs-text-dark);
}

a {
    text-decoration: none;
}

.f-200 {
    font-weight: 200;
}

.f-300 {
    font-weight: 300;
}

.f-400 {
    font-weight: 400;

}

.f-500 {
    font-weight: 500;

}

.f-600 {
    font-weight: 600;

}

.f-700 {
    font-weight: 700;

}

.f-800 {
    font-weight: 800;

}

.text-blue {
    color: var(--bs-brown);
}

.text-gold {
    color: var(--bs-brown-light);
}

.container {
    max-width: 1200px !important;
}

.header-section {
    position: relative;
    background: var(--bs-white);
    padding: 15px 0px;

}

.navbar {
    text-transform: uppercase;
}

.navbar-brand,
.nav-link,
.offcanvas-title {
   font-family: var(--font-heading);
    color: var(--bs-brown) !important;
    font-weight: 400;
    font-size: 15px !important;
}

.navbar-brand {
    position: relative;
    padding: 0px;
   font-family: var(--font-heading);
    letter-spacing: 2px;
    font-size: 27px !important;
    text-transform: uppercase;
}

.nav-link {
    padding-left: 36px !important;
}

.navbar-toggler {
    border: 2px var(--bs-brown) solid !important;
    border-radius: 0px !important;
    background: var(--bs-white) !important;
}

.offcanvas {
    background-color: var(--bs-white);
    color: var(--bs-text-dark) !important;
}

.offcanvas .nav-link {
    color: var(--bs-text-dark) !important;


}

.offcanvas .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

.offcanvas .dropdown-menu {
    background-color: var(--bs-white);
    border: none;
}

.offcanvas .dropdown-item {
    color: var(--bs-text-dark);
    margin: 0px 0px 0px 26px !important;
    font-weight: 600;
}

.offcanvas .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

@media (min-width: 992px) {
    .offcanvas {
        display: none;
    }
}

.sticky-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: var(--bs-white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    /*animation: slideDown 0.3s ease-in-out;*/
}

.sticky-navbar .nav-link,
.sticky-navbar .offcanvas-title,
.sticky-navbar .call {
    color: var(--bs-brown) !important;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}



@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.call {
    color: var(--bs-text-dark);
    font-size: 15px;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 600;

    padding: 8px 15px;
    display: flex;
    align-items: center;
    background: var(--bs-silver-bg);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.call:hover {
    background: var(--bs-silver) !important;
    color: var(--bs-text-dark);
}

#mainNavbar {
    transition: all 0.3s ease;
    padding: 0px;
}


#mainNavbar.sticky-navbar {
   padding: 15px 0px;
}

#mainNavbar .navbar-brand{
    position: relative;
}
#mainNavbar .navbar-brand img {
    position: absolute;
  top: -25px;
  left:50%;
  transform: translateX(-50%);
    width: 130px;
    z-index: 999;
    border-radius: 50%;
    box-shadow: 1px -6px 20px 7px rgb(255 255 255 / 11%);
    -webkit-box-shadow: 1px -6px 20px 7px rgb(255 255 255 / 11%);
    -moz-box-shadow: 1px -6px 20px 7px rgb(255 255 255 / 11%)
    
}

#mainNavbar.sticky-navbar .navbar-brand img {
   width: 130px;
}


.btn-wrap {
    display: inline-block;
    perspective: 1000px;
}

.link-1 {
    position: relative;
    color: var(--bs-black);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
}

.link-1 img {
    width: 25px;
    transition: transform 0.3s ease;
    transform: rotate(-45deg);

}

.link-1:hover {
    color: var(--bs-brown);
}

.link-1:hover img {
    transform: rotate(0deg);
}

.link-1::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--bs-brown);
    transition: width 0.3s ease;
}

.link-1:hover::before {
    width: 100%;
    background-color: var(--bs-brown);
}

.link-2 {
    position: relative;
    color: var(--bs-white);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
}

.link-2 img {
    width: 25px;
    transition: transform 0.3s ease;
    transform: rotate(-45deg);

}

.link-2:hover {
    color: var(--bs-white);
}

.link-2:hover img {
    transform: rotate(0deg);
}

.link-2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--bs-white);
    transition: width 0.3s ease;
}

.link-2:hover::before {
    width: 100%;
    background-color: var(--bs-white);
}





.heading h5 {
    position: relative;
    font-size: 16px;
    color: var(--bs-brown-dark);
    margin-bottom: 10px;
    font-weight: 600;
    border: 1px solid var(--bs-brown-light);
    width: fit-content;
    padding: 5px 15px;
    border-radius: 30px;

}

.heading-main {
    font-weight: 600;
    font-size: clamp(24px, 4vw, 32px);
    margin-bottom: 50px;
}

.banner {
    padding: 60px 0px 100px 0px;
    background: var(--bs-light-gold);

}

.banner h2 {
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.2;
    text-decoration: underline;
}

.round-sec {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.btn-round {
    position: absolute;
    width: 190px;

    border: 25px solid var(--bs-light-gold);
    border-radius: 50%;
    animation: rotateClockwise 8s linear infinite;
    /* Animation here */
}

/* Keyframes for rotation */
@keyframes rotateClockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.link-plus {
    position: absolute;
    background-color: var(--bs-white);

    line-height: 0;
    transform: rotate(-45deg);
    border: 4px solid var(--bs-white);
    padding: 17px 20px;
    border-radius: 50%;
    z-index: 1;
    color: var(--bs-black);
    font-size: 30px;
}

.sticky-1 {
    position: sticky;
    top: 200px;
}

.bdr-l {
    border-left: 1px solid #c59a7859;
}

.bdr-r {
    border-right: 1px solid #c59a7859;
}

.bdr-t {
    border-top: 1px solid #c59a7859;
}

.bdr-b {
    border-bottom: 1px solid #c59a7859;
}

.srv-col {
    padding: 40px 30px;
    height: 100%;
}

.srv-col img {
    width: 50px;
    padding-bottom: 25px;
}

.srv-col h3 {
    font-size: 22px;
}

.team-col {
    background-color: var(--bs-light-gold-400);
}

.step-col h5 {
    font-size: 22px;
    color: var(--bs-brown);
}

.step-col h4 {
    font-size: 20px;

}

.dash-line {
    display: block;
    width: 100%;
    height: 1px;
    background: #eee;
    position: relative;
    margin-bottom: 35px;
    margin-top: 25px;
}

.dash-line::before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background: var(--bs-brown-light);
    border-radius: 50%;
    left: 0;
    top: -5px;
}

.list-1 {
    list-style-type: none;
    margin: 0;
    padding-left: 2em;
}

.list-1 li {
    margin-bottom: 10px;
    font-size: 18px;
    position: relative;
    padding-left: 25px;
}

.list-1 li span {
    position: absolute;
    left: 0;
}

.list-1 i {
    color: var(--bs-brown-light) !important;
}


footer {
    background-color: var(--bs-brown-dark);
    color: var(--bs-white);
    font-size: 15px;
    position: relative;
    padding-top: 60px;
    color: rgba(255, 255, 255, 1);
    overflow: hidden;
}

/* --- FOOTER ANIMATED BACKGROUND --- */
.footer-bg-animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;

    background-size: cover;
    background-position: center;
    opacity: 0.4;
}

.footer-pattern-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(135deg, var(--bs-brown-light) 25%, transparent 25%),
        linear-gradient(225deg, var(--bs-brown-light) 25%, transparent 25%),
        linear-gradient(315deg, var(--bs-brown-light) 25%, transparent 25%),
        linear-gradient(45deg, var(--bs-brown-light) 25%, transparent 25%);
    background-size: 60px 60px;
    background-position: -30px 0, -30px 0, 0 0, 0 0;
    opacity: 0.08;
    animation: footerPatternFlow 20s linear infinite;
}

.footer-glitter-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 60% 80%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent),
        radial-gradient(1px 1px at 45% 45%, #fff, transparent);
    background-size: 300px 300px;
    opacity: 0.2;
    animation: footerGlitterSparkle 5s infinite alternate ease-in-out;
}

@keyframes footerPatternFlow {
    0% {
        background-position: -30px 0, -30px 0, 0 0, 0 0;
    }

    100% {
        background-position: 30px 60px, 30px 60px, 60px 60px, 60px 60px;
    }
}

@keyframes footerGlitterSparkle {
    0% {
        opacity: 0.1;
        transform: scale(1) translate(0, 0);
    }

    100% {
        opacity: 0.3;
        transform: scale(1.1) translate(10px, 10px);
    }
}


footer h6 {
    font-size: 18px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--bs-brown-light);

}

footer p {
    color: rgba(255, 255, 255, .8);
}

footer a {
    text-transform: uppercase;
    text-decoration: none;
    color: var(--bs-white);
    font-size: 13px;
    position: relative;
    color: rgba(255, 255, 255, .8);

}
footer .phone{
    font-size: 20px;
}
footer a:hover {
    color: var(--bs-brown-light);

}

footer ul {
    list-style: none;
    padding: 0;

}

footer ul li {
    padding-bottom: 10px;
}

.shop-box {
    background: var(--bs-brown);
    padding: 20px 30px;
    height: 100%;
}

.email-ftr {
    text-transform: lowercase;
}

.contact-num {
    font-size: 20px;
    font-weight: 500;

    position: relative;
    padding-left: 30px;
    margin-top: 10px;
    display: block;
}

.contact-num img {
    width: 25px;
    position: absolute;
    left: 0;
    top: 5px;


}

.copy-right {
    font-size: 14px;
}

.dash-line-2 {
    display: block;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, .2);
}

.ftr-logo {
    width: 100px;

}

.two-col-list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style: none;
    padding: 0;
}

.contact-li li {
    padding-bottom: 0px;
    margin-top: 0;

}

.social-link a {
    padding: 0 10px;
    font-size: 16px;

}

.social-link a::before {
    content: none;
}


.button-call {
    all: unset;
    width: 100px;
    height: 30px;
    font-size: 16px;
    background: transparent;
    border: none;
    position: relative;
    color: #f0f0f0;
    cursor: pointer;
    z-index: 1;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-call::after,
.button-call::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -99999;
    transition: all .4s;
}

.button-call::before {
    transform: translate(0%, 0%);
    width: 100%;
    height: 100%;
    background: var(--bs-brown-dark);
    border-radius: 10px;
}

.button-call::after {
    transform: translate(10px, 10px);
    width: 35px;
    height: 35px;
    background: #ffffff15;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 50px;
}

.button-call:hover::before {
    transform: translate(5%, 20%);
    width: 110%;
    height: 110%;
}

.button-call:hover::after {
    border-radius: 10px;
    transform: translate(0, 0);
    width: 100%;
    height: 100%;
}

.button-call:active::after {
    transition: 0s;
    transform: translate(0, 5%);
}


/* Slider Container */
.hero-slider {
    width: 100%;
    height:70vh;
    background: var(--bs-brown);
}

.hero-slider .swiper-slide {
    display: flex;
    background: var(--bs-brown);
    position: relative;
    overflow: hidden;
}

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 0;
    animation: kenBurns 20s infinite alternate;
}

@keyframes kenBurns {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* LEFT HALF */
.hero-slider .slide-left {
    width: 50%;
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--bs-white);
    position: relative;
    z-index: 2;
}

.hero-slider .slide-left h2 {
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 25px;
    color: var(--bs-white);
    text-transform: capitalize;
}

.hero-slider .slide-left p {
    max-width: 420px;
    font-size: 16px;
    margin-bottom: 30px;
    text-transform: capitalize;
}

.hero-slider .shop-btn {
    text-transform: uppercase;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;

    color: var(--bs-text-dark);
    text-decoration: none;
    transition: 0.3s ease;
    background: var(--bs-silver-bg) !important;
}

.hero-slider .shop-btn:hover {
    background: var(--bs-white) !important;
    color: var(--bs-black);
}

/* RIGHT HALF IMAGE */
.hero-slider .slide-right {
    width: 50%;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-slider .slide-right img.main-banner {
    width: 60%;
    height: auto;
    position: relative;
    z-index: 2;
}

.floating-item {
    position: absolute;
    width: 140px !important;
    padding: 0 !important;
    z-index: 1;
    opacity: 0.4;
    filter: blur(2px) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
    animation: float 6s ease-in-out infinite;
}

.floating-item.item-1 {
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.floating-item.item-2 {
    bottom: 15%;
    left: 10%;
    animation-delay: 3s;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* SLIDE LAYOUT 1: THE CENTERPIECE */
.slide-layout-center {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    height: 100% !important;
    position: relative;
    overflow: hidden;
}

.slide-bg-animated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background: var(--bs-brown);
    /*background-image: url('../images/custom-brown-bg.jpg') !important;*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    overflow: hidden;
}

/*.slide-bg-animated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bs-brown);
    background-image: url(../images/bg.png);
    opacity: 0.2;
    mix-blend-mode: overlay;
    z-index: 1;
    pointer-events: none;
}

.slide-bg-animated::after {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: linear-gradient(45deg,
            transparent 0%,
            transparent 35%,
            rgba(255, 255, 255, 0.1) 42%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.1) 58%,
            transparent 65%,
            transparent 100%);
    animation: silverShineFlow 10s infinite ease-in-out;
    pointer-events: none;
    z-index: 5;
}
*/
/* --- SHARED GLITTER ANIMATION --- */
@keyframes glitterSparkle {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* --- SLIDE 1: GOLDEN LUXURY (Jewelry) --- */
.slide-1-bg {
    background: radial-gradient(circle at 20% 30%, rgba(74, 44, 16, 0.4) 0%, rgba(26, 15, 10, 0.6) 100%) !important;
}

.slide-1-bg .glitter-layer {
    background-image:
        radial-gradient(1.2px 1.2px at 10% 20%, #ffcc00, transparent),
        radial-gradient(1.5px 1.5px at 45% 55%, #ffd700, transparent),
        radial-gradient(1.5px 1.5px at 75% 15%, #ffae00, transparent),
        radial-gradient(1.2px 1.2px at 30% 80%, #fff176, transparent),
        radial-gradient(1.2px 1.2px at 60% 20%, #ffc107, transparent),
        radial-gradient(1.2px 1.2px at 85% 60%, #ffb300, transparent),
        radial-gradient(1.2px 1.2px at 10% 70%, #fff8e1, transparent),
        radial-gradient(1.2px 1.2px at 90% 35%, #ffd54f, transparent),
        radial-gradient(1px 1px at 50% 10%, #fffde7, transparent),
        radial-gradient(1px 1px at 70% 90%, #ffecb3, transparent);

    background-size: 250px 250px;
    animation: glitterMoveSlow 18s linear infinite;
}

.slide-1-bg .glitter-layer-2 {
    background-image:
        radial-gradient(3px 3px at 25% 40%, #ffffff, transparent),
        radial-gradient(4px 4px at 65% 75%, #ffea00, transparent),
        radial-gradient(3px 3px at 80% 30%, #fffde7, transparent),
        radial-gradient(4px 4px at 40% 85%, #fff9c4, transparent),
        radial-gradient(3px 3px at 15% 65%, #ffffff, transparent);

    background-size: 500px 500px;
    filter: drop-shadow(0 0 14px rgba(255, 174, 0, 1));
    animation: glitterSparkle 2.5s infinite alternate ease-in-out;
}

.slide-1-bg .bokeh-layer {
    background-image:
        radial-gradient(250px 250px at 30% 30%, rgba(255, 174, 0, 0.15), transparent),
        radial-gradient(300px 300px at 70% 70%, rgba(255, 215, 0, 0.08), transparent);
    animation: glowPulse 6s infinite alternate ease-in-out;
}

/* --- SLIDE 2: SILVER PRECISION (Watches) --- */
.slide-2-bg {
    background:
        radial-gradient(circle at 20% 30%, rgba(26, 28, 44, 0.4) 0%, rgba(5, 5, 16, 0.6) 100%),
        radial-gradient(circle at 80% 60%, rgba(0, 191, 255, 0.08), transparent 60%) !important;
}
.slide-2-bg .glitter-layer {
    background-image:
        radial-gradient(1.2px 1.2px at 10% 30%, #ffffff, transparent),
        radial-gradient(1.2px 1.2px at 50% 60%, #b3e5fc, transparent),
        radial-gradient(1.2px 1.2px at 85% 35%, #81d4fa, transparent),
        radial-gradient(1px 1px at 40% 10%, #e1f5fe, transparent),
        radial-gradient(1px 1px at 70% 85%, #ffffff, transparent);

    background-size: 250px 250px;
    animation: glitterMoveSlow 20s linear infinite;
}


.slide-2-bg .glitter-layer-2 {
    background-image:
        radial-gradient(3.5px 3.5px at 20% 50%, #ffffff, transparent),
        radial-gradient(4.5px 4.5px at 70% 30%, #e1f5fe, transparent);
    filter: drop-shadow(0 0 12px rgba(0, 191, 255, 0.9));
}

.slide-2-bg .bokeh-layer {
    background-image:
        radial-gradient(200px 200px at 40% 50%, rgba(0, 191, 255, 0.12), transparent);
}

/* Glitter Layer 1 (Diamond Dust) */
.glitter-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 30% 50%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1.5px 1.5px at 60% 80%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80% 20%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 20% 70%, rgba(255, 255, 255, 0.9), transparent);
    background-size: 400px 400px;
    opacity: 0.6;
    animation: glitterSparkle 3s infinite alternate ease-in-out;
}

/* Glitter Layer 2 (Brilliant Points) - HIGH VISIBILITY */
.glitter-layer-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    background-image:
        radial-gradient(3px 3px at 15% 45%, #fff, transparent),
        radial-gradient(4px 4px at 55% 15%, #fff, transparent),
        radial-gradient(3px 3px at 85% 65%, #fff, transparent),
        radial-gradient(4px 4px at 35% 85%, #fff, transparent);
    background-size: 600px 600px;
    opacity: 0.8;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
    animation: glitterSparkle 1.5s infinite alternate-reverse ease-in-out;
}

/* Bokeh Glow Layer */
.bokeh-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background-image:
        radial-gradient(120px 120px at 20% 40%, rgba(255, 255, 255, 0.05), transparent),
        radial-gradient(150px 150px at 70% 60%, rgba(255, 255, 255, 0.03), transparent),
        radial-gradient(100px 100px at 85% 15%, rgba(255, 255, 255, 0.04), transparent);
    filter: blur(40px);
    animation: bokehDrift 20s infinite alternate ease-in-out;
}

@keyframes glitterSparkle {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.3);
    }
}

@keyframes bokehDrift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 30px) scale(1.2);
    }
}

@keyframes flowLiquid {

    0%,
    100% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate(2%, -2%) scale(1.1) rotate(5deg);
    }

    66% {
        transform: translate(-2%, 2%) scale(0.9) rotate(-5deg);
    }
}

@keyframes silverShineFlow {
    0% {
        transform: translate(-10%, -10%) rotate(-15deg);
    }

    50% {
        transform: translate(10%, 10%) rotate(15deg);
    }

    100% {
        transform: translate(-10%, -10%) rotate(-15deg);
    }
}

@keyframes patternSlide {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 80px 80px;
    }
}

.center-left {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    z-index: 2;
}

.center-image-horizontal {
    max-width: 80%;
    max-height: 55vh;
    width: auto;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
}

.secondary-product-image {
    position: absolute;
    bottom: 8%;
    right: 8%;
    width: 150px;
    height: auto;
    opacity: 0.5;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
    animation: floatSlow 8s ease-in-out infinite;
    z-index: 1;
    border-radius: 10px;
}

@keyframes floatSlow {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

.center-right {
    width: 50%;
    padding: 60px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.center-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.subtitle {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--bs-brown-light);
    margin-bottom: 20px;
    font-weight: 500;
}

.center-image {
    max-height: 50vh;
    width: auto;
    margin-bottom: 40px;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.center-heading {
    font-size: clamp(28px, 4vw, 42px);
    color: var(--bs-white);
    margin-bottom: 25px;
    font-weight: 400;
    line-height: 1.2;
}

.center-description {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 30px;
    max-width: 450px;
}

/* Reveal Text Animation */
.reveal-text {
    overflow: hidden;
    display: block;
    margin-bottom: 0px;
}

.reveal-text span {
    display: block;
    transform: translateY(105%);
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.swiper-slide-active .reveal-text span {
    transform: translateY(0);
}

.swiper-slide-active .subtitle.reveal-text span {
    transition-delay: 0.1s;
}

.swiper-slide-active .center-heading.reveal-text span {
    transition-delay: 0.25s;
}

.swiper-slide-active .reveal-text .shop-btn {
    transition-delay: 0.4s;
    transform: translateY(0);
    opacity: 1;
}

.brand-logo-slide {
    width: auto;
    max-width: 200px;
    height:auto;
    object-fit: contain;
    margin-bottom: 25px;
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0.05s;
}

.swiper-slide-active .brand-logo-slide {
    opacity: 1;
    transform: scale(1);
}
.brand-logo-slide2 {
    width: auto;
    max-width: 400px;
    height:auto;
    object-fit: contain;
    margin-bottom: 25px;
    opacity: 0;
    transform: scale(0.9);
    transition: all 1s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0.05s;
}

.swiper-slide-active .brand-logo-slide2 {
    opacity: 1;
    transform: scale(1);
}

/* SLIDE LAYOUT 2: THE ASYMMETRIC STUDIO */
.slide-layout-split {
    display: flex !important;
    flex-direction: row;
    min-height: 70vh;
}

.split-left {
    width: 40%;
    background: var(--bs-brown-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    z-index: 2;
}

.split-text-content {
    max-width: 400px;
}

.brand-logo {
    width: 200px;
    margin-bottom: 20px;
}

.boutique-label {
    font-size: 18px;
    color: var(--bs-brown-light);
    margin-bottom: 20px;
    font-weight: 400;
}

.split-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.shop-btn-light {
    text-transform: uppercase;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    color: var(--bs-brown-dark);
    background: var(--bs-white);
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 14px;
    font-weight: 500;
}

.shop-btn-light:hover {
    background: var(--bs-brown-light);
    color: var(--bs-white);
}

.split-divider {
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--bs-brown-light), transparent);
    position: relative;
    z-index: 3;
}

.split-right {
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-brown);
    position: relative;
    overflow: hidden;
}

.split-image {
    max-width: 70%;
    height: auto;
    position: relative;
    z-index: 2;
}

@media(max-width: 991px) {
    .slide-layout-center {
        flex-direction: column;
        padding: 40px 20px;
    }

    .center-left,
    .center-right {
        width: 100%;
        padding: 30px 20px;
    }

    .center-image-horizontal {
        max-height: 40vh;
    }

    .center-image {
        max-height: 40vh;
    }

    .slide-layout-split {
        flex-direction: column;
    }

    .split-left,
    .split-right {
        width: 100%;
        min-height: 50vh;
    }

    .split-divider {
        width: 100%;
        height: 2px;
    }
}

/* Bullets */
.hero-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #fff;
    opacity: 0.5;
    border: 1px solid #fff;

}

.hero-slider .swiper-pagination-bullet-active {

    background: #fff;
    border: 5px solid #eee;
    opacity: 1;
    box-shadow: 0px 0px 0px 5px rgba(180, 187, 107, 0.2);
}

/* Arrows */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
    color: #fff;
    width: 55px;
    height: 55px;
}

/* Default hidden state - removing for the new reveal-text logic */
/*.hero-slider .slide-left h2,
.hero-slider .slide-left p,
.hero-slider .slide-left .shop-btn {
    transform: translateY(40px);
    opacity: 0;
    transition: 0.7s ease;
}*/

/* Active slide → animate up */
/*.hero-slider .swiper-slide-active .slide-left h2 {
    transition-delay: 0.1s;
    transform: translateY(0);
    opacity: 1;
}

.hero-slider .swiper-slide-active .slide-left p {
    transition-delay: 0.25s;
    transform: translateY(0);
    opacity: 1;
}

.hero-slider .swiper-slide-active .slide-left .shop-btn {
    transition-delay: 0.4s;
    transform: translateY(0);
    opacity: 1;
} */
.hero-slider .center-right .shop-btn {
    transform: translateY(40px);
    opacity: 0;
    transition: 0.7s ease;
    margin-top: 25px;
}
.hero-slider .swiper-slide-active .center-right .shop-btn {
    transition-delay: 0.4s;
    transform: translateY(0);
    opacity: 1;
}
/* Default (inactive slide) */
.hero-slider .center-image-horizontal {
    transform: translateX(30px) scale(1);
    opacity: 0.8;
    transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Active slide: parallax and zoom */
.hero-slider .swiper-slide-active .center-image-horizontal {
    transform: translateX(0) scale(1.05);
    opacity: 1;
}

.hero-slider .secondary-product-image {
    transform: translate(20px, 20px);
    opacity: 0;
    transition: all 1.8s cubic-bezier(0.19, 1, 0.22, 1);
    transition-delay: 0.3s;
}

.hero-slider .swiper-slide-active .secondary-product-image {
    transform: translate(0, 0);
    opacity: 0.6;
}

@media(max-width: 991px) {
    .hero-slider .swiper-slide {
        flex-direction: column;
    }

    .hero-slider .slide-left,
    .hero-slider .slide-right {
        width: 100%;
        height: 50vh;
    }
}
.heading-sl{
    font-size: 60px;
    text-transform: uppercase;
    color: var(--bs-white);
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}


.swiper-slide-active .heading-sl {
    transform: translateY(0);
    opacity: 1;
}
.sl-p{
    color: var(--bs-white);
    display: block;
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
}
.swiper-slide-active .sl-p {
    transform: translateY(0);
    opacity: 1;
}

/* --- NEW RECTANGULAR COLLECTION SECTION --- */
.collection-rect {
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    display: flex;
    transition: all 0.5s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.collection-rect .content {
    max-width: 90%;
}
.collection-rect .content p{
    text-align:  justify !important;
}
.rect-visual {
    width: 100%;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    position: relative;
}

.rect-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.collection-rect:hover .rect-img {
    transform: scale(1.08);
}

.text-brown {
    color: var(--bs-brown);
    font-weight: 600;
    letter-spacing: 2px;
    font-size: 14px;
}

@media(max-width: 767px) {
    .collection-rect {
        border-radius: 20px;
    }

    .rect-visual {
        min-height: 300px;
    }
}

.circle-link {
    font-weight: 600;
    text-decoration: none;
    color: #000;
    letter-spacing: 0.5px;
    font-size: 14px;
    transition: 0.3s;
}

.circle-link:hover {
    color: #c7a26a;
}

.brand-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    margin-bottom: 10px;
}

.brand-name {
    font-size: 14px;
    font-weight: 600;
    margin-top: 5px;
    color: #333;
    text-transform: uppercase;
}

/* Remove border and underline from tab buttons */
.nav-tabs {
    border-bottom: none !important;
}

.nav-tabs .nav-link {
    font-size: 18px !important;
    padding: 0px !important;
    margin: 0px 20px !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-bottom: 10px;
    /* optional */
    color: var(--bs-text-dark) !important;
}

.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--bs-brown-light) !important;
    background: transparent !important;
    color: var(--bs-brown-light) !important;
    box-shadow: none !important;
}


.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border: none !important;
    border-bottom: 2px solid var(--bs-brown-light) !important;
    box-shadow: none !important;
}

.about {
    position: relative;
    color: var(--bs-white);
    overflow: hidden;


}

.about .content {
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(10px);
    padding: 70px 50px;
    position: relative;
    z-index: 3;

}

.about:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/b-3.jpg);
    background-size: cover;
    background-position: center;
    animation: zoom-in-out 40s linear infinite;
    z-index: -1;

}

@keyframes zoom-in-out {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.color-text span {

    line-height: 1.5em;
    font-size: 25px;
    font-weight: 300;
}

.swiper-progressbar {
    position: absolute !important;
    top: inherit !important;
    bottom: 20px !important;
    left: 1% !important;
    width: 98% !important;
    height: 2px !important;
    background: #e0e0e0 !important;

}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--bs-brown) !important;
}

.brand-slider .swiper-button-next,
.brand-slider .swiper-button-prev {
    top: inherit !important;
    bottom: 0px !important;

    background: var(--bs-brown);
}


.brand-slider .swiper-button-next::after,
.brand-slider .swiper-button-prev::after {
    display: none !important;
}

.Jewellery-slider .swiper-button-next,
.Jewellery-slider .swiper-button-prev {
    top: inherit !important;
    bottom: 0px !important;

    background: var(--bs-brown);
}


.Jewellery-slider .swiper-button-next::after,
.Jewellery-slider .swiper-button-prev::after {
    display: none !important;
}
.custom-next,
.custom-prev {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}


.custom-next {
    right: 0px;
}

.custom-prev {
    left: 0px;
}

.custom-next:hover,
.custom-prev:hover {
    background: var(--bs-brown-light);
}
.Jewellery-slider .swiper-slide img{
   /* background: rgba(255, 255, 255, .6);
    border-radius: 10px;*/
}
.brand-slider .swiper-slide img{
    /*background: rgba(255, 255, 255, .6);
    border-radius: 10px;*/
    padding: 20px 0px;
}

.bdr-radius {
    border-radius: 20px;
}

 .bg {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center center;
     object-position: center center;
}




/* SMALL STARS */
#stars {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    123px 456px #FFF,
    789px 1023px #FFF,
    1500px 900px #FFF,
    300px 1700px #FFF,
    1900px 400px #FFF;
  animation: animStar 50s linear infinite;
}

#stars::after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow:
    123px 456px #FFF,
    789px 1023px #FFF,
    1500px 900px #FFF,
    300px 1700px #FFF,
    1900px 400px #FFF;
}

/* MEDIUM STARS */
#stars2 {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    200px 300px #FFF,
    600px 800px #FFF,
    1200px 1600px #FFF,
    1800px 500px #FFF;
  animation: animStar 100s linear infinite;
}

#stars2::after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    200px 300px #FFF,
    600px 800px #FFF,
    1200px 1600px #FFF,
    1800px 500px #FFF;
}

/* BIG STARS */
#stars3 {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    400px 600px #FFF,
    900px 1200px #FFF,
    1600px 300px #FFF;
  animation: animStar 150s linear infinite;
}

#stars3::after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow:
    400px 600px #FFF,
    900px 1200px #FFF,
    1600px 300px #FFF;
}

/* ANIMATION */
@keyframes animStar {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-2000px);
  }
}
.BrandlogoSwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
/* Pagination dots */
.productSwiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #cfcfcf; 
  opacity: 1;
  transition: all 0.3s ease;
}

/* Active pagination dot */
.productSwiper .swiper-pagination-bullet-active {
  background: var(--bs-brown-light); 
  width: 22px;  
  border-radius: 10px;
}
.service-col h6{
    font-weight: 600;
}
.bg-col{
    background-image: url(../images/bg-col.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--bs-text-dark);
    padding: 50px 0px;
}
.bg-col h2{
    font-size: 40px;
    font-weight: 600;
    
}
.bg-col p{
    color: var(--bs-text-dark);

}
.inner-banner{
    margin-top:0px;
    padding:0px 0px 0px 0px;
    text-align:left;
    color:#fff;
    position:relative;
    overflow:hidden
}

.inner-banner ol{
    display: flex;
    list-style: none;
    padding-left:0px !important
}
.inner-banner ol li a{
    color: var(--bs-white);
    padding-left:10px !important
}
.inner-banner::after{
    content: "";
    position:absolute;
    top:0px;
    left:0;
    width: 100%;
    height: 100%;
    background:linear-gradient(45deg, rgba(53, 31, 18, .9), rgba(53, 31, 18, .9));
    
}
.inner-banner h1{
    font-size:48px;
    
    text-transform:uppercase;
    
}
.inner-details{
    position:relative;
    z-index:1;
    top:50%;
    transform:translatey(-50%)
}
.inner-img{
    position:relative;
    z-index:1
}
.inner-img img{
    width:300px
}
.box-transform {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(100% + 150px);
    height: calc(100% + 150px);
    will-change: transform;
    animation: bgPos 50s linear infinite;
    transform: translate3d(75px,-75px,0) rotate(0.001deg);
    background-position: 50% 50%;
    background-size: cover;
    pointer-events: none;
    zoom:1;z-index: -1
}
@keyframes bgPos {
    25% {
        transform: translate3d(150px,-150px,0) rotate(0.001deg)
    }

    75% {
        transform: translate3d(0,0,0) rotate(0.001deg)
    }
}

.contact-sec .shop-box {
    display: flex;
    background: var(--bs-brown);
    padding: 25px 30px 10px 30px;
    height: 100%;
    flex-direction: column;
    align-items: center;
}
}

.contact-sec .shop-box h3{
color: var(--bs-white);
}
.contact-sec .contact-num {
    font-size: 18px;
    font-weight: 500;
   width: fit-content;
    position: relative;
    padding-left: 30px;
    margin-top: 10px;
    display: block;
}

.contact-sec .contact-num img {
    width: 25px;
    position: absolute;
    left: 0;
    top: 2px;


}
.contact-sec a{
color: var(--bs-white);
margin-top: 10px;
	 width:fit-content !important;
}
.color-light {
    color: var(--bs-brown-light);
}
.contact-location{
	font-size:15px;
	font-family:var(--font-heading);
    position: relative;
    padding-left: 34px; 
    display:block;
	text-transform: uppercase;
}
.contact-location i{
    position: absolute;
    left: 0;
    font-size: 13px;
    color: var(--bs-brown-light);
    border-radius: 50%;
    padding: 5px;
    border: 1px solid var(--bs-brown-light);
}
.br-logo{
    background: var(--bs-white);
    border-radius: 5px;
}
.heading-main-1{
    font-size: 40px;
}
.outside-box-left-20 {
    position:relative;
    margin-left: -10vw;
}
.outside-box-right-20 {
    position:relative;
    margin-right: -10vw;
}
.brand-box img{
    padding: 10px;
}
.brand-box:hover img{
    transform: scale(1.05);
    transition: all .5s ease-in-out;
}
.brand-box:hover{
    
    transition: all .5s ease-in-out;
}
.brand-box .brand-name{
    background: var(--bs-brown-light);
   margin-bottom: 0;
    padding: 5px;
    font-size: 12px;
    
}
.brand-box {
    border:1px solid #eee;
    border-radius: 20px;
    overflow: hidden;
    transition: all .5s ease-in-out;
}
.heading-1{
   font-weight: 700;
}
.bx-img{
    position:relative;
    background:var(--bs-brown);
    border-radius: 20px;
}
.bx-img img{
    width: 100%;
  

}
/*.bx-img:before{
    content:'';
    position:absolute;
    width:100px;
    height:100px;
    background:var(--bs-brown);
    
    bottom:0px;
    right:0px;
    z-index:-1;
    opacity:1;
        
}*/
.bx-1{
    border:1px solid #eee;
    padding:30px;
    margin-bottom:20px;
    border-radius:20px
    
}
.bx-2{
    border:1px solid #eee;
    padding:30px;
    border-radius:20px
    
}
.bx-1 h3, .bx-2 h3{
    font-weight: 700;
}