@font-face {
  font-family: 'Primary';
  src: url('../../fonts/PetrovSans-Regular.ttf') format('truetype'),
}

:root {
  --primary-color: #BB4430;
  --secondary-color: #7EBDC2;
  --third-color: #F3DFA2;
  --accent-color: #EFE6DD;
  --text-color: #333; /* Additional variable for text color */
}


/* Reset default margin and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set body font and background color */
html, body {
  font-family: "Primary";
  color: #333;
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Ensure body takes full viewport height */
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1; /* Allow the main content to take up the available space */
}

/* Style header */
header {
  background-color: white;
  color: #EFE6DD;
  padding: 10px;
}

header h1 {
  margin: 0;
  font-size: 2rem;
}

header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header nav ul li {
  display: inline;
  margin-right: 20px;
}

header nav ul li a {
  text-decoration: none;
  color: #EFE6DD;
}

/* Style hero section */
#hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  overflow: hidden;
}

#hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0; /* Change from -1 to 0 */
}

#hero .container {
  position: relative;
  z-index: 1; /* Ensure content stays above the video */
  background: rgba(255, 255, 255, 0.6); /* Optional: Light background for readability */
  padding: 20px;
  border-radius: 10px;
  color: black;
}

#hero h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

#hero p {
  font-size: 1.1rem;
  margin-bottom: 30px;
}

#hero ul {
  text-align: left; /* Aligns the list to the left */
  display: inline-block; /* Prevents it from stretching across the full width */
  margin: 0 auto; /* Centers the list itself while keeping text left-aligned */
  padding-left: 0; /* Ensures no extra padding */
  list-style: none; /* Removes default bullet points */
}

#hero ul li {
  display: flex;
  align-items: center;
  gap: 8px; /* Adds spacing between the checkmark and text */
}

/* Key Features Section */
#features {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: white;
  text-align: center;
  padding: 80px 20px;
  height: 800px;
}

#features .feature-header-1 {
  background-color: rgba(98, 255, 145, 0.973);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 75px;
  align-items: center; /* Centers content vertically */
  justify-content: center; /* Centers content horizontally */
  text-align: center; /* Ensures text stays centered */
  padding-top: 20px; /* Optional: Adjust padding */
  font-size: larger;
  color: white;
}

#features .feature-header-2 {
  background-color: rgb(90, 236, 255);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 75px;
  align-items: center; /* Centers content vertically */
  justify-content: center; /* Centers content horizontally */
  text-align: center; /* Ensures text stays centered */
  padding-top: 20px; /* Optional: Adjust padding */
  font-size: larger;
  color: white;
}

#features .feature-header-3 {
  background-color: rgb(255, 76, 210);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 75px;
  align-items: center; /* Centers content vertically */
  justify-content: center; /* Centers content horizontally */
  text-align: center; /* Ensures text stays centered */
  padding-top: 20px; /* Optional: Adjust padding */
  font-size: larger;
  color: white;
}


#features .feature-card{
  padding-top: 50px;
  color: black;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  clip-path: inset(0px -10px -10px -10px);
  height: 400px;
}

#features .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal-width columns */
  grid-gap: 20px; /* Space between items */
  width: 100%; /* Ensures it takes the full width of #features */
  max-width: 1200px; /* Prevents it from being too wide on large screens */
  margin: 0 auto; /* Centers the container */
  align-items: stretch; /* Makes all grid items equal in height */
  justify-content: center; /* Ensures grid stays centered */
  text-align: center;
}


#features h2 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--third-color);
}

#features h3 {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
  padding: 20px;
  color: #000;
}

#features p {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
  text-align: left;
  padding: 20px;
}

#features ul {
  list-style: none;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

#features ul li {
  font-size: auto;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease-in-out;
}

#features ul li:hover {
  transform: scale(1.05);
}

#features ul li strong {
  color:var(--third-color);
}

/* Vision & About Sections - Side by Side */
.vision-about-container {
  display: flex;
  justify-content: center;
  gap: 40px; /* Space between sections */
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

#vision, #about {
  width: 48%;
  background: rgba(255, 255, 255, 0.1);
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: white;
}

#vision h2, #about h2 {
  font-size: 28px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: #ffb400;
}

#vision p, #about p {
  font-size: 18px;
  line-height: 1.6;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-box {
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: black;
}

.feature-box i {
  font-size: 35px;
  color: #ffb400;
  margin-bottom: 10px;
}

.feature-box h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

/* Responsive Design */
@media (max-width: 992px) {
  .vision-about-container {
    flex-direction: column;
    gap: 20px;
  }

  #vision, #about {
    width: 100%;
  }
}

/* Contact Section */
#contact {
  background: #f8f9fa;
  padding: 60px 20px;
  text-align: center;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#contact h2 {
  font-size: 28px;
  color: #ff6600;
  margin-bottom: 10px;
}

#contact p {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

/* Contact Info */
.contact-info {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 30px;
}

.contact-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.contact-box i {
  font-size: 24px;
  color: #ff6600;
}

