/* ==========================================================
   ROTATING BACKGROUND SLIDESHOW STYLES (New Body Styles)
   - 10 PNG images cycling every 3 seconds (30s total duration)
   ========================================================== */
/* Basic Styles */
body {
    background-color: #f0f0f0; 
    font-family: Arial, sans-serif; 
    margin: 0; 
    padding: 0;
}

h1 {
    color: #007bff; 
    text-align: center; 
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin: 40px auto 20px;
    max-width: 90%;
}

p {
    color: #333333; 
    font-size: 18px;
    line-height: 1.6;
    max-width: 90%;
    margin: 0 auto 20px;
}

/* ====================================
   CONTENT WRAPPER FOR READABILITY (DARK OVERLAY)
   ==================================== */
.content-wrapper {
    position: relative;
    z-index: 2; 
    /* Dark overlay (Black, 60% opacity) to ensure WHITE text 
       is visible over a bright background image. */
    background-color: rgba(0, 0, 0, 0.6); 
    min-height: 100vh; 
    /* Sets default text color inside content-wrapper to WHITE */
    color: #ffffff; 
}


/* The rest of your original styles follow below */

h1 {
    color: #007bff; 
    text-align: center; 
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin: 40px auto 20px;
    max-width: 90%;
}
/* Also change the default paragraph text color to WHITE so it appears on the new dark overlay */
p {
    .bg-light p { color: #333333 !important; }
    font-size: 18px;
    line-height: 1.6;
    max-width: 90%;
    margin: 0 auto 20px;
}

/* --- FIXED LAYOUT STYLING --- */
.fixed-layout-body {
    /* Set up the body to fill the entire viewport */
    height: 100vh; 
    display: flex;
    flex-direction: column; /* Stack header, main, and footer vertically */
    overflow: hidden; /* Prevent the entire body from scrolling */
}

/* FIX 1: Wrapper to keep both top-bar and main-header fixed */
.sticky-top-wrapper {
    position: sticky;
    top: 0;
    z-index: 1020; /* High z-index to stay on top */
    width: 100%;
    flex-shrink: 0; 
}


/* --- TOP BLACK BAR STYLING (.top-header) --- */
.top-header {
    background-color: #333; 
    color: #ffffff; 
    font-size: 14px;
    width: 100%;
}

.top-header .contact-info span {
    color: #ffffff;
    /* Font weight is bold in the image */
    font-weight: bold; 
}

.top-header .social-links a {
    color: #ffffff;
    text-decoration: none;
    margin-left: 10px;
    font-weight: bold; /* Make social links look like the image */
}


/* --- Header and Logo Style (White Bar) --- */
.main-header {
    background-color: #ffffff; 
    padding: 10px 20px;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    
    /* FIX 2: Use Flexbox to align logo, nav, and button as seen in About Us page */
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
}

/* --- START: Logo Text Styles added for brand name and tagline --- */
.logo-text-link {
    flex-shrink: 0; 
    margin-right: 20px;
}

.logo-text-container {
    line-height: 1; /* Brings the two lines of text closer */
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.logo-main-text {
    color: #007bff; 
    font-size: 1.1rem; 
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap; 
}

.logo-sub-text {
    /* Retaining previous fix: smaller and forced single line (your trusted business partner) */
    font-size: 0.65rem; 
    color: #777777 !important; 
    margin-top: 2px !important;
    white-space: nowrap; 
}
/* --- END: Logo Text Styles --- */


.logo-link {
    flex-shrink: 0; 
    margin-right: 20px; /* Space between logo and menu/nav */
}

.logo-image {
    height: 60px; /* Updated height to 60px for consistency */
    vertical-align: middle;
}

/* Navigation - FIXED FOR CENTERING */
.main-nav {
    /* FIX 3: Allows navigation to take up the center space and centers its content */
    flex-grow: 1; 
    text-align: center; 
}

.main-nav a {
    text-decoration: none;
    color: #333;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 4px;
    transition: background-color 0.3s;
    display: inline-block; 
}

.main-nav a:hover, .main-nav a.active {
    background-color: #007bff;
    color: white;
}

/* Quick Inquiry Button */
.quick-inquiry-box {
    flex-shrink: 0; 
}
.quick-inquiry-btn {
    font-weight: bold;
}

/* --- MAIN CONTENT POSITION --- */
main {
    flex-grow: 1; 
    overflow-y: auto; /* Allows content inside main to scroll */
}


/* --- Footer Styling (Fixed at the bottom) --- */
.fixed-footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 20px;
    font-size: 14px;
    flex-shrink: 0; 
}

.fixed-footer .social-links a {
    color: #007bff;
    text-decoration: none;
    margin: 0 5px;
}

.fixed-footer .social-links a:hover {
    text-decoration: underline;
}

/* --- Product Page Specific Styles --- */

.product-container {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ... rest of the product card styles ... */
.product-card {
    background-size: cover;
    background-position: center;
    color: white !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: 200px;
    position: relative;
    overflow: hidden;
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4); 
    border-radius: 8px;
    z-index: 1;
}

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

.product-card .card-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align: center;
}

