/* Prevent margin collapsing and maintain smooth browser scrolling */
*, *::before, *::after {box-sizing: border-box;}
html {height: 100%; margin: 0 !important; padding: 0 !important;}
body {min-height: 100vh; display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; overflow-x: hidden; font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; padding-top: 80px !important; box-sizing: border-box !important;}

/* Ensure headers match styled weights */
h1, h2, h3, h4, h5, h6, .navbar-brand {font-family: 'Open Sans', sans-serif;}

footer {margin-top: auto !important; margin-bottom: 0 !important; padding-bottom: 0 !important; display: flex; flex-direction: column; overflow: hidden;}
.footer-red-bar {height: 12px; margin: 0 !important; padding: 0 !important; line-height: 0; font-size: 0;}
.footer-nav li {border-bottom: 1px solid #dee2e6; padding-bottom: 0.5rem;}
.footer-nav li:last-child {border-bottom: none;}
.footer-nav li a {display: block;}

/* Custom Styling matching Vector X Palette */
:root {--brand-red: #E31B23;}

.text-danger { color: var(--brand-red) !important; }
.btn-danger { background-color: var(--brand-red); border-color: var(--brand-red); }
.btn-danger:hover { background-color: #c41219; border-color: #c41219; }
.btn-outline-danger { color: var(--brand-red); border-color: var(--brand-red); }
.btn-outline-danger:hover { background-color: var(--brand-red); border-color: var(--brand-red); color: #ffffff; }

.brand-logo { max-height: 85px; }
.brand-logo:hover { filter: grayscale(0%); opacity: 1; }
footer a:hover { color: var(--brand-red) !important; }

/* Performance-Optimized Header Transitions (Replaced 'all' with targeted properties) */
header .navbar, 
header .navbar-brand img, 
header .nav-link, 
header .btn {transition: padding 0.2s ease-out, height 0.2s ease-out, font-size 0.2s ease-out; will-change: padding, height;}
header.scrolled .navbar {padding-top: 0.4rem !important; padding-bottom: 0.4rem !important;}
header.scrolled .navbar-brand img {height: 28px !important;}
header.scrolled .nav-link {font-size: 0.85rem;}
header.scrolled .btn {padding: 0.35rem 1.25rem !important; font-size: 0.85rem;}
.navbar-nav .nav-link {white-space: nowrap;}

/* --- Animated Hamburger Toggle Button --- */
.navbar-toggler {border: none !important; padding: 0 !important; width: 28px; height: 22px; position: relative; background: transparent !important; box-shadow: none !important;}
.navbar-toggler .toggler-icon {display: block; position: absolute; height: 3px; width: 100%; background-color: var(--brand-red, #E31B23); border-radius: 2px; opacity: 1; left: 0; transform: rotate(0deg); transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, top 0.25s ease-in-out;}

.navbar-toggler .top-bar { top: 0px; }
.navbar-toggler .middle-bar { top: 9px; }
.navbar-toggler .bottom-bar { top: 18px; }
.navbar-toggler:not(.collapsed) .top-bar { top: 9px; transform: rotate(135deg); }
.navbar-toggler:not(.collapsed) .middle-bar { opacity: 0; left: -20px; }
.navbar-toggler:not(.collapsed) .bottom-bar { top: 9px; transform: rotate(-135deg); }



/* Breadcrumb Divider Styling */
.breadcrumb-item + .breadcrumb-item::before {content: "<"; color: #ffffff; opacity: 0.75;}

/* Standard Placeholder Styles */
::placeholder { color: #bbbbbb !important; opacity: 1; }
::-webkit-input-placeholder { color: #bbbbbb !important; }
:-ms-input-placeholder { color: #bbbbbb !important; }
::-ms-input-placeholder { color: #bbbbbb !important; }
select.form-select:invalid, select.form-select option[value=""][disabled] { color: #bbbbbb !important; }
select.form-select option { color: #bbbbbb; }

.soundwave-section-canvas {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0.5;}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {opacity: 0;  animation: fadeInUp 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;}
.product-card {
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1) !important;
}

.product-img {transition: transform 0.4s ease;}
.product-card:hover .product-img {transform: scale(1.08);}
.spec-icon {transition: transform 0.2s ease;}
.product-card:hover .spec-icon {transform: scale(1.15);}
.btn-pdf {transition: all 0.25s ease;}
.btn-pdf-icon {transition: transform 0.25s ease;}
.btn-pdf:hover .btn-pdf-icon {transform: translateY(-1px) scale(1.2);}


/* Custom Pagination Style matching Reference Image */
.custom-pagination-container {display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 45px; user-select: none;}
.custom-pagination-container .page-btn {border: none; outline: none; background-color: #f8f9fa; color: #333333; font-weight: 800; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;}
.custom-pagination-container .btn-pill {padding: 14px 28px; border-radius: 50px; color: #8c8c8c;}
.custom-pagination-container .btn-pill:hover:not(.disabled) {background-color: #e2e8f0; color: #212529;}
.custom-pagination-container .btn-pill.disabled {opacity: 0.4; cursor: not-allowed;}
.custom-pagination-container .btn-num {width: 36px; height: 36px; border-radius: 50%; font-size: 1.1rem; color: #212529; background-color: transparent;}
.custom-pagination-container .btn-num:hover:not(.active) {background-color: #f1f3f5;}
.custom-pagination-container .btn-num.active {background-color: #dc3545; color: #ffffff; box-shadow: 0 8px 18px rgba(220, 53, 69, 0.4);}

.solution-card:hover {transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1) !important;}
.solution-card:hover .solution-img {transform: scale(1.06);}

/* Back to Top Button Styling */
#backToTop {
    position: fixed !important; /* Locks button to viewport floating position */
    bottom: 25px;
    right: 25px;
    width: 45px;
    height: 45px;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

#backToTop.show {opacity: 1; visibility: visible;}
#backToTop:hover {transform: translateY(-3px);}

@media (max-width: 991.98px) {
    .navbar-collapse { padding-top: 1rem; padding-bottom: 0.5rem; }    
    .navbar-nav .nav-item { border-bottom: 1px solid #dee2e6; }
    .navbar-nav .nav-link { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
    .navbar-nav .nav-item:last-child { border-bottom: none; padding-top: 1rem; }
    .navbar-nav .nav-item .btn { width: 100%; display: block; text-align: center; }
}