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

/****** Theme Color *******/
:root {
  --primary: #0ca3cf;
  --primary__hover: #1d7691;

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

  --secondary: #1b192c;
  --secondary__hover: #00f1ff;
  

  --accent: #00acb7;
  --accent__hover: #3bcfda;

 --accent-two: #00F0FF;

  --text-body: #413e3f;
  --text-body__hover: #595858;

  --text-title: #413e3f;
  --text-title__hover: #595858;

/* Other Colors */

  --bg-gray-one: rgba(202, 207, 234, 0.25);
  --bg-gray-two: #F9FAFE;
  

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

/******************/
/** 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);

  --default-letter-spacing: 0.02em;;
  --default-text-decoration: underline solid 1px;
  --default-text-line-height: 1.611;
  --default-title-line-height: 1.2;
}

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

  --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 */

  /* Font Size - Heading */
  --font-h1: clamp(1.875rem, calc(1.343rem + 1.98vw), 3.125rem);
  --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 */
}

/****** General *******/
:root {
  /* Header */
  --header-text-color: var(--text-body);
  --header-text-size: var(--font-p);
  --nav-link-size: var(--font-p);

  /* Hero  */
  --font-hero-title: var(--font-h1);
  --font-hero-subtitle: clamp(1.125rem, calc(1.019rem + 0.396vw), 1.375rem); /* min: 18px, max: 22px */
  --font-hero-text: var(--font-p);

  /* Pages */
  --page-title-size: clamp(1.5rem, calc(0.649rem + 3.168vw), 3.5rem); /* min: 24px, max: 56px */

  /* Blog */
  --blog-post-title-size: clamp(1.25rem, calc(0.877rem + 1.386vw), 2.125rem); /* min: 20px, max: 34px */
  --single-post-title-size: clamp(1.5rem, calc(1.074rem + 1.584vw), 2.5rem); /* min: 24px, max: 40px */
  --font-blog-single-meta: var(--font-p);

  /* Sections  */
  --space-section-pd: 166px;
  --section-title-size: clamp(5rem, calc(4.202rem + 2.97vw), 6.875rem); /* min: 80px, max: 110px */
  --section-subtitle-size: 24px;

  --footer-font-size: var(--font-p);

  /* Buttons  */
  --btn-border-radius: var(--default-border-radius);
  --btn-transition: 0.3s all ease;

  /* Icon */
  --icon-border-radius: var(--default-border-radius);

  /* Forms */
  --form-field-border-radius: var(--default-border-radius);
  --form-field-textarea-border-radius: var(--default-border-textarea-radius);

  /************ Footer ***********/
  /* Footer - Update the rest in footer-main.scss */
  --footer-main--bg-clr: #151313;
  --footer-btm--bg-clr: #ffffff;
  --footer-title-color: var(--text-title);
  --footer-text-color: var(--text-body);
  --footer-title-size: var(--text-xl);
  --footer-subtitle-size: var(--text-l);
  --footer-text-size: var(--font-p);
}