/* 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:98%; /* Adjust the width to 90% of page */
margin:25px 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 --- */
/* Updated namaz-plus-lite.css with left-aligned text and background video on the right */
.main-container-top{ /* Container for the entire application top layout */
border-radius:15px; /* Rounded corners */
background-color:rgb(32,30,30); /* Dark background color */
display:flex; /* Use flexbox for layout */
justify-content:space-between; /* Space out child elements */
align-items:center; /* Center items vertically */
height:100vh; /* Full viewport height */
padding:0; /* Remove padding */
overflow:hidden; /* Prevent overflow */
}
.main-container-bottom{ /* Container for the entire application top layout */
padding:20px; /* Add some padding inside the container */
}
.app-wrapper{ /* Wrapper for the app content */
flex:1; /* Allow flexible growth */
display:flex; /* Use flexbox */
justify-content:flex-start; /* Align content to the left */
padding-left:5%; /* Add left padding */
}
.app-container{ /* Main container for app details */
color:white; /* White text color */
max-width:450px; /* Limit maximum width */
text-align:left; /* Align text to the left */
}
.app-title{ /* Title styling */
font-size:50px; /* Large font size */
font-weight:bold; /* Bold font weight */
margin-bottom:10px; /* Space below the title */
}
.app-header{ /* Header section containing the app icon and title */
display:flex; /* Use flexbox */
align-items:center; /* Align items vertically */
gap:10px; /* Space between elements */
}
.app-icon{ /* App icon styling */
width:50px; /* Fixed width */
height:50px; /* Fixed height */
}
.rating-container{ /* Rating container */
padding:20px 0px 0px 0px; /* Add padding */
display:flex; /* Use flexbox */
flex-direction:column; /* Arrange items vertically */
align-items:flex-start; /* Align items with app icon */
justify-content:center; /* Center content */
}
.rating-box{ /* Rating box styling */
background-color:white; /* White background */
color:black; /* Black text color */
font-weight:bold; /* Bold text */
font-size:14px; /* Set font size */
padding:2px 6px; /* Add padding */
border-radius:3px; /* Rounded corners */
display:inline-block; /* Keep inline layout */
}
.rating-description{ /* Description under rating */
font-size:14px; /* Set font size */
color:lightgray; /* Light gray text color */
margin-top:5px; /* Space above */
display:flex; /* Use flexbox */
align-items: center; /* Align items */
}
.buttons-share{ /* Buttons container */
display:flex; /* Use flexbox */
align-items:center; /* Align items vertically */
justify-content:flex-start; /* Align content to the left */
gap:10px; /* Space between buttons */
margin-top:20px; /* Space above buttons */
}
.buttons{ /* Group for buttons */
display:flex; /* Use flexbox */
gap:10px; /* Space between buttons */
}
.install-button{ /* Install button styling */
background-color:transparent; /* Transparent background */
color:rgb(234,75,62); /* Red text color */
border:2px solid rgb(234,75,62); /* Red border */
padding:10px 20px; /* Add padding */
cursor:pointer; /* Pointer cursor */
border-radius:5px; /* Rounded corners */
font-size:16px; /* Set font size */
transition:all 0.3s ease; /* Smooth transition */
white-space:nowrap; /* Prevent text wrapping */
}
.install-button:hover{ /* Hover effect for install button */
background-color:rgb(234,75,62); /* Change background to red */
color:white; /* Change text color to white */
}
.share{ /* Share section */
display:flex; /* Use flexbox */
align-items:center; /* Align items vertically */
gap:5px; /* Space between elements */
}
.share-link{ /* Share link styling */
color:lightblue; /* Light blue text */
text-decoration:none; /* Remove underline */
font-size:16px; /* Set font size */
display:flex; /* Use flexbox */
align-items:center; /* Align items */
}
.share-icon{ /* Share icon styling */
width:30px; /* Set width */
height:30px; /* Set height */
}
.note{ /* Note section styling */
color:gray; /* Gray text color */
font-size:12px; /* Set font size */
margin-top:10px; /* Space above */
text-align:left; /* Align text to the left */
white-space:nowrap; /* Prevent wrapping */
text-overflow:ellipsis; /* Add ellipsis for overflow */
}
.video-container{ /* Video container for background */
flex:1; /* Allow flexible growth */
position:absolute; /* Absolute positioning */
right:0; /* Align to the right */
top:0; /* Align to the top */
width:50%; /* Occupy half the width */
height:100vh; /* Full viewport height */
overflow:hidden; /* Hide overflow */
}
.video-container video{ /* Video element styling */
width:100%; /* Full width */
height:100%; /* Full height */
object-fit:cover; /* Cover entire container */
}
.main-bottom-container{ /* Main bottom division */
display:flex; /* Use flexbox for layout */
padding:10px; /* Add internal padding all round */
padding-top:50px; /* Add top padding */
}
.main-bottom-container-left-side-slideshow-container{ /* Right side of bottom container for slideshow */
flex:1; /* Take up 1 part of the available space within its parent flex container. */
position:relative; /* Allows absolute positioning of child elements (prev/next buttons). */
max-width:480px; /* Sets the maximum width of the slideshow container. */
margin: auto; /* Centers the slideshow container horizontally. */
}
.main-bottom-container-left-side-slideshow-container img{ /* Image in parent container */
width:100%; /* Makes the image fill the width of the container. */
height:90%; /* sets the image height to 90% of the container height. */
display:none; /* Hides all images by default. */
}
.active{ /* For active images */
display:block; /* Displays the active image. */
}
.prev,.next{ /* previous and next buttons */
position:absolute; /* Positions the buttons absolutely within the container. */
top:50%; /* Positions the buttons vertically in the center. */
transform:translateY(-50%); /* Adjusts the vertical position to perfectly center the buttons. */
background-color:rgba(0,0,0,0.5); /* Sets a semi-transparent black background for the buttons. */
color: white; /* Sets the text color to white. */
border:none; /* Removes the default button border. */
padding:10px; /* Adds padding to the buttons. */
cursor:pointer; /* Changes the cursor to a pointer on hover. */
}
.prev{left:0;} /* Positions the "previous" button on the left. */
.next{right:0;} /* Positions the "next" button on the right. */
.hidden{display:none;} /* Hides elements with this class. */
.main-bottom-container-right-about-container{ /* Container for application info */
max-width:700px; /* Sets the maximum width of the about container. */
margin:0 auto; /* Centers the about container horizontally. */
padding:20px; /* Adds padding to the about container. */
border-radius:8px; /* Rounds the corners of the about container. */
}
.main-bottom-container-right-side-about-title{
font-size:22px; /* Sets the font size of the about title. */
font-weight:bold; /* Makes the about title bold. */
margin-bottom:10px; /* Adds bottom margin to the about title. */
}
.main-bottom-container-right-side-about-subtitle{
font-size: 16px; /* Sets the font size of the about subtitle. */
font-weight: bold; /* Makes the about subtitle bold. */
margin-bottom: 10px; /* Adds bottom margin to the about subtitle. */
}
.main-bottom-container-right-side-about-description {
text-align:justify; /* Justifies the text within the description. */
font-size:14px; /* Sets the font size of the description. */
color:#666; /* Sets the text color to a gray shade. */
line-height:1.6; /* Sets the line height for better readability. */
margin-bottom:10px; /* Adds bottom margin to the description. */
}
.main-bottom-container-right-side-details {
display:flex; /* Uses flexbox for layout. */
justify-content:space-between; /* Distributes space evenly between detail boxes. */
flex-wrap:wrap; /* Allows detail boxes to wrap onto multiple lines. */
margin-top:20px; /* Adds top margin to the details container. */
}
.main-bottom-container-right-side-detail-box{
flex:1; /* Allows detail boxes to grow and shrink. */
min-width:150px; /* Sets a minimum width for the detail boxes. */
}
.main-bottom-container-right-side-detail-title{
font-size:12px; /* Sets the font size of the detail title. */
font-weight:bold; /* Makes the detail title bold. */
color:#666; /* Sets the text color to a gray shade. */
}
.main-bottom-container-right-side-detail-info{
font-size:14px; /* Sets the font size of the detail info. */
font-weight:bold; /* Makes the detail info bold. */
}
.main-bottom-container-right-side-rounded-outline-box{
border:1px solid gray; /* Gray outline */
border-radius:8px; /* Adjust the radius for more or less rounded corners */
/*padding:10px; /* Add padding inside the box */
margin-top:25px; /* Add space before box */
}
/* Container for privacy information on the right side of the main bottom section. */
.main-bottom-container-right-side-privacy-container{
/*width: 400px; /* Sets the width of the container. */
background:white; /* Sets the background color to white. */
padding:15px; /* Adds 15 pixels of padding inside the container. */
border-radius:8px; /* Rounds the corners of the container with an 8-pixel radius. */
box-shadow:0 2px 5px rgba(0,0,0,0.2); /* Adds a subtle box shadow for depth. */
}
.main-bottom-container-right-side-privacy-item{ /* Individual item within the privacy container, representing a specific privacy detail. */
display:flex; /* Uses flexbox to align items horizontally. */
align-items:center; /* Vertically aligns items in the center. */
padding:10px 0; /* Adds 10 pixels of padding on the top and bottom. */
border-bottom:1px solid #ddd; /* Adds a light gray bottom border to separate items. */
}
.main-bottom-container-right-side-privacy-item:last-child{ /* Removes the bottom border from the last privacy item. */
border-bottom:none; /* Removes the bottom border. */
}
.main-bottom-container-right-side-privacy-item i{ /* Styles the icon within the privacy item. */
font-size:18px; /* Sets the icon size. */
color:#555; /* Sets the icon color to a dark gray. */
margin-right:10px; /* Adds right margin to create space between the icon and text. */
width:20px; /* Sets the width of the icon container. */
text-align:center; /* Centers the icon horizontally. */
}
.main-bottom-container-right-side-privacy-item p{ /* Styles the paragraph text within the privacy item. */
margin:0; /* Removes default paragraph margins. */
font-size:14px; /* Sets the font size of the paragraph text. */
}
.main-bottom-container-right-side-privacy-item span{ /* Styles the span element within the privacy item, often used for additional info. */
color:gray; /* Sets the text color to gray. */
}
button.hidden{ /* Hide button if needed */
visibility:hidden; /* Make hide button */
}
/* -------------------------------------------- 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 */
}