/*****
Theme Name: LOADEDMOREPRO
Theme URI: https://mhthemes.com/themes/mh-magazine-lite/
Description: MH Magazine lite is one of the most popular free responsive magazine, news, newspaper and blog WordPress themes for modern online magazines, dynamic news websites, professional blogs and other editorial websites. This free magazine theme is fast, secure, SEO friendly and perfectly suitable for topics like international news, politics, lifestyle, fashion, business, sports, gadgets, travel or anything else. If you would like to gain access to more awesome features, flexible custom widgets and useful options to customize your website, you can upgrade to the premium version of MH Magazine and take your website to the next level. You can also learn more about this dynamic magazine WordPress theme on the MH Themes website.
Author: MH Themes
Author URI: https://mhthemes.com/
Version: 2.10.0
Tested up to: 6.6
Requires PHP: 5.6
Tags: one-column, two-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, full-width-template, theme-options, threaded-comments, footer-widgets, translation-ready, rtl-language-support, blog, entertainment, news
Text Domain: mh-magazine-lite
Domain Path: /languages/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Credits: You may remove the link in the footer, but we would appreciate any attribution to our work!
*****/

/***** CSS Reset based on the work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/ v2.0 *****/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/***** Structure *****/

html { font-size: 100%; -ms-text-size-adjust: none; -webkit-text-size-adjust: none; }
body { font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 14px; font-size: 0.875rem; line-height: 1.6; background: #f7f7f7; word-wrap: break-word; }
.mh-container, .mh-container-inner { width: 100%; max-width: 1080px; margin: 0 auto; position: relative; }
.mh-container-outer { margin: 25px auto; -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17); -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17); }
.mh-wrapper { padding: 25px; background: #fff; }
.mh-content { width: 65.83%; overflow: hidden; }
.mh-sidebar { width: 31.66%; float: left; }
.mh-margin-left { margin-left: 2.5%; }
.mh-margin-right { margin-right: 2.5%; }
.mh-right-sb #main-content { float: left; margin-right: 2.5%; }
.mh-left-sb #main-content { float: right; margin-left: 2.5%; }
.mh-home-area-3, .mh-home-area-4 { width: 48.24%; }
.mh-home-area-4 { margin-left: 3.52%; }
.page-template-homepage .mh-wrapper { padding-bottom: 0; }

/***** Animation *****/

.mh-main-nav li, .entry-tags li, .tagcloud a { -webkit-transition: 0.25s ease-out; -moz-transition: 0.25s ease-out; transition: 0.25s ease-out; }

/***** Columns *****/

.mh-row [class*='mh-col-']:first-child { margin: 0; }
[class*='mh-col-'] { float: left; margin-left: 2.5%; overflow: hidden; }
.mh-col-1-1 { width: 100%; }
.mh-col-1-2 { width: 48.75%; }
.mh-col-1-3 { width: 31.66%; }
.mh-col-2-3 { width: 65.83%; }
.mh-col-1-4 { width: 23.12%; }
.mh-col-3-4 { width: 74.37%; }
.mh-col-1-5 { width: 18.00%; }
.mh-col-1-6 { width: 14.58%; }
.mh-col-1-7 { width: 12.14%; }
.mh-col-1-8 { width: 10.31%; }
.clear { clear: both; }
.clearfix, .mh-clearfix { display: block; }
.clearfix:after, .mh-clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; margin: 0; padding: 0; }

/***** Typography *****/

h1 { font-size: 32px; font-size: 2rem; }
h2 { font-size: 24px; font-size: 1.5rem; }
h3 { font-size: 20px; font-size: 1.25rem; }
h4 { font-size: 18px; font-size: 1.125rem; }
h5 { font-size: 16px; font-size: 1rem; }
h6 { font-size: 14px; font-size: 0.875rem; }
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #000; line-height: 1.3; font-weight: 700; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
small { font-size: 6px; font-size: 0.375rem; }
big { font-size: 20px; font-size: 1.25rem; }
pre, code { font-family: "Consolas", Courier New, Courier, monospace; color: #000; margin-bottom: 20px; margin-bottom: 1.25rem; background: #f5f5f5; border: 1px solid #ebebeb; }
pre { padding: 20px; padding: 1.25rem; white-space: pre-wrap; white-space: -o-pre-wrap; white-space: -moz-pre-wrap; white-space: -webkit-pre-wrap; }
kbd { padding: 0px 6px; padding: 0rem 0.375rem; background: #f5f5f5; border: 1px solid #aaa; border-radius: 0.1875em; -moz-border-radius: 0.1875em; -moz-box-shadow: 0 0.0625em 0 rgba(0, 0, 0, 0.2), 0 0 0 0.125em white inset; -webkit-border-radius: 0.1875em; -webkit-box-shadow: 0 0.0625em 0 rgba(0, 0, 0, 0.2), 0 0 0 0.125em white inset; box-shadow: 0 0.0625em 0 rgba(0, 0, 0, 0.2), 0 0 0 0.125em white inset; text-shadow: 0 0.0625em 0 #fff; }
blockquote { display: block; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; font-style: italic; color: #666; padding: 5px 0 5px 15px; border-left: 5px solid #e64946; }
sup { vertical-align: super; font-size: 10px; font-size: 0.625rem; }
sub { vertical-align: sub; font-size: 10px; font-size: 0.625rem; }
abbr, acronym { border-bottom: 1px dashed; cursor: help; }
cite { color: #9a9b97; }
q { font-style: italic; }
address { font-family: "Courier new"; line-height: 1.5; margin-bottom: 20px; margin-bottom: 1.25rem; }
a { color: #000; text-decoration: none; }
a:hover { color: var(--accent-color-hover); }




 /* Darkmode/Light CSS Reset */ 

body.dark-mode  {
    --body-bg: #121212;
    --accent-color: #0073ff;
    --body-text: #fff;
    --header-bg: #181818;
    --menu-bg: #106ecc;
    --nav-link-color: #fff;
    --nav-link-underline: #fff;
    --search-btn-bg: #0d7dc6;
    --search-btn-bg-hover: #1a6fb3;
    --xsearch-form-bg: #181818;
    --xsearch-border: #b0b7bf;
    --side-menu-gradient-start: #106ecc;
    --side-menu-gradient-end: #0073ff;
    --side-menu-close-color: #fff;
    --side-nav-link-color: #fff;
    --side-nav-link-hover-color: #2187ee;
    --side-menu-footer-border: rgba(255,255,255,0.3);
    --dark-mode-toggle-color: #fff;
    --dark-mode-toggle-hover: #2187ee;
    --mobile-header-bg: #181818;
    --banner-category-bg: #0073ff;
    --banner-title-bg: rgba(108, 4, 4, 0.9);
    --music-info-bg: #000;
    --footer-bg: #181818;
    --footer-link-color: #bbb;
    --footer-link-hover-color: #2187ee;
    --border-color-d: #333;
    --rartist-name: #e1e4e6;
    --deep-blue-hover: #04568c;
    --fartist-name: #dfdfdf;
    --drop-m-menu: #fff;
  --bg-main: #121212;
    --bg-card: #121212;
    --text-main: #ffffff;
    --text-main2: #ffffff;
    --primary: #ffffff;
    --primary-hover: #2187ee;  
    --border-color: #cccccc;
    --rartist-name: #dfdfdf;
    --primary-border: #cccccc;
    --svg-dark: #1e1e1e;
    --bg-main2: #181818;
    --black: #121212;
    --artist: gray;
  --bg-post: #181818;
  --bg-footer: #000000;
  }
  
:root {
    --body-bg: #ffffff;
    --accent-color: #0073ff;
    --body-text: #000;
    --header-bg: #f9f9f9;
    --menu-bg: #0073ff;
    --nav-link-color: #fff;
    --nav-link-underline: #fff;
    --search-btn-bg: #0073ff;
    --search-btn-bg-hover: #1a6fb3;
    --xsearch-form-bg: #f9f9f9;
    --xsearch-border: #ccc;
    --side-menu-gradient-start: #2187ee;
    --side-menu-gradient-end: #1f618d;
    --side-menu-close-color: #fff;
    --side-nav-link-color: #fff;
    --side-nav-link-hover-color: #2187ee;
    --side-menu-footer-border: rgba(0,0,0,0.3);
    --dark-mode-toggle-color: #121212;
    --dark-mode-toggle-hover: #2187ee;
    --mobile-header-bg: #ffffff;
    --banner-category-bg: #0073ff;
    --banner-title-bg: rgba(150, 0, 0, 0.9);
    --music-info-bg: #000;
    --footer-bg: #181818;
    --footer-link-color: #e6e6e6;
    --footer-link-hover-color: #2187ee;
    --def-text-color: #353536;
    --border-color-d: #dbdbdb;
    --deep-blue-hover: #04568c;
    --fartist-name: #2f2e2e;
    --drop-m-menu: #fff;
    --bg-main: #f4f5f7;
    --bg-card: #f9f9f9;
    --text-main: #000000;
    --text-main2: #0073ff;
    --primary: #0073ff;
    --primary-hover: #2187ee;  
    --border-color: #d9d9d9;
    --rartist-name: #545454;
    --primary-border: #cccccc;
    --svg-dark: #f0f0f0;
    --bg-main2: #f5f9fc;
    --black: #000;
    --artist: #2f2e2e;
    --bg-post: #ffffff;
    --bg-footer: #0f172a;

  }
  
  /* General CSS Reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100%;
    background: linear-gradient(135deg, var(--side-menu-gradient-start), var(--side-menu-gradient-end));
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.4);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  

    .sep-embed-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 25px auto;
        overflow: hidden;
    }

    .sep-embed-container iframe,
    .sep-embed-container blockquote {
        width: 100% !important;
        max-width: 100% !important;
    }

    .sep-embed-container iframe {
        aspect-ratio: 16 / 9;
        height: auto;
        border: none;
        display: block;
    }

    /* TikTok vertical */
    .sep-embed-container iframe[src*='tiktok'] {
        aspect-ratio: 9 / 16;
        max-height: 700px;
    }

    /* Instagram */
    .sep-embed-container iframe[src*='instagram'] {
        max-height: 700px;
    }

    /* Facebook */
    .sep-embed-container iframe[src*='facebook'] {
        max-height: 500px;
    }

    @media (max-width: 600px) {
        .sep-embed-container {
            max-width: 100%;
            margin: 15px 0;
        }
    }


    /* Moving watermark animation */
    @keyframes umwp-move {
        0% { top:0; left:0; }
        25% { top:10%; left:80%; }
        50% { top:80%; left:80%; }
        75% { top:80%; left:0; }
        100% { top:0; left:0; }
    }
    .umwp-mark-moving{
        animation: umwp-move 15s linear infinite;
    }
    @media(max-width:768px){ 
        .umwp-mark-moving img{ width:90px; } 
    }
    
    

.uw-wrap{
    position:relative;
    display:block;
    max-width:100%;
}

.uw-wrap iframe{
    width:100%;
    height:260px;
}

.uw-mark{
    position:absolute;
    top:10px;
    right:10px;
    opacity:0;
    transition:0.5s;
    pointer-events:none;
    z-index:9999;
}

.uw-mark img{
    width:80px;
}

/* show when playing */
.uw-wrap.playing .uw-mark{
    opacity:0.7;
}

/* MOBILE */
@media(max-width:768px){
    .uw-mark img{
        width:60px;
    }
}



/* Wrapper */
.xclusive-related {
    margin-top: 30px;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
}

/* Heading container */
.xclusive-related h3 {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Side lines */
.xclusive-related h3:before,
.xclusive-related h3:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 35%;
    height: 2px;
    background: #ccc;
}

.xclusive-related h3:before {
    left: 0;
}

.xclusive-related h3:after {
    right: 0;
}

/* Blue angled label */
.xclusive-related h3 span {
    background: linear-gradient(90deg, #0073ff, #00c6ff);
    color: #fff;
    padding: 8px 18px;
    display: inline-block;
    transform: skew(-20deg);
    border-radius: 4px;
}

/* Fix text skew */
.xclusive-related h3 span b {
    display: inline-block;
    transform: skew(20deg);
}

/* Each item */
.xclusive-item {
    border-bottom: 1px solid #eee;
    padding: 12px 0;
}

.xclusive-item:last-child {
    border-bottom: none;
}

/* Layout */
.xclusive-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* Thumbnail */
.xclusive-thumb img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

/* Content */
.xclusive-content {
    flex: 1;
}

/* Title */
.xclusive-title {
    color: #000;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

/* Hover */
.xclusive-item a:hover .xclusive-title {
    color: #0073ff;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .xclusive-thumb img {
        width: 60px;
        height: 60px;
    }

    .xclusive-title {
        font-size: 13px;
    }

    .xclusive-related h3:before,
    .xclusive-related h3:after {
        width: 25%;
    }
}
/* ===== GLASS FOOTER BASE ===== */
.xl-footer {
    background: rgba(11, 15, 20, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #cfd6dd;
    font-family: Arial, sans-serif;
    border-top: 1px solid rgba(255,255,255,0.05);
}

/* ===== TOP ===== */
.xl-footer-top {
    text-align: center;
    padding: 30px 20px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.xl-logo {
    max-width: 170px !important;
    margin-bottom: 10px;
}

.xl-desc {
    font-size: 14px;
    color: #9aa4af;
}

/* ===== GRID (3 COL) ===== */
.xl-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 25px;
    padding: 30px 20px;
}

/* ===== GLASS CARD COLUMN ===== */
.xl-col {
    background: rgba(255,255,255,0.03);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s ease;
}

/* HOVER GLASS EFFECT */
.xl-col:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-3px);
}

/* ===== HEADINGS ===== */
.xl-grid h4 {
    color: #fff;
    font-size: 13px;
    margin-bottom: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.xl-grid h4::after {
    content: "";
    width: 25px;
    height: 2px;
    background: #2ea3ff;
    display: block;
    margin-top: 6px;
}

/* ===== LIST ===== */
.xl-grid ul {
    list-style: none;
    padding: 0;
}

.xl-grid li {
    margin-bottom: 10px;
}

/* ===== LINKS ===== */
.xl-grid a {
    color: #9aa4af;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s ease;
}

/* ICON STYLE */
.xl-grid a::before {
    content: "➤";
    color: #2ea3ff;
    font-size: 12px;
}

/* HOVER EFFECT */
.xl-grid a:hover {
    color: #2ea3ff;
    transform: translateX(4px);
}

/* ===== SOCIAL ICON STYLE ===== */
.xl-col ul li a[href*="facebook"]::before { content: "📘"; }
.xl-col ul li a[href*="twitter"]::before { content: "🐦"; }
.xl-col ul li a[href*="instagram"]::before { content: "📸"; }
.xl-col ul li a[href*="tiktok"]::before { content: "🎵"; }

/* ===== COPYRIGHT ===== */
.xl-copy {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding: 15px;
    font-size: 13px;
    color: #7f8a96;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .xl-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px;
    }
}

/* ===== REMOVE THEME FOOTER ===== */
.site-footer,
footer.site-footer,
#colophon {
    display: none !important;
}
/* SVG ICON STYLE */
.xl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.xl-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* REMOVE OLD EMOJI ICONS */
.xl-grid a::before {
    content: none !important;
}

/* SOCIAL COLORS ON HOVER */
.xl-grid a[href*="facebook"]:hover {
    color: #1877f2;
}

.xl-grid a[href*="instagram"]:hover {
    color: #e1306c;
}

.xl-grid a[href*="twitter"]:hover {
    color: #1da1f2;
}

.xl-grid a[href*="tiktok"]:hover {
    color: #ffffff;
}
.xl-col ul {
    list-style: none;
    padding: 0;
}

.xl-col ul li {
    margin-bottom: 10px;
}

.xl-col ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ddd;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.xl-col ul li a:hover {
    color: #00aaff;
}

.xl-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
}

.xl-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}
/* =========================
   FULL FOOTER OVERRIDE
========================= */

.xl-footer {
    background: #0f172a; /* main dark */
    color: #cbd5e1;
    padding: 50px 20px 20px;
}

/* GRID LAYOUT */
.xl-footer .xl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* REMOVE ALL BOX BACKGROUNDS */
.xl-footer .xl-col {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* HEADINGS */
.xl-footer h4 {
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    position: relative;
}

/* UNDERLINE EFFECT */
.xl-footer h4::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background: #00aaff;
    margin-top: 6px;
    border-radius: 10px;
}

/* LIST STYLE */
.xl-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xl-footer ul li {
    margin-bottom: 10px;
}

/* LINKS */
.xl-footer a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease;
}

/* HOVER EFFECT */
.xl-footer a:hover {
    color: #00aaff;
    transform: translateX(5px);
}

/* ICON STYLE */
.xl-icon svg {
    width: 18px;
    height: 18px;
    fill: #00aaff;
    flex-shrink: 0;
}

/* SOCIAL SPACING */
.xl-footer .xl-col ul li {
    display: flex;
    align-items: center;
}

/* COPYRIGHT */
.xl-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 30px;
    padding-top: 15px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    .xl-footer .xl-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}
