/* ==========================================================
   MINECRFTMODS NEW MODS V33
   ========================================================== */

.v33-page{
    margin:0;
    min-height:100vh;
    color:#f7f9ff;
    background:#05080d;
    font-family:Inter,Arial,sans-serif;
}

.v33-bg{
    position:fixed;
    inset:0;
    z-index:-10;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    transform:scale(1.025);
}

.v33-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            180deg,
            rgba(4,7,12,.42),
            rgba(4,7,12,.74) 48%,
            rgba(4,7,12,.94)
        );
}

.v33-shell{
    width:min(1180px,calc(100% - 36px));
    margin:auto;
}

.v33-header{
    position:sticky;
    top:0;
    z-index:5000;

    border-bottom:1px solid rgba(255,255,255,.08);

    background:rgba(5,8,14,.66);

    backdrop-filter:
        blur(20px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(150%);
}

.v33-header-inner{
    min-height:82px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.v33-brand{
    display:flex;
    align-items:center;
    gap:13px;

    color:white;
    text-decoration:none;
    font-weight:900;
    font-size:19px;
}

.v33-brand img{
    width:50px;
    height:50px;
    object-fit:cover;
    border-radius:15px;
}

.v33-nav{
    display:flex;
    align-items:center;
    gap:7px;
}

.v33-nav a{
    color:#c5cbd7;
    text-decoration:none;
    font-weight:750;

    padding:12px 14px;
    border-radius:13px;

    transition:.2s ease;
}

.v33-nav a:hover,
.v33-nav a.active{
    color:#fff;

    background:
        rgba(255,255,255,.07);

    transform:
        translateY(-2px);
}

.v33-main{
    padding:32px 0 45px;
}

.v33-back{
    display:grid;
    place-items:center;

    width:53px;
    height:53px;

    margin-bottom:18px;

    color:#fff;
    font-size:25px;
    text-decoration:none;

    border-radius:16px;

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

    background:
        rgba(9,13,21,.72);

    backdrop-filter:blur(15px);

    transition:.2s ease;
}

.v33-back:hover{
    transform:
        translateX(-5px);
}

.v33-hero{
    position:relative;
    overflow:hidden;

    display:grid;

    grid-template-columns:
        220px 1fr;

    gap:32px;

    padding:36px;

    border-radius:29px;

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

    background:
        linear-gradient(
            135deg,
            rgba(8,13,21,.93),
            rgba(24,20,40,.88)
        );

    box-shadow:
        0 32px 100px
        rgba(0,0,0,.36);

    backdrop-filter:
        blur(22px);
}

.v33-hero::before{
    content:"";
    position:absolute;

    width:430px;
    height:430px;

    right:-150px;
    top:-170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(153,94,255,.25),
            rgba(62,174,255,.06) 48%,
            transparent 70%
        );

    animation:
        v33glow
        7s ease-in-out
        infinite alternate;
}

@keyframes v33glow{
    from{
        transform:
            translate3d(-12px,5px,0)
            scale(.96);
    }

    to{
        transform:
            translate3d(22px,-14px,0)
            scale(1.07);
    }
}

.v33-logo{
    position:relative;
    z-index:2;

    width:220px;
    height:220px;

    display:grid;
    place-items:center;

    border-radius:28px;

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

    background:
        rgba(255,255,255,.05);

    box-shadow:
        0 25px 60px
        rgba(0,0,0,.28);
}

.v33-logo img{
    width:170px;
    height:170px;

    object-fit:contain;

    border-radius:24px;

    filter:
        drop-shadow(
            0 20px 25px
            rgba(0,0,0,.35)
        );
}

.v33-content{
    position:relative;
    z-index:2;
}

.v33-label{
    display:inline-flex;

    padding:8px 12px;

    border-radius:10px;

    color:#cbb1ff;

    background:
        rgba(156,102,255,.11);

    border:
        1px solid
        rgba(156,102,255,.24);

    font-size:11px;
    font-weight:900;

    letter-spacing:.14em;
}

.v33-content h1{
    margin:17px 0 12px;

    font-size:
        clamp(
            39px,
            6vw,
            70px
        );

    line-height:.98;

    letter-spacing:-.05em;
}

.v33-description{
    max-width:760px;

    margin:0;

    color:#b1bac9;

    line-height:1.7;

    font-size:17px;
}

.v33-tags{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:19px;
}

.v33-tag{
    padding:9px 11px;

    border-radius:10px;

    color:#dce2ed;

    background:
        rgba(255,255,255,.05);

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

    font-size:12px;
    font-weight:800;
}

.v33-info{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:11px;

    margin-top:20px;
}

.v33-info-box{
    padding:16px;

    border-radius:16px;

    background:
        rgba(4,8,14,.54);

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

.v33-info-box span{
    display:block;

    color:#818b9f;

    margin-bottom:6px;

    font-size:10px;
    font-weight:900;

    letter-spacing:.12em;
}

.v33-download{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    box-sizing:border-box;

    margin-top:22px;
    padding:20px;

    border-radius:17px;

    text-decoration:none;

    color:#fff;
    font-weight:900;
    font-size:18px;

    background:
        linear-gradient(
            135deg,
            #9e63ff,
            #6a55ed 48%,
            #3aa8f7
        );

    box-shadow:
        0 9px 0
        rgba(75,43,170,.36),
        0 20px 42px
        rgba(102,79,230,.24);

    transition:.2s ease;
}

.v33-download:hover{
    transform:
        translateY(-3px);
}

.v33-panel{
    margin-top:20px;
    padding:26px;

    border-radius:24px;

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

    background:
        rgba(8,13,21,.83);

    backdrop-filter:
        blur(17px);
}

.v33-panel h2{
    margin:0 0 10px;

    font-size:28px;
}

.v33-panel p{
    margin:0;

    color:#acb5c4;

    line-height:1.72;
}

.v33-sponsored{
    width:min(900px,100%);

    box-sizing:border-box;

    margin:21px auto;

    padding:11px;

    border-radius:19px;

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

    background:
        linear-gradient(
            145deg,
            rgba(9,14,22,.91),
            rgba(20,19,33,.78)
        );
}

.v33-sponsored-title{
    margin-bottom:8px;

    color:#818a9b;

    font-size:10px;
    font-weight:900;

    letter-spacing:.16em;
    text-transform:uppercase;
}

.v33-ad{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:50px;

    overflow:hidden;
}

.v33-related{
    margin-top:26px;
}

.v33-related-head{
    display:flex;
    align-items:end;
    justify-content:space-between;

    gap:18px;

    margin-bottom:15px;
}

.v33-related-head small{
    color:#9ce66f;

    font-size:11px;
    font-weight:900;

    letter-spacing:.14em;
}

.v33-related-head h2{
    margin:5px 0 0;

    font-size:30px;
}

.v33-arrows{
    display:flex;
    gap:8px;
}

.v33-arrows button{
    width:45px;
    height:45px;

    border-radius:13px;

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

    background:
        rgba(10,15,24,.84);

    color:white;

    font-size:23px;
    cursor:pointer;
}

.v33-slider{
    display:flex;
    gap:13px;

    overflow-x:auto;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding-bottom:8px;
}

.v33-slider::-webkit-scrollbar{
    display:none;
}

.v33-related-card{
    flex:
        0 0
        300px;

    display:flex;
    align-items:center;

    gap:14px;

    padding:14px;

    scroll-snap-align:start;

    border-radius:18px;

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

    background:
        rgba(7,11,18,.88);

    color:white;

    text-decoration:none;

    transition:.2s ease;
}

.v33-related-card:hover{
    transform:
        translateY(-4px);

    border-color:
        rgba(156,102,255,.32);
}

.v33-related-card img{
    width:61px;
    height:61px;

    object-fit:contain;

    border-radius:14px;
}

.v33-related-card strong{
    display:block;
}

.v33-related-card span{
    display:block;

    margin-top:5px;

    color:#929bad;

    font-size:12px;
}


/* ==========================================================
   FUN CATEGORY
   ========================================================== */

.v33-category-main{
    padding:45px 0 70px;
}

.v33-category-hero{
    padding:34px;

    border-radius:29px;

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

    background:
        linear-gradient(
            145deg,
            rgba(8,13,22,.92),
            rgba(31,23,49,.82)
        );

    backdrop-filter:
        blur(20px);
}

.v33-category-hero small{
    color:#99e16f;

    font-weight:900;

    letter-spacing:.15em;
}

.v33-category-hero h1{
    margin:8px 0;

    font-size:
        clamp(
            48px,
            8vw,
            84px
        );

    letter-spacing:-.06em;
}

.v33-category-hero p{
    max-width:720px;

    color:#abb4c4;

    line-height:1.7;
}

.v33-category-grid{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:18px;

    margin-top:22px;
}

.v33-category-card{
    overflow:hidden;

    border-radius:25px;

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

    background:
        rgba(8,13,21,.88);

    color:white;

    text-decoration:none;

    transition:
        transform .24s ease,
        box-shadow .24s ease;
}

.v33-category-card:hover{
    transform:
        translateY(-5px);

    box-shadow:
        0 26px 70px
        rgba(0,0,0,.28);
}

.v33-category-media{
    min-height:250px;

    display:grid;
    place-items:center;

    background:
        radial-gradient(
            circle,
            rgba(157,100,255,.16),
            rgba(7,12,20,.95)
        );
}

.v33-category-media img{
    width:165px;
    height:165px;

    object-fit:contain;

    border-radius:27px;
}

.v33-category-body{
    padding:23px;
}

.v33-category-body small{
    color:#99e16f;
    font-weight:900;
}

.v33-category-body h2{
    margin:8px 0;

    font-size:27px;
}

.v33-category-body p{
    margin:0;

    color:#abb3c2;

    line-height:1.6;
}


/* ==========================================================
   HOME SECTION
   ========================================================== */

#v33-fun-home{
    width:min(1180px,calc(100% - 36px));

    margin:
        48px auto;

    position:relative;

    z-index:2;
}

.v33-home-box{
    padding:26px;

    border-radius:27px;

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

    background:
        linear-gradient(
            145deg,
            rgba(8,13,21,.91),
            rgba(26,21,43,.84)
        );

    backdrop-filter:
        blur(20px);
}

.v33-home-head{
    display:flex;

    align-items:end;
    justify-content:space-between;

    gap:15px;

    margin-bottom:18px;
}

.v33-home-head small{
    color:#99e16f;

    font-weight:900;

    letter-spacing:.14em;
}

.v33-home-head h2{
    margin:5px 0 0;

    font-size:
        clamp(
            31px,
            5vw,
            46px
        );
}

.v33-home-slider{
    display:flex;

    gap:14px;

    overflow-x:auto;

    scroll-snap-type:
        x mandatory;

    scroll-behavior:smooth;

    scrollbar-width:none;
}

.v33-home-slider::-webkit-scrollbar{
    display:none;
}

.v33-home-card{
    flex:
        0 0
        min(430px,80vw);

    display:grid;

    grid-template-columns:
        105px 1fr;

    align-items:center;

    gap:16px;

    padding:18px;

    box-sizing:border-box;

    scroll-snap-align:start;

    border-radius:20px;

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

    background:
        rgba(7,11,18,.84);

    color:white;

    text-decoration:none;
}

.v33-home-card img{
    width:100px;
    height:100px;

    object-fit:contain;

    border-radius:18px;
}

.v33-home-card small{
    color:#9ce56f;

    font-size:10px;
    font-weight:900;
}

.v33-home-card h3{
    margin:6px 0;

    font-size:22px;
}

.v33-home-card p{
    margin:0;

    color:#a9b2c1;

    line-height:1.5;

    font-size:13px;
}


/* ==========================================================
   DOWNLOAD PROGRESS
   ========================================================== */

.v33-overlay{
    position:fixed;
    inset:0;

    z-index:999999;

    display:grid;
    place-items:center;

    padding:20px;

    background:
        rgba(2,5,10,.83);

    backdrop-filter:
        blur(17px);
}

.v33-modal{
    width:min(480px,100%);

    box-sizing:border-box;

    padding:29px;

    border-radius:25px;

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

    background:
        linear-gradient(
            145deg,
            #090e16,
            #17132a
        );

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.5);
}

