/* Responsive Styles Laptop/ Desktop (Up to 1400px) */
@media only screen and (max-width: 1400px) {
	.tr_search_filter .adut_box .nice-select, .tr_search_location .nice-select, .tr_search_filter input {
		width: 150px;
	}
}

/* Responsive Styles Laptop/ Desktop (Up to 1366px) */
@media only screen and (max-width: 1366px) {
	#tr_header .container{
		padding: 0 40px;
		max-width: 100%;
	}
	.main-menu li a{
		font-size: 16px;
	}
	.header_right {
		gap: 20px;
	}
	.header_right .call_us {
		gap: 16px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.header_right .chat_us {
		gap: 16px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.header_right .green_btn{
		padding: 10px 27px;
	}
}

/* Responsive Styles for Tablet (Up to 1199px) */
@media only screen and (max-width: 1199px) {
	
	.header_right .call_us::before,
	.header_right .call_us::after,
	.header_right .chat_us::before,
	.header_right .chat_us::after {
		display: none;
	}
	.header_right {
		gap: 25px;
	}
}

/* Responsive Styles for Tablet and Mobile (Up to 1024px) */
@media only screen and (max-width: 1024px) {

}
/* For screens larger than 1024px */
@media (min-width: 1025px) {

}

/* For screens 991px */
@media only screen and (max-width: 991px) {
	.slider_item h1.heading {
		font-size: 60px;
	}
	.header_right {
		gap: 20px;
	}
	.tr_search_filter .d-flex.justify-content-center {
		display: block!important;
	}
	.tr_search_filter .adut_box .nice-select, 
	.tr_search_location .nice-select, 
	.tr_search_filter input {
		width: 100%;
	}	
	.tr_search_filter .check_out,
	.tr_search_filter .adut_box{
		margin-top: 15px;
	}
	.tr_search_filter button {
		margin-top: 15px;
	}
	.slider_item {
		padding: 120px 0 299px;
	}
	.tr_search_filter form {
		transform: translateY(-200px);
		margin-bottom: -120px;
	}	
	.testimonials_image {
		padding-bottom: 30px;
	}	
	
}

/* For screens 768px */
@media only screen and (max-width: 768px){
	#tr_header {
		padding: 15px 0 5px;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: var(--white);
		z-index: 1000;
		box-shadow: 0 2px 10px rgba(0,0,0,0.2);
	}
	#tr_header .container{
		max-width: 100%;
		padding: 0 20px;
	}
	#tr_header .col-xl-2.col-md-3.align-self-center{
		text-align: center;
	}
	.site_logo {
		width: 150px;
		display: none;
		margin-bottom: 20px;
	}
	.header_right.d-flex{
		display: block!important;
	}
	.header_right .call_us.d-flex{
		float: right;
	}

	/* Hide chat button on mobile devices */
	.header_right .chat_us {
		display: none !important;
	}
	
	.header_right .header__hamburger{
		float: left;
	}
	.header_right.justify-content-end{
		justify-content: center !important;
	}
	#tr_header .green_btn {
		display: none;
	}
	.header_right .call_us {
		padding-left: 30px;
		padding-right: 1px;
	}	
	.header_right .chat_us {
		display: none;
	}
	.header_right .call_us::before {
		display: none;
	}

	/* Add top padding to body to compensate for fixed header */
	body {
		padding-top: 100px;
	}
	.slider_item h1.heading {
		font-size: 45px;
	}	
	.about_badge,
	.about_shape{
		display: none;
	}	
	
	.contact-form {
		padding-left: 0;
		padding-top: 80px;
	}
	.footer_about {
		margin-bottom: 30px;
	}	
}
/* For screens 534px */
@media (max-width: 534px) {
	.harrow{
		display: none;
	}
}
/* For screens 480px */
@media (max-width: 480px) {
	.slider_item {
		padding: 100px 0;
		height: 680px;
	}	
	.slider_item h1.heading {
		font-size: 40px;
	}	
	.offcanvas__info {
		width: 300px;
	}
	.tr_search_filter .d-flex.justify-content-center {
		display: none !important;
	}
	.slider_item {
		padding: 60px 0;
	}	
	.trcategory_slider .owl-nav.disabled{
		display: none!important;
	}
	.travel_category{
		padding-top: 100px;
	}
	.about_btm{
		display: block!important;
	}
	.about_btm .phone_number{
		margin-left: 0;
		margin-top: 15px;
	}
}

/* For screens 450px */
@media (max-width: 450px) {
	.offcanvas__info {
		width: 300px;
	}

}

/* Mobile Responsive Styles for Feature Items */
@media (max-width: 768px) {
	/* Center-align feature items on mobile */
	.feature_item {
		text-align: center;
		margin-bottom: 30px;
		padding: 25px 20px;
		border-radius: 20px;
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.feature_item:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 30px rgba(99, 171, 69, 0.15);
	}

	.feature_item i {
		font-size: 50px;
		margin-bottom: 20px;
		background: linear-gradient(135deg, var(--green) 0%, #4a8c2a 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: #ffc107;
		background-clip: text;
		display: block;
	}

	.feature_item h3 {
		font-size: 18px;
		margin-bottom: 15px;
		color: var(--title);
		font-weight: 600;
	}

	.feature_item p {
		font-size: 14px;
		line-height: 1.6;
		color: var(--body);
		margin-bottom: 0;
	}

	/* Ensure proper spacing between feature items */
	.feature_item .feature_content {
		padding: 0;
	}
}

/* Callback Modal Mobile Responsiveness */
@media (max-width: 768px) {
	.callback-modal .modal-dialog {
		margin: 15px;
		max-width: calc(100% - 30px);
	}

	.callback-modal .modal-content {
		border-radius: 15px;
	}

	.callback-modal .modal-header {
		padding: 20px 20px 15px;
	}

	.callback-modal .modal-title {
		font-size: 20px;
	}

	.callback-modal .modal-title i {
		margin-right: 10px;
		font-size: 18px;
	}

	.callback-modal .modal-body {
		padding: 25px 20px;
	}

	.callback-modal .modal-body .text-center {
		margin-bottom: 25px;
	}

	.callback-modal .modal-body .bg-light {
		width: 70px !important;
		height: 70px !important;
	}

	.callback-modal .modal-body .bg-light i {
		font-size: 2rem !important;
	}

	.callback-modal .form-control {
		padding: 10px 14px;
		font-size: 14px;
	}

	.callback-modal .btn-primary {
		padding: 12px 20px;
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.callback-modal .modal-dialog {
		margin: 10px;
		max-width: calc(100% - 20px);
	}

	.callback-modal .modal-header {
		padding: 15px 15px 12px;
	}

	.callback-modal .modal-title {
		font-size: 18px;
	}

	.callback-modal .modal-body {
		padding: 20px 15px;
	}

	.callback-modal .modal-body .bg-light {
		width: 60px !important;
		height: 60px !important;
	}

	.callback-modal .modal-body .bg-light i {
		font-size: 1.8rem !important;
	}
}