/* Contact Form */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-form input, 
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}

.contact-form textarea {
  resize: none;
  height: 120px;
}

.contact-form button {
  background: #ff6600;
  color: white;
  padding: 12px;
  font-size: 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.contact-form button:hover {
  background: #e65c00;
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-info {
    flex-direction: column;
    align-items: center;
  }
}


.ignite-link {
  align-content: center;
  justify-content: center;
  display: inline-block;
  transition: transform 0.2s ease-in-out; /* Smooth scaling effect */
}

.ignite-link a {
  color: black; /* Sets the link color */
  text-decoration: underline; /* Keeps underline for links */
  transition: color 0.2s ease-in-out; /* Smooth hover color transition */
}

.ignite-link a:hover {
  color: var(--secondary-color); /* Changes color on hover */
  transform: scale(1.05); /* Adds a subtle scaling effect */
}

.btn {
  display: inline-block;
  background-color: #F3DFA2;
  color: #EFE6DD;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  border: none;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #F3DFA2;
}

.btn.disabled,
.btn:disabled {
  opacity: 0.5;
  cursor:not-allowed;
  background-color:#cecece;
  color: #1f1f1f;
}

/* Style container */
.container {
  width: 80%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.page-container {
  position: relative;
  min-height: 100vh;
}

.header-container {
  width: 100%;
  max-width: 100%;
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  height: 60px;
}

.rewards-container {
  display: flex;
  justify-content: right;
}

.createPassword-container {
  width: 80%;
  max-width: 600px; /* Restricts width for readability */
  margin: 40px auto; /* Centers the box with vertical spacing */
  padding: 20px;
  border: 2px solid #ccc; /* Adds a light gray border */
  border-radius: 8px; /* Adds rounded corners */
  background-color: #f9f9f9; /* Light background color for contrast */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  text-align: center;
}

.logo {
  height: 100px;
  width: auto;
  object-fit: contain;
  margin-right: 10px;
}

.logo-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin-left: 100px;
}

/* Style sections */
section {
  padding: 50px 0;
  flex: 1;
}

section h2 {
  font-size: 2rem;
  margin-bottom: 20px;
}

section ul {
  list-style: none;
}

/* Footer container */
.footer-container {
  display: flex;
  flex-direction: column; /* Arrange items in a column */
  align-items: center;
  color: #fff;
  text-align: center;
}

/* Style footer */
footer {
  position: absolute;
  padding-left: 20px;
  width: 100%;
  height: 20rem;
  background-color: black;
  color: var(--accent-color);
  bottom: 0;
}

footer p {
  margin: 0;
}

.footer-link{
  text-decoration: None;
  color: inherit;
  align-content: center;
  justify-content: center;
}

.footer-column{
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.footer-column ul {
  padding-left: 20px; /* Adds left padding to list for indentation */
  margin: 0;
}

.footer-column li {
  list-style-type: none; /* Removes the default bullet points */
  margin-bottom: 5px; /* Adds space between each list item */
}

.footer-column li a {
  color: var(--accent-color); /* Sets the link color */
  text-decoration: none; /* Removes underline from links */
}

.footer-column li a:hover {
  color: var(--secondary-color); /* Changes color on hover */
}

.footer-columns {
  display: flex;
  justify-content: space-around; /* Space out columns evenly */
  width: 100%;
}

.footer-row {
  width: 100%; /* Span full width */
  display: flex;
  margin-bottom: 20px; /* Space between logo row and columns */
}

.content-wrap {
  padding-bottom: 25rem;    /* Footer height */
}

.hamburger-menu {
  display: none;
  font-size: 2rem;
  color: black;
  cursor: pointer;
}

.hamburger-menu span {
  display: inline-block;
  transition: transform 0.3s; /* Smooth transition */
}

/* Default hamburger icon (three lines) */
.hamburger-menu::before {
  content: "\2630"; /* Unicode for hamburger icon ☰ */
}

/* Change to caret down icon when .open is applied */
.hamburger-menu.open::before {
  content: "\00D7"; 
  font-size: 3rem;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; 
  text-align: center;
  width: 100%;
  height: 100%;
  margin-right: 50px;
}

.nav-menu {
  list-style: none;
  transition: right 0.3s ease;
  position: absolute;
}

/* Add styles for the navigation links */
.nav-menu ul {
  list-style-type: none;
  justify-content: right;
}

.nav-menu ul li {
  display: inline;
  margin-right: 20px;
}

.nav-menu ul li a {
  text-decoration: none;
  color: black;
}

/* Add styles to show the nav menu when the hamburger menu is clicked */
.nav-menu.open {
  display: flex;
  position: absolute;
  top: 70px; /* Adjust as needed */
  right: 20px; /* Adjust as needed */
  background-color: var(--secondary-color); /* Adjust background color */
  padding: 10px;
  border-radius: 6pt;
  margin-right: 100px;
}

.nav-menu.open ul li {
  display: block;
  margin-bottom: 10px;
}


/* Add this media query for smaller screens */
@media only screen and (max-width: 1200px) {
  .nav-menu {
    display: none; /* Hide the nav menu by default on small screens */
  }
  .hamburger-menu {
    display: block; /* Display the hamburger menu on small screens */
  }
}

.header-table {
  display: flex;
  width: 100%; /* Set width to 100% to fill the container */
}

.header-column-logo {
  flex: 1; /* Make the columns flexible to fill available space */
  display: flex;
}

.header-column-nav {
  flex: 1; /* Make the columns flexible to fill available space */
  display: flex;
}

.column {
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  display: flex;
  gap: 20px;
}

/* Login Page Styles */

.login-container {
max-width: 400px;
margin: 100px auto;
padding: 20px;
background-color: #EFE6DD;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

.login-container h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
}

.form-group {
margin-bottom: 15px;
text-align: left;
}

.form-group label {
display: block;
margin-bottom: 5px;
color: #333;
font-weight: bold;
}

.form-group input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

button[type="submit"] {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #7EBDC2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}

button[type="submit"]:hover {
background-color: #e7a9ff;
}

button[type="button"] {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #7EBDC2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}

button[type="button"]:hover {
background-color: #e7a9ff;
}

p {
margin-top: 20px;
color: #333;
}

p a {
color: #7EBDC2;
text-decoration: none;
}

p a:hover {
text-decoration: underline;
}

/* Sign-Up Page Styles */

/* General container styling for the signup page */
.signup-page {
max-width: 400px;
margin: 100px auto;
padding: 20px;
background-color: #EFE6DD;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

.signup-page h2 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
}

.signup-page input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-bottom: 15px;
}

.signup-page button {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #7EBDC2;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}

.signup-page button:hover {
background-color: #0056b3;
}

.signup-page p {
margin-top: 20px;
color: #333;
}

.signup-page p a {
color: #7EBDC2;
text-decoration: none;
}

.signup-page p a:hover {
text-decoration: underline;
}

/* Modal styles */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
}

.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
max-width: 500px; /* Maximum width */
border-radius: 5px; /* Rounded corners */
}

#remove-item-confirmation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

#confirmation-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
}

.modal-container {
  position: relative; /* Makes it the reference point for the close button */
  /* Other modal styles like width, height, background, etc. */
}

.close-btn {
  font-size: 30px; /* Adjust size */
  font-weight: bold;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.3s ease; /* Smooth transition for rotation */
  
  position: absolute; /* Position relative to .product-modal-content */
  top: 10px; /* Distance from top of the modal content */
  right: 10px; /* Distance from right of the modal content */
}

.close-btn:hover {
  transform: rotate(180deg); /* Spins on hover */
  color: red;
}

.close-btn:focus {
  outline: none; /* Optional: Remove outline on focus */
}


/* Dashboard container styling */
.dashboard-container {
width: 100%;
max-width: 1200px;
margin: 50px auto;
padding: 20px;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.dashboard-container-grid {
  display: grid; /* Use CSS grid for precise control */
  grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
  grid-gap: 20px; /* Add space between the grid items */
  margin: 20px;
  align-items: start; /* Vertically align at the top, the content in the grid items */
  justify-items: stretch; /* Horizontally center the content in the grid items */
  text-align: center; /* Ensure text inside grid items is centered */
}

#assignments, #myFlames {
  width: 100%;
}

/* Flexbox for card layout */
.card-container {
display: flex;
justify-content: center;
width: 100%;
}

/* Card Styles */
.card {
background-color: #EFE6DD;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
flex: 1;
width: 100%;
}

.card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #333;
text-align: center;
}

