/* inventory.html's css file -> inventory.css : CSS for the entire webpage */
body {																				/* Basic styles for the entire body */
    font-family:Arial, sans-serif; 													/* Set font-family to Arial or fallback to sans-serif */
    margin:0; 																		/* Remove default margin */
    padding:0; 																		/* Remove default padding */
}

/* -------------------------------------------- Styles for the header section --------------------------------------------*/
header{																				/* Styles for the header section */
    /*position:fixed;*/ 																/* Fix the header position */
	top:0; 																			/* Position it at the top of the viewport */
    /*width: 100%;*/																/* Take the full width of the viewport */
	background-color:rgba(234,67,53,1.0); 											/* Transparent red header background */
    color:#fff; 																	/* Set text color to white */
    padding:12px; 																	/* Add padding around the header */
    text-align:center; 																/* Center-align text */
	left:0; 																		/* Align the left edge to the left side of the viewport */
    right:0; 																		/* Align the right edge to the right side of the viewport */
	z-index:1000; 																	/* Ensure it stays on top of other content */
}
.spacer{																			/* To create red box at background of header */
    height:70px; 																	/* Adjust the height according to your header's height */
	background-color:rgba(234,67,53,1.0);											/* Background color to red */ 
}
.header-content{																	/* Styles for the header content */
    display:flex; 																	/* Use flexbox for layout */
    justify-content:space-between; 													/* Distribute content evenly */
    align-items:center; 															/* Center-align vertically */
}
.logo img{																			/* Styles for the logo */
    max-width:100px; 																/* Set maximum width for the logo */
    height:auto; 																	/* Maintain aspect ratio */
}
.navigation ul{																		/* Styles for the navigation links */
    list-style:none; 																/* Remove default list styles */
    padding:0; 																		/* Remove default padding */
    margin:0; 																		/* Remove default margin */
}
.navigation li{
    display:inline; 																/* Display list items inline */
    margin-right:15px; 																/* Adjust spacing between links */
}
.navigation a{
    color:#fff; 																	/* Set link text color to white */
    text-decoration:none; 															/* Remove default underline */
	transition:color 0.3s; 															/* Smooth transition for color change */
    font-weight:500; 																/* Adjust font weight to make text slightly thicker */
}
.navigation a:hover{																/* Change color on hover */
    color:yellow; 																	/* Change text color to yellow on hover */
}
/* ------- Drop down style ------- */
.navigation-dropdown{																/* Set the positioning for the navigation dropdown */
    position:relative; 																/* Set the position to relative */
    display:inline-block; 															/* Display as an inline block element */
}
.navigation-dropdown-content{														/* Styles for the dropdown content */
    display:none; 																	/* Initially hide the dropdown content */
    position:absolute; 																/* Position the dropdown content */
    top:100%; 																		/* Position the dropdown below the list item */
    background-color:rgba(234,67,53,1.0); 											/* Background color for the dropdown */
    /*min-width:160px;*/ 																/* Minimum width of the dropdown */
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); 									/* Apply shadow effect */
    z-index:1; 																		/* Set the stacking order */
    left:0; 																		/* Align the dropdown with the left edge of the list item */
	width:auto; 																	/* Adjust the width to fit the content */
}
.navigation-dropdown:hover .navigation-dropdown-content{							/* Show dropdown content on hover */
    display:block; 																	/* Display the dropdown content on hover */
}
.navigation-dropdown-content a{														/* Styles for the links inside the dropdown */
    display:inline-block; 															/* Display dropdown links as block elements in one single line*/
    color:white; 																	/* Set text color */
    padding:10px 17px; 																/*  top-bottom and left-right -> Add padding */
    text-decoration:none; 															/* Remove default underline */
    text-align:center; 																/* Align text to the left */
    width:auto; 																	/* Make links take up full width within the dropdown */
    box-sizing:border-box; 															/* Include padding in the width */
	white-space:nowrap; 															/* Prevent line breaks */
	vertical-align:middle; 															/* Adjusts vertical alignment */
	font-family:Arial, sans-serif; 													/* Set the font family */
}
.navigation-dropdown-content a:hover{												/* Styles for the hover state of dropdown links */
    background-color:rgba(234,67,53,1.0); 											/* Change background color on hover */
}
/* ---------------------------------------- Styles for the centered container ---------------------------------------- */
.main-container{
    /*max-width:600px;*/ 															/* Adjust the maximum width as needed */
	width:90%;																		/* Adjust the width to 90% of page */
    margin:50px auto; 																/* Center the container horizontally with top and bottom margin */
    background-color:#fff; 															/* White background color */
    border-radius:15px; 															/* Rounded corners */
    padding:20px; 																	/* Add some padding inside the container */
    box-shadow:0px 0px 10px rgba(0,0,0,0.1); 										/* Add a subtle shadow for depth */
	
	/*position:absolute; 																/* Position the container absolutely within its parent */
    /*top:43%; 																		/* Position the container 43% down from the top */
    /*left:50%; 																		/* Position the container at the center horizontally */
    /*transform:translate(-50%,-50%); 												/* Adjust the positioning to center both horizontally and vertically */
	
	/* Make box in center of page - prevent overlapping of box */
	position:relative; 																/* Change position to relative */
    top:0; 																			/* Remove or adjust this to maintain its natural flow */
    left:0; 																		/* Remove or adjust this to maintain its natural flow */
    transform:none; 																/* Remove transform as it's no longer needed */
}
/* --- Styles for product sections --- */
/* Styles for product sections - Defines spacing, background, and borders for each section */
.product-section{
    margin:20px 0px 50px 0px; 														/* Adds spacing above and below each product section */
    padding:20px; 																	/* Adds padding inside the section for better spacing */
    background-color:#f9f9f9; 														/* Sets a light gray background for better readability */
    border-radius:10px; 															/* Rounds the corners of the section for a modern look */
    box-shadow:0px 4px 8px rgba(0,0,0,0.1); 										/* Adds a subtle shadow for a 3D effect */
}
/* Flex container for product content - Aligns text and images side by side */
.product-content{
    display:flex; 																	/* Uses flexbox for automatic alignment */
    align-items:center; 															/* Centers items vertically */
    justify-content:space-between; 													/* Ensures even spacing between text and images */
    gap:20px; 																		/* Adds space between text and image */
}
/* Ensure reverse layout for Bit's GradeBook - Places the image on the left and text on the right */
.product-content.reverse{
	/*margin:50px 0px; 																/* Adds spacing above and below each product section */
    flex-direction:row-reverse; 													/* Reverses the order of items in flexbox */
}
/* Styling for product text - Controls how text is displayed */
.product-text{
    flex:1; 																		/* Allows text to take up available space */
    padding:20px; 																	/* Adds padding around text for spacing */
    text-align:justify; 															/* Justifies paragraph text for a cleaner layout */
	align-items:center; 															/* Centers items vertically */
}
/* Increase heading size for better visibility */
.product-text h1{
    font-size:28px; 																/* Sets the heading size to be larger */
    font-weight:bold;	 															/* Makes the heading bold for emphasis */
    margin-bottom:10px; 															/* Adds spacing below the heading */
}
/* Styling for images - Controls the size and appearance of images */
.product-image img {
    width:480px; 																	/* Sets the image width to 480 pixels */
    height:auto; 																	/* Maintains aspect ratio by adjusting height automatically */
    border-radius:8px; 																/* Rounds the corners of images for a softer look */
}
/* Responsive adjustments - Ensures proper layout on smaller screens */
@media (max-width:768px){
    .product-content {
        flex-direction:column; 														/* Stacks text and image vertically on small screens */
        text-align:center; 															/* Centers text for better mobile display */
    }
    .product-content.reverse{
        flex-direction:column; 														/* Ensures reversed sections also stack properly */
    }
}

/* -------------------------------------------- Styles for the footer section -------------------------------------------- */
footer{
    background-color:#000; 															/* Set background color to dark gray */
    color:#fff; 																	/* Set text color to white */
    padding:2px; 																	/* Add padding around the footer */
    text-align:center; 																/* Center-align text */
    position:bottom;/*fixed;*/ 																/* Fix the footer to the bottom of the viewport */
    bottom:0; 																		/* Align the footer to the bottom */
    height:fit-content; 															/* Set height to fit the content */
	line-height:1; 																	/* Adjust line height to remove extra space */
	/*width:100%;*/ 																	/* Set the width of the footer to 100% of the viewport */
	left:0; 																		/* Align the left edge to the left side of the viewport */
    right:0; 																		/* Align the right edge to the right side of the viewport */
}
.small-text{
	font-size:10px; 																/* Adjust font size as needed */
}
.small-text strong{
    font-weight:bold;																/* CSS for making the specified text bold */
}