style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

body, html {
  font-family: 'Inter', sans-serif; /* Assuming 'Inter' is the font used */
  height: 100%;
  overflow-x: hidden;
}

.homepage {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.menu {
  background: linear-gradient(90deg, #45CDC5 0%, #5BBEDD 100%);
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.brand-name {
  font-size: 150%;
  color: #5BBEDD; /* Adjust the percentage to your liking */
}
.logo-container img{
  width: 85px !important; /* Or whatever width you prefer */
  height: auto !important;
  border-radius: 30px;
  margin-left: 50px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.content {
  padding: 20px; /* Adjust padding as needed */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
}

.intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
}

.intro-text,
.intro-image-container {
  max-width: 50%;
  flex: 1;
  padding: 10px;
}

.intro-text h1 {
  font-size: 36px;
  margin-bottom: 1rem;
}

.intro-text p {
  font-size: 20px;
  margin-bottom: 1rem;
}

.get-started-button {
  display: inline-block;
  padding: 15px 30px;
  background-color: #5BBEDD;
  border-radius: 10px;
  border: none;
  color: whitesmoke;
  text-align: center;
  text-decoration: none; /* Removes the underline from links */
  cursor: pointer;
  font-weight: bold; 
  font-size: 20px;
}


.intro-image {
  width: 100%;
  height: auto;
  border-radius: 43px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.mission {
  text-align: center;
  padding: 2rem;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f2f2f2;
}

@media (max-width: 768px) {
  .intro-text {
    max-width: 100%;
    text-align: center;
  }
  .intro-image-container {
    max-width: 100%;
  }
}

/* PROFILE PAGE */ 


.medical-profile {
  background-color: white; 
  min-height: 100vh;
}

.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to right, #45CDC5, #5BBEDD); /* Apply the gradient here */
  padding: 1rem; /* Adjust padding as needed */
}

.home-button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: whitesmoke; /* Your teal color */
  color: black; /* Text color */
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none; /* Remove the underline from links */
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.home-button:hover {
  background-color: lightcyan; /* Slightly darker teal on hover */
}
.header {
  padding: 2rem;
  background-color: white;
  color: #333;
}

.header h1 {
  color: black;
  margin-bottom: 1rem;
}
.content-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 20px;
}
.button-container {
  display: flex;
  justify-content: center; /* Aligns the button horizontally center */
  align-items: center; /* Aligns the button vertically center */
}
.exercise-plan,
.week-goal {
  margin: 0;
  padding: 0;
  width: 48%; /* Each takes up roughly half the width */
}

.start-routine-button {
  display: inline-block; /* Allows padding and width to be applied correctly */
  padding: 15px 30px;
  background-color: #45CDC5; /* Teal background */
  border: none;
  border-radius: 5px;
  color: white; /* White text */
  font-size: 18px;
  font-weight: bold;
  margin: 20px auto;
  cursor: pointer;
  text-decoration: none; /* Removes underline from link */
  text-align: center;
  transition: background-color 0.3s ease;
}


.start-routine-button:hover {
  background-color: #39b2a9; /* Slightly darker teal on hover */
}

.session-history {
  /* Styles for the history section */
  margin: 20px auto;
  width: 35%; 
  max-width: 600px; /* Maximum width */

}

.history-list {
  list-style: none; /* Removes default list styling */
  padding: 0;
}

.history-item {
  background-color: #e6f7ff; /* Light blue background for history items */
  padding: 10px;
  margin-bottom: 10px; /* Space between history items */
  border-radius: 5px; /* Rounded corners */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-icon {
  color: green; /* Color for the check mark */
  font-size: 24px; /* Size of the check mark */
}

.content-container {
  display: flex;
  justify-content: space-between; /* This will place the content and the exercise plan side by side */
  padding: 2rem; /* Add padding for spacing */
  padding-left: 5%;
}

.welcome-section {
  flex: 1; /* Takes up remaining space */
  /* Additional styling for the welcome section */
}

.exercise-plan {
  flex: 0 0 45%; /* Locks the exercise plan to 40% width of the container */
  max-width: 45%; 
  background-color: #fff; /* Set the background color */
  padding: 2rem;
  padding-left: 5%;
  border-radius: 10px; /* Rounded corners for the plan */
}

.exercise-item {
  background-color: #E0F7FA; /* Light teal background for each item */
  border-radius: 10px; /* Rounded corners for the items */
  padding: 1rem; /* Padding inside each exercise item */
  margin-bottom: 1rem; /* Space between exercise items */
  /* You can add a border or shadow to each item if needed for better separation */
}

.exercise-item h3 {
  color: #333; /* Dark text color for readability */
}



.doctor-note {
  border: 2px solid #45CDC5; /* Border color to match the design */
  border-radius: 10px; /* Rounded corners */
  padding: 1rem; /* Padding for the note */
  margin-top: 1rem; /* Space at the top */
}



/* ... additional CSS as needed ... */

/* ... additional CSS as needed ... */

/* Additional styling as needed for progress section and other components */

/* ACTIVE SESSION PAGE*/

.active-session-header {
  background: linear-gradient(to right, #45CDC5, #5BBEDD);
  padding: 1rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-weight: bold;
  color: white;
  position: absolute; /* Position it absolutely within the header */
  left: 50%; /* Position it from the left 50% of the header */
  transform: translateX(-50%); /* Shift it back to the left by half of its width */
}

.return-button {
  display: inline-block; /* Allows padding and width to be applied correctly */
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: black; /* White text */
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none; /* Removes underline from link */
  text-align: center;
  transition: background-color 0.3s ease;
}
.return-button {
  background-color: white; /* Teal background for the return button */
}
.return-button:hover {
  background-color: lightcyan; /* Slightly darker teal on hover for return button */
}
.stop-button {
  display: inline-block; /* Allows padding and width to be applied correctly */
  padding: 15px 30px;
  background-color: lightcoral; /* Teal background */
  border: none;
  border-radius: 5px;
  color: white; /* White text */
  font-size: 18px;
  font-weight: bold;
  margin: 20px auto;
  cursor: pointer;
  text-decoration: none; /* Removes underline from link */
  text-align: center;
  transition: background-color 0.3s ease;
}

.stop-button:hover {
  background-color: lightpink; /* Darker red on hover for stop button */
}
.active-session-content {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.session-controls {
  flex-basis: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.session-main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.session-info {
  text-align: center;
  width: 100%;
  padding-bottom: 20px; /* Add space between the info and the webcam feed */
}
.current-exercise{
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
}

.webcam-feed {
  width: 640px; /* Set a fixed width for your webcam feed */
  height: 480px; /* Set a fixed height for your webcam feed */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px solid #ccc; /* Placeholder for the webcam feed area */
  margin: auto; /* Placeholder for the webcam feed area */
}


/* Add specific styling for buttons and webcam area */
button , .stop-button{
  padding: 10px 20px;
  border-radius: 5px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
}


/* Adjust the layout further with your own styles, colors, and sizes as needed */
/* AFTER SESSION SUMMARY PAGE*/


.session-summary-header {
  background: linear-gradient(to right, #45CDC5, #5BBEDD);
  padding: 1rem;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo-container img{
  width: 85px !important; /* Or whatever width you prefer */
  height: auto !important;
  border-radius: 30px;
  margin-left: 25px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.header-content {
  display: flex;
  align-items: center;
}
.header-title{
  font-size: large;
}

.content-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  min-height: calc(100vh - 60px); /* Adjust height calculation based on actual header/footer size */
}
.left-container,
.right-container {
  width: 48%; /* Adjust width as needed for spacing */
}
.left-container h2{
  color: #333;
  margin-bottom: 20px;
}
.feedback-section,
.recovery-tips {
  margin-bottom: 20px;
  margin-top: 40px;
}


h1 {
  margin-left: 20px;
}

.session-summary-content {
  padding: 20px;
}

h2 {
  color: #333;
  margin-bottom: 10px;
}

p {
  color: #666;
  margin-bottom: 20px;
}

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

textarea {
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-height: 100px;
}

.recovery-tips {
  background-color: #e0f7fa;
  padding: 20px;
  border-radius: 10px;
}

.recovery-tips h3 {
  margin-bottom: 10px;
}

.recovery-tips ul {
  list-style-type: none;
  padding: 0;
}

.recovery-tips li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.recovery-tips li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: green;
}

.footer {
  position: fixed;
  justify-content: space-between;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #f8f8f8;
  border-top: 1px solid #e7e7e7;
  text-align: center; /* Centers the content of the footer */
}
/* Add this to your existing CSS */

.navigation {
  padding: 10px 20px;
  background: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
}

.back-to-profile {
  text-decoration: none;
  color: #333;
  background: #e0f7fa;
  padding: 10px 15px;
  border-radius: 5px;
  font-weight: bold;
  align-items: center;
}

.back-to-profile:hover {
  background: #bde1ee;
}