:root {
	/* Colours */
	--color-primary: #1b6875;
	--color-secondary: #6bbdb9;
	--color-secondary-pale: #eff8f7;
	--color-accent: rgb(217, 202, 38);
	--color-accent-pale: #fffcdc;
	--color-bg: #d7d7d7;
	--color-black: #1c1c1c;
	--color-white: #ffffff;
	--color-red: #ff0000;
	--color-green: #14a86d;
	--color-green-pale: #dcedd3;
	--color-yellow: #ffbd40;
	--color-text-grey: #8c8c8c;
	--color-border-grey: #e6e6e6;
	--color-border-primary: #456469;
	--color-disable: #F0F0F0;

	/* --color-row-hover: #e9faf8;
    --color-row-green: #c3dcb6; */

	--color-row-hover: #eff8f7;
	--color-row-green: #1b6875;

	--color-alert: rgb(217, 202, 38);
	--color-alert-bg: rgba(217, 202, 38, 0.25);

	--color-modal-bg: rgba(0, 0, 0, 0.525);

	/* 
    --color-alert-green:;
    --color-alert-green-bg:; */

	/* Fonts */
	--heading-font: "termina", sans-serif;
	--text-font: "Utopia Std Display", serif;
	--flaticon: "flaticon_ita";
    /* Added 12/19/2024 - Shamsher Ali */
    --strong-font: "utopia-std", serif;


	/* Shadows */
	--heading-shadow: 0 3px 15px #0000001f;
	--button-shadow: 0 5px 5px #00000024;
	--accordion-shadow: 0 3px 6px #00000029;
	--content-box-shadow: 0px 3px 10px #0000001f;

	/* Spacing */
	--header-height: 50px;
	--footer-height: 50px;
	--row-gap: 30px;
	--column-gap: 30px;
	--large-gap: 60px;

	/* Breakpoints */
	/* --phone: 480px;
    --tablet: 991px;
    --desktop: 1200px; */

	/* Old Variables */
	--modal-black: rgba(0, 0, 0, 0.6);
	--bar-grey: #e1e1e1;
	--green: #73af55;
	--green-dark: #41672d;
	--green-opaque: #73af558a;
	--green-opaque-2: #c1e2b0;
	--red-opaque: #d8afaf;
	--purple: #8683a4;
	--purple-opaque: hsla(246, 15%, 58%, 0.678);
	--box-shadow-black: rgba(0, 0, 0, 0.096);
	--box-shadow-header: rgba(0, 0, 0, 0.19);
	--border-light-blue: #cee2ea;
	--modal-black: rgba(0, 0, 0, 0.6);
	--tertiary-opaque: hsla(197, 45%, 65%, 0.651);
	--tertiary-opaque-2: hsla(197, 45%, 65%, 0.301);
	--tertiary-opaque-3: hsla(197, 45%, 65%, 0.178);
}

@media (max-width: 991px) {
	:root {
		--footer-height: 60px;
		--large-gap: 40px;
	}
}

@media (max-width: 767px) {
	:root {
		--footer-height: 76px;

		--row-gap: 10px;
		--column-gap: 10px;
		--large-gap: 20px;
	}
}
