/* Regular */
@font-face {
    font-family: 'Sohne';
    src: url('../fonts/TestSohne-Buch.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

/* Light */
@font-face {
    font-family: 'Sohne';
    src: url('../fonts/TestSohne-Leicht.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'Sohne';
    src: url('../fonts/TestSohne-BreitFett.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: 'Sohne', sans-serif;
    overflow:hidden;
}

body.normal-scroll{
    overflow:auto;
}


html,body{
overflow-x:hidden;
}

.main-wrapper{
overflow:hidden;
}

.site-container{
  min-height:100vh;
  overflow:hidden;
}



.collection-header{
    background:#000;
    padding:80px 0 40px;
    border-bottom:1px solid rgba(255,255,255,0.15);
}

.container{
    max-width:1400px;
    margin:0 auto;
    padding:0 40px;
}

.collection-title{
    text-align:center;
    color:#fff;
    font-size:60px;
    letter-spacing:4px;
    font-weight:600;
}

/* Tablet */

@media (max-width:1024px){

.collection-title{
    font-size:32px;
    letter-spacing:3px;
}

}

/* Mobile */

@media (max-width:600px){

.collection-header{
    padding:60px 0 30px;
}

.collection-title{
    font-size:24px;
    letter-spacing:2px;
}

}



.collection-products{


padding:100px 0;
color:#fff;

background:url('../images/bg-dark.png') center/cover no-repeat;
background-size:cover;

}

.container{

max-width:1400px;
margin:auto;
padding:0 40px;

}

/* CATEGORY */

.category{

border-top:1px solid rgba(255,255,255,0.15);
padding-top:40px;
margin-top:80px;

}

.category-top{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:40px;

}

.category-top h2{

font-size:55px;
letter-spacing:3px;
font-weight:500;

}

.category-top a{

font-size:14px;
letter-spacing:2px;
color:#d4b547;
text-decoration:none;

}


/* GRID */

.product-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
border-left:1px solid rgba(255,255,255,0.15);

}

.product-card{

position:relative;
padding:80px 40px;
border-right:1px solid rgba(255,255,255,0.15);
border-top:1px solid rgba(255,255,255,0.15);
border-bottom:1px solid rgba(255,255,255,0.15);
text-align:center;

}


/* NAME */

.product-name{

position:absolute;
top:20px;
left:20px;
font-size:20px;
color:#fff;
letter-spacing:2px;

}

/* PRICE */

.price{

position:absolute;
bottom:20px;
right:20px;
font-size:20px;
color:#fff;

}


/* IMAGE */

.product-img{

position:relative;
display:inline-block;

}

.product-img img{

width:320px;
/*filter:grayscale(100%);
*/transition:0.5s;

}

.product-img img {
    width: auto;
}

/* REFLECTION */

/*.product-img::after{

content:"";
position:absolute;
left:0;
right:0;
top:100%;
height:60px;

background:linear-gradient(to bottom,
rgba(255,255,255,0.25),
transparent);

transform:scaleY(-1);
opacity:.25;

mask-image:linear-gradient(to bottom,black,transparent);

}*/


/* HOVER */

.product-card:hover img{

filter:grayscale(0%);
transform:translateY(-10px) scale(1.05);

}


/* RESPONSIVE */

@media(max-width:1024px){

.product-grid{

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

}

}

@media(max-width:700px){

.product-grid{

grid-template-columns:1fr;

}

.category-top{

flex-direction:column;
align-items:flex-start;
gap:10px;

}

}



.crafted-section{

background:#0a0a0a;
padding:120px 0;
text-align:center;
color:#fff;

}

.container{

max-width:1400px;
margin:auto;
padding:0 40px;

}

/* TITLE */

.crafted-title {
    font-size: 60px;
    letter-spacing: 3px;
 
    margin-bottom: 60px;
    font-weight: bold;
    letter-spacing: 9px;
}

.crafted-title span{

font-weight:300;
opacity:.9;

}

/* IMAGE GRID */

.crafted-gallery{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:40px;

}

.crafted-gallery img{

width:100%;
height:200px;
object-fit:cover;
transition:0.4s;

}

/* HOVER */

.crafted-gallery img:hover{

transform:scale(1.05);

}


.faq-image {
    /* width: 200px; */
    position: relative;
    top: -70px;
    left: -33%;
}

.footer-container{
  width:1400px;
}

/* TEXT */

.crafted-text{

font-size:16px;
letter-spacing:2px;
color:#bbb;
margin-bottom:20px;

}

/* BUTTON */

.crafted-btn{

display:inline-block;
padding:14px 30px;
border:1px solid #c9a437;
color:#fff;
text-decoration:none;
font-size:14px;
letter-spacing:1px;
transition:.4s;

}

.crafted-btn:hover{

background:#c9a437;
color:#000;

}

/* RESPONSIVE */

@media(max-width:1024px){

.crafted-gallery{

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

}

}

@media(max-width:600px){

.crafted-gallery{

grid-template-columns:1fr;

}

.crafted-title{

font-size:28px;

}

}

.faq-section{

background:#0a0a0a;
padding:120px 0px 0px 0;
color:#fff;

}

.container{

max-width:1400px;
margin:auto;
padding:0 40px;

}

.faq-wrapper{

display:grid;
grid-template-columns:1fr 2fr;
gap:80px;

}

/* LEFT */

.faq-left h2{

font-size:32px;
letter-spacing:2px;
margin-bottom:20px;

}

.faq-left p{

color:#aaa;
margin-bottom:30px;

}

.faq-btn{

border:1px solid #caa23a;
padding:12px 26px;
text-decoration:none;
color:#fff;
display:inline-block;
margin-bottom:40px;
transition:.3s;

}

.faq-btn:hover{

background:#caa23a;
color:#000;

}

.faq-image {
    /* width: 200px; */
    position: relative;
    top: -70px;
}


/* RIGHT ACCORDION */

.accordion-item{

border-bottom:1px solid rgba(255,255,255,0.1);
padding:20px 0;

}

.accordion-title{

display:flex;
justify-content:space-between;
cursor:pointer;
font-size:20px;
letter-spacing:1px;

}

.accordion-content p {
    font-size: 16px;
    line-height: 17px;
}

.accordion-content{

max-height:0;
overflow:hidden;
transition:.4s;
color:#aaa;
font-size:14px;
margin-top:10px;

}

/*.accordion-item.active .accordion-content{

max-height:200px;

}*/

.icon{

transition:.3s;

}

.accordion-item.active .icon{

transform:rotate(180deg);

}


/* RESPONSIVE */

@media(max-width:900px){

.faq-wrapper{

grid-template-columns:1fr;

}

.faq-left{

text-align:center;

}

.faq-image{

margin:auto;

}

}

.site-footer{
  background:#000;
  color:#fff;
  padding:80px 0;
  font-family:Poppins, sans-serif;
}

.container{
  max-width:1680px;
  margin:auto;
  padding:0 20px;
}

.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.footer-heading h2{
  font-size:52px;
  font-weight:400;
  line-height:1.1;
  margin-bottom:10px;
}

.footer-heading p{
  font-size:14px;
  letter-spacing:2px;
  color:#ccc;
}

.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:15px;
  padding:12px 25px;
  background:#111;
  border-radius:30px;
  color:#fff;
  text-decoration:none;
  border:1px solid #333;
  transition:0.3s;
}

.contact-btn span{
  background:#c7a94b;
  padding:6px 10px;
  border-radius:50%;
}

.contact-btn:hover{
  background:#c7a94b;
  color:#000;
}

.site-footer hr{
  margin:40px 0;
  border-color:#222;
}

.footer-links{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:40px;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.footer-col a{
  color:#bbb;
  text-decoration:none;
  font-size:13px;
  letter-spacing:1px;
}

.footer-col h4{
  margin-bottom:10px;
  font-size:13px;
  letter-spacing:1px;
  color:#fff;
}

.footer-right{
  text-align:right;
}

.back-top{
  margin-top:30px;
  font-size:12px;
  color:#bbb;
}

/* responsive */

@media(max-width:768px){

.footer-heading h2{
  font-size:36px;
}

.footer-top{
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.footer-links{
  flex-direction:column;
  gap:30px;
}

.footer-right{
  text-align:left;
}

}


.site-container{
  max-width:1920px;
  width:100%;
  margin:0 auto;
  position:relative;
  height:100%;
}
/* ===== Background wrapper ===== */

.main-wrapper{
    position:relative;
    width:100%;
    height:100vh;
    background:url('../images/bg.png') center/cover no-repeat;
}

/* ===== Sections ===== */

.section{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* Section 2 initially hidden */
#section-2{
    opacity:0;
}

/* ===== Header ===== */

.header{
position:absolute;
width:100%;
max-width:1680px;
left:50%;
transform:translateX(-50%);
top:30px;
padding:0 40px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:100;
background: transparent;
}




.logo img{
    height:80px;
}

.nav ul{
    display:flex;
    gap:35px;
    list-style:none;
}

.nav li{
    color:#fff;
    font-size:14px;
    letter-spacing:1px;
    padding:8px 18px;
    border-radius:40px;
}

.nav li.active{
    background:#A89133;
    color:#000;
}

.arrow-btn{
/*
    background:#c7a53c;*/
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}


.arrow-btn img{
     width: 122px; /* adjust if needed */
  animation: arrowBounce 2.2s ease-in-out infinite;
}

/* Smooth premium bounce */
@keyframes arrowBounce {

  0%{
    transform: translateY(0);
  }

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

  40%{
    transform: translateY(0);
  }

  60%{
    transform: translateY(-6px);
  }

  80%{
    transform: translateY(0);
  }

  100%{
    transform: translateY(0);
  }

}

/* ===== Footer ===== */

/*.footer{
    position:fixed;
    width:1400px;
    left:50%;
    transform:translateX(-50%);
}*/

.footer{
position:fixed;
left:10%;
bottom:70px;
z-index:100;
width:1680px;
transition:opacity .5s ease;
}

.footer.hide{
opacity:0;
pointer-events:none;
}
.scroll-text{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size:12px;
    letter-spacing:3px;
    color:#d5d5d5;
}

/* ===== Section 2 content ===== */

.heading{
    position:absolute;
    top:22%;
    width:100%;
    text-align:center;
    font-size:40px;
    color:#e8e8e8;
    opacity:0;
    transform:translateY(120px);
}



.ring{
    position:absolute;
    bottom:-250px;
    left:50%;
    transform:translateX(-50%);
    width:420px;
    opacity:0;
}
.ring-wrapper{
    position:absolute;
    bottom:-250px;
    left:50%;
    transform:translateX(-50%);
    width:420px;
    height:420px;
    opacity:0;
}

.ring-layer{
    position:absolute;
    width:360px;
    left:0;
    bottom:0;
}

img.ring-layer.l3 {
    position: absolute;
    z-index: 1;
    left: -74px;
    top: 0;
}

img.ring-layer.l4 {
    position: absolute;
    z-index: 1;
    top: -28px;
    left: 58px;
}

img.ring-layer.center {
    position: absolute;
    z-index: 1;
    top: 139px;
    width: 78%;
    left: -32px;
}


img.ring-layer.l2 {
    position: absolute;
    z-index: 1;
    top: 112px;
    left: 94px;
    width: 78%;
}




.top-heading{
    position:absolute;
    top:22%;
    width:100%;
    text-align:center;
    font-size:14px;
    letter-spacing:3px;
    color:#bdbdbd;
    opacity:0;
}

.ring-svg{
    position:absolute;
    width:600px;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    opacity:0;
}





/*

.one,
.two {
  transform-origin: 50% 100%;
}

.three {
  transform-origin: 50% 100%;
}

.four {
  transform-origin: 0% 50%;
}
*/


.top-heading{
  opacity:0;
  transform:translateY(30px);
}

.ring-svg{
  opacity:0;
}



.one-svg {
    width: 400px;
    left: 24%;
    position: absolute;
    top: -205px;
    transform: rotate(77deg);
    filter: opacity(0.5);
}

.three-svg {
    filter: opacity(0.5);
    position: absolute;
    left: 15%;
    width: 400px;
    top: 186px;
    transform: rotate(108deg);
}

.four-svg {
    position: absolute;
    width: 400px;
    left: 54%;
    transform: rotate(358deg);
    top: -180px;
    filter: opacity(0.5);
}
.two-svg {
    position: absolute;
    width: 400px;
    left: 62%;
    transform: rotate(196deg);
    top: 205px !important;
}

.main-svg {
    position: relative;
    top: 40%;
}



.product-content{
    position:absolute;
    right:8%;
    bottom:15%;
    width:400px;
    opacity:0;
    transform:translateY(60px);
}

.product-content h2{
    font-size:40px;
    color:#fff;
    margin-bottom:20px;
}

.product-content p{
    font-size:14px;
    line-height:1.6;
    color:#cfcfcf;
}

/*.stone-item{
  position:absolute;
  opacity:0;
  transform:translateY(30px);
  text-align:center;
  pointer-events:none;
}

.line{
  width:1px;
  height:60px;
  margin:0 auto 8px;
  background:linear-gradient(to bottom,#aaa 50%,transparent 50%);
  background-size:2px 8px;
}

.stone-label{
  font-size:14px;
  color:#ccc;
}*/



.stone-item{
  position:absolute;
  opacity:0;
  transform:translateY(30px);
  text-align:center;
  pointer-events:none;
}

.line{
  width:1px;
  height:60px;
  margin:0 auto 8px;
  background:linear-gradient(to bottom,#aaa 50%,transparent 50%);
  background-size:2px 8px;
}

.stone-label{
  font-size:14px;
  color:#ccc;
  letter-spacing:2px;
}


/* LEFT TOP */
/*.s1{
  left:-120px;
  bottom:-40px;
}*/


.s1 {
    left: -65%;
    bottom: 30%;
}

/* TOP CENTER */
/*.s2{
  left:120px;
  bottom:-60px;
}*/

/* CENTER */
/*.s3{
  left:160px;
  bottom:160px;
}*/

/* LEFT BOTTOM */
/*.s4{
  left:-100px;
  bottom:180px;
}



*/
/* RIGHT */
/*.s5{
  left:260px;
  bottom:120px;
}
*/

.s1:before {
    background: border-box;
    content: '';
    position: absolute;
    width: 1px;
    height: 76px;
    top: -103px;
  border-left: 0.5px dashed #fff;
 
    transform: rotate(336deg);
    padding: 2px 0px;
    left: 0px;
    
}
.s4 {
    left: -90px;
    bottom: 8%;
   }

.s4:before {
    background: border-box;
    content: '';
    position: absolute;
    width: 1px;
    height: 148px;
    top: -199px;
       border-left: 0.5px dashed #fff;
    /* transform: rotate(355deg); */
    padding: 2px 0px;
    left: 28px;

}


/*
.s3 {
    left: 166px;
    bottom: -80px;
}
*/
.s3 {
    left: 154px;
    bottom: -80px;
}


.s3:before {
    background: border-box;
    content: '';
    position: absolute;
    width: 1px;
    height: 45px;
    top: -54px;
 
    /* transform: rotate(355deg); */
    padding: 2px 0px;
    left: 28px;
      border-left: 0.5px dashed #fff;
}



.s2 {
    right: -7%;
    bottom: 6%;
}
.s2:before {
    background: border-box;
    content: '';
    position: absolute;
    width: 1px;
    height: 197px;
    top: -213px;
     border-left: 0.5px dashed #fff;
 

    /* transform: rotate(355deg); */
    padding: 2px 0px;
    left: 15px;
}
.s5 {
    bottom: 120px;
    right: -53%;
}

.s5:before {
    background: border-box;
    content: '';
    position: absolute;
    width: 1px;
    height: 76px;
    top: -103px;
      border-left: 0.5px dashed #fff;
  
    transform: rotate(336deg);
    padding: 2px 0px;
    left: 0px;
   
}



.ninth-content{
  position:absolute;
  left:8%;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
}

.ninth-heading{
  font-size:60px;
  font-weight:600;
  color:#fff;
  line-height:1.1;
  opacity:0;
  transform:translateX(-200px);
}

.ninth-subtext{
  margin-top:20px;
  font-size:16px;
  color:#fff;
  letter-spacing:2px;
  opacity:0;
  transform:translateX(-150px);
}

.ring-svg{
  opacity:0;
  transform:translateY(40px);
}



.tenth-content {
    position: absolute;
    bottom: 5%;
    left: 80%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 5;
}
.feature-list{
  list-style:disc;
  padding-left:20px;
}

.feature-list li{
  opacity:0;
  transform:translateY(30px);
  margin:12px 0;
  font-size:16px;
  text-align: left;
  color:#fff;
  letter-spacing:1px;
}

.feature-line {
    position: absolute;
    height: 96px;
    width: 0.5px;
    border-left: 0.5px dashed #fff;
    top: -82%;
    left: 7%;
    transform: rotate(159deg);
    opacity: 0;
}




/*#section-3{
  opacity:0;
}

.section3-heading{
  position:absolute;
  top:30%;
  width:100%;
  text-align:center;
  font-size:50px;
  color:#fff;
  letter-spacing:2px;
  opacity:0;
  transform:translateY(120px);
}

.section3-image{
  position:absolute;
  top:55%;
  left:50%;
  transform:translate(-50%,-50%) scale(0.6);
  width:70%;
  opacity:0;
}


*/



#section-3{
  opacity:0;
}

.section3-heading{
  position:absolute;
  top:30%;
  width:100%;
  text-align:center;
  font-size:60px;
  color:#fff;
  letter-spacing:2px;
  opacity:0;
  transform:translateY(120px);
}

.section3-image{
  position:absolute;
  top:55%;
  left:50%;
  transform:translate(-50%,-50%) scale(0.6);
  width:70%;
  opacity:0;
}

/* Subheading hidden initially */
.section3-subheading{
  position:absolute;
  top:24%;
  width:100%;
  text-align:center;
  font-size:18px;
  letter-spacing:3px;
  color:#fff;
  opacity:0;
  transform:scale(0.8);
}

/* Left image hidden */
.section3-left-image {
    position: absolute;
    left: 5%;
    top: 0px;
    width: 300px;
    opacity: 0;
}


/* New Heading hidden right side */
.section3-new-heading{
  position:absolute;
  top:20%;
  width:100%;
  text-align:center;
  font-size:30px;
  letter-spacing:3px;
  color:#fff;
  opacity:0;
  transform:scale(0.8);
}
/* Right Image hidden */
.section3-right-image{
  position:absolute;
  right:-400px;
  top:5%;
  width:200px;
  opacity:0;
}

/* Circle smooth scaling origin */
.section3-image{
  transform-origin:center center;
}



.section3-bottom-img {
    position: absolute;
    width: 201px;
    opacity: 0;
    transform: translateY(200px) scale(0.8);
    bottom: 0;
    right: 0;
}
/* Positioning */
.section3-bottom-left{
  position:absolute;
  bottom:8%;
  left:30%;
}

.section3-bottom-right{
  position:absolute;
  bottom:8%;
  right:18%;
}



.section3-final-heading{
  position:absolute;
  top:22%;
  width:100%;
  text-align:center;
  font-size:50px;
  color:#fff;
  letter-spacing:2px;
line-height: 97px;

  opacity:0;
  transform:translateY(-80px);
}

.section3-center-image{
  position:absolute;
  top:-300px;
  left:50%;
  transform:translateX(-50%) scale(0.9);
  width:400px;
  opacity:0;
}


.stone-label1{
  position:absolute;
  color:#fff;
  font-size:14px;
  letter-spacing:3px;
  opacity:0;
}

/* Rough positioning (adjust visually later) */
.stone-left-top:before {
    position: absolute;
    width: 2px;
    height: 113px;
    border-left: 1px dashed #fff;
    content: '';
    left: -48px;
    top: -106px;
    transform: rotate(137deg);
}
.stone-left-top {
    top: 40%;
    left: 24%;
}
.stone-right-top:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 76px;
    border-left: 1px dashed #fff;
    top: -75px;
    transform: rotate(149deg);
}
.stone-right-top {
    top: 45%;
    right: 17%;
}
.stone-bottom-left:before {
    position: absolute;
    content: '';
    width: 2px;
    height: 93px;
    border-left: 1px dashed #fff;
    left: -78%;
    transform: rotate(45deg);
}
.stone-bottom-left {
    bottom: 22%;
    left: 34%


}
.stone-bottom-center:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 123px;
    border-left: 1px dashed #fff;
    transform: rotate(90deg);
    left: -98px;
    top: -50px;
}
.stone-bottom-center {
    bottom: 50%;
    left: 62%;
    transform: translateX(-50%);
}

.stone-bottom-right {
    bottom: 22%;
    right: 33%;
}
.stone-bottom-right:before {
    width: 1px;
    height: 100px;
    position: absolute;
    border-left: 1px dashed #fff;
    content: '';
    transform: rotate(-52deg);
    left: 101px;
    bottom: -85px;
}



.scroll-trigger{
    cursor:pointer;
    transition: all 0.4s ease;
}

.scroll-trigger:hover{
    letter-spacing:5px;
    color:#ffffff;
/*    transform: translateY(-5px);
*/}

/* Optional subtle pulse */
.scroll-trigger::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:100%;
    height:1px;
    background:#fff;
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 0.4s ease;
}

.scroll-trigger:hover::after{
/*    transform:scaleX(1);
*/}










@media (max-width:1200px){

.heading{
font-size:30px;
}

.ring-wrapper{
width:320px;
height:320px;
}

.ring-layer{
width:260px;
}

.product-content{
width:320px;
right:5%;
}

}

@media (max-width:1200px){

.section3-heading{
font-size:40px;
}

.section3-new-heading{
font-size:24px;
}

.section3-left-image{
width:260px;
}

.section3-right-image{
width:160px;
}

.section3-bottom-img{
width:150px;
}

.section3-final-heading{
font-size:34px;
line-height:60px;
}

}