﻿    /* =========================================
       SECTION 1: MAIN LAYOUT & RESETS
       ========================================= */
    .main-container { display: flex; align-items: flex-start; gap: 30px; max-width: 1280px; margin: 20px auto; padding: 0 15px; }
    #content { overflow: visible !important; }
    .main-content { flex: 1; min-width: 0; }
    .sidebar-sticky { width: 320px; position: -webkit-sticky; position: sticky; top: 60px; }
    @media (max-width: 900px) { .main-container { flex-direction: column; } .main-content, .sidebar-sticky { width: 100%; } }

    /* Basic Reset */
    .main-content .box { border: none; padding: 0; box-shadow: none; background: none; margin-bottom: 0; }
    .main-content .media { border: none; padding: 0; }
    .main-content .wrap { padding: 0; }

    /* Header */
    .head { margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; }
    .head .wrap { padding: 0 15px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
    .head .wrap strong { flex-shrink: 0; margin-right: auto; }
    .head .wrap form { margin: 0; flex-shrink: 0; }


    /* =========================================
       SECTION 2: BEAT LIST ITEMS
       ========================================= */
    .list_item { background: #fff; border: 1px solid #eee; border-radius: 8px; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 10px; }
    .list_item:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); background-color: #f8f9fa; }
    .list_item.playing { border-color: #009be3; background-color: #f0f8ff; }
    
    .list_item .track-artwork-container { position: relative; display: block; width: 50px; height: 50px; flex-shrink: 0; }
    .list_item .list-artwork { border-radius: 4px; display: block; width: 100%; height: 100%; }
    
    .list_item .play-icon-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); border-radius: 4px;
        opacity: 0; transition: opacity 0.2s;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
        background-position: center; background-repeat: no-repeat;
    }
    .list_item:hover .play-icon-overlay { opacity: 1; }
    .list_item.playing .play-icon-overlay {
        opacity: 1;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>');
    }
    /* Find this block in your CSS */
/* 1. THE TITLE */
.list_item .track-title { 
    font-size: 15px; 
    font-weight: 600; 
    color: #000;
    
    /* FORCE BLOCK DISPLAY SO MARGINS WORK */
    display: block; 
    
    /* TIGHTEN THE TEXT LINES */
    line-height: 1.3; 
    
    /* REMOVE SPACE BELOW TITLE */
    margin-bottom: 0px; 
    padding-bottom: 0px;
}