/* ================================
   SONGS FOR YOU - ULTRA COMPACT UI
   (STREAMING APP STYLE)
================================ */

.songs-for-you {
    background: #0b0b0b;
    padding: 12px;
    margin-top: 25px;
    color: #fff;
    border-radius: 10px;
}

/* HEADER */
.sfy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.sfy-header h2 {
    font-size: 18px;
    margin: 0;
    font-weight: 700;
}

.sfy-header p {
    font-size: 11px;
    color: #aaa;
    margin-top: 2px;
}

/* SEE ALL */
.see-all {
    color: #f5b400;
    text-decoration: none;
    font-weight: 600;
    font-size: 11px;
}

/* SCROLL */
.sfy-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-behavior: smooth;
}

/* SCROLLBAR */
.sfy-scroll::-webkit-scrollbar {
    height: 4px;
}
.sfy-scroll::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 10px;
}

/* CARD */
.sfy-card {
    min-width: 105px;
    max-width: 105px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
}

.sfy-card:hover {
    transform: translateY(-3px);
}

.sfy-card a {
    text-decoration: none;
    display: block;
}

/* IMAGE */
.sfy-thumb {
    position: relative;
}

.sfy-thumb img {
    width: 100%;
    height: 105px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

/* PLAY BUTTON */
.sfy-thumb::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 13px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.2s ease;
}

