@font-face {
  font-family: "DM sans";
  src: url("/Font/DMSans-Regular.woff");

  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "DM sans";
  overflow-x: hidden;
}

:root {
  color-scheme: light only;
  --type-scale-base: 20px;
  --type-scale-multiplier-1: 1.1111;
  /* Multiplier for 18px to 20px */
  --type-scale-multiplier-2: 1.2;
  /* Multiplier for 20px to 24px */
  --type-scale-multiplier-3: 1.3333;
  /* Multiplier for 24px to 32px */
  --type-scale-multiplier-4: 1.125;
  /* Multiplier for 32px to 36px */
  --type-scale-multiplier-5: 1.1111;
  /* Multiplier for 36px to 40px */
  --type-scale-multiplier-6: 1.15;
  /* Multiplier for 40px to 46px */

  --type-scale-1: var(--type-scale-base);
  --type-scale-2: calc(var(--type-scale-1) * var(--type-scale-multiplier-1));
  /* 20px */
  --type-scale-3: calc(var(--type-scale-2) * var(--type-scale-multiplier-2));
  /* 24px */
  --type-scale-4: calc(var(--type-scale-3) * var(--type-scale-multiplier-3));
  /* 32px */
  --type-scale-5: calc(var(--type-scale-4) * var(--type-scale-multiplier-4));
  /* 36px */
  --type-scale-6: calc(var(--type-scale-5) * var(--type-scale-multiplier-5));
  /* 40px */
  --type-scale-7: calc(var(--type-scale-6) * var(--type-scale-multiplier-6));
  /* 46px */

  --type-scale-0: calc(var(--type-scale-1) / var(--type-scale-multiplier-4));
  /* 16px */
  --type-scale--1: calc(var(--type-scale-0) / var(--type-scale-multiplier-4));
  /* 14.4px */

  --letter-spacing-n2: -1.64px;
  /* n1 stands for negative 1 */
  --letter-spacing-n1: -1px;
  /* n2 stands for negative 2 */
  --letter-spacing-p1: 1.4px;
  /* p1 stands for positive 1 */
  --letter-spacing-p2: 3px;
  /* p2 stands for positive 2 */
  --line-height-decreased: 1;
  --line-height: 1.3;
  --line-height-increased: 2;
  --font-weight-light: 300;
  --font-weight-medium: 400;
  --font-weight-bold: 700;
  --color-black-primary: #333333;
  --color-black-secondary: #000000;
  --color-white-primary: #ffffff;
}
h1 {
  font-size: var(--type-scale-7);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  letter-spacing: var(--letter-spacing-n2);
  font-weight: var(--font-weight-medium);
}
h2 {
  font-size: var(--type-scale-6);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  font-weight: var(--font-weight-medium);
}
h3 {
  font-size: var(--type-scale-5);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  font-weight: var(--font-weight-medium);
}
h4 {
  font-size: var(--type-scale-4);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  font-weight: var(--font-weight-medium);
}
h5 {
  font-size: var(--type-scale-3);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  font-weight: var(--font-weight-medium);
}
h6 {
  font-size: var(--type-scale-2);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  font-weight: var(--font-weight-medium);
}
a {
  text-decoration: none !important;
  &:hover {
      color: var(--color-white-primary);
  }
}
.pragraph-h1 {
  font-size: var(--type-scale-7);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  letter-spacing: var(--letter-spacing-n2);
  font-weight: var(--font-weight-medium);
}
.pragraph-l {
  font-size: var(--type-scale-1);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  font-weight: var(--font-weight-medium);
}
.paragraph-m {
  font-size: var(--type-scale-0);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  font-weight: var(--font-weight-medium);
}
.paragraph-s {
  font-size: var(--type-scale--1);
  line-height: var(--line-height);
  color: var(--color-black-primary);
  font-weight: var(--font-weight-medium);
}
.letter-spacing-n2 {
  letter-spacing: var(--letter-spacing-n2);
}
.letter-spacing-n1 {
  letter-spacing: var(--letter-spacing-n1);
}
.letter-spacing-p1 {
  letter-spacing: var(--letter-spacing-p1);
}
.letter-spacing-p2 {
  letter-spacing: var(--letter-spacing-p2);
}
.primary-white {
  color: var(--color-white-primary);
}
.primary-black {
  color: var(--color-black-primary);
}
.secondary-black {
  color: var(--color-black-secondary);
}

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

.light {
  font-weight: var(--font-weight-light);
}
.decreased-line-height {
  line-height: var(--line-height-decreased);
}
.increased-line-height {
  line-height: var(--line-height-increased);
}

.cursor-pointer{
  cursor: pointer;
}

