@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
	}

	li.list-full-row h4 {
		font-size: 17px
	}

	li.list-full-row .left-holder {
		gap: 8px;
		flex: 1 1 100%;
		align-items: start;
		justify-content: left;
	}

	ul.ful-pkg-lists img {
		width: 50px;
	}

	li.list-full-row, li.list-full-row .right-holder {
		gap: 12px;
		flex: 1 1 100%;
	}

	ul.transpt-opt-list li.list-full-row.active, ul.transpt-opt-list li.list-full-row:hover {
		background: transparent;
	}

	.tr-left-text .tr-route-simple {
		font-size: 13px;
		color: gray;
		line-height: 1.4;
	}

	ul.transpt-opt-list li.list-full-row::after {
		display: none;
	}

	.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-bottom: 1px solid lightgray;
		padding: 0px 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 15px;
	}

		.hotel-price-holder h3 {
			margin: 0;
			font-size: 22px;
		}

	.hotel-details-holder h3 {
		margin: 0 0 6px;
		font-size: 22px;
	}

	.hotel-image img, .hotel-image {
		width: 100%;
		height: 210px;
		border-radius: 10px 10px;
	}

	.popup-wrapper .popup-box {
		padding: 20px !important;
	}

	.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;
		}

	ul.ful-pkg-lists {
		margin: 0;
		padding: 0;
	}

		ul.ful-pkg-lists li {
			margin: 0;
			padding: 10px;
			border-radius: 0;
			background-color: transparent;
			flex-wrap: wrap;
		}

	.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%) !important;
		}

		#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;
		}

	/* New Style  */
	.umrah-info-grid {
		grid-template-columns: 1fr;
	}

	.mobile-veiw-filter .popup-close-btn {
		display: flex;
	}
}


