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

html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;
    

    overflow-y:auto !important;

    scrollbar-width:none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{

    display:none;
}

/* =====================================
   MAIN SCENE
===================================== */







.blog-scene{

    position:relative;
    
    overflow:hidden;

    width:100%;

    height:300px;

    overflow:hidden;

    background:
    radial-gradient(
        ellipse at center,
        rgba(0,140,255,.12) 0%,
        rgba(0,80,180,.08) 45%,
        transparent 80%
    );
}













/* =====================================
   LEFT CATEGORY PANEL
===================================== */

.blog-categories{

    position:absolute;

    left:60px;
    top:45px;

    z-index:100;

    width:420px;
}

.blog-label{

    color:#fff;

    font-size:24px;

    font-weight:800;

    margin-bottom:15px;
}

.blog-label span{

    color:#3ea6ff;

    text-shadow:
    0 0 15px rgba(62,166,255,.8);
}

.blog-line{

    width:150px;
    height:2px;

    margin-bottom:35px;

    background:
    linear-gradient(
        90deg,
        #3ea6ff,
        transparent
    );

    box-shadow:
    0 0 12px rgba(62,166,255,.7);
}

.blog-categories h3{

    color:#fff;

    font-size:20px;

    font-weight:500;

    line-height:1.8;
}

.blog-categories h3 span{

    color:#3ea6ff;

    text-shadow:
    0 0 15px rgba(62,166,255,.8);
}

/* =====================================
   CENTER AREA
===================================== */

.blog-center{

    position:absolute;

    right:20px;

    top:90%;

    transform:translateY(-50%);

    width:700px;

    height:300px;


    background:none;

    box-shadow:none;
}
/* =====================================
   ORBITS
===================================== */

.orbit{

    position:absolute;

    left:50%;
    top:50%;

    transform:
    translate(-50%,-50%);

    border-radius:50%;

    border:
    1px solid rgba(0,160,255,.22);
}

.orbit-1{

    width:720px;
    height:420px;
}

.orbit-2{

    width:620px;
    height:330px;
}

.orbit-3{

    width:520px;
    height:260px;

    border-style:dashed;

    opacity:.45;
}

/* =====================================
   ORBIT DOTS
===================================== */

.orbit-dot{

    position:absolute;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#45c7ff;

    box-shadow:
    0 0 15px #45c7ff,
    0 0 35px #45c7ff;

    z-index:5;
}

.dot-1{
    top:120px;
    left:310px;
}

.dot-2{
    top:260px;
    left:130px;
}

.dot-3{
    top:440px;
    left:320px;
}

.dot-4{
    top:120px;
    right:130px;
}

.dot-5{
    top:260px;
    right:40px;
}

.dot-6{
    top:440px;
    right:130px;
}

/* =====================================
   BLOG CARD
===================================== */

.blog-card{

    position:absolute;

    left:50%;

    top:10%;

    transform:translate(-50%,-50%);

    width:80px;

    height:100px;


    border-radius:30px;

    background:
    linear-gradient(
        180deg,
        rgba(15,35,95,.95),
        rgba(5,12,30,.98)
    );

    border:1px solid rgba(0,170,255,.45);

    box-shadow:
    0 0 40px rgba(0,170,255,.35),
    inset 0 0 30px rgba(255,255,255,.03);

    z-index:30;
}

.blog-title{

    text-align:center;

    margin-top:30px;

    color:#fff;

    font-size:18px;

    font-weight:900;

    line-height:1;
}

.blog-title span{

    display:block;

    color:#37a7ff;

    text-shadow:
    0 0 15px rgba(55,167,255,.9),
    0 0 35px rgba(55,167,255,.6);
}

/* =====================================
   BLOG IMAGE ICON
===================================== */

.blog-image-icon{

    width:90px;
    height:80px;

    margin:35px auto 0;

    border-radius:12px;

    background:
    linear-gradient(
        180deg,
        rgba(35,110,255,.8),
        rgba(0,120,255,.35)
    );

    box-shadow:
    0 0 20px rgba(35,110,255,.4);
}

/* =====================================
   BLOG LINES
===================================== */

