/* colors */
:root {
  --clr-primary: #1fa19b;
  --clr-white: #ffffff;
  --clr-black: #000000;
  --clr-gray: #808080;
  --clr-gray-light: #dbdbdb;
  --clr-gray-dark: #4d4d4d;
  --clr-gray-soft: #dae0df;
  --clr-gray-50: #eff2f4;
  --clr-gray-100: #f2f2f2;
  --clr-gray-200: #e5e7eb;
  --clr-gray-300: #cccccc;
  --clr-gray-400: #a8a8a8;
  --clr-gray-600: #666666;
  --clr-gray-900: #333333;
  --clr-neutral-400: #bfbfbf;
  --clr-gray-medium: #929497;
  --clr-green-gray-10: #edf2f1;
  --clr-blue-gray: #f2f6f7;
  --clr-blue-gray-300: #cbd3d8;
  --clr-blue-gray-200: #d5dce2;
  --clr-blue-gray-600: #58707f;
  --clr-teal-70: rgba(10, 48, 45, 0.7);
  --clr-teal-500: #1fa29c;
  --clr-teal-tint: rgba(208, 226, 224, 0.8);
  --clr-blue: #21568c;
  --clr-blue-800: #155f82;
  --clr-accent-teal: #0b514c;
  /* --clr-blue08: rgba(33, 86, 140, 0.08); */
  --clr-blue08: #eef2f6;
  --clr-dark-blue-40: rgba(1, 7, 38, 0.4);
  --clr-yellow: #ffff00;
  --clr-yellow-500: #e4b745;
  --clr-yellow-orange: #f8b323;
  --clr-red-400: #ff6462;
  --gradient-black-fade: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
  --gradient-black-60: linear-gradient(to right, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
  --gradient-blue: linear-gradient(to right,
      rgba(0, 44, 104, 0.7),
      /* #002c68 at 70% opacity */
      rgba(0, 31, 74, 0.85)
      /* #001f4a at 85% opacity */
    );
  --gradient-black-right: linear-gradient(to right, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.2));
  --gradient-black-bottom: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  --border-default: var(--clr-gray-light);
  --border-primary: var(--clr-primary);
  --border-secondary: var(--clr-gray-soft);
  --border-clr3: var(--clr-gray-300);
  --overlay-default-color: var(--gradient-black-fade);
  --disable-clr: var(--clr-gray-400);
}

/* bg */
.bg-transparent {
  background-color: transparent !important;
}

a:has(>.bg-white--hover):hover .bg-white--hover,
.bg-white--hover:hover,
.bg-white {
  background-color: var(--clr-white);
}

.bg-clr-primary {
  background-color: var(--clr-primary);
}

.bg-primary {
  background-color: var(--clr-primary) !important;
}

.hover-bg-teal-70:hover,
.bg-teal-70 {
  background-color: var(--clr-teal-70);
}

.hover-bg-dark-blue-40:hover,
.bg-dark-blue-40 {
  background-color: var(--clr-dark-blue-40);
}

/* gradient */

.gradient-black-60 {
  background: var(--gradient-black-60);
}

/* text colors */
.text-color-unset {
  color: unset;
}

.text-clr-white--hover:focus:hover,
.text-clr-white--hover:hover,
.text-clr-white {
  color: var(--clr-white);
}

a:has(>.text-clr-primary--hover):hover .text-clr-primary--hover,
.text-clr-primary--hover:hover,
.text-clr-primary {
  color: var(--clr-primary) !important;
}

.text-clr-teal-500 {
  color: var(--clr-teal-500);
}

.text-clr-yellow--hover:hover,
.text-clr-yellow {
  color: var(--clr-yellow);
}

.text-clr--gray-900 {
  color: var(--clr-gray-900);
}

.text-clr-gray-dark {
  color: var(--clr-gray-dark);
}

.text-clr-blue {
  color: var(--clr-blue);
}

.text-clr-yellow-500 {
  color: var(--clr-yellow-500);
}

.text-clr-red-400 {
  color: var(--clr-red-400);
}

.text-clr-yellow-orange {
  color: var(--clr-yellow-orange);
}

.body-text-clr {
  color: var(--section-body-clr, var(--clr-gray-dark)) !important;
}

/* underline colors */
.underline-border.text-clr-yellow--hover:hover {
  --border-color: var(--clr-yellow);
}

.underline-border.text-clr-primary--hover:hover {
  --border-color: var(--clr-primary);
}

/* border color */
.border-clr-primary,
.hr-rule-primary,
.vr-rule-primary,
.border-primary {
  --border-color: var(--border-primary);
}

.alt-borders>*:nth-child(odd),
.border-style {
  border: 1px solid var(--border-color, var(--border-default))
}

.alt-borders>*:nth-child(3n+1),
.border-style-1 {
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
}

.alt-borders>*:nth-child(3n),
.border-style-2 {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.border-clr-yellow {
  --border-color: var(--clr-yellow);
}

.border-clr-white {
  --border-color: var(--clr-white);
}

.border-clr-gray-dark {
  --border-color: var(--clr-gray-dark);
}

/* bg-overlay */

.overlay-bg {
  --overlay-color: var(--overlay-default-color);
  position: relative;
}

.overlay-bg:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay-color);
}