/* 2. THE ARTIST NAME (Below the title) */
.list_item .track-artist-list { 
    font-size: 13px; 
    color: #777;
    
    /* PULL IT UP CLOSER */
    margin-top: 2px; /* Small number = closer. Use -2px to force it even closer */
    line-height: 1.2;
}
    .list_item .track-genre { font-size: 12px; background: #f0f0f0; padding: 4px 10px; border-radius: 12px; color: #555; text-decoration: none; }
    .list_item td { vertical-align: middle; }
    .main-content .item_media > .wrap { padding: 0 15px; }


    /* =========================================
       SECTION 3: SIDEBAR PLAYER (THE FIXES)
       ========================================= */
    .player-box {
        /* MATCHED IMAGES THEME: 1e1e1e */
        background-color: #1e1e1e;
        border-radius: 12px;
        padding: 25px 20px;
        border: 1px solid #333;
        box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
        color: white;
    }

    /* Artwork */
    #player-artwork-main { 
        width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; margin-bottom: 15px; 
        background-color: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    }

    /* Title Info */
    .player-info { text-align: center; }
    .player-info a { text-decoration: none; color: inherit; display: block; }
    
    #player-title-main { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
    #player-artist-main { font-size: 0.9rem; color: #aaa; margin: 4px 0 20px 0; }
    .player-info a:hover #player-title-main, .player-info a:hover #player-artist-main { color: #007bff; text-decoration: underline; }

    /* --- Progress Bar --- */
    .jp-audio .jp-progress { height: 6px; background-color: #333; cursor: pointer; border-radius: 3px; overflow: hidden; }
    .jp-audio .jp-play-bar { background-color: #007bff; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); }
    .jp-audio .jp-time-holder { display: flex; justify-content: space-between; font-size: 0.75rem; color: #888; margin-top: 8px; font-weight: 600; }

    /* --- Controls Container (THE SHIFT FIX) --- */
    .jp-audio .jp-controls-holder { display: flex; flex-direction: column; gap: 20px; margin-top: 15px; }

    #jp_container_main .jp-controls {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0; /* Remove gap, we use fixed widths instead */
        padding: 0; margin: 0; list-style: none; width: 100%;
    }
    
    /* LOCKING BUTTON WIDTHS:
       We force the <li> items to have fixed widths.
       This prevents shifting when the middle button toggles.
    */
    #jp_container_main .jp-controls li { 
        display: flex; 
        align-items: center; 
        justify-content: center;
        height: 50px; /* Lock height */
    }
    
    /* Prev/Next container width */
    #jp_container_main .jp-controls li:nth-child(1), /* Prev */
    #jp_container_main .jp-controls li:nth-child(4)  /* Next */
    {
        width: 60px; 
    }

    /* Play/Pause container width */
    #jp_container_main .jp-controls li:nth-child(2), /* Play */
    #jp_container_main .jp-controls li:nth-child(3)  /* Pause */
    {
        width: 60px; 
        /* Important: Play and Pause share this spot. 
           We rely on display:none to swap them, but the parent UL 
           won't shrink because Prev/Next are locked in place. */
    }

    /* Icons */
    #jp_container_main .jp-controls a {
        display: block; text-indent: -9999px;
        background-repeat: no-repeat; background-position: center; background-size: contain;
        transition: transform 0.2s, opacity 0.2s; opacity: 0.9; cursor: pointer;
    }
    #jp_container_main .jp-controls a:hover { opacity: 1; transform: scale(1.1); }

    .jp-previous { width: 30px; height: 30px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>'); }
    .jp-next { width: 30px; height: 30px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 6h2v12h-2zm-3.5 6l-8.5 6V6z"/></svg>'); }
    
    /* Play/Pause are same size so they swap perfectly */
    .jp-play { width: 50px; height: 50px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>'); }
    .jp-pause { width: 50px; height: 50px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'); }
    
    .jp-controls .jp-pause { display: none; }
    .jp-state-playing .jp-controls .jp-play { display: none; }
    .jp-state-playing .jp-controls .jp-pause { display: block; }

    /* --- Volume Controls --- */
    .jp-audio .jp-volume-controls { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 10px; }
    .jp-audio .jp-mute, .jp-audio .jp-unmute { width: 20px; height: 20px; text-indent: -9999px; cursor: pointer; background-size: contain; }
    .jp-audio .jp-mute { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>'); }
    .jp-audio .jp-unmute { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>'); }
    .jp-state-muted .jp-mute { display: none; }
    .jp-state-muted .jp-unmute { display: block; }
    .jp-audio .jp-volume-bar { flex-grow: 1; height: 4px; background-color: #333; border-radius: 2px; cursor: pointer; }
    .jp-audio .jp-volume-bar-value { background-color: #aaa; height: 100%; border-radius: 2px; }


/* =========================================
   SECTION 4: SIDEBAR PLAYER (NO SHIFT FIX)
   ========================================= */
.player-box {
    /* STRICT BACKGROUND REQUEST: #1e1e1e */
    background-color: #1e1e1e;
    border-radius: 12px;
    padding: 25px 20px;
    border: 1px solid #333;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5); 
    color: white;
}

/* Artwork */
#player-artwork-main { 
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; margin-bottom: 15px; 
    background-color: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Title Info */
.player-info { text-align: center; }
.player-info a { text-decoration: none; color: inherit; display: block; }

#player-title-main { font-size: 1.2rem; font-weight: 700; color: #fff; margin: 0; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
#player-artist-main { font-size: 0.9rem; color: #aaa; margin: 4px 0 20px 0; }
.player-info a:hover #player-title-main, .player-info a:hover #player-artist-main { color: #007bff; text-decoration: underline; }

/* --- Progress Bar --- */
.jp-audio .jp-progress { height: 6px; background-color: #333; cursor: pointer; border-radius: 3px; overflow: hidden; }
.jp-audio .jp-play-bar { background-color: #007bff; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); }
.jp-audio .jp-time-holder { display: flex; justify-content: space-between; font-size: 0.75rem; color: #888; margin-top: 8px; font-weight: 600; }

/* --- Controls Container --- */
.jp-audio .jp-controls-holder { display: flex; flex-direction: column; gap: 20px; margin-top: 15px; }

/* --- THE "TABLE" FIX FOR BUTTONS --- */
#jp_container_main .jp-controls {
    display: flex !important;
    align-items: center;
    justify-content: center; /* Center the whole group */
    gap: 10px; /* TIGHTER SPACING (Was 25px) */
    padding: 0; margin: 0; list-style: none; width: 100%;
}

/* Lock the list items to fixed sizes like table cells */
#jp_container_main .jp-controls li { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    /* This ensures they occupy the same space regardless of icon size */
    width: 50px; 
    height: 50px;
}




/* DEFAULT STATE (PAUSED): Show Play LI (2nd), Hide Pause LI (3rd) */
#jp_container_main .jp-controls li:nth-child(2) { display: flex; }
#jp_container_main .jp-controls li:nth-child(3) { display: none; }

/* PLAYING STATE: Hide Play LI (2nd), Show Pause LI (3rd) */
#jp_container_main.jp-state-playing .jp-controls li:nth-child(2) { display: none; }
#jp_container_main.jp-state-playing .jp-controls li:nth-child(3) { display: flex; }


/* Icons */
#jp_container_main .jp-controls a {
    display: block; text-indent: -9999px;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    transition: transform 0.2s, opacity 0.2s; opacity: 0.9; cursor: pointer;
}
#jp_container_main .jp-controls a:hover { opacity: 1; transform: scale(1.1); }

/* Updated Button Sizes (Slightly smaller since we moved them closer) */
.jp-previous { width: 28px; height: 28px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>'); }
.jp-next { width: 28px; height: 28px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16 6h2v12h-2zm-3.5 6l-8.5 6V6z"/></svg>'); }

.jp-play { width: 45px; height: 45px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>'); }
.jp-pause { width: 45px; height: 45px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>'); }


/* --- Volume Controls --- */
.jp-audio .jp-volume-controls { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 10px; }
.jp-audio .jp-mute, .jp-audio .jp-unmute { width: 20px; height: 20px; text-indent: -9999px; cursor: pointer; background-size: contain; }
.jp-audio .jp-mute { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23888"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>'); }
.jp-audio .jp-unmute { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>'); }
.jp-state-muted .jp-mute { display: none; }
.jp-state-muted .jp-unmute { display: block; }
.jp-audio .jp-volume-bar { flex-grow: 1; height: 4px; background-color: #333; border-radius: 2px; cursor: pointer; }
.jp-audio .jp-volume-bar-value { background-color: #aaa; height: 100%; border-radius: 2px; }

/* --- Sidebar Purchase Buttons --- */
#sidebar-purchase-options { display: none; flex-direction: column; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #333; }
.license-button { display: flex; justify-content: space-between; align-items: center; background-color: #2a2a2a; padding: 12px 15px; border-radius: 6px; text-decoration: none; transition: background 0.2s; border: 1px solid #444; }
.license-button:hover { background-color: #333; border-color: #007bff; }
.license-button span { color: #ffffff !important; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; }
.license-button.sold { background-color: #333; cursor: not-allowed; opacity: 0.6; justify-content: center; }
.license-button.sold span { color: #e74c3c !important; }


    /* =========================================
       SECTION 5: FILTERS & UTILITIES
       ========================================= */
    .filter-container { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; padding: 0 15px 25px 15px; }
    .filter-container select {
        flex: 1; min-width: 160px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; background-color: #fff;
        font-size: 14px; height: 38px; appearance: none; -webkit-appearance: none;
        background-image: url('data:image/svg+xml;utf8,<svg fill="%23333333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
        background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 40px;
    }
    .btn-reset { display: inline-flex; align-items: center; padding: 0 15px; height: 38px; background: #f4f4f4; border: 1px solid #ccc; border-radius: 6px; text-decoration: none; color: #333; font-weight: 500; font-size: 14px; white-space: nowrap; }
    .btn-reset:hover { background: #e9e9e9; color: #111; }


    /* =========================================
       SECTION 6: PROMO PAGE
       ========================================= */
    #cb-beat-promo-wrapper { width: 100%; padding-top: 20px; font-size: 18px; color: #000000 !important; font-family: inherit; line-height: 1.7; }
    #cb-beat-promo-wrapper p, #cb-beat-promo-wrapper li { color: #000000; font-size: 18px; }

    .cb-beat-section { padding: 4rem 0; border-bottom: 1px solid #eee; }
    .cb-beat-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; text-align: center; }

    .cb-beat-h1 { font-size: 2.5rem; margin-bottom: 1.5rem; color: #000000; font-weight: 800; line-height: 1.2; }
    .cb-beat-h2 { font-size: 2rem; margin-bottom: 2.5rem; color: #000000; text-transform: uppercase; letter-spacing: 1px; }
    .cb-beat-h3 { font-size: 1.4rem; margin-bottom: 0.8rem; font-weight: bold; color: #000000; }
    .cb-beat-subhead { font-size: 1.3rem; max-width: 750px; margin: 0 auto 2rem auto; }

    .cb-beat-cta-btn { display: inline-block; background-color: #000000; color: #ffffff !important; padding: 16px 38px; text-decoration: none; font-weight: bold; text-transform: uppercase; border-radius: 5px; transition: background 0.3s ease, transform 0.2s ease; font-size: 18px; }
    .cb-beat-cta-btn:hover { background-color: #333333; transform: translateY(-2px); color: #fff !important; }

    .cb-beat-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 800px; margin: 2.5rem auto 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 8px; }
    .cb-beat-video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

    .cb-beat-card { background: #fff; border: 2px solid #000; border-radius: 10px; padding: 2.5rem; max-width: 550px; margin: 0 auto; box-shadow: 5px 5px 0px #000000; }
    .cb-beat-price { font-size: 3rem; font-weight: 800; margin-bottom: 1.5rem; }
    .cb-beat-price span { font-size: 1.1rem; font-weight: normal; color: #555; }

    .cb-beat-list { list-style: none; padding: 0; margin-bottom: 2.5rem; text-align: left; }
    .cb-beat-list li { padding: 12px 0; border-bottom: 1px solid #eee; }
    .cb-beat-list li:before { content: "✓"; margin-right: 12px; font-weight: bold; }
    
    .cb-beat-btn-full { width: 100%; text-align: center; box-sizing: border-box; }
    .cb-beat-steps-list { text-align: left; max-width: 850px; margin: 0 auto; padding-left: 20px; }
    .cb-beat-steps-list li { margin-bottom: 15px; font-weight: 500; }

    .cb-beat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; text-align: left; }
    .cb-beat-feature { padding: 25px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; }
    .cb-beat-faq-item { text-align: left; max-width: 850px; margin: 0 auto 2.5rem auto; border-bottom: 1px solid #ddd; padding-bottom: 1.5rem; }


/* --- Modernized Footer Styles (for pages WITHOUT a fixed sidebar) --- */
.footer2 {
    background-color: #1e1e1e;
    color: #ccc;
    padding: 2em;
    box-sizing: border-box; /* Ensures padding doesn't break the layout */
}

.footer2 .row3 {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
}

.col4 {
    box-sizing: border-box; 
 
    
    /* 33.33% minus (Total Gap Space / 3) */
    width: calc(33.33% - 1.33em);
}


.footer-heading {
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 1em;
    border-bottom: 1px solid #444;
    padding-bottom: 1.5em;
    padding-right: 0.5em;
    padding-left: 0.5em;
}

.footer-link {
    display: flex;
    align-items: center;
    color: #ccc;
    text-decoration: none;
    margin-bottom: 0.75em;
    transition: color 0.2s ease;
}

.footer-link svg {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    stroke: #999; /* Darker icon color */
}

.footer-link:hover {
    color: #ffc107; /* Your theme's yellow color */
}
.footer-link:hover svg {
    stroke: #ffc107;
}

/* --- Special "Subscription" Call-to-Action --- */
.footer-cta {
    background-color: #2a2a2e;
    padding: 1.5em;
    border-radius: 8px;
}

.footer-heading-yellow {
    color: #ffc107; /* Yellow */
    font-size: 1.4em; /* Slightly bigger */
    font-weight: bold;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #555;
    padding-bottom: 0.5em;
}

.footer-cta-link {
    display: block;
    color: #ffc107;
    font-weight: bold;
    margin-bottom: 1em;
    text-decoration: none;
}
.footer-cta-link:hover {
    text-decoration: underline;
}

.footer-subheading {
    color: #FFFFFF; /* Yellow */
    font-size: 0.9em;
    line-height: 1.5;
    margin-bottom: 1em;
}

/* --- Responsive Stacking for Footer on Mobile --- */
/* --- Responsive Stacking for Footer on Mobile --- */
@media (max-width: 768px) {
    .footer2 .row3 {
        flex-direction: column; /* Stack the columns vertically */
    }

    /* --- ADD THIS BLOCK BELOW --- */
    .col4 {
        width: 100%; /* Force the columns to fill the screen width */
        padding-top: 20px;
    }
}


