/* Base styles */
:root {
  --primary: #112FA9;
  --primary-light: #3A5FDA;
  --primary-dark: #2C68E8;
  --secondary: #65D2BB;
  --secondary-dark: #4AB69E;
  --white: #ffffff;
  --off-white: #f8f9fa;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --black: #000000;
}

h1, h2, h3, h4, h5, h6 {
		font-family: "Roboto", sans-serif;
		color: var(--dark);
}

.custom-font-secondary {
		font-family: "Roboto", sans-serif !important;
}

.custom-font-tertiary {
		font-family: "Playfair Display", serif !important;
}

p {
		line-height: 1.8;
		font-size: 16px;
		font-size: 1rem;
		letter-spacing: -0.015em;
}

.badge {
		font-weight: 500;
		font-family: "Lexend", sans-serif !important;
}

.btn {
		font-family: "Roboto", sans-serif !important;
		padding: 16px 35.2px;
		padding: 1rem 2.2rem;
		font-size: 14.4px;
		font-size: 0.9rem;
		font-weight: 500;
}

@media (min-width: 992px) {
		#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a {
				font-family: "Roboto", sans-serif !important;
				font-size: 17px;
				font-weight: 600;
				letter-spacing: -0.6px;
				color: var(--dark);
		}
		#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a:hover {
				color: var(--primary-dark) !important;
		}
		#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a.active {
				color: var(--tertiary) !important;
		}
		#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) .dropdown-menu {
				transition: all 300ms;
				opacity: 0;
				transform: translate3d(-5px, 0, 0) !important;
				border: 1px solid var(--grey-200);
				border-radius: var(--border-radius2x) !important;
				overflow: hidden;
				padding-top: 0;
				padding-bottom: 0;
		}
		#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) .dropdown-menu li a {
				padding-top: 12px !important;
				padding-bottom: 12px !important;
				padding-right: 22px !important;
				padding-left: 22px !important;
		}
		#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li:hover.dropdown:not(.dropdown-mega) .dropdown-menu {
				opacity: 1;
				transform: translate3d(-5px, -10px, 0) !important;
		}
}