/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333333;
    overflow-x: hidden;
}

/* Navbar Styling */
.navbar {
    background: linear-gradient(90deg, #000000 0%, #333333 100%); /* Smooth gradient */
    border-bottom: 3px solid #FF6600; /* Thicker accent color border */
    padding: 15px 25px; /* Increased padding for a more spacious look */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
}

.logo-img {
    width: 200px; /* Adjust logo size for consistency */
    height: auto;
}

.navbar-brand {
    font-size: 1.5em; /* Slightly smaller font size for the brand */
    font-weight: bold; /* Bold brand text */
    color: #FF6600; /* Accent color for brand */
    text-transform: uppercase; /* Uppercase for a professional look */
    letter-spacing: 1px; /* Slight letter spacing */
}

.navbar-nav .nav-item {
    margin-left: 20px; /* Increased space between menu items */
}

.navbar-nav .nav-link {
    font-size: 1em; /* Standard font size */
    color: #FFFFFF; /* White text color */
    font-weight: 500; /* Medium font weight */
    text-transform: uppercase; /* Uppercase text for uniformity */
    transition: color 0.3s, border-bottom 0.3s, padding-bottom 0.3s; /* Smooth transition for hover effects */
}

.navbar-nav .nav-link:hover {
    color: #FF6600; /* Accent color on hover */
    border-bottom: 3px solid #FF6600; /* Thicker underline effect on hover */
    padding-bottom: 5px; /* Added space under text for visual effect */
}

.navbar-toggler {
    border: none;
    background-color: transparent; /* Remove default border */
    outline: none; /* Remove outline */
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="%23FFFFFF" stroke-width="2" d="M5 7h20M5 15h20M5 23h20"/%3E%3C/svg%3E'); /* Custom toggle icon */
}

/* Responsive Navbar */
@media (max-width: 992px) {
    .navbar-nav {
        text-align: center;
        padding-top: 15px; /* Added padding for better spacing on mobile */
    }

    .navbar-nav .nav-item {
        margin: 10px 0; /* Space between items on mobile */
    }

    .navbar-toggler-icon {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="%23FFFFFF" stroke-width="2" d="M5 7h20M5 15h20M5 23h20"/%3E%3C/svg%3E'); /* Custom toggle icon for mobile */
    }
}


/* Hero Section Styling */
.hero-content {
    padding: 100px 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('banner.jpeg') no-repeat center center; /* Background image with gradient overlay */
    background-size: cover;
    color: #FFFFFF;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.hero-slider {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.hero-content h1 {
    font-size: 4em; /* Larger font size */
    font-weight: bold;
    margin-bottom: 0.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Shadow for better readability */
}

.hero-content p {
    font-size: 1.5em;
    margin-bottom: 1em;
    max-width: 80%; /* Limit text width */
    text-align: center;
    line-height: 1.5;
}

.hero-content .btn {
    padding: 12px 24px; /* Larger button */
    font-size: 1.2em;
    border-radius: 25px; /* Rounded button */
    background-color: #FF6600;
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Button shadow */
    transition: background-color 0.3s, box-shadow 0.3s;
}

.hero-content .btn:hover {
    background-color: #E55B00;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Section Styling */
section {
    padding: 4em 2em; /* Increased padding for better spacing */
    text-align: center;
}

#why {
    padding: 5em 0;
    background: #f0f4f8; /* Light greyish-blue background for a more professional feel */
}

#why h2 {
    margin-bottom: 2.5em;
    font-size: 2.8em;
    color: #333;
    text-align: center;
    font-weight: 600;
    font-family: 'Roboto', sans-serif; /* Modern, clean font */
}

.info-box {
    background: #ffffff; /* White background for each box */
    padding: 2em;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 2.5em; /* Increased space between rows */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensures content stays within rounded corners */
    position: relative;
}

.info-box:hover {
    transform: translateY(-12px); /* Slightly lift the box on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* More pronounced shadow on hover */
}

.info-box h3 {
    font-size: 1.6em;
    color: #FF6600; /* Accent color */
    margin-bottom: 0.75em;
    font-family: 'Roboto', sans-serif; /* Consistent font */
}

.info-box p {
    color: #555; /* Slightly darker grey for text */
    font-family: 'Arial', sans-serif; /* Simple font for readability */
}

.info-icon {
    font-size: 3em; /* Larger icons for better visibility */
    color: #FF6600; /* Accent color */
    margin-bottom: 1.5em;
    transition: color 0.3s ease; /* Smooth color transition on hover */
}

