/*Universal page styling*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}
	
/*Styling for stick navigation bar*/
.sticky-nav {
	position: sticky;
	top: 0;
	background-color: black;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	z-index: 1000;
}

/*hover effects for navigation bar*/
.sticky-nav a:hover {
	color: #3A88FE;
	transform: scale(1.05);
	display: inline-block;
}

/*temporary Sirius Reality logo styling*/
.logo {
	color: white;
	font-size: 1.5rem;
	font-weight: bold;
}

/*icon styling*/
.logo-icon {
	width: 32px;
	height: 32px;
	margin-right: 10px; 
}

/*insertion of search bar in the menu*/
.search-container {
	flex-grow: 1;
	max-width: 400px;
	margin: 0 2rem;
	display: flex;
	align-items: center;
}

/*search bar styling*/
.search-bar {
	width: 100%;
	padding: 0.5rem 1rem;
	border: none;
	border-radius: 5px;
	background-color: white;
	color: black;
	font-size: 1rem;
}

/*search bar interactive element design*/
.search-bar:focus {
	outline: none;
	box-shadow: 0 0 3px #3A88FE;
}

/*search button styling*/
.search-btn {
	padding: 0.5rem 1rem;
	border: none;
	background-color: #3A88FE;
	color: white;
	border-radius: 0 5px 5px 0;
	cursor: pointer;
	font-size: 1rem;
	transition: background-color 0.3s ease;
}

/*navigation bar option settings*/
.sticky-nav ul {
	list-style: none;
	display: flex;
	gap: 2rem;
}

/*navigation bar styling*/
.sticky-nav a {
	color: white;
	text-decoration: none;
	font-size: 1.1rem;
	transition: color 0.3s ease;
}

/*overall menu options not including override - two options later*/
.sticky-nav a:hover {
	color: #3A88FE;
}

/*color change when you hover on menu options*/
.sticky-nav a.active:hover {
	color: #3A88FE;
}

/*class selector to override a:hover - maintains white when not hovering*/
.sticky-nav a.active {
	color: white;
}

/*top section position and size*/
.hero {
	position: relative;
	width: 100%;
	height: 100vh;
}

/*main page constellation image styling for hero area*/
.image-container {
	position: absolute;
	width: 100%;
	height: 100%;
}

/*image styling*/
.image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*text over image styling*/
.text-box {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	text-align: center;
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
} /*had trouble formatting text properly over center of photo - used top spacing, will ask about a better way*/

/*different text styles over picture*/
/*"welcome to sirius reality" styling*/
.text-box h1 {
	position: absolute;
	margin: auto;
	font-size: 3rem;
	margin-bottom: 2rem;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	text-align: center;
}

/*subtext styling*/
.text-box p {
	display: inline-block;
	font-size: 1.5rem;
	margin-bottom: 2rem;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

/*"Explore our work" button styling*/
.cta-btn {
	display: inline-block;
	background-color: #013F9E;
	color: white;
	padding: 1rem 2rem;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	font-size: 1.5rem;
	transition: background-color 0.3s ease;
}

/*hover styling for "explore our work" button*/
.cta-btn:hover {
	background-color: #333;
}

/*highlight styling*/
.highlight{
	padding: 4rem 2rem;
	text-align: center;
	background-color: #ECF3FF;
	color: black;
}

/*highlight title*/
.highlight h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #013F9E;
	padding: 5px;
}

/*highligh body text*/
.highlight p {
	font-size: 1.2rem;
	max-width: 800px;
	margin: 0 auto;
	font-weight: bold;
	padding: 5px;
}

/*highlight quotes - reviews*/
.highlight q {
	font-style: italic;
	font-size: 1.2rem;
	max-width: 800px;
	margin: 0 auto;
	display: block;
}

/*hr div*/
.hr-container {
	width: 100%;
	display: flex;
	justify-content: center;
	background-color: #ECF3FF;
}

/*hr styling*/
.custom-hr {
	width: 60%;
	margin: 0;
	border: none;
	height: 2px;
	background-color: #013F9E;
}

/*styling product section*/
.products {
	padding: 4rem 2rem;
	background-color: #ECF3FF;
}

