/* ==========================================================================
   Shiv Enterprise Rajkot - Theme
   ========================================================================== */

:root {
    --se-primary: #0B2C6B;
    --se-primary-dark: #071E4A;
    --se-primary-light: #1B4BA0;
    --se-accent: #F47C20;
    --se-accent-dark: #D9640C;
    --se-green: #1F7A3A;
    --se-light: #F7F8FA;
    --se-muted: #6B7280;
    --se-border: #E5E7EB;
    --se-radius: 1rem;
    --se-shadow-sm: 0 2px 10px rgba(11, 44, 107, .06);
    --se-shadow: 0 10px 30px rgba(11, 44, 107, .10);
    --se-shadow-lg: 0 20px 50px rgba(11, 44, 107, .16);
    --se-transition: all .3s ease;

    --bs-primary: var(--se-primary);
    --bs-primary-rgb: 11, 44, 107;
    --bs-link-color: var(--se-primary);
    --bs-link-color-rgb: 11, 44, 107;
    --bs-link-hover-color: var(--se-accent);
    --bs-link-hover-color-rgb: 244, 124, 32;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: #1F2937;
    --bs-border-radius: .625rem;
}

html, body { max-width: 100%; }

body {
    font-family: var(--bs-body-font-family);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-x: clip;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .font-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--se-primary);
}

a { transition: var(--se-transition); text-decoration: none; }

::selection { background: var(--se-accent); color: #fff; }

.text-accent { color: var(--se-accent) !important; }
.text-primary { color: var(--se-primary) !important; }
.text-green { color: var(--se-green) !important; }
.bg-primary { background-color: var(--se-primary) !important; }
.bg-accent { background-color: var(--se-accent) !important; }
.bg-light-soft { background-color: var(--se-light) !important; }

.section { padding: 5rem 0; }
.section-sm { padding: 3.5rem 0; }

@media (max-width: 767.98px) {
    .section { padding: 3.5rem 0; }
    .section-sm { padding: 2.5rem 0; }
}

/* Buttons ---------------------------------------------------------------- */
.btn { font-weight: 600; border-radius: 50rem; padding: .7rem 1.6rem; transition: var(--se-transition); }
.btn-sm { padding: .45rem 1.1rem; }
.btn-lg { padding: .9rem 2rem; }

.btn-primary {
    --bs-btn-bg: var(--se-primary);
    --bs-btn-border-color: var(--se-primary);
    --bs-btn-hover-bg: var(--se-primary-dark);
    --bs-btn-hover-border-color: var(--se-primary-dark);
    --bs-btn-active-bg: var(--se-primary-dark);
    --bs-btn-active-border-color: var(--se-primary-dark);
    --bs-btn-disabled-bg: var(--se-primary);
    --bs-btn-disabled-border-color: var(--se-primary);
}

.btn-accent {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--se-accent);
    --bs-btn-border-color: var(--se-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--se-accent-dark);
    --bs-btn-hover-border-color: var(--se-accent-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--se-accent-dark);
    --bs-btn-active-border-color: var(--se-accent-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--se-accent);
    --bs-btn-disabled-border-color: var(--se-accent);
    box-shadow: 0 8px 20px rgba(244, 124, 32, .3);
}

.btn-outline-primary {
    --bs-btn-color: var(--se-primary);
    --bs-btn-border-color: var(--se-primary);
    --bs-btn-hover-bg: var(--se-primary);
    --bs-btn-hover-border-color: var(--se-primary);
    --bs-btn-active-bg: var(--se-primary);
    --bs-btn-active-border-color: var(--se-primary);
}