.card .row {
display: flex;
justify-content: space-between;
padding: 8px 0;
}

.styled-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-radius: 5px;
  margin-top: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


/* Shop Cards */
.shop-card-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.shop-card {
color: #EFE6DD;
padding: 10px;
border-radius: 5px;
text-align: center;
flex: 1;
border: #000;
}

.profile-picture-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}

.profile-picture {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #ccc;
margin-bottom: 15px;
}

.profile-picture-upload {
padding: 8px;
font-size: 14px;
border: none;
cursor: pointer;
}

.account-form {
background-color: #EFE6DD;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.account-heading {
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
display: flex;
flex-direction: column;
}

.form-group label {
font-weight: bold;
margin-bottom: 5px;
}

.form-group input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

.form-actions {
text-align: center;
margin-top: 20px;
}

.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.modal-content {
background-color: #EFE6DD;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
width: 90%;
max-width: 500px;
text-align: center;
}

.close-button {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #aaa;
}

.close-button:hover {
color: #000;
}

.btn {
display: inline-block;
background-color: #7EBDC2;
color: #EFE6DD;
padding: 12px 20px;
border-radius: 5px;
text-decoration: none;
font-size: 16px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}

.btn:hover {
background-color: #e7a9ff;
}

@media only screen and (max-width: 768px) {
.account-form {
  width: 100%;
  padding: 10px;
}

.profile-picture-container {
  width: 100%;
}
}

/* My Progress Page CSS */

