/* NETCO Website Custom Styles */
/* Blue and White Theme for Dairy Industry Equipment Company */

:root {
    --primary-blue: #0066cc;
    --light-blue: #4da6ff;
    --dark-blue: #004799;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --medium-gray: #6c757d;
    --dark-gray: #343a40;
    --success-green: #28a745;
    --warning-yellow: #ffc107;
    --danger-red: #dc3545;
    --info-cyan: #17a2b8;
}

/* Global Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--dark-gray);
}

/* Override Bootstrap primary color */
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-primary:hover {
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.btn-outline-primary {
    color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-outline-primary:hover {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.text-primary {
    color: var(--primary-blue) !important;
}

.bg-primary {
    background-color: var(--primary-blue) !important;
}

.border-primary {
    border-color: var(--primary-blue) !important;
}

/* Navigation */
.navbar {
    transition: all 0.3s ease;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-link {
    font-weight: 500;
    color: var(--dark-gray) !important;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-blue) !important;
}

/* Hero Section */
.hero-section {
    min-height: 85vh; /* Set a substantial height for the hero area */
    display: flex;
    align-items: flex-end; /* Vertically align the content row to the bottom */
    padding: 3rem 0 0; /* Vertical padding for the section, removed bottom padding */
    /* background-color: var(--primary-blue) and color: var(--white) are applied via classes in HTML */
}

/* Styles for the text content within the hero section */
.hero-text-content h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem); /* Responsive font size for the main heading */
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 1rem;
}

.hero-text-content .lead {
    font-size: clamp(1rem, 2.5vw, 1.15rem); /* Responsive font size for lead paragraphs */
    margin-bottom: 1.5rem;
}

.hero-text-content .h4.fw-bold { /* Style for the tagline "We Specialize in Milk Management" */
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    margin-bottom: 2rem;
}

/* Custom styles for buttons within the hero section */
.hero-text-content .btn-light {
    background-color: var(--white);
    color: var(--primary-blue);
    border-color: var(--white);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
}
.hero-text-content .btn-light:hover {
    background-color: #f0f0f0; /* Slightly off-white for hover */
    color: var(--dark-blue);
    border-color: #f0f0f0;
}

.hero-text-content .btn-outline-light {
    color: var(--white);
    border-color: var(--white);
    padding: 0.75rem 1.5rem;
    font-weight: 500;
}
.hero-text-content .btn-outline-light:hover {
    background-color: var(--white);
    color: var(--primary-blue);
}

/* Container for the image block on the right */
.hero-image-container {
    display: flex;
    align-items: flex-end; /* Align image block to the bottom */
    height: 100%; /* Attempt to make it fill the column height */
}

/* The actual block that will display the background image */
.hero-image-block {
    width: 100%;
    min-height: 70vh; /* Increased from 50vh to make the image larger */
    background-image: url('../images/netco_theme_banner.png');
    background-size: contain; /* Ensure full image is visible, revert from cover */
    background-position: center bottom; /* Position image at the bottom of the block */
    background-repeat: no-repeat; /* Prevent tiling */
}

/* Cards and Components */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.card-img-top {
    width: 100%; /* Make images responsive */
    height: 200px; /* Fixed height for all images */
    object-fit: contain; /* Scale image to fit within the element, without cropping, maintaining aspect ratio */
    padding: 10px; /* Optional: Add some padding around the image */
    transition: transform 0.3s ease; /* Added for hover effect */
}

.service-icon, .contact-icon, .feature-icon, .value-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Product Cards */
/* This class is intended to be used alongside Bootstrap's .card class 
   e.g., <div class="card product-card h-100"> */
.product-card {
    overflow: hidden;
    border-radius: 10px;
    /* transition: transform 0.3s ease, box-shadow 0.3s ease; */ /* Combined with .card transition */
    /* .card class provides base structure, display:flex, flex-direction:column */
    /* .h-100 utility class should be used on the card for equal height in columns */
    /* Optional: Add a border if .card's border:none is too plain, or a default shadow */
    /* border: 1px solid #eee; */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.05); */
}

.product-card:hover {
    transform: scale(1.05) translateY(-5px); /* Combine scale with existing card hover translateY */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2) !important; /* Slightly more pronounced shadow */
}

.product-card:hover .card-img-top {
    transform: scale(1.1); /* Image zoom effect on product-card hover */
}

/* Styling for the title within the product card's body */
.product-card .card-body .card-title {
    font-size: 0.95rem; /* Consistent font size for product titles */
    color: var(--primary-blue);
    font-weight: 500;
    margin-bottom: 0; /* Remove bottom margin if it's just the title */
}

.product-category-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.product-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Product Gallery */
.product-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.product-gallery-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 102, 204, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-gallery-item:hover .overlay {
    opacity: 1;
}

/* Blog Cards */
.blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

/* Statistics Cards */
.stat-card {
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: 10px;
    border-left: 4px solid var(--primary-blue);
}

/* Feature Cards */
.feature-card {
    padding: 2rem 1rem;
}

.tech-feature {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--light-gray);
}

.tech-feature:last-child {
    border-bottom: none;
}

/* Topic Cards */
.topic-card {
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
}

