/* ===== Reset & base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow-x: hidden; /* prevents horizontal stretch from vw / -20% overflow */
}
h1, h2, h3, h4, h5, h6, span, .footer ul li a, .footer p, .sc-sigle-item .title a {
    color: white !important;
}
body {
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    color: white;
    position: relative;
    min-height: 100vh;
}
.header-top {
    /*background: url('/SiteTemplate/assets/img/banners/topbg-3.jpg');
    background-repeat: no-repeat;
    background-size: cover;*/
    background: hsla(339, 100%, 55%, 1);
    background: linear-gradient(180deg, hsla(339, 100%, 55%, 1) 0%, hsla(257, 76%, 54%, 1) 100%);
    background: -moz-linear-gradient(180deg, hsla(339, 100%, 55%, 1) 0%, hsla(257, 76%, 54%, 1) 100%);
    background: -webkit-linear-gradient(180deg, hsla(339, 100%, 55%, 1) 0%, hsla(257, 76%, 54%, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#FF1B6B", endColorstr="#622FE2", GradientType=1 );
}
.blog-item.product-item a{
    color:purple !important;
    font-size:19px;
    text-align:center;
}
.blog-item.product-item .content .title{
    color:purple !important;
    font-size:19px;
    text-align:center;
    line-height:0.5rem;   
}
.header-top * {
    color: white !important;
}

    .header-top-sticky {
    background: url('/SiteTemplate/assets/img/banners/topbg-4.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
.footer-bottom {
    border-top: 10px dashed #F61B71;
}
.footer-widget-item h2::after {
    background: #F61B71;
}
.footer-widget-item h2::before {
    background: #fff;
    width:100px;
    height:5px;
}
.blog-item {
    box-shadow: 1px 3px 24px 0px rgba(0,0,0,1);
    -webkit-box-shadow: 1px 3px 24px 0px rgba(0,0,0,1);
    -moz-box-shadow: 1px 3px 24px 0px rgba(0,0,0,1);
}
.section-padding-2 {
    padding-top:0;
    padding-bottom:0;
}
/* ===== Star layers (fixed to viewport, behind content) ===== */
.stars, .stars2, .stars3, .nebula {
    position: fixed; /* viewport-locked → no layout stretch */
    inset: 0;
    pointer-events: none;
    z-index: -1; /* paint BEHIND all content */
}

/* Layer 1 — small distant stars */
.stars {
    background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 40px 70px, #fff, transparent), radial-gradient(1px 1px at 90px 40px, #fff, transparent), radial-gradient(2px 2px at 130px 80px, #fff, transparent), radial-gradient(1px 1px at 160px 120px, #fff, transparent), radial-gradient(2px 2px at 200px 50px, #fff, transparent), radial-gradient(1px 1px at 250px 90px, #fff, transparent), radial-gradient(1px 1px at 300px 150px, #fff, transparent), radial-gradient(2px 2px at 350px 20px, #fff, transparent), radial-gradient(1px 1px at 400px 110px, #fff, transparent);
    background-repeat: repeat;
    background-size: 450px 200px;
    animation: drift 120s linear infinite, twinkle 4s ease-in-out infinite alternate;
    opacity: 0.9;
}

/* Layer 2 — medium stars, different speed for parallax */
.stars2 {
    background-image: radial-gradient(2px 2px at 50px 60px, #cfe8ff, transparent), radial-gradient(3px 3px at 150px 130px, #ffffff, transparent), radial-gradient(2px 2px at 240px 30px, #a5c8ff, transparent), radial-gradient(3px 3px at 320px 170px, #ffffff, transparent), radial-gradient(2px 2px at 400px 90px, #e0f0ff, transparent);
    background-repeat: repeat;
    background-size: 500px 250px;
    animation: drift 80s linear infinite reverse, twinkle 6s ease-in-out infinite alternate;
    opacity: 0.7;
}

/* Layer 3 — big bright stars, closest */
.stars3 {
    background-image: radial-gradient(3px 3px at 100px 100px, #fff, transparent), radial-gradient(4px 4px at 300px 200px, #ffe9c4, transparent), radial-gradient(3px 3px at 500px 60px, #fff, transparent);
    background-repeat: repeat;
    background-size: 600px 300px;
    animation: drift 50s linear infinite, twinkle 3s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 6px #fff);
}

/* ===== Animations ===== */
@keyframes drift {
    from {
        transform: translateY(0) translateX(0);
    }

    to {
        transform: translateY(-200px) translateX(-100px);
    }
}

@keyframes twinkle {
    from {
        opacity: 0.3;
    }

    to {
        opacity: 1;
    }
}

/* ===== Nebula glow ===== */
.nebula {
    inset: -20%; /* overridden by fixed + overflow-x: hidden */
    background: radial-gradient(circle at 30% 40%, rgba(120, 40, 200, 0.35), transparent 40%), radial-gradient(circle at 70% 60%, rgba(0, 120, 200, 0.30), transparent 45%), radial-gradient(circle at 50% 80%, rgba(200, 60, 120, 0.25), transparent 40%);
    filter: blur(60px);
    animation: nebulaPulse 20s ease-in-out infinite alternate;
    /* no z-index here — inherits -1 from group rule above */
}

@keyframes nebulaPulse {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.15) rotate(6deg);
        opacity: 1;
    }
}

/* ===== Base shooting star ===== */
.shooting-star {
    position: fixed; /* viewport-locked like the star layers */
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px #fff, 0 0 20px 6px rgba(150, 200, 255, 0.6);
    pointer-events: none;
    z-index: 0; /* above stars, below content */
    opacity: 0;
}

    /* Glowing tail */
    .shooting-star::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        width: 120px;
        height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95));
    }

/* =========================================================
   Each star: starting position, angle, duration, delay
   ========================================================= */

/* 1️⃣ Top-left → bottom-right (classic) */
.s1 {
    top: 10%;
    left: -5%;
    animation: shoot1 7s linear infinite;
}

@keyframes shoot1 {
    0% {
        transform: translate(0, 0) rotate(25deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(110vw, 55vh) rotate(25deg);
        opacity: 0;
    }
}

/* 2️⃣ Top-right → bottom-left */
.s2 {
    top: 5%;
    right: -5%;
    animation: shoot2 9s linear infinite;
    animation-delay: 2s;
}

@keyframes shoot2 {
    0% {
        transform: translate(0, 0) rotate(155deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    60% {
        opacity: 1;
    }

    100% {
        transform: translate(-110vw, 60vh) rotate(155deg);
        opacity: 0;
    }
}

/* 3️⃣ Left → right, horizontal streak */
.s3 {
    top: 45%;
    left: -10%;
    animation: shoot3 10s linear infinite;
    animation-delay: 4s;
}

@keyframes shoot3 {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    100% {
        transform: translate(120vw, 0) rotate(0deg);
        opacity: 0;
    }
}

/* 4️⃣ Top → straight down */
.s4 {
    top: -1%;
    right: 15%;
    animation: shoot4 8s linear infinite;
    animation-delay: 1s;
}

@keyframes shoot4 {
    0% {
        transform: translate(0, 0) rotate(90deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    100% {
        transform: translate(0, 115vh) rotate(90deg);
        opacity: 0;
    }
}

/* 5️⃣ Bottom-left → top-right (upward streak) */
.s5 {
    bottom: -5%;
    left: 20%;
    animation: shoot5 11s linear infinite;
    animation-delay: 6s;
}

@keyframes shoot5 {
    0% {
        transform: translate(0, 0) rotate(-35deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    100% {
        transform: translate(110vw, -70vh) rotate(-35deg);
        opacity: 0;
    }
}

/* 6️⃣ Steep dive from top-right corner */
.s6 {
    top: -5%;
    right: 15%;
    animation: shoot6 6.5s linear infinite;
    animation-delay: 3.5s;
}

@keyframes shoot6 {
    0% {
        transform: translate(0, 0) rotate(120deg);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    55% {
        opacity: 1;
    }

    100% {
        transform: translate(-60vw, 110vh) rotate(120deg);
        opacity: 0;
    }
}
/*************scrollbar*******************/

body {
    --sb-track-color: #232e33;
    --sb-thumb-color: #6530E0;
    --sb-size: 24px;
}

    body::-webkit-scrollbar {
        width: var(--sb-size)
    }

    body::-webkit-scrollbar-track {
        background: var(--sb-track-color);
        border-radius: 3px;
    }

    body::-webkit-scrollbar-thumb {
        background: var(--sb-thumb-color);
        border-radius: 3px;
    }

@supports not selector(::-webkit-scrollbar) {
    body {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}
/********************************/
.heros-slider-area {
    border-radius: 20px;
    border: 3px dashed #BA249F;
    background-color: #F71A70;
}
    .heros-slider-area .swiper-slide {
        margin-bottom:20px;
    }
.content.mainContent, .blog-details-content, .p-3.Summary span, .meta *,
.widgets-single *,
.tags-could *,
.comments-list-full *,
.comments-form-full *, .product-item .title, .textBox *, .card-box table *, .alert *, .banner-hero.banner-breadcrums .text-heading-2 {
    color: black !important;
}
    .blog-details-content .content .cate a {
        background-color: #F71A70;
        color:white !important;
        border-radius:5px;
        cursor:pointer;
    }
        .widgets-single{
    opacity:0.5;
}
.widgets-single:hover{
    opacity:1;
}
.btnComment, .btnBuy {
    background-color: #6530E1;
    border: 0;
    color: white !important;
}
.about-content *, .about-content  ul li{
    color: white;
}
.pagination li *:not(.active) {
    background: #F71A70 !important;
    color:white;
    border-radius:20px;
}
    .pagination li *:not(.active):hover {
        background: #6431E3 !important;
    }
.pagination li .active {
    background: #fff !important;
    color:black !important;
    border-radius:20px;
}
.fr-pagination ul li span{
    box-shadow:none;
}