/* Dashboard layout */
.progress-container {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 20px;
max-width: 2000px;
margin: 0 auto;
}

/* Small cards (left-side) */
.left-cards-container {
display: flex;
flex-direction: column;
gap: 20px;
}

/* Card Styling */
.card {
background-color: rgb(217 217 217);
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card h3 {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: 10px;
}

/* Specific size for small, large, and medium cards */
.small-card {
width: 100px;
}

.large-card {
flex: 2; /* Large card takes more space */
}

.medium-card {
width: 300px;
}

/* Additional card styling */
.card ul {
list-style-type: none;
padding: 0;
}

.card ul li {
margin-bottom: 10px;
}

/* Spinner styling */
.spinner {
  border: 8px solid var(--accent-color);
  border-top: 8px solid var(--secondary-color); 
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin: 20px auto; /* Center the spinner */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.flame-card {
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px; /* Adds spacing between cards */
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: add a shadow */
}

.flame-row {
  display: flex;
  justify-content: space-between; /* Space between columns */
  align-items: center; /* Align content vertically */
  gap: 10px; /* Adds space between columns */
}

.flame-column {
  flex: 1; /* Allow columns to take up equal space */
  font-size: 1rem;
  color: var(--text-color); /* Use your text color */
}

.flame-column strong {
  color: var(--primary-color); /* Optional: highlight labels */
}

/* Style the link inside the assignmentName div */
.assignment-name a {
  color: inherit; /* Inherit the color from the parent element (or set any specific color) */
  text-decoration: none; /* Remove the underline */
}

.assignment-name a:hover {
  text-decoration: underline; /* Optional: add underline on hover for better UX */
  color: var(--secondary-color);
}

.shop-container{
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.shop-card-container{
  display: flex;
  justify-content: center;
}

.shop-card{
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 250px;
  max-width: 250px;
  border: #000;
}

/* Hover effect */
.shop-card:hover {
  background-color: gainsboro; /* Change this to any color you prefer */
  transform: translateY(-5px); /* Adds a slight lift effect */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.shop-card img.logo {
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}

.item-link {
  text-decoration: none;
  color: black;
  align-content: center;
  justify-content: center;
  display: inline-block;
  transition: transform 0.2s ease-in-out; /* Smooth scaling effect */
}

.item-link:hover {
  transform: scale(1.05); /* Slightly increase size on hover */
}


/* Item Details Card Styling */
.item-details-card {
  width: 90%;
  max-width: 800px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding: 20px;
  margin: 20px auto;
}

.item-details-card h1 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
}

.item-details-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

.item-info {
  flex: 1;
  max-width: 400px;
}

.item-info p {
  margin: 10px 0;
  font-size: 16px;
  color: #555;
}

.item-price {
  font-size: 20px;
  font-weight: bold;
  color: #d9534f;
}

.add-to-cart-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s;
}

.add-to-cart-btn:hover {
  background-color: #7ec7cc;
}

.add-to-cart-btn.clicked {
  transform: scale(1.1);
  background-color: #4caf50; /* Success color */
}

.delete-from-cart-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s;
}

.delete-from-cart-btn:hover {
  background-color: #e7a9ff;
}

.delete-from-cart-btn.clicked {
  transform: scale(1.1);
  background-color: #4caf50; /* Success color */
}

.checkout-btn {
  display: inline-block;
  padding: 10px 20px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s, background-color 0.3s;
}

.checkout-btn:hover {
  background-color: #e7a9ff;
}

.checkout-btn.clicked {
  transform: scale(1.1);
  background-color: #4caf50; /* Success color */
}

/* Style for the cart icon */
.cart-icon {
  width: 100%;
  height: auto;
  cursor: pointer; /* Make the cart icon clickable */
}

/* Style for the cart count bubble */
.cart-bubble {
  position: absolute;
  background-color: var(--secondary-color); /* Bright red for visibility */
  color: var(--text-color);
  border-radius: 50%; /* Perfectly circular */
  font-size: 12px; /* Adjust for visibility */
  width: 20px; /* Fixed width */
  height: 20px; /* Fixed height to match width */
  line-height: 20px; /* Centers text vertically */
  text-align: center; /* Centers text horizontally */
  display: none; /* Hidden by default */
  padding: 0; /* Remove padding to avoid affecting the size */
}

/* Optional animation for when the bubble is updated */
.cart-bubble.updated {
  transform: scale(1.2); /* Slightly enlarge the bubble */
  background-color: #e63946; /* Change to a deeper red momentarily */
}

.cart-message {
  padding: 10px;
  margin: 10px 0;
  border-radius: 5px;
  font-weight: bold;
  text-align: center;
  font-family: Arial, sans-serif;
}

.cart-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.cart-message.failure {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.item-details-container {
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: row; /* Align columns horizontally */
  gap: 20px; /* Add space between columns */
}

.item-column{
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  gap: 20px;
  flex-direction: column;
  margin-top: 10px;
}

.item-row{
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: flex-start;
  padding: 8px 0;
  border-radius: 5px;
  margin-top: 15px;
}

.item-image{
  max-width: 100%; /* Prevents the image from exceeding its container */
  max-height: 80vh; /* Ensures it does not exceed the modal height */
  width: auto; /* Maintains aspect ratio */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes extra spacing around inline images */
  object-fit: contain; /* Ensures the whole image fits inside */
}

/* Styling the quantity input box */
.quantity-input {
  width: 100%;  /* Makes the input field take up the full width of its container */
  padding: 10px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  text-align: center;  /* Center the number text */
  transition: all 0.3s ease;  /* Smooth transition for hover and focus effects */
}

/* Hover effect for the quantity input */
.quantity-input:hover {
  border-color: #007bff;  /* Change the border color on hover */
}

/* Focus effect for the quantity input */
.quantity-input:focus {
  outline: none;
  border-color: #0056b3;  /* Darker blue border when the input is focused */
  background-color: #e6f7ff;  /* Light blue background when focused */
}

/* Style the up/down spinner controls (arrows) */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity-input[type="number"] {
  -moz-appearance: textfield;  /* Firefox fix for hiding the spinner */
}


.cart-container{
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.cart-checkout-container{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.cart-column-1{
  border: 1px solid #ccc;
  text-align: center;
  width: 100%;
  max-width: 500px;
  margin-right: 25px;
}

.cart-column-2{
  border: 1px solid #ccc;
  text-align: center;
  width: 300px;
  max-width: 500px;
}

.cart-box-container{
  width: 100%;
}

.cart-item-display-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.cart-breakdown-container {
  display: flex;
  flex-wrap: wrap; /* Enable wrapping */
  width: 100%; /* Full width of the parent container */
  text-align: center;
  justify-content: space-between; /* Spread out the columns */
  gap: 10px; /* Optional: Space between rows and columns */
}

.cart-breakdown-row{
  flex: 1 1 48%; /* Each item takes 48% of the width (2 columns + gap) */
  max-width: 48%; /* Ensure max width is also 48% */
  box-sizing: border-box; /* Include padding and border in width calculation */
  padding: 10px; /* Optional: Add padding for styling */
  text-align: left;
}

.cart-breakdown-divider {
  width: 100%; /* Full width of the container */
  border: none; /* Remove default border styles */
  border-top: 1px solid #ccc; /* Light gray divider */
  margin: 10px 0; /* Optional spacing above and below the divider */
}


.cart-image{
  height: 15px;
}

.cart-item-display-row{
  width: 100%;
}

/* Container for quantity input and buttons */
.cart-quantity-container {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between buttons and input */
  justify-content: center; /* Center the content horizontally */
}

/* Styling the quantity input */
.cart-quantity-input {
  padding: 8px 10px;
  width: 50px; /* Fixed width for consistent appearance */
  border: 2px solid #ccc;
  background-color: #f9f9f9;
  text-align: center; /* Center the number text */
  border-radius: 4px;
  transition: all 0.3s ease; /* Smooth transition for hover and focus effects */
}

/* Styling the buttons */
.cart-quantity-btn {
  color: var(--primary-color);
  border: none;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cart-quantity-btn:hover {
  cursor: pointer;
}

.cart-quantity-btn:active {
  transform: scale(0.95); /* Slightly shrink the button when clicked */
}

/* Remove spinners for Webkit browsers (Chrome, Safari, Edge) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cart-icon-container {
  display: flex;
  justify-content: center; /* Align it to the right if necessary */
  padding-left: 25px;
}

.cart-icon-container .logo {
  width: 45px;  /* Adjust the width to make it smaller */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Prevent the image from becoming too large */
  margin-left: 15px;
  margin-top: 8px;
}

.callback-container{
  width: 80%;
  max-width: 600px; /* Restricts width for readability */
  margin: 40px auto; /* Centers the box with vertical spacing */
  padding: 20px;
  border: 2px solid #ccc; /* Adds a light gray border */
  border-radius: 8px; /* Adds rounded corners */
  background-color: #f9f9f9; /* Light background color for contrast */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
  text-align: center;
}

/* Authorization Code Box Styling */
.auth-code-container {
  margin: 15px 0; /* Add spacing above and below */
  text-align: center; /* Center the box */
}

.auth-code-label {
  display: block;
  margin-bottom: 8px;
  font-size: 1.1em;
  color: #333;
}

#authCodeDisplay {
  width: 90%; /* Adjust width */
  max-width: 600px; /* Set a max width */
  height: 80px; /* Set a height */
  padding: 10px;
  font-size: 1em;
  font-family: monospace; /* Use monospace for code-like text */
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none; /* Prevent resizing */
  white-space: pre-wrap; /* Wrap long text */
  word-wrap: break-word; /* Force break on long words */
  overflow-wrap: break-word; /* Ensures wrapping */
  background-color: #f9f9f9;
  color: #333;
  margin: 0 auto; /* Center horizontally */
}

/* From Uiverse.io by vinodjangid07 */ 
.bin-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 15px;
  background-color: rgb(255, 95, 95);
  cursor: pointer;
  border: 3px solid rgb(255, 201, 201);
  transition-duration: 0.3s;
}
.bin-bottom {
  width: 15px;
}
.bin-top {
  width: 17px;
  transform-origin: right;
  transition-duration: 0.3s;
}
.bin-button:hover .bin-top {
  transform: rotate(45deg);
}
.bin-button:hover {
  background-color: rgb(255, 0, 0);
}
.bin-button:active {
  transform: scale(0.9);
}

.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 30px;
}

.profile-sidebar {
  flex: 1;
  background-color: #f4f4f4;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-sidebar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 10px;
}

.profile-sidebar h3 {
  text-align: center;
  margin-bottom: 10px;
  color: #333;
}

.profile-sidebar p {
  text-align: center;
  color: #777;
}

.profile-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}

