/******************/
/** Theme  */
/******************/

/****** Theme Color *******/
:root {
  --primary: #0270c4;
  --primary__hover: #2b6aa3;

  --primary-light: #d1d1d1;
  --primary-light__hover: #c8c8c8;

  --secondary: #4e4f5a;
  --secondary__hover: #6e6f78;

  --accent: #284c7c;
  --accent__hover: #233d62;

  --text-body: #413e3f;
  --text-body__hover: #4b494a;

  --text-title: #2a2a2a;
  --text-title__hover: #363434;

  /*  Font*/
  --font-size-base: 16px;
  --font-size-main: var(--text-16-18);
  --font-heading: "Montserrat";
  --font-body: "Montserrat";
  --fontawesome--font-family: "Font Awesome 6 Solid";
  /* --font-custom-1: ; */
  /* --font-custom-2: ; */
}

/******************/
/** Theme Extended */
/******************/
:root {
  --default-border-radius: 0;
  --default-border-textarea-radius: var(--default-border-radius);
  --custom-border-radius: var(--radius-l);
  --icon-border-radius: var(--default-border-radius);

  --default-transition: 0.3s all ease;
  --default-bx-sh: 0px 0px 30px 0px rgba(71, 71, 71, 0.08);
  --default-card-bx-sh: var(--default-bx-sh);

  /* Buttons  */
  --btn-border-radius: 30px;
  --btn-transition: 0.3s all ease;
}

:root {
  /* Font */
  /* Font Size - Text */
  --font-p: var(--font-size-main);

  --text-14-15: clamp(0.875rem, calc(0.848rem + 0.099vw), 0.938rem); /* min: 14px, max: 15px */
  --text-14-16: clamp(0.875rem, calc(0.822rem + 0.198vw), 1rem); /* min: 14px, max: 16px */
  --text-14-17: clamp(0.875rem, calc(0.795rem + 0.297vw), 1.063rem); /* min: 14px, max: 17px */
  --text-14-18: clamp(0.875rem, calc(0.769rem + 0.396vw), 1.125rem); /* min: 14px, max: 18px */
  --text-14-19: clamp(0.875rem, calc(0.742rem + 0.495vw), 1.188rem); /* min: 14px, max: 19px */
  --text-14-20: clamp(0.875rem, calc(0.715rem + 0.594vw), 1.25rem); /* min: 14px, max: 20px */
  --text-14-21: clamp(0.875rem, calc(0.689rem + 0.693vw), 1.313rem); /* min: 14px, max: 21px */
  --text-14-22: clamp(0.875rem, calc(0.662rem + 0.792vw), 1.375rem); /* min: 14px, max: 22px */

  --text-15-16: clamp(0.938rem, calc(0.911rem + 0.099vw), 1rem); /* min: 15px, max: 16px */
  --text-15-17: clamp(0.938rem, calc(0.884rem + 0.198vw), 1.063rem); /* min: 15px, max: 17px */
  --text-15-18: clamp(0.938rem, calc(0.858rem + 0.297vw), 1.125rem); /* min: 15px, max: 18px */
  --text-15-20: clamp(0.938rem, calc(0.804rem + 0.495vw), 1.25rem); /* min: 15px, max: 20px */
  --text-15-22: clamp(0.938rem, calc(0.751rem + 0.693vw), 1.375rem); /* min: 15px, max: 22px */

  --text-16-17: clamp(1rem, calc(0.973rem + 0.099vw), 1.063rem); /* min: 16px, max: 17px */
  --text-16-18: clamp(1rem, calc(0.947rem + 0.198vw), 1.125rem); /* min: 16px, max: 18px */
  --text-16-20: clamp(1rem, calc(0.894rem + 0.396vw), 1.25rem); /* min: 16px, max: 20px */
  --text-16-22: clamp(1rem, calc(0.84rem + 0.594vw), 1.375rem); /* min: 16px, max: 22px */

  --text-18-20: clamp(1.125rem, calc(1.072rem + 0.198vw), 1.25rem); /* min: 18px, max: 20px */
  --text-18-22: clamp(1.125rem, calc(1.019rem + 0.396vw), 1.375rem); /* min: 18px, max: 22px */
  --text-18-24: clamp(1.125rem, calc(0.965rem + 0.594vw), 1.5rem); /* min: 18px, max: 24px */

  --text-20-22: clamp(1.25rem, calc(1.197rem + 0.198vw), 1.375rem); /* min: 20px, max: 22px */
  --text-20-24: clamp(1.25rem, calc(1.144rem + 0.396vw), 1.5rem); /* min: 20px, max: 24px */
  --text-20-26: clamp(1.25rem, calc(1.09rem + 0.594vw), 1.625rem); /* min: 20px, max: 26px */

  /* Font Size - Heading */
  --font-h1: clamp(2.375rem, calc(1.577rem + 2.97vw), 4.25rem); /* min: 38px, max: 68px */
  --font-h2: clamp(1.5rem, calc(1.074rem + 1.584vw), 2.5rem); /* min: 24px, max: 40px */
  --font-h3: clamp(1.25rem, calc(0.877rem + 1.386vw), 2.125rem); /* min: 20px, max: 34px */
  --font-h4: clamp(1.25rem, calc(1.037rem + 0.792vw), 1.75rem); /* min: 20px, max: 28px */
  --font-h5: clamp(1.125rem, calc(1.019rem + 0.396vw), 1.375rem); /* min: 18px, max: 22px */
  --font-h6: clamp(1.125rem, calc(1.019rem + 0.396vw), 1.375rem); /* min: 18px, max: 22px */
}

/* Icon Sizes */
:root {
  --icon-size-xs: clamp(0.813rem, calc(0.786rem + 0.099vw), 0.875rem); /* min: 13px, max: 14px */
  --icon-size-sm: clamp(1rem, calc(0.947rem + 0.198vw), 1.125rem); /* min: 16px, max: 18px */
  --icon-size-md: clamp(1.25rem, calc(1.144rem + 0.396vw), 1.5rem); /* min: 20px, max: 24px */
  --icon-size-lg: clamp(1.75rem, calc(1.59rem + 0.594vw), 2.125rem); /* min: 28px, max: 34px */
  --icon-size-xl: clamp(2.5rem, calc(2.234rem + 0.99vw), 3.125rem); /* min: 40px, max: 50px */
  --icon-size-xxl: clamp(3.75rem, calc(3.218rem + 1.98vw), 5rem); /* min: 60px, max: 80px */
}
