/* ==========================================================================
   THEME CONTAINER BREAKPOINTS & FLUID WIDTH TRACKS
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GIANT CONTRAST BOUNDARY (4K ULTRA-WIDE MONITORS & UP)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 2560px) {
    .container {
        width: 80%;                 /* Tighter fluid width layout for massive spaces */
        max-width: 1600px;          /* Expanded ceiling so imagery/columns look majestic on 4K */
        margin: 0 auto;
        padding: 0;
        position: relative;
    }

   img.custom-logo {max-width: 70%; }
}

/* --------------------------------------------------------------------------
   2. STANDARD DESKTOP BOUNDARY (1080p / 1920px WIDE DISPLAYS)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 2559px) and (min-width: 1080px) {
    .container {
        width: 85%;                 /* Smooth fluid scaling layout track */
        max-width: 1200px;          /* Industry gold standard ceiling for 1920x1080 screens */
        margin: 0 auto;
        padding: 0;
        position: relative;
    }
   
   img.custom-logo {max-width: 70%; }
}

/* --------------------------------------------------------------------------
   3. TABLET & LAPTOP BOUNDARY (LANDSCAPE TABLETS / MEDIUM VIEWPORTS)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1079px) and (min-width: 769px) {
    .container {
        width: 90%;                 /* Expands wider on smaller screens to maximize content space */
        max-width: 960px;           /* Comfortable bounds for smaller laptop dimensions */
        margin: 0 auto;
        padding: 0;
        position: relative;
    }
}

/* --------------------------------------------------------------------------
   4. MOBILE DEVICE BOUNDARY (VERTICAL PORTRAITS / SMARTPHONES)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    .container {
        width: 100%;                /* Take up absolute full structural width on phone screens */
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;            /* Swaps width percentage out for crisp interior safe gutters */
        position: relative;
        box-sizing: border-box;
    }
}