/* This file contains most of the css code used for the homepage. The individual files can still be found in the server. */

/* order of individual css file in here:=
joined-fixed-component.css 
6-utility-classes.css
10-carousel--swipper--custom-1.css
2-hero__investment.css
3-body-testimonials__investments.css
4-body__our__plans.css
6-what__we__invest__in.css
*/


/* START OF joined-fixed-component.css */

/* this is where we joins all components that are "less frequently changed" into one css file*/
/* this will make compression better and make website a bit faster */
/* less frequently changed component are picked because of Cache */

/* ---------------PRESET STYLES------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;

  box-sizing: inherit;
  scroll-behavior: smooth;
}

body {
  height: auto;
  -webkit-font-smoothing: antialiased;

  background-color: var(--clr-gen-website-bckgrd);
  background-image: url(/questergatecapital/public/img/images/Polygon-Luminary.svg);
  background-repeat: repeat;
  background-size: contain;
}

header,
main {
  width: min(75ch, 100 - 4rem);
  margin-inline: auto;

  overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/*
	Remove built-in form typography styles
*/
input,
button,
textarea,
select {
  font: inherit;
}

/*
  Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/*
  Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/* ---------------GENERAL STYLES------------- */

/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .gen-container {
    /* outline: 2px solid gold; */

    width: 100%;
    min-width: 260px;
    margin: 0 auto;
  }
}

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .gen-container {
    /* outline: 2px solid gold; */

    width: 100%;
  }
}

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .gen-container {
    /* outline: 2px solid gold; */

    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
  }
}


/** ---------------end of PRESET STYLES------------- */

/* ////////////////////// */
/* /////////////////////// */
/* //////////////////////// */

/** ---------------------FONTS------------------- */
/* this contains details about the fonts of the website */

/** ------------------NUNITO------------------- */
/* nunito-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: normal;
  font-weight: 300;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-300.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-300.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: italic;
  font-weight: 300;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-300italic.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-300italic.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-regular.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-regular.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-italic.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-italic.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: normal;
  font-weight: 500;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-500.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-500.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: italic;
  font-weight: 500;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-500italic.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-500italic.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-600.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-600.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-700.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-700.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* nunito-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Nunito";
  font-style: italic;
  font-weight: 700;
  src: local("Nunito"),
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-700italic.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/nunito-v26-latin-700italic.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/** ---------------------------ROBOTO-------------------------- */

/* roboto-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto"),
    url("/questergatecapital/public/utilities/fonts/roboto-v30-latin-regular.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/roboto-v30-latin-regular.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: local("Roboto"),
    url("/questergatecapital/public/utilities/fonts/roboto-v30-latin-500.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/roboto-v30-latin-500.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/** ---------------------------MONTAGU SLAB-------------------------- */
/* montagu-slab-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montagu Slab";
  font-style: normal;
  font-weight: 400;
  src: local("Montagu Slab"),
    url("/questergatecapital/public/utilities/fonts/montagu-slab-v12-latin-regular.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/montagu-slab-v12-latin-regular.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* montagu-slab-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montagu Slab";
  font-style: normal;
  font-weight: 700;
  src: local("Montagu Slab"),
    url("/questergatecapital/public/utilities/fonts/montagu-slab-v12-latin-700.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
    url("/questergatecapital/public/utilities/fonts/montagu-slab-v12-latin-700.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/** ---------------------end of FONTS------------------- */


/* ////////////////////// */
/* /////////////////////// */
/* //////////////////////// */

/** ---------------------TYPOGRAPHY------------------- */
/* this contains styling for site Typography */

:root {
  /* ////////////////////////////////// */
  /** Fonts */
  --ff-primary: "Nunito", sans-serif;
  --ff-secondary: "Montagu Slab", sans-serif;
  --ff-btn: "Roboto", sans-serif;

  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);

  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;

  /* ////////////////////////////////// */
  /* the -100, -200 at the end of the fs is just to... */
  /* help number it and easily add sth in-between in future */
  --fs-100: 4rem;
  /* 64px */
  --fs-220: 3.625rem;
  /* 58px */
  --fs-200: 3.375rem;
  /* 54px */
  --fs-300: 2.75rem;
  /* 44px */
  --fs-400: 2.375rem;
  /* 38px */
  --fs-450: 2.125rem;
  /* 34px */
  --fs-500: 1.875rem;
  /* 30px */
  --fs-550: 1.75rem;
  /* 28px */
  --fs-600: 1.5rem;
  /* 24px */
  --fs-700: 1.25rem;
  /* 20px */
  --fs-800: 1rem;
  /* 16px Base Size */
  --fs-900: 0.875rem;
  /* 14px */
  --fs-1000: 0.75rem;
  /* 12px */
  --fs-1100: 0.625rem;
  /* 10px */

  /* ////////////////////////////////// */
  /** lh == line height */
  --lh-100: 140%;
  --lh-200: 136%;
  --lh-300: 1.25rem;
  /* 20px */
  --lh-400: 1.364rem;
  /* 21.82px---good for normal texts */
  --lh-410: 1.705rem;
  /* 27.28px */
  --lh-430: 2.046rem;
  /* 32.74px */
  --lh-500: 2.5rem;
  /* 40px */
  --lh-600: 3.125rem;
  /* 50px */
  --lh-700: 3.75rem;
  /* 60px */
  --lh-800: 4rem;
  /* 64px */
  --lh-900: 5.438rem;
  /* 87px */



  /* ////////////////////////////////// */
  /** Card dimensions */
  --shadow-card-width: 23rem;
  /* 368px */
  --shadow-card-height: 23rem;
  /* 368px */

  /* ////////////////////////////////// */
  /** Define the spacing unit as 8 pixels */
  --spacing-unit: 8px;

  /* ////////////////////////////////// */
  /* Link Dimensions */
  --link__border-radius: 0.75rem;
  /* 12px */

  /* ////////////////////////////////// */
  /** Other dimensions -- MOBILE */
  --mfs__hero__phrase: var(--fs-600);
  --mfs__hero__carousel: 3rem;
  /* 32px */
  --mfs__hero__statement: var(--fs-600);
  --mfs__hero__cta__btn: var(--fs-700);

  --mls__hero__carousel: calc(0.05 * var(--mfs__hero__carousel));
  /* 5% --used fs*/

  --mls__hero__phrase: calc(0.02 * var(--mfs__hero__phrase));
  /* 2% --used fs*/

  --mls__hero__statement: calc(0.02 * var(--mfs__hero__statement));
  /* 2% --used fs*/

  /* ////////// */
  /* Hamburger for mobile  */
  --width__burger: 2.5rem;
  --height__burger: 2.5rem;
  --height__burger-line: 5px;

  /* ////////////////////////////////// */
  /** Other dimensions -- TABLET */
  --t-fs__hero__phrase: var(--fs-600);
  --t-fs__hero__carousel: var(--fs-220);
  /* 58px */
  --t-fs__hero__statement: var(--fs-600);
  --t-fs__hero__cta__btn: var(--fs-700);

  --t-ls__hero__carousel: calc(0.05 * var(--t-fs__hero__carousel));
  /* 5% --used fs*/

  --t-ls__hero__phrase: calc(0.02 * var(--t-fs__hero__phrase));
  /* 2% --used fs*/

  --t-ls__hero__statement: calc(0.02 * var(--t-fs__hero__statement));
  /* 2% --used fs*/

  /* ////////////////////////////////// */
  /** Other dimensions -- Desktop, laptop, larger screens */
  --d-fs__hero__phrase: var(--fs-600);
  --d-fs__hero__carousel: var(--fs-220);
  /* 58px */
  --d-fs__hero__statement: var(--fs-600);
  --d-fs__hero__cta__btn: var(--fs-700);

  --d-ls__hero__carousel: calc(0.05 * var(--d-fs__hero__carousel));
  /* 5% --used fs*/

  --d-ls__hero__phrase: calc(0.02 * var(--d-fs__hero__phrase));
  /* 2% --used fs*/

  --d-ls__hero__statement: calc(0.02 * var(--d-fs__hero__statement));
  /* 2% --used fs*/

  /* ////////////////////////////////// */
  /** WIDTH Dimensions */
  --width__always-fill: 100%;
  /* makes the width always full */
  --width__1440px: 90rem;
  /* 1440px=100% of parent = gen-container */
  --width__1200px: 75rem;
  /* 83.33% of gen-container*/
  --width__1100px: 68.75rem;
  /* 76.38% of gen-container */
  --width__1000px: 62.5rem;
  /* 69.44% of gen-container */
  --width__900px: 56.25rem;
  /* 62.5% of gen-container */
  --min-width__235px: 14.69rem;
  /* min width of the gen-container */
  --min-width__290px: 18.12rem;
  /* revised min width of the gen-container */
}

/** ---------------------end of TYPOGRAPHY------------------- */


/* ////////////////////// */
/* /////////////////////// */
/* //////////////////////// */

/** ---------------------COLORS------------------- */
/* this contains the colors used in the entire website */