.info-box:hover .info-icon {
    color: #e65c00; /* Slightly darker shade on hover */
}

.favicon-container {
    text-align: center;
    margin-top: 3em; /* Increased margin for better separation */
}

.favicon {
    width: 40px; /* Slightly larger favicon */
    height: auto;
    animation: rotate 12s linear infinite; /* Slower rotation for subtle effect */
}

/* Animation for the favicon */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#solutions {
    padding: 4em 1em; /* Increased padding for better spacing */
    background: #f8f9fa; /* Light background color for contrast */
}

#solutions h2 {
    margin-bottom: 2em;
    font-size: 2.5em;
    color: #333;
    text-align: center;
    font-weight: bold;
    font-family: 'Roboto', sans-serif; /* Modern font */
}

/* Solution Cards */
.solution-card {
    background: #ffffff; /* White background for each card */
    border: none;
    border-radius: 12px; /* Slightly rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Increased shadow for depth */
    overflow: hidden; /* Ensures no overflow of content */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    padding: 1.5em;
    margin-bottom: 2em; /* Space below each card */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Solution Icons (Images) */
.solution-icon {
    width: 100%; /* Set image width to fill the container */
    max-width: 200px; /* Limit the image size */
    height: 200px; /* Equal height for all images */
    margin-bottom: 1.5em; /* Space below the image */
    object-fit: cover; /* Cover to maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for the image */
}

/* Solution Body */
.solution-body {
    padding: 1em;
}

/* Solution Titles */
.solution-title {
    font-size: 1.6em;
    color: #333;
    margin-bottom: 0.5em;
    font-family: 'Roboto', sans-serif; /* Consistent font */
}

/* Solution Descriptions */
.solution-description {
    color: #666;
    font-size: 1.1em;
}

/* Hover Effects */
.solution-card:hover {
    transform: translateY(-12px); /* Lift the card more on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Responsive Layout */
@media (max-width: 767px) {
    .solution-card {
        flex: 1 1 100%; /* Stacks the cards on small screens */
        margin-bottom: 1.5em;
    }
}

@media (min-width: 768px) {
    .solution-card {
        flex: 1 1 30%; /* Equal card size on medium screens */
        margin: 1em;
    }
}

/* about */

#about {
    padding: 4em 1em; /* Enhanced padding for better spacing */
    background-color: #f0f4f8; /* Light gray background for contrast */
    color: #333333; /* Dark text color for readability */
}

#about h2 {
    font-size: 2.5em;
    margin-bottom: 1em;
    text-align: center;
    color: #000000; /* Primary color for headings */
    font-weight: bold; /* Bold heading text */
    font-family: 'Roboto', sans-serif; /* Modern font */
}

/* Card Styling */
.card {
    border-radius: 15px; /* Rounded corners for a modern look */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Pronounced shadow for depth */
    margin: 1em 0; /* Margin for vertical spacing */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    overflow: hidden; /* Ensure content does not overflow */
    position: relative; /* For positioning the favicon */
    background-color: #ffffff; /* White background for card body */
}

.card-img-top {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px; /* Set height for consistency */
    background-color: #f0f4f8; /* Light gray background to match section */
}

.card-img-top i {
    color: #FF6600; /* Accent color for the icons */
    font-size: 3em; /* Ensure icons are prominent */
}

.card-body {
    padding: 1.5em; /* Padding for content spacing */
    text-align: center; /* Center align text */
}

.card-title {
    font-size: 1.4em; /* Font size for title */
    margin-top: 0.5em;
    color: #FF6600; /* Accent color for the title */
    font-weight: bold; /* Bold title text */
    font-family: 'Roboto', sans-serif; /* Consistent font */
}

.card-text {
    font-size: 1em;
    color: #555555; /* Lighter color for text */
    margin-top: 0.5em; /* Space between text and title */
    font-family: 'Arial', sans-serif; /* Simple font for readability */
}

/* Hover Effect */
.card:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Button Styling */
.btn-primary {
    background-color: #FF6600; /* Accent color for the button */
    color: #FFFFFF; /* White text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners for button */
    padding: 0.5em 1em; /* Padding for button */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Make the button inline with text */
    font-size: 1em; /* Button text size */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions */
}

.btn-primary:hover {
    background-color: #e65c00; /* Darker shade for hover effect */
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Products Section */
#our-products {
    padding: 4em 1em; /* Enhanced padding for spacing */
    background-color: #ffffff; /* Light background for contrast */
    color: #333333; /* Dark text color for readability */
}