.profile-sidebar ul li {
  margin: 10px 0;
}

.profile-sidebar ul li a {
  color: #007bff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.profile-sidebar ul li a:hover {
  color: #0056b3;
}

.profile-main {
  flex: 3;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.profile-main h2 {
  margin-bottom: 20px;
  color: #333;
  border-bottom: 2px solid #f4f4f4;
  padding-bottom: 10px;
}

.profile-section {
  margin-bottom: 20px;
}

.profile-section h3 {
  margin-bottom: 10px;
  color: #555;
  font-size: 18px;
}

.profile-section p {
  color: #777;
  line-height: 1.6;
}

.profile-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.profile-button {
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.profile-button.edit {
  background-color: #007bff;
  color: #fff;
}

.profile-button.edit:hover {
  background-color: #0056b3;
}

.profile-button.logout {
  background-color: #dc3545;
  color: #fff;
}

.profile-button.logout:hover {
  background-color: #b02a37;
}

.my-progress-container {
  display: grid; /* Use CSS grid for precise control */
  grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
  grid-gap: 20px; /* Add space between the grid items */
  margin: 20px;
  align-items: top; /* Vertically align at the top, the content in the grid items */
  justify-items: center; /* Horizontally center the content in the grid items */
  text-align: center; /* Ensure text inside grid items is centered */
}

.my-progress-column {
  width: 100%;
  height: auto; /* Adjust height based on content */
  background-color: #f9f9f9; /* Light background for better contrast */
  border-radius: 10px; /* Rounded corners for a modern look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow to lift the container */
  padding: 20px; /* Space between content and border */
  margin: 20px 0; /* Space between this and other elements */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
}

.my-progress-row{
  width: 100%;
  height: 80px; /* Adjust height based on content */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px; /* Rounded corners for a modern look */
  padding: 20px; /* Space between content and border */
  margin: 20px 0; /* Space between this and other elements */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  display: grid; /* Use CSS grid for precise control */
  grid-template-columns: repeat(4, 1fr); /* Two equal-width columns */
  grid-gap: 20px; /* Add space between the grid items */
  border: 1px #00000077;
}

.my-progress-row-2{
  width: 100%;
  height: 80px; /* Adjust height based on content */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px; /* Rounded corners for a modern look */
  padding: 20px; /* Space between content and border */
  margin: 20px 0; /* Space between this and other elements */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  display: grid; /* Use CSS grid for precise control */
  grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
  grid-gap: 20px; /* Add space between the grid items */
  border: 1px #00000077;
}

.my-progress-header{
  width: 100%;
  height: auto; /* Adjust height based on content */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  display: grid; /* Use CSS grid for precise control */
  grid-template-columns: repeat(4, 1fr); /* Two equal-width columns */
  grid-gap: 20px; /* Add space between the grid items */
  font-weight: bold;
}

/* Overlay styling */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Pop-up content styling */
.popup-content {
  background: #ffffff;
  padding: 20px 40px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1001;
}

/* Loader styling from provided code */
.loader {
  position: relative;
  width: 164px;
  height: 100px;
  margin: 0 auto 20px;
}

.loader div {
  position: absolute;
  width: 10px;
  height: 30px;
  background-color: #ff6a00;
  border-radius: 5px;
  animation: loader_51899 1.5s ease-in-out infinite;
}

.loader .bar1 { left: 0px; animation-delay: 0s; }
.loader .bar2 { left: 20px; animation-delay: 0.15s; }
.loader .bar3 { left: 40px; animation-delay: 0.3s; }
.loader .bar4 { left: 60px; animation-delay: 0.45s; }
.loader .bar5 { left: 80px; animation-delay: 0.6s; }
.loader .bar6 { left: 100px; animation-delay: 0.75s; }
.loader .bar7 { left: 120px; animation-delay: 0.9s; }
.loader .bar8 { left: 140px; animation-delay: 1.05s; }
.loader .bar9 { left: 160px; animation-delay: 1.2s; }

@keyframes loader_51899 {
  0% {
    height: 30px;
    transform: translate(0, 0);
  }
  50% {
    height: 70px;
    transform: translate(0, 35px);
  }
  100% {
    height: 30px;
    transform: translate(0, 0);
  }
}

/* Text styling */
.popup-content p {
  font-size: 16px;
  color: #333;
  margin: 0;
  font-weight: bold;
}

.order-confirmation-container {
  width: 100%;
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.order-confirmation-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-details-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 20px;
}

.order-details-box-container {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
}

.order-details-display-container {
  width: 100%;
  height: auto; /* Adjust height based on content */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align content to the top */
  display: grid; /* Use CSS grid for precise control */
  grid-template-columns: repeat(5, 1fr); /* Two equal-width columns */
  grid-gap: 20px; /* Add space between the grid items */
  font-weight: bold;
}

.order-details-display-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.order-details-display-row:last-child {
  border-bottom: none;
}

.order-details-display-row img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  margin-right: 10px;
}

.order-summary-container {
  margin-top: 30px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  width: 100%;
  max-width: 500px;
}

.order-summary-container h2 {
  margin-bottom: 20px;
}

.join-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ff7e5f, #feb47b); /* Warm gradient */
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 30px; /* Rounded button */
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.join-btn:hover {
  background: linear-gradient(135deg, #feb47b, #ff7e5f); /* Reverse gradient */
  transform: translateY(-3px); /* Slight lift effect */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.join-btn:active {
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.show-all-btn {
  background-color: #007bff;
  color: white;
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 4px;
}

.show-all-btn:hover {
  background-color: #0056b3;
}

.cart-icon-fly {
  position: fixed;
  top: 20px;
  right: 40px;
  font-size: 30px;
  cursor: pointer;
}

/* From Uiverse.io by mobinkakei */ 
.wrapper {
  width: 200px;
  height: 60px;
  position: relative;
  z-index: 1;
  margin: 20px auto; /* Center the spinner */
}

.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: var(--text-color);
  left: 15%;
  transform-origin: 50%;
  animation: circle7124 .5s alternate infinite ease;
}

@keyframes circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7);
  }

  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1);
  }

  100% {
    top: 0%;
  }
}

