/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Nunito Sans", sans-serif;
}

:root {
  /* sample colour */
  --dark-green: #0f3d33;
  --text-gray: #3f3f3f;
  --yellow: #f6f14d;
  --green-btn: #0f4d3c;
  --radial-yellow-gradient: linear-gradient(
    to right,
    #ffe550 0%,
    #f6c94d 0%,
    #fdfc47 100%
  );

  /* Primary Brand Colors */
  --color-home-bg: #f5f5f2;
  --color-primary: #ffca40;
  --color-primary-lighter: #ffe599;
  --color-primary-lighter-50: #fff2cb;
  --color-primary-darker: #cc9c2d;
  --color-primary-hover: #f5c036;
  --color-primary-active: #d9a52c;
  --color-primary-disabled: #e6d8a8;
  --color-primary-text-disabled: #8c8c8c;
  --color-black: black;
  --color-ash: rgb(56, 56, 56);
  --color-ash-50: rgb(110, 110, 110);
  --color-white: #ffffff;
  --feature-blue: rgb(182, 207, 207);
  --black-shadow: 0 -1px 1px rgba(8, 8, 8, 0.1) !important;
  --image-background: #f5f6f9;
  --card-gradinet: linear-gradient(
    135deg,
    #f1eacff5 0%,
    #f3e48cf6 50%,
    #f7d765 120%
  );
  --card-blue: linear-gradient(
    135deg,
    #def4f8f5 0%,
    #dbf2faf6 50%,
    #f3e48cf6 120%
  );
  --card-overlay-gradient: linear-gradient(
    var(--card-white-overlay-start),
    var(--card-white-overlay-end)
  );
  --card-white-overlay-end: rgba(255, 255, 255, 0.45);
  --card-white-overlay-start: rgba(253, 253, 253, 0.55);
  /* --card-feature-shadow: 0 20px 30px rgba(33, 182, 199, 0.87); */

  --header-blue: radial-gradient(
    circle at top right,
    #fcf8ec 30%,
    #e0f1f8 65%,
    #e0f0f5 100%
  );
  --background-color: #072e47;
  --card-white-shadow: 0 10px 30px rgba(252, 248, 248, 0.08);
  --transform-black-50: rgb(0, 0, 0);
  --transform-black-100: rgb(24, 22, 22);
  --transform-black-150: rgb(12, 12, 12);
  --transform-black-200: rgb(2, 0, 0);
  --transform-color-100: #b2dcf2;
  --red-colour: red;
  --black-primary: radial-gradient(
    circle at top right,
    #021b27 0%,
    #021b27 45%,
    #021b27 100%
  );
  --dark-border: rgba(255, 255, 255, 0.08);

  --black-primary-50: radial-gradient(
    circle at top right,
    #6f839c 0%,
    #2c414d 45%,
    #0c2631 100%
  );
  --border-acc: rgba(255, 255, 255, 0.06);
}

.navbar-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-color: transparent;
}

/* Make navbar content above the background */
.navbar .hero-container {
  position: relative;
  z-index: 1;
}
/* image */
body.dark-mode .bot-ai-text {
  color: var(--color-white) !important;
  font-weight: 700;
  margin-bottom: 10px !important;
}
body.dark-mode .bot-ai-img {
  margin-bottom: -9px !important;
}
/* Logo image  */
body.dark-mode .logo-img {
  content: url("./../images/dark_logo.png");
}

body.dark-mode .logo-img1 {
  content: url("./../images/dark_logo.png");
}

body.dark-mode .bot-ai-img {
  filter: brightness(0.8);
}

/* Dark mode toggle */
body.dark-mode .navbar-bg {
  background: var(--black-primary) !important;
}

body.dark-mode .navbar .nav-link,
body.dark-mode .navbar-brand,
body.dark-mode .btn-sign-text {
  color: var(--color-white) !important;
}
body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar-brand:hover,
body.dark-mode .btn-sign-text:hover {
  color: var(--color-primary) !important;
}