.sfy-card:hover .sfy-thumb::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* TITLE */
.sfy-title {
    font-size: 11px;
    margin: 5px 0 2px;
    color: #fff;
    font-weight: 500;
    line-height: 1.2;

    /* truncate */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ARTIST */
.sfy-artist {
    font-size: 10px;
    color: #888;

    /* truncate */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ================================
   DESKTOP (SLIGHTLY BIGGER)
================================ */
@media (min-width: 769px) {

    .songs-for-you {
        padding: 15px;
    }

    .sfy-card {
        min-width: 130px;
        max-width: 130px;
    }

    .sfy-thumb img {
        height: 130px;
    }

    .sfy-title {
        font-size: 13px;
    }

    .sfy-artist {
        font-size: 11px;
    }
}
/* =========================
   APP BOTTOM NAV FINAL
========================= */

.app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

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

    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    padding: 6px 0 8px;
    z-index: 9999;
}

/* ITEM */
.nav-item {
    flex: 1;
    text-align: center;
    color: #888;
    text-decoration: none;
    font-size: 10px;
}

/* ICON */
.nav-item span {
    display: block;
    font-size: 18px;
    margin-bottom: 2px;
}

/* TEXT */
.nav-item p {
    margin: 0;
    font-size: 10px;
}

/* ACTIVE */
.nav-item.active {
    color: #f5b400;
}

/* CLICK EFFECT */
.nav-item:active {
    transform: scale(0.9);
}

/* SAFE SPACE */
body {
    padding-bottom: 65px;
}

/* DESKTOP HIDE */
@media (min-width: 768px) {
    .app-bottom-nav {
        display: none;
    }
}
/* =========================
   FORCE BLUE NAV OVERRIDE
========================= */

.app-bottom-nav {
    background: linear-gradient(
        to top,
        #0a2cff !important,
        #1a3dff !important
    ) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 0 -6px 20px rgba(0,0,0,0.4) !important;
}

/* FORCE WHITE TEXT */
.app-bottom-nav .nav-item {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* ACTIVE STATE */
.app-bottom-nav .nav-item.active {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* ICON BOOST */
.app-bottom-nav .nav-item span {
    color: #ffffff !important;
}

/* CLICK EFFECT */
.app-bottom-nav .nav-item:active {
    transform: scale(0.9);
}

/* REMOVE OLD STYLES INTERFERENCE */
.app-bottom-nav * {
    text-shadow: none !important;
    filter: none !important;
}
/* =========================
   HARD OVERRIDE (FORCE BLUE)
========================= */

body .app-bottom-nav,
html body .app-bottom-nav {
    background: linear-gradient(180deg, #0a2cff, #1a3dff) !important;
    background-color: #0a2cff !important;
}

/* kill any dark overlays */
body .app-bottom-nav::before,
body .app-bottom-nav::after {
    display: none !important;
}

/* force text + icons white */
body .app-bottom-nav .nav-item,
body .app-bottom-nav .nav-item span,
body .app-bottom-nav .nav-item p {
    color: #ffffff !important;
}

/* active state */
body .app-bottom-nav .nav-item.active {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* remove any inherited dark styles */
body .app-bottom-nav * {
    background: transparent !important;
    border: none !important;
}
/* =========================
   FORCE ICONS WHITE
========================= */

/* If using SVG icons */
.app-bottom-nav svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* If using icon fonts (FontAwesome, etc) */
.app-bottom-nav i {
    color: #ffffff !important;
}

/* If icons are inside span */
.app-bottom-nav span {
    color: #ffffff !important;
}

/* Make sure everything inside stays white */
.app-bottom-nav .nav-item * {
    color: #ffffff !important;
}
.app-bottom-nav i {
    display: block;
    font-size: 18px;
    margin-bottom: 3px;
    color: #fff !important;
}
/* =========================
   FULL NAV OVERRIDE (MATCH HEADER)
========================= */

body .app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

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

    /* MATCH HEADER BLUE */
    background: linear-gradient(
        to top,
        #1a33ff,
        #2b4dff
    ) !important;

    padding: 6px 0 8px !important;
    z-index: 99999 !important;

    box-shadow: 0 -6px 20px rgba(30,64,255,0.6) !important;
}

/* REMOVE ANY DARK LAYER */
body .app-bottom-nav::before,
body .app-bottom-nav::after {
    display: none !important;
}

/* NAV ITEMS */
body .app-bottom-nav .nav-item {
    flex: 1;
    text-align: center;
    text-decoration: none;

    color: #ffffff !important;
    font-size: 10px;
    opacity: 0.85;
    transition: all 0.2s ease;
}

/* ICONS (FontAwesome / SVG / ANYTHING) */
body .app-bottom-nav .nav-item i,
body .app-bottom-nav .nav-item svg,
body .app-bottom-nav .nav-item span {
    display: block;
    font-size: 18px;
    margin-bottom: 2px;

    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* TEXT */
body .app-bottom-nav .nav-item p {
    margin: 0;
    font-size: 10px;
    color: #ffffff !important;
}

/* ACTIVE TAB */
body .app-bottom-nav .nav-item.active {
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* ACTIVE ICON POP */
body .app-bottom-nav .nav-item.active i,
body .app-bottom-nav .nav-item.active svg {
    transform: scale(1.2);
}

/* CLICK EFFECT */
body .app-bottom-nav .nav-item:active {
    transform: scale(0.9);
}

/* FORCE EVERYTHING INSIDE WHITE */
body .app-bottom-nav * {
    color: #ffffff !important;
    background: transparent !important;
    border: none !important;
}

/* SAFE SPACE */
body {
    padding-bottom: 70px !important;
}

/* HIDE ON DESKTOP */
@media (min-width: 768px) {
    .app-bottom-nav {
        display: none !important;
    }
}
/* ===== MAIN CONTAINER ===== */
.xm-home {
    background: linear-gradient(to bottom, #0b0f1a, #0f172a);
    color: #fff;
    padding: 14px 0 14px 14px;
    border-radius: 18px;
    overflow: hidden;
}

/* HEADER */
.xm-header { margin-bottom: 16px; padding-right: 14px; }
.xm-greeting { font-size: 11px; color: #94a3b8; }
.xm-title { font-size: 22px; font-weight: 700; }

/* SECTION */
.xm-section-title {
    font-size: 15px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* ROW */
.xm-row-wrapper { position: relative; margin-bottom: 24px; }

.xm-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.xm-row::-webkit-scrollbar { display: none; }

/* CARD */
.xm-card {
    flex: 0 0 42%;
    max-width: 42%;
    scroll-snap-align: start;
}

@media(min-width:768px){
    .xm-card {
        flex: 0 0 18%;
        max-width: 18%;
    }
}

/* IMAGE */
.xm-thumb {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 14px;
    overflow: hidden;
}

.xm-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OVERLAY */
.xm-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
}

/* GENRE */
.xm-genre {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 20px;
    background: rgba(0,0,0,0.6);
    color: #fff;
}

/* PLAY BUTTON */
.xm-play {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    background: #2563eb;
    border-radius: 50%;
}

.xm-play::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 10px;
    border-left: 10px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

/* TEXT */
.xm-card p {
    font-size: 13px;
    margin-top: 8px;
}

.xm-artist {
    font-size: 11px;
    color: #9ca3af;
}
.xl-disclaimer-box {
    background: #f3f3f3;
    padding: 20px 25px;
    border-radius: 12px;
    position: relative;
    margin: 30px 0;
    font-size: 16px;
    line-height: 1.7;
}

.xl-disclaimer-box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 6px;
    background: #0073ff; /* BLUE */
    border-radius: 10px;
}

.xl-contact {
    margin-top: 10px;
    font-weight: 600;
}

.xl-contact a {
    color: #0073ff; /* BLUE LINK */
    text-decoration: none;
}

.xl-contact a:hover {
    text-decoration: underline;
}
/* This forces the side-by-side layout */
.news-item {
    display: flex !important; /* Forces horizontal layout */
    align-items: flex-start;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    width: 100%;
}

/* Controls the image size */
.news-thumbnail {
    flex-shrink: 0; /* Prevents the image from getting squashed */
    width: 100px;
}

.news-thumbnail img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

/* Controls the text area */
.news-content {
    flex-grow: 1; /* Allows text to take up remaining space */
}

.news-meta {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #0066ff; /* Your brand blue */
    margin-bottom: 5px;
}

.news-date {
    color: #888;
    font-weight: normal;
}

.news-title {
    font-size: 15px;
    line-height: 1.3;
    margin: 0;
    font-weight: 700;
}

.news-title a {
    color: #222;
    text-decoration: none;
}
/* Container for the banner */
.archive-header-wrapper {
    margin-bottom: 30px;
    border-bottom: 1px solid #000; /* The thin black line across the top */
    padding-top: 10px;
}

/* The Red Banner Styling */
.latest-news-banner {
    background: #e60000; /* Bright red from your inspiration */
    color: #fff;
    display: inline-block;
    padding: 6px 25px;
    font-weight: 900;
    font-style: italic;
    font-size: 18px;
    text-transform: uppercase;
    position: relative;
    transform: skewX(-15deg); /* This creates the slanted "cut" look */
    margin-left: 10px;
    margin-bottom: -1px; /* Ties it to the bottom border line */
}

/* Fix the text so it isn't slanted inside the slanted box */
.latest-news-banner span {
    display: block;
    transform: skewX(15deg); 
}

/* The main title (Articles) below the banner */
.archive-main-title {
    font-size: 28px;
    font-weight: 800;
    margin-top: 15px;
    color: #222;
    letter-spacing: -1px;
}
/* Center the button container */
.load-more-container {
    text-align: center;
    margin: 40px 0;
    clear: both;
}

/* Style the button to look professional */
#load-more-btn {
    background: #222; /* Dark professional grey */
    color: #fff;
    border: none;
    padding: 12px 35px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

#load-more-btn:hover {
    background: #e60000; /* Changes to your red brand color on hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

#load-more-btn:active {
    transform: translateY(0);
}
/* Center the button container and add spacing */
.show-more-button-container {
    padding: 25px 15px;
    display: flex;
    justify-content: center; /* Centers the button on the page */
    background: #fff;
    border-bottom: 8px solid #f2f2f2; /* Professional section divider */
}

/* Transform the link into a professional button */
.modern-news-button {
    background-color: #0066ff; /* Matches your app's primary blue */
    color: #ffffff !important;
    padding: 14px 40px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px; /* Rounded "Pill" style for a modern look */
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.2); /* Soft shadow for depth */
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

/* Animation for when the user taps/clicks */
.modern-news-button:active {
    transform: scale(0.95); /* Slight shrink when pressed */
    background-color: #0052cc;
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.2);
}

.modern-news-button i {
    font-size: 11px;
}
/* Red Ribbon Header */
.custom-daily-header {
    border-bottom: 3px solid #e31b23;
    margin-bottom: 25px;
    height: 35px;
    position: relative;
    width: 100%;
}
.custom-daily-header h2 span {
    background: #e31b23;
    color: #fff;
    padding: 5px 20px;
    font-style: italic;
    text-transform: uppercase;
    font-size: 16px;
    position: absolute;
    top: 0;
    left: 0;
}

/* Big Hero Style */
.hero-article {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
}
.hero-content { padding: 25px; width: 100%; }
.hero-meta { color: #ff4d4d; font-weight: bold; font-size: 13px; text-transform: uppercase; display: block; margin-bottom: 8px; }
.hero-title a { color: #fff; font-size: 26px; text-decoration: none; font-weight: 800; }

/* Compact List Style */
.list-item-article { display: flex; gap: 15px; padding: 15px 0; border-bottom: 1px solid #eee; align-items: center; }
.list-thumb img { width: 100px; height: 80px; object-fit: cover; border-radius: 4px; }
.list-meta { font-size: 11px; color: #777; text-transform: uppercase; display: block; }
.list-title a { color: #000; font-size: 16px; font-weight: 700; text-decoration: none; }
/* Import Professional Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;900&family=Merriweather:wght@400;700&display=swap');

.single-article-layout { background: #fff; }

/* Red Ribbon Style */
.post-category-ribbon {
    border-bottom: 3px solid #e31b23;
    margin-bottom: 15px;
    height: 32px;
}
.post-category-ribbon span {
    background: #e31b23;
    color: #fff;
    padding: 4px 15px;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-style: italic;
    font-size: 13px;
    display: inline-block;
}

/* Bold News Title */
.article-main-title {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 1.1;
    color: #000;
    margin: 10px 0;
    letter-spacing: -0.5px;
}

/* Meta Data Formatting */
.article-meta-news {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}
.meta-row { margin-bottom: 2px; }
.meta-label { color: #888; margin-right: 5px; }

/* Serif Body Text for Readability */
.article-content-body.serif-font {
    font-family: 'Merriweather', serif;
    font-size: 19px;
    line-height: 1.8;
    color: #333;
}
.article-content-body p { margin-bottom: 1.8em; }

/* Featured Image */
.article-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    margin-bottom: 25px;
}
.meta-share-wrapper {
    margin: 15px 0 25px 0;
    padding: 10px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 15px;
}

.share-text {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #444;
}

.share-icons-row {
    display: flex;
    gap: 10px;
}

.share-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}

.share-icon.fb { background: #1877F2; }
.share-icon.x-twitter { background: #000; }
.share-icon.whatsapp { background: #25D366; }
.share-icon.more { background: #666; border: none; cursor: pointer; }
.share-icon:hover { opacity: 0.8; }
.header-button-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows buttons to move to next line on mobile */
    gap: 10px;
    padding: 15px 0;
    background: #ffffff;
}
/* ===== FIXED STICKY NEWS BUTTON BAR ===== */
.static-news-container {
    position: fixed;
    top: 110px;
    left: 0;
    width: 100%;
    z-index: 9999;

    padding: 8px 10px;
    background: transparent;
}

/* ===== HORIZONTAL SCROLL ROW ===== */
.news-button-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;

    overflow-x: auto;
    overflow-y: hidden;

    max-width: 100%;
    margin: 0 auto;

    padding: 5px 10px;

    /* smooth scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* hide scrollbar (optional clean look) */
.news-button-grid::-webkit-scrollbar {
    display: none;
}

/* ===== BUTTON STYLE (CHIP STYLE) ===== */
.news-static-btn {
    flex: 0 0 auto; /* prevents shrinking */

    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;

    color: #fff;
    text-decoration: none;

    border-radius: 999px; /* pill shape */

    background: linear-gradient(135deg, #1e3cff, #3a8bff);
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);

    white-space: nowrap;

    transition: 0.2s ease;
}

/* hover */
.news-static-btn:hover {
    transform: translateY(-2px);
}

/* active */
.news-static-btn:active {
    transform: scale(0.95);
}

/* optional: last button no full width anymore */
.news-static-btn:nth-child(5) {
    grid-column: unset;
}

/* ===== MOBILE IMPROVEMENT ===== */
@media (max-width: 480px) {
    .news-static-btn {
        padding: 7px 12px;
        font-size: 11px;
    }
}


  /* Hide Mobile Search Form from desktop */
  @media (min-width: 992px) {
    .xsearch-wrapper {
      display: none !important;
    }
  }
  
  /* Mobile Search Form Styles */
  .xsearch-wrapper {
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
  
  .xsearch-form {
    display: flex;
    align-items: center;
    width: 80%;
    max-width: 600px;
    background: var(--xsearch-form-bg);
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border: 2px solid var(--xsearch-border);
  }
  
  .xsearch-input {
    background: transparent;
    border: none;
    color: var(--body-text);
    font-size: 16px;
    padding: 10px;
    outline: none;
  }
  
  .xsearch-dropdown select {
    background: transparent;
    border: none;
    color: var(--body-text);
    font-size: 16px;
    padding: 10px;
    outline: none;
    margin-left: 10px;
  }
  
  .xsearch-btn {
    background: none;
    border: none;
    color: var(--search-btn-bg);
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    margin-left: 15px;
  }
  
  /* Responsive Adjustments for Mobile Search Form */
  @media (max-width: 768px) {
    .xsearch-form {
      width: 85%;
      padding: 5px 0;
    }
    
    .xsearch-input, .xsearch-dropdown select {
      font-size: 14px;
      padding: 8px;
    }
    
    .xsearch-btn {
      font-size: 18px;
    }
  }
  
  .body-wrapper {
    justify-content: space-between;
    background: none;
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  
  /* Homepage Layout */
  .homepage-container {
      display: flex !important;
      justify-content: space-between;
      gap: 20px;
  }
  
  /* Main Content */
  .main-content {
      width: 67%;
      align-self: flex-start;
      background: var(--mobile-header-bg);
      padding: 15px;
      border-radius: 10px;
  }
  
  @media (max-width: 991px) {
    .homepage-container {
      flex-direction: column;
      max-width: 100%;
      padding: 5px;
      margin: 0;
    }
    
    .main-content {
      width: 100%;
      padding: 10px;
      border-radius: 8px;
    }
  }

  /* Sidebar Wrapper (Desktop) */
  .sidebar {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    flex: 1.5;
    margin-left: 2px;
  }
  
  /* Trending Sidebar Container */
  .trending-sidebar {
    background: var(--mobile-header-bg);
    padding: 15px;
    border-radius: 10px;
  }
  
  .trending-sidebar h3 {
    font-size: 20px;
    color: var(--menu-bg);
    font-weight: bold;
    margin-bottom: 15px;
  }
  
  /* Trending Song List */
  .trending-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  /* Trending Song Item */
  .trending-item {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color-d);
    transition: background 0.3s ease;
  }
  
  .trending-item:hover {
    background: rgba(255, 255, 255, 0.05);
  }
  
  /* Numbering Outside the Thumbnail */
  .trending-number {
    font-size: 16px;
    font-weight: bold;
    color: var(--def-text-color);
    margin-right: 10px;
    min-width: 20px;
    text-align: right;
    display: inline-block;
  }  
  
  /* Thumbnail Container */
  .trending-thumbnail {
    position: relative;
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 8px;
    margin-right: 15px;
    flex-shrink: 0;
  }
  
  .trending-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  
  /* Trending Song Details */
  .trending-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .trending-sidebar .song-title a {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
}

.trending-sidebar .song-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
}

.trending-sidebar .artist-name a {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: 600;
}

.trending-sidebar .artist-name {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: bold;
}

/* Mobile Adjustments: Sidebar Moves Below Main Content */
@media (max-width: 991px) {
  .sidebar {
    width: 100%;
    margin: 20px 0 0 0;
    border-radius: 8px;
  }
  
  .trending-sidebar {
    border-radius: 8px;
  }

  .trending-number {
    font-size: 14px;
  }
}
  
  /* Scrolling Banners Container */
  .scrolling-banners {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 100%;
      overflow: hidden;
      margin: 0 0 30px -5px;
  }
  
  /* Scroll Buttons */
  .scroll-btn {
      background: var(--menu-bg);
      border: none;
      padding: 8px 12px;
      font-size: 22px;
      color: var(--nav-link-color);
      cursor: pointer;
      transition: background 0.3s ease;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
  }
  
  .scroll-btn:hover {
      background: rgba(255, 255, 255, 0.5);
  }
  
  /* Disable Previous Button When at First Banner */
  .prev-btn:disabled {
      background: rgba(255, 255, 255, 0.1);
      cursor: default;
  }
  
  /* Positioning Scroll Buttons */
  .prev-btn {
      left: 10px;
  }
  .next-btn {
      right: 10px;
  }
  
  .next-btn:disabled {
      background: rgba(255, 255, 255, 0.1);
      cursor: default;
  }
  
  /* Banner Wrapper (Track) */
  .banner-wrapper {
      display: flex;
      transition: transform 0.4s ease-in-out;
      width: 100%;
      max-width: 100%;
  }
  
  /* Ensure banners take the right space */
  .banner {
      flex: 0 0 calc(50% - 5px);
      padding: 5px;
      text-align: center;
      position: relative;
      transition: transform 0.3s ease;
      height: 250px;
      box-sizing: border-box;
  }
  
  /* Banner Image */
  .banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
  }
  
  /* Banner Category */
  .banner-category {
      position: absolute;
      top: 10px;
      left: 15px;
      background: var(--menu-bg);
      padding: 5px 10px;
      color: var(--nav-link-underline);
      font-size: 13px;
      font-weight: bold;
      border-radius: 3px;
  }
  
  .banner-category a {
      text-decoration: none;
      color: var(--nav-link-underline);
  }
  
  /* Banner Title */
  .banner-title {
      position: absolute;
      bottom: 10px;
      left: 15px;
      font-size: 15px;
      font-weight: bold;
      color: var(--nav-link-underline);
      background: var(--banner-title-bg);
      padding: 5px 10px;
      border-radius: 5px;
  }
  
  /* Play Button (Hidden Initially) */
  .play-circle {
      position: absolute;
      bottom: 15px;
      right: 15px;
      font-size: 30px;
      color: var(--nav-link-underline);
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s;
  }
  
  /* Show Play Button on Hover */
  .banner:hover .play-circle {
      opacity: 1;
  }
  
  /* Responsive Fixes */
  @media (max-width: 767px) {
      .banner {
          flex: 0 0 100%;
          height: 200px;
      }
      .scroll-btn {
          font-size: 18px;
          padding: 6px 10px;
      }
    
      .scrolling-banners {
          margin: 0 0 20px 0;
          width: 100%;
      }
      .homepage-container .banner {
          padding: 0;
      }
  }
  
  /* Add spacing between Latest Music and New Albums */
  .latest-music {
      margin-bottom: 50px;
  }
  
  .new-albums {
      margin-bottom: 50px;
  }
  
  /* Section Headers */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 7px;
    border-bottom: 3px solid var(--menu-bg);
    
}

.section-header h2 {
    font-size: 20px;
    color: var(--menu-bg);
    font-weight: bold;
}

.section-header .see-more {
    text-decoration: none;
    color: var(--menu-bg);
    font-weight: bold;
    font-size: 12px;
}

.section-header .see-more::after {
    content: "›";
}
  
  /* Music & Album Grid */
.music-grid, .album-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.album-grid .album-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--nav-link-underline);
}

/* Music & Album Cards */
.music-card, .album-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--mobile-header-bg);
    border-radius: 3px;
    overflow: hidden;
    transition: transform 0.3s ease;
    height: 100%;
}

/* Let all grid items stretch to same height per row */
.music-grid > .music-card,
.album-grid > .album-card {
    align-self: stretch;
}

/* Music & Album Thumbnail */
.music-thumbnail, .album-thumbnail {
    position: relative;
    overflow: hidden;
}

.music-thumbnail img, .album-thumbnail img {
    width: 100%;
    height: 160px;
    display: block;
    object-fit: fill;
    border-radius: 5px;
}

/* Info section stretches with flex */
.music-info, .album-info {
    padding: 10px;
    flex-grow: 1;
}

.album-info .artist-name {
      margin-top: -6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--body-text);
  }

.music-info .artist-name {
      font-size: 13px;
      font-weight: bold;
      color: var(--body-text);
  }

/* Responsive Fix for Thumbnail */
@media (max-width: 768px) {
    .music-thumbnail img, .album-thumbnail img {
        width: 100%;
        height: 160px;
        display: block;
        object-fit: fill;
    }
}
  
  /* Show Play Button on Hover */
  .music-thumbnail:hover .play-icon, .album-thumbnail:hover .play-icon {
      opacity: 1;
  }
  
  /* Music & Album Info */
  .music-info, .album-info {
    padding-bottom: 10px;
    padding-left: 0;
    text-align: left;
    background: none;
}

.song-title, .album-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--nav-link-underline);
}

.music-card .artist-name {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: 600;
}
  
.album-card .artist-name {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: 600;
  }
  
  .music-card .artist-name a {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: bold;
}

.album-card .artist-name a {
    font-size: 12px;
    color: var(--fartist-name);
    font-weight: bold;
  }

  /* Responsive: 2 Columns on Mobile */
  @media (max-width: 768px) {
      .music-grid, .album-grid {
          grid-template-columns: repeat(2, 1fr);
      }
      .section-header h2 {
          font-size: 18px;
      }
      .latest-music, .new-albums {
          margin-bottom: 40px;
      }
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
  .music-grid, .album-grid {
      grid-template-columns: repeat(4, 1fr);
  }
}
  
  /* Song Section */
  .song-section {
      margin-bottom: 50px;
  }
  
  /* Section Header for Song Section */
  .song-section .section-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 15px;
      padding: 10px 15px;
      background: var(--menu-bg);
      border-radius: 5px;
  }
  
  .song-section .section-header h2 {
      font-size: 20px;
      color: var(--nav-link-underline);
      font-weight: bold;
  }
  
  @media (max-width: 768px) {
    .song-section:last-of-type {
      margin-bottom: 0;
    }
  }
  
  /* Song List */
  .song-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .song-item {
      display: flex;
      align-items: center;
      padding: 12px 10px;
      border-bottom: 1px solid var(--border-color-d);
      transition: background 0.3s ease;
  }
  
  .song-item:hover {
      background: rgba(255, 255, 255, 0.05);
  }
  
  /* Thumbnail */
  .song-thumbnail {
      position: relative;
      width: 55px;
      height: 55px;
      overflow: hidden;
      border-radius: 8px;
      margin-right: 15px;
      flex-shrink: 0;
  }
  
  .song-thumbnail img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
  }
  
  /* Play Button Centered on Hover */
  .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 22px;
      color: var(--nav-link-underline);
      opacity: 0;
      transition: opacity 0.3s ease;
  }
  
  .song-thumbnail:hover .play-icon {
      opacity: 1;
  }
  
  /* Song Details */
  .song-details {
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  
  /* See More Button at Bottom */
  .see-more-container {
      margin-top: 15px;
      text-align: right;
  }
  
  .see-more-btn {
      display: inline-block;
      background: var(--menu-bg);
      color: var(--nav-link-underline);
      font-size: 14px;
      font-weight: bold;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      transition: background 0.3s ease;
  }
  
  .see-more-btn:hover {
      background: var(--deep-blue-hover);
  }

  /* Load More */
  .load-more-wrapper {
      margin-top: 15px;
      text-align: center;
  }
  
  .load-more-btn {
      display: inline-block;
      background: var(--menu-bg);
      color: var(--nav-link-underline);
      font-size: 14px;
      font-weight: bold;
      padding: 10px 20px;
      border-radius: 5px;
      text-decoration: none;
      transition: background 0.3s ease;
  }
  
  .load-more-btn:hover {
      background: #888;
  }
  
  .song-section .song-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .song-section .artist-name {
  font-size: 12px;
  color: var(--fartist-name);
  font-weight: bold;
  }
  
  .song-section .artist-name a {
  font-size: 12px;
  color: var(--fartist-name);
  font-weight: bold;
  }
  
  /* Footer */
  .site-footer {
      width: 100%;
      background: var(--footer-bg);
      color: var(--body-text);
      padding: 40px 0;
      text-align: center;
  }
  
  /* Footer Container */
  .footer-container {
      width: 1152px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
  }
  
  /* Footer Logo */
  .footer-logo img {
    height: 70px;
    width: 200px;
  }
  
  /* Footer Quick Links */
  .footer-links ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 15px;
  }
  
  .footer-links ul li {
      display: inline;
  }
  
  .footer-links ul li a {
      text-decoration: none;
      color: var(--footer-link-color);
      font-size: 12px;
      transition: color 0.3s;
  }
  
  .footer-links ul li a:hover {
      color: var(--footer-link-hover-color);
  }
  
  /* Social Media */
  .social-icons {
      display: flex;
      gap: 15px;
      justify-content: center;
  }
  
  /* Enhance social media links as circular icons with a subtle hover scale effect */
  .social-icons a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      font-size: 18px;
      color: var(--footer-link-color);
      transition: color 0.3s, transform 0.3s;
      border-radius: 50%;
  }
  
  .social-icons a:hover {
      color: var(--footer-link-hover-color);
      transform: scale(1.1);
  }
  
  /* Footer Bottom */
  .footer-bottom {
      width: 100%;
      border-top: 1px solid #666869;
      padding: 10px 0;
      margin-top: 20px;
  }
  
  .footer-bottom p {
      font-size: 12px;
      color: var(--footer-link-color);
      margin: 0;
  }
  
  /* Responsive */
  @media (max-width: 991px) {
      .footer-container {
          width: 100%;
          flex-direction: column;
          text-align: center;
          gap: 10px;
      }
  
      .footer-links ul {
          flex-direction: row;
          justify-content: center;
      }
  
      .social-icons {
          flex-direction: row;
          justify-content: center;
      }
  }
  
  .breadcrumbs {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 5px;
    padding-bottom: 7px;
  }
  
  .breadcrumbs-line {
    width: calc(100% + 20px);
    height: 1px;
    background-color: var(--border-color-d);
    margin: 0 -10px 10px;
  }

  .breadcrumbs-line-page {
    width: calc(100% + 30px);
    height: 1px;
    background-color: var(--border-color-d);
    margin: 0 -15px 15px;
  }
  
  .breadcrumbs a {
    color: var(--accent-color);
    text-decoration: none;
  }
  
  .breadcrumb-separator {
    margin: 0 8px;
  }
  
  .breadcrumb-item.current {
    font-weight: bold;
  }
  
  /* Desktop Styles */
  .sp-song-featured {
    display: flex;
    gap: 20px;
    margin: 20px 0 30px 20px;
    align-items: flex-start;
  }
  
  .sp-song-image img {
    width: 310px; /* Adjust size as needed */
    height: 320px;
    border-radius: 8px;
  }
  
  .sp-song-info {
    flex: 1;
  }
  
  .sp-song-category {
    font-size: 14px;
    font-weight: bold;
    color: var(--body-text);
    margin-bottom: 30px;
    letter-spacing: 1px;
    padding-top: 10px;
  }
  
  .sp-song-details {
    list-style: none;
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-d);
  }
  
  .sp-song-details li {
    margin-bottom: 5px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--body-text);
    padding-bottom: 5px;
  }
  
  .sp-song-details li strong {
    color: var(--text-color);
    margin-right: 5px;
  }
  
  .sp-song-controls {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .sp-song-controls button {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: var(--menu-bg);
    transition: color 0.3s ease;
  }
  
  .sp-song-controls button .fa-circle-play, .sp-song-controls button .fa-circle-pause {
    font-size: 35px;
  }
  
  /* Modern Share Button */
  .sp-share-btn {
    background-color: var(--menu-bg) !important;
    color: var(--nav-link-color) !important;
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
    transition: background-color 0.3s ease;
    font-size: 14px !important;
    display: flex;
    align-items: center;
  }
  
  .sp-share-btn:hover {
    background-color: #2187ee !important;
  }
  
  .sp-share-btn span {
    margin-left: 5px;
  }
  
  /* Hover for both controls */
  .sp-song-controls button:hover {
    color: #2187ee;
  }
  
  .sp-save-audio {
    background-color: var(--menu-bg) !important;
    color: var(--nav-link-color) !important;
    padding: 8px 15px;
    border-radius: 5px;
    border: none;
    transition: background-color 0.3s ease;
    font-size: 14px !important;
    display: flex;
    align-items: center;
  }
  
  .sp-save-audio svg {
    margin-right: 5px;
    fill: var(--nav-link-color);
    width: 18px;
    height: 18px;
  }
  
  .mixtape-download-link .sp-save-audio {
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
}
  
  /* Mobile Styles */
  @media (max-width: 768px) {
    /* Add container padding to control the horizontal margins */
    .sp-song-featured {
      flex-direction: column;
      align-items: center;
      padding: 10px;
      margin: 20px 0 30px 0;
    }
    
    .sp-song-image {
      width: 100%;
      text-align: center;
    }
    
    .sp-song-image img {
      width: 100%;
      max-width: 400px;
      display: block;
      margin: 0 auto 10px auto; /* Centered image with equal margins */
    }
    
    .sp-song-info {
      width: 100%;
      align-self: flex-start;
      text-align: left;
      margin-left: 10px;
    }
    
    .sp-song-details li {
      font-size: 15px;
      padding-bottom: 10px;
    }
    
    .sp-song-controls {
      justify-content: flex-start;
    }
  }
  
  /* Post Title Styling */
  .sp-post-title {
    font-size: 23px;
    font-weight: bold;
    color: var(--body-text);
    margin-top: 5px;
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.3;
    margin-left: 20px;
  }
  
  /* Responsive Styling */
  @media (max-width: 768px) {
    .sp-post-title {
      font-size: 20px;
      margin-left: 10px;
    }
  }
  
  .sp-tabs {
    margin: 20px;
    font-family: Inter;
  }
  
  /* Tab Headers */
  .sp-tab-headers {
    display: flex;
    border-bottom: 1px solid var(--border-color-d);
    margin-bottom: 15px;
  }
  
  .sp-tab-btn {
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    color: var(--body-text);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.3s ease;
  }
  
  .sp-tab-btn.active {
    border-bottom: 4px solid var(--menu-bg);
  }
  
  .sp-tab-panel {
    display: none;
  }
  
  .sp-tab-panel.active {
    display: block;
  }
  
 /* ============================
   Music Single Content Styling
   ============================ */

/* Container and Text settings */
.sp-tab-text {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    color: var(--body-text);
}

/* Paragraph spacing and inheritance */
.sp-tab-text p {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
}
  
  /* Toggle Button */
  .sp-toggle-btn {
    background: none;
    border: 1px solid var(--border-color-d);
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 14px;
    color: var(--menu-bg);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .sp-toggle-btn:hover {
    background-color: #2187ee;
    color: var(--nav-link-color);
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    /* Keep headers and text aligned left on mobile */
    .sp-tab-headers {
      justify-content: flex-start;
    }
    .sp-tab-btn {
      font-size: 15px;
    }
    
    .sp-tabs {
    margin: 10px;
  }
  }
  
  .sp-audio-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--header-bg);
    color: var(--body-text);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    z-index: 1000;
  }
  
  /* Footer play/pause button */
  .sp-player-play-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--menu-bg);
    cursor: pointer;
  }
  
  .sp-player-track-info {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 0 15px;
  }
  
  .sp-player-cover {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .sp-player-details {
    display: flex;
    flex-direction: column;
  }
  
  .sp-player-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .sp-player-artist {
    font-size: 13px;
    color: var(--body-text);
  }
  
  .sp-player-timing {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .sp-current-time,
  .sp-total-time {
    font-size: 12px;
  }
  
  .sp-progress-bar {
    width: 150px;
    height: 4px;
    background: var(--border-color-d);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }
  
  .sp-progress {
    width: 0%;
    height: 100%;
    background: #2187ee;
    border-radius: 2px;
  }
  
  .sp-player-close {
    background: none;
    border: none;
    font-size: 15px;
    color: var(--body-text);
    cursor: pointer;
    display: inline-flex;
      margin-top: -40px;
  }
  
  @media (max-width: 768px) {
    .sp-audio-player {
      align-items: stretch;
      padding: 10px;
      width: 100%;
      border-top: 2px solid var(--menu-bg);
    }
    
    .sp-player-play-btn {
    background: none;
    border: none;
    font-size: 25px;
    color: var(--menu-bg);
    cursor: pointer;
      z-index: 999;
      text-shadow: 0 0 6px #000000;
      margin-right: -3px;
  }
  
  .sp-player-cover {
    width: 35px;
    height: 35px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
    position: absolute;
    margin-left: -27px;
  }
    
   .sp-player-details {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
  }
    
    .sp-player-title {
    font-size: 13px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .sp-player-artist {
    font-size: 11px;
    color: var(--body-text);
  }
    
    .sp-player-track-info {
      margin: 10px 0;
    }
    
    .sp-player-timing {
      justify-content: space-between;
      width: 45%;
    }
    
    .sp-player-close {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--body-text);
    cursor: pointer;
     display: inline-flex;
      margin-top: -10px;
  }
  }
  
  /* Related Songs Section */
  .related-songs {
    margin-left: 10px;
  }
  
  .related-songs .related-header {
      font-size: 17px !important;
      color: var(--body-text);
      font-weight: bold;
    display: inline-flex;
    border-bottom: 2px solid var(--menu-bg);
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  
  /* Related Songs List */
  .related-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  /* Related Song Item */
  .related-item {
    display: flex;
    align-items: center;
    width: calc(50% - 10px); /* 2 columns */
    gap: 10px;
    background: var(--mobile-header-bg);
    padding: 10px;
    transition: transform 0.3s ease;
    margin-bottom: 10px;
  }
  
  .related-list li {
    border-bottom: 1px solid var(--border-color-d);
  }
  
  /* Thumbnail */
  .related-thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
  }
  
  .related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
  }
  
  /* Song Info */
  .related-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
  }
  
  /* Song Title */
  .related-song-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  /* Artist Name */
  .related-artist-name a {
    font-size: 12px;
    color: var(--rartist-name);
  }

  .related-artist-name {
    font-size: 12px;
    color: var(--rartist-name);
  }
  
  /* Responsive: Mobile (1 Column) */
  @media (max-width: 768px) {
    .related-item {
      width: 100%; /* Full width on mobile */
    }
  
    .related-song-title {
      font-size: 15px;
    }
  
    .related-artist-name {
      font-size: 13px;
    }
  }
  
  /* Comments Section Container */

  .logged-in-user {
    font-size: 13px;
    margin-bottom: 10px;
  }

  .comments-section {
    background: var(--mobile-header-bg);
    padding: 20px;
    margin-top: 20px;
    border-radius: 8px;
  }
  
  /* Styled Comments Header */
  .comments-header {
    font-size: 20px;
    color: var(--body-text);
    margin-bottom: 20px;
    font-weight: bold;
    border-bottom: 2px solid var(--border-color-d);
    padding-bottom: 10px;
  }
  
  /* Comments List */
  .comments-list {
    margin-bottom: 20px;
  }
  
  /* Individual Comment */
  .comment {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color-d);
  }
  
  /* Remove bottom border for nested replies and add a top border instead */
  .comment.reply {
    border-bottom: none;
    border-top: 1px solid var(--border-color-d);
    padding-top: 15px;
  }
  
  /* Comment Header */
  .comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  
  /* Author Info */
  .comment-author-avatar {
    margin-right: 10px;
  }
  
  .comment-author-avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
  
  .comment-author-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .comment-author-name {
    font-weight: bold;
    font-size: 14px;
  }
  
  .comment-date {
    font-size: 12px;
    color: var(--rartist-name);
  }
  
  /* Comment Body */
  .comment-body p {
    font-size: 14px;
    line-height: 1.5;
    margin: 5px 0 10px 0;
  }
  
  /* Comment Actions */
  .comment-actions {
    display: flex;
    gap: 10px;
    font-size: 14px;
  }
  
  .reply-btn,
  .love-btn {
    background: none;
    border: none;
    color: var(--search-btn-bg);
    cursor: pointer;
    transition: color 0.3s;
    font-size: 14px;
  }
  
  .reply-btn:hover,
  .love-btn:hover {
    color: var(--deep-blue-hover);
  }
  
  .love-btn i {
    margin-right: 4px;
  }
  
  /* When loved, highlight in red */
  .love-btn.loved {
    color: #e74c3c;
  }
  
  .love-count {
    font-size: 14px;
  }
  
  /* Reply Form Container */
  .reply-form-container {
    margin-top: 10px;
    margin-left: 50px;
  }
  
  /* Reply Form */
  .reply-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .reply-form input[type="text"] {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border-color-d);
    border-radius: 4px;
    background: var(--body-bg);
    color: var(--body-text);
  }
  
  .reply-form button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background: var(--search-btn-bg);
    color: var(--nav-link-underline);
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .reply-form button:hover {
    background: var(--search-btn-bg-hover);
  }
  
  /* Nested Replies Container */
  .replies {
    margin-top: 10px;
    margin-left: 50px;
  }
  
  /* Top-Level Comment Form */
  .comment-form {
    background: var(--menu-bg);
    padding: 20px;
    border-radius: 8px;
  }
  
  .comment-form h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: var(--nav-link-underline);
  }
  
  .comment-form input[type="text"],
  .comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color-d);
    border-radius: 4px;
    background: var(--body-bg);
    color: var(--body-text);
    margin-bottom: 10px;
  }
  
  .comment-form button {
    background: var(--search-btn-bg);
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    color: var(--nav-link-underline);
    cursor: pointer;
    transition: background 0.3s;
  }
  
  .comment-form button:hover {
    background: var(--search-btn-bg-hover);
  }

  .comment-success {
    background-color: #e0f7e9;
    color: #256029;
    padding: 10px 15px;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 14px;
    animation: fadeSuccess 0.4s ease;
  }
  
  @keyframes fadeSuccess {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }  
  
  /* Section Header for Song Section */
  .archive-section .archive-header {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 15px;
      padding: 5px 0 15px 0;
      border-bottom: 3px solid var(--menu-bg);
      background: none;
  }
  
  .archive-section {
    margin-bottom: 10px;
  }
  
  .archive-section .section-header h2 {
      font-size: 20px;
      color: var(--nav-link-underline);
      font-weight: bold;
  }
  
  .archive-section .song-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .archive-section .artist-name {
    font-size: 13px;
    color: var(--def-text-color);
  }
  
  .archive-section .artist-name a {
    font-size: 13px;
    color: var(--def-text-color);
  }
  
  @media (max-width: 768px) {
    .archive-section:last-of-type {
      margin-bottom: 0;
    }
  }
  
  @media (min-width: 769px) {
    .archive-section {
      padding: 10px;
    }
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }
  
  .pagination .page-numbers {
    margin: 0 5px;
    padding: 5px 10px;
    text-decoration: none;
    color: var(--nav-link-underline);
    background-color: var(--menu-bg);
    border: 1px solid var(--border-color-d);
    border-radius: 3px;
    transition: background 0.3s ease, color 0.3s ease;
  }
  
  .pagination .page-numbers:hover {
    background-color: var(--search-btn-bg-hover);
    color: #fff;
  }
  
  /* Active page styling */
  .pagination .page-numbers.current {
    background: none;
    color: var(--body-text);
    border: 1px solid var(--accent-color);
    cursor: default;
    padding: 7px 14px;
  }
  
  .pagination .page-numbers.dots {
    pointer-events: none;
    border: none;
    background: none;
    font-size: 16px;
    color: var(--body-text);
  }
  
  /* Style the Previous and Next links with SVG and text */
  .pagination .prev,
  .pagination .next {
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  
  .pagination .pagination-icon {
    display: inline-block;
    vertical-align: middle;
  }
  
  /* Mobile Adjustments */
  @media (max-width: 768px) {
    .pagination {
      padding: 10px 0;
      font-size: 14px;
    }
    
    .pagination .page-numbers {
      margin: 0 3px;
      padding: 3px 8px;
    }
    
    .pagination .page-numbers.dots {
      font-size: 14px;
    }
    
    /* Active page styling */
  .pagination .page-numbers.current {
    background: none;
    color: var(--body-text);
    border: 1px solid var(--accent-color);
    cursor: default;
    padding: 4px 9px;
  }
  }
  
  .archive-description {
    background: var(--mobile-header-bg);
    padding: 20px;
    padding-bottom: 40px; /* Increased bottom padding for spacing */
    border-radius: 8px;
    margin: 20px 0;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .archive-description p {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--body-text);
  }
  
  /* Last Updated label styled as a badge in the bottom-right */
  .last-updated {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--rartist-name);
    background: rgba(0, 0, 0, 0.05);
    padding: 5px 10px;
    border-radius: 4px;
  }
  
  .last-updated i {
    margin-right: 5px;
    font-size: 16px;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    .archive-description {
      padding: 15px;
      padding-bottom: 35px;
    }
    .archive-description p {
      font-size: 14px;
    }
    .last-updated {
      font-size: 12px;
      bottom: 8px;
      right: 8px;
      padding: 4px 8px;
    }
  }
  
  .hottest-search {
    margin: 10px 15px;
  }
  
  .gb-space {
    border: none;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  .hottest-label {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: var(--body-text);
    margin-bottom: 10px;
  }
  
  .hottest-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .hottest-buttons .search-btn {
    background: none;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
  }
  
  .hottest-buttons .search-btn:hover {
    background: var(--search-btn-bg);
    color: #fff;
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
    .hottest-label {
      font-size: 16px;
    }
    
    .hottest-buttons .search-btn {
      padding: 6px 12px;
      font-size: 13px;
    }
  }
  
  /* ----------------------------
     Album Post Container
  ----------------------------- */
  .album-post {
    margin: 5px auto;
    padding: 15px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  
  .album-post {
    margin-bottom: 15px;
    line-height: 1.5 !important;
    background: var(--mobile-header-bg);
    border-radius: 8px;
    font-size: 15px !important;
  }
  
  @media (max-width: 991px) {
    .album-post {
    margin: 5px auto;
    padding: 5px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  }
  
  /* ----------------------------
     Album Header
  ----------------------------- */
  .album-header {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
  }
  
  .album-artwork img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 5px;
  }
  
  /* New wrapper to group album info and controls */
  .album-details-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  
  /* Album Info */
  .album-details-wrapper .album-info {
    flex: 1;
    background: var(--music-info-bg);
    padding: 10px;
  }
  .album-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--nav-link-underline);
    margin-bottom: 10px;
  }
  .album-artist {
    font-size: 14px;
    color: var(--nav-link-underline);
    margin-bottom: 8px;
  }
  .album-details {
    font-size: 12px;
    color: var(--nav-link-underline);
  }
  
  /* ----------------------------
     Album Controls
  ----------------------------- */
  .album-controls {
    display: flex;
    gap: 15px;
    margin-top: 20px; /* Place controls below album info */
    flex-wrap: nowrap;
  }
  .album-controls button {
    background: var(--menu-bg);
    color: var(--nav-link-color);
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .album-controls button:hover {
    background: var(--search-btn-bg-hover);
  }
  
  /* ----------------------------
     Responsive Adjustments
  ----------------------------- */
  @media (max-width: 991px) {
    .album-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .album-details-wrapper {
      width: 100%;
    }
    .album-controls {
      justify-content: left;
      flex-direction: row;
      align-items: left;
    }
  }
  
  /* ----------------------------
     Album Overview
  ----------------------------- */
  .album-overview {
    margin-bottom: 30px;
  }
  .album-overview h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--body-text);
    border-bottom: 2px solid var(--menu-bg); /* Bottom border */
    padding-bottom: 5px;
  }
  .album-overview p {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    color: var(--body-text);
    margin-bottom: 20px;
  }
  
  /* ----------------------------
     Tracklist
  ----------------------------- */
  .album-tracklist {
    margin-bottom: 10px;
  }
  .tracklist-header {
    font-size: 22px;
    font-weight: bold;
    color: var(--body-text);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--menu-bg);
    padding-bottom: 5px;
  }
  .track-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-color-d);
    transition: background 0.3s ease;
  }
  .track:hover {
    background: rgba(0, 0, 0, 0.05);
  }
  .track-number {
    font-size: 13px;
    width: 30px;
    text-align: center;
    color: var(--body-text);
  }
  .track-title {
    flex: 1;
    margin-left: 10px;
    font-size: 16px;
    color: var(--body-text);
    font-weight: 600;
  }

