/* Apply Abel font to the entire document */
body {
  font-family: "Abel", sans-serif;
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

#index-section,
#vatta-section,
#pitta-section,
#kapha-section,
#vataResult-section,
#pittaResult-section,
#kaphaResult-section {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed; /* Prevent background image from scrolling with the content */
  min-width: 100%; /* Ensure minimum width to cover the entire viewport */
  min-height: 100%; /* Ensure minimum height to cover the entire viewport */
  display: flex;
  justify-content: center;
  align-items: center;
}

#index-section {
  background-image: url("../assets/index.jpg");
}

#vatta-section {
  background-image: url("../assets/vata.jpeg");
}

#pitta-section {
  background-image: url("../assets/pitta.jpg");
}

#kapha-section {
  background-image: url("../assets/kapha.jpg");
}

#vataResult-section {
  background-image: url("../assets/vata-result.jpg");
}

.section-percentage {
  position: absolute;
  font-size: 14px;
  color: #fff;
}

.kapha-percentage {
  top: 22%;
  left: 20%;
  text-align: center;
}

.vata-percentage {
  top: 30%;
  left: 65%;
  text-align: center;
}

.pitta-percentage {
  bottom: 18%;
  left: 31%;
  text-align: center;
}

#quiz {
  background-color: rgba(
    255,
    255,
    255,
    0.7
  ); /* Add a semi-transparent white background for better readability */
  padding: 20px;
  border-radius: 10px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a shadow with a blur radius of 10px */
  text-align: center;
}

#content-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ); /* Add a semi-transparent white background for better readability */
  border-radius: 10px;
}

/* Apply Abel font to headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Abel", sans-serif;
}

.large-text {
  font-size: 22px; /* Adjust as needed */
}

/* Apply Abel font to paragraphs */
p {
  font-family: "Abel", sans-serif;
}

/* Apply Abel font to specific elements by class or ID */
#element-id {
  font-family: "Abel", sans-serif;
}

.element-class {
  font-family: "Abel", sans-serif;
}

#question-container > div {
  margin-bottom: 70px; /* Add spacing between each question */
}

.circle-options {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.option-label {
  font-size: 12px;
  margin-top: 5px;
  margin-right: 10px;
  margin-left: 10px;
}

.circle-options input[type="radio"] {
  display: none; /* Hide the default radio buttons */
}

.circle-options label {
  cursor: pointer;
  position: relative;
  width: 20px; /* Set the width and height to define the circle size */
  height: 20px;
  border-radius: 50%; /* Make it a circle */
  border: 2px solid #ccc; /* Add border to make it visible */
  display: inline-block;
}

.circle-options label::before {
  content: "";
  display: block;
  width: 12px; /* Adjust the inner circle size */
  height: 12px;
  border-radius: 50%;
  background-color: #fff; /* Initially transparent */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Style for when the radio button is checked */
.circle-options input[type="radio"]:checked + label::before {
  background-color: #333; /* Change to a darker color when checked */
}

/* Apply Abel font to specific elements by class or ID */
#element-id {
  font-family: "Abel", sans-serif;
}

.element-class {
  font-family: "Abel", sans-serif;
}

/* Center align the header */
header {
  text-align: center;
  margin-bottom: 20px; /* Add some bottom margin for spacing */
}

/* Style for the proceed button */
button[type="submit"] {
  background-color: transparent; /* Transparent background color */
  border: 2px solid #a68551; /* Colored border */
  color: #a68551; /* Colored text */
  padding: 15px 32px; /* Add padding for better button appearance */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px; /* Add border radius for rounded corners */
  transition: background-color 0.3s, color 0.3s; /* Add transition for smooth hover effect */
}

/* Style the proceed button on hover */
button[type="submit"]:hover {
  background-color: #a68551; /* Green background color on hover */
  color: white; /* White text on hover */
}

/* Style for the "Start Quiz" button */
#start-quiz button {
  background-color: transparent; /* Transparent background color */
  border: 2px solid #f66d06; /* Colored border */
  color: #f66d06; /* Colored text */
  padding: 20px 40px; /* Increase padding for a bigger button */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 8px; /* Add border radius for rounded corners */
  transition: background-color 0.3s, color 0.3s; /* Add transition for smooth hover effect */
}

#start-quiz {
  text-align: center; /* Center the button horizontally */
  margin-top: 50px; /* Add margin from the top for vertical centering */
}

/* Style the "Start Quiz" button on hover */
#start-quiz button:hover {
  background-color: #f66d06; /* Green background color on hover */
  color: white; /* White text on hover */
}

.vertical-line {
  border-left: 2px solid black;
  height: 90px; /* Adjust the height as needed */
  margin: 0 auto; /* Center the line */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px; /* Adjust the top margin as needed */
}

.info-background {
  background-color: rgba(
    75,
    72,
    72,
    0.492
  ); /* Add a semi-transparent white background for better readability */
  padding: 20px;
  border-radius: 10px;
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add a shadow with a blur radius of 10px */
  text-align: center;
}

/* Media query for tablets */
@media (max-width: 768px) {
  /* Adjust styles for smaller screens */
  .content-container {
    padding: 10px;
    max-width: 90%;
    /* Reduce maximum width */
  }

  #quiz {
    padding: 15px;
  }
}

/* Media query for mobile devices */
@media (max-width: 480px) {
  /* Adjust styles for smaller screens */
  .content-container {
    padding: 5px;
    text-align: center;
    /* Center align content on smaller screens */
  }

  #quiz {
    padding: 10px;
    max-width: 90%;
    /* Reduce maximum width */
    margin: 0 auto;
    /* Center quiz horizontally */
  }

  /* Adjust font size and line height for smaller screens */
  h1 {
    font-size: 24px;
    /* Decrease font size */
    line-height: 1.3;
    /* Decrease line height */
  }

  h2 {
    font-size: 20px;
    /* Decrease font size */
    line-height: 1.3;
    /* Decrease line height */
  }

  h3 {
    font-size: 16px;
    /* Decrease font size */
    line-height: 1.3;
    /* Decrease line height */
  }

  p {
    font-size: 14px;
    /* Decrease font size */
    line-height: 1.3;
    /* Decrease line height */
  }
}