body.dark-mode .navbar-toggler-icon {
  filter: invert(1);
}
body.dark-mode .Pricing-section {
  background: var(--black-primary) !important;
  min-height: 360px;
  clip-path: ellipse(100% 100% at 50% 50%);
}
body.dark-mode .Pricing-section h1 {
  /* padding-top: 10px; */
  color: var(--color-white) !important;
}

body.dark-mode .Pricing-section .hero-subtitle {
  color: var(--color-white) !important;
}
body.dark-mode .Pricing-section .btn-get-started {
  color: var(--color-black) !important;
}
/* Features SECOND section */
.features-section .feature-card:hover {
  transform: translateY(-8px) !important;
}
body.dark-mode .features-section {
  background: var(--black-primary);
}
body.dark-mode .features-section .feature-card {
  background: var(--background-color) !important;
}
body.dark-mode .features-section .feature-card:hover {
  background: var(--color-white) !important;
  transform: translateY(-8px) !important;
}
body.dark-mode .features-section .feature-card h5,
body.dark-mode .features-section .feature-card p {
  color: var(--color-white) !important;
}

body.dark-mode .features-section .feature-card:hover h5,
body.dark-mode .features-section .feature-card:hover p {
  color: var(--color-black) !important;
}

/* Image section  */

body.dark-mode .image-section {
  background: var(--black-primary) !important;
  color: var(--color-white) !important;
}
body.dark-mode .image-section .image-title {
  color: var(--color-white) !important;
}

body.dark-mode .image-section .image-text {
  color: var(--color-white) !important;
}
body.dark-mode .image-section .btn-get-started {
  color: var(--color-black) !important;
  border: none;
}

body.dark-mode .image-section .demo-button {
  background-color: transparent;
  color: var(--color-white) !important;
}

body.dark-mode .image-section img {
  filter: brightness(1.05) contrast(1.05);
}
/* image  */
body.dark-mode .home-image {
  background-color: var(--black-primary) !important;
}
body.dark-mode .home-image {
  content: url("./../images/indexdark.png");
}

/* Key feature  */

/* Faq */
body.dark-mode #faq {
  background: var(--black-primary) !important;
  color: var(--color-white) !important;
}
body.dark-mode #faq h3 {
  color: var(--color-white) !important;
}
body.dark-mode .strikes {
  color: var(--color-white) !important;
}

body.dark-mode #faq .faq-content {
  color: var(--color-white) !important;
}

body.dark-mode #faq .strikes {
  color: var(--color-primary) !important;
}

body.dark-mode #faq .pink {
  color: var(--color-primary) !important;
}
body.dark-mode #faq .accordion-item {
  background: var(--border-acc) !important;
  border: 1px solid var(--dark-border) !important;
  border-radius: 12px;
  padding-left: 20px;
  margin-bottom: 12px;
  overflow: hidden;
}
body.dark-mode #faq .accordion-button {
  background: transparent !important;
  color: var(--color-white) !important;
  font-weight: 400;
  max-width: 100% !important;
}

body.dark-mode #faq .accordion-button:not(.collapsed) {
  background-color: transparent !important;
  color: var(--color-primary) !important;
}
body.dark-mode #faq .accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}
body.dark-mode #faq .accordion-body {
  color: var(--color-white) !important;
  font-size: 16px !important;
}
body.dark-mode #faq .accordion-button::after {
  filter: invert(1);
  margin-inline-end: 10px !important;
}

/* CTA section  */
body.dark-mode .contact-cta {
  background: var(--black-primary-50) !important;
}
body.dark-mode .business_card {
  background: var(--background-color) !important;
  justify-content: center !important;
}
body.dark-mode .start_head_title,
body.dark-mode .start_tday {
  color: var(--color-white) !important;
}
body.dark-mode .business_card .btn-get-started {
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
}
body.dark-mode .business_card .btn-get-started:hover {
  background-color: var(--color-white);
}