.topic-card:hover {
    transform: translateY(-3px);
    background-color: white !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Forms */
.form-control {
    border: 2px solid var(--light-gray);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.form-control-lg {
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
}

/* Admin Styles */
.admin-sidebar {
    background: var(--light-gray);
    min-height: calc(100vh - 80px);
}

.admin-nav .nav-link {
    color: var(--dark-gray);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 0.25rem 0;
    transition: all 0.3s ease;
}

.admin-nav .nav-link:hover,
.admin-nav .nav-link.active {
    background-color: var(--primary-blue);
    color: white !important;
}

/* Table Styles */
.table th {
    border-top: none;
    font-weight: 600;
    color: var(--dark-gray);
    background-color: var(--light-gray);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 102, 204, 0.05);
}

/* Message Rows */
.message-row {
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.message-row:hover {
    background-color: rgba(0, 102, 204, 0.05) !important;
}

/* Alerts and Notifications */
.alert {
    border: none;
    border-radius: 10px;
    border-left: 4px solid;
}

.alert-success {
    border-left-color: var(--success-green);
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--success-green);
}

.alert-danger {
    border-left-color: var(--danger-red);
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--danger-red);
}

.alert-warning {
    border-left-color: var(--warning-yellow);
    background-color: rgba(255, 193, 7, 0.1);
    color: #856404;
}

.alert-info {
    border-left-color: var(--info-cyan);
    background-color: rgba(23, 162, 184, 0.1);
    color: var(--info-cyan);
}

/* Badges */
.badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
}

/* Article Content Styling */
.article-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    color: var(--primary-blue);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content p {
    margin-bottom: 1.5rem;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.article-content blockquote {
    border-left: 4px solid var(--primary-blue);
    background-color: var(--light-gray);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
}

.article-content ul,
.article-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.article-content li {
    margin-bottom: 0.5rem;
}

/* Breadcrumbs */
.breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-item a {
    color: var(--primary-blue);
    text-decoration: none;
}

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

/* Pagination */
.page-link {
    color: var(--primary-blue);
    border-color: var(--light-gray);
    padding: 0.75rem 1rem;
}

.page-link:hover {
    color: var(--dark-blue);
    background-color: var(--light-gray);
    border-color: var(--light-gray);
}

.page-item.active .page-link {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Loading States */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--primary-blue);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--light-gray);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-blue);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-blue);
}

/* Responsive Design */
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint for tablets and mobile */
    .hero-section {
        padding: 4.5rem 0 2rem; /* Adjusted top padding for navbar, kept bottom padding at 2rem */
        text-align: center; /* Center-align text content when stacked */
        min-height: auto; /* Allow height to be determined by content */
    }
    .hero-text-content {
        order: 1; /* Ensure text content is first when stacked */
    }
    .hero-image-container {
        order: 2; /* Image container follows text content */
        margin-top: 2rem; /* Add space above the image block when stacked */
    }
    .hero-image-block {
        min-height: 40vh; /* Adjust image block height for stacked view */
    }

    /* Style buttons to be more touch-friendly and centered on smaller screens */
    .hero-text-content .btn {
        display: block; /* Make buttons block-level */
        width: auto; /* Auto width based on content */
        max-width: 300px; /* Set a max-width for better appearance */
        margin-left: auto; /* Center buttons */
        margin-right: auto;
    }
    .hero-text-content .btn-lg.me-sm-2 { /* Adjust margin for first button */
        margin-right: auto !important; /* Override Bootstrap's responsive margin */
    }
    .hero-text-content .btn + .btn { /* Add space between stacked buttons */
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    /* .hero-section {
        min-height: 80vh;
        text-align: center;
    } Remove or adjust this if it conflicts with the 991.98px breakpoint styles */

    .display-4 {
        font-size: 2rem;
    }

    .display-5 {
        font-size: 1.5rem;
    }

    .service-icon,
    .contact-icon,
    .feature-icon,
    .value-icon {
        width: 60px;
        height: 60px;
    }

    .product-category-card .row {
        text-align: center;
    }

    .table-responsive {
        font-size: 0.875rem;
    }
}

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card-body {
        padding: 1.5rem;
    }

    .btn {
        font-size: 0.875rem;
    }

    .btn-lg {
        font-size: 1rem;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .btn,
    .admin-sidebar,
    .breadcrumb {
        display: none !important;
    }

    .container-fluid {
        margin: 0;
        padding: 0;
    }

    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
    }

    .text-primary {
        color: #000 !important;
    }

    .bg-primary {
        background: #fff !important;
        color: #000 !important;
    }
}

/* Custom Utility Classes */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.box-shadow {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.box-shadow-lg {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.border-radius {
    border-radius: 10px;
}

.border-radius-lg {
    border-radius: 15px;
}

.transition {
    transition: all 0.3s ease;
}

.hover-lift {
    transition: transform 0.3s ease;
}

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

.gradient-bg {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
}

.overlay-blue {
    background: rgba(0, 102, 204, 0.8);
}

.overlay-dark {
    background: rgba(0, 0, 0, 0.5);
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

.slide-in {
    animation: slideIn 0.5s ease-out;
}

.zoom-in {
    animation: zoomIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}