.circle:nth-child(2) {
  left: 45%;
  animation-delay: .2s;
}

.circle:nth-child(3) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

.shadow {
  width: 20px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.9);
  position: absolute;
  top: 62px;
  transform-origin: 50%;
  z-index: -1;
  left: 15%;
  filter: blur(1px);
  animation: shadow046 .5s alternate infinite ease;
}

@keyframes shadow046 {
  0% {
    transform: scaleX(1.5);
  }

  40% {
    transform: scaleX(1);
    opacity: .7;
  }

  100% {
    transform: scaleX(.2);
    opacity: .4;
  }
}

.shadow:nth-child(4) {
  left: 45%;
  animation-delay: .2s
}

.shadow:nth-child(5) {
  left: auto;
  right: 15%;
  animation-delay: .3s;
}

.total-flames {
  font-size: large; /* Make it big */
  font-weight: bold; /* Make it strong */
  color: orangered; /* Make it red */
}

.product-modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Dark background */
  padding-top: 5px;
  margin-bottom: 5px;
}

.product-modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 95%;
  height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative; /* Makes the close button relative to this */
}

.product-modal-item-details-container {
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  display: flex;
  flex-direction: row; /* Align columns horizontally */
  gap: 20px; /* Add space between columns */
}

.product-modal-item-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-height: 100%;
  gap: 5px;
  margin-top: 10px;
}

