/* Reset some default browser styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reset some default browser styles */
body, h1, p {
  margin: 0;
  padding: 0;
  font-size: 16px;
}

/********* Styles for questions page ****************/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

label {
  display: flex;
  flex-direction: row-reverse; /* Ensures text comes first in an RTL context */
  align-items: center;
  direction: rtl;
  justify-content: flex-end; /* This pushes the content to the right */
  margin-bottom: 0.625rem;
}

input[type="radio"] {
  margin-left: 0.625rem;  /* Add some space between the radio and the text */
}

.answer-text {
  font-size: 1.2rem; 
  text-align: right;
}

.answer-text span {
  margin-right: 3.125rem; /* Adjust the value as needed */
}

.answer-text input[type="radio"] {
  margin-right: 3.125rem; /* Adjust the value as needed */
}

.main-layout {
  display: flex;
  align-items: flex-start;
  height: 100%;
}

.container {
  flex-direction: column; /* Stack child elements vertically */
  flex: 1; 
  height: 100%;
  padding: 1.25rem;
  direction: rtl;
  margin-right: 6rem;
  position: relative;
}

#error-message-container {
    position: fixed; /* Fixed position */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust the position to truly center it */
    width: 80%; /* Adjust the width as needed */
    max-width: 600px; /* Maximum width */
    text-align: right; /* Right align for RTL */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.5); /* Optional: adds shadow for better visibility */
    background-color: white; /* Background color */
    padding: 20px; /* Padding inside the container */
    box-sizing: border-box; /* Ensures padding doesn't affect the width */
    display: none; /* Initially hidden */
    z-index: 1000; /* Ensure it's on top of other elements */
}

#error-message-container .alert {
    font-family: 'David Libre', sans-serif; /* Use your desired font */
    font-size: 1.8rem; /* Adjust font size as required */
}

#error-message-container a {
    color: #7030A0; /* Light pink color for the link */
    text-decoration: none; /* Optional: removes underline from links */
}

#error-message-container a:hover {
    text-decoration: underline; /* Optional: adds underline on hover */
}


.subjects-sidebar {
  /*flex: 1;*/
  width: 20%;
  height: 100%;
  background-color:#7030A0;
  /*flex-basis: 25rem; */
  border-left: 0.0625rem solid #ccc; /* Optional, just to separate visually */
  direction: rtl;
  margin: 0; /* Add this to remove any default margin */
  padding: 0; /* Add this to remove any default padding */
}

.subjects-container-sidebar {
  display: flex;
  flex-direction: column;
  align-items: right; 
  margin-top: 4.375rem;
}

.li_sidebar {
  display: block;
  justify-content: space-between; /* Separates the anchor-button-container and subject-content */
  text-align: right;
  margin-bottom: 1.875rem;
  font-size: 1.5625rem;
  margin-right: 2.1875rem;
  color: white;
}

#subjectList_sidebar .li_sidebar {
    text-align: right;  /* Aligns the content of each list item to the right */
    margin-bottom: 1.875rem;  /* Retain the margin-bottom style for li */
    margin-right: 2.1875rem;
    font-family: 'David Libre', sans-serif;
    transition: background-color 0.3s; /* transition effect for hover */
    color: white;   
}


#subjectList_sidebar a_sidebar {
    width: auto;  /* Takes the full width of its parent */
    text-align: right;  /* Ensures that the text inside the anchor is also right-aligned */
    text-decoration: none;  /* Retain the text-decoration style for a */
    color: white;  /* Retain the color style for a */
    border-bottom: 0.0625rem solid #ccc; /* adds a bottom border to each list item */
    font-family: 'David Libre', sans-serif;
}

#subjects-sidebar-title1{
  margin-top: -2.5rem;
  margin-bottom: 3.125rem;
  margin-right: 2.1875rem;
  color: white;
  font-size: 1.5625rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}


.sidebar-text {
  color: white;
  font-family: 'David Libre', sans-serif; 
  font-size: 1.25rem;  
}

.sidebar-text:hover {
  color: yellow;
}

.sidbar-button {
  text-decoration: none;
  /* Rectangle Shape */
  width: 8.125rem;
  height: 1.875rem;

  margin-right: 2.1875rem;
  margin-top: 0.625rem;

  display: flex;
  justify-content: center;
  align-items: center;

  /* Rounded Corners */
  border-radius: 0.625rem;

  /* Other Styling */
  background-color: #D8E8F1; 
  color: black;
  cursor: pointer;
  font-size: 1.125rem;
  font-family: 'David Libre', sans-serif; /* using the imported font */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Added border-color to the transition */
}

.sidbar-button:hover {
  text-decoration: none;
  background-color: yellow;
  color: black; 
}


h1 {
  font-size: 1.5rem;
  margin-bottom: 0.625rem;
  font-family: 'David Libre', sans-serif;
}

#mediaContainer {
  height: 60%;
  /*height: 25rem;*/
  margin-bottom: 1rem; /* Spacing between media and the options */
  position: relative; /* To position media elements within */
}

#questionImage, #questionVideo {
  max-width: 100%; /* Adjust the max-width as needed */
  max-height: 100%; /* Add this to limit the image's height */
  display: block;
  position: relative;
  top: auto;
  right: auto;
}

#playButton {
  position: absolute;
  top: 45%;
  left: 65%;
  transform: translate(-50%, -50%);
  font-size: 50px; 
  color: #7030A0; 
  cursor: pointer;
  z-index: 10; /* Make sure it's above the video */
}

#options {
  height: 20%;
  margin-top: 2rem;
  /*margin-bottom: 0.5rem; */
  font-family: 'David Libre', sans-serif;
  list-style-type: none;
  padding-left: 0; /* This will remove any padding that might be default for lists */
  color: #000000;
}

