:root {
  --black--1: #121212;
  --text--gray--1: #b5b5b5;
  --white: #fff;
  --main--orange: #faba40;
  --main--orange--dark--1: #c88200;
  --main--orange-dark--2: #a08753;
  --main--light--yellow-darker-1: #fff7e8;
}

/* ,
    url("../assets/homepage/pytbg.jpg") */

.pyt-section {
  position: relative;
  background-image: linear-gradient(#fff7e8, rgb(255, 255, 255)) !important;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  /* margin-top: -35px; */
  animation: shrink 30s infinite alternate;
}

.pyt-section label {
  font-family: "Georgia";
  font-size: 20px;
}

.dot-label-container .label {
  font-family: "NunitoSans" !important;
}

.btn-gold {
  background-color: var(--main--orange--dark--1);
  border: 2px solid var(--main--orange--dark--1);
  padding: 10px 40px;
  color: white;
  font-family: "Georgia";
  font-size: 18px;
  text-transform: uppercase;
}

.btn-gold:hover {
  background-color: transparent;
  color: var(--main--orange--dark--1);
  border: 2px solid var(--main--orange--dark--1);
}

.btn-gold:disabled {
  background-color: #d6d6d6;
  border: 2px solid #d6d6d6;
  color: rgb(97, 97, 97);
}

.btn-back {
  background-color: var(--black--1);
  border: 2px solid var(--black--1);
  padding: 10px 40px;
  font-family: "Georgia";
  font-size: 18px;
  color: white;
  text-transform: uppercase;
}

.btn-back:hover {
  background-color: transparent;
  color: var(--black--1);
  border: 2px solid var(--black--1);
  padding: 10px 40px;
  font-family: "Georgia";
  font-size: 18px;
  text-transform: uppercase;
}

.btn-nsy {
  font-family: "Georgia";
  font-size: 18px;
  text-transform: uppercase;
  border: none;
}

.btn-nsy:hover {
  background-color: transparent;
  border: none;
  color: var(--main--orange--dark--1);
}

.btn-nsy:disabled {
  background-color: transparent;
  border: none;
  color: rgb(97, 97, 97);
}

.btn-nsy1 {
  background-color: transparent;
  color: var(--main--orange-dark--2);
  border: 2px solid var(--main--orange-dark--2);
  padding: 10px 40px;
  font-family: "Georgia";
  font-size: 18px;
  text-transform: uppercase;
}

.btn-nsy1:disabled {
  background-color: transparent;
  color: #818181;
  border: 2px solid #b1b1b1;
  padding: 10px 40px;
  font-family: "Georgia";
  font-size: 18px;
  text-transform: uppercase;
}

.btn-nsy1:hover {
  background-color: white;
  color: var(--black--1);
  border: 2px solid var(--black--1);
  padding: 10px 40px;
  font-family: "Georgia";
  font-size: 18px;
  text-transform: uppercase;
}

/* Container for all buttons */
.category-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 40px;
  row-gap: 40px;
  padding: 40px 20px;
}

/* Interest */
.interest-container {
  justify-content: center;
  column-gap: 40px;
  row-gap: 40px;
  padding: 40px 20px;
}

/* Months */
.month-container {
  padding: 40px 10px !important;
}

@media (min-width: 768) {
  .month-container {
    padding: 40px 50px !important;
  }
}

@media (min-width: 992px) {
  .category-container {
    column-gap: 105px;
  }

  .month-container {
    padding: 40px 150px !important;
  }
}

@media (min-width: 1200px) {
  .month-container {
    padding: 40px 250px !important;
  }
}

@media (min-width: 1400px) {
  .month-container {
    padding: 40px 350px !important;
  }
}

/* Button container with label */
.category-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  user-select: none;
  background-color: #ffffff; /* Light beige background */
  border: 1.5px solid var(--main--orange-dark--2);
  border-radius: 50px;
  padding: 10px 30px;
  padding-left: 55px !important;
  box-shadow: 0 2px 6px 0px rgba(91, 54, 0, 0.1); /* Subtle shadow */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.interest-button {
  width: 100%;
}
.category-button:hover {
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(163, 101, 0, 0.256) !important;
}

