/* 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;
}


.site-container{
  width:1920px;
  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:fixed;
    width:1680px;
    left:50%;
    transform:translateX(-50%);
    top:30px;
  
    padding:0 80px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:100;
}

.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 }

.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: 400px;
    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:340px;
  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);
*/}