.track-title a {
    font-size: 13px;
    color: var(--accent-color);
  }
  
  .track-duration {
    font-size: 14px;
    color: var(--rartist-name);
    width: 50px;
    text-align: right;
    margin-right: 15px; /* Increased spacing for mobile */
    font-size: 13px;
  }
  .track-play-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--menu-bg);
    font-size: 15px;
    transition: color 0.3s ease;
    width: 20px;
    height: 20px;
    margin-top: -1px !important;;
    
  }
  .track-play-btn:hover {
    color: #2187ee;
  }
  
  /* ----------------------------
     Responsive Adjustments
  ----------------------------- */
  @media (max-width: 991px) {
    .album-header {
      flex-direction: column;
      text-align: center;
    }
    .album-artwork img {
      width: 100%;
      max-width: 100%;
      height: auto;
    }
    
    .track {
      flex-wrap: wrap;
    }
    .track-duration {
      margin-right: 10px;
    }
    .track-play-btn {
      margin-top: 5px;
    }
  }
  
  /* ----------------------------
     Sticky Footer Album Player (xp-album-player)
  ----------------------------- */
  .xp-album-player {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 60%; /* Adjust as needed */
    background: var(--header-bg);
    color: var(--body-text);
    padding: 10px 20px;
    display: flex;
    flex-direction: column; /* Stack main controls and nav vertically */
    box-shadow: 0 -2px 8px rgba(0,0,0,0.3);
    z-index: 1000;
    height: 65px;
    border-top: 2px solid var(--menu-bg);
  }
  
  /* Main Player Controls */
  .xp-player-track-info {
    display: flex;
    align-items: center;
    flex: 1;
    margin: 10px 0;
    margin-top: -5px;
  }
  
  .xp-player-cover {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  .xp-player-details {
    display: flex;
    flex-direction: column;
  }
  
  .xp-player-title {
    font-size: 15px;
    font-weight: bold;
    color: var(--body-text);
  }
  
  .xp-player-artist {
    font-size: 12px;
    color: var(--body-text);
  }
  
  /* Timing & Progress (unchanged from sp-player) */
  @media (min-width: 992px) {
  .xp-player-timing {
    width: 1000px;
    display: flex;
    position: absolute;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    margin-left: 300px;
  }
  .xp-current-time,
  .xp-total-time {
    font-size: 12px;
  }
  .xp-progress-bar {
    width: 40%;
    height: 4px;
    background: var(--border-color-d);
    border-radius: 2px;
    overflow: hidden;
  }
    
    .xp-progress {
    width: 0%;
    height: 100%;
    background: var(--menu-bg);
    border-radius: 2px;
  }
  
  /* Navigation: Prev/Next controls below the progress bar */
  .xp-player-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 5px;
    margin-left: 250px;
    margin-top: -20px;
  }
  .xp-player-prev,
  .xp-player-next,
  .xp-player-play {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--menu-bg);
    transition: color 0.3s ease;
  }
  
  .xp-player-play {
    font-size: 20px !important;
  }
  .xp-player-prev:hover,
  .xp-player-next:hover {
    color: #2187ee;
  }
  
  /* Close Button */
  .xp-player-close {
    background: none;
    border: none;
    font-size: 15px;
    color: var(--body-text);
    cursor: pointer;
    align-self: flex-end;
    margin-top: -12px;
    margin-right: -15px;
    position: absolute;
    font-size: 12px;
  }
  }
  
  /* Responsive adjustments for mobile */
  @media (max-width: 991px) {
    .xp-album-player {
      width: 100%;
      padding: 10px;
      height: 60px;
    }
    
    .xp-player-title {
      font-size: 14px;
    }
    
    .xp-player-artist {
      font-size: 12px;
    }
    
    .xp-player-track-info {
      margin: 10px 0;
      margin-top: -5px;
      display: flex;
      align-items: center;
      flex: 1;
    }
    .xp-player-timing {
      justify-content: center;
      gap: 5px;
      margin-top: -45px;
      padding-left: 75px;
      margin-right: -70px;
      display: flex;
      
    }
    .xp-progress-bar {
      width: 30%; 
      height: 4px;
      background: var(--border-color-d);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 5px;
    }
    
    .xp-progress {
    width: 0%;
    height: 100%;
    background: var(--menu-bg);
    border-radius: 2px;
  }
    
    .xp-current-time,
  .xp-total-time {
    font-size: 12px;
  }
    
    .xp-player-nav {
      gap: 20px !important;
      margin-top: 2px !important;
      padding-left: 75px !important;
      margin-right: -70px !important;
      display: flex !important;
      justify-content: center;
    }
    
    .xp-player-prev,
  .xp-player-next,
    .xp-player-play {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--menu-bg);
    transition: color 0.3s ease;
    }
    
    .xp-player-play {
      font-size: 20px;
    }
    
    .xp-player-close {
      background: none;
      border: none;
      color: var(--body-text);
      cursor: pointer;
      align-self: flex-end;
      position: absolute;
      font-size: 13px;
      margin-right: -5px;
      margin-top: -10px;
    }
  }
  
  /* Post Title Styling XP */
  .xp-post-title {
    font-size: 23px;
    font-weight: bold;
    color: var(--body-text);
    margin-bottom: 15px;
    text-align: left;
    line-height: 1.3;
    border-bottom: 2px solid var(--menu-bg);
    padding-bottom: 10px;
    
  }
  
  /* Responsive Styling */
  @media (max-width: 768px) {
    .xp-post-title {
      font-size: 20px;
      
    }
  }
  
  /* ----------------------------
     PageBody Container
  ----------------------------- */
  .pagebody {
    margin: 5px auto;
    padding: 15px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  
  .pagebody p {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
    list-style: disc;
  }
  
  .pagebody li {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
    margin-left: 15px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  
  @media (max-width: 991px) {
    .pagebody {
    margin: 5px auto;
    padding: 5px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
    .pagebody p {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  
  .pagebody li {
    font-family: "Lora", Georgia, serif;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    line-height: 1.6;
    margin-bottom: 20px;
    margin-left: 15px;
    background: var(--mobile-header-bg);
    border-radius: 8px;
  }
  }
  
  .page-heading {
    margin-bottom: 30px;
  }
  .page-heading h2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--body-text);
    border-bottom: 2px solid var(--menu-bg); /* Bottom border */
    padding-bottom: 5px;
  }
  .page-heading p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--body-text);
  }
  
  /* ----------------------------
     404 Error Container
  ----------------------------- */
  .error {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 50px auto;
    padding: 30px;
    background: var(--mobile-header-bg);
    border-radius: 10px;
  }
  
  .error-content {
    max-width: 500px;
    padding: 20px;
  }
  
  .error-code {
    font-size: 6rem;
    font-weight: 700;
    color: var(--body-text);
    margin: 0;
  }
  
  .error-text {
    font-size: 1.2rem;
    color: var(--body-text);
    margin: 10px 0;
  }
  
  .error-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--menu-bg);
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
  }
  
  .error-btn:hover {
    background: var(--deep-blue-hover);
  }
  
  /* Responsive Design */
  @media (max-width: 991px) {
    .error {
      margin: 20px auto;
      padding: 20px;
    }
    
    .error-code {
      font-size: 4rem;
    }
  
    .error-text {
      font-size: 1rem;
    }
  
    .error-btn {
      font-size: 0.9rem;
      padding: 10px 16px;
    }
  }
  
  /* ----------------------------
     No Search Results UI
  ----------------------------- */
  .no-results {
      text-align: center;
      padding: 30px;
      margin: 40px auto;
      background: var(--mobile-header-bg);
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      max-width: 500px;
  }
  
  .no-results-icon {
      font-size: 3rem;
      color: var(--accent-color);
      margin-bottom: 10px;
  }
  
  .no-results h3 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 5px;
      color: var(--body-text);
  }
  
  .no-results p {
      font-size: 1rem;
      color: var(--rartist-name);
      margin-bottom: 15px;
  }
  
  /* No Results Search Bar */
  .no-results-search {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--xsearch-form-bg);
      border: 2px solid var(--xsearch-border);
      border-radius: 8px;
      padding: 5px;
      max-width: 400px;
      margin: 0 auto;
  }
  
  .no-results-search input {
      flex: 1;
      padding: 10px;
      border: none;
      outline: none;
      font-size: 1rem;
      background: transparent;
      color: var(--body-text);
  }
  
  .no-results-search button {
      padding: 10px 15px;
      background: var(--menu-bg);
      border: none;
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      border-radius: 5px;
      transition: background 0.3s ease;
  }
  
  .no-results-search button:hover {
      background: var(--search-btn-bg-hover);
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
      .no-results {
          padding: 20px;
          margin: 20px auto;
      }
  
      .no-results h3 {
          font-size: 1.5rem;
      }
  
      .no-results p {
          font-size: 0.9rem;
      }
  
      .no-results-search {
          max-width: 100%;
      }
  }

  @media (min-width: 992px) {
    .no-results-search.mobile {
      display: none !important;
    }
    }
    
    @media (max-width: 991px) {
      .no-results-search.mobile {
        max-width: 85%;
        margin-bottom: 10px;
      }
    }    
  
  /* ----------------------------
     Artists Page Styling
  ----------------------------- */
  .artists-page {
     margin-bottom: 10px;
    padding: 10px;
  }
  
  /* Section Titles */
  .section-subtitle {
      font-size: 18px;
      font-weight: bold;
      color: var(--body-text);
      margin-bottom: 12px;
      border-bottom: 2px solid var(--menu-bg);
      padding-bottom: 12px;
  }
  
  /* Top Artists Section */
  .top-artists-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 10px;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--menu-bg);
    padding-bottom: 10px;
  }
  
  /* Top Artist Card */
  .top-artist-card {
      background: var(--header-bg);
      padding: 10px;
      border-radius: 6px;
      text-align: center;
      transition: transform 0.3s ease;
  }
  
  .top-artist-card:hover {
      transform: translateY(-5px);
  }
  
  /* Top Artist Image */
  .top-artist-card img {
      width: 90px;
      height: 90px;
      object-fit: cover;
      border-radius: 50%;
  }
  
  .artist-letter {
    font-size: 22px;
    font-weight: bold;
    color: var(--body-text);
    border-bottom: 2px solid var(--menu-bg);
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
  
  /* Artist Name */
  .artist-name, .top-artist-name {
      margin-top: 6px;
      font-size: 13px;
      font-weight: bold;
      color: var(--body-text);
  }
  
  /* Alphabet Navigation */
  .artist-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin-bottom: 25px;
      padding-top: 25px;
      border-top: 2px solid var(--menu-bg);
  }
  
  .artist-nav a {
      text-decoration: none;
      font-size: 12px;
      font-weight: bold;
      color: var(--nav-link-underline);
      background: var(--menu-bg);
      border-radius: 50%;
      height: 35px;
      width: 35px;
      display: flex;  /* Use flexbox */
      align-items: center;  /* Vertical center */
      justify-content: center;  /* Horizontal center */
      text-align: center;
  }
  
  .artist-nav a:hover {
      background: var(--search-btn-bg-hover);
  }
  
  /* Artists Grid */
  .artists-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      margin-top: 10px;
      margin-bottom: 25px;
  }
  
  /* Artist Card */
  .artist-card {
      text-align: center;
      margin-bottom: 15px;
  }
  
  .artist-card img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      transition: transform 0.2s ease-in-out;
  }
  
  .artist-card img:hover {
      transform: scale(1.05);
  }
  
  /* Mobile Responsiveness */
  @media (max-width: 768px) {
      .top-artists-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  
      .artists-grid {
          grid-template-columns: repeat(3, 1fr);
      }
  
      .artist-card img {
          width: 80px;
          height: 80px;
      }
    
    .artists-page {
     margin-bottom: 10px;
    padding: 5px;
  }
  }