.blog-lines{

    width:90px;
    height:10px;

    border-radius:20px;

    margin:18px auto 0;

    background:
    rgba(50,140,255,.6);
}

.blog-lines.small{

    width:120px;
}

.blog-lines.mini{

    width:70px;
}

/* =====================================
   CATEGORY CARDS
===================================== */

.category-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:4px;

    width:150px;
    height:20px;

    padding:18px;

    border-radius:22px;


    background:
    rgba(5,15,35,.75);

    border:
    1px solid rgba(255,255,255,.05);

    box-shadow:
    0 0 20px rgba(0,180,255,.08);
}

.card-icon{

    font-size:18px;
}

.card-text{

    color:#fff;

    font-size:10px;

    font-weight:500;

    line-height:1.3;
}





















/* =====================================
   CATEGORY COLORS
===================================== */

.finance{

    top:-80px;
    left:430px;
}

.business{

    top:-80px;
    right:450px;
}

.insurance{

    top:20px;
    left:70px;
}

.money{

    top:20px;
    right:60px;
}

.income{

    top:120px;
    left:120px;
}

.budget{

    top:120px;
    right:120px;
}


/* =====================================
   MAIN PAGES
===================================== */

.left-page{

    position:absolute;

    left:85px;
    bottom:0;

    width:180px;
    height:125px;

    border-radius:10px;

    background:
    linear-gradient(
        180deg,
        #8de0ff,
        #2678ff
    );

    transform:
    rotate(-18deg);

    box-shadow:
    0 0 35px rgba(0,180,255,.45);
}

.right-page{

    position:absolute;

    right:85px;
    bottom:0;

    width:180px;
    height:125px;

    border-radius:10px;

    background:
    linear-gradient(
        180deg,
        #8de0ff,
        #2678ff
    );

    transform:
    rotate(18deg);

    box-shadow:
    0 0 35px rgba(0,180,255,.45);
}



/* =====================================
   PARTICLES
===================================== */

.particle{

    position:absolute;

    border-radius:50%;

    background:#59d6ff;

    box-shadow:
    0 0 12px #59d6ff;

    animation:
    particleFloat linear infinite;
}

@keyframes particleFloat{

    0%{

        opacity:.2;

        transform:
        translateY(0);
    }

    50%{

        opacity:1;
    }

    100%{

        opacity:.2;

        transform:
        translateY(-80px);
    }
}

/* =====================================
   CARD FLOAT
===================================== */

.category-card{

    animation:
    cardFloat 5s ease-in-out infinite;
}

@keyframes cardFloat{

    0%{
        transform:
        translateY(0);
    }

    50%{
        transform:
        translateY(-8px);
    }

    100%{
        transform:
        translateY(0);
    }
}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

    .blog-categories{
        display:none;
    }

    .blog-scene{
        height:520px;
    }

    .blog-center{

        width:100%;
        height:520px;

        right:0;
        top:40%;

        transform:translateY(-50%);
    }

    .blog-card{

        width:70px;
        height:90px;

        top:180px;
        left:50%;

        transform:translateX(-50%);
    }

    .blog-title{
        font-size:12px;
        margin-top:30px;
    }

    .category-card{

        width:110px;
        height:40px;

        padding:12px;
    }
    
    
     .card-text{

        font-size:8px;

        line-height:1.2;
    }

    
    
    

    .business{

        top:150px;
        left:30px;

        transform:translateX(-50%);
    }

    .finance{

        top:150px;
        left:60%;

        transform:translateX(-50%);
    }

    .insurance{

        top:210px;
        left:10px;
    }

    .money{

        top:210px;
        right:10px;
    }

    .income{

        top:280px;
        left:18px;
    }

    .budget{

        top:280px;
        right:18px;
    }

}














































#globe3d{

    position:absolute;

    inset:0;

    opacity:.45;

    filter:blur(2px);

    -webkit-mask-image:
    radial-gradient(
        ellipse at center,
        black 55%,
        rgba(0,0,0,.8) 70%,
        transparent 100%
    );

    mask-image:
    radial-gradient(
        ellipse at center,
        black 55%,
        rgba(0,0,0,.8) 70%,
        transparent 100%
    );
}