@media (max-width: 768px) {
	/* Mobile menu (offcanvas) - slides in from right on mobile devices */
	.offcanvas-collapse {
		position: fixed !important;
		/* position: relative; */
		/* top: 2.9rem; */
		top: 4rem !important;
		/* adjusts the height between the top of the page and the offcanvas menu */
		bottom: 0;
		left: 100%;
		/* Initially hidden off-screen to the right */
		width: 100%;
		padding-right: 1rem;
		padding-left: 1rem;
		overflow-y: auto;
		visibility: hidden;
		background-color: rgb(219 152 84 / 95%);
		transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
		transition: transform .3s ease-in-out, visibility .3s ease-in-out;
		transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
	}

	/* When menu is open, slide it in from the right to cover the screen */
	.offcanvas-collapse.open {
		visibility: visible;
		-webkit-transform: translateX(-100%);
		/* Move left by full width to show menu */
		transform: translateX(-100%);
	}


	#navbar .nav-item.dropdown.show .nav-link,
	#navbar .nav-item .nav-link:hover,
	#navbar .nav-item .nav-link.active {
		color: var(--dark) !important;
		background: var(--light-yellow) !important;
	}
	
	.hero-slider .swiper-slide {
        height: 50vh;
    }

	.offcanvas-collapse {
		position: relative;
		height: 100vh;
		top: 0;
	}

	.hero-caption {
		bottom: 4rem;
	}

	.hero-caption .h1-large {
		font-size: 2.65rem;
		line-height: 36px;
	}

	.video-wrapper video.hero-bg-video {

		object-fit: contain;
		/* object-position: center center; */
	}
	.header1 {
		padding-top: calc(56px + 10px);
		/* navbar height + small gap */
	}

	.hero-slider .swiper-slide {
        height: 50vh;
    }

	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}

	.blog-page.blog-page-lists .blog-item img {
		width: 25% !important;
	}
}

@media (max-width: 520px) {
	.hero-caption {
		bottom: 2rem;
	}

	.hero-slider .swiper-slide img {
		object-fit: cover;
		object-position: right;
	}

	.video-wrapper video.hero-bg-video {

		object-fit: contain;
		/* object-position: center center; */
	}
	.header1 {
		padding-top: calc(56px + 10px);
		/* navbar height + small gap */
	}

	.hero-caption .h1-large {
		font-size: 2rem;
		line-height: 32px;
	}

	.swiper-button-prev,
	.swiper-button-next {
		display: none;
	}

	.hero-slider .swiper-slide {
        height: 30vh;
    }

	.hList-services .container-2 {
		margin-bottom: 1rem !important;
	}

	.flip-card-inner {
		min-height: 120px;
	}

	.flip-card-front.services {
		margin-bottom: 0 !important;
	}

	.services {
		padding: 0.5rem;
	}

	
	.services .icon {
		margin-bottom: 1rem;
	}

	.services .media-body h3 {
		font-size: 1rem;
		margin-bottom: 0px !important;
	}


	.hList-services .services,
	.services-back-content {
		margin-top: 1rem;
		background: var(--light-yellow);
		margin-bottom: 1rem;
	}
	

	.more-info-section {
		border-radius: 0;
	}

	.watch-section .container {
		padding-top: 8rem !important;
	}

	.blog-page {
		padding: 1.5rem 0.35rem;
	}

	.blog-page.blog-page-list .blog-item img {
		width: 100% !important;
	}

	.blog-page.blog-page-lists {
		position: relative;
	}

	.blog-page.blog-page-lists .blog-item img {
		width: 100% !important;
	}
}