/* style.css - Add to bottom */

/* Articles Grid Layout */
.articles-section {
    margin-bottom: 50px;
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Columns for articles look better */
    gap: 20px;
}

/* Article Card Design */
.article-card {
    background: var(--mobile-header-bg);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--border-color-d);
}

.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Thumbnail Area */
.article-thumbnail {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.article-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.article-card:hover .article-thumbnail img {
    transform: scale(1.05);
}

/* Category Badge */
.article-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-color);
    color: #fff;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Content Area */
.article-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.article-meta {
    font-size: 12px;
    color: var(--rartist-name);
    margin-bottom: 10px;
}

.article-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

.article-title a {
    color: var(--body-text);
    transition: color 0.2s;
}

.article-title a:hover {
    color: var(--accent-color);
}

.article-excerpt {
    font-size: 14px;
    color: var(--rartist-name);
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.read-more-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    display: flex;
    align-items: center;
    gap: 5px;
}

.read-more-link:hover {
    text-decoration: underline;
}

/* Responsive: Mobile 1 column, Tablet 2 columns */
@media (max-width: 991px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }
    .article-thumbnail {
        height: 180px;
    }
}

/* =========================================
   New Article Header Styles
   ========================================= */

/* Category Label */
.article-cat-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.cat-dot {
    width: 8px;
    height: 8px;
    background-color:
#2187ee;
    border-radius: 50%;
    display: inline-block;
}

.article-cat-text {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--body-text);
    letter-spacing: 0.5px;
    text-decoration: none;
}

/* Main Title */
.article-main-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--body-text);
}

/* Detailed Meta Container */
.article-meta-detailed {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color-d);
    margin-bottom: 25px;
}

/* Author Avatar */
.meta-avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

/* Meta Info Text */
.meta-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    font-family: 'Inter', sans-serif;
}

.meta-row-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--body-text);
    font-weight: 500;
    margin-bottom: 4px;
}

.meta-author-name a {
    color: var(--body-text);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--rartist-name);
}

.meta-role {
    color: var(--rartist-name);
    font-size: 12px;
}

.meta-separator {
    color: var(--rartist-name);
    font-size: 12px;
}