.btn-whatsapp {
    --bs-btn-color: #fff;
    --bs-btn-bg: #25D366;
    --bs-btn-border-color: #25D366;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1DA851;
    --bs-btn-hover-border-color: #1DA851;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1DA851;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Top bar ---------------------------------------------------------------- */
.topbar {
    background: var(--se-primary-dark);
    color: rgba(255, 255, 255, .85);
    font-size: .85rem;
    padding: .5rem 0;
}

.topbar a { color: rgba(255, 255, 255, .85); }
.topbar a:hover { color: var(--se-accent); }
.topbar i { color: var(--se-accent); }

/* Navbar ----------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(10px);
    transition: var(--se-transition);
    border-bottom: 1px solid transparent;
}

.site-header.scrolled {
    box-shadow: var(--se-shadow);
    border-bottom-color: var(--se-border);
}

.site-header .navbar { padding: .75rem 0; transition: var(--se-transition); }
.site-header.scrolled .navbar { padding: .4rem 0; }

.navbar-brand { display: flex; align-items: center; gap: .65rem; }

.navbar-brand img {
    height: 58px;
    width: auto;
    object-fit: contain;
    transition: var(--se-transition);
}

.site-header.scrolled .navbar-brand img { height: 46px; }

.brand-text { line-height: 1.1; }
.brand-text .brand-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--se-primary);
    letter-spacing: .5px;
    text-transform: uppercase;
}
.brand-text .brand-name span { color: var(--se-accent); }
.brand-text .brand-tagline {
    font-size: .65rem;
    color: var(--se-muted);
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.navbar-nav .nav-link {
    font-weight: 600;
    color: var(--se-primary);
    padding: .5rem 1rem !important;
    position: relative;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .2rem;
    height: 2px;
    background: var(--se-accent);
    transform: scaleX(0);
    transition: transform .3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--se-accent); }

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { transform: scaleX(1); }

.navbar-nav .dropdown-toggle::after { display: none; }

.navbar .dropdown-menu {
    border: 0;
    border-radius: var(--se-radius);
    box-shadow: var(--se-shadow-lg);
    padding: .75rem;
    min-width: 280px;
}

.navbar .dropdown-item {
    border-radius: .5rem;
    padding: .55rem .9rem;
    font-weight: 500;
    color: var(--se-primary);
}

.navbar .dropdown-item i { color: var(--se-accent); width: 1.4rem; display: inline-block; }

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active {
    background: rgba(244, 124, 32, .1);
    color: var(--se-accent);
}

@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}

.navbar-toggler { border: 0; padding: .4rem .6rem; }
.navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
    .navbar-collapse {
        padding: 1rem 0;
        border-top: 1px solid var(--se-border);
        margin-top: .75rem;
    }
    .navbar-nav .nav-link::after { display: none; }
    .navbar .dropdown-menu { box-shadow: none; padding: 0 0 0 1rem; }
    .navbar-brand img { height: 46px; }
    .brand-text .brand-name { font-size: 1.05rem; }
    .brand-text .brand-tagline { font-size: .62rem; }
}

/* Hero ------------------------------------------------------------------- */
.hero {
    position: relative;
    background:
        radial-gradient(circle at 85% 20%, rgba(244, 124, 32, .25), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(31, 122, 58, .25), transparent 40%),
        linear-gradient(135deg, var(--se-primary-dark) 0%, var(--se-primary) 55%, var(--se-primary-light) 100%);
    color: #fff;
    padding: 6rem 0 7rem;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
}

.hero .container { position: relative; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.15; }
.hero h1 span { color: var(--se-accent); }
.hero .lead { color: rgba(255, 255, 255, .85); font-size: 1.15rem; }

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50rem;
    padding: .4rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .5px;
    margin-bottom: 1.5rem;
}

.hero-badge i { color: var(--se-accent); }

.hero-visual {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
}

.hero-visual img { width: 100%; height: auto; display: block; }

.hero-float-card {
    position: absolute;
    background: #fff;
    color: var(--se-primary);
    border-radius: var(--se-radius);
    padding: .9rem 1.2rem;
    box-shadow: var(--se-shadow-lg);
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 600;
    animation: float 4s ease-in-out infinite;
}

.hero-float-card i {
    font-size: 1.6rem;
    color: var(--se-accent);
}

.hero-float-card small { display: block; color: var(--se-muted); font-weight: 500; font-size: .75rem; }
.hero-float-card.card-1 { bottom: 1.5rem; left: -1rem; }
.hero-float-card.card-2 { top: 1.5rem; right: -1rem; animation-delay: 1.5s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-steps {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2rem;
}

.hero-steps span {
    font-size: .8rem;
    padding: .35rem .85rem;
    border-radius: 50rem;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
}

/* Highlights strip ------------------------------------------------------- */
.highlights { margin-top: -4rem; position: relative; z-index: 2; }

.highlight-card {
    background: #fff;
    border-radius: var(--se-radius);
    box-shadow: var(--se-shadow);
    padding: 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: var(--se-transition);
}

.highlight-card:hover { transform: translateY(-5px); box-shadow: var(--se-shadow-lg); }

.highlight-card .icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: .9rem;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: rgba(244, 124, 32, .12);
    color: var(--se-accent);
}

