:root {

  --white-color: #FFFFFF;
  --black-color: #000000;
  --grey-white-color: #666666;
  --other-black-color: #020407;
  --light-black-color: #0D0D0D;
  --box-color: #0F1113;
  --grey-btn-color: #323436;
  --grey-color: #878787;
  --link-color: #0088FF;
  --placholder-color: #989898;
  --validation-color: #FF6262;
  --logout-color: #FF2D55;
  --slidebar-link-color: #898989;
  --active-step-color: #404040;

  --font-family: "Google Sans", sans-serif;
  --font-family-inter: "Inter", sans-serif;

  --fs-80: clamp(1.875rem, 0.625rem + 5vw, 5rem);
  --fs-40: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
  --fs-24: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-20: clamp(1.125rem, 1.075rem + 0.2vw, 1.25rem);
  --fs-18: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-16: clamp(0.875rem, 0.825rem + 0.2vw, 1rem);
  --fs-14: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);

  --line-height-100: 100%;
  --line-height-120: 120%;
  --line-height-150: 150%;

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

  --text-left: left;
  --text-center: center;
  --text-right: right;

  --text-uppercase: uppercase;

}

body {
  background-color: var(--black-color);
}

html,
body {
  overflow-x: hidden !important;
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: unset !important;
}

button:focus {
  box-shadow: unset !important;
}

.modal-content {
  background-color: var(--box-color);
}

.modal-footer {
  border-top: 0px;
}

.w-30 {
  min-width: 30%;
}

.br-4{
  border-radius: 4px;
}

.validation-text {
  color: var(--validation-color);
  font-style: italic;
  margin-top: 5px;
  display: none;
}

input[type=checkbox]:hover {
  cursor: pointer;
}

a{
    text-decoration:none;
}

/* Navbar */

.nav-btn {
  background-color: var(--grey-btn-color);
  font-family: var(--font-family) !important;
  font-size: var(--fs-14) !important;
  font-weight: var(--medium-font) !important;
  line-height: var(--line-height-100) !important;
  color: var(--white-color) !important;
  padding: 10px 10px;
  display: inline-block;
  text-decoration: none;
  text-transform: var(--text-uppercase);
  margin-left: 10px;
}

.nav-btn img {
  margin-left: 15px;
}

/* Button Common */

.gen-btn,
.gen-btn:hover,
.gen-btn:focus,
.gen-btn:focus-visible,
.gen-btn:active {
  background-color: var(--grey-btn-color) !important;
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--medium-font);
  line-height: var(--line-height-100);
  color: var(--white-color) !important;
  padding: 15px 10px;
  display: inline-block;
  text-decoration: none;
  border-color: transparent !important;
}

.gen-btn img {
  margin-left: 50px;
}

.gen-btn:hover img {
  animation-name: flash;
  animation-duration: 1s;
  animation-iteration-count: 3;
}

.gen-btn-white,
.gen-btn-white:hover,
.gen-btn-white:focus,
.gen-btn-white:focus-visible,
.gen-btn-white:active {
  background-color: var(--white-color) !important;
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--medium-font);
  line-height: var(--line-height-100);
  color: var(--black-color) !important;
  padding: 15px 10px;
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--white-color) !important;
  border-radius: 4px;
}

.gen-btn-white img {
  margin-left: 50px;
  filter: invert(1);
}

.gen-btn-white:hover img {
  animation-name: flash;
  animation-duration: 1s;
  animation-iteration-count: 3;
}



.gen-form-wrap input,
.gen-form-wrap input:focus,
.gen-form-wrap input:focus-visible,
.gen-form-wrap select,
.gen-form-wrap select:focus {
  background-color: var(--black-color);
  border: 1px solid #FFFFFF1A;
  border-radius: 4px;
  height: 50px;
  color: var(--white-color);
}

.gen-form-wrap input:focus {
  border-bottom: 1px solid var(--white-color);
}

.gen-form-wrap input::placeholder,
.gen-form-wrap textarea::placeholder {
  color: var(--placholder-color);
}

.gen-form-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  display: block;
  filter: invert(1);
  cursor: pointer;
}

.gen-form-wrap label,
.gen-form-wrap .form-label {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--regular-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
}

.gen-form-wrap textarea,
.gen-form-wrap textarea:focus,
.gen-form-wrap textarea:focus-visible {
  background-color: var(--black-color);
  border: 1px solid #FFFFFF1A;
  border-radius: 4px;
  color: var(--white-color);
}

.gen-form-wrap input:disabled{
  background-color: var(--grey-btn-color) !important;
}


.gen-wrap{
  background-color: var(--box-color);
  border-radius: 12px;
  padding: 30px;
  height: 100%;
}