.meta-time-ago {
    color: var(--rartist-name);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.meta-bookmark {
    margin-left: 5px;
    color: var(--body-text);
    cursor: pointer;
}

.meta-row-bottom {
    font-size: 12px;
    color: var(--rartist-name);
}

/* Share Section */
.meta-share-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-top: 5px;
}

.share-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--rartist-name);
    display: flex;
    align-items: center;
    gap: 5px;
}

.share-icon {
    font-size: 16px;
    color: var(--body-text); 
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
}

.share-icon.fb { color: #1877F2; }
.share-icon.x-twitter { color: var(--body-text); }
.share-icon.email { color: #f39c12; }
.share-icon:hover { opacity: 0.8; transform: scale(1.1); }

/* Content Body Typography */
.article-content-body {
    font-family: 'Lora', serif; 
    font-size: 18px;
    line-height: 1.8;
    color: var(--body-text);
}

.article-content-body p {
    margin-bottom: 24px;
}

/* Tags Styles */
.tag-pill {
    background: var(--menu-bg);
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    margin-right: 5px;
    display: inline-block;
}

/* Responsive: Mobile Layout */
@media (max-width: 768px) {
    .article-main-title {
        font-size: 24px;
    }

    .article-meta-detailed {
        position: relative;
    }

    /* Force share icons to own row on mobile */
    .meta-share-wrapper {
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px dashed var(--border-color-d);
        justify-content: flex-start;
    }
    
    .meta-row-top {
        font-size: 12px;
    }
}


/* Featured Image */
.article-featured-image {
    position: relative;
    width: 100%;        
    max-width: 100%;  
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden; 
    display: block;  
}

.article-featured-image img {
    width: 100% !important;  
    max-width: 100% !important; 
    height: auto !important; 
    display: block;
    object-fit: cover; 
}

/* ============================
   Article Archive Header Styles
   ============================ */

.archive-header-wrapper {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color-d);
}

.archive-main-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--body-text);
    margin-bottom: 8px;
    text-transform: capitalize;
}

.archive-sub-desc {
    font-size: 15px;
    color: var(--rartist-name);
    max-width: 800px;
    line-height: 1.6;
}

/* Adjust Grid for Archive Page */
.article-archive .articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Responsive adjustment for the archive grid with sidebar */
@media (max-width: 1024px) {
    .article-archive .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .article-archive .articles-grid {
        grid-template-columns: 1fr;
    }
    
    .archive-main-title {
        font-size: 24px;
    }
}

/* ============================
   Article Tags Styling
   ============================ */

.article-footer {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color-d);
}

