@media screen and (min-width: 900px) and (max-width: 1300px) {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    @keyframes twinkle {
        0% { opacity: 0.2; }
        50% { opacity: 0.8; }
        100% { opacity: 0.2; }
    }
    
    @keyframes float {
        0% { transform: translateY(0px) translateX(0px); }
        50% { transform: translateY(-15px) translateX(5px); }
        100% { transform: translateY(0px) translateX(0px); }
    }
    
    .star {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    
    .star.small {
        width: 1px;
        height: 1px;
        box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
    }
    
    .star.medium {
        width: 1.5px;
        height: 1.5px;
        box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
    }
    
    .star.large {
        width: 2px;
        height: 2px;
        box-shadow: 0 0 3px rgba(255, 255, 255, 0.3);
    }
    
    .shooting-star {
        position: absolute;
        height: 1px;
        background: linear-gradient(90deg, 
            rgba(255,255,255,0) 0%, 
            rgba(255,255,255,0.2) 25%,
            rgba(255,255,255,0.8) 50%, 
            rgba(255,255,255,0.2) 75%,
            rgba(255,255,255,0) 100%);
        opacity: 0;
        transform-origin: right center;
    }
    
    .shooting-star.direction-1 {
        animation: shoot-1 8s linear infinite;
    }
    
    .shooting-star.direction-2 {
        animation: shoot-2 8s linear infinite;
    }
    
    .shooting-star.direction-3 {
        animation: shoot-3 8s linear infinite;
    }
    
    .shooting-star.direction-4 {
        animation: shoot-4 8s linear infinite;
    }
    
    .shooting-star.fast {
        width: 150px;
        animation-duration: 4s !important;
    }
    
    .shooting-star.medium {
        width: 100px;
        animation-duration: 6s !important;
    }
    
    .shooting-star.slow {
        width: 80px;
        animation-duration: 8s !important;
    }
    
    .shooting-star.extra-long {
        width: 200px;
        animation-duration: 6s !important;
    }
    
    .shooting-star.long {
        width: 150px;
        animation-duration: 5s !important;
    }
    
    .shooting-star.medium {
        width: 100px;
        animation-duration: 4s !important;
    }
    
    .shooting-star.short {
        width: 80px;
        animation-duration: 3s !important;
    }
    
    @keyframes shoot-1 {
        0% {
            transform: translateX(-150%) translateY(-50%) rotate(35deg);
            opacity: 0;
        }
        10% {
            opacity: 0.8;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(250%) translateY(-150%) rotate(35deg);
            opacity: 0;
        }
    }
    
    @keyframes shoot-2 {
        0% {
            transform: translateX(250%) translateY(-50%) rotate(-145deg);
            opacity: 0;
        }
        10% {
            opacity: 0.8;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(-150%) translateY(-150%) rotate(-145deg);
            opacity: 0;
        }
    }
    
    @keyframes shoot-3 {
        0% {
            transform: translateX(-100%) translateY(-150%) rotate(100deg);
            opacity: 0;
        }
        10% {
            opacity: 0.8;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(100%) translateY(250%) rotate(100deg);
            opacity: 0;
        }
    }
    
    @keyframes shoot-4 {
        0% {
            transform: translateX(100%) translateY(-150%) rotate(-100deg);
            opacity: 0;
        }
        10% {
            opacity: 0.8;
        }
        20% {
            opacity: 0;
        }
        100% {
            transform: translateX(-100%) translateY(250%) rotate(-100deg);
            opacity: 0;
        }
    }
    
    #starfield {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        overflow: hidden;
    }
    
    .container {
        width: 100%;
        height: 100%;
        margin-bottom: 80px;
    }
    
    .header {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
    }
    
    img.Homepage_Navbar_Logo {
      width: 114px;
      height: 32px;
      margin-left: 156px;
    }
    
    .content {
        width: 100%;
        display: flex;
        position: relative;
        min-height: 120vh;
        overflow: hidden;
    }
    
    .mockup-container {
        position: absolute;
        right: 105px;
        top: 467px;
        width: 418px;
        height: 673px;
        zoom: 0.8;
    }
    
    .mockup {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    img.Hero_bg {
      width: 100%;
      position: absolute;
      /* min-width: 1440px; */
    }
    
    .hero-content {
        position: absolute;
        top: 168px;
        left: 156px;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
    }
    
    .hero-content-title {
        width: 650px;
        flex-grow: 0;
        font-family: PingFangSC;
        font-size: 54px;
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #fff;
    }
    
    .hero-content-subtitle {
        margin-top: 16px;
        width: 552px;
        flex-grow: 0;
        font-family: PingFangSC;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.63;
        letter-spacing: normal;
        color: #fff;
    }
    
    .hero-content-point {
        display: flex;
        flex-direction: column;
        margin-top: 27px;
    }
    
    .hero-content-point-item {
        height: 32px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        margin: 0 0 24px;
        padding: 0;
    }
    
    .hero-content-point-item-p{
        width: 12px;
        height: 12px;
        flex-grow: 0;
        box-shadow: 0 0 35px 0 rgba(74, 246, 205, 0.84);
        background-color: #4af6cd;
        border-radius: 12px;
    }
    
    .hero-content-point0-item-img {
        width: 32px;
        height: 32px;
    }
    
    .hero-content-point-item-title {
        font-family: PingFangSC;
        font-size: 20px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: normal;
        color: #fff;
    }
    
    .ButtonCTADownload {
        width: 229px;
        height: 56px;
        flex-grow: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px 24px;
        border-radius: 28px;
        background-color: #1cb0f7;
        margin-top: 52px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .ButtonCTADownload::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );
        animation: shine 3s infinite;
    }
    
    @keyframes shine {
        0% {
            left: -100%;
        }
        20% {
            left: 100%;
        }
        100% {
            left: 100%;
        }
    }
    
    .ButtonCTADownload:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(28, 176, 247, 0.4);
    }
    
    .ButtonCTADownload:active {
        transform: translateY(1px);
    }
    
    img.IconsiconsColorDownload {
      width: 32px;
      height: 32px;
      margin: 0 9px 0 0;
      object-fit: contain;
    }
    
    .ButtonCTADownload-text {
        margin: 2px 0 4px 0px;
        font-family: PingFangSC;
        font-size: 19.1px;
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #fff;
    }
    
    .hero-app-rate {
        display: flex;
        margin-top: 34px;
    }
    
    img.HomepageHerostar {
        width: 80px;
        height: 16px;
        margin: 3px 12px 3px 0;
        object-fit: contain;
      }
    
    .hero-app-rate-text {
        margin: 2px 0px 1px 0px;
        font-family: Roboto;
        font-size: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #fff;
    }
    
    .hero-app-user-count {
        margin: 0 0 0 4px;
        font-family: Roboto;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: normal;
        color: #fff;
    }
    
    img.HomepageSection {
      width: 100vw;
      object-fit: contain;
    }

    .Hero_bg {
        width: 100vw;
        height: 120vh;
        padding: 94px 0 56px;
        border-radius: 45px;
        background-image: linear-gradient(to bottom, #0074ab, #005097 32%, #1c2974 69%, #1c2974);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

}