.v33-modal h3{
    margin:0 0 8px;

    font-size:26px;
}

.v33-modal p{
    color:#aeb7c6;
}

.v33-progress-head{
    display:flex;
    justify-content:space-between;

    margin-top:22px;
    margin-bottom:9px;

    font-weight:900;
}

.v33-percent{
    color:#aa73ff;
}

.v33-track{
    height:13px;

    overflow:hidden;

    border-radius:100px;

    background:
        rgba(255,255,255,.1);
}

.v33-bar{
    width:0;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #a367ff,
            #6678ff,
            #3da8f5
        );
}


/* ==========================================================
   DRAWER FUN ROW
   ========================================================== */

.v33-drawer-fun{
    display:flex !important;
    align-items:center !important;

    gap:14px !important;

    padding:12px 14px !important;

    margin:8px 0 !important;

    border-radius:15px !important;

    color:#fff !important;
    text-decoration:none !important;

    background:
        rgba(255,255,255,.04) !important;
}

.v33-drawer-fun img{
    width:45px !important;
    height:45px !important;

    object-fit:contain !important;

    border-radius:11px !important;
}


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

@media(max-width:760px){

    .v33-shell{
        width:
            calc(100% - 24px);
    }

    .v33-nav{
        display:none;
    }

    .v33-header-inner{
        min-height:75px;
    }

    .v33-brand{
        font-size:17px;
    }

    .v33-brand img{
        width:44px;
        height:44px;
    }

    .v33-main{
        padding-top:20px;
    }

    .v33-hero{
        grid-template-columns:1fr;

        padding:
            23px 18px;

        gap:20px;

        border-radius:23px;
    }

    .v33-logo{
        width:145px;
        height:145px;
    }

    .v33-logo img{
        width:118px;
        height:118px;
    }

    .v33-content h1{
        font-size:
            clamp(
                38px,
                12vw,
                56px
            );
    }

    .v33-description{
        font-size:15px;
    }

    .v33-info{
        grid-template-columns:
            repeat(2,1fr);
    }

    .v33-category-grid{
        grid-template-columns:
            1fr;
    }

    #v33-fun-home{
        width:
            calc(100% - 24px);

        margin:
            32px auto;
    }

    .v33-home-box{
        padding:
            19px 15px;
    }

    .v33-home-card{
        flex-basis:
            calc(100vw - 62px);

        grid-template-columns:
            80px 1fr;

        padding:14px;
    }

    .v33-home-card img{
        width:76px;
        height:76px;
    }

    .v33-home-card h3{
        font-size:18px;
    }

    .v33-related-card{
        flex-basis:
            calc(100vw - 64px);
    }

}