.navbar-light .navbar-toggler {
  border-color: white !important;
}
@media (min-width: 1350px) {
  :root {
      --type-scale-base: 18px;
  }
  .common-btn {
      border: 1px transparent solid;
      color: var(--color-white-primary);
      padding: 14px 24px;
      border-radius: 4px;
      background-color: #8670f7;
      font-size: var(--type-scale--1);
      letter-spacing: var(--letter-spacing-p1);
      border-radius: 5px;
  }
  .common-btn.button-l {
      padding: 14px 50px;
  }
  .common-btn.button-m {
      padding: 14px 36px;
  }
  .common-btn.button-s {
      padding: 7px 24px;
  }
  .ml-scale-1 {
      margin-left: 80px;
  }

  .navbar .background-image {
      height: 650px;
  }

  .text-column {
      margin-top: 70px;
  }

  .margin-top {
      margin-top: 25px;
  }

  .margin-two {
      margin-top: 150px !important;
  }

  .inner-row {
      margin-top: 5%;
  }

  .nav-item {
      margin: 0 10px;
  }

  .navbar-margin {
      margin-left: auto !important;
  }

  .navbar {
      padding: 6px 3% !important;
      align-items: baseline;
  }

  .navbar-logo {
      width: auto;
  }

  .nav {
      margin-left: 32px;
  }

  .foot-troogue-logo {
      width: 200px;
      margin-left: 100px;
  }
  .footer-social-links {
      padding-left: 5%;
  }
  .two-card-btn {
      padding: 6px 19px !important;
      font-size: 10px !important;
  }
}

