<?php $pageTitle = "Sigma Healthcare - Precision Supplies for Reliable Science & Diagnostics"; ?>
<?php include 'includes/header.php'; ?>

<style>
/* Updated Hero Section Styles - Full background with overlay navbar */
.hero-section-updated {
    background: url('images/home/hero1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 140px; /* Keep the padding for navbar spacing */
    margin-top: 0; /* Removed margin to eliminate gap */
}

.hero-section-updated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    z-index: 1;
}

.hero-content-updated {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.hero-subtitle {
    color: #ffffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

 .hero-title {
     color: #ffffffff;
     font-size: 4.0rem;
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 25px;
     font-family: 'Montserrat', 'Roboto', sans-serif;
 } 

.hero-title .highlight {
    color: #ffffffff;
}

.hero-description {
    color: #ffffffff;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 35px;
    font-weight: 400;
    opacity: 0.9;
}

.btn-explore-chemicals {
    background: #FE4600;
    border: none;
    padding: 15px 35px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    color: white;
    font-size: 14px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(254, 70, 0, 0.3);
}

.btn-explore-chemicals:hover {
    background: #e03d00;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 70, 0, 0.4);
    color: white;
}

/* Enhanced animation for hero content */
.hero-content-updated.slide-in-left {
    animation: slideInLeftEnhanced 1s ease-out;
}

@keyframes slideInLeftEnhanced {
    from { 
        opacity: 0; 
        transform: translateX(-80px);
    }
    to { 
        opacity: 1; 
        transform: translateX(0);
    }
}

/* Body padding to account for absolute header */
body.home-page {
    padding-top: 0;
}

/* Updated Best Selling Products Section - Exact Match */
.best-selling-section-new {
    padding: 100px 0;
    background: #ffffff;
}

.section-header-new {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.section-header-new::before,
.section-header-new::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 300px;
    height: 1px;
    background: #999;
}

.section-header-new::before {
    left: calc(50% - 450px);
}

.section-header-new::after {
    right: calc(50% - 450px);
}

.section-header-new h2 {
    display: inline-block;
    background: #ffffff;
    padding: 0 40px;
    color: #333;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0;
}

.product-showcase-new {
    display: flex;
    justify-content: center;
    gap: 30px;
    align-items: stretch;
}

.product-card-new {
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 0;
    overflow: hidden;
    width: 300px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.product-card-new:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.product-image-container-new {
    position: relative;
    height: 280px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    border-bottom: 1px solid #e0e0e0;
}

.product-image-container-new img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.product-card-new:hover .product-image-container-new img {
    transform: scale(1.05);
}

.product-info-new {
    padding: 30px 25px;
    background: white;
}

.product-info-new h3 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 12px;
    font-weight: 600;
}

.product-info-new p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.4;
}

.btn-more-details-new {
    background: #FE4600;
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 0;
    transition: all 0.3s ease;
    width: 100%;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-more-details-new:hover {
    background: #e03d00;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(254, 70, 0, 0.3);
    text-decoration: none;
}

/* Updated Blood Collection Section - Match the image design */
.blood-collection-section-updated {
    background: url('images/home/bg1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.blood-collection-section-updated::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.4) 0%, rgba(255, 255, 255, 0.3) 100%);
    z-index: 1;
}

.blood-collection-content {
    position: relative;
    z-index: 2;
}

.blood-collection-title {
    color: #07427D;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.blood-collection-subtitle {
    color: #1B4763;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 50px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.features-grid {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    justify-content: flex-start;
}

.feature-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 30px 20px;
    text-align: center;
    width: 180px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.feature-icon-updated {
    width: 60px;
    height: 60px;
    background: #07427D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feature-icon-updated i {
    font-size: 24px;
    color: white;
}

.feature-card h6 {
    color: #333;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.feature-card p {
    color: #666;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

.btn-contact-us {
    background: #FE4600;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-contact-us:hover {
    background: #e03d00;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(254, 70, 0, 0.3);
}

/* Updated Products Section - Match the image design */
.products-section-updated {
    padding: 80px 0;
    background: #f8f9fa;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.products-title {
    color: #333;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.btn-view-more {
    background: #FE4600;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 25px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-view-more:hover {
    background: #e03d00;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(254, 70, 0, 0.3);
}

.products-grid-updated {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.product-card-grid {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
}

.product-card-grid:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.product-image-grid {
    height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #fafafa;
}

.product-price-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #FE4600;
    color: white;
    padding: 6px 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 20px;
}

.product-info-grid {
    padding: 20px;
    text-align: left;
}

.product-info-grid h5 {
    color: #333;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.product-info-grid p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 15px;
}

/* Removed all .btn-add-to-cart styles since buttons are removed */

/* Fixed Blood Testing Section - Alternative background implementation */
.blood-testing-section {
    background-color: #2c3e50;
    background-image: url('images/home/bg2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    padding: 120px 0 80px;
    color: white;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Alternative approach with ::after pseudo element */
.blood-testing-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('images/home/bg2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: -1;
}

/* Ensure content is above background */
.blood-testing-section .container {
    position: relative;
    z-index: 2;
}

.blood-testing-title {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.blood-testing-title .highlight {
    color: #FE4600;
}

.blood-testing-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.btn-discover-products {
    background: #FE4600;
    color: white;
    border: none;
    padding: 15px 35px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(254, 70, 0, 0.3);
}

.btn-discover-products:hover {
    background: #e03d00;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(254, 70, 0, 0.4);
    color: white;
}

/* Fixed Contact Section - Proper spacing and no overlap */
.contact-section {
    padding: 80px 0;
    background: #f8f9fa;
    position: relative;
    z-index: 2;
}

.contact-form-container {
    background: rgba(44, 62, 80, 0.95);
    border-radius: 20px;
    padding: 60px 50px;
    color: white;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.contact-form-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.contact-form-subtitle {
    text-align: center;
    margin-bottom: 50px;
    opacity: 0.9;
    font-size: 1rem;
}

.form-row-custom {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row-custom .form-group {
    flex: 1;
}

.form-group {
    margin-bottom: 20px;
}

.form-control-custom-new {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px 20px;
    color: white;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.form-control-custom-new::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.form-control-custom-new:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #FE4600;
    color: white;
    box-shadow: 0 0 0 0.2rem rgba(254, 70, 0, 0.25);
    outline: none;
}

.form-control-textarea {
    min-height: 120px;
    resize: vertical;
}

.btn-send-message {
    background: #FE4600;
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 200px;
    margin: 20px auto 0;
    display: block;
    cursor: pointer;
}

.btn-send-message:hover {
    background: #e03d00;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(254, 70, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3.8rem;
    }
    
    .product-showcase-new {
        gap: 25px;
    }
    
    .section-header-new::before,
    .section-header-new::after {
        width: 250px;
    }
    
    .section-header-new::before {
        left: calc(50% - 400px);
    }
    
    .section-header-new::after {
        right: calc(50% - 400px);
    }
    
    .products-grid-updated {
        gap: 20px;
    }
    
    .features-grid {
        gap: 20px;
    }
    
    .feature-card {
        width: 160px;
    }
    
    .blood-collection-title {
        font-size: 2.5rem;
    }
    
    .blood-testing-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 992px) {
    .hero-title {
        font-size: 3.2rem;
    }
    
    .hero-section-updated {
        min-height: 80vh;
        padding-top: 120px; /* Adjusted padding for medium screens */
        margin-top: 0; /* Removed margin */
    }
    
    .product-showcase-new {
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .product-card-new {
        width: 280px;
    }
    
    .section-header-new::before,
    .section-header-new::after {
        width: 150px;
    }
    
    .section-header-new::before {
        left: calc(50% - 300px);
    }
    
    .section-header-new::after {
        right: calc(50% - 300px);
    }
    
    .products-grid-updated {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .products-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .features-grid {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .blood-collection-title {
        font-size: 2.2rem;
    }
    
    .blood-testing-title {
        font-size: 2.2rem;
    }
    
    .contact-form-container {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.8rem;
        text-align: center;
    }
    
    .hero-subtitle {
        font-size: 14px;
        text-align: center;
    }
    
    .hero-description {
        font-size: 1rem;
        text-align: center;
    }
    
    .hero-content-updated {
        text-align: center;
    }
    
    .btn-explore-chemicals {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    .hero-section-updated {
        min-height: 70vh;
        padding: 100px 0 60px; /* Adjusted padding for tablet */
        margin-top: 0; /* Removed margin */
    }
    
    .product-card-new {
        width: 250px;
    }
    
    .section-header-new::before,
    .section-header-new::after {
        display: none;
    }
    
    .products-grid-updated {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .products-title {
        font-size: 1.5rem;
    }
    
    .blood-collection-title {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .blood-collection-subtitle {
        text-align: center;
    }
    
    .btn-contact-us {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    .blood-testing-title {
        font-size: 1.8rem;
    }
    
    .btn-discover-products {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    .feature-card {
        width: 140px;
        padding: 20px 15px;
    }
    
    .features-grid {
        gap: 15px;
    }
    
    .contact-form-container {
        padding: 30px 20px;
        margin: 0 15px;
    }
    
    .contact-form-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2.2rem;
        text-align: center;
    }
    
    .hero-subtitle {
        text-align: center;
    }
    
    .hero-description {
        text-align: center;
    }
    
    .btn-explore-chemicals {
        padding: 12px 28px;
        font-size: 13px;
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    .hero-section-updated {
        padding: 90px 0 50px; /* Adjusted padding for mobile */
        margin-top: 0; /* Removed margin */
    }
    
    .product-showcase-new {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    
    .product-card_new {
        width: 90%;
        max-width: 300px;
    }
    
    .product-card-grid {
        margin: 0 15px;
    }
    
    .blood-collection-title {
        font-size: 1.6rem;
        text-align: center;
    }
    
    .blood-collection-subtitle {
        text-align: center;
    }
    
    .btn-contact-us {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    .blood-testing-title {
        font-size: 1.6rem;
    }
    
    .btn-discover-products {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    .features-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .feature-card {
        width: 200px;
    }
    
    .contact-form-title {
        font-size: 1.5rem;
    }
}

/* iPhone SE and similar small devices */
@media (max-width: 375px) {
    .hero-section-updated {
        min-height: 60vh;
        padding: 100px 0 40px; /* Increased top padding to prevent navbar overlap */
        margin-top: 0; /* Removed margin */
    }
    
    .hero-title {
        font-size: 2rem;
        line-height: 1.1;
        margin-bottom: 15px;
        text-align: center;
        br {
            display: none;
        }
    }
    
    .hero-subtitle {
        font-size: 12px;
        margin-bottom: 12px;
        text-align: center;
    }
    
    .hero-description {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 25px;
        text-align: center;
        br {
            display: none;
        }
    }
    
    .btn-explore-chemicals {
        padding: 10px 25px;
        font-size: 12px;
        display: block;
        margin: 0 auto;
        text-align: center;
    }
    
    .best-selling-section-new {
        padding: 60px 0;
    }
    
    .section-header-new h2 {
        font-size: 0.9rem;
        padding: 0 20px;
    }
    
    .section-header-new {
        margin-bottom: 40px;
    }
    
    .product-showcase-new {
        gap: 20px;
    }
    
    .product-card_new {
        width: 95%;
        max-width: 280px;
    }
    
    .product-image-container_new {
        height: 200px;
        padding: 20px 15px;
    }
    
    .product-info_new {
        padding: 20px 15px;
    }
    
    .product-info_new h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    
    .product-info_new p {
        font-size: 0.85rem;
        margin-bottom: 15px;
    }
    
    .btn-more-details-new {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    
    .blood-collection-section-updated {
        padding: 60px 0;
    }
    
    .blood-collection-title {
        font-size: 1.4rem;
        line-height: 1.3;
        margin-bottom: 20px;
        text-align: center;
        br {
            display: none;
        }
    }
    
    .blood-collection-subtitle {
        font-size: 0.9rem;
        margin-bottom: 30px;
        text-align: center;
        br {
            display: none;
        }
    }
    
    .features-grid {
        gap: 15px;
        justify-content: center;
    }
    
    .feature-card {
        width: 140px;
        padding: 20px 15px;
    }
    
    .features-grid {
        gap: 15px;
    }
    
    .contact-form-container {
        padding: 30px 20px;
        margin: 0 10px;
        border-radius: 15px;
    }
    
    .contact-form-title {
        font-size: 1.3rem;
        margin-bottom: 10px;
        line-height: 1.3;
    }
    
    .contact-form-subtitle {
        font-size: 0.85rem;
        margin-bottom: 30px;
    }
    
    .form-row-custom {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 15px;
    }
    
    .form-control-custom-new {
        padding: 12px 15px;
        font-size: 0.9rem;
        border-radius: 8px;
    }
    
    .form-control-textarea {
        min-height: 100px;
    }
    
    .btn-send-message {
        padding: 12px 30px;
        font-size: 0.9rem;
        margin-top: 15px;
        max-width: 150px;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Extra small devices */
@media (max-width: 320px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-description {
        font-size: 0.85rem;
    }
    
    .blood-collection-title {
        font-size: 1.2rem;
    }
    
    .blood-testing-title {
        font-size: 1.2rem;
    }
    
    .feature-card {
        width: 120px;
        padding: 15px 10px;
    }
    
    .contact-form-title {
        font-size: 1.1rem;
    }
    
    .product-card-new {
        width: 98%;
    }
}
</style>

<body class="home-page">

<!-- Updated Hero Section with automatic background image slider -->
<section class="hero-section-updated" id="heroSection" style="background-image: url('images/home/hero1.png');">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-xl-6">
                <div class="hero-content-updated slide-in-left" id="heroContent">
                    <p class="hero-subtitle" id="heroSubtitle" style="color:#fff;font-size:1.1rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;">
                        YOUR TRUSTED SOURCE FOR
                    </p>
                    <h1 class="hero-title" id="heroTitle" style="color:#fff;">
                        LAB EQUIPMENT &<br>
                        RAPID TESTS
                    </h1>
                    <p class="hero-description" id="heroDesc" style="color:#fff;font-size:1.05rem;line-height:1.6;margin-bottom:35px;font-weight:400;opacity:0.95;max-width:500px;">
                        Discover a wide range of high-quality empty cosmetic bottles to elevate your brand.
                    </p>
                    <a href="products.php" class="btn btn-explore-chemicals">EXPLORE CHEMICALS</a>
                </div>
            </div>
        </div>
        <!-- Slider Dots -->
        <div id="heroDots" style="position:absolute;left:0;right:0;bottom:32px;display:flex;justify-content:center;z-index:3;">
            <span class="hero-dot" style="width:14px;height:14px;border-radius:50%;background:#1B4763;opacity:0.3;margin:0 6px;display:inline-block;transition:opacity 0.2s;"></span>
            <span class="hero-dot" style="width:14px;height:14px;border-radius:50%;background:#1B4763;opacity:0.3;margin:0 6px;display:inline-block;transition:opacity 0.2s;"></span>
            <span class="hero-dot" style="width:14px;height:14px;border-radius:50%;background:#1B4763;opacity:0.3;margin:0 6px;display:inline-block;transition:opacity 0.2s;"></span>
            <span class="hero-dot" style="width:14px;height:14px;border-radius:50%;background:#1B4763;opacity:0.3;margin:0 6px;display:inline-block;transition:opacity 0.2s;"></span>
        </div>
    </div>
    <script>
        // Hero slider data (all blue shades)
        const heroSlides = [
            {
                img: 'images/home/hero1.png',
                subtitle: 'YOUR TRUSTED SOURCE FOR',
                title: 'LAB EQUIPMENT &<br>RAPID TESTS',
                desc: 'Discover a wide range of high-quality empty cosmetic bottles to elevate your brand.',
                color: '#fff'
            },
            {
                img: 'images/home/hero2.jpeg',
                subtitle: 'ADVANCED DIAGNOSTICS',
                title: 'MODERN LABS<br>FOR MODERN SCIENCE',
                desc: 'Empowering research and diagnostics with state-of-the-art laboratory solutions.',
                color: '#07427D'
            },
            {
                img: 'images/home/hero3.png',
                subtitle: 'RELIABLE RAPID TESTS',
                title: 'FAST RESULTS,<br>CONFIDENT DECISIONS',
                desc: 'Get accurate results quickly with our range of rapid test kits for healthcare professionals.',
                color: '#1B4763'
            },
            {
                img: 'images/home/hero4.jpeg',
                subtitle: 'QUALITY GLASSWARE',
                title: 'PRECISION IN<br>EVERY MEASUREMENT',
                desc: 'Choose from our premium glassware for consistent and reliable laboratory performance.',
                color: '#07427D'
            }
        ];
        let heroIdx = 0;
        const dots = document.querySelectorAll('#heroDots .hero-dot');
        function updateHero() {
            const slide = heroSlides[heroIdx];
            document.getElementById('heroSection').style.backgroundImage = `url('${slide.img}')`;
            document.getElementById('heroSubtitle').textContent = slide.subtitle;
            document.getElementById('heroTitle').innerHTML = slide.title;
            document.getElementById('heroDesc').textContent = slide.desc;
            document.getElementById('heroSubtitle').style.color = slide.color;
            document.getElementById('heroTitle').style.color = slide.color;
            document.getElementById('heroDesc').style.color = slide.color;
            // Update dots
            dots.forEach((dot, i) => {
                dot.style.opacity = (i === heroIdx) ? '1' : '0.3';
            });
        }
        setInterval(() => {
            heroIdx = (heroIdx + 1) % heroSlides.length;
            updateHero();
        }, 6000); // 6 seconds
        // Ensure first slide is set
        updateHero();
    </script>
</section>

<!-- Updated Best Selling Products Section - FIXED REDIRECTS TO ABOUT US -->
<section class="best-selling-section-new">
    <div class="container">
        <div class="section-header-new fade-in">
            <h2>BEST SELLING PRODUCTS</h2>
        </div>
        
        <div class="product-showcase-new">
            <!-- Vacutainer Product -->
            <div class="product-card-new">
                <div class="product-image-container-new">
                    <img src="images/home/vacutainer.jpg" alt="Vacutainer">
                </div>
                <div class="product-info-new">
                    <h3>Vacutainer</h3>
                    <p>Professional blood collection tubes for accurate diagnostic testing</p>
                    <a href="about.php" class="btn-more-details-new">More Details ></a>
                </div>
            </div>
            
            <!-- Glass Beaker Product -->
            <div class="product-card-new">
                <div class="product-image-container-new">
                    <img src="images/home/p4.png" alt="Glass Beaker 25ml">
                </div>
                <div class="product-info-new">
                    <h3>Glass Beaker 25ml</h3>
                    <p>Precision laboratory glassware for accurate measurements</p>
                    <a href="about.php" class="btn-more-details-new">More Details ></a>
                </div>
            </div>
            
            <!-- Petri Dishes Product -->
            <div class="product-card-new">
                <div class="product-image-container-new">
                    <img src="images/home/petri.jpg" alt="Petri Dishes">
                </div>
                <div class="product-info-new">
                    <h3>Petri Dishes</h3>
                    <p>Sterile culture dishes for microbiological applications</p>
                    <a href="about.php" class="btn-more-details-new">More Details ></a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Updated Blood Collection Section -->
<section class="blood-collection-section-updated">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="blood-collection-content slide-in-left">
                    <h2 class="blood-collection-title">SAFE, COMFORTABLE, AND<br>QUICK BLOOD COLLECTION.</h2>
                    <p class="blood-collection-subtitle">PROFESSIONAL CARE WITH MINIMAL DISCOMFORT - YOUR HEALTH IS OUR PRIORITY.</p>
                    
                    <div class="features-grid">
                        <div class="feature-card">
                            <div class="feature-icon-updated">
                                <i class="fas fa-flask"></i>
                            </div>
                            <h6>EXPERIENCED<br>PHLEBOTOMISTS</h6>
                        </div>
                        
                        <div class="feature-card">
                            <div class="feature-icon-updated">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h6>STERILE<br>ENVIRONMENT</h6>
                        </div>
                        
                        <div class="feature-card">
                            <div class="feature-icon-updated">
                                <i class="fas fa-clock"></i>
                            </div>
                            <h6>FAST EFFICIENT<br>SERVICE</h6>
                        </div>
                    </div>
                    
                    <a href="contact.php" class="btn-contact-us">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Updated Products Showcase Section - REPLACED PRODUCTS IN POSITIONS 1, 3, 5 -->
<section class="products-section-updated">
    <div class="container">
        <div class="products-header">
            <h2 class="products-title">OUR PRODUCTS</h2>
            <a href="products.php" class="btn-view-more">VIEW MORE</a>
        </div>
        
        <!-- First Row - REPLACED POSITIONS 1 & 3 -->
        <div class="products-grid-updated">
            <!-- Position 1: REPLACED with Cocaine Rapid Test -->
            <div class="product-card-grid">
                <div class="product-image-grid" style="background-image: url('images/products/Cocaine (COC) Rapid Test Cassette.jpg');">
                    <div class="product-price-tag">Rs.850</div>
                </div>
                <div class="product-info-grid">
                    <h5>Cocaine (COC) Rapid Test Cassette</h5>
                    <p>Professional rapid diagnostic test for cocaine detection</p>
                </div>
            </div>
            
            <!-- Position 2: KEPT ORIGINAL -->
            <div class="product-card-grid">
                <div class="product-image-grid" style="background-image: url('images/home/p4.png');">
                    <div class="product-price-tag">Rs.850</div>
                </div>
                <div class="product-info-grid">
                    <h5>Measuring Cylinders</h5>
                    <p>Graduated cylinders for precise volume measurements</p>
                </div>
            </div>
            
            <!-- Position 3: REPLACED with Dengue Rapid Test -->
            <div class="product-card-grid">
                <div class="product-image-grid" style="background-image: url('images/products/Dengue Rapid Test Cassette.jpg');">
                    <div class="product-price-tag">Rs.1200</div>
                </div>
                <div class="product-info-grid">
                    <h5>Dengue Rapid Test Cassette</h5>
                    <p>Advanced dengue virus detection and diagnosis</p>
                </div>
            </div>
        </div>
        
        <!-- Second Row - KEPT POSITIONS 4 & 6, REPLACED POSITION 5 -->
        <div class="products-grid-updated">
            <!-- Position 4: KEPT ORIGINAL -->
            <div class="product-card-grid">
                <div class="product-image-grid" style="background-image: url('images/home/p4.png');">
                    <div class="product-price-tag">Rs.980</div>
                </div>
                <div class="product-info-grid">
                    <h5>Erlenmeyer Flasks</h5>
                    <p>Conical flasks for mixing and heating applications</p>
                </div>
            </div>
            
            <!-- Position 5: REPLACED with HBsAg Rapid Test -->
            <div class="product-card-grid">
                <div class="product-image-grid" style="background-image: url('images/products/HBsAg Rapid Test Cassette.jpg');">
                    <div class="product-price-tag">Rs.650</div>
                </div>
                <div class="product-info-grid">
                    <h5>HBsAg Rapid Test Cassette</h5>
                    <p>Hepatitis B surface antigen detection test</p>
                </div>
            </div>
            
            <!-- Position 6: KEPT ORIGINAL -->
            <div class="product-card-grid">
                <div class="product-image-grid" style="background-image: url('images/home/p3.png');">
                    <div class="product-price-tag">Rs.580</div>
                </div>
                <div class="product-info-grid">
                    <h5>Centrifuge Tubes</h5>
                    <p>Durable tubes for centrifugation and sample separation</p>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Fixed Blood Testing Section -->
<section class="blood-testing-section" style="background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)), url('images/home/bg2.png') center/cover no-repeat;">
    <div class="container">
        <h2 class="blood-testing-title">ACCURATE <span class="highlight">DIAGNOSTIC TESTING</span>,<br>RELIABLE RESULTS</h2>
        <p class="blood-testing-subtitle">EXPLORE NEW PRODUCTS</p>
        <a href="products.php" class="btn-discover-products">EXPLORE NEW PRODUCTS</a>
    </div>
</section>
<section class="partners-section py-5" style="background: #f8f9fa; border-bottom: 0; min-height:220px;">
    <style>
        @media (min-width: 768px) {
            .partners-marquee {
                display: flex;
                overflow: hidden;
                position: relative;
                height: 140px; /* Increased height */
                align-items: center;
            }
            .partners-marquee-track {
                display: flex;
                animation: marquee 16s linear infinite;
            }
            @keyframes marquee {
                0% { transform: translateX(0); }
                100% { transform: translateX(-50%); }
            }
            .partners-marquee img {
                margin: 0 40px;
                max-height: 120px; /* Increased image height */
                opacity: 0.9;
                transition: transform 0.3s;
            }
            .partners-marquee img:hover {
                transform: scale(1.1);
                opacity: 1;
            }
        }
    </style>
    <div class="container">
        <h2 class="text-center mb-4" style="color:#07427D;font-weight:700;text-transform:uppercase;letter-spacing:1px;">Our Partners</h2>
        <!-- Marquee for desktop, carousel for mobile -->
        <div class="d-none d-md-block">
            <div class="partners-marquee">
                <div class="partners-marquee-track">
                    <!-- Added the three partner images here -->
                    <img src="images/partners/citest.webp" alt="CiTest Diagnostic" class="img-fluid">
                    <img src="images/partners/mole.png" alt="Jiangsu Mole Bioscience" class="img-fluid">
                    <img src="images/partners/citotest.PNG" alt="Citotest Scientific" class="img-fluid">
                    <img src="images/partners/citest.webp" alt="CiTest Diagnostic" class="img-fluid">
                    <img src="images/partners/mole.png" alt="Jiangsu Mole Bioscience" class="img-fluid">
                    <img src="images/partners/citotest.PNG" alt="Citotest Scientific" class="img-fluid">
                   
                </div>
            </div>
        </div>
        <div class="d-md-none">
            <div id="partnersCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
                <div class="carousel-inner">
                    <!-- Slide 1: the three core partners -->
                    <div class="carousel-item active">
                        <div class="d-flex justify-content-center align-items-center gap-4">
                            <img src="images/partners/citest.webp" class="img-fluid mx-3" alt="CiTest Diagnostic" style="max-height:120px;">
                            <img src="images/partners/mole.png" class="img-fluid mx-3" alt="Jiangsu Mole Bioscience" style="max-height:120px;">
                            <img src="images/partners/citotest.PNG" class="img-fluid mx-3" alt="Citotest Scientific" style="max-height:120px;">
                        </div>
                    </div>
                    <!-- Slide 2: MNC logos -->
                    <div class="carousel-item">
                        <div class="d-flex justify-content-center align-items-center gap-4">
                            <img src="images/partners/mnc.png" class="img-fluid mx-3" alt="MNC" style="max-height:120px;">
                            <img src="images/partners/mnc.png" class="img-fluid mx-3" alt="MNC" style="max-height:120px;">
                            <img src="images/partners/mnc.png" class="img-fluid mx-3" alt="MNC" style="max-height:120px;">
                        </div>
                    </div>
                    <!-- Slide 3: mixed for variety -->
                    <div class="carousel-item">
                        <div class="d-flex justify-content-center align-items-center gap-4">
                            <img src="images/partners/mole.png" class="img-fluid mx-3" alt="Jiangsu Mole Bioscience" style="max-height:120px;">
                            <img src="images/partners/citest.webp" class="img-fluid mx-3" alt="CiTest Diagnostic" style="max-height:120px;">
                            <img src="images/partners/mnc.png" class="img-fluid mx-3" alt="MNC" style="max-height:120px;">
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#partnersCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#partnersCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Fixed Contact Section -->
<section class="contact-section" style="background: #eaf3fa; border-top: 2px solid #f8f9fa;">
    <div class="container">
        <div class="contact-form-container">
            <h2 class="contact-form-title">GET IN TOUCH WITH US</h2>
           
            <form>
                <!-- First Row: Last Name and First Name -->
                <div class="form-row-custom">
                    <div class="form-group">
                        <input type="text" class="form-control-custom-new" placeholder="Last Name" required>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control-custom-new" placeholder="First Name" required>
                    </div>
                </div>
                
                <!-- Second Row: Email and Phone Number -->
                <div class="form-row-custom">
                    <div class="form-group">
                        <input type="email" class="form-control-custom-new" placeholder="Email" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" class="form-control-custom-new" placeholder="Phone Number" required>
                    </div>
                </div>
                
                <!-- Message Field -->
                <div class="form-group">
                    <textarea class="form-control-custom-new form-control-textarea" rows="5" placeholder="Message" required></textarea>
                </div>
                
                <!-- Submit Button -->
                <button type="submit" class="btn-send-message">SEND</button>
            </form>
        </div>
    </div>
</section>

<?php include 'includes/footer.php'; ?>