#options input[type="radio"] {
  -webkit-appearance: none; /* For Safari and Chrome */
  -moz-appearance: none;    /* For Firefox */
  appearance: none;         /* Standard property */

  background-color: white;  /* Set the background color to white */
  margin-left: 0.9375rem;  
  width: 0.9375rem;              /* Match the width and height of your custom radio button */
  height: 0.9375rem;             
  position: relative;
  border-radius: 50%;       /* Ensure it remains circular */
  outline: none;            /* Remove any focus outline */
}

#options input[type='radio']:after {
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 0.9375rem;
  top: -0.3125rem;
  left: 0rem;
  position: relative;
  background-color: #d1d3d1;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 0.125rem solid white;
}

#options input[type='radio']:checked:after {
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 0.9375rem;
  top: -0.3125rem;
  left: 0rem;
  position: relative;
  background-color: #7030A0;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 0.125rem solid white;
}

#options label {
  font-weight: 550;
}


#buttonsContainer {
  height: 20%;
  /*margin-top: 1.25rem;*/
}

#buttonsContainer button {
  display: block;
  margin-bottom: 0.625rem;

  font-weight: 550;
  
  /* Rectangle Shape */
  width: 9.375rem;
  height: 1.875rem;

  /* Rounded Corners */
  border-radius: 0.625rem;

  /* Other Styling */
  background-color: white;     /* White background */
  color: #000000;
  border: 0.125rem solid #A6A6A6;  
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;  /* Added border-color to the transition */
  font-family: 'David Libre', sans-serif;
}

#buttonsContainer button:hover {
  background-color: #7030A0;
  color: white; 
}

.solution-buttons {
  display: flex;
  justify-content: row-reverse; 
  gap: 0.625rem; 
}


#resetChapterButton {
  width: 12.375rem !important; /* Adjust the width as needed */
}


#buttonsContainer .sidbar-button {
  margin: initial;
  justify-content: center;
  align-items: center;
  text-decoration: initial;
  text-align: center;
  text-rendering: auto;
  display: flex;
  /*justify-content: row-reverse; 
  gap: 0.625rem; */
  display: block;
  margin-bottom: 0.625rem;

  font-weight: 550;
  
  /* Rectangle Shape */
  width: 9.375rem;
  height: 1.875rem;
  line-height: 1.6rem;

  /* Rounded Corners */
  border-radius: 0.625rem;

  /* Other Styling */
  background-color: white;     /* White background */
  color: #000000;
  border: 0.125rem solid #A6A6A6;  
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;  /* Added border-color to the transition */
  font-family: 'David Libre', sans-serif;
}

#buttonsContainer .sidbar-button:hover {
  background-color: #7030A0;
  color: white; 
}

/*#nextQuestionButton {
  margin-top: 1.875rem; 
}*/

input[type="radio"]:focus {
  box-shadow: 0 0 0.3125rem #f3f3f3; 
}

.progress-container {
  /*position: relative; */
  width: 0%; 
  /*width: 36.5625rem;*/
  /*max-width: inherit;*/ /* This ensures the progress bar inherits the max width of its parent (in this case, the container) */
  height: 0.625rem;
  background-color: #f3f3f3;
  border-radius: 0.625rem;
  overflow: hidden;
  margin-bottom: 1.25rem; 
  font-size: 0.75rem;
}

.progress-bar {
  position: relative; 
  width: auto;
  /*position: absolute;*/
  /*width: 100%;*/
  height: 100%;
  background-color: #7030A0;
  transition: width 0.3s ease; 
}

.progress-bar-text-container {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-text {
  color: white;
  pointer-events: none; 
}

ul {
  list-style-type: none;
  padding-left: 0;
}

a:hover {
  text-decoration: underline;
}

/********************************* Login page styles ***********************************/
.login-container {
  max-width: 31.25rem;
  margin: 2.5rem auto;
  padding: 1.25rem;
  direction: rtl;
  border: 0.125rem solid #7030A0;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.login-container h2 {
  font-family: 'David Libre', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: right;
  padding-right: -0.625rem;
}

.login-container label {
  display: block;
  margin-bottom: 0.625rem;
  font-family: 'David Libre', sans-serif;
  font-size: 1.125rem;
  text-align: right;
  padding-right: -1.25rem;
}

.login-container input[type="text"], 
.login-container input[type="password"] {
    width: 16.625rem; 
    height: 1.875rem; 
    padding: 0 0.625rem;  /* adjusted padding */
    margin-bottom: 1.25rem;
    border: 0.125rem solid #ccc;
    border-radius: 0.3125rem;
    font-family: 'David Libre', sans-serif;
    font-size: 1rem;
    direction: rtl;
}

.login-container .input-group {
  position: relative; /* To allow absolute positioning within it */
}

.login-container .eye-toggle {
  cursor: pointer;
  position: absolute;
  top: 55%;
  left: 13.125rem;
  transform: translateY(-50%);
  font-size: 1.125rem;
  /* More styles as required */
}



.login-container button[type="submit"] {
  width: 9.375rem;
  height: 1.875rem;
  margin: 0 auto; /* This will center the button */
  padding: 0.1875rem 0.625rem;  /* Adjusted padding for even vertical spacing */
  font-size: 1.125rem;
  font-family: 'David Libre', sans-serif;
  border: 0.125rem solid #7030A0;
  background-color: white;
  color: black;
  cursor: pointer;
  border-radius: 0.625rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  margin: auto 0;
}

.login-container button[type="submit"]:hover {
  background-color: #7030A0;
  color: white;
}

.login-container a {
  font-family: 'David Libre', sans-serif;
  font-size: 1rem;
  color: #7030A0;
  text-decoration: none;
  text-align: right;
  display: block;
  margin-top: 0.625rem;
  padding-right: 1.25rem;
}

.login-container a:hover {
  text-decoration: underline;
}

.login-container .forgot-password-link {
  font-family: 'David Libre', sans-serif;
  font-size: 1.125rem;        /* Increase the font size */
  text-align: right;     /* Align the text to the right */
  display: block;        /* Make the link take up the full width */
  margin-top: 1.5625rem;      /* Add some space above the link */
  padding-right: 0rem;
  margin-right: 0.3125rem;
  text-decoration: none; 
  color: #7030A0;       
}

.login-container .forgot-password-link:hover {
  color: #7030A0;        /* Darken the link color when hovering */
}

.login-container #problemLink {
    font-family: 'David Libre', sans-serif;
    font-size: 1.125rem;   
    text-align: right;    
    margin-top: 0.9375rem;      
    padding-right: 0rem;
    margin-right: 0.3125rem;
    text-decoration: none;
    color: #7030A0;
}