#our-products h2 {
    font-size: 2.5em;
    margin-bottom: 1.5em;
    text-align: center;
    color: #000000; /* Primary color for headings */
    font-weight: bold; /* Bold heading text */
}

/* Flexbox to Ensure Equal Height */
.row {
    display: flex; /* Use flexbox to enable equal height */
    justify-content: space-between; /* Align items evenly across the row */
    flex-wrap: wrap; /* Allow wrapping for responsiveness */
}

.col-md-3 {
    display: flex; /* Ensure each column behaves as a flex container */
    justify-content: space-between; /* Space out content inside each column */
    align-items: stretch; /* Ensure all columns stretch to the same height */
    flex: 1; /* Distribute equal width to each column */
}

.info-box {
    display: flex;
    flex-direction: column; /* Stack content vertically inside each box */
    justify-content: space-between; /* Make sure the content is spaced within the box */
    padding: 1em; /* Add padding for content spacing */
    background: #ffffff; /* White background for info-box */
    border-radius: 10px; /* Rounded corners for boxes */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    text-align: center; /* Center the text */
}

/* Icons in the info-box */
.info-icon {
    font-size: 2rem; /* Large icons */
    margin-bottom: 1rem; /* Space below icons */
}

/* Section Title */
#why h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 2em;
    font-family: 'Roboto', sans-serif; /* Modern font */
    font-weight: bold;
}

/* Optional: Adjust for smaller screens */
@media (max-width: 768px) {
    .col-md-3 {
        flex: 0 0 100%; /* Make columns full width on smaller screens */
        margin-bottom: 1.5em; /* Add spacing between rows */
    }
}

.product-card {
    display: flex; /* Enables Flexbox for alignment */
    flex-direction: column; /* Vertical layout */
    border-radius: 15px; /* Modern rounded corners */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    margin: 1.5rem; /* Consistent spacing */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover animation */
    overflow: hidden; /* Prevents overflow issues */
    max-width: 450px; /* Restrict the card width */
    background-color: #fff; /* Clean white background */
}

/* Card Image */
.product-card-img {
    width: 100%; /* Full width for the image */
    height: 250px; /* Fixed height */
    object-fit: cover; /* Ensure consistent cropping */
    border-radius: 15px 15px 0 0; /* Rounded corners for the top */
    transition: transform 0.3s ease; /* Smooth hover zoom */
}

/* Card Title */
.product-card-title {
    font-size: 1.25rem; /* Consistent title size */
    font-weight: bold; /* Bold for emphasis */
    color: #FF6600; /* Accent color */
    text-align: center; /* Center-aligned text */
    margin: 0.75rem 0; /* Spacing above and below */
}

/* Card Body */
.product-card-body {
    display: flex; /* Flex layout for even spacing */
    flex-direction: column; /* Vertical stacking */
    justify-content: space-between; /* Space out elements */
    padding: 1rem; /* Consistent padding */
    height: auto; /* Adjust height dynamically */
    flex-grow: 1; /* Ensures body takes up space */
}

/* Card Text */
.product-card-text {
    font-size: 1rem; /* Consistent paragraph size */
    color: #555; /* Subtle gray for readability */
    line-height: 1.5; /* Improve text spacing */
    margin-bottom: 1rem; /* Add spacing below */
}

/* Button */
.btn-primary {
    background-color: #FF6600; /* Accent color */
    color: #fff; /* White text for contrast */
    padding: 0.75rem 1.5rem; /* Uniform padding */
    border-radius: 8px; /* Rounded corners */
    font-size: 1rem; /* Standard button text size */
    font-weight: bold; /* Slightly bold text */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth hover animation */
    display: inline-block; /* Ensure proper alignment */
    margin: auto; /* Center-align button */
}

/* Hover Effects */
.btn-primary:hover {
    background-color: #e55a00; /* Darker orange */
    transform: translateY(-2px); /* Slight lift */
}

.product-card:hover {
    transform: scale(1.02); /* Slight zoom */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

.product-card-img:hover {
    transform: scale(1.05); /* Gentle zoom effect */
}

/* Responsive Design */
@media (max-width: 768px) {
    .product-card {
        max-width: 100%; /* Full-width on smaller screens */
        margin: 1rem auto; /* Center-align cards */
    }

    .product-card-img {
        height: 200px; /* Adjust image height */
    }

    .btn-primary {
        width: 100%; /* Full-width button */
        text-align: center; /* Align text */
    }
}

#contact {
    padding: 4em 0;
    background: url('contact.jpeg') no-repeat center center;
    background-size: cover;
    color: #FFFFFF; /* Text color to stand out on the background */
}

