/* --- Desktop & Landscape Tablet Media Query (Two Columns, Two Rows) --- */
@media (min-width: 0px) and (max-width: 430px) {
    
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .overlay-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .logo img {
    max-width: 280px; /* Adjust this value (e.g., 50%) to get your desired width */
    width: 100%;
    height: auto;     /* Keeps the logo aspect ratio from stretching */
    }
    .slide-overlay { padding-top: 15px; }
    .slide-overlay h2 { font-size: 1.25rem; }
    .slide-overlay p { font-size: 0.8rem; }
}
@media (min-width: 431px) and (max-width: 900px) {
    .grid-container {
        grid-template-columns: repeat(2, minmax(200px, 300px));
        justify-content: center;
    }
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }
    .grid-container-product {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
    }
    
}

/* Desktop / Tablet Landscape (min-width: 900px) */
@media (min-width: 901px) and (max-width: 1023px){
    /* Overlay Section becomes 4 columns, 1 row */
    .overlay-container {
        grid-template-columns: repeat(4, 1fr);
    }
    /*.menu-toggle {
        display: flex;
    }
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #111;
        border-top: 1px solid #222;
    }

    .main-navigation.active {
        display: block;
    }

    .nav-list {
        flex-direction: column;
        width: 100%;
    }

    .dropdown-menu, .nested-menu {
        position: static;
        display: none;
        width: 100%;
        box-shadow: none;
        background-color: #1a1a1a;
        padding-left: 15px;
        border: none;
    }

    .nested-menu {
        background-color: #222;
        padding-left: 30px;
    }*/

    /* JavaScript interaction utilities for mobile */
    .dropdown.open > .dropdown-menu,
    .nested-dropdown.open > .nested-menu {
        display: block;
    }
    
    .dropdown.open > a .arrow,
    .nested-dropdown.open > a .arrow {
        transform: rotate(180deg);
    }
    .menu-toggle { display: none; }
    .nav-links { display: flex; gap: 1.5rem; }
    .nav-links a { text-decoration: none; color: #333; font-weight: 500; }
    .image-grid-brand {
        grid-template-columns: repeat(2, 1fr); /* 2x2 layout */
        gap: 1.5rem;
    }
    .container{flex-direction:row}
    .left,.right{flex:1}
}
/* .youtube-list
        {grid-template-columns:repeat(4,1fr)
        }*/
/* ==========================================================================
   5. Media Queries for Larger Displays
   ========================================================================== */
/*  Desktop Display (4 columns, min 200px / max 300px per column)
    Desktop Display (6 columns, min 150px / max 250px per column)*/
@media (max-width: 900px) {
    .menu-toggle {
        display: flex;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #111;
        border-top: 1px solid #222;
    }

    .main-navigation.active {
        display: block;
    }

    .nav-list {
        flex-direction: column;
        width: 100%;
    }

    .dropdown-menu, .nested-menu {
        position: static;
        display: none;
        width: 100%;
        box-shadow: none;
        background-color: #1a1a1a;
        padding-left: 15px;
        border: none;
    }

    .nested-menu {
        background-color: #222;
        padding-left: 30px;
    }*/

    /* JavaScript interaction utilities for mobile */
    /*   .dropdown.open > .dropdown-menu,
    .nested-dropdown.open > .nested-menu {
        display: block;
    }
    
    .dropdown.open > a .arrow,
    .nested-dropdown.open > a .arrow {
        transform: rotate(180deg);
    }*/  
    
}
@media (min-width:650px){
    .foot-menu-grid{
        grid-template-columns:repeat(3,1fr);
    }
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
    .image-grid-brand {
        grid-template-columns: repeat(2, 1fr); /* 2x2 layout */
        gap: 1.5rem;
    }
}
@media (min-width: 1024px) {
    .container{flex-direction:row}
    .left,.right{flex:1}
    .category-grid-container {
        grid-template-columns: repeat(6, minmax(150px, 250px));
        justify-content: center;
    }
    .grid-container {
        grid-template-columns: repeat(4, minmax(200px, 300px));
        justify-content: center;
    }
    .grid-layout { 
        grid-template-columns: repeat(3, 1fr); 
    }
    .grid-container-product {
        grid-template-columns: repeat(2, minmax(400px, 512px));
        justify-content: center;
    }
    .foot-menu-grid{
        grid-template-columns:repeat(6,1fr);
    }
    .footer-container {
        grid-template-columns: repeat(4, 1fr);
    }  
    .container{flex-direction:row}
    .left,.right{flex:1}
    /*.youtube-container
        {flex-direction:row;
        justify-content:center;
        align-items:flex-start;
        gap:24px
        }
    .main-video
        {flex:0 0 var(--page-width);
        margin:0
        }
    .youtube-list
        {width:420px;
        max-width:420px;
        margin:0;
        margin-right: 60px;
        grid-template-columns:repeat(2,1fr)
        }*/
}
/*Targets screens under 480px wide explicitly in vertical portrait mode */
    @media screen and (max-width: 480px) and (orientation: portrait) {
  .logo img {
    max-width: 280px; /* Adjust this value (e.g., 50%) to get your desired width */
    width: 100%;
    height: auto;     /* Keeps the logo aspect ratio from stretching */
  }
}