.login-container  #problemLink:hover {
  color: #7030A0;        /* Darken the link color when hovering */
}


.login-container #contactInfo {
    font-family: 'David Libre', sans-serif;
    font-size: 1rem;   
    color:black;
    text-align: right;    
    margin-top: 0.9375rem;      
    padding-right: 0rem;
    margin-right: 0.3125rem;
}

#thankYouMessage p {
    font-size: 1.2em; 
    font-family: 'David Libre', sans-serif;
    margin-bottom: 1.25rem;
}


/* --------------------Forgot password style---------------------------------------*/

.forgot-password-container {
  max-width: 31.25rem;
  margin: 2.5rem auto;
  padding: 1.25rem;
  direction: rtl;
  border: 0.125rem solid #7030A0;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.forgot-password-container h2 {
  font-family: 'David Libre', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: right;
}

.forgot-password-container label {
  display: block;
  margin-bottom: 0.625rem;
  font-family: 'David Libre', sans-serif;
  font-size: 1.125rem;
  text-align: right;
}

.forgot-password-container input[type="email"] {
  width: 15.625rem;
  height: 1.875rem;
  padding: 0 0.625rem;
  margin-bottom: 1.25rem;
  border: 0.125rem solid #ccc;
  border-radius: 0.3125rem;
  font-family: 'David Libre', sans-serif;
  font-size: 1rem;
}

.forgot-password-container button[type="submit"] {
  width: 12.5rem;
  height: 1.875rem;
  margin: 0 auto;
  padding: 0.1875rem 0.625rem;
  font-size: 1.125rem;
  font-family: 'David Libre', sans-serif;
  border: 0.125rem solid #7030A0;
  background-color: white;
  color: black;
  cursor: pointer;
  border-radius: 0.625rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.forgot-password-container button[type="submit"]:hover {
  background-color: #7030A0;
  color: white;
}

.forgot-password-container #forgot-password-msg{
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    font-family: 'David Libre', sans-serif;
    text-align: right;
    transition: color 0.3s ease; 
}

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.125rem;
}

.spinner {
    border: 0.5rem solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 0.5rem solid #7030A0;
    width: 2.5rem;
    height: 2.5rem;
    animation: spin 1s linear infinite;
}

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


/* --------------------Reset password style---------------------------------------*/

.reset-password-container {
  max-width: 31.25rem;
  margin: 2.5rem auto;
  padding: 1.25rem;
  direction: rtl;
  border: 0.125rem solid #7030A0;
  border-radius: 0.625rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reset-password-container h2 {
  font-family: 'David Libre', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  text-align: right;
}

.reset-password-container label {
  display: block;
  margin-bottom: 0.625rem;
  font-family: 'David Libre', sans-serif;
  font-size: 1.125rem;
  text-align: right;
}

.reset-password-container input[type="text"], 
.reset-password-container input[type="password"] {
  width: 15.625;
  height: 1.875rem;
  padding: 0 0.625rem;
  margin-bottom: 1.25rem;
  border: 0.125rem solid #ccc;
  border-radius: 0.3125rem;
  font-family: 'David Libre', sans-serif;
  font-size: 1rem;
}

.reset-password-container button[type="submit"] {
  width: 10.5rem;
  height: 1.875rem;
  margin: 0 auto;
  padding: 0.1875rem 0.625rem;
  font-size: 1.125rem;
  font-family: 'David Libre', sans-serif;
  border: 0.125rem solid #7030A0;
  background-color: white;
  color: black;
  cursor: pointer;
  border-radius: 0.625rem;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.reset-password-container button[type="submit"]:hover {
  background-color: #7030A0;
  color: white;
}

.reset-password-container #reset-password-msg{
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    font-family: 'David Libre', sans-serif;
    text-align: right;
    transition: color 0.3s ease; 
}

.reset-password-container #reset-password-msg a {
    color: green; 
    text-decoration: underline;
    cursor: pointer;
    transition: all 0.3s; 
}

.reset-password-container #reset-password-msg a:hover {
    color: darkgreen;     
}

.reset-password-container .password-error {
    margin-bottom: 1.25rem; 
}

.reset-password-container .password-wrapper {
  position: relative;
}

.reset-password-container .eye-toggle {
  cursor: pointer;
  position: absolute;
  top: 55%;
  left: 15.4375rem;
  transform: translateY(-50%);
  font-size: 1.125rem;
}


/* --------------------Main page style---------------------------------------*/

@keyframes gradientBG {
  0% {
      background-position: 0% 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0% 50%;
  }
}

/*body.purple-bg {
  background: linear-gradient(270deg, #7030A0, #9b55d5, #5d409c);
  background-size: 600% 600%;
  animation: gradientBG 10s ease infinite;
}*/

body.purple-bg {
  background-color: #9b55d5; 
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers content horizontally for rtl languages */
  width: 100%; /* take full width */
}

#main-title1 {
  margin-top: 15.625rem;  /* Add more space from the top */
  color: white;
  font-size: 5rem;
  text-align: center; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}

