/* =========================
   RESPONSIVE MEDIA QUERIES
========================= */

/* =========================
   Extra Small: 0 - 575px
========================= */
@media (max-width: 575px) {

	.video-area {
		border: 10px solid #fff;
		border-radius: 20px;
		height: 250px;
	}

		.video-area::after {
			top: -10px;
			left: -10px;
			width: calc(100% + 20px);
			height: calc(100% + 20px);
			border: 1px solid #f1f4f8;
			z-index: 2;
			border-radius: 20px;
		}

	.menu_area .navbar-brand {
		font-size: 36px;
	}

	.header_area.sticky {
		height: 50px;
	}

	.wellcome-heading > h2 {
		font-size: 44px;
	}

	.wellcome-heading > h3 {
		font-size: 180px;
		top: -80px;
		left: 0;
	}

	.welcome-thumb {
		width: 65%;
		bottom: -40px;
		right: 10px;
	}

	.app-download-area {
		display: flex;
		gap: 8px;
		flex-wrap: nowrap;
	}

	.app-download-btn {
		min-width: 100px;
		max-width: 45%;
		margin-bottom: 0;
	}

	/* Body h2 responsive */
	h2 {
		font-size: 24px;
		line-height: 1.2;
	}
}

/* =========================
   Small: 576 - 767px
========================= */
@media (min-width: 576px) and (max-width: 767px) {

	.video-area {
		border: 10px solid #fff;
		border-radius: 20px;
		height: 250px;
	}

		.video-area::after {
			top: -10px;
			left: -10px;
			width: calc(100% + 20px);
			height: calc(100% + 20px);
			border: 1px solid #f1f4f8;
			z-index: 2;
			border-radius: 20px;
		}

	.menu_area .navbar-brand {
		font-size: 42px;
	}

	.header_area.sticky {
		height: 50px;
	}

	.wellcome-heading > h2 {
		font-size: 48px;
	}

	.wellcome-heading > h3 {
		font-size: 220px;
		top: -100px;
	}

	.welcome-thumb {
		width: 65%;
		bottom: -50px;
		right: 20px;
	}

	.app-download-btn {
		min-width: 120px;
		max-width: 45%;
	}

	/* Body h2 responsive */
	h2 {
		font-size: 28px;
		line-height: 1.25;
	}
}

/* =========================
   Medium: 768 - 991px
========================= */
@media (min-width: 768px) and (max-width: 991px) {

	.video-area {
		height: 350px;
	}

	.menu_area .navbar-brand {
		font-size: 48px;
	}

	.header_area.sticky {
		height: 50px;
	}

	.wellcome-heading > h2 {
		font-size: 56px;
	}

	.wellcome-heading > h3 {
		font-size: 250px;
		top: -120px;
	}

	.welcome-thumb {
		width: 45%;
		bottom: 250px;
		right: 20px;
	}

	.app-download-area {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.app-download-btn {
		min-width: 140px;
		max-width: 45%;
	}

	/* Body h2 responsive */
	h2 {
		font-size: 32px;
		line-height: 1.3;
	}
}

/* =========================
   Large: 992 - 1199px
========================= */
@media (min-width: 992px) and (max-width: 1199px) {

	.video-area {
		height: 550px;
	}

	.menu_area .navbar-brand {
		font-size: 42px;
	}

	.wellcome-heading > h2 {
		font-size: 64px;
	}

	.wellcome-heading > h3 {
		font-size: 280px;
		top: -150px;
	}

	.welcome-thumb {
		width: 40%;
		bottom: 250px;
		right: 50px;
	}

	.app-download-btn {
		min-width: 160px;
		max-width: 45%;
	}

	/* Body h2 responsive */
	h2 {
		font-size: 36px;
		line-height: 1.3;
	}
}

/* =========================
   Extra Large: 1200px +
========================= */
@media (min-width: 1200px) {
	.menu_area .navbar-brand {
		font-size: 48px;
	}

	.wellcome-heading > h2 {
		font-size: 72px;
	}

	.wellcome-heading > h3 {
		font-size: 300px;
		top: -180px;
	}

	.welcome-thumb {
		width: 40%;
		bottom: 250px;
		right: 60px;
	}

	/* Body h2 responsive */
	h2 {
		font-size: 40px;
		line-height: 1.3;
	}
}