#contact h2 {
    margin-bottom: 2em;
    font-size: 2.8em; /* Larger font size for prominence */
    color: #FFFFFF; /* White text color for contrast */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Subtle shadow for readability */
}

.form-container {
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    padding: 2.5em;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
    margin-top: 1em;
}

.form-group {
    margin-bottom: 1.5em;
}

.form-control {
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #CCCCCC;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
    border-color: #FF6600;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5);
}

.form-container form button.btn {
    padding: 12px 24px;
    font-size: 1.1em;
    color: #ffffff; /* Text color */
    background-color: #007bff; /* Base button color */
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.form-container form button.btn:hover {
    background-color: #0056b3; /* Hover color */
}

.map-container {
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    padding: 2.5em;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
    margin-top: 1em;
}

.map-container h3 {
    margin-bottom: 1em;
    font-size: 1.8em; /* Slightly larger font size for heading */
    color: #333; /* Darker color for better readability */
    text-align: center;
}

iframe {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Ensure HTML and Body take up full width and height */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Footer Styling */
footer {
    background-color: #000000; /* Dark background */
    color: #ffffff; /* White text */
    padding: 2rem 0; /* Padding for top and bottom */
    text-align: center; /* Center align text */
    width: 100%; /* Ensure footer takes full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

footer p {
    margin: 10px 0;
    font-size: 1rem;
    font-family: 'Roboto', sans-serif; /* Modern font */
}

footer .social-icons {
    margin: 1rem 0;
}

footer .social-icons a {
    margin: 0 15px;
    color: #ffffff;
    font-size: 1.5rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

footer .social-icons a:hover {
    transform: scale(1.2); /* Slight zoom effect */
    color: #FF6600; /* Accent color on hover */
}

footer .footer-link a {
    color: #FF6600;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

footer .footer-link a:hover {
    color: #ffffff;
}

footer .footer-link {
    margin-top: 1rem;
    font-size: 0.9rem;
    font-family: 'Roboto', sans-serif;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 25px; /* Space between icons */
    margin: 1em 0; /* Space above and below the icons */
}

.social-icons a {
    color: #FFFFFF; /* Default icon color */
    font-size: 2em; /* Larger icon size */
    transition: transform 0.3s, color 0.3s, background-color 0.3s; /* Smooth transitions */
    display: flex; /* Center icon vertically */
    align-items: center;
    justify-content: center;
    width: 50px; /* Fixed width */
    height: 50px; /* Fixed height */
    border-radius: 50%; /* Circular background */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background */
    text-decoration: none; /* Remove underline from links */
}

/* Adjust icon size for mobile devices */
@media (max-width: 768px) {
    .social-icons a {
        font-size: 1.5em; /* Smaller size for mobile */
        width: 40px; /* Smaller width for mobile */
        height: 40px; /* Smaller height for mobile */
    }
}

.social-icons a:hover {
    color: #FF6600; /* Change icon color on hover */
    transform: scale(1.2); /* Slightly enlarge on hover */
    background-color: rgba(255, 255, 255, 0.2); /* Slightly darker background */
}

.footer-link {
    margin-top: 1em;
    font-size: 0.9em; /* Slightly smaller font size */
    color: #dddddd; /* Light grey color for the link text */
}

.footer-link a {
    color: #FF6600; /* Orange color for the link */
    text-decoration: none;
    font-weight: bold; /* Bold link text */
    transition: color 0.3s, text-decoration 0.3s; /* Smooth transitions */
}

.footer-link a:hover {
    color: #E55B00; /* Darker orange on hover */
    text-decoration: underline; /* Underline on hover for emphasis */
}

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    background-color: #FF6600;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    transition: opacity 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.scroll-to-top.visible {
    display: block;
    opacity: 1;
}

.scroll-to-top:hover {
    background-color: #E55B00;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2em;
    }

    .hero-content p {
        font-size: 1em;
    }

    .hero-content .btn {
        font-size: 0.9em;
    }

    .card {
        margin: 0.5em;
    }
}

/* Header Styling */
header.product-header {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('img/Plastic-Recycling-Machine-Manufacturer-in-India.png') no-repeat center center/cover;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 5rem 0; /* Adds spacing around content */
    text-align: center; /* Center-aligns text */
}

/* Header Content */
header .header-content {
    position: relative;
    z-index: 1;
}

/* Header Title */
header .display-4 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem; /* Adds space below the title */
}

/* Lead Paragraph */
header .lead {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

/* Product Feature */
.product-feature {
    border-radius: 12px; /* Rounded corners for a softer look */
    padding: 2rem;
    margin: 2rem auto; /* Center-align and add spacing */
    max-width: 600px;
}

/* Product Feature Image */
.product-feature img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners */
    margin: 0 auto; /* Center-align the image */
}

/* Product Buttons */
.product-buttons .btn {
    background-color: #FF6600;
    color: #fff;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, transform 0.3s;
    text-decoration: none; /* Remove underline from links */
}

.product-buttons .btn:hover {
    background-color: #e55a00;
    transform: translateY(-2px);
}

/* Product Feature Image */
.product-feature img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Rounded corners for a polished look */
    margin: 0 auto; /* Center-align the image */
    background-color: #fff; /* Ensures a white background behind the image if needed */
    padding: 1rem; /* Adds some padding around the image */
}