.product-card .card-title {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.product-card .card-text {
    font-size: 1rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.product-card .btn-light {
    background-color: rgba(255, 255, 255, 0.9);
    color: #007bff;
    border: none;
    font-weight: bold;
}

.machinery-card {
    text-decoration: none;
    color: white !important;
}


/* Individual Card Background Images */
.card-pharma-machi { background-image: url('pharma_machi.jpg'); }
.card-raw-mats { background-image: url('raw_mats.jpg'); }
.card-generators { background-image: url('generators.jpg'); }
.card-feed-machi { background-image: url('feed_machi.jpg'); }
.card-agri-machi { background-image: url('agri_machi.jpg'); }
.card-power-trans { background-image: url('power_trans.jpg'); }
.card-led-bulbs { background-image: url('led_bulbs.jpg'); }
.card-solar-led-dist { background-image: url('solar_led_dist.jpg'); }
.card-ecozen-cold { background-image: url('ecozen_cold.jpg'); }
.card-solar-charge-bike { background-image: url('solar_charge_bike.jpg'); }
.card-net-metering { background-image: url('net_metering.jpg'); }
.card-off-grid-solar { background-image: url('off_grid_solar.jpg'); }
.card-turn-key { background-image: url('turn_key.jpg'); }
.card-custom-machi { background-image: url('custom_machi.jpg'); }


/* =========================================================
  ADDITIONAL MOBILE OPTIMIZATION STYLES (REQUIRED FIXES)
========================================================= 
*/

@media screen and (max-width: 992px) {
    
    /* 1. Top Header Bar Fixes */
    .top-header-bar .container-fluid {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .top-header-bar .contact-info {
        margin-bottom: 5px;
        display: flex;
        flex-direction: column;
    }
    .top-header-bar .contact-info span {
        margin-right: 0 !important;
    }
    .top-header-bar .top-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    /* 2. Text Size Fix (Ensuring readability) */
    body {
        font-size: 16px; /* Ensure body text is readable */
    }
    /* Logo text smaller on mobile (JA CORPORATION) */
    .logo-main-text {
        font-size: 0.9rem;
    }
    /* Retaining previous fix for tagline on mobile */
    .logo-sub-text {
        font-size: 0.55rem;
    }
    
    h1 {
        font-size: 2em; /* Slightly reduce heading size */
    }
    h2 {
        font-size: 1.5em; 
    }

    /* === MOBILE MENU FIX (RESTORING COLLAPSE BEHAVIOR AS PER SAMPLE IMAGE) === */
    /* By removing the 'display: block !important' and ensuring the toggler is visible,
       we restore the default Bootstrap menu collapse behavior.
    */
    .main-header {
        flex-wrap: wrap; 
        padding-bottom: 0;
    }
    
    /* Ensure Toggler is visible (default, but needed after previous override attempt) */
    .navbar-toggler {
        display: block !important; 
    }
    
    /* Allow Bootstrap JS to handle the collapsing of the menu */
    .navbar-collapse {
        /* These styles override the previous attempt to force it open */
        width: 100%; 
        order: 3; 
        padding-top: 0;
        border-top: none; 
        /* The `display: block !important;` from the previous step is now removed implicitly
           to allow `.collapse` and `.collapsing` states to work correctly.
        */
    }
    
    /* Adjust navigation links look when the menu IS opened by clicking the toggler */
    .main-nav {
        width: 100%;
        padding-top: 5px;
        padding-bottom: 10px;
        text-align: left; /* Alignment changed to left for standard mobile drop-down */
    }
    
    .main-nav a {
        display: block; /* Make links take full width in the drop-down */
        padding: 10px 15px; /* Better touch target */
        margin: 0;
        border-bottom: 1px solid #eee; /* Visual separation for links */
        font-size: 1rem;
    }
    
    /* Remove border from the last item for a cleaner look */
    .main-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }
    
    /* 3. Mega Menu Fix (Ensuring columns stack correctly) */
    .megamenu-content {
        position: static !important; 
        box-shadow: none !important;
        border: none !important;
        padding: 10px 0;
    }
    
    .megamenu-content .col-md-3 {
        padding: 10px 15px;
        border-bottom: 1px solid #eee; /* Separator for sections */
    }
    
    /* 4. Image Responsiveness */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* 5. Footer Padding/Spacing */
    .site-footer .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* 6. Clean up the small media query previously defined by user */
    .main-header {
        /* Remove redundant mobile styling from old 600px query */
        flex-direction: unset;
        align-items: unset;
    }
    
    .lang-switcher-container {
        /* Ensure it remains in the fixed position if used outside Bootstrap structure */
        position: absolute; 
        top: 65px; 
        margin-top: 0;
    }
}

/*
====================================
  Touch Targets (Making buttons/links easier to tap)
====================================
*/

/* Add extra padding for touch-friendly elements */
.btn, .dropdown-item, .nav-link, a.nav-link {
    padding: 10px 15px !important;
}

/* Increase size of footer links */
.footer-links li a, .footer-contact li {
    padding: 5px 0;
    display: block;
}

/* ====================================
   FIX: Text color for the 'Core Expertise' section 
   The parent div has a light background (bg-light), so the default 
   white text needs to be overridden to black/dark for readability.
   The HTML uses: <div class="p-5 my-5 bg-light...">...</div>
   We target the 'p' tags inside this light-background section.
   ==================================== */
.bg-light p {
    color: #333333 !important; /* Set to a dark grey/black color */
}

/* FIX: Also ensure the lead paragraph on the home page is dark, as its outside the white-text content-wrapper */
.container p.lead {
    color: #333333 !important;
}

/* Enable scrolling for the Project dropdown menu when it contains too many items */
.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

/* ----------------------------------------------------
   PROJECT SIDEBAR MENU STYLES (for project.html)
   ---------------------------------------------------- */

.sidebar-heading {
    /* Style for the sidebar title */
    margin-bottom: 10px;
    font-size: 1.25rem;
    padding-left: 15px;
    color: #333; /* Ensuring dark color for readability */
}

.sidebar-project-list {
    /* Main container for the list of 24 project items */
    max-height: 400px; /* Sets the max height for the list */
    overflow-y: auto;  /* Enables vertical scrolling */
    
    /* Basic styling to resemble a list/dropdown structure */
    list-style: none;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

.sidebar-project-list .list-group-item {
    /* Styling for individual list items */
    border: none;
    border-bottom: 1px solid #eee;
    padding: 10px 15px;
    transition: background-color 0.2s; /* Smooth transition on hover */
}

.sidebar-project-list .list-group-item:last-child {
    /* Removes the bottom border from the last item for a cleaner look */
    border-bottom: none;
}

.sidebar-project-list .list-group-item:hover {
    /* Hover effect for better user experience */
    background-color: #f8f9fa; 
}

.sidebar-project-list .list-group-item a {
    /* Ensures the link text is dark and fills the item area */
    display: block;
    color: #333 !important; /* Ensure text is dark and readable */
    text-decoration: none;
}

/* Specific image sizing for project-pallet.html */
.project-image {
    max-width: 100%; /* Will take up the full space of the container */
    width: 350px; /* Maximum width will be 350px on desktop */
    height: auto; /* Maintains the aspect ratio */
    display: block; /* For centering */
    margin: 0 auto; /* To bring the image to the center */
}

/* For small devices */
@media (max-width: 368px) {
    .project-image {
        width: 100%; /* Will be full-screen width on mobile */
    }
}

/* --- New Styles for Product Sidebar (product.html) --- */

/* Main container for product page layout */
.product-page-content {
    padding-top: 20px;
}

/* Sidebar Styling */
#product-sidebar .list-group-item {
    border: none;
    border-bottom: 1px solid #ddd;
}
#product-sidebar .list-group-item:last-child {
    border-bottom: none;
}

/* Category Link Styling (The main clickable area) */
#product-sidebar a {
    color: #333 !important;
    font-size: 1.05rem;
    transition: background-color 0.2s;
}

