@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root {
  --color-primary: rgb(64, 43, 216);
  --color-secondary: rgb(64, 95, 144);
  --color-review-star-filled: rgb(15, 169, 88);
  --color-review-star-blank: rgb(154, 153, 153);
  --color-footer-text: rgb(128, 128, 128);

  --font-primary: "Inter", sans-serif;

  --font-regular: 400;
  --font-semibold: 600;
  --font-bold: 700;

  --font-400: 1rem;
}

* {
  padding: 0;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

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

input,
button,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/* --Custom Bootstrap-- */

.font-regular {
  font-weight: var(--font-regular);
}

.font-semibold {
  font-weight: var(--font-semibold);
}

.font-bold {
  font-weight: var(--font-bold);
}

.fs-7 {
  font-size: 0.75rem;
}

.mx-60 {
  max-width: 60%;
}

.mx-65 {
  max-width: 65%;
}

.flex-1 {
  flex: 1;
}

.bg-primary-custom {
  background-color: var(--color-primary);
}

.bg-secondary-custom {
  background-color: var(--color-secondary);
}

.border-black-1 {
  border: 1px solid black;
}

.white-border-bottom {
  border-bottom: 1px solid white;
}

.grey-border-top {
  border-top: 1px solid var(--color-footer-text);
}

/* --Buttons-- */

.cta-btn {
  background-color: white;
  padding: 0.9375rem 2.1875rem;
  font-weight: var(--font-semibold);
  border: 0;
  border-radius: 7rem;
}

.primary-btn {
  color: white;
  background-color: var(--color-primary);
}

.see-more-btn button,
.select-month button {
  border: 0;
  background-color: inherit;
}

.active {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.live-chat-btn {
  color: var(--color-primary);
  font-weight: var(--font-bold);
}

/* --Start-- */

body {
  font-family: var(--font-primary);
  font-size: var(--font-400);
  font-weight: var(--font-regular);
  color: black;
}

/* need to adjust */
.test-sections {
  width: 100vh; /* Width of the circle */
  height: 100vh; /* Height of the circle */
  z-index: -1;
  background-color: var(--color-primary); /* Background color */
  border-radius: 50%; /* Makes the div circular */
  /* display: flex; Center content if needed */
  /* align-items: center; Center content if needed */
  /* justify-content: center; Center content if needed */
  position: absolute; /* Position the circle */
  top: 10%; /* Adjust percentage from the top */
  right: -10%; /* Adjust percentage from the right */
  transform: translate(-30%, -55%); /* Adjust circle positioning */
}

.plan h3 {
  text-align: center;
  color: white;
  background-color: var(--color-primary);
}

/* The code below is generated by ChatGPT */
.star-rating {
  --star-size: 22px;
  --star-color: var(--color-review-star-filled);
  --star-background: var(--color-review-star-blank);
  --rating: 0;

  display: inline-block;
  font-size: var(--star-size);
  font-family: Times;
  line-height: 1;

  background: linear-gradient(
    90deg,
    var(--star-color) calc(var(--rating) / 5 * 100%),
    var(--star-background) calc(var(--rating) / 5 * 100%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  padding: 0;
  cursor: default;
  unicode-bidi: bidi-override;
  direction: rtl;
}

.star-rating::before {
  content: "★★★★★";
  background: linear-gradient(
    90deg,
    var(--star-color) calc(var(--rating) / 5 * 100%),
    var(--star-background) calc(var(--rating) / 5 * 100%)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Thankyou ChatGPT! */

#footer,
a {
  color: var(--color-footer-text);
}