/* footer  */
body.dark-mode .footer {
  background: var(--black-primary) !important;
  color: var(--color-white);
  margin-bottom: 20px !important;
  margin-top: 15px !important;
  padding-top: 30px !important;
}
body.dark-mode .footer p,
body.dark-mode .footer a,
body.dark-mode .footer .link_head {
  color: var(--color-white) !important;
}
body.dark-mode .footer a:hover {
  color: var(--color-white);
}
body.dark-mode .footer hr {
  border-color: var(--color-ash) !important;
}
body.dark-mode .mediaIconBg {
  background: var(--color-ash) !important;
  border-radius: 50%;
}
body.dark-mode .custom-svg {
  filter: invert(1);
}

/* Contact section */
/* Dark mode for Contact Section */
body.dark-mode .hero-section {
  background: var(--black-primary) !important;
  color: var(--color-white) !important;
}

body.dark-mode .hero-section .section-title,
body.dark-mode .hero-section p,
body.dark-mode .hero-section label,
body.dark-mode .hero-section .contactLabel,
body.dark-mode .hero-section h3 {
  color: var(--color-white) !important;
}
body.dark-mode .hero-section .subOrangeHeadings,
body.dark-mode .strikes {
  color: var(--color-primary) !important;
}
/* Contact Card Background */
body.dark-mode .hero-section .contact-card {
  background-color: var(--background-color) !important;
  color: var(--color-white) !important;
}

/* Form inputs and textarea */
body.dark-mode .hero-section .form-control {
  background-color: var(--color-white) !important;
  color: var(--color-black) !important;
}

body.dark-mode .hero-section .form-control::placeholder {
  color: var(--color-ash) !important;
}

/* Buttons */
body.dark-mode .hero-section .btn-get-started {
  color: var(--color-black) !important;
  border: none;
}

/* pricing section */

body.dark-mode .pricing-section {
  background: var(--black-primary, #0b0f12);
  color: var(--color-white) !important;
}

/* Pricing Card */
body.dark-mode .pricing-card {
  background-color: var(--background-color) !important;
  color: var(--color-white) !important;
}

/* Optional hover lift */
body.dark-mode .pricing-card:hover {
  transform: translateY(-6px);
}

/* Titles */
body.dark-mode .pricing-title {
  color: var(--color-white) !important;
}

/* Price */
body.dark-mode .pricing-price {
  color: var(--color-white) !important;
}

body.dark-mode .original-price {
  color: var(--color-primary-lighter-50) !important;
  text-decoration: line-through;
}

/* Discount badge */
body.dark-mode .pricing-discount {
  color: var(--color-black) !important;
  font-weight: 600;
}

/* Period */
body.dark-mode .pricing-period {
  color: var(--color-white) !important;
}

/* Features list */
body.dark-mode .pricing-features li {
  color: var(--color-white) !important;
}

/* Correct / Wrong states */
body.dark-mode .pricing-features li.correct {
  color: var(--color-white) !important;
}

body.dark-mode .pricing-features li.wrong {
  color: var(--color-white) !important;
}
body.dark-mode .pricing-popular {
  font-weight: 700;
  color: var(--color-black) !important;
}
/* image  */
body.dark-mode .hero-image {
  background-color: var(--black-primary) !important;
}
body.dark-mode .hero-image {
  content: url("./../images/pricingdark.png");
}

/* Button */
body.dark-mode .pricing-card .btn-get-started {
  color: var(--color-black) !important  ;
}

/* Calculation page */

body.dark-mode .calculator-section {
  background: var(--black-primary) !important;
  color: var(--color-white) !important;
}

/* Headings & text */
body.dark-mode .calculator-section h3,
body.dark-mode .calculator-section p,
body.dark-mode .calculator-section label {
  color: var(--color-white) !important;
}

body.dark-mode .calculator-section .hero-subtitle1 {
  color: var(--color-white) !important;
}

/* Form container */
body.dark-mode .calculator-form {
  background-color: var(--background-color) !important;
  border-radius: 12px;
  padding: 18px;
}

/* Inputs & Select */
body.dark-mode .calculator-section .form-control,
body.dark-mode .calculator-section .form-select {
  background-color: var(--transform-color-100) !important;
  color: var(--color-black) !important;
}

body.dark-mode .calculator-section .form-control::placeholder {
  color: var(--color-black) !important;
}

/* Buttons */
body.dark-mode .calculator-section .btn-get-started {
  color: var(--color-black) !important;
  border: none;
}

body.dark-mode .calculator-section .btn-get-started:hover {
  color: var(--color-black) !important;
}

body.dark-mode .calculator-section .resetBtn {
  background-color: var(--red-colour) !important;
  color: var(--color-black) !important;
}

body.dark-mode .calculator-section .resetBtn:hover {
  color: var(--color-black) !important;
}

/* Results card */
body.dark-mode .results-card {
  color: var(--color-black) !important;
}

/* Per-child text */
body.dark-mode .per-child-text {
  color: var(--color-black) !important;
}
body.dark-mode .result-section{
  background: var(--black-primary) !important;
}

body.dark-mode #resultsSection {
  background-color: var(--color-white) !important;
  box-shadow: none !important;
}