/*product titles*/
.products h2 {
	text-align: center;
	color: #013F9E;
	font-size: 2rem;
	text-decoration: none;
	margin-bottom: 2rem;
}

/*product section layout*/
.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

/*text format in product grid*/
.product-item {
	text-align: center;
}

/*product image styling*/
.product-item img {
	max-width: 150px;
	max-height: 150px;
	border-radius: 5px;
}

/*partition syling*/
.partition {
	padding: 4rem 2rem;
	background-color: white;
	color: black;
}

/*image container style*/
.image-container2 {
	overflow: hidden;
}

/*float image left*/
.image-container2 img {
	float: left;
	margin-right: 10px;
	max-width: 25%;
	transition: transform 0.3s ease, filter 0.3s ease;
}

/*textbox styling*/
.text-box2 {
	overflow: hidden;
}

/*textbox heading styling*/
.text-box2 h2 {
	overflow: hidden;
	font-size: 2rem;
	color: #013F9E;
	font-weight: bold;
	padding: 5px;
	margin-bottom: 1rem;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/*styling of text-box bodt*/
.text-box2 p {
	font-size: 1.2rem;
	text-align: justify;
	padding: 5px;
	max-width: 750px;
}

/*main footer styling*/
footer {
	background-color: black;
	color: #ECF3FF;
	text-align: center;
	padding: 2rem;
	text-decoration: none;
	outline-offset: -15px;
	outline: 3px solid #ECF3FF;
}
/*outline offset is the white border around footer*/ 

/*style back to top link*/
footer a {
	color: white;
	text-decoration: none;
}

footer p {
	margin: 0.5rem 0;
}

/*footer hover styling*/
footer a:hover {
	text-decoration: underline;
	color: #3A88FE;
}

/*back to top static widget*/
.back-to-top {
	position: fixed;
	bottom: 40px;
	right: 40px;
	background-color: #333;
	color: white;
	text-decoration: none;
	padding: 10px 15px;
	border-radius: 5px;
	font-family: Arial, sans-serif;
	font-size: 1em;
	z-index: 1000;
	transition: all 0.3s ease;
}

/*back to top hover styling*/
.back-to-top:hover {
	background-color: #555;
	text-decoration: none;
	color: white;
}

/*Styling for products page*/
/*product descriptions section styling*/
.product-descriptions {
	margin: 0 auto;
	padding: 4rem 2rem;
	background-color: #ECF3FF;
}

/*product descriptions title*/
.product-descriptions h2 {
	text-align: center;
	color: #013F9E;
	font-size: 2rem;
	margin-bottom: 2rem;
}

/*individual product description item*/
.product-item {
	margin-bottom: 2rem;
}

/*product description heading*/
.product-item h3 {
	color: #013F9E;
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1rem;
}

/*feature list styling*/
.product-item ul {
	list-style-type: none;
	margin-left: 2rem;
	font-size: 1.2rem;
	color: black;
}

/*feature list item styling*/
.product-item ul li {
	margin-bottom: 0.5rem;
}

/*list item bullet point removal*/
.product-item li {
	list-style-type: none;
}

/*Styling for Projects page*/
/* Card-like styling for each project item */
.description-item {
    background-color: white;
    border-radius: 10px;
    padding: 2rem;
    margin: 1rem auto;
    max-width: 900px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect for project cards */
.description-item:hover {
    transform: translateY(-5px);
}

/* Project item heading */
.description-item h3 {
    font-size: 1.8rem;
    color: #013F9E;
    margin-bottom: 1.5rem;
    font-weight: bold;
    transition: color 0.3s ease;
}

/* Hover effect for project headings */
.description-item h3:hover {
    color: #3A88FE;
}

/* Styling for feature lists */
.description-item ul {
    list-style-type: none;
    margin-left: 0;
    font-size: 1.2rem;
    color: #333;
}

/* Individual list item styling with custom bullet */
.description-item ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

/* Custom bullet point using pseudo-element */
.description-item ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #3A88FE;
    font-size: 1.5rem;
}

/* Hover effect for list items */
.description-item ul li:hover {
    color: #013F9E;
}