@media screen and (max-width:980px) {
	h1 {
		font-size: 35px;
		line-height: 40px
	}

	h2, .editor-content h2 {
		font-size: 24px;
		line-height: 30px;
	}

	h3, .editor-content h3, .event-slider .destination-item h4 {
		font-size: 21px
	}

	h4, .editor-content h4 {
		font-size: 18px
	}

	.editor-content ul {
		padding: 0 0 15px 25px
	}

	.half-width, .col-3, .col-7, .col-8, .col-4 {
		width: 100%;
		padding: 0;
		flex-grow: 1
	}

	header#header .row {
		padding-left: 10px;
		padding-right: 10px
	}

	.menu-icon {
		margin-right: 10px;
		width: 38px;
		height: 38px;
		border: 1px solid #d2edeb;
		background: #f1f9f9;
		display: flex;
		align-items: center;
		border-radius: 30px;
		justify-content: center;
	}

	ul.main-menu li a:after {
		bottom: -1px;
	}

	.menu-icon img {
		height: 21px;
		width: 21px
	}

	#header {
		height: auto;
	}

	a.site-logo {
		width: 100px;
	}

	nav.navbar {
		position: fixed;
		top: 0;
		left: -100%;
		width: 280px;
		height: 100vh;
		background: #fff;
		flex-direction: column;
		align-items: flex-start;
		padding: 80px 20px 20px;
		box-shadow: 2px 0 10px rgb(0 0 0 / .1);
		transition: left 0.3s ease;
		z-index: 1000;
		overflow-y: auto
	}

		nav.navbar.active {
			left: 0
		}

	ul.main-menu {
		flex-direction: column;
		width: 100%;
		gap: 0;
		align-items: stretch;
		margin-bottom: 20px
	}

	.header-btns {
		margin-left: auto
	}

	.login-box {
		margin: 0;
	}

	ul.main-menu li {
		width: 100%;
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #f0f0f0
	}

		ul.main-menu li > a {
			padding: 15px 0;
			font-size: 16px;
			display: block;
			width: 100%
		}

	.header-btns .dropdown-input input {
		font-size: 15px;
	}

	.header-btns .dropdown-input {
		padding: 8px 0;
		gap: 5px;
		max-width: 83px;
	}

	.header-btns .my-dropdown::after {
		right: 8px;
	}

	.login-box a {
		padding: 4px 10px 6px 30px;
		background: #f1f9f9 url(../images/user-icon.png) no-repeat 10px 8px;
		background-size: 12px;
	}

		.login-box a:hover {
			background: #f1f9f9 url(../images/user-icon.png) no-repeat 10px 8px;
			background-size: 12px;
		}

	.header-btns .dropdown-input input {
		width: 100%;
	}

	.mobile-overlay {
		display: none;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100%;
		background: rgb(0 0 0 / .5);
		z-index: 11
	}

		.mobile-overlay.active {
			display: block
		}

	.inner-footer .f-logo {
		padding-bottom: 0
	}

	.inner-footer ul li {
		padding: 0 8px
	}

	.main-search .search-btn {
		width: 100%;
		height: 40px;
		border-radius: 10px;
		position: relative
	}

	.search-inputs {
		border-radius: 10px;
		padding: 10px;
		margin: 12px 0 15px
	}

	.search-middle {
		gap: 15px;
		margin: 15px 0
	}

	.field-holder {
		padding: 10px 0;
		border-left: none;
		border-bottom: 1px solid #ddd
	}

	.search-top .field-holder {
		min-width: 250px
	}

	.search-middle.full-package .my-dropdown.active .my-options {
		width: 118%;
		left: auto;
		right: -10px;
		text-align: left
	}

	.transport-results .transport-cards {
		width: 100%
	}

	.transport-results .cards-header, .transport-results .transport-info {
		padding: 10px 20px
	}

	ul.ful-pkg-lists {
		margin: 0
	}

	li.list-full-row h4 {
		font-size: 17px
	}

	li.list-full-row .left-holder {
		gap: 6px
	}

	li.list-full-row, li.list-full-row .right-holder {
		gap: 12px
	}

	.transport-ful-pkg-result {
		margin-top: 0
	}

	ul.transpt-opt-list li {
		padding: 8px 12px;
		border-radius: 0 50px 50px 0;
		font-size: 15px
	}

	ul.transpt-opt-list {
		border-right: none;
		border-left: 3px solid var(--primary-color)
	}

	.search-top .filter-radio label {
		min-width: 100px
	}

	.transport-serch-result ul.ful-pkg-lists li.list-full-row {
		padding: 12px 0
	}

	.transport-serch-result .right-holder h4:first-child {
		min-width: 90px
	}

	.required-documentds {
		padding: 30px 20px
	}

	.visa-list-holder {
		padding: 20px 0;
		gap: 15px
	}

	.services-lists .visa-list-holder {
		gap: 15px
	}

	.visa-list-holder .middle-holder ul, .visa-search-list {
		margin-bottom: 10px
	}

	.visa-list-holder .middle-holder {
		flex: 1;
		min-width: 250px
	}

	.visa-list-holder .right-holder {
		margin-left: 60px
	}

	.services-lists .visa-list-holder {
		margin: 10px 0
	}

		.services-lists .visa-list-holder .middle-holder {
			padding-right: 0
		}

	.transport-ful-pkg-result.services-lists [data-content] {
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: all .5s ease-in-out
	}

		.transport-ful-pkg-result.services-lists [data-content].active {
			max-height: fit-content;
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
			position: relative
		}

	ul.transpt-opt-list li::after {
		content: '';
		position: absolute;
		right: 12px;
		transform: translateY(50%) rotate(270deg);
		bottom: 50%;
		width: 13px;
		height: 13px;
		background: url(../images/arrow-down.webp);
		background-size: cover;
		z-index: 1
	}

	ul.transpt-opt-list li.active:after {
		transform: translateY(50%) rotate(0deg)
	}

	.hotel-details-holder {
		flex-wrap: wrap;
		border: none;
	}

	.hotel-price-holder {
		border-top: 1px solid lightgray;
		padding: 10px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 15px;
	}

		.hotel-price-holder h3 {
			margin: 0;
		}

	.hotel-image img, .hotel-image {
		width: 100%;
		height: 210px;
		border-radius: 10px 10px;
	}

	.hotels-detail-wrap {
		padding: 0;
	}

	.col-4:has(.hotel-filters) {
		width: 100%;
	}

	.full-width.search-results-number > h3 {
		font-size: 18px;
	}

	.full-width.search-results-number .show-map-btn {
		gap: 5px;
		padding: 7px;
	}

	.umrah-decorative-images {
		display: none;
	}

	.hero-banner.home-banner .search-inputs {
		background: #fff;
		border-radius: 50px;
		padding: 13px 60px 13px 10px;
		height: 62px;
		margin: 10px 0 15px 0;
		position: relative;
	}

	.hero-banner.home-banner .field-holder img {
		width: 20px;
		height: 20px;
	}

	.hero-banner.home-banner .search-btn {
		width: 62px;
		height: 62px;
		border-radius: 0 50px 50px 0;
		position: absolute;
	}

	ul.search-steps-bar {
		margin: 10px -10px 20px 10px;
	}

		ul.search-steps-bar:after {
			width: 91%;
			top: 18px;
			left: -13px;
		}

		ul.search-steps-bar li {
			font-size: 14px;
			padding-top: 25px;
			margin-top: -25px;
		}

	.hero-banner.home-banner .search-btn img {
		height: 20px;
		width: 20px;
	}

	.search-middle .toplabel input:focus + label, .search-middle .toplabel input:not(:placeholder-shown) + label {
		font-size: 12px !important;
		padding-bottom: 0;
		top: 2px;
		left: 4px;
	}

	.hero-banner.home-banner .search-middle {
		margin: 0;
	}

		.hero-banner.home-banner .search-middle .field-holder {
			border: none;
			gap: 0;
			padding: 0;
		}

		.hero-banner.home-banner .search-middle .toplabel label {
			text-align: left;
			font-size: 16px;
		}

	.bg-wraper {
		margin-top: 90px;
	}

		.bg-wraper::before {
			height: 110px;
			background-size: 100%;
			transform: translateY(-52%);
		}

	.destination-card {
		height: 320px;
	}

	.destination-item {
		flex: 0 0 100%;
	}

	.tour-type-boxes {
		gap: 15px;
		margin: 25px 0;
	}

	.activiy-inner-boxes:first-child .tour-image-holder:first-child {
		margin-bottom: 15px;
	}

	.activiy-inner-boxes .tour-image-holder {
		height: 280px !important;
	}

		.activiy-inner-boxes .tour-image-holder .f-caption {
			left: 10px;
			top: 30px;
			width: 80%;
		}

	.activiy-inner-boxes .f-caption span {
		font-size: 14px;
		top: -12px;
		padding: 2px 25px 2px 15px;
	}

	.review-box h2 {
		font-size: 25px;
	}

	.review-box::before {
		left: 25px;
		top: -35px;
		height: 70px;
		width: 77px;
	}

	.review-box {
		padding: 38px 20px;
		margin-bottom: 0;
	}

	.trips-slider-track {
		margin-top: 5px;
	}

	.trips-review-card {
		padding: 0 15px;
	}

	.news-listing-wraper {
		gap: 15px;
	}

		.news-listing-wraper .news-listing {
			width: 100%;
			margin: 0;
		}

	.news-listing .image-holder {
		width: 97px;
		height: 85px;
	}

	.news-listing .content-holder span {
		font-size: 13px;
	}

	.news-listing .content-holder h4 {
		font-size: 16px;
		line-height: 1.5;
	}

	.colums-wraper .bx-umrah-links {
		height: auto;
	}

	.event-slider .slider-butns-box {
		padding: 0px 0px 8px 10px;
	}

	.list-items-link {
		gap: 10px 12px;
	}

		.list-items-link > a {
			width: calc(50% - 6px);
		}


	/* For Packages Details Listing Page  */

	.packages-detail-wrap {
		padding: 15px;
		padding-bottom: 130px;
		margin-bottom: 15px;
		position: relative;
	}

		.packages-detail-wrap p {
			font-size: 14px;
			line-height: 1.45;
		}

		.packages-detail-wrap span {
			font-size: 12px;
		}

		.packages-detail-wrap h4 {
			font-size: 16px;
			line-height: 1.35;
		}

		.packages-detail-wrap .pkg-top-row .pkg-left-side,
		.packages-detail-wrap .pkg-top-row .pkg-rgiht-side {
			width: 100%;
			min-width: 0;
		}

		.packages-detail-wrap .pkg-top-row .pkg-rgiht-side {
			position: absolute;
			right: 0;
			padding: 10px 15px 0;
			bottom: 15px;
			border-top: 2px solid #c9c9c9;
		}

		.packages-detail-wrap .pkg-top-row h3 {
			font-size: 20px;
		}

		.packages-detail-wrap .pkg-tabs-button {
			margin-top: 12px;
			order: 3;
		}

			.packages-detail-wrap .pkg-tabs-button li {
				font-size: 16px;
				padding: 8px 14px;
			}

		.packages-detail-wrap .butns-rows {
			flex-wrap: wrap;
			margin-top: 8px;
		}

		.packages-detail-wrap .inclusion-list {
			flex-wrap: wrap;
			gap: 6px;
		}

	ul.inclusion-list,
	.pkg-popup-content {
		padding: 20px 15px;
	}

	.packages-detail-wrap .inclusion-list li {
		width: 30%;
		min-width: 80px;
		flex-grow: 1;
		padding: 6px 10px 10px;
		min-height: 75px;
		align-content: end;
		border-radius: 5px;
		background: white;
	}

	.star-rating img {
		width: 15px;
	}

	.packages-detail-wrap .inclusion-list li img {
		width: 26px;
		margin-bottom: 4px;
	}

	.hotel-pkg-wraper {
		flex-wrap: wrap;
	}

	.packages-detail-wrap .hotel-pkg-list {
		gap: 10px;
		width: 100%;
	}

	.packages-detail-wrap .hotel-pkg-image {
		width: 100px;
		height: 110px;
	}

	.packages-detail-wrap .hotel-pkg-list .star-rating,
	.packages-detail-wrap .hotel-pkg-benefits {
		margin-top: 5px;
	}

		.packages-detail-wrap .hotel-pkg-benefits p {
			font-size: 13px;
		}

	.packages-detail-wrap .trip-plan-list {
		padding: 12px;
		gap: 12px;
	}

		.packages-detail-wrap .trip-plan-list li {
			width: 100%;
			align-items: flex-start;
			gap: 10px;
		}

			.packages-detail-wrap .trip-plan-list li::before {
				width: 30px;
				height: 30px;
				font-size: 15px;
				flex: 0 0 30px;
			}

			.packages-detail-wrap .trip-plan-list li img {
				max-width: 28px;
				margin-top: 2px;
			}

			.packages-detail-wrap .trip-plan-list li p {
				font-size: 13px;
			}

	.mobile-veiw-filter {
		content: '';
		inset: 0;
		position: fixed;
		z-index: 11;
		background-color: rgba(35, 35, 35, 0.418);
		opacity: 0;
		visibility: 0;
		pointer-events: none;
	}

		.mobile-veiw-filter.active {
			opacity: 1;
			visibility: 1;
			pointer-events: all;
		}

		.mobile-veiw-filter .common-filters {
			position: fixed;
			top: 0;
			bottom: 0;
			right: 0;
			border-radius: 15px 0 0 15px;
			width: 80%;
			overflow: auto;
			transform: translateX(100%);
			max-height: 100vh;
			padding: 50px 15px;
		}


		.mobile-veiw-filter .popup-close-btn {
			left: 11%;
			z-index: 1;
			top: 17px;
		}

	#filter-open-btn {
		position: fixed;
		bottom: 30%;
		right: 0;
		z-index: 11;
		border-radius: 30px 0 0 30px;
		background-color: #1ca69e;
		padding: 8px 15px;
		transform: translateX(100%);
		color: white;
		display: flex !important;
		gap: 8px;
		align-items: center;

		&:hover {
			background-color: #fbc165;
		}
	}

		.mobile-veiw-filter.active .common-filters,
		#filter-open-btn.active {
			transform: translateX(0%);
		}

		#filter-open-btn img {
			width: 22px;
			filter: brightness(0) invert(1);
		}

	.flt-slider-wraperye {
		margin-top: 0;
	}
	.save-button-andualrs {
		position: relative !important;
		right: 0 !important;
	}
	.search-holder .inner-box .field-area .new-route .route-box .inner-route .select-route{
		padding: 0;
	}
		.search-holder .inner-box .field-area .new-route .route-box .inner-route .select-route button.save-btn {
			margin: 0 !important;
			height: auto !important;
			padding: 6px 12px;
		}
	.search-holder .inner-box .field-area .new-route .route-box .inner-route .chose-nights{
		width:100%;
		margin: 0;
	}
	.search-holder .inner-box .field-area select {
		background-size: 10px;
		background-position: right 3px center;
	}
	.main-hide {
		display: none;
	}

		.main-hide.active {
			display: block;
		}
}