.product-modal-item-column-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  max-height: 100%;
  gap: 5px;
  margin-top: 10px;
}

/* Make the last child span both columns if it's the only one in the last row */
.product-modal-item-column-2 > .product-modal-item-row:nth-last-of-type(1):nth-child(odd) {
  grid-column: span 2;
}

.product-modal-item-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 8px 0;
  border-radius: 5px;
  margin-top: 10px;
  width: 100%;
  max-height: 100%;
}

.product-modal-item-image {
  max-width: 100%; /* Prevents the image from exceeding its container */
  max-height: 80vh; /* Ensures it does not exceed the modal height */
  width: auto; /* Maintains aspect ratio */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Removes extra spacing around inline images */
  object-fit: contain; /* Ensures the whole image fits inside */
}

.product-modal-content h1,
.product-modal-content p,
.product-modal-content h3,
.product-modal-content label{
  font-size: 10pt;
}



.search-container {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-top: 20px;
  margin-right: 100px;
}

.search-input {
  padding: 10px;
  font-size: 16px;
  width: 200px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.search-button {
  padding: 10px;
  font-size: 16px;
  background-color: var(--secondary-color);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 5px;
}

.search-button:hover {
  background-color: #45a049;
}

.reset-btn {
  font-size: 50px;
  font-weight: bold;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.3s ease; /* Smooth transition for rotation */
  position: absolute;
  top: 100px; /* Distance from the top of the modal */
  right: 50px; /* Distance from the right of the modal */
}

.reset-btn:hover {
  transform: rotate(360deg); /* Spins on hover */
}

.reset-btn:focus {
  outline: none;
}

.tooltip {
  visibility: hidden;
  position: absolute;
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  max-width: 75px;
  max-height: 50px;
  font-size: 15pt;
  top: 15px; /* Adjust this value to move it down */
}


.reset-btn:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.partnership-container{
  padding: 50px 0;
  text-align: center;
  color: white;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Optional: keeps the background fixed while scrolling */
  width: 100vw;
  height: auto; /* Makes it take up the full screen height */
}

.partnership-info{
  width: 80%;
  margin: 50px auto;
  padding: 20px;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: black;
}

.partnership-info h2,
.partnership-info p {
  color: #000;
}


.vision-info{
  width: 80%;
  margin: 50px auto;
  padding: 20px;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: black;
}

.vision-info h3,
.vision-info p{
  color: #000;
}

.contactus-info{
  width: 80%;
  margin: 50px auto;
  padding: 20px;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  color: black;
}

.contactus-info h4,
.contactus-info p,
.contactus-info a{
  color: #000;
}

.privacy-container {
  background: url('/images/heroImage.png') no-repeat center center/cover;
  height: 25vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Optional: keeps the background fixed while scrolling */
}

.overlay {
  padding: 20px;
  color: black;
  width: 100%;
}

.title {
  font-size: 36px;
  font-weight: bold;
}

.content-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.policy-section {
  margin-bottom: 15px;
}

.policy-section h2 {
  font-size: 22px;
  color: var(--secondary-color);
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 5px;
  margin-bottom: 10px;
}

.policy-section p {
  font-size: 16px;
  line-height: 1.6;
}

.profile-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 25px;
  width: 100%;
  text-align: center;
  transition: transform 0.3s ease-in-out;
}

