/*fonts-------------------*/
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
/*------------------------1.7*/
body{
  scroll-behavior: smooth;
  scroll-padding-top: 120px; /* أو ارتفاع الهيدر */
}
.div1 {
  z-index: 11;
    background: rgba(148, 4, 4, 0.976);
    width: 35%;
    height: 45px;
    min-width: 400px;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) scale(1.23);
    animation-name: div1;
    animation-fill-mode: forwards;
    animation-duration: 2.5s;
    border-radius: 20px;
    overflow: hidden;
}


.button3 {font-family: "Pixelify Sans", sans-serif; position: relative;top: -11px;animation-fill-mode: forwards; left: 27px;background: inherit;border: none;color: white;opacity: 0;
animation-name: button3;animation-duration: 0.9s;animation-delay: 1.1s; transform: scale(1.9);}
.button1 {font-family: "Pixelify Sans", sans-serif; position: relative;top: 2px;left: 55px;background: rgba(168, 35, 35, 0);border: none;color: white;opacity: 0;
animation-name: button1;animation-duration: 0.5s;animation-delay: 1.3s;scale: 1.9;animation-fill-mode: forwards;font-size: 2.2em;}
.button2 {font-family: "Pixelify Sans", sans-serif; position: relative;top: 2px;animation-fill-mode: forwards; left: 100px;background: rgba(192, 0, 0, 0);border: none;color: white;opacity: 0;
animation-name: button1;animation-duration: 0.5s;animation-delay: 1.5s;scale: 1.9;font-size: 2.2em;}
.button2:hover,.button1:hover{
  text-decoration-line:none ;
  color: orangered;
}
.title2a,.title2c{
  visibility: hidden;
  color: rgb(162, 0, 0);
  position: absolute;
    -webkit-text-stroke:1px rgb(127, 0, 0) ;
  top: 46%;
  rotate: -3deg;
  left: 25%;
  transform: translate(0%, -50%) scale(3.6);
  animation-name: title2;
  animation-delay: 1.2s;
  animation-duration: 1.50s;
    opacity: 0;
  animation-fill-mode: forwards;
  font-family:"Pixelify Sans", sans-serif ;
  font-size: 3.1vw;}
.title2b,.title2d{
  visibility: hidden;
  text-align: center;
  color: rgb(162, 0, 0);
  position: absolute;
    -webkit-text-stroke:1px rgb(127, 0, 0) ;
  top: 57%;
  rotate: -3deg;
  left: 52%;
  transform: translate(0%, -50%) scale(3.6);
  animation-name: title2;
  animation-delay: 1.2s;
  animation-duration: 1.50s;
    opacity: 0;
  animation-fill-mode: forwards;
  font-family:"Pixelify Sans", sans-serif ;
  font-size: 3.1vw}
