:root {
  --primary-color: #e8ac5c;
  /* --secondary-color: white; */
  --secondary-color: #faead7;
  --text-color-primary: black;
  --text-color-secondary: white;

  --small-font-size: 1.4rem;
  --normal-font-size: 1.6rem;
  --large-font-size: 2rem;

  --heading-subtitle-font-size: 1.4rem;
  --heading-title-font-size: 2.4rem;

  --img-border-radius: 0.3rem;
  --btn-border-radius: 0.3rem;
  --card-border-radius: 0.3rem;

  --primary-font-family: "Manrope", sans-serif;

  /* Transition */
  --transition-time: 0.4s;
}

body {
  display: block !important;
}

html {
  font-size: 12px;
  background-color: var(--primary-color);
}

a {
  text-decoration: none;
}

a.disabled {
  pointer-events: none;
}

img {
  width: 100%;
  border-radius: var(--img-border-radius);
}

.main-background {
  background-color: white;
}

/* HTML: <div class="loader"></div> */
.overlay {
  background: black;
  opacity: 0.3;
  position: absolute;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: center;
  z-index: 9999;
}
.loader {
  width: 20px;
  aspect-ratio: 1;
  background: var(--primary-color);
  box-shadow: 0 0 60px 15px var(--primary-color);
  transform: translate(-80px);
  clip-path: inset(0);
  animation: l4-1 0.5s ease-in-out infinite alternate,
    l4-2 1s ease-in-out infinite;
}
@keyframes l4-1 {
  100% {
    transform: translateX(80px);
  }
}
@keyframes l4-2 {
  33% {
    clip-path: inset(0 0 0 -100px);
  }
  50% {
    clip-path: inset(0 0 0 0);
  }
  83% {
    clip-path: inset(0 -100px 0 0);
  }
}

/* Text Attributes */
.text {
  font-family: var(--primary-font-family);
  font-size: var(--normal-font-size);
  color: var(--text-color-primary);
}

.text.small {
  font-size: var(--small-font-size);
}

.text.medium {
  font-size: var(--medium-font-size);
}

.text.large {
  font-size: var(--large-font-size);
  font-weight: bold;
  /* margin-bottom: 1.5rem; */
}

.text.title {
  font-size: var(--heading-title-font-size);
  font-weight: bold;
}

.text.subtitle {
  font-size: var(--heading-subtitle-font-size);
  color: var(--text-color-primary);
  border-radius: 10rem;
  display: inline-block;
}

.text-white {
  color: var(--text-color-secondary);
}

.text-dark {
  color: var(--text-color-primary);
}

.center {
  text-align: center;
}

.bold {
  font-weight: bold;
}
/* Text Attributes */

/* Button Attibutes */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--small-font-size);
  font-family: var(--primary-font-family);
  border-radius: var(--btn-border-radius);
  width: 13rem;
  height: 3.6rem;
  border: 0;
}

.button.dark {
  /* background-color: var(--primary-color); */
  background-color: #CB922A;
  color: var(--text-color-secondary);
  transition: var(--transition-time);
  position: relative;
}

.button.dark::after {
  /* content: ">"; */
  content: " \f054";
  font-family: "FontAwesome";
  opacity: 0;
  left: 80%;
  top: 23%;
  right: 0;
  bottom: 0;
  position: absolute;
  transition: var(--transition-time);
}

.button.dark:hover {
  /* background-color: var(--secondary-color); */
  /* color: var(--primary-color); */
  /* border: 1px solid var(--primary-color); */
  transition: var(--transition-time);
  padding-right: 1rem;
}

.button.dark:hover::after {
  opacity: 1;
  transition: all 0.5s;
  color: #ffffff;
  transition: var(--transition-time);
}

.button.light {
  background-color: var(--secondary-color);
  border: 1px solid var(--primary-color);
  color: var(--text-color-primary);
  transition: var(--transition-time);
}

.button.light:hover {
  background-color: var(--primary-color);
  color: var(--text-color-secondary) !important;
  transition: var(--transition-time);
  /* border: 1px solid var(--secondary-color); */
}
/* Button Attributes */

