/* Base container covering the full viewport */
    .night-sky-scene {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
  height: 50vh;
      
      background: linear-gradient(45deg, 
           hsla(220, 64%, 5%, 1) 0%, 
           hsla(220, 64%, 5%, 1) 30%, 
           hsla(225, 19%, 17%, 1) 100%);
      overflow: hidden;
    }
      
    .banny {
      position: absolute;
      bottom: -1%;
      left: 0;
      width: 100%;
      z-index: 2;
      line-height: 0; /* Prevents unwanted spacing */

      fill: #060a14;
    }
    .banny svg {
      display: block;
      width: 100%;
      transform: scaleY(-1);
      filter: drop-shadow(0px -20px 30px rgba(200, 200, 255, 0.2)); /* Softer, less spread */
    }
    .background-layers {
      position: relative;
      width: 100%;
      height: 100%;
    }
    /* Layers should not interfere with page interactions */
    .star-clusters,
    .celestial-glow,
    .shooting-star {
      position: absolute;
      pointer-events: none;
    }
    /* Star Clusters with extra stars */
    .star-clusters {
      margin: 0 auto;
      top: -10%;
      left: 0;
      width: 100%;
      height: 100%;
      background-image:
        radial-gradient(2px 2px at 890px 146px, #fff, transparent),
        radial-gradient(2px 2px at 1409px 313px, #fff, transparent),
        radial-gradient(1px 1px at 494px 28px, #fff, transparent),
        radial-gradient(2px 2px at 391px 27px, #fff, transparent),
        radial-gradient(1px 1px at 1370px 251px, #fff, transparent),
        radial-gradient(1px 1px at 1418px 44px, #fff, transparent),
        radial-gradient(1px 1px at 128px 117px, #fff, transparent),
        radial-gradient(2px 2px at 1162px 43px, #fff, transparent),
        radial-gradient(1px 1px at 1160px 109px, #fff, transparent),
        radial-gradient(2px 2px at 1123px 277px, #fff, transparent),
        radial-gradient(1px 1px at 1433px 154px, #fff, transparent),
        radial-gradient(1px 1px at 1373px 13px, #fff, transparent),
        radial-gradient(1px 1px at 1034px 118px, #fff, transparent),
        radial-gradient(1px 1px at 1443px 236px, #fff, transparent),
        radial-gradient(2px 2px at 1797px 88px, #fff, transparent),
        radial-gradient(1px 1px at 478px 188px, #fff, transparent),
        radial-gradient(1px 1px at 1167px 93px, #fff, transparent),
        radial-gradient(1px 1px at 54px 165px, #fff, transparent),
        radial-gradient(1px 1px at 532px 85px, #fff, transparent),
        radial-gradient(1px 1px at 420px 113px, #fff, transparent),
        radial-gradient(1px 1px at 811px 267px, #fff, transparent),
        radial-gradient(1px 1px at 205px 337px, #fff, transparent),
        radial-gradient(1px 1px at 673px 220px, #fff, transparent),
        radial-gradient(2px 2px at 292px 334px, #fff, transparent),
        radial-gradient(2px 2px at 662px 473px, #fff, transparent),
        radial-gradient(2px 2px at 1304px 48px, #fff, transparent),
        radial-gradient(1px 1px at 177px 37px, #fff, transparent),
        radial-gradient(1px 1px at 955px 335px, #fff, transparent),
        radial-gradient(1px 1px at 1194px 296px, #fff, transparent),
        radial-gradient(1px 1px at 1797px 178px, #fff, transparent),
        radial-gradient(1px 1px at 836px 144px, #fff, transparent),
        radial-gradient(1px 1px at 461px 30px, #fff, transparent),
        radial-gradient(2px 2px at 1547px 279px, #fff, transparent),
        radial-gradient(1px 1px at 1415px 643px, #fff, transparent),
        radial-gradient(1px 1px at 518px 659px, #fff, transparent),
        radial-gradient(2px 2px at 1375px 151px, #fff, transparent),
        radial-gradient(1px 1px at 1625px 172px, #fff, transparent),
        radial-gradient(1px 1px at 459px 101px, #fff, transparent),
        radial-gradient(1px 1px at 569px 6px, #fff, transparent),
        radial-gradient(1px 1px at 1796px 164px, #fff, transparent),
        radial-gradient(1px 1px at 1214px 556px, #fff, transparent),
        radial-gradient(1px 1px at 569px 29px, #fff, transparent),
        radial-gradient(2px 2px at 834px 4px, #fff, transparent),
        radial-gradient(1px 1px at 176px 56px, #fff, transparent),
        radial-gradient(2px 2px at 1393px 231px, #fff, transparent),
        radial-gradient(1px 1px at 487px 365px, #fff, transparent),
        radial-gradient(1px 1px at 1162px 236px, #fff, transparent),
        radial-gradient(1px 1px at 148px 371px, #fff, transparent),
        radial-gradient(1px 1px at 1127px 263px, #fff, transparent),
        radial-gradient(2px 2px at 474px 235px, #fff, transparent),
        radial-gradient(1px 1px at 567px 75px, #fff, transparent),
        radial-gradient(1px 1px at 1478px 230px, #fff, transparent),
        radial-gradient(1px 1px at 1235px 26px, #fff, transparent),
        radial-gradient(1px 1px at 1795px 104px, #fff, transparent),
        radial-gradient(1px 1px at 1107px 759px, #fff, transparent),
        radial-gradient(2px 2px at 602px 275px, #fff, transparent),
        radial-gradient(1px 1px at 728px 125px, #fff, transparent),
        radial-gradient(1px 1px at 1629px 430px, #fff, transparent),
        radial-gradient(2px 2px at 941px 38px, #fff, transparent),
        radial-gradient(1px 1px at 750px 34px, #fff, transparent),
        radial-gradient(2px 2px at 1239px 41px, #fff, transparent),
        radial-gradient(2px 2px at 679px 280px, #fff, transparent),
        radial-gradient(1px 1px at 1556px 167px, #fff, transparent),
        radial-gradient(1px 1px at 486px 22px, #fff, transparent),
        radial-gradient(1px 1px at 707px 153px, #fff, transparent),
        radial-gradient(1px 1px at 1042px 323px, #fff, transparent),
        radial-gradient(2px 2px at 1535px 388px, #fff, transparent),
        radial-gradient(2px 2px at 999px 62px, #fff, transparent),
        radial-gradient(2px 2px at 377px 159px, #fff, transparent),
        radial-gradient(3px 3px at 468px 177px, #fff, transparent),
        radial-gradient(3px 3px at 1633px 633px, #fff, transparent),
        radial-gradient(1px 1px at 851px 68px, #fff, transparent),
        radial-gradient(2px 2px at 34px 718px, #fff, transparent),
        radial-gradient(2px 2px at 590px 103px, #fff, transparent),
        radial-gradient(2px 2px at 337px 188px, #fff, transparent),
        radial-gradient(1px 1px at 1027px 250px, #fff, transparent),
        radial-gradient(1px 1px at 13px 499px, #fff, transparent),
        radial-gradient(1px 1px at 1207px 126px, #fff, transparent),
        radial-gradient(1px 1px at 1065px 552px, #fff, transparent),
        radial-gradient(1px 1px at 1637px 123px, #fff, transparent),
        radial-gradient(1px 1px at 955px 136px, #fff, transparent),
        radial-gradient(1px 1px at 162px 200px, #fff, transparent),
        radial-gradient(1px 1px at 356px 109px, #fff, transparent),
        radial-gradient(2px 2px at 1273px 34px, #fff, transparent),
        radial-gradient(1px 1px at 1387px 10px, #fff, transparent),
        radial-gradient(2px 2px at 561px 170px, #fff, transparent),
        radial-gradient(1px 1px at 1428px 152px, #fff, transparent),
        radial-gradient(1px 1px at 897px 247px, #fff, transparent),
        radial-gradient(1px 1px at 375px 118px, #fff, transparent),
        radial-gradient(2px 2px at 305px 32px, #fff, transparent),
        radial-gradient(1px 1px at 630px 408px, #fff, transparent),
        radial-gradient(1px 1px at 177px 296px, #fff, transparent),
        radial-gradient(1px 1px at 1364px 57px, #fff, transparent),
        radial-gradient(2px 2px at 530px 457px, #fff, transparent),
        radial-gradient(1px 1px at 658px 104px, #fff, transparent),
        radial-gradient(2px 2px at 908px 346px, #fff, transparent),
        radial-gradient(2px 2px at 147px 329px, #fff, transparent),
        radial-gradient(2px 2px at 112px 198px, #fff, transparent),
        radial-gradient(1px 1px at 816px 150px, #fff, transparent),
        radial-gradient(1px 1px at 1231px 144px, #fff, transparent),
        radial-gradient(1px 1px at 12px 263px, #fff, transparent),
        radial-gradient(1px 1px at 1391px 104px, #fff, transparent),
        radial-gradient(1px 1px at 1778px 88px, #fff, transparent),
        radial-gradient(1px 1px at 796px 150px, #fff, transparent),
        radial-gradient(1px 1px at 372px 163px, #fff, transparent),
        radial-gradient(1px 1px at 1073px 597px, #fff, transparent),
        radial-gradient(2px 2px at 925px 124px, #fff, transparent),
        radial-gradient(1px 1px at 32px 286px, #fff, transparent),
        radial-gradient(2px 2px at 1221px 182px, #fff, transparent),
        radial-gradient(1px 1px at 1390px 781px, #fff, transparent),
        radial-gradient(2px 2px at 925px 534px, #fff, transparent),
        radial-gradient(1px 1px at 1448px 361px, #fff, transparent),
        radial-gradient(1px 1px at 1607px 8px, #fff, transparent),
        radial-gradient(1px 1px at 1514px 58px, #fff, transparent),
        radial-gradient(1px 1px at 113px 286px, #fff, transparent),
        radial-gradient(1px 1px at 376px 131px, #fff, transparent),
        radial-gradient(1px 1px at 293px 112px, #fff, transparent),
        radial-gradient(1px 1px at 574px 96px, #fff, transparent),
        radial-gradient(1px 1px at 279px 201px, #fff, transparent),
        radial-gradient(2px 2px at 388px 228px, #fff, transparent),
        radial-gradient(1px 1px at 513px 538px, #fff, transparent),
        radial-gradient(1px 1px at 1605px 77px, #fff, transparent),
        radial-gradient(1px 1px at 1690px 238px, #fff, transparent),
        radial-gradient(1px 1px at 1359px 245px, #fff, transparent),
        radial-gradient(2px 2px at 709px 132px, #fff, transparent),
        radial-gradient(1px 1px at 560px 65px, #fff, transparent),
        radial-gradient(1px 1px at 285px 229px, #fff, transparent),
        radial-gradient(1px 1px at 516px 390px, #fff, transparent),
        radial-gradient(1px 1px at 1349px 102px, #fff, transparent),
        radial-gradient(1px 1px at 1557px 83px, #fff, transparent),
        radial-gradient(1px 1px at 473px 704px, #fff, transparent),
        radial-gradient(2px 2px at 941px 53px, #fff, transparent),
        radial-gradient(1px 1px at 573px 43px, #fff, transparent),
        radial-gradient(1px 1px at 1048px 150px, #fff, transparent),
        radial-gradient(1px 1px at 1628px 94px, #fff, transparent),
        radial-gradient(2px 2px at 1021px 153px, #fff, transparent),
        radial-gradient(2px 2px at 201px 96px, #fff, transparent),
        radial-gradient(1px 1px at 836px 666px, #fff, transparent),
        radial-gradient(1px 1px at 886px 171px, #fff, transparent),
        radial-gradient(2px 2px at 122px 170px, #fff, transparent);
      animation: starTwinkle 4s infinite ease-in-out;
    }
    @keyframes starTwinkle {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }
    .celestial-glow {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, 
          hsla(220, 64%, 5%, 1) 0%, 
          hsla(220, 64%, 5%, 1) 30%, 
          hsla(225, 19%, 17%, 1) 100%);
      pointer-events: none;
      opacity: 0.8; /* Adjust for better blending */
      z-index: -1; /* Ensure it's behind stars/moon */
    }
	
	
	      
  .headel {
  position: absolute;
  bottom: 10%;
  width: 100%;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
font-size: clamp(34px, 5vw, 56px)
 !important;
  letter-spacing: 2px;
  color: white;
  text-transform: uppercase;
  z-index: 3;
}
    .shooting-star {
      position: absolute;
      left: 40%;
      top: 0;
      width: 1px;
      height: 10%;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255));
      opacity: 0;
      transform-origin: center;
    }
    .shooting-star.shoot {
      animation: shootingStar 2s linear;
    }
    /* Shooting star animation */
    @keyframes shootingStar {
      0%, 90% { 
        transform: translate(0, 0) rotate(-55deg);
        opacity: 0;
      }
      91% { 
        opacity: 1;
      }
      100% { 
        transform: translate(60vw, 50vh) rotate(-55deg);
        opacity: 0;
      }
    }
    /* Extra Stars (changed from <let-extra-stars> to .extra-stars) */
    .extra-stars {
      display: block;
      position: absolute;
      top: 30%;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      background-image:
        radial-gradient(1px 1px at 120px 80px, #fff, transparent),
        radial-gradient(1px 1px at 250px 150px, #fff, transparent),
        radial-gradient(1px 1px at 400px 220px, #fff, transparent),
        radial-gradient(1px 1px at 550px 100px, #fff, transparent),
        radial-gradient(1px 1px at 700px 180px, #fff, transparent),
        radial-gradient(1px 1px at 850px 250px, #fff, transparent),
        radial-gradient(1px 1px at 950px 50px, #fff, transparent),
        radial-gradient(1px 1px at 1050px 300px, #fff, transparent),
        radial-gradient(1px 1px at 1150px 120px, #fff, transparent),
        radial-gradient(1px 1px at 1250px 200px, #fff, transparent);
      background-size: 1200px 1200px;
      animation: starTwinkle 3s infinite ease-in-out;
    }
    /* Media queries for shooting star adjustments on smaller screens */
    @media screen and (max-width: 767px) {
    
      @keyframes shootingStar {
        0%, 90% { 
          transform: translate(0, 0) rotate(-45deg); /* Less tilt for smaller screens */
          opacity: 0;
        }
        91% { 
          opacity: 1;
        }
        100% { 
          transform: translate(60vw, 50vh) rotate(-45deg); 
          opacity: 0;
        }
      }
    }



      @keyframes shootingStar {
        0%, 90% { 
          transform: translate(0, 0) rotate(-26.565deg); 
          opacity: 0;
        }
        91% { 
          opacity: 1;
        }
        100% { 
          transform: translate(80vw, 40vh) rotate(-26.565deg); 
          opacity: 0;
        }
      }
    
  @media screen and (max-width: 420px) {
  @keyframes shootingStar {
    0%, 90% { 
      transform: translate(0, 0) rotate(-29deg); 
      opacity: 0;
    }
    91% { 
      opacity: 1;
    }
    100% { 
      transform: translate(90vw, 50vh) rotate(-29deg); 
      opacity: 0;
    }
  }
  }
      
      
      
      
      
      
          
      
              
              
      .star-clusters {
    
   
      width: 100%;
      bottom: 10px;
      background-image: 
  radial-gradient(2px 2px at 94% 50%, #fff, transparent),
  radial-gradient(2px 2px at 25% 61%, #fff, transparent),
  radial-gradient(1px 1px at 38% 59%, #fff, transparent),
  radial-gradient(1px 1px at 73% 25%, #fff, transparent),
  radial-gradient(1px 1px at 10% 18%, #fff, transparent),
  radial-gradient(1px 1px at 94% 53%, #fff, transparent),
  radial-gradient(2px 2px at 49% 80%, #fff, transparent),
  radial-gradient(2px 2px at 25% 6%, #fff, transparent),
  radial-gradient(2px 2px at 98% 31%, #fff, transparent),
  radial-gradient(1px 1px at 79% 57%, #fff, transparent),
  radial-gradient(2px 2px at 77% 39%, #fff, transparent),
  radial-gradient(2px 2px at 54% 75%, #fff, transparent),
  radial-gradient(2px 2px at 1% 64%, #fff, transparent),
  radial-gradient(1px 1px at 70% 13%, #fff, transparent),
  radial-gradient(2px 2px at 61% 19%, #fff, transparent),
  radial-gradient(2px 2px at 74% 73%, #fff, transparent),
  radial-gradient(2px 2px at 45% 97%, #fff, transparent),
  radial-gradient(1px 1px at 99% 46%, #fff, transparent),
  radial-gradient(1px 1px at 40% 5%, #fff, transparent),
  radial-gradient(2px 2px at 51% 35%, #fff, transparent),
  radial-gradient(1px 1px at 16% 63%, #fff, transparent),
  radial-gradient(2px 2px at 5% 20%, #fff, transparent),
  radial-gradient(2px 2px at 8% 14%, #fff, transparent),
  radial-gradient(2px 2px at 33% 100%, #fff, transparent),
  radial-gradient(1px 1px at 36% 39%, #fff, transparent),
  radial-gradient(2px 2px at 56% 20%, #fff, transparent),
  radial-gradient(2px 2px at 99% 45%, #fff, transparent),
  radial-gradient(2px 2px at 6% 52%, #fff, transparent),
  radial-gradient(2px 2px at 72% 60%, #fff, transparent),
  radial-gradient(1px 1px at 46% 42%, #fff, transparent),
  radial-gradient(1px 1px at 93% 46%, #fff, transparent),
  radial-gradient(2px 2px at 42% 29%, #fff, transparent),
  radial-gradient(2px 2px at 85% 20%, #fff, transparent),
  radial-gradient(1px 1px at 23% 10%, #fff, transparent),
  radial-gradient(2px 2px at 55% 97%, #fff, transparent),
  radial-gradient(1px 1px at 98% 58%, #fff, transparent),
  radial-gradient(1px 1px at 82% 65%, #fff, transparent),
  radial-gradient(2px 2px at 100% 68%, #fff, transparent),
  radial-gradient(1px 1px at 23% 60%, #fff, transparent),
  radial-gradient(2px 2px at 33% 85%, #fff, transparent),
  radial-gradient(1px 1px at 97% 96%, #fff, transparent),
  radial-gradient(2px 2px at 22% 41%, #fff, transparent),
  radial-gradient(1px 1px at 35% 5%, #ffffffe0, transparent),
  radial-gradient(1px 1px at 98% 65%, #fff, transparent),
  radial-gradient(2px 2px at 82% 44%, #fff, transparent),
  radial-gradient(1px 1px at 95% 57%, #fff, transparent),
  radial-gradient(1px 1px at 42% 10%, #fff, transparent),
  radial-gradient(1px 1px at 65% 87%, #fff, transparent),
  radial-gradient(1px 1px at 32% 28%, #fff, transparent),
  radial-gradient(1px 1px at 60% 20%, #fff, transparent),
  radial-gradient(1px 1px at 4% 66%, #ffffff, transparent),
  radial-gradient(1px 1px at 19% 19%, #fff, transparent),
  radial-gradient(1px 1px at 47% 37%, #fff, transparent),
  radial-gradient(2px 2px at 40% 53%, #fff, transparent),
  radial-gradient(1px 1px at 63% 83%, #fff, transparent),
  radial-gradient(2px 2px at 91% 25%, #fff, transparent),
  radial-gradient(1px 1px at 75% 54%, #fff, transparent),
  radial-gradient(1px 1px at 38% 30%, #fff, transparent),
  radial-gradient(1px 1px at 52% 87%, #fff, transparent),
  radial-gradient(1px 1px at 6% 53%, #fff, transparent),
  radial-gradient(2px 2px at 7% 81%, #fff, transparent),
  radial-gradient(2px 2px at 12% 45%, #fff, transparent),
  radial-gradient(1px 1px at 41% 35%, #fff, transparent),
  radial-gradient(2px 2px at 89% 56%, #fff, transparent),
  radial-gradient(1px 1px at 93% 52%, #fff, transparent),
  radial-gradient(2px 2px at 18% 59%, #fff, transparent),
  radial-gradient(1px 1px at 35% 10%, #fff, transparent),
  radial-gradient(2px 2px at 11% 31%, #fff, transparent),
  radial-gradient(1px 1px at 58% 62%, #fff, transparent),
  radial-gradient(2px 2px at 32% 73%, #fffbfb, transparent),
  radial-gradient(1px 1px at 10% 74%, #fff, transparent),
  radial-gradient(1px 1px at 74% 40%, #fff, transparent),
  radial-gradient(2px 2px at 64% 21%, #ffffff, transparent),
  radial-gradient(1px 1px at 9% 74%, #fff, transparent),
  radial-gradient(1px 1px at 15% 21%, #fff, transparent),
  radial-gradient(2px 2px at 20% 72%, #fff, transparent);
background-size:460px 300px;
      }
          
     @media screen and (max-width: 575px) {
  .night-sky-scene{
    height: 35vh;
  }
}

@media screen and (max-width: 800px) {
  .night-sky-scene{
    height: 40vh;
  }
}