/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #0056b3;
}

/* Header */
.header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 70px;
    display: flex;
    align-items: center;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo img {
    height: 40px; /* Adjust based on actual logo aspect ratio */
}

.nav-list {
    display: flex;
    gap: 30px;
}

.nav-list a {
    font-weight: 500;
    font-size: 16px;
    color: #555;
}

.nav-list a:hover {
    color: #007bff;
}

.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
}

.mobile-menu.active {
    transform: translateY(0);
}

.mobile-menu ul {
    display: flex;
    flex-direction: column;
}

.mobile-menu li {
    border-bottom: 1px solid #eee;
}

.mobile-menu a {
    display: block;
    padding: 15px 20px;
    color: #333;
    font-weight: 500;
}

/* Hero Section */
.hero {
    margin-top: 70px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 25px 0;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 5px;
    color: #2c3e50;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: #007bff;
    margin-bottom: 10px;
    font-weight: 500;
}

.hero p {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 15px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Sections */
.section {
    padding: 40px 0;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 25px;
    color: #2c3e50;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #007bff;
    margin: 7.5px auto 0;
}

/* About Section */
.about {
    background-color: #fff;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    align-items: center;
}

.about-text p {
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.stats-list {
    margin-top: 15px;
    display: flex;
    gap: 15px;
}

.stats-list li {
    flex: 1;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    border-left: 4px solid #007bff;
}

.stats-list strong {
    display: block;
    font-size: 2rem;
    color: #007bff;
    margin-bottom: 2.5px;
}

.about-image img {
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Grid Layout (Products) */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    row-gap: 30px;
}

.card {
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
}

.card-img-container {
    height: 180px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 4px;
    overflow: hidden;
}

.card-img-container img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.card h3 {
    margin-bottom: 7.5px;
    color: #2c3e50;
    font-size: 1.25rem;
}

.card p {
    color: #666;
    font-size: 0.95rem;
    flex-grow: 1; /* Pushes content to fill height */
}

/* Solutions Section (Features) */
.solutions {
    background-color: #f1f4f8;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.feature-item {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    text-align: left;
    border-top: 3px solid #007bff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-item h4 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #007bff;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.feature-list {
    list-style-type: none;
    padding: 0;
}

.feature-list li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #555;
    position: relative;
    padding-left: 15px;
}

.feature-list li::before {
    content: "•";
    color: #007bff;
    position: absolute;
    left: 0;
    top: 0;
}

.feature-list strong {
    color: #333;
    font-weight: 600;
}

/* Core Values Banner */
.core-values-banner {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-left: 5px solid #28a745;
}

.core-values-banner h3 {
    text-align: center;
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 25px;
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.value-item {
    text-align: center;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 6px;
}

.value-item h5 {
    font-size: 1.2rem;
    color: #28a745;
    margin-bottom: 10px;
}

.value-item p {
    font-size: 0.95rem;
    color: #666;
}

/* Contact Section */
.contact {
    background-color: #fff;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.contact-item h3 {
    margin-bottom: 10px;
    color: #007bff;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 5px;
    display: inline-block;
}

.contact-item p {
    margin-bottom: 5px;
    color: #555;
}

.contact-social .social-icons-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #f8f9fa;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.social-btn img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}

.social-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
}

.close-modal:hover {
    color: #333;
}

.modal-qr {
    max-width: 250px;
    margin: 10px auto;
}

/* Footer */
.footer {
    background-color: #007bff; /* Changed from #2c3e50 to match logo blue */
    color: #fff;
    padding: 15px 0;
    text-align: center;
}

/* Detail Page Styles */
.breadcrumb {
    padding: 10px 0;
    margin-top: 70px;
    font-size: 0.9rem;
    color: #666;
}

.breadcrumb a {
    color: #007bff;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.detail-header {
    margin-bottom: 20px;
    text-align: center;
}

.detail-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    color: #2c3e50;
}

.detail-hero-img {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.detail-body {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.slide-section {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.slide-section:last-child {
    border-bottom: none;
}

.slide-section h2 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 10px;
    border-left: 4px solid #007bff;
    padding-left: 15px;
}

.slide-section ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 10px;
}

.slide-section li {
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: #444;
}

/* Unified Image Gallery Styles */
.slide-images, .erp-gallery, .mes-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Base Image Style for all Galleries */
.slide-images img, .erp-gallery img, .mes-gallery img {
    width: 100%;
    height: auto; /* Allow height to adjust based on content */
    min-height: 200px; /* Ensure a minimum size */
    max-height: 400px; /* Prevent images from becoming too tall */
    object-fit: contain; 
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    background-color: #fcfcfc;
    border: 1px solid #f0f0f0;
    cursor: zoom-in;
}

.slide-images img:hover, .erp-gallery img:hover, .mes-gallery img:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* Specific Overrides for MES (Horizontal Scroll) if needed, 
   but grid is generally better for responsiveness. 
   Keeping grid as per user request for unified layout. 
   If horizontal scroll is strictly required, uncomment below:
*/
/* 
.mes-gallery {
    display: flex !important;
    overflow-x: auto;
    padding-bottom: 10px;
}
.mes-gallery img {
    min-width: 250px;
} 
*/

/* Industry Solutions Gallery Specific Styles */
.industry-gallery {
    display: flex !important;
    justify-content: center;
    margin-top: 30px;
}

.industry-highlight {
    max-width: 100%;
    width: auto !important; /* Override base style width */
    height: auto !important; /* Override base style height */
    max-height: 600px !important; /* Allow larger height */
    min-height: 300px;
    object-fit: contain;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    transform: scale(1.02); /* Slight initial scale to emphasize */
}

.industry-highlight:hover {
    transform: scale(1.05) translateY(-5px) !important;
}

/* Lightbox Styles (Enhanced) */
.lightbox {
    display: none;
    position: fixed;
    z-index: 2500;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    z-index: 2600;
}

.cta-section {
    text-align: center;
    background: #f1f4f8;
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.cta-section h3 {
    margin-bottom: 10px;
    color: #2c3e50;
}

/* Loading State */
.loading {
    text-align: center;
    padding: 25px;
    font-size: 1.2rem;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-list {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .stats-list {
        flex-direction: column;
    }
    
    .detail-body {
        padding: 20px;
    }
    
    .detail-header h1 {
        font-size: 2rem;
    }
}