/*#########################################################################*/
/*                                                                         */
/*          RESPONSIVE CSS MEDIA QUERY TEMPLATE                            */
/*          Coverage: Desktop → Tablet → Mobile                            */
/*          Strategy: Desktop-first (max-width breakpoints)                */
/*                                                                         */
/*#########################################################################*/

/*
    BREAKPOINT REFERENCE MAP
    ─────────────────────────────────────────────────────────────────────
    DESKTOP
      2560px  →  4K / Ultra-wide monitors
      1920px  →  Full HD wide monitors
      1600px  →  Large desktop screens
      1536px  →  High-res laptops (e.g. Surface Book)
      1440px  →  MacBook Pro / large laptops
      1366px  →  Standard HD laptops
      1280px  →  Small desktops / older laptops
      1200px  →  Bootstrap xl breakpoint
      1080px  →  Small desktop / large landscape tablet

    TABLET
       962px  →  iPad Pro 11" landscape
       820px  →  iPad Air landscape
       810px  →  iPad 9th gen landscape
       800px  →  Generic tablet landscape
       768px  →  iPad portrait / Bootstrap md
       601px  →  Small tablet / large phablet

    MOBILE
       480px  →  Large mobile landscape
       414px  →  iPhone Plus / Max portrait
       412px  →  Android large (Pixel, Samsung)
       393px  →  iPhone 14 / 15 Pro portrait
       390px  →  iPhone 12 / 13 / 14 portrait
       375px  →  iPhone SE 2nd gen / older iPhones
       360px  →  Common Android (Samsung S series)
       320px  →  iPhone SE 1st gen / very small phones
    ─────────────────────────────────────────────────────────────────────
*/


/*=== Start Responsive Configurations ===*/


/*=========================================================================*/
/*=| ██████████████  DESKTOP SCREEN RESOLUTIONS  ██████████████ |=*/
/*=========================================================================*/


/*-------------------------------------------------------------------------*/
/* 4K / Ultra-wide — max-width: 2560px                                     */
/* Targets: 4K monitors, ultra-wide screens, large TV displays             */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 2560px) {

    /* Add your 2560px styles here */

}
/* End media max-width: 2560px */


/*-------------------------------------------------------------------------*/
/* Full HD Wide — max-width: 1920px                                        */
/* Targets: 1080p wide monitors, standard full HD desktop screens          */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {

    /* Add your 1920px styles here */

}
/* End media max-width: 1920px */


/*-------------------------------------------------------------------------*/
/* Large Desktop — max-width: 1600px                                       */
/* Targets: Large desktop monitors, high-res workstations                  */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {

    /* Add your 1600px styles here */

}
/* End media max-width: 1600px */


/*-------------------------------------------------------------------------*/
/* High-res Laptop — max-width: 1536px                                     */
/* Targets: Microsoft Surface Book, high-res 15" laptops                   */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1536px) {

    /* Add your 1536px styles here */

}
/* End media max-width: 1536px */


/*-------------------------------------------------------------------------*/
/* MacBook / Large Laptop — max-width: 1440px                              */
/* Targets: MacBook Pro 14"/16", Dell XPS 15, large laptops                */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {

    /* Add your 1440px styles here */

}
/* End media max-width: 1440px */


/*-------------------------------------------------------------------------*/
/* Standard Laptop — max-width: 1366px                                     */
/* Targets: Most common laptop resolution, HD laptop displays              */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1366px) {

    /* Add your 1366px styles here */

}
/* End media max-width: 1366px */


/*-------------------------------------------------------------------------*/
/* Bootstrap XL — min-width: 1200px (Bootstrap override)                   */
/* Targets: Bootstrap xl container class override                          */
/*-------------------------------------------------------------------------*/
@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1320px;
    }
}
/* End media min-width: 1200px (Bootstrap xl) */


/*-------------------------------------------------------------------------*/
/* Small Desktop — max-width: 1280px                                       */
/* Targets: Older laptops, small desktop monitors                          */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {

    /* Add your 1280px styles here */

}
/* End media max-width: 1280px */


/*-------------------------------------------------------------------------*/
/* Large Landscape Tablet / Small Desktop — max-width: 1080px              */
/* Targets: iPad Pro 12.9" landscape, small desktops                       */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 1080px) {

    /* Add your 1080px styles here */

}
/* End media max-width: 1080px */


/*=========================================================================*/
/*=| ██████████████  TABLET SCREEN RESOLUTIONS  ██████████████ |=*/
/*=========================================================================*/


/*-------------------------------------------------------------------------*/
/* iPad Pro 11" Landscape — max-width: 962px                               */
/* Targets: iPad Pro 11" in landscape orientation                          */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 962px) {

    /* Add your 962px styles here */

}
/* End media max-width: 962px */


/*-------------------------------------------------------------------------*/
/* iPad Air Landscape — max-width: 820px                                   */
/* Targets: iPad Air 4th/5th gen in landscape orientation                  */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 820px) {

    /* Add your 820px styles here */

}
/* End media max-width: 820px */


/*-------------------------------------------------------------------------*/
/* iPad 9th Gen Landscape — max-width: 810px                               */
/* Targets: iPad 9th generation in landscape orientation                   */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 810px) {

    /* Add your 810px styles here */

}
/* End media max-width: 810px */


/*-------------------------------------------------------------------------*/
/* Generic Tablet Landscape — max-width: 800px                             */
/* Targets: Generic Android tablets in landscape orientation               */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 800px) {

    /* Add your 800px styles here */

}
/* End media max-width: 800px */