.title2c{
  font-size: 3.6vw;
  top: 43%;
  left: 27%;
}
.title2d{
  font-size: 3.6vw;
  top: 61%;
  left: 43%;
}
@keyframes div1 {0% { width: 0; } 100% { width: 35%; }}
@keyframes div2 {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
@keyframes button1 {0% { opacity: 0; }100% { opacity: 1 }}
@keyframes button2 {0% { opacity: 0; }100% { opacity: 1 }}
@keyframes button3 {0% { opacity: 0; }100% { opacity: 1 }} 
.mix1{height: 55px;background: linear-gradient(to bottom,rgb(255, 136, 0),rgb(114, 98, 11) );margin: 0px; padding: 0px;}
.mix2{height: 55px;background: linear-gradient(to top,rgb(79, 159, 51),rgb(114, 98, 11));margin: 0px;padding: 0px;}
.b3image{
  width: 30px;
  height: 30px;
  scale: 0.9;
  position: absolute;
  top: -13.5px;
  transform-origin:center center ;
  rotate: -19deg;
  left: -14px;
}
.section1{
  height: 620px;
  border: dashed rgba(255, 0, 0, 0) 10px;
  min-width: 600px;
  background: rgb(255, 136, 0);
  position: relative;
  background-size: 50%;
  /*otherthings/Untitled\ design\ \(2\).png*/
}
.title1 {
  transform-origin:center center ;
  color: rgb(162, 0, 0);
  position: absolute;
  top: 27%;
  left: 50%;
  transform: translate(-50%, -50%) scale(3.8);
  animation-name:title1;
  animation-delay: 1;
  animation-duration:1.50s ;
  opacity: 0;
  animation-fill-mode:forwards ;
  font-family:"Pixelify Sans", sans-serif ;
  rotate: 1deg;
  -webkit-text-stroke:1px rgb(127, 0, 0) ;
  margin: 0;
  text-align: center;
  font-size: 2.4vw;
}
.title2 {
  text-align: center;
  color: rgb(162, 0, 0);
  position: absolute;
    -webkit-text-stroke:1px rgb(127, 0, 0) ;
  top: 52%;
  rotate: -3deg;
  left: 37%;
  transform: translate(0%, -50%) scale(3.6);
  animation-name: title2;
  animation-delay: 1.2s;
  animation-duration: 1.50s;
    opacity: 0;
  animation-fill-mode: forwards;
  font-family:"Pixelify Sans", sans-serif ;
  font-size: 2.4vw;
}
.title3 {
  text-align: center;
    -webkit-text-stroke:1px rgb(127, 0, 0) ;
  color: rgb(162, 0, 0);
  opacity: 0;
  position: absolute;
  font-family:"Pixelify Sans", sans-serif ;
  top: 80%;
  left: 43%;
  text-align: center;
  transform: translate(0%, -50%) scale(3.8);
  animation-name: title3;
  animation-delay: 1.4s;
  animation-duration: 1.50s;
  animation-fill-mode: forwards;
  rotate: 3deg;
  font-size:2.4vw ;
}

@keyframes title1 {0% { opacity: 0; }100% { opacity: 1 }}
@keyframes title2 {0% { opacity: 0; }100% { opacity: 1 }}
@keyframes title3 {0% { opacity: 0; }100% { opacity: 1 }}
@media (min-width: 976px) and (max-width: 1120px) {.button2 { left: 6vw; }}
@media (min-width: 976px) and (max-width: 1020px) {.div1 { width: 350px; min-width: 350px; max-width: 350px; }.button2 { left: 60px; }}
@media (min-width: 741px) and (max-width: 975px) {.title1 { font-size: 3vw; rotate: 3.1deg; }.title2 { visibility: hidden; }.title2a, .title2b { visibility: visible; }.title3 { font-size: 3.6vw; top: 81%; }}
@media (min-width: 501px) and (max-width: 740px) {.title1 { font-size: 3.6vw; top: 25%; }.title2, .title2a, .title2b { visibility: hidden; }.title2c, .title2d { visibility: visible; }.title2d { left: 40%; }.title3 { font-size: 3.6vw; }}
@media (max-width: 500px) {.title1 {font-size: 4vw;top: 25%;left: 31%;}
  @media (min-width: 425px) {.title1 { left: 35%; }}.div1 {min-width: 0;width: 70vw;height: 10vw;animation-name: div2;font-size: 2.78vw;}.button1, .button2 {top: 3px;left: 40px;}.button2 { left: 42px; }.b3image {width: 6vw;height: 6vw;left: -17px;top: -2.2vw;}.title2, .title2a, .title2b { visibility: hidden; }.title2c, .title2d { visibility: visible; font-size: 4vw; }.title2c { left: 22%; }.title2d { left: 33%; }.title3 { font-size: 4vw; left: 38%; }
@media (max-width: 424px) {.title2c { left: 19%; }.title2d { left: 25%; }.title3 { left: 30%; }}}

.section2 {
  height: 390px;
  background-image: url("Screenshot (86).png");
  background-repeat: repeat;            /* تكرار الخلفية */
  background-size: 316px;          /* حجم الخلفية (عرض × ارتفاع) */
  background-position-y:-15px  ;       /* موقع البداية (يمين/يسار, فوق/تحت) */
  background-attachment: local;         /* تبقى داخل div */
  background-color: rgb(114, 98, 11);
  border: dashed 10px rgba(161, 161, 161, 0);
}
.section3 {
  height: 465px;
  background-image: url("otherthings/Black White Minimalist Initials Monogram Jewelry Logo (1).png");
  background-repeat: repeat;
  background-size: 316px;
  background-position-y: -15px;
  background-attachment: local;
  background-color: rgb(79, 159, 51);
  border: 10px dashed rgba(0, 100, 0, 0);
  position: relative;
}


.footer{
  height: 80px;
  background: rgb(15, 52, 0);
}
.s2title{
  z-index: 10;
  margin: 0px;
  text-align: center;
  position: relative;
  left: 0px;
  top: -23px;
  font-size:55px;
  font-family:"Pixelify Sans", sans-serif ;
  color: rgb(255, 119, 0);
  -webkit-text-stroke: #ffab03 1.5px;
}
.s3title{
  margin: 0px;
  text-align: center;
  font-size:55px;
  font-family:"Pixelify Sans", sans-serif;
  color: lime;
  -webkit-text-stroke: rgb(0, 100, 0) 2.1px;

}
.Ng{
  width: 80px;
  height: 40px;
  rotate: -8deg;
  background: #ffb300;
  border-radius:5px ;
  scale: 7;
  position: relative;
  top:32% ;
  left:19vw ;
}
.NGI{
  height: 32px;
  width: 34px;
  position: relative;
  border-radius: 5px;
  top: 4px;
  left: 2px;
  border: #ff6803 1px solid;
}
.NGT{
  width: max-content;
  scale: 0.35;
  position: relative;
  top: -35px;
  left: 9px;
  font-family: "Pixelify Sans", sans-serif;
  margin: 0;
  color: rgb(255, 0, 0)
}
.NGD{
  margin: 0;
  width: max-content;
  scale: 0.26;
  position: relative;
  top: -59px;
  left: -19px;
  line-height: 16px;
  font-family: "Pixelify Sans", sans-serif;
  color: rgb(255, 85, 0);
}
.NGL{
  margin: 0;
  width: max-content ;
  height: 7px;
  font-size: 4px;
  position: absolute;
  top: 25px;
  left: 40px;
  background: red;
  border: solid red 1px;
  font-family: "Pixelify Sans", sans-serif;
  text-decoration: none;
  color: rgb(255, 255, 255);
  border-radius:2px;
}



.NGL:visited , .NGL:active , .NGL:focus{text-decoration: none;color: rgb(255, 255, 255);}
.NGL:hover{color: #ffb300;text-decoration: none;}
.NGR{
  font-size:30px ;
  transform-origin:center center ;
  position:relative ;
  top: -32px;
  font-family: "Pixelify Sans", sans-serif;color: rgb(230, 118, 6);-webkit-text-stroke: #5e0d0d 0px;}
.NGR1{position: relative;left: 60vw;}
.NGR2{position: relative;left: 57vw;}
.NGR3{position: relative;left: 60vw;}
.NGR4{position: relative;left: 63vw;}
.NGR5{position: relative;left: 65vw;}
/* إزالة الهوامش والحشوات الافتراضية */

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

/* جعل الصفحة تأخذ كامل العرض والارتفاع */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* تأكد أن العناصر لا تضيف فراغًا */
body > * {
  margin: 0;
  padding: 0;
}
.HC{
  width: 280px;
  height: 400px;
  position: relative;
  top: -25px;
  left: 75%;
  background: darkgreen;
  border-radius: 30px;
  rotate: 20deg;
}
.HCI{
  position: relative;
  top: 25px;
  left: 55px ;
  scale: 1.13;
}
.HCT{
  font-family: "Pixelify Sans", sans-serif;
  color: limegreen;
  text-align: center;
  font-size: 2em;
  position: relative;
  top: 30px;
}
.HCL{
  margin: 0;
  width: max-content ;
  height: 7px;
  font-size: 4px;
  position: absolute;
  top: 340px;
  left: 45%;
  background: rgb(0, 201, 0);
  border: solid rgb(0, 201, 0) 1px;
  font-family: "Pixelify Sans", sans-serif;
  text-decoration: none;
  color: rgb(255, 255, 255);
  border-radius:2px;
  scale: 7;
}
.HCL:visited , .NGL:active , .NGL:focus{text-decoration: none;color: rgb(255, 255, 255);}
.HCL:hover{color: #5eff00;text-decoration: none;}
.HCD1{
  position: absolute;
  top: 54px;
  left: 0;
  font-family: "Pixelify Sans", sans-serif;
  font-size: 28px;
  color: rgb(0, 255, 0);
}
.HCD2{
  position: absolute;
  top: 270px;
  left: 400px;
  font-family: "Pixelify Sans", sans-serif;
  font-size: 28px;
  color: rgb(0, 255, 0);
}
.video1 {
  position: absolute;
  top: -30px;
  left: 290px;
  transform: rotate(-6deg) scale(0.652);
}

.video2 {
  position: absolute;
  top: 128px;
  left: -120px;
  transform: rotate(6deg) scale(0.8);
}
.end{
  font-size:28px ;
  position:relative ;
  text-align: center;
  font-family: "Pixelify Sans", sans-serif;color: rgb(255, 255, 255);-webkit-text-stroke: #5e0d0d 0px;}
.maker{font-size:28px ;
  position:relative ;
  top: -20px;
  text-align: center;
  font-family: "Pixelify Sans", sans-serif;color: rgb(255, 255, 255);-webkit-text-stroke: #5e0d0d 0px;}
strong{
  color: rgb(4, 255, 0);
}
  /*Globel animation*/
.title3,.title2c,.title2d, .title2,.title2a,.title2b, .title1, .button1, .button2, .b3image,.HCD2,.HCD1,.video2,.video1,.HCI, .s2title, .s3title , .NGR1 ,.NGR2 ,.NGR3 ,.NGR4 ,.NGR5,.NGL,.NGI,.NGD,.NGT,.HCL,.HCT,.section1,.section2,.section3 {transform-origin: center center;transition: all 0.3s ease; /* تجعل الحركة ناعمة */}
.title3:hover{transform: translate(0%, -50%) scale(4);}
.title2:hover,.title2c:hover,.title2d:hover,.title2b:hover,.title2a:hover{transform: translate(0%, -50%) scale(3.8);}
.title1:hover{transform: translate(-50%, -50%) scale(4);}
.button1:hover, .button2:hover{transform: scale(1.1);}
.b3image:hover{transform: scale(1.1);}
.s2title:hover, .s3title:hover{transform: scale(1.2);}
.NGR1:hover, .NGR2:hover, .NGR3:hover, .NGR4:hover, .NGR5:hover{transform: scale(1.28);}
.NGL:hover, .HCL:hover{transform: scale(1.09) rotate(3deg);}
.NGI:hover{transform: scale(1.07);}
.NGD:hover, .HCT:hover{transform: scale(1.04);}
.NGT:hover{transform: scale(1.1);}
.HCI:hover{transform: scale(1.07);}
.HCD2:hover, .HCD1:hover{transform: scale(1.07) rotate(-3deg);}
.video2:hover{transform: scale(0.875) rotate(3deg);}
.video1:hover{transform: scale(0.727) rotate(-3deg);}
.NGI:hover{transform: scale(1.07);top: 3px;}
.section1hover{border-color: rgba(255, 0, 0, 0.426);}
.section2hover{border-color: rgba(156, 134, 7,0.426);}
.section3hover{border-color: rgba(0, 100, 0, 0.426);}
/*the responsive section*/
@media (min-width:1000px) and (max-width:1391px) {.NGR1, .NGR3 { left: 55vw; }.NGR2 { left: 51vw; }.NGR4 { left: 58vw; }.NGR5 { left: 60vw; }}
@media (min-width:1000px) and (max-width:1300px) {.Ng { left: 20vw; }}
@media (min-width:1000px) and (max-width:1240px) {.NGR1, .NGR3 { left: 53vw; }.NGR2 { left: 49vw; }.NGR4 { left: 56vw; }.NGR5 { left: 58vw; }.Ng { left: 21.5vw; }}
@media (min-width:1000px) and (max-width:1191px) {.NGR1, .NGR3 { left: 52vw; }.NGR2 { left: 48vw; }.NGR4 { left: 55vw; }.NGR5 { left: 57vw; }.Ng { left: 21.2vw; }}
@media (max-width:1170px) {.section2 { height: 729px; }.Ng { top: 60%; scale: 7.6; left: 24.5vw; }.s2title { font-size: 72px; }.NGR { font-size: 33px; rotate: 2deg; }.NGR1, .NGR3 { left: 45vw; }.NGR2 { left: 41vw; }.NGR4 { left: 48vw; }.NGR5 { left: 50vw; }}
@media (max-width:1132px) {.Ng { left: 26.5vw; }.NGR1, .NGR3 { left: 41vw; }.NGR2 { left: 37vw; }.NGR4 { left: 44vw; }.NGR5 { left: 46vw; }}
@media (max-width:1080px) {.NGR1:hover,.NGR2:hover,.NGR3:hover,.NGR4:hover,.NGR5:hover{transform: scale(1.09);}}
@media (max-width:1062px) {.Ng { left: 29.5vw; }.NGR1, .NGR3 { left: 34vw; }.NGR2 { left: 30vw; }.NGR4 { left: 37vw; }.NGR5 { left: 39vw; }}
@media (max-width:948px) {.Ng { left: 32.5vw; }.NGR1, .NGR3 { left: 27vw; }.NGR2 { left: 23vw; }.NGR4 { left: 30vw; }.NGR5 { left: 32vw; }.NGR { top: -39px; }}
@media (max-width:850px) {.Ng { left: 35.5vw; }.NGR1, .NGR3 { left: 18vw; }.NGR2 { left: 14vw; }.NGR4 { left: 21vw; }.NGR5 { left: 23vw; }}
@media (max-width:744px) {.Ng { left: 38.5vw; }.NGR1, .NGR3 { left: 10vw; }.NGR2 { left: 5vw; }.NGR4 { left: 13vw; }.NGR5 { left: 17vw; }}
@media (max-width:686px) {.Ng { scale: 6.6; }.NGR { font-size: 4.8vw; }.NGR1:hover,.NGR2:hover,.NGR3:hover,.NGR4:hover,.NGR5:hover{transform: scale(1.065);}}
@media (max-width:648px) {.NGR1, .NGR3 { left: 5vw; }.NGR2 { left: 0vw; }.NGR4 { left: 8vw; }.NGR5 { left: 12vw; }}
@media (max-width:534px) {.Ng { scale: 5.6; }.NGR { top: -20px; }}
@media (max-width:450px) {.Ng { scale: 5; top: 60%;}.NGR{top: -0px;}.section2{height: 610px;}}
/*section 3*/
@media screen and (max-width:1213px) {
  .video1 { top: 410px; left: 30px; scale: 1.18; rotate: 3deg; }
  .HCD2 { top: 320px; left: 169px; scale: 1.1; }
  .section3 { height: 800px; }
  .HC { top: 280px; left: 670px; scale: 1.1; }
  .HCD1 { scale: 1.15; top: 130px; left: 600px; }
  .video2 { scale: 1.1; left: 45px; top: -10px; rotate: -3deg; }
  .s3title { scale: 1.05; }
}

@media screen and (max-width:1150px) {
  .video1 { top: 410px; left: -2px; scale: 1.18; rotate: 3deg; }
  .HCD2 { top: 320px; left: 129px; scale: 1.1; }
  .section3 { height: 800px; }
  .HC { top: 280px; left: 630px; scale: 1.1; }
  .HCD1 { scale: 1.15; top: 120px; left: 550px; }
  .video2 { scale: 1.1; left: -5px; top: -10px; rotate: -3deg; }
  .s3title { scale: 1.05; }
}

@media screen and (max-width:985px) {
  .video1 { top: 410px; left: -102px; scale: 1.18; rotate: 3deg; }
  .HCD2 { top: 320px; left: 29px; scale: 1.1; }
  .section3 { height: 800px; }
  .HC { top: 280px; left: 530px; scale: 1.1; }
  .HCD1 { scale: 1.15; top: 120px; left: 450px; }
  .video2 { scale: 1.1; left: -105px; top: -10px; rotate: -3deg; }
  .s3title { scale: 1.05; }
}
@media screen and (max-width:905px){
  .video1{top:410px;left:-146px;scale:0.98;rotate:3deg;}
  .HCD2{top:320px;left:-18px;scale:0.95;}
  .section3{height:800px;}
  .HC{top:270px;left:390px;scale:1;}
  .HCD1{scale:0.98;top:120px;left:315px;}
  .video2{scale:0.9;left:-143px;top:-10px;rotate:-3deg;}
  .s3title{scale:0.95;}
}
@media screen and (max-width:757px){
  .video1{top:339px;left:-161px;scale:0.88;rotate:3deg;}
  .HCD2{top:258px;left:-40px;scale:0.855;}
  .section3{height:720px;}
  .HC{top:213px;left:351px;scale:0.9;}
  .HCD1{scale:0.855;top:78px;left:263px;}
  .video2{scale:0.81;left:-157px;top:-39px;rotate:-3deg;}
  .s3title{scale:0.855;}
}
@media screen and (max-width:702px){
  .video1{top:190px;left:-181px;scale:0.78;rotate:3deg;}
  .HCD2{top:509px;left:-45px;scale:0.8;}
  .section3{height:820px;}
  .HC{top:50px;left:321px;scale:0.85;}
  .HCD1{scale:0.8;top:650px;left:193px;}
  .video2{scale:0.71;left:-177px;top:-39px;rotate:-3deg;}
  .s3title{scale:0.755;}
}
@media screen and (max-width:634px){
  .video1{top:130px;left:-181px;scale:0.68;rotate:3deg;}
  .HCD2{top:409px;left:-45px;scale:0.7;}
  .section3{height:720px;}
  .HC{top:18px;left:280px;scale:0.75;}
  .HCD1{scale:0.7;top:550px;left:100px;}
  .video2{scale:0.61;left:-177px;top:-59px;rotate:-3deg;}
  .s3title{scale:1;}
}
@media screen and (max-width:582px){
  .video1{top:130px;left:-181px;scale:0.68;rotate:3deg;}
  .HCD2{top:409px;left:-45px;scale:0.7;}
  .section3{height:720px;}
  .HC{top:18px;left:250px;scale:0.75;}
  .HCD1{scale:0.7;top:550px;left:100px;}
  .video2{scale:0.61;left:-177px;top:-59px;rotate:-3deg;}
  .s3title{scale:1;}
}
@media screen and (max-width:546px){
  .video1{top:100px;left:-217px;scale:0.58;rotate:3deg;}
  .HCD2{top:349px;left:-90px;scale:0.6;}
  .section3{height:620px;}
  .HC{top:-20px;left:174px;scale:0.65;}
  .HCD1{scale:0.6;top:470px;left:-90px;}
  .video2{scale:0.51;left:-214px;top:-59px;rotate:-3deg;}
  .s3title{scale:0.9;}
}
@media screen and (max-width:426px){
  .video1{top:100px;left:-227px;scale:0.48;rotate:3deg;}
  .HCD2{top:349px;left:-90px;scale:0.6;}
  .section3{height:620px;}
  .HC{top:-20px;left:134px;scale:0.55;}
  .HCD1{scale:0.6;top:470px;left:-90px;}
  .video2{scale:0.48;left:-224px;top:-59px;rotate:-3deg;}
  .s3title{scale:0.9;}
}


body{
  background: rgb(15, 52, 0);
}

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

/* جعل الصفحة تأخذ كامل العرض والارتفاع */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* تأكد أن العناصر لا تضيف فراغًا */
body > * {
  margin: 0;
  padding: 0;
}