#main-title2 {
  margin-top: 1.875rem; /* Add more space from the top */
  margin-bottom: 4.375rem;
  color: white;
  font-size: 4.375rem;
  text-align: center; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}



#header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px; 
}

#logo-container {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  align-items: flex-start;
  display: flex;
  /*align-items: center;
  margin-left: auto;*/
}

#site-logo {
  margin-right: 0.625rem;
  width: 6.25rem; 
} 

#logo-text {
  font-size: 1.875rem;       
  color: white;           
  margin-top: 2.8125rem;     
  font-family: 'David Libre', sans-serif; 
  margin-right: 0.9375rem;
}

.centered-nav {
    font-size: 1.375rem; 
    font-family: 'David Libre', sans-serif; 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 2.8125rem;   
}

.centered-nav a {
    margin: 0 15px; 
    text-decoration: none; 
    color: white; 
}

.centered-nav a:hover {
    text-decoration: underline; 
}

.nav-separator {
    color: white;
    margin: 0 10px; 
}

/* Style for the buttons */
#buttons {
  display: flex;
  justify-content: center;  /* Horizontally center the buttons */
  align-items: center; /* Vertically center the buttons */
  gap: 2.5rem;
}

#buttons button {
  /* Rectangle Shape */
  width: 9.375rem;
  height: 3.125rem;

  /* Rounded Corners */
  border-radius: 0.625rem;

  /* Other Styling */
  background-color: #D8E8F1; 
  color: black;
  border: 0.125rem solid #7030A0; 
  cursor: pointer;
  font-size: 1.5rem;
  font-family: 'David Libre', sans-serif; /* using the imported font */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Added border-color to the transition */
}
  /* Styles for hover state */
#buttons button:hover {
      background-color: yellow;
      color: black; /* Change text color to white on hover */
}

.custom-line {
  border: 0;                    /* Removes default border */
  height: 0.1875rem;                  /* Set the thickness of the line */
  background-color: #D8E8F1;   /* Set the color of the line */
  margin: 6.25rem auto;              /* 20px margin from top and bottom, 5% margin from left and right */
  width: 90%;                  /* Width of the line to leave 5% margin on both sides */
}


.system-container {
  display: flex;
  flex-direction: column; 
  align-items: stretch;
  margin: 0 5%;  /* 5% margin on both sides */
}

.content-section {
  display: flex;
  width: 100%;
}

#main-title3 {
  margin-top: -2.5rem;
  margin-bottom: 3.125rem;
  color: white;
  font-size: 1.875rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}

#video-section {
  flex: 1;          /* This ensures that each section takes up half of the container's width */
  max-width: 50%;   /* Limits the width to 50% of the parent */
  margin: 0;                /* Reset margin */
  padding: 0;               /* Reset padding */
}

#text-section {
  flex: 1;           /* This ensures that each section takes up half of the container's width */
  max-width: 50%;    /* Limits the width to 50% of the parent */
  padding: 0.625rem;     /* Some padding to separate text from edges */
  font-family: 'David Libre', sans-serif; /* As per your previous examples */
  font-size: 1.5rem;   /* Adjust size as needed */
  color:white;
  margin-right: 1.25rem;
  line-height: 1.8rem;  /* Adjust this value to increase/decrease the space between rows */
}


#text-section p {
  font-size: 1.5rem; /* Adjust the font size for the <p> element */
}


#video-section, #text-section, #video-section video {
  vertical-align: top;
}

#video-section video {
  display: block;           /* This removes any default margin from the video element */
  margin: 0;                /* Reset margin */
  padding: 0;               /* Reset padding */
  width: 100%;  
}

#main-title4 {
  margin-left: auto;
  margin-right: 4.6875rem;
  margin-top: -2.5rem;
  margin-bottom: 3.125rem;
  color: white;
  font-size: 1.875rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}


.subjects {
  display: flex;
  justify-content: space-between; /* Change to space-between to utilize the margin for spacing */
  padding: 0.625rem 0;
}

.subjects .subject {
  cursor: pointer;
  margin-right: 1.25rem;  /* Provides spacing between subjects */
  padding: 0.3125rem 0.625rem;
  font-size: 1.5rem;
  font-family: 'David Libre', sans-serif; /* using the imported font */
  color: white;
  transition: background-color 0.3s;
}

.subjects .subject:hover {
  color: yellow
}

.subject-container {
  display: flex;
  margin-top: 1.25rem;
}

.subjects .subject.active {
  color: yellow;
}

#image-subject, #text-subject {
  margin: 0 5%;
}

#image-subject:first-child, #text-subject:first-child {
  margin-left: 0; /* This ensures the leftmost element doesn't have a left margin */
}

#image-subject:last-child, #text-subject:last-child {
  margin-right: 0; /* This ensures the rightmost element doesn't have a right margin */
}

img {
  max-width: 100%;
  display: block; 
}

#main-title5 {
  margin-left: auto;
  margin-right: 4.6875rem;
  margin-top: -2.5rem;
  margin-bottom: 3.125rem;
  color: white;
  font-size: 1.875rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}


/* About me section */
.aboutme-container {
  display: flex;
  align-items: flex-start;  /* Aligns the top of the child elements */
  justify-content: center;  /* Center the flex items horizontally */
}

#aboutme-image {
  max-width: 50%;
  margin-right: 0;
  display: block;   
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
  flex-shrink: 0;   /* Prevents the image from shrinking */
}

#aboutme-image img {
  width: 100%;       /* Takes full width of its container */
  height: auto;      /* Maintain aspect ratio */
  display: block;    /* Removes any unwanted space at the bottom */
}

#aboutme-text {
  max-width: 50%;    /* Limits the width to 50% of the parent */  
  font-family: 'David Libre', sans-serif; /* As per your previous examples */
  font-size: 1.5rem;   /* Adjust size as needed */
  color:white;
  margin-right: 1.25rem;
  flex-shrink: 0;   /* Prevents the text from shrinking */
  line-height: 1.8rem;  /* Adjust this value to increase/decrease the space between rows */
}