.highlight-card strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    color: var(--se-primary);
}

.highlight-card small { color: var(--se-muted); }

/* Section title ---------------------------------------------------------- */
.section-title { margin-bottom: 3rem; }

.section-title .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--se-accent);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.section-title .eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--se-accent);
}

.section-title h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin-bottom: 1rem; }
.section-title p { color: var(--se-muted); max-width: 680px; font-size: 1.05rem; }
.section-title.text-center p { margin-left: auto; margin-right: auto; }
.section-title.text-center .eyebrow::after {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--se-accent);
}

.section-title.light h2 { color: #fff; }
.section-title.light p { color: rgba(255, 255, 255, .8); }

/* Process timeline ------------------------------------------------------- */
.process-step {
    position: relative;
    text-align: center;
    padding: 1.75rem 1rem;
    background: #fff;
    border-radius: var(--se-radius);
    box-shadow: var(--se-shadow-sm);
    height: 100%;
    transition: var(--se-transition);
    border: 1px solid var(--se-border);
}

.process-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--se-shadow);
    border-color: var(--se-accent);
}

.process-step .step-number {
    position: absolute;
    top: .75rem;
    right: 1rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    color: rgba(11, 44, 107, .07);
}

.process-step .step-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: #fff;
    background: linear-gradient(135deg, var(--se-primary), var(--se-primary-light));
    box-shadow: 0 8px 20px rgba(11, 44, 107, .25);
    transition: var(--se-transition);
}

.process-step:hover .step-icon { background: linear-gradient(135deg, var(--se-accent), var(--se-accent-dark)); }
.process-step h3 { font-size: 1rem; margin: 0; }

/* Category cards --------------------------------------------------------- */
.category-card {
    position: relative;
    display: block;
    height: 100%;
    background: #fff;
    border-radius: var(--se-radius);
    padding: 2rem;
    box-shadow: var(--se-shadow-sm);
    border: 1px solid var(--se-border);
    overflow: hidden;
    transition: var(--se-transition);
    color: inherit;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--se-primary), var(--se-accent), var(--se-green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--se-shadow-lg);
    color: inherit;
}

.category-card:hover::before { transform: scaleX(1); }

.category-card .icon {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    background: rgba(11, 44, 107, .08);
    color: var(--se-primary);
    margin-bottom: 1.25rem;
    transition: var(--se-transition);
}

.category-card:hover .icon { background: var(--se-accent); color: #fff; }
.category-card h3 { font-size: 1.2rem; margin-bottom: .75rem; }
.category-card p { color: var(--se-muted); margin-bottom: 1.25rem; font-size: .95rem; }

.category-card .link {
    font-weight: 600;
    color: var(--se-accent);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.category-card .link i { transition: transform .3s ease; }
.category-card:hover .link i { transform: translateX(5px); }

.category-card .count {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: .75rem;
    font-weight: 600;
    background: var(--se-light);
    color: var(--se-muted);
    border-radius: 50rem;
    padding: .25rem .7rem;
}

/* Product cards ---------------------------------------------------------- */
.product-card {
    height: 100%;
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--se-shadow-sm);
    transition: var(--se-transition);
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--se-shadow-lg);
    border-color: transparent;
}

.product-card .product-img {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid var(--se-border);
}

.product-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .75rem;
    transition: transform .6s ease;
}

.product-card:hover .product-img img { transform: scale(1.07); }

.product-card .badge-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, .95);
    color: var(--se-primary);
    font-weight: 600;
    font-size: .72rem;
    padding: .4rem .75rem;
    border-radius: 50rem;
    box-shadow: var(--se-shadow-sm);
}

.product-card .badge-featured {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--se-accent);
    color: #fff;
    font-weight: 600;
    font-size: .72rem;
    padding: .4rem .7rem;
    border-radius: 50rem;
}