#product-sidebar a:hover {
    background-color: #f8f9fa; /* Light background on hover */
}

/* Indicator arrow styling */
#product-sidebar .fa-chevron-down {
    transition: transform 0.3s ease;
}

/* Rotate arrow when dropdown is expanded */
#product-sidebar a[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* --- Styles for Product Sidebar (product.html) --- */

/* Sidebar list container - This is the SCROLLING BOX */
#product-sidebar {
    max-height: 450px; /* Set a maximum height for the sidebar content */
    overflow-y: auto; /* Show vertical scrollbar if content exceeds max-height */
    
    padding-left: 0; 
    margin-bottom: 0;
}

/* Scrollbar Customization (Optional: Makes scrollbar thinner/nicer on WebKit browsers) */
#product-sidebar::-webkit-scrollbar {
    width: 6px;
}
#product-sidebar::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}
#product-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Sidebar Item Styling */
#product-sidebar .list-group-item {
    border: none;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    /* Important: p-0 is added in HTML to control padding via the nested A tag */
}
#product-sidebar .list-group-item:last-child {
    border-bottom: none;
}

/* Category Link Styling (The main clickable area for the category) */
#product-sidebar a {
    color: #333 !important;
    font-size: 1.05rem;
    transition: background-color 0.2s;
}

