#full_width-879468154 ul.site-menu{
border-radius:10px;
}

/* Mobile Media Query - Applies to screens smaller than 768px (Tablets and Phones) */
@media only screen and (max-width: 768px) {

    /* 1. Reset the Row Container */
    /* Changes the row from a horizontal layout to a vertical column */
    .template-row.twentyfive-seventyfive,
    .template-row.forty-sixty {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
    }

    /* 2. Force Columns to Full Width */
    /* This overrides the desktop width percentages (25%, 75%, 40%, 60%) */
    .template-column.quarter,
    .template-column.threequarter,
    .template-column.forty,
    .template-column.sixty {
        width: 100% !important; /* !important used to override existing framework specificities */
        float: none !important;
        display: block;
        padding: 10px 0; /* Adds spacing between the stacked elements */
        box-sizing: border-box;
    }

    /* 3. Responsive Images / Logo */
    /* Ensures the logo scales down and centers */
    .template-column img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto; /* Centers the logo */
max-width:66vw !important;
    }

    /* 4. Menu Toggle Adjustment */
    /* Centers the hamburger menu icon */
    .layout-widget.menu-widget {
        text-align: center;
        width: 100%;
    }

    /* 5. User Panel Adjustments */
    /* Ensures the user profile section doesn't overflow */
    #u\|0\| { 
        /* Escaping pipe character used in ID */
        width: 100%;
    }

    #user_panel_widget {
        width: 100%;
        max-width: 100%;
    }

    .panel-user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    /* Makes user links easier to tap */
    #panel_links a {
        display: inline-block;
        padding: 8px 12px;
        margin: 2px;
    }
}