.product-card .card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.product-card h3 a { color: var(--se-primary); }
.product-card h3 a:hover { color: var(--se-accent); }
.product-card p { color: var(--se-muted); font-size: .92rem; flex: 1; }

.product-card .view-link {
    font-weight: 600;
    color: var(--se-accent);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.product-card .view-link i { transition: transform .3s ease; }
.product-card:hover .view-link i { transform: translateX(5px); }

/* Why choose us ---------------------------------------------------------- */
.feature-box {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: var(--se-radius);
    background: #fff;
    border: 1px solid var(--se-border);
    height: 100%;
    transition: var(--se-transition);
}

.feature-box:hover { box-shadow: var(--se-shadow); transform: translateY(-4px); }

.feature-box .icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: .85rem;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    background: rgba(31, 122, 58, .1);
    color: var(--se-green);
}

.feature-box h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.feature-box p { color: var(--se-muted); margin: 0; font-size: .92rem; }

.about-img-wrap { position: relative; }
.about-img-wrap img { border-radius: 1.5rem; box-shadow: var(--se-shadow-lg); }

.about-img-wrap .experience-badge {
    position: absolute;
    bottom: -1.5rem;
    right: -1rem;
    background: var(--se-accent);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: var(--se-radius);
    box-shadow: var(--se-shadow-lg);
    max-width: 220px;
}

.about-img-wrap .experience-badge strong {
    font-family: 'Poppins', sans-serif;
    font-size: 1.25rem;
    display: block;
}

@media (max-width: 575.98px) {
    .about-img-wrap .experience-badge { right: .5rem; bottom: -1rem; }
}

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: .75rem; }

.check-list li::before {
    content: '\F26A';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--se-green);
    font-size: 1.15rem;
    line-height: 1.4;
}

/* CTA banner ------------------------------------------------------------- */
.cta-banner {
    position: relative;
    border-radius: 1.5rem;
    padding: 3.5rem;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 10%, rgba(244, 124, 32, .35), transparent 50%),
        linear-gradient(135deg, var(--se-primary-dark), var(--se-primary));
    box-shadow: var(--se-shadow-lg);
}

.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255, 255, 255, .85); }

@media (max-width: 767.98px) {
    .cta-banner { padding: 2.25rem 1.5rem; }
}

/* Page header ------------------------------------------------------------ */
.page-header {
    position: relative;
    padding: 4.5rem 0;
    color: #fff;
    background:
        radial-gradient(circle at 85% 30%, rgba(244, 124, 32, .25), transparent 45%),
        linear-gradient(135deg, var(--se-primary-dark), var(--se-primary));
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 24px 24px;
}

.page-header .container { position: relative; }
.page-header h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .75rem; }
.page-header .breadcrumb { margin: 0; }
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a { color: rgba(255, 255, 255, .75); font-size: .9rem; }
.page-header .breadcrumb-item a:hover { color: var(--se-accent); }
.page-header .breadcrumb-item.active { color: var(--se-accent); }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); }

/* Product listing -------------------------------------------------------- */
.filter-pills { display: flex; flex-wrap: wrap; gap: .5rem; }

.filter-pills a {
    padding: .5rem 1.1rem;
    border-radius: 50rem;
    border: 1px solid var(--se-border);
    background: #fff;
    color: var(--se-primary);
    font-weight: 600;
    font-size: .88rem;
}

.filter-pills a:hover { border-color: var(--se-accent); color: var(--se-accent); }

.filter-pills a.active {
    background: var(--se-primary);
    border-color: var(--se-primary);
    color: #fff;
}

.search-box { position: relative; }
.search-box i { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--se-muted); }
.search-box .form-control { padding-left: 2.75rem; border-radius: 50rem; height: 48px; }

.se-pagination .pagination {
    --bs-pagination-color: var(--se-primary);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--se-border);
    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--se-accent);
    --bs-pagination-hover-border-color: var(--se-accent);
    --bs-pagination-focus-color: var(--se-primary);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(244, 124, 32, .2);
    --bs-pagination-active-bg: var(--se-primary);
    --bs-pagination-active-border-color: var(--se-primary);
    --bs-pagination-disabled-color: #9CA3AF;
    --bs-pagination-disabled-bg: var(--se-light);
    --bs-pagination-disabled-border-color: var(--se-border);
    flex-wrap: wrap;
    gap: .5rem;
}