/* Cards & Images Attributes*/
.ratio-1-1 {
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
}

.ratio-2-1 {
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: center;
}

.brand-img {
  width: 300px;
  aspect-ratio: 10/3;
  object-fit: cover;
  object-position: center;
}

.card {
  border-radius: var(--card-border-radius) !important;
  background-color: var(--secondary-color);
  width: 100%;
  padding: 1rem;
  border: transparent !important;
}

.card-banner {
  padding: 8rem 3rem;
  border-radius: var(--card-border-radius);
  /* background-color: var(--primary-color); */
  background-color: #faead7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
  box-shadow: inset 0px 0px 0 2000px rgba(0, 0, 0, 0.5);
}

.no-radius {
  border-radius: 0px !important;
  border: none !important;
}

.no-border{
  border: none !important;
}

.card-trans {
  /* border: 1px solid black; */
  padding: 1rem;
  border-radius: var(--card-border-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-trans-quiz {
  /* border: 1px solid black; */
  padding: 1rem;
  border-radius: var(--card-border-radius);
}

.gradient-left {
  background: linear-gradient(0.25turn, var(--secondary-color), transparent);
}

.gradient-right {
  background: linear-gradient(0.75turn, var(--secondary-color), transparent);
}
/* Cards & Images Attributes*/

/* Sections */
.section-padding {
  margin-top: 8rem;
}

.title-section {
  text-align: center;
}

.content {
  margin-top: 2rem;
}
/* Sections End */

/* Display Flex */
.row-reverse {
  flex-direction: row-reverse;
}

.col-justify-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.col-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/* Display Flex End */

/* Navbar Start */
.navbar {
  /* From https://css.glass */
  background: rgba(0, 0, 0, 0.73);
  /* border-radius: 0 0 1rem 1rem; */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(9.6px);
  -webkit-backdrop-filter: blur(9.6px);
  border: 1px solid rgba(0, 0, 0, 0.27);
  padding: 1rem 0;
}

.navbar-nav {
  display: flex;
  /* align-items: center; */
  gap: 4px;
  margin-bottom: 0px;
}

.navbar-brand {
  width: 20%;
}

.nav-item {
  display: flex;
  align-items: center;
  margin-right: 2rem;
}

.nav-item-end {
  display: flex;
  align-items: center;
}

.nav-item a {
  text-decoration: none;
}

.nav-item a:hover {
  /* color: rgb(95, 95, 95) !important; */
  color: #e8ac5c !important;
}

.nav-item a:hover {
  color: var(--text-color-primary);
}

.active {
  color: var(--primary-color) !important;
}
/* Navbar End */

/* Main Banner */
#mainBanner .title-section {
  text-align: left;
}
/* Main Banner */

/* Brand Slider */
#brandSlider {
  text-align: center;
}

.vue3-marquee:hover {
  animation-play-state: paused;
  transition: transform 0.5s ease-out;
}
/* Brand Slider */

/* Why Section */
#why .title-section {
  text-align: left;
}

#why img {
  width: 64px;
  border: 1px solid black;
  padding: 0.8rem;
  aspect-ratio: 1/1;
}
/* Why Section */

/* How it Works Section */
#howItWorks img {
  width: 80%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 3/2;
}
/* How it Works Section */

/* Feature Section */
#features .card {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 1rem;
  height: 24rem;
  border: transparent !important;
}

#features .card img {
  max-height: 100%;
  object-fit: contain;
}

#features .card.long img {
  aspect-ratio: 4/1;
}

#features .card.short img {
  aspect-ratio: 2/1;
}

#features .text {
  text-align: center;
}
/* Feature Section */

/* Products Section */
.product-slider-content {
  border: transparent !important;
  border-radius: var(--img-border-radius);
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

#products .card-trans {
  margin-top: 2rem;
  padding: 4rem;
}

.product-text {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem 1rem 0.5rem;
}
/* Products Section */
#testimonials img {
  width: 100px;
  height: 100px;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  padding: 0;
}
/* Testimonial */

/* Testimonial */