/* Product Tabs Section */
#product-info {
    background-color: #f8f9fa; /* Light grey background for the section */
    padding: 4rem 0; /* Extra padding for spacious look */
}

/* Global Container */
.container {
    width: 100%; /* Ensure the container takes full width of its parent */
    max-width: 1200px; /* Restrict width to 1200px for uniformity */
    margin-left: auto; /* Center the container horizontally */
    margin-right: auto; /* Center the container horizontally */
    padding-left: 15px; /* Padding for the left side */
    padding-right: 15px; /* Padding for the right side */
}

/* Equal Size for All Containers */
.container-fluid, .container {
    width: 100%; /* Ensure all containers are the same size */
}

/* Optional: Adjust for smaller screens */
@media (max-width: 768px) {
    .container {
        max-width: 100%; /* Allow container to expand to full width on smaller screens */
    }
}


#product-info h2 {
    font-size: 2.5rem; /* Larger font size for the heading */
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    color: #333;
    position: relative;
}

/* Tab Navigation */
.bar-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    border-bottom: 2px solid #ddd; /* Bottom border for the tab bar */
}

.bar-item {
    margin-right: 0.5rem;
}

.bar-link {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 8px 8px 0 0; /* Rounded corners on top */
    padding: 0.75rem 1.5rem;
    color: #333;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    background-color: #fff; /* Default background for inactive tabs */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.bar-link.active {
    background-color: #FF6600;
    color: #fff;
    border-color: #FF6600;
    z-index: 1; /* Ensures active tab is on top */
}

.bar-link:hover {
    background-color: #e65c00; /* Slightly darker orange on hover */
    color: #fff;
}

/* Tab Content */
/* Tab Content Styling */
.tab-content .tab-pane {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 2rem;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.5s ease-in-out;
    transition: box-shadow 0.3s ease;
}

.tab-content .tab-pane:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* List Styling */
.list-unstyled {
    padding: 0;
    margin: 0;
}

.list-unstyled li {
    background-color: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 0.5rem 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.list-unstyled li:hover {
    background-color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Table Styling */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #fff;
}

.table thead th {
    background-color: #FF6600;
    color: #fff;
    border: none;
    font-weight: 700;
}

/* Video List */
.video-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.video-item {
    display: block;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    width: calc(50% - 0.5rem); /* Adjust width based on the number of items */
    max-width: 500px; /* Optional: Set a max-width for larger screens */
}

.video-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.video-title {
    padding: 1rem;
    background-color: #f8f9fa;
    text-align: center;
    font-weight: bold;
    color: #333;
    border-top: 1px solid #ddd;
}

.btn-link {
    display: block;
    background-color: #FF6600;
    color: #fff;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.btn-link:hover {
    background-color: #e65c00; /* Darker orange on hover */
}

/* Animation for fade-in effect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-info {
    background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
    padding: 2.5em;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
    margin-top: 1em;
}

.contact-info h3 {
    font-size: 1.5rem; /* Larger font for heading */
    color: #FF6600; /* Accent color for heading */
    margin-bottom: 1rem; /* Space below heading */
}

.contact-info p {
    font-size: 1rem; /* Standard font size */
    color: #333; /* Dark color for readability */
    margin: 0.5rem 0; /* Add spacing between items */
}

.contact-info a {
    color: #FF6600; /* Accent color for links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Highlight links */
}

.contact-info a:hover {
    text-decoration: underline; /* Add underline on hover */
}