#aboutme-text p {
  font-size: 1.5rem; /* Adjust the font size for the <p> element */
}

.youtube-link-about {
  color: #D8E8F1;
  font-size: 1.5rem;
  font-family: 'David Libre', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease; /* Optional: Smooth transition for hover effects */
}

.youtube-link-about:hover {
  color: yellow;
}

.contact-link {
    color: #D8E8F1;
    font-size: 1.5rem;
    font-family: 'David Libre', sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-link:hover {
  color: yellow;
}


#main-title6 {
  margin-left: auto;
  margin-right: 4.6875rem;
  margin-top: -2.5rem;
  margin-bottom: 3.125rem;
  color: white;
  font-size: 1.875rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}

.comment-images-container {
  display: flex;
  margin: 0 5%; /* 100px margin from top and bottom, 5% margin from left and right */
}

.comment-images-container img {
  max-width: 50%; /* assuming you want each image to take half the container's width */
}

/* User Join Form Styles */
#scroll-target {
  margin-top: 3.75rem; /* Adjust the margin-top value as needed */
}

.user-join-form-container {
  background-color: rgba(128, 0, 128, 0.1); /* light purple background */
  border-radius: 1.5625rem; /* slightly rounded corners */
  width: 100%; 
  max-width: 50rem; /* limit maximum width */
  display: flex;
  flex-direction: column;
  align-items: center; /* center content horizontally */
  justify-content: center; /* center content vertically */
}


#main-title10 {
  font-family: 'David Libre', sans-serif;
  font-size: 1.5rem;
  text-align: right;
  color: white;
  margin: 0;
}

#user-join-form-container form  {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* align to the right in an RTL context */
  width: 100%; /* take full width of its parent */
  margin-top: 1.25rem;
}

#user-join-form-container form  label {
  margin-bottom: 0.625rem; /* space between label and input field */
  margin-top: 0.625rem; /* space between label and input field */
  font-family: 'David Libre', sans-serif; /* consistent font */
  font-size: 1.2rem;
  color: white; 
  width: 37.5rem; /* Adjust the width of the labels as needed */
  display: inline-block; /* Allow labels to take up space */
  height: 1.25rem;
}

#user-join-form-container form .form-group {
  /*position: relative; /* To allow absolute positioning within it */
  display: flex;
  flex-direction: column;
  width: 100%;
  
}

#user-join-form-container form button {
  display: flex;
  justify-content: center;  /* Horizontally center the buttons */
  align-items: center; /* Vertically center the buttons */
  gap: 2.5rem;

  /* Rectangle Shape */
  width: 9.375rem;
  height: 3rem;

  /* Rounded Corners */
  border-radius: 0.625rem;

  /* Other Styling */
  background-color: #D8E8F1; /* White background */
  color: black;
  border: 0.125rem solid #7030A0; /* Blue border */
  cursor: pointer;
  font-size: 1.5rem;
  font-family: 'David Libre', sans-serif; /* using the imported font */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Added border-color to the transition */
  margin-top: 1.25rem;
}
  /* Styles for hover state */
  #user-join-form-container form button:hover {
      background-color: yellow;
      color: black; /* Change text color to white on hover */
}

#user-join-form-container form  .error-message {
  font-family: 'David Libre', sans-serif; /* Use your desired font here */
  font-size: 1.2rem; /* Adjust font size as required */
  color: yellow; /* Make the error message red or any color you prefer */
}

#user-join-form-container form  .error-message a {
    color: yellow;
    text-decoration: underline;
}

#user-join-form-container form .password-wrapper {
  position: relative;
  width: 100%;
  display: flex; /* This is to ensure that its children (input and eye-toggle) are in line */
  align-items: center; /* This centers the items vertically */
}

#user-join-form-container form .eye-toggle {
  cursor: pointer;
  position: absolute;
  top: 30%;
  left: 0.625rem;
  transform: translateY(-50%);
  font-size: 1.125rem;
}

#user-join-form-container form input[type="text"],
#user-join-form-container form input[type="email"],
#user-join-form-container form input[type="password"] {
    flex: 1; /* This makes sure it takes all available space in its container, minus any space for other siblings (like the eye-toggle) */
    width: 100%; /* take full width */
    padding: 0.5rem; /* padding inside input */
    margin-bottom: 1.25rem; /* space between each field */
    border: 0.125rem solid #7030A0; /* purple border */
    border-radius: 0.3125rem; /* slightly rounded corners */
    font-family: 'David Libre', sans-serif; /* consistent font */
    font-size: 1.1rem;
}

#user-join-form-container form  .passwordError  {
  font-family: 'David Libre', sans-serif; /* Use your desired font here */
  font-size: 1.2rem; /* Adjust font size as required */
  color: yellow; /* Make the error message red or any color you prefer */
}



#user-join-form-container form .form-group.checkbox-inline {
    display: flex;
    flex-direction: row-reverse; 
    justify-content: flex-end; 
    text-align: right; 
    width: auto; 
}


#user-join-form-container form .form-group.checkbox-inline label {
    margin-right: 1.2rem;
}

#user-join-form-container form .form-group.checkbox-inline label a {
    color: #D8E8F1 ;
    font-size: 1.3rem ;
    font-family: 'David Libre', sans-serif ;
    transition: background-color 0.3s ease, color 0.3s ease ;
}

#user-join-form-container form .form-group.checkbox-inline label a:hover {
    color: yellow;
}

#user-join-form-container form .form-group.checkbox-inline input#termsCheckbox:checked + label::before {
    background-color: yellow !important; 
    border: 1px solid yellow !important;
}

/* Increase the size of the checkbox */
#termsCheckbox {
    transform: scale(2.2); 
    margin-right: 0.5rem;
}