.se-pagination .page-link {
    min-width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .9rem;
    border-radius: 50rem !important;
    font-weight: 600;
    box-shadow: var(--se-shadow-sm);
    transition: var(--se-transition);
}

.se-pagination .page-item:not(.active):not(.disabled) .page-link:hover { transform: translateY(-2px); }
.se-pagination .page-item.active .page-link { box-shadow: 0 6px 16px rgba(11, 44, 107, .3); }
.se-pagination .page-link-nav { padding: 0 1.1rem; }

@media (max-width: 575.98px) {
    .se-pagination .page-link { min-width: 38px; height: 38px; padding: 0 .7rem; font-size: .9rem; }
}

.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    background: var(--se-light);
    border-radius: var(--se-radius);
}

.empty-state i { font-size: 3rem; color: var(--se-muted); }

/* Product details -------------------------------------------------------- */
.product-gallery-main {
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--se-shadow);
    background: #fff;
    border: 1px solid var(--se-border);
    aspect-ratio: 4 / 3;
}

.product-gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; }

.product-thumbs { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }

.product-thumbs button {
    width: 84px;
    height: 64px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: .6rem;
    overflow: hidden;
    background: none;
}

.product-thumbs button.active,
.product-thumbs button:hover { border-color: var(--se-accent); }
.product-thumbs button { background: #fff; border-color: var(--se-border); }
.product-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.product-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(244, 124, 32, .12);
    color: var(--se-accent-dark);
    border-radius: 50rem;
    padding: .4rem .9rem;
    font-weight: 600;
    font-size: .82rem;
}

.product-info-card {
    background: #fff;
    border: 1px solid var(--se-border);
    border-radius: var(--se-radius);
    padding: 2rem;
    box-shadow: var(--se-shadow-sm);
}

.product-info-card h2 { font-size: 1.3rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.product-info-card h2 i { color: var(--se-accent); }

.spec-table { margin: 0; }
.spec-table th { width: 40%; color: var(--se-primary); font-weight: 600; background: var(--se-light) !important; }
.spec-table td, .spec-table th { padding: .85rem 1rem; border-color: var(--se-border); }

.application-tags { display: flex; flex-wrap: wrap; gap: .5rem; }

.application-tags span {
    background: rgba(31, 122, 58, .08);
    color: var(--se-green);
    border: 1px solid rgba(31, 122, 58, .2);
    border-radius: 50rem;
    padding: .4rem .9rem;
    font-size: .85rem;
    font-weight: 500;
}

.disclaimer {
    font-size: .82rem;
    color: var(--se-muted);
    background: var(--se-light);
    border-left: 3px solid var(--se-accent);
    padding: .75rem 1rem;
    border-radius: .5rem;
}

.sticky-enquiry { position: sticky; top: 110px; }

/* Contact ---------------------------------------------------------------- */
.contact-info-card {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: var(--se-radius);
    border: 1px solid var(--se-border);
    box-shadow: var(--se-shadow-sm);
    height: 100%;
    transition: var(--se-transition);
}

.contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--se-shadow); }

.contact-info-card .icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    background: var(--se-primary);
    color: #fff;
}

.contact-info-card h3 { font-size: 1rem; margin-bottom: .3rem; }
.contact-info-card p, .contact-info-card a { color: var(--se-muted); margin: 0; font-size: .93rem; word-break: break-word; }
.contact-info-card a:hover { color: var(--se-accent); }

.contact-form-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem;
    box-shadow: var(--se-shadow);
    border: 1px solid var(--se-border);
}

@media (max-width: 575.98px) {
    .contact-form-card { padding: 1.5rem; }
}

.form-label { font-weight: 600; color: var(--se-primary); font-size: .9rem; }

.form-control, .form-select {
    border-radius: .65rem;
    padding: .75rem 1rem;
    border-color: var(--se-border);
    background-color: var(--se-light);
}

.form-control:focus, .form-select:focus {
    border-color: var(--se-accent);
    background-color: #fff;
    box-shadow: 0 0 0 .2rem rgba(244, 124, 32, .15);
}