/* Banner Section */
#mainBanner {
  margin-top: 0;
}

.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* aspect-ratio: 16/9; */
  /* padding: 10rem 0; */
  background-size: cover;
  background-position: center;
  box-shadow: inset 0px 0px 0 2000px rgba(0, 0, 0, 0.5);
  height: 100vh;
}
/* Banner Section */

/* Contact Section */
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-control {
  padding: 1rem 0.6rem;
}

/* Contact End */

/* Ads Banner Section */
.ads-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem;
}
/* Ads Banner Section */

/* Counter */
#counter {
  /* margin-top: 5rem; */
  gap: 6rem;
}

#counter i {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

#counter img {
  aspect-ratio: 1/1;
  /* width: 50%; */
  margin-bottom: 1rem;
}

.counter-bg {
  background: linear-gradient(
    0.5turn,
    transparent,
    var(--secondary-color) 100%
  );
  padding-bottom: 3rem;
}

.counter {
  margin-top: 2rem;
}

.counter .text.large {
  color: var(--primary-color);
  font-weight: normal;
  font-size: 6rem;
}
/* Counter */

/* QUIZ Page */
#thinBanner {
  background-color: var(--primary-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10rem 0 6rem 0;

  background-size: cover;
  background-position: center;
  box-shadow: inset 0px 0px 0 2000px rgba(0, 0, 0, 0.5);
}

.form-check {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0;
  border-radius: 1rem;
  padding: 0 0.5rem 0 0;
  margin-top: 2rem;
  box-shadow: 1px 1px 1px rgba(154, 154, 154, 0.3);
}

.form-check-slider {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0;
  padding: 0 1rem ;
  margin-top: 1rem;
}

.form-check-input-wrapper {
  background-color: var(--secondary-color);
  padding: 1.5rem;
  border-radius: 1rem 0 0 1rem;
  width: 5rem;
  display: flex;
  justify-content: center;
}

.form-check-input {
  margin-left: 0 !important;
}

/* Radio Button */
.form-check-input[type="radio"] {
  border-radius: 50%;
  display: none;
  padding: 0.75rem;
}

/* Checkbox */
.form-check-input[type="checkbox"] {
  border: 1px solid var(--primary-color);
  padding: .8rem;
  border-radius: 0.25em;
}

.form-check-input:checked[type="checkbox"] {
  background-color: var(--primary-color);
  border-color: transparent;
}

/* Active */
.form-check.active {
  border-color: #e8ac5c;
  box-shadow: 1px 1px 1px rgba(255, 149, 0, 0.3);
}

.form-check.active .form-check-input-wrapper {
  background-color: #e8ac5c !important;
}

.form-check-input:focus {
  /* border-color: transparent !important; */
  outline: 0;
  box-shadow: 0 0 0 0.25rem transparent !important;
}

.form-check.active .option {
  color: white;
}

.quiz-answers {
  padding: 0 1rem;
}
/* QUIZ Page */

/* Footer Start */
#footer {
  /* position: sticky;
  bottom: 0;
  width: 100%; */
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0;
  background-color: var(--primary-color);
}
.footer-desc {
  text-align: start;
}

.footer-icons {
  display: flex;
  gap: 1rem;
}

.footer-icons img {
  width: 24px;
  height: 24px;
}

/* .footer-icons img:hover{
  width: 20px;
  height: 20px;
} */

.iframe-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 aspect ratio (change this value based on your iframe content) */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Footer End */

.w-60 {
  width: 60% !important;
}
.w-20 {
  width: 20% !important;
}

.bold {
  font-weight: bold !important;
}

.pointer {
  cursor: pointer !important;
}

.pr-4 {
  padding-right: 4rem !important;
}
.pl-4 {
  padding-left: 4rem !important;
}

hr {
  border: 0;
  height: 1px;
  background-color: transparent;
  margin: 2rem 0 3rem 0;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, -1)
  ) !important;
}

.ball {
  position: fixed;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background-color: #e8ab5c79;
  border-radius: 50%;
  backdrop-filter: blur(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

::selection {
  background: var(--secondary-color);
}