:root {
  accent-color: yellow;
}

.heading-with-margin {
    margin-top: 1.5rem; 
}



/*-------------------- Subjects page styles --------------------------*/

#logo-container-subjects {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: flex;
  align-items: flex-start; /* aligns the items to the top of the container */
  margin-bottom: 3.125rem;
  flex-direction: row; /* ensure the logo is on the right */
}

#site-logo-subjects {
  margin-right: 0.625rem;
  width: 6.25rem; /* or whatever size you want the logo to be */
} 

/*logo text for subjects page*/
#logo-text-subjects {
  font-size: 1.875rem;      
  color: white;           
  margin-top: 2.8125rem;     
  font-family: 'David Libre', sans-serif; 
  margin-right: 0.9375rem;
}

.subjects-main-container {
  display: flex;
  flex-direction: column;
  align-items: right; 
  margin-top: 12.5rem;
}

li {
  display: block;
  justify-content: space-between; /* Separates the anchor-button-container and subject-content */
  margin-bottom: 1rem; /* Adds some space below each item */
  text-align: right;
}


#courseList li, 
#subjectList li {
    text-align: right;  /* Aligns the content of each list item to the right */
    margin-bottom: 3.125rem;  /* Retain the margin-bottom style for li */
    margin-top: 0.625rem;  /* Move the list a bit up */
    margin-right: 3.125rem;
    font-family: 'David Libre', sans-serif;
    transition: background-color 0.3s; /* transition effect for hover */
}


#courseList a, 
#subjectList a {
    width: auto;  /* Takes the full width of its parent */
    text-align: right;  /* Ensures that the text inside the anchor is also right-aligned */
    text-decoration: none;  /* Retain the text-decoration style for a */
    color: white;  /* Retain the color style for a */
    border-bottom: 0.0625rem solid #ccc; /* adds a bottom border to each list item */
    font-family: 'David Libre', sans-serif;
    font-size: 1.5625rem;
}

#subjectList a:hover {
  color: #ffc085;
  border-bottom-color: #ffc085; 
}

/* Subject in dashboard section */

.subject-content {
  display: flex;
  flex-direction: row; /* Switches the order of children */
  align-items: flex-start;  /* Aligns the top of the child elements */
  justify-content: flex-start;
  width: 100%; /* Ensure it takes full width */
  flex-wrap: nowrap;
}

#subject-content-image,
#subject-content-text {
  margin-top:3.125rem;
  box-sizing: border-box;
}

#subject-content-image {
  flex: 1; /* Take up any remaining space after the text has been rendered */
  max-width: 50%; 
  box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
  flex-shrink: 0;   /* Prevents the image from shrinking */
}

#subject-content-image img {
  width: 100%;       /* Takes full width of its container */
  height: auto;      /* Maintain aspect ratio */
  display: block;    /* Removes any unwanted space at the bottom */
}

#subject-content-text {
  flex: 1;  /* Allow it to grow */
  max-width: 50%;    /* Limits the width to 50% of the parent */  
  padding: 0.625rem;     /* Some padding to separate text from edges */
  font-family: 'David Libre', sans-serif; /* As per your previous examples */
  font-size: 1.5rem;   /* Adjust size as needed */
  color:white;
  margin-right: 1.25rem;
  flex-shrink: 0;   /* Prevents the text from shrinking */
  line-height: 2.5rem;  /* Adjust this value to increase/decrease the space between rows */
}

/* Style for links within #subject-content-text */
#subject-content-text a {
  font-size: 1.3rem;  /* Set your desired font size for the links */
  color: white;  /* Optional: If you want a specific color for links */
  text-decoration: none;  /* Optional: To remove underlines from the links */
}

#subject-content-text a:hover {
  color: #ffc085; 
}

/* Style for the anchor-button container */
.anchor-button-container {
  display: flex; /* Use flexbox */
  justify-content: flex-end; /* Separates the anchor and button */
  align-items: center; /* Vertically center-aligns items */
  width: 98%; /* Takes up half the width of the li */
  margin-bottom: 1rem;
}

/* Ensure the anchor text doesn't overflow and if it does, breaks into multiple lines */
.anchor-button-container a {
  flex: 1; /* Takes up all available space after the button width is subtracted */
  /*white-space: normal;*/ /* Allows line breaks */
  overflow: hidden; /* Hides overflow */
  margin-right: 1rem; /* Adds some space to the right of the text */
  /*width: 100%;*/
  
  /*white-space: nowrap; 
  width: auto; */
  
  display: flex;
  width: 35%;
  align-items: center;
  position: relative;
}

/* Style for the button */
.custom-button  {
    
  display: inline-flex; /* Change from 'flex' to 'inline-flex' to make the button fit the text */
  align-items: center;
  justify-content: center; /* Center the text horizontally and vertically */
  width: auto; /* Remove the fixed width to adjust the button around the text */
  padding: 0.5rem 1rem; /* Add padding to create space around the text */

  /* Rectangle Shape */
  
  /*display: flex;
  width: 15%;*/
  
  /*width: 9.375rem;
  height: 2.5rem;*/

  /*white-space: nowrap;*/

  margin-right: 1.875rem;

  /* Rounded Corners */
  border-radius: 0.625rem;

  /* Other Styling */
  background-color: #D8E8F1; 
  color: black;
  border: 0.125rem solid #7030A0; 
  cursor: pointer;
  font-size: 1.3rem;
  font-family: 'David Libre', sans-serif; /* using the imported font */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Added border-color to the transition */
}
  /* Styles for hover state */
.custom-button:hover {
      background-color: #ffc085;
      color: white; 
}

.correct-answers {
  color: white;
  font-size: 1.5em;  
  font-family: 'David Libre', sans-serif;
  margin-right: 5%;
  margin-left: 0;
  display: flex;
  width: 20%;
  align-items: center;
  position: relative;
}