:root {
  --clr-primary-100: hsl(203, 57%, 36%);
  --clr-primary-200: hsl(201, 53%, 48%);
  --clr-primary-600: hsl(214, 88%, 13%);
  --clr-primary-650: hsl(214, 88%, 13%, 1);
  --clr-secondary-500: hsl(49, 100%, 50%);
  --clr-secondary-600: hsl(39, 89%, 45%);
  --clr-secondary-650: hsl(39, 89%, 45%, 1);
  --clr-secondary-700: hsl(240, 88%, 97%);
  --clr-tertiary-100: hsla(0, 0%, 0%, 1);
  --clr-tertiary-200: hsl(214, 92%, 33%, 1);
  --clr-tertiary-300: hsl(144, 92%, 33%, 1);


  --clr-grays-600: hsl(0, 0%, 6%);
  --clr-grays-610: hsl(0, 0%, 40%);
  --clr-grays-650: hsla(0, 0%, 69%, 1);
  --clr-grays-700: hsla(0, 0%, 81%, 1);
  --clr-grays-750: hsla(205, 24%, 90%, 1);

  --clr-alert-error-600: hsl(0, 100%, 51%);
  --clr-alert-success-600: hsl(144, 99%, 35%);

  --clr-horizontal-line-100: hsl(216, 7%, 43%);
  --clr-horizontal-line-200: hsla(0, 0%, 53%, 1);

  /** ---background colors------ */
  --clr-gen-website-bckgrd: hsla(210, 100%, 98%, 1);
  --clr-gen-website-bckgrd-svg1: hsl(210, 100%, 98%);
  --clr-header-bckgrd: hsla(0, 0%, 100%, 1);
  --clr-footer-bckgrd: hsl(214, 88%, 13%);
  --clr-card-bckgrd: hsl(205, 24%, 90%);
  --clr-logo-bckgrd: hsl(0, 0%, 90%);
  --clr-homepage-card-bckgrd: hsl(0, 0%, 100%);

  /**  */
  --clr-pure-white: hsl(0, 0%, 100%);
  --clr-neutral-white-3: hsl(0, 0%, 100%);
  --clr-neutral-white-2: hsla(0, 0%, 100%, 1);
  --clr-neutral-white: hsl(210, 100%, 98%);
  --clr-neutral-white-01: hsl(210, 100%, 98%, 1);
  --color-white-100: hsl(206, 5%, 100%);
  --color-white-200: hsl(206, 5%, 90%);
  --color-white-300: hsl(206, 5%, 80%);
  --color-white-400: hsl(206, 5%, 65%);
  --color-white-500: hsl(206, 5%, 50%);

  --color-black-100: hsl(213, 20%, 10%);
  --color-black-200: hsl(213, 23%, 8%);
  --color-black-300: hsl(214, 21%, 6%);
  --color-black-400: hsl(210, 21%, 6%);
  --color-black-500: hsl(216, 22%, 4%);
  --color-black-600: hsl(220, 18%, 3%);
  --color-black-700: hsl(220, 27%, 2%);
  --color-black-800: hsl(180, 20%, 1%);
  --clr-neutral-black: hsl(0, 0%, 0%);

  /** ----Links Color for white background---- */
  --clr-link-default: hsla(214, 88%, 13%, 1);
  --clr-link-visited: hsla(214, 88%, 13%, 1);
  /* hsl(214, 74%, 9%)*/
  --clr-link-hover: hsl(39, 89%, 45%);
  --clr-link-active: hsla(214, 40%, 13%, 1);
  --clr-link-focus: hsla(214, 13%, 56%, 0.4);
  --clr-link-target: hsl(214, 92%, 33%, 1);

  /** ----Links Color for colored background---- */
  --clr-link-default-2: hsl(0, 0%, 100%);
  --clr-link-default-trans-2: hsl(0, 0%, 100%, 0.1);
  --clr-link-visited-2: hsl(206, 5%, 100%);
  --clr-link-hover-2: hsl(206, 5%, 50%);
  --clr-link-active-2: hsl(206, 5%, 80%);
  --clr-link-focus-2: hsl(206, 5%, 65%);
  --clr-link-target-2: hsl(214, 92%, 33%, 1);

  /** ---background colors for buttons------ */
  --clr-bckgrd-btn-pri-default: hsla(214, 88%, 13%, 1);
  --clr-bckgrd-btn-pri-hover: hsla(214, 35%, 27%, 1);
  --clr-bckgrd-btn-pri-pressed: hsla(214, 88%, 6%, 1);
  --clr-bckgrd-btn-pri-focus: hsla(214, 13%, 56%, 1);
  --clr-bckgrd-btn-pri-disabled: hsla(214, 13%, 71%, 1);

  --clr-bckgrd-btn-sec-default: hsl(0, 0%, 100%);
  --clr-bckgrd-btn-sec-hover: hsl(0, 0%, 100%);
  --clr-bckgrd-btn-sec-pressed: hsl(0, 0%, 100%);
  --clr-bckgrd-btn-sec-focus: hsl(0, 0%, 100%);
  --clr-bckgrd-btn-sec-disabled: hsl(0, 0%, 100%);

  --clr-bckgrd-btn-succ-default: hsla(144, 99%, 35%, 1);
  --clr-bckgrd-btn-succ-hover: hsla(144, 52%, 56%, 1);
  --clr-bckgrd-btn-succ-pressed: hsla(144, 99%, 17%, 1);
  --clr-bckgrd-btn-succ-focus: hsla(144, 52%, 67%, 1);
  --clr-bckgrd-btn-succ-disabled: hsla(144, 52%, 78%, 1);

  --clr-bckgrd-btn-warn-default: hsla(39, 89%, 45%, 1);
  --clr-bckgrd-btn-warn-hover: hsla(39, 73%, 63%, 1);
  --clr-bckgrd-btn-warn-pressed: hsla(39, 89%, 23%, 1);
  --clr-bckgrd-btn-warn-focus: hsla(39, 73%, 73%, 1);
  --clr-bckgrd-btn-warn-disabled: hsla(39, 73%, 82%, 1);

  --clr-bckgrd-btn-error-default: hsla(0, 100%, 51%, 1);
  --clr-bckgrd-btn-error-hover: hsla(0, 100%, 67%, 1);
  --clr-bckgrd-btn-error-pressed: hsla(0, 96%, 25%, 1);
  --clr-bckgrd-btn-error-focus: hsla(0, 100%, 75%, 1);
  --clr-bckgrd-btn-error-disabled: hsla(0, 100%, 84%, 1);

  /** ----border colors for buttons--- */
  --clr-bd-btn-sec-default: hsla(214, 88%, 13%, 1);
  --clr-bd-btn-sec-hover: hsla(214, 35%, 27%, 1);
  --clr-bd-btn-sec-pressed: hsla(214, 88%, 6%, 1);
  --clr-bd-btn-sec-focus: hsla(214, 13%, 56%, 1);
  --clr-bd-btn-sec-disabled: hsla(214, 13%, 71%, 1);

  /** ---text color for buttons--- */
  --clr-txt-btn: hsla(0, 0%, 100%, 1);
  --clr-txt-btn-sec: hsla(214, 88%, 13%, 1);

  /** --------color for gradients------- */
  --clr-gradient-100: hsla(201, 52%, 48%, 1);
  --clr-gradient-200: hsla(214, 88%, 13%, 1);

  --clr-gradient-300: hsl(310, 100%, 43%);
  --clr-gradient-400: hsl(0, 100%, 51%);
  --clr-gradient-500: hsl(49, 100%, 50%);
  --clr-gradient-600: hsl(39, 89%, 45%);

  /** -----BOX SHADOWS------------ */
  /* (go to utility-classes.css to get the general style
	 and utility class for shadows---- */

  /* Box shadow values: offset-x offset-y blur-radius spread-radius color */

  --gen-shadow-header: 0px 8px 28px 0px hsla(214, 88%, 13%, 0.1);
  --gen-shadow-3d-00: 10px 10px 10px 0px hsla(241, 37%, 12%, 0.1);
  --gen-shadow-3d-01: 5px 5px 5px 0px hsla(241, 37%, 12%, 0.1);
  --gen-shadow-3d-02: 2px 4px 5px 5px hsla(241, 37%, 12%, 0.1);
  --gen-shadow-3d-02a: 1px 2px 2px 2px hsla(241, 37%, 12%, 0.1);

  --gen-shadow-01: 0px 2px 6px 0px hsla(241, 37%, 12%, 0.06);
  --gen-shadow-02: 0px 2px 12px 0px hsla(241, 37%, 12%, 0.08);
  --gen-shadow-03: 0px 8px 28px 0px hsla(241, 37%, 12%, 0.1);
  --gen-shadow-04: 0px 14px 42px 0px hsla(241, 37%, 12%, 0.14);
  --gen-shadow-05: 0px 24px 65px 0px hsla(241, 37%, 12%, 0.16);
  --gen-shadow-06: 0px 32px 72px 0px hsla(241, 37%, 12%, 0.24);

  --thick-shadow: box-shadow: 0 5px 5px 0 rgba(0, 0, 255, 0.5);
}

/** ---------------------end of COLORS------------------- */

/* ////////////////////// */
/* /////////////////////// */
/* //////////////////////// */

/** ---------------------BACK-TO-TOP function Style------------------- */
/* these code styles the back to top function of the website */

/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  #back-to-top {
    position: fixed;
    bottom: 21.5%;
    right: 2.4%;
    z-index: 99;
    font-size: 1rem;
    border: none;
    outline: none;
    background-color: var(--clr-secondary-650);
    color: var(--clr-homepage-card-bckgrd);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 12px;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.5s ease-in;
    /* Smooth transition for opacity */
  }

  #back-to-top:hover {
    background-color: var(--clr-primary-650);
  }

  #back-to-top:focus {
    background-color: var(--clr-secondary-650);
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  #back-to-top {
    position: fixed;
    bottom: 21.5%;
    right: 2.4%;
    z-index: 99;
    font-size: 1rem;
    border: none;
    outline: none;
    background-color: var(--clr-secondary-650);
    color: var(--clr-homepage-card-bckgrd);
    cursor: pointer;
    padding: 0.938rem;
    border-radius: 12px;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.5s ease-in;
    /* Smooth transition for opacity */
  }

  #back-to-top:hover {
    background-color: var(--clr-primary-650);
  }

  #back-to-top:focus {
    background-color: var(--clr-secondary-650);
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  #back-to-top {
    position: fixed;
    bottom: 21.5%;
    right: 2.4%;
    z-index: 99;
    font-size: 1rem;
    border: none;
    outline: none;
    background-color: var(--clr-secondary-650);
    color: var(--clr-homepage-card-bckgrd);
    cursor: pointer;
    padding: 0.938rem;
    border-radius: 12px;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.5s ease-in;
    /* Smooth transition for opacity */
  }

  #back-to-top:hover {
    background-color: var(--clr-primary-650);
  }

  #back-to-top:focus {
    background-color: var(--clr-secondary-650);
  }
}

/** ---------------------end of BACK-TO-TOP function Style------------------- */


/* ////////////////////// */
/* /////////////////////// */
/* //////////////////////// */

/** ---------------------FOOTER------------------- */
/* This sections contains styles for the footer of the website */

:root {
  --width__footer: var(--width__always-fill);
  /* makes the width always full */
  --width__footer__section1-container: 99.08%;
  /* 74.31rem of parent = footer */
  --width__footer__section2-container: 99.08%;
  /* 74.31rem of parent = footer */
  --min-width__footer: 14.31rem;
  /* 228.96px */

  --padding-top__footer__section1-sub: 0.56rem;
  /* 9px = 0.56rem */
  --padding-bottom__footer__section1-sub: 0.56rem;
  /* 9px = 0.56rem */
  --padding-left__footer__section1-sub: 0;
  --padding-right__footer__section1-sub: 0;
}

/** ------General Layout-------- */