/* Result button  */











/* 404 Page dark mode */

body.dark-mode .Page-404 {
  background: var(--black-primary) !important;
  color: var(--color-white) !important ;
}

/* Wrapper alignment */
body.dark-mode .error-wrapper {
  color: var(--color-white) !important ;
}

/* Error code */
body.dark-mode .error-code {
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-white) !important ;
}

/* Title */
body.dark-mode .error-title {
  color: var(--color-white) !important ;
}

/* Description text */
body.dark-mode .error-text {
  color: var(--color-white) !important ;
}

/* Button */
body.dark-mode .Page-404 .btn-get-started {
  color: var(--color-black) !important;
  border: none;
}

body.dark-mode .Page-404 .btn-get-started:hover {
  color: var(--color-black) !important;
}

/* Custome Switch  */
.custom-switch {
  position: fixed;
  bottom: 34px !important;
  left: 34px !important;
  z-index: 9999;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px !important;
  border: none !important;
  border-radius: 50%;
  /* background-color: var(--black-primary) !important; */
  box-shadow: 0 2px 4px var(--color-black);
}
.custom-switch input {
  display: none;
}
.custom-switch .form-check-input {
  width: 35px !important;
  height: 35px !important;
  cursor: pointer;
  opacity: 0; /* hide the checkbox */
  position: absolute;
}

.custom-switch label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  cursor: pointer;
}
.theme-icon {
  width: 35px !important;
  height: 35px !important;
  display: block;
  cursor: pointer;
  border-radius: 50%;
  background: url("./../images/vector.svg") center/20px no-repeat;
  transition: all 0.3s ease;
  background-color: var();
  padding: 0 !important;
}

/* DARK MODE ICON */
#themeToggle:checked + .theme-icon {
  background: url("./../images/suntheme2.svg") center / 20px no-repeat;
  background-color: var(--color-primary);
}

/* Tablets */
@media (max-width: 992px) {
  .custom-switch {
    bottom: 18px !important;
    margin-left: 10px !important;
  }
}
/* Force switch always visible on mobile */
@media (max-width: 768px) {
  .custom-switch {
    bottom: 18px !important;
    margin-left: 18px !important;
  }
}

/* Mobile devices */
@media (max-width: 576px) {
  .custom-switch {
    bottom: 18px !important;
    margin-left: 17px !important;
  }
}
@media (max-width: 430px) {
  .custom-switch {
    bottom: 18px !important;
    margin-left: 10px !important;
  }
}