/* Global responsive utilities and breakpoints - mobile-first */
:root{
    --container-padding: 1rem;
}

/* Make images fluid */
img, .img-fluid{ max-width:100%; height:auto; display:block; }

/* Navbar responsiveness enhancements */
.navbar-brand img,
.navbar-brand .brand-lockup__mark{ max-height:48px; width:auto; }
.navbar-nav{ flex-wrap:wrap; }
.navbar-nav .nav-link{ padding: .375rem .6rem; }

/* Collapsed mobile/tablet nav (below lg breakpoint) */
@media (max-width: 991.98px){
    .navbar-brand img,
    .navbar-brand .brand-lockup__mark{ max-height:40px; }
    .navbar-nav{
        width:100%;
        justify-content:center;
        gap:0;
        padding:0.25rem 0 0.5rem;
    }
    .navbar-nav .nav-item{
        margin:0;
        padding:0;
    }
    .navbar-nav .nav-link{
        padding:0.4rem 0.75rem;
        text-align:center;
        display:block;
    }
}

@media (max-width: 767.98px){
    .navbar-nav .nav-link{
        padding:0.35rem 0.75rem;
    }
}

/* Footer layout — see footer.css */
/* Container padding and max widths */
.container, .container-fluid{ box-sizing:border-box; padding-left:var(--container-padding); padding-right:var(--container-padding); margin-left:auto; margin-right:auto; }

/* Navbar brand sizing */
.navbar-brand img,
.navbar-brand .brand-lockup__mark{ height:40px; width:auto; max-height:none; }

/* Header improvements (override fixed heights) */
.header{ min-height:420px; padding:3.5rem 1rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }

.header .paragraph, .header .video, .header .tagline{ width:100%; }

/* Product cards and layout */
.products-showcase .product-card{ width:100%; box-sizing:border-box; }
.products-showcase .product-card img{ max-width:160px; margin-left:auto; margin-right:auto; }

/* Forms: stack on mobile only - scoped to avoid breaking navbar/footer */
@media (max-width:576px){
    .sec8 .d-flex,
    .fBox .d-flex,
    form .d-flex.flex-nowrap{ flex-direction:column !important; }
    .sec8 .w-50,
    .fBox .w-50,
    input.w-50,
    .form-control.w-50{ width:100% !important; }
    .sec8 .text-end,
    .formBlock .text-end{ text-align:center !important; }
}

/* Tablet (768px - 991px): refine layouts, keep laptop/PC untouched */
@media (max-width:991.98px) and (min-width:768px){
    .header .paragraph{ width:75%; }
    .sec8 .d-flex{ flex-wrap:wrap; }
    .sec8 input.w-50,
    .sec8 .form-control.w-50{ flex:1 1 45%; min-width:140px; }
}

/* Tablet portrait and mobile: form stacking */
@media (max-width:767.98px){
    .sec8 .d-flex{ flex-direction:column !important; }
    .sec8 .w-50,
    .sec8 input.w-50,
    .sec8 .form-control.w-50{ width:100% !important; max-width:100%; }
}

/* Tablet and up */
@media (min-width:576px){
    .navbar-brand img,
    .navbar-brand .brand-lockup__mark{ height:44px; }
    .header{ padding:4.5rem 2rem; }
}

/* Desktop nav only — comfortable horizontal spacing (mobile collapse unchanged) */
@media (min-width:992px){
    .navbar-nav{
        gap:0.25rem;
    }
    .navbar-nav .nav-item{
        padding:0.25rem 0.5rem;
    }
    .navbar-nav .nav-link{
        padding:0.375rem 1rem;
    }
}

@media (min-width:768px){
    .header{ min-height:480px; padding:6rem 2rem; }
    .header .paragraph{ width:50%; }
    .header .video{ width:63%; }
    .products-showcase .product-card{ max-width:520px; }
}

@media (min-width:992px){
    /* Desktop grid tuning for product showcase */
    .products-showcase .row{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }
    .products-showcase .col-lg-3{ flex:0 0 23%; max-width:23%; }
    .products-showcase .col-lg-6{ flex:0 0 46%; max-width:46%; }
}


/* Utility: ensure buttons are touch-friendly */
.btn{ padding:.6rem 1rem; }