@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}
/* Aileron font */
@font-face {
  font-family: "Aileron-SemiBold";
  src: url("../../public//fonts/Aileron/Aileron-SemiBold.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Aileron-Heavy";
  src: url("../../public//fonts/Aileron/Aileron-Heavy.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Aileron-Bold";
  src: url("../../public//fonts/Aileron/Aileron-Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Aileron-Black";
  src: url("../../public//fonts/Aileron/Aileron-Black.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
/*  */
/*  avenir-roman*/
@font-face {
  font-family: "avenir-roman";
  src: url("../../public//fonts/avenir-roman.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/*  */
@font-face {

  font-family: "Acumin Pro Wide Bold";
  src: url("/fonts/acumin-pro/Acumin_Pro_Wide_Bold.otf") format("truetype");
}
@font-face {
  font-family: "greycliff-cf-medium";
  src: url("../../public//fonts/greycliff-cf-medium.ttf") format("truetype");
}
@font-face {
  font-family: "Acumin Pro Medium";
  src: url("/fonts/acuminpromedium.ttf") format("truetype");
}
@font-face {
  font-family: "Acumin Pro Semi Bold";
  src: url("/fonts/acumin-pro/acumin-pro-semibold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Acumin Pro Bold";
  src: url("/fonts/acumin-pro/Acumin-BdPro.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}


@font-face {
  font-family: "Acumin Pro Regular";
  src: url("/fonts/acumin-pro/Acumin-RPro.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Acumin Pro Condensed Light Italic";
  src: url("/fonts/acumin-pro/Acumin_Pro_Condensed_Light_Italic.otf")
    format("opentype");
}
@font-face {
  font-family: "Greycliff Bold";
  src: url("/fonts/login/greycliff-cf-bold.ttf") format("truetype");
}

@font-face {
  font-family: "Greycliff Medium";
  src: url("/fonts/login/greycliff-cf-medium.ttf") format("truetype");
}

@font-face {
  font-family: "Greycliff Extra Bold";
  src: url("/fonts/login/GreycliffCF-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Acumin Pro Condensed SemiBold";
  src: url("/fonts/acuminprocondsemibol.ttf") format("truetype");
}
@font-face {
  font-family: "Acumin Pro Condensed Medium";
  src: url("/fonts/acumin-pro/AcuminProCond-Medium.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Acumin Pro Condensed Bold";
  src: url("/fonts/Acumin_Variable_Concept/Acumin_Pro_Condensed.ttf")
    format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Acumin Pro Condensed Light Italic";
  src: url("/fonts/acumin-pro/Acumin_Pro_Condensed_Light_Italic.otf")
    format("opentype");
}
@font-face {
  font-family: "Poppins Bold";
  src: url("/fonts/Poppins/Poppins-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins Medium";
  src: url("/fonts/Poppins/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins Regular";
  src: url("/fonts/Poppins/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins SemiBold";
  src: url("/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Acumin Pro SemiCondensed Bold";
  src: url("/fonts/acumin-pro/Acumin_Pro_Condensed_Semibold.otf")
    format("opentype");
 
}
@font-face {
  font-family: "Acumin Pro SemiCondensed Regular";
  src: url("/fonts/acumin-pro/Acumin_Pro_SemiCondensed_Regular.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Acumin Pro SemiCondensed Medium";
  src: url("/fonts/acumin-pro/Acumin_Pro_SemiCondensed_Medium.otf")
    format("opentype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Avenir Black";
  src: url("/fonts/avenir/Avenir_Black.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Acumin Pro Condensed Bold Italic";
  src: url("/fonts/Acumin_Variable_Concept/fonnts.com-Acumin_Pro_Condensed_Bold_Italic.otf")
    format("truetype");
}
@font-face {
  font-family: "Acumin Variable Concept";
  src: url("/fonts/Acumin_Variable_Concept/Acumin-Variable-Concept.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}
/* Aileron font */
.aileron-semibold {
  font-family: "Aileron-SemiBold", sans-serif;
}
.aileron-heavy {
  font-family: "Aileron-Heavy", sans-serif;
}
.aileron-bold {
  font-family: "Aileron-Bold", sans-serif;
}
.aileron-black {
  font-family: "Aileron-Black", sans-serif;
}
.avenir-roman {
  font-family: "avenir-roman", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

:root {
  /* font families */
  --aileron-font: "Aileron", sans-serif;

  /* colors */

  --black: black;
  --white: white;
  --light-blue: #2098d8;
  --dark-blue: #0066b4;
  --more-blue: #1b2b3e;
  --green: #00863c;
  --light-green: #299b13;
  --orange: #ec7100;
  --grey: #6a6c5e;
  --red: #e61a1f;

  /* font-weight */
  --extra-bold: 800;
  --bold: 700;
  --semi-bold: 600;
  --medium: 500;
  --normal: 400;
  --thin: 300;
}

@font-face {
  font-family: "Aileron";
  src: url("/fonts/Aileron-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

.page-width {
  /* max-width: 1440px; */
  /* width: 90%; */
  width: 100%;
  margin: 0 auto;
}
.container-main {
  width: 100%;
  padding: 0rem 0.6rem;
}
@media(max-width: 397px){
  .container-main {
  
  padding: 0rem 0rem;
}
}
.aileron-font {
  font-family: var(--aileron-font);
}
.primary-heading {
  font-family: var(--aileron-font);
  /* 32px */
  font-size: 2rem;
  font-weight: var(--bold);
  /* black */
  color: var(--black);
}
.secondary-heading {
  font-family: var(--aileron-font);
  /* 29.66px */
  font-size: 1.8rem;
  font-weight: var(--bold);
  /* #2098D8 */
  color: var(--light-blue);
}
.tertiary-heading {
  font-family: var(--aileron-font);
  /* 22px */
  font-size: 1.37rem;
  font-weight: var(--bold);
  /* black */
  color: var(--black);
}
.quaternary-heading {
  font-family: var(--aileron-font);
  /* 19.61px */
  font-size: 1.22rem;
  font-weight: var(--semi-bold);
  /* black */
  color: var(--black);
}
.penta-heading {
  font-family: var(--aileron-font);
  /* 20.8px */
  font-size: 1.3rem;
  font-weight: var(--semi-bold);
  /* white */
  color: var(--white);
}
.penta-heading2 {
  font-family: var(--aileron-font);
  /* 17px */
  font-size: 1.1rem;
  font-weight: var(--bold);
  /* #299B13 */
  color: var(--light-green);
}
.primary-para {
  font-family: var(--aileron-font);
  /* 15px */
  font-size: 0.9rem;
  font-weight: var(--normal);
  /* black */
  color: var(--black);
}
.secondary-para {
  font-family: var(--aileron-font);
  /* 18.67px */
  font-size: 1.1rem;
  font-weight: var(--semi-bold);
  /* #1B2B3E */
  color: var(--more-blue);
}
.tertiary-para {
  font-family: var(--aileron-font);
  /* 11.24px */
  font-size: 0.7rem;
  font-weight: var(--medium);
  /* white */
  color: var(--white);
}
.tertiary-para1 {
  font-family: var(--aileron-font);
  /* 11.24px */
  font-size: 0.7rem;
  font-weight: var(--medium);
  /* white */
  color: var(--black);
}
.quaternary-para {
  font-family: var(--aileron-font);
  /* 18.1px */
  font-size: 1.13rem;
  font-weight: var(--normal);
  /* #ec7100 */
  color: var(--orange);
}
.penta-para {
  font-family: var(--aileron-font);
  /* 15.85px */
  font-size: 0.9rem;
  font-weight: var(--normal);
  /* white */
  color: var(--white);
}

/* sidebar styling */

.sidebar {
  margin-left: 15px;
  margin-top: 130px;
  width: 100px;
  height: 78%;
  background: #6931f7;
  position: absolute;
  top: 0;
  left: 0;
  transition: left 0.3s;
  box-shadow: 1px 4px 8px 0px #00000026;
  z-index: 99;
  border-radius: 20px;
}
.sidebar-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: white;
  position: absolute;
  left: 0;
  top: 0;
}

.nav-item {
  padding: 2px;
  cursor: pointer;
}
.sidebar-toggle-button {
  display: none;
}
@media (max-width: 992px) {
  .sidebar {
    left: -95px;
    box-shadow: none;
    margin-left: 0px;
    margin-top: 0px;
    width: 95px;
    height: 75%;
  }
  .sidebar.open {
    left: 0;
  }
  .sidebar-toggle-button {
    display: block;
  }
  .sidebar-toggle-button {
    background: none;
    border: none;
    color: #212b59;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    left: 90px;
  }
}
/* sidebar styling end */
.input-container div {
  gap: 0.5rem;
}