/* progress bar style */

.arrow-bar {
  display: flex;
  width: 30%;
  align-items: center;
  position: relative;
}

.arrow {
  flex: 2; /* Increase the flex value to give more space to the arrow */
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  direction: rtl;
  transition: background 0.3s ease;
  z-index: 1;
  overflow: visible; /* Ensure contained elements aren't clipped */
}

.arrow-content {
  flex: 1;
  background: linear-gradient(to right, #ffb3b3, #ffc085);
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  clip-path: polygon(0% 50%, 15% 0%, 85% 0%, 70% 50%, 85% 100%, 15% 100%);
  box-shadow: 0rem 0.25rem 0.9375rem rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem 0 0 0.5rem;
  padding-right: 25%; 
}

.arrow.highlighted .arrow-content {
  background: linear-gradient(to right, #ff5050, #ff8533);
}

.arrow span {
  font-weight: bold;
  color: white;
  font-size: 1.2em;
  position: relative;
  z-index: 2;
}

.square {
  width: 1.875rem;
  height: 1.875rem;
  background-color: #fff;
  border: 0.125rem solid #ddd;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: -0.9375rem;
  right: 2.5rem;
  z-index: 3;
  font-weight: bold;
  box-shadow: 0rem 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
}

#subjects-title1{
  margin-top: -2.5rem;
  margin-bottom: 3.125rem;
  margin-right: 4.0625rem;
  color: white;
  font-size: 1.875rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}

.subjects-desc{
  margin-top: -2.5rem;
  margin-bottom: 1.875rem;
  margin-right: 4.0625rem;
  color: white;
  font-size: 1.5rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}

#subjects-title2 {
  margin-top: 3.125rem;
  margin-bottom: 2.5rem;
  margin-right: 4.0625rem;
  color: white;
  font-size: 1.875rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}

.youtube-link, .pdf-link {
  color: #D8E8F1;
  font-size: 1.5625rem;
  margin-right: 4.0625rem;
  font-family: 'David Libre', sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease; /* Optional: Smooth transition for hover effects */
  display: inline-block; 
  box-sizing: border-box;
  border: none;
  background-color: transparent; /* Explicitly set background color */
  margin-bottom: 3.125rem;
}

.pdf-link2 {
  margin-left: auto;
  margin-top: 2rem;
  margin-right: 4.6875rem;
  color: white;
  font-size: 1.575rem;
  text-align: right; /* this centers the text within the titles */
  font-family: 'David Libre', sans-serif; /* using the imported font */
}

.youtube-link:hover, .pdf-link:hover, .pdf-link2:hover {
  color: #ffc085;
}

/********* Display sizes adjustments ****************/