.map-wrap {
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--se-shadow);
    height: 100%;
    min-height: 380px;
}

.map-wrap iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer ----------------------------------------------------------------- */
.site-footer {
    background: var(--se-primary-dark);
    color: rgba(255, 255, 255, .75);
    padding-top: 4.5rem;
    font-size: .93rem;
}

.site-footer h4 {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: .75rem;
}

.site-footer h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    background: var(--se-accent);
}

.footer-logo {
    background: #fff;
    border-radius: var(--se-radius);
    padding: .75rem 1rem;
    display: inline-block;
    margin-bottom: 1.25rem;
}

.footer-logo img { height: 110px; width: auto; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { color: rgba(255, 255, 255, .75); display: inline-flex; align-items: center; gap: .4rem; }
.footer-links a i { font-size: .7rem; color: var(--se-accent); }
.footer-links a:hover { color: var(--se-accent); padding-left: .25rem; }

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: .75rem; margin-bottom: 1rem; }
.footer-contact i { color: var(--se-accent); font-size: 1.1rem; }
.footer-contact a { color: rgba(255, 255, 255, .75); }
.footer-contact a:hover { color: var(--se-accent); }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 3rem;
    padding: 1.25rem 0;
    font-size: .85rem;
}

/* Floating buttons ------------------------------------------------------- */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1040;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    box-shadow: 0 10px 25px rgba(37, 211, 102, .45);
    transition: var(--se-transition);
}

.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25D366;
    z-index: -1;
    animation: pulse 2s infinite;
}

.whatsapp-float:hover { color: #fff; transform: scale(1.08); }

@keyframes pulse {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.6); opacity: 0; }
}

.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1040;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 0;
    background: var(--se-accent);
    color: #fff;
    font-size: 1.2rem;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 25px rgba(244, 124, 32, .4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--se-transition);
}

.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--se-accent-dark); }

/* Alerts ----------------------------------------------------------------- */
.alert { border: 0; border-radius: var(--se-radius); }
.alert-success { background: rgba(31, 122, 58, .1); color: var(--se-green); }

/* Error pages ------------------------------------------------------------ */
.error-page { padding: 6rem 0; text-align: center; }