/*-------------------------------------------------------------------------*/
/* iPad Portrait / Bootstrap MD — max-width: 768px                         */
/* Targets: iPad portrait, Bootstrap md breakpoint, most tablet portraits  */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

    /* Add your 768px styles here */

}
/* End media max-width: 768px */


/*-------------------------------------------------------------------------*/
/* Small Tablet / Large Phablet — max-width: 601px                         */
/* Targets: Small Android tablets, large Android phones in landscape       */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 601px) {

    /* Add your 601px styles here */

}
/* End media max-width: 601px */


/*=========================================================================*/
/*=| ██████████████  MOBILE SCREEN RESOLUTIONS  ██████████████ |=*/
/*=========================================================================*/


/*-------------------------------------------------------------------------*/
/* Large Mobile Landscape — max-width: 480px                               */
/* Targets: Most smartphones in landscape orientation                      */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {

    /* Add your 480px styles here */

}
/* End media max-width: 480px */


/*-------------------------------------------------------------------------*/
/* iPhone Plus / Max — max-width: 414px                                    */
/* Targets: iPhone 8 Plus, iPhone 11 Pro Max, iPhone XS Max portrait       */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 414px) {

    /* Add your 414px styles here */

}
/* End media max-width: 414px */


/*-------------------------------------------------------------------------*/
/* Android Large — max-width: 412px                                        */
/* Targets: Google Pixel 6/7, Samsung Galaxy S21/S22 portrait              */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 412px) {

    /* Add your 412px styles here */

}
/* End media max-width: 412px */


/*-------------------------------------------------------------------------*/
/* iPhone 14 / 15 Pro — max-width: 393px                                   */
/* Targets: iPhone 14 Pro, iPhone 15 Pro portrait                          */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 393px) {

    /* Add your 393px styles here */

}
/* End media max-width: 393px */


/*-------------------------------------------------------------------------*/
/* iPhone 12 / 13 / 14 — max-width: 390px                                  */
/* Targets: iPhone 12, 13, 14 standard models portrait                     */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 390px) {

    /* Add your 390px styles here */

}
/* End media max-width: 390px */


/*-------------------------------------------------------------------------*/
/* iPhone SE 2nd Gen / Older iPhones — max-width: 375px                    */
/* Targets: iPhone SE 2020, iPhone 6/7/8, iPhone X/XS portrait             */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 375px) {

    /* Add your 375px styles here */

}
/* End media max-width: 375px */


/*-------------------------------------------------------------------------*/
/* Common Android — max-width: 360px                                       */
/* Targets: Samsung Galaxy A/S series, most mid-range Android phones       */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 360px) {

    /* Add your 360px styles here */

}
/* End media max-width: 360px */


/*-------------------------------------------------------------------------*/
/* Very Small Phones — max-width: 320px                                    */
/* Targets: iPhone SE 1st gen, Galaxy J series, small budget Android       */
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 320px) {

    /* Add your 320px styles here */

}
/* End media max-width: 320px */


/*=========================================================================*/
/*=| ██████████████  SPECIAL / FEATURE MEDIA QUERIES  ██████████████ |=*/
/*=========================================================================*/


/*-------------------------------------------------------------------------*/
/* Print Styles                                                             */
/* Targets: Browser print dialogs and PDF generation                       */
/*-------------------------------------------------------------------------*/
@media print {

    /* Hide non-essential elements for print */
    /* nav, header, footer, .no-print { display: none; } */

}
/* End media print */


/*-------------------------------------------------------------------------*/
/* Dark Mode Preference                                                     */
/* Targets: Users with OS-level dark mode enabled                          */
/*-------------------------------------------------------------------------*/
@media (prefers-color-scheme: dark) {

    /* Add your dark mode styles here */
    /* :root { --bg-color: #121212; --text-color: #f0f0f0; } */

}
/* End media prefers-color-scheme: dark */


/*-------------------------------------------------------------------------*/
/* Light Mode Preference                                                    */
/* Targets: Users with OS-level light mode enabled (explicit override)     */
/*-------------------------------------------------------------------------*/
@media (prefers-color-scheme: light) {

    /* Add your light mode styles here */

}
/* End media prefers-color-scheme: light */


/*-------------------------------------------------------------------------*/
/* Reduced Motion Preference                                               */
/* Targets: Users who prefer minimal animations (accessibility)            */
/*-------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {

    /* Disable or tone down animations for accessibility */
    /* *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } */

}
/* End media prefers-reduced-motion */


/*-------------------------------------------------------------------------*/
/* High Contrast Mode                                                       */
/* Targets: Users with forced high contrast mode enabled (accessibility)   */
/*-------------------------------------------------------------------------*/
@media (forced-colors: active) {

    /* Adjust colors for high contrast mode */

}
/* End media forced-colors: active */


/*-------------------------------------------------------------------------*/
/* Retina / High DPI Screens                                               */
/* Targets: Retina displays and high-DPI screens (use sharper assets)      */
/*-------------------------------------------------------------------------*/
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Swap in @2x images or higher-res assets here */

}
/* End media high-DPI / Retina */


/*-------------------------------------------------------------------------*/
/* Landscape Orientation (any device)                                       */
/* Targets: Any device rotated to landscape                                */
/*-------------------------------------------------------------------------*/
@media screen and (orientation: landscape) {

    /* Add landscape-specific styles here */

}
/* End media orientation: landscape */


/*-------------------------------------------------------------------------*/
/* Portrait Orientation (any device)                                        */
/* Targets: Any device in portrait orientation                             */
/*-------------------------------------------------------------------------*/
@media screen and (orientation: portrait) {

    /* Add portrait-specific styles here */

}
/* End media orientation: portrait */


/*=== End Responsive Configurations ===*/

/*#########################################################################*/