/* Screens Resolution : 1200px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 1200px) {

}


/* Screens Resolution : 992px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 992px) {

	/* ---------------------------------
	1. PRIMARY STYLES
	--------------------------------- */

	h1{ font-size: 4em; }
	h2{ font-size: 3em; }
	h3{ font-size: 2em; }

	/* COMMONS */

	.no-left-padding{ padding-left: 15px; }

	.no-right-padding{ padding-right: 15px; }


	/* ---------------------------------
	11. SLIDER CATEGORY CARDS
	--------------------------------- */

	.main-slider{ height: 220px; }

	.slider-category-card{ height: 220px; }

	.card-overlay h3{ font-size: 16px; }


	/* ---------------------------------
	13. HOME REDESIGN
	--------------------------------- */

	.blog-hero{ padding: 36px 0 30px; min-height: 240px; }

	.blog-hero__text{ max-width: 60%; }

	.hero-title{ font-size: 40px; }

	.posts-grid{ grid-template-columns: repeat(2, 1fr); gap: 20px; }

}


/* Screens Resolution : 767px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

	/* ---------------------------------
	1. PRIMARY STYLES
	--------------------------------- */

	p{ line-height: 1.4; }

	h1{ font-size: 3em; }
	h2{ font-size: 2.5em; }
	h3{ font-size: 1.8em; }
	h4{ font-size: 1.5em; }
	h5{ font-size: 1.2em; }


	/* ---------------------------------
	2. COMMONS FOR PAGE DESIGN
	--------------------------------- */

	.section{ padding: 40px 0 10px; }


	/* ---------------------------------
	3. MENU
	--------------------------------- */

	.menu-nav-icon{ display: inline-block; }


	/* ---------------------------------
	6. SLIDER
	--------------------------------- */

	.main-slider{ padding-right: 0px; height: 220px; }


	/* ---------------------------------
	7. EXTRA BIG BLOG
	--------------------------------- */

	.post-style-2 .blog-image{ width: 100%; height: auto; float: none; }

	.post-style-2 .blog-info{ height: auto; width: 100%; }


	/* ---------------------------------
	10. FOOTER
	--------------------------------- */

	footer{ padding: 40px 0 0px; margin-top: 0px; }


	/* ---------------------------------
	11. SLIDER CATEGORY CARDS
	--------------------------------- */

	.slider-category-card{ height: 200px; border-radius: 14px; }

	.card-overlay{ padding: 12px; }

	.card-overlay h3{ font-size: 15px; }


	/* ---------------------------------
	13. HOME REDESIGN
	--------------------------------- */

	.blog-hero{
		align-items: flex-start;
		min-height: 0;
		padding: 28px 0 22px;
		/* image stays in the background, faded behind the text */
		background-image:
			linear-gradient(90deg, #fbfcff 0%, rgba(251, 252, 255, .94) 55%, rgba(251, 252, 255, .55) 100%),
			url('../../images/home-hero.png');
		background-position: left center, right bottom;
		background-size: 100% 100%, auto 100%;
	}

	.blog-hero__text{ max-width: 100%; flex: 1 1 100%; }

	.hero-eyebrow{ font-size: 14px; margin-bottom: 6px; }

	.hero-title{ font-size: 32px; }

	.hero-sub{ font-size: 15px; }

	.cat-filter{ margin: 4px 0 24px; gap: 8px; }

	.cat-arrow{ width: 40px; height: 40px; }

	.cat-pill{ height: 42px; padding: 0 16px; }

}


/* Screens Resolution : 640px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {

	.posts-grid{ grid-template-columns: 1fr; gap: 18px; }

	.hero-title{ font-size: 30px; }

	.blog-card__media{ height: 150px; }

	.blog-card__body{ padding: 16px 18px 18px; }

	.blog-card__title{ font-size: 17px; }

	.load-more-wrap{ margin: 30px 0 6px; }

}


/* Screens Resolution : 479px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 479px) {

	/* ---------------------------------
	1. PRIMARY STYLES
	--------------------------------- */

	body{ font-size: 14px; }


	/* ---------------------------------
	11. SLIDER CATEGORY CARDS
	--------------------------------- */

	.main-slider{ height: 220px; }

	.slider-category-card{ height: 180px; border-radius: 12px; }

	.card-overlay h3{ font-size: 14px; }

}


/* Screens Resolution : 359px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 359px) {

}


/* Screens Resolution : 290px
-------------------------------------------------------------------------- */
@media only screen and (max-width: 290px) {

}