/* Hide default checkbox */
.category-button input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Custom circular checkbox */
.checkmark {
  position: absolute;
  top: 50%;
  left: 20px; /* Adjust this value to control the checkbox position */
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid var(--main--orange-dark--2);
  transition: background-color 0.3s ease;
}

/* Hover effect */
.category-button:hover input ~ .checkmark {
  border-color: #ba8118;
}

/* Checked state */
.category-button input:checked ~ .checkmark {
  background-color: var(--main--orange);
  border-color: var(--main--orange-dark--2);
}

/* Checkmark indicator */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
}

.category-button input:checked ~ .checkmark:after {
  display: block;
  background-color: white; /* Dot color */
  border-radius: 50%;
}

.form-control {
  font-size: 16px;
  font-weight: 500;
  font-family: "NunitoSans";
  color: #333;
  background-color: #ffffff; /* Light beige background */
  border: 1.5px solid var(--main--orange-dark--2);
  border-radius: 50px;
  padding: 10px 10px;
  padding-left: 20px !important;
  box-shadow: 0 2px 6px 0px rgba(91, 54, 0, 0.1) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.input-group-text {
  font-size: 16px;
  font-weight: 500;
  font-family: "NunitoSans";
  color: #333;
  cursor: pointer;
  background-color: #ffffff; /* Light beige background */
  border: 1.5px solid var(--main--orange-dark--2);
  border-radius: 50px;
  padding: 10px 10px;
  padding-left: 15px !important;
  box-shadow: 0 2px 6px 0px rgba(91, 54, 0, 0.1) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.form-select {
  font-size: 16px;
  font-weight: 500;
  font-family: "NunitoSans";
  color: #333;
  cursor: pointer;
  background-color: #ffffff; /* Light beige background */
  border: 1.5px solid var(--main--orange-dark--2);
  border-radius: 50px;
  padding: 10px 10px;
  padding-left: 30px !important;
  box-shadow: 0 2px 6px 0px rgba(91, 54, 0, 0.1) !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.form-select:focus {
  background-color: #ffffff;
  box-shadow: 0 4px 6px rgba(163, 101, 0, 0.256) !important;
  border: 1.5px solid var(--main--orange-dark--2);
}

.form-select:hover {
  box-shadow: 0 4px 6px rgba(163, 101, 0, 0.256) !important;
}

.budget-slider {
  text-align: center;
}

.slider-container {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.line {
  position: absolute;
  top: 9px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--main--orange-dark--2);
  transform: translateY(-50%);
  z-index: 1;
}

.budget-option {
  display: flex;
  align-items: center;
}

.budget-option input[type="radio"] {
  display: none;
}

.dot-label-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers dot and label vertically */
}

.dot-label-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers dot and label vertically */
  cursor: pointer; /* Make the container clickable */
}

.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid var(--main--orange-dark--2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

/* Inner circle for checked state */
.dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--main--orange); /* Orange fill for checked state */
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease;
}

/* When the radio button is checked, style the dot */
.budget-option input[type="radio"]:checked + .dot-label-container .dot {
  background-color: #fff; /* White outer circle */
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--main--orange-dark--2); /* Orange border around white circle */
}

/* Show inner circle when checked */
.budget-option input[type="radio"]:checked + .dot-label-container .dot::before {
  opacity: 1; /* Show inner circle */
}

.label {
  font-size: 14px;
  margin-top: 10px; /* Space between dot and label */
}

@media (min-width: 1200px) {
  .border-left-bar {
    border-left: 1px solid var(--main--orange-dark--2);
  }
}

#pytsection {
  opacity: 0;
  transition: all 0.9s ease;
}

#pytsection.show {
  opacity: 1;
}