.loadingbg {
    position: fixed;
    background-color: #303030;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 2;
}
.loadingicon {
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    position: absolute;
    top: 50%;
    left: 50%;
}

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

html{
    scroll-behavior:smooth;

}

body{

    background:#111;
    color:#fff;

    font-family:
    Arial,
    sans-serif;



}


/* =====================================
   HEADER
===================================== */

.header{
    position:sticky;
    top:0;
    z-index:9999;
    background:rgba(25, 25, 25, 0.42);
backdrop-filter: blur(10px);
    border-bottom:1px solid #333;
    padding:15px 20px;

    display:flex;
    align-items:center;
    gap:15px;
}

.header img{
    height:40px; /* Adjust as needed */
    width:auto;
    display:block;
}

.header h1{
    margin:0;
    font-size:28px;
    text-transform:uppercase;
    line-height:1;
    display:flex;
    align-items:center;
    height:60px; /* Same as image height */
}


/* =====================================
   BURGER MENU
===================================== */

.burger{

    margin-left:auto;

    width:50px;

    height:50px;

    border:none;

    border-radius:10px;

    background:#222;

    color:#fff;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}

.burger:hover{

    background:#FF0000;

}

/* =====================================
   OVERLAY
===================================== */

#overlay{

    position:fixed;

    inset:0;

    background:
    rgba(
        0,
        0,
        0,
        .7
    );

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

#overlay.show{

    opacity:1;

    visibility:visible;

}

/* =====================================
   SIDE MENU
===================================== */

#sideMenu{

    position:fixed;

    top:0;

    right:-340px;

    width:320px;

    height:100vh;

    background:#181818;

    z-index:9999;

    transition:.3s;

    padding:20px;

    overflow-y:auto;

}

#sideMenu.show{

    right:0;

}

.menu-top{

    display:flex;

    justify-content:
    space-between;

    align-items:center;

    margin-bottom:20px;

}

#closeMenu{

    border:none;

    background:none;

    color:#fff;

    font-size:32px;

    cursor:pointer;

}

#sideMenu a{

    display:block;

    color:#fff;

    text-decoration:none;

    padding:15px 0;

    border-bottom:
    1px solid #333;

}

#sideMenu a:hover{

    color:#FF0000;

}

/* =====================================
   CONTAINER
===================================== */

.container{

    max-width:1500px;

    margin:auto;

    padding:20px;


}

/* =====================================
   PLAYER
===================================== */

.player-area{
    margin-bottom:35px;

}

#player{

    width:100%;
    aspect-ratio:16/9;

    background:#000;

    border-radius:12px;

    overflow:hidden;


}

#videoTitle{

    text-align:center;

    font-size:30px;

    line-height:1.3;

    margin-top:20px;

    padding:0 15px;
text-transform:uppercase;
}



/* =====================================
   SEARCH
===================================== */

.searchWrap{

    margin:20px 0 15px;

}

.searchWrap input{

    width:100%;

    padding:15px 20px;

    border:none;

    border-radius:12px;

    background:#222;

    color:#fff;

    font-size:16px;

    outline:none;

}

.searchWrap input:focus{

    box-shadow:
    0 0 0 2px #B80071;

}

.searchWrap input::placeholder{

    color:#888;

}

/* =====================================
   CATEGORIES
===================================== */

.categories{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:10px;

    margin-bottom:30px;

}

.catBtn{

    padding:
    12px 20px;

    background:#222;

    color:#fff;

    border:
    1px solid #333;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

    font-weight:bold;

}

.catBtn:hover{

    background:#B80071;

    border-color:#B80071;

}

.catBtn.active{

    background:#B80071;

    border-color:#B80071;

}

/* =====================================
   SECTION TITLES
===================================== */

.sectionTitle{

    text-align:center;

    margin:40px 0 20px;

    font-size:30px;

    text-transform:uppercase;

}

/* =====================================
   VIDEO GRID
===================================== */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
    padding-left:20px;
    padding-right:20px;
}

.card{

    background:#1b1b1b;

    border-radius:12px;

    overflow:hidden;

    cursor:pointer;

    transition:.3s;

}

.card:hover{

    transform:
    translateY(-5px);

}

.card img{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

}

.info{

    padding:15px;

}

.info h3{

    margin:0 0 10px;

    line-height:1.4;

}

.category{

    color:#999;

    font-size:13px;

}