.article-tags-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.tags-label {
    font-weight: 800;
    font-size: 14px;
    color: var(--body-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tags-label i {
    color: var(--accent-color);
}

.article-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-pill {
    display: inline-block;
    background-color: var(--menu-bg); /* Uses your theme's blue/menu color */
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px; /* Makes them rounded "pills" */
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.tag-pill:hover {
    background-color: var(--search-btn-bg-hover); /* Darker shade on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .article-tags-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* ============================
   Social Follow Box Styling
   ============================ */
.social-follow-box {
    background: linear-gradient(135deg, var(--menu-bg) 0%, var(--deep-blue-hover) 100%);
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    margin: 30px 0;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Subtle background glow effect */
.social-follow-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    opacity: 0.6;
    pointer-events: none;
}

.social-follow-box h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff !important;
    position: relative;
    z-index: 1;
}

.social-follow-box p {
    font-size: 15px;
    margin-bottom: 25px;
    opacity: 0.9;
    color: #eee !important;
    position: relative;
    z-index: 1;
    font-family: 'Inter', sans-serif;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #fff !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.social-btn i {
    font-size: 18px;
}

/* Twitter / X Button */
.social-btn.twitter {
    background: #000;
    border: 1px solid rgba(255,255,255,0.2);
}

.social-btn.twitter:hover {
    background: #1a1a1a;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Telegram Button */
.social-btn.telegram {
    background: #229ED9;
    border: 1px solid rgba(255,255,255,0.2);
}

.social-btn.telegram:hover {
    background: #1c8ac0;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

/* Responsive adjustment for mobile */
@media (max-width: 600px) {
    .social-follow-box {
        padding: 25px 20px;
        margin: 20px 10px;
    }
    .social-buttons {
        flex-direction: column;
        gap: 12px;
    }
    .social-btn {
        width: 100%;
    }
}

/*
===============================================================
   ADS POSITION
===============================================================
*/

.header-ad-slot,
.header-ad-slot-2,
.header-ad-slot-3,
.in-post-ad,
.sidebar-ad,
.after-article-ad {
    display: block; /* Can use flex, but block with margin auto often safer for ad scripts */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    clear: both;
    max-width: 100%;
}

.header-ad-slot {
    margin-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color-d); /* Optional visual separation */
}

/* Flex centering for ensuring content inside sits in middle */
.header-ad-slot > div,
.in-post-ad > div,
.sidebar-ad > div,
.after-article-ad > div {
    margin: 0 auto;
    display: inline-block;
}

/* Optional: Add visible "Advertisement" label above ads */
.header-ad-slot::before,
.in-post-ad::before,
.sidebar-ad::before,
.after-article-ad::before {
    content: 'Advertisement';
    display: block;
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    text-align: center;
    opacity: 0.7;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .header-ad-slot,
    .in-post-ad,
    .sidebar-ad,
    .after-article-ad {
        overflow: hidden; /* prevent horizontal scroll caused by fixed width ads */
    }
}

/***** Accessibility *****/

.screen-reader-text { position: absolute; top: -9999rem; left: -9999rem; }

/***** Lists *****/

.entry-content ul { list-style: square; }
.entry-content ol { list-style: decimal; }
.entry-content ul, .entry-content ol { margin: 0 0 20px 40px; }
.entry-content ul ul, .entry-content ol ol { margin: 0 0 0 40px; }
.entry-content li { margin-bottom: 5px; }
dl { margin: 0 0 10px 20px; }
dt, dd { display: list-item; }
dt { list-style-type: square; font-weight: bold; }
dd { list-style-type: circle; margin-left: 20px; }
select { max-width: 100%; }

/***** Header *****/

.mh-header { background: #fff; }
.mh-site-logo { padding: 20px; overflow: hidden; }
.mh-header-text { margin: 5px 0; text-transform: uppercase; }
.mh-header-title { font-size: 32px; font-size: 2rem; line-height: 1; }
.mh-header-tagline { display: inline-block; font-size: 14px; font-size: 0.875rem; line-height: 1; color: #e64946; padding-top: 10px; margin-top: 10px; border-top: 1px solid #e5e5e5; }

/***** Navigation *****/

.mh-main-nav-wrap { background: #2a2a2a; }
.mh-main-nav { text-transform: uppercase; border-bottom: 5px solid #e64946; }
.mh-main-nav li { float: left; position: relative; font-weight: 700; }
.mh-main-nav li:hover { background: #e64946; }
.mh-main-nav li:hover a { color: #fff; }
.mh-main-nav li a { display: block; color: #fff; padding: 10px 20px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.mh-main-nav li:first-child a, .mh-main-nav .sub-menu li a { border: none; }
.mh-main-nav ul li:hover > ul { display: block; background: #2a2a2a; z-index: 9999; }
.mh-main-nav ul ul { display: none; position: absolute; }
.mh-main-nav ul ul li { width: 100%; min-width: 16em; }
.mh-main-nav ul ul ul { left: 100%; top: 0; }
.mh-main-nav .menu > .current-menu-item { background: #e64946; }
.mh-navigation .menu-item-has-children > a:after { font-family: 'FontAwesome'; font-weight: 600; line-height: 1; content: '\f107'; margin-left: 5px; }
.mh-navigation .sub-menu .menu-item-has-children > a:after { content: '\f105'; margin-left: 10px; }
.mh-navigation img { vertical-align: inherit; }

/***** SlickNav Mobile Menu Core Style *****/

.slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em; line-height: 1.125em; cursor: pointer; margin: 5px 5px 6px; text-decoration: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #222; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em; }
.slicknav_menu { *zoom: 1; font-size: 16px; font-size: 1rem; box-sizing: border-box; background: #4c4c4c; padding: 5px; }
.slicknav_menu * { box-sizing: border-box; }
.slicknav_menu .slicknav_menutxt { display: block; line-height: 1.188em; float: left; color: #fff; font-weight: bold; text-shadow: 0 1px 3px #000; }
.slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; }
.slicknav_menu .slicknav_no-text { margin: 0; }
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; background-color: #fff; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.slicknav_menu:before, .slicknav_menu:after { content: " "; display: table; }
.slicknav_menu:after { clear: both; }
.slicknav_nav { clear: both; color: #fff; margin: 0; padding: 0; font-size: 0.875em; list-style: none; overflow: hidden; }
.slicknav_nav ul { display: block; list-style: none; overflow: hidden; padding: 0; margin: 0 0 0 20px; }
.slicknav_nav li { display: block; }
.slicknav_nav a { display: block; padding: 5px 10px; margin: 2px 5px; text-decoration: none; color: #fff; }
.slicknav_nav a:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #222; }
.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item { cursor: pointer; }
.slicknav_nav .slicknav_item a { display: inline; padding: 0; margin: 0; }
.slicknav_nav .slicknav_row { display: block; padding: 5px 10px; margin: 2px 5px; }
.slicknav_nav .slicknav_row:hover { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background: #ccc; color: #fff; }
.slicknav_nav .slicknav_txtnode { margin-left: 15px; }
.slicknav_nav .slicknav_parent-link a { display: inline; padding: 0; margin: 0; }
.slicknav_brand { float: left; color: #fff; font-size: 18px; line-height: 30px; padding: 7px 12px; height: 44px; }

/***** SlickNav Custom Style *****/

.slicknav_btn { background: #e64946; }
.slicknav_menu { padding: 0; border-bottom: 1px solid #2a2a2a; background: #e64946; display: none; }
.slicknav_menu .slicknav_menutxt { text-shadow: none; display: none; }
.slicknav_menu .slicknav_icon-bar { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
.slicknav_nav { font-size: 16px; font-size: 1rem; font-weight: 600; margin-bottom: 20px; }
.slicknav_nav ul { padding: 20px 0 0 15px; margin: 0; border-top: 1px solid #2a2a2a; }
.slicknav_nav ul ul { border: 0; padding: 0 0 0 15px; }
.slicknav_nav .slicknav_item:hover, .slicknav_nav a:hover { color: #fff; background: #e64946; }
.mh-main-nav-wrap .slicknav_btn, .mh-main-nav-wrap .slicknav_menu, .mh-main-nav-wrap .slicknav_nav .slicknav_item:hover, .mh-main-nav-wrap .slicknav_nav a:hover { background: transparent; }
.mh-main-nav-wrap .slicknav_nav ul { border-top: 1px solid #e64946; }
.mh-main-nav-wrap .slicknav_nav ul ul { border: none; }

/***** FlexSlider Browser Resets *****/

.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus { outline: none; }
.slides, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; }

/***** FlexSlider Base Styles *****/

.flexslider { margin: 0; padding: 0; }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
.flexslider .slides img { display: block; }
.flex-pauseplay span { text-transform: capitalize; }
.slides:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }
.no-js .slides > li:first-child { display: block; }

/***** FlexSlider Default Styles *****/

.flexslider { position: relative; zoom: 1; }
.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.flexslider .slides { zoom: 1; }
.flexslider .slides img { height: auto; }
.flex-direction-nav { *height: 0; }
.flex-direction-nav a { width: 30px; height: 30px; margin: -12px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease; }
.flex-direction-nav .flex-next { background-position: 100% 0; right: -36px; display: none; }
.flex-direction-nav .flex-prev { left: -36px; display: none; }
.flex-direction-nav .flex-disabled { opacity: 0.3 !important; filter: alpha(opacity=30); cursor: default; }
.flexslider:hover .flex-next { opacity: 0.8; right: 5px; display: block; }
.flexslider:hover .flex-prev { opacity: 0.8; left: 5px; display: block; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-control-nav { width: 100%; position: absolute; bottom: 6px; text-align: center; z-index: 999; }
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; }
.flex-control-paging li a { width: 11px; height: 11px; display: block; background: #666; background: rgba(0, 0, 0, 0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3); }
.flex-control-paging li a:hover { background: #333; background: rgba(0, 0, 0, 0.7); }
.flex-control-paging li a.flex-active { background: #000; background: rgba(0, 0, 0, 0.9); cursor: default; }

/***** Posts/Pages *****/

.entry-header, .page-header { margin-bottom: 20px; margin-bottom: 1.25rem; }
.page-title { font-size: 26px; font-size: 1.75rem; }
.mh-subheading-top { border-bottom: 3px solid #2a2a2a; }
.mh-subheading { display: block; font-size: 13px; font-size: 0.8125rem; color: #fff; padding: 5px 10px; margin-bottom: 10px; margin-bottom: 0.625rem; background: #e64946; text-transform: uppercase; }
.mh-meta { font-size: 13px; font-size: 0.8125rem; }
.mh-meta, .mh-meta a { color: #979797; }
.mh-meta a:hover { color: #e64946; }
.mh-footer .mh-meta, .mh-footer .mh-meta a, .mh-footer .mh-meta a:hover { color: #fff; }
.mh-meta span { margin-right: 10px; }
.mh-meta .fa, .mh-meta .far { margin-right: 5px; }
.entry-meta { margin-top: 10px; margin-top: 0.625rem; padding: 5px 10px; border-top: 1px dotted #ebebeb; border-bottom: 1px dotted #ebebeb; }
.entry-thumbnail { max-width: 1030px; margin-bottom: 20px; margin-bottom: 1.25rem; }
.entry-thumbnail img {border-radius: 5px; width: 100%; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6, .entry-content p, .entry-content blockquote, .entry-content .flex-vid, .entry-content .mh-row, .entry-content .mh-video-container { margin-bottom: 20px; margin-bottom: 1.25rem; }
.entry-content blockquote p:last-child { margin: 0; }
.entry-tags { border-radius: 5px; font-size: 12px; font-size: 0.75rem; color: #fff; line-height: 1; margin-bottom: 20px; margin-bottom: 1.25rem; }
.entry-tags li { float: left; font-weight: 700; margin: 0 6px 6px 0; margin: 0 0.375rem 0.375rem 0; background: #2a2a2a; text-transform: uppercase; }
.entry-tags li:hover { background: #e64946; }
.entry-tags a, .entry-tags a:hover { display: block; color: #fff; padding: 10px 15px; }
.entry-tags .fa, .entry-tags .far, .entry-tags .fab {border-radius: 5px;  float: left; padding: 10px; margin-right: 6px; background: #e64946; }
.sticky { }

/***** Author Box *****/

.mh-author-box { line-height: 1.5; padding: 25px 0; margin-bottom: 25px; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; }
.mh-author-box-avatar { float: left; padding: 3px; margin-right: 25px; border: 1px solid #ebebeb; }
.mh-author-box-header { margin-bottom: 10px; display: flex; align-items: center; }
.mh-author-box-name { font-size: 16px; font-size: 1rem; font-weight: 700; }
.mh-author-box-postcount { display: flex; align-items: center; }
.mh-author-box-postcount:before { font-family: 'FontAwesome'; padding: 0 8px; content: '\f054'; font-weight: 900; font-size: 10px; margin-top: 3px; }
.author .mh-author-box { margin-top: 25px; }

/***** Loop / Archives / Search Results *****/

.mh-loop-description { padding: 20px 0; margin-top: 20px; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; }
.mh-loop-description p:last-child { margin: 0; }
.mh-loop-item {margin-left: 10px; padding-bottom: 20px; padding-bottom: 1.25rem; margin-bottom: 20px; margin-bottom: 1.25rem; border-bottom: 1px solid #ebebeb; }
.mh-loop-header { margin-bottom: 10px; margin-bottom: 0.625rem; }
.mh-loop-meta { margin-top: 5px; }
.mh-loop-excerpt { overflow: hidden; }
.mh-loop-thumb {float: left; margin-right: 10px; }
.mh-loop-thumb img {border-radius: 5px;  width: 100%; max-width: 235px; }
.mh-loop-pagination { margin-top: 20px; }


/***** Post / Attachment Navigation *****/

.mh-post-nav { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #ebebeb; }
.mh-post-nav span { display: block; font-weight: 700; line-height: 1; margin-bottom: 5px; text-transform: uppercase; overflow: hidden; }
.mh-post-nav p { font-size: 13px; font-size: 0.8125rem; overflow: hidden; }
.mh-post-nav-next { float: right; text-align: right; }
.mh-post-nav-prev img { float: left; margin-right: 15px; }
.mh-post-nav-next img { float: right; margin-left: 15px; }
.mh-post-nav-prev span:before, .mh-post-nav-next span:after { font-family: 'FontAwesome'; font-weight: 600; }
.mh-post-nav-prev span:before { content: '\f100'; margin-right: 5px; }
.mh-post-nav-next span:after { content: '\f101'; margin-left: 5px; }

/***** Footer *****/

.mh-footer { font-size: 13px; font-size: 0.8125rem; color: #fff; padding: 25px 25px 0; background: #2a2a2a; }
.mh-footer a, .mh-footer a:hover { color: #f7f7f7; }
.mh-copyright-wrap { padding: 10px 25px; border-top: 3px solid #999; background: #2a2a2a; }
.mh-copyright { font-size: 12px; font-size: 0.75rem; color: #999; }
.mh-copyright a, .mh-copyright a:hover { color: #fff; }

/***** Images / Video *****/

img { max-width: 100%; width: auto\9; /* ie8 */ height: auto; vertical-align: bottom; }
iframe, embed, object, video { max-width: 100%; }
.entry-content .alignnone { display: block; margin: 20px 0; margin: 1.25rem 0; }
.entry-content .aligncenter { display: block; margin: 20px auto; margin: 1.25rem auto; }
.entry-content .alignleft { display: inline; float: left; margin: 5px 20px 20px 0; margin: 0.3125rem 1.25rem 1.25rem 0; }
.entry-content .alignright { display: inline; float: right; margin: 5px 0 20px 20px; margin: 0.3125rem 0 1.25rem 1.25rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text { display: block; font-size: 12px; font-size: 0.75rem; font-weight: 700; line-height: 1.4; color: #000; margin-top: 5px; }
.mh-footer .wp-caption-text { color: #fff; }
.alignnone .wp-caption-text, .aligncenter .wp-caption-text, .alignleft .wp-caption-text, .alignright .wp-caption-text { margin-bottom: 0; }

/***** Gallery *****/

.gallery { margin-bottom: 20px; }
.gallery:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; margin: 0; padding: 0; }
.gallery-item { float: left; margin: 0 4px 4px 0; overflow: hidden; position: relative; }
.gallery-columns-1 .gallery-item { max-width: 100%; }
.gallery-columns-2 .gallery-item { max-width: 48%; max-width: -webkit-calc(50% - 4px); max-width: calc(50% - 4px); }
.gallery-columns-3 .gallery-item { max-width: 32%; max-width: -webkit-calc(33.3% - 4px); max-width: calc(33.3% - 4px); }
.gallery-columns-4 .gallery-item { max-width: 23%; max-width: -webkit-calc(25% - 4px); max-width: calc(25% - 4px); }
.gallery-columns-5 .gallery-item { max-width: 19%; max-width: -webkit-calc(20% - 4px); max-width: calc(20% - 4px); }
.gallery-columns-6 .gallery-item { max-width: 15%; max-width: -webkit-calc(16.7% - 4px); max-width: calc(16.7% - 4px); }
.gallery-columns-7 .gallery-item { max-width: 13%; max-width: -webkit-calc(14.28% - 4px); max-width: calc(14.28% - 4px); }
.gallery-columns-8 .gallery-item { max-width: 11%; max-width: -webkit-calc(12.5% - 4px); max-width: calc(12.5% - 4px); }
.gallery-columns-9 .gallery-item { max-width: 9%; max-width: -webkit-calc(11.1% - 4px); max-width: calc(11.1% - 4px); }
.gallery-columns-1 .gallery-item:nth-of-type(1n), .gallery-columns-2 .gallery-item:nth-of-type(2n), .gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-4 .gallery-item:nth-of-type(4n), .gallery-columns-5 .gallery-item:nth-of-type(5n), .gallery-columns-6 .gallery-item:nth-of-type(6n), .gallery-columns-7 .gallery-item:nth-of-type(7n), .gallery-columns-8 .gallery-item:nth-of-type(8n), .gallery-columns-9 .gallery-item:nth-of-type(9n) { margin-right: 0; }
.gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1), .gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1), .gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1), .gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) { clear: left; }
.gallery-caption { background-color: rgba(0, 0, 0, 0.7); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; font-size: 12px; line-height: 1.5; margin: 0; max-height: 50%; opacity: 0; padding: 6px 8px; position: absolute; bottom: 0; left: 0; text-align: left; width: 100%; }
.gallery-caption:before { content: ""; height: 100%; min-height: 49px; position: absolute; top: 0; left: 0; width: 100%; }
.gallery-item:hover .gallery-caption { opacity: 1; }
.gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption { display: none; }

/***** Tables *****/

table { width: 100%; margin-bottom: 20px; margin-bottom: 1.25rem; border-left: 1px solid #ebebeb; border-top: 1px solid #ebebeb; }
td, th { padding: 5px 10px; border-right: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; }
th { font-weight: 600; }
.mh-footer-widget table, .mh-footer-widget td, .mh-footer-widget th { border-color: rgba(255, 255, 255, 0.3); }

/***** Comments *****/

.mh-comment-list { margin-bottom: 25px; list-style: none; }
.mh-comment-list .children { margin-left: 25px; list-style: none; }
.mh-comment-body { margin-bottom: 25px; border-bottom: 1px solid #ebebeb; }
.mh-comment-footer { margin-bottom: 20px; }
.mh-comment-gravatar { float: left; }
.mh-comment-gravatar .avatar { width: 50px; height: 50px; padding: 2px; margin: 0 15px 0 0; border: 1px solid #f5f5f5; vertical-align: middle; }
.mh-comment-meta { overflow: hidden; }
.mh-comment-meta, .mh-comment-meta a { color: #2a2a2a; }
.mh-comment-meta-author { font-size: 16px; font-size: 1rem; font-weight: 700; }
.mh-comment-meta-author .fn { margin-right: 5px; }
.bypostauthor .mh-comment-meta-author:after { font-family: 'FontAwesome'; font-weight: 600; color: #e64946; content: '\f006'; }
.mh-comment-meta-date { font-size: 10px; font-size: 0.625rem; text-transform: uppercase; }
.mh-comment-meta-links { font-weight: 700; line-height: 1; text-transform: uppercase; margin-bottom: 25px; }
.mh-comment-meta-links .comment-edit-link { margin-right: 15px; }
.mh-comment-meta-links .comment-reply-link:before { font-family: 'FontAwesome'; font-weight: 900; color: #e64946; content: '\f3e5'; margin-right: 5px; }
.mh-comment-info { color: #e64946; margin: 20px 0; }
.mh-comments-pagination { margin-bottom: 20px; }
.mh-ping-list { margin-bottom: 20px; }
.mh-ping-list .mh-ping-item { padding: 10px 0; border-bottom: 1px solid #ebebeb; }
.mh-ping-list .mh-ping-item:first-child { border-top: 1px solid #ebebeb; }
.mh-ping-list .mh-ping-item .fa, .mh-ping-list .mh-ping-item .far { margin-right: 15px; }

/***** Comment Form *****/

#respond .comment-reply-title { font-size: 24px; font-size: 1.5rem; line-height: 1; margin-bottom: 20px; margin-bottom: 1.25rem; }
#respond #cancel-comment-reply-link { font-size: 12px; font-size: 0.75rem; margin-left: 10px; }
#respond #cancel-comment-reply-link:before { font-family: 'FontAwesome'; font-weight: 600; color: #e64946; content: '\f05e'; margin-right: 5px; }
#commentform p { margin-bottom: 10px; }
#commentform .form-submit { margin: 25px 0; }
.required { color: #e64946; }

/***** Forms *****/

input { font-size: 12px; padding: 5px; border: 1px solid rgba(0, 0, 0, 0.1); vertical-align: middle; background: #f5f5f5; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
input[type=text], input[type=email], input[type=tel], input[type=url] { width: 60%; }
input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover, input[type=url]:hover, textarea:hover { border: 1px solid #e64946; }
input[type=submit] { display: inline-block; min-width: 150px; font-weight: 700; color: #fff; padding: 10px 15px; background: #e64946; cursor: pointer; text-transform: uppercase; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; border: 0; -webkit-appearance: none; }
input[type=submit]:hover { background: #2a2a2a; }
textarea { width: 96%; line-height: 1.5; padding: 5px; border: 1px solid rgba(0, 0, 0, 0.1); background: #f5f5f5; }

/***** Contact Form 7 *****/

.wpcf7-form { font-size: 14px; font-size: 0.875rem; margin-bottom: 20px; }
.wpcf7-form p { margin-bottom: 15px; }
.wpcf7-text { padding: 8px; }
.wpcf7-textarea { width: 86%; padding: 10px; }
div.wpcf7-response-output { margin: 20px 0 15px; }

/***** Searchform *****/

.search-form input { font-size: 11px; line-height: 1; color: #1f1e1e; text-transform: uppercase; }
.search-form .search-submit { display: none; }
.search-form .search-field { position: relative; padding: 10px; margin: 0; border: 1px solid #ebebeb; background: #fff; cursor: pointer; -webkit-appearance: none; -webkit-border-radius: 0; border-radius: 0; }
.search-form .search-field:active, .search-form .search-field:focus { cursor: text; }
.mh-widget .search-form { display: block; margin: 0 auto; padding: 5%; background: #f5f5f5; }
.mh-widget .search-form .search-field { display: block; margin: 0 auto; width: 90%; }
.mh-footer .search-form input { width: 100%; }

/***** Multisite Registration Form *****/

#signup-content { padding: 25px; background: #fff; }
#signup-content .mu_register { width: 100%; }
.mu_register .mu_alert { display: block; margin-bottom: 25px; }
.mu_register form { max-width: 500px; }
.mu_register input { box-sizing: border-box; }
.mu_register .submit { margin-top: 25px; }
.lead-in { margin-top: 25px; }
.lead-in a { font-weight: 700; }

/***** Shortcodes *****/

.ad-label { font-size: 10px; font-size: 0.625rem; }
.mh-box { position: relative; overflow: hidden; padding: 20px 20px 0; padding: 1.25rem 1.25rem 0; margin-bottom: 20px; margin-bottom: 1.25rem; border: 1px solid #ebebeb; }

/***** Widgets *****/

.mh-widget, .mh-footer-widget { margin-bottom: 25px; overflow: hidden; }
.mh-widget-title { position: relative; font-size: 16px; font-size: 1rem; padding-bottom: 5px; margin-bottom: 20px; margin-bottom: 1.25rem; text-transform: uppercase; border-bottom: 3px solid #e64946; }
.mh-footer-widget-title { font-size: 14px; font-size: 0.875rem; color: #fff; }
.mh-footer-widget-title a { color: #fff; }

/***** Widgets Areas (Advertising) *****/

.mh-ad-spot, .mh-info-spot { display: block; padding: 10px; text-align: center; background: #f5f5f5; }
.mh-footer-widget .mh-ad-spot, .mh-footer-widget .mh-info-spot { background: rgba(255, 255, 255, 0.1); }

/***** MH Slider Widget *****/

.mh-slider-widget .flex-control-nav { bottom: 10px; }
.mh-slider-widget .flex-control-nav li { margin: 0 10px 0 0; }
.mh-slider-widget .flex-control-paging li a { width: 15px; height: 15px; border: 1px solid #2a2a2a; background: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.mh-slider-widget .flex-control-paging li a:hover { background: #f5f5f5; }
.mh-slider-widget .flex-control-paging li a.flex-active { background: #e64946; border: 1px solid #fff; }
.mh-widget-col-1 .mh-slider-widget .flex-control-nav { width: auto; top: 15px; right: 10px; bottom: auto; }
.mh-slider-item { position: relative; overflow: hidden; }
.mh-slider-normal { width: 678px; max-width: 100%; overflow: hidden; }
.mh-slider-caption { position: absolute; width: 350px; max-width: 100%; top: 0; right: 0; color: #fff; border-bottom: 3px solid #e64946; background: #2a2a2a; background: rgba(42, 42, 42, 0.8); }
.mh-slider-caption .mh-excerpt-more, .mh-slider-title { color: #fff; }
.mh-slider-content { padding: 25px; overflow: hidden; }
.mh-slider-content .mh-excerpt { margin-top: 10px; margin-top: 0.625rem; }
.mh-widget-col-1 .mh-slider-caption { position: relative; width: 100%; margin: 0; background: #2a2a2a; }

/***** MH Custom Posts Widget *****/

.mh-custom-posts-item { padding: 20px 0; border-bottom: 1px dotted #ebebeb; }
.mh-custom-posts-item:first-child { padding-top: 0; }
.mh-custom-posts-thumb { float: left; margin-right: 15px; }
.mh-custom-posts-small-title { font-weight: 700; line-height: 1.3; margin-bottom: 5px; margin-bottom: 0.3125rem; }
.mh-custom-posts-small .mh-meta { font-size: 11px; font-size: 0.6875rem; }
.mh-custom-posts-header { overflow: hidden; }
.mh-footer-widget .mh-custom-posts-item { border-color: rgba(255, 255, 255, 0.3); }
.mh-footer-widget .mh-custom-posts-small-title { font-weight: 400; }

/***** MH Posts Large Widget *****/

.mh-posts-large-item { margin-top: 20px; padding-bottom: 20px; border-bottom: 1px dotted #ebebeb; }
.mh-posts-large-item:first-child { margin-top: 0; }
.mh-posts-large-thumb { position: relative; margin-bottom: 10px; }
.mh-posts-large-thumb img { width: 100%; }
.mh-posts-large-caption { position: absolute; top: 0; font-size: 13px; font-size: 0.8125rem; font-weight: 700; color: #fff; padding: 10px 15px; background: #e64946; text-transform: uppercase; }
.mh-posts-large-title { font-size: 24px; font-size: 1.5rem; }
.mh-posts-large-excerpt { margin-top: 10px; }
.mh-widget-col-1 .mh-posts-large-title { font-size: 20px; font-size: 1.25rem; }
.mh-footer-widget .mh-posts-large-item { border-color: rgba(255, 255, 255, 0.3); }

/***** MH Posts Stacked Widget *****/

.mh-posts-stacked-wrap { float: left; width: 50%; overflow: hidden; }
.mh-posts-stacked-large, .mh-posts-stacked-small { position: relative; }
.mh-posts-stacked-large:after, .mh-posts-stacked-small:after { display: block; padding-top: 75%; content: ' '; }
.mh-posts-stacked-content { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.mh-posts-stacked-thumb img { width: 100%; }
.mh-posts-stacked-thumb:hover .mh-posts-stacked-overlay { background: none; }
.mh-posts-stacked-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.2); }
.mh-posts-stacked-overlay-small { border-left: 1px solid #fff; }
.mh-posts-stacked-overlay-last { border-top: 1px solid #fff; }
.mh-posts-stacked-item { position: absolute; bottom: 25px; left: 25px; padding-right: 25px; }
.mh-posts-stacked-title { background: #2a2a2a; background: rgba(42, 42, 42, 0.8); }
.mh-posts-stacked-title-large { font-size: 24px; padding: 5px 10px; }
.mh-posts-stacked-title-small { font-size: 14px; padding: 2px 5px; }
.mh-posts-stacked-title a, .mh-posts-stacked-title a:hover, .mh-posts-stacked-meta a, .mh-posts-stacked-meta a:hover { color: #fff; }
.mh-posts-stacked-meta { display: inline-block; font-size: 10px; font-weight: 700; color: #fff; padding: 1px 5px; margin-top: 5px; background: #e64946; text-transform: uppercase; }
.mh-posts-stacked-meta .fa, .mh-posts-stacked-meta .mh-meta-date { margin-right: 5px; }
.mh-widget-col-1 .mh-posts-stacked-wrap { float: none; width: 100%; }
.mh-widget-col-1 .mh-posts-stacked-title { font-size: 16px; padding: 2px 5px; }
.mh-widget-col-1 .mh-posts-stacked-overlay-small { border-top: 1px solid #fff; border-left: none; }
.mh-widget-col-2 .mh-posts-stacked-large, .mh-widget-col-2 .mh-posts-stacked-columns { float: none; width: 100%; }
.mh-widget-col-2 .mh-posts-stacked-overlay-small { border-top: 1px solid #fff; border-left: none; }
.mh-widget-col-2 .mh-posts-stacked-small:nth-child(odd) .mh-posts-stacked-overlay-small { border-right: 1px solid #fff; }
.mh-widget-col-2 .mh-posts-stacked-title-small { font-size: 16px; }
#mh-mobile .mh-footer-widget .mh-posts-stacked-overlay { border-color: #2a2a2a; }

/***** MH Posts Focus Widget *****/

.mh-posts-focus-full { width: 100%; }
.mh-posts-focus-full .mh-posts-focus-large { width: 65.83%; }
.mh-posts-focus-full .mh-posts-focus-small-inner { width: 31.66%; margin-left: 2.5%; }
.mh-posts-focus-inner { float: right; }
.mh-posts-focus-large { width: 65.67%; }
.mh-posts-focus-small-inner { width: 31.07%; margin-left: 3.26%; }
.mh-posts-focus-outer { margin-right: 2.5%; margin-left: 0; }
.mh-posts-focus-item { position: relative; }
.mh-posts-focus-thumb { margin-bottom: 10px; }
.mh-posts-focus-thumb img { width: 100%; }
.mh-posts-focus-title { font-size: 20px; font-size: 1.25rem; margin-bottom: 5px; }
.mh-posts-focus-excerpt { margin-top: 10px; overflow: hidden; }
.mh-posts-focus-item-small:first-child { margin-bottom: 20px; }
.mh-home-wide .mh-posts-focus-title-large { font-size: 24px; font-size: 1.5rem; }
.mh-home-wide .mh-posts-focus-title-small { font-size: 18px; font-size: 1.125rem; }
.mh-home-wide .mh-posts-focus-excerpt-small { display: none; }
.mh-widget-col-1 .mh-posts-focus-wrap, .mh-widget-col-2 .mh-posts-focus-wrap { float: none; width: 100%; margin: 0; }
.mh-widget-col-1 .mh-posts-focus-item, .mh-widget-col-2 .mh-posts-focus-item { padding-bottom: 20px; margin-top: 20px; border-bottom: 1px dotted #ebebeb; }
.mh-widget-col-1 .mh-posts-focus-item-large, .mh-widget-col-2 .mh-posts-focus-item-large { margin: 0; }
.mh-widget-col-2 .mh-posts-focus-thumb-small { float: left; max-width: 235px; margin: 0 20px 0 0; }
.mh-widget-col-2 .mh-posts-focus-title-large { font-size: 24px; font-size: 1.5rem; }
#mh-mobile .mh-footer-widget .mh-posts-focus-item { border-color: rgba(255, 255, 255, 0.3); }

/***** MH Tabbed Widget *****/

.mh-tabbed-widget, .mh-tabbed-widget a { color: #000; }
.mh-tabbed-widget a:hover { color: #e64946; }
.mh-tabbed-widget .tagcloud a { color: #fff; }
.mh-tab-buttons { border-bottom: 3px solid #e64946; }
.mh-tab-button { display: block; float: left; width: 33.33%; line-height: 2; padding: 5px 0; background: #f5f5f5; cursor: pointer; text-align: center; -webkit-transition: 0.25s ease-out; -moz-transition: 0.25s ease-out; transition: 0.25s ease-out; }
.mh-tab-button.active, .mh-tab-button.active:hover { color: #fff; background: #e64946; }
.mh-tab-button span { padding: 0 15px; font-size: 24px; }
.mh-tab-content { display: none; padding: 25px; background: #f5f5f5; }
.mh-tab-posts { display: block; }
.mh-tab-post-item { padding-bottom: 5px; margin-top: 5px; border-bottom: 1px dotted #e5e5e5; }
.mh-tab-post-item:first-child, .mh-tab-comment-item:first-child { margin-top: 0; }
.mh-tab-comment-item { margin-top: 25px; }
.mh-tab-comment-avatar { float: left; display: block; margin: 0 10px 0 0; }
.mh-tab-comment-author { font-weight: 700; text-transform: uppercase; }
.mh-tab-comment-excerpt { display: block; padding: 25px; margin-top: 10px; background: #fff; border-radius: 25px; font-style: italic; }
.mh-footer-widget .mh-tabbed-widget, .mh-footer-widget .mh-tabbed-widget a { color: #fff; }
.mh-footer-widget .mh-tab-button, .mh-footer-widget .mh-tab-content	{ background: rgba(255, 255, 255, 0.1); }
.mh-footer-widget .mh-tab-post-item { border-color: rgba(255, 255, 255, 0.3); }
.mh-footer-widget .mh-tab-button.active { background: #e64946; }
.mh-footer-widget .mh-tab-comment-excerpt { background: #2a2a2a; }

/***** WordPress Core Widgets *****/

.widget_archive li, .widget_categories li, .widget_pages li a, .widget_meta li, .widget_nav_menu .menu > li, .widget_rss li { border-bottom: 1px dotted #ebebeb; }
.widget_archive li a, .widget_categories li a, .widget_pages li a, .widget_meta li a, .widget_nav_menu li a, .widget_rss li { display: block; padding: 5px 0; }
.widget_archive li:first-child a, .widget_categories li:first-child a, .widget_pages li:first-child a, .widget_meta li:first-child a, .widget_nav_menu li:first-child a, .widget_rss li:first-child { padding-top: 0; }
.widget_pages .children li a { padding: 5px 0; }
.widget_nav_menu .sub-menu li { border-top: 1px dotted #ebebeb; }
.widget_nav_menu .sub-menu li:first-child a { padding-top: 5px; }
.widget_rss a { font-weight: 700; }
.widget_rss .rss-date { margin-right: 5px; }
.widget_rss .rss-date, .widget_rss cite { font-size: 13px; font-size: 0.8125rem; color: #979797; }
.widget_rss .rssSummary { margin-top: 5px; }
.mh-footer-widget.widget_rss a { font-weight: 400; }
.mh-footer-widget.widget_archive li, .mh-footer-widget.widget_categories li, .mh-footer-widget.widget_pages li a, .mh-footer-widget.widget_meta li, .mh-footer-widget.widget_nav_menu .menu > li, .mh-footer-widget.widget_nav_menu .sub-menu li, .mh-footer-widget.widget_rss li { border-color: rgba(255, 255, 255, 0.3); }

/***** WP Text Widget *****/

.textwidget p { margin-top: 20px; }
.textwidget p:first-child { margin-top: 0; }
.textwidget ul { list-style: square; }
.textwidget ol { list-style: decimal; }
.textwidget ul, .textwidget ol { margin: 0 0 20px 15px; }
.textwidget ul ul, .textwidget ol ol { margin: 0 0 0 15px; }

/***** WP Calendar Widget *****/

#wp-calendar caption { text-align: left; padding: 10px; margin-bottom: 1px; background: #f5f5f5; }
#wp-calendar th, #wp-calendar td { padding: 5px 10px; text-align: center; }
#wp-calendar th { font-weight: 300; }
#wp-calendar a { font-weight: 700; }
#wp-calendar #prev { text-align: left; }
.mh-footer-widget #wp-calendar caption { background: rgba(255, 255, 255, 0.1); }

/***** WP Tag Cloud Widget *****/

.tagcloud a { display: inline-block; font-weight: 700; color: #fff; padding: 5px 10px; margin: 0 4px 8px 0; white-space: nowrap; text-transform: uppercase; }
.mh-widget .tagcloud a { background: #2a2a2a; }
.mh-footer-widget .tagcloud a { background: #000; }
.tagcloud a:hover, .mh-widget .tagcloud a:hover, .mh-footer-widget .tagcloud a:hover { color: #fff; background: #e64946; }

/***** WP Recent Posts Widget / WP Recent Comments Widget *****/

.widget_recent_entries li, .recentcomments { display: block; padding: 5px 0; border-bottom: 1px dotted #e5e5e5; }
.widget_recent_entries li:first-child, .recentcomments:first-child { padding-top: 0; }
.widget_recent_entries .post-date { display: block; font-size: 11px; font-size: 0.6875rem; color: #979797; margin-bottom: 5px; }
.mh-footer-widget.widget_recent_entries li, .mh-footer-widget .recentcomments { border-color: rgba(255, 255, 255, 0.3); }

/***** Gutenberg - Core Blocks *****/

.wp-block-image { display: block; margin: 20px 0; margin: 1.25rem 0; }
.wp-block-image .aligncenter { text-align: center; }
.wp-block-image figcaption, .wp-block-audio figcaption { color: #000; }
.wp-block-image figcaption, .wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image.is-resized > figcaption, .wp-block-audio figcaption { display: block; font-size: 12px; font-size: 0.75rem; font-weight: 700; line-height: 1.4; margin-top: 5px; }
.wp-block-audio audio { width: 100%; }
.wp-block-gallery, .entry-content .wp-block-gallery { display: flex; margin: 0 -8px 20px; list-style-type: none; }

/***** Media Queries *****/

@media screen and (max-width: 1475px) {
	.mh-container { width: 95%; }
	.mh-container-inner { width: 100%; }
}
@media screen and (max-width: 1120px) {
	.mh-main-nav li { font-size: 12px; }
	.mh-main-nav li a { padding: 10px 15px; }
}
@media screen and (max-width: 900px) {
	.mh-container-outer { margin: 0 auto; }
	#mh-mobile .mh-container { width: 100%; }
	.mh-wrapper, .mh-site-logo { padding: 13px; }
	.mh-footer { padding: 20px 20px 0 }
	.mh-copyright { text-align: center; }
	.mh-comment-list .children { margin-left: 15px; }
	.mh-widget, .mh-footer-widget { margin-bottom: 20px; }
	#mh-mobile .mh-footer-4-cols { width: 31.66%; }
	.mh-footer-4 { display: none; }
	.mh-slider-normal { width: 100%; }
	.mh-slider-widget .flex-control-nav { width: auto; top: 15px; right: 10px; bottom: auto; }
	#mh-mobile .mh-slider-caption { position: relative; width: 100%; top: auto; bottom: 0; background: rgba(42, 42, 42, 1); }
	.mh-widget-col-1 .mh-custom-posts-small-title { font-size: 13px; font-size: 0.8125rem; }
	.mh-meta-comments { display: none; }
	.mh-posts-stacked-item { bottom: 20px; left: 20px; padding-right: 20px; }
	#mh-mobile .mh-posts-stacked-title-small, .mh-widget-col-1 .mh-posts-stacked-title-large { font-size: 13px; padding: 2px 5px; }
}
@media screen and (max-width: 767px) {
	.js .slicknav_menu { display: block; }
	.js .mh-main-nav { display: none; }
	.mh-custom-header, .mh-content, .mh-sidebar, .mh-right-sb #main-content, .mh-left-sb #main-content, #mh-mobile .mh-footer-area { float: none; width: 100%; margin: 0; }
	.mh-site-logo { text-align: center; }
	.mh-header-title, .entry-title { font-size: 24px; font-size: 1.5rem; }
	.mh-sidebar { margin-top: 20px; }
	.mh-home-sidebar { margin-top: 0; }
	.entry-meta { padding: 5px 0; }
	#commentform .form-submit { margin: 25px 0 0; }
	.mh-footer-4 { display: block; }
	.mh-slider-item img { width: 100%; }
	#mh-mobile .mh-custom-posts-small-title { font-size: 14px; font-size: 0.875rem; }
	#mh-mobile .mh-posts-stacked-large, #mh-mobile .mh-posts-stacked-columns { float: none; width: 100%; }
	#mh-mobile .mh-posts-stacked-small { float: left; width: 50%; }
	#mh-mobile .mh-posts-stacked-overlay-small { border-top: 1px solid #fff; border-left: none; }
	.mh-posts-stacked-small:nth-child(odd) .mh-posts-stacked-overlay-small { border-right: 1px solid #fff; }
	#mh-mobile .mh-posts-stacked-title-large { font-size: 24px; padding: 5px 10px; }
	#mh-mobile .mh-posts-stacked-title-small { font-size: 16px; }
	#mh-mobile .mh-posts-focus-wrap { float: none; width: 100%; margin: 0; }
	#mh-mobile .mh-posts-focus-title-small { font-size: 20px; font-size: 1.25rem; }
	#mh-mobile .mh-posts-focus-item { padding-bottom: 20px; margin-top: 20px; border-bottom: 1px dotted #ebebeb; }
	#mh-mobile .mh-posts-focus-item-large { margin: 0; }
	.mh-posts-focus-thumb-small { float: left; max-width: 235px; margin: 0 20px 0 0; }
	#mh-mobile .mh-posts-focus-excerpt-small { display: block; }
	#mh-mobile .mh-posts-focus-title-large { font-size: 24px; font-size: 1.5rem; }
}
@media screen and (max-width: 620px) {
	input[type=text], input[type=email], input[type=tel], input[type=url] { width: 88%; }
	[class*='mh-col-'] { float: none; width: 100%; margin: 0; }
	.entry-meta-categories, .entry-meta-comments { display: none; }
	.mh-author-box { text-align: center; }
	.mh-author-box-avatar { float: none; display: inline-block; margin: 0 0 20px; }
	.entry-content ul, .entry-content ol { margin: 0 0 20px 20px; }
	.entry-content ul ul, .entry-content ol ol { margin: 0 0 0 20px; }
	.single-post .mh-post-nav-next { margin-top: 25px; }
	#mh-mobile .mh-slider-title, .mh-posts-large-title, #mh-mobile .mh-posts-focus-title-large { font-size: 20px; font-size: 1.25rem; }
	.mh-slider-widget .flex-control-nav { display: none; }
	.mh-loop-thumb, #mh-mobile .mh-posts-focus-thumb-small { max-width: 80px; }
	.mh-loop-title, #mh-mobile .mh-posts-focus-title-small { font-size: 14px; font-size: 0.875rem; }
	.mh-loop-meta, .mh-custom-posts-content .mh-meta, .mh-posts-focus-meta-small { display: block; font-size: 11px; font-size: 0.6875rem; }
	.mh-loop-excerpt, .mh-custom-posts-content .mh-excerpt, .mh-posts-list-excerpt, #mh-mobile .mh-posts-focus-excerpt-small, .mh-posts-focus-caption-small  { display: none; }
	.mh-posts-stacked-item { bottom: 10px; left: 10px; padding-right: 10px; }
	#mh-mobile .mh-posts-stacked-title-small { font-size: 14px; }
	#mh-mobile .mh-posts-focus-thumb-small { margin: 0 15px 0 0; }
}
@media only screen and (max-width: 420px) {
	.mh-comment-list .children { margin: 0; }
	.mh-comment-body { text-align: center; }
	.mh-comment-gravatar { float: none; }
	.mh-comment-gravatar .avatar { width: 80px; height: 80px; margin: 0 auto 10px; }
	.mh-comment-meta-author .fn { margin: 0; }
}
@media only screen and (max-width: 360px) {
	#mh-mobile .mh-posts-stacked-wrap { float: none; width: 100%; }
	#mh-mobile .mh-posts-stacked-overlay { border-right: none; }
	#mh-mobile .mh-posts-stacked-title { font-size: 16px; padding: 2px 5px; }
}