@media screen and (max-width: 980px) {
	.hotel-wrap {
		width: 100%;
	}

	.images-holder > img {
		width: 62%;
	}

	.images-holder {
		height: 135px;
	}

	/* Visa nationality / Transport location — full-screen choose popup (Angular city overlay style) */
	body.visa-nationality-open,
	body.transport-location-open,
	body.mobile-airport-open {
		overflow: hidden;
	}

		body.visa-nationality-open #header,
		body.visa-nationality-open .menu-icon,
		body.transport-location-open #header,
		body.transport-location-open .menu-icon {
			z-index: 1 !important;
		}

	.visa-nationality-overlay.mobile-airport-overlay,
	.transport-location-overlay.mobile-airport-overlay {
		position: fixed;
		inset: 0;
		z-index: 111111112;
		background: #fff;
		display: flex;
		flex-direction: column;
		animation: visaNationalitySlideUp 0.25s ease;
	}

	.visa-nationality-overlay[hidden],
	.transport-location-overlay[hidden] {
		display: none !important;
	}

	.visa-nationality-overlay .mobile-airport-inner,
	.transport-location-overlay .mobile-airport-inner {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 16px;
		background: #fff;
		border-radius: 0;
		margin: 0;
		box-sizing: border-box;
	}

		.visa-nationality-overlay .mobile-airport-inner h4.side-heading,
		.transport-location-overlay .mobile-airport-inner h4.side-heading {
			font-size: 20px;
			line-height: 30px;
			color: #080808;
			font-weight: 600;
			margin: 0 0 16px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			text-align: left;
			flex-wrap: nowrap;
			gap: 0;
		}

	.visa-nationality-overlay .mobile-airport-title,
	.transport-location-overlay .mobile-airport-title {
		flex: 1;
		min-width: 0;
		font-size: 20px;
		line-height: 30px;
		font-weight: 600;
		color: #080808;
	}

	.visa-nationality-overlay h4.side-heading a.closs-side,
	.transport-location-overlay h4.side-heading a.closs-side {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		min-width: 30px;
		line-height: 1;
		background: #f1f9f9;
		border: 1px solid #d3edeb;
		border-radius: 50%;
		margin-right: 13px;
		flex-shrink: 0;
		padding: 0;
		text-decoration: none;
		color: inherit !important;
		font-size: 0;
	}

		.visa-nationality-overlay h4.side-heading a.closs-side img,
		.transport-location-overlay h4.side-heading a.closs-side img {
			height: 20px;
			width: 20px;
			max-width: none;
			display: block;
			object-fit: contain;
		}

	.visa-nationality-overlay .mobile-airport-search-bar,
	.transport-location-overlay .mobile-airport-search-bar {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 12px;
		padding: 10px 14px;
		background: #f1f9f9;
		border: 1px solid #1da599;
		border-radius: 12px;
		flex-shrink: 0;
	}

		.visa-nationality-overlay .mobile-airport-search-bar > img,
		.transport-location-overlay .mobile-airport-search-bar > img {
			width: 22px;
			height: 22px;
			flex-shrink: 0;
			filter: brightness(0) saturate(100%) invert(49%) sepia(88%) saturate(358%) hue-rotate(126deg) brightness(91%) contrast(97%);
		}

	.visa-nationality-overlay .mobile-airport-input-wrap,
	.transport-location-overlay .mobile-airport-input-wrap {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

		.visa-nationality-overlay .mobile-airport-input-wrap label,
		.transport-location-overlay .mobile-airport-input-wrap label {
			position: static;
			font-size: 12px;
			color: #666;
			padding: 0;
			margin: 0;
			background: transparent;
		}

		.visa-nationality-overlay .mobile-airport-input-wrap input,
		.transport-location-overlay .mobile-airport-input-wrap input {
			border: 0;
			background: transparent;
			padding: 0;
			margin: 0;
			width: 100%;
			font-size: 16px;
			font-weight: 500;
			color: #000;
			height: auto;
			line-height: 1.35;
			outline: none;
			box-shadow: none;
		}

			.visa-nationality-overlay .mobile-airport-input-wrap input::placeholder,
			.transport-location-overlay .mobile-airport-input-wrap input::placeholder {
				color: #999;
				font-weight: 400;
			}

	.visa-nationality-overlay .mobile-airport-clear,
	.transport-location-overlay .mobile-airport-clear {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border: 0;
		border-radius: 50%;
		background: #d0e8e6;
		color: #1da599;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
		padding: 0;
		flex-shrink: 0;
	}

	.visa-nationality-overlay .mobile-airport-results,
	.transport-location-overlay .mobile-airport-results {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		width: 100% !important;
		flex: 1;
		overflow-y: auto;
		max-height: none !important;
		margin: 0;
		padding: 0 0 16px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		-webkit-overflow-scrolling: touch;
		list-style: none;
		background: #fff;
	}

		.visa-nationality-overlay .mobile-airport-results li,
		.transport-location-overlay .mobile-airport-results li {
			padding: 12px 14px;
			cursor: pointer;
			border-bottom: 1px solid #eef1f5;
			color: #000 !important;
			font-size: 15px;
			font-weight: 500;
		}

			.visa-nationality-overlay .mobile-airport-results li.visa-nationality-empty,
			.transport-location-overlay .mobile-airport-results li.transport-location-empty {
				cursor: default;
				color: #999 !important;
				font-weight: 400;
				border-bottom: 0;
			}

			.visa-nationality-overlay .mobile-airport-results li:not(.visa-nationality-empty):hover,
			.visa-nationality-overlay .mobile-airport-results li:not(.visa-nationality-empty).active,
			.transport-location-overlay .mobile-airport-results li:not(.transport-location-empty):hover,
			.transport-location-overlay .mobile-airport-results li:not(.transport-location-empty).active {
				background-color: #1ca69e;
				color: #fff !important;
			}

	/* Hide inline dropdowns on mobile — overlay handles them */
	.visa-search-bar .visa-nationality-dropdown.active .my-options,
	.transport-search-bar .transport-location-dropdown.active .my-options {
		display: none !important;
	}

	#transportResults {
		min-height: auto !important;
	}

	.enquiry-field-group label {
		margin-bottom: 5px;
	}

	.enquiry-fields-grid {
		gap: 12px;
	}
}

.visa-nationality-overlay.mobile-airport-overlay[hidden],
.transport-location-overlay.mobile-airport-overlay[hidden] {
	display: none !important;
}

@keyframes visaNationalitySlideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}