.views{

    color:#00ff88;

    margin-top:10px;

    font-size:13px;

}
 

/* =====================================
   BACK TO TOP
===================================== */

#backToTop{

    position:fixed;

    bottom:30px;

    right:30px;

    border:none;

    border-radius:100px;

    background:#FF0000;

    color:#fff;

    padding:12px 22px;

    font-size:35px;

    cursor:pointer;

    z-index:999;

    opacity:0;

    pointer-events:none;

    transform:
    translateX(80px);

    transition:.3s;

}

#backToTop.show{

    opacity:1;

    pointer-events:auto;

    transform:
    translateX(0);

}
/* =====================================
   LIGHT / DARK MODE
===================================== */

:root{

    --bg:#111;
    --card:#1b1b1b;
    --header:rgba(25, 25, 25, 0.42);
    --input:#222;
    --border:#333;
    --text:#fff;
    --text2:#999;
    --accent:#B80071;

}

body.light{

    --bg:#f5f5f5;
    --card:#ffffff;
    --header:rgba(255, 255, 255, 0.42);
    --input:#eeeeee;
    --border:#d5d5d5;
    --text:#111;
    --text2:#666;
    --accent:#B80071;

}

body{

    background:var(--bg);
    color:var(--text);

}

.header,
#sideMenu{

    background:var(--header);

}

.header{

    border-bottom:
    1px solid var(--border);

}

.searchWrap input{

    background:var(--input);
    color:var(--text);

}

.card{

    background:var(--card);

}

.category{

    color:var(--text2);

}

.catBtn{

    background:var(--input);

    color:var(--text);

    border:
    1px solid var(--border);

}

#sideMenu a{

    border-bottom:
    1px solid var(--border);

}

#videoTitle,
.info h3,
h1,
h2{

    color:var(--text);

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

@media(max-width:768px){

    .header h1{

        font-size:20px;

    }

    .grid{

        grid-template-columns:
        1fr;

    }

    .categories{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        scrollbar-width:none;

        -ms-overflow-style:none;

    }

    .categories::-webkit-scrollbar{

        display:none;

    }

    .catBtn{

        flex:none;

        white-space:nowrap;

    }

    #videoTitle{

        font-size:22px;

    }

    #backToTop{

        display:none;

    }

}




/* =====================================
   RESPONSIVE HEADINGS
===================================== */

h1,
h2,
#videoTitle,
.sectionTitle,
.header h1{
    line-height:1.2;
    word-wrap:break-word;
    overflow-wrap:break-word;
    max-width:100%;
}

.header h1{
    font-size:clamp(20px,4vw,32px);
    height:auto;
}

h1{
    font-size:clamp(28px,5vw,42px);
}

h2{
    font-size:clamp(22px,4vw,34px);
}

.sectionTitle{
    font-size:clamp(22px,4vw,30px);
}

#videoTitle{
    font-size:clamp(24px,5vw,36px);
    padding:0 15px;
}

/* =====================================
   TABLET
===================================== */

@media (max-width:768px){

    .header{
        padding:12px;
    }

    .header img{
        height:35px;
    }

    .header h1{
        font-size:18px !important;
        line-height:1.2;
    }

    h1{
        font-size:28px !important;
    }

    h2{
        font-size:22px !important;
    }

    .sectionTitle{
        font-size:24px !important;
        margin:25px 0 15px;
        padding:0 10px;
    }

    #videoTitle{
        font-size:22px !important;
        padding:0 10px;
    }

    .grid{
        grid-template-columns:1fr;
        padding-left:10px;
        padding-right:10px;
    }
}

/* =====================================
   SMALL PHONES
===================================== */

@media (max-width:480px){

    .header{
        gap:10px;
        padding:10px;
    }

    .header img{
        height:30px;
    }

    .header h1{
        font-size:16px !important;
    }

    h1{
        font-size:24px !important;
    }

    h2{
        font-size:20px !important;
    }

    .sectionTitle{
        font-size:20px !important;
    }

    #videoTitle{
        font-size:18px !important;
        line-height:1.3;
    }
}

/* =====================================
   EXTRA SMALL DEVICES
===================================== */

@media (max-width:320px){

    h1{
        font-size:22px !important;
    }

    h2{
        font-size:18px !important;
    }

    .header h1{
        font-size:14px !important;
    }

    .sectionTitle{
        font-size:18px !important;
    }

    #videoTitle{
        font-size:16px !important;
    }
}