.error-page .error-code {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(6rem, 18vw, 10rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--se-primary), var(--se-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Reveal animation ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s ease; }
.reveal.revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* Mobile / tablet refinements ------------------------------------------ */
@media (max-width: 991.98px) {
    /* Keep the header height constant on mobile so the sticky header never jumps or gets cut off */
    .site-header,
    .site-header.scrolled { backdrop-filter: none; background: #fff; }
    .site-header .navbar,
    .site-header.scrolled .navbar { padding: .5rem 0; }
    .navbar-brand img,
    .site-header.scrolled .navbar-brand img { height: 44px; width: 44px; }
    .navbar-collapse { max-height: calc(100vh - 70px); overflow-y: auto; }

    .hero { padding: 3.5rem 0 5rem; }
    .highlights { margin-top: -3rem; }
}

@media (max-width: 575.98px) {
    .section { padding: 2.75rem 0; }
    .section-sm { padding: 2rem 0; }
    .section-title { margin-bottom: 1.75rem; }
    .section-title .eyebrow { font-size: .72rem; letter-spacing: 1.5px; margin-bottom: .5rem; }
    .section-title h2 { font-size: 1.45rem; margin-bottom: .6rem; }
    .section-title p { font-size: .92rem; }

    .btn { padding: .6rem 1.25rem; font-size: .92rem; }
    .btn-lg { padding: .7rem 1.4rem; font-size: .95rem; }

    /* Header */
    .navbar-brand { gap: .5rem; }
    .navbar-brand img,
    .site-header.scrolled .navbar-brand img { height: 40px; width: 40px; }
    .brand-text .brand-name { font-size: .98rem; letter-spacing: .3px; }
    .brand-text .brand-tagline { font-size: .50rem; letter-spacing: 1px; max-width: 200px; white-space: normal; margin-top: 3px;}
    .navbar-toggler .bi { font-size: 1.9rem !important; }

    /* Hero */
    .hero { padding: 2.5rem 0 4.25rem; }
    .hero-badge { font-size: .72rem; padding: .3rem .8rem; margin-bottom: 1rem; }
    .hero h1 { font-size: 1.85rem; margin-bottom: 1rem !important; }
    .hero .lead { font-size: .95rem; margin-bottom: 1.25rem !important; }
    .hero .btn-lg { flex: 1 1 auto; text-align: center; padding: .65rem 1rem; }
    .hero .d-flex.gap-3 { gap: .6rem !important; }
    .hero-steps { margin-top: 1.25rem; gap: .35rem; }
    .hero-steps span { font-size: .7rem; padding: .25rem .65rem; }
    .hero-visual { border-radius: 1rem; }

    /* Highlights: icon on top, compact text */
    .highlights { margin-top: -2.5rem; }
    .highlights .row { --bs-gutter-x: .75rem; --bs-gutter-y: .75rem; }
    .highlight-card { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem; }
    .highlight-card .icon { width: 40px; height: 40px; font-size: 1.1rem; border-radius: .7rem; }
    .highlight-card strong { font-size: 1rem; line-height: 1.25; }
    .highlight-card small { font-size: .78rem; }

    /* Process steps */
    .process-step { padding: 1.1rem .6rem; }
    .process-step .step-icon { width: 46px; height: 46px; font-size: 1.15rem; margin-bottom: .6rem; }
    .process-step .step-number { font-size: 1.4rem; top: .4rem; right: .6rem; }
    .process-step h3 { font-size: .85rem; }

    /* Cards */
    .category-card { padding: 1.4rem; }
    .category-card .icon { width: 50px; height: 50px; font-size: 1.35rem; margin-bottom: 1rem; }
    .category-card h3 { font-size: 1.05rem; }
    .category-card p { font-size: .88rem; margin-bottom: .9rem; }
    .product-card .card-body { padding: 1.1rem; }
    .product-card h3 { font-size: 1rem; }
    .product-card p { font-size: .86rem; }
    .feature-box { padding: 1.1rem; gap: .8rem; }
    .feature-box .icon { width: 42px; height: 42px; font-size: 1.1rem; }
    .feature-box h3 { font-size: .98rem; }
    .feature-box p { font-size: .86rem; }

    /* CTA */
    .cta-banner { padding: 1.75rem 1.25rem; border-radius: 1.1rem; }
    .cta-banner h2 { font-size: 1.4rem; margin-bottom: .6rem !important; }
    .cta-banner p.fs-5 { font-size: .95rem !important; }
    .cta-banner .btn-lg { flex: 1 1 auto; text-align: center; }

    /* Page header */
    .page-header { padding: 2.25rem 0; }
    .page-header h1 { font-size: 1.6rem; margin-bottom: .5rem; }
    .page-header .breadcrumb-item,
    .page-header .breadcrumb-item a { font-size: .8rem; }

    /* About */
    .about-img-wrap img { border-radius: 1rem; }
    .about-img-wrap .experience-badge { padding: .75rem 1rem; max-width: 190px; font-size: .82rem; right: .75rem; bottom: -1rem; }
    .about-img-wrap .experience-badge strong { font-size: 1rem; }

    /* Product details */
    .product-info-card { padding: 1.25rem; }
    .product-info-card h2 { font-size: 1.1rem; margin-bottom: 1rem; }
    .spec-table td, .spec-table th { padding: .6rem .75rem; font-size: .88rem; }
    .display-6 { font-size: 1.5rem; }
    .filter-pills a { padding: .4rem .85rem; font-size: .8rem; }

    /* Contact */
    .contact-info-card { padding: 1.1rem; }
    .contact-info-card .icon { width: 44px; height: 44px; font-size: 1.1rem; }
    .map-wrap, .map-wrap iframe { min-height: 300px; }

    /* Footer */
    .site-footer { padding-top: 3rem; font-size: .88rem; }
    .footer-logo img { height: 90px; }
    .footer-bottom { margin-top: 2rem; text-align: center; }

    /* Floating buttons */
    .whatsapp-float { width: 48px; height: 48px; font-size: 1.45rem; left: 1rem; bottom: 1rem; }
    .back-to-top { width: 42px; height: 42px; font-size: 1rem; right: 1rem; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
}