.footer {
  /* outline: 4px solid rgb(185, 202, 61); */

  background-color: var(--clr-bckgrd-btn-pri-default);
  color: var(--clr-neutral-white-2);
  width: 100%;
  max-width: var(--width__1440px);
  margin: 0 auto;
  text-align: center;
  padding: 3rem 3rem;

  /* to arrange section1 & section 2 */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;

  /* ////////////////// */
  border-top-left-radius: none;
  border-top-right-radius: none;

  @media screen and (width > 1440px) {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

.footer__section1-container {
  /* outline: 2px solid cyan; */

  width: var(--width__always-fill);
  max-width: var(--width__1440px);
  margin: 0 auto;
}

.footer-horizontal-line {
  width: var(--width__always-fill);
  max-width: var(--width__1440px);
  border: 1px solid;
  border-color: var(--clr-horizontal-line-200);
  margin: 20px auto;
}

.footer__section2-container {
  /* outline: 2px solid blue; */

  width: var(--width__always-fill);
  max-width: var(--width__1440px);
  margin: 0 auto;

  /** to arrange section2 items */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  /* //////////////////// */
  .copyright {
    /* outline: 2px solid grey; */
    text-align: center;
  }
}


/** ------Footer fonts & letterings----- */
.footer__section1__sub-heading {
  /* outline: 2px solid skyblue; */

  font-family: var(--ff-primary);
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  /* 700 */
  line-height: 40px;
  letter-spacing: 0.02em;
  text-align: left;
  color: var(--color-white-500);
}

.footer__list-text {
  /* outline: 2px solid red; */

  font-family: var(--ff-primary);
  font-size: var(--fs-800);
  font-weight: var(--fw-semi-bold);
  /* 700 */
  line-height: 2.5rem;
  /*40px*/
  letter-spacing: 2%;
  /*0.02em;*/
  text-align: left;
  white-space: nowrap;
}

.footer__other-text {
  /* outline: 2px solid red; */

  font-family: var(--ff-primary);
  font-size: var(--fs-800);
  /* 16px */
  font-weight: var(--fw-regular);
  line-height: 2rem;
  /*40px*/
  letter-spacing: 2%;
  /*0.02em;*/
  text-align: center;
}

.footer__list-text li {
  /* outline: 2px solid skyblue; */

  display: block;
  margin: 0 0 0.5rem 0;
}

/** (width <= 609px) */
@media screen and (width <=38em) {
  .footer__section1-container {
    /* outline: 2px solid green; */

    width: var(--width__footer__section1-container);
    max-width: var(--width__1200px);
    margin: 0 auto;

    /** to arrange section1 items */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;

    /* ///////////////////////// */
    .footer__section1-part1__container {
      /* outline: 2px solid gold; */

      /** to arrange section1-part1 items */
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      row-gap: 2rem;
    }

    /* ///////////////////////// */
    .footer__section1-part2__container {
      /* outline: 2px solid gold; */

      /** to arrange section1-part2 items */
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      row-gap: 2rem;
    }

    /* ///////////// */
    .socials__container {
      /* outline: 2px solid red; */

      padding: 1rem 0 0 0;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      gap: 0.7rem;

      /* /////////////// */
      .socials__link {
        /* outline: 2px solid white; */

        display: block;
      }

      /* ////////// */
      .socials__link-image {
        /* outline: 2px solid pink; */

        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: none;

        /* ////////// */
        &:hover {
          scale: 1.1;
        }
      }
    }

    /* //////////// */
    .footer__section1__sub-heading {
      /* outline: 2px solid skyblue; */

      font-size: var(--fs-600);
      text-align: center;

      /* //////////// */
      @media screen and (width <=320px) {
        font-size: var(--fs-700);
      }
    }

    /* ////////////// */
    .footer__list-text {
      /* outline: 2px solid red; */

      font-size: var(--fs-800);
      text-align: center;
      white-space: nowrap;

      /* //////////// */
      @media screen and (width <=320px) {
        font-size: var(--fs-800);
      }
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */
/*        */

/** (min-width > 609px ) & (max-width <= 860px) */
@media screen and (width > 38em) and (width <=53.75em) {
  .footer__section1-container {
    /* outline: 2px solid green; */

    width: var(--width__footer__section1-container);
    max-width: var(--width__1200px);
    margin: 0 auto;

    /** to arrange section1 items */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 4rem;

    /* ///////////////////////// */
    .footer__section1-part1__container {
      /* outline: 2px solid gold; */

      width: 100%;
      max-width: 600px;
      margin: 0 auto;

      /* to align company with contact us */
      padding: 0 5rem 0 0;

      /** to arrange section1-part1 items */
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
      column-gap: 6rem;
    }

    /* ///////////////////////// */
    .footer__section1-part2__container {
      /* outline: 2px solid gold; */

      width: 100%;
      max-width: 600px;
      margin: 0 auto;

      /** to arrange section1-part2 items */
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start;
      column-gap: 6rem;
    }

    /* ///////////// */
    .socials__container {
      /* outline: 2px solid red; */

      padding: 1rem 0 0 0;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      gap: 0.7rem;

      /* /////////////// */
      .socials__link {
        /* outline: 2px solid white; */

        display: block;
      }

      /* ////////// */
      .socials__link-image {
        /* outline: 2px solid pink; */

        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: none;

        /* ////////// */
        &:hover {
          scale: 1.1;
        }
      }
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */
/*        */

/** (min-width > 860px ) & (max-width <= 1200px) */
@media screen and (width > 53.75em) and (width <=75em) {
  .footer__section1-container {
    /* outline: 2px solid green; */

    width: var(--width__footer__section1-container);
    max-width: 792px;
    margin: 0 auto;

    /** to arrange section1 items */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 6rem;

    /* ///////////////////////// */
    .footer__section1-part1__container {
      /* outline: 2px solid gold; */

      /** to arrange section1-part1 items */
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      column-gap: 6rem;
    }

    /* ///////////////////////// */
    .footer__section1-part2__container {
      /* outline: 2px solid gold; */

      flex-basis: 25%;

      /** to arrange section1-part2 items */
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      row-gap: 6rem;
    }

    /* ///////////// */
    .socials__container {
      /* outline: 2px solid red; */

      padding: 1rem 0 0 0;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      gap: 0.7rem;

      /* /////////////// */
      .socials__link {
        /* outline: 2px solid white; */

        display: block;
      }

      /* ////////// */
      .socials__link-image {
        /* outline: 2px solid pink; */

        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: none;

        /* ////////// */
        &:hover {
          scale: 1.1;
        }
      }
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 1200px */
@media screen and (width > 75em) {
  .footer__section1-container {
    /* outline: 2px solid green; */

    width: var(--width__footer__section1-container);
    max-width: var(--width__1200px);
    margin: 0 auto;

    /** to arrange section1 items */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 6rem;

    /* ///////////////////////// */
    .footer__section1-part1__container {
      /* outline: 2px solid gold; */

      flex-basis: 42%;

      /** to arrange section1-part1 items */
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      column-gap: 8rem;
      row-gap: 4rem;
    }

    /* ///////////////////////// */
    .footer__section1-part2__container {
      /* outline: 2px solid gold; */

      flex-basis: 42%;

      /** to arrange section1-part2 items */
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
      column-gap: 8rem;
      row-gap: 4rem;
    }

    /* ///////////// */
    .socials__container {
      /* outline: 2px solid red; */

      padding: 1rem 0 0 0;

      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
      gap: 0.7rem;

      /* /////////////// */
      .socials__link {
        /* outline: 2px solid white; */

        display: block;
      }

      /* ////////// */
      .socials__link-image {
        /* outline: 2px solid pink; */

        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: none;

        /* ////////// */
        &:hover {
          scale: 1.1;
        }
      }
    }
  }
}

/** ---------------------end of FOOTER------------------- */

/* END OF joined-fixed-component.css */

/*        */
/*        */
/*        */
/*        */
/*        */

/* START OF 6-utility-classes.css */
/* this contains classes with already styled properties that you can just insert into your code */

/* ----padding & margin---- */
.pad-marg-0 {
	padding: 0;
	margin: 0;
}

.pad-0 {
	padding: 0;
}

.marg-0 {
	margin: 0;
}

.no-hover-effect-1 {
	&:hover {
		scale: 1;
		color: unset;
		background-color: unset;
	}
}

/** ---for horizontal lines--- */
.hr-horizontal-line {
	width: 100%;
	border: none;
	/* Remove the default line */
	border-top: 1px solid;
	border-color: var(--clr-horizontal-line-200);
	margin: 20px auto;
}

.div-horizontal-line {
	width: 100%;
	border: 1px solid;
	border-color: var(--clr-horizontal-line-200);
	margin: 20px auto;
}

/** -----SHADOWS------ */
.gen-shadow-01 {
	box-shadow: var(--gen-shadow-01);
}

.gen-shadow-02 {
	box-shadow: var(--gen-shadow-02);
}

.gen-shadow-03 {
	box-shadow: var(--gen-shadow-03);
}

.gen-shadow-04 {
	box-shadow: var(--gen-shadow-04);
}

.gen-shadow-05 {
	box-shadow: var(--gen-shadow-05);
}

.gen-shadow-06 {
	box-shadow: var(--gen-shadow-06);
}

.gen-shadow-header {
	box-shadow: var(--gen-shadow-header);
}

.gen-shadow-3d-01 {
	box-shadow: var(--gen-shadow-3d-01);
}

.gen-shadow-3d-02 {
	box-shadow: var(--gen-shadow-3d-02);
}

.thick-shadow {
	box-shadow: var(--thick-shadow);
}


/** ----STYLED CLASSES FOR LIST---- */
/* place this in the ul or ol...it will also work in li but it makes html look rough */
.list__no-style {
	list-style: none;
	list-style-type: none;
	text-decoration: none;
}

/** ----style for VISIBILITY---- */
.visible__no {
	visibility: hidden;
}

.visible__yes {
	visibility: visible;
}

/** Prevent text from wrapping */
.sentence__no-wrap {
	white-space: nowrap;
}

/** ------BUTTON with Arrow Style------ */
.link-to-button22 {
	display: inline-block;

	background-color: var(--clr-tertiary-200);
	color: var(--clr-pure-white);
	font-weight: var(--fw-bold);
	border: none;
	text-align: center;
	text-decoration: none;
	list-style-type: none;
	padding: 0.5rem 4rem;

	border: 1px solid var(--clr-pure-white);
	box-shadow: 0 10px 5px -4px var(--clr-tertiary-200);

	transition: all 0.1s ease-in-out;

	/* ///////////////////// */
	&:hover {
		/* border: 1px solid var(--clr-pure-white); */
		scale: 1.01;
		/* box-shadow: 0 5px 5px 0 var(--clr-tertiary-200); */
		/* transform: translateY(-2px); */
	}

	&:active {
		filter: brightness(200%);
		background-color: var(--clr-tertiary-200);
		transform: translateY(8px);
	}
}

.link-to-button {
	/* outline: 2px solid pink; */

	font-family: var(--ff-btn);
	font-weight: var(--fw-bold);
	font-size: var(--fs-700);
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	border: none;
	text-align: center;
	text-decoration: none;
	list-style-type: none;
	color: var(--clr-neutral-white-2);

	padding: 1rem 2rem;
	border-radius: 12px;
	cursor: pointer;
	border: 0.1px solid hsla(0, 0%, 0%, 0.1);
	box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
	box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
	box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
	box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
	box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

	background-color: var(--clr-tertiary-200);
	background-image: linear-gradient(150deg,
			var(--clr-primary-100),
			var(--clr-tertiary-200),
			var(--clr-tertiary-200),
			var(--clr-tertiary-200),
			var(--clr-tertiary-200),
			var(--clr-tertiary-200),
			var(--clr-tertiary-200));

	/* ////////////// */
	&:hover {
		transition: all 300ms ease-in-out;
	}

	/* /////////// */
	&:active {
		box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
		background-image: linear-gradient(150deg,
				var(--clr-tertiary-200));
		transform: translateY(8px);
		transition: all 150ms ease-in-out;
	}
}

.cta__btn {
	/* outline: 2px solid orange; */

	width: 100%;
	padding: 0.625rem 1.25rem;
	background-color: var(--clr-primary-650);
	color: var(--clr-neutral-white-01);

	font-family: var(--ff-primary);
	font-size: var(--fs__hero__cta__btn);
	font-weight: var(--fw-semi-bold);
	line-height: var(--lh-410);
	border-radius: 1.5rem;

	letter-spacing: normal;
	cursor: pointer;

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;

	&::after {
		content: "";
		display: inline-block;
		border: 2.5px solid var(--clr-neutral-white-01);
		padding: 0.3rem;
		margin-left: 1rem;
		vertical-align: baseline;

		transform: rotate(45deg);
		border-left: 0px;
		border-bottom: 0px;
	}
}

/** ---ANIMATION TEMPLATE--- */
.div-to-be-animated {
	/* input all these in the element you want to animate */

	/* name of animation */
	animation-name: animation;

	/* how long the animation will last */
	animation-duration: 10s;

	/* how long b4 animation starts */
	animation-delay: 1s;

	/* how many times the animation will run */
	animation-iteration-count: infinite;

	/* should it be played normal/reverse/alternate/alternate-reverse */
	animation-direction: normal;

	/* speed curve of animation */
	animation-timing-function: ease-in-out;

	/* the styles animation will apply when b4 it start/after it ends/both  */
	animation-fill-mode: none;

	/* this pause or play animation. you can use JS to do this or hover */
	animation-play-state: play;
}

@keyframes animation-name {
	0% {
		/* the style at start of animation */
	}

	50% {
		/* style at 50% of duration */
	}

	100% {
		/* style at end of animation */
	}
}

/** ---------------VISIBLE & HIDDEN on SCROLL------------- */
.hidden {
	opacity: 0;
	transform: translateY(100px);

	transition: opacity 0.5s ease, transform 1s ease;
}

.visible {
	opacity: 1;
	transform: translateY(0);
}

/** ----------------LINKS---------------- */
.link__text {
	/* outline: 2px solid red; */

	font-family: var(--ff-primary);
	font-weight: var(--fw-bold);
	font-size: var(--fs-800);
	letter-spacing: 2%;
	text-align: center;
	text-decoration: none;
	color: var(--clr-link-default);
}

/* Link Actions for White Background */
.link__actions-1 {
	display: block;
	text-decoration: none;
	/* Remove underline by default for links */
	padding: 0.1rem 1rem;
	border-radius: var(--link__border-radius);
	color: inherit;

	&:visited {
		color: var(--clr-link-visited);
		/* Change the color for visited links */
	}

	&:hover {
		color: var(--clr-link-hover);
		scale: 1.1;
	}

	&:active {
		color: var(--clr-link-active);
		filter: brightness(175%);
	}

	&:focus {
		outline: 1px solid var(--clr-link-focus);
		background-color: var(--clr-link-focus);
	}

	&:disabled {
		opacity: 0.6;
		/* Make the link semi-transparent to indicate it's disabled */
		pointer-events: none;
		/* Disable pointer events on the link */
	}

	&:target {
		background-color: var(--clr-link-target);
		/* Style the target of the link (e.g., section being linked to) */
	}
}

/* Link actions for Coloured Background */
.link__actions-2 {
	display: block;
	text-decoration: none;
	/* Remove underline by default for links */
	padding: 0.1rem 1rem;
	border-radius: var(--link__border-radius);
	color: var(--clr-link-default-2);

	&:visited {
		color: var(--clr-link-visited-2);
		/* Change the color for visited links */
	}

	&:hover {
		color: var(--clr-link-hover-2);
		text-decoration: none;
		scale: 1.05;
	}

	&:active {
		color: var(--clr-link-hover);
		filter: brightness(175%);
	}

	&:focus {
		outline: 1px solid var(--clr-link-focus-2);
		background-color: var(--clr-link-focus-2);
	}

	&:disabled {
		opacity: 0.6;
		/* Make the link semi-transparent to indicate it's disabled */
		pointer-events: none;
		/* Disable pointer events on the link */
	}

	&:target {
		background-color: var(--clr-link-target-2);
		/* Style the target of the link (e.g., section being linked to) */
	}
}

.link__action-3 {
	/* outline: 2px solid cyan; */

	display: block;
	padding: 0;
	text-decoration: none;
	border-radius: var(--link__border-radius);
	color: var(--clr-link-default-2);

	/* ////////////////// */
	&:hover {
		color: var(--clr-link-hover-2);
		scale: 1.04;
	}

	&:active {
		color: var(--clr-link-hover);
		filter: brightness(175%);
	}

	&:focus {
		opacity: 0.6;
	}

	&:disabled {
		opacity: 0.6;
		/* Make the link semi-transparent to indicate it's disabled */
		pointer-events: none;
		/* Disable pointer events on the link */
	}

	&:target {
		background-color: var(--clr-link-target-2);
		/* Style the target of the link (e.g., section being linked to) */
	}
}

.footer__links {
	/* outline: 2px solid cyan; */

	display: block;
	padding: 0;
	text-decoration: none;
	border-radius: var(--link__border-radius);
	color: var(--clr-link-default-2);

	/* ////////////////// */
	&:hover {
		color: var(--clr-link-hover-2);
		text-decoration: none;
		scale: 1.05;
	}

	&:active {
		color: var(--clr-link-hover);
		filter: brightness(175%);
	}

	&:focus {
		opacity: 0.6;
	}

	&:disabled {
		opacity: 0.6;
		/* Make the link semi-transparent to indicate it's disabled */
		pointer-events: none;
		/* Disable pointer events on the link */
	}

	&:target {
		background-color: var(--clr-link-target-2);
		/* Style the target of the link (e.g., section being linked to) */
	}
}

/* *to ANIMATE the underline of link text on hover */
.hover-underline-animation {
	display: inline-block;
	position: relative;
	color: var(--clr-secondary-650);
}

.hover-underline-animation::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--clr-tertiary-200);
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}


/** ----------------BUTTONS-------------------- */

.btn {
	font-family: var(--ff-btn);
	font-weight: var(--fw-semi-bold);
	line-height: var(--lh-300);

	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;

	border-radius: 12px;
	cursor: pointer;
	text-align: center;
}

/* ---------adding text-color & Background color to the buttons----------  */

/** ------Style for Primary Button----- */
.pri-btn {
	background-color: var(--clr-bckgrd-btn-pri-default);
	color: var(--clr-txt-btn);

	&:hover {
		background-color: var(--clr-bckgrd-btn-pri-hover);
	}

	&:active {
		background-color: var(--clr-bckgrd-btn-pri-pressed);
	}

	&:focus {
		background-color: var(--clr-bckgrd-btn-pri-focus);
	}

	&:disabled {
		background-color: var(--clr-bckgrd-btn-pri-disabled);
	}
}

/** ------Style for Secondary Button----- */
.sec-btn {
	background-color: var(--clr-bckgrd-btn-sec-default);
	color: var(--clr-txt-btn-sec);
	border: var(--clr-bd-btn-sec-default);

	&:hover {
		background-color: var(--clr-bckgrd-btn-sec-hover);
		color: var(--clr-txt-btn-sec);
		border: var(--clr-bd-btn-sec-default);
	}

	&:active {
		background-color: var(--clr-bckgrd-btn-sec-pressed);
		color: var(--clr-txt-btn-sec);
		border: var(--clr-bd-btn-sec-default);
	}

	&:focus {
		background-color: var(--clr-bckgrd-btn-sec-focus);
		color: var(--clr-txt-btn-sec);
		border: var(--clr-bd-btn-sec-default);
	}

	&:disabled {
		background-color: var(--clr-bckgrd-btn-sec-disabled);
		color: var(--clr-txt-btn-sec);
		border: var(--clr-bd-btn-sec-default);
	}
}

/* ------Style for Success Button----- */
.succ-btn {
	background-color: var(--clr-bckgrd-btn-succ-default);
	color: var(--clr-txt-btn);

	&:hover {
		background-color: var(--clr-bckgrd-btn-succ-hover);
	}

	&:active {
		background-color: var(--clr-bckgrd-btn-succ-pressed);
	}

	&:focus {
		background-color: var(--clr-bckgrd-btn-succ-focus);
	}

	&:disabled {
		background-color: var(--clr-bckgrd-btn-succ-disabled);
	}
}

/* ------Style for Warning Button----- */
.warn-btn {
	background-color: var(--clr-bckgrd-btn-warn-default);
	color: var(--clr-txt-btn);

	&:hover {
		background-color: var(--clr-bckgrd-btn-warn-hover);
	}

	&:active {
		background-color: var(--clr-bckgrd-btn-warn-pressed);
	}

	&:focus {
		background-color: var(--clr-bckgrd-btn-warn-focus);
	}

	&:disabled {
		background-color: var(--clr-bckgrd-btn-warn-disabled);
	}
}

/* ------Style for Error Button----- */
.error-btn {
	background-color: var(--clr-bckgrd-btn-error-default);
	color: var(--clr-txt-btn);

	&:hover {
		background-color: var(--clr-bckgrd-btn-error-hover);
	}

	&:active {
		background-color: var(--clr-bckgrd-btn-error-pressed);
	}

	&:focus {
		background-color: var(--clr-bckgrd-btn-error-focus);
	}

	&:disabled {
		background-color: var(--clr-bckgrd-btn-error-disabled);
	}
}

/* END OF 6-utility-classes.css */
/*  */
/*  */
/*  */
/*  */

/* START OF 10-carousel--swipper--custom-1.css */

/* contains styles for: carousel swiper*/

.testimonial__carousel__section {
  /* outline: 4px solid gold; */

  /* background-color: #d5e1ef; */
  background-color: transparent;
  /* background-image: linear-gradient(45deg,
      var(--clr-gradient-100),
      var(--clr-gradient-200)); */
  width: 100%;
  min-width: 250px;
  max-width: 1440px;
  margin: 0 auto;

  height: 100%;
}

.testimonial__carousel__container {
  /* outline: 4px solid black; */

  width: 100%;

  /* height == 100% of .testimonial__carousel__section */
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper {
  /* outline: 3px dashed brown; */

  width: 100%;
  /* padding: 2rem 0; */
  padding: 0;
}

.swiper-wrapper {
  outline: 2px solid transparent;

  /* width: 100%; */
  /* overflow: hidden; */
}

.swiper-slide {
  /* outline: 2px solid green; */

  padding-top: 3rem;

  /* center the .swiper-card within the .swiper-slide */
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}

.swiper-card {
  /* outline: 2px solid blue; */

  background-color: #f9fafe;
  opacity: 0.5;
  box-shadow: none;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: relative;

  transition: transform 700ms;
}

.client__quote__container {
  /* outline: 2px solid red; */

  overflow-x: hidden;
  overflow-y: hidden;
  width: 90%;
  max-width: 450px;
  margin: 0 auto;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}

.client__quote-icon {
  /* outline: 2px solid pink; */

  opacity: 0.09;
  position: absolute;
  top: 1%;
  left: 1%;
}

.client__quote {
  /* outline: 2px solid rebeccapurple; */

  align-self: center;
  width: 100%;
  font-family: "Poppins", sans-serif;
  text-align: center;
  color: #73808c;
}

.client__profile__container {
  /* outline: 2px solid yellowgreen; */

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.client__avatar {
  /* outline: 2px solid pink; */

  border: 5px solid #f9fafe;
}

.client__name-title__container {
  /* outline: 2px solid pink; */

  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

.client__review__name {
  font-family: "Hammersmith One", sans-serif;
  text-transform: none;
  white-space: nowrap;
}

.client__title {
  /* outline: 2px solid purple; */

  font-family: "Hammersmith One", sans-serif;
  text-transform: none;
  font-weight: 400;
  color: #7ccdc5;
  font-style: italic;
}

.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}

.swiper-button-next:focus,
.swiper-button-prev:focus {
  outline: none;
}

.swiper__scroll {
  /* outline: 2px solid lightsalmon; */

  border: 4px solid red;
}

.pagination__container {
  /* outline: 1px solid black; */

  position: relative !important;

  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination {
  /* outline: 2px dashed skyblue; */

  position: unset !important;

}

/* *Javascript influenced classes */
.swiper-slide-active {
  z-index: 1;
  margin-top: 1rem;

}

.swiper-slide-active .swiper-card {
  box-shadow: 0 8px 30px -7px #c9dff0;
  opacity: 1;
  transform: scale(1.4);
}

/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .swiper-card {
    /* outline: 2px solid blue; */

    /* will change with screen size */
    /* make min-width <= 100px to avoid overlap */
    min-width: 95px;

    height: 300px;

    border-radius: 10px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;

    row-gap: 0.8rem;
  }

  .swiper-slide-active .swiper-card {
    padding-bottom: 1rem;

    /* //////////////// */
    @media screen and (width <=350px) {
      min-width: 200px;

      /* max-height: 300px; */
      min-height: 300px;

      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    /* //////////////// */
    @media screen and (width > 350px) and (width <=500px) {
      min-width: 230px;
      max-width: 320px;

      min-height: 300px;

      padding-left: 0.6rem;
      padding-right: 0.6rem;
    }
  }

  .client__quote-icon {
    /* outline: 2px solid pink; */

    /* will change with screen size */
    width: 20%;
    height: 30px;

    top: 3%;
    left: 0%;
  }

  .swiper-slide-active .client__quote-icon {
    /* outline: 2px solid red; */

    /* //////////////// */
    @media screen and (width <=350px) {
      width: 20%;
      height: 20px;

      top: 3%;
      left: 0%;
    }

    /* //////////////// */
    @media screen and (width > 350px) and (width <=500px) {
      width: 15%;
      height: 20px;

      top: 3%;
      left: 0%;
    }
  }

  .client__quote {
    /* outline: 2px solid rebeccapurple; */

    /* will change with screen size */
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .client__profile__container {
    /* outline: 2px solid yellowgreen; */

    /* will change with screen size */
    column-gap: 0.2rem;
  }

  .client__avatar {
    /* outline: 2px solid pink; */

    /* will change with screen size */
    width: 50px;
    height: 50px;
    border-radius: 40px;
    border: 5px solid #f9fafe;
    box-shadow: 0 0 50px #ccc;
  }

  .client__name-title__container {
    /* outline: 2px solid pink; */

    row-gap: 0rem;
  }

  .client__review__name {
    /* will change with screen size */
    font-size: 0.8rem;
    line-height: 1.0;
  }

  .client__title {
    /* outline: 2px solid purple; */

    /* will change with screen size */
    font-size: 0.6rem;
    line-height: 1.0;
  }

  .pagination__container {
    /* outline: 1px solid black; */

    margin-top: 4rem;
    margin-bottom: 0.5rem;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.68em) {
  .swiper-card {
    /* outline: 2px solid blue; */

    /* will change with screen size */
    /* make min-width < 200px to avoid overlaps */
    min-width: 170px;
    max-width: 500px;
    margin: 0 auto;

    border-radius: 10px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;

    row-gap: 0.8rem;

    /* //////////////// */
    @media screen and (width > 500px) and (width <=650px) {
      height: 300px;
    }

    /* //////////////// */
    @media screen and (width > 650px) and (width <=875px) {
      height: 250px;
    }
  }

  .swiper-slide-active .swiper-card {
    /* outline: 2px solid green; */

    padding-top: 1rem;
    padding-bottom: 1rem;

    /* //////////////// */
    @media screen and (width > 500px) and (width <=650px) {
      min-width: 50dvw;
      max-width: 500px;
      margin: 0 auto;

      height: 300px;
      max-height: 350px;
    }

    /* //////////////// */
    @media screen and (width > 650px) and (width <=875px) {
      min-width: 50dvw;
      max-width: 500px;
      margin: 0 auto;

      height: 250px;
      max-height: 300px;
    }
  }

  .client__quote-icon {
    /* outline: 2px solid pink; */

    /* will change with screen size */
    width: 25px;
    height: 40px;
  }

  .client__quote {
    /* outline: 2px solid rebeccapurple; */

    /* will change with screen size */
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .client__profile__container {
    /* outline: 2px solid yellowgreen; */

    /* will change with screen size */
    column-gap: 0.5rem;
  }

  .client__avatar {
    /* outline: 2px solid pink; */

    /* will change with screen size */
    width: 60px;
    height: 60px;
    border-radius: 60px;
    border: 5px solid #f9fafe;
    box-shadow: 0 0 50px #ccc;
  }

  .client__name-title__container {
    /* outline: 2px solid pink; */

    row-gap: 0.1rem;
  }

  .client__review__name {
    /* will change with screen size */
    font-size: 0.8rem;
    line-height: 1.0;
  }

  .client__title {
    /* outline: 2px solid purple; */

    /* will change with screen size */
    font-size: 0.6rem;
    line-height: 1.0;
  }

  .pagination__container {
    /* outline: 1px solid black; */

    margin-top: 4rem;
    margin-bottom: 0.5rem;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Desktop/Laptop Screens > 875px and <= 1400px */
@media screen and (width > 54.68em) and (width <=87.5em) {
  .swiper-card {
    /* outline: 2px solid blue; */

    /* will change with screen size */
    /* make min-width < 250px to avoid overlaps */
    min-width: 250px;
    max-width: 600px;

    /* min-height: 20dvh; */
    height: 250px;

    border-radius: 10px;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;

    row-gap: 1rem;
  }

  .swiper-slide-active .swiper-card {
    /* outline: 2px solid red; */

    /* //////////////// */
    @media screen and (width > 875px) and (width <=1000px) {
      min-width: 400px;
      max-width: 550px;
      margin: 0 auto;

      /* min-height: 35dvh; */
      min-height: 250px;
      max-height: 300px;
    }

    /* //////////////// */
    @media screen and (width > 1000px) and (width <=1400px) {
      min-width: 400px;
      max-width: 500px;
      margin: 0 auto;

      /* min-height: 20dvh; */
      min-height: 250px;
      max-height: 300px;
    }
  }

  .client__quote-icon {
    /* outline: 2px solid pink; */

    /* will change with screen size */
    width: 35px;
    height: 40px;
  }

  .swiper-slide-active .client__quote-icon {
    /* outline: 2px solid red; */

    /* //////////////// */
    @media screen and (width <=1000px) {
      width: 35px;
      height: 40px;

      top: 1%;
      left: 0%;
    }

    /* //////////////// */
    @media screen and (width > 1000px) and (width <=1400px) {
      width: 35px;
      height: 40px;

      top: 1%;
      left: 0%;
    }
  }

  .client__quote {
    /* outline: 2px solid rebeccapurple; */

    /* will change with screen size */
    font-size: 1rem;
    line-height: 1.5;
  }

  .client__profile__container {
    /* outline: 2px solid yellowgreen; */

    /* will change with screen size */
    column-gap: 0.5rem;
  }

  .client__avatar {
    /* outline: 2px solid pink; */

    /* will change with screen size */
    width: 60px;
    height: 60px;
    border-radius: 60px;
    border: 5px solid #f9fafe;
    box-shadow: 0 0 50px #ccc;
  }

  .client__name-title__container {
    /* outline: 2px solid pink; */

    row-gap: 0.1rem;
  }

  .client__review__name {
    /* will change with screen size */
    font-size: 1rem;
    line-height: 1.0;
  }

  .client__title {
    /* outline: 2px solid purple; */

    /* will change with screen size */
    font-size: 0.8rem;
    line-height: 1.0;
  }

  .pagination__container {
    /* outline: 1px solid black; */

    margin-top: 4rem;
    margin-bottom: 0.5rem;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Large Desktop Screens > 1400px */
@media screen and (width > 87.5em) {
  .swiper-card {
    /* outline: 2px solid blue; */

    /* will change with screen size */
    /* min-width: 350px; */
    max-width: 600px;
    height: 300px;

    border-radius: 10px;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;

    row-gap: 1rem;
  }

  .swiper-slide-active .swiper-card {
    /* outline: 2px solid pink; */

    min-width: 450px;
    max-width: 500px;
    margin: 0 auto;

    min-height: 300px;
    max-height: 350px;
  }

  .client__quote-icon {
    /* outline: 2px solid pink; */

    /* will change with screen size */
    width: 35px;
    height: 40px;
  }

  .client__quote {
    /* outline: 2px solid rebeccapurple; */

    /* will change with screen size */
    font-size: 1.2rem;
    line-height: 1.5;
  }

  .client__profile__container {
    /* outline: 2px solid yellowgreen; */

    /* will change with screen size */
    column-gap: 0.5rem;
  }

  .client__avatar {
    /* outline: 2px solid pink; */

    /* will change with screen size */
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 5px solid #f9fafe;
    box-shadow: 0 0 50px #ccc;
  }

  .client__name-title__container {
    /* outline: 2px solid pink; */

    row-gap: 0.2rem;
  }

  .client__review__name {
    /* will change with screen size */
    font-size: 1.2rem;
    line-height: 1.0;
  }

  .client__title {
    /* outline: 2px solid purple; */

    /* will change with screen size */
    font-size: 0.8rem;
    line-height: 1.0;
  }

  .pagination__container {
    /* outline: 1px solid black; */

    margin-top: 4rem;
    margin-bottom: 1rem;
  }
}

/* END OF 10-carousel--swipper--custom-1.css */
/*  */
/*  */
/*  */
/*  */

/* START OF 2-hero__investment.css */
/* contains styles for INVESTMENT PAGE: */
/* HERO SECTION */

/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .fund-hero__section {
    /* outline: 4px solid orange; */

    width: 100%;
    padding-bottom: 8rem;
  }

  .fund-hero__container {
    /* outline: 4px solid blue; */

    width: 100%;
  }

  .fund-hero__image__container {
    /* outline: 2px solid red; */

    width: 100%;
    padding-bottom: 2rem;

    /* //////////////////// */
    .fund-hero__image__pic {
      /* outline: 2px solid green; */

      width: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
    }
  }

  .fund-hero__content__container {
    /* outline: 2px solid pink; */

    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 1rem;

    padding: 0 0.5rem;
  }

  .fund-hero__content__header {
    /* outline: 2px solid orange; */

    font-family: var(--ff-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-tertiary-200);
  }

  .fund-hero__content__text__container {
    /* outline: 2px solid green; */

    width: 100%;
    max-width: fit-content;
    margin-bottom: 1.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;

    padding: 0.8rem 1.2rem;
    border-radius: 30px;
    border: none;
    background-color: var(--clr-tertiary-200);
    background-image: linear-gradient(45deg,
        var(--clr-tertiary-200),
        var(--clr-primary-200),
        var(--clr-tertiary-200),
        var(--clr-tertiary-200),
        var(--clr-tertiary-200),
        var(--clr-primary-200));

    /* /////////// */
    @media screen and (width <=352px) {
      padding: 0.6rem 1rem;
      border-radius: 20px;
    }
  }

  .fund-hero__content__text {
    /* outline: 2px solid black; */

    width: 100%;

    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-800);
    line-height: 1.3;
    text-transform: none;
    text-align: center;
    color: var(--clr-neutral-white-2);
    border-radius: 30px;
    border: none;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .fund-hero__section {
    /* outline: 4px solid orange; */

    padding-bottom: 10rem;
    width: 100%;
  }

  .fund-hero__container {
    /* outline: 4px solid blue; */

    width: 100%;
  }

  .fund-hero__image__container {
    /* outline: 2px solid red; */

    width: 100%;
    padding-bottom: 2rem;

    /* //////////////////// */
    .fund-hero__image__pic {
      /* outline: 2px solid green; */

      width: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
    }
  }

  .fund-hero__content__container {
    /* outline: 2px solid pink; */

    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 1rem;
  }

  .fund-hero__content__header {
    /* outline: 2px solid orange; */

    font-family: var(--ff-primary);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-550);
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-tertiary-200);
  }

  .fund-hero__content__text__container {
    /* outline: 2px solid green; */

    width: 100%;
    max-width: fit-content;
    margin-bottom: 2rem;
    margin-left: 1rem;
    margin-right: 1rem;

    padding: 0.8rem 1.2rem;
    border-radius: 30px;
    border: none;
    background-color: var(--clr-tertiary-200);
    background-image: linear-gradient(45deg,
        var(--clr-tertiary-200),
        var(--clr-primary-200),
        var(--clr-tertiary-200),
        var(--clr-tertiary-200),
        var(--clr-tertiary-200),
        var(--clr-primary-200));
  }

  .fund-hero__content__text {
    /* outline: 2px solid black; */

    width: 100%;

    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-600);
    line-height: 1.3;
    text-transform: none;
    text-align: center;
    color: var(--clr-neutral-white-2);
    border-radius: 30px;
    border: none;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {

  .fund-hero__section {
    /* outline: 4px solid orange; */

    width: 100%;
    /* max-width: var(--width__1440px);
    margin: 0 auto; */
    padding-bottom: 12rem;
  }

  .fund-hero__container {
    /* outline: 4px solid blue; */

    width: 100%;
  }

  .fund-hero__image__container {
    /* outline: 2px solid red; */

    width: 100%;
    padding-bottom: 4rem;

    /* //////////////////// */
    .fund-hero__image__pic {
      /* outline: 2px solid green; */

      width: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: center;
    }
  }

  .fund-hero__content__container {
    /* outline: 2px solid pink; */

    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    row-gap: 1rem;
  }

  .fund-hero__content__header {
    /* outline: 2px solid orange; */

    font-family: var(--ff-primary);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-400);
    line-height: 1.3;
    letter-spacing: -3%;
    text-transform: capitalize;
    text-align: center;
    color: var(--clr-tertiary-200);
  }

  .fund-hero__content__text__container {
    /* outline: 2px solid indigo; */

    width: 100%;
    max-width: 500px;
    margin-bottom: 2rem;

    padding: 0.8rem 1rem;
    border-radius: 30px;
    border: none;
    background-color: var(--clr-tertiary-200);
    background-image: linear-gradient(45deg,
        var(--clr-tertiary-200),
        var(--clr-primary-200),
        var(--clr-tertiary-200),
        var(--clr-tertiary-200),
        var(--clr-tertiary-200),
        var(--clr-primary-200));
  }

  .fund-hero__content__text {
    /* outline: 2px solid black; */

    width: 100%;

    font-family: var(--ff-primary);
    font-weight: var(--fw-regular);
    font-size: var(--fs-600);
    line-height: 1.3;
    text-transform: none;
    text-align: center;
    color: var(--clr-neutral-white-2);
    border-radius: 30px;
    border: none;
  }
}

/* END OF 2-hero__investment.css */
/*  */
/*  */
/*  */
/*  */

/* START OF 3-body-testimonials__investments.css */
/* this file contains code that style the testimonial section of the homepage of the website */

/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {

	/* /////////// */
	:root {
		--m-background-clr__testimonial-card: var(--clr-gen-website-bckgrd);
		--m-width__testimonial-card: 25.8rem;
		/* 413px */

		--m-fs-testimonial-client-words: var(--fs-800);
		--m-ls__testimonial-client-words: calc(0.02 * var(--m-fs-testimonial-client-words));
		/* 2% --used fs*/

		--m-fs-testimonial-client-name: var(--fs-700);
		--m-ls__testimonial-client-name: calc(0.02 * var(--m-fs-testimonial-client-name));
		/* 2% --used fs*/
	}

	/* ////////////// */

	.testimonial__section {
		/* outline: 4px solid gold; */

		width: 100%;
		padding-bottom: 8rem;
	}

	.testimonial__container {
		/* outline: 3px solid green; */

		width: 100%;
		padding: 2rem 0;
		background-image: linear-gradient(45deg,
				var(--clr-gradient-100),
				var(--clr-gradient-200));
	}

	.testimonial__header {
		/* outline: 2px solid red; */

		padding: 0 1rem 2rem 1rem;

		font-family: var(--ff-primary);
		font-weight: var(--fw-bold);
		font-size: var(--fs-600);
		line-height: 1.3;
		letter-spacing: 0em;
		text-align: center;
		color: var(--clr-secondary-650);
		text-transform: capitalize;

		/* /////////////// */
		@media screen and (width <=350px) {
			width: 100%;
			padding: 0 1rem 2rem 1rem;
			font-size: var(--fs-700);
		}
	}

	/* ////////////////////////// */
	/* ////////////////////////// */
	/** TESTIMONIAL CAROUSEL STYLES */
	.testimonial-carousel__container {
		/* outline: 2px solid red; */

		width: 100%;

		position: relative;
	}

	.testimonial-carousel__scroll {
		/* outline: 2px solid pink; */

		/* not needed cos the arrows are positioned */
		padding: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;

		/* ///////////// */
		.arrow-circle {
			display: block;
			background-color: var(--clr-secondary-650);
			border: none;
			height: 40px;
			width: 40px;
			border-radius: 50%;
			cursor: pointer;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		/* /////////// */
		.testimonial-carousel__scroll-right {
			/* outline: 2px solid purple; */

			position: absolute;
			top: 40%;
			right: 1%;
			z-index: 10;
			opacity: 0.4;

			/* //////////////// */
			&:hover {
				.right-arrow {
					border-color: var(--clr-primary-200);
				}

				opacity: 0.8;
			}

			/* //////////////// */
			&:active {
				transform: translateX(4px);
			}
		}

		/* ///////////// */
		.testimonial-carousel__scroll-left {
			/* outline: 2px solid purple; */

			position: absolute;
			top: 40%;
			left: 1%;
			z-index: 10;
			opacity: 0.4;

			/* //////////////// */
			&:hover {
				.left-arrow {
					border-color: var(--clr-primary-200);
				}

				opacity: 0.8;
			}

			/* //////////////// */
			&:active {
				transform: translateX(-4px);
			}
		}

		/* /////////////// */
		.right-arrow {
			border: 4px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 1rem 1rem 0.5rem;

			transform: rotate(45deg);
			border-left: none;
			border-bottom: none;
		}

		/* /////////////// */
		.left-arrow {
			border: 4px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 0.5rem 1rem 1rem;

			transform: rotate(45deg);
			border-right: none;
			border-top: none;
		}
	}

	.testimonial-carousel-card__container {
		/* outline: 3px dashed gray; */

		width: 100%;
		margin: 0 auto;

		overflow: hidden;

		/* to prevent the height of .testimonial-carousel
		from changing */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}

	.testimonial-carousel {
		/* outline: 2px dashed lightsalmon; */

		transition: margin-left 1500ms ease-in-out;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 1rem;

		/** to ensure there is a full testimonial always in view */
		margin-left: 440px;

		/* //////////// */
		@media screen and (width <=345px) {
			/* margin-left: calc(2 * (10dvw / 1 - (30dvw * 0.9 + 1 * 1rem)) + 20dvw / -1 + (30dvw * 0.9 + 1 * 1rem) / -1); */
			flex-grow: 0;
			flex-shrink: 4;
			margin-left: 310px;
		}

		/* //////////// */
		@media screen and (width > 345px) and (width <=450px) {
			/* margin-left: calc(2 * (5dvw / 1 - (80dvw * 0.9 + 1 * 1rem)) + 90dvw / -1 + (80dvw * 0.77 + 1 * 1rem) / -1); */
			flex-grow: 0;
			flex-shrink: 2;
			margin-left: 310px;
		}

		/* //////////// */
		@media screen and (width > 450px) and (width <=500px) {
			/* margin-left: calc(2 * (5dvw / 1 - (80dvw * 0.9 + 1 * 1rem)) + 60dvw / -1 + (80dvw * 0.77 + 1 * 1rem) / -1); */
			flex-grow: 0;
			flex-shrink: 0;
			margin-left: 430px;
		}
	}

	.testimonial-carousel.noanimate {
		transition: margin-left 1500ms ease-in-out;
	}

	/* ////////////////// */
	/** Testimonial Card design */
	/* ///////////////////// */

	.testimonial-carousel__card {
		/* outline: 2px solid magenta; */

		/* makes the cards same width and the width is constant */
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 35%;
		/* max-width: 35%; */

		padding: 1.5rem 1.25rem;
		border-radius: 0.625rem;
		background-color: var(--m-background-clr__testimonial-card);

		max-width: var(--m-width__testimonial-card);

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		row-gap: 1.5rem;

		/* ////////////////// */
		.testimonial-card__client-words {
			/* outline: 2px solid black; */

			font-family: var(--ff-primary);
			font-weight: var(--fw-regular);
			font-size: var(--m-fs-testimonial-client-words);
			line-height: var(--lh-500);
			letter-spacing: var(--m-ls__testimonial-client-words);
			text-align: center;
			color: var(--clr-primary-650);
		}

		/* /////////////////////// */
		.testimonial-card__client-details {
			/* outline: 2px solid black; */

			width: 100%;

			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			justify-content: center;
			align-items: center;
			column-gap: 0.8rem;
			row-gap: 0.3rem;

			/* /////////////////////// */
			.testimonial-card__client-image__container {
				/* outline: 2px solid pink; */

				border-radius: 50%;

				/* ///////// */
				.testimonial-card__client-image {
					outline: 2px solid black;

					width: 70px;
					height: 70px;
					border-radius: 50%;
				}
			}

			/* ////////////////////////// */
			.testimonial-card__client-name {
				font-family: var(--ff-primary);
				font-weight: var(--fw-bold);
				font-size: var(--m-fs-testimonial-client-name);
				line-height: var(--lh-500);
				line-height: normal;
				text-align: center;
				color: var(--clr-secondary-650);
			}
		}
	}
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {

	/* ///////////// */
	:root {
		--t-background-clr__testimonial-card: var(--clr-gen-website-bckgrd);
		--t-width__testimonial-card: 25.8rem;
		/* 413px */

		--t-fs-testimonial-client-words: var(--fs-700);
		--t-ls__testimonial-client-words: calc(0.02 * var(--t-fs-testimonial-client-words));
		/* 2% --used fs*/

		--t-fs-testimonial-client-name: var(--fs-500);
		--t-ls__testimonial-client-name: calc(0.02 * var(--t-fs-testimonial-client-name));
		/* 2% --used fs*/
	}

	/* //////////////// */

	.testimonial__section {
		/* outline: 4px solid gold; */

		width: 100%;
		padding-bottom: 10rem;
	}

	.testimonial__container {
		/* outline: 3px solid green; */

		width: 100%;
		padding: 4rem 0;
		background-image: linear-gradient(45deg,
				var(--clr-gradient-100),
				var(--clr-gradient-200));
	}

	.testimonial__header {
		/* outline: 2px solid red; */

		padding: 0 0 1rem 0;

		font-family: var(--ff-primary);
		font-weight: var(--fw-bold);
		font-size: var(--fs-500);
		line-height: 1.3;
		letter-spacing: 0em;
		text-align: center;
		color: var(--clr-secondary-650);
		text-transform: capitalize;
	}

	/* ////////////////////////// */
	/* ////////////////////////// */
	/** TESTIMONIAL CAROUSEL STYLES */
	.testimonial-carousel__container {
		/* outline: 2px solid red; */

		width: 100%;

		position: relative;
	}

	.testimonial-carousel__scroll {
		/* outline: 2px solid pink; */

		/* not needed cos the arrows are positioned */
		padding: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;

		/* ///////////// */
		.arrow-circle {
			display: block;
			background-color: var(--clr-secondary-650);
			border: none;
			height: 50px;
			width: 50px;
			border-radius: 50%;
			cursor: pointer;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		/* /////////// */
		.testimonial-carousel__scroll-right {
			/* outline: 2px solid purple; */

			position: absolute;
			top: 40%;
			right: 1%;
			z-index: 10;
			opacity: 0.4;

			/* //////////////// */
			&:hover {
				.right-arrow {
					border-color: var(--clr-primary-200);
				}

				opacity: 0.8;
			}

			/* //////////////// */
			&:active {
				transform: translateX(4px);
			}
		}

		/* ///////////// */
		.testimonial-carousel__scroll-left {
			/* outline: 2px solid purple; */

			position: absolute;
			top: 40%;
			left: 1%;
			z-index: 10;
			opacity: 0.4;

			/* //////////////// */
			&:hover {
				.left-arrow {
					border-color: var(--clr-primary-200);
				}

				opacity: 0.8;
			}

			/* //////////////// */
			&:active {
				transform: translateX(-4px);
			}
		}

		/* /////////////// */
		.right-arrow {
			border: 4px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 1rem 1rem 0.5rem;

			transform: rotate(45deg);
			border-left: none;
			border-bottom: none;
		}

		/* /////////////// */
		.left-arrow {
			border: 4px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 0.5rem 1rem 1rem;

			transform: rotate(45deg);
			border-right: none;
			border-top: none;
		}
	}

	.testimonial-carousel-card__container {
		/* outline: 3px dashed gray; */

		width: 100%;
		max-width: 100vw;
		margin: 0 auto;

		overflow: hidden;

		/* to prevent the height of .testimonial-carousel
		from changing */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
	}

	.testimonial-carousel {
		/* outline: 4px solid lightsalmon; */

		flex-grow: 0;
		flex-shrink: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;

		/** to ensure there is a full testimonial always in view */
		/* //////////// */
		@media screen and (width > 500px) and (width <=650px) {
			/* margin-left: calc(2 * (25dvw / 2 - (95dvw * 0.7 + 2 * 2rem)) + 95dvw / -2 + (95dvw * 0.55 + 2 * 2rem) / -1); */
			margin-left: 445px;
		}

		/* //////////// */
		@media screen and (width > 650px) and (width <=875px) {
			/* margin-left: calc(2 * (70dvw / 2 - (95dvw * 0.7 + 2 * 2rem)) + 95dvw / -2 + (95dvw * 0.55 + 2 * 2rem) / -1); */
			margin-left: 445px;
		}

		transition: margin-left 1500ms ease-in-out;

	}

	.testimonial-carousel.noanimate {
		transition: margin-left 1500ms ease-in-out;
	}

	/* ////////////////// */
	/** Testimonial Card design */
	/* ///////////////////// */

	.testimonial-carousel__card {
		/* outline: 2px solid magenta; */

		/* makes the cards same width and the width is constant */
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 35%;
		max-width: 35%;

		padding: 1.5rem 1.25rem;
		border-radius: 0.625rem;
		background-color: var(--t-background-clr__testimonial-card);

		max-width: var(--t-width__testimonial-card);

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		row-gap: 1.5rem;

		/* ////////////////// */
		.testimonial-card__client-words {
			/* outline: 2px solid black; */

			font-family: var(--ff-primary);
			font-weight: var(--fw-regular);
			font-size: var(--t-fs-testimonial-client-words);
			line-height: var(--lh-500);
			letter-spacing: var(--t-ls__testimonial-client-words);
			text-align: left;
			color: var(--clr-primary-650);
		}

		/* /////////////////////// */
		.testimonial-card__client-details {
			/* outline: 2px solid black; */

			width: 100%;

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			column-gap: 0.8rem;

			/* /////////////////////// */
			.testimonial-card__client-image__container {
				/* outline: 2px solid pink; */

				border-radius: 50%;

				/* ///////// */
				.testimonial-card__client-image {
					outline: 2px solid black;

					width: 70px;
					height: 70px;
					border-radius: 50%;
				}
			}

			/* ////////////////////////// */
			.testimonial-card__client-name {
				font-family: var(--ff-primary);
				font-weight: var(--fw-bold);
				font-size: var(--t-fs-testimonial-client-name);
				line-height: var(--lh-500);
				line-height: normal;
				text-align: left;
				color: var(--clr-secondary-650);
			}
		}
	}
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {

	/* ///////////// */
	:root {
		--d-background-clr__testimonial-card: var(--clr-gen-website-bckgrd);
		--d-width__testimonial-card: 25.8rem;
		/* 413px */

		--d-fs-testimonial-client-words: var(--fs-700);
		--d-ls__testimonial-client-words: calc(0.02 * var(--d-fs-testimonial-client-words));
		/* 2% --used fs*/

		--d-fs-testimonial-client-name: var(--fs-500);
		--d-ls__testimonial-client-name: calc(0.02 * var(--d-fs-testimonial-client-name));
		/* 2% --used fs*/
	}

	/* //////////////// */

	.testimonial__section {
		/* outline: 4px solid gold; */

		width: 100%;
		max-width: var(--width__1440px);
		margin: 0 auto;
		padding-bottom: 12rem;
	}

	.testimonial__container {
		/* outline: 4px solid green; */

		width: 100%;
		padding: 4rem 0;
		background-image: linear-gradient(45deg,
				var(--clr-gradient-100),
				var(--clr-gradient-200));
	}

	.testimonial__header {
		/* outline: 2px solid red; */

		padding: 0;

		font-family: var(--ff-primary);
		font-weight: var(--fw-bold);
		font-size: var(--fs-400);
		line-height: 1.3;
		letter-spacing: 0em;
		text-align: center;
		color: var(--clr-secondary-650);
		text-transform: capitalize;
	}

	/* ////////////////////////// */
	/** TESTIMONIAL CAROUSEL STYLES */
	/* ////////////////////////// */
	.testimonial-carousel__container {
		/* outline: 2px solid red; */

		width: 100%;
		overflow: hidden;
	}

	.testimonial-carousel__scroll {
		/* outline: 2px solid pink; */

		padding: 1rem 0 1rem 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;

		/* ///////////// */
		.arrow-circle {
			display: block;
			background-color: var(--clr-secondary-650);
			border: none;
			height: 50px;
			width: 50px;
			border-radius: 50%;
			cursor: pointer;

			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		/* /////////// */
		.testimonial-carousel__scroll-right {
			/* outline: 2px solid purple; */

			/* //////////////// */
			&:hover {
				.right-arrow {
					border-color: var(--clr-neutral-white-2);
					/* border-width: 3px; */
				}
			}

			/* //////////////// */
			&:active {
				transform: translateX(4px);
			}
		}

		/* ///////////// */
		.testimonial-carousel__scroll-left {
			/* outline: 2px solid purple; */

			/* //////////////// */
			&:hover {
				.left-arrow {
					border-color: var(--clr-neutral-white-2);
					border-width: 3px;
				}
			}

			/* //////////////// */
			&:active {
				transform: translateX(-4px);
			}
		}

		/* /////////////// */
		.right-arrow {
			border: 2px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 1rem 1rem 0.5rem;

			transform: rotate(45deg);
			border-left: none;
			border-bottom: none;
		}

		/* /////////////// */
		.left-arrow {
			border: 2px solid var(--clr-primary-650);
			padding: 0.5rem;
			margin: 1rem 0.5rem 1rem 1rem;


			transform: rotate(45deg);
			border-right: none;
			border-top: none;
		}
	}

	.testimonial-carousel-card__container {
		/* outline: 4px dotted gray; */

		width: 100%;
		/* max-width: 1300px; */
		max-width: 80vw;
		margin: 0 auto;
		border-radius: 0 0.625rem 0.625rem 0;

		overflow: hidden;

		/* to prevent the height of .testimonial-carousel
		from changing */
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;


		@media screen and (width >=1300px) {
			border-radius: 0.625rem;
		}
	}

	.testimonial-carousel {
		/* outline: 4px solid lightsalmon; */

		flex-grow: 0;
		flex-shrink: 0;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		column-gap: 2rem;
		width: 100%;

		/* margin-left: calc(2 * (60dvw / 2 - (80dvw * 0.28 + 2 * 2rem)) + 80dvw / -2 + (80dvw * 0.28 + 2 * 2rem) / -1); */
		margin-left: 2px;

		/* //////////// */
		@media screen and (width > 875px) and (width <=1270px) {
			margin-left: 481px;
		}

		/* //////////// */
		@media screen and (width > 1270px) {
			margin-left: 2px;
		}

		transition: margin-left 1500ms ease-in-out;
	}

	.testimonial-carousel.noanimate {
		transition: margin-left 1500ms ease-out;
	}

	/* ////////////////// */
	/** Testimonial Card design */
	/* ///////////////////// */

	.testimonial-carousel__card {
		/* outline: 2px solid magenta; */

		/* makes the cards same width and the width is constant */
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 35%;
		max-width: 35%;
		min-width: 450px;

		padding: 1.5rem 1.25rem;
		border-radius: 0.625rem;
		background-color: var(--d-background-clr__testimonial-card);

		max-width: var(--d-width__testimonial-card);

		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		row-gap: 1.5rem;

		/* ////////////////// */
		.testimonial-card__client-words {
			/* outline: 2px solid black; */

			font-family: var(--ff-primary);
			font-weight: var(--fw-regular);
			font-size: var(--d-fs-testimonial-client-words);
			line-height: var(--lh-500);
			letter-spacing: var(--d-ls__testimonial-client-words);
			text-align: left;
			color: var(--clr-primary-650);
		}

		/* /////////////////////// */
		.testimonial-card__client-details {
			/* outline: 2px solid black; */

			width: 100%;

			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			column-gap: 0.8rem;

			/* /////////////////////// */
			.testimonial-card__client-image__container {
				/* outline: 2px solid pink; */

				border-radius: 50%;

				/* ///////// */
				.testimonial-card__client-image {
					outline: 2px solid black;

					width: 100px;
					height: 100px;
					border-radius: 50%;
				}
			}

			/* ////////////////////////// */
			.testimonial-card__client-name {
				font-family: var(--ff-primary);
				font-weight: var(--fw-bold);
				font-size: var(--d-fs-testimonial-client-name);
				line-height: var(--lh-500);
				text-align: left;
				color: var(--clr-secondary-650);
			}
		}
	}
}

/* END OF 3-body-testimonials__investments.css */
/*  */
/*  */
/*  */
/*  */

/* START OF 4-body__our__plans.css */
/* contains styles for INVESTMENT PAGE'S Our Financial Plan section */

/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .fund-our-plans__section {
    /* outline: 4px solid red; */

    width: 100%;
    padding-top: 0rem;
    padding-bottom: 8rem;
  }

  .fund-our-plans__container {
    /* outline: 4px solid blueviolet; */

    width: 100%;
    padding: 0 1rem;
  }

  .fund-our-plans__types {
    /* outline: 2px solid green; */

    width: 100%;
    padding: 0;

    font-family: var(--ff-primary);
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--clr-primary-650);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 2rem;
  }

  /* major styling for the card */
  .fund-our-plans__plan {
    /* outline: 2px solid gold; */

    padding: 3rem 2rem 2rem 2rem;
    max-width: 500px;
    margin: 0 auto;
    min-height: 300px;

    background-color: var(--clr-tertiary-200);
    box-shadow: var(--gen-shadow-3d-01);
    border-radius: 12px;
    border: none;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    transition: all 0.3s ease-in-out;


    /* /////////////// */
    &:hover {
      border: 2px solid var(--clr-secondary-650);
      background-color: var(--clr-neutral-white-2);

      /* ////////////// */
      .fund-our-plans__header__h3 {
        font-weight: var(--fw-bold);
        color: var(--clr-tertiary-200);
      }

      /* /////////////// */
      .fund-our-plans__subhead {
        color: var(--clr-tertiary-100);
      }

      /* /////////////// */
      .fund-our-plans__list {
        color: var(--clr-tertiary-100);
        font-weight: var(--fw-semi-bold);
      }

      /* /////////////// */
      .fund-our-plans__more-link {
        transform: translateY(-4px);
        scale: 1.1;
        filter: brightness(100%);
        color: black;
      }
    }

    /* /////////////// */
    &:active {
      scale: 1.05;
    }
  }

  .fund-our-plans__header__h3 {
    /* outline: 2px solid pink; */

    padding-bottom: 2rem;

    font-size: var(--fs-500);
    color: var(--clr-secondary-650);
    font-weight: var(--fw-bold);
    text-transform: capitalize;
    text-align: center;
  }

  .fund-our-plans__subhead {
    /* outline: 2px solid cyan; */

    padding-bottom: 3rem;

    font-size: var(--fs-700);
    font-weight: var(--fw-regular);
    color: var(--clr-pure-white);
    text-align: center;
    text-transform: none;
  }

  .fund-our-plans__list {
    /* outline: 2px solid pink; */

    font-size: var(--fs-800);
    font-weight: var(--fw-semi-bold);
    color: var(--clr-pure-white);
    text-transform: none;
    text-decoration: none;
    list-style: none;
    text-align: center;

    padding-bottom: 3rem;
  }

  .fund-our-plans__item {
    /* outline: 2px solid orange; */

    width: 100%;
  }

  .fund-our-plans__item-mark {
    /* outline: 2px solid yellow; */

    display: inline-block;
    padding-right: 0.5rem;
  }

  .fund-our-plans__more-link {
    /* outline: 2px solid pink; */

    display: block;

    width: 100%;
    max-width: 400px;
    margin: 0 auto;

    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-800);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    color: var(--clr-neutral-white-2);

    padding: 1rem 2rem;
    border-radius: 12px;
    cursor: pointer;
    border: 0.1px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    transition: all 500ms ease-in-out;

    /* ////////////// */
    &:hover {
      color: black;
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
      box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .fund-our-plans__section {
    /* outline: 4px solid red; */

    width: 100%;
    padding-top: 0rem;
    padding-bottom: 10rem;
  }

  .fund-our-plans__container {
    /* outline: 4px solid blueviolet; */

    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
  }

  .fund-our-plans__types {
    /* outline: 2px solid green; */

    width: 100%;
    padding: 0;

    font-family: var(--ff-primary);
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--clr-primary-650);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 4rem;
  }

  /* major styling for the card */
  .fund-our-plans__plan {
    /* outline: 2px solid gold; */

    padding: 3rem 2rem 2rem 2rem;
    max-width: 500px;
    margin: 0 auto;
    min-height: 300px;

    background-color: var(--clr-tertiary-200);
    box-shadow: var(--gen-shadow-3d-01);
    border-radius: 12px;
    border: none;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    transition: all 0.3s ease-in-out;


    /* /////////////// */
    &:hover {
      border: 2px solid var(--clr-secondary-650);
      background-color: var(--clr-neutral-white-2);

      /* ////////////// */
      .fund-our-plans__header__h3 {
        font-weight: var(--fw-bold);
        color: var(--clr-tertiary-200);
      }

      /* /////////////// */
      .fund-our-plans__subhead {
        color: var(--clr-tertiary-100);
      }

      /* /////////////// */
      .fund-our-plans__list {
        color: var(--clr-tertiary-100);
        font-weight: var(--fw-semi-bold);
      }

      /* /////////////// */
      .fund-our-plans__more-link {
        transform: translateY(-4px);
        scale: 1.1;
        color: black;
      }
    }

    /* /////////////// */
    &:active {
      scale: 1.05;
      filter: brightness(120%);
    }
  }

  .fund-our-plans__header__h3 {
    /* outline: 2px solid pink; */

    padding-bottom: 3rem;

    font-size: var(--fs-400);
    color: var(--clr-secondary-650);
    font-weight: var(--fw-bold);
    text-transform: capitalize;
    text-align: center;
  }

  .fund-our-plans__subhead {
    /* outline: 2px solid cyan; */

    padding-bottom: 3rem;

    font-size: var(--fs-700);
    font-weight: var(--fw-regular);
    color: var(--clr-pure-white);
    text-align: center;
    text-transform: none;
  }

  .fund-our-plans__list {
    /* outline: 2px solid pink; */

    font-size: var(--fs-800);
    font-weight: var(--fw-semi-bold);
    color: var(--clr-pure-white);
    text-transform: none;
    text-decoration: none;
    list-style: none;
    text-align: center;

    padding-bottom: 4rem;
  }

  .fund-our-plans__item {

    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 0.5rem;
  }

  .fund-our-plans__more-link {
    /* outline: 2px solid pink; */

    display: block;

    width: 100%;
    max-width: 400px;
    margin: 0 auto;

    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    color: var(--clr-neutral-white-2);

    padding: 1rem 2rem;
    border-radius: 12px;
    cursor: pointer;
    border: 0.1px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    transition: all 500ms ease-in-out;

    /* ////////////// */
    &:hover {
      color: black;
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
      box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .fund-our-plans__section {
    /* outline: 4px solid red; */

    width: 100%;
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-top: 0rem;
    padding-bottom: 12rem;
  }

  .fund-our-plans__container {
    /* outline: 4px solid blueviolet; */

    width: 98%;
    margin: 0 auto;
  }

  .fund-our-plans__types {
    /* outline: 2px solid green; */

    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;

    font-family: var(--ff-primary);
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--clr-primary-650);

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 2rem;
  }

  /* major styling for the card */
  .fund-our-plans__plan {
    /* outline: 2px solid gold; */

    padding: 3rem 2rem 2rem 2rem;
    width: 500px;
    margin: 0 auto;
    min-height: 500px;

    background-color: var(--clr-neutral-white-2);
    box-shadow: var(--gen-shadow-3d-01);
    border-radius: 12px;
    border: 1px solid var(--clr-secondary-650);

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;

    transition: all 0.5s ease-in-out;


    /* /////////////// */
    &:hover {
      filter: brightness(110%);
      background-color: var(--clr-tertiary-200);
      border: none;

      /* ////////////// */
      .fund-our-plans__header__h3 {
        color: var(--clr-secondary-650);
        font-weight: var(--fw-bold);
      }

      /* /////////////// */
      .fund-our-plans__subhead,
      .fund-our-plans__list {
        color: var(--clr-pure-white);
      }

      /* /////////////// */
      .fund-our-plans__more-link {
        transform: translateY(-4px);
        scale: 1.1;
        filter: brightness(100%);
        color: black;
      }
    }

    /* /////////////// */
    &:active {
      scale: 1.05;
      filter: brightness(110%);
    }
  }

  .fund-our-plans__header__h3 {
    /* outline: 2px solid pink; */

    padding-bottom: 3rem;

    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    color: var(--clr-tertiary-200);
    text-transform: capitalize;
    text-align: center;
  }

  .fund-our-plans__subhead {
    /* outline: 2px solid cyan; */

    padding-bottom: 3rem;

    font-size: var(--fs-700);
    font-weight: var(--fw-regular);
    color: var(--clr-tertiary-100);
    text-align: center;
    text-transform: none;
  }

  .fund-our-plans__list {
    /* outline: 2px solid pink; */

    font-size: var(--fs-700);
    font-weight: var(--fw-semi-bold);
    color: var(--clr-tertiary-100);
    text-transform: none;
    text-decoration: none;
    list-style: none;
    text-align: center;

    padding-bottom: 4rem;
  }

  .fund-our-plans__item {

    padding-bottom: 1rem;
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    column-gap: 1rem;
  }

  .fund-our-plans__more-link {
    /* outline: 2px solid pink; */

    display: block;

    width: 100%;
    max-width: 400px;
    margin: 0 auto;

    font-family: var(--ff-btn);
    font-weight: var(--fw-bold);
    font-size: var(--fs-700);
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: capitalize;
    text-decoration: none;
    text-align: center;
    color: var(--clr-neutral-white-2);

    padding: 1rem 2rem;
    border-radius: 12px;
    cursor: pointer;
    border: 0.1px solid hsla(0, 0%, 0%, 0.1);
    box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 4px 4px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 8px 8px hsla(0, 0%, 0%, 0.3);
    box-shadow: 0px 16px 16px hsla(0, 0%, 0%, 0.3);

    background-color: var(--clr-secondary-650);
    background-image: linear-gradient(150deg,
        var(--clr-secondary-500),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650),
        var(--clr-secondary-650));

    transition: all 500ms ease-in-out;

    /* ////////////// */
    &:hover {
      color: black;
    }

    /* /////////// */
    &:active {
      transform: translateY(8px);

      box-shadow: 0px 1px 1px hsla(0, 0%, 0%, 0.3);
      box-shadow: 0px 2px 2px hsla(0, 0%, 0%, 0.3);

      background-image: linear-gradient(150deg,
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650),
          var(--clr-secondary-650));

      transition: all 150ms ease-in-out;
    }
  }
}

/* END OF 4-body__our__plans.css */

/*  */
/*  */
/*  */
/*  */


/* START OF 6-what__we__invest__in.css */
/* contains styles for INVESTMENT PAGE: */
/* INVESTMENT-PLANS section */



/** Mobile view */
/* max-width: 500px */
@media screen and (width <=31.25em) {
  .fund-what-we-invest-in__section {
    /* outline: 4px solid gray; */

    width: 100%;
    padding-bottom: 8rem;

  }

  .fund-what-we-invest-in__container {
    /* outline: 4px solid skyblue; */

    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 1rem;

  }

  .fund-what-we-invest-in__header {
    /* outline: 2px solid blue; */

    text-align: center;
    font-family: var(--ff-primary);
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    line-height: var(--lh-600);
    letter-spacing: 1px;
    color: var(--clr-primary-650);
    text-transform: capitalize;
  }

  .fund-what-we-invest-in__list__container {
    /* outline: 2px solid orange; */

    width: 100%;
    padding: 2rem 0.5rem;
    min-height: 10dvh;

    background-color: var(--clr-tertiary-200);

    background-image: url(/questergatecapital/public/img/images/financial_market_image_5-Phone-large-500-200.jpg);
    background-image: -webkit-image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Phone-large-500-200.webp));
    background-image: image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Phone-large-500-200.webp));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: var(--gen-shadow-3d-02);

    /* /////////////////////// */
    @media screen and (width <=350px) {
      background-image: url(/questergatecapital/public/img/images/financial_market_image_5-Phone-small-350-140.jpg);
      background-image: -webkit-image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Phone-small-350-140.webp));
      background-image: image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Phone-small-350-140.webp));
    }
  }

  .fund-what-we-invest-in__list {
    /* outline: 2px solid gold; */

    width: 100%;

    list-style-type: none;
    text-align: center;
    /* color: var(--clr-secondary-650); */
    color: var(--clr-secondary-500);
    text-transform: capitalize;

    font-family: var(--ff-secondary);
    font-size: var(--fs-700);
    font-weight: var(--fw-bold);
    line-height: 1.5;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 1rem;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/* Mobile landscape & Tablet Portrait screens */
/* (min-width > 500px ) & (max-width <= 875px) */
@media screen and (width > 31.25em) and (width <=54.69em) {
  .fund-what-we-invest-in__section {
    /* outline: 4px solid gray; */

    width: 100%;
    padding-bottom: 10rem;

  }

  .fund-what-we-invest-in__container {
    /* outline: 4px solid skyblue; */

    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;

  }

  .fund-what-we-invest-in__header {
    /* outline: 2px solid blue; */

    text-align: center;
    font-family: var(--ff-primary);
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
    line-height: var(--lh-600);
    letter-spacing: 1px;
    color: var(--clr-primary-650);
    text-transform: capitalize;
  }

  .fund-what-we-invest-in__list__container {
    /* outline: 2px solid orange; */

    width: 100%;
    padding: 2rem 0;
    min-height: 10dvh;

    background-color: var(--clr-tertiary-200);

    background-image: url(/questergatecapital/public/img/images/financial_market_image_5-Tablet-land-875-350.jpg);
    background-image: -webkit-image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Tablet-land-875-350.webp));
    background-image: image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Tablet-land-875-350.webp));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-shadow: var(--gen-shadow-3d-02);

    /* /////////////////////// */
    @media screen and (width > 500px) and (width <=650px) {
      background-image: url(/questergatecapital/public/img/images/financial_market_image_5-Tablet-potrait-650-260.jpg);
      background-image: -webkit-image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Tablet-potrait-650-260.webp));
      background-image: image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Tablet-potrait-650-260.webp));
    }
  }

  .fund-what-we-invest-in__list {
    /* outline: 2px solid gold; */

    width: 100%;

    list-style-type: none;
    text-align: center;
    /* color: var(--clr-secondary-650); */
    color: var(--clr-secondary-500);
    text-transform: capitalize;

    font-family: var(--ff-secondary);
    font-size: var(--fs-600);
    font-weight: var(--fw-bold);
    line-height: var(--lh-600);
    letter-spacing: 1px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 1rem;
  }
}

/*        */
/*        */
/*        */
/*        */
/*        */

/** Screens > 875px */
@media screen and (width > 54.69em) {
  .fund-what-we-invest-in__section {
    /* outline: 4px solid gray; */

    width: 100%;
    max-width: var(--width__1440px);
    margin: 0 auto;
    padding-bottom: 12rem;

  }

  .fund-what-we-invest-in__container {
    /* outline: 4px solid skyblue; */

    width: 100%;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    row-gap: 2rem;

  }

  .fund-what-we-invest-in__header {
    /* outline: 2px solid blue; */

    text-align: center;
    font-family: var(--ff-primary);
    font-size: var(--fs-400);
    font-weight: var(--fw-bold);
    line-height: var(--lh-600);
    letter-spacing: 1px;
    color: var(--clr-primary-650);
    text-transform: capitalize;
  }

  .fund-what-we-invest-in__list__container {
    /* outline: 2px solid orange; */

    width: 70%;
    padding: 2rem 0 1rem 0;
    min-height: 10dvh;

    background-color: var(--clr-tertiary-200);

    background-image: url(/questergatecapital/public/img/images/financial_market_image_5-Laptop-small-1000-400.jpg);
    background-image: -webkit-image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Laptop-small-1000-400.webp));
    background-image: image-set(url(/questergatecapital/public/img/images/financial_market_image_5-Laptop-small-1000-400.webp));
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    box-shadow: var(--gen-shadow-03);
  }

  .fund-what-we-invest-in__list {
    /* outline: 2px solid gold; */

    width: 100%;

    list-style-type: none;
    text-align: center;
    /* color: var(--clr-secondary-650); */
    color: var(--clr-secondary-500);
    text-transform: capitalize;

    font-family: var(--ff-secondary);
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
    line-height: var(--lh-600);
    letter-spacing: 1px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    row-gap: 1rem;
  }

  .fund-what-we-invest-in__list__items {
    padding-bottom: 1rem;
  }
}

/* END OF 6-what__we__invest__in.css */

/*  */
/*  */
/*  */
/*  */


/* START OF  */


/* END OF  */

/*  */
/*  */
/*  */
/*  */