:root{--brand:#00406f;--brand-dark:#002a4d;--text:#222;--muted:#6c757d;--bg:#fff;--light:#f8f9fa}
body{color:var(--text);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}

/* Top Bar */
.site-topbar {background-color: var(--brand-dark); color: #fff; padding: 10px 0; font-size: 13px; letter-spacing: 0.5px;}
.site-topbar a {color: rgba(255,255,255,0.8); transition: all 0.2s; text-decoration: none;}
.site-topbar a:hover {color: #fff;}
.topbar-info span {display: inline-block; vertical-align: middle;}
.topbar-social a {margin-left: 15px; font-size: 14px;}
.topbar-social a:first-child {margin-left: 0;}
.topbar-social a i {width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.2s;}
.topbar-social a:hover i {background: var(--brand); transform: translateY(-2px);}

/* Header & Nav */
.site-header{background:#fff;border-bottom:1px solid rgba(0,0,0,0.05);padding-top:15px;padding-bottom:15px;transition:all 0.3s}
.site-header .navbar-brand .logo-img{max-height:60px;width:auto;}
.site-header .navbar-nav .nav-link{padding:0.5rem 1.2rem;color:#444;font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:0.5px;position:relative;transition: color 0.2s; display: flex; align-items: center;}
.site-header .navbar-nav .nav-link::after {content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background-color: var(--brand); transition: all 0.3s ease-in-out; transform: translateX(-50%);}
.site-header .navbar-nav .nav-link:hover::after, 
.site-header .navbar-nav .nav-link.active::after {width: 80%;}
.site-header .navbar-nav .nav-link.active,
.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .show > .nav-link{color:var(--brand)}

/* Nav Arrow */
.nav-arrow {font-size: 12px; margin-left: 6px; transition: transform 0.3s ease; opacity: 0.6;}
.nav-item:hover .nav-arrow {transform: rotate(180deg); opacity: 1;}
.dropdown-toggle::after {display: none !important;} /* Hide default bootstrap arrow */

/* Dropdown Menu */
.dropdown-menu {border:none;border-radius:0;box-shadow:0 10px 40px rgba(0,0,0,0.1);margin-top:0;padding:10px 0;min-width: 220px;border-top: 3px solid var(--brand);}
.dropdown-item {padding:10px 25px;font-size:14px;color:#555;transition:all 0.2s; border-bottom: 1px solid #f5f5f5;}
.dropdown-item:last-child {border-bottom: none;}
.dropdown-item:hover, .dropdown-item:focus {background-color:#fff;color:var(--brand);padding-left:30px}

/* Desktop Hover */
@media (min-width: 992px) {
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {display: block;animation: fadeInUp 0.2s ease forwards;}
    .navbar-nav .nav-item.dropdown .dropdown-menu {display: none; margin-top:0;}
    .site-header {padding-top:20px;padding-bottom:20px;}
    .site-header .navbar-brand .logo-img{max-height:70px;}
}

@keyframes fadeInUp {
    from {opacity: 0;transform: translate3d(0, 10px, 0);}
    to {opacity: 1;transform: none;}
}

/* Hero */
.hero{position:relative;color:#fff;border-bottom:1px solid #eee; overflow: hidden;}
.hero.hero-blue{background:linear-gradient(135deg,var(--brand-dark),var(--brand))}
.hero-video-bg {position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 0; transform: translateX(-50%) translateY(-50%); object-fit: cover;}
.hero-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 42, 77, 0.75); z-index: 1;} /* Dark blue overlay for text readability */
.hero .hero-bg{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.hero .container{position:relative;padding:120px 0; z-index: 2;}
.hero h1{font-size:2.5rem;font-weight:700; text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
.hero p{color:#e9ecef; font-size: 1.1rem; margin-bottom: 30px; text-shadow: 0 1px 2px rgba(0,0,0,0.3);}

/* General Sections */
.section{padding:60px 0}
.section-title{font-size:1.8rem;font-weight:700;text-align:center;margin-bottom:8px;letter-spacing: -0.5px;}
.section-sub{text-align:center;color:var(--muted);margin-bottom:40px;position:relative;display:inline-block;width:100%}

.card{border:none;box-shadow:0 4px 18px rgba(0,0,0,.04);transition:transform 0.3s}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.08)}
.card-img-150{height:180px;overflow:hidden;position:relative}
.card-img-150 img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s}

/* Product Content Beautification */
.product-content {font-size: 1rem; line-height: 1.8; color: #555;}
.product-content h1, .product-content h2, .product-content h3 {color: #333; margin-top: 1.5em; margin-bottom: 1em; font-weight: 600;}
.product-content p {margin-bottom: 1.5em;}
.product-content ul {padding-left: 20px; margin-bottom: 1.5em;}
.product-content li {margin-bottom: 0.5em;}

/* Feature Grid (Selling Points) */
.feature-box {background: #fff; border: 1px solid #eee; padding: 20px; border-radius: 8px; height: 100%; transition: all 0.3s;}
.feature-box:hover {transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-color: var(--brand);}
.feature-box i {color: var(--brand); font-size: 24px; margin-bottom: 15px;}
.feature-box h3 {font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333; margin-top: 0;}
.feature-box p {font-size: 13px; color: #777; margin-bottom: 0; line-height: 1.5;}

/* Spec Table */
.spec-table-wrapper {overflow-x: auto; margin-bottom: 2rem; border: 1px solid #eee; border-radius: 8px;}
.spec-table {width: 100%; border-collapse: collapse; min-width: 600px;}
.spec-table th, .spec-table td {padding: 12px 15px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px;}
.spec-table th {background-color: #f8f9fa; font-weight: 600; color: #333; border-right: 1px solid #eee;}
.spec-table td {color: #555; border-right: 1px solid #eee;}
.spec-table tr:last-child td {border-bottom: none;}
.spec-table tr:hover td {background-color: #fcfcfc;}
.spec-table td.label {font-weight: 500; color: #333; width: 30%; background-color: #fff;}

/* Tailwind Compatibility Shims (for pasted content) */
.grid {display: flex; flex-wrap: wrap; margin-right: -10px; margin-left: -10px;}
.grid-cols-1 > * {width: 100%; padding: 0 10px;}
@media (min-width: 768px) {
    .md\:grid-cols-3 > * {width: 33.3333%;}
}
.gap-4 {margin-bottom: -1rem;} .gap-4 > * {margin-bottom: 1rem;}
.text-2xl {font-size: 1.5rem;}
.font-bold {font-weight: 700;}
.text-blue-600 {color: var(--brand) !important;}
.bg-white {background-color: #fff;}
.shadow-sm {box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;}
.rounded-lg {border-radius: .3rem;}

/* Custom Product Page Styles */
.product-card {
    border: 1px solid #f0f0f0 !important;
    background: #fff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.product-card:hover {
    border-color: transparent !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}
.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hover-primary:hover { color: var(--brand) !important; }
.gallery-thumbs { margin-top: 10px; box-sizing: border-box; padding: 10px 0; }
.gallery-thumbs .swiper-slide { height: 100%; opacity: 0.6; cursor: pointer; }
.gallery-thumbs .swiper-slide-thumb-active { opacity: 1; border: 2px solid var(--brand); }
.product-content img { max-width: 100%; height: auto; }
.nav-tabs .nav-link.active { color: var(--brand) !important; border-bottom: 2px solid var(--brand) !important; }
.object-fit-cover { object-fit: cover; }
.transition-transform { transition: transform 0.5s ease; }
.card:hover .transition-transform { transform: scale(1.05); }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; }

.feature{background:var(--light)}
.cta{background:#eef4ff;border-top:1px solid #e1ecff;border-bottom:1px solid #e1ecff}
.cta .btn{padding:.65rem 1.5rem;font-weight:500}

/* Chips & Buttons */
.chips{margin-top:20px}
.chip{display:inline-block;border:1px solid rgba(255,255,255,.6);color:#fff;padding:.4rem .8rem;border-radius:50px;margin:.25rem .35rem;font-size:.9rem;transition:all .2s;background:rgba(255,255,255,0.1)}
.chip:hover{background:#fff;color:var(--brand);text-decoration:none}

.btn-primary{background:var(--brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-outline-primary{color:var(--brand);border-color:var(--brand)}
.btn-outline-primary:hover{color:#fff;background:var(--brand);border-color:var(--brand)}

/* Advantages Grid */
.adv-grid .adv-item{text-align:center;padding:30px 20px;border-radius:8px;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.04);height:100%;transition:transform 0.3s}
.adv-grid .adv-item:hover{transform:translateY(-5px)}
.adv-grid .adv-item i{color:var(--brand);font-size:32px;margin-bottom:15px;display:block}
.adv-grid .adv-item h5{font-weight:600;margin-bottom:10px}
.adv-grid .adv-item p{color:var(--muted);font-size:0.9rem;margin-bottom:0}

/* Stats */
.stats{background:#f5f9ff}
.stats .num{font-size:36px;font-weight:700;color:var(--brand);line-height:1.2}
.stats .txt{color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:1px}

/* Footer */
.footer-dark {background-color: var(--brand-dark); color: rgba(255,255,255,0.7); font-size: 14px; padding-top: 80px;}
.footer-dark h5 {color: #fff; font-weight: 600; margin-bottom: 25px; font-size: 18px; position: relative; padding-bottom: 15px;}

/* Custom Pagination */
.custom-pagination {
    align-items: center;
}

/* Unified style for ALL pagination links/buttons */
.custom-pagination .page-link,
.custom-pagination .page-num,
.custom-pagination span.page-num-current {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    margin: 0 3px;
    font-size: 14px;
    color: #555;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px !important;
    text-decoration: none;
    line-height: 1;
    box-shadow: none !important;
    transition: all 0.2s;
    font-weight: 500;
}

/* Hover Effects */
.custom-pagination .page-link:hover,
.custom-pagination a.page-num:hover {
    color: var(--brand);
    border-color: var(--brand);
    background-color: #fff;
    z-index: 2;
}

/* Active State */
.custom-pagination span.page-num-current,
.custom-pagination .page-item.active .page-link {
    background-color: var(--brand);
    color: #fff;
    border-color: var(--brand);
    z-index: 3;
}

/* Disabled State */
.custom-pagination .page-item.disabled .page-link {
    color: #999;
    pointer-events: none;
    background-color: #f9f9f9;
    border-color: #eee;
}