:root {
    --body-color: #444; 
    --nav-color: #313e5b;
    --nav-color-hover: #405cba;
    --toggle-menu-color: #313e5b;

    --title-color: #313e5b;
    --above-title-color: #405cba;
    --above-title-bkg-color: rgba(64, 92, 186, 0.1);
    --author-title-color: #313e5b;

	--bullet--color: #313e5b;
	--date-color: #313e5b;
	--link-color: var( --above-title-color);

    --hero-bk-color: #ececec;
	--hero-blog-bk-color: #f5f5ff;
	--hero-blog-image-bk-color: linear-gradient(90deg,rgba(64, 92, 186, 1) 0%, rgba(31, 52, 124, 1) 100%);

	--box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);

    --btn-primary-color: #fff;
    --btn-primary-bkg-color: #405cba;
    --btn-primary-bkg-color-hover: #9d9dff;
    --border-radius: 6px;

	--checkbox-color: #405cba;
	--checkbox-bkg-color: #f5f5ff;

	--icon-bgk-color: #405cba;

    /* Sections  */
	--section-holder-padding: 80px;

	--white-section-background: #fff;
	--blue-section-background: #405cba;
	--dark-blue--section-background: #222430;
	--light-grey--section-background: #f5f5ff;

}


@media only screen and (max-width:991px) {
	:root {
		--section-holder-padding: 60px;
	}
	
	:root {
		--h2-margin-bottom: 30px;
	}
}

@media only screen and (max-width: 767px) {
	:root {
		--section-holder-padding: 40px;
	}
}