#product-sidebar a:hover {
    background-color: #f8f9fa; /* Light background on hover */
}

/* Indicator arrow styling */
#product-sidebar .fa-chevron-down {
    transition: transform 0.3s ease;
}

/* Rotate arrow when dropdown is expanded */
#product-sidebar a[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

/* Sub-Product List Styling (The dropdown content) */
.sub-product-list {
    background-color: #f1f1f1; /* Slightly different background for sub-list */
    padding-left: 0;
    margin-bottom: 0;
}

.sub-product-list .list-group-item {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 2.5rem; /* Indentation for sub-items */
    font-size: 0.95rem;
    border-top: 1px dashed #e0e0e0;
}

.sub-product-list .list-group-item:first-child {
    border-top: none;
}

.sub-product-list .list-group-item a:hover {
    color: #0056b3 !important; /* Blue hover effect for sub-items */
}

/* Mobile adjustments: Stack sidebar and content */
@media (max-width: 991.98px) {
    .main-product-area {
        margin-top: 20px;
    }
}

/* ====================================
   NAVIGATION BAR FIX: To ensure the search icon aligns with links
   ==================================== */
.main-nav {
    display: flex; 
    align-items: center; /* Vertically center all links and the icon */
    /* If you need spacing between the links, you might also add: */
    /* gap: 10px; */ 
}

/* Optional: To ensure the link color is black as intended by text-black class on icon */
.main-nav .nav-link {
    color: black!important;
}

/* ==========================================================
   SLIDESHOW BANNER STYLES (Fixed Height, In-Document Flow)
   ========================================================== */

/* 1. Slideshow Container (ul) and Overlay (after) - Now a standard block element */
.cb-slideshow, 
.cb-slideshow:after { 
    position: relative; /* Removes fixed position */
    width: 100%; 
    height: 25vh; /* Sets height to 25% of the viewport height (approx 250px-300px) */
    top: 0px; 
    left: 0px; 
    margin: 0; /* Ensures no extra spacing */
    z-index: 0; 
}

/* 2. Create a dark transparent overlay for better text readability */
/* Overlay will cover the entire banner area */
.cb-slideshow:after { 
    content: '';
    position: absolute; /* Needed because its parent is relative */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
}

/* 3. Individual Slide Item (li) */
.cb-slideshow li { 
    width: 100%; 
    height: 100%; /* Takes up 100% of the ul (which is 25vh) */
    position: absolute; 
    top: 0px; 
    left: 0px;
    list-style: none;
    background-size: cover; 
    background-position: 50% 50%; 
    background-repeat: no-repeat;
    opacity: 0; 
    z-index: 0; /* Keep li behind the overlay */
    animation: imageAnimation 30s linear infinite 0s; 
}

/* 4. Image Paths (Change .png to .jpg if your files are jpg) */
.cb-slideshow li:nth-child(1) { background-image: url('images/slide1.png'); }
.cb-slideshow li:nth-child(2) { background-image: url('images/slide2.png'); animation-delay: 3s; }
.cb-slideshow li:nth-child(3) { background-image: url('images/slide3.png'); animation-delay: 6s; }
.cb-slideshow li:nth-child(4) { background-image: url('images/slide4.png'); animation-delay: 9s; }
.cb-slideshow li:nth-child(5) { background-image: url('images/slide5.png'); animation-delay: 12s; }
.cb-slideshow li:nth-child(6) { background-image: url('images/slide6.png'); animation-delay: 15s; }
.cb-slideshow li:nth-child(7) { background-image: url('images/slide7.png'); animation-delay: 18s; }
.cb-slideshow li:nth-child(8) { background-image: url('images/slide8.png'); animation-delay: 21s; }
.cb-slideshow li:nth-child(9) { background-image: url('images/slide9.png'); animation-delay: 24s; }
.cb-slideshow li:nth-child(10) { background-image: url('images/slide10.png'); animation-delay: 27s; }


/* 5. Keyframes (Animation is fine) */
@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    3% { opacity: 1; transform: scale(1.05); } 
    10% { opacity: 1; transform: scale(1.1); } 
    13% { opacity: 0; transform: scale(1.15); animation-timing-function: ease-out; } 
    100% { opacity: 0 } 
}

#heroCarousel .carousel-item img {
    height: 250px; 
    object-fit: cover; 
}