.gen-wrap-black{
  background-color: var(--black-color);
  border-radius: 12px;
  padding: 30px;
}

.gen-wrap-grey{
  background-color: var(--grey-btn-color);
  border-radius: 12px;
  padding: 30px;  
  height: 100%;
}


/* Font */

input,
select,
textarea {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--regular-font);
  line-height: var(--line-height-120);
}

.main-title {
  font-family: var(--font-family);
  font-size: var(--fs-80);
  font-weight: var(--regular-font);
  line-height: var(--line-height-120);
  color: var(--white-color);
  text-transform: var(--text-uppercase);
  word-break: break-word;
}

.main-title-medium {
  font-family: var(--font-family);
  font-size: var(--fs-80);
  font-weight: var(--medium-font);
  line-height: var(--line-height-120);
  text-transform: var(--text-uppercase);
  color: var(--white-color);
}

.main-title-semibold,
.main-title span {
  font-family: var(--font-family);
  font-size: var(--fs-80);
  font-weight: var(--semibold-font);
  line-height: var(--line-height-120);
  color: var(--white-color);
  text-transform: var(--text-uppercase);
  word-break: break-word;
}

.heading {
  font-family: var(--font-family);
  font-size: var(--fs-40);
  font-weight: var(--medium-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
  text-transform: var(--text-uppercase);
  word-break: break-word;
}

.heading-grey {
  font-family: var(--font-family);
  font-size: var(--fs-40);
  font-weight: var(--medium-font);
  line-height: var(--line-height-100);
  color: var(--grey-color);
  text-transform: var(--text-uppercase);
  word-break: break-word;
}

.heading-white-semibold {
  font-family: var(--font-family);
  font-size: var(--fs-40);
  font-weight: var(--semibold-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
  word-break: break-word;
}

.medium-title {
  font-family: var(--font-family);
  font-size: var(--fs-24);
  font-weight: var(--medium-font);
  line-height: var(--line-height-120);
  color: var(--white-color);
  word-break: break-word;
}

.medium-title-dark {
  font-family: var(--font-family);
  font-size: var(--fs-24);
  font-weight: var(--medium-font);
  line-height: var(--line-height-120);
  color: var(--black-color);
  word-break: break-word;
}

.medium-title-grey {
  font-family: var(--font-family);
  font-size: var(--fs-24);
  font-weight: var(--medium-font);
  line-height: var(--line-height-120);
  color: var(--grey-color);
  word-break: break-word;
}

.medium-title-semi {
  font-family: var(--font-family);
  font-size: var(--fs-24);
  font-weight: var(--semibold-font);
  line-height: var(--line-height-120);
  color: var(--white-color);
  word-break: break-word;
}

.medium-title-reg {
  font-family: var(--font-family);
  font-size: var(--fs-24);
  font-weight: var(--regular-font);
  line-height: var(--line-height-120);
  color: var(--white-color);
  word-break: break-word;
}

.sub-title {
  font-family: var(--font-family);
  font-size: var(--fs-20);
  font-weight: var(--regular-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
}

.sub-title-medium {
  font-family: var(--font-family);
  font-size: var(--fs-20);
  font-weight: var(--medium-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
}

.sub-title-semibold {
  font-family: var(--font-family);
  font-size: var(--fs-20);
  font-weight: var(--semibold-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
}

.sub-title-18-white {
  font-family: var(--font-family);
  font-size: var(--fs-18);
  font-weight: var(--medium-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
}

.sub-title-18-white-regular {
  font-family: var(--font-family);
  font-size: var(--fs-18);
  font-weight: var(--regular-font);
  line-height: var(--line-height-120);
  color: var(--white-color);
}

.sub-title-18-dark {
  font-family: var(--font-family);
  font-size: var(--fs-18);
  font-weight: var(--medium-font);
  line-height: var(--line-height-100);
  color: var(--black-color);
}

.sidebar-link-text {
  font-family: var(--font-family);
  font-size: var(--fs-18);
  font-weight: var(--regular-font);
  line-height: var(--line-height-100);
  color: var(--slidebar-link-color);
}

.gen-description {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--regular-font);
  line-height: var(--line-height-120);
  color: var(--white-color);
  text-decoration: none;
  word-break: break-word;
}

.gen-description-semibold {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--semibold-font);
  line-height: var(--line-height-120);
  color: var(--white-color);
  text-decoration: none;
  word-break: break-word;
}

.gen-description-grey {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--regular-font);
  line-height: var(--line-height-120);
  color: var(--grey-color);
  text-decoration: none;
  word-break: break-word;
}

.gen-description-grey span {
  color: var(--white-color);
  font-weight: var(--semibold-font);
}

.gen-description-dark {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--regular-font);
  line-height: var(--line-height-120);
  color: var(--black-color);
  text-decoration: none;
  word-break: break-word;
}

.gen-description-light-grey {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--regular-font);
  line-height: var(--line-height-120);
  color: var(--grey-white-color);
  text-decoration: none;
  word-break: break-word;
}


.small-text {
  font-family: var(--font-family);
  font-size: var(--fs-14);
  font-weight: var(--regular-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
}

.placeholder-text {
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--regular-font);
  line-height: var(--line-height-100);
  color: var(--placholder-color);
}

/* Footer */

.footer-title {
  font-family: var(--font-family);
  font-size: var(--fs-20);
  font-weight: var(--medium-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
  text-transform: var(--text-uppercase);
}

.footer-link {
  font-family: var(--font-family);
  font-size: var(--fs-18);
  font-weight: var(--regular-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
  text-transform: var(--text-uppercase);
}

.footer-box {
  background-color: var(--box-color);
  padding: 20px 20px;
  height: 100%;
}

.social-icons {
  display: flex;
  gap: 14px;
}

.footer-section {
  background: var(--other-black-color);
  color: var(--white-color);
  padding-top: 80px;
  padding-bottom: 40px;
}

.footer-logo {
  max-width: 430px;
}

.footer-menu {
  padding: 0;
  padding-inline-start: 30px;
}

.footer-menu li {
  margin-right: 45px;
  margin-bottom: 10px;
  display: inline-block;
}

.footer-menu li:last-child {
  margin-right: 0;
}

.footer-menu a {
  position: relative;
  text-decoration: none;
}

.footer-menu a::before {
  content: "";
  width: 18px;
  height: 1px;
  position: absolute;
  left: -28px;
  top: 50%;
  background-color: var(--white-color);
}

/* Faq Common */

.faq-wrap {
  background-color: var(--other-black-color);
  padding: 70px 0;
}

.faq-wrap .accordion-item {
  border: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--white-color) 0%, var(--black-color) 100%) 1;
  margin-bottom: 30px;
  background-color: transparent;
}

.faq-wrap .accordion-button {
  background-color: transparent;
  font-family: var(--font-family);
  font-size: var(--fs-20);
  font-weight: var(--semibold-font);
  line-height: var(--line-height-100);
  color: var(--white-color);
  box-shadow: unset;
}

.faq-wrap .accordion-body {
  background-color: transparent;
  font-family: var(--font-family);
  font-size: var(--fs-16);
  font-weight: var(--regular-font);
  line-height: var(--line-height-150);
  color: var(--grey-color);
  text-align: var(--text-left);
  padding-top: 0px !important;
}

.faq-wrap .accordion-button::after {
  background-image: url(../images/accarrow.svg);
  background-size: 14px;
  background-position: center;
}

.faq-wrap .accordion-item:has(.accordion-button:not(.collapsed)) {
  background-color: var(--box-color);
}

/* Testimonial Common */

.testimonial-wrap {
  background-color: var(--other-black-color);
  padding: 70px 0;
}

.testimonial-wrap .slide {
  background-color: var(--box-color);
  padding: 50px;
}

.testimonial-wrap .slider-nav {
  display: flex;
  justify-content: end;
  margin-bottom: 30px;
}

.testimonial-wrap .slider-nav img {
  width: 60px;
  height: 60px;
}

.testimonial-wrap button {
  background-color: transparent;
  border: 0px;
  border-radius: 50%;
}

/* Lunch Common Box */

.lcb-box {
  background-color: var(--box-color);
  border-radius: 9px;
  padding: 30px;
}

.lunch-common-box {
  margin: 50px 0;
}

/* sidebar */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 275px;
  height: 100vh;
  background: var(--box-color);
  padding: 28px;
  z-index: 1050;
  transition: transform .3s ease;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  margin-bottom: 45px;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu li {
  margin-bottom: 10px;
}

.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 20px;
  color: #888;
  text-decoration: none;
  font-size: 16px;
  border-radius: 0;
  transition: .2s;
}

.sidebar-menu a.logout {
  margin-top: 35px;
}

.sidebar .logout .sidebar-link-text {
  color: var(--logout-color);
}

.sidebar .active .sidebar-link-text {
  color: var(--white-color);
}

.sidebar .active .sideicn {
  filter: brightness(0) invert(1);
}

.sidebar .active {
  background-color: var(--black-color);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 1040;
}

/* Main Wrapper */

.main-content {
  margin-left: 275px;
  min-height: 100vh;
  padding: 25px 28px 60px;
}

.mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid #333;
  background: #111214;
  color: #fff;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 15px;
}