/* ============================================================
   1. BASE / GENERAL RESET (Shared across all devices)
   ============================================================ */
.header,
.site-header,
.header-logo,
.logo,
.site-branding {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.header-logo img,
.site-branding img,
.logo img,
header img,
img.custom-logo {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}


/* ============================================================
   2. MOBILE CONTROLS (Phones up to 600px wide)
   ============================================================ */
@media screen and (max-width: 600px) {
    .header-logo,
    .site-branding,
    .logo {
        text-align: center !important; /* Alignment: center, left, or right */
    }

    .header-logo img,
    .site-branding img,
    .logo img,
    header img,
    img.custom-logo {
        display: block !important;
        width: 320px !important;       /* Adjust mobile size */
        max-width: 90vw !important;
        margin: 15px auto !important;  /* Top/Bottom spacing */
        position: relative !important;
        right: 0px !important;         /* Horizontal shift for mobile */
    }
}


/* ============================================================
   3. TABLET CONTROLS (iPads / Tablets between 601px and 1024px)
   ============================================================ */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .header-logo,
    .site-branding,
    .logo {
        text-align: center !important;
    }

    .header-logo img,
    .site-branding img,
    .logo img,
    header img,
    img.custom-logo {
        display: inline-block !important;
        width: 440px !important;       /* Adjust tablet size */
        max-width: 85vw !important;
        margin: 20px auto 10px auto !important;
        position: relative !important;
        right: -100px !important;        /* Nudge slightly left on tablet */
    }
}


/* ============================================================
   4. DESKTOP CONTROLS (Laptops / Screens 1025px and wider)
   ============================================================ */
@media screen and (min-width: 1025px) {
    .header-logo,
    .site-branding,
    .logo {
        position: relative !important;
        text-align: center !important;
    }

    .header-logo img,
    .site-branding img,
    .logo img,
    header img,
    img.custom-logo {
        display: inline-block !important;
        width: 520px !important;       /* Full desktop width */
        max-width: 92vw !important;
        margin: 25px auto 15px auto !important;
        position: relative !important;
        right: 120px !important;       /* Aggressive left shift for desktop */
    }
}