@media (min-width: 992px) and (max-width: 1349px) {
  :root {
      --type-scale-base: 16px;
  }
  .common-btn {
      border: 1px transparent solid;
      color: var(--color-white-primary);
      padding: 10px 18px;
      border-radius: 4px;
      background-color: #8670f7;
      font-size: var(--type-scale--1);
      letter-spacing: var(--letter-spacing-p1);
      border-radius: 5px;
  }
  .common-btn.button-l {
      padding: 10px 40px;
  }
  .common-btn.button-m {
      padding: 10px 28px;
  }
  .common-btn.button-s {
      padding: 5px 18px;
  }

  .top-margin {
      margin-top: 130px !important;
  }

  .text-column {
      margin-top: 70px;
  }

  .text-column-1 {
      margin-top: 40px;
  }

  .Trooger-cares-bg {
      padding: 50px !important;
  }

  .two-card-btn {
      padding: 6px 19px !important;
      font-size: 10px !important;
  }

  .sign-up-btn {
      font-size: 12px !important;
  }

  .margin-top {
      padding: 10px;
  }

  @media (min-width: 1100px) and (max-width: 1299px) {
      .navbar-logo {
          width: auto;
      }
  }

  @media (max-width: 1099px) {
      .navbar-logo {
          width: revert-layer !important;
      }

      .nav-link{
          font-size: 14px !important;
      }
  }

  .navbar {
      padding: 6px 3% !important;
      align-items: baseline;
  }
  .footer-social-links {
      padding-left: 5%;
  }
  .foot-troogue-logo {
      width: 150px;
      margin-left: 80px;
  }

  .carousel-control-next {
      transform: translateX(-10%) !important;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  :root {
      --type-scale-base: 16px;
  }
  .common-btn {
      border: 1px transparent solid;
      color: var(--color-white-primary);
      padding: 8px 16px;
      border-radius: 4px;
      background-color: #8670f7;
      font-size: var(--type-scale--1);
      letter-spacing: var(--letter-spacing-p1);
      border-radius: 5px;
  }
  .common-btn.button-l {
      padding: 8px 36px;
  }
  .common-btn.button-m {
      padding: 8px 26px;
  }
  .common-btn.button-s {
      padding: 4px 16px;
  }

  .ml-scale-1 {
      margin-left: 90px;
  }
  .top-margin {
      margin-top: 40px;
  }

  .text-column {
      margin-top: 100px;
  }

  .text-column-1 {
      margin-top: 40px;
  }

  .nav {
      display: none;
  }
  .card-fontmin {
      font-size: 24px !important;
  }

  .navbar-logo {
      width: 30%;
  }

  .Trooger-cares-bg {
      padding: 30px !important;
  }

  .profile-corousal {
      padding-bottom: 14%;
  }

  .two-card-btn {
      padding: 4px 14px !important;
      font-size: 8px !important;
  }

  .form-with-shadow {
      padding: 10px !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  :root {
      --type-scale-base: 14px;
  }
  .common-btn {
      border: 1px transparent solid;
      color: var(--color-white-primary);
      padding: 8px 16px;
      border-radius: 4px;
      background-color: #8670f7;
      font-size: var(--type-scale--1);
      letter-spacing: var(--letter-spacing-p1);
      border-radius: 5px;
  }
  .common-btn.button-l {
      padding: 8px 36px;
  }
  .common-btn.button-m {
      padding: 8px 26px;
  }
  .common-btn.button-s {
      padding: 4px 16px;
  }

  .ml-scale-1 {
      margin-left: 50px;
  }

  .navbar {
      padding: 6px 13px !important;
      width: 39%;
  }
  .spacing {
      padding: 10%;
  }
  .nav {
      display: none;
  }

  .navbar-logo {
      position: relative;
  }

  .text-column {
      margin-top: 12%;
  }

  .Trooger-cares-bg {
      padding: 20px !important;
  }

  .row-1,
  .sub-heading {
      margin-left: 50px !important;
  }

  .navbar-logo {
      position: relative;
  }

  .foot-troogue-logo {
      width: 150px;
      margin-left: 20px;
  }

  .profile-corousal {
      padding-bottom: 8%;
  }
  .troo-voyage{
      padding: 1rem 0;
  }
}

@media (max-width: 576px) {
  :root {
      --type-scale-base: 12px;
  }
  .common-btn {
      border: 1px transparent solid;
      color: var(--color-white-primary);
      padding: 8px 16px;
      border-radius: 4px;
      background-color: #8670f7;
      font-size: var(--type-scale--1);
      letter-spacing: var(--letter-spacing-p1);
      border-radius: 5px;
  }
  .common-btn.button-l {
      padding: 6px 30px;
  }
  .common-btn.button-m {
      padding: 6px 24px;
  }
  .common-btn.button-s {
      padding: 4px 16px;
  }
  .spacing {
      padding: 10%;
  }
  .spacing-left {
      padding-left: 5%;
  }
  .text-column {
      margin-top: 30px;
  }

  .margin-left {
      margin-left: 10px;
  }

  .top-margin {
      margin-top: 100px !important;
      padding: 0 9% 10% !important;
  }

  .navbar {
      padding: 7px 15px !important;
      font-size: 12px !important;
  }
  .super-charged-component {
      padding: 10%;
  }
  .navbar-logo {
      position: relative;
      left: 20px;
  }

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

  .profile-component {
      padding: 6% 0% 3% 3% !important;
  }

  .carousel-control-next {
      transform: translateX(10%) !important;
  }

  .text-column-1 {
      margin-left: 60px;
  }

  .Trooger-cares-bg {
      padding: 35px !important;
  }

  .list-align {
      margin-top: 10px;
  }

  .two-card-btn {
      padding: 3px 12px !important;
      font-size: 8px !important;
  }

  .mt-7 {
      margin-top: 3% !important;
  }

  .card-pad {
      padding: 0 !important;
  }

  .profile-corousal {
      padding-bottom: 5%;
  }

  .grid-container-row-3 {
      .grid-item-2 {
          position: relative;
          display: grid;

          .grid-content {
              height: 100%;
              width: 100%;
              justify-content: center;
              position: absolute;
              display: flex;
              align-items: end;
              padding: 20px;
          }
      }
  }

  .grid-button {
      padding: 5px 10px !important;
  }

  .ml-scale-1,
  .row-1,
  .sub-heading {
      margin-left: 20px !important;
  }
}

.highlight {
  color: #8670f7;
}

.grey {
  color: #33333380;
}

.navbar {
  transition: background-color 0.5s ease;
}

.navbar-logo {
  width: auto;
  object-fit: scale-down;
}

.navbar-scrolled,
.navbar-opened {
  /* background-color: rgba(211, 211, 211, 1) !important; */
  background-color: #fff;
}

.navbar-toggler {
  position: absolute;
  left: 10px;
  top: 15px;
}

.navbar-light .navbar-nav .nav-link {
  color: gray;
}

.sign-up-btn {
  border: 1px transparent solid;
  padding: 7px 32px;
  font-size: 16px;
  border-radius: 4px;
  color: #8670f7;
}

.mt-6 {
  margin-top: 100px;
}

.row-section-1-bg {
  position: absolute;
  top: 0;
}
.carousel-inner {
  padding-bottom: 13%;
}
.Trooger-cares-bg {
  background-image: url("/Imagefol/watercolor-bg-2.webp");
  padding: 5% 5% 5% 0;
  color: rgba(255, 255, 255, 0.75);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  height: auto;
}

.background-image {
  background-image: url("/Imagefol/header-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  top: 0;
  padding-top: 10%;
}

.section-3 {
  background-image: url("Imagefol/watercolor-bg.webp");
  padding: 22px 54px;
  color: rgba(255, 255, 255, 0.75);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.ready-bg {
  background: url(Imagefol/are-you-ready-bg.webp);
  padding: 80px;
  color: #fff;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.vertical-line {
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255);
  height: 90px;
  margin: auto;
}

.common-btn:disabled {
  background-color: #8670f7;
  cursor: not-allowed;
}

.highlight-1 {
  margin-left: 20px;
}

.heading {
  line-height: 0.8;

  .sub-heading {
      margin-left: 75px;
  }
}

.two-card-position {
  gap: 10px;
}

.background-container {
  position: relative;
  width: 100%;
  height: auto;
}

.img-fluid-height {
  position: absolute;
  height: 100%;
  width: auto;
}

.role-content {
  position: relative;
  z-index: 1;
  /* Above background image */
  text-align: center;
  /* Align content as needed */
}

.content-overlay {
  position: absolute;
  left: 60%;
  color: white;
  z-index: 2;
}

.curve-image {
  position: relative;
  top: 0;
  left: 15px;
  height: auto;
  z-index: 1;
}

.grey-text {
  color: #33333380;
}

.research-container {
  background: linear-gradient(to bottom, #f2f2f2 85%, #fff 75%);

  .grid-container {
      display: grid;
      gap: 20px;

      .grid-container-row-1 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;

          .grid-item-1 {
              display: grid;
              justify-content: end;
              align-items: end;
          }

          img {
              object-fit: cover;
          }
      }

      .grid-container-row-2 {
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: 20px;

          img {
              height: 100%;
          }

          .grid-item-1 {
              .img.bg-image {
                  width: 100%;
                  height: auto;
                  z-index: 1;
              }

              .overlay-image {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  /* background: url('/Imagefol/HomePage/BitmapRow_2_1.webp') no-repeat center center; */
                  background-size: cover;
                  opacity: 1;
                  border-radius: 10px;
              }

              grid-column: 1 / 2;
              grid-row: 1 / 3;
              display: grid;
              justify-content: end;
              position: relative;

              .grid-content {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: space-between;
                  padding: 20px;
                  color: #fff;
              }
          }

          .grid-item-2 {
              grid-column: 2 / 3;
              grid-row: 1 / 2;
          }

          .grid-item-3 {
              grid-column: 2 / 3;
              grid-row: 2 / 3;
          }
      }

      .grid-container-row-3 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;

          .grid-item-1 {
              display: grid;
              justify-content: end;
          }

          .grid-item-2 {
              display: grid;

              .grid-content {
                  display: flex;
                  align-items: end;
              }
          }
      }
  }
}

.profile-component {
  padding: 6% 10% 3% 10%;
  background-image: url("/Imagefol/testimonial-bg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;

  .carousel-control-prev,
  .carousel-control-next {
      position: absolute;
      display: flex;
      align-items: end;

      img {
          height: 48px;
      }
  }

  .carousel-control-prev {
      left: 50%;
      transform: translateX(-105%);
      /* Adjust to move left of the center */
  }

  .carousel-control-next {
      left: 50%;
      /* Center horizontally */
      transform: translateX(10%);
      /* Adjust to move right of the center */
  }
}

.pale-bg {
  background-color: #f2f2f2;
}

.form-with-shadow {
  box-shadow: 0 4px 8px rgba(50, 49, 49, 0.1);
  height: 42px;
}

.custom-hr {
  border: none;
  border-top: 1px solid #8d8b8b;
  margin: 20px 0;
  /* Adjust the margin as needed */
}

.list-styled {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}

.list-styled li a {
  cursor: pointer;
  color: #5e5d5d;
  text-decoration: none;
}

.list-styled li a:hover {
  color: #89609e;
}

.footer-bottom {
  background-color: black;
  color: white;
  padding: 5px 6px;
  padding-top: 2%;
}

.icon img {
  width: 30px;
  height: 30px;
  filter: invert(100%);
}

.cookies-consent-container {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  width: 350px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.img-icon {
  width: 100%;
  margin-bottom: 10px;
}

.text-start {
  padding-left: 7%;
  font-size: 14px;
  color: #d7d3d3;
}

.text-end {
  font-size: 14px;
  padding-left: 6%;
}

.cookies-consent-message {
  flex: 1;
  text-align: center;
  margin-bottom: 10px;
}

.button-cookies {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.cookies-consent-button {
  background-color: #fff;
  border: none;
  color: #000;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
  cursor: pointer;
  border-radius: 4px;
  flex: 1;
}

.cookies-consent-decline-button {
  background-color: #fff;
  margin-right: 5px;
}

.cookies-consent-accept-button {
  background-color: #fff;
  margin-left: 5px;
}


.card {
  border: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease-in-out;
  padding-bottom: 20px;
  min-height: 520px;
}

/* Hover effect (optional) */
.card:hover {
  transform: translateY(-4px);
}

.card-bg-gray {
  background-color: #f5f5f5; /* Light gray background */
}
.card-bg-white {
  background-color: #ffffff; /* White background */
}

.card-img-top {
  padding: 10px;
  height: 260px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card-body {
  padding: 24px 20px 0 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-title {
  font-size: 18px;
  color: #222;
  margin-bottom: 16px;
  font-weight: 600;
}

.card-text {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin-bottom: auto;
}