.profile-card:hover {
  transform: translateY(-5px);
}

.profile-card h2 {
  font-size: 22px;
  color: var(--primary-color);
  margin-bottom: 10px;
}

.profile-card h4 {
  font-size: 16px;
  color: var(--secondary-color);
  margin-bottom: 15px;
}

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

.policy-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.policy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.policy-card h2 {
  font-size: 1.75rem;
  color: #2c3e50;
  margin-bottom: 16px;
}

.policy-card p, 
.policy-card ul, 
.policy-card li {
  font-size: 1rem;
  line-height: 1.6;
  color: #34495e;
}

.policy-card ul {
  padding-left: 20px;
  margin-top: 12px;
}

.policy-card li {
  margin-bottom: 8px;
}

a {
  color: #0077cc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .policy-card {
    padding: 24px;
  }

  .policy-card h2 {
    font-size: 1.5rem;
  }

  .policy-card p, 
  .policy-card ul, 
  .policy-card li {
    font-size: 0.95rem;
  }
}

.teacher-group {
 display: flex;
 line-height: 28px;
 align-items: center;
 position: relative;
 width: 100%;
}

.teacher-input {
 width: 100%;
 height: 40px;
 line-height: 28px;
 padding: 0 1rem;
 padding-left: 2.5rem;
 border: 2px solid transparent;
 border-radius: 8px;
 outline: none;
 background-color: #f3f3f4;
 color: #0d0c22;
 transition: .3s ease;
}

.teacher-input::placeholder {
 color: #9e9ea7;
}

.teacher-input:focus, input:hover {
 outline: none;
 border-color: rgba(234,76,137,0.4);
 background-color: #fff;
 box-shadow: 0 0 0 4px rgb(234 76 137 / 10%);
}

.teacher-icon {
 position: absolute;
 left: 1rem;
 fill: #9e9ea7;
 width: 1rem;
 height: 1rem;
}

/* ---------- Student Details enhancements ---------- */
.section-title {
  color: var(--primary-color);
  margin-bottom: 4px;
}

/* subtle secondary text */
.muted {
  color: #666;
  font-size: 0.95rem;
}

/* header stat pill */
.stat {
  min-width: 140px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.08);
  text-align: right;
}
.stat-label {
  font-size: 0.8rem;
  color: #666;
}
.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary-color);
  line-height: 1.2;
}

/* primary action (compliments existing .btn) */
.primary-btn {
  background-color: var(--secondary-color);
  color: #fff;
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, background-color .2s ease;
}
.primary-btn:hover { background-color: #7ec7cc; }
.primary-btn:active { transform: scale(0.98); }

/* tabs */
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.tab {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-bottom: none;
  color: #333;
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.tab:hover { background: #f7f7f7; }
.tab.active {
  color: var(--primary-color);
  background: #fff;
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}

/* list rows inside tabs (aligns with your my-progress styles) */
.list .my-progress-row,
#upcoming-assignments .my-progress-row,
#adjustment-log .my-progress-row {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}

/* modal tweaks to match cards */
.adjust-form .input,
.adjust-form textarea {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
}
.adjust-form label {
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

/* chip presets */
.chip {
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform .06s ease, background-color .2s ease;
}
.chip:hover { background: #f7f7f7; }
.chip:active { transform: scale(0.98); }

/* layout refinement on header summary at narrow widths */
@media (max-width: 768px) {
  .header-summary {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .stat { text-align: left; width: 100%; }
}