@media (max-width: 768px) {
  /* Reset or override styles for mobile */
  * {
    margin: initial;
    padding: initial; /* Reset padding to its default value */
    box-sizing: initial; /* Reset box-sizing to its default value */
    margin-right: initial;
  }
  
  body, h1, p {
  margin: 0;
  padding: 0;
  padding-right: 1rem;
  font-size: 12px;
  }
  
  .centered-nav {
    display: none;
  }


  #main-title1 {
      font-size: 2.5rem;
  }

  #main-title2 {
      font-size: 2rem;
  }
    
  #site-logo {
      margin-right: 1rem;
  } 
    
  #logo-text {
      font-size: 1.5rem;       
    }
    
  /* Adjust layout for mobile */
  .system-container {
    flex-direction: initial; /* Reset flex-direction */
    align-items: initial; /* Reset align-items */
    margin: initial; /* Reset margin */
    display: block;
  }
  
  #main-title3 {
      text-align: center;
    }
    
  .content-section {
    display: block;
    width: 100%;
  }
  #video-section, #text-section {
    flex: initial; /* Reset the flex property */
    max-width: 100% ; /* Take full width on mobile */
    margin: 0; /* Reset margin */
    padding: 0.625rem; /* Add padding */
  }
  #video-section video {
    width: 100%; /* Ensure the video takes the full width */
  }
  /* Override vertical-align property */
  #video-section, #text-section, #video-section video {
    vertical-align: initial; /* Reset vertical-align */
  }
  
  #main-title4 {
      margin-right: 0;
      margin-left: 0;
      text-align: center;
  }
  
    .subjects {
         width: 100%;
        display: block;
        justify-content: initial;
        padding: initial;
        flex-direction: initial;
        margin-right: -2rem;
        padding: 0;
    }
    .subject {
        display: block;
        margin-right: 0;
        box-sizing: border-box;
    }

  .subject-container {
    flex-direction: column; /* Stack text and image containers vertically on mobile */
  }
  
  .subject-image,
    .subject-text {
        display: none;
    }

  #text-subject, #image-subject {
    margin: 0; /* Reset margin for text and image containers on mobile */
  }
    
    #main-title5 {
      margin-right: 0;
      margin-left: 0;
      text-align: center;
    }
    
    /* About me section */
    .aboutme-container {
      display: block;
      align-items: initial;  
      justify-content: initial; 
      margin: initial;
      width: 100%;
    }
    
    #aboutme-image {
      max-width: 100%;
    }
    
    #aboutme-image img {
      width: 100%;       /* Takes full width of its container */
      height: auto;      /* Maintain aspect ratio */
      display: block;    /* Removes any unwanted space at the bottom */
    }
    
    #aboutme-text {
      max-width: 100%;    /* Limits the width to 50% of the parent */  
      margin: 0.8rem;
    }
    
    #aboutme-text p {
      font-size: 1.5rem; /* Adjust the font size for the <p> element */
    }
    
    .youtube-link-about {
      font-size: 1.5rem;
    }    
    
    #main-title6 {
      margin-right: 0;
      margin-left: 0;
      text-align: center;
    }
    
    .comment-images-container {
      display: block;
    }
    
    .comment-images-container img {
      max-width: 100%; /* assuming you want each image to take half the container's width */
    }
    
    #main-title10 {
      margin-right: 0;
      margin-left: 0;
      text-align: center;
      padding-right: 0.5rem;
    }
    
    #user-join-form-container form   {
     padding-right: 0.5rem;
    }
    
    #user-join-form-container form  label {
     width: auto;
    }
    
  #user-join-form-container form input[type="text"],
  #user-join-form-container form input[type="email"],
  #user-join-form-container form input[type="password"] {
    margin-bottom: 0.625rem; /* Adjust spacing between input fields for mobile */
    width: 100%; /* Ensure all input fields take up the full width on mobile */
    box-sizing: border-box;
  }
  
  #user-join-form-container form .eye-toggle {
      top: 40%;
    }
    
  .login-container {
    margin: 0 5%;
    margin-top: 20%;
  }
  
  .login-container .eye-toggle {
      top: 60%;
      left: 2.5rem;
      font-size: 1rem;
    }
    
  .forgot-password-container {
    margin: 0 5%;
    margin-top: 20%;
  }
    
  .reset-password-container {
    margin: 0 5%;
    margin-top: 20%;
  }
  
  .reset-password-container .eye-toggle {
      top: 60%;
      left: 4.5rem;
      font-size: 1rem;
    }  
    
  #site-logo-subjects {
        width: 5.25rem;
        margin-right: 0;
    }    
    
  #logo-text-subjects {
    font-size: 1.575rem;
    margin-top: 2.4125rem;
  }    
    
  #logo-container-subjects {    
    margin-right: 0;
   }
    
 .subjects-main-container {    
     margin-right: -12%;
   }
   
  #subjects-title1 {
    margin-top: -2.5rem;
    font-size: 1.575rem;
  }   
  
  .subjects-desc {
    font-size: 1.3rem;
    margin-bottom: 3.2rem;
  }
   
  #subjectList a {
        font-size: 1.4rem; /* Adjust the font size as needed for mobile */
   }
    
  .arrow-bar {
    display: none;
    position: absolute; /* Remove it from the layout */
  }
    
  li {
    display: flex;
    flex-direction: column; /* Stack elements vertically for mobile */
    text-align: right;
  }

  .anchor-button-container {
    display: block; /* Display as block for mobile */
    text-align: right; /* Align content to the right for mobile */
  }
  
  .custom-button  {
      margin-right: 0.875rem;
      margin-top: 2%;
    }
    
  /* Add spacing after <a> element */
  .anchor-button-container a::after {
    content: ""; /* Create an empty pseudo-element */
    height: 0.5rem; /* Adjust the height as needed for spacing */
    display: block;
  }
  
  .correct-answers {
      width: 100%;
      margin-right: 5%;
      margin-top: 2%;
      font-size: 1.3rem;
  }
  
  .subject-content {
      display: block !important;
  }
  
  #subject-content-image {
        flex: initial;
        max-width: 90%;
        margin-right: 5%;
        margin-top: 2%;
    }  
    
  #subject-content-image img {
        max-width: 100%; /* Allow the image to expand to its full width */
        height: auto; /* Maintain the aspect ratio of the image */
    }    
    
  #subject-content-text {
    flex: initial;
    max-width: 100%;
    font-size: 1rem;
    line-height: 1.4rem;
    margin-top: 2%;
    margin-right: 3%;
  }    
  
    #subject-content-text p,
    #subject-content-text a {
        font-size: 1.1rem; /* Adjust the font size as needed */
        max-width: 100%;
        height: auto;
    }
    
  h1 {
    font-size: 1.3rem; /* Adjust the font size as needed for mobile */
  }    
    
  .subjects-sidebar {
    display: none;
  }    
  
  .container {
      margin-right: 0;
  }
  
  #mediaContainer {
    height: auto; /* Remove the fixed height for mobile */
  }
  
  /* Change to a column layout for mobile */
  .solution-buttons {
    display: flex;
    flex-direction: column; /* Change to a column layout */
    margin-top: 2rem;
  }

  /* Reset flex styles for individual buttons in mobile layout */
  #buttonsContainer .solution-buttons button,
  #buttonsContainer .sidbar-button {
    display: block; /* Display buttons as blocks, stacking them vertically */
    /*margin: 0.625rem 0; */
  }
  
}

@media (min-width: 769px) and (max-width: 992px) {
  .subjects-sidebar {
    display: none;
  }    
  
  .container {
      margin-right: 0;
  }
  
  #mediaContainer {
    height: auto;
  }

  #options,
  #buttonsContainer {
    height: auto; /* Let these containers adapt to content height */
  }  
  
  .solution-buttons {
    margin-top: 2rem;
    gap: 1rem; 
  }  
  
  .login-container .eye-toggle {
      top: 60%;
      left: 13.5rem;
      font-size: 1rem;
    }  
    
  .centered-nav {
      display: none;
  }    
}


/*Styles for screens up to 576px wide (e.g., smartphones in landscape mode) */
/*@media (max-width: 576px) {
  body,p {
    font-size: 10px;
  }
}*/

/* Styles for screens up to 768px wide (e.g., tablets in portrait mode) */
/*@media (max-width: 768px) {
  body,p {
    font-size: 14px;
  }
}*/

/* Styles for screens up to 992px wide (e.g., tablets in landscape mode) */
/*@media (max-width: 992px) {
  body,p {
    font-size: 14px;
  }
}*/

/* Styles for screens up to 1200px wide (e.g., laptops) */
/*@media (max-width: 1200px) {
  body,p {
    font-size: 16px;
  }
}*/

/* Styles for screens wider than 1200px (e.g., desktop monitors) */
/*@media (min-width: 1